From caa0dcc8c629d99ae4951f9b6c0ea61e599d3859 Mon Sep 17 00:00:00 2001 From: Akshay Date: Sun, 26 Jan 2020 12:00:55 +0530 Subject: rework styles, better kerning --- docs/style.css | 36 +++++++++++++++++++++++++----------- posts/static_sites_with_bash.md | 11 +++++++---- 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 -- cgit v1.2.3