rework styles, better kerning

2 files changed, 32 insertions, 15 deletions

diff --git a/docs/style.css b/docs/style.css
index 1311413..9555dd2 100644
--- a/docs/style.css
+++ b/docs/style.css
@@ -10,7 +10,7 @@
   --cyan: #79ffe1;
   --pink: #d344e2;
   --black: #212121;
-  --light-black: #535353;
+  --light-black: #666666;
   --white: #ffffff;
   --dark-white: #eeeeee;
 }
@@ -19,7 +19,7 @@ body { font-family: 'Inter', sans-serif; }
 @supports (font-variation-settings: normal) {
   body {
     font-family: 'Inter var', sans-serif; 
-    font-feature-settings: 'ss01' 1, 'ss02' 1, 'kern' 1, 'liga' 1;
+    font-feature-settings: 'ss01' 1, 'kern' 1, 'liga' 1, 'cv05' 1;
   }
 }
 
@@ -28,6 +28,7 @@ body {
   color: var(--black);
   padding: 0;
   padding-top: 2rem;
+  padding-bottom: 2rem;
   text-align: center;
 }
 
@@ -82,7 +83,7 @@ hr {
 }
 
 .date {
-  font-feature-settings: 'ss01' 1, 'zero' 1;
+  font-feature-settings: 'ss01' 1, 'kern' 1;
   font-weight: 400;
   font-size: 0.8rem;
   color: var(--light-black);
@@ -105,13 +106,13 @@ hr {
 }
 
 .heading {
-  margin:0 auto;
+  margin: 0 auto;
   color: var(--black);
   text-align: center;
   font-size: 6rem;
   font-family: 'Iosevka', monospace;
   text-shadow: 0.25rem 0rem var(--cyan), -0.25rem 0rem var(--pink);
-  line-height: 8.5rem;
+  line-height: 7rem;
 }
 
 a, a:hover, a:visited, a:active {
@@ -129,14 +130,14 @@ a, a:hover, a:visited, a:active {
 .post-end-link, .post-end-link:hover, .post-end-link:visited, .post-end-link:active
 {
   text-decoration: none;
-  color: var(--black);
+  color: var(--light-black);
   text-shadow: none;
   font-size: 0.8rem;
 }
 
 .post-title {
   text-decoration: none;
-  color: var(--light-black);
+  color: var(--black);
   text-shadow: none;
   font-weight: 800;
   font-size: 1.5rem;
@@ -153,12 +154,16 @@ pre, code {
 
 pre {
   background-color: var(--dark-white);
-  overflow: auto;
+  overflow: hidden;
   padding: 0.8rem;
   border: 1px solid var(--dark-white);
   border-radius: 0.2px;
 }
 
+pre:hover {
+  overflow-x: scroll;
+}
+
 code {
   color: var(--pink);
 }
@@ -172,11 +177,20 @@ pre > code {
   background: var(--cyan);
 }
 
-.commit-hash {
+.stats {
   float: right;
+  color: var(--light-black);
+}
+
+.stats-number {
   font-size: 0.8rem;
-  text-decoration: none;
-  font-family: Monospace;
+  font-family: 'Inter var', Monospace;
+  font-feature-settings: 'ss01' 1, 'kern' 1;
+}
+
+.stats-unit {
+  font-size: 0.5rem;
+  font-family: 'Inter var';
 }
 
 .footer {
diff --git a/posts/static_sites_with_bash.md b/posts/static_sites_with_bash.md
index d87cefd..2a1cc92 100644
--- a/posts/static_sites_with_bash.md
+++ b/posts/static_sites_with_bash.md
@@ -5,10 +5,12 @@ After going through a bunch of static site generators
 my own. If you are more of the 'show me the code' kinda guy,
 [here](https://github.com/nerdypepper/site) you go.
 
-**Text formatting**: I chose to write in markdown, and convert
+### Text formatting
+I chose to write in markdown, and convert
 to html with [lowdown](https://kristaps.bsd.lv/lowdown/).
 
-**Directory structure**: I host my site on GitHub pages, so
+### Directory structure
+I host my site on GitHub pages, so
 `docs/` has to be the entry point. Markdown formatted posts
 go into `posts/`, get converted into html, and end up in
 `docs/index.html`, something like this:
@@ -24,7 +26,8 @@ for f in $posts; do
 done
 ```
 
-**Assets**: Most static site generators recommend dropping image
+### Assets
+Most static site generators recommend dropping image
 assets into the site source itself. That does have it's
 merits, but I prefer hosting images separately:
 
@@ -41,7 +44,7 @@ scp -P 443 "$1" emerald:files/"$id"
 echo "https://files.nerdypepper.tech/$id"
 ```
 
-**Templating**:
+### Templating
 [`generate.sh`](https://github.com/NerdyPepper/site/blob/master/generate.sh)
 brings the above bits and pieces together (with some extra
 cruft to avoid javascript).  It uses `sed` to produce nice