aboutsummaryrefslogtreecommitdiffstats
path: root/src/components/organisms/post-preview/post-preview.module.scss
diff options
context:
space:
mode:
authorArmand Philippot <git@armandphilippot.com>2023-11-06 18:08:04 +0100
committerArmand Philippot <git@armandphilippot.com>2023-11-11 18:15:27 +0100
commitc9c1c90b30e243563bb4f731da15b3fe657556d2 (patch)
tree8263c176b4096e2893b9d9319bfa7edb01fce188 /src/components/organisms/post-preview/post-preview.module.scss
parent2771de88f40a5f4ed7480bd8614532dda72deeda (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.scss96
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;
+ }
+ }
+ }
+ }
+ }
+}