aesthetic updates and banner

assets/sass/_layout.sass

@@ -4,6 +4,7 @@
 $spacing-unit: 1.5rem
 $section-spacing: 2rem
 $border-radius: 8px
+$body-width: 1024px
 
 html
     background: darken($background, 3%)
@@ -15,7 +16,7 @@ body
     font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif
     width: 100%
     height: 100%
-    max-width: 1024px
+    max-width: $body-width
     margin: $spacing-unit auto
     padding: $spacing-unit
     box-sizing: border-box
@@ -106,7 +107,7 @@ section
     margin: $section-spacing 0
     padding-bottom: $section-spacing
 
-#page-header 
+#page-header
     border-bottom: 3px solid $surface
     margin: $section-spacing 0
     padding-bottom: $section-spacing
@@ -190,3 +191,57 @@ pre
     overflow-x: auto
     code
         font-size: 0.8rem
+
+.banner
+    position: fixed
+    top: 0
+    width: 100%
+    max-width: $body-width
+    background-color: $accent
+    color: $darkest
+    padding: 5px 0
+    font-weight: 400
+    text-align: center
+    font-size: 1.1em
+    border-radius: 0 0 8px 8px
+    z-index: 1000
+    font-size: 0.9rem
+    height: 1.3rem
+    margin-left: calc(0% - #{$spacing-unit})
+
+    a
+        color: $darkest
+        text-decoration: underline
+        font-weight: 700
+        transition: color 0.3s ease-in-out
+        &:hover, &:focus
+            color: $primary-dark
+
+body:has(.banner)
+    margin-top: 2.6rem
+
+@media (max-width: 600px)
+    .banner
+        position: absolute
+        top: 0
+        width: calc(100% - #{$spacing-unit})
+        max-width: $body-width
+        background-color: $accent
+        color: $darkest
+        padding: 5px
+        font-weight: 400
+        text-align: center
+        font-size: 1.1em
+        border-radius: 0 0 8px 8px
+        z-index: 1000
+        font-size: 0.9rem
+        height: 4.3rem
+        margin-left: calc(0% - #{$spacing-unit})
+
+        .banner-text
+            display: block
+            margin: 0 5px
+        
+
+    body:has(.banner)
+        margin-top: 5.6rem