diff options
Diffstat (limited to 'assets/css/components')
| -rw-r--r-- | assets/css/components/_card.scss | 2 | ||||
| -rw-r--r-- | assets/css/components/_footer.scss | 4 | ||||
| -rw-r--r-- | assets/css/components/_header.scss (renamed from assets/css/components/_logo.scss) | 13 | ||||
| -rw-r--r-- | assets/css/components/_landing-banner.scss | 2 | ||||
| -rw-r--r-- | assets/css/components/_outer-button.scss | 31 | ||||
| -rw-r--r-- | assets/css/components/_section-heading.scss | 29 |
6 files changed, 29 insertions, 52 deletions
diff --git a/assets/css/components/_card.scss b/assets/css/components/_card.scss index 09b03b0..cb18810 100644 --- a/assets/css/components/_card.scss +++ b/assets/css/components/_card.scss | |||
| @@ -15,7 +15,7 @@ | |||
| 15 | @include store(( | 15 | @include store(( |
| 16 | --dims: ( | 16 | --dims: ( |
| 17 | --pad-x: 1em, | 17 | --pad-x: 1em, |
| 18 | --pad-y: .6em | 18 | --pad-y: .7em |
| 19 | ) | 19 | ) |
| 20 | ), 'md'); | 20 | ), 'md'); |
| 21 | 21 | ||
diff --git a/assets/css/components/_footer.scss b/assets/css/components/_footer.scss index c20bc22..c127d02 100644 --- a/assets/css/components/_footer.scss +++ b/assets/css/components/_footer.scss | |||
| @@ -2,7 +2,7 @@ | |||
| 2 | @include store(( | 2 | @include store(( |
| 3 | --colors: ( | 3 | --colors: ( |
| 4 | --fg: prop(--colors --obj, $global: true), | 4 | --fg: prop(--colors --obj, $global: true), |
| 5 | --border: prop(--colors --bg-lo, $global: true), | 5 | --border: prop(--colors --obj-hi, $global: true), |
| 6 | ) | 6 | ) |
| 7 | )); | 7 | )); |
| 8 | 8 | ||
| @@ -11,6 +11,8 @@ | |||
| 11 | align-items: center; | 11 | align-items: center; |
| 12 | justify-content: space-between; | 12 | justify-content: space-between; |
| 13 | height: prop(--dims --outer, $global: true); | 13 | height: prop(--dims --outer, $global: true); |
| 14 | padding-right: prop(--dims --outer, $global: true); | ||
| 15 | font-size: 1 / 16 * 15em; | ||
| 14 | 16 | ||
| 15 | @include element('content') { | 17 | @include element('content') { |
| 16 | width: 100%; | 18 | width: 100%; |
diff --git a/assets/css/components/_logo.scss b/assets/css/components/_header.scss index 13587c8..61f6f4a 100644 --- a/assets/css/components/_logo.scss +++ b/assets/css/components/_header.scss | |||
| @@ -1,4 +1,4 @@ | |||
| 1 | @include namespace('logo') { | 1 | @include namespace('header') { |
| 2 | @include store(( | 2 | @include store(( |
| 3 | --colors: ( | 3 | --colors: ( |
| 4 | --fg: prop(--colors --fg-lo, $global: true), | 4 | --fg: prop(--colors --fg-lo, $global: true), |
| @@ -11,9 +11,12 @@ | |||
| 11 | )); | 11 | )); |
| 12 | 12 | ||
| 13 | @include component(namespace()) { | 13 | @include component(namespace()) { |
| 14 | position: fixed; | 14 | display: flex; |
| 15 | z-index: 10000; | 15 | position: fixed; |
| 16 | top: 0; | 16 | z-index: 10000; |
| 17 | left: 0; | 17 | top: 0; |
| 18 | left: 0; | ||
| 19 | flex-direction: row; | ||
| 20 | justify-content: flex-start; | ||
| 18 | } | 21 | } |
| 19 | } | 22 | } |
diff --git a/assets/css/components/_landing-banner.scss b/assets/css/components/_landing-banner.scss index f6016c4..58d64d7 100644 --- a/assets/css/components/_landing-banner.scss +++ b/assets/css/components/_landing-banner.scss | |||
| @@ -10,7 +10,7 @@ | |||
| 10 | @include element('title') { | 10 | @include element('title') { |
| 11 | max-width: 7em; | 11 | max-width: 7em; |
| 12 | margin-top: 0; | 12 | margin-top: 0; |
| 13 | transform: translateX(-.05em); | 13 | transform: translateX(-.06em); |
| 14 | font-family: $font-fam--large; | 14 | font-family: $font-fam--large; |
| 15 | font-weight: 350; | 15 | font-weight: 350; |
| 16 | text-transform: none; | 16 | text-transform: none; |
diff --git a/assets/css/components/_outer-button.scss b/assets/css/components/_outer-button.scss index b92dd9e..774281d 100644 --- a/assets/css/components/_outer-button.scss +++ b/assets/css/components/_outer-button.scss | |||
| @@ -7,13 +7,9 @@ | |||
| 7 | --bg: prop(--colors --accent --color, $global: true), | 7 | --bg: prop(--colors --accent --color, $global: true), |
| 8 | --fg: prop(--colors --bg-hi, $global: true), | 8 | --fg: prop(--colors --bg-hi, $global: true), |
| 9 | ), | 9 | ), |
| 10 | --icon: ( | 10 | --inverted: ( |
| 11 | --fg: prop(--colors --fg-lo, $global: true), | 11 | --fg: prop(--colors --fg-lo, $global: true), |
| 12 | --bg: prop(--colors --bg-hi, $global: true), | 12 | --bg: prop(--colors --bg-hi, $global: true), |
| 13 | --hover: ( | ||
| 14 | --fg: prop(--colors --bg-hi, $global: true), | ||
| 15 | --bg: prop(--colors --accent --color, $global: true), | ||
| 16 | ) | ||
| 17 | ) | 13 | ) |
| 18 | ) | 14 | ) |
| 19 | )); | 15 | )); |
| @@ -24,9 +20,17 @@ | |||
| 24 | transition: background-color .2s, color .2s; | 20 | transition: background-color .2s, color .2s; |
| 25 | background-color: prop(--colors --bg); | 21 | background-color: prop(--colors --bg); |
| 26 | color: prop(--colors --fg); | 22 | color: prop(--colors --fg); |
| 23 | font-size: 1rem; | ||
| 27 | font-weight: 450; | 24 | font-weight: 450; |
| 28 | text-decoration: none; | 25 | text-decoration: none; |
| 29 | 26 | ||
| 27 | @include modifier('scroll-top') { | ||
| 28 | position: fixed; | ||
| 29 | z-index: 9000; | ||
| 30 | right: 0; | ||
| 31 | bottom: 0; | ||
| 32 | } | ||
| 33 | |||
| 30 | @include element('icon') { | 34 | @include element('icon') { |
| 31 | display: flex; | 35 | display: flex; |
| 32 | position: relative; | 36 | position: relative; |
| @@ -36,19 +40,16 @@ | |||
| 36 | width: prop(--dims --outer, $global: true); | 40 | width: prop(--dims --outer, $global: true); |
| 37 | height: 100%; | 41 | height: 100%; |
| 38 | transition: background-color .2s, color .2s; | 42 | transition: background-color .2s, color .2s; |
| 39 | background-color: prop(--colors --icon --bg); | ||
| 40 | color: prop(--colors --icon --fg); | ||
| 41 | } | 43 | } |
| 42 | 44 | ||
| 43 | @include modifier('icon-only') { | 45 | @include modifier('inverted') { |
| 44 | @include element('icon') { | 46 | background-color: prop(--colors --inverted --bg); |
| 45 | background-color: prop(--colors --bg); | 47 | color: prop(--colors --inverted --fg); |
| 46 | color: prop(--colors --fg); | ||
| 47 | } | ||
| 48 | } | 48 | } |
| 49 | 49 | ||
| 50 | &:hover { | 50 | &:link, |
| 51 | @include multi('&', 'element' 'icon') { | 51 | &:visited { |
| 52 | &:hover { | ||
| 52 | background-color: prop(--colors --hover --bg); | 53 | background-color: prop(--colors --hover --bg); |
| 53 | color: prop(--colors --hover --fg); | 54 | color: prop(--colors --hover --fg); |
| 54 | } | 55 | } |
diff --git a/assets/css/components/_section-heading.scss b/assets/css/components/_section-heading.scss deleted file mode 100644 index 717442b..0000000 --- a/assets/css/components/_section-heading.scss +++ /dev/null | |||
| @@ -1,29 +0,0 @@ | |||
| 1 | @include namespace('section-heading') { | ||
| 2 | @include store(( | ||
| 3 | --dims: ( | ||
| 4 | --pad-y: $line-height * 1rem | ||
| 5 | ), | ||
| 6 | --colors: ( | ||
| 7 | --line: prop(--colors --accent --color, $global: true), | ||
| 8 | ) | ||
| 9 | )); | ||
| 10 | |||
| 11 | @include component(namespace()) { | ||
| 12 | margin: 0 0 prop(--dims --pad-y); | ||
| 13 | font-family: $font-fam--text; | ||
| 14 | font-size: 1 / 16 * 13em; | ||
| 15 | font-weight: bold; | ||
| 16 | letter-spacing: .2em; | ||
| 17 | text-transform: uppercase; | ||
| 18 | |||
| 19 | &::before { | ||
| 20 | content: ''; | ||
| 21 | display: inline-block; | ||
| 22 | width: 3em; | ||
| 23 | height: 2px; | ||
| 24 | margin-right: 1.3em; | ||
| 25 | background-color: prop(--colors --line); | ||
| 26 | vertical-align: middle; | ||
| 27 | } | ||
| 28 | } | ||
| 29 | } | ||
