@use "@styles/abstracts/functions" as fun; @use "@styles/abstracts/mixins" as mix; .wrapper { --icon-size: #{fun.convert-px(20)}; padding: var(--spacing-2xs) 0 var(--spacing-lg); transition: all 0.3s ease-in-out 0s, border 0s; &:hover { --icon-size: #{fun.convert-px(25)}; a { > svg { :global { animation: pulse 1.5s ease-in-out 0.5s infinite; } } &:hover { > svg { animation: none; } } } } &:active { --icon-size: 0; } } .cover { width: auto; height: fun.convert-px(100); margin: 0 auto var(--spacing-sm); position: relative; border: fun.convert-px(1) solid var(--color-border); } h2.title { background: none; text-shadow: none; } @include mix.media("screen") { @include mix.dimensions("xs") { .wrapper { margin: 0; padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-md); border: fun.convert-px(1) solid var(--color-primary-dark); border-radius: fun.convert-px(3); box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1) 0 var(--color-shadow), fun.convert-px(3) fun.convert-px(3) fun.convert-px(3) fun.convert-px(-1) var(--color-shadow-light), fun.convert-px(5) fun.convert-px(5) fun.convert-px(7) fun.convert-px(-1) var(--color-shadow-light); } .read-more { font-size: var(--font-size-sm); } } @include mix.dimensions("sm") { .wrapper { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); grid-template-rows: repeat(3, max-content); column-gap: var(--spacing-md); } .cover { grid-column: 2; grid-row: 1; margin: 0 0 var(--spacing-sm); } .header { grid-column: 1; grid-row: 1; align-self: center; } .meta { grid-column: 2; grid-row: 2 / 4; } .body { grid-column: 1; grid-row: 2; } .footer { grid-column: 1; grid-row: 3; } .read-more { margin: 0; } } } ='/www.armandphilippot.com/stats/src/components/PostPreview/PostPreview.module.scss?h=v2.0.0'>stats

path: root/src/components/PostPreview/PostPreview.module.scss

blob: c30ab75dd7439990ad8281808143cd098e315196 (plain)