From a1bb702beb889fb8ebbd8d194377c52e5748ae5f Mon Sep 17 00:00:00 2001
From: Mylloon <kennel.anri@tutanota.com>
Date: Sun, 15 Oct 2023 19:16:21 +0200
Subject: [PATCH] blog post "rework"

---
 static/css/blog/post.css   | 151 +++++++++++++------------------------
 templates/blog/footer.html |   3 -
 templates/blog/post.html   |  16 ++--
 3 files changed, 64 insertions(+), 106 deletions(-)
 delete mode 100644 templates/blog/footer.html

diff --git a/static/css/blog/post.css b/static/css/blog/post.css
index 47d411c..f9ad3ec 100644
--- a/static/css/blog/post.css
+++ b/static/css/blog/post.css
@@ -1,13 +1,9 @@
 @media (prefers-color-scheme: light) {
   :root {
-    --selection: rgba(92, 54, 131, 0.7);
-    --bg: #ffffff;
-    --font-color: #18181b;
     --code-font-color: #333333;
     --code-bg-color: #eeeeee;
     --quote-border-color: #9852fa;
     --quote-bg-color: #d8d6d6;
-    --link-hover-color: #fd62af;
     --separator-color: #cccccc;
     --tag-bg-color: #d2e0f0;
   }
@@ -15,103 +11,73 @@
 
 @media (prefers-color-scheme: dark) {
   :root {
-    --selection: rgba(124, 75, 173, 0.5);
-    --bg: #171e26;
-    --font-color: #bcbcc5;
     --code-font-color: #eeeeee;
     --code-bg-color: #333333;
     --quote-border-color: #bd93f9;
     --quote-bg-color: #273341;
-    --link-hover-color: #ff80bf;
     --separator-color: #414558;
     --tag-bg-color: #242e38;
   }
 }
 
 :root {
-  --font-size: 17px;
   --max-width: 750px;
 }
 
+/* Page */
 html {
-  font-family: "Segoe UI", Arial, sans-serif, "Segoe UI Emoji",
-    "Segoe UI Symbol";
-  font-size: var(--font-size);
   scroll-behavior: smooth;
-  background-color: var(--bg);
-  line-height: 1.5;
 }
 
-/* Scrollbar - Firefox */
-* {
-  scrollbar-color: var(--font-color) var(--bg);
+body {
+  max-width: var(--max-width);
+  margin: auto;
 }
 
-/* Scrollbar - Chrome */
-*::-webkit-scrollbar {
-  width: 7px;
-  height: 9px;
-  background: var(--bg);
+/* Post title */
+header h1 {
+  font-size: calc(var(--font-size) * 2);
 }
 
-*::-webkit-scrollbar-thumb {
-  background-color: var(--font-color);
-  border-radius: 10px;
-}
-
-/* Post's title */
-header > h1 {
-  font-size: 2.5rem;
-}
-
-/* Date's title */
-header > span {
+/* Post date */
+header span {
   font-style: italic;
 }
 
-/* Tags */
-header > ul {
+/* Post tags */
+header > ul:last-of-type {
   display: inline;
   margin-left: 1em;
   padding: 0;
 }
 
-header li::before {
+header > ul:last-of-type li::before {
   content: "#";
 }
 
-header li {
+header > ul:last-of-type li {
   display: inline;
-  background-color: var(--tag-bg-color);
+  background: var(--tag-bg-color);
   border-radius: 5px;
   padding: 2px 8px;
-  font-size: calc(var(--font-size) / 1.1);
+  font-size: calc(var(--font-size) * 0.9);
 }
 
-::selection {
-  color: rgb(255, 255, 255);
-  background: var(--selection);
-}
-
-* {
-  color: var(--font-color);
-  outline: none;
-}
-
-p {
-  color: var(--font-color);
-  font-size: var(--font-size);
+/* Post */
+main {
+  margin: 0;
+  padding: 0;
+  max-width: 100%;
 }
 
 /* Anchors */
-h1:hover > a.anchor::before,
-h2:hover > a.anchor::before,
-h3:hover > a.anchor::before,
-h4:hover > a.anchor::before,
-h5:hover > a.anchor::before,
-h6:hover > a.anchor::before {
+h1:hover a.anchor::before,
+h2:hover a.anchor::before,
+h3:hover a.anchor::before,
+h4:hover a.anchor::before,
+h5:hover a.anchor::before,
+h6:hover a.anchor::before {
   visibility: visible;
-  color: var(--font-color);
 }
 
 a.anchor::before {
@@ -122,30 +88,11 @@ a.anchor::before {
 
 a.anchor {
   text-decoration: none;
+  font-size: calc(var(--font-size) * 1.3);
+  vertical-align: baseline;
 }
 
-body {
-  margin: 0 auto;
-  max-width: var(--max-width);
-}
-
-footer {
-  text-align: center;
-}
-
-footer > * {
-  text-transform: uppercase;
-  font-size: calc(var(--font-size) / 1.2);
-  letter-spacing: 0.15rem;
-  opacity: 0.6;
-  text-decoration: none;
-  padding-bottom: 1em;
-}
-
-a:hover {
-  color: var(--link-hover-color);
-}
-
+/* Separators */
 hr {
   border: 0;
   height: 1px;
@@ -158,7 +105,7 @@ blockquote {
   padding: 0.1em 10px;
   border-left: 6px solid;
   border-color: var(--quote-border-color);
-  background-color: var(--quote-bg-color);
+  background: var(--quote-bg-color);
   border-top-right-radius: 5px;
   border-bottom-right-radius: 5px;
 }
@@ -173,17 +120,17 @@ img {
 /* Code */
 kbd,
 code {
-  font-family: Consolas, monospace;
+  font-family: monospace;
 }
 
 /* Little snippet of code (not blocks) */
 kbd,
 code:not(.hljs):not(:has(svg)) {
-  background-color: var(--code-bg-color);
+  background: var(--code-bg-color);
   border-radius: 3px;
   color: var(--code-font-color);
   box-shadow: 0 1px 1px black;
-  font-size: calc(var(--font-size) / 1.2);
+  font-size: calc(var(--font-size) * 0.8);
   padding: 2px 4px;
   vertical-align: 1.5px;
 }
@@ -193,6 +140,17 @@ code:not(.hljs):not(:has(svg)) {
   border-radius: 5px;
 }
 
+.hljs::-webkit-scrollbar {
+  width: 7px;
+  height: 9px;
+  background: var(--background);
+}
+
+.hljs::-webkit-scrollbar-thumb {
+  background-color: var(--font-color);
+  border-radius: 10px;
+}
+
 /* Marge for numbers */
 .hljs-ln-n {
   margin-right: 0.4em;
@@ -201,6 +159,7 @@ code:not(.hljs):not(:has(svg)) {
 /* Numbers in codeblocks */
 .hljs-ln-numbers {
   text-align: right;
+  color: var(--font-color);
 }
 
 /* Fix scroll in codeblocks with line numbering */
@@ -210,7 +169,7 @@ table.hljs-ln {
 
 /* Background for copy code button */
 .hljs-copy-button {
-  background-color: var(--bg) !important;
+  background-color: var(--background) !important;
 }
 
 /* Light theme for the copy code button */
@@ -234,28 +193,23 @@ table.hljs-ln {
   visibility: collapse;
 }
 
+/* Reference to footnotes */
+.footnote-ref a {
+  text-decoration: underline dotted;
+  font-size: calc(var(--font-size) * 0.8);
+}
+
 /* Footnotes */
 .footnotes a {
   font-family: "Segoe UI";
   text-decoration: underline dotted;
 }
 
-/* Reference to footnotes */
-.footnote-ref > a {
-  text-decoration: underline dotted;
-}
-
 /* Mermaid diagrams */
 pre:has(code.language-mermaid) {
   text-align: center;
 }
 
-@media only screen and (max-width: 750px) {
-  body {
-    margin: 20px;
-  }
-}
-
 /* Table of content */
 nav#toc {
   position: fixed;
@@ -264,6 +218,7 @@ nav#toc {
   margin-left: 50px;
 }
 
+/* breakpoint */
 @media only screen and (max-width: 1500px) {
   /* Visible only on large screens */
   nav#toc {
diff --git a/templates/blog/footer.html b/templates/blog/footer.html
deleted file mode 100644
index 42b0c3d..0000000
--- a/templates/blog/footer.html
+++ /dev/null
@@ -1,3 +0,0 @@
-<footer>
-  <a href="/blog">> Retour à la liste des posts</a>
-</footer>
diff --git a/templates/blog/post.html b/templates/blog/post.html
index fb4723d..2182d9d 100644
--- a/templates/blog/post.html
+++ b/templates/blog/post.html
@@ -1,15 +1,21 @@
 <!DOCTYPE html>
-<html class="index" lang="fr">
+<html lang="fr">
   <head dir="ltr">
-    {{>blog/head.html}}
+    {{>head.html}}
+    <link
+      rel="alternate"
+      type="application/rss+xml"
+      title="RSS"
+      href="/blog/rss"
+    />
     <link rel="stylesheet" href="/css/blog/post.css" />
     {{#data}} {{#post}} {{#metadata}}
     {{#math}}{{>libs/katex_head.html}}{{/math}}
     {{#syntax_highlight}}{{>libs/hljs_head.html}}{{/syntax_highlight}}
   </head>
-  <body class="index">
+  <body>
     <header>
-      {{#info}}
+      {{>navbar.html}} {{#info}}
       <h1>{{title}}</h1>
       {{#date}} {{>blog/date.html}} {{/date}}
       <ul>
@@ -26,7 +32,7 @@
       <article>{{&content}}</article>
       {{/post}}
     </main>
-    {{>blog/footer.html}} {{#post}} {{#metadata}}
+    {{#post}} {{#metadata}}
     {{#mermaid}}{{>libs/mermaid_footer.html}}{{/mermaid}}
     {{#math}}{{>libs/katex_footer.html}}{{/math}}
     {{#syntax_highlight}}{{>libs/hljs_footer.html}}{{/syntax_highlight}}