1 files changed, 189 insertions, 0 deletions
diff --git a/static/input.css b/static/input.css
index e1ba37d..b9fb166 100644
--- a/static/input.css
+++ b/static/input.css
@@ -72,6 +72,14 @@ html {
     background-size: --value([bg-size]), 128px;
 }
 
+@utility faw-full {
+    --fa-width: 100%;
+}
+
+@utility faw-* {
+    --fa-width: calc(--value(integer) * var(--spacing));
+}
+
 body {
     scrollbar-width: thin;
     scrollbar-color: var(--color-background-light) var(--color-main-soft);
@@ -397,6 +405,10 @@ form.crossable.htmx-request input {
     border-style: inset;
 }
 
+.border-outset {
+    border-style: outset;
+}
+
 .bg-sidebar {
     background-image: var(--squares-and-triangles-background);
     background-repeat: var(--squares-and-triangles-background-repeat);
@@ -496,6 +508,66 @@ form.crossable.htmx-request input {
     border-radius: 50%;
 }
 
+.themed-button::before {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(
+        135deg,
+        var(--color-main-light-hard),
+        var(--color-main-dark-hard)
+    );
+    opacity: 0.2;
+    z-index: 10;
+    content: "";
+}
+
+.themed-button:active::before {
+    opacity: 0.4;
+}
+
+.themed-button:hover:not(:active)::before {
+    opacity: 0;
+}
+
+.themed-button {
+    border-top: var(--border-size) solid var(--color-main-light-hard);
+    border-left: var(--border-size) solid var(--color-main-light-hard);
+    border-bottom: var(--border-size) solid var(--color-main-dark-hard);
+    border-right: var(--border-size) solid var(--color-main-dark-hard);
+    position: relative;
+    --border-size: 0.5rem;
+}
+
+.themed-button:active,
+.themed-button.active {
+    border-top: var(--border-size) solid var(--color-main-dark-hard);
+    border-left: var(--border-size) solid var(--color-main-dark-hard);
+    border-bottom: var(--border-size) solid var(--color-main-light-hard);
+    border-right: var(--border-size) solid var(--color-main-light-hard);
+}
+
+.themed-button:active > *,
+.themed-button.active > * {
+    transform: translateY(calc(var(--border-size) / 2));
+}
+
+.themed-button.themed-button-sidebar {
+    --border-size: 0.25rem;
+    background-image: var(--squares-and-triangles-background);
+    background-repeat: var(--squares-and-triangles-background-repeat);
+    background-size: calc(
+            var(--squares-and-triangles-background-width-coef) * 0.9rem
+        )
+        calc(var(--squares-and-triangles-background-height-coef) * 0.9rem);
+}
+
+.themed-button.themed-button-like {
+    --border-size: 0.2rem;
+}
+
 .accent-button,
 .accent-button.active:active {
     --tw-duration: 1500ms;
@@ -723,6 +795,123 @@ body[data-theme~="ram"] .leaflet-tile {
     filter: invert(1) hue-rotate(190deg) contrast(1.1) brightness(1.2) !important;
 }
 
+@media (min-aspect-ratio: 0.8/1) {
+    .ar-gt-0\.8\:mr-6 {
+        margin-right: 1.5rem;
+    }
+
+    .ar-gt-0\.8\:w-fit {
+        width: fit-content;
+    }
+
+    .ar-gt-0\.8\:w-\[100dvh\] {
+        width: 100dvh;
+        flex-basis: 100dvh;
+    }
+
+    .ar-gt-0\.8\:min-w-fit {
+        min-width: fit-content;
+    }
+
+    .ar-gt-0\.8\:min-w-1\/10 {
+        min-width: 10%;
+    }
+
+    .ar-gt-0\.8\:max-w-1\/4 {
+        max-width: 25%;
+    }
+
+    .ar-gt-0\.8\:items-center {
+        align-items: center;
+    }
+}
+
+@media (max-aspect-ratio: 0.8/1) {
+    .bg-pattern-body {
+        background-size: 10dvh;
+    }
+
+    .ar-lt-0\.8\:grid {
+        display: grid;
+    }
+
+    .ar-lt-0\.8\:flex-col {
+        flex-direction: column;
+    }
+
+    .ar-lt-0\.8\:flex-row {
+        flex-direction: row;
+    }
+
+    .ar-lt-0\.8\:h-\[8dvh\] {
+        height: 8dvh;
+    }
+
+    .ar-lt-0\.8\:h-\[10dvh\] {
+        height: 10dvh;
+    }
+
+    .ar-lt-0\.8\:h-\[30dvh\] {
+        height: 30dvh;
+    }
+
+    .ar-lt-0\.8\:h-\[90dvh\] {
+        height: 90dvh;
+    }
+
+    .ar-lt-0\.8\:w-\[8dvh\] {
+        width: 8dvh;
+    }
+
+    .ar-lt-0\.8\:w-\[80\%\] {
+        width: 80%;
+    }
+
+    .ar-lt-0\.8\:w-\[90dvw\] {
+        width: 90dvw;
+    }
+
+    .ar-lt-0\.8\:w-\[100dvw\] {
+        width: 100dvw;
+    }
+
+    .ar-lt-0\.8\:max-h-\[30\%\] {
+        max-height: 30%;
+    }
+
+    .ar-lt-0\.8\:max-h-\[80\%\] {
+        max-height: 80%;
+    }
+
+    .ar-lt-0\.8\:max-h-\[92dvh\] {
+        max-height: 92dvh;
+    }
+
+    .ar-lt-0\.8\:text-\[5dvh\] {
+        font-size: 5dvh;
+    }
+
+    .ar-lt-0\.8\:hidden {
+        display: none;
+    }
+}
+
+@media (min-aspect-ratio: 0.6/1) {
+    .ar-gt-0\.6\:flex-3\/5 {
+        flex: 60%;
+    }
+
+    .ar-gt-0\.6\:flex-2\/5 {
+        flex: 40%;
+    }
+}
+
+@media (max-aspect-ratio: 0.6/1) {
+    .ar-lt-0\.6\:flex-col {
+        flex-direction: column;
+    }
+}
+
 .home-page-heart {
     position: absolute;
     color: var(--color-pink-700);