homepage draft

_data/88x31.toml

@@ -7,6 +7,7 @@ people = [
 ]
 
 misc = [
-    { image = "parentaladvisory", alt = "sorry..." }
+    { image = "parentaladvisory", alt = "sorry..." },
+    { image = "4everfriend", alt = "yay!!" }
 ]
 

_includes/footer.njk

@@ -1 +1 @@
-<p><img src="/img/buttons/parentaladvisory.gif" alt="sorry..."><br>est. 2025 | yuki (c) <a href="LICENSE.txt">Do What the Fuck You Want to Public License</a> </p>
+<p><img src="/img/buttons/4everfriend.gif" alt="yay!!"><img src="/img/buttons/parentaladvisory.gif" alt="sorry..."><br>est. 2025 | yuki &#169; <a href="LICENSE.txt">Do What the Fuck You Want to Public License</a> </p>

_layouts/base.njk

@@ -12,9 +12,11 @@
                 </div>
                 {% include "topmost_navbar.njk" %}
             </div>
-
-            {{ content | safe }}
-
+            
+            <div class="base-content-wrapper">
+                {{ content | safe }}
+            </div>
+            
             <footer>
                 <marquee behavior="scroll" direction="left">
                     <img src="/img/Witch-on-broom.gif" alt="">

_layouts/home.njk

@@ -1,9 +1,10 @@
 ---
 layout: base
+title: home
 ---
 <div class="welcome-aside-left">
     <div class="buttons-wrapper box">
-        <h2><i>please visit...</i></h3>
+        <h2>please visit...</h3>
         <div class="buttons">
             {% for button in 88x31.buttons.people.slice(0, 5) %}
             <a href="{{ button.link }}" title="{{ button.name }}">
@@ -16,6 +17,10 @@ layout: base
             {% endfor %}
         </div>
     </div>
+    <div class="now-playing-wrapper box">
+        <h2>last played</h2>
+        <div class="now-playing"><p>test</p></div>
+    </div>
 </div>
 
 <div class="welcome-content">
@@ -25,10 +30,10 @@ layout: base
 
 <div class="welcome-aside-right">
     <div class="recent-posts box">
-        <h2><i>recent posts</i></h2>
+        <h2>recent posts</h2>
         <ul>
-        {% for post in collections.post.slice(0, 3) %}
-            <li><p><a href="{{ post.url }}">{{ post.data.title }}</a> <span class="date">| {{ post.date.toLocaleString("en-GB", {year: 'numeric', month: '2-digit', day: '2-digit'}) }}</span></p></li>
+        {% for post in collections.post.slice(0, 5) %}
+            <li><p><a href="{{ post.url }}">{{ post.data.title }}</a> | <span class="date"> {{ post.date.toLocaleString("en-GB", {year: 'numeric', month: '2-digit', day: '2-digit'}) }}</span></p></li>
         {% endfor %}
         </ul>
     </div>

css/main.scss

@@ -75,6 +75,71 @@ body {
     }
 }
 
+.base-content-wrapper {
+    display: flex;
+    align-items: flex-start;
+
+    .box {
+        border: 1px solid mp.$border;
+        margin: 10px;
+
+        h2 {
+            padding: 2px;
+            margin-bottom: 4px;
+            border-bottom: 1px solid mp.$border;
+            font-family: fonts.$ll;
+            font-size: 1em;
+            background: mp.$bg;
+            background: linear-gradient(0deg,rgba(0, 0, 0, 1) 10%, c.adjust($color: mp.$link, $saturation: 4%, $lightness: -20%) 100%);
+        }
+    }
+
+    .welcome-aside-left {
+        width: max-content;
+        
+        .buttons-wrapper {
+            width: 190px;
+            .buttons {
+                display: flex;
+                align-items: flex-start;
+                flex-direction: row;
+                flex-wrap: wrap;
+                justify-content: space-evenly;
+                img {
+                    padding: 0;
+                    margin: 0;
+                }
+            } 
+        }
+    }
+
+    .welcome-content {
+        margin: 8px 4px;
+        h1 {
+            font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+            font-size: 1em;
+        }
+    }
+
+    .welcome-aside-right {
+        width: max-content;
+        
+        .recent-posts {
+            width: 190px;
+            ul {
+                padding: 0 0 4px 0;
+                list-style: none;
+                text-align: center;
+                .date {
+                    vertical-align: middle;
+                    font-size: 0.9em;
+                    color: c.adjust($color: mp.$text, $lightness: -10%);
+                }
+            }
+        }
+    }
+}
+
 footer p {
     margin: 2px;
     font-size: 0.7em;

index.md

@@ -1,4 +1,5 @@
 ---
 layout: home
 ---
+# hey...
 welcome to my site!! not much is done yet but please have a look around.