Update blog.css with new header styles and color

scheme

Author: sharadcodes

assets/css/blog.css

@@ -1,15 +1,5 @@
 @import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100;0,300;0,400;0,800;1,100;1,300;1,400;1,800&display=swap");
 
-:root {
-  --gray-1: #3f3f3f;
-  --gray-2: #32353a;
-  --gray-3: #25282c;
-  --gray-4: #151618;
-  --gray-5: #151618;
-  --gray-6: #111111;
-  --white-1: #eeeeee;
-  --white-2: #a9abb3;
-}
 * {
   font-family: inherit;
   text-decoration: none;
@@ -32,6 +22,11 @@ body {
 }
 header {
   padding: 2rem 0 4rem 0;
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 1rem;
 }
 header .site-title {
   font-size: 4rem;
@@ -67,6 +62,24 @@ main {
   color: cyan;
   border-bottom: 1px solid cyan;
 }
+@media (prefers-color-scheme: light) {
+  #text-wrapper a {
+    color: #1ebaba;
+    border-bottom: 1px solid #1ebaba;
+  }
+}
+[data-theme="light"] {
+  #text-wrapper a {
+    color: #1ebaba;
+    border-bottom: 1px solid #1ebaba;
+  }
+}
+[data-theme="dark"] {
+  #text-wrapper a {
+    color: cyan;
+    border-bottom: 1px solid cyan;
+  }
+}
 #social-wrapper {
   margin-top: 1rem;
 }
@@ -77,6 +90,21 @@ main {
   margin: 0 0 0.3rem 0;
   transition: all 0.2s ease-in-out;
 }
+@media (prefers-color-scheme: light) {
+  #social-wrapper img {
+    filter: none !important;
+  }
+}
+[data-theme="light"] {
+  #social-wrapper img {
+    filter: none !important;
+  }
+}
+[data-theme="dark"] {
+  #social-wrapper img {
+    filter: invert() !important;
+  }
+}
 #social-wrapper img:hover {
   transform: scale(1.2);
 }
@@ -132,6 +160,16 @@ main {
   body {
     padding: 1.5rem;
   }
+  header {
+    flex-direction: column;
+    gap: 3rem;
+  }
+  header #dark-mode-toggle {
+    display: flex;
+    justify-content: flex-end;
+    align-items: flex-end;
+    align-self: flex-end;
+  }
   header .site-title {
     font-size: 3rem;
   }