Ugly Sweater CSS: Lars Homestead

This is the Lars Homestead on Tatooine. Home of Owen and Beru Lars and Luke Skywalker.

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 Luke and the homestead where he grew up from the original Star Wars movie.

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 InnerSweater div are the various parts of the Lars home.

<div class="torso"> 
   <div class="InnerSweater">
     <div class="house"></div>  
     <div class="collector"></div>  
   </div character>
</div>

.InnerSweater {
    width: 900px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    gap: 50px;
    column-gap: 40px;
}

.wrapper {
    width: 100%;
    display: flex;
    flex-direction:column;
    justify-content: center;
    align-items: center;
    gap: 25px;
}

The flex-direction:column; allows the parts of the homestead to drop in line across the screen.

House

The House and its parts are modified rectangles. By adjusting the borders radii the rectangles were given curves at the top. The bottom borders were made transparent so they don't appear on screen.

.house {
    width: 230px;
    height: 170px;
    background: var(--sweatergreen);
    border: 8px white double;
    border-top-right-radius: 40%;
    border-top-left-radius: 40%;
    margin-right: 580px;
    margin-top: 235px;
    position: absolute;
    border-bottom-color: transparent;
    display: flex;
    overflow: visible;
    justify-content: space-around;
}

.houseBack {
    width: 30px;
    height: 85px;
    background: var(--sweatergreen);
    border: 4px white solid;
    border-bottom-color: transparent;
    border-top-left-radius: 40%;
    margin-left: -21px;
    margin-top: 85px;
    position: relative;
}

.housefront {
    width: 120px;
    height: 110px;
    background: var(--sweatergreen);
    border: 4px white double;
    border-top-right-radius: 40%;
    border-top-left-radius: 40%;
    margin-left: 166px;
    margin-top: 60px;
    position: relative;
    border-bottom-color: transparent;
    display: flex;
    justify-content: center;
    align-content: flex-end;
    overflow: hidden;
}

.door{
    width: 50px;
    height: 100px;
    background-color: var(--SweaterDarkRed);
    margin-top: 24px;
    border-top-right-radius: 10%;
    border-top-left-radius: 10%;
}

Moisture Vaporator

The Moisture Vaporator is a series of lines and boxes.

        <div class="collector">
            <div class="line"></div>
            <div class="line hort"></div>

            <div class="post">
                <div class="line mid"></div>
            </div>
            <div class="line hort"></div>
            <div class="line"></div>


        </div>

.post {
    width: 40px;
    height: 100px;
    background: var(--sweatergreen);
    border: 4px white solid;
    border-bottom-color: transparent;
    position: relative;
    display: flex;
    justify-content: center;
}

.line {
    width: 6px;
    height: 100px;
    background: white;
    position: relative;
}

Dual Suns

The suns are more rectangles stacked and rotated on top one another.

<div class="sunwrapper">
    <div class="sun1"></div>
    <div class="sun1_mid"></div>
    <div class="sun1 sunRotate"></div>
</div>

.sun1 {
    width: 50px;
    height: 100px;
    background: var(--SweaterDarkRed);
    position: absolute;
}
.sun1_mid {
    width: 70px;
    height: 80px;
    background: var(--SweaterDarkRed);
    position: absolute;
}
.sunRotate{
    transform: rotate(90deg);
    width: 60px;
}

Wrap up

This was an easier build than the Echo base sweater. It took more time to figure out the AT-At legs. The build went much quicker once I started.