From 64b29cae5370751385a506d97da8846b9dfe19c0 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.
---
 users/fcuny/notes/static/css/custom.css | 101 ++++++++++++++++++++++++++------
 1 file changed, 82 insertions(+), 19 deletions(-)

diff --git a/users/fcuny/notes/static/css/custom.css b/users/fcuny/notes/static/css/custom.css
index bbf93a7..80b07a0 100644
--- a/users/fcuny/notes/static/css/custom.css
+++ b/users/fcuny/notes/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