From 799633610696c98b63cb3e06556f4fdb6d33ad27 Mon Sep 17 00:00:00 2001
From: Franck Cuny <franck@fcuny.net>
Date: Sun, 23 Jan 2022 18:48:19 -0800
Subject: css: TOC location based on display's size

Depending on the size of the display, display the TOC either before the
article or on the right of the article and let's make it sticky.
---
 static/css/custom.css | 101 ++++++++++++++++++++++++++++++++++++++++----------
 1 file changed, 82 insertions(+), 19 deletions(-)

diff --git a/static/css/custom.css b/static/css/custom.css
index bbf93a7..80b07a0 100644
--- a/static/css/custom.css
+++ b/static/css/custom.css
@@ -3,17 +3,27 @@ body {
   font-size: 1.125em;
   line-height: 1.5;
   color: #37474f;
-  word-wrap: break-word;
   margin: 1em auto;
-  max-width: 750px;
   padding: 0 0.55em;
+  max-width: 45rem;
+}
+
+@media screen and (min-width:58rem) {
+  body,
+  main {
+    max-width:calc(45rem + 15rem);
+  }
+  main {
+    display: flex;
+  }
 }
 
 h1 {
   font-size: 2em;
+  margin-top: 1em;
+  margin-bottom: 0.34em;
 }
 
-h1 {margin-top: 1em; margin-bottom: 0.34em}
 h2 {margin-top: 1.25em; margin-bottom: 0.41em}
 h3 {margin-top: 1.5em; margin-bottom: 0.5em}
 
@@ -24,17 +34,19 @@ hr{
   height:2px
 }
 
-a {border-bottom: .125em dashed #bdbdbd}
-
 a {
   color:#047bc2;
-  text-decoration:none;
-  transition:color .1s ease-in-out
+  transition:color .1s ease-in-out;
 }
 
-a:hover, a:focus, a:active {color:#047bc2}
-
-a:hover, a:focus {border-bottom-color: #047bc2}
+a:link,
+a:hover,
+a:focus,
+a:active {
+  color:#047bc2;
+  text-decoration: underline;
+  text-underline-offset:.2rem
+}
 
 span.published, span.updated {
   display: center;
@@ -43,9 +55,9 @@ span.published, span.updated {
 
 code {
   font-family: monospace;
-  padding-left:0.1em;
-  padding-right:0.1em;
-  border-radius:4px;
+  padding-left: 0.1em;
+  padding-right: 0.1em;
+  border-radius: 4px;
   background-color: #fafafa;
 }
 
@@ -62,6 +74,10 @@ pre {
   background-color: #fafafa;
 }
 
+.meta {
+  display: row;
+}
+
 .meta_tags {
   border-radius: 8px;
   padding: 0 .5rem;
@@ -73,6 +89,7 @@ pre {
 .meta_tags a {
   text-decoration: none;
   border-bottom: none;
+  color: #005a9c;
 }
 
 .meta_date {
@@ -102,7 +119,7 @@ table, th, td {
 }
 
 blockquote {
-  font-size: 1.125em;
+  font-size: 1em;
   font-style: italic;
   margin: 0 0 1.5em;
   padding-left: 1em;
@@ -115,6 +132,13 @@ nav {
   display: flex;
   justify-content: space-between;
   align-items: center;
+  padding-top: 0.5rem;
+}
+
+@media screen and (min-width:58rem) {
+  nav {
+    max-width: calc(45rem + 15rem);
+  }
 }
 
 .nav-links {
@@ -127,9 +151,48 @@ nav {
   padding-right: 10px;
 }
 
-.toc {
-  border: 1px solid black;
-  padding: 1em;
-  margin-top: 1em;
-  color: black;
+article {
+  max-width: 45rem;
+}
+
+.toc {display: none}
+
+#toc_small {
+  font-size: 0.9rem;
+  margin-bottom: 2rem;
+  margin-top: 2rem;
+}
+@media screen and (min-width:58rem) {
+  #toc_small {display: none;}
+}
+
+summary {
+  display:flex;
+  flex-direction:column;
+}
+
+#TableOfContents > ul, #TableOfContents > ul > li > ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+#TableOfContents li {margin-bottom: 1rem;}
+
+@media screen and (min-width:58rem) {
+  .toc {
+    padding-left: 1rem;
+    padding-top: 4.5rem;
+    font-size: 0.8em;
+    display:block;
+    position:sticky;
+    top:0;
+    align-self:flex-start;
+    max-width:15rem;
+    z-index:1;
+  }
+  #TableOfContents {
+    border-left: 3px solid #eee;
+    padding-left: 1rem;
+  }
 }
-- 
cgit 1.4.1