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

Fix Locations continents filters centering and sizing

Browse Source
This commit is contained in:
Félix Péault
2021-10-19 17:30:31 +02:00
parent a73c0e11a3
commit 8810dfb197
2 changed files with 14 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/style/molecules/_location.scss
View File

@@ -8,10 +8,10 @@
a { a {
display: flex; display: flex;
align-items: center;
text-decoration: none; text-decoration: none;
@include bp (sm) { @include bp (sm) {
align-items: center;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
padding: 24px; padding: 24px;
@@ -55,11 +55,12 @@
&__flag { &__flag {
img { img {
display: block; display: block;
margin: 0 auto; margin: 2px auto 0;
border-radius: 100%; border-radius: 100%;
margin-right: 24px; margin-right: 24px;
@include bp (sm) { @include bp (sm) {
margin-top: 0;
margin-right: 0; margin-right: 0;
} }
} }
@@ -78,6 +79,9 @@
@include bp (sm) { @include bp (sm) {
margin: 20px 0 8px; margin: 20px 0 8px;
font-size: rem(40px);
}
@include bp (sd) {
font-size: rem(48px); font-size: rem(48px);
} }
} }

14
src/style/organisms/_locations.scss
View File

@@ -1,6 +1,5 @@
.browse { .browse {
margin: 96px 0; margin: 96px 0;
text-align: center;
@include bp (sm) { @include bp (sm) {
margin-bottom: 128px; margin-bottom: 128px;
@@ -25,10 +24,9 @@
// Continents // Continents
&__continents { &__continents {
display: inline-flex; display: flex;
justify-content: center; justify-content: center;
text-align: center; pointer-events: none;
margin: 0 auto;
&:hover { &:hover {
li { li {
@@ -38,6 +36,7 @@
li { li {
display: block; display: block;
margin: 0 8px; margin: 0 8px;
pointer-events: auto;
transition: opacity 0.6s var(--ease-quart); transition: opacity 0.6s var(--ease-quart);
&:hover { &:hover {
@@ -64,7 +63,7 @@
justify-content: center; justify-content: center;
grid-gap: 24px 24px; grid-gap: 24px 24px;
width: 85%; width: 85%;
padding: 0; padding: 0 24px;
} }
@include bp (sm) { @include bp (sm) {
display: flex; display: flex;
@@ -72,6 +71,9 @@
width: 100%; width: 100%;
margin-top: 104px; margin-top: 104px;
} }
@include bp (sd) {
padding: 0;
}
li { li {
display: block; display: block;
@@ -80,7 +82,7 @@
@include bp (mob-lg) { @include bp (mob-lg) {
margin-bottom: 0; margin-bottom: 0;
} }
@include bp (sm) { @include bp (sd) {
margin: 0 22px 56px; margin: 0 22px 56px;
} }
} }