feat: Add maintenance banner (#52)

mtrezza · web-flow · commit 062448fbeae9 · 2025-07-30T15:24:49.000+02:00
diff --git a/_includes/maintenance-notice.html b/_includes/maintenance-notice.html
@@ -0,0 +1,10 @@
+<div class="maintenance-notice">
+  <div class="container">
+    <div class="maintenance-content">
+      <span class="maintenance-icon">🚀</span>
+      <span class="maintenance-text">
+        <strong>Website Update:</strong> We're updating to a new website! This site may become temporarily unavailable on Thursday, July 31, 10:00 - 20:00 UTC. Thank you for your patience.
+      </span>
+    </div>
+  </div>
+</div>
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -6,6 +6,7 @@
     <body>
 
         {% include nav.html %}
+        {% include maintenance-notice.html %}
         {% include header.html %}
         {% include nav-secondary.html %}
 
diff --git a/css/main.scss b/css/main.scss
@@ -1234,3 +1234,58 @@ footer{
         }
     }
 }
+
+//==========================================//
+// Maintenance Notice
+//==========================================//
+.maintenance-notice {
+    background: linear-gradient(135deg, #FF6B6B 0%, #FF8E8E 100%);
+    border-bottom: 3px solid #E55757;
+    color: white;
+    padding: 12px 0;
+    text-align: center;
+    position: relative;
+    z-index: 1000;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+
+    .maintenance-content {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-wrap: wrap;
+        gap: 8px;
+    }
+
+    .maintenance-icon {
+        font-size: 18px;
+        margin-right: 8px;
+    }
+
+    .maintenance-text {
+        font-size: 14px;
+        line-height: 1.4;
+        font-weight: 400;
+
+        strong {
+            font-weight: 600;
+        }
+    }
+
+    @media (max-width: $smallWidth) {
+        padding: 15px 20px;
+        
+        .maintenance-content {
+            flex-direction: column;
+            gap: 4px;
+        }
+        
+        .maintenance-icon {
+            margin-right: 0;
+        }
+        
+        .maintenance-text {
+            font-size: 13px;
+            text-align: center;
+        }
+    }
+}
