From 93493c0714145dc8bb7d812700a0f4f3f577dd7f Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
Date: Tue, 27 Apr 2021 21:40:34 +0200
Subject: Update
---
assets/css/_basics.scss | 28 +++++++++-----------------
assets/css/_vars.scss | 37 +++++++++++++++++++++-------------
assets/css/scopes/_body.scss | 48 +++++++++++++++++++++++++++++++++++---------
3 files changed, 71 insertions(+), 42 deletions(-)
(limited to 'assets/css')
diff --git a/assets/css/_basics.scss b/assets/css/_basics.scss
index 0d6a2a7..2a271ff 100644
--- a/assets/css/_basics.scss
+++ b/assets/css/_basics.scss
@@ -8,7 +8,7 @@ img::selection {
}
:focus {
- outline: 2px solid prop(--colors --fg-lo);
+ outline: 3px solid prop(--colors --focus-ring);
outline-offset: 3px;
}
@@ -49,7 +49,7 @@ code {
}
pre {
- margin: ($line-height * 1em) 0 0;
+ margin: ($line-height * 1rem) 0 0;
overflow-x: auto;
code {
@@ -69,7 +69,7 @@ small {
ul,
ol {
- margin: ($line-height * 1em) 0 0;
+ margin: ($line-height * 1rem) 0 0;
padding: 0;
list-style: none;
}
@@ -109,7 +109,7 @@ ul ul {
}
dl {
- margin: ($line-height * 1em) 0 0;
+ margin: ($line-height * 1rem) 0 0;
padding: 0;
}
@@ -139,27 +139,19 @@ h3,
h4,
h5,
h6 {
- margin: ($line-height * 2em) 0 0;
+ margin: ($line-height * 2rem) 0 0;
+ color: var(--heading--fg);
font-family: $font-fam--large;
font-size: 1em;
font-weight: 600;
line-height: 1.2;
font-feature-settings: 'ss02' 1;
- + & {
- margin-top: $line-height * 1em;
+ & + & {
+ margin-top: $line-height * 1rem;
}
}
-h1,
-h2 {
- color: var(--heading--fg);
-}
-
-h1 {
- text-transform: uppercase;
-}
-
p {
margin: ($line-height * 1rem) 0 0;
}
@@ -171,14 +163,14 @@ p {
hr {
height: 1px;
- margin: ($line-height * 1em) 0;
+ margin: ($line-height * 1rem) 0;
border: 0;
background-color: prop(--colors --obj-hi);
}
blockquote,
pre {
- margin: ($line-height * 1em) 0 0 1px;
+ margin: ($line-height * 1rem) 0 0 1px;
padding-left: calc(#{prop(--dims --indent)} - 3px);
border-left: 2px solid prop(--colors --obj);
}
diff --git a/assets/css/_vars.scss b/assets/css/_vars.scss
index 2fd7b53..37262a6 100644
--- a/assets/css/_vars.scss
+++ b/assets/css/_vars.scss
@@ -12,6 +12,11 @@ $unit-intervals: (
'': 0
);
+$responsive-mod-scale: (
+ xs: (1rem, 1.2),
+ sm: (.5rem, 1.6)
+);
+
$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;
@@ -19,13 +24,13 @@ $font-size: 16px;
$line-height: 1.7;
$content--width: 42rem;
-$gray0: hsl(220, 7%, 6%);
-$gray1: hsl(220, 7%, 9%);
-$gray2: hsl(220, 7%, 15%);
-$gray3: hsl(220, 7%, 20%);
-$gray4: hsl(220, 7%, 33%);
-$gray5: hsl(220, 7%, 54%);
-$gray6: hsl(220, 7%, 73%);
+$gray0: hsl(220, 7%, 7%);
+$gray1: hsl(220, 7%, 11%);
+$gray2: hsl(220, 7%, 18%);
+$gray3: hsl(220, 7%, 23%);
+$gray4: hsl(220, 7%, 38%);
+$gray5: hsl(220, 7%, 58%);
+$gray6: hsl(220, 7%, 76%);
$gray7: hsl(220, 7%, 100%);
@include store((
@@ -34,16 +39,16 @@ $gray7: hsl(220, 7%, 100%);
--indent: 2rem,
),
--colors: (
- --bg-hi: $gray0, // Darker background
- --bg: $gray1, // Background
- --bg-lo: $gray2, // Lighter background
+ --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
+ --fg-hi: $gray5, // Faint text
+ --fg: $gray6, // Text
+ --fg-lo: $gray7, // Strong text
--accent: (
--h: 354,
@@ -52,6 +57,8 @@ $gray7: hsl(220, 7%, 100%);
--color: hsl(var(--colors--accent--h), var(--colors--accent--s), var(--colors--accent--l)),
),
+ --focus-ring: var(--colors--accent--color),
+
--select: (
--bg: hsla(var(--colors--accent--h), var(--colors--accent--s), var(--colors--accent--l), .996),
--img-bg: hsla(var(--colors--accent--h), var(--colors--accent--s), var(--colors--accent--l), .5),
@@ -59,7 +66,9 @@ $gray7: hsl(220, 7%, 100%);
),
--link: (
- --idle: var(--colors--fg-lo)
+ --idle: var(--colors--fg-lo),
+ --idle-body: hsl(210, 90%, 72%), // hsl(354, 100%, 66%),
+ --visited-body: hsl(270, 60%, 72%), // hsl(354, 50%, 66%),
)
)
));
diff --git a/assets/css/scopes/_body.scss b/assets/css/scopes/_body.scss
index 5f41f29..f725b0a 100644
--- a/assets/css/scopes/_body.scss
+++ b/assets/css/scopes/_body.scss
@@ -13,21 +13,49 @@
margin-top: 0;
}
+ :link {
+ color: prop(--colors --link --idle-body, $global: true);
+ }
+
+ :visited {
+ color: prop(--colors --link --visited-body, $global: true);
+ }
+
+ h1,
+ h2,
+ h3,
+ h4 {
+ transform: translateX(-.06em);
+ font-family: $font-fam--large;
+ font-weight: 600;
+ }
+
h1 {
- transform: translateX(-.06em);
- font-family: $font-fam--large;
- font-weight: 600;
- text-transform: none;
+ @include iro-responsive-modular-scale(font-size, 4, $responsive-mod-scale);
}
- img {
- max-width: 100%;
+ h2 {
+ @include iro-responsive-modular-scale(font-size, 3, $responsive-mod-scale);
}
- @include iro-responsive-env(('xs', 'md')) {
- h1 {
- font-size: iro-responsive-set((1.8rem, 3rem));
- }
+ h3 {
+ @include iro-responsive-modular-scale(font-size, 2, $responsive-mod-scale);
+
+ letter-spacing: .1em;
+ text-transform: uppercase;
+ }
+
+ h4,
+ h5,
+ h6 {
+ @include iro-responsive-modular-scale(font-size, 1, $responsive-mod-scale);
+
+ letter-spacing: .1em;
+ text-transform: uppercase;
+ }
+
+ img {
+ max-width: 100%;
}
}
}
--
cgit v1.2.3-70-g09d2