add clouds

site/_includes/-header.njk

@@ -20,20 +20,36 @@
           }
           input.addEventListener('change', function () {
             const newValue = this.value;
-              localStorage.setItem("language", newValue);
-              document.body.setAttribute('data-font', newValue);
+            localStorage.setItem("language", newValue);
+            document.body.setAttribute('data-font', newValue);
           })
         })
       </script>
     </div>
   </nav>
-  <h1>{{ tag | capitalize if tag else title }}</h1>
-  <div class="header-meta">
-    {%-if author -%}
-      <author>{{ author }}</author>
-    {%- endif -%}
-    {%- if date -%}
-      <date>{{ date | formatDate("MMMM D, YYYY") }}</date>
-    {%- endif -%}
+  <div class="scene">
+    <div class="sky">
+      <div id="brand">
+        <h1>{{ tag | capitalize if tag else title }}</h1>
+        <div class="header-meta">
+          {%- if author -%}
+            <author>{{ author }}</author>
+          {%- endif -%}
+          {%- if date -%}
+            <date>{{ date | formatDate("MMMM D, YYYY") }}</date>
+          {%- endif -%}
+        </div>
+      </div>
+      <div class="cloud" style="--n: 0"></div>
+      <div class="cloud" style="--n: 1"></div>
+      <div class="cloud" style="--n: 2"></div>
+      <div class="cloud" style="--n: 3"></div>
+      <div class="cloud" style="--n: 4"></div>
+      <div class="cloud" style="--n: 5"></div>
+      <div class="cloud" style="--n: 6"></div>
+      <div class="cloud" style="--n: 7"></div>
+      <div class="cloud" style="--n: 8"></div>
+      <div class="cloud" style="--n: 9"></div>
+    </div>
   </div>
 </header>

site/_includes/base.njk

@@ -27,4 +27,15 @@ title: Joshua's Homepage
     </main>
     {% include "-footer.njk" %}
   </body>
+  <script>
+    function setScrollAmount() {
+      const body = document.documentElement || document.body;
+      const scrolledFraction =
+        body.scrollTop / (body.scrollHeight - body.clientHeight);
+      body.style.setProperty("--scrollLengthPx", body.scrollTop);
+    }
+    setScrollAmount();
+    document.addEventListener("scroll", setScrollAmount);
+    document.addEventListener("resize", setScrollAmount);
+  </script>
 </html>

site/_includes/home.njk

@@ -5,13 +5,14 @@ layout: "base.njk"
 {%- for name, collection in collections -%}
   {%- if name in ["posts"] -%}
     <h2>{{name | capitalize }}</h2>
-    <ul>
+    <ul class="collection">
       {%- for item in collection | reverse -%}
         <li>
           <a href="{{item.url}}">{{item.data.title}}</a>
           {%- if item.data.date -%}
             <aside>{{item.data.date | formatDate("MMMM DD, YYYY") }}</aside>
           {%- endif -%}
+          <p>{{item.data.description | safe}}</p>
         </li>
       {%- endfor -%}
     </ul>

site/pages/home.md

@@ -1,6 +1,6 @@
 ---
 layout: home.njk
-title: Home
+title: Hello!
 permalink: /
 ---