Style tweaks

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);

static/css/charts.css

@@ -9,10 +9,11 @@
 
 #chart {
   width: 100%;
-  height: 50vh;
+  aspect-ratio: 16 / 9;
 }
 
-.chart-area {
+.chart-container {
-  width: 60%;
+  margin-top: 20px;
-  margin: var(--article-margin);
+  display: flex;
+  justify-content: center;
 }

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;
+  }
+}

static/css/style.css

@@ -48,24 +48,23 @@
   --code-font-family: "Fira Mono", monospace;
 
   /* table */
-  --table-even-row-bg-color: #343a40;
+  --table-even-row-bg-color: #f9f9f9;
-  --table-odd-row-bg-color: #515c66;
+  --table-odd-row-bg-color: #f9f9f9;
-  --table-header-bg: #212529;
+  --table-header-bg: #eff3f7;
-  --table-font-color: #e0ddd9;
+  --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-header-font-size: 9px;
-    --table-row-font-size: 12px;
+    --table-row-font-size: 6px;
   }
 }
 

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) {