diff options
| author | Armand Philippot <git@armandphilippot.com> | 2022-05-16 19:40:23 +0200 |
|---|---|---|
| committer | Armand Philippot <git@armandphilippot.com> | 2022-05-16 19:40:23 +0200 |
| commit | c77c58e18143233be042c4980a6ed08ae9beac52 (patch) | |
| tree | 94f7d828571a86470ae299fff7dffd32fb38de7c /src/styles/components | |
| parent | 2155550fa36a3bc3c8f66e0926530123b4018cd4 (diff) | |
chore: adjust and complete missing styles
* add logo to topics pages and links
* add Prism styles to articles
* and a few other adjustements
Diffstat (limited to 'src/styles/components')
| -rw-r--r-- | src/styles/components/_wp-blocks.scss | 166 |
1 files changed, 0 insertions, 166 deletions
diff --git a/src/styles/components/_wp-blocks.scss b/src/styles/components/_wp-blocks.scss deleted file mode 100644 index efd6db5..0000000 --- a/src/styles/components/_wp-blocks.scss +++ /dev/null @@ -1,166 +0,0 @@ -@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), - fun.convert-px(2) fun.convert-px(2) fun.convert-px(2) 0 - var(--color-shadow-light), - fun.convert-px(3) fun.convert-px(3) fun.convert-px(6) 0 - var(--color-shadow-light); - 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-light); - color: var(--color-fg); -} - -.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 { - display: grid; - grid-template-columns: minmax(0, 1fr); - gap: var(--spacing-sm); - - .blocks-gallery-grid { - @extend %reset-list; - - grid-column: 1 / -1; - grid-row: 1 / -1; - 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), - fun.convert-px(2) fun.convert-px(2) fun.convert-px(2) 0 - var(--color-shadow-light), - fun.convert-px(3) fun.convert-px(3) fun.convert-px(6) 0 - var(--color-shadow-light); - - &:hover, - &:focus { - transform: scale(1.05); - box-shadow: 0 0 fun.convert-px(1) 0 var(--color-shadow), - fun.convert-px(3) fun.convert-px(3) fun.convert-px(2) 0 - var(--color-shadow-light), - fun.convert-px(5) fun.convert-px(5) fun.convert-px(8) 0 - var(--color-shadow-light); - } - - &:focus { - outline: solid var(--color-primary-light); - } - - &:active { - transform: scale(0.95); - box-shadow: 0 0 fun.convert-px(1) 0 var(--color-shadow), - fun.convert-px(2) fun.convert-px(2) fun.convert-px(2) 0 - var(--color-shadow-light), - 0 0 0 0 var(--color-shadow-light); - outline: none; - } - } - } - - &.aligncenter { - .blocks-gallery-grid { - align-items: center; - } - } - - @for $i from 0 to 6 { - &.columns-#{$i} { - @include mix.media("screen") { - @include mix.dimensions("xs") { - grid-template-columns: repeat(2, minmax(0, 1fr)); - - .blocks-gallery-grid { - grid-template-columns: repeat(2, minmax(0, 1fr)); - } - } - - @include mix.dimensions("sm") { - grid-template-columns: repeat(#{$i}, minmax(0, 1fr)); - - .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), - fun.convert-px(2) fun.convert-px(2) fun.convert-px(2) 0 - var(--color-shadow-light), - fun.convert-px(3) fun.convert-px(3) fun.convert-px(6) 0 - var(--color-shadow-light); - text-align: center; - } -} - -.wp-block-video { - box-shadow: 0 0 fun.convert-px(1) 0 var(--color-shadow), - fun.convert-px(2) fun.convert-px(2) fun.convert-px(2) 0 - var(--color-shadow-light), - fun.convert-px(3) fun.convert-px(3) fun.convert-px(6) 0 - var(--color-shadow-light); -} |
