get rid of the TOC and simplify the CSS

1 files changed, 79 insertions, 246 deletions

diff --git a/static/css/custom.css b/static/css/custom.css
index 97459be..b13de2c 100644
--- a/static/css/custom.css
+++ b/static/css/custom.css
@@ -1,173 +1,62 @@
+/* Base styles */
 body {
   margin: 0;
   font-family: sans-serif;
   font-size: 1rem;
   line-height: 1.6;
+  color: black;
+  background-color: white;
 }
 
-.container {
-  display: flex;
-  max-width: 60rem;
-  margin: 0 auto;
-  padding: 1em;
-}
-
-.menu {
-  flex: 0 0 auto;
-  margin-right: 2em;
-}
-
-.content {
-  flex: 1;
+main {
   max-width: 46rem;
+  margin: 0 auto;
+  padding: 0 1em;
 }
 
-.menu ul {
-  list-style-type: none;
-  padding: 0;
-  margin: 0;
-}
-
-.menu li:first-child {
-  margin-top: 0;
-}
-
-.menu li {
-  margin-bottom: 0.3em;
-}
-
-.menu a {
-  text-decoration: none;
-  color: #333;
-  padding: 0.2em 0.5em;
-  display: inline-block;
-  white-space: nowrap;
-}
-
-.menu a:hover {
-  text-decoration: underline;
-  background-color: #f0f0f0;
-}
-
-.section {
-  margin-top: 0;
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  margin-top: 0;
-  margin-bottom: 0.5em;
+/* Typography */
+h1, h2, h3 {
+  margin: 0 0 0.5em;
   line-height: 1.25;
   font-weight: 600;
 }
 
-p {
-  margin-top: 0;
-  margin-bottom: 1em;
-}
-
-.post-list {
-  list-style-type: none;
-  padding: 0;
-  margin: 0;
-}
-
-.post-list li {
-  display: flex;
-  justify-content: space-between;
-  align-items: baseline;
-  margin-bottom: 0.5em;
-}
+h1 { font-size: 1.4rem; }
+h2 { font-size: 1.3rem; }
+h3 { font-size: 1.2rem; }
 
-.post-list a {
-  text-decoration: none;
-  color: #333;
-  max-width: 70%;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+p {
+  margin: 0 0 1em;
 }
 
-.post-list a:hover {
+/* Links */
+a {
+  color: #047bc2;
   text-decoration: underline;
 }
 
-.post-date {
-  font-size: 0.9em;
-  color: #666;
-}
-
-@media (max-width: 768px) {
-  .container {
-    flex-direction: column;
-  }
-
-  .menu {
-    width: 100%;
-    margin-right: 0;
-    margin-bottom: 1em;
-  }
-
-  .menu ul {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: flex-start;
-  }
-
-  .menu li {
-    margin-right: 1em;
-    margin-bottom: 0.5em;
-  }
-
-  .post-list li {
-    flex-direction: column;
-    align-items: flex-start;
-  }
-
-  .post-list a {
-    max-width: 100%;
-    margin-bottom: 0.2em;
-  }
-}
-
-h1 {
-  font-size: 1.4rem;
-}
-h2 {
-  font-size: 1.3rem;
-}
-h3 {
-  font-size: 1.2rem;
-}
-
-a {
-  color: rgb(56, 115, 173);
+a:hover, a:focus, a:active {
+  text-decoration: underline;
 }
 
-a:link,
-a:hover,
-a:focus,
-a:active {
-  text-decoration: underline;
+/* Lists */
+ul {
+  display: block;
+  padding-left: 1em;
 }
 
+/* Code blocks */
 code {
   font-family: monospace;
   font-size: 90%;
-  overflow-x: auto;
-
   border-radius: 4px;
 }
 
 pre {
   padding: 0.2rem 0.5rem;
-  overflow: auto;
   overflow-x: auto;
   font-size: 90%;
+  background-color: #f5f5f5;
 }
 
 pre > code {
@@ -175,52 +64,32 @@ pre > code {
 }
 
 p > code {
-  background: #eee;
-}
-
-section.times time {
-  font-style: oblique;
-  float: right;
-}
-
-section.times h3 {
-  display: inline;
-  font-size: 1em;
-}
-
-p.date {
-  display: row;
-  font-style: italic;
-  font-size: 0.9rem;
+  background: #f5f5f5;
+  padding: 0.1em 0.3em;
 }
 
+/* Tables */
 table {
   width: 100%;
   border-collapse: collapse;
-  word-break: normal;
 }
 
-th,
-td {
+th, td {
   border: 1px solid #ddd;
   padding: 8px;
   text-align: left;
 }
+
 th {
-  background-color: #f2f2f2;
+  background-color: #f5f5f5;
+  font-weight: bold;
 }
+
 tr:nth-child(even) {
   background-color: #f9f9f9;
 }
-tr:nth-child(odd) {
-  background-color: #ffffff;
-}
-thead {
-  color: #000;
-  font-style: bold;
-  text-align: left;
-}
 
+/* Blockquotes */
 blockquote {
   font-style: italic;
   margin: 0 0 1.5em;
@@ -228,118 +97,82 @@ blockquote {
   border-left: 0.2em solid #bdbdbd;
 }
 
-ul {
-  display: block;
-  list-style-type: disc;
-}
-
-li {
-  display: list-item;
+/* Post list */
+.post-list {
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
 }
 
-/* Note layout */
-.note-container {
+.post-list li {
   display: flex;
   justify-content: space-between;
-  max-width: 60rem; /* Keep this for overall container max-width */
-  margin: 0 auto;
-  padding: 1em;
+  align-items: baseline;
+  margin-bottom: 0.5em;
 }
 
-.note-content {
-  flex: 0 0 736px; /* Set a fixed width */
-  max-width: 736px; /* Ensure it doesn't exceed this width */
-  width: 100%; /* Allow it to shrink on smaller screens */
+.post-list a {
+  color: black;
+  max-width: 70%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-decoration: none;
 }
 
-/* Table of Contents styles */
-.toc-container {
-  background-color: #f9f9f9;
-  border: 1px solid #ccc;
+.post-list a:hover {
+  text-decoration: underline;
 }
 
-.toc-header {
-  background-color: #f0f0f0;
-  padding: 0.5em 1em;
-  font-weight: bold;
+.post-date {
+  font-size: 0.9em;
+  color: #666;
 }
 
-.toc {
-  padding: 1em;
+/* Navigation */
+.main-nav {
+  padding: 1em 0;
+  margin-bottom: 2em;
 }
 
-.toc ul {
+.main-nav ul {
   list-style-type: none;
-  padding-left: 0;
+  padding: 0;
   margin: 0;
+  display: flex;
+  flex-wrap: wrap;
 }
 
-.toc ul ul {
-  padding-left: 1.5em;
-}
-
-.toc li {
-  margin-bottom: 0.5em;
+.main-nav li {
+  margin: 0 1.5em 0.5em 0;
 }
 
-.toc a {
-  text-decoration: none;
-  color: #333;
+.main-nav a {
+  color: #047bc2;
   transition: color 0.3s;
 }
 
-.toc a:hover {
-  color: #ffc832;
-}
-
-/* Desktop styles */
-.desktop-toc {
-  flex: 0 0 200px;
-  margin-left: 2em;
-  position: sticky;
-  top: 1em;
-  align-self: flex-start;
-  max-height: calc(100vh - 2em);
-  overflow-y: auto;
-}
-
-/* Mobile styles */
-.mobile-toc {
-  display: none;
-  margin-bottom: 2em;
-}
-
-.mobile-toc .toc-header {
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-}
-
-.mobile-toc .toc-arrow {
-  margin-right: 0.5em;
-  transition: transform 0.3s;
-}
-
-.mobile-toc .toc {
-  display: none;
+.main-nav a:hover {
+  color: #035891;
 }
 
 /* Responsive layout */
-@media (max-width: 968px) {
-  .note-container {
-    flex-direction: column;
+@media (max-width: 768px) {
+  .main-nav {
+    padding: 0.5em 1em;
   }
 
-  .note-content {
-    flex: 1;
-    max-width: 100%;
+  .main-nav li {
+    margin-right: 1em;
   }
 
-  .desktop-toc {
-    display: none;
+  .post-list li {
+    flex-direction: column;
+    align-items: flex-start;
   }
 
-  .mobile-toc {
-    display: block;
+  .post-list a {
+    max-width: 100%;
+    margin-bottom: 0.2em;
   }
 }