From 575278aba99139635adc3b1f9385befe57102541 Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
Date: Sat, 11 Jun 2022 09:44:04 +0200
Subject: Re-implemented design via iro-design
---
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
25 files changed, 285 insertions(+), 1103 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
(limited to 'assets')
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
--
cgit v1.2.3-70-g09d2