Code optimization and fixes
This commit is contained in:
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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)
|
||||
|
||||
Reference in New Issue
Block a user