Fix colors and shadows

themes/gokarna/static/css/dark.css

@@ -55,9 +55,14 @@ table th {
 }
 
 :not(pre) > code {
+  background-color: #272822 !important;
   color: var(--dark-text-color);
 }
 
+.header-shadow {
+  box-shadow: rgb(33, 38, 45) 0px -1px 0px 0px inset;
+}
+
 /* TODO: Check if this is needed or not */
 /* 
 img,

themes/gokarna/static/css/main.css

@@ -44,13 +44,14 @@ img {
 .header {
   background-color: var(--light-bg-color);
   color: inherit;
-  font-size: 1.05rem;
+  font-size: 1.25rem;
   height: 50px;
   left: 0;
   position: fixed;
   top: 0;
   width: 100%;
   opacity: 0.95;
+  transition: box-shadow 0.3s ease-in-out;
 }
 
 .header a {
@@ -82,7 +83,6 @@ img {
   padding-left: 15px;
 }
 .nav-title a {
-  font-size: 20px;
   height: 50px;
 }
 .header-nav .nav-links {
@@ -177,11 +177,15 @@ img {
   visibility: hidden;
 }
 
+.header-shadow {
+  box-shadow: rgb(220, 220, 220) 0px 1px 5px;
+}
+
 /* ICONS */
 .feather {
   height: 20px;
   margin: -3px auto;
-  stroke-width: 1.25;
+  stroke-width: 2;
   width: 20px;
 }
 

themes/gokarna/static/js/main.js

@@ -34,6 +34,19 @@ function ready() {
     })
 }
 
+window.addEventListener('scroll', () => {
+    if (window.scrollY > 100) {
+        document.querySelectorAll('.header').forEach(function(item) {
+            item.classList.add('header-shadow')
+        })
+    } else {
+        document.querySelectorAll('.header').forEach(function(item) {
+            item.classList.remove('header-shadow')
+        })
+    }
+});
+
+
 function setTheme(themeToSet) {
     localStorage.setItem(THEME_PREF_STORAGE_KEY, themeToSet);
     darkThemeCss.disabled = themeToSet === 'light';