diff options
Diffstat (limited to 'assets/css')
-rw-r--r-- | assets/css/objects/_button.scss | 23 | ||||
-rw-r--r-- | assets/css/scopes/_body.scss | 29 | ||||
-rw-r--r-- | assets/css/style.scss | 1 |
3 files changed, 25 insertions, 28 deletions
diff --git a/assets/css/objects/_button.scss b/assets/css/objects/_button.scss deleted file mode 100644 index d97ca2d..0000000 --- a/assets/css/objects/_button.scss +++ /dev/null | |||
@@ -1,23 +0,0 @@ | |||
1 | @include namespace('button') { | ||
2 | @include store(( | ||
3 | --dims: ( | ||
4 | --pad-x: 1.4em, | ||
5 | --pad-y: .5em | ||
6 | ), | ||
7 | --colors: ( | ||
8 | --bg: prop(--colors --fg-lo, $global: true), | ||
9 | --fg: prop(--colors --bg, $global: true), | ||
10 | ) | ||
11 | )); | ||
12 | |||
13 | @include object(namespace()) { | ||
14 | display: inline-block; | ||
15 | padding: prop(--dims --pad-y) prop(--dims --pad-x); | ||
16 | border-radius: 10em; | ||
17 | background-color: prop(--colors --bg); | ||
18 | color: prop(--colors --fg); | ||
19 | font-size: 1 / 16 * 14em; | ||
20 | font-weight: 500; | ||
21 | text-decoration: none; | ||
22 | } | ||
23 | } | ||
diff --git a/assets/css/scopes/_body.scss b/assets/css/scopes/_body.scss index faf1ef0..9598290 100644 --- a/assets/css/scopes/_body.scss +++ b/assets/css/scopes/_body.scss | |||
@@ -1,8 +1,14 @@ | |||
1 | @include namespace('body') { | 1 | @include namespace('body') { |
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 | ), | ||
8 | --meta: ( | ||
9 | --fg: prop(--colors --fg-hi, $global: true), | ||
10 | --bg: prop(--colors --bg-hi, $global: true), | ||
11 | ) | ||
6 | ) | 12 | ) |
7 | )); | 13 | )); |
8 | 14 | ||
@@ -62,12 +68,27 @@ | |||
62 | background-image: linear-gradient( | 68 | background-image: linear-gradient( |
63 | to top, | 69 | to top, |
64 | transparent .15em, | 70 | transparent .15em, |
65 | #{prop(--colors --emph-bg)} .15em, | 71 | #{prop(--colors --emph --bg)} .15em, |
66 | #{prop(--colors --emph-bg)} .6em, | 72 | #{prop(--colors --emph --bg)} .6em, |
67 | transparent .6em | 73 | transparent .6em |
68 | ); | 74 | ); |
69 | } | 75 | } |
70 | 76 | ||
77 | @include element('meta') { | ||
78 | display: flex; | ||
79 | font-size: 1 / 16 * 14rem; | ||
80 | |||
81 | + h1 { | ||
82 | margin-top: $line-height * 1rem; | ||
83 | } | ||
84 | } | ||
85 | |||
86 | @include element('meta-item') { | ||
87 | padding: .3em .7em; | ||
88 | background-color: prop(--colors --meta --bg); | ||
89 | color: prop(--colors --meta --fg); | ||
90 | } | ||
91 | |||
71 | img { | 92 | img { |
72 | max-width: 100%; | 93 | max-width: 100%; |
73 | } | 94 | } |
diff --git a/assets/css/style.scss b/assets/css/style.scss index 958710c..aa83f85 100644 --- a/assets/css/style.scss +++ b/assets/css/style.scss | |||
@@ -16,7 +16,6 @@ | |||
16 | @import 'layouts/project-grid'; | 16 | @import 'layouts/project-grid'; |
17 | 17 | ||
18 | @import 'objects/icon'; | 18 | @import 'objects/icon'; |
19 | @import 'objects/button'; | ||
20 | 19 | ||
21 | @import 'components/outer-button'; | 20 | @import 'components/outer-button'; |
22 | @import 'components/header'; | 21 | @import 'components/header'; |