WIP React > Svelte
Put most of the developed design into Svelte
This commit is contained in:
190
src/style/organisms/_carousel.scss
Normal file
190
src/style/organisms/_carousel.scss
Normal file
@@ -0,0 +1,190 @@
|
||||
// Carousel
|
||||
.carousel {
|
||||
background-color: $color-primary;
|
||||
transform: translateZ(0);
|
||||
|
||||
.wrap {
|
||||
max-width: 1280px;
|
||||
padding: 0;
|
||||
|
||||
@include breakpoint (1600px) {
|
||||
max-width: 1424px;
|
||||
}
|
||||
}
|
||||
|
||||
// Gallery
|
||||
.gallery {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
|
||||
// Images
|
||||
&__images {
|
||||
position: relative;
|
||||
height: 0;
|
||||
padding-bottom: calc(100% / 1.5);
|
||||
|
||||
// Photo
|
||||
&--photo {
|
||||
position: absolute;
|
||||
background-color: $color-secondary;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 15px 60px rgba(#000, .3);
|
||||
|
||||
@include breakpoint (sm) {
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
height: auto;
|
||||
width: 100%;
|
||||
opacity: 0.55;
|
||||
}
|
||||
}
|
||||
|
||||
// Specific
|
||||
.front {
|
||||
z-index: 10;
|
||||
|
||||
img {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
.prev {
|
||||
@include breakpoint (sm) {
|
||||
top: 50%;
|
||||
transform: translate(-5%, -50%) rotate(-1deg);
|
||||
width: 85%;
|
||||
}
|
||||
}
|
||||
.next {
|
||||
@include breakpoint (sm) {
|
||||
top: 50%;
|
||||
transform: translate(5%, -50%) rotate(1deg);
|
||||
width: 85%;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Controls (arrows)
|
||||
&__controls {
|
||||
display: none;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 100%;
|
||||
z-index: 11;
|
||||
|
||||
.prev {
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.next {
|
||||
transform: translateX(50%);
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
box-shadow: 0 2px 21px rgba(#000, .15);
|
||||
}
|
||||
}
|
||||
|
||||
// Information
|
||||
&__information {
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
|
||||
// Location
|
||||
&--location {
|
||||
.street {
|
||||
margin-top: 24px;
|
||||
color: #fff;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
margin-top: 5vw;
|
||||
}
|
||||
@include breakpoint (xl) {
|
||||
margin-top: 72px;
|
||||
}
|
||||
}
|
||||
.state {
|
||||
color: rgba($color-tertiary, .5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Dots for slider (mobile)
|
||||
&__dots {
|
||||
display: none;
|
||||
|
||||
@include breakpoint (xs) {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 40px;
|
||||
|
||||
li {
|
||||
display: block;
|
||||
margin: 0 3px;
|
||||
|
||||
&.active a {
|
||||
background-color: $color-secondary;
|
||||
}
|
||||
}
|
||||
a {
|
||||
display: block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background-color: $color-lightpurple;
|
||||
border-radius: 50vh;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Zoomer
|
||||
.zoomer {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
z-index: 101;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
|
||||
&.show {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
// Image
|
||||
&__image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
// display: flex;
|
||||
// justify-content: center;
|
||||
overflow: auto;
|
||||
|
||||
img {
|
||||
display: block;
|
||||
height: 100%;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
// Button
|
||||
.button-control {
|
||||
position: absolute;
|
||||
bottom: 32px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
119
src/style/organisms/_locations.scss
Normal file
119
src/style/organisms/_locations.scss
Normal file
@@ -0,0 +1,119 @@
|
||||
.browse {
|
||||
margin-top: 72px;
|
||||
margin-bottom: 72px;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
margin-top: 120px;
|
||||
margin-bottom: 52px;
|
||||
}
|
||||
|
||||
// Description
|
||||
.description {
|
||||
margin-bottom: 32px;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
// Continents
|
||||
&__continents {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
justify-content: center;
|
||||
margin-bottom: 8px;
|
||||
|
||||
li {
|
||||
display: block;
|
||||
margin: 0 4px;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
margin: 0 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Locations
|
||||
&__locations {
|
||||
margin-top: 112px;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
grid-column-gap: 120px;
|
||||
grid-row-gap: 7.5vw;
|
||||
justify-content: center;
|
||||
margin-bottom: 14.5vw;
|
||||
}
|
||||
}
|
||||
|
||||
// Location
|
||||
.location {
|
||||
position: relative;
|
||||
margin-bottom: 48px;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
align-items: center;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
// Flag image
|
||||
img {
|
||||
display: block;
|
||||
width: 32px;
|
||||
height: auto;
|
||||
margin: 0 auto;
|
||||
border-radius: 50vh;
|
||||
}
|
||||
|
||||
// City
|
||||
&__city {
|
||||
margin: 24px 0 16px;
|
||||
font-family: $font-serif;
|
||||
font-size: rem(32px);
|
||||
color: $color-secondary;
|
||||
transition: color 85ms ease-in-out;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
font-size: rem(48px);
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
// Shape on hover
|
||||
&:after {
|
||||
content: "";
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%) scale(0.94);
|
||||
display: block;
|
||||
width: 216px;
|
||||
height: 216px;
|
||||
background: rgba($color-lightpurple, .3);
|
||||
border-radius: 50vh;
|
||||
transition: all 85ms ease-in-out;
|
||||
}
|
||||
&:hover {
|
||||
.location__city {
|
||||
color: $color-tertiary;
|
||||
}
|
||||
|
||||
&:after {
|
||||
opacity: 1;
|
||||
transform: translate(-50%, -50%) scale(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
156
src/style/organisms/_photos.scss
Normal file
156
src/style/organisms/_photos.scss
Normal file
@@ -0,0 +1,156 @@
|
||||
.photos {
|
||||
position: relative;
|
||||
margin-top: -22px;
|
||||
padding-bottom: 102px;
|
||||
background-color: #fff;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
margin-top: -128px;
|
||||
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: flex;
|
||||
flex-direction: row-reverse;
|
||||
align-items: flex-end;
|
||||
transform: rotate(270deg) translate(-46%,-240%);
|
||||
transform-origin: 50% 50%;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: rem(12px);
|
||||
color: $color-lightgray;
|
||||
margin-right: 24px;
|
||||
|
||||
strong {
|
||||
font-weight: 600;
|
||||
display: block;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Each photo
|
||||
.photo {
|
||||
position: relative;
|
||||
z-index: 4;
|
||||
margin-bottom: 102px;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
margin-bottom: 120px;
|
||||
}
|
||||
|
||||
// Last photo doesn't need spacing
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// List view
|
||||
&--list {
|
||||
& > .wrap {
|
||||
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;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 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;
|
||||
}
|
||||
|
||||
// Photo
|
||||
.photo {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
margin-bottom: 0;
|
||||
|
||||
// Every second (on column 2)
|
||||
&:nth-child(2n+2) {
|
||||
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
|
||||
&__image {
|
||||
&--number {
|
||||
font-size: rem(96px);
|
||||
bottom: -88px;
|
||||
right: 24px;
|
||||
z-index: 1;
|
||||
transform: none;
|
||||
top: auto;
|
||||
left: auto;
|
||||
}
|
||||
&--date {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user