restructuring page:index

static/css/page/index.css

@@ -40,7 +40,7 @@ h1.page-title {
     }
 }
 
-.index\:hobby-corners {
+main.tree > ul {
     /* Optical text offset to make the icons look less misaligned.
        This is adjusted per each hobby corner to fit the icons.
        
@@ -49,6 +49,7 @@ h1.page-title {
        
        This aims to improve the readability of that a bit without being too noticable. */
     --section-text-offset: 0em;
+    --section-icon-align: -30%;
 
     & > li {
         & > details > summary {
@@ -61,12 +62,16 @@ h1.page-title {
 
                 margin-right: calc(0.2em + var(--section-text-offset));
 
-                vertical-align: -38%;
+                vertical-align: var(--section-icon-align);
             }
         }
     }
 }
 
+#index\:about {
+    --section-color: #a7d5e0;
+}
+
 #index\:programming {
     --section-color: var(--liquidex-brand-red);
     --section-text-offset: -0.1em;
@@ -85,3 +90,7 @@ h1.page-title {
     --section-color: var(--liquidex-brand-blue);
     --section-text-offset: 0.05em;
 }
+
+#index\:philosophy {
+    --section-color: #c952f5;
+}