From b292cd39bf5e5c2d96f2f64eb1a94d8fd63fae9e Mon Sep 17 00:00:00 2001 From: Volpeon Date: Mon, 22 Mar 2021 20:52:20 +0100 Subject: WIP: Redesign --- .stylelintrc.json | 2 + assets/css/_basics.scss | 6 +++ assets/css/_vars.scss | 42 +++++++++-------- assets/css/components/_hero.scss | 53 ---------------------- assets/css/components/_landing-banner.scss | 40 +++++++++++++++++ assets/css/components/_nav.scss | 27 +++++++---- assets/css/layouts/_container.scss | 19 +++++--- assets/css/layouts/_landing.scss | 60 +++++++++++++++++++++++++ assets/css/layouts/_site.scss | 46 ------------------- assets/css/scopes/_body.scss | 7 +++ assets/css/style.scss | 6 ++- assets/logo/logo.svg | 72 ++++++++++++++++++++++++++++++ content/index.md | 2 - content/logo.svg | 70 ----------------------------- package.json | 3 +- scripts/build_content.sh | 6 +-- templates/base.html | 2 +- templates/layouts/index.html | 20 ++++++--- templates/symbols.svg | 8 ++-- 19 files changed, 272 insertions(+), 219 deletions(-) delete mode 100644 assets/css/components/_hero.scss create mode 100644 assets/css/components/_landing-banner.scss create mode 100644 assets/css/layouts/_landing.scss delete mode 100644 assets/css/layouts/_site.scss create mode 100644 assets/css/scopes/_body.scss create mode 100644 assets/logo/logo.svg delete mode 100644 content/logo.svg diff --git a/.stylelintrc.json b/.stylelintrc.json index 58d0137..f15e9b6 100644 --- a/.stylelintrc.json +++ b/.stylelintrc.json @@ -9,6 +9,8 @@ { "resolveNestedSelectors": true } ], "declaration-colon-space-after": null, + "function-parentheses-newline-inside": "always-multi-line", + "function-parentheses-space-inside": "never-single-line", "scss/dollar-variable-colon-space-after": null, "order/properties-alphabetical-order": null, "order/order": null, diff --git a/assets/css/_basics.scss b/assets/css/_basics.scss index 740b293..eee48f4 100644 --- a/assets/css/_basics.scss +++ b/assets/css/_basics.scss @@ -34,6 +34,12 @@ code { font-feature-settings: 'calt' 0, 'dlig' 1, 'ss09' 1; } +html, +body, +main { + height: 100%; +} + html { background-color: prop(--colors --bg); color: prop(--colors --fg); diff --git a/assets/css/_vars.scss b/assets/css/_vars.scss index 3461b81..0c6102d 100644 --- a/assets/css/_vars.scss +++ b/assets/css/_vars.scss @@ -1,9 +1,8 @@ -$iro-root-size: 16px; - $breakpoints: ( xs: 320px, - sm: 700px, - md: 1100px, + sm: 600px, + md: 900px, + lg: 1400px, ); $unit-intervals: ( @@ -18,28 +17,35 @@ $font-fam--large: 'Garet Variable', $font-fam--text; $font-fam--mono: 'Iosevka Term SS09', 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace; $font-size: 16px; $line-height: 1.7; -$content--width: 56rem; +$content--width: 42rem; $subcontent--indent: 2em; -$gray0: hsl(220, 0%, 7%); -$gray1: hsl(220, 0%, 10%); -$gray2: hsl(220, 0%, 29%); -$gray3: hsl(220, 0%, 54%); -$gray4: hsl(220, 0%, 73%); -$gray5: hsl(220, 0%, 100%); +$gray0: hsl(220, 0%, 6%); +$gray1: hsl(220, 0%, 9%); +$gray2: hsl(220, 0%, 16%); +$gray3: hsl(220, 0%, 29%); +$gray4: hsl(220, 0%, 54%); +$gray5: hsl(220, 0%, 73%); +$gray6: hsl(220, 0%, 100%); @include store(( --colors: ( - --bg-hi: $gray0, // Lighter background + --bg-hi: $gray0, // Darker background --bg: $gray1, // Background + --bg-lo: $gray2, // Lighter background - --obj: $gray2, + --obj: $gray3, - --fg-hi: $gray3, // Faint text - --fg: $gray4, // Text - --fg-lo: $gray5, // Strong text - - --accent: hsl(354, 84%, 55%), + --fg-hi: $gray4, // Faint text + --fg: $gray5, // Text + --fg-lo: $gray6, // Strong text + + --accent: ( + --h: 354, + --s: 84%, + --l: 55%, + --color: hsl(var(--colors--accent--h), var(--colors--accent--s), var(--colors--accent--l)), + ) ) )); diff --git a/assets/css/components/_hero.scss b/assets/css/components/_hero.scss deleted file mode 100644 index 3d8890e..0000000 --- a/assets/css/components/_hero.scss +++ /dev/null @@ -1,53 +0,0 @@ -@include namespace('hero') { - @include store(( - --colors: ( - --emph-fg: prop(--colors --accent, $global: true), - --back-fg: prop(--colors --bg-hi, $global: true) - ) - )); - - @include component(namespace()) { - display: flex; - position: relative; - align-items: center; - justify-content: center; - text-align: center; - - @include element('title') { - margin-top: 0; - font-family: $font-fam--large; - text-transform: none; - - @include modifier('front') { - max-width: 7em; - font-size: 2.5rem; - font-weight: 200; - } - - @include modifier('back') { - position: absolute; - z-index: -10; - transform: translateY(-.08em); - color: prop(--colors --back-fg); - } - } - - @include element('emph') { - color: prop(--colors --emph-fg); - font-weight: 500; - } - - @include iro-responsive-env(('xs', 'sm', 'md')) { - @include element('title') { - @include modifier('front') { - padding: iro-responsive-set((7rem, 7rem, 10rem)) 0; - font-size: iro-responsive-set((2.2rem, 3rem, 3.5rem)); - } - - @include modifier('back') { - font-size: iro-responsive-set((12rem, 14rem, 16rem)); - } - } - } - } -} diff --git a/assets/css/components/_landing-banner.scss b/assets/css/components/_landing-banner.scss new file mode 100644 index 0000000..ee5deab --- /dev/null +++ b/assets/css/components/_landing-banner.scss @@ -0,0 +1,40 @@ +@include namespace('landing-banner') { + @include store(( + --colors: ( + --emph-fg: prop(--colors --accent --color, $global: true), + --emph-bg: prop(--colors --bg-hi, $global: true) + ) + )); + + @include component(namespace()) { + @include element('title') { + max-width: 7em; + margin-top: 0; + transform: translateX(-.04em); + font-family: $font-fam--large; + font-weight: 350; + text-transform: none; + } + + @include element('title-inner') { + background-image: linear-gradient( + to top, + transparent .15em, + #{prop(--colors --emph-bg)} .15em, + #{prop(--colors --emph-bg)} .6em, + transparent .6em + ); + } + + @include element('emph') { + color: prop(--colors --emph-fg); + font-weight: 550; + } + + @include iro-responsive-env(('md', 'lg')) { + @include element('title') { + font-size: iro-responsive-set((2.6rem, 3rem)); + } + } + } +} diff --git a/assets/css/components/_nav.scss b/assets/css/components/_nav.scss index 8fc4564..03118a9 100644 --- a/assets/css/components/_nav.scss +++ b/assets/css/components/_nav.scss @@ -2,16 +2,17 @@ @include store(( --dims: ( --font-size: 15px, - --pad-y: 1em, + --pad-y: .5rem, --item: ( - --pad-x: 1em, - --pad-y: 1em, + --pad-x: 1rem, + --pad-y: 1rem, ), ), --colors: ( + --bg: prop(--colors --bg-hi, $global: true), --logo: ( --idle: ( - --fg: prop(--colors --fg-hi, $global: true), + --fg: prop(--colors --accent --color, $global: true), ), --hover: ( --fg: prop(--colors --fg-lo, $global: true), @@ -33,7 +34,6 @@ @include store(( --dims: ( - --pad-y: .5em, --item: ( --pad-x: .75em, --pad-y: .75em, @@ -42,10 +42,15 @@ ), 'sm'); @include component(namespace()) { - display: flex; - align-items: center; - padding: prop(--dims --pad-y) 0; - font-size: prop(--dims --font-size); + display: flex; + position: fixed; + z-index: 10000; + top: 0; + left: 0; + align-items: center; + padding: prop(--dims --pad-y) 0; + background-color: prop(--colors --bg); + font-size: prop(--dims --font-size); @include element('logo') { display: inline-block; @@ -90,5 +95,9 @@ font-weight: bold; } } + + @include media('<=md') { + position: static; + } } } diff --git a/assets/css/layouts/_container.scss b/assets/css/layouts/_container.scss index 2e102ee..0726950 100644 --- a/assets/css/layouts/_container.scss +++ b/assets/css/layouts/_container.scss @@ -1,10 +1,17 @@ @include namespace('container') { + @include store(( + --dims: ( + --pad-x: 3rem, + --pad-y: $line-height * 3rem + ) + )); + @include store(( --dims: ( --pad-x: 2rem, --pad-y: $line-height * 2rem ) - )); + ), 'md'); @include store(( --dims: ( @@ -14,16 +21,18 @@ ), 'sm'); @include layout(namespace()) { - padding-right: prop(--dims --pad-x); - padding-left: prop(--dims --pad-x); - @include modifier('content') { max-width: $content--width; margin-right: auto; margin-left: auto; } - @include modifier('pad-v') { + @include modifier('pad-x') { + padding-right: prop(--dims --pad-x); + padding-left: prop(--dims --pad-x); + } + + @include modifier('pad-y') { padding-top: prop(--dims --pad-y); padding-bottom: prop(--dims --pad-y); } diff --git a/assets/css/layouts/_landing.scss b/assets/css/layouts/_landing.scss new file mode 100644 index 0000000..b824005 --- /dev/null +++ b/assets/css/layouts/_landing.scss @@ -0,0 +1,60 @@ +@include namespace('landing') { + @include store(( + --dims: ( + --banner-width: 30rem, + ), + --colors: ( + --banner-bg: prop(--colors --bg, $global: true) + ) + )); + + @include layout(namespace()) { + display: flex; + flex-direction: row; + align-items: center; + min-height: 100%; + + @include element('banner') { + flex-shrink: 1.2; + width: 100%; + max-width: prop(--dims --banner-width); + background-color: prop(--colors --banner-bg); + } + + @include element('content') { + width: 100%; + min-width: 0; + } + + @include iro-responsive-env(('md', 'lg')) { + @include element('banner') { + padding: + iro-responsive-set((2rem, 6rem)) + iro-responsive-set((0, 6rem)); + } + + @include element('content') { + padding: + iro-responsive-set((2rem, 6rem)) + iro-responsive-set((0, 6rem)) + iro-responsive-set((2rem, 6rem)) + 0; + } + } + + @include media('<=md') { + display: block; + height: auto; + + @include element('banner', 'content') { + width: auto; + padding-right: 0; + padding-left: 0; + } + + @include element('banner') { + max-width: none; + } + } + } +} diff --git a/assets/css/layouts/_site.scss b/assets/css/layouts/_site.scss deleted file mode 100644 index 2c06606..0000000 --- a/assets/css/layouts/_site.scss +++ /dev/null @@ -1,46 +0,0 @@ -@include namespace('site') { - @include store(( - --dims: ( - --outer-pad-x: 6rem, - --inner-pad-x: 2rem, - --pad-y: 6rem, - ) - )); - - @include layout(namespace()) { - display: flex; - flex-direction: row; - justify-content: space-around; - - @include element('col') { - box-sizing: border-box; - flex: 0 0 auto; - width: 100%; - min-width: 0; - max-width: 35rem; - height: 100%; - padding: prop(--dims --pad-y) prop(--dims --inner-pad-x) prop(--dims --pad-y) prop(--dims --outer-pad-x); - - @include next-twin-element { - flex: 1 1 auto; - max-width: 45rem; - height: auto; - padding-right: prop(--dims --outer-pad-x); - padding-left: prop(--dims --inner-pad-x); - } - } - - @include media('<=sm') { - display: block; - - @include element('col') { - width: auto; - height: auto; - - @include next-twin-element { - width: auto; - } - } - } - } -} diff --git a/assets/css/scopes/_body.scss b/assets/css/scopes/_body.scss new file mode 100644 index 0000000..7adda03 --- /dev/null +++ b/assets/css/scopes/_body.scss @@ -0,0 +1,7 @@ +@include namespace('body') { + @include scope(namespace()) { + > :first-child { + margin-top: 0; + } + } +} diff --git a/assets/css/style.scss b/assets/css/style.scss index c8fd0c1..f4c6db7 100644 --- a/assets/css/style.scss +++ b/assets/css/style.scss @@ -9,12 +9,14 @@ @import 'basics'; @import 'components/nav'; -@import 'components/hero'; +@import 'components/landing-banner'; @import 'components/footer'; -@import 'layouts/site'; +@import 'layouts/landing'; @import 'layouts/container'; +@import 'scopes/body'; + @import 'utils'; :root { diff --git a/assets/logo/logo.svg b/assets/logo/logo.svg new file mode 100644 index 0000000..ff5f3de --- /dev/null +++ b/assets/logo/logo.svg @@ -0,0 +1,72 @@ + + diff --git a/content/index.md b/content/index.md index 7e7ab99..438e56a 100644 --- a/content/index.md +++ b/content/index.md @@ -2,8 +2,6 @@ title: Home --- -Welcome to my website! I'm Volpeon, a red fox doing human things such as programming, creating vector art, and running a website. - ## Find me - **Bandcamp:** [volpeon](https://bandcamp.com/volpeon) diff --git a/content/logo.svg b/content/logo.svg deleted file mode 100644 index 4f66970..0000000 --- a/content/logo.svg +++ /dev/null @@ -1,70 +0,0 @@ - - diff --git a/package.json b/package.json index eceefd7..aa9474b 100644 --- a/package.json +++ b/package.json @@ -8,6 +8,7 @@ "iro-sass": "git+https://git.vulpes.one/iro-sass/" }, "scripts": { - "lint": "stylelint \"assets/css/**/*.scss\"" + "lint": "stylelint \"assets/css/**/*.scss\"", + "fix": "stylelint \"assets/css/**/*.scss\" --fix" } } diff --git a/scripts/build_content.sh b/scripts/build_content.sh index 22f52df..8bcf7c2 100755 --- a/scripts/build_content.sh +++ b/scripts/build_content.sh @@ -54,7 +54,7 @@ get_subpages_basedir() { local filename=$1 filename=${filename%.md} if [ "${filename##*/}" = "index" ]; then - filename=${filename%index} + filename=${filename%/index} fi echo "$filename" } @@ -69,8 +69,8 @@ get_subpages_metadata() { -type f \ -name "*.md" \ ! -name "_*.md" \ - ! -wholename "${base_dir_in}index.md" \ - \( -wholename "$base_dir_in*/index.md" -o ! -wholename "$base_dir_in*/*.md" \) \ + ! -wholename "$base_dir_in/index.md" \ + \( -wholename "$base_dir_in/*/index.md" -o ! -wholename "$base_dir_in/*/*.md" \) \ -print0) fi diff --git a/templates/base.html b/templates/base.html index 98e6da2..4a2102e 100644 --- a/templates/base.html +++ b/templates/base.html @@ -32,7 +32,7 @@ -