fix mobile layout

1 files changed, 23 insertions, 0 deletions

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;
+}