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

Fix style and responsive issues

Browse Source
This commit is contained in:
Félix Péault
2021-12-14 23:19:46 +01:00
parent 2f7082fd9d
commit ac03348349
10 changed files with 45 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/atoms/Icon.svelte
View File

@@ -5,6 +5,6 @@
const classes = [$$props.class].join(' ').trim()
</script>
<svg class={classes} aria-label={label}>
<svg class={classes} aria-label={label} width="32" height="32">
<use xlink:href="#icon-{icon}" />
</svg>

6
src/components/organisms/Footer.svelte
View File

@@ -37,11 +37,5 @@
</li>
</ul>
</nav>
<div class="footer__ctf">
<a href="https://cetrucflotte.com" target="_blank" rel="noopener external">
<img src="/images/logo-ctf.svg" alt="Cetrucflotte logo" width="140" height="24">
</a>
</div>
</div>
</footer>

2
src/style/_effects.scss
View File

@@ -51,7 +51,7 @@
perspective: 300px;
}
.text-split__line {
--offset-y: 100%;
--offset-y: 66%;
transform-origin: bottom center;
&:last-child {

2
src/style/atoms/_box-cta.scss
View File

@@ -39,7 +39,7 @@
}
span {
display: block;
margin-left: 24px;
margin-left: 20px;
color: $color-secondary-light;
text-align: left;
font-weight: 300;

21
src/style/atoms/_button-cart.scss
View File

@@ -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);
}
}
}

5
src/style/atoms/_button.scss
View File

@@ -106,11 +106,6 @@
color: $color-text;
background-color: darken($color-secondary, 7);
}
.text-split__line {
&:last-child {
color: $color-primary-dark;
}
}
}
// Beige

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

@@ -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) {

2
src/style/molecules/_shop-locationswitcher.scss
View File

@@ -1,4 +1,6 @@
.shop-locationswitcher {
pointer-events: auto;
dt {
color: $color-primary;
font-weight: 400;

48
src/style/organisms/_footer.scss
View File

@@ -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;
}
}
}

19
src/style/pages/_homepage.scss
View File

@@ -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);