about summary refs log tree commit diff
path: root/users/fcuny
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
commit64b29cae5370751385a506d97da8846b9dfe19c0 (patch)
treebc35e4cc45546eefa249f03e8570b9b84f58a1da /users/fcuny
parentlayout: proper TOC (diff)
downloadworld-64b29cae5370751385a506d97da8846b9dfe19c0.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.
Diffstat (limited to 'users/fcuny')
-rw-r--r--users/fcuny/notes/static/css/custom.css101
1 files 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;
+  }
 }