From e99681e1abb802e486a7042434ec2697585a9d0e Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
Date: Thu, 6 May 2021 21:53:04 +0200
Subject: Update
---
assets/css/scopes/_body.scss | 74 +++--------------------------------
assets/css/scopes/_colored-links.scss | 20 ++++++++++
assets/css/scopes/_headlines.scss | 58 +++++++++++++++++++++++++++
3 files changed, 84 insertions(+), 68 deletions(-)
create mode 100644 assets/css/scopes/_colored-links.scss
create mode 100644 assets/css/scopes/_headlines.scss
(limited to 'assets/css/scopes')
diff --git a/assets/css/scopes/_body.scss b/assets/css/scopes/_body.scss
index b4d0a3c..8e5f876 100644
--- a/assets/css/scopes/_body.scss
+++ b/assets/css/scopes/_body.scss
@@ -1,10 +1,6 @@
@include namespace('body') {
@include store((
--colors: (
- --emph: (
- --fg: prop(--colors --accent --color, $global: true),
- --bg: prop(--colors --bg-hi, $global: true),
- ),
--meta: (
--fg: prop(--colors --fg-hi, $global: true),
)
@@ -12,73 +8,15 @@
));
@include scope(namespace()) {
- font-size: 1 / 16 * 18em;
-
- > :first-child {
- 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);
- }
-
- 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);
-
- letter-spacing: .05em;
- text-transform: uppercase;
- }
-
- h4,
- h5,
- h6 {
- @include iro-responsive-modular-scale(font-size, 0, $responsive-mod-scale);
-
- letter-spacing: .1em;
- text-transform: uppercase;
- }
-
- 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
- );
- }
+ font-size: 1 / 16 * 19em;
@include element('meta') {
- color: prop(--colors --meta --fg);
- font-size: 1 / 18 * 16em;
+ margin-top: $line-height * 1rem;
+ color: prop(--colors --meta --fg);
+ font-size: 1 / 16 * 15rem;
- + h1 {
- margin-top: $line-height * 1rem;
+ + * {
+ margin-top: $line-height * 1.5rem;
}
}
diff --git a/assets/css/scopes/_colored-links.scss b/assets/css/scopes/_colored-links.scss
new file mode 100644
index 0000000..25ed289
--- /dev/null
+++ b/assets/css/scopes/_colored-links.scss
@@ -0,0 +1,20 @@
+@include namespace('colored-links') {
+ @include store((
+ --colors: (
+ --link: (
+ --idle: hsl(210, 90%, 72%), // hsl(354, 100%, 66%),
+ --visited: hsl(270, 60%, 75%), // hsl(354, 50%, 66%),
+ )
+ )
+ ));
+
+ @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
new file mode 100644
index 0000000..6b28e9c
--- /dev/null
+++ b/assets/css/scopes/_headlines.scss
@@ -0,0 +1,58 @@
+@include namespace('headlines') {
+ @include store((
+ --colors: (
+ --emph: (
+ --bg: prop(--colors --bg-hi, $global: true),
+ )
+ )
+ ));
+
+ @include scope(namespace()) {
+ 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);
+
+ letter-spacing: .05em;
+ text-transform: uppercase;
+ }
+
+ h4,
+ h5,
+ h6 {
+ @include iro-responsive-modular-scale(font-size, 0, $responsive-mod-scale);
+
+ letter-spacing: .1em;
+ text-transform: uppercase;
+ }
+
+ 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
+ );
+ }
+ }
+}
--
cgit v1.2.3-70-g09d2