M assets/css/style.css → assets/css/style.css

@@ -29,8 +29,12 @@ --inverted-text: var(--base);
   --selection-color: var(--blue);
 
   --color-primary: var(--lavender);
-  --color-bg: var(--base);
-  --color-primary-light: color-mix(in srgb, var(--color-primary) 20%, var(--color-bg));
+  --color-bg: white;
+  --color-primary-light: color-mix(
+    in srgb,
+    var(--color-primary) 20%,
+    var(--color-bg)
+  );
   --text-primary: var(--text);
   --text-secondary: var(--subtext1);
 }
@@ -82,7 +86,9 @@ color: #818cf8;
   text-decoration: underline;
 }
 
-h1, h2, h3 {
+h1,
+h2,
+h3 {
   background-color: var(--color-primary-light);
   border-radius: 4px;
   padding: 0.25rem 0.5rem;
@@ -97,11 +103,19 @@ h2 {
   font-size: 1.25rem;
   line-height: 1.75rem;
   margin-bottom: 1rem;
-  background-color:  color-mix(in srgb, var(--color-primary) 9%, var(--color-bg));
+  background-color: color-mix(
+    in srgb,
+    var(--color-primary) 9%,
+    var(--color-bg)
+  );
 }
 
 h3 {
-    background-color:  color-mix(in srgb, var(--color-primary) 7%, var(--color-bg));
+  background-color: color-mix(
+    in srgb,
+    var(--color-primary) 7%,
+    var(--color-bg)
+  );
 }
 
 p {
@@ -113,7 +127,8 @@ ul {
   line-height: 1.3;
 }
 
-input, textarea {
+input,
+textarea {
   border-radius: 4px;
   border: 1px solid #eee;
   padding: 0.5rem;
@@ -128,7 +143,8 @@ border: none;
   padding: 0.5rem;
   cursor: pointer;
 
-  &:hover,&:focus {
+  &:hover,
+  &:focus {
     opacity: 0.8;
   }
 }
@@ -226,7 +242,7 @@ list-style: none;
 }
 
 ul.categories-list li::before {
-  content: '🌱 ';
+  content: "🌱 ";
 }
 
 @media only screen and (max-width: 600px) {
@@ -287,12 +303,12 @@ --base: #1e1e2e;
     --mantle: #181825;
     --crust: #11111b;
     --inverted-text: var(--crust);
-    --selection-color: var(--mauve)
+    --selection-color: var(--mauve);
+
+    --color-bg: var(--base);
   }
 
   body {
     color: white;
   }
 }
-
-