diff --git a/src/components/molecules/PostCard.svelte b/src/components/molecules/PostCard.svelte index 55d06a8..8ee70e2 100644 --- a/src/components/molecules/PostCard.svelte +++ b/src/components/molecules/PostCard.svelte @@ -6,14 +6,22 @@ export let region: string = undefined export let country: string export let flagId: string + export let size: string = undefined + + const className = 'postcard' + $: classes = [ + className, + ...[size].map(variant => variant && `${className}--${variant}`), + $$props.class + ].join(' ').trim() -
+
-

+

Houses of
{country} -

+

diff --git a/src/style/modules/_postcard.scss b/src/style/modules/_postcard.scss index e329dd0..fb287f0 100644 --- a/src/style/modules/_postcard.scss +++ b/src/style/modules/_postcard.scss @@ -8,9 +8,10 @@ height: 100%; max-width: 333px; max-height: 222px; - padding: clamp(12px, 1vw, 20px); - padding-left: var(--gap); + padding-top: clamp(12px, 1vw, 20px); padding-right: calc(var(--gap) * 2); + padding-bottom: clamp(12px, 1.25vw, 32px); + padding-left: var(--gap); background: $color-cream; box-shadow: 0 16px 12px rgba(#000, 0.15), 0 26px 52px rgba(#000, 0.2); @@ -34,11 +35,18 @@ &__country { position: relative; margin-top: auto; - font-size: clamp(#{rem(12px)}, 1.2vw, #{rem(22px)}); + font-size: clamp(#{rem(14px)}, 2vw, #{rem(22px)}); color: $color-primary; font-family: $font-serif; line-height: 1.1; + @include bp (sm) { + font-size: clamp(#{rem(14px)}, 2.5vw, #{rem(22px)}); + } + @include bp (sd) { + font-size: clamp(#{rem(14px)}, 1.35vw, #{rem(22px)}); + } + strong { color: $color-secondary; font-weight: 300; @@ -57,6 +65,9 @@ height: auto; } + .frame { + width: 32px; + } .flag { position: absolute; top: 10px; @@ -69,8 +80,6 @@ overflow: hidden; img { - display: block; - width: 100%; height: 100%; object-fit: contain; } @@ -87,9 +96,91 @@ display: block; margin-bottom: clamp(2px, 0.25vw, 4px); color: $color-text; - font-size: clamp(#{rem(11px)}, 0.8vw, #{rem(16px)}); + font-size: clamp(#{rem(11px)}, 1.2vw, #{rem(16px)}); line-height: 1.4; border-bottom: 1px solid #D9CABD; + + @include bp (sd) { + font-size: clamp(#{rem(12px)}, 0.8vw, #{rem(16px)}); + } + } + } + + + + /* + ** Variants + */ + // Small size + &--small { + opacity: 1 !important; + top: 0; + left: 0; + width: 100%; + height: 100%; + border-radius: 0; + transform: none !important; + max-width: 100%; + max-height: 100%; + grid-template: 1fr 2fr / 1fr; + padding: 12px; + + ul { + padding-left: 0; + } + + .postcard { + // Country + &__left { + height: auto; + border: none; + margin: auto 0; + padding-right: 40px; + + br { + display: none; + } + } + &__country { + font-size: clamp(#{rem(12px)}, 3.25vw, #{rem(24px)}); + + @include bp (sm) { + font-size: clamp(#{rem(12px)}, 1.75vw, #{rem(20px)}); + } + @include bp (sd) { + font-size: clamp(#{rem(12px)}, 1.5vw, #{rem(22px)}); + } + } + + // Infos + &__right { + position: static; + + .flag { + width: 18px; + height: 18px; + } + } + &__stamp { + top: 8px; + right: 8px; + + .frame { + width: 28px; + } + } + &__address { + li { + font-size: clamp(#{rem(10px)}, 2vw, #{rem(16px)}); + + @include bp (sm) { + font-size: clamp(#{rem(11px)}, 1.1vw, #{rem(16px)}); + } + @include bp (sd) { + font-size: clamp(#{rem(11px)}, 0.9vw, #{rem(16px)}); + } + } + } } } } \ No newline at end of file diff --git a/src/style/pages/_photos.scss b/src/style/pages/_photos.scss index ba75472..5cfd045 100644 --- a/src/style/pages/_photos.scss +++ b/src/style/pages/_photos.scss @@ -325,6 +325,10 @@ opacity: 0; transform: translate3d(12%, 23%, 0) rotate(-5deg); transition: opacity 0.4s var(--ease-quart), transform 1.0s var(--ease-quart); + + &--small { + border-radius: 0; + } } // Show postcard on hover