From 68e7566fcffc07335124225acd2970a2f4660aaf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Avijit=20=F0=9F=9A=80?= <526avijit@gmail.com>
Date: Mon, 2 Aug 2021 13:58:54 +0200
Subject: [PATCH] Fix colors and shadows

---
 themes/gokarna/static/css/dark.css |  5 +++++
 themes/gokarna/static/css/main.css | 10 +++++++---
 themes/gokarna/static/js/main.js   | 13 +++++++++++++
 3 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/themes/gokarna/static/css/dark.css b/themes/gokarna/static/css/dark.css
index 51ca2a0..ca40260 100644
--- a/themes/gokarna/static/css/dark.css
+++ b/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,
diff --git a/themes/gokarna/static/css/main.css b/themes/gokarna/static/css/main.css
index 62873c1..d215204 100644
--- a/themes/gokarna/static/css/main.css
+++ b/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;
 }
 
diff --git a/themes/gokarna/static/js/main.js b/themes/gokarna/static/js/main.js
index 4abb2de..97dee73 100644
--- a/themes/gokarna/static/js/main.js
+++ b/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';