Fix style and responsive issues
This commit is contained in:
@@ -51,7 +51,7 @@
|
||||
perspective: 300px;
|
||||
}
|
||||
.text-split__line {
|
||||
--offset-y: 100%;
|
||||
--offset-y: 66%;
|
||||
transform-origin: bottom center;
|
||||
|
||||
&:last-child {
|
||||
|
||||
@@ -39,7 +39,7 @@
|
||||
}
|
||||
span {
|
||||
display: block;
|
||||
margin-left: 24px;
|
||||
margin-left: 20px;
|
||||
color: $color-secondary-light;
|
||||
text-align: left;
|
||||
font-weight: 300;
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
// Cart
|
||||
.button-cart {
|
||||
display: none;
|
||||
position: relative;
|
||||
pointer-events: auto;
|
||||
|
||||
@include bp (sm) {
|
||||
display: flex;
|
||||
@@ -14,11 +13,11 @@
|
||||
|
||||
// Icon
|
||||
svg {
|
||||
color: #fff;
|
||||
display: block;
|
||||
width: 27px;
|
||||
height: 27px;
|
||||
width: min(65%, 27px);
|
||||
height: min(65%, 27px);
|
||||
margin-top: -3px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
// Quantity label
|
||||
@@ -31,13 +30,19 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
font-size: rem(12px);
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
font-size: rem(11px);
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
background-color: $color-secondary;
|
||||
border-radius: 100%;
|
||||
opacity: 1;
|
||||
|
||||
@include bp (md) {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
font-size: rem(12px);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -106,11 +106,6 @@
|
||||
color: $color-text;
|
||||
background-color: darken($color-secondary, 7);
|
||||
}
|
||||
.text-split__line {
|
||||
&:last-child {
|
||||
color: $color-primary-dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Beige
|
||||
|
||||
@@ -69,12 +69,13 @@
|
||||
// Location name
|
||||
&__name {
|
||||
display: block;
|
||||
color: $color-secondary;
|
||||
margin: 0 0 4px;
|
||||
max-width: 304px;
|
||||
margin: 0 0 0.3em;
|
||||
font-size: rem(32px);
|
||||
font-family: $font-serif;
|
||||
font-weight: 300;
|
||||
line-height: 1.2;
|
||||
line-height: 1.1;
|
||||
color: $color-secondary;
|
||||
transition: color 0.75s var(--ease-quart);
|
||||
|
||||
@include bp (sm) {
|
||||
|
||||
@@ -1,4 +1,6 @@
|
||||
.shop-locationswitcher {
|
||||
pointer-events: auto;
|
||||
|
||||
dt {
|
||||
color: $color-primary;
|
||||
font-weight: 400;
|
||||
|
||||
@@ -10,15 +10,17 @@
|
||||
}
|
||||
|
||||
.container {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
|
||||
@include bp (sm) {
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
// Site title
|
||||
&__title {
|
||||
grid-column: span var(--columns);
|
||||
grid-row: 1;
|
||||
grid-column: 1 / span 4;
|
||||
display: block;
|
||||
margin-bottom: 40px;
|
||||
text-decoration: none;
|
||||
@@ -43,12 +45,14 @@
|
||||
|
||||
// Links
|
||||
&__links {
|
||||
grid-column: span var(--columns);
|
||||
grid-row: 2;
|
||||
grid-column: 5 / span 3;
|
||||
margin-left: auto;
|
||||
|
||||
@include bp (sm) {
|
||||
grid-column: 5 / span 16;
|
||||
grid-column: 5 / span 19;
|
||||
grid-row: 1;
|
||||
margin-left: auto;
|
||||
margin-top: 0.15em;
|
||||
}
|
||||
|
||||
ul {
|
||||
@@ -100,6 +104,8 @@
|
||||
position: relative;
|
||||
}
|
||||
svg {
|
||||
width: 1.2em;
|
||||
height: auto;
|
||||
transition: color 0.35s;
|
||||
}
|
||||
|
||||
@@ -111,34 +117,4 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Cetrucflotte logo
|
||||
&__ctf {
|
||||
grid-column: span var(--columns);
|
||||
grid-row: 2;
|
||||
margin-left: auto;
|
||||
margin-top: auto;
|
||||
max-width: 120px;
|
||||
|
||||
@include bp (sm) {
|
||||
grid-column: 19 / span 5;
|
||||
grid-row: 1;
|
||||
max-width: 112px;
|
||||
margin-top: 0;
|
||||
}
|
||||
@include bp (md) {
|
||||
max-width: 140px;
|
||||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
span {
|
||||
font-size: rem(12px);
|
||||
color: $color-lilas-bright;
|
||||
margin-right: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -4,15 +4,18 @@
|
||||
&__title {
|
||||
// Houses
|
||||
&--houses {
|
||||
margin: -20px 0 0;
|
||||
display: flex;
|
||||
margin: -28px 0 0;
|
||||
color: $color-secondary;
|
||||
text-align: center;
|
||||
|
||||
@include bp (sm) {
|
||||
margin-top: -100px;
|
||||
margin-left: calc(-1 * clamp(24px, 6vw, 64px));
|
||||
margin-top: calc(-1 * clamp(24px, 5vw, 104px));
|
||||
}
|
||||
|
||||
.text-split {
|
||||
margin-left: calc(-1 * clamp(24px, 5vw, 64px));
|
||||
}
|
||||
span {
|
||||
transition: none;
|
||||
letter-spacing: -0.06em;
|
||||
@@ -35,11 +38,11 @@
|
||||
|
||||
// Intro Section
|
||||
&__intro {
|
||||
overflow: hidden;
|
||||
padding-bottom: calc(96px + 20vw);
|
||||
background: linear-gradient(180deg, $color-tertiary 85%, $color-primary 100%), $color-tertiary;
|
||||
color: $color-text;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
padding-bottom: calc(96px + 5vw);
|
||||
|
||||
@include bp (sm) {
|
||||
padding-bottom: calc(280px + 10vw);
|
||||
@@ -77,11 +80,11 @@
|
||||
// Headline
|
||||
&__headline {
|
||||
max-width: 350px;
|
||||
margin: 100px auto 0;
|
||||
margin: clamp(24px, 10vw, 96px) auto 0;
|
||||
|
||||
@include bp (sm) {
|
||||
max-width: 524px;
|
||||
margin-top: 20px;
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
p {
|
||||
@@ -97,7 +100,7 @@
|
||||
&__photos {
|
||||
position: relative;
|
||||
max-width: 2000px;
|
||||
margin: calc(-1 * 96px + 5vw) 0 80px;
|
||||
margin: calc(-1 * 96px - 4vw) 0 80px;
|
||||
|
||||
@include bp (sm) {
|
||||
margin: calc(-1 * clamp(300px, 20vw, 500px)) auto clamp(64px, 6.5vw, 128px);
|
||||
|
||||
Reference in New Issue
Block a user