about summary refs log tree commit diff
diff options
context:
space:
mode:
authorFranck Cuny <franck@fcuny.net>2022-01-23 18:48:19 -0800
committerFranck Cuny <franck@fcuny.net>2022-01-23 18:48:19 -0800
commit799633610696c98b63cb3e06556f4fdb6d33ad27 (patch)
tree47204ee413b91d57d6301f98b50bca09fe5062b0
parentlayout: proper TOC (diff)
downloadfcuny.net-799633610696c98b63cb3e06556f4fdb6d33ad27.tar.gz
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.
-rw-r--r--static/css/custom.css101
1 files 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;
+  }
 }