Create Makefile

Makefile

@@ -0,0 +1,19 @@
+SASS_SRC=src/style.scss
+SASS_DEST=target/style.css
+
+SASS_CMD=sass \
+	$(SASS_SRC) \
+	$(SASS_DEST)
+
+BALLOON_CMD=~/.pyenv/versions/3.12.9/bin/python \
+	balloon.py
+
+sass:
+	$(SASS_CMD)
+
+balloon:
+	$(BALLOON_CMD)
+
+all: sass balloon
+
+.DEFAULT_GOAL := all

README.md

@@ -0,0 +1,8 @@
+# Cutieguwu Site
+
+
+## Prelude
+
+The Cutieguwu website.
+
+With distinctly no JavaScript written by me.

src/includes/nav_menu.html

@@ -3,7 +3,7 @@
     <li class="nav_body"><a class="nav_title" href="#">Home</a></li>
 
     <!-- Minecraft -->
-    <li class="dropdown">
+    <li class="nav_dropdown">
         <div class="dropdown_header nav_body">
             <p class="nav_title" href="#">Minecraft</p>
             <ion-icon name="chevron-forward-outline"></ion-icon>
@@ -20,7 +20,7 @@
     <li class="nav_body"><a class="nav_title" href="#">About</a></li>
 
     <!-- Pronoun Pages -->
-    <li class="dropdown">
+    <li class="nav_dropdown">
         <div class="dropdown_header nav_body">
             <a class="nav_title" href="https://pronouns.page/@Cutieguwu">Pronoun Pages</a>
             <ion-icon name="chevron-forward-outline"></ion-icon>
@@ -32,7 +32,7 @@
     </li>
 
     <!-- External Links -->
-    <li class="dropdown">
+    <li class="nav_dropdown">
         <div class="dropdown_header nav_body">
             <p class="nav_title">External Links</p>
             <ion-icon name="chevron-forward-outline"></ion-icon>
@@ -46,7 +46,7 @@
     <hr />
 
     <!-- Public Services -->
-    <li class="dropdown">
+    <li class="nav_dropdown">
         <div class="dropdown_header nav_body">
             <p class="nav_title">Public Services</p>
             <ion-icon name="chevron-forward-outline"></ion-icon>
@@ -57,7 +57,7 @@
     </li>
 
     <!-- Services -->
-    <li class="dropdown">
+    <li class="nav_dropdown">
         <div class="dropdown_header nav_body">
             <p class="nav_title">Services</p>
             <ion-icon name="chevron-forward-outline"></ion-icon>

src/partials/_nav_dropdown.scss

@@ -0,0 +1,39 @@
+.nav_dropdown {
+    .dropdown_header {
+        display: grid;
+        grid-template-columns: 1fr min-content;
+        align-items: center;
+
+        ion-icon {
+            /*
+            This one aligns visually odd if trying to use the same margins as it's neighbouring nav_title class.
+            */
+            margin-right: 0.5rem;
+
+            align-self: center;
+            transition-duration: 0.25s;
+        }
+    }
+
+    .dropdown_body {
+        display: none;
+        border-bottom-left-radius: var(--border-radius-small);
+        border-bottom-right-radius: var(--border-radius-small);
+        background-color: var(--background-1);
+    }
+}
+
+.nav_dropdown:hover {
+    .dropdown_header {
+        transform: var(--transform-scale-x);
+
+        ion-icon {
+            rotate: 90deg;
+            transition-duration: 0.25s;
+        }
+    }
+
+    .dropdown_body {
+        display: grid;
+    }
+}

src/partials/_nav_menu.scss

@@ -1,3 +1,6 @@
+@use "nav_dropdown";
+@use "nav_title";
+
 .nav_menu {
     /*
     Remove default padding and style applied to ul for bullets.
@@ -22,8 +25,7 @@
         transition: var(--transition-fade);
     }
 
-    .dropdown:hover .nav_body,
-    .dropdown .nav_body:hover,
+    .nav_dropdown:hover .nav_body,
     .nav_body:hover {
         transform: var(--transform-scale-x);
         transition: var(--transition-cut);
@@ -34,66 +36,4 @@
             transition: var(--transition-cut);
         }
     }
-
-    .dropdown {
-        .dropdown_header {
-            display: grid;
-            grid-template-columns: 1fr min-content;
-            align-items: center;
-
-            ion-icon {
-                /*
-                This one aligns visually odd if trying to use the same margins as it's neighbouring nav_title class.
-                */
-                margin-right: 0.5rem;
-
-                align-self: center;
-                transition-duration: 0.25s;
-            }
-        }
-
-        .dropdown_body {
-            display: none;
-            border-bottom-left-radius: var(--border-radius-small);
-            border-bottom-right-radius: var(--border-radius-small);
-            background-color: var(--background-1);
-        }
-    }
-
-    .dropdown:hover {
-        .dropdown_header {
-            transform: var(--transform-scale-x);
-
-            ion-icon {
-                rotate: 90deg;
-                transition-duration: 0.25s;
-            }
-        }
-
-        .dropdown_body {
-            display: grid;
-        }
-    }
-
-    .nav_body,
-    .dropdown .nav_body,
-    .dropdown .dropdown_body {
-        .nav_title {
-            /* Need to force inheritence, otherwise <a> would require overrides for all color states from base styling for element. */
-            color: inherit;
-
-            text-decoration: none;
-            font-family: var(--font-family-generic);
-            font-weight: bold;
-            white-space: nowrap;
-            margin: 0 var(--spacing-horizontal);
-            transition: var(--transition-fade);
-            text-transform: uppercase;
-        }
-
-        .nav_title:hover {
-            color: var(--highlight-hover);
-            transition: var(--transition-cut);
-        }
-    }
 }

src/partials/_nav_title.scss

@@ -0,0 +1,17 @@
+.nav_title {
+    /* Need to force inheritence, otherwise <a> would require overrides for all color states from base styling for element. */
+    color: inherit;
+
+    text-decoration: none;
+    font-family: var(--font-family-generic);
+    font-weight: bold;
+    white-space: nowrap;
+    margin: 0 var(--spacing-horizontal);
+    transition: var(--transition-fade);
+    text-transform: uppercase;
+}
+
+.nav_title:hover {
+    color: var(--highlight-hover);
+    transition: var(--transition-cut);
+}