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

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