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'; |
