diff options
Diffstat (limited to 'src/styles')
| -rw-r--r-- | src/styles/pages/article.module.scss | 2 | ||||
| -rw-r--r-- | src/styles/pages/partials/_article-media.scss | 17 | ||||
| -rw-r--r-- | src/styles/pages/partials/_article-wp-blocks.scss | 32 | 
3 files changed, 35 insertions, 16 deletions
| diff --git a/src/styles/pages/article.module.scss b/src/styles/pages/article.module.scss index 04acad9..a5299fe 100644 --- a/src/styles/pages/article.module.scss +++ b/src/styles/pages/article.module.scss @@ -11,7 +11,7 @@    margin-right: var(--spacing-2xs);    padding: var(--spacing-2xs) var(--spacing-xs); -  &__icon { +  figure {      max-width: fun.convert-px(22);      margin-right: var(--spacing-2xs);    } diff --git a/src/styles/pages/partials/_article-media.scss b/src/styles/pages/partials/_article-media.scss index 8359881..0cd3654 100644 --- a/src/styles/pages/partials/_article-media.scss +++ b/src/styles/pages/partials/_article-media.scss @@ -1,11 +1,20 @@ +@use "@styles/abstracts/functions" as fun; +  @mixin styles {    figure { -    margin: var(--spacing-md) 0; +    display: flex; +    flex-flow: column; +    width: fit-content; +    margin: 0 auto; +    position: relative; +    text-align: center;    }    figcaption { -    margin-top: var(--spacing-xs); -    font-size: var(--font-size-sm); -    text-align: center; +    margin: 0; +    padding: fun.convert-px(4) var(--spacing-2xs); +    background: var(--color-bg-secondary); +    border: fun.convert-px(1) solid var(--color-border-light); +    font-weight: 500;    }  } diff --git a/src/styles/pages/partials/_article-wp-blocks.scss b/src/styles/pages/partials/_article-wp-blocks.scss index f75a4d5..33e59a1 100644 --- a/src/styles/pages/partials/_article-wp-blocks.scss +++ b/src/styles/pages/partials/_article-wp-blocks.scss @@ -62,6 +62,24 @@      }    } +  .wp-block-image { +    display: flex; +    flex-flow: column; +    width: fit-content; +    margin: 0 auto; +    padding: fun.convert-px(4); +    position: relative; +    border: fun.convert-px(1) solid var(--color-border); +    box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1) 0 +      var(--color-shadow); +    text-align: center; + +    figcaption { +      margin-top: fun.convert-px(4); +      font-size: var(--font-size-sm); +    } +  } +    .wp-block-gallery {      display: grid;      grid-template-columns: minmax(0, 1fr); @@ -142,18 +160,10 @@          }        }      } -  } -  .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-image img { +      height: 100%; +      object-fit: cover;      }    } | 
