Fix styling

Width and shit is still weird, but better now
lyssieth · Jan 5, 2024 · a61386c · a61386c
1 parent 3524d2e
commit a61386c
Show file tree

Hide file tree

Showing 6 changed files with 24 additions and 2 deletions.
diff --git a/src/app.scss b/src/app.scss
@@ -94,6 +94,11 @@ button:focus-visible {
     color: #213547;
     background-color: #ffffff;
   }
+  #questionnaire {
+    background-color: darken(#ffffff, 5%);
+    border: 1px solid darken(#ffffff, 5%);
+  }
+
   a:hover {
     color: #747bff;
   }

diff --git a/src/lib/Controls.svelte b/src/lib/Controls.svelte
@@ -52,5 +52,10 @@
     background-color: darken(#242424, 10%);
     border: 1px solid darken(#242424, 10%);
     border-radius: 0.5em 0.5em 0 0;
+
+    @media (prefers-color-scheme: light) {
+      background-color: darken(#f9f9f9, 10%);
+      border: 1px solid darken(#f9f9f9, 10%);
+    }
   }
 </style>
diff --git a/src/lib/Question.svelte b/src/lib/Question.svelte
@@ -72,7 +72,7 @@
   </label>
 </li>
 
-<style>
+<style lang="scss">
   .question {
     margin-bottom: 1em;
   }

diff --git a/src/lib/QuestionTitle.svelte b/src/lib/QuestionTitle.svelte
@@ -11,7 +11,7 @@
   <span class="question-text"><slot /></span>
 {/if}
 
-<style>
+<style lang="scss">
   .question-text {
     display: block;
     font-weight: bold;
@@ -24,5 +24,9 @@
       rgba(255, 255, 255, 0.87) 50%,
       rgba(0, 255, 0, 0.87) 50%
     );
+
+    @media (prefers-color-scheme: light) {
+      color: color-mix(in lab, #213547 50%, rgba(0, 255, 0, 0.87) 50%);
+    }
   }
 </style>
diff --git a/src/lib/ScrollButton.svelte b/src/lib/ScrollButton.svelte
@@ -24,6 +24,10 @@
     padding: 0.5em;
     background-color: #3c3c3c;
 
+    @media (prefers-color-scheme: light) {
+      background-color: #f9f9f9;
+    }
+
     // if it's less than 600px wide, make it smaller
     @media (max-width: 600px) {
       padding: 0.25em;

diff --git a/src/lib/SectionTitle.svelte b/src/lib/SectionTitle.svelte
@@ -28,5 +28,9 @@
       rgba(255, 255, 255, 0.87) 50%,
       rgba(0, 255, 0, 0.87) 50%
     );
+
+    @media (prefers-color-scheme: light) {
+      color: color-mix(in lab, #213547 50%, rgba(0, 255, 0, 0.87) 50%);
+    }
   }
 </style>