diff options
Diffstat (limited to 'src/styles')
| -rw-r--r-- | src/styles/abstracts/_variables.scss | 7 | ||||
| -rw-r--r-- | src/styles/base/_colors.scss | 4 | ||||
| -rw-r--r-- | src/styles/base/_typography.scss | 100 | ||||
| -rw-r--r-- | src/styles/components/_wp-blocks.scss | 159 | ||||
| -rw-r--r-- | src/styles/globals.scss | 7 |
5 files changed, 262 insertions, 15 deletions
diff --git a/src/styles/abstracts/_variables.scss b/src/styles/abstracts/_variables.scss index 7dfc720..c232f9c 100644 --- a/src/styles/abstracts/_variables.scss +++ b/src/styles/abstracts/_variables.scss @@ -152,13 +152,14 @@ $color_blue: hsl(206, 75%, 31%); $color_blue-bright: hsl(206, 77%, 36%); $color_blue-brighter: hsl(200, 75%, 45%); $color_blue-dark: hsl(206, 76%, 25%); +$color_blue-darker: hsl(206, 60%, 20%); $color_grey: hsl(206, 15%, 80%); +$color_grey-bright: hsl(206, 20%, 86%); +$color_grey-brighter: hsl(206, 20%, 92%); $color_grey-dark: hsla(206, 10%, 25%); $color_grey-dark-o70: hsla(206, 10%, 25%, 0.7); $color_grey-dark-o40: hsla(206, 10%, 25%, 0.4); $color_grey-dark-o20: hsla(206, 10%, 25%, 0.2); -$color_orange: hsl(32, 100%, 55%); +$color_orange: hsl(34, 100%, 24%); $color_white: hsl(206, 15%, 97%); $color_white-o90: hsl(206, 15%, 97%, 0.9); -$test: hsl(206, 54%, 95%); -$test2: hsl(210, 40%, 96%); diff --git a/src/styles/base/_colors.scss b/src/styles/base/_colors.scss index 441b20c..f33ff00 100644 --- a/src/styles/base/_colors.scss +++ b/src/styles/base/_colors.scss @@ -3,6 +3,7 @@ :root { --color-bg: #{var.$color_white}; --color-bg-opacity: #{var.$color_white-o90}; + --color-bg-secondary: #{var.$color_grey-brighter}; --color-fg: #{var.$color_black}; --color-fg-light: #{var.$color_grey-dark}; --color-fg-inverted: #{var.$color_white}; @@ -10,8 +11,11 @@ --color-primary-light: #{var.$color_blue-bright}; --color-primary-lighter: #{var.$color_blue-brighter}; --color-primary-dark: #{var.$color_blue-dark}; + --color-primary-darker: #{var.$color_blue-darker}; + --color-secondary: #{var.$color_orange}; --color-border: #{var.$color_grey-dark}; --color-border-light: #{var.$color_grey}; + --color-border-lighter: #{var.$color_grey-bright}; --color-shadow: #{var.$color_grey-dark-o70}; --color-shadow-light: #{var.$color_grey-dark-o40}; --color-shadow-lighter: #{var.$color_grey-dark-o20}; diff --git a/src/styles/base/_typography.scss b/src/styles/base/_typography.scss index 39f0bfa..21f0e73 100644 --- a/src/styles/base/_typography.scss +++ b/src/styles/base/_typography.scss @@ -1,4 +1,6 @@ -.greetings, +@use "@styles/abstracts/functions" as fun; +@use "@styles/abstracts/variables" as var; + h1 { font-size: var(--font-size-3xl); } @@ -24,7 +26,6 @@ h6 { font-size: var(--font-size-md); } -.greetings, h1, h2, h3, @@ -34,15 +35,9 @@ h6 { color: var(--color-primary-dark); font-family: var(--font-family-secondary); font-weight: 500; + letter-spacing: 0.01ex; margin: 0 0 var(--spacing-sm); -} -h1, -h2, -h3, -h4, -h5, -h6 { * + { h2, h3, @@ -94,6 +89,10 @@ ol { margin-bottom: 0; } } + + ::marker { + color: var(--color-secondary); + } } ul { @@ -103,7 +102,7 @@ ul { dl { display: flex; flex-flow: row wrap; - gap: var(--spacing-xs); + gap: var(--spacing-2xs); } ul, @@ -122,22 +121,80 @@ dt { } dd { - flex: 1 1 auto; + flex: 0 0 auto; margin: 0; } a { + background: linear-gradient( + to top, + var(--color-primary) 50%, + var(--color-bg) 50% + ) + 0 0 / 100% 200% no-repeat; color: var(--color-primary); - text-decoration-thickness: 15%; + text-decoration-thickness: 13%; text-underline-offset: 20%; + transition: all 0.3s linear 0s, text-decoration 0.18s ease-in-out 0s; &:hover { color: var(--color-primary-light); + text-decoration-thickness: 23%; + } + + &:focus { + background-position: 0 100%; + color: var(--color-fg-inverted); } &:active { + background-position: 0 0; color: var(--color-primary-dark); + text-decoration-thickness: 18%; + } + + &[hreflang], + &.external { + grid-template-columns: minmax(0, 1fr) fun.convert-px(50); + + &::after { + display: inline-flex; + flex-flow: row nowrap; + width: fun.convert-px(14); + margin-right: 0.5ex; + font-size: var(--font-size-sm); + } + } + + &.external { + &::after { + content: "\0000a0"url(fun.encode-svg('<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$color_blue}" d="M100 0 59.543 5.887l20.8 6.523-51.134 51.134 7.249 7.248L87.59 19.66l6.522 20.798z"/><path fill="#{var.$color_blue}" d="M4 10a4 4 0 0 0-4 4v82a4 4 0 0 0 4 4h82a4 4 0 0 0 4-4V62.314h-8V92H8V18h29.686v-8z"/></svg>')); + } } + + &[hreflang] { + &::after { + content: "\0000a0["attr(hreflang) "]"; + text-decoration: none; + } + + &.external { + &::after { + content: "\0000a0["attr(hreflang) "]\0000a0"url(fun.encode-svg( + '<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$color_blue}" d="M100 0 59.543 5.887l20.8 6.523-51.134 51.134 7.249 7.248L87.59 19.66l6.522 20.798z"/><path fill="#{var.$color_blue}" d="M4 10a4 4 0 0 0-4 4v82a4 4 0 0 0 4 4h82a4 4 0 0 0 4-4V62.314h-8V92H8V18h29.686v-8z"/></svg>' + )); + margin-right: 4.5ex; + } + } + } +} + +button, +input, +optgroup, +select, +textarea { + line-height: var(--line-height); } code, @@ -147,6 +204,15 @@ var { font-family: var(--font-family-mono); } +:not(pre) > code { + background: var(--color-bg-secondary); + border: fun.convert-px(1) solid var(--color-border-lighter); + border-radius: fun.convert-px(3); + color: var(--color-primary-darker); + padding: fun.convert-px(2) fun.convert-px(5) fun.convert-px(1) + fun.convert-px(5); +} + pre { display: block; max-width: 100%; @@ -156,3 +222,13 @@ pre { word-break: normal; word-wrap: normal; } + +figure { + margin: var(--spacing-md) 0; +} + +figcaption { + margin-top: var(--spacing-xs); + font-size: var(--font-size-sm); + text-align: center; +} diff --git a/src/styles/components/_wp-blocks.scss b/src/styles/components/_wp-blocks.scss new file mode 100644 index 0000000..4d21893 --- /dev/null +++ b/src/styles/components/_wp-blocks.scss @@ -0,0 +1,159 @@ +@use "@styles/abstracts/functions" as fun; +@use "@styles/abstracts/mixins" as mix; +@use "@styles/abstracts/placeholders"; + +.wp-block-quote { + margin: var(--spacing-sm) 0; + padding: var(--spacing-sm); + position: relative; + border: fun.convert-px(1) solid var(--color-primary-lighter); + border-left: fun.convert-px(5) solid var(--color-primary-lighter); + box-shadow: 0 0 fun.convert-px(1) 0 var(--color-shadow-light), + fun.convert-px(2) fun.convert-px(2) fun.convert-px(2) 0 + var(--color-shadow-lighter), + fun.convert-px(3) fun.convert-px(3) fun.convert-px(6) 0 + var(--color-shadow-lighter); + font-style: italic; + + > *:last-child { + margin: 0; + } + + cite { + font-size: var(--font-size-sm); + font-style: normal; + font-weight: 600; + } +} + +.wp-block-code, +.wp-block-preformatted { + margin: 0 auto var(--spacing-md); + padding: var(--spacing-xs) var(--spacing-sm); + background: var(--color-bg-secondary); + border: fun.convert-px(1) solid var(--color-border-lighter); + color: var(--color-primary-darker); +} + +.wp-block-code[class*="language-"] { + margin: var(--spacing-sm) 0; + padding: 0 var(--spacing-sm); +} + +.wp-block-columns { + display: grid; + grid-template-columns: minmax(0, 1fr); + gap: var(--spacing-md); + margin: var(--spacing-md) 0; + + @include mix.media("screen") { + @include mix.dimensions("sm") { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + } + + &.are-vertically-aligned-center { + align-items: center; + } +} + +.wp-block-column { + > *:first-child { + margin-top: 0; + } + + > *:last-child { + margin-bottom: 0; + } +} + +.wp-block-gallery { + .blocks-gallery-grid { + @extend %reset-list; + + display: grid; + grid-template-columns: minmax(0, 1fr); + gap: var(--spacing-sm); + } + + .blocks-gallery-item { + figure { + margin: 0; + } + + a { + display: block; + box-shadow: 0 0 fun.convert-px(1) 0 var(--color-shadow-light), + fun.convert-px(2) fun.convert-px(2) fun.convert-px(2) 0 + var(--color-shadow-lighter), + fun.convert-px(3) fun.convert-px(3) fun.convert-px(6) 0 + var(--color-shadow-lighter); + + &:hover, + &:focus { + transform: scale(1.05); + box-shadow: 0 0 fun.convert-px(1) 0 var(--color-shadow-light), + fun.convert-px(3) fun.convert-px(3) fun.convert-px(2) 0 + var(--color-shadow-lighter), + fun.convert-px(5) fun.convert-px(5) fun.convert-px(8) 0 + var(--color-shadow-lighter); + } + + &:focus { + outline: solid var(--color-primary-light); + } + + &:active { + transform: scale(0.95); + box-shadow: 0 0 fun.convert-px(1) 0 var(--color-shadow-light), + fun.convert-px(2) fun.convert-px(2) fun.convert-px(2) 0 + var(--color-shadow-lighter), + 0 0 0 0 var(--color-shadow-lighter); + outline: none; + } + } + } + + &.aligncenter { + .blocks-gallery-grid { + align-items: center; + } + } + + @include mix.media("screen") { + @include mix.dimensions("sm") { + &.columns-2 { + .blocks-gallery-grid { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + } + + &.columns-3 { + .blocks-gallery-grid { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } + } + } + } +} + +.wp-block-image { + img { + display: block; + margin: auto; + box-shadow: 0 0 fun.convert-px(1) 0 var(--color-shadow-light), + fun.convert-px(2) fun.convert-px(2) fun.convert-px(2) 0 + var(--color-shadow-lighter), + fun.convert-px(3) fun.convert-px(3) fun.convert-px(6) 0 + var(--color-shadow-lighter); + text-align: center; + } +} + +.wp-block-video { + box-shadow: 0 0 fun.convert-px(1) 0 var(--color-shadow-light), + fun.convert-px(2) fun.convert-px(2) fun.convert-px(2) 0 + var(--color-shadow-lighter), + fun.convert-px(3) fun.convert-px(3) fun.convert-px(6) 0 + var(--color-shadow-lighter); +} diff --git a/src/styles/globals.scss b/src/styles/globals.scss index 8a3daca..ec40a35 100644 --- a/src/styles/globals.scss +++ b/src/styles/globals.scss @@ -18,3 +18,10 @@ @use "base/helpers"; @use "base/spacings"; @use "base/typography"; + +/** + * 3.0. Components + * + * Define styles for external components (like WordPress blocks). + */ +@use "components/wp-blocks"; |