diff --git a/themes/devroom-2020/assets/scss/devroom.scss b/themes/devroom-2020/assets/scss/devroom.scss index 6a4448c..6b4fac7 100644 --- a/themes/devroom-2020/assets/scss/devroom.scss +++ b/themes/devroom-2020/assets/scss/devroom.scss @@ -1,35 +1,48 @@ -@import url('https://fonts.googleapis.com/css?family=IBM+Plex+Mono:400,700&display=swap&subset=latin-ext'); -@import "./nord.scss"; +@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;700&family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&family=Rubik:wght@400;700&display=swap'); -$h1_font_size: 1.6rem; -$h2_font_size: 1.2rem; -$font_size: 0.96rem; -$line-height: 1.5rem; +$h1_font_size: 2.4rem; +$h2_font_size: 2rem; +$header_size: 1.4rem; +$font_size: 1.1rem; +$code_font_size: 0.96rem; +$code_line_height: 1.4rem; +$line-height: 1.6rem; -$backdrop: darken($nord0, 10%); -$background: darken($nord0, 10%); -$text: $nord5; -$links: lighten($nord10, 17%); -$footer: $nord5; +$background: #FBFBF2; +$backdrop: $background; +$text: #272932; +$links: #0081AF; +$footer: $text; $meta: $text; -$header: $nord10; -$highlight: darken($nord14, 25%); +$header: $text; +$highlight: $links; +$code_background: #fff; +$code_border_color: #9A8873; +$code: #A4508B; html, body { background-color: $backdrop; color: $text; - font-family: 'IBM Plex Mono', monospace; + font-family: 'PT Serif', serif; font-size: $font_size; line-height: $line-height; } +code, pre { + font-family: 'IBM Plex Mono', monospace; +} + .important { - background-color: $highlight; - color: $background; width: 100%; display: block; - padding: 1rem; - text-align: center; + font-style: italic; +} + +.important::before { + content: '\f0a4'; + font-family: "Font Awesome 6 Free"; + font-size: 1rem; + margin-right: 0.7rem; } .container { @@ -48,38 +61,21 @@ nav a { } h1, h2, h3, h4, h5 { - font-size: $font_size; + font-family: 'Rubik', sans-serif; + font-size: $header_size; font-weight: bold; color: $header; margin: 0.67rem 0; - text-transform: uppercase; } h1 { font-size: $h1_font_size; color: $text; - &::before { - content: "# "; - } + margin-bottom: 1.6rem; } h2 { font-size: $h2_font_size; - &::before { - content: "## " - } -} - -h3::before { - content: "### " -} - -h4::before { - content: "#### " -} - -h5::before { - content: "##### " } b, @@ -87,8 +83,9 @@ strong { font-weight: bold; } -blockquote *::before { - content: "> "; +blockquote { + border-left: 5px solid $code_border_color; + padding-left: 1rem; } img { @@ -100,24 +97,31 @@ ol { } ul { - list-style-type: "* "; list-style-position: outside; } span.begin-task-list + ul { list-style-type: none; - padding-left: 20px; + padding-left: 1rem; input[type="checkbox"] { appearance: none; } input[type="checkbox"]::before { - content: "[ ]"; + content: '\f111'; + font-family: "Font Awesome 6 Free"; + font-size: 1rem; + color: rgba($links, 0.3); + margin-right: 0.4rem; } input[type="checkbox"]:checked::before { - content: "[✓]"; + content: '\f058'; + font-family: "Font Awesome 6 Free"; + font-size: 1rem; + color: $links; + margin-right: 0.4rem; } } @@ -125,22 +129,9 @@ header { margin-bottom: 1.5rem; } -.privacy-notice { - border-top: 2px dashed $footer; - margin-top: 1.5rem; - - .buymeacoffee { - background-color: #FF6C11; - color: #fff; - text-decoration: none; - padding-left: 0.4rem; - padding-right: 0.4rem; - } -} - footer { color: $footer; - border-top: 2px dashed $footer; + border-top: 1px solid $footer; margin-top: 1.5rem; em { @@ -159,28 +150,15 @@ small { font-weight: normal; } -hr { - border: none; - border-top: 2px dashed $footer; -} - code { - color: $nord14; + color: $code; } -code::before, -code::after { - content: "`"; -} - -pre > code::before, -pre > code::after { - content: ""; -} pre, code { font-family: 'IBM Plex Mono', monospace; - font-size: $font_size; + font-size: $code_font_size; + line-height: $code_line_height; } pre > code { @@ -191,29 +169,16 @@ pre > code { } pre { - background-color: $background !important; - margin-left: 2.5rem; + background-color: $code_background !important; + padding: 1rem 1rem 1rem 2.5rem; overflow-x: auto; overflow-y: hidden; line-height: $line-height; + border: 2px solid $code_border_color; } -pre::before { - display: block; - content: "```"; - color: $footer; -} -pre::after { - display: block; - content: "```"; - color: $footer; -} - -table td::before, -table th::before { - content: " | "; - color: $footer; - font-weight: normal; +table td, table th { + padding: 0.2rem 1rem; } .flex-columns { diff --git a/themes/devroom-2020/layouts/_default/baseof.html b/themes/devroom-2020/layouts/_default/baseof.html index ebe35a3..cc05f73 100644 --- a/themes/devroom-2020/layouts/_default/baseof.html +++ b/themes/devroom-2020/layouts/_default/baseof.html @@ -15,6 +15,7 @@ + {{ if .Site.IsServer }} {{ $cssOpts := (dict "targetPath" "css/devroom.css" "enableSourceMap" true ) }} {{ $styles := resources.Get "scss/devroom.scss" | resources.ExecuteAsTemplate "style.devroom.css" . | toCSS $cssOpts }} diff --git a/themes/devroom-2020/layouts/partials/footer.html b/themes/devroom-2020/layouts/partials/footer.html index aa2a320..aa706ed 100644 --- a/themes/devroom-2020/layouts/partials/footer.html +++ b/themes/devroom-2020/layouts/partials/footer.html @@ -1,17 +1,11 @@ -
-

- My site is free of ads and trackers. I record privacy-respecting usage statistics with - Fathom. -

- -

Was this post helpful to you? Why not - ☕ Buy me a coffee. -

-
- diff --git a/themes/devroom-2020/layouts/partials/post.html b/themes/devroom-2020/layouts/partials/post.html index 728d3be..6c96d7f 100644 --- a/themes/devroom-2020/layouts/partials/post.html +++ b/themes/devroom-2020/layouts/partials/post.html @@ -3,22 +3,20 @@

{{ .Title }}

- | Posted: - - | ~{{ .FuzzyWordCount }}wrds - (~{{ .ReadingTime }}min) + Posted: + ~{{ .FuzzyWordCount }} words + ~{{ .ReadingTime }} min {{ if not (eq $lastmod $date) }} - | Last updated:
{{ .Content }}