admin dashboard: mobile support!

admin/static/admin.css

@@ -193,14 +193,44 @@ nav hr {
     border-bottom: 1px solid var(--fg-0);
 }
 nav .section-label {
-    margin: 8px 0 2px 15px;
-    font-size: 10px;
+    margin: .6em 0 .1em 1.6em;
+    font-size: .6em;
     text-transform: uppercase;
     font-weight: 600;
 }
+#toggle-nav {
+    position: fixed;
+    top: 16px;
+    left: 16px;
+    padding: 8px;
+    width: 48px;
+    height: 48px;
+    display: none;
+    justify-content: center;
+    align-items: center;
+    z-index: 1;
+}
+#toggle-nav img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    transform: translate(1px, 1px);
+}
+#toggle-nav img:hover {
+    filter: invert(.9);
+}
+@media (prefers-color-scheme: dark) {
+    #toggle-nav img {
+        filter: invert(.9);
+    }
+    #toggle-nav img:hover {
+        filter: none;
+    }
+}
 
 main {
-    width: min(calc(100% - 16px), 720px);
+    width: 720px;
+    max-width: calc(100% - 2em);
     height: fit-content;
     min-height: calc(100vh - 2em);
     margin: 0 auto;
@@ -213,6 +243,9 @@ main.dashboard {
 a {
     color: inherit;
     text-decoration: none;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
     transition: color .1s ease-out, background-color .1s ease-out;
 }
 
@@ -296,12 +329,6 @@ header :is(h1, h2, h3) small,
     gap: 1em;
 }
 
-@media screen and (max-width: 520px) {
-    body {
-        font-size: 12px;
-    }
-}
-
 
 
 #message,
@@ -387,9 +414,10 @@ form label {
     margin: 1rem 0 .5rem 0;
     display: block;
 }
-form input {
-    min-width: 20rem;
-    max-width: calc(100% - 1em));
+form input[type="text"],
+form input[type="password"] {
+    width: 16em;
+    max-width: 100%;
     margin: .5em 0;
     padding: .3em .5em;
     display: block;
@@ -404,3 +432,54 @@ input[disabled] {
     opacity: .5;
     cursor: not-allowed;
 }
+
+@media screen and (max-width: 720px) {
+    main {
+        padding-top: 0;
+    }
+
+    body {
+        width: 100%;
+        margin: 0;
+        font-size: 16px;
+    }
+
+    nav {
+        width: 100%;
+        left: -100%;
+        font-size: 24px;
+        z-index: 1;
+        transition: transform .2s cubic-bezier(.2,0,.5,1);
+    }
+    nav.open {
+        transform: translateX(100%);
+    }
+
+    #toggle-nav {
+        display: flex;
+    }
+
+    main > h1:first-of-type {
+        margin-left: 68px;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+    }
+    main > header {
+        margin-left: 68px;
+    }
+    main > header h1 {
+        display: flex;
+        flex-direction: column;
+        font-size: 1.5em;
+    }
+
+    .card {
+        flex-basis: 100%;
+        max-width: calc(100vw - 4em);
+    }
+
+    .artists-group {
+        grid-template-columns: repeat(3, 1fr);
+    }
+}