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.

1 files changed, 82 insertions, 19 deletions

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