day 03: add sprites (#8)

assets/styles.css

@@ -51,7 +51,7 @@ figure {
 }
 
 .wrapper {
-  max-width: 960px;
+  max-width: 62rem;
   display: grid;
   row-gap: 2rem;
   grid-template-rows: auto 1fr auto;
@@ -83,7 +83,7 @@ figure {
 }
 
 .gallery {
-  --image-size: 256px;
+  --image-size: 320px;
   list-style-type: none;
   padding-inline-start: 0;
   display: grid;
@@ -96,8 +96,22 @@ figure {
   max-width: var(--image-size);
 }
 
+@media (min-width: 62rem  ) {
+  .gallery li.wide {
+    --image-size: 640px;
+    grid-column: span 2;
+  }
+  .gallery li.wide img {
+    width: 100%;
+  }
+}
+
 .gallery figure {
   width: var(--image-size);
   margin: 0;
   padding: 0;
 }
+
+.gallery img {
+  max-width: 100%;
+}

index.html

@@ -152,11 +152,67 @@ <h2>Day Two: Taming the lines</h2>
       </li>
     </ul>
 
+    <h2>Day Three: Animations and backgrounds</h2>
+
+    <p>So far we had been focusing on characters, so today we opted for exploring backgrounds (including tiles) and also to keep dabbing into animations.</p>
+
+    <ul class="todo">
+      <li>Explore drawing backgrounds</li>
+      <li>Learn about making tiles for backgrounds</li>
+      <li>Make some animations</li>
+    </ul>
+
+    <p>And this is what we made!</p>
+
+    <ul class="gallery">
+      <li>
+        <figure>
+          <img src="assets/images/karlach-v9.png" width="128" height="128" class="pixel" alt="Karlach"/>
+          <figcaption><b>Natacha:</b> Karlach from <i>Baldur's Gate 3</i>.</figcaption>
+        </figure>
+      </li>
+      <li>
+        <figure>
+          <img src="assets/images/spiderman-walk.gif" width="154" height="138" class="pixel" alt="Spiderman walking"/>
+          <figcaption><b>Dani:</b> Walking animation for Spiderman</figcaption>
+        </figure>
+      </li>
+      <li>
+        <figure>
+          <img src="assets/images/cactus-animated.gif" width="112" height="196" class="pixel" alt="Animated cactus in a pot"/>
+          <figcaption><b>Willy:</b> Animated cactus (part of larger scene)</figcaption>
+        </figure>
+      </li>
+      <li>
+        <figure>
+          <img src="assets/images/eva-portrait.png" width="320" height="260" class="pixel" alt="Self-portrait (Eva)"/>
+          <figcaption><b>Eva:</b> A self-portrait.</figcaption>
+        </figure>
+      </li>
+      <li>
+        <figure>
+          <img src="assets/images/avatar-rock.gif" width="256" height="256" class="pixel" alt="Self-portrait (Carmen) playing the guitar"/>
+          <figcaption><b>Carmen:</b> Self-portrait, with an animation rocking the guitar!</figcaption>
+        </figure>
+      </li>
+      <li>
+        <figure>
+          <img src="assets/images/island.png" width="264" height="264" class="pixel" alt="Grass tiles"/>
+          <figcaption><b>Eva:</b> Grass tiles forming an island.</figcaption>
+        </figure>
+      </li>
+      <li class="wide">
+        <figure>
+          <img src="assets/images/mass-effect.png" style="aspect-ratio: 640/424; width: 100%" class="pixel" alt="Shepard in a city (side-scroll view)"/>
+          <figcaption><b>Belén:</b> Shepard (<i>Mass Effect</i>) in a city setting.</figcaption>
+        </figure>
+      </li>
+    </ul>
   </main>
 
   <footer class="main-footer">
     <hr class="main-footer__separator">
-    <p>With ♥︎ from <a href="https://github.com/evamarco">Eva</a>, <a href="https://github.com/daniel-herrero">Dani</a>, Willy, <a href="https://github.com/NatachaMenjibar">Natacha</a> and <a href="https://ladybenko.net">Belén</a>.</p>
+    <p>With ♥︎ from <a href="https://github.com/evamarco">Eva</a>, <a href="https://github.com/daniel-herrero">Dani</a>, Willy, <a href="https://github.com/NatachaMenjibar">Natacha</a>, <a href="https://ladybenko.net">Belén</a> and <a href="https://www.carmenansio.dev">Carmen</a>.</p>
   </footer>
 </div>
 </body>