switch the layout to a wider one that leans slightly to the left of the page

this is to make space on the right for a nice background in the future

static/css/page/index.css

@@ -1,42 +1,75 @@
-.index\:hobby-corners {
-    &>li {
-        margin: var(--8px) 0px;
+h1.page-title {
+    --recursive-wght: 900;
+    font-size: 3.5rem;
+}
 
-        &>details {
-            border-top: var(--4px) solid var(--section-color);
+@media (hover: none) {
+    h1.page-title a {
+        text-decoration: none;
+    }
+}
+
+@media (max-width: 450px) {
+    body {
+        --top-min-spacing: 40px;
+    }
+
+    nav#nav-logo {
+        display: block;
+
+        & .logo {
+            position: absolute;
+            left: 0;
+            top: 0;
+            width: 75vw;
+            height: 75vw;
+            transform: translate(-25%, -20%);
+            pointer-events: none;
+            opacity: 15%;
         }
+    }
+}
 
-        &>details>summary {
-            position: relative;
-            overflow: clip;
-            box-sizing: border-box;
+#index\:treehouse {
+    & > details > summary {
+        padding-left: 1rem;
 
-            border-top-left-radius: 0;
-            border-top-right-radius: 0;
+        & > th-bp {
+            display: none;
+        }
+    }
+}
 
-            &>th-bb>.icon {
-                opacity: 100%;
-            }
+.index\:hobby-corners {
+    /* Optical text offset to make the icons look less misaligned.
+       This is adjusted per each hobby corner to fit the icons.
+       
+       Although the icons may be aligned in terms of bounds, optically they do not look
+       very good next to the text, having awkward blank space to the right.
+       
+       This aims to improve the readability of that a bit without being too noticable. */
+    --section-text-offset: 0em;
 
-            & .background-icon {
-                position: absolute;
-                right: calc(var(--button-bar-icon-size) * 2);
-                bottom: 0;
-                color: var(--text-color);
-                opacity: 40%;
+    & > li {
+        & > details > summary {
+            text-decoration: 4px underline var(--section-color);
+            text-underline-offset: 4px;
 
-                width: 6.85rem;
-                height: auto;
+            & > th-bc .hobby-icon {
+                width: auto;
+                height: 48px;
 
-                pointer-events: none;
+                margin-right: calc(0.2em + var(--section-text-offset));
+
+                vertical-align: -38%;
             }
         }
     }
-
 }
 
 #index\:programming {
     --section-color: var(--liquidex-brand-red);
+    --section-text-offset: -0.1em;
 }
 
 #index\:design {
@@ -45,8 +78,10 @@
 
 #index\:music {
     --section-color: var(--liquidex-brand-green);
+    --section-text-offset: -0.05em;
 }
 
 #index\:games {
     --section-color: var(--liquidex-brand-blue);
+    --section-text-offset: 0.05em;
 }