fix mobile layout

3 files changed, 47 insertions, 40 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;
+}