From 6bc310acbf73a7e972ce94e38bd3e1b7f382d0e1 Mon Sep 17 00:00:00 2001
From: Sam <samual.shop@proton.me>
Date: Thu, 8 Aug 2024 14:26:55 +0100
Subject: [PATCH] Style tweaks

---
 static/css/articles.css | 11 ++++++
 static/css/charts.css   |  9 +++--
 static/css/navbar.css   | 84 +++++++++++++++++++++++++++++++++++++++++
 static/css/style.css    | 13 +++----
 static/css/tables.css   |  1 +
 5 files changed, 107 insertions(+), 11 deletions(-)

diff --git a/static/css/articles.css b/static/css/articles.css
index 4ae214e..f79d6d1 100644
--- a/static/css/articles.css
+++ b/static/css/articles.css
@@ -115,6 +115,17 @@ figcaption h4 {
   border-right: var(--border-width) var(--border-style) var(--border-color);
 }
 
+@media (max-width: 600px) {
+  .main-article {
+    width: 100%;
+    padding: var(--content-padding);
+    line-height: 1.5;
+    text-align: left;
+    border-left: var(--border-width) var(--border-style) var(--border-color);
+    border-right: var(--border-width) var(--border-style) var(--border-color);
+  }
+}
+
 .main-article h1 {
   color: var(--heading1-color);
   font-size: var(--heading1-font-size);
diff --git a/static/css/charts.css b/static/css/charts.css
index 03c4363..719b2af 100644
--- a/static/css/charts.css
+++ b/static/css/charts.css
@@ -9,10 +9,11 @@
 
 #chart {
   width: 100%;
-  height: 50vh;
+  aspect-ratio: 16 / 9;
 }
 
-.chart-area {
-  width: 60%;
-  margin: var(--article-margin);
+.chart-container {
+  margin-top: 20px;
+  display: flex;
+  justify-content: center;
 }
diff --git a/static/css/navbar.css b/static/css/navbar.css
index 6763a13..2ea7344 100644
--- a/static/css/navbar.css
+++ b/static/css/navbar.css
@@ -79,3 +79,87 @@
 .navbar-links ul li a {
   display: inline-block;
 }
+
+.navbar-dropdown {
+  display: none;
+}
+
+@media (max-width: 600px) {
+  .navbar-dropdown {
+    display: flex;
+    margin-right: 20px;
+  }
+
+  .navbar-links {
+    display: none;
+  }
+
+  .hamburger-dropbtn {
+    height: 30px;
+    width: 30px;
+    border-width: 0;
+    background-color: var(--background-color);
+  }
+
+  .hamburger-dropbtn:hover {
+    height: 30px;
+    width: 30px;
+    border-width: 0;
+    background-color: var(--navbar-hover);
+    border-radius: 5px;
+  }
+
+  .navbar-dropdown-content {
+    display: none;
+  }
+
+  /* Show the dropdown menu on hover */
+  .navbar-dropdown:hover .navbar-dropdown-content {
+    display: block;
+    position: absolute;
+    top: 80%;
+    right: 1%;
+    flex-direction: column;
+    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
+    background-color: var(--navbar-background-color);
+    border-radius: 5px;
+    border: var(--border-width) var(--border-style) var(--border-color) !important;
+  }
+  .navbar-dropdown-content li {
+    list-style-type: none;
+    padding: 10px 10px 5px 5px;
+  }
+
+  .navbar-dropdown-content a {
+    border: none;
+  }
+
+  .navbar-dropdown-content li:hover {
+    color: var(--navbar-text-color);
+    padding: 10px 10px 5px 5px;
+    text-decoration: none;
+    transition: background-color 0.3s ease;
+    background-color: var(--navbar-hover);
+    border-radius: 5px;
+  }
+
+  .navbar-dropdown-content a:hover {
+    border: none;
+  }
+
+  .navbar-link-dropdown-content {
+    position: absolute;
+    flex-direction: column;
+    width: 150px;
+    right: 95%;
+    top: 50%;
+    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
+    background-color: var(--navbar-background-color);
+    border-radius: 5px;
+    border: var(--border-width) var(--border-style) var(--border-color) !important;
+  }
+
+  .navbar-link-dropdown-content a:hover {
+    border-radius: 5px;
+  }
+}
diff --git a/static/css/style.css b/static/css/style.css
index f89440a..8fe2d9b 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -48,24 +48,23 @@
   --code-font-family: "Fira Mono", monospace;
 
   /* table */
-  --table-even-row-bg-color: #343a40;
-  --table-odd-row-bg-color: #515c66;
-  --table-header-bg: #212529;
-  --table-font-color: #e0ddd9;
+  --table-even-row-bg-color: #f9f9f9;
+  --table-odd-row-bg-color: #f9f9f9;
+  --table-header-bg: #eff3f7;
+  --table-font-color: #373841;
   --table-header-font-size: 14px;
   --table-row-font-size: 12px;
 }
 
 @media (max-width: 600px) {
   :root {
-    --font-size: 10;
     --author-row-font-size: 12px;
     --heading1-font-size: 25px;
     --code-block-font-size: 10px;
     --avatar-width: 20px;
     --article-max-width: 100%;
-    --table-header-font-size: 14px;
-    --table-row-font-size: 12px;
+    --table-header-font-size: 9px;
+    --table-row-font-size: 6px;
   }
 }
 
diff --git a/static/css/tables.css b/static/css/tables.css
index 58d525d..c3481e8 100644
--- a/static/css/tables.css
+++ b/static/css/tables.css
@@ -21,6 +21,7 @@ td {
   padding: 5px;
   text-align: left;
   max-width: 90px;
+  font-size: var(--table-row-font-size);
 }
 
 @media only screen and (max-width: 800px) {