Ugly Sweater CSS: That's no moon.

On Christmas Eve the last door of the LEGO Advent Calendar was opened. It's Darth Vader in a Death Star ugly sweater. I'm not coding on Christmas Eve. So this post is coming days later.

The sweater is red with white designs. I used a couple shades of red, white, and cornsilk. The red and white by themselves was too jarring so I used the few shades.

I've done a few of these now and have a bit of a template. The featured character goes in the center of the sweater in Character div. The Death Star itself is only 3 divs.

       <div class="character">
         <div class="deathStar">       
            <div class="outer_dish"></div>
            <div class="trench"></div>
          </div>            
       </div>

The character div is for positioning the featured character in this case the Death Star. The Death Star is a black square. I applied border-radius: 50% to make it a circle. The dashed border gives the edge of the circle an 8-bit look. this works because the border color matches the sweater background color. see the image where the border id green you see the border and looses the effect of 8 bit.

.character {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute; 
    overflow: visible;
}


.deathStar {
    background-color: #000000;
    height: 200px;
    width: 200px;
    border-radius: 50%;
    border: 2px dashed #bb3634;
    display: flex;
    justify-content: center;
    align-items: center; 
    overflow: hidden;
    flex-direction: column;
}

The gun dish is much smaller so I used a dotted border. The trench is a straight line across the center of the div, just like Beggar's canyon back home.

.outer_dish {
    background-color: #000000;
    height: 50px;
    width: 50px;
    border-radius: 100%;
    border: 2px dotted #bb3634;
    margin-right: 70px;
    margin-top: -95px; 
}

.trench {
    background-color: #bb3634;
    height: 5px;
    width: 100%;
    position: absolute;
}

That wraps up this short build. Like I said just three divs for the Death Star but some styling makes it a recognizable image.