From c7eb8d7f6105a5a15a1f45b5e2be3c2d1e2204bd Mon Sep 17 00:00:00 2001 From: Volpeon Date: Fri, 19 Mar 2021 22:10:55 +0100 Subject: WIP: Redesign --- assets/css/_basics.scss | 64 ++- assets/css/_utils.scss | 14 +- assets/css/_vars.scss | 117 +++--- assets/css/components/_footer.scss | 21 +- assets/css/components/_hero.scss | 71 ++-- assets/css/components/_hlist.scss | 13 - assets/css/components/_nav.scss | 132 ++++-- assets/css/components/_page.scss | 134 +----- assets/css/components/_spacer.scss | 5 - assets/css/layouts/_container.scss | 47 ++- assets/css/scopes/_code.scss | 4 +- assets/css/scopes/_page.scss | 6 +- assets/css/style.scss | 12 +- assets/fonts/GaretVariable.ttf | Bin 0 -> 392080 bytes assets/fonts/IBMPlexSans-Bold.ttf | Bin 0 -> 180672 bytes assets/fonts/IBMPlexSans-Regular.ttf | Bin 0 -> 180452 bytes assets/fonts/iosevka-aile-bold.ttf | Bin 3529204 -> 0 bytes assets/fonts/iosevka-aile-regular.ttf | Bin 3478480 -> 0 bytes assets/fonts/iosevka-term-ss09-bold.ttf | Bin 1009532 -> 0 bytes assets/fonts/iosevka-term-ss09-regular.ttf | Bin 999232 -> 0 bytes content/index.md | 2 - content/logo.svg | 70 ++++ content/personal/infinite-skyscrapers.md | 37 +- filters/common_actions.lua | 8 +- metadata/metadata.yaml | 1 - package.json | 7 + scripts/build_fonts.sh | 2 +- templates/base.html | 22 +- templates/layouts/categorized_list.html | 3 +- templates/layouts/index copy.html | 45 +++ templates/layouts/index.html | 43 +- templates/layouts/page.html | 4 +- templates/symbols.svg | 10 + yarn.lock | 629 ++++++++++++++++------------- 34 files changed, 805 insertions(+), 718 deletions(-) delete mode 100644 assets/css/components/_hlist.scss delete mode 100644 assets/css/components/_spacer.scss create mode 100644 assets/fonts/GaretVariable.ttf create mode 100644 assets/fonts/IBMPlexSans-Bold.ttf create mode 100644 assets/fonts/IBMPlexSans-Regular.ttf delete mode 100644 assets/fonts/iosevka-aile-bold.ttf delete mode 100644 assets/fonts/iosevka-aile-regular.ttf delete mode 100644 assets/fonts/iosevka-term-ss09-bold.ttf delete mode 100644 assets/fonts/iosevka-term-ss09-regular.ttf create mode 100644 content/logo.svg create mode 100644 templates/layouts/index copy.html create mode 100644 templates/symbols.svg diff --git a/assets/css/_basics.scss b/assets/css/_basics.scss index 1536605..1cd5547 100644 --- a/assets/css/_basics.scss +++ b/assets/css/_basics.scss @@ -1,41 +1,23 @@ @font-face { - font-family: 'Iosevka Term SS09'; - font-style: normal; - font-weight: normal; - src: //local('Iosevka SS09'), - url('/iosevka-term-ss09-regular.woff2') format('woff2'); -} - -@font-face { - font-family: 'Iosevka Term SS09'; - font-style: normal; - font-weight: bold; - src: //local('Iosevka SS09 Bold'), - url('/iosevka-term-ss09-bold.woff2') format('woff2'); -} - -@font-face { - font-family: 'Iosevka Aile'; + font-family: 'IBM Plex Sans'; font-style: normal; font-weight: normal; - src: //local('Iosevka Aile'), - url('/iosevka-aile-regular.woff2') format('woff2'); + src: //local('IBM Plex Sans'), + url('/IBMPlexSans-Regular.woff2') format('woff2'); } @font-face { - font-family: 'Iosevka Aile'; + font-family: 'IBM Plex Sans'; font-style: normal; font-weight: bold; - src: //local('Iosevka Aile Bold'), - url('/iosevka-aile-bold.woff2') format('woff2'); + src: url('/IBMPlexSans-Bold.woff2') format('woff2'); } @font-face { - font-family: 'IBM Plex Sans'; + font-family: 'Garet Variable'; font-style: normal; - font-weight: normal; - src: //local('IBM Plex Sans'), - url('/IBMPlexSans-Regular.woff2') format('woff2'); + font-weight: 50 950; + src: url('/GaretVariable.woff2') format('woff2-variations'); } ::selection { @@ -54,8 +36,8 @@ code { } html { - background-color: var(--bg); - color: var(--fg); + 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; @@ -85,7 +67,7 @@ pre { } strong { - color: var(--fg-lo); + color: prop(--colors --fg-lo); font-weight: bold; } @@ -105,7 +87,7 @@ li { position: absolute; width: $subcontent--indent; margin-left: -1 * $subcontent--indent; - color: var(--fg-hi); + color: prop(--colors --fg-hi); font-family: $font-fam--mono; } } @@ -141,12 +123,12 @@ dd { } dt { - color: var(--fg-lo); + color: prop(--colors --fg-lo); font-weight: bold; &::after { content: ':'; - color: var(--fg); + color: prop(--colors --fg); font-weight: normal; } } @@ -157,13 +139,23 @@ dd { h1, h2, -h3 { +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; + font-feature-settings: 'ss02' 1; + h1, + h2, - + h3 { + + h3, + + h4, + + h5, + + h6 { margin-top: $line-height * 1em; } } @@ -205,12 +197,12 @@ hr { height: 1px; margin: ($line-height * 1em) 0; border: 0; - background-color: var(--obj); + background-color: prop(--colors --obj); } blockquote, pre { margin: ($line-height * 1em) 0 0 1px; padding-left: calc(#{$subcontent--indent} - 3px); - border-left: 2px solid var(--obj); + border-left: 2px solid prop(--colors --obj); } diff --git a/assets/css/_utils.scss b/assets/css/_utils.scss index 519a3a7..bca50d8 100644 --- a/assets/css/_utils.scss +++ b/assets/css/_utils.scss @@ -1,21 +1,21 @@ -.u-hidden { +@include utility('hidden') { display: none; - @each $name, $width in $breakpoints { - &\@#{$name}-down { - @media (max-width: $width) { + @each $breakpoint in map-keys($breakpoints) { + @include media('<=#{$breakpoint}') { + @include suffix('#{$breakpoint}-lo') { display: none; } } - &\@#{$name}-up { - @media (min-width: $width + 1) { + @include media('>#{$breakpoint}') { + @include suffix('#{$breakpoint}-hi') { display: none; } } } } -.u-mt0 { +@include utility('mt0') { margin-top: 0; } diff --git a/assets/css/_vars.scss b/assets/css/_vars.scss index ea831a6..ae8a7a8 100644 --- a/assets/css/_vars.scss +++ b/assets/css/_vars.scss @@ -1,88 +1,75 @@ -$font-fam--text: 'Iosevka Aile', 'IBM Plex Sans', 'Open Sans', 'Segoe UI', 'Droid Sans', - Roboto, Oxygen, 'Helvetica Neue', Helvetica, Tahoma, Arial, sans-serif; -$font-fam--mono: 'Iosevka Term SS09', 'Lucida Console', 'Courier New', Courier, - monospace; -$font-size: 16px; -$line-height: 1.7; - -$code-block--font-size: 16px; -$code-block--line-height: 1.4; - -$content--width: 42em; -$content--h1--font-size: $font-size + 1; - -$subcontent--indent: 2em; - -$container--pad-h: 2rem; -$container--pad-h--sm: 1rem; -$container--pad-v: $line-height * 2rem; -$container--pad-v--sm: $line-height * 1rem; - -$nav--font-size: $font-size - 1; -$nav--item--spacing: 2em; -$nav--item--spacing--sm: 1.5em; -$nav--item--pad-h: .5em; -$nav--item--pad-v: .9em; - -$footer--pad-v: .8em; - -$page--item-prefix--max-chars: 1.5em; -$page--item-prefix--pad: 1em; -$page--item-prefix--width: $page--item-prefix--max-chars + $page--item-prefix--pad; - -$page--item-prefix--max-chars--sm: 1em; -$page--item-prefix--width--sm: $page--item-prefix--max-chars--sm + $page--item-prefix--pad; +$iro-root-size: 16px; $breakpoints: ( - xs: 380px, + xs: 320px, sm: 700px, + md: 1100px, ); -:root { - --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%, 100%); - - // - - --bg-hi: var(--gray0); // Lighter background - --bg: var(--gray1); // Background - - --obj: var(--gray2); +$unit-intervals: ( + 'px': 1, + 'em': .01, + 'rem': .01, + '': 0 +); - --fg-hi: var(--gray3); // Faint text - --fg: var(--gray4); // Text - --fg-lo: var(--gray5); // Strong text +$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%); +$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%); + +@include store(( + --colors: ( + --bg-hi: $gray0, // Lighter background + --bg: $gray1, // Background + + --obj: $gray2, + + --fg-hi: $gray3, // Faint text + --fg: $gray4, // Text + --fg-lo: $gray5, // Strong text + + --accent: hsl(354, 84%, 55%), + ) +)); - --heading--fg: var(--fg-lo); +:root { + --heading--fg: var(--colors--fg-lo); --select--bg: hsla(270, 2%, 100%, .996); --select--img-bg: hsla(270, 2%, 100%, .5); - --select--fg: var(--bg-hi); + --select--fg: var(--colors--bg-hi); - --code--fg: var(--fg-hi); + --code--fg: var(--colors--fg-hi); - --code-block--fg: var(--fg-hi); + --code-block--fg: var(--colors--fg-hi); - --link--idle--fg: var(--fg-lo); + --link--idle--fg: var(--colors--fg-lo); --link--hover--bg: var(--link--idle--fg); --link--hover--fg: #000; - --nav--bg: var(--bg-hi); - --nav--logo--fg: var(--fg-hi); - --nav--item--idle--fg: var(--fg); - --nav--item--hover--fg: var(--fg-lo); - --nav--item--active--fg: var(--fg-lo); + --hero--back-fg: var(--colors--bg-hi); + + --nav--bg: var(--colors--bg); + --nav--logo--fg: var(--colors--fg-hi); + --nav--item--idle--fg: var(--colors--fg); + --nav--item--hover--fg: var(--colors--fg-lo); + --nav--item--active--fg: var(--colors--fg-lo); - --page--item-prefix--fg: var(--fg-hi); + --footer--bg: var(--colors--bg); --page--link--idle--fg: var(--link--idle--fg); // hsl(45, 100%, 70%); // hsl(215, 100%, 80%); // var(--link--idle--fg); // #ffd866; - --page--link--visited--fg: var(--fg); // hsl(23, 89%, 65%); // hsl(260, 58%, 78%); // var(--fg-lo); // #f59458; + --page--link--visited--fg: var(--colors--fg); // hsl(23, 89%, 65%); // hsl(260, 58%, 78%); // var(--fg-lo); // #f59458; --page--link--hover--bg: var(--page--link--idle--fg); --page--link--hover--fg: #000; } diff --git a/assets/css/components/_footer.scss b/assets/css/components/_footer.scss index a015d92..8fcbc98 100644 --- a/assets/css/components/_footer.scss +++ b/assets/css/components/_footer.scss @@ -1,6 +1,17 @@ -.c-footer { - padding-top: $footer--pad-v; - padding-bottom: $footer--pad-v; - color: var(--obj); - text-align: right; +@include namespace('footer') { + @include store(( + --dims: ( + --pad-y: .8em + ), + --colors: ( + --fg: prop(--colors --obj, $global: true) + ) + )); + + @include component(namespace()) { + padding-top: prop(--dims --pad-y); + padding-bottom: prop(--dims --pad-y); + color: prop(--colors --fg); + text-align: right; + } } diff --git a/assets/css/components/_hero.scss b/assets/css/components/_hero.scss index bfcdc16..6c497a1 100644 --- a/assets/css/components/_hero.scss +++ b/assets/css/components/_hero.scss @@ -1,35 +1,50 @@ -.c-hero { - margin-bottom: $line-height * 2em; - margin-left: -1 * $page--item-prefix--width; - padding-left: $page--item-prefix--width; - overflow: hidden; - font-family: $font-fam--mono; +@include namespace('hero') { + @include store(( + --colors: ( + --back-fg: prop(--colors --bg-hi, $global: true) + ) + )); - &::after { - content: str-repeat('░', 120); - display: block; - position: relative; - z-index: -10; - height: $line-height; - margin-top: px-to-em(2px); - margin-left: -1 * $page--item-prefix--width; - padding-top: px-to-em(2px); - border-top: 1px solid var(--fg-hi); - color: var(--fg-hi); - line-height: $code-block--line-height; - } + @include component(namespace()) { + display: flex; + position: relative; + flex-direction: column; + align-items: center; + justify-content: center; + text-align: center; - &__pre { - margin-top: 0; - overflow: hidden; - } + @include element('title', 'backtitle') { + margin: 0 auto; + font-family: $font-fam--large; + text-transform: none; + } + + @include element('emph') { + color: prop(--colors --accent, $global: true); + font-weight: 500; + } + + @include element('title') { + max-width: 11em; + font-weight: 200; + } + + @include element('backtitle') { + position: absolute; + z-index: -10; + transform: translateY(-.08em); + color: prop(--colors --back-fg); + } - @media (max-width: map-get($breakpoints, 'sm')) { - margin-left: 0; - padding-left: 0; + @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)); + } - &::after { - margin-left: 0; + @include element('backtitle') { + font-size: iro-responsive-set((12rem, 14rem, 16rem)); + } } } } diff --git a/assets/css/components/_hlist.scss b/assets/css/components/_hlist.scss deleted file mode 100644 index a7cf665..0000000 --- a/assets/css/components/_hlist.scss +++ /dev/null @@ -1,13 +0,0 @@ -.c-hlist { - display: flex; - - &__item { - display: block; - margin-right: 4ch; - padding-left: 0; - - &::before { - display: none; - } - } -} diff --git a/assets/css/components/_nav.scss b/assets/css/components/_nav.scss index cd3ef14..2472706 100644 --- a/assets/css/components/_nav.scss +++ b/assets/css/components/_nav.scss @@ -1,57 +1,103 @@ -.c-nav { - position: sticky; - z-index: 1000; - top: 0; - background-color: var(--nav--bg); - font-size: $nav--font-size; - - &__items { +@include namespace('nav') { + @include store(( + --dims: ( + --font-size: 15px, + --pad-y: 1em, + --pad-y-sm: .5em, + --item: ( + --pad-x: 1em, + --pad-x-sm: .75em, + --pad-y: 1em, + --pad-y-sm: .75em, + ), + ), + --colors: ( + --logo: ( + --idle: ( + --fg: prop(--colors --fg-hi, $global: true), + ), + --hover: ( + --fg: prop(--colors --fg-lo, $global: true), + ) + ), + --item: ( + --idle: ( + --fg: prop(--colors --fg, $global: true), + ), + --hover: ( + --fg: prop(--colors --fg-lo, $global: true), + ), + --active: ( + --fg: prop(--colors --fg-lo, $global: true), + ) + ) + ) + )); + + @include component(namespace()) { display: flex; - align-items: baseline; - } + align-items: center; + 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; + text-decoration: none; + + &:link, + &:visited { + &:hover { + background-color: transparent; + color: prop(--colors --logo --hover --fg); + } + } + } + + @include element('logo-symbol') { + display: block; + width: $line-height * .9em; + height: $line-height * 1em; + } - &__logo { - display: inline-block; - margin: 0; - padding: $nav--item--pad-v 0; - color: var(--nav--logo--fg); - font-family: $font-fam--mono; - text-decoration: none; + @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); + text-decoration: none; + text-transform: uppercase; - &:link, - &:visited { &:hover { background-color: transparent; - color: var(--nav--item--hover--fg); + 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; } } - } - &__item { - display: inline-block; - margin: 0 (-1 * $nav--item--pad-h) 0 ($nav--item--spacing - $nav--item--pad-h); - padding: $nav--item--pad-v $nav--item--pad-h calc(#{$nav--item--pad-v} - 2px); - border-bottom: 2px solid transparent; - color: var(--nav--item--idle--fg); - text-decoration: none; - - &:hover { - background-color: transparent; - color: var(--nav--item--hover--fg); - font-weight: bold; - } + @include media('<=sm') { + padding: prop(--dims --pad-y-sm) 0; - &--active { - border-color: var(--nav--item--active--fg); - color: var(--nav--item--active--fg); - font-weight: bold; - } - } + @include element('logo', 'item') { + padding-top: prop(--dims --item --pad-y-sm); + padding-bottom: prop(--dims --item --pad-y-sm); + } - @media (max-width: map-get($breakpoints, 'sm')) { - &__item { - margin-left: $nav--item--spacing--sm - $nav--item--pad-h; + @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); + } } } } diff --git a/assets/css/components/_page.scss b/assets/css/components/_page.scss index 9d1e991..ef39061 100644 --- a/assets/css/components/_page.scss +++ b/assets/css/components/_page.scss @@ -1,133 +1,3 @@ -.c-page { - &__prefixed { - position: relative; - margin-left: -1 * $page--item-prefix--width; - padding-left: $page--item-prefix--width; - - &::before { - display: inline-block; - position: absolute; - box-sizing: border-box; - width: $page--item-prefix--width; - margin-left: -1 * $page--item-prefix--width; - padding-right: $page--item-prefix--pad; - color: var(--page--item-prefix--fg); - font-family: $font-fam--mono; - font-weight: normal; - text-align: right; - } - - $h1-unscale-factor: px-to-em($font-size, $content--h1--font-size); - - &--h1 { - margin-top: $line-height * $h1-unscale-factor; - font-size: px-to-em($content--h1--font-size); - - &::before { - content: '#'; - font-size: $h1-unscale-factor; - } - } - - &--h2::before { - content: '##'; - } - - &--h3::before { - content: '###'; - } - - &--pre { - $scale-factor: $font-size / $code-block--font-size; - - margin-left: calc(#{-1 * $page--item-prefix--width} * #{$scale-factor}); - padding-left: calc(#{$page--item-prefix--width} * #{$scale-factor}); - border-left: 0; - color: var(--code-block--fg); - font-size: $code-block--font-size; - line-height: $code-block--line-height; - text-overflow: ''; - - &::before { - content: str-repeat('``\A', 40); - height: 100%; - overflow: hidden; - color: var(--page--item-prefix--fg); - font-size: px-to-em($font-size, $code-block--font-size); - line-height: $code-block--line-height / $scale-factor; - } - } - - &--ref::before { - content: '|>'; - } - - &--backref::before { - content: '<|'; - } - } - - &__header { - margin-bottom: $line-height * 1em; - - &__title { - margin-top: 0; - } - - &__backlink__link { - &:link, - &:visited { - color: var(--fg-hi); - - &:hover { - color: var(--link--hover--fg); - } - } - } - - &__backlink + &__title { - margin-top: $line-height * 1em; - } - - &__meta { - margin-top: 0; - color: var(--fg-hi); - font-weight: normal; - } - } - - &__content { - padding-left: $page--item-prefix--width; - - > :first-child { - margin-top: 0; - } - } - - @media (max-width: map-get($breakpoints, 'sm')) { - &__prefixed { - margin-left: 0; - padding-left: $page--item-prefix--width--sm; - - &::before { - width: $page--item-prefix--width--sm; - margin-left: -1 * $page--item-prefix--width--sm; - } - - &--h1, - &--h2, - &--h3, - &--pre { - padding-left: 0; - - &::before { - display: none; - } - } - } - - &__content { - padding-left: 0; - } - } +@include component('page') { + // } diff --git a/assets/css/components/_spacer.scss b/assets/css/components/_spacer.scss deleted file mode 100644 index 692eb29..0000000 --- a/assets/css/components/_spacer.scss +++ /dev/null @@ -1,5 +0,0 @@ -.c-spacer { - display: block; - height: 0; - margin: ($line-height * 2em) 0 0; -} diff --git a/assets/css/layouts/_container.scss b/assets/css/layouts/_container.scss index e99c62f..2bb4d80 100644 --- a/assets/css/layouts/_container.scss +++ b/assets/css/layouts/_container.scss @@ -1,25 +1,36 @@ -.l-container { - padding-right: $container--pad-h; - padding-left: $container--pad-h; +@include namespace('container') { + @include store(( + --dims: ( + --pad-x: 2rem, + --pad-x-sm: 1rem, + --pad-y: $line-height * 2rem, + --pad-y-sm: $line-height * 1rem + ) + )); - &--content { - max-width: $content--width; - margin-right: auto; - margin-left: auto; - } + @include layout(namespace()) { + padding-right: prop(--dims --pad-x); + padding-left: prop(--dims --pad-x); - &--pad-v { - padding-top: $container--pad-v; - padding-bottom: $container--pad-v; - } + @include modifier('content') { + max-width: $content--width; + margin-right: auto; + margin-left: auto; + } + + @include modifier('pad-v') { + padding-top: prop(--dims --pad-y); + padding-bottom: prop(--dims --pad-y); + } - @media (max-width: map-get($breakpoints, 'sm')) { - padding-right: $container--pad-h--sm; - padding-left: $container--pad-h--sm; + @include media('<=sm') { + padding-right: prop(--dims --pad-x-sm); + padding-left: prop(--dims --pad-x-sm); - &--pad-v { - padding-top: $container--pad-v--sm; - padding-bottom: $container--pad-v--sm; + @include modifier('pad-v') { + padding-top: prop(--dims --pad-y-sm); + padding-bottom: prop(--dims --pad-y-sm); + } } } } diff --git a/assets/css/scopes/_code.scss b/assets/css/scopes/_code.scss index 4a40d0f..3f50ce3 100644 --- a/assets/css/scopes/_code.scss +++ b/assets/css/scopes/_code.scss @@ -1,5 +1,5 @@ -.s-code { - &--highlight { +@include scope('code') { + @include modifier('highlight') { pre { color: var(--fg-lo); } diff --git a/assets/css/scopes/_page.scss b/assets/css/scopes/_page.scss index e4c505e..70489fb 100644 --- a/assets/css/scopes/_page.scss +++ b/assets/css/scopes/_page.scss @@ -1,4 +1,4 @@ -.s-page { +@include scope('page-content') { :link { color: var(--page--link--idle--fg); } @@ -18,4 +18,8 @@ img { max-width: 100%; } + + > :first-child { + margin-top: 0; + } } diff --git a/assets/css/style.scss b/assets/css/style.scss index 6ffab5f..dad774a 100644 --- a/assets/css/style.scss +++ b/assets/css/style.scss @@ -1,9 +1,13 @@ +@import '../../node_modules/iro-sass/src/main'; +@import '../../node_modules/iro-sass/src/bem-shortcodes'; +@import '../../node_modules/iro-sass/src/responsive-shortcodes'; +@import '../../node_modules/iro-sass/src/props-shortcodes'; +@import '../../node_modules/include-media/dist/include-media'; + @import 'vars'; @import 'functions'; @import 'basics'; -//@import 'components/spacer'; -//@import 'components/hlist'; @import 'components/nav'; @import 'components/page'; @import 'components/hero'; @@ -15,3 +19,7 @@ @import 'scopes/page'; @import 'utils'; + +:root { + @include assign; +} diff --git a/assets/fonts/GaretVariable.ttf b/assets/fonts/GaretVariable.ttf new file mode 100644 index 0000000..2f0a27d Binary files /dev/null and b/assets/fonts/GaretVariable.ttf differ diff --git a/assets/fonts/IBMPlexSans-Bold.ttf b/assets/fonts/IBMPlexSans-Bold.ttf new file mode 100644 index 0000000..e324b09 Binary files /dev/null and b/assets/fonts/IBMPlexSans-Bold.ttf differ diff --git a/assets/fonts/IBMPlexSans-Regular.ttf b/assets/fonts/IBMPlexSans-Regular.ttf new file mode 100644 index 0000000..3b16bfd Binary files /dev/null and b/assets/fonts/IBMPlexSans-Regular.ttf differ diff --git a/assets/fonts/iosevka-aile-bold.ttf b/assets/fonts/iosevka-aile-bold.ttf deleted file mode 100644 index 6db4acf..0000000 Binary files a/assets/fonts/iosevka-aile-bold.ttf and /dev/null differ diff --git a/assets/fonts/iosevka-aile-regular.ttf b/assets/fonts/iosevka-aile-regular.ttf deleted file mode 100644 index 7dba5b6..0000000 Binary files a/assets/fonts/iosevka-aile-regular.ttf and /dev/null differ diff --git a/assets/fonts/iosevka-term-ss09-bold.ttf b/assets/fonts/iosevka-term-ss09-bold.ttf deleted file mode 100644 index 30e7c45..0000000 Binary files a/assets/fonts/iosevka-term-ss09-bold.ttf and /dev/null differ diff --git a/assets/fonts/iosevka-term-ss09-regular.ttf b/assets/fonts/iosevka-term-ss09-regular.ttf deleted file mode 100644 index 95ec646..0000000 Binary files a/assets/fonts/iosevka-term-ss09-regular.ttf and /dev/null differ diff --git a/content/index.md b/content/index.md index 9050478..7e7ab99 100644 --- a/content/index.md +++ b/content/index.md @@ -2,8 +2,6 @@ title: Home --- -# Volpeon's Den - 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 diff --git a/content/logo.svg b/content/logo.svg new file mode 100644 index 0000000..4f66970 --- /dev/null +++ b/content/logo.svg @@ -0,0 +1,70 @@ + + diff --git a/content/personal/infinite-skyscrapers.md b/content/personal/infinite-skyscrapers.md index 909ecce..a4a78e1 100644 --- a/content/personal/infinite-skyscrapers.md +++ b/content/personal/infinite-skyscrapers.md @@ -4,25 +4,42 @@ title: Infinite Skyscrapers category: dre --- -I'm in some strange world that consist of huge buildings, looking a lot like very simple skyscrapers, except they were all interconnected. I'm not even sure if there's a floor since I'm just floating, being able to fly around at will. +I'm in some strange world that consist of huge buildings, looking a lot like very simple skyscrapers, except they were all interconnected. +I'm not even sure if there's a floor since I'm just floating, being able to fly around at will. There is also something chasing me and I'm trying to get away from it. -The buildings around me get denser and more chaotic, some look like glitches in a computer game. The creature chasing me seems to absorb buildings into its body, getting larger and more powerful. +The buildings around me get denser and more chaotic, some look like glitches in a computer game. +The creature chasing me seems to absorb buildings into its body, growing larger and more powerful. -Then there's a cut and I'm presumable inside one of those buildings. I'm in a dark room with barely any lighting, looking somewhat like a large office. It's very cluttered, though. There's another similar room next to this one, being separated by a glass wall and a door. -There's another person with me who I seem to know, and that creature that chased me. It seems like it managed to capture us. +Then there's a cut and I'm presumably inside one of those buildings. +I'm in a dark room with barely any lighting which looks somewhat like a large office. +It's very cluttered, though. +There's another similar room next to this one, separated by a glass wall and a door. +There's also a person with me who I seem to know, and that creature that chased me. +It seems like it managed to capture us. -It dares us to escape from this situation, and as soon as it said that, the room begins to get locked off. There are some red lights blinking and the door connecting our current room with the neighboring room is about to close permanently. Panicked, I quickly run through it, but the other person couldn't make it. +It dares us to escape from this situation, and as soon as it said that, the room begins to get locked off. +There are some red lights blinking and the door connecting our current room with the neighboring room is about to close permanently. +Panicked, I quickly run through it, but the other person couldn't make it. -I suddenly realize I'm a cat and the other person an even smaller critter, I don't know what. It was obvious that the creature was just playing with us, watching our futile efforts to escape for its amusement. +I suddenly realize I'm a cat and the other person an even smaller critter, I don't know what. +It's obvious that the creature is just playing with us, watching our futile efforts to escape for its amusement. The other person tries to get the door to open again by messing with its circuitry, and I do my best to block the creature's view from what was going on without looking suspicious. -After a while, I start exploring the room and notice that there's a hallway in front of it, also separated by a glass wall and a door. However, the wall is broken in one place and has a hole large enough for me to jump through. So that's what I do. I land in a bunch of glass disks lying on the floor, breaking them, but I'm unharmed. +After a while, I start exploring the room and notice that there's a hallway in front of it, also separated by a glass wall and a door. +However, the wall is broken in one place and has a hole large enough for me to jump through. +So that's what I do. +I land in a bunch of glass disks lying on the floor, breaking them, but I'm unharmed. -Now being a human again, I take a glass shard with me and run through a door which leads to a staircase. It is huge, having the shape of a pill with stairs going along the edge. The center is empty so I can see all the floors coming before and after. It looks like the number of floors is endless. +Now being a human again, I take a glass shard with me and run through a door which leads to a staircase. +It is huge, having the shape of a pill with stairs going along the edge. +The center is empty so I can see all the floors coming before and after. +There's no end in any direction. I know the creature will come after me soon and so I run upwards as fast as I can. -I made it about 5 floors when I hear a door burst open and I quickly enter the room next to me, hoping that the creature hasn't seen me. +I made it about 5 floors when I hear a door burst open. +I quickly enter the room next to me, hoping that the creature hasn't seen me. -This floor was very large and open and brightly lit. The dream starts to make no sense anymore and that's it. +This floor was very large and open and brightly lit. +The dream starts to make no sense anymore and that's it. diff --git a/filters/common_actions.lua b/filters/common_actions.lua index fbbff6d..6070c7e 100644 --- a/filters/common_actions.lua +++ b/filters/common_actions.lua @@ -1,6 +1,6 @@ function CodeBlock(el) if next(el.classes) == nil then - el.classes = el.classes .. {'c-page__prefixed', 'c-page__prefixed--pre'} + el.classes = el.classes .. {'c-page__pre'} elseif el.classes[1] == "plain" then el = pandoc.Div({el}, {class = 's-code'}) else @@ -16,11 +16,11 @@ end function Header(el) if el.level == 1 then - el.classes = el.classes .. {'c-page__prefixed', 'c-page__prefixed--h1'} + el.classes = el.classes .. {'c-page__h1'} elseif el.level == 2 then - el.classes = el.classes .. {'c-page__prefixed', 'c-page__prefixed--h2'} + el.classes = el.classes .. {'c-page__h2'} elseif el.level == 3 then - el.classes = el.classes .. {'c-page__prefixed', 'c-page__prefixed--h3'} + el.classes = el.classes .. {'c-page__h3'} end return el end diff --git a/metadata/metadata.yaml b/metadata/metadata.yaml index 12e85cc..eeb6f62 100644 --- a/metadata/metadata.yaml +++ b/metadata/metadata.yaml @@ -1,6 +1,5 @@ site: title: Volpeon's Den - logo: \\\\/ url: https://volpeon.ink/ author: diff --git a/package.json b/package.json index b6fbf5e..eceefd7 100644 --- a/package.json +++ b/package.json @@ -2,5 +2,12 @@ "devDependencies": { "stylelint": "^13.8.0", "stylelint-config-sass-guidelines": "^7.1.0" + }, + "dependencies": { + "include-media": "^1.4.9", + "iro-sass": "git+https://git.vulpes.one/iro-sass/" + }, + "scripts": { + "lint": "stylelint \"assets/css/**/*.scss\"" } } diff --git a/scripts/build_fonts.sh b/scripts/build_fonts.sh index 0e9cd91..7d368e7 100755 --- a/scripts/build_fonts.sh +++ b/scripts/build_fonts.sh @@ -13,7 +13,7 @@ find "${ASSETS_DIR}fonts" \ pyftsubset "$file" \ --text-file="${ASSETS_DIR}fonts/glyphs.txt" \ - --layout-features+=ss09,dlig \ + --layout-features+=ss02,ss09,dlig \ --flavor="woff2" \ --output-file="$OUTPUT_DIR$target_file" done diff --git a/templates/base.html b/templates/base.html index 49b2285..98e6da2 100644 --- a/templates/base.html +++ b/templates/base.html @@ -28,21 +28,19 @@ $if(section.is_index)$$else$$title$ – $endif$$site.title$ - - - - -