From 8e1e42fcb54c33816d00b26a949753e6c3c9a904 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Sun, 21 Mar 2021 12:52:39 +0100 Subject: WIP: Redesign --- .gitignore | 2 + assets/css/_basics.scss | 85 ++++++++++++++++++------------------- assets/css/_vars.scss | 20 ++++++--- assets/css/components/_footer.scss | 6 +-- assets/css/components/_hero.scss | 45 +++++++++++--------- assets/css/components/_nav.scss | 71 ++++++++++++++----------------- assets/css/components/_page.scss | 3 -- assets/css/layouts/_container.scss | 29 ++++++------- assets/css/layouts/_site.scss | 46 ++++++++++++++++++++ assets/css/scopes/_code.scss | 27 ------------ assets/css/scopes/_page.scss | 25 ----------- assets/css/style.scss | 11 +++-- assets/favicon/favicon.svg | 75 ++++++++++++++++++++++++++++++++ content/favicon.ico | Bin 7406 -> 15086 bytes templates/layouts/index.html | 22 +++++----- templates/layouts/page.html | 11 ----- 16 files changed, 267 insertions(+), 211 deletions(-) delete mode 100644 assets/css/components/_page.scss create mode 100644 assets/css/layouts/_site.scss delete mode 100644 assets/css/scopes/_code.scss delete mode 100644 assets/css/scopes/_page.scss create mode 100644 assets/favicon/favicon.svg diff --git a/.gitignore b/.gitignore index 1406277..dea1d0a 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,4 @@ +assets/favicon/*.png +assets/favicon/*.ico node_modules output diff --git a/assets/css/_basics.scss b/assets/css/_basics.scss index 1cd5547..740b293 100644 --- a/assets/css/_basics.scss +++ b/assets/css/_basics.scss @@ -1,28 +1,27 @@ @font-face { font-family: 'IBM Plex Sans'; - font-style: normal; + font-style: normal; font-weight: normal; - src: //local('IBM Plex Sans'), - url('/IBMPlexSans-Regular.woff2') format('woff2'); + src: url('/IBMPlexSans-Regular.woff2') format('woff2'); } @font-face { font-family: 'IBM Plex Sans'; - font-style: normal; + font-style: normal; font-weight: bold; - src: url('/IBMPlexSans-Bold.woff2') format('woff2'); + src: url('/IBMPlexSans-Bold.woff2') format('woff2'); } @font-face { font-family: 'Garet Variable'; - font-style: normal; + font-style: normal; font-weight: 50 950; - src: url('/GaretVariable.woff2') format('woff2-variations'); + src: url('/GaretVariable.woff2') format('woff2-variations'); } ::selection { background-color: var(--select--bg); - color: var(--select--fg); + color: var(--select--fg); } img::selection { @@ -37,14 +36,14 @@ code { html { background-color: prop(--colors --bg); - color: prop(--colors --fg); - font-family: $font-fam--text; - font-size: px-to-em($font-size, 16px); - line-height: $line-height; + color: prop(--colors --fg); + font-family: $font-fam--text; + font-size: px-to-em($font-size, 16px); + line-height: $line-height; } body { - margin: 0; + margin: 0; padding: 0; } @@ -58,7 +57,7 @@ code { } pre { - margin: ($line-height * 1em) 0 0; + margin: ($line-height * 1em) 0 0; overflow-x: auto; code { @@ -67,27 +66,27 @@ pre { } strong { - color: prop(--colors --fg-lo); + color: prop(--colors --fg-lo); font-weight: bold; } ul, ol { - margin: ($line-height * 1em) 0 0; - padding: 0; + margin: ($line-height * 1em) 0 0; + padding: 0; list-style: none; } li { - position: relative; + position: relative; padding-left: $subcontent--indent; &::before { - display: inline-block; - position: absolute; - width: $subcontent--indent; + display: inline-block; + position: absolute; + width: $subcontent--indent; margin-left: -1 * $subcontent--indent; - color: prop(--colors --fg-hi); + color: prop(--colors --fg-hi); font-family: $font-fam--mono; } } @@ -113,7 +112,7 @@ ul ul { } dl { - margin: ($line-height * 1em) 0 0; + margin: ($line-height * 1em) 0 0; padding: 0; } @@ -123,12 +122,12 @@ dd { } dt { - color: prop(--colors --fg-lo); + color: prop(--colors --fg-lo); font-weight: bold; &::after { - content: ':'; - color: prop(--colors --fg); + content: ':'; + color: prop(--colors --fg); font-weight: normal; } } @@ -143,11 +142,11 @@ h3, h4, h5, h6 { - margin: ($line-height * 2em) 0 0; - font-family: $font-fam--large; - font-size: 1em; - font-weight: 600; - line-height: 1.2; + margin: ($line-height * 2em) 0 0; + font-family: $font-fam--large; + font-size: 1em; + font-weight: 600; + line-height: 1.2; font-feature-settings: 'ss02' 1; + h1, @@ -170,22 +169,22 @@ h1 { } p { - margin: ($line-height * 1em) 0 0; + margin: ($line-height * 1em) 0 0; hyphens: auto; } :link, :visited { position: relative; - z-index: 1; - margin: 0 -.3em; - padding: .2em .3em; - color: var(--link--idle--fg); + z-index: 1; + margin: 0 -.3em; + padding: .2em .3em; + color: var(--link--idle--fg); &:hover { background-color: var(--link--hover--bg); - color: var(--link--hover--fg); - text-decoration: none; + color: var(--link--hover--fg); + text-decoration: none; } strong { @@ -194,15 +193,15 @@ p { } hr { - height: 1px; - margin: ($line-height * 1em) 0; - border: 0; + height: 1px; + margin: ($line-height * 1em) 0; + border: 0; background-color: prop(--colors --obj); } blockquote, pre { - margin: ($line-height * 1em) 0 0 1px; + margin: ($line-height * 1em) 0 0 1px; padding-left: calc(#{$subcontent--indent} - 3px); - border-left: 2px solid prop(--colors --obj); + border-left: 2px solid prop(--colors --obj); } diff --git a/assets/css/_vars.scss b/assets/css/_vars.scss index ae8a7a8..3461b81 100644 --- a/assets/css/_vars.scss +++ b/assets/css/_vars.scss @@ -13,12 +13,12 @@ $unit-intervals: ( '': 0 ); -$font-fam--text: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif; -$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; +$font-fam--text: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif; +$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; $subcontent--indent: 2em; $gray0: hsl(220, 0%, 7%); @@ -43,6 +43,14 @@ $gray5: hsl(220, 0%, 100%); ) )); +@each $breakpoint in map-keys($breakpoints) { + @include media('<=#{$breakpoint}') { + @include store(( + --colors: () + ), $breakpoint); + } +} + :root { --heading--fg: var(--colors--fg-lo); diff --git a/assets/css/components/_footer.scss b/assets/css/components/_footer.scss index 8fcbc98..db30fcd 100644 --- a/assets/css/components/_footer.scss +++ b/assets/css/components/_footer.scss @@ -9,9 +9,9 @@ )); @include component(namespace()) { - padding-top: prop(--dims --pad-y); + padding-top: prop(--dims --pad-y); padding-bottom: prop(--dims --pad-y); - color: prop(--colors --fg); - text-align: right; + color: prop(--colors --fg); + text-align: right; } } diff --git a/assets/css/components/_hero.scss b/assets/css/components/_hero.scss index 6c497a1..3d8890e 100644 --- a/assets/css/components/_hero.scss +++ b/assets/css/components/_hero.scss @@ -1,6 +1,7 @@ @include namespace('hero') { @include store(( --colors: ( + --emph-fg: prop(--colors --accent, $global: true), --back-fg: prop(--colors --bg-hi, $global: true) ) )); @@ -8,42 +9,44 @@ @include component(namespace()) { display: flex; position: relative; - flex-direction: column; align-items: center; justify-content: center; text-align: center; - @include element('title', 'backtitle') { - margin: 0 auto; + @include element('title') { + margin-top: 0; font-family: $font-fam--large; text-transform: none; - } - @include element('emph') { - color: prop(--colors --accent, $global: true); - font-weight: 500; - } + @include modifier('front') { + max-width: 7em; + font-size: 2.5rem; + font-weight: 200; + } - @include element('title') { - max-width: 11em; - font-weight: 200; + @include modifier('back') { + position: absolute; + z-index: -10; + transform: translateY(-.08em); + color: prop(--colors --back-fg); + } } - @include element('backtitle') { - 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') { - padding: iro-responsive-set((7rem, 7rem, 10rem)) 0; - font-size: iro-responsive-set((1.8rem, 2.8rem, 3.3rem)); - } + @include modifier('front') { + padding: iro-responsive-set((7rem, 7rem, 10rem)) 0; + font-size: iro-responsive-set((2.2rem, 3rem, 3.5rem)); + } - @include element('backtitle') { - font-size: iro-responsive-set((12rem, 14rem, 16rem)); + @include modifier('back') { + font-size: iro-responsive-set((12rem, 14rem, 16rem)); + } } } } diff --git a/assets/css/components/_nav.scss b/assets/css/components/_nav.scss index 2472706..8fc4564 100644 --- a/assets/css/components/_nav.scss +++ b/assets/css/components/_nav.scss @@ -2,13 +2,10 @@ @include store(( --dims: ( --font-size: 15px, - --pad-y: 1em, - --pad-y-sm: .5em, + --pad-y: 1em, --item: ( --pad-x: 1em, - --pad-x-sm: .75em, --pad-y: 1em, - --pad-y-sm: .75em, ), ), --colors: ( @@ -34,69 +31,63 @@ ) )); + @include store(( + --dims: ( + --pad-y: .5em, + --item: ( + --pad-x: .75em, + --pad-y: .75em, + ), + ) + ), 'sm'); + @include component(namespace()) { - display: flex; + display: flex; align-items: center; - padding: prop(--dims --pad-y) 0; - font-size: prop(--dims --font-size); + padding: prop(--dims --pad-y) 0; + font-size: prop(--dims --font-size); @include element('logo') { - display: inline-block; - margin: 0; - padding: prop(--dims --item --pad-y) 0; - color: prop(--colors --logo --idle --fg); - font-family: $font-fam--mono; + display: inline-block; + margin: 0; + padding: prop(--dims --item --pad-y) 0; + color: prop(--colors --logo --idle --fg); + font-family: $font-fam--mono; text-decoration: none; &:link, &:visited { &:hover { background-color: transparent; - color: prop(--colors --logo --hover --fg); + color: prop(--colors --logo --hover --fg); } } } @include element('logo-symbol') { display: block; - width: $line-height * .9em; - height: $line-height * 1em; + width: $line-height * .9em; + height: $line-height * 1em; } @include element('item') { - display: inline-block; - margin: 0 calc(-1 * #{prop(--dims --item --pad-x)}) 0 prop(--dims --item --pad-x); - padding: prop(--dims --item --pad-y) prop(--dims --item --pad-x); - color: prop(--colors --item --idle --fg); + display: inline-block; + margin: 0 calc(-1 * #{prop(--dims --item --pad-x)}) 0 prop(--dims --item --pad-x); + padding: prop(--dims --item --pad-y) prop(--dims --item --pad-x); + color: prop(--colors --item --idle --fg); text-decoration: none; - text-transform: uppercase; + text-transform: uppercase; &:hover { background-color: transparent; - color: prop(--colors --item --hover --fg); - text-decoration: underline; + color: prop(--colors --item --hover --fg); + text-decoration: underline; } @include modifier('active') { border-color: prop(--colors --item --active --fg); - color: prop(--colors --item --active --fg); - font-weight: bold; - } - } - - @include media('<=sm') { - padding: prop(--dims --pad-y-sm) 0; - - @include element('logo', 'item') { - padding-top: prop(--dims --item --pad-y-sm); - padding-bottom: prop(--dims --item --pad-y-sm); - } - - @include element('item') { - margin-right: calc(-1 * #{prop(--dims --item --pad-x-sm)}); - margin-left: prop(--dims --item --pad-x-sm); - padding-right: prop(--dims --item --pad-x-sm); - padding-left: prop(--dims --item --pad-x-sm); + color: prop(--colors --item --active --fg); + font-weight: bold; } } } diff --git a/assets/css/components/_page.scss b/assets/css/components/_page.scss deleted file mode 100644 index ef39061..0000000 --- a/assets/css/components/_page.scss +++ /dev/null @@ -1,3 +0,0 @@ -@include component('page') { - // -} diff --git a/assets/css/layouts/_container.scss b/assets/css/layouts/_container.scss index 2bb4d80..2e102ee 100644 --- a/assets/css/layouts/_container.scss +++ b/assets/css/layouts/_container.scss @@ -2,35 +2,30 @@ @include store(( --dims: ( --pad-x: 2rem, - --pad-x-sm: 1rem, - --pad-y: $line-height * 2rem, - --pad-y-sm: $line-height * 1rem + --pad-y: $line-height * 2rem ) )); + @include store(( + --dims: ( + --pad-x: 1rem, + --pad-y: $line-height * 1rem + ) + ), 'sm'); + @include layout(namespace()) { padding-right: prop(--dims --pad-x); - padding-left: prop(--dims --pad-x); + padding-left: prop(--dims --pad-x); @include modifier('content') { - max-width: $content--width; + max-width: $content--width; margin-right: auto; - margin-left: auto; + margin-left: auto; } @include modifier('pad-v') { - padding-top: prop(--dims --pad-y); + padding-top: prop(--dims --pad-y); padding-bottom: prop(--dims --pad-y); } - - @include media('<=sm') { - padding-right: prop(--dims --pad-x-sm); - padding-left: prop(--dims --pad-x-sm); - - @include modifier('pad-v') { - padding-top: prop(--dims --pad-y-sm); - padding-bottom: prop(--dims --pad-y-sm); - } - } } } diff --git a/assets/css/layouts/_site.scss b/assets/css/layouts/_site.scss new file mode 100644 index 0000000..2c06606 --- /dev/null +++ b/assets/css/layouts/_site.scss @@ -0,0 +1,46 @@ +@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/_code.scss b/assets/css/scopes/_code.scss deleted file mode 100644 index 3f50ce3..0000000 --- a/assets/css/scopes/_code.scss +++ /dev/null @@ -1,27 +0,0 @@ -@include scope('code') { - @include modifier('highlight') { - pre { - color: var(--fg-lo); - } - } - - pre { - font-size: 1em; - line-height: $line-height; - } - - /* stylelint-disable selector-class-pattern */ - - .c { - color: var(--fg-hi); - } - - .kt, - .k, - .kr, - .o, - .si, - .p { - color: var(--fg); - } -} diff --git a/assets/css/scopes/_page.scss b/assets/css/scopes/_page.scss deleted file mode 100644 index 70489fb..0000000 --- a/assets/css/scopes/_page.scss +++ /dev/null @@ -1,25 +0,0 @@ -@include scope('page-content') { - :link { - color: var(--page--link--idle--fg); - } - - :visited { - color: var(--page--link--visited--fg); - } - - :link, - :visited { - &:hover { - background-color: var(--page--link--hover--bg); - color: var(--page--link--hover--fg); - } - } - - img { - max-width: 100%; - } - - > :first-child { - margin-top: 0; - } -} diff --git a/assets/css/style.scss b/assets/css/style.scss index dad774a..c8fd0c1 100644 --- a/assets/css/style.scss +++ b/assets/css/style.scss @@ -9,17 +9,20 @@ @import 'basics'; @import 'components/nav'; -@import 'components/page'; @import 'components/hero'; @import 'components/footer'; +@import 'layouts/site'; @import 'layouts/container'; -@import 'scopes/code'; -@import 'scopes/page'; - @import 'utils'; :root { @include assign; + + @each $breakpoint in map-keys($breakpoints) { + @include media('<=#{$breakpoint}') { + @include assign($breakpoint); + } + } } diff --git a/assets/favicon/favicon.svg b/assets/favicon/favicon.svg new file mode 100644 index 0000000..31f9007 --- /dev/null +++ b/assets/favicon/favicon.svg @@ -0,0 +1,75 @@ + + diff --git a/content/favicon.ico b/content/favicon.ico index b1b98ec..3c399ff 100644 Binary files a/content/favicon.ico and b/content/favicon.ico differ diff --git a/templates/layouts/index.html b/templates/layouts/index.html index 3105472..aaac808 100644 --- a/templates/layouts/index.html +++ b/templates/layouts/index.html @@ -1,14 +1,14 @@ -
-

Volpeon

-

I'm a red fox doing human things

-
+
+
+

I'm a red fox in disguise

+

Volpeon

+
-
-
+
$body$ -
-
+ -
- 9thPK7O3xn -
+ $--
+ $-- 9thPK7O3xn + $--
+
diff --git a/templates/layouts/page.html b/templates/layouts/page.html index 994d013..fca4b9f 100644 --- a/templates/layouts/page.html +++ b/templates/layouts/page.html @@ -1,17 +1,6 @@
- $if(menus.main.active)$ -
- - $if(menus.main.active.label_long)$ - $menus.main.active.label_long$ - $else$ - $menus.main.active.label$ - $endif$ - -
- $endif$

$title$

$if(category)$

in $category.name$

-- cgit v1.2.3-54-g00ecf