Ugly Sweater CSS: Jawa's Back the Return of the Droids.

Previously we saw the LEGO Jawa minifig wearing an Ugly sweater. The Jawa's sweater had a backside with more droids, BB-8 and R2-D2. These droids were in part 1 and part 8 of this series.

The last post, CSS Droids, showed the layout of the sweater. This post is just about the featured droids.

R2-D2

This R2-D2 is almost the same as the one from R2-D2, We wish you a Merry Christmas.. In fact I just changed the shape of his eye, the panels colors, and background colors. He might look smaller due to a few other changes.

1. The torso section is slightly taller on the new green back ground, height: 82% verse height: 75% on blue.
2. The droids are set to align-items: flex-end verses align-items: center on the blue image. That put them a the bottom of the section so lower on the ground.
3. The zoom on the screenshots.

.droids_back {

    align-items: flex-end;
}

.eye {
    height: 20px;
    width: 20px;
    border: 6px solid white;
    background-color: white;
}

.projector {
    height: 14px;
    width: 14px;
    background-color: var(--SweaterDarkRed);
    border-radius: 50%;
    margin-left: 68px;
}

BB-8

BB-8 is made of circles. A semi-circle was stacked on a top of a large circle.

<div class="bb-8_body">
    <div class="bb-8_head">
        <div class="BB_eye"></div>
        <div class="BB_antenna"></div>
        <div class="BB_projector"></div>
    </div>

    <div class="bb-8">
      <div class="BB_circle"></div>
    </div>

</div>

BB's head is a modified rectangle border radius was added to the top left and right to make a dome for its head. The dome was them moved by adjusting the margins so it overlapped the body.

Two circles were added for the face and a bar for the antenna.

.BB-8_body {
    display: flex;
    justify-content: center;
    align-items: baseline;
    flex-direction: column;
}

.BB-8_head {
    width: 100px;
    height: 60px;
    background-color: var(--sweatergreen);
    border: 4px solid white;
    border-top-right-radius: 50%;
    border-top-left-radius: 50%;
    margin-bottom: -18px;
    margin-left: 50px;
    z-index: 2;
    display: flex;
    justify-content: flex-end;

}

The body is a circle with a second one inside. The inner circle has no background color and a groove border.

.BB-8 {
    width: 200px;
    height: 200px;
    background-color: var(--sweatergreen);
    border: 4px solid white;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;

}

.BB_circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 16px var(--SweaterDarkRed) groove;
}

Wrap up

This was mainly re-purposing old code. The main sweater and R2-D2 were reused from previous projects. BB-8 was newly coded but quick since it be done before.

Star Wars Trivia

There was a Star Wars Christmas Album called "Christmas in the Stars". A song on it was "R2D2 we wish you a Merry Christmas" It's children singing to R2D2. It's the first professional recording of John Bongiovi. Know the name?

You may know him as John Bon Jovi of Bon Jovi. That's your music history lesson for the day.

"R2D2 We wish you a Merry Christmas!"