forked from zer.ooo/web
88 lines
1.7 KiB
SCSS
88 lines
1.7 KiB
SCSS
|
@import "normalize.css";
|
||
|
|
@import "navigation.sass";
|
||
|
|
@import "flaticon.css";
|
||
|
|
|
||
|
|
@import url(https://fonts.googleapis.com/css?family=Open+Sans|Roboto|Playfair+Display|Bree+Serif|Lato|Source+Sans+Pro|Montserrat|Inconsolata);
|
||
|
|
|
||
|
|
@mixin long-shadow-text ($distance, $blur, $color) {
|
||
|
|
$shadows: null;
|
||
|
|
$color: darken($color, 10);
|
||
|
|
$blur: $blur + px;
|
||
|
|
@for$i from 0 through $distance {
|
||
|
|
$dist: $i + px;
|
||
|
|
$shadows: append($shadows, ($dist $dist $blur $color), comma);
|
||
|
|
}
|
||
|
|
text-shadow: $shadows;
|
||
|
|
}
|
||
|
|
|
||
|
|
body {
|
||
|
|
background-color: #7aa2cb;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
font-family: 'Roboto';
|
||
|
|
}
|
||
|
|
|
||
|
|
.flexcontainer {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
}
|
||
|
|
|
||
|
|
.first-page {
|
||
|
|
background: linear-gradient(#070a15, #252b46); /* Standard syntax */
|
||
|
|
display: flex;
|
||
|
|
justify-content: center; /* align horizontal */
|
||
|
|
align-items: center; /* align vertical */
|
||
|
|
height: 100vh;
|
||
|
|
flex-direction: column;
|
||
|
|
}
|
||
|
|
|
||
|
|
.logo {
|
||
|
|
font-family: 'Montserrat', serif;
|
||
|
|
font-size: 15em;
|
||
|
|
line-height: 0.8em;
|
||
|
|
text-transform: uppercase;
|
||
|
|
color: #E08E79;
|
||
|
|
@include long-shadow-text(30, 0, #F1D4AF);
|
||
|
|
}
|
||
|
|
|
||
|
|
.welcome-text {
|
||
|
|
font-family: 'Inconsolata', serif;
|
||
|
|
padding: 50px;
|
||
|
|
font-size: 2em;
|
||
|
|
line-height: 0.8em;
|
||
|
|
text-transform: uppercase;
|
||
|
|
color: #fff;
|
||
|
|
}
|
||
|
|
|
||
|
|
.second-page {
|
||
|
|
background: linear-gradient(#F1D4AF, #ECE5CE); /* Standard syntax */
|
||
|
|
display: flex;
|
||
|
|
flex-direction: row;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.second-page h1 {
|
||
|
|
font-family: 'Inconsolata';
|
||
|
|
color: #774F38;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.item {
|
||
|
|
padding: 50px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.item p {
|
||
|
|
line-height: 1.4em;
|
||
|
|
text-align: justify;
|
||
|
|
}
|
||
|
|
|
||
|
|
[class^="flaticon-"]:before, [class*=" flaticon-"]:before,
|
||
|
|
[class^="flaticon-"]:after, [class*=" flaticon-"]:after {
|
||
|
|
font-size: 10em;
|
||
|
|
}
|
||
|
|
|
||
|
|
.item span {
|
||
|
|
color: #fff;
|
||
|
|
}
|