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

@@ -1,22 +1,20 @@ 
 :root {
-  --color-primary: #4f46e5;
-  --color-primary-light: rgba(79, 70, 229, 0.08);
-  --color-bg: #f1f5f9;
-  --text-secondary: #374151;
+  --color-primary: rgb(30, 102, 245);
+  --color-primary-light: rgb(114, 135, 253);
+  --color-bg: rgb(239, 241, 245);
+  --color-links: rgb(30, 102, 245);
+  --color-badge: hsl(220deg, 91%, 54%, 0.1);
+  --headline-1: rgb(92, 95, 119);
+  --headline-2: rgb(108, 111, 133);
+  --text-primary: rgb(76, 79, 105);
+  --text-secondary: rgb(92, 95, 119);
 }
 
 body {
-  font-family:
-    Menlo,
-    Monaco,
-    Lucida Console,
-    Liberation Mono,
-    DejaVu Sans Mono,
-    Bitstream Vera Sans Mono,
-    Courier New,
-    monospace,
-    serif;
+  font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
+    Bitstream Vera Sans Mono, Courier New, monospace, serif;
   background-color: var(--color-bg);
+  color: var(--text-primary);
 }
 
 main {
@@ -28,29 +26,36 @@ 
 blockquote {
   margin: 0;
   padding-left: 1rem;
-  color: var(--text-secondary);
+  color: var(--text-primary);
   border-left: 6px solid var(--color-primary);
 }
 
 a {
-  color: var(--color-primary);
+  color: var(--color-links);
   text-decoration: none;
 }
 
 a:hover {
-  color: #818cf8;
+  color: var(--color-primary);
   text-decoration: underline;
 }
 
 h1 {
   font-size: 1.5rem;
   line-height: 2rem;
+  color: var(--headline-1);
 }
 
 h2 {
   font-size: 1.25rem;
   line-height: 1.75rem;
   margin-bottom: 1rem;
+  color: var(--headline-1);
+}
+
+h3,
+h4 {
+  color: var(--headline-2);
 }
 
 p {
@@ -62,7 +67,8 @@ ul {
   line-height: 1.3;
 }
 
-input, textarea {
+input,
+textarea {
   border-radius: 4px;
   border: 1px solid #eee;
   padding: 0.5rem;
@@ -77,7 +83,8 @@ border: none;
   padding: 0.5rem;
   cursor: pointer;
 
-  &:hover,&:focus {
+  &:hover,
+  &:focus {
     opacity: 0.8;
   }
 }
@@ -110,7 +117,7 @@ 
 .date {
   font-size: 0.9rem;
   color: var(--text-secondary);
-  background-color: var(--color-primary-light);
+  background-color: var(--color-badge);
   padding: 0 0.25rem;
   border-radius: 4px;
 }
@@ -173,13 +180,13 @@ }
 
 @media (prefers-color-scheme: dark) {
   :root {
-    --color-primary: #818cf8;
-    --color-bg: #18181b;
-    --text-secondary: #e2e4e8;
-  }
-
-  body {
-    color: white;
+    --color-primary: rgb(137, 180, 250);
+    --color-links: rgb(137, 180, 250);
+    --color-bg: rgb(30, 30, 46);
+    --color-badge: hsl(217deg, 92%, 76%, 0.2);
+    --text-primary: rgb(205, 214, 244);
+    --text-secondary: rgb(147, 153, 178);
+    --headline-1: rgb(186, 194, 222);
+    --headline-2: rgb(166, 173, 200);
   }
 }
-