Add day 1 eva + belen

assets/styles.css

@@ -30,16 +30,24 @@ h1 {
 
 h2 {
   font-size: 2rem;
-  /* border-block-end: 2px solid black;
-  display: inline-block; */
   text-decoration: underline;
   text-decoration-thickness: 0.15rem;
   text-underline-offset: 0.5rem;
+  margin-block-start: 3rem;
 }
 
 p, li {
   line-height: 1.5;
-  margin: 1rem 0;
+  margin: 1.5rem 0;
+}
+
+figure {
+  text-align: center;
+}
+
+.pixel {
+  image-rendering: crisp-edges;
+  image-rendering: pixelated;
 }
 
 .wrapper {
@@ -72,4 +80,24 @@ p, li {
 .todo li::marker {
   content: "✔ ";
   font-size: 1.25rem;
-}
+}
+
+.gallery {
+  --image-size: 256px;
+  list-style-type: none;
+  padding-inline-start: 0;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(var(--image-size), 1fr));
+  place-items: center;
+  gap: 1rem;
+}
+
+.gallery li {
+  max-width: var(--image-size);
+}
+
+.gallery figure {
+  width: var(--image-size);
+  margin: 0;
+  padding: 0;
+}

index.html

@@ -14,6 +14,7 @@ <h1>Pixel Art Dojo</h1>
 
   <main>
     <h2>Day Zero: Prep Work</h2>
+    <p><time datetime="2023-12-15">Fri Dec 15</time></p>
     <p>Today was about <b>rallying together</b> and draft a plan for the week.</p>
     <p><b>Tasks</b> for today:</p>
     <ul>
@@ -26,11 +27,56 @@ <h2>Day Zero: Prep Work</h2>
       <li>We tried out pre-compiled binaries and/or compiling from source <a href="https://github.com/LibreSprite/LibreSprite">Libresprite</a>, <a href="https://github.com/Orama-Interactive/Pixelorama">Pixelorama</a> and <a href="https://github.com/aseprite/aseprite">Aseprite</a> (note that Aseprite's source is public but not copyleft).</li>
       <li>We published this site on Github Pages.</li>
     </ul>
+
+    <h2>Day One: Learning the ropes</h2>
+    <p><time datetime="2023-12-18">Mon Dec 18</time></p>
+
+    <p>Today we aimed to get used to pixel art editors and have a dab at making sprites. For that we suggested these activities:</p>
+
+    <ul class="todo">
+      <li><b>Copy pre-existing sprites</b> in our editor of choice, so we could explore it and get used to the tools and features (we chose <a href="https://github.com/LibreSprite/LibreSprite">Libresprite</a> and <a href="https://github.com/Orama-Interactive/Pixelorama">Pixelorama</a>).</li>
+      <li>Draw <b>sprites based on a pre-existing template</b> (for instance, the classic character from <i>Mega Man</i>), as explained <a href="https://www.youtube.com/watch?v=WUlgvNe4BLU">in this video</a>.</li>
+    </ul>
+
+    <p>Here are some of the sprites we copied:</p>
+
+    <ul class="gallery">
+      <li>
+        <figure>
+          <img src="assets/images/rabite.png" width="316" height="160" class="pixel" alt="Rabites"/>
+          <figcaption><b>Eva:</b> Copy of some cute rabites, from <i>Seiken Densetsu 3</i>.</figcaption>
+        </figure>
+      </li>
+      <li>
+        <figure>
+          <img src="assets/images/sonic2-shiny16.png" width="96" height="128" class="pixel" alt="Sonic running"/>
+          <figcaption><b>Belén:</b> Copy of Sonic from <i>Sonic 2</i> (Master System), with the colors of the <a href="https://lospec.com/palette-list/shiny-16">Shiny 16</a> palette.</figcaption>
+        </figure>
+      </li>
+    </ul>
+
+    <p>As for our custom creations, based on a template:</p>
+
+    <ul class="gallery">
+      <li>
+        <figure>
+          <img src="assets/images/bard.png" width="128" height="128" class="pixel" alt="A bard"/>
+          <figcaption><b>Eva:</b> A bard ready to rock!</figcaption>
+        </figure>
+      </li>
+      <li>
+        <figure>
+          <img src="assets/images/otp.png" width="192" height="128" class="pixel" alt="Shepard x Liara" />
+          <figcaption><b>Belén:</b> Shepard and Liara from <i>Mass Effect</i>, based on <i>Mega Man</i>.</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/yamila-moreno">yami</a>, <a href="https://github.com/NatachaMenjibar">Natacha</a> and <a href="https://ladybenko.net">ladybenko</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/yamila-moreno">yami</a>, <a href="https://github.com/NatachaMenjibar">Natacha</a> and <a href="https://ladybenko.net">Belén</a>.</p>
   </footer>
 </div>
 </body>