From 94e30b971e93669810d8a4889d60340900ad60f3 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Thu, 24 Dec 2020 22:07:49 +0100 Subject: Various improvements: CSS classes, favicon, design --- assets/css/_basics.scss | 19 +++++-------------- assets/css/_vars.scss | 27 +++++++++++++++++++-------- assets/css/components/_nav.scss | 34 ++++++++++++++++++++++++++++------ assets/css/layouts/_container.scss | 20 ++++++++++++++++++++ assets/css/scopes/_page.scss | 4 ++++ assets/css/style.scss | 2 ++ content/favicon.ico | Bin 7406 -> 7406 bytes content/index.md | 2 +- content/projects/index.md | 6 ++++++ metadata/metadata.json | 12 ++++++++++-- scripts/build_fonts.sh | 4 ++-- templates/base.html | 28 ++++++++++++++++------------ templates/pageHeaderSm.html | 2 +- 13 files changed, 114 insertions(+), 46 deletions(-) create mode 100644 assets/css/layouts/_container.scss create mode 100644 content/projects/index.md diff --git a/assets/css/_basics.scss b/assets/css/_basics.scss index 3adf64c..dd394da 100644 --- a/assets/css/_basics.scss +++ b/assets/css/_basics.scss @@ -33,17 +33,8 @@ html { } body { - margin: 2em; + margin: 0; padding: 0; - - @media (max-width: $breakpoint-sm) { - margin: 1em; - } -} - -main { - max-width: 70ch; - margin: 0 auto; } code { @@ -62,7 +53,7 @@ pre { } strong { - color: var(--fg-plus); + color: var(--fg-plus-2); font-weight: bold; } @@ -117,12 +108,12 @@ h3 { h1 { text-transform: uppercase; font-size: px-to-em($heading-font-size); - color: var(--heading); + color: var(--heading-fg); } h2 { font-size: 1em; - color: var(--heading); + color: var(--heading-fg); } h3 { @@ -138,7 +129,7 @@ p { :visited { position: relative; z-index: 1000; - padding: 0.1em 0.3em; + padding: 0.2em 0.3em; margin: 0 -0.3em; color: var(--link-idle-fg); diff --git a/assets/css/_vars.scss b/assets/css/_vars.scss index a29ad6d..4883605 100644 --- a/assets/css/_vars.scss +++ b/assets/css/_vars.scss @@ -4,6 +4,8 @@ $code-block-font-size: $font-size; $line-height: 1.5; $code-block-line-height: 1.4; +$content-width: 75ch; + $page-item-prefix-max-chars: 3ch; $page-item-prefix-pad: 2ch; $page-item-prefix-width: $page-item-prefix-max-chars + $page-item-prefix-pad; @@ -13,31 +15,40 @@ $subcontent-indent: 4ch; $breakpoint-sm: 700px; :root { - --gray1: hsl(270, 0%, 9.7%); + --gray0: hsl(270, 0%, 7%); + --gray1: hsl(270, 0%, 10%); --gray2: hsl(270, 1%, 29%); --gray3: hsl(270, 2%, 54%); --gray4: hsl(270, 2%, 73%); --gray5: hsl(270, 2%, 83%); --gray6: hsl(270, 2%, 100%); + --bg-minus: var(--gray0); --bg: var(--gray1); --bg-plus: var(--gray2); --fg-minus: var(--gray3); --fg: var(--gray4); - --fg-plus: var(--gray6); + --fg-plus: var(--gray5); + --fg-plus-2: var(--gray6); + + --heading-fg: var(--fg-plus-2); --select-bg: hsla(270, 2%, 100%, 0.996); - --select-fg: var(--gray1); + --select-fg: var(--bg-minus); --code-fg: var(--fg-minus); --code-block-fg: var(--fg-minus); --page-item-prefix-fg: var(--fg-minus); - --link-idle-fg: var(--gray6); //#90acf2; //var(--gray6); - --link-visited-fg: var(--gray5); //#bc9df2; //var(--gray5); - --link-hover-bg: var(--gray6); - --link-hover-fg: var(--gray1); + --link-idle-fg: var(--fg-plus-2); //#90acf2; //var(--gray6); + --link-visited-fg: var(--fg-plus); //#bc9df2; //var(--gray5); + --link-hover-bg: var(--fg-plus-2); + --link-hover-fg: var(--bg-minus); - --heading: var(--fg-plus); + --nav-bg: var(--bg-minus); + --nav-logo-fg: var(--fg-minus); + --nav-item-idle-fg: var(--fg); + --nav-item-hover-fg: var(--fg-plus-2); + --nav-item-active-fg: var(--fg-plus-2); } diff --git a/assets/css/components/_nav.scss b/assets/css/components/_nav.scss index 1fc24f9..d86a484 100644 --- a/assets/css/components/_nav.scss +++ b/assets/css/components/_nav.scss @@ -1,14 +1,36 @@ .c-nav { - margin-bottom: $line-height * 2rem; + background-color: var(--nav-bg); + //border-bottom: 1px solid var(--bg-plus); - &::before { - content: "//\\"; - color: var(--page-item-prefix-fg); + &__items { + display: flex; + align-items: baseline; + } + + &__logo { + display: inline-block; + color: var(--nav-logo-fg); + text-decoration: none; + + &:link:hover { + background-color: transparent; + color: var(--nav-item-hover-fg); + font-weight: bold; + } } &__item { - margin-left: 2ch; - color: var(--fg); + display: inline-block; + padding: 1rem 1ch calc(1rem - 2px); + margin: 0 -1ch 0 3ch; + color: var(--nav-item-idle-fg); text-decoration: none; + border-bottom: 2px solid transparent; + + &:hover { + background-color: transparent; + color: var(--nav-item-hover-fg); + font-weight: bold; + } } } diff --git a/assets/css/layouts/_container.scss b/assets/css/layouts/_container.scss new file mode 100644 index 0000000..9159f5a --- /dev/null +++ b/assets/css/layouts/_container.scss @@ -0,0 +1,20 @@ +.l-container { + padding-left: 2rem; + padding-right: 2rem; + + &--narrow { + margin-left: auto; + margin-right: auto; + max-width: $content-width; + } + + &--pad-v { + padding-top: $line-height * 2rem; + padding-bottom: $line-height * 2rem; + } + + @media (max-width: $breakpoint-sm) { + padding-left: 1rem; + padding-right: 1rem; + } +} diff --git a/assets/css/scopes/_page.scss b/assets/css/scopes/_page.scss index cf7673c..4a97b79 100644 --- a/assets/css/scopes/_page.scss +++ b/assets/css/scopes/_page.scss @@ -1,6 +1,10 @@ .s-page { padding-left: $page-item-prefix-width; + > :first-child { + margin-top: 0; + } + h1, h2, h3, diff --git a/assets/css/style.scss b/assets/css/style.scss index 7383ac4..2ca4cd4 100644 --- a/assets/css/style.scss +++ b/assets/css/style.scss @@ -6,6 +6,8 @@ @import "components/nav"; @import "components/page-header"; +@import "layouts/container"; + @import "scopes/page"; @import "utils"; diff --git a/content/favicon.ico b/content/favicon.ico index 39895e5..b1b98ec 100644 Binary files a/content/favicon.ico and b/content/favicon.ico differ diff --git a/content/index.md b/content/index.md index 64c3e77..403eab5 100644 --- a/content/index.md +++ b/content/index.md @@ -2,7 +2,7 @@ id: "home" title: "Home" -ismain: true +isHome: true --- # Volpeon's Den diff --git a/content/projects/index.md b/content/projects/index.md new file mode 100644 index 0000000..bc6204f --- /dev/null +++ b/content/projects/index.md @@ -0,0 +1,6 @@ +--- +id: "projects" +title: "Projects" +--- + +# Projects diff --git a/metadata/metadata.json b/metadata/metadata.json index dce6192..b53ac32 100644 --- a/metadata/metadata.json +++ b/metadata/metadata.json @@ -1,5 +1,8 @@ { - "sitetitle": "Volpeon's Den", + "site": { + "title": "Volpeon's Den", + "logo": "\\\\\\\\/" + }, "menus": { "main": [ { @@ -10,7 +13,12 @@ { "id": "blog", "label": "Blog", - "url": "/blog" + "url": "/blog/" + }, + { + "id": "projects", + "label": "Projects", + "url": "/projects/" } ] } diff --git a/scripts/build_fonts.sh b/scripts/build_fonts.sh index 8c795ec..11c01db 100755 --- a/scripts/build_fonts.sh +++ b/scripts/build_fonts.sh @@ -1,6 +1,6 @@ #!/bin/bash -echo "[COMPILE] assets/fonts/iosevka-term-ss09-regular.ttf -> output/iosevka-term-ss09-regular.woff2" +echo "[MINIFY ] assets/fonts/iosevka-term-ss09-regular.ttf -> output/iosevka-term-ss09-regular.woff2" pyftsubset assets/fonts/iosevka-term-ss09-regular.ttf \ --text-file='assets/fonts/glyphs.txt' \ @@ -8,7 +8,7 @@ pyftsubset assets/fonts/iosevka-term-ss09-regular.ttf \ --flavor='woff2' \ --output-file='output/iosevka-term-ss09-regular.woff2' -echo "[COMPILE] assets/fonts/iosevka-term-ss09-bold.ttf -> output/iosevka-term-ss09-bold.woff2" +echo "[MINIFY ] assets/fonts/iosevka-term-ss09-bold.ttf -> output/iosevka-term-ss09-bold.woff2" pyftsubset assets/fonts/iosevka-term-ss09-bold.ttf \ --text-file='assets/fonts/glyphs.txt' \ diff --git a/templates/base.html b/templates/base.html index cc05840..96dd4ff 100644 --- a/templates/base.html +++ b/templates/base.html @@ -15,38 +15,42 @@ $if(keywords)$ $endif$ - $if(ismain)$$else$$title$ – $endif$$sitetitle$ + $if(isHome)$$else$$title$ – $endif$$site.title$ $if(id)$ $endif$ -
- - - $body$ + $body$ +
- $if(ismain)$ + $if(isHome)$ diff --git a/templates/pageHeaderSm.html b/templates/pageHeaderSm.html index 9386b8c..e673a73 100644 --- a/templates/pageHeaderSm.html +++ b/templates/pageHeaderSm.html @@ -4,7 +4,7 @@ '| .´ ,~'\ ).,__,)/,," ' . ' | | | ' .' |_ `~´ (/\\, (/\\, _' '_ _| ' |_ _' '_ --> -
+
  .|                      //\__      '  .'     |  . |          ' . ' 
   |       _.~-"""-----~``  ,-´      '   '     |'   |          '   ' 
  '|    .´  ,~'\ ).,__,)/,,"         ' . '     |  | |          '  .' 
-- 
cgit v1.2.3-70-g09d2