Félix Péault
debd9a41c1
- Add a transition in on each photo component (scale down + fade in), TODO: Parallax on number - Illustration takes two images and changes the source depending on the viewport size
213 lines
4.8 KiB
SCSS
213 lines
4.8 KiB
SCSS
.photos {
|
|
position: relative;
|
|
margin-top: -22px;
|
|
overflow-x: hidden;
|
|
background-color: #fff;
|
|
|
|
@include breakpoint (sm) {
|
|
margin-top: -128px;
|
|
padding-top: 88px;
|
|
}
|
|
@include breakpoint (xl) {
|
|
padding-top: 72px;
|
|
}
|
|
|
|
// Sidebar
|
|
&__side {
|
|
display: none;
|
|
|
|
@include breakpoint (md) {
|
|
display: flex;
|
|
position: absolute;
|
|
z-index: 5;
|
|
left: 24px;
|
|
flex-direction: row-reverse;
|
|
align-items: flex-end;
|
|
transform-origin: left top;
|
|
transform: rotate(-90deg) translateX(-100%);
|
|
}
|
|
|
|
p {
|
|
font-size: rem(12px);
|
|
color: $color-lightgray;
|
|
margin-right: 24px;
|
|
|
|
strong {
|
|
font-weight: 600;
|
|
display: block;
|
|
text-align: right;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Container
|
|
&__sidewrap {
|
|
@include breakpoint (md) {
|
|
position: sticky;
|
|
z-index: 10;
|
|
top: 32px;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
// Each photo
|
|
.photo {
|
|
position: relative;
|
|
z-index: 4;
|
|
margin-bottom: 88px;
|
|
|
|
@include breakpoint (sm) {
|
|
margin-bottom: 120px;
|
|
}
|
|
|
|
// Last photo doesn't need spacing
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
|
|
/*
|
|
** List view
|
|
*/
|
|
&--list {
|
|
.photos__view {
|
|
max-width: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
// Photo
|
|
.photo {
|
|
@include breakpoint (sm) {
|
|
// 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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Number
|
|
&__number {
|
|
@include breakpoint (sm) {
|
|
will-change: transform;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Pagination
|
|
.pagination {
|
|
margin-top: 104px;
|
|
|
|
@include breakpoint (sm) {
|
|
margin-top: -64px;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
/*
|
|
** Grid view
|
|
*/
|
|
&--grid {
|
|
.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 (1776px) {
|
|
padding-right: 0;
|
|
}
|
|
}
|
|
|
|
// Photo
|
|
.photo {
|
|
display: flex;
|
|
flex-direction: column-reverse;
|
|
margin-bottom: 40px;
|
|
|
|
@include breakpoint (m) {
|
|
margin-bottom: pxVW(176);
|
|
}
|
|
@include breakpoint (md) {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
// Every second (on column 2)
|
|
&:nth-child(2n+2) {
|
|
@include breakpoint (md) {
|
|
transform: translateY(-64px);
|
|
}
|
|
}
|
|
|
|
.wrap, .wrapper {
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
// Location
|
|
&__location {
|
|
text-align: left;
|
|
|
|
h2 {
|
|
font-size: rem(28px);
|
|
margin-top: 28px;
|
|
white-space: normal;
|
|
}
|
|
|
|
p {
|
|
font-size: rem(12px);
|
|
margin-top: 8px;
|
|
}
|
|
}
|
|
|
|
// Image informations
|
|
&__img {
|
|
border-radius: 8px;
|
|
}
|
|
&__number {
|
|
font-size: rem(96px);
|
|
bottom: -88px;
|
|
right: 24px;
|
|
z-index: 1;
|
|
transform: none;
|
|
top: auto;
|
|
left: auto;
|
|
}
|
|
&__date {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
// Pagination
|
|
.pagination {
|
|
margin-top: 64px;
|
|
}
|
|
}
|
|
}
|