WIP React > Svelte
Put most of the developed design into Svelte
This commit is contained in:
70
src/style/pages/_explore.scss
Normal file
70
src/style/pages/_explore.scss
Normal file
@@ -0,0 +1,70 @@
|
||||
.explore {
|
||||
background-color: $color-primary;
|
||||
overflow-x: hidden;
|
||||
|
||||
// Explore section on the Homepage
|
||||
&--homepage {
|
||||
margin-top: 15.5vw;
|
||||
|
||||
.browse {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Top part
|
||||
&__top {
|
||||
margin-top: 96px;
|
||||
margin-bottom: 56px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
margin-top: 120px;
|
||||
margin-bottom: 96px;
|
||||
}
|
||||
|
||||
a {
|
||||
position: absolute;
|
||||
top: -64px;
|
||||
|
||||
@include breakpoint (sm){
|
||||
top: 50%;
|
||||
left: 0;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Homepage: Of text
|
||||
.of {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 14vw;
|
||||
font-family: $font-serif-extra;
|
||||
font-size: 15.5vw;
|
||||
line-height: 1;
|
||||
color: $color-lightpurple;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
// Description
|
||||
.description {
|
||||
max-width: 312px;
|
||||
margin: 0 auto;
|
||||
margin-bottom: 72px;
|
||||
color: $color-tertiary;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
max-width: 472px;
|
||||
margin-bottom: 120px;
|
||||
}
|
||||
}
|
||||
|
||||
// Massive title
|
||||
.title-massive {
|
||||
margin-top: -22vw;
|
||||
margin-left: -60px;
|
||||
}
|
||||
}
|
||||
46
src/style/pages/_homepage.scss
Normal file
46
src/style/pages/_homepage.scss
Normal file
@@ -0,0 +1,46 @@
|
||||
// Introduction
|
||||
.intro {
|
||||
background-color: $color-tertiary;
|
||||
overflow-x: hidden;
|
||||
|
||||
// Title
|
||||
.title-massive {
|
||||
margin-top: -10vw;
|
||||
margin-left: -10vw;
|
||||
}
|
||||
|
||||
// Description
|
||||
.description {
|
||||
margin-bottom: 72px;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
margin: 0 auto 120px;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 40px;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
margin-bottom: 72px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Carousel
|
||||
.carousel {
|
||||
position: relative;
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 48vw;
|
||||
background-color: $color-tertiary;
|
||||
}
|
||||
}
|
||||
}
|
||||
106
src/style/pages/_place.scss
Normal file
106
src/style/pages/_place.scss
Normal file
@@ -0,0 +1,106 @@
|
||||
// Place section
|
||||
.place {
|
||||
background-position: 50% 0;
|
||||
background-size: 100%;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
// Title
|
||||
&__title {
|
||||
padding: 14vw 0 15vw;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-end;
|
||||
|
||||
h1 {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
text-align: left;
|
||||
pointer-events: none;
|
||||
|
||||
span {
|
||||
display: block;
|
||||
}
|
||||
.bottom {
|
||||
text-align: right;
|
||||
margin-left: 8vw;
|
||||
}
|
||||
}
|
||||
|
||||
// Switcher button
|
||||
.button-control--dashed {
|
||||
z-index: 1;
|
||||
flex-shrink: 0;
|
||||
margin-left: -24px;
|
||||
}
|
||||
}
|
||||
|
||||
// Description
|
||||
&__description {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
padding-top: 12.5vw;
|
||||
padding-bottom: 72px;
|
||||
background-color: $color-tertiary;
|
||||
border-radius: none;
|
||||
|
||||
@include breakpoint (m) {
|
||||
padding-bottom: 96px;
|
||||
}
|
||||
@include breakpoint (sm) {
|
||||
border-radius: 8px 0 0 8px;
|
||||
padding-bottom: 15vw;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: rem(18px);
|
||||
font-family: $font-sans-light;
|
||||
line-height: 1.64;
|
||||
color: $color-text;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
// Updated notice
|
||||
.updated {
|
||||
font-size: rem(12px);
|
||||
margin-top: 32px;
|
||||
|
||||
strong {
|
||||
font-family: $font-sans-sb;
|
||||
color: rgba($color-text, .4);
|
||||
}
|
||||
|
||||
@include breakpoint (sm) {
|
||||
display: none;;
|
||||
}
|
||||
}
|
||||
|
||||
// Toggle
|
||||
.toggle {
|
||||
display: none;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
display: inline-flex;
|
||||
}
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: -49.9vw;
|
||||
width: 50vw;
|
||||
height: 100%;
|
||||
background-color: $color-tertiary;
|
||||
}
|
||||
|
||||
&--wrap {
|
||||
@include breakpoint (xs) {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
138
src/style/pages/_viewer.scss
Normal file
138
src/style/pages/_viewer.scss
Normal file
@@ -0,0 +1,138 @@
|
||||
// Viewer
|
||||
.viewer {
|
||||
position: relative;
|
||||
height: 100vh;
|
||||
min-height: 560px;
|
||||
padding-top: 24px;
|
||||
|
||||
// Top part
|
||||
&__top {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-top: 16px;
|
||||
padding-left: 24px;
|
||||
padding-right: 16px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-flow: row wrap;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
position: static;
|
||||
justify-content: center;
|
||||
margin: 24px 0 48px;
|
||||
}
|
||||
|
||||
// Tip message
|
||||
.tip {
|
||||
font-family: $font-sans-sb;
|
||||
font-size: rem(10px);
|
||||
text-transform: uppercase;
|
||||
color: rgba($color-tertiary, .4);
|
||||
letter-spacing: 1px;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Buttons
|
||||
.buttons {
|
||||
display: flex;
|
||||
|
||||
a {
|
||||
margin-left: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Carousel
|
||||
.carousel {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
transform: translate3d(0, -37%, 0);
|
||||
|
||||
@include breakpoint (sm) {
|
||||
position: static;
|
||||
transform: none;
|
||||
margin-bottom: 88px;
|
||||
}
|
||||
|
||||
// Gallery
|
||||
.gallery {
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
// Information
|
||||
&__information {
|
||||
margin-top: 24px;
|
||||
padding: 0 24px;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
// Location
|
||||
&--location {
|
||||
text-align: left;
|
||||
|
||||
.street {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Date
|
||||
&--date {
|
||||
color: rgba($color-tertiary, .5);
|
||||
font-size: rem(12px);
|
||||
margin-top: 16px;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
font-size: rem(14px);
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Photo number
|
||||
&__number {
|
||||
display: none;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: 50%;
|
||||
transform: translate3d(0, 0%, 0);
|
||||
width: 100%;
|
||||
font-family: $font-serif-extra;
|
||||
color: rgba($color-tertiary, .4);
|
||||
font-size: 42vw;
|
||||
text-align: center;
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
top: auto;
|
||||
right: 250px;
|
||||
bottom: -19vw;
|
||||
width: auto;
|
||||
font-size: rem(300px);
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
// Dots
|
||||
&__dots {
|
||||
position: absolute;
|
||||
bottom: 24px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 20;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user