From ef58809a37a7ad95c9bdef8e9f465adb3904ffdf Mon Sep 17 00:00:00 2001 From: Volpeon Date: Fri, 26 Mar 2021 22:48:01 +0100 Subject: WIP: Redesign --- assets/css/_basics.scss | 30 ++--------- assets/css/_fonts.scss | 27 ++++++++++ assets/css/_vars.scss | 21 ++++++-- assets/css/components/_card.scss | 6 +++ assets/css/components/_landing-banner.scss | 2 + assets/css/components/_nav.scss | 29 ++++++---- assets/css/components/_section-heading.scss | 8 +-- assets/css/layouts/_container.scss | 6 +-- assets/css/layouts/_landing.scss | 20 +++---- assets/css/objects/_button.scss | 23 ++++++++ assets/css/style.scss | 10 ++-- assets/fonts/IBMPlexSans-Medium.ttf | Bin 0 -> 182088 bytes content/index.md | 31 ++++++----- content/profiles/index.md | 19 +++++++ templates/base.html | 2 +- templates/layouts/index.html | 80 ++++------------------------ 16 files changed, 163 insertions(+), 151 deletions(-) create mode 100644 assets/css/_fonts.scss create mode 100644 assets/css/objects/_button.scss create mode 100644 assets/fonts/IBMPlexSans-Medium.ttf create mode 100644 content/profiles/index.md diff --git a/assets/css/_basics.scss b/assets/css/_basics.scss index 64b11cf..d05bc36 100644 --- a/assets/css/_basics.scss +++ b/assets/css/_basics.scss @@ -1,24 +1,3 @@ -@font-face { - font-family: 'IBM Plex Sans'; - font-style: normal; - font-weight: normal; - src: url('/IBMPlexSans-Regular.woff2') format('woff2'); -} - -@font-face { - font-family: 'IBM Plex Sans'; - font-style: normal; - font-weight: bold; - src: url('/IBMPlexSans-Bold.woff2') format('woff2'); -} - -@font-face { - font-family: 'Garet Variable'; - font-style: normal; - font-weight: 50 950; - src: url('/GaretVariable.woff2') format('woff2-variations'); -} - ::selection { background-color: var(--select--bg); color: var(--select--fg); @@ -37,20 +16,21 @@ code { html, body, main { - height: 100%; + box-sizing: border-box; + height: 100%; } html { background-color: prop(--colors --bg); color: prop(--colors --fg); font-family: $font-fam--text; - font-size: px-to-em($font-size, 16px); + font-size: 1em / 16px * $font-size; line-height: $line-height; } body { margin: 0; - padding: 0; + padding: prop(--dims --nav --height, $global: true) 0 0; } pre, @@ -180,7 +160,7 @@ h1 { } p { - margin: ($line-height * 1em) 0 0; + margin: ($line-height * 1rem) 0 0; } :link, diff --git a/assets/css/_fonts.scss b/assets/css/_fonts.scss new file mode 100644 index 0000000..9e57600 --- /dev/null +++ b/assets/css/_fonts.scss @@ -0,0 +1,27 @@ +@font-face { + font-family: 'IBM Plex Sans'; + font-style: normal; + font-weight: normal; + src: url('/IBMPlexSans-Regular.woff2') format('woff2'); +} + +@font-face { + font-family: 'IBM Plex Sans'; + font-style: normal; + font-weight: 500; + src: url('/IBMPlexSans-Medium.woff2') format('woff2'); +} + +@font-face { + font-family: 'IBM Plex Sans'; + font-style: normal; + font-weight: bold; + src: url('/IBMPlexSans-Bold.woff2') format('woff2'); +} + +@font-face { + font-family: 'Garet'; + font-style: normal; + font-weight: 50 950; + src: url('/GaretVariable.woff2') format('woff2-variations'); +} diff --git a/assets/css/_vars.scss b/assets/css/_vars.scss index 1ef0c8a..18cebc6 100644 --- a/assets/css/_vars.scss +++ b/assets/css/_vars.scss @@ -1,8 +1,8 @@ $breakpoints: ( - xs: 320px, - sm: 600px, - md: 900px, lg: 1500px, + md: 900px, + sm: 600px, + xs: 320px, ); $unit-intervals: ( @@ -13,7 +13,7 @@ $unit-intervals: ( ); $font-fam--text: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif; -$font-fam--large: 'Garet Variable', $font-fam--text; +$font-fam--large: 'Garet', $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; @@ -29,6 +29,11 @@ $gray5: hsl(220, 0%, 73%); $gray6: hsl(220, 0%, 100%); @include store(( + --dims: ( + --nav: ( + --height: 4.5rem + ) + ), --colors: ( --bg-hi: $gray0, // Darker background --bg: $gray1, // Background @@ -57,6 +62,14 @@ $gray6: hsl(220, 0%, 100%); } } +@include store(( + --dims: ( + --nav: ( + --height: 3.5rem + ) + ), +), 'sm'); + :root { --heading--fg: var(--colors--fg-lo); diff --git a/assets/css/components/_card.scss b/assets/css/components/_card.scss index 4b3a094..21eeb9f 100644 --- a/assets/css/components/_card.scss +++ b/assets/css/components/_card.scss @@ -18,6 +18,12 @@ background-color: prop(--colors --bg); line-height: 1.4; + &:link, + &:visited { + color: currentColor; + text-decoration: none; + } + &:hover { @include element('content') { @include modifier('flip') { diff --git a/assets/css/components/_landing-banner.scss b/assets/css/components/_landing-banner.scss index ee5deab..412ca8a 100644 --- a/assets/css/components/_landing-banner.scss +++ b/assets/css/components/_landing-banner.scss @@ -7,6 +7,8 @@ )); @include component(namespace()) { + font-size: 1 / 16 * 17em; + @include element('title') { max-width: 7em; margin-top: 0; diff --git a/assets/css/components/_nav.scss b/assets/css/components/_nav.scss index 03118a9..900b4f2 100644 --- a/assets/css/components/_nav.scss +++ b/assets/css/components/_nav.scss @@ -2,10 +2,10 @@ @include store(( --dims: ( --font-size: 15px, - --pad-y: .5rem, + --height: prop(--dims --nav --height, $global: true), + --pad-x: 2.5rem, --item: ( --pad-x: 1rem, - --pad-y: 1rem, ), ), --colors: ( @@ -32,11 +32,16 @@ ) )); + @include store(( + --dims: ( + --pad-x: prop(--container --dims --pad-x, $global: true), + ) + ), 'md'); + @include store(( --dims: ( --item: ( --pad-x: .75em, - --pad-y: .75em, ), ) ), 'sm'); @@ -47,15 +52,18 @@ z-index: 10000; top: 0; left: 0; - align-items: center; - padding: prop(--dims --pad-y) 0; + height: prop(--dims --height); + padding: 0 prop(--dims --pad-x); background-color: prop(--colors --bg); font-size: prop(--dims --font-size); + @include element('logo', 'item') { + display: flex; + align-items: center; + height: 100%; + } + @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; text-decoration: none; @@ -76,9 +84,8 @@ } @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); + padding: 0 prop(--dims --item --pad-x); color: prop(--colors --item --idle --fg); text-decoration: none; text-transform: uppercase; @@ -97,7 +104,7 @@ } @include media('<=md') { - position: static; + width: 100%; } } } diff --git a/assets/css/components/_section-heading.scss b/assets/css/components/_section-heading.scss index db75159..e904943 100644 --- a/assets/css/components/_section-heading.scss +++ b/assets/css/components/_section-heading.scss @@ -1,7 +1,7 @@ @include namespace('section-heading') { @include store(( --dims: ( - --pad-y: $line-height * 2rem + --pad-y: $line-height * 1rem ), --colors: ( --line: prop(--colors --accent --color, $global: true), @@ -10,8 +10,8 @@ @include component(namespace()) { margin: 0 0 prop(--dims --pad-y); - font-size: .8em; - font-weight: 400; + font-size: 1 / 16 * 12em; + font-weight: 550; letter-spacing: .2em; text-transform: uppercase; @@ -19,7 +19,7 @@ content: ''; display: inline-block; width: 3em; - height: 1px; + height: 2px; margin-right: 1.3em; background-color: prop(--colors --line); vertical-align: middle; diff --git a/assets/css/layouts/_container.scss b/assets/css/layouts/_container.scss index 0726950..218841d 100644 --- a/assets/css/layouts/_container.scss +++ b/assets/css/layouts/_container.scss @@ -2,20 +2,20 @@ @include store(( --dims: ( --pad-x: 3rem, - --pad-y: $line-height * 3rem + --pad-y: $line-height * 2rem ) )); @include store(( --dims: ( --pad-x: 2rem, - --pad-y: $line-height * 2rem + --pad-y: $line-height * 1.5rem ) ), 'md'); @include store(( --dims: ( - --pad-x: 1rem, + --pad-x: 5%, --pad-y: $line-height * 1rem ) ), 'sm'); diff --git a/assets/css/layouts/_landing.scss b/assets/css/layouts/_landing.scss index b824005..7683d44 100644 --- a/assets/css/layouts/_landing.scss +++ b/assets/css/layouts/_landing.scss @@ -27,18 +27,11 @@ } @include iro-responsive-env(('md', 'lg')) { + padding-right: iro-responsive-set((0, 6rem)); + padding-left: iro-responsive-set((0, 6rem)); + @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; + padding-right: iro-responsive-set((0, 6rem)); } } @@ -47,9 +40,8 @@ height: auto; @include element('banner', 'content') { - width: auto; - padding-right: 0; - padding-left: 0; + width: auto; + padding: 0; } @include element('banner') { diff --git a/assets/css/objects/_button.scss b/assets/css/objects/_button.scss new file mode 100644 index 0000000..d97ca2d --- /dev/null +++ b/assets/css/objects/_button.scss @@ -0,0 +1,23 @@ +@include namespace('button') { + @include store(( + --dims: ( + --pad-x: 1.4em, + --pad-y: .5em + ), + --colors: ( + --bg: prop(--colors --fg-lo, $global: true), + --fg: prop(--colors --bg, $global: true), + ) + )); + + @include object(namespace()) { + display: inline-block; + padding: prop(--dims --pad-y) prop(--dims --pad-x); + border-radius: 10em; + background-color: prop(--colors --bg); + color: prop(--colors --fg); + font-size: 1 / 16 * 14em; + font-weight: 500; + text-decoration: none; + } +} diff --git a/assets/css/style.scss b/assets/css/style.scss index 90cbe5d..89b7837 100644 --- a/assets/css/style.scss +++ b/assets/css/style.scss @@ -6,9 +6,15 @@ @import 'vars'; @import 'functions'; +@import 'fonts'; @import 'basics'; +@import 'layouts/container'; +@import 'layouts/landing'; +@import 'layouts/card-grid'; + @import 'objects/icon'; +@import 'objects/button'; @import 'components/nav'; @import 'components/landing-banner'; @@ -16,10 +22,6 @@ @import 'components/footer'; @import 'components/card'; -@import 'layouts/landing'; -@import 'layouts/container'; -@import 'layouts/card-grid'; - @import 'scopes/body'; @import 'utils'; diff --git a/assets/fonts/IBMPlexSans-Medium.ttf b/assets/fonts/IBMPlexSans-Medium.ttf new file mode 100644 index 0000000..b278201 Binary files /dev/null and b/assets/fonts/IBMPlexSans-Medium.ttf differ diff --git a/content/index.md b/content/index.md index e0472ad..242fd62 100644 --- a/content/index.md +++ b/content/index.md @@ -1,19 +1,18 @@ --- title: Home ---- - - +profiles: + - platform: Bandcamp + username: volpeon + url: https://bandcamp.com/volpeon + - platform: E-Mail + username: me@volpeon.ink + - platform: Fediverse + username: "@volpeon@fedi.vulpes.one" + - platform: IRC + username: volpeon + - platform: PeerTube + username: "@volpeon@pt.vulpes.one" + - platform: XMPP + username: "<available>" +--- diff --git a/content/profiles/index.md b/content/profiles/index.md new file mode 100644 index 0000000..9a9d7fa --- /dev/null +++ b/content/profiles/index.md @@ -0,0 +1,19 @@ +--- +title: Profiles +--- + +- **Bandcamp:** [volpeon](https://bandcamp.com/volpeon) +- **Email:** me@volpeon.ink +- **Fediverse:** @volpeon@fedi.vulpes.one +- **GitHub:** [volpeon](https://github.com/volpeon) +- **IRC:** volpeon on [Furnet](irc://irc.furnet.org), [Freenode](ircs://chat.freenode.net), [irc.vulpes.one](ircs://irc.vulpes.one) +- **PeerTube:** @volpeon@pt.vulpes.one +- **Steam:** [volpeon](https://steamcommunity.com/id/volpeon/) +- **XMPP:** <available> + +## OMEMO Fingerprints + +```plain +CB07051B E223EF70 8EE8F665 BBFCEF00 83415C45 DCA31906 F2362543 F5543449 +C2C575EE 0236965C 4DBAA7EA 12F9EC90 AFD57B2C F75B3F32 70F3D393 2EDA3A08 +``` diff --git a/templates/base.html b/templates/base.html index 4fa4ee7..1d0da4d 100644 --- a/templates/base.html +++ b/templates/base.html @@ -32,7 +32,7 @@ -