summaryrefslogtreecommitdiffstats
path: root/assets/css/scopes
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2022-06-11 09:44:04 +0200
committerVolpeon <git@volpeon.ink>2022-06-11 09:44:04 +0200
commit575278aba99139635adc3b1f9385befe57102541 (patch)
treed98a160167610717da37f6340b3884ba4224fe5d /assets/css/scopes
parentUpdate (diff)
downloadvolpeon.ink-575278aba99139635adc3b1f9385befe57102541.tar.gz
volpeon.ink-575278aba99139635adc3b1f9385befe57102541.tar.bz2
volpeon.ink-575278aba99139635adc3b1f9385befe57102541.zip
Re-implemented design via iro-design
Diffstat (limited to 'assets/css/scopes')
-rw-r--r--assets/css/scopes/_body.scss83
-rw-r--r--assets/css/scopes/_colored-links.scss20
-rw-r--r--assets/css/scopes/_headlines.scss104
-rw-r--r--assets/css/scopes/_intro.scss8
-rw-r--r--assets/css/scopes/_invisible-links.scss13
-rw-r--r--assets/css/scopes/_small.scss23
6 files changed, 16 insertions, 235 deletions
diff --git a/assets/css/scopes/_body.scss b/assets/css/scopes/_body.scss
deleted file mode 100644
index 1fc8166..0000000
--- a/assets/css/scopes/_body.scss
+++ /dev/null
@@ -1,83 +0,0 @@
1@include namespace('body') {
2 @include store((
3 --colors: (
4 --code: (
5 --fg: prop(--colors --accent --strong, $global: true),
6 --bg: prop(--colors --bg-hi, $global: true),
7 ),
8 --code-block: (
9 --fg: prop(--colors --fg, $global: true),
10 --bg: prop(--colors --bg-lo, $global: true),
11 ),
12 --blockquote: (
13 --border: prop(--colors --obj-hi, $global: true),
14 )
15 ),
16 --dims: (
17 --code: (
18 --pad-x: .3em,
19 --pad-y: .1em
20 ),
21 --code-block: (
22 --pad-x: 1em,
23 --pad-y: .7em
24 )
25 )
26 ));
27
28 @include store((
29 --colors: (
30 --code: (
31 --bg: prop(--colors --accent --faint, $global: true),
32 ),
33 --code-block: (
34 --bg: prop(--colors --bg-hi, $global: true),
35 ),
36 )
37 ), 'light');
38
39 @include scope(namespace()) {
40 @include element('meta') {
41 + h1 {
42 margin-top: $line-height * .5rem;
43 }
44 }
45
46 img {
47 max-width: 100%;
48 }
49
50 code {
51 padding: prop(--dims --code --pad-y) prop(--dims --code --pad-x);
52 border-radius: 3px;
53 background-color: prop(--colors --code --bg);
54 color: prop(--colors --code --fg);
55 }
56
57 blockquote {
58 margin: ($line-height * 1rem) 0 0 1px;
59 padding-left: calc(#{prop(--dims --indent, $global: true)} - 3px);
60 border-left: 3px solid prop(--colors --blockquote --border);
61 }
62
63 pre {
64 margin: ($line-height * 1rem) 0 0 0;
65 padding: prop(--dims --code-block --pad-y) prop(--dims --code-block --pad-x);
66 background-color: prop(--colors --code-block --bg);
67 color: prop(--colors --code-block --fg);
68
69 code {
70 display: inline-block;
71 margin-right: prop(--dims --code-block --pad-x);
72 padding: 0;
73 border-radius: 0;
74 background-color: transparent;
75 color: currentColor;
76 }
77
78 @media print {
79 border: 2px solid currentColor;
80 }
81 }
82 }
83}
diff --git a/assets/css/scopes/_colored-links.scss b/assets/css/scopes/_colored-links.scss
deleted file mode 100644
index 9be0f93..0000000
--- a/assets/css/scopes/_colored-links.scss
+++ /dev/null
@@ -1,20 +0,0 @@
1@include namespace('colored-links') {
2 @include store((
3 --colors: (
4 --link: (
5 --idle: prop(--colors --link --colored --idle, $global: true),
6 --visited: prop(--colors --link --colored --visited, $global: true),
7 )
8 )
9 ));
10
11 @include scope(namespace()) {
12 :link {
13 color: prop(--colors --link --idle);
14 }
15
16 :visited {
17 color: prop(--colors --link --visited);
18 }
19 }
20}
diff --git a/assets/css/scopes/_headlines.scss b/assets/css/scopes/_headlines.scss
deleted file mode 100644
index bfd5caa..0000000
--- a/assets/css/scopes/_headlines.scss
+++ /dev/null
@@ -1,104 +0,0 @@
1@include namespace('headlines') {
2 @include store((
3 --colors: (
4 --link: (
5 --idle-fg: prop(--colors --obj, $global: true),
6 --hover-fg: prop(--colors --fg-lo, $global: true),
7 ),
8 --emph: (
9 --bg: prop(--colors --bg-hi, $global: true),
10 --body-bg: prop(--colors --bg-hi, $global: true),
11 )
12 )
13 ));
14
15 @include store((
16 --colors: (
17 --emph: (
18 --body-bg: prop(--colors --bg, $global: true),
19 )
20 )
21 ), 'light');
22
23 @include scope(namespace()) {
24 h1,
25 h2,
26 h3 {
27 font-family: $font-fam--large;
28 font-weight: 600;
29 letter-spacing: normal;
30 line-height: 1.4;
31 text-transform: none;
32 font-feature-settings: 'ss02' 1;
33 }
34
35 h1,
36 h2,
37 h3,
38 h4 {
39 transform: translateX(-.06em);
40 }
41
42 h1 {
43 @include iro-responsive-modular-scale(font-size, 3, $responsive-mod-scale);
44 }
45
46 h2 {
47 @include iro-responsive-modular-scale(font-size, 2, $responsive-mod-scale);
48 }
49
50 h3 {
51 @include iro-responsive-modular-scale(font-size, 1, $responsive-mod-scale);
52 }
53
54 h5,
55 h6 {
56 color: currentColor;
57 font-weight: 400;
58 }
59
60 @include element('title-inner') {
61 background-image: linear-gradient(
62 to top,
63 transparent .15em,
64 #{prop(--colors --emph --bg)} .15em,
65 #{prop(--colors --emph --bg)} .6em,
66 transparent .6em
67 );
68 }
69
70 @include element('link') {
71 display: none;
72 margin: -.5rem 0;
73 padding: .5rem;
74 vertical-align: -.02em;
75
76 svg {
77 width: px-to-em(12px);
78 height: px-to-em(12px);
79 }
80
81 &:link,
82 &:visited {
83 color: prop(--colors --link --idle-fg);
84
85 &:hover {
86 color: prop(--colors --link --hover-fg);
87 }
88 }
89 }
90
91 h1,
92 h2,
93 h3,
94 h4,
95 h5,
96 h6 {
97 &:hover {
98 @include element('link') {
99 display: inline-block;
100 }
101 }
102 }
103 }
104}
diff --git a/assets/css/scopes/_intro.scss b/assets/css/scopes/_intro.scss
deleted file mode 100644
index 6d4ac14..0000000
--- a/assets/css/scopes/_intro.scss
+++ /dev/null
@@ -1,8 +0,0 @@
1@include namespace('intro') {
2 @include scope(namespace()) {
3 h1 + p {
4 font-size: px-to-em(20px, 18px);
5 font-style: italic;
6 }
7 }
8}
diff --git a/assets/css/scopes/_invisible-links.scss b/assets/css/scopes/_invisible-links.scss
deleted file mode 100644
index e4d149e..0000000
--- a/assets/css/scopes/_invisible-links.scss
+++ /dev/null
@@ -1,13 +0,0 @@
1@include namespace('invisible-links') {
2 @include scope(namespace()) {
3 :link,
4 :visited {
5 color: currentColor;
6 text-decoration: none;
7
8 &:hover {
9 text-decoration: underline;
10 }
11 }
12 }
13}
diff --git a/assets/css/scopes/_small.scss b/assets/css/scopes/_small.scss
index f7aa61c..a4cc596 100644
--- a/assets/css/scopes/_small.scss
+++ b/assets/css/scopes/_small.scss
@@ -1,16 +1,25 @@
1@include namespace('small') { 1@use 'iro-sass/src/index' as iro;
2 @include store(( 2@use 'iro-design/src/functions' as fn;
3
4@include iro.props-namespace('small') {
5 @include iro.props-store((
3 --colors: ( 6 --colors: (
4 --fg: prop(--colors --fg-hi, $global: true), 7 --fg: fn.global-color(--fg-hi),
8 ),
9 ), 'colors');
10
11 @include iro.props-store((
12 --dims: (
13 --margin-top: fn.global-dim(--size --75),
5 ) 14 )
6 )); 15 ), 'dims');
7 16
8 @include scope(namespace()) { 17 @include iro.bem-scope(iro.props-namespace()) {
9 color: prop(--colors --fg); 18 color: fn.color(--fg);
10 line-height: 1.4; 19 line-height: 1.4;
11 20
12 p { 21 p {
13 margin-top: $line-height * .25rem; 22 margin-top: fn.dim(--margin-top);
14 } 23 }
15 } 24 }
16} 25}
generated by cgit v1.2.3-54-g00ecf (git 2.45.2) at 2024-07-01 15:31:13 +0000