Update banner for small screens.

assets/scss/hugo_cookie_consent/style.scss

@@ -1,6 +1,6 @@
 #cookie-banner {
-  color: inherit;
-  background-color: inherit;
+  color: #E2E8F0;
+  background-color: #4A5568;
   position: fixed;
   top: 2.5rem;
   left: 50%;
@@ -10,12 +10,18 @@
   border: 1px solid #e2e2e2;
   border-radius: 12px;
   padding: 1rem 1.25rem;
-  box-shadow: 0 4px 24px rgba(0,0,0,.08);
+  box-shadow: 0 0 36px #111;
   display: flex;
   align-items: center;
   gap: 1rem;
   z-index: 9999;
   transition: opacity 0.5s ease;
+
+  @media (max-width: 420px) {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 0.75rem;
+  }
 }
 
 #cookie-banner.fade-out {
@@ -23,7 +29,25 @@
   pointer-events: none;
 }
 
-#cookie-banner p { margin: 0; font-size: 14px; flex: 1; }
+#cookie-banner p {
+  margin: 0;
+  font-size: 14px;
+  flex: 1;
+}
+
+#cookie-banner .cookie-buttons {
+  display: flex;
+  gap: 0.5rem;
+  flex-shrink: 0;
+
+  @media (max-width: 420px) {
+    width: 100%;
+
+    button {
+      flex: 1;
+    }
+  }
+}
 
 #cookie-banner button {
   margin: 0.1rem 0;
@@ -36,9 +60,13 @@
 }
 
 #cookie-accept {
-  background: #0b913a; color: #fff; border-color: #1a1a1a;
+  background: #4A5E52; color: #fff; border-color: #1a1a1a;
 }
 
 #cookie-decline {
+  background: #2D3748; color: #fff; border-color: #1a1a1a;
+}
+
+#cookie-settings-button {
   background: #272b2e; color: #fff; border-color: #1a1a1a;
 }

layouts/_partials/hugo_cookie_consent/banner.html

@@ -8,7 +8,7 @@
       {{ i18n "cookie_more_info" }}
     </a>
   </p>
-  <div>
+  <div class="cookie-buttons">
     <button id="cookie-accept">
       {{ i18n "cookie_button_accept" }}
     </button>

layouts/_shortcodes/hugo_cookie_consent/settings.html

@@ -7,6 +7,6 @@
     —
   </strong>
 </p>
-<button onclick="reopenCookieBanner()">
+<button id="cookie-settings-button" onclick="reopenCookieBanner()">
   {{ i18n "cookie_change" }}
-</button>
+</button>