From 1ad845315772be21782d0a1a5948e57ed88f791f Mon Sep 17 00:00:00 2001
From: Franck Cuny <franck@fcuny.net>
Date: Mon, 23 Sep 2024 08:10:12 -0700
Subject: get rid of the TOC and simplify the CSS

---
 static/css/custom.css | 325 ++++++++++++--------------------------------------
 templates/base.html   |  11 +-
 templates/note.html   |  77 +-----------
 templates/orphan.html |   7 +-
 templates/page.html   |  13 +-
 5 files changed, 95 insertions(+), 338 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;
   }
 }
diff --git a/templates/base.html b/templates/base.html
index b903da3..add20f0 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -16,8 +16,9 @@
   </head>
 
   <body>
-    <div class="container">
-      <nav class="menu">
+
+    <main>
+      <nav class="main-nav">
 	<ul>
 	  <li><a href="/">Home</a></li>
 	  <li><a href="/blog">Blog</a></li>
@@ -27,10 +28,8 @@
 	</ul>
       </nav>
 
-      <div class="content">
-	{% block content %}{% endblock content %}
-      </div>
-    </div>
+      {% block content %}{% endblock content %}
+    </main>
   </body>
 
 </html>
diff --git a/templates/note.html b/templates/note.html
index ccd21a6..7eee854 100644
--- a/templates/note.html
+++ b/templates/note.html
@@ -1,79 +1,12 @@
 {% extends "base.html" %}
+
 {% block title %}{{ page.title }} - {{ config.title }}{% endblock title %}
-{% block content -%}
 
-<div class="note-container">
-  <main role="main" class="note-content">
-    <h1>{{ page.title }}</h1>
+{% block content -%}
+<h1>{{ page.title }}</h1>
     
-    {% if page.toc %}
-    <div class="toc-container mobile-toc">
-      <div class="toc-header" id="mobile-toc-toggle">
-        <span class="toc-arrow">&#9656;</span> Table of Contents
-      </div>
-      <div id="mobile-toc" class="toc">
-        <ul>
-        {% for h1 in page.toc %}
-          <li>
-            <a href="{{ h1.permalink | safe }}">{{ h1.title }}</a>
-            {% if h1.children %}
-              <ul>
-              {% for h2 in h1.children %}
-                <li>
-                  <a href="{{ h2.permalink | safe }}">{{ h2.title }}</a>
-                </li>
-              {% endfor %}
-              </ul>
-            {% endif %}
-          </li>
-        {% endfor %}
-        </ul>
-      </div>
-    </div>
-    {% endif %}
-
-    {{ page.content | safe }}
-
-    <p class="date">{{ page.date | date(format="%B %d, %Y") }}</p>
-  </main>
-
-  {% if page.toc %}
-  <aside class="toc-container desktop-toc">
-    <div class="toc-header">Table of Contents</div>
-    <div class="toc">
-      <ul>
-      {% for h1 in page.toc %}
-        <li>
-          <a href="{{ h1.permalink | safe }}">{{ h1.title }}</a>
-          {% if h1.children %}
-            <ul>
-            {% for h2 in h1.children %}
-              <li>
-                <a href="{{ h2.permalink | safe }}">{{ h2.title }}</a>
-              </li>
-            {% endfor %}
-            </ul>
-          {% endif %}
-        </li>
-      {% endfor %}
-      </ul>
-    </div>
-  </aside>
-  {% endif %}
-</div>
+{{ page.content | safe }}
 
-<script>
-  document.getElementById('mobile-toc-toggle').addEventListener('click', function() {
-    var toc = document.getElementById('mobile-toc');
-    var arrow = this.querySelector('.toc-arrow');
-    if (toc.style.display === 'none' || toc.style.display === '') {
-      toc.style.display = 'block';
-      arrow.innerHTML = '&#9662;'; // Down-pointing triangle
-    } else {
-      toc.style.display = 'none';
-      arrow.innerHTML = '&#9656;'; // Right-pointing triangle
-    }
-  });
-</script>
+<p class="date">{{ page.date | date(format="%B %d, %Y") }}</p>
 
 {%- endblock content %}
diff --git a/templates/orphan.html b/templates/orphan.html
index 020c8a6..db8634a 100644
--- a/templates/orphan.html
+++ b/templates/orphan.html
@@ -3,9 +3,8 @@
 {% block title %}{{ page.title }} - {{ config.title }}{% endblock title %}
 
 {% block content -%}
-<main>
-  <h1>{{- page.title -}}</h1>
+<h1>{{- page.title -}}</h1>
+
+{{ page.content | safe -}}
 
-  {{ page.content | safe -}}
-</main>
 {%- endblock content -%}
diff --git a/templates/page.html b/templates/page.html
index 53a7be3..ab19904 100644
--- a/templates/page.html
+++ b/templates/page.html
@@ -3,17 +3,10 @@
 {% block title %}{{ page.title }} - {{ config.title }}{% endblock title %}
 
 {% block content -%}
-<main>
-  <h1>{{ page.title }}</h1>
+<h1>{{ page.title }}</h1>
 
-  {{ page.content | safe -}}
+{{ page.content | safe -}}
 
-  <p class="date">
-    <time datetime="{{ page.date | date(format="%+") }}">
-      {{- page.date | date(format="%B %m, %Y") -}}
-    </time>
-  </p>
-
-</main>
+<p class="date">{{ page.date | date(format="%B %d, %Y") }}</p>
 
 {%- endblock content %}
-- 
cgit v1.2.3