From 9bb8196ed0b024ce7a69a9be99f3ad5cbfe850cc Mon Sep 17 00:00:00 2001
From: Matthias Puchstein <matthias@puchstein.bayern>
Date: Wed, 9 Jul 2025 23:52:23 +0200
Subject: [PATCH] reformatted `index.css` for consistent indentation and
 structure, improving readability and maintainability of styles

Signed-off-by: Matthias Puchstein <matthias@puchstein.bayern>
---
 src/index.css | 444 +++++++++++++++++++++++++-------------------------
 1 file changed, 224 insertions(+), 220 deletions(-)

diff --git a/src/index.css b/src/index.css
index 979dbd8..f009227 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,362 +1,366 @@
 @import "tailwindcss";
 
 :root {
-  --bg: #f9f6ff;
-  --container: #eee8fc;
-  --card: #e5dcff;
-  --text: #1a0d29;
-  --text-muted: #3d2a5c;
-  --accent: #a64dff;
-  --accent-gradient: linear-gradient(135deg, #a64dff, #d500f9);
-  --accent-soft: #c9a4ff;
-  --accent-dark: #6a0dad;
-  --shadow: rgba(166, 77, 255, 0.2);
-  --text-shadow: rgba(0, 0, 0, 0.5);
+    --bg: #f9f6ff;
+    --container: #eee8fc;
+    --card: #e5dcff;
+    --text: #1a0d29;
+    --text-muted: #3d2a5c;
+    --accent: #a64dff;
+    --accent-gradient: linear-gradient(135deg, #a64dff, #d500f9);
+    --accent-soft: #c9a4ff;
+    --accent-dark: #6a0dad;
+    --shadow: rgba(166, 77, 255, 0.2);
+    --text-shadow: rgba(0, 0, 0, 0.5);
 
-  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
+    font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+    line-height: 1.5;
+    font-weight: 400;
 
-  color-scheme: light dark;
-  color: var(--text);
-  background-color: var(--bg);
+    color-scheme: light dark;
+    color: var(--text);
+    background-color: var(--bg);
 
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+    font-synthesis: none;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
 }
 
 [data-theme="dark"] {
-  --bg: #150830;
-  --container: #2a1050;
-  --card: #3d1a6e;
-  --text: #f8eeff;
-  --text-muted: #d4b8f0;
-  --accent: #c490ff;
-  --accent-gradient: linear-gradient(135deg, #c490ff, #d500f9);
-  --accent-soft: #a64dff;
-  --accent-dark: #6a0dad;
-  --shadow: rgba(196, 144, 255, 0.3);
-  --text-shadow: rgba(255, 255, 255, 0.5);
+    --bg: #150830;
+    --container: #2a1050;
+    --card: #3d1a6e;
+    --text: #f8eeff;
+    --text-muted: #d4b8f0;
+    --accent: #c490ff;
+    --accent-gradient: linear-gradient(135deg, #c490ff, #d500f9);
+    --accent-soft: #a64dff;
+    --accent-dark: #6a0dad;
+    --shadow: rgba(196, 144, 255, 0.3);
+    --text-shadow: rgba(255, 255, 255, 0.5);
 }
 
 .border-background {
-  border-color: var(--accent);
+    border-color: var(--accent);
 }
 
 .page {
-  background-color: var(--bg);
-  color: var(--text);
-  transition: background-color 0.3s, color 0.3s;
-  position: relative;
+    background-color: var(--bg);
+    color: var(--text);
+    transition: background-color 0.3s, color 0.3s;
+    position: relative;
 }
 
 .page::before {
-  content: "";
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-image: radial-gradient(var(--accent-soft) 1px, transparent 1px);
-  background-size: 40px 40px;
-  opacity: 0.05;
-  pointer-events: none;
-  z-index: 0;
+    content: "";
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-image: radial-gradient(var(--accent-soft) 1px, transparent 1px);
+    background-size: 40px 40px;
+    opacity: 0.05;
+    pointer-events: none;
+    z-index: 0;
 }
 
 .pageTitle {
-  color: var(--accent);
-  font-weight: bold;
-  font-size: 1.25em;
+    color: var(--accent);
+    font-weight: bold;
+    font-size: 1.25em;
 }
 
 .dreamPanel {
-  background: linear-gradient(135deg, rgba(166, 77, 255, 0.35), rgba(213, 0, 249, 0.35));
-  border-radius: 10px;
-  padding: 1em;
-  color: var(--text);
-  backdrop-filter: blur(5px);
-  box-shadow: 0 0 15px var(--shadow);
-  border: none;
+    background: linear-gradient(135deg, rgba(166, 77, 255, 0.35), rgba(213, 0, 249, 0.35));
+    border-radius: 10px;
+    padding: 1em;
+    color: var(--text);
+    backdrop-filter: blur(5px);
+    box-shadow: 0 0 15px var(--shadow);
+    border: none;
 }
 
 a {
-  font-weight: 500;
-  color: var(--accent);
-  text-decoration: inherit;
+    font-weight: 500;
+    color: var(--accent);
+    text-decoration: inherit;
 }
+
 a:hover {
-  color: var(--text-muted);
+    color: var(--text-muted);
 }
 
 body {
-  margin: 0;
-  display: flex;
-  min-width: 320px;
-  min-height: 100vh;
-  width: 100%;
-  background-color: var(--bg);
-  color: var(--text);
-  transition: background-color 0.3s, color 0.3s;
-  overflow-x: hidden;
+    margin: 0;
+    display: flex;
+    min-width: 320px;
+    min-height: 100vh;
+    width: 100%;
+    background-color: var(--bg);
+    color: var(--text);
+    transition: background-color 0.3s, color 0.3s;
+    overflow-x: hidden;
 }
 
 h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
+    font-size: 3.2em;
+    line-height: 1.1;
 }
 
 button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: var(--container);
-  color: var(--text);
-  cursor: pointer;
-  transition: border-color 0.25s, background-color 0.3s, color 0.3s;
+    border-radius: 8px;
+    border: 1px solid transparent;
+    padding: 0.6em 1.2em;
+    font-size: 1em;
+    font-weight: 500;
+    font-family: inherit;
+    background-color: var(--container);
+    color: var(--text);
+    cursor: pointer;
+    transition: border-color 0.25s, background-color 0.3s, color 0.3s;
 }
+
 button:hover {
-  border-color: var(--accent);
+    border-color: var(--accent);
 }
+
 button:focus,
 button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
+    outline: 4px auto -webkit-focus-ring-color;
 }
 
 .feed-container {
-  padding: 1.5em;
-  transition: all 0.3s ease;
-  position: relative;
-  overflow: hidden;
-  border: none;
-  border-radius: 16px;
+    padding: 1.5em;
+    transition: all 0.3s ease;
+    position: relative;
+    overflow: hidden;
+    border: none;
+    border-radius: 16px;
 }
 
 
 .dream-card {
-  background: linear-gradient(135deg, rgba(166, 77, 255, 0.35), rgba(213, 0, 249, 0.35));
-  border-radius: 12px;
-  padding: 1.25em;
-  color: var(--text);
-  backdrop-filter: blur(10px);
-  box-shadow: 0 10px 30px var(--shadow), inset 0 0 15px rgba(166, 77, 255, 0.3);
-  position: relative;
-  transition: all 0.3s ease;
-  border: none;
+    background: linear-gradient(135deg, rgba(166, 77, 255, 0.35), rgba(213, 0, 249, 0.35));
+    border-radius: 12px;
+    padding: 1.25em;
+    color: var(--text);
+    backdrop-filter: blur(10px);
+    box-shadow: 0 10px 30px var(--shadow), inset 0 0 15px rgba(166, 77, 255, 0.3);
+    position: relative;
+    transition: all 0.3s ease;
+    border: none;
 }
 
 .dream-card::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: -1;
-  margin: -1px;
-  border-radius: inherit;
-  background: var(--accent-gradient);
-  opacity: 0.1;
+    content: '';
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: -1;
+    margin: -1px;
+    border-radius: inherit;
+    background: var(--accent-gradient);
+    opacity: 0.1;
 }
 
 .dream-card:hover {
-  transform: translateY(-5px);
-  box-shadow: 0 15px 35px var(--shadow), inset 0 0 20px rgba(166, 77, 255, 0.3);
+    transform: translateY(-5px);
+    box-shadow: 0 15px 35px var(--shadow), inset 0 0 20px rgba(166, 77, 255, 0.3);
 }
 
 .dream-card .title {
-  color: var(--accent);
-  font-weight: bold;
-  font-size: 1.25em;
-  margin-bottom: 0.5em;
-  line-height: 1.3;
+    color: var(--accent);
+    font-weight: bold;
+    font-size: 1.25em;
+    margin-bottom: 0.5em;
+    line-height: 1.3;
 }
 
 .dream-card .timestamp {
-  color: var(--text-muted);
-  font-size: 0.85em;
-  font-weight: 500;
+    color: var(--text-muted);
+    font-size: 0.85em;
+    font-weight: 500;
 }
 
 .microphone-button {
-  background: var(--accent-gradient);
-  color: white;
-  border-radius: 50%;
-  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
+    background: var(--accent-gradient);
+    color: white;
+    border-radius: 50%;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
 }
 
 /* Theme Toggle Styles */
 .theme-toggle {
-  position: absolute;
-  top: 1rem;
-  right: 1rem;
-  display: inline-block;
+    position: absolute;
+    top: 1rem;
+    right: 1rem;
+    display: inline-block;
 }
 
 .theme-toggle input {
-  display: none;
+    display: none;
 }
 
 .theme-toggle .slider {
-  width: 40px;
-  height: 20px;
-  background-color: #bbb;
-  border-radius: 20px;
-  cursor: pointer;
-  position: relative;
+    width: 40px;
+    height: 20px;
+    background-color: #bbb;
+    border-radius: 20px;
+    cursor: pointer;
+    position: relative;
 }
 
 .theme-toggle .slider::before {
-  content: "";
-  width: 16px;
-  height: 16px;
-  position: absolute;
-  left: 2px;
-  top: 2px;
-  background: white;
-  border-radius: 50%;
-  transition: transform 0.3s;
+    content: "";
+    width: 16px;
+    height: 16px;
+    position: absolute;
+    left: 2px;
+    top: 2px;
+    background: white;
+    border-radius: 50%;
+    transition: transform 0.3s;
 }
 
 .theme-toggle input:checked + .slider::before {
-  transform: translateX(20px);
+    transform: translateX(20px);
 }
 
 .theme-toggle input:checked + .slider {
-  background-color: var(--accent);
+    background-color: var(--accent);
 }
 
 /* Dreamy violet enhancements */
 .dream-title {
-  font-size: 1.5rem;
-  font-weight: bold;
-  background: var(--accent-gradient);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  margin-bottom: 0.5rem;
-  text-shadow: 0 1px 2px var(--text-shadow);
+    font-size: 1.5rem;
+    font-weight: bold;
+    background: var(--accent-gradient);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    margin-bottom: 0.5rem;
     text-rendering: geometricPrecision;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
 }
 
 .dream-container {
-  background: linear-gradient(135deg, rgba(166, 77, 255, 0.25), rgba(213, 0, 249, 0.25));
-  border-radius: 16px;
-  padding: 1.5rem;
-  margin-bottom: 1.5rem;
-  box-shadow: 0 10px 30px var(--shadow), inset 0 0 15px rgba(166, 77, 255, 0.2);
-  backdrop-filter: blur(10px);
-  transition: transform 0.3s, box-shadow 0.3s;
-  border: none;
+    background: linear-gradient(135deg, rgba(166, 77, 255, 0.25), rgba(213, 0, 249, 0.25));
+    border-radius: 16px;
+    padding: 1.5rem;
+    margin-bottom: 1.5rem;
+    box-shadow: 0 10px 30px var(--shadow), inset 0 0 15px rgba(166, 77, 255, 0.2);
+    backdrop-filter: blur(10px);
+    transition: transform 0.3s, box-shadow 0.3s;
+    border: none;
 }
 
 .dream-container:hover {
-  transform: translateY(-5px);
-  box-shadow: 0 15px 35px var(--shadow), inset 0 0 20px rgba(166, 77, 255, 0.3);
+    transform: translateY(-5px);
+    box-shadow: 0 15px 35px var(--shadow), inset 0 0 20px rgba(166, 77, 255, 0.3);
 }
 
 /* Scrollbar styling */
 ::-webkit-scrollbar {
-  width: 10px;
+    width: 10px;
 }
 
 ::-webkit-scrollbar-track {
-  background: var(--bg);
+    background: var(--bg);
 }
 
 ::-webkit-scrollbar-thumb {
-  background: var(--accent-soft);
-  border-radius: 5px;
+    background: var(--accent-soft);
+    border-radius: 5px;
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background: var(--accent);
+    background: var(--accent);
 }
 
 /* Dreamy Card Styling */
 .dreamy-card {
-  background: linear-gradient(135deg, rgba(166, 77, 255, 0.35), rgba(213, 0, 249, 0.35));
-  border-radius: 12px;
-  padding: 1.25em;
-  color: var(--text);
+    background: linear-gradient(135deg, rgba(166, 77, 255, 0.35), rgba(213, 0, 249, 0.35));
+    border-radius: 12px;
+    padding: 1.25em;
+    color: var(--text);
     backdrop-filter: blur(10px);
     box-shadow: 0 10px 30px var(--shadow), inset 0 0 15px rgba(166, 77, 255, 0.3);
-  transition: all 0.3s ease;
-  border: none;
+    transition: all 0.3s ease;
+    border: none;
 }
 
 .dreamy-card:hover {
-  transform: translateY(-5px);
+    transform: translateY(-5px);
     box-shadow: 0 15px 35px var(--shadow), inset 0 0 20px rgba(166, 77, 255, 0.3);
 }
 
 /* Animations */
 @keyframes dream-float {
-  0% {
-    transform: translateY(0);
-  }
-  50% {
-      transform: translateY(-5px);
-  }
-  100% {
-    transform: translateY(0);
-  }
+    0% {
+        transform: translateY(0);
+    }
+    50% {
+        transform: translateY(-5px);
+    }
+    100% {
+        transform: translateY(0);
+    }
 }
 
 .floating {
-  animation: dream-float 6s ease-in-out infinite;
+    animation: dream-float 6s ease-in-out infinite;
 }
 
 /* Responsive adjustments */
 @media (max-width: 768px) {
-  h1 {
-    font-size: 2.5em;
-  }
-  h2 {
-    font-size: 1.8em;
-  }
-  p {
-    font-size: 0.95em;
-  }
+    h1 {
+        font-size: 2.5em;
+    }
 
-  .feed-container {
-    padding: 1.2em;
-  }
+    h2 {
+        font-size: 1.8em;
+    }
 
-  .dream-card {
-    padding: 1em;
-  }
+    p {
+        font-size: 0.95em;
+    }
 
-  .dream-card .title {
-    font-size: 1.1em;
-  }
+    .feed-container {
+        padding: 1.2em;
+    }
+
+    .dream-card {
+        padding: 1em;
+    }
+
+    .dream-card .title {
+        font-size: 1.1em;
+    }
 }
 
 @media (max-width: 480px) {
-  .page {
-    padding: 0.75rem !important;
-  }
+    .page {
+        padding: 0.75rem !important;
+    }
 
-  .feed-container {
-    padding: 1em 0.75em;
-  }
+    .feed-container {
+        padding: 1em 0.75em;
+    }
 
-  .dream-card {
-    padding: 0.9em;
-  }
+    .dream-card {
+        padding: 0.9em;
+    }
 
-  .dream-card .title {
-    font-size: 1em;
-  }
+    .dream-card .title {
+        font-size: 1em;
+    }
 
-  .dream-card img {
-    width: 2.5rem !important;
-    height: 2.5rem !important;
-  }
+    .dream-card img {
+        width: 2.5rem !important;
+        height: 2.5rem !important;
+    }
 }