diff options
| author | Armand Philippot <git@armandphilippot.com> | 2023-11-06 18:08:04 +0100 |
|---|---|---|
| committer | Armand Philippot <git@armandphilippot.com> | 2023-11-11 18:15:27 +0100 |
| commit | c9c1c90b30e243563bb4f731da15b3fe657556d2 (patch) | |
| tree | 8263c176b4096e2893b9d9319bfa7edb01fce188 /src/components/organisms/post-preview/post-preview.module.scss | |
| parent | 2771de88f40a5f4ed7480bd8614532dda72deeda (diff) | |
refactor(components): replace Summary component with PostPreview
* rename component to PostPreview because Summary is an HTML element
and it could lead to confusion
* replace `title` and `titleLevel` with `heading` and `headingLvl`
because `title` is a native attribute
* rename `intro` prop to `excerpt`
* extract `cover` from `meta` prop
* rewrite meta type
* extract meta logic into a new component
Diffstat (limited to 'src/components/organisms/post-preview/post-preview.module.scss')
| -rw-r--r-- | src/components/organisms/post-preview/post-preview.module.scss | 96 |
1 files changed, 96 insertions, 0 deletions
diff --git a/src/components/organisms/post-preview/post-preview.module.scss b/src/components/organisms/post-preview/post-preview.module.scss new file mode 100644 index 0000000..2ff2e0e --- /dev/null +++ b/src/components/organisms/post-preview/post-preview.module.scss @@ -0,0 +1,96 @@ +@use "../../../styles/abstracts/placeholders"; + +.wrapper { + &:hover { + .icon { + :global { + animation: pulse 1.5s ease-in-out 0.2s infinite; + } + } + } +} + +.heading { + font-size: var(--font-size-2xl); +} + +.excerpt { + > *:last-child { + margin-bottom: 0; + } + + :global { + a { + @extend %link; + + &[hreflang], + &.download, + &.external { + @extend %link-with-icon; + } + + &[hreflang] { + @extend %link-with-lang; + } + + &[hreflang]:not(.download, .external) { + --is-icon-hidden: ""; + } + + &.download { + @extend %download-link; + } + + &.external { + @extend %external-link; + } + + &.download, + &.external { + &:not([hreflang]) { + --is-lang-hidden: ""; + } + } + + &.external.download { + @extend %external-download-link; + } + } + } +} + +:global([data-theme="light"]) { + :local { + .intro { + :global { + a { + &.download { + @extend %light-download-link; + } + + &.external { + @extend %light-external-link; + } + } + } + } + } +} + +:global([data-theme="dark"]) { + :local { + .intro { + :global { + a { + &.download { + @extend %dark-download-link; + } + + &.external { + @extend %dark-external-link; + } + } + } + } + } +} |
