(ლ ۞ิ ჴ ۞ิ)ლ

www/assets/css/style.css

@@ -25,6 +25,7 @@ body {
   background-size: cover;
 }
 
+/* Header */
 header {
   padding: 5vh 5vw;
   height: 100vh;
@@ -39,12 +40,11 @@ header h1, h2, h3, h4 {
   margin: 2rem 0;
 }
 
+/* Main */
 main {
   padding-bottom: 5vh; /* The same as the footer height */
 }
-
 main section { margin: 5vh 5vw; }
-
 main section article,
 main section nav {
   color: #ddd;
@@ -53,12 +53,15 @@ main section nav {
   background: radial-gradient(circle, rgba(2, 0, 36, .6) 0%, rgba(14, 0, 81, .6) 75%, rgba(19, 0, 112, .6) 100%);
 }
 
-main section article figure { text-align: center; }
+main section article figure { text-align: center; margin: 4em 0}
 main section article figure img { max-width: 75%; }
+main section article figure figcaption { margin: 1em 0; }
+main section article figure time { display:block; text-align: right; font-size: small; }
 main section a { color: #ddd; text-decoration: none; font-weight: bold; }
 main section a:hover { text-decoration: underline; }
 main section li { list-style: none; }
 
+/* Footer */
 footer {
   background: rgb(2,0,36);
   background: radial-gradient(circle, rgba(2,0,36,1) 0%, rgba(14,0,81,1) 78%, rgba(19,0,112,1) 100%);
@@ -87,6 +90,7 @@ menu ul li a {
   color: #ddd;
 }
 
+/* Responsive */
 @media screen and (min-width: 320px) {
   html {
     font-size: calc(16px + 6 * ((100vw - 320px) / 680));  /* For responsive fonts */

www/index.html

@@ -13,7 +13,7 @@
     <meta property="og:locale" content="en_US" />
     <meta property="og:site_name" content="Wakale House" />
     <meta property="og:description" content="In wakale veritas, lux ex voluptas." />
-    <meta property="og:image" content="https://wakale.casa/assets/images/rules.png" />
+    <meta property="og:image" content="https://wakale.casa/assets/images/opengraph.png" />
     <meta property="og:image:type" content="image/png" />
     <meta property="og:image:alt" content="The three rules of the Wakale House." />
     <meta property="og:image:width" content="640" />
@@ -36,9 +36,12 @@
       <section id="photos">
         <h1>Photos</h1>
 
-          <article>
+          <article id="photo-la-patata">
+            <h2><a href="#photo-la-patata">La Patata!</a></h2>
             <figure>
-              <img src="assets/images/leo-01.jpg" alt="La Patata!" />
+              <a href="assets/images/2024/30-nov/leo-01.jpg">
+                <img src="assets/images/2024/30-nov/leo-01.jpg" alt="La Patata!" />
+              </a>
               <figcaption>
                 <p><em>Leonardo the cat is crazy and gray,
                 <br>He trips and he gallops all over the day.
@@ -47,8 +50,44 @@
                 <br>With a purr and a meow and paws that misstep,
                 <br>Leonardo's the best friend and pet.</em></p>
               </figcaption>
+              <time datetime="2024-11-30T19:51:00">November 30th, 2024, 19:51</time>
             </figure>
           </article>
+
+          <article id="photo-the-original-rules">
+            <h2><a href="#photo-the-original-rules">The original rules</a></h2>
+
+            <figure>
+              <a href="assets/images/2024/11-may/rules-01.jpg">
+                <img src="assets/images/2024/11-may/rules-01.jpg" alt="The original rules paper" />
+              </a>
+              <figcaption>
+                <p>1, 2, 3. Simple rules for simple people.</p>
+              </figcaption>
+              <time datetime="2024-11-05T15:59:00">May 11th, 2024, 15:59</time>
+            </figure>
+
+            <figure>
+              <a href="assets/images/2024/11-may/rules-02.jpg">
+                <img src="assets/images/2024/11-may/rules-02.jpg" alt="The original cleaning paper" />
+              </a>
+              <figcaption>
+                <p>Original cleaning conventions.</p>
+              </figcaption>
+              <time datetime="2024-11-05T15:58:00">May 11th, 2024, 15:58</time>
+            </figure>
+
+            <figure>
+              <a href="assets/images/2024/11-may/rules-03.jpg">
+                <img src="assets/images/2024/11-may/rules-03.jpg" alt="The original guests paper" />
+              </a>
+              <figcaption>
+                <p>Original guests agreements.</p>
+              </figcaption>
+              <time datetime="2024-11-05T15:58:00">May 11th, 2024, 15:58</time>
+            </figure>
+          </article>
+
       </section>
 
       <section id="conventions">
@@ -91,7 +130,6 @@
         </article>
       </section>
 
-
       <section id="links">
         <h1>Links</h1>