diff options
Diffstat (limited to 'assets')
-rw-r--r-- | assets/css/_basics.scss | 4 | ||||
-rw-r--r-- | assets/css/_vars.scss | 35 | ||||
-rw-r--r-- | assets/css/components/_landing-banner.scss | 12 | ||||
-rw-r--r-- | assets/css/layouts/_section.scss | 13 | ||||
-rw-r--r-- | assets/css/scopes/_body.scss | 8 | ||||
-rw-r--r-- | assets/css/scopes/_headlines.scss | 23 |
6 files changed, 62 insertions, 33 deletions
diff --git a/assets/css/_basics.scss b/assets/css/_basics.scss index 3093949..741061f 100644 --- a/assets/css/_basics.scss +++ b/assets/css/_basics.scss | |||
@@ -45,7 +45,7 @@ code { | |||
45 | } | 45 | } |
46 | 46 | ||
47 | code { | 47 | code { |
48 | color: var(--code--fg); | 48 | color: prop(--colors --code --fg); |
49 | font-size: 1 / 16 * 15em; | 49 | font-size: 1 / 16 * 15em; |
50 | } | 50 | } |
51 | 51 | ||
@@ -147,7 +147,7 @@ h4, | |||
147 | h5, | 147 | h5, |
148 | h6 { | 148 | h6 { |
149 | margin: ($line-height * 2rem) 0 0; | 149 | margin: ($line-height * 2rem) 0 0; |
150 | color: var(--heading--fg); | 150 | color: prop(--colors --fg-lo); |
151 | font-size: 1 / 16 * 14em; | 151 | font-size: 1 / 16 * 14em; |
152 | font-weight: 700; | 152 | font-weight: 700; |
153 | letter-spacing: 1px; | 153 | letter-spacing: 1px; |
diff --git a/assets/css/_vars.scss b/assets/css/_vars.scss index 814a68d..96c1c75 100644 --- a/assets/css/_vars.scss +++ b/assets/css/_vars.scss | |||
@@ -56,10 +56,12 @@ $content--width: 42rem; | |||
56 | --obj-shadow: transparent, | 56 | --obj-shadow: transparent, |
57 | 57 | ||
58 | --accent: ( | 58 | --accent: ( |
59 | --h: 354, | 59 | --h: 354, |
60 | --s: 84%, | 60 | --s: 84%, |
61 | --l: 55%, | 61 | --l: 55%, |
62 | --color: hsl(var(--colors--accent--h), var(--colors--accent--s), var(--colors--accent--l)), | 62 | --color: hsl(var(--colors--accent--h), var(--colors--accent--s), var(--colors--accent--l)), |
63 | --strong: hsl(var(--colors--accent--h), calc(var(--colors--accent--s) * 1.1), calc(var(--colors--accent--l) * 1.1)), | ||
64 | --faint: hsla(var(--colors--accent--h), var(--colors--accent--s), var(--colors--accent--l), .1), | ||
63 | ), | 65 | ), |
64 | 66 | ||
65 | --focus-ring: var(--colors--fg-lo), | 67 | --focus-ring: var(--colors--fg-lo), |
@@ -77,6 +79,10 @@ $content--width: 42rem; | |||
77 | --visited: hsl(270, 60%, 75%), //hsl(var(--colors--accent--h), 50%, 66%), // | 79 | --visited: hsl(270, 60%, 75%), //hsl(var(--colors--accent--h), 50%, 66%), // |
78 | ) | 80 | ) |
79 | ), | 81 | ), |
82 | |||
83 | --code: ( | ||
84 | --fg: var(--colors--fg-hi), | ||
85 | ), | ||
80 | ) | 86 | ) |
81 | )); | 87 | )); |
82 | } | 88 | } |
@@ -107,10 +113,10 @@ $content--width: 42rem; | |||
107 | --obj-shadow: rgba(#000, .05), | 113 | --obj-shadow: rgba(#000, .05), |
108 | 114 | ||
109 | --accent: ( | 115 | --accent: ( |
110 | --h: 354, | 116 | --h: 354, |
111 | --s: 74%, | 117 | --s: 74%, |
112 | --l: 48%, | 118 | --l: 48%, |
113 | --color: hsl(var(--colors--accent--h), var(--colors--accent--s), var(--colors--accent--l)), | 119 | --strong: hsl(var(--colors--accent--h), var(--colors--accent--s), calc(var(--colors--accent--l) * .9)), |
114 | ), | 120 | ), |
115 | 121 | ||
116 | --select: ( | 122 | --select: ( |
@@ -142,16 +148,3 @@ $content--width: 42rem; | |||
142 | --indent: 1.5rem, | 148 | --indent: 1.5rem, |
143 | ), | 149 | ), |
144 | ), 'sm'); | 150 | ), 'sm'); |
145 | |||
146 | :root { | ||
147 | --heading--fg: var(--colors--fg-lo); | ||
148 | |||
149 | --code--fg: var(--colors--fg-hi); | ||
150 | |||
151 | --code-block--fg: var(--colors--fg-hi); | ||
152 | |||
153 | --page--link--idle--fg: var(--link--idle--fg); // hsl(45, 100%, 70%); // hsl(215, 100%, 80%); // var(--link--idle--fg); // #ffd866; | ||
154 | --page--link--visited--fg: var(--colors--fg); // hsl(23, 89%, 65%); // hsl(260, 58%, 78%); // var(--fg-lo); // #f59458; | ||
155 | --page--link--hover--bg: var(--page--link--idle--fg); | ||
156 | --page--link--hover--fg: #000; | ||
157 | } | ||
diff --git a/assets/css/components/_landing-banner.scss b/assets/css/components/_landing-banner.scss index 0e44e35..f1b8595 100644 --- a/assets/css/components/_landing-banner.scss +++ b/assets/css/components/_landing-banner.scss | |||
@@ -1,8 +1,10 @@ | |||
1 | @include namespace('landing-banner') { | 1 | @include namespace('landing-banner') { |
2 | @include store(( | 2 | @include store(( |
3 | --colors: ( | 3 | --colors: ( |
4 | --emph-fg: prop(--colors --accent --color, $global: true), | 4 | --emph: ( |
5 | --emph-bg: prop(--colors --bg-hi, $global: true) | 5 | --fg: prop(--colors --accent --color, $global: true), |
6 | --bg: prop(--colors --bg-hi, $global: true) | ||
7 | ) | ||
6 | ) | 8 | ) |
7 | )); | 9 | )); |
8 | 10 | ||
@@ -21,14 +23,14 @@ | |||
21 | background-image: linear-gradient( | 23 | background-image: linear-gradient( |
22 | to top, | 24 | to top, |
23 | transparent .15em, | 25 | transparent .15em, |
24 | #{prop(--colors --emph-bg)} .15em, | 26 | #{prop(--colors --emph --bg)} .15em, |
25 | #{prop(--colors --emph-bg)} .6em, | 27 | #{prop(--colors --emph --bg)} .6em, |
26 | transparent .6em | 28 | transparent .6em |
27 | ); | 29 | ); |
28 | } | 30 | } |
29 | 31 | ||
30 | @include element('emph') { | 32 | @include element('emph') { |
31 | color: prop(--colors --emph-fg); | 33 | color: prop(--colors --emph --fg); |
32 | font-weight: 550; | 34 | font-weight: 550; |
33 | } | 35 | } |
34 | 36 | ||
diff --git a/assets/css/layouts/_section.scss b/assets/css/layouts/_section.scss index 36c84a7..7c1cc9b 100644 --- a/assets/css/layouts/_section.scss +++ b/assets/css/layouts/_section.scss | |||
@@ -1,10 +1,17 @@ | |||
1 | @include namespace('section') { | 1 | @include namespace('section') { |
2 | @include store(( | 2 | @include store(( |
3 | --colors: ( | 3 | --colors: ( |
4 | --border: prop(--colors --obj-hi, $global: true), | 4 | --border: prop(--colors --obj-hi, $global: true), |
5 | --body-bg: transparent, | ||
5 | ) | 6 | ) |
6 | )); | 7 | )); |
7 | 8 | ||
9 | @include store(( | ||
10 | --colors: ( | ||
11 | --body-bg: prop(--colors --bg-hi, $global: true), | ||
12 | ) | ||
13 | ), 'light'); | ||
14 | |||
8 | @include layout(namespace()) { | 15 | @include layout(namespace()) { |
9 | position: relative; | 16 | position: relative; |
10 | 17 | ||
@@ -15,6 +22,10 @@ | |||
15 | padding-bottom: prop(--dims --outer, $global: true); | 22 | padding-bottom: prop(--dims --outer, $global: true); |
16 | } | 23 | } |
17 | 24 | ||
25 | @include modifier('body') { | ||
26 | background-color: prop(--colors --body-bg); | ||
27 | } | ||
28 | |||
18 | @include modifier('no-head') { | 29 | @include modifier('no-head') { |
19 | padding-top: prop(--dims --outer, $global: true); | 30 | padding-top: prop(--dims --outer, $global: true); |
20 | } | 31 | } |
diff --git a/assets/css/scopes/_body.scss b/assets/css/scopes/_body.scss index a27b30f..ededaad 100644 --- a/assets/css/scopes/_body.scss +++ b/assets/css/scopes/_body.scss | |||
@@ -3,7 +3,7 @@ | |||
3 | --colors: ( | 3 | --colors: ( |
4 | --meta: prop(--colors --fg-hi, $global: true), | 4 | --meta: prop(--colors --fg-hi, $global: true), |
5 | --code: ( | 5 | --code: ( |
6 | --fg: hsl(prop(--colors --accent --h, $global: true), 90%, 64%), | 6 | --fg: prop(--colors --accent --strong, $global: true), |
7 | --bg: prop(--colors --bg-hi, $global: true), | 7 | --bg: prop(--colors --bg-hi, $global: true), |
8 | ), | 8 | ), |
9 | --obj-border: prop(--colors --obj, $global: true), | 9 | --obj-border: prop(--colors --obj, $global: true), |
@@ -13,7 +13,7 @@ | |||
13 | @include store(( | 13 | @include store(( |
14 | --colors: ( | 14 | --colors: ( |
15 | --code: ( | 15 | --code: ( |
16 | --fg: hsl(prop(--colors --accent --h, $global: true), 74%, 52%), | 16 | --bg: prop(--colors --accent --faint, $global: true), |
17 | ), | 17 | ), |
18 | --obj-border: prop(--colors --obj-hi, $global: true), | 18 | --obj-border: prop(--colors --obj-hi, $global: true), |
19 | ) | 19 | ) |
@@ -36,7 +36,8 @@ | |||
36 | } | 36 | } |
37 | 37 | ||
38 | code { | 38 | code { |
39 | padding: .2em .4em; | 39 | padding: .1em .3em; |
40 | border-radius: 3px; | ||
40 | background-color: prop(--colors --code --bg); | 41 | background-color: prop(--colors --code --bg); |
41 | color: prop(--colors --code --fg); | 42 | color: prop(--colors --code --fg); |
42 | } | 43 | } |
@@ -50,6 +51,7 @@ | |||
50 | 51 | ||
51 | pre code { | 52 | pre code { |
52 | padding: 0; | 53 | padding: 0; |
54 | border-radius: 0; | ||
53 | background-color: transparent; | 55 | background-color: transparent; |
54 | color: currentColor; | 56 | color: currentColor; |
55 | } | 57 | } |
diff --git a/assets/css/scopes/_headlines.scss b/assets/css/scopes/_headlines.scss index dcd8024..03d6be1 100644 --- a/assets/css/scopes/_headlines.scss +++ b/assets/css/scopes/_headlines.scss | |||
@@ -2,11 +2,20 @@ | |||
2 | @include store(( | 2 | @include store(( |
3 | --colors: ( | 3 | --colors: ( |
4 | --emph: ( | 4 | --emph: ( |
5 | --bg: prop(--colors --bg-hi, $global: true), | 5 | --bg: prop(--colors --bg-hi, $global: true), |
6 | --body-bg: prop(--colors --bg-hi, $global: true), | ||
6 | ) | 7 | ) |
7 | ) | 8 | ) |
8 | )); | 9 | )); |
9 | 10 | ||
11 | @include store(( | ||
12 | --colors: ( | ||
13 | --emph: ( | ||
14 | --body-bg: prop(--colors --bg, $global: true), | ||
15 | ) | ||
16 | ) | ||
17 | ), 'light'); | ||
18 | |||
10 | @include scope(namespace()) { | 19 | @include scope(namespace()) { |
11 | h1, | 20 | h1, |
12 | h2, | 21 | h2, |
@@ -70,5 +79,17 @@ | |||
70 | transparent .6em | 79 | transparent .6em |
71 | ); | 80 | ); |
72 | } | 81 | } |
82 | |||
83 | @include modifier('body') { | ||
84 | @include element('title-inner') { | ||
85 | background-image: linear-gradient( | ||
86 | to top, | ||
87 | transparent .15em, | ||
88 | #{prop(--colors --emph --body-bg)} .15em, | ||
89 | #{prop(--colors --emph --body-bg)} .6em, | ||
90 | transparent .6em | ||
91 | ); | ||
92 | } | ||
93 | } | ||
73 | } | 94 | } |
74 | } | 95 | } |