From c9c1c90b30e243563bb4f731da15b3fe657556d2 Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Mon, 6 Nov 2023 18:08:04 +0100 Subject: 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 --- .../post-preview/post-preview.module.scss | 96 ++++++++++++++++++++++ 1 file changed, 96 insertions(+) create mode 100644 src/components/organisms/post-preview/post-preview.module.scss (limited to 'src/components/organisms/post-preview/post-preview.module.scss') 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; + } + } + } + } + } +} -- cgit v1.2.3