Code optimization and fixes

This commit is contained in:
2020-02-14 12:37:35 +01:00
parent 29f6e7e645
commit 450de171e6
12 changed files with 61 additions and 38 deletions

View File

@@ -2,6 +2,7 @@ html {
font: #{$base-font-size} $font-sans;
color: $color-text;
scroll-behavior: smooth;
min-width: 320px;
@media screen and (prefers-reduced-motion: reduce) {
scroll-behavior: auto;

View File

@@ -23,7 +23,7 @@
&__left {
display: flex;
justify-content: center;
margin-bottom: 32px;
margin-bottom: 40px;
@include breakpoint (sm) {
margin: 0;
@@ -41,7 +41,7 @@
// Instagram
.instagram {
margin-bottom: 20px;
margin-bottom: 32px;
@include breakpoint (sm) {
margin: 0 40px 0 0;
@@ -72,7 +72,7 @@
img {
display: inline-block;
margin: 12px 0 0 12px;
margin: 8px 0 0 12px;
@include breakpoint (sm) {
margin-left: 16px;

View File

@@ -33,10 +33,11 @@
// Photo
&--photo {
position: absolute;
background-color: $color-primary;
overflow: hidden;
box-shadow: 0 16px 56px rgba(#2E025C, 0.7);
position: absolute;
display: block;
background-color: $color-primary;
box-shadow: 0 15px 60px rgba(#000, 0.3);
transition: transform 600ms $ease-quart;
@include breakpoint (sm) {
@@ -47,7 +48,7 @@
display: block;
height: auto;
width: 100%;
opacity: 0.55;
opacity: 0.6;
transition: opacity 600ms $ease-quart;
}

View File

@@ -143,8 +143,11 @@
.photo {
display: flex;
flex-direction: column-reverse;
margin-bottom: 72px;
margin-bottom: 40px;
@include breakpoint (m) {
margin-bottom: pxVW(176);
}
@include breakpoint (md) {
margin-bottom: 0;
}

View File

@@ -50,9 +50,10 @@
// Gallery
.gallery {
&__images--photo {
background-color: $color-secondary;
box-shadow: 0 15px 60px rgba(#000, 0.3);
&__images {
&--photo {
background-color: $color-secondary;
}
}
}
}

View File

@@ -79,6 +79,13 @@
.gallery {
left: 0;
right: 0;
// Specific box shadow for images
&__images {
&--photo {
box-shadow: 0 16px pxVW(40) rgba(#2E025C, 0.4);
}
}
}
// Information

View File

@@ -24,17 +24,17 @@
.wrap {
max-width: 1648px;
margin: 0 auto;
padding: 0 24px;
padding: 0 16px;
@include breakpoint (m) {
padding: 0 24px;
}
@include breakpoint (sm) {
padding: 0 60px;
}
@include breakpoint (md) {
padding: 0 128px;
}
@include breakpoint (xxl) {
// padding: 0 48px;
}
}
// Wrapper (inside and more spaced)