From 575278aba99139635adc3b1f9385befe57102541 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Sat, 11 Jun 2022 09:44:04 +0200 Subject: Re-implemented design via iro-design --- Makefile | 2 +- assets/css/_base.scss | 36 + assets/css/_basics.scss | 194 ---- assets/css/_declare-vars.scss | 31 + assets/css/_functions.scss | 2 +- assets/css/_utils.scss | 46 - assets/css/_vars.scss | 196 ---- assets/css/components/_card.scss | 135 ++- assets/css/components/_footer.scss | 37 +- assets/css/components/_header.scss | 77 +- assets/css/components/_hnav.scss | 31 +- assets/css/components/_lightbox.scss | 116 --- assets/css/components/_note.scss | 23 - assets/css/layouts/_card-list.scss | 33 +- assets/css/layouts/_container.scss | 33 - assets/css/layouts/_media.scss | 26 + assets/css/objects/_badge.scss | 25 - assets/css/objects/_icon.scss | 33 - assets/css/scopes/_body.scss | 83 -- assets/css/scopes/_colored-links.scss | 20 - assets/css/scopes/_headlines.scss | 104 --- assets/css/scopes/_intro.scss | 8 - assets/css/scopes/_invisible-links.scss | 13 - assets/css/scopes/_small.scss | 23 +- assets/css/style.scss | 63 +- assets/fonts/GaretVariable.ttf | Bin 392080 -> 394776 bytes content/lightbox.js | 81 -- content/main.js | 120 +++ filters/headers.lua | 9 +- package.json | 28 +- templates/base.html | 46 +- templates/layouts/categorized_list.html | 37 +- templates/layouts/list.html | 6 +- templates/layouts/page.html | 6 +- templates/layouts/redirect.html | 4 +- templates/partials/gallery_card.html | 26 +- templates/partials/grid_card.html | 24 +- templates/partials/list_card.html | 20 +- yarn.lock | 1560 +++++++++++++++++++++++++++++-- 39 files changed, 1987 insertions(+), 1370 deletions(-) create mode 100644 assets/css/_base.scss delete mode 100644 assets/css/_basics.scss create mode 100644 assets/css/_declare-vars.scss delete mode 100644 assets/css/_utils.scss delete mode 100644 assets/css/_vars.scss delete mode 100644 assets/css/components/_lightbox.scss delete mode 100644 assets/css/components/_note.scss delete mode 100644 assets/css/layouts/_container.scss create mode 100644 assets/css/layouts/_media.scss delete mode 100644 assets/css/objects/_badge.scss delete mode 100644 assets/css/objects/_icon.scss delete mode 100644 assets/css/scopes/_body.scss delete mode 100644 assets/css/scopes/_colored-links.scss delete mode 100644 assets/css/scopes/_headlines.scss delete mode 100644 assets/css/scopes/_intro.scss delete mode 100644 assets/css/scopes/_invisible-links.scss delete mode 100644 content/lightbox.js create mode 100644 content/main.js diff --git a/Makefile b/Makefile index 96a8306..f9d36bc 100644 --- a/Makefile +++ b/Makefile @@ -134,7 +134,7 @@ out/%.woff2: assets/fonts/%.ttf assets/fonts/glyphs.txt | out out/%.css: assets/css/%.scss $(CSS_SRC) | out $(info [SCSS] $< -> $@) - sass "$<" | ./node_modules/.bin/postcss --use postcss-csso autoprefixer --no-map > "$@" + sass --load-path=node_modules "$<" | ./node_modules/.bin/postcss --use autoprefixer --no-map -o "$@" out/%: content/% | out $(info [COPY] $< -> $@) diff --git a/assets/css/_base.scss b/assets/css/_base.scss new file mode 100644 index 0000000..dd24fed --- /dev/null +++ b/assets/css/_base.scss @@ -0,0 +1,36 @@ +@use 'iro-sass/src/index' as iro; +@use 'iro-design/src/functions' as fn; + +html, +pre, +code { + font-feature-settings: 'calt' 0, 'dlig' 1, 'ss09' 1; +} + +body { + box-sizing: border-box; + min-height: 100%; +} + +main { + @include iro.responsive-env((600px, 900px)) { + font-size: iro.responsive-set((1rem, iro.fn-px-to-rem(18px))); + } +} + +img { + display: block; + max-width: 100%; +} + +figure { + margin: fn.dim(--paragraph --margin-top) 0 0; + padding: 0; + + img { + display: block; + max-width: 100%; + max-height: 70vh; + object-fit: contain; + } +} diff --git a/assets/css/_basics.scss b/assets/css/_basics.scss deleted file mode 100644 index 7689379..0000000 --- a/assets/css/_basics.scss +++ /dev/null @@ -1,194 +0,0 @@ -::selection { - background-color: prop(--colors --select --bg); - color: prop(--colors --select --fg); -} - -img::selection { - background-color: prop(--colors --select --img-bg); -} - -:focus { - outline: 2px solid prop(--colors --focus-ring); - outline-offset: 3px; -} - -html, -pre, -code { - font-feature-settings: 'calt' 0, 'dlig' 1, 'ss09' 1; -} - -html { - height: 100%; - background-color: prop(--colors --bg); - color: prop(--colors --fg); - font-family: $font-fam--text; - font-size: px-to-em($font-size); - line-height: $line-height; -} - -body { - box-sizing: border-box; - min-height: 100%; - margin: 0; - padding: 0; -} - -main { - @include iro-responsive-env(('sm', 'md')) { - font-size: iro-responsive-set((1rem, iro-px-to-rem(18px))); - } -} - -pre, -code { - font-family: $font-fam--mono; -} - -code { - color: prop(--colors --code --fg); - font-size: px-to-em(15px); -} - -pre { - margin: 0; - overflow-x: auto; - font-size: px-to-em(15px); - line-height: 1.4; - - code { - color: currentColor; - font-size: 1em; - } - - strong { - //font-weight: normal; - } -} - -strong { - color: prop(--colors --fg-lo); - font-weight: bold; -} - -small { - color: prop(--colors --fg-hi); - font-size: px-to-em(14px); -} - -ul, -ol { - margin: ($line-height * 1rem) 0 0; - padding: 0; - list-style: none; -} - -li { - position: relative; - padding-left: prop(--dims --indent); - - &::before { - display: inline-block; - position: absolute; - width: prop(--dims --indent); - margin-left: calc(-1 * #{prop(--dims --indent)}); - color: prop(--colors --fg-hi); - } -} - -ul > li::before { - content: '-'; -} - -ol { - counter-reset: cnt; - - > li { - counter-increment: cnt; - - &::before { - content: counter(cnt) '.'; - } - } -} - -ul ul { - margin-top: 0; -} - -dl { - margin: ($line-height * 1rem) 0 0; - padding: 0; -} - -dt, -dd { - display: inline-block; -} - -dt { - color: prop(--colors --fg-lo); - font-weight: bold; - - &::after { - content: ':'; - color: prop(--colors --fg); - font-weight: normal; - } -} - -dd { - margin: 0 3ch 0 0; -} - -h1, -h2, -h3, -h4, -h5, -h6 { - @include iro-responsive-modular-scale(font-size, 0, $responsive-mod-scale); - - margin: ($line-height * 2rem) 0 0; - color: prop(--colors --fg-lo); - font-weight: 700; - letter-spacing: 1px; - text-transform: uppercase; - - & + & { - margin-top: $line-height * 1rem; - } - - strong { - color: prop(--colors --accent --color, $global: true); - font-weight: 550; - } -} - -p { - margin: ($line-height * 1rem) 0 0; -} - -figure { - margin: ($line-height * 1rem) 0 0; - padding: 0; - - img { - display: block; - max-width: 100%; - max-height: 70vh; - object-fit: contain; - } -} - -:link, -:visited { - color: prop(--colors --link --default); -} - -hr { - height: 1px; - margin: ($line-height * 2rem) 0; - border: 0; - background-color: prop(--colors --obj-hi); -} diff --git a/assets/css/_declare-vars.scss b/assets/css/_declare-vars.scss new file mode 100644 index 0000000..4a9513c --- /dev/null +++ b/assets/css/_declare-vars.scss @@ -0,0 +1,31 @@ +@use 'iro-sass/src/index' as iro; +@use 'iro-design/src/functions' as fn; + +@include iro.props-store(( + --dims: ( + --font-size: ( + --50: iro.fn-px-to-rem(13px), + --75: iro.fn-px-to-rem(14px), + --100: iro.fn-px-to-rem(16px), + --150: iro.fn-px-to-rem(18px), + --200: iro.fn-px-to-rem(20px), + --300: iro.fn-px-to-rem(24px), + --400: iro.fn-px-to-rem(28px), + --500: iro.fn-px-to-rem(32px), + --600: iro.fn-px-to-rem(36px), + --700: iro.fn-px-to-rem(40px), + --800: iro.fn-px-to-rem(45px), + --900: iro.fn-px-to-rem(50px), + --1000: iro.fn-px-to-rem(60px), + --1100: iro.fn-px-to-rem(70px), + ), + + --paragraph: ( + --margin-top: fn.dim(--size --400, null), + ), + + --heading: ( + --margin-top: fn.dim(--size --700, null), + ), + ) +), 'dims'); diff --git a/assets/css/_functions.scss b/assets/css/_functions.scss index a641a34..107cba7 100644 --- a/assets/css/_functions.scss +++ b/assets/css/_functions.scss @@ -1,6 +1,6 @@ @use 'sass:math'; -@function px-to-em($s, $b: $font-size) { +@function px-to-em($s, $b: 16px) { @return math.div(1, math.div($b, 1px)) * math.div($s, 1px) * 1em; } diff --git a/assets/css/_utils.scss b/assets/css/_utils.scss deleted file mode 100644 index 71118fe..0000000 --- a/assets/css/_utils.scss +++ /dev/null @@ -1,46 +0,0 @@ -@include utility('dn') { - display: none; - - @each $breakpoint in ('sm') /*map-keys($breakpoints)*/ { - @include media('<=#{$breakpoint}') { - @include suffix('#{$breakpoint}-lo') { - display: none; - } - } - - @include media('>#{$breakpoint}') { - @include suffix('#{$breakpoint}-hi') { - display: none; - } - } - } -} - -@include utility('mt0') { - margin-top: 0; -} - -@include utility('pb0') { - padding-bottom: 0; -} - -@include utility('db') { - display: block; -} - -@include utility('fs0') { - flex-shrink: 0; -} - -@include utility('g-span-row') { - grid-column: 1 / -1; -} - -@include utility('elp') { - overflow: hidden; - text-overflow: ellipsis; -} - -@include utility('tar') { - text-align: right; -} diff --git a/assets/css/_vars.scss b/assets/css/_vars.scss deleted file mode 100644 index ad9e16f..0000000 --- a/assets/css/_vars.scss +++ /dev/null @@ -1,196 +0,0 @@ -$breakpoints: ( - lg: 1340px, - md: 900px, - sm: 600px, - xs: 400px, -); - -$unit-intervals: ( - 'px': 1, - 'em': .01, - 'rem': .01, - '': 0 -); - -$responsive-mod-scale: ( - xs: (iro-px-to-rem(14px), 1.28), - md: (iro-px-to-rem(14px), 1.49) -); - -$font-fam--text: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif; -$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; -$content--width: 44rem; - -@include iro-execute { - $gray0: hsl(220, 5%, 4%); - $gray1: hsl(220, 5%, 10%); - $gray2: hsl(220, 5%, 16%); - $gray3: hsl(220, 5%, 23%); - $gray4: hsl(220, 5%, 38%); - $gray5: hsl(220, 5%, 60%); - $gray6: hsl(220, 5%, 80%); - $gray7: hsl(220, 5%, 100%); - - @include store(( - --dims: ( - --indent: 2rem, - ), - --colors: ( - --bg-hi: $gray0, // Darker background - --bg: $gray1, // Background - --bg-lo: $gray2, // Lighter background - - --obj-hi: $gray3, - --obj: $gray4, - - --fg-hi: $gray5, // Faint text - --fg: $gray6, // Text - --fg-lo: $gray7, // Strong text - - --accent: ( - --h: 354, - --s: 84%, - --l: 55%, - --color: hsl(var(--colors--accent--h), var(--colors--accent--s), var(--colors--accent--l)), - --strong: hsl( - var(--colors--accent--h), - calc(var(--colors--accent--s) * 1.2), - calc(var(--colors--accent--l) * 1.2) - ), - --faint: hsla( - var(--colors--accent--h), - var(--colors--accent--s), - var(--colors--accent--l), - .1 - ), - ), - - --focus-ring: var(--colors--fg-lo), - - --select: ( - --bg: rgba($gray7, .996), - --img-bg: rgba($gray7, .5), - --fg: var(--colors--bg-hi), - --inverted: ( - --bg: rgba($gray0, .996), - --fg: var(--colors--fg-lo), - ) - ), - - --link: ( - --default: var(--colors--fg-lo), - --colored: ( - --idle-h: 220, - --idle-s: 100%, - --idle-l: 80%, - --idle: hsl( - var(--colors--link--colored--idle-h), - var(--colors--link--colored--idle-s), - var(--colors--link--colored--idle-l), - ), //hsl(var(--colors--accent--h), 100%, 66%), // - --visited: hsl(290, 35%, 72%), //hsl(var(--colors--accent--h), 50%, 66%), // - ) - ), - - --code: ( - --fg: var(--colors--fg-hi), - ), - ) - )); -} - -@include iro-execute { - $gray0: hsl(220, 5%, 100%); - $gray1: hsl(220, 5%, 95%); - $gray2: hsl(220, 5%, 88%); - $gray3: hsl(220, 5%, 83%); - $gray4: hsl(220, 5%, 68%); - $gray5: hsl(220, 5%, 44%); - $gray6: hsl(220, 5%, 16%); - $gray7: hsl(220, 5%, 0%); - - @include store(( - --colors: ( - --bg-hi: $gray0, // Darker background - --bg: $gray1, // Background - --bg-lo: $gray2, // Lighter background - - --obj-hi: $gray3, - --obj: $gray4, - - --fg-hi: $gray5, // Faint text - --fg: $gray6, // Text - --fg-lo: $gray7, // Strong text - - --accent: ( - --h: 354, - --s: 74%, - --l: 48%, - --strong: hsl( - var(--colors--accent--h), - var(--colors--accent--s), - calc(var(--colors--accent--l) * .8) - ), - ), - - --select: ( - --bg: rgba($gray7, .996), - --img-bg: rgba($gray7, .5), - --inverted: ( - --bg: rgba($gray0, .996), - ), - ), - - --link: ( - --colored: ( - --idle-h: 220, - --idle-s: 60%, - --idle-l: 40%, - --idle: hsl( - var(--colors--link--colored--idle-h), - var(--colors--link--colored--idle-s), - var(--colors--link--colored--idle-l), - ), //hsl(var(--colors--accent--h), 100%, 66%), // - --visited: hsl(290, 30%, 35%), //hsl(var(--colors--accent--h), 50%, 66%), // - ) - ), - ), - ), 'light'); -} - -@include iro-execute { - $white: #fff; - $black: #000; - - @include store(( - --colors: ( - --bg-hi: $white, // Darker background - --bg: $white, // Background - --bg-lo: $black, // Lighter background - - --obj-hi: $black, - --obj: $black, - - --fg-hi: $black, // Faint text - --fg: $black, // Text - --fg-lo: $black, // Strong text - ), - ), 'print'); -} - -@each $breakpoint in map-keys($breakpoints) { - @include media('<=#{$breakpoint}') { - @include store(( - --colors: () - ), $breakpoint); - } -} - -@include store(( - --dims: ( - --indent: 1.5rem, - ), -), 'sm'); diff --git a/assets/css/components/_card.scss b/assets/css/components/_card.scss index 20614e7..f8f106d 100644 --- a/assets/css/components/_card.scss +++ b/assets/css/components/_card.scss @@ -1,41 +1,46 @@ -@include namespace('card') { - @include store(( - --colors: ( - --bg: prop(--colors --bg-lo, $global: true), - --fg: prop(--colors --fg, $global: true), - --unread: prop(--colors --bg, $global: true), - --border: prop(--colors --obj-hi, $global: true), - --hover: ( - --bg: prop(--colors --fg-lo, $global: true), - --fg: prop(--colors --bg-hi, $global: true), - ), - ), +@use 'iro-sass/src/index' as iro; +@use 'iro-design/src/functions' as fn; +@use '../functions' as fn2; + +@include iro.props-namespace('card') { + @include iro.props-store(( --dims: ( - --pad-x: 1em, - --pad-y: px-to-em(12px), - --hover-offset: px-to-em(-5px), + --hover-offset: fn2.px-to-em(-5px), --indicator: ( --width: 1em, --height: 4px, ), ) - )); + ), 'dims'); + + @include iro.props-store(( + --colors: ( + --bg: fn.global-color(--bg-hi2), + --fg: fn.global-color(--fg), + --unread: fn.global-color(--obj-hi), + --border: fn.global-color(--obj-hi), + --hover: ( + --bg: fn.global-color(--fg-lo), + --fg: fn.global-color(--bg-hi2), + ), + ) + ), 'colors'); - @include store(( + @include iro.props-store(( --colors: ( - --bg: prop(--colors --bg-hi, $global: true), - --unread: prop(--colors --bg-lo, $global: true), - --border: prop(--colors --bg-lo, $global: true), + --bg: fn.global-color(--obj-hi), + --unread: fn.global-color(--bg), + --border: fn.global-color(--obj-hi), ) - ), 'light'); + ), 'colors-dark'); - @include component(namespace()) { + @include iro.bem-component(iro.props-namespace()) { display: block; position: relative; transform: translateY(0); transition: transform .2s, background-color .2s, color .2s, border-color .2s; - background-color: prop(--colors --bg); - color: prop(--colors --fg); + background-color: fn.color(--bg); + color: fn.color(--fg); line-height: 1.4; &::after { @@ -45,7 +50,7 @@ top: 100%; left: 0; width: 100%; - height: calc(-1 * #{prop(--dims --hover-offset)}); + height: calc(-1 * fn.dim(--hover-offset)); } small, @@ -59,9 +64,9 @@ &:hover, &:focus { - transform: translateY(#{prop(--dims --hover-offset)}); - background-color: prop(--colors --hover --bg); - color: prop(--colors --hover --fg); + transform: translateY(fn.dim(--hover-offset)); + background-color: fn.color(--hover --bg); + color: fn.color(--hover --fg); &::after { display: block; @@ -69,35 +74,31 @@ small, strong { - color: prop(--colors --hover --fg); + color: fn.color(--hover --fg); } - @include element('row') { - @include modifier('hidden') { + @include iro.bem-elem('row') { + @include iro.bem-modifier('hidden') { visibility: visible; transition: opacity .2s; opacity: 1; } } - @include element('block') { - @include modifier('indicator') { - color: prop(--colors --hover --fg); - } + @include iro.bem-elem('indicator') { + color: fn.color(--hover --fg); } } } &:visited { - @include element('block') { - @include modifier('indicator') { - color: prop(--colors --bg); - } + @include iro.bem-elem('indicator') { + color: fn.color(--bg); } } - @include modifier('outline') { - border: 1px solid prop(--colors --border); + @include iro.bem-modifier('outline') { + border: 1px solid fn.color(--border); background-color: transparent; &:link, @@ -109,17 +110,8 @@ } } - @include element('row') { - display: flex; - align-items: center; - padding: prop(--dims --pad-y) prop(--dims --pad-x); - gap: prop(--dims --pad-x); - - @include modifier('flush') { - padding: 0; - } - - @include modifier('hidden') { + @include iro.bem-elem('row') { + @include iro.bem-modifier('hidden') { visibility: hidden; position: absolute; z-index: 10; @@ -128,7 +120,7 @@ left: 0; transition: opacity .2s, visibility 0s .2s; opacity: 0; - background-color: prop(--colors --hover --bg); + background-color: fn.color(--hover --bg); @media (hover: none) { visibility: visible; @@ -139,14 +131,14 @@ } } - @include element('thumbnail') { + @include iro.bem-elem('thumbnail') { position: relative; width: 100%; height: 2em; padding-top: 46%; } - @include element('thumbnail-img') { + @include iro.bem-elem('thumbnail-img') { display: block; position: absolute; top: 0; @@ -156,28 +148,17 @@ object-fit: cover; } - @include element('block') { - flex: 0 0 auto; - overflow: hidden; - text-overflow: ellipsis; - - @include modifier('main') { - flex-shrink: 1; - width: 100%; - } - - @include modifier('indicator') { - transition: color .2s; - color: prop(--colors --unread); - - &::before { - content: ''; - display: block; - width: prop(--dims --indicator --width); - height: prop(--dims --indicator --height); - border-radius: prop(--dims --indicator --height); - background-color: currentColor; - } + @include iro.bem-elem('indicator') { + transition: color .2s; + color: fn.color(--unread); + + &::before { + content: ''; + display: block; + width: fn.dim(--indicator --width); + height: fn.dim(--indicator --height); + border-radius: fn.dim(--indicator --height); + background-color: currentColor; } } diff --git a/assets/css/components/_footer.scss b/assets/css/components/_footer.scss index 6b483ca..2cc63f5 100644 --- a/assets/css/components/_footer.scss +++ b/assets/css/components/_footer.scss @@ -1,30 +1,35 @@ -@include namespace('footer') { - @include store(( +@use 'iro-sass/src/index' as iro; +@use 'iro-design/src/functions' as fn; +@use 'iro-design/src/mixins' as mx; +@use '../functions' as fn2; + +@include iro.props-namespace('footer') { + @include iro.props-store(( --colors: ( - --fg: prop(--colors --obj, $global: true), - --ground: prop(--colors --obj, $global: true), + --fg: fn.global-color(--obj-lo), + --ground: fn.global-color(--obj), ) - )); + ), 'colors'); + + @include iro.bem-component(iro.props-namespace()) { + @include mx.set-font(--mono); - @include component(namespace()) { - position: sticky; - top: 100vh; - overflow: hidden; - color: prop(--colors --fg); - font-family: $font-fam--mono; - line-height: 1.4; + position: sticky; + top: 100vh; + overflow: hidden; + color: fn.color(--fg); &::after { - content: str-repeat('░', 400); + content: fn2.str-repeat('░', 400); display: block; margin-top: 2px; padding-top: 2px; overflow: hidden; - border-top: 1px solid prop(--colors --ground); - color: prop(--colors --ground); + border-top: 1px solid fn.color(--ground); + color: fn.color(--ground); } - @include element('ascii') { + @include iro.bem-elem('ascii') { display: inline-block; position: relative; left: 50%; diff --git a/assets/css/components/_header.scss b/assets/css/components/_header.scss index ca85438..cf396ce 100644 --- a/assets/css/components/_header.scss +++ b/assets/css/components/_header.scss @@ -1,86 +1,93 @@ -@include namespace('header') { - @include store(( +@use 'iro-sass/src/index' as iro; +@use 'iro-design/src/functions' as fn; +@use 'include-media/dist/include-media' as media; + +@include iro.props-namespace('header') { + @include iro.props-store(( --colors: ( - --bg: prop(--colors --bg-lo, $global: true), - --fg: prop(--colors --fg-lo, $global: true), + --bg: fn.global-color(--bg-hi), + --fg: fn.global-color(--fg-lo), --hover: ( - --bg: prop(--colors --fg-lo, $global: true), - --fg: prop(--colors --bg-hi, $global: true), + --bg: fn.global-color(--fg-lo), + --fg: fn.global-color(--bg-hi), ), --active: ( - --fg: prop(--colors --fg-lo, $global: true), + --fg: fn.global-color(--fg-lo), ) - ), + ) + ), 'colors'); + + @include iro.props-store(( --dims: ( --height: 4rem, --icon: 1.5rem, --pad-x: calc(.5 * (var(--header--dims--height) - var(--header--dims--icon))), --gap: 2px, ) - )); + ), 'dims'); - @include store(( + @include iro.props-store(( --colors: ( - --bg: prop(--colors --bg-hi, $global: true), + --bg: fn.global-color(--obj-hi), ) - ), 'light'); + ), 'colors-dark'); - @include store(( + @include iro.props-store(( --dims: ( --height: 3.4rem, ) ), 'sm'); - @include component(namespace()) { + @include iro.bem-component(iro.props-namespace()) { display: flex; width: 0; - height: prop(--dims --height); - padding: prop(--dims --gap); - gap: prop(--dims --gap); + height: fn.dim(--height); + padding: fn.dim(--gap); + gap: fn.dim(--gap); - @include element('item') { - padding: 0 prop(--dims --pad-x); + @include iro.bem-elem('item') { + padding: 0 fn.dim(--pad-x); transition: background-color .2s, color .2s, border-left-color .2s; - background-color: prop(--colors --bg); - color: prop(--colors --fg); - line-height: prop(--dims --height); + background-color: fn.color(--bg); + color: fn.color(--fg); + line-height: fn.dim(--height); text-decoration: none; &:hover, &:focus { - border-left-color: prop(--colors --hover --bg); - background-color: prop(--colors --hover --bg); - color: prop(--colors --hover --fg); + border-left-color: fn.color(--hover --bg); + background-color: fn.color(--hover --bg); + color: fn.color(--hover --fg); } - @include modifier('icon') { + @include iro.bem-modifier('icon') { display: flex; align-items: center; justify-content: center; } - @include modifier('active') { - color: prop(--colors --active --fg); + @include iro.bem-modifier('active') { + color: fn.color(--active --fg); font-weight: bold; } } - @include element('icon') { - width: prop(--dims --icon); - height: prop(--dims --icon); + @include iro.bem-elem('icon') { + width: fn.dim(--icon); + height: fn.dim(--icon); } - @include modifier('fixed') { + @include iro.bem-modifier('fixed') { position: fixed; } - @include media('>=lg') { + @include media.media('>=lg') { position: sticky; z-index: 100; top: 0; - margin-bottom: calc(-.75 * #{prop(--dims --height)}); + margin-bottom: calc(-.75 * #{fn.dim(--height)}); - @include modifier('fixed') { + @include iro.bem-modifier('fixed') { position: fixed; } } diff --git a/assets/css/components/_hnav.scss b/assets/css/components/_hnav.scss index 220afde..4097373 100644 --- a/assets/css/components/_hnav.scss +++ b/assets/css/components/_hnav.scss @@ -1,22 +1,29 @@ -@include namespace('hnav') { - @include store(( +@use 'iro-sass/src/index' as iro; +@use 'iro-design/src/functions' as fn; + +@include iro.props-namespace('hnav') { + @include iro.props-store(( --colors: ( - --border: prop(--colors --obj-hi, $global: true) - ), + --border: fn.global-color(--obj-hi) + ) + ), 'colors'); + + @include iro.props-store(( --dims: ( - --gap: 2em, - --pad-y: .5em + --margin-top: fn.global-dim(--size --600), + --gap: 2em, + --pad-y: .5em ) - )); + ), 'dims'); - @include component(namespace()) { + @include iro.bem-component(iro.props-namespace()) { display: flex; - gap: prop(--dims --gap); + gap: fn.dim(--gap); align-items: baseline; - margin-top: $line-height * 2rem; - padding: prop(--dims --pad-y) 0 0; + margin-top: fn.dim(--margin-top); + padding: fn.dim(--pad-y) 0 0; border-width: 1px 0 0; border-style: solid; - border-color: prop(--colors --border); + border-color: fn.color(--border); } } diff --git a/assets/css/components/_lightbox.scss b/assets/css/components/_lightbox.scss deleted file mode 100644 index f497a5e..0000000 --- a/assets/css/components/_lightbox.scss +++ /dev/null @@ -1,116 +0,0 @@ -@include namespace('lightbox') { - @include store(( - --colors: ( - --bg: prop(--colors --bg-hi, $global: true), - --button: ( - --idle: prop(--colors --fg-hi, $global: true), - --hover: prop(--colors --fg-lo, $global: true), - --bg: prop(--colors --bg-hi, $global: true), - ) - ), - --dims: ( - --pad: 1rem, - ), - )); - - @include component(namespace()) { - display: flex; - visibility: hidden; - position: fixed; - z-index: 5000; - top: 0; - left: 0; - box-sizing: border-box; - flex-direction: column; - align-items: center; - justify-content: center; - width: 100%; - height: 100%; - padding-bottom: 3vh; - transition: opacity .2s, visibility .2s; - opacity: 0; - - @include element('bg') { - position: absolute; - z-index: -10; - top: 0; - left: 0; - width: 100%; - height: 100%; - opacity: .85; - background-color: prop(--colors --bg); - } - - @include is('shown') { - visibility: visible; - transition: opacity .2s, visibility 0 .2s; - opacity: 1; - } - - @include element('infobar') { - display: flex; - box-sizing: border-box; - flex: 0 0 auto; - align-items: center; - width: 100%; - padding: 0 prop(--dims --pad); - } - - @include element('img') { - max-width: 100%; - min-height: 0; - max-height: 100%; - margin-top: auto; - margin-bottom: auto; - } - - @include element('close', 'prev', 'next') { - margin: 0; - transition: color .2s; - border: 0; - background-color: transparent; - color: currentColor; - - &:hover { - color: prop(--colors --button --hover); - } - } - - @include element('close') { - margin: 0 calc(-1 * #{prop(--dims --pad)}) 0 auto; - padding: prop(--dims --pad); - font-size: 1.5em; - } - - @include element('prev', 'next') { - position: absolute; - top: 50%; - padding: 2rem .5rem; - transform: translate(0, -50%); - font-size: 3em; - --icon-stroke-width: .75px; - - &::before { - content: ''; - display: block; - position: absolute; - z-index: -1; - top: 50%; - left: 50%; - width: 1.2em; - height: 1.2em; - transform: translate(-50%, -50%); - opacity: .25; - background-color: prop(--colors --button --bg); - } - } - - @include element('prev') { - left: 0; - } - - @include element('next') { - right: 0; - } - } -} diff --git a/assets/css/components/_note.scss b/assets/css/components/_note.scss deleted file mode 100644 index 1879ea9..0000000 --- a/assets/css/components/_note.scss +++ /dev/null @@ -1,23 +0,0 @@ -@include namespace('note') { - @include store(( - --colors: ( - --fg: prop(--colors --accent --strong, $global: true), - --bg: prop(--colors --accent --faint, $global: true), - ), - --dims: ( - --pad-x: 1em, - --pad-y: .7em - ) - )); - - @include component(namespace()) { - margin-top: $line-height * 1rem; - padding: prop(--dims --pad-y) prop(--dims --pad-x); - background-color: prop(--colors --bg); - color: prop(--colors --fg); - - :first-child { - margin-top: 0; - } - } -} diff --git a/assets/css/layouts/_card-list.scss b/assets/css/layouts/_card-list.scss index a53b771..96f9060 100644 --- a/assets/css/layouts/_card-list.scss +++ b/assets/css/layouts/_card-list.scss @@ -1,37 +1,38 @@ -@include namespace('card-list') { - @include store(( +@use 'iro-sass/src/index' as iro; +@use 'iro-design/src/functions' as fn; + +@include iro.props-namespace('card-list') { + @include iro.props-store(( --dims: ( - --col-width: 17em + --margin-top: fn.global-dim(--size --600), + --spacing: fn.global-dim(--size --200), + --col-width: 17em, ) - )); + ), 'dims'); - @include layout(namespace()) { - margin-top: $line-height * 2rem; + @include iro.bem-layout(iro.props-namespace()) { + margin-top: fn.dim(--margin-top); font-size: 1rem; - @include element('cards') { + @include iro.bem-elem('cards') { display: flex; flex-direction: column; gap: 2px; - margin-top: $line-height * .625rem; + margin-top: fn.dim(--spacing); - @include modifier('grid', 'gallery') { + @include iro.bem-modifier('grid', 'gallery') { display: grid; - grid-template-columns: repeat(auto-fill, minmax(#{prop(--dims --col-width)}, 1fr)); + grid-template-columns: repeat(auto-fill, minmax(fn.dim(--col-width), 1fr)); align-items: start; } - @include modifier('grid') { + @include iro.bem-modifier('grid') { gap: 6px; } - @include modifier('gallery') { + @include iro.bem-modifier('gallery') { gap: 20px; } - - @media print { - filter: none; - } } } } diff --git a/assets/css/layouts/_container.scss b/assets/css/layouts/_container.scss deleted file mode 100644 index ae23042..0000000 --- a/assets/css/layouts/_container.scss +++ /dev/null @@ -1,33 +0,0 @@ -@include namespace('container') { - @include store(( - --dims: ( - --pad-x: 2rem, - --pad-y: 4rem, - ) - )); - - @include store(( - --dims: ( - --pad-x: 1rem, - --pad-y: 3rem, - ) - ), 'sm'); - - @include layout(namespace()) { - @include modifier('content') { - max-width: $content--width; - margin-right: auto; - margin-left: auto; - } - - @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/_media.scss b/assets/css/layouts/_media.scss new file mode 100644 index 0000000..c4ad222 --- /dev/null +++ b/assets/css/layouts/_media.scss @@ -0,0 +1,26 @@ +@use 'iro-sass/src/index' as iro; +@use 'iro-design/src/functions' as fn; + +@include iro.props-namespace('media') { + @include iro.props-store(( + --dims: ( + --pad-x: fn.global-dim(--size --200), + --pad-y: fn.global-dim(--size --150), + + --75: ( + --pad-x: fn.global-dim(--size --150), + --pad-y: fn.global-dim(--size --85), + ), + + --200: ( + --pad-x: fn.global-dim(--size --450), + --pad-y: fn.global-dim(--size --225), + ), + + --300: ( + --pad-x: fn.global-dim(--size --450), + --pad-y: fn.global-dim(--size --225), + ) + ) + ), 'dims'); +} diff --git a/assets/css/objects/_badge.scss b/assets/css/objects/_badge.scss deleted file mode 100644 index 216bb89..0000000 --- a/assets/css/objects/_badge.scss +++ /dev/null @@ -1,25 +0,0 @@ -@include namespace('badge') { - @include store(( - --colors: ( - --fg: prop(--colors --bg-hi, $global: true), - --bg: prop(--colors --fg-lo, $global: true), - ), - --dims: ( - --pad-x: .6em, - --pad-y: .2em - ) - )); - - @include object(namespace()) { - display: inline-block; - padding: prop(--dims --pad-y) prop(--dims --pad-x); - background-color: prop(--colors --bg); - color: prop(--colors --fg); - font-size: iro-px-to-rem(14px); - - &::selection { - background-color: prop(--colors --select --inverted --bg, $global: true); - color: prop(--colors --select --inverted --fg, $global: true); - } - } -} diff --git a/assets/css/objects/_icon.scss b/assets/css/objects/_icon.scss deleted file mode 100644 index 15389f5..0000000 --- a/assets/css/objects/_icon.scss +++ /dev/null @@ -1,33 +0,0 @@ -@include namespace('icon') { - @keyframes fall { - to { - transform: translateY(105vh) rotate(90deg); - } - } - - @include object(namespace()) { - display: block; - width: 1em; - height: 1em; - stroke-width: var(--icon-stroke-width, 1.5px); - stroke-linecap: round; - stroke-linejoin: round; - - @include modifier('inline') { - display: inline-block; - vertical-align: -.1em; - } - - @include modifier('snow') { - position: fixed; - z-index: 1000; - top: -1.2em; - width: 1em; - height: 1em; - animation: fall linear forwards; - stroke-width: 2px; - color: #fff; - pointer-events: none; - } - } -} diff --git a/assets/css/scopes/_body.scss b/assets/css/scopes/_body.scss deleted file mode 100644 index 1fc8166..0000000 --- a/assets/css/scopes/_body.scss +++ /dev/null @@ -1,83 +0,0 @@ -@include namespace('body') { - @include store(( - --colors: ( - --code: ( - --fg: prop(--colors --accent --strong, $global: true), - --bg: prop(--colors --bg-hi, $global: true), - ), - --code-block: ( - --fg: prop(--colors --fg, $global: true), - --bg: prop(--colors --bg-lo, $global: true), - ), - --blockquote: ( - --border: prop(--colors --obj-hi, $global: true), - ) - ), - --dims: ( - --code: ( - --pad-x: .3em, - --pad-y: .1em - ), - --code-block: ( - --pad-x: 1em, - --pad-y: .7em - ) - ) - )); - - @include store(( - --colors: ( - --code: ( - --bg: prop(--colors --accent --faint, $global: true), - ), - --code-block: ( - --bg: prop(--colors --bg-hi, $global: true), - ), - ) - ), 'light'); - - @include scope(namespace()) { - @include element('meta') { - + h1 { - margin-top: $line-height * .5rem; - } - } - - img { - max-width: 100%; - } - - code { - padding: prop(--dims --code --pad-y) prop(--dims --code --pad-x); - border-radius: 3px; - background-color: prop(--colors --code --bg); - color: prop(--colors --code --fg); - } - - blockquote { - margin: ($line-height * 1rem) 0 0 1px; - padding-left: calc(#{prop(--dims --indent, $global: true)} - 3px); - border-left: 3px solid prop(--colors --blockquote --border); - } - - pre { - margin: ($line-height * 1rem) 0 0 0; - padding: prop(--dims --code-block --pad-y) prop(--dims --code-block --pad-x); - background-color: prop(--colors --code-block --bg); - color: prop(--colors --code-block --fg); - - code { - display: inline-block; - margin-right: prop(--dims --code-block --pad-x); - padding: 0; - border-radius: 0; - background-color: transparent; - color: currentColor; - } - - @media print { - border: 2px solid currentColor; - } - } - } -} diff --git a/assets/css/scopes/_colored-links.scss b/assets/css/scopes/_colored-links.scss deleted file mode 100644 index 9be0f93..0000000 --- a/assets/css/scopes/_colored-links.scss +++ /dev/null @@ -1,20 +0,0 @@ -@include namespace('colored-links') { - @include store(( - --colors: ( - --link: ( - --idle: prop(--colors --link --colored --idle, $global: true), - --visited: prop(--colors --link --colored --visited, $global: true), - ) - ) - )); - - @include scope(namespace()) { - :link { - color: prop(--colors --link --idle); - } - - :visited { - color: prop(--colors --link --visited); - } - } -} diff --git a/assets/css/scopes/_headlines.scss b/assets/css/scopes/_headlines.scss deleted file mode 100644 index bfd5caa..0000000 --- a/assets/css/scopes/_headlines.scss +++ /dev/null @@ -1,104 +0,0 @@ -@include namespace('headlines') { - @include store(( - --colors: ( - --link: ( - --idle-fg: prop(--colors --obj, $global: true), - --hover-fg: prop(--colors --fg-lo, $global: true), - ), - --emph: ( - --bg: prop(--colors --bg-hi, $global: true), - --body-bg: prop(--colors --bg-hi, $global: true), - ) - ) - )); - - @include store(( - --colors: ( - --emph: ( - --body-bg: prop(--colors --bg, $global: true), - ) - ) - ), 'light'); - - @include scope(namespace()) { - h1, - h2, - h3 { - font-family: $font-fam--large; - font-weight: 600; - letter-spacing: normal; - line-height: 1.4; - text-transform: none; - font-feature-settings: 'ss02' 1; - } - - h1, - h2, - h3, - h4 { - transform: translateX(-.06em); - } - - h1 { - @include iro-responsive-modular-scale(font-size, 3, $responsive-mod-scale); - } - - h2 { - @include iro-responsive-modular-scale(font-size, 2, $responsive-mod-scale); - } - - h3 { - @include iro-responsive-modular-scale(font-size, 1, $responsive-mod-scale); - } - - h5, - h6 { - color: currentColor; - font-weight: 400; - } - - @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('link') { - display: none; - margin: -.5rem 0; - padding: .5rem; - vertical-align: -.02em; - - svg { - width: px-to-em(12px); - height: px-to-em(12px); - } - - &:link, - &:visited { - color: prop(--colors --link --idle-fg); - - &:hover { - color: prop(--colors --link --hover-fg); - } - } - } - - h1, - h2, - h3, - h4, - h5, - h6 { - &:hover { - @include element('link') { - display: inline-block; - } - } - } - } -} diff --git a/assets/css/scopes/_intro.scss b/assets/css/scopes/_intro.scss deleted file mode 100644 index 6d4ac14..0000000 --- a/assets/css/scopes/_intro.scss +++ /dev/null @@ -1,8 +0,0 @@ -@include namespace('intro') { - @include scope(namespace()) { - h1 + p { - font-size: px-to-em(20px, 18px); - font-style: italic; - } - } -} diff --git a/assets/css/scopes/_invisible-links.scss b/assets/css/scopes/_invisible-links.scss deleted file mode 100644 index e4d149e..0000000 --- a/assets/css/scopes/_invisible-links.scss +++ /dev/null @@ -1,13 +0,0 @@ -@include namespace('invisible-links') { - @include scope(namespace()) { - :link, - :visited { - color: currentColor; - text-decoration: none; - - &:hover { - text-decoration: underline; - } - } - } -} diff --git a/assets/css/scopes/_small.scss b/assets/css/scopes/_small.scss index f7aa61c..a4cc596 100644 --- a/assets/css/scopes/_small.scss +++ b/assets/css/scopes/_small.scss @@ -1,16 +1,25 @@ -@include namespace('small') { - @include store(( +@use 'iro-sass/src/index' as iro; +@use 'iro-design/src/functions' as fn; + +@include iro.props-namespace('small') { + @include iro.props-store(( --colors: ( - --fg: prop(--colors --fg-hi, $global: true), + --fg: fn.global-color(--fg-hi), + ), + ), 'colors'); + + @include iro.props-store(( + --dims: ( + --margin-top: fn.global-dim(--size --75), ) - )); + ), 'dims'); - @include scope(namespace()) { - color: prop(--colors --fg); + @include iro.bem-scope(iro.props-namespace()) { + color: fn.color(--fg); line-height: 1.4; p { - margin-top: $line-height * .25rem; + margin-top: fn.dim(--margin-top); } } } diff --git a/assets/css/style.scss b/assets/css/style.scss index 0b8f75c..1184bb2 100644 --- a/assets/css/style.scss +++ b/assets/css/style.scss @@ -1,52 +1,25 @@ -@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'; +@use 'iro-design/src/declare-vars' as iro-vars; +@use 'declare-vars'; -@import 'vars'; -@import 'functions'; -@import 'fonts'; -@import 'basics'; +@use 'iro-design/src/base' as iro-base; +@use 'functions'; +@use 'fonts'; +@use 'base'; -@import 'layouts/container'; +@use 'iro-design/src/layouts'; +@use 'layouts/media'; +@use 'layouts/card-list'; -@import 'objects/icon'; -@import 'objects/badge'; +@use 'iro-design/src/objects'; -@import 'components/header'; -@import 'components/footer'; -@import 'components/card'; -@import 'components/note'; -@import 'components/lightbox'; -@import 'components/hnav'; +@use 'components/footer'; +@use 'components/header'; +@use 'components/hnav'; +@use 'components/card'; -@import 'layouts/card-list'; +@use 'iro-design/src/scopes'; +@use 'scopes/small'; -@import 'scopes/colored-links'; -@import 'scopes/invisible-links'; -@import 'scopes/headlines'; -@import 'scopes/small'; -@import 'scopes/body'; -@import 'scopes/intro'; +@use 'iro-design/src/utils'; -@import 'utils'; - -:root { - @include assign; - - @each $breakpoint in map-keys($breakpoints) { - @include media('<=#{$breakpoint}') { - @include assign($breakpoint); - } - } - - @media (prefers-color-scheme: light) { - @include assign('light'); - } - - @media print { - @include assign('light'); - @include assign('print'); - } -} +@use 'iro-design/src/apply-vars'; diff --git a/assets/fonts/GaretVariable.ttf b/assets/fonts/GaretVariable.ttf index 2f0a27d..6de6af5 100644 Binary files a/assets/fonts/GaretVariable.ttf and b/assets/fonts/GaretVariable.ttf differ diff --git a/content/lightbox.js b/content/lightbox.js deleted file mode 100644 index 4ec959d..0000000 --- a/content/lightbox.js +++ /dev/null @@ -1,81 +0,0 @@ -(() => { - let currentIndex = 0; - let visible = false; - - const mainEl = document.querySelector("main"); - const lightboxEl = document.querySelector(".c-lightbox"); - const lightboxBgEl = lightboxEl.querySelector(".c-lightbox__bg"); - const lightboxCountEl = lightboxEl.querySelector(".c-lightbox__count"); - const lightboxCloseEl = lightboxEl.querySelector(".c-lightbox__close"); - const lightboxPrevEl = lightboxEl.querySelector(".c-lightbox__prev"); - const lightboxNextEl = lightboxEl.querySelector(".c-lightbox__next"); - const lightboxImgEl = lightboxEl.querySelector(".c-lightbox__img"); - const figureEls = Array.from(mainEl.querySelectorAll("figure")).map(el => el.querySelector("a")); - - const show = () => { - visible = true; - lightboxEl.classList.add("is-shown"); - } - - const hide = () => { - visible = false; - lightboxEl.classList.remove("is-shown"); - } - - const setIndex = (i) => { - currentIndex = i; - lightboxImgEl.src = figureEls[i].href; - lightboxCountEl.textContent = (i + 1) + " / " + figureEls.length; - lightboxPrevEl.classList.toggle("u-dn", i === 0); - lightboxNextEl.classList.toggle("u-dn", i === figureEls.length - 1); - }; - - const prev = () => { - currentIndex === 0 ? void 0 : setIndex(currentIndex - 1); - }; - - const next = () => { - currentIndex === figureEls.length - 1 ? void 0 : setIndex(currentIndex + 1); - }; - - lightboxBgEl.addEventListener("click", hide); - lightboxCloseEl.addEventListener("click", hide); - lightboxPrevEl.addEventListener("click", prev); - lightboxNextEl.addEventListener("click", next); - - figureEls.forEach((figureEl, i) => { - figureEl.addEventListener("click", e => { - e.preventDefault(); - show(); - setIndex(i); - }) - }); - - window.addEventListener("keydown", e => { - if (e.defaultPrevented || !visible) { - return; - } - - switch (e.key) { - case "Left": - case "ArrowLeft": - prev(); - break; - - case "Right": - case "ArrowRight": - next(); - break; - - case "Esc": - case "Escape": - hide(); - break; - - default: - return; - } - - e.preventDefault(); - }, true); -})(); diff --git a/content/main.js b/content/main.js new file mode 100644 index 0000000..3257c39 --- /dev/null +++ b/content/main.js @@ -0,0 +1,120 @@ +(() => { + const enableFocusIndicator = e => { + if (e.key !== 'Tab') { + return; + } + + document.body.classList.add('t-keyboard'); + document.removeEventListener('keydown', enableFocusIndicator); + document.addEventListener('mousedown', disableFocusIndicator); + } + + const disableFocusIndicator = () => { + document.body.classList.remove('t-keyboard'); + + document.removeEventListener('mousedown', disableFocusIndicator); + document.addEventListener('keydown', enableFocusIndicator); + } + + document.addEventListener('keydown', enableFocusIndicator); +})(); + +(() => { + let currentIndex = 0; + let visible = false; + + const mainEl = document.querySelector("main"); + const lightboxContainerEl = document.querySelector(".js-lightbox"); + const lightboxEl = lightboxContainerEl.querySelector(".o-lightbox"); + const lightboxCloseEl = lightboxEl.querySelector(".o-lightbox__close-btn"); + const lightboxPrevEl = lightboxEl.querySelector(".o-lightbox__prev-btn"); + const lightboxNextEl = lightboxEl.querySelector(".o-lightbox__next-btn"); + const lightboxImgEl = lightboxEl.querySelector(".o-lightbox__img"); + const lightboxFooterEl = lightboxEl.querySelector(".o-lightbox__footer"); + const figureEls = Array.from(mainEl.querySelectorAll("figure")).map(el => el.querySelector("a")); + + const show = () => { + visible = true; + lightboxContainerEl.classList.remove("u-d-none"); + } + + const hide = () => { + visible = false; + lightboxContainerEl.classList.add("u-d-none"); + } + + const setIndex = (i) => { + thumbnailEls[currentIndex].classList.remove("is-selected"); + currentIndex = i; + lightboxImgEl.src = figureEls[i].href; + thumbnailEls[i].classList.add("is-selected"); + }; + + const prev = () => { + setIndex(currentIndex > 0 ? currentIndex - 1 : figureEls.length - 1); + }; + + const next = () => { + setIndex(currentIndex < figureEls.length - 1 ? currentIndex + 1 : 0); + }; + + lightboxCloseEl.addEventListener("click", hide); + lightboxPrevEl.addEventListener("click", prev); + lightboxNextEl.addEventListener("click", next); + + const thumbnailEls = figureEls.map((figureEl, i) => { + const go = e => { + e.preventDefault(); + show(); + setIndex(i); + }; + + figureEl.addEventListener("click", go); + + const thumbnailButtonEl = document.createElement("button"); + const thumbnailImgEl = document.createElement("img"); + + thumbnailImgEl.classList.add("o-lightbox__thumbnail-img"); + thumbnailImgEl.src = figureEl.href; + + thumbnailButtonEl.classList.add("o-lightbox__thumbnail"); + thumbnailButtonEl.appendChild(thumbnailImgEl); + thumbnailButtonEl.addEventListener("click", go); + + if (i === currentIndex) { + thumbnailButtonEl.classList.add("is-selected"); + } + + lightboxFooterEl.appendChild(thumbnailButtonEl); + + return thumbnailButtonEl; + }); + + window.addEventListener("keydown", e => { + if (e.defaultPrevented || !visible) { + return; + } + + switch (e.key) { + case "Left": + case "ArrowLeft": + prev(); + break; + + case "Right": + case "ArrowRight": + next(); + break; + + case "Esc": + case "Escape": + hide(); + break; + + default: + return; + } + + e.preventDefault(); + }, true); +})(); diff --git a/filters/headers.lua b/filters/headers.lua index 4e3a689..b7ab542 100644 --- a/filters/headers.lua +++ b/filters/headers.lua @@ -1,16 +1,9 @@ function Header(el) if el.level == 1 then local newchildren = pandoc.List() - newchildren:insert(pandoc.Span(el.content, { class = 's-headlines__title-inner' })) + newchildren:insert(pandoc.Span(el.content, { class = 's-headings__primary' })) el.content = newchildren end - if el.level <= 3 and el.identifier ~= '' then - el.content:insert(pandoc.Space()) - el.content:insert(pandoc.Link(pandoc.RawInline('html', - ''), - '#' .. el.identifier, nil, { class = 's-headlines__link' })) - end - return el end diff --git a/package.json b/package.json index e2f226b..376729e 100644 --- a/package.json +++ b/package.json @@ -1,20 +1,28 @@ { - "devDependencies": { - "postcss-scss": "^4.0.3", - "stylelint": "^14.7.0", - "stylelint-config-sass-guidelines": "^9.0.1" - }, "dependencies": { - "autoprefixer": "^10.4.4", + "autoprefixer": "^10.4.7", "include-media": "^1.4.9", - "iro-sass": "git+https://git.vulpes.one/git/iro-sass.git#e20e9a1a94090b263746acf475a1212522c6f9fa", - "postcss": "^8.4.12", + "iro-design": "git+https://git.vulpes.one/git/iro-design.git", + "iro-icons": "git+https://git.vulpes.one/git/iro-icons.git", + "iro-sass": "git+https://git.vulpes.one/git/iro-sass.git", + "postcss": "^8.4.14", "postcss-cli": "^9.1.0", "postcss-csso": "^6.0.0" }, + "devDependencies": { + "autoprefixer": "^10.4.4", + "postcss": "^8.4.12", + "postcss-cli": "^9.0.2", + "postcss-csso": "^6.0.0", + "postcss-scss": "^4.0.4", + "sass": "^1.50.0", + "stylelint": "^14.9.1", + "stylelint-config-sass-guidelines": "^9.0.1", + "svg-sprite": "^1.5.4" + }, "scripts": { - "lint": "stylelint \"assets/css/**/*.scss\"", - "fix": "stylelint \"assets/css/**/*.scss\" --fix" + "lint": "stylelint \"src/**/*.scss\"", + "fix": "stylelint \"src/**/*.scss\" --fix" }, "browserslist": [ "defaults" diff --git a/templates/base.html b/templates/base.html index 4d0be21..be796de 100644 --- a/templates/base.html +++ b/templates/base.html @@ -75,41 +75,39 @@ ${layouts/page()} -
-
- -
-
- - -
- + - + - + + +
+
- + diff --git a/templates/layouts/categorized_list.html b/templates/layouts/categorized_list.html index 5e92395..7f94ff4 100644 --- a/templates/layouts/categorized_list.html +++ b/templates/layouts/categorized_list.html @@ -1,6 +1,6 @@ -
-
-

$title$

+
+
+

$title$

$body$ @@ -8,9 +8,9 @@ $body$ $if(notoc)$$else$ $endif$ @@ -18,9 +18,18 @@ $body$
$for(list)$
- +
+
+ +
+ $if(it.omitted)$ + + $it.omitted$ more items → + + $endif$ +
$if(it.description)$
$it.description$
$endif$ @@ -32,18 +41,6 @@ $body$ $else$ $it.items:partials/list_card()$ $endif$ - $if(it.omitted)$ - -
-
- $it.omitted$ more items in $it.title$ -
- -
- - $endif$
$endfor$ diff --git a/templates/layouts/list.html b/templates/layouts/list.html index bc12805..88102b9 100644 --- a/templates/layouts/list.html +++ b/templates/layouts/list.html @@ -1,6 +1,6 @@ -
-
-

$title$

+
+
+

$title$

$body$
diff --git a/templates/layouts/page.html b/templates/layouts/page.html index ee7437d..324a01c 100644 --- a/templates/layouts/page.html +++ b/templates/layouts/page.html @@ -1,11 +1,11 @@ -
+
$if(date)$ -
+
$date.long$
$endif$ -

$title$

+

$title$

$body$
diff --git a/templates/layouts/redirect.html b/templates/layouts/redirect.html index 1cfc67c..9f78dec 100644 --- a/templates/layouts/redirect.html +++ b/templates/layouts/redirect.html @@ -1,4 +1,4 @@ -
-

$title$

+
+

$title$

This page should redirect you to $url.full$ in 3 seconds.

diff --git a/templates/partials/gallery_card.html b/templates/partials/gallery_card.html index aa641da..386843f 100644 --- a/templates/partials/gallery_card.html +++ b/templates/partials/gallery_card.html @@ -1,7 +1,7 @@ $if(it.url)$ $if(it.thumbnail)$ -
+
-
+
$if(it.indicator)$ -
+
$endif$ $if(it.icon)$ -
+
$if(it.subtitle)$ - $it.title$ - $it.subtitle$ + $it.title$ + $it.subtitle$ $elseif(it.category)$ - $it.category$ - $it.title$ + $it.category$ + $it.title$ $elseif(it.date)$ - $it.title$ + $it.title$ $else$ $it.title$ $endif$
$if(it.post_icon)$ -
+
$if(it.indicator)$ -
+
$endif$ $if(it.icon)$ -
+
$if(it.subtitle)$ - $it.title$ - $it.subtitle$ + $it.title$ + $it.subtitle$ $elseif(it.category)$ - $it.category$ - $it.title$ + $it.category$ + $it.title$ $elseif(it.date)$ - $it.title$ + $it.title$ $else$ $it.title$ $endif$
$if(it.post_icon)$ -
+
$if(it.indicator)$ -
+
$endif$ $if(it.icon)$ -
+
$it.title$
$if(it.subtitle)$ -
+
$it.subtitle$
$elseif(it.category)$ -
+
$it.category$
$elseif(it.date)$ -