From 7ac496c860a8e6f57d3bab1207b1f677c9b6a835 Mon Sep 17 00:00:00 2001
From: Franck Cuny <franck@fcuny.net>
Date: Wed, 16 Feb 2022 09:17:35 -0800
Subject: layout: improve readability and remove /notes

The notes will be moved to a different site/repository, with their own
style.

Update the index page to make it more readable. Make the header more
visible with fewer links.

Add a footer, with links using SVG icons.
---
 users/fcuny/blog/static/css/custom.css | 120 ++++++++++++++++-----------------
 1 file changed, 60 insertions(+), 60 deletions(-)

(limited to 'users/fcuny/blog/static/css')

diff --git a/users/fcuny/blog/static/css/custom.css b/users/fcuny/blog/static/css/custom.css
index ae6d674..70ce618 100644
--- a/users/fcuny/blog/static/css/custom.css
+++ b/users/fcuny/blog/static/css/custom.css
@@ -1,37 +1,40 @@
 body {
   font-family: sans-serif;
-  font-size: 1.125em;
-  line-height: 1.5;
-  color: #37474f;
+  font-size: 1em;
+  line-height: 1.8em;
+  color: #0e0e0b;
   margin: 1em auto;
   padding: 0 0.55em;
-  max-width: 45rem;
-}
-
-@media screen and (min-width:58rem) {
-  body,
-  main {
-    max-width:calc(45rem + 15rem);
-  }
-  main {
-    display: flex;
-  }
+  max-width: 50rem;
 }
 
 h1 {
+  color: #0e0e0b;
   font-size: 2rem;
   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}
+h2, h3 {
+  border-bottom: 1px solid #eee;
+  font-style: italic;
+}
+h2 {
+  margin-top: 1.25em;
+  margin-bottom: 0.41em;
+  font-size: 1.4rem;
+}
+h3 {
+  margin-top: 1.5em;
+  margin-bottom: 0.5em;
+  font-size: 1.2rem;
+}
 
 hr{
   color:#000111;
   background-color:#000111;
   border:none;
-  height:2px
+  height:1px
 }
 
 a {
@@ -64,10 +67,12 @@ p code {
   color: black;
   background-color: #eee;
   padding: 0 0.2rem;
+  font-size: 1.1em;
 }
 
 pre {
   font-family: monospace;
+  font-size: 1.1em;
   margin: 0;
   word-wrap: normal;
   padding: 0.8em;
@@ -130,20 +135,15 @@ blockquote {
 }
 
 nav {
-  width: 100%;
   padding-right: 10px;
+  font-size: 1.4em;
   display: flex;
+  font-family: monospace;
   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 {
   list-style: none;
   display: flex;
@@ -151,51 +151,51 @@ nav {
 
 .navbar a {
   display: inline-block;
-  padding-right: 10px;
+  text-decoration: none;
+}
+
+.navbar a:hover {
+  background-color: #b72d2d;
+  color: #fafafa;
+  text-decoration: none;
+}
+
+.nav-bold {
+  font-weight: 700;
+  color: #b72d2d;
+  text-decoration: none;
 }
 
 article {
-  max-width: 45rem;
+  text-align: justify;
 }
 
-#toc {display: none}
+.post-permalink {
+  list-style: none;
+  margin-left: -20px;
+}
 
-#toc_small {
-  font-size: 0.9rem;
-  margin-bottom: 2rem;
-  margin-top: 2rem;
+.post-date {
+  font-family: monospace;
+  font-weight: 400;
+  font-size: 1.1em;
 }
-@media screen and (min-width:58rem) {
-  #toc_small {display: none;}
+
+footer {
+  border-top: 2px solid #eee;
+  margin-top: 2em;
+  display: flex;
+  flex-direction: row;
+  justify-content: left;
+  align-items: left;
 }
 
-summary {
-  display:flex;
-  flex-direction:column;
+footer a, footer a:link, footer a:focus, footer a:active, footer a:hover {
+  color: black;
+  text-decoration: none;
+  padding: 5px;
 }
 
-#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.9rem;
-    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;
-  }
+footer a:not(:first-child) {
+  margin-left: 15px;
 }
-- 
cgit 1.4.1