Refactor stylesheet, removed comments

static/css/style.css

@@ -11,11 +11,11 @@
   --heading1-font-size: 25px;
   --code-block-font-size: 10px;
   --chart-modifier-height: 60px;
-  --article-max-width: 60vw;
+  --article-max-width: 70%;
   --content-padding: 40px;
   --content-margin: 40px;
   --element-padding: 20px;
-  --element-margin: 10px;
+  --element-margin: 20px;
   --article-margin: 10px;
   --heading-margin: 30px;
   --radius: 5px;
@@ -26,7 +26,7 @@
   --background-color: #181a1b;
   --text-color: #e0ddd9;
   --subtext-color: #6c757d;
-  --link-color: #749571;
+  --link-color: #60b2f1;
   --hover-color: #0056b3;
   --heading1-color: #fc8452;
   --heading2-color: #e0ddd9;
@@ -36,17 +36,20 @@
   --navbar-hover: #333;
   --footer-background-color: #333;
   --summary-container-hover-bg: #343a40;
-  --codeblock-bg-color: #0d1117;
+  --codeblock-bg-color: #1b1d1e;
-  --inline-code-bg-color: #749571;
+  --inline-code-bg-color: #353535;
   --table-even-row-bg-color: #343a40;
   --table-odd-row-bg-color: #515c66;
   --table-header-bg: #212529;
   --table-font-color: #e0ddd9;
   --table-header-font-size: 14px;
   --table-row-font-size: 12px;
+  --border-color: #363a3d;
+  --border-width: 2px;
+  --border-style: solid;
 }
 
-@media (max-width: 800px) {
+@media (max-width: 600px) {
   :root {
     --font-size: 10;
     --author-row-font-size: 12px;
@@ -76,6 +79,11 @@ body {
   flex: 1;
 }
 
+.article-container {
+  display: flex;
+  justify-content: center;
+}
+
 .page-container {
   display: flex;
   flex-direction: column;
@@ -85,11 +93,11 @@ body {
 a {
   text-decoration: none;
   color: var(--link-color);
-  text-decoration: underline;
 }
 
 a:hover {
   color: var(--hover-color);
+  text-decoration: underline;
 }
 
 .page-content {
@@ -127,6 +135,11 @@ a:hover {
   height: auto;
 }
 
+figcaption h4 {
+  font-size: 10px;
+  padding-bottom: var(--element-padding);
+}
+
 @media (max-width: 800px) {
   .home-page {
     flex-direction: column;
@@ -152,6 +165,8 @@ a:hover {
   width: var(--article-max-width);
   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 {
@@ -177,8 +192,7 @@ ol {
 }
 
 .main-article img {
-  max-width: 60vw;
+  max-width: 100%;
-  margin-bottom: var(--article-margin);
 }
 
 time {
@@ -250,127 +264,6 @@ time {
   background-color: var(--summary-container-hover-bg);
 }
 
-/* .navbar {
-  background-color: var(--navbar-background-color);
-  display: flex;
-  justify-content: space-between;
-  position: sticky;
-  top: 0;
-  height: 50px;
-  width: 100%;
-  z-index: 999;
-}
-
-.navbar a {
-  color: var(--navbar-text-color);
-  padding: 10px;
-  margin: 5px;
-  text-decoration: none;
-  transition: background-color 0.3s ease;
-  border-radius: var(--radius);
-}
-
-.navbar a:hover {
-  padding: 10px;
-  background-color: var(--navbar-hover);
-  border-radius: var(--radius);
-  color: var(--text-color);
-}
-
-.navbar__left a {
-  text-decoration: none !important;
-  color: var(--text-color) !important;
-  font-size: 22px;
-}
-
-.navbar__left {
-  display: flex;
-  align-items: center;
-}
-
-.navbar__right {
-  display: flex;
-  align-items: center;
-}
-
-.navbar-links {
-  display: flex;
-  align-items: center;
-  margin-right: var(--element-margin);
-}
-
-.navbar-dropdown {
-  display: none;
-}
-
-@media (max-width: 800px) {
-  .navbar-links {
-    display: none;
-  }
-
-  .navbar-dropdown {
-    display: block;
-    align-items: center;
-    float: right;
-    max-height: 60px;
-  }
-
-  .hamburger {
-    width: 30px;
-    margin-right: var(--article-margin);
-  }
-
-  .navbar-dropdown .hamburger-dropbtn {
-    font-size: 66px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border: none;
-    max-height: 60px;
-    outline: none;
-    color: white;
-    background-color: inherit;
-    font-family: inherit;
-    margin: 0;
-    border-radius: var(--radius);
-  }
-
-  .navbar-dropdown:hover .hamburger {
-    background-color: var(--navbar-hover);
-    border-radius: var(--radius);
-  }
-
-  .navbar-dropdown-content {
-    display: none;
-    position: absolute;
-    right: 20px;
-    width: 300px;
-    background-color: var(--navbar-background-color);
-    min-width: 160px;
-    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
-    z-index: 1;
-    border-radius: var(--radius);
-  }
-
-  .navbar-dropdown-content a {
-    float: none;
-    color: var(--text-color);
-    padding: 12px 16px;
-    text-decoration: none;
-    display: block;
-    text-align: left;
-  }
-
-  .navbar-dropdown-content a:hover {
-    padding: 12px 16px;
-    background-color: var(--navbar-hover);
-  }
-
-  .navbar-dropdown:hover .navbar-dropdown-content {
-    display: block;
-  }
-} */
-
 /* Charts */
 .chart-flex-container {
   display: flex;
@@ -390,27 +283,6 @@ time {
   margin: var(--article-margin);
 }
 
-/* @media only screen and (max-width: 800px) {
-  .chart-flex-container {
-    flex-direction: column;
-  }
-
-  .chart-area {
-    width: 95%;
-    margin: var(--article-margin);
-  }
-
-  #chart {
-    width: 100%;
-    height: 30vh;
-    order: 1;
-  }
-
-  .chart-flex-container article {
-    order: 2;
-  }
-} */
-
 /* Footer */
 footer {
   background-color: var(--footer-background-color);
@@ -464,6 +336,7 @@ footer a:hover {
   align-items: center;
   color: var(--subtext-color);
   font-size: var(--author-row-font-size);
+  margin-bottom: 20px;
 }
 
 .avatar-container {
@@ -478,7 +351,11 @@ footer a:hover {
 }
 
 .author-name {
-  margin-right: var(--element-margin);
+  margin: 2px;
+}
+
+.author-row time {
+  margin: 2px;
 }
 
 article p {
@@ -490,6 +367,30 @@ article strong {
   color: var(--heading-color);
 }
 
+/* table of contents */
+#tocWrapper {
+  margin-bottom: 20px;
+}
+
+#TableOfContents {
+  margin-top: 10px;
+}
+
+#TableOfContents li::marker {
+  content: none;
+  margin: 0px;
+}
+
+#TableOfContents li,
+a {
+  margin: 0px;
+  font-size: 14px;
+}
+
+#TableOfContents ul {
+  margin: 0px;
+}
+
 /* Code block */
 pre {
   overflow-x: auto;
@@ -498,12 +399,12 @@ pre {
 .codeblock {
   position: relative;
   background-color: var(--codeblock-bg-color);
-  max-width: 100vw;
+  width: 100%;
-  width: 60vw;
   padding: var(--element-padding);
-  margin-top: var(--article-margin);
+  margin-top: 20px;
-  margin-bottom: var(--article-margin);
+  margin-bottom: 20px;
   border-radius: var(--radius);
+  border: var(--border-width) var(--border-style) var(--border-color);
   font-size: var(--code-block-font-size);
 }
 
@@ -519,10 +420,10 @@ pre {
 
 /* Styles for inline <code> */
 :not(pre) > code {
-  color: #343a40;
+  color: #aaa4a0;
   background-color: var(--inline-code-bg-color);
-  padding: 0.1em 0.3em;
+  padding: 5px;
-  border-radius: var(--radius);
+  border-radius: 2px;
   font-size: var(--code-block-font-size);
 }