some style tweaks

* keep the toc inline on mobile
* make blockquote fancy
* use square list markers

Signed-off-by: Robert Günzler <r@gnzler.io>

1 files changed, 42 insertions, 12 deletions

diff --git a/links/main.css b/links/main.css
index d186725..6245e35 100644
--- a/links/main.css
+++ b/links/main.css
@@ -84,6 +84,12 @@ main>* {
   margin-bottom: 30px
 }
 
+main blockquote {
+  margin-left: 0;
+  border-left: 1px dashed var(--fg);
+  padding-left: 1rem;
+}
+
 main>h1 {
   font-size: 1.5rem;
   text-transform: capitalize;
@@ -178,6 +184,10 @@ main ol {
   list-style-type: decimal-leading-zero;
 }
 
+main ul {
+  list-style-type: square;
+}
+
 /* task list */
 
 main ul.task-list li {
@@ -207,18 +217,18 @@ main ul.task-list input {
 
 /* table */
 
-main>table img {
+main table img {
   max-width: 100%;
   display: block;
   margin: 20px 0;
 }
 
-main>table tr th {
+main table tr th {
   text-align: start;
   font-weight: bold
 }
 
-main>table tr>* {
+main table tr>* {
   padding: 5px 15px;
   vertical-align: top;
 }
@@ -234,7 +244,7 @@ main span.date {
 
 /* toc */
 
-main>nav.table-of-contents {
+main nav.table-of-contents {
   /*max-width: 30ch;*/
 
   position: sticky;
@@ -244,27 +254,27 @@ main>nav.table-of-contents {
   margin-right: -22ch;
 }
 
-main>nav.table-of-contents>ol {
+main nav.table-of-contents>ol {
   list-style: inside disclosure-closed;
 }
 
-main>nav.table-of-contents>ol>:first-child {
+main nav.table-of-contents>ol>:first-child {
   text-transform: none;
   line-height: 2.0;
 }
 
 /* footnotes */
 
-main>section#footnotes {
+main section#footnotes {
   margin-bottom: 0;
   font-size: smaller;
 }
 
-main>section#footnotes hr {
+main section#footnotes hr {
   display: none;
 }
 
-.footnote-back {
+main .footnote-back {
   margin-left: 1ch;
 }
 
@@ -395,14 +405,34 @@ ul.nobull li {
     --body-spacing: 25px;
   }
 
-  ul a,
-  ol a {
+  main ul,
+  main ol {
+    padding-left: 1rem;
+  }
+
+  main ul a,
+  main ol a {
     line-height: 1.8;
   }
 
-  img {
+  main img {
     max-width: 100%;
   }
+
+  main nav.table-of-contents {
+    float: unset;
+    margin-right: unset;
+    position: unset;
+  }
+
+  main nav.table-of-contents>ol {
+    columns: 2;
+    list-style: outside disclosure-closed;
+  }
+
+  main nav.table-of-contents>ol>:first-child {
+    display: none;
+  }
 }
 
 @media (max-width: 320px) {}