summaryrefslogtreecommitdiffstats
path: root/assets
diff options
context:
space:
mode:
Diffstat (limited to 'assets')
-rw-r--r--assets/css/components/_subheader.scss39
-rw-r--r--assets/css/objects/_emoji.scss (renamed from assets/css/objects/emoji.scss)0
-rw-r--r--assets/css/scopes/_links.scss46
-rw-r--r--assets/css/style.scss2
4 files changed, 87 insertions, 0 deletions
diff --git a/assets/css/components/_subheader.scss b/assets/css/components/_subheader.scss
new file mode 100644
index 0000000..df8eb50
--- /dev/null
+++ b/assets/css/components/_subheader.scss
@@ -0,0 +1,39 @@
1@use 'iro-sass/src/index' as iro;
2@use 'iro-design/src/functions' as fn;
3@use 'iro-design/src/mixins' as mx;
4
5@include iro.props-namespace('subheader') {
6 @include iro.props-store((
7 --colors: (
8 --fg: fn.global-color(--fg),
9 --strong: fn.global-color(--fg-lo),
10 ),
11 ), 'colors');
12
13 @include iro.bem-component(iro.props-namespace()) {
14 @include mx.set-font(--headline, (
15 --line-height: null,
16 --size: fn.global-dim(--font-size --400),
17 --weight: normal
18 ));
19
20 color: fn.color(--fg);
21
22 > * {
23 display: inline;
24 margin: 0;
25 }
26
27 strong {
28 color: fn.color(--strong);
29 font-weight: 500;
30 }
31
32 @include iro.bem-elem('title') {
33 font-size: inherit;
34 font-weight: 800;
35 letter-spacing: 1px;
36 text-transform: uppercase;
37 }
38 }
39}
diff --git a/assets/css/objects/emoji.scss b/assets/css/objects/_emoji.scss
index 8387e1d..8387e1d 100644
--- a/assets/css/objects/emoji.scss
+++ b/assets/css/objects/_emoji.scss
diff --git a/assets/css/scopes/_links.scss b/assets/css/scopes/_links.scss
new file mode 100644
index 0000000..a08ccd8
--- /dev/null
+++ b/assets/css/scopes/_links.scss
@@ -0,0 +1,46 @@
1@use 'iro-sass/src/index' as iro;
2@use 'iro-design/src/functions' as fn;
3
4@include iro.props-namespace('links') {
5 @include iro.props-store((
6 --colors: (
7 --idle: fn.global-color(--accent --link-idle --obj-lo),
8 --visited: fn.global-color(--accent --link-visited --obj-lo),
9 --key-focus: (
10 --border: fn.global-color(--focus --fill),
11 --shadow: 0 0 0 calc(fn.global-dim(--focus --outline-width) + 2px) fn.global-color(--accent --primary --semi),
12 ),
13 )
14 ), 'colors');
15
16 @include iro.bem-scope(iro.props-namespace()) {
17 :link {
18 text-decoration: underline;
19 }
20
21 :visited {
22 text-decoration: underline;
23 }
24
25 :link,
26 :visited {
27 border-radius: .5px;
28
29 @include iro.bem-at-theme('keyboard') {
30 &:focus {
31 box-shadow: 0 0 0 2px fn.color(--key-focus --border), fn.color(--key-focus --shadow);
32 }
33 }
34 }
35
36 @include iro.bem-modifier('colored') {
37 :link {
38 color: fn.color(--idle);
39 }
40
41 :visited {
42 color: fn.color(--visited);
43 }
44 }
45 }
46}
diff --git a/assets/css/style.scss b/assets/css/style.scss
index 20bcc27..1225b2e 100644
--- a/assets/css/style.scss
+++ b/assets/css/style.scss
@@ -22,6 +22,7 @@
22@use 'components/main'; 22@use 'components/main';
23@use 'components/footer'; 23@use 'components/footer';
24@use 'components/header'; 24@use 'components/header';
25@use 'components/subheader';
25@use 'components/hnav'; 26@use 'components/hnav';
26@use 'components/card'; 27@use 'components/card';
27@use 'components/figure'; 28@use 'components/figure';
@@ -36,6 +37,7 @@
36@use 'iro-design/src/scopes/tables' as iro-tables; 37@use 'iro-design/src/scopes/tables' as iro-tables;
37@use 'scopes/small'; 38@use 'scopes/small';
38@use 'scopes/alerts'; 39@use 'scopes/alerts';
40@use 'scopes/links';
39 41
40@use 'iro-design/src/utils'; 42@use 'iro-design/src/utils';
41 43