summaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/_base.scss17
-rw-r--r--src/_config.scss6
-rw-r--r--src/_declare-vars.scss23
-rw-r--r--src/_functions.scss1
-rw-r--r--src/_scopes.scss2
-rw-r--r--src/layouts/_card.scss1
-rw-r--r--src/layouts/_container.scss1
-rw-r--r--src/objects/_alert.scss8
-rw-r--r--src/objects/_heading.scss37
-rw-r--r--src/scopes/_blockquote.scss25
-rw-r--r--src/scopes/_code.scss59
11 files changed, 149 insertions, 31 deletions
diff --git a/src/_base.scss b/src/_base.scss
index a0f785c..f861f5e 100644
--- a/src/_base.scss
+++ b/src/_base.scss
@@ -2,6 +2,7 @@
2@use 'iro-sass/src/index' as iro; 2@use 'iro-sass/src/index' as iro;
3@use 'functions' as fn; 3@use 'functions' as fn;
4@use 'mixins' as mx; 4@use 'mixins' as mx;
5@use 'config';
5 6
6html, 7html,
7body { 8body {
@@ -17,6 +18,12 @@ body {
17 color: fn.color(--fg); 18 color: fn.color(--fg);
18} 19}
19 20
21html,
22pre,
23code {
24 font-feature-settings: 'calt' 0, 'dlig' 1, 'ss09' 1;
25}
26
20pre, 27pre,
21code { 28code {
22 @include mx.set-font(--mono, (--size: fn.dim(--font-size --75))); 29 @include mx.set-font(--mono, (--size: fn.dim(--font-size --75)));
@@ -38,10 +45,12 @@ h3,
38h4, 45h4,
39h5, 46h5,
40h6 { 47h6 {
41 margin: 0; 48 margin: 0;
42 color: fn.color(--fg-lo); 49 color: fn.color(--fg-lo);
43 font-size: 1em; 50 font-size: fn.dim(--font-size --100);
44 font-weight: bold; 51 font-weight: bold;
52 letter-spacing: 1px;
53 text-transform: uppercase;
45} 54}
46 55
47p { 56p {
diff --git a/src/_config.scss b/src/_config.scss
index 68df69f..26a1ad4 100644
--- a/src/_config.scss
+++ b/src/_config.scss
@@ -4,8 +4,10 @@
4iro.$vars-root-size: 16px; 4iro.$vars-root-size: 16px;
5 5
6media.$breakpoints: ( 6media.$breakpoints: (
7 md: 40rem, 7 lg: 1340px,
8 sm: 28rem 8 md: 900px,
9 sm: 600px,
10 xs: 400px,
9); 11);
10 12
11media.$unit-intervals: ( 13media.$unit-intervals: (
diff --git a/src/_declare-vars.scss b/src/_declare-vars.scss
index 8ef68be..fcd281b 100644
--- a/src/_declare-vars.scss
+++ b/src/_declare-vars.scss
@@ -59,7 +59,7 @@
59 --line-height: 1.5, 59 --line-height: 1.5,
60 ), 60 ),
61 --headline: ( 61 --headline: (
62 --family: ('IBM Plex Sans', 'Open Sans', 'Segoe UI', 'Droid Sans', Roboto, Oxygen, 'Helvetica Neue', Helvetica, Tahoma, Arial, sans-serif), 62 --family: ('Garet', fn.dim(--font --standard --family, null)),
63 --line-height: 1.2, 63 --line-height: 1.2,
64 --weight: 700, 64 --weight: 700,
65 ), 65 ),
@@ -70,13 +70,20 @@
70 ), 70 ),
71 71
72 --font-size: ( 72 --font-size: (
73 --50: iro.fn-px-to-rem(11px), 73 --50: iro.fn-px-to-rem(11px),
74 --75: iro.fn-px-to-rem(13px), 74 --75: iro.fn-px-to-rem(13px),
75 --100: iro.fn-px-to-rem(14px), 75 --100: iro.fn-px-to-rem(14px),
76 --150: iro.fn-px-to-rem(16px), 76 --150: iro.fn-px-to-rem(16px),
77 --200: iro.fn-px-to-rem(18px), 77 --200: iro.fn-px-to-rem(18px),
78 --300: iro.fn-px-to-rem(22px), 78 --300: iro.fn-px-to-rem(20px),
79 --400: iro.fn-px-to-rem(28px), 79 --400: iro.fn-px-to-rem(24px),
80 --500: iro.fn-px-to-rem(28px),
81 --600: iro.fn-px-to-rem(32px),
82 --700: iro.fn-px-to-rem(36px),
83 --800: iro.fn-px-to-rem(40px),
84 --900: iro.fn-px-to-rem(45px),
85 --1000: iro.fn-px-to-rem(50px),
86 --1100: iro.fn-px-to-rem(60px),
80 ), 87 ),
81 88
82 --border: ( 89 --border: (
diff --git a/src/_functions.scss b/src/_functions.scss
index 7b43d95..4a91629 100644
--- a/src/_functions.scss
+++ b/src/_functions.scss
@@ -109,6 +109,7 @@
109 --bg: $base, 109 --bg: $base,
110 --obj: blend.scale($base, $lightness: $dir * -15%, $chroma: $dir * -7.5%), 110 --obj: blend.scale($base, $lightness: $dir * -15%, $chroma: $dir * -7.5%),
111 --obj-lo: blend.scale($base, $lightness: $dir * -30%, $chroma: $dir * -15%), 111 --obj-lo: blend.scale($base, $lightness: $dir * -30%, $chroma: $dir * -15%),
112 --faint: rgba($base, .1),
112 --semi: rgba($base, .4), 113 --semi: rgba($base, .4),
113 --selection: rgba($base, .99), 114 --selection: rgba($base, .99),
114 --fg: blend.contrast($base), 115 --fg: blend.contrast($base),
diff --git a/src/_scopes.scss b/src/_scopes.scss
index 772d4e8..92e6d14 100644
--- a/src/_scopes.scss
+++ b/src/_scopes.scss
@@ -1 +1,3 @@
1@use 'scopes/colored-links'; 1@use 'scopes/colored-links';
2@use 'scopes/code';
3@use 'scopes/blockquote';
diff --git a/src/layouts/_card.scss b/src/layouts/_card.scss
index 9e54d50..176df06 100644
--- a/src/layouts/_card.scss
+++ b/src/layouts/_card.scss
@@ -1,5 +1,4 @@
1@use 'iro-sass/src/index' as iro; 1@use 'iro-sass/src/index' as iro;
2@use 'include-media/dist/include-media' as media;
3@use '../functions' as fn; 2@use '../functions' as fn;
4 3
5@include iro.props-namespace('card') { 4@include iro.props-namespace('card') {
diff --git a/src/layouts/_container.scss b/src/layouts/_container.scss
index 521262d..3e3fcac 100644
--- a/src/layouts/_container.scss
+++ b/src/layouts/_container.scss
@@ -1,5 +1,4 @@
1@use 'iro-sass/src/index' as iro; 1@use 'iro-sass/src/index' as iro;
2@use 'include-media/dist/include-media' as media;
3@use '../functions' as fn; 2@use '../functions' as fn;
4 3
5@include iro.props-namespace('container') { 4@include iro.props-namespace('container') {
diff --git a/src/objects/_alert.scss b/src/objects/_alert.scss
index 3b4656e..59efc26 100644
--- a/src/objects/_alert.scss
+++ b/src/objects/_alert.scss
@@ -4,10 +4,10 @@
4@include iro.props-namespace('alert') { 4@include iro.props-namespace('alert') {
5 @include iro.props-store(( 5 @include iro.props-store((
6 --dims: ( 6 --dims: (
7 --border: 2px, 7 --border: 2px,
8 --pad-x: fn.global-dim(--size --250), 8 --pad-x: fn.global-dim(--size --250),
9 --pad-y: fn.global-dim(--size --250), 9 --pad-y: fn.global-dim(--size --200),
10 --rounding: 4px, 10 --rounding: 4px,
11 ), 11 ),
12 ), 'dims'); 12 ), 'dims');
13 13
diff --git a/src/objects/_heading.scss b/src/objects/_heading.scss
index 3c14c99..77e24b4 100644
--- a/src/objects/_heading.scss
+++ b/src/objects/_heading.scss
@@ -1,14 +1,14 @@
1@use 'iro-sass/src/index' as iro; 1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn; 2@use '../functions' as fn;
3@use '../mixins' as mx; 3@use '../mixins' as mx;
4@use '../config';
4 5
5@include iro.props-namespace('heading') { 6@include iro.props-namespace('heading') {
6 @include iro.props-store(( 7 @include iro.props-store((
7 --dims: ( 8 --dims: (
8 --in-page-margin: ( 9 --spacing: (
9 --top: fn.global-dim(--size --500), 10 --top: fn.global-dim(--size --500),
10 --top-sibling: fn.global-dim(--size --325), 11 --top-sibling: fn.global-dim(--size --325),
11 --bottom: fn.global-dim(--size --150),
12 ), 12 ),
13 ), 13 ),
14 ), 'dims'); 14 ), 'dims');
@@ -17,48 +17,53 @@
17 --colors: ( 17 --colors: (
18 --light: fn.global-color(--fg-hi), 18 --light: fn.global-color(--fg-hi),
19 --strong: fn.global-color(--fg-lo), 19 --strong: fn.global-color(--fg-lo),
20 --bg: fn.global-color(--bg-hi),
20 ), 21 ),
21 ), 'colors'); 22 ), 'colors');
22 23
23 @include iro.bem-object(iro.props-namespace()) { 24 @include iro.bem-object(iro.props-namespace()) {
24 @include mx.set-font(--headline); 25 @include mx.set-font(--headline);
25 26
26 display: block; 27 display: block;
28 letter-spacing: normal;
29 text-transform: none;
27 30
28 @include iro.bem-at-theme('typography') { 31 @include iro.bem-at-theme('typography') {
29 margin-top: fn.dim(--in-page-margin --top); 32 margin-top: fn.dim(--spacing --top);
30 margin-bottom: 0; 33 margin-bottom: 0;
31 34
32 & + & { 35 & + & {
33 margin-top: fn.dim(--in-page-margin --top-sibling); 36 margin-top: fn.dim(--spacing --top-sibling);
34 } 37 }
35 } 38 }
36 39
37 @include iro.bem-modifier('xxl') { 40 @include iro.bem-modifier('xxl') {
38 color: fn.color(--strong); 41 color: fn.color(--strong);
39 font-size: fn.global-dim(--font-size --400); 42 font-size: fn.global-dim(--font-size --1000);
40 } 43 }
41 44
42 @include iro.bem-modifier('xl') { 45 @include iro.bem-modifier('xl') {
43 color: fn.color(--strong); 46 color: fn.color(--strong);
44 font-size: fn.global-dim(--font-size --300); 47 font-size: fn.global-dim(--font-size --700);
45 } 48 }
46 49
47 @include iro.bem-modifier('lg') { 50 @include iro.bem-modifier('lg') {
48 color: fn.color(--strong); 51 color: fn.color(--strong);
49 font-size: fn.global-dim(--font-size --200); 52 font-size: fn.global-dim(--font-size --400);
50 } 53 }
51 54
52 @include iro.bem-modifier('md') { 55 @include iro.bem-modifier('md') {
53 color: fn.color(--strong); 56 color: fn.color(--strong);
54 font-size: fn.global-dim(--font-size --150); 57 font-size: fn.global-dim(--font-size --200);
55 } 58 }
56 59
57 @include iro.bem-modifier('sm') { 60 @include iro.bem-modifier('sm') {
58 @include mx.set-font(--standard, ( 61 @include mx.set-font(--standard, (
59 --line-height: null, 62 --line-height: null,
60 --size: fn.global-dim(--font-size --100), 63 --size: fn.global-dim(--font-size --100),
61 --weight: 700 64 --weight: bold,
65 --transform: uppercase,
66 --spacing: 1px
62 )); 67 ));
63 68
64 color: fn.color(--strong); 69 color: fn.color(--strong);
@@ -70,10 +75,20 @@
70 --size: fn.global-dim(--font-size --50), 75 --size: fn.global-dim(--font-size --50),
71 --weight: 500, 76 --weight: 500,
72 --transform: uppercase, 77 --transform: uppercase,
73 --spacing: .5px 78 --spacing: 1px
74 )); 79 ));
75 80
76 color: fn.color(--light); 81 color: fn.color(--light);
77 } 82 }
83
84 @include iro.bem-elem('inner') {
85 background-image: linear-gradient(
86 to top,
87 transparent .15em,
88 fn.color(--bg) .15em,
89 fn.color(--bg) .6em,
90 transparent .6em
91 );
92 }
78 } 93 }
79} 94}
diff --git a/src/scopes/_blockquote.scss b/src/scopes/_blockquote.scss
new file mode 100644
index 0000000..e997b9b
--- /dev/null
+++ b/src/scopes/_blockquote.scss
@@ -0,0 +1,25 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3
4@include iro.props-namespace('blockquote') {
5 @include iro.props-store((
6 --dims: (
7 --pad-x: fn.global-dim(--size --250),
8 --margin-top: fn.global-dim(--paragraph --margin-top),
9 )
10 ), 'dims');
11
12 @include iro.props-store((
13 --colors: (
14 --border: fn.global-color(--obj-hi),
15 )
16 ), 'colors');
17
18 @include iro.bem-scope(iro.props-namespace()) {
19 blockquote {
20 margin: fn.dim(--margin-top) 0 0 1px;
21 padding-left: calc(fn.dim(--pad-x) - 3px);
22 border-left: 3px solid fn.color(--border);
23 }
24 }
25}
diff --git a/src/scopes/_code.scss b/src/scopes/_code.scss
new file mode 100644
index 0000000..d4b70ee
--- /dev/null
+++ b/src/scopes/_code.scss
@@ -0,0 +1,59 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3
4@include iro.props-namespace('body') {
5 @include iro.props-store((
6 --dims: (
7 --inline: (
8 --pad-x: fn.global-dim(--size --50),
9 --pad-y: fn.global-dim(--size --10),
10 --rounding: 3px,
11 ),
12 --block: (
13 --pad-x: fn.global-dim(--size --150),
14 --pad-y: fn.global-dim(--size --85),
15 --margin-top: fn.global-dim(--paragraph --margin-top),
16 --rounding: 3px,
17 )
18 )
19 ), 'dims');
20
21 @include iro.props-store((
22 --colors: (
23 --inline: (
24 --fg: fn.global-color(--accent --primary --obj-lo),
25 --bg: fn.global-color(--accent --primary --faint),
26 ),
27 --block: (
28 --fg: fn.global-color(--fg),
29 --bg: fn.global-color(--bg-hi),
30 )
31 )
32 ), 'colors');
33
34 @include iro.bem-scope(iro.props-namespace()) {
35 code {
36 padding: fn.dim(--inline --pad-y) fn.dim(--inline --pad-x);
37 border-radius: fn.dim(--inline --rounding);
38 background-color: fn.color(--inline --bg);
39 color: fn.color(--inline --fg);
40 }
41
42 pre {
43 margin: fn.dim(--block --margin-top) 0 0 0;
44 padding: fn.dim(--block --pad-y) fn.dim(--block --pad-x);
45 border-radius: fn.dim(--block --rounding);
46 background-color: fn.color(--block --bg);
47 color: fn.color(--block --fg);
48
49 code {
50 display: inline-block;
51 margin-right: fn.dim(--block --pad-x);
52 padding: 0;
53 border-radius: 0;
54 background-color: transparent;
55 color: currentColor;
56 }
57 }
58 }
59}
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-11-22 08:42:55 +0000