bottomBar responsive

2026-02-23 15:55:20 +01:00 · 2026-02-23 15:55:20 +01:00 · f24b296ff7
commit f24b296ff7
parent 99ccc15ba9
15 changed files with 445 additions and 303 deletions
--- a/assets/css/components/_support-bar.scss
+++ b/assets/css/components/_support-bar.scss
@ -0,0 +1,63 @@
+#support-bar {
+    height: var(--header-h);
+    background-color: var(--color-accent);
+    color: var(--color-bg);
+    padding: 0 var(--padding-body);
+
+    
+
+    .support-bar__container {
+        max-width: var(--max-w-cards);
+        margin: 0 auto;
+
+        height: 100%;
+        display: flex;
+
+        @media #{$small-up} {
+
+            align-items: center;
+            justify-content: space-between;
+            gap: 2ch;
+        }
+
+        @media #{$small} {
+            flex-direction: column;
+            font-size: var(--fs-small);
+            line-height: 1.1;
+            align-items: flex-start;
+            justify-content: center;
+        }
+
+    }
+
+    .baseline {
+        text-transform: uppercase;
+        font-weight: 500;
+
+    }
+
+    .btn {
+        text-transform: uppercase;
+        color: var(--color-bg);
+        font-weight: 500;
+        text-decoration: underline;
+        text-underline-offset: 2px;
+        word-wrap: nowrap;
+        white-space: nowrap;
+
+        &:hover {
+            opacity: 0.7;
+        }
+    }
+
+
+     @media #{$small} {
+            height: auto;
+            padding: calc(var(--spacing)*0.75) var(--padding-body);
+            .btn{
+                margin-top: calc(var(--spacing)*0.75);
+            }
+    }
+
+
+}