flayks/housesof
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Fix Postcard style and hover + rename class

Browse Source
This commit is contained in:
Félix Péault
2021-10-16 15:54:11 +02:00
parent 60ea3d2cb1
commit 36f4c5a330
4 changed files with 22 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/molecules/PostCard.svelte
View File

@@ -8,21 +8,21 @@
export let flagId: string export let flagId: string
</script> </script>
<div class="post-card"> <div class="postcard">
<div class="post-card__left"> <div class="postcard__left">
<h3 class="post-card__country"> <h3 class="postcard__country">
<span>Houses of</span><br> <span>Houses of</span><br>
<strong class="title-country__purple">{country}</strong> <strong class="title-country__purple">{country}</strong>
</h3> </h3>
</div> </div>
<div class="post-card__right"> <div class="postcard__right">
<div class="post-card__stamp"> <div class="postcard__stamp">
<div class="frame"> <div class="frame">
<img src="/images/icons/stamp.svg" width="32" height="42" alt="Stamp"> <img src="/images/icons/stamp.svg" width="32" height="42" alt="Stamp">
</div> </div>
<Image class="flag" id={flagId} width={32} height={32} alt="Flag of {country}" /> <Image class="flag" id={flagId} width={32} height={32} alt="Flag of {country}" />
</div> </div>
<ul class="post-card__address"> <ul class="postcard__address">
<li>{street}</li> <li>{street}</li>
<li>{location}{region ? `, ${region}` : ''}</li> <li>{location}{region ? `, ${region}` : ''}</li>
<li>{country}</li> <li>{country}</li>

21
src/style/modules/_post-card.scss → src/style/modules/_postcard.scss
View File

@@ -1,14 +1,16 @@
.post-card { .postcard {
--gap: clamp(8px, 0.7vw, 20px);
display: grid; display: grid;
grid-template-columns: 40% 60%; grid-template-columns: min(140px, 40%) 1fr;
align-items: baseline; align-items: baseline;
height: 100%; height: 100%;
width: 100%; width: 100%;
height: 100%; height: 100%;
max-width: 333px; max-width: 333px;
max-height: 222px; max-height: 222px;
padding: clamp(12px, 1.5vw, 32px); padding: clamp(12px, 1vw, 20px);
padding-left: clamp(8px, 1vw, 24px); padding-left: var(--gap);
padding-right: calc(var(--gap) * 2);
background: $color-cream; background: $color-cream;
box-shadow: 0 16px 12px rgba(#000, 0.15), 0 26px 52px rgba(#000, 0.2); box-shadow: 0 16px 12px rgba(#000, 0.15), 0 26px 52px rgba(#000, 0.2);
@@ -17,7 +19,7 @@
align-items: flex-end; align-items: flex-end;
height: 100%; height: 100%;
padding-bottom: 4px; padding-bottom: 4px;
padding-right: clamp(8px, 1vw, 24px); padding-right: var(--gap);
border-right: 1px solid rgba(#000, 0.2); border-right: 1px solid rgba(#000, 0.2);
} }
&__right { &__right {
@@ -32,7 +34,7 @@
&__country { &__country {
position: relative; position: relative;
margin-top: auto; margin-top: auto;
font-size: clamp(#{rem(12px)}, 1.2vw, #{rem(32px)}); font-size: clamp(#{rem(12px)}, 1.2vw, #{rem(22px)});
color: $color-primary; color: $color-primary;
font-family: $font-serif; font-family: $font-serif;
line-height: 1.1; line-height: 1.1;
@@ -78,13 +80,14 @@
// Address // Address
ul { ul {
margin-top: auto; margin-top: auto;
padding-left: clamp(8px, 1vw, 24px); padding-left: var(--gap);
width: 100%;
li { li {
display: block; display: block;
margin-bottom: max(2px, 0.25vw); margin-bottom: clamp(2px, 0.25vw, 4px);
color: $color-text; color: $color-text;
font-size: clamp(#{rem(11px)}, 0.8vw, #{rem(24px)}); font-size: clamp(#{rem(11px)}, 0.8vw, #{rem(16px)});
line-height: 1.4; line-height: 1.4;
border-bottom: 1px solid #D9CABD; border-bottom: 1px solid #D9CABD;
} }

7
src/style/pages/_photos.scss
View File

@@ -340,21 +340,20 @@
// Postcard // Postcard
.post-card { .postcard {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
right: 0; right: 0;
border-top-left-radius: 8px; border-top-left-radius: 8px;
opacity: 0; opacity: 0;
pointer-events: none; pointer-events: none;
// transform: translate3d(10%,25%,0) rotate(-2deg);
transform: translate3d(12%, 23%, 0) rotate(-5deg); transform: translate3d(12%, 23%, 0) rotate(-5deg);
transition: opacity 0.4s var(--ease-quart), transform 1.2s var(--ease-quart); transition: opacity 0.4s var(--ease-quart), transform 1.0s var(--ease-quart);
} }
// Show postcard on hover // Show postcard on hover
&:hover { &:hover {
.post-card { .postcard {
opacity: 1; opacity: 1;
transform: translate3d(3%,3%,0) rotate(2deg); transform: translate3d(3%,3%,0) rotate(2deg);
} }

2
src/style/style.scss
View File

@@ -29,7 +29,7 @@
// Modules // Modules
@import "modules/globe"; @import "modules/globe";
@import "modules/post-card"; @import "modules/postcard";
// Atomic Design System // Atomic Design System