fix mobile layout

7 files changed, 51 insertions, 41 deletions

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>