WIP
This commit is contained in:
@@ -11,11 +11,19 @@
|
||||
max-width: 1424px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Gallery
|
||||
.gallery {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
margin: 0 auto;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
max-width: 85%;
|
||||
}
|
||||
@include breakpoint (xl) {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
// Images
|
||||
&__images {
|
||||
@@ -26,43 +34,80 @@
|
||||
// Photo
|
||||
&--photo {
|
||||
position: absolute;
|
||||
background-color: $color-secondary;
|
||||
background-color: $color-primary;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 15px 60px rgba(#000, .3);
|
||||
box-shadow: 0 16px 56px rgba(#2E025C, 0.7);
|
||||
transition: transform 600ms $ease-quart;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
|
||||
img {
|
||||
display: block;
|
||||
height: auto;
|
||||
width: 100%;
|
||||
opacity: 0.55;
|
||||
transition: opacity 600ms $ease-quart;
|
||||
}
|
||||
|
||||
// Temp hiding
|
||||
&:nth-of-type(4), &:nth-of-type(5) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Specific
|
||||
.front {
|
||||
// Active photo
|
||||
.active {
|
||||
z-index: 10;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 100%;
|
||||
transform: translate3d(-50%, -50%, 0);
|
||||
|
||||
img {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// Variables
|
||||
$hoverAngle: 1.25deg;
|
||||
$hoverDistance: 7%;
|
||||
|
||||
// Previous photo
|
||||
.prev {
|
||||
@include breakpoint (sm) {
|
||||
top: 50%;
|
||||
transform: translate(-5%, -50%) rotate(-1deg);
|
||||
transform: translate3d(-6%, -50%, 0) rotate(-1deg);
|
||||
width: 85%;
|
||||
}
|
||||
|
||||
// Hover
|
||||
&.hover {
|
||||
transform: translate3d(-$hoverDistance, -50%, 0) rotate(-$hoverAngle);
|
||||
|
||||
img {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Next photo
|
||||
.next {
|
||||
@include breakpoint (sm) {
|
||||
top: 50%;
|
||||
transform: translate(5%, -50%) rotate(1deg);
|
||||
width: 85%;
|
||||
right: 0;
|
||||
transform: translate3d(6%, -50%, 0) rotate(1deg);
|
||||
width: 85%;
|
||||
}
|
||||
|
||||
// Hover
|
||||
&.hover {
|
||||
transform: translate3d($hoverDistance, -50%, 0) rotate($hoverAngle);
|
||||
|
||||
img {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -82,16 +127,16 @@
|
||||
width: 100%;
|
||||
z-index: 11;
|
||||
|
||||
.prev {
|
||||
.dir-left {
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.next {
|
||||
.dir-right {
|
||||
transform: translateX(50%);
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
box-shadow: 0 2px 21px rgba(#000, .15);
|
||||
box-shadow: 0 2px 21px rgba(#000, 0.15);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -105,16 +150,17 @@
|
||||
.street {
|
||||
margin-top: 24px;
|
||||
color: #fff;
|
||||
|
||||
|
||||
@include breakpoint (sm) {
|
||||
margin-top: 5vw;
|
||||
margin-top: pxVW(80);
|
||||
}
|
||||
@include breakpoint (xl) {
|
||||
margin-top: 72px;
|
||||
}
|
||||
}
|
||||
.state {
|
||||
color: rgba($color-tertiary, .5);
|
||||
margin-top: 4px;
|
||||
color: rgba($color-tertiary, 0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -131,16 +177,24 @@
|
||||
|
||||
li {
|
||||
display: block;
|
||||
margin: 0 3px;
|
||||
padding: 0 4px;
|
||||
cursor: pointer;
|
||||
|
||||
&.active a {
|
||||
&.active button {
|
||||
background-color: $color-secondary;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
button {
|
||||
background-color: lighten($color-lightpurple, 10);
|
||||
}
|
||||
}
|
||||
}
|
||||
a {
|
||||
button {
|
||||
display: block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
padding: 0;
|
||||
background-color: $color-lightpurple;
|
||||
border-radius: 50vh;
|
||||
text-decoration: none;
|
||||
@@ -149,7 +203,10 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Zoomer
|
||||
|
||||
/*
|
||||
** Zoomer
|
||||
*/
|
||||
.zoomer {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
|
||||
@@ -8,7 +8,9 @@
|
||||
}
|
||||
|
||||
// Description
|
||||
.description {
|
||||
&__description {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-bottom: 32px;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
@@ -41,9 +43,12 @@
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
grid-column-gap: 120px;
|
||||
grid-row-gap: 7.5vw;
|
||||
grid-row-gap: pxVW(120);
|
||||
justify-content: center;
|
||||
margin-bottom: 14.5vw;
|
||||
margin-bottom: pxVW(232);
|
||||
}
|
||||
@include breakpoint (xl) {
|
||||
margin-bottom: 232px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -101,7 +106,7 @@
|
||||
display: block;
|
||||
width: 216px;
|
||||
height: 216px;
|
||||
background: rgba($color-lightpurple, .3);
|
||||
background: rgba($color-lightpurple, 0.3);
|
||||
border-radius: 50vh;
|
||||
transition: all 85ms ease-in-out;
|
||||
}
|
||||
|
||||
@@ -1,35 +1,44 @@
|
||||
.photos {
|
||||
position: relative;
|
||||
margin-top: -22px;
|
||||
padding-bottom: 102px;
|
||||
background-color: #fff;
|
||||
|
||||
|
||||
@include breakpoint (sm) {
|
||||
margin-top: -128px;
|
||||
padding-top: 88px;
|
||||
}
|
||||
@include breakpoint (xl) {
|
||||
padding-top: 72px;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
// Sidebar
|
||||
&__side {
|
||||
position: absolute;
|
||||
z-index: 5;
|
||||
top: 40px;
|
||||
left: 24px;
|
||||
height: 96%;
|
||||
pointer-events: none;
|
||||
|
||||
// Sticky
|
||||
.sticky {
|
||||
position: sticky;
|
||||
top: 16px;
|
||||
display: none;
|
||||
|
||||
@include breakpoint (md) {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
z-index: 5;
|
||||
left: 24px;
|
||||
flex-direction: row-reverse;
|
||||
align-items: flex-end;
|
||||
transform: rotate(270deg) translate(-46%,-240%);
|
||||
transform-origin: 50% 50%;
|
||||
}
|
||||
|
||||
// Container
|
||||
&--wrap {
|
||||
@include breakpoint (md) {
|
||||
position: sticky;
|
||||
z-index: 10;
|
||||
top: 16px;
|
||||
height: 100%;
|
||||
}
|
||||
@include breakpoint (xl) {
|
||||
top: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: rem(12px);
|
||||
color: $color-lightgray;
|
||||
@@ -43,13 +52,12 @@
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Each photo
|
||||
.photo {
|
||||
position: relative;
|
||||
z-index: 4;
|
||||
margin-bottom: 102px;
|
||||
|
||||
margin-bottom: 104px;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
margin-bottom: 120px;
|
||||
}
|
||||
@@ -60,59 +68,92 @@
|
||||
}
|
||||
}
|
||||
|
||||
// List view
|
||||
|
||||
/*
|
||||
** List view
|
||||
*/
|
||||
&--list {
|
||||
& > .wrap {
|
||||
.photos__view {
|
||||
max-width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
// Photo
|
||||
.photo {
|
||||
// Even photos
|
||||
&:nth-child(even) {
|
||||
// Location
|
||||
.photo__location, h2 {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
// Image
|
||||
.photo__image {
|
||||
justify-content: flex-end;
|
||||
|
||||
&--date {
|
||||
right: 100%;
|
||||
left: -30px;
|
||||
}
|
||||
&--number {
|
||||
right: 77%;
|
||||
left: auto;
|
||||
@include breakpoint (sm) {
|
||||
.photo {
|
||||
// Even photos
|
||||
&:nth-child(even) {
|
||||
// Location
|
||||
.photo__location, h2 {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
// Image
|
||||
.photo__image {
|
||||
justify-content: flex-end;
|
||||
|
||||
&--date {
|
||||
right: 100%;
|
||||
left: -30px;
|
||||
}
|
||||
&--number {
|
||||
right: 77%;
|
||||
left: auto;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Pagination
|
||||
.pagination {
|
||||
margin-top: 104px;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
margin-top: -64px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Grid view
|
||||
|
||||
/*
|
||||
** Grid view
|
||||
*/
|
||||
&--grid {
|
||||
& > .wrap {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
grid-column-gap: 48px;
|
||||
grid-row-gap: 72px;
|
||||
padding-left: 192px;
|
||||
padding-right: 64px;
|
||||
.photos__view {
|
||||
@include breakpoint (md) {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
grid-column-gap: 48px;
|
||||
grid-row-gap: 72px;
|
||||
padding-left: 192px;
|
||||
padding-right: 64px;
|
||||
}
|
||||
@include breakpoint (xxl) {
|
||||
padding-left: 192px;
|
||||
}
|
||||
@include breakpoint (1648px) {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Photo
|
||||
.photo {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
margin-bottom: 0;
|
||||
margin-bottom: 72px;
|
||||
|
||||
@include breakpoint (md) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
// Every second (on column 2)
|
||||
&:nth-child(2n+2) {
|
||||
transform: translateY(-64px);
|
||||
@include breakpoint (md) {
|
||||
transform: translateY(-64px);
|
||||
}
|
||||
}
|
||||
|
||||
.wrap, .wrapper {
|
||||
@@ -123,7 +164,7 @@
|
||||
// Location
|
||||
&__location {
|
||||
text-align: left;
|
||||
|
||||
|
||||
h2 {
|
||||
font-size: rem(28px);
|
||||
margin-top: 28px;
|
||||
@@ -152,5 +193,10 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Pagination
|
||||
.pagination {
|
||||
margin-top: 64px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user