summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2022-06-10 22:04:37 +0200
committerVolpeon <git@volpeon.ink>2022-06-10 22:04:37 +0200
commita6d3fbcfe90103ac3000d98cc97879d1c5c00915 (patch)
treeb74b04b021a8ab948c95792ef6bca653aea77be2
parentUpdate (diff)
downloadiro-design-a6d3fbcfe90103ac3000d98cc97879d1c5c00915.tar.gz
iro-design-a6d3fbcfe90103ac3000d98cc97879d1c5c00915.tar.bz2
iro-design-a6d3fbcfe90103ac3000d98cc97879d1c5c00915.zip
Updated headings
-rw-r--r--src/_base.scss6
-rw-r--r--src/_declare-vars.scss7
-rw-r--r--src/_scopes.scss4
-rw-r--r--src/objects/_heading.scss21
-rw-r--r--src/scopes/_blockquotes.scss (renamed from src/scopes/_blockquote.scss)2
-rw-r--r--src/scopes/_headings.scss75
-rw-r--r--src/scopes/_invisible-links.scss15
-rw-r--r--tpl/index.pug2
-rw-r--r--tpl/objects/heading.pug6
-rw-r--r--tpl/views/blockquote.pug4
-rw-r--r--tpl/views/code.pug2
-rw-r--r--tpl/views/heading.pug12
12 files changed, 126 insertions, 30 deletions
diff --git a/src/_base.scss b/src/_base.scss
index 365a46e..8cba1fb 100644
--- a/src/_base.scss
+++ b/src/_base.scss
@@ -45,12 +45,16 @@ h3,
45h4, 45h4,
46h5, 46h5,
47h6 { 47h6 {
48 margin: 0; 48 margin: fn.dim(--heading --margin-top) 0 0;
49 color: fn.color(--fg-lo); 49 color: fn.color(--fg-lo);
50 font-size: fn.dim(--font-size --100); 50 font-size: fn.dim(--font-size --100);
51 font-weight: bold; 51 font-weight: bold;
52 letter-spacing: 1px; 52 letter-spacing: 1px;
53 text-transform: uppercase; 53 text-transform: uppercase;
54
55 & + & {
56 margin-top: fn.dim(--heading --margin-top-sibling);
57 }
54} 58}
55 59
56p { 60p {
diff --git a/src/_declare-vars.scss b/src/_declare-vars.scss
index fcd281b..b60374d 100644
--- a/src/_declare-vars.scss
+++ b/src/_declare-vars.scss
@@ -95,7 +95,12 @@
95 --focus-outline-width: 3px, 95 --focus-outline-width: 3px,
96 96
97 --paragraph: ( 97 --paragraph: (
98 --margin-top: fn.dim(--size --150, null), 98 --margin-top: fn.dim(--size --300, null),
99 ),
100
101 --heading: (
102 --margin-top: fn.dim(--size --500, null),
103 --margin-top-sibling: fn.dim(--size --325, null),
99 ), 104 ),
100 105
101 --list: ( 106 --list: (
diff --git a/src/_scopes.scss b/src/_scopes.scss
index 92e6d14..28c5399 100644
--- a/src/_scopes.scss
+++ b/src/_scopes.scss
@@ -1,3 +1,5 @@
1@use 'scopes/colored-links'; 1@use 'scopes/colored-links';
2@use 'scopes/invisible-links';
2@use 'scopes/code'; 3@use 'scopes/code';
3@use 'scopes/blockquote'; 4@use 'scopes/blockquotes';
5@use 'scopes/headings';
diff --git a/src/objects/_heading.scss b/src/objects/_heading.scss
index 77e24b4..a9e0e71 100644
--- a/src/objects/_heading.scss
+++ b/src/objects/_heading.scss
@@ -5,15 +5,6 @@
5 5
6@include iro.props-namespace('heading') { 6@include iro.props-namespace('heading') {
7 @include iro.props-store(( 7 @include iro.props-store((
8 --dims: (
9 --spacing: (
10 --top: fn.global-dim(--size --500),
11 --top-sibling: fn.global-dim(--size --325),
12 ),
13 ),
14 ), 'dims');
15
16 @include iro.props-store((
17 --colors: ( 8 --colors: (
18 --light: fn.global-color(--fg-hi), 9 --light: fn.global-color(--fg-hi),
19 --strong: fn.global-color(--fg-lo), 10 --strong: fn.global-color(--fg-lo),
@@ -25,16 +16,12 @@
25 @include mx.set-font(--headline); 16 @include mx.set-font(--headline);
26 17
27 display: block; 18 display: block;
19 margin-top: fn.global-dim(--heading --margin-top);
28 letter-spacing: normal; 20 letter-spacing: normal;
29 text-transform: none; 21 text-transform: none;
30 22
31 @include iro.bem-at-theme('typography') { 23 & + & {
32 margin-top: fn.dim(--spacing --top); 24 margin-top: fn.global-dim(--heading --margin-top-sibling);
33 margin-bottom: 0;
34
35 & + & {
36 margin-top: fn.dim(--spacing --top-sibling);
37 }
38 } 25 }
39 26
40 @include iro.bem-modifier('xxl') { 27 @include iro.bem-modifier('xxl') {
@@ -81,7 +68,7 @@
81 color: fn.color(--light); 68 color: fn.color(--light);
82 } 69 }
83 70
84 @include iro.bem-elem('inner') { 71 @include iro.bem-elem('primary') {
85 background-image: linear-gradient( 72 background-image: linear-gradient(
86 to top, 73 to top,
87 transparent .15em, 74 transparent .15em,
diff --git a/src/scopes/_blockquote.scss b/src/scopes/_blockquotes.scss
index e997b9b..8f25df9 100644
--- a/src/scopes/_blockquote.scss
+++ b/src/scopes/_blockquotes.scss
@@ -1,7 +1,7 @@
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 3
4@include iro.props-namespace('blockquote') { 4@include iro.props-namespace('blockquotes') {
5 @include iro.props-store(( 5 @include iro.props-store((
6 --dims: ( 6 --dims: (
7 --pad-x: fn.global-dim(--size --250), 7 --pad-x: fn.global-dim(--size --250),
diff --git a/src/scopes/_headings.scss b/src/scopes/_headings.scss
new file mode 100644
index 0000000..b1ef537
--- /dev/null
+++ b/src/scopes/_headings.scss
@@ -0,0 +1,75 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3@use '../mixins' as mx;
4
5@include iro.props-namespace('headings') {
6 @include iro.bem-scope(iro.props-namespace()) {
7 h1,
8 h2,
9 h3,
10 h4,
11 h5,
12 h6 {
13 @include mx.set-font(--headline);
14
15 display: block;
16 letter-spacing: normal;
17 text-transform: none;
18 }
19
20
21 h1 {
22 color: fn.foreign-color(--heading, --strong);
23 font-size: fn.global-dim(--font-size --1000);
24 }
25
26 h2 {
27 color: fn.foreign-color(--heading, --strong);
28 font-size: fn.global-dim(--font-size --700);
29 }
30
31 h3 {
32 color: fn.foreign-color(--heading, --strong);
33 font-size: fn.global-dim(--font-size --400);
34 }
35
36 h4 {
37 color: fn.foreign-color(--heading, --strong);
38 font-size: fn.global-dim(--font-size --200);
39 }
40
41 h5 {
42 @include mx.set-font(--standard, (
43 --line-height: null,
44 --size: fn.global-dim(--font-size --100),
45 --weight: bold,
46 --transform: uppercase,
47 --spacing: 1px
48 ));
49
50 color: fn.foreign-color(--heading, --strong);
51 }
52
53 h6 {
54 @include mx.set-font(--standard, (
55 --line-height: null,
56 --size: fn.global-dim(--font-size --50),
57 --weight: 500,
58 --transform: uppercase,
59 --spacing: 1px
60 ));
61
62 color: fn.foreign-color(--heading, --light);
63 }
64
65 @include iro.bem-elem('primary') {
66 background-image: linear-gradient(
67 to top,
68 transparent .15em,
69 fn.foreign-color(--heading, --bg) .15em,
70 fn.foreign-color(--heading, --bg) .6em,
71 transparent .6em
72 );
73 }
74 }
75}
diff --git a/src/scopes/_invisible-links.scss b/src/scopes/_invisible-links.scss
new file mode 100644
index 0000000..71dd9da
--- /dev/null
+++ b/src/scopes/_invisible-links.scss
@@ -0,0 +1,15 @@
1@use 'iro-sass/src/index' as iro;
2
3@include iro.props-namespace('invisible-links') {
4 @include iro.bem-scope(iro.props-namespace()) {
5 :link,
6 :visited {
7 color: currentColor;
8 text-decoration: none;
9
10 &:hover {
11 text-decoration: underline;
12 }
13 }
14 }
15}
diff --git a/tpl/index.pug b/tpl/index.pug
index 7c3696e..7bb59a0 100644
--- a/tpl/index.pug
+++ b/tpl/index.pug
@@ -36,7 +36,7 @@ mixin view(id, title)
36 views.push({ id, title }); 36 views.push({ id, title });
37 37
38 +container(narrow=true class='u-p-700 c-view' id=id) 38 +container(narrow=true class='u-p-700 c-view' id=id)
39 +h1-heading('xl')= title 39 +h1-heading('xl')(class='u-mt-0')= title
40 +divider('medium') 40 +divider('medium')
41 block 41 block
42 42
diff --git a/tpl/objects/heading.pug b/tpl/objects/heading.pug
index aa3fec9..47ffefa 100644
--- a/tpl/objects/heading.pug
+++ b/tpl/objects/heading.pug
@@ -32,11 +32,11 @@ mixin h6-heading(level)
32 h6(class=classes)&attributes(attributes) 32 h6(class=classes)&attributes(attributes)
33 block 33 block
34 34
35mixin div-heading(level, inner = false) 35mixin div-heading(level, primary = false)
36 - let classes = ['o-heading', 'o-heading--' + level] 36 - let classes = ['o-heading', 'o-heading--' + level]
37 div(class=classes)&attributes(attributes) 37 div(class=classes)&attributes(attributes)
38 if inner 38 if primary
39 span.o-heading__inner 39 span.o-heading__primary
40 block 40 block
41 else 41 else
42 block 42 block
diff --git a/tpl/views/blockquote.pug b/tpl/views/blockquote.pug
index a346292..a5dc95c 100644
--- a/tpl/views/blockquote.pug
+++ b/tpl/views/blockquote.pug
@@ -1,6 +1,6 @@
1mixin view-blockquote 1mixin view-blockquote
2 +view('blockquote', 'Blockquote') 2 +view('blockquote', 'Blockquote')
3 .c-box.s-blockquote 3 .c-box.s-blockquotes
4 p= loremIpsum 4 p.u-mt-0= loremIpsum
5 blockquote= loremIpsum 5 blockquote= loremIpsum
6 p= loremIpsum 6 p= loremIpsum
diff --git a/tpl/views/code.pug b/tpl/views/code.pug
index 552500d..21e16c8 100644
--- a/tpl/views/code.pug
+++ b/tpl/views/code.pug
@@ -1,7 +1,7 @@
1mixin view-code 1mixin view-code
2 +view('code', 'Code') 2 +view('code', 'Code')
3 .c-box.s-body 3 .c-box.s-body
4 p= loremIpsum 4 p.u-mt-0= loremIpsum
5 pre 5 pre
6 code. 6 code.
7 font-weight: 700; 7 font-weight: 700;
diff --git a/tpl/views/heading.pug b/tpl/views/heading.pug
index efdfb69..07080d5 100644
--- a/tpl/views/heading.pug
+++ b/tpl/views/heading.pug
@@ -1,15 +1,23 @@
1mixin view-heading 1mixin view-heading
2 +view('heading', 'Heading') 2 +view('heading', 'Heading')
3 .c-box 3 .c-box
4 h1= 'H1 default' 4 h1.u-mt-0= 'H1 default'
5 h2= 'H2 default' 5 h2= 'H2 default'
6 h3= 'H3 default' 6 h3= 'H3 default'
7 h4= 'H4 default' 7 h4= 'H4 default'
8 h5= 'H5 default' 8 h5= 'H5 default'
9 h6= 'H6 default' 9 h6= 'H6 default'
10 10
11 .c-box.s-headings
12 h1.u-mt-0: span.s-headings__primary= 'H1 styled'
13 h2= 'H2 styled'
14 h3= 'H3 styled'
15 h4= 'H4 styled'
16 h5= 'H5 styled'
17 h6= 'H6 styled'
18
11 .c-box 19 .c-box
12 +div-heading('xxl', true)= 'XXL Heading' 20 +div-heading('xxl', true)(class='u-mt-0')= 'XXL Heading'
13 +div-heading('xl')= 'XL Heading' 21 +div-heading('xl')= 'XL Heading'
14 +div-heading('lg')= 'LG Heading' 22 +div-heading('lg')= 'LG Heading'
15 +div-heading('md')= 'MD Heading' 23 +div-heading('md')= 'MD Heading'