Ugly sweater day is the third Friday of December. This year that is December 20th. Learn about Ugly sweater day on National Day calendar page..

For the past few years I've made CSS art versions of the LEGO Figure ugly sweaters. See the previous year under the series links. This 2024 Ugly Sweater features Leia and the battle of Echo base from The Empire Strikes Back.

I started with my sweater template from previous years. There's a basic torso. Inside torso in the featured character for this sweater. Inside the character div are the two sides of the battle Rebels and Empire. Inside those divs are the vehicles of the battle.

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

.ground{
    width: 100%;
    height: 2px;
    background: white;
}


.rebels {
    width: 550px;
    height: 375px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

.empire {
    width: 550px;
    height: 375px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    flex-direction: row;
}





  
  
  Rebels


The rebel side features a Cannon. As far as the shape goes it's basically stacking rectangles. The turret contains The cannon-lid, gun and base.









.turret{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;

    margin-right: 40px;
    margin-bottom: -280px;

}

.cannon_lid{
    width: 80px;
    height: 10px;
    border:4px white solid;
    margin-bottom: 32px;
    margin-left: 11px;
        position: absolute;
        z-index: 1;
        background: var(--sweaterblue);
}

.gun{
    width: 60px;
    height: 5px;
    background: white;
    position: absolute;
    margin-bottom: 32px;
    margin-left: 125px;
}

.turret_base{
    width: 30px;
    height: 40px;
    border: 4px white solid;
    border-top: 4px white dotted;
    position: absolute;
    margin-top: 40px;
}





  
  
  Empire


The Empire side of image is an AT-AT or Imperial Walker. It's a tank that walks. It made of the head, body, and legs.









.at-at{
    display: grid;
    justify-content: center;
    align-items: center;
    position: relative; 
    background: var(--sweaterblue);
    margin-top: 145px;
}

.at-at_main{
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative; 
    position: absolute;
}




The head and body parts are rectangles moved around a bit. The legs are what took more of the work. They had to be grouped in parts and rotated. First they work grouped by upper and lower legs, the paired by front and back legs.







The legs all start with the leg class and are the same shape. Some of the upper legs get another class called bent. This uses transform: rotate to change the leg shape. If a leg is bent then the lower part of the leg gets the lowerbent class, which just moves that part of the leg forward.



.legs{
    width: 10px;
    height: 50px;
    background: var(--sweaterblue);
    border: 2px solid white;
}
.bent{
    transform: rotate(45deg);
    height: 40px;
}

.lowerbent{
    margin-left: -10px;
}












  
  
  Final Image





  
  
  Conclusion


This one was a challenge. I learned that I should remove my pseudo code before I blog. When I planned this out I marked legs are "legs",   "upper", "bent". Lowerbent", "lowerleg", and straight. I didn't make classes for all of those. Some were already covered by their parent class.

Thank you for reading.