fix mobile layout

11 files changed, 95 insertions, 53 deletions

diff --git a/.zs/components/buttons.jq b/.zs/components/buttons.jq
index 9a135e0..07b67ce 100644
--- a/.zs/components/buttons.jq
+++ b/.zs/components/buttons.jq
@@ -1,3 +1,3 @@
 include ".zs/components/get_filename";
 
-map("<a href=\"\(.link)\"><img src=\"\($BUTTONS_DIR + (. | filename))\" alt=\"An 88x31 button. \(.alt)\" title=\"\(.title)\"><div class=\"icon\"><img src=\"/assets/svg/external.svg\"></div><div class=\"link\">\(.link)</div></a>") | join("\n")
+map("<a href=\"\(.link)\"><img src=\"\($BUTTONS_DIR + (. | filename))\" alt=\"An 88x31 button. \(.alt)\" title=\"\(.title)\"><div class=\"icon\"><div></div></div><div class=\"link\">\(.link)</div></a>") | join("\n")
diff --git a/.zs/components/nav b/.zs/components/nav
index 935cd92..c787517 100755
--- a/.zs/components/nav
+++ b/.zs/components/nav
@@ -21,6 +21,7 @@ end
 ---@field index boolean?
 ---@field dir string?
 ---@field inside Set?
+---@field icon string
 
 ---@type Link[]
 local links = {
@@ -29,23 +30,27 @@ local links = {
         title = "home",
         inside = set {
             "index"
-        }
+        },
+        icon = "home"
     },
     {
         url = "/projects.html",
         title = "projects",
         inside = set {
             "prismite"
-        }
+        },
+        icon = "git"
     },
     {
         url = "/posts.html",
         title = "ramblings",
-        dir = "blog"
+        dir = "blog",
+        icon = "notebook"
     },
     {
         url = "/buttons.html",
-        title = "buttons"
+        title = "buttons",
+        icon = "external"
     },
 }
 
@@ -79,7 +84,14 @@ for _, link in ipairs(links) do
         {
             tag = "a",
             href = link.url,
-            title,
+            {
+                tag = "div",
+                style = [[mask-image: url("/assets/svg/]] .. link.icon .. [[.svg")]]
+            },
+            {
+                tag = "span",
+                title
+            }
         }
     })
 end
diff --git a/.zs/components/wavy b/.zs/components/wavy
index 645442e..20c4a70 100755
--- a/.zs/components/wavy
+++ b/.zs/components/wavy
@@ -14,13 +14,30 @@ local TEXT = {
 local acc = {}
 
 local i = 0
-for char in TEXT[name or "hey"]:gmatch(".") do
-    table.insert(acc, {
+for word in TEXT[name or "hey"]:gmatch("[^ ]+") do
+    local word_acc = {}
+
+    for char in word:gmatch(".") do
+        table.insert(word_acc, {
+            tag = "span",
+            style = "animation-delay:" .. (-800 * i) .. "ms",
+            char
+        })
+        i = i + 1
+    end
+
+    table.insert(word_acc, {
         tag = "span",
         style = "animation-delay:" .. (-800 * i) .. "ms",
-        char
+        " "
     })
+
     i = i + 1
+
+    table.insert(acc, {
+        tag = "div",
+        word_acc
+    })
 end
 
 print(html {
diff --git a/assets/css/buttons.page.css b/assets/css/buttons.page.css
index 57e23dc..99db1b2 100644
--- a/assets/css/buttons.page.css
+++ b/assets/css/buttons.page.css
@@ -3,25 +3,23 @@ main > div {
     width: 100%;
 }
 
-p {
-    
-}
-
-p > img {
-    width: 20%;
+#my_button > div > img {
     border-radius: var(--border-radius);
-    display: block;
 }
 
 #buttons {
-    display: grid;
     margin-top: var(--padding-big);
-    grid-template-columns: repeat(3, 1fr);
-    gap: var(--padding-big);
     flex-grow: 1;
     height: min-content;
 }
 
+#buttons,
+#my_button > div {
+    display: grid;
+    gap: var(--padding-big);
+    grid-template-columns: repeat(3, 1fr);
+}
+
 main a {
     position: relative;
     display: block;
@@ -32,39 +30,23 @@ main a {
     color: var(--fg) !important;
 }
 
-main a:focus,
-main a:hover {
-    font-weight: normal;
-}
-
-main a > .icon > img {
+main a > .icon > div {
     width: 1em;
     height: 1em;
-    display: block;
-}
-
-@keyframes ticker {
-    0% {
-        transform: rotate(-90deg) translateX(-9ch);
-    }
-
-    100% {
-        transform: rotate(-90deg) translateX(0ch);
-    }
+    background-color: var(--fg);
+    mask-image: url("/assets/svg/external.svg");
+    mask-size: cover;
 }
 
 main a > img,
-p > img {
+#my_button > div > img {
+    width: 100%;
+    display: block;
     image-rendering: -webkit-optimize-contrast;
     image-rendering: -moz-crisp-edges;
     image-rendering: crisp-edges;
 }
 
-main a > img {
-    width: 100%;
-    display: block;
-}
-
 main a > .icon,
 main a > .link {
     --color: var(--bg);
@@ -84,10 +66,6 @@ main a > .link {
     padding: var(--padding);
 }
 
-main a:hover > .link {
-    transform: translate(-50%, 0);
-}
-
 main a > .icon {
     top: 50%;
     right: -0.5px;
@@ -98,6 +76,12 @@ main a > .icon {
     border-right: none;
 }
 
-main a:hover > .icon {
-    transform: translate(0, -50%);
+@media (hover: hover) {
+    main a:hover > .link {
+        transform: translate(-50%, 0);
+    }
+
+    main a:hover > .icon {
+        transform: translate(0, -50%);
+    }
 }
diff --git a/assets/css/content.css b/assets/css/content.css
index e39b29c..b622a3f 100644
--- a/assets/css/content.css
+++ b/assets/css/content.css
@@ -208,7 +208,7 @@ aside::after {
 /*     } */
 /* } */
 
-.wavy > span {
+.wavy > div > span {
     display: inline-block;
     transform: translateY(10%);
     animation: wave 12s ease-in-out infinite;
diff --git a/assets/css/main.css b/assets/css/main.css
index 3a378d3..a50e953 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -154,6 +154,24 @@ nav .tab > a:focus-visible {
     outline-offset: 0;
 }
 
+nav .tab > a > div {
+    background-color: currentColor;
+    width: 1.25em;
+    height: 1.25em;
+    mask-size: cover;
+    display: none;
+}
+
+@media (max-width: 500px) {
+    nav .tab > a > div {
+        display: block;
+    }
+
+    nav .tab > a > span {
+        display: none;
+    }
+}
+
 footer {
     text-align: center;
     color: var(--fg);
@@ -201,3 +219,8 @@ main a {
 .wavy {
     font-size: 3em;
 }
+
+.wavy > div {
+    display: inline-block;
+    white-space: nowrap;
+}
diff --git a/assets/svg/external.svg b/assets/svg/external.svg
index ab0224d..d3ebbf4 100644
--- a/assets/svg/external.svg
+++ b/assets/svg/external.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#c8ced7" viewBox="0 0 256 256"><path d="M192,136v72a16,16,0,0,1-16,16H48a16,16,0,0,1-16-16V80A16,16,0,0,1,48,64h72a8,8,0,0,1,0,16H48V208H176V136a8,8,0,0,1,16,0Zm32-96a8,8,0,0,0-8-8H152a8,8,0,0,0-5.66,13.66L172.69,72l-42.35,42.34a8,8,0,0,0,11.32,11.32L184,83.31l26.34,26.35A8,8,0,0,0,224,104Z"></path></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256"><path d="M192,136v72a16,16,0,0,1-16,16H48a16,16,0,0,1-16-16V80A16,16,0,0,1,48,64h72a8,8,0,0,1,0,16H48V208H176V136a8,8,0,0,1,16,0Zm32-96a8,8,0,0,0-8-8H152a8,8,0,0,0-5.66,13.66L172.69,72l-42.35,42.34a8,8,0,0,0,11.32,11.32L184,83.31l26.34,26.35A8,8,0,0,0,224,104Z"></path></svg>
diff --git a/assets/svg/git.svg b/assets/svg/git.svg
new file mode 100644
index 0000000..f065be6
--- /dev/null
+++ b/assets/svg/git.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256"><path d="M232,64a32,32,0,1,0-40,31v17a8,8,0,0,1-8,8H96a23.84,23.84,0,0,0-8,1.38V95a32,32,0,1,0-16,0v66a32,32,0,1,0,16,0V144a8,8,0,0,1,8-8h88a24,24,0,0,0,24-24V95A32.06,32.06,0,0,0,232,64ZM64,64A16,16,0,1,1,80,80,16,16,0,0,1,64,64ZM96,192a16,16,0,1,1-16-16A16,16,0,0,1,96,192Z"></path></svg>
diff --git a/assets/svg/home.svg b/assets/svg/home.svg
new file mode 100644
index 0000000..7c6d668
--- /dev/null
+++ b/assets/svg/home.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" viewBox="0 0 256 256"><path d="M224,120v96a8,8,0,0,1-8,8H160a8,8,0,0,1-8-8V164a4,4,0,0,0-4-4H108a4,4,0,0,0-4,4v52a8,8,0,0,1-8,8H40a8,8,0,0,1-8-8V120a16,16,0,0,1,4.69-11.31l80-80a16,16,0,0,1,22.62,0l80,80A16,16,0,0,1,224,120Z"></path></svg>
diff --git a/assets/svg/notebook.svg b/assets/svg/notebook.svg
new file mode 100644
index 0000000..3934dad
--- /dev/null
+++ b/assets/svg/notebook.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" viewBox="0 0 256 256"><path d="M208,32H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM80,208H48V48H80Zm96-56H112a8,8,0,0,1,0-16h64a8,8,0,0,1,0,16Zm0-32H112a8,8,0,0,1,0-16h64a8,8,0,0,1,0,16Z"></path></svg>
diff --git a/buttons.html b/buttons.html
index f37747d..ba69ce4 100644
--- a/buttons.html
+++ b/buttons.html
@@ -29,9 +29,12 @@
         {{ .zs/components/nav }}
         <main>
             <div>
-                <p>Here's my button (no hotlinking please):
-                <img src="/assets/button.png" alt="An 88x31 button. It contains a slanted triangle, representing a Greek capital delta. On the right are 5 thin lines, red, orange, yellow, green and blue respectively, filling the rest of the space">
-                </p>
+                <div id="my_button">
+                    Here's my button (no hotlinking please):
+                    <div>
+                        <img src="/assets/button.png" alt="An 88x31 button. It contains a slanted triangle, representing a Greek capital delta. On the right are 5 thin lines, red, orange, yellow, green and blue respectively, filling the rest of the space">
+                    </div>
+                </div>
                 <div id="buttons">{{ .zs/components/buttons }}</div>
             </div>
         </main>