158 lines
23 KiB
SCSS
158 lines
23 KiB
SCSS
|
|
||
|
|
// ===========================
|
||
|
|
// RESET
|
||
|
|
// ===========================
|
||
|
|
|
||
|
|
html, body {
|
||
|
|
width:100%;
|
||
|
|
height:100%;
|
||
|
|
padding:0;
|
||
|
|
margin:0;
|
||
|
|
}
|
||
|
|
body {
|
||
|
|
margin: 0;
|
||
|
|
background: $body-background-color;
|
||
|
|
color:white;
|
||
|
|
font-family: $main-font;
|
||
|
|
overflow-y:hidden;
|
||
|
|
}
|
||
|
|
* {
|
||
|
|
-webkit-user-select: none;
|
||
|
|
-webkit-tap-highlight-color: rgba(0,0,0,0);
|
||
|
|
}
|
||
|
|
|
||
|
|
// ===========================
|
||
|
|
// ICONS FONT
|
||
|
|
// by icomoon.io
|
||
|
|
// ===========================
|
||
|
|
|
||
|
|
@font-face {
|
||
|
|
font-family: 'icomoon';
|
||
|
|
src:url(#{$fontUrl}icomoon.eot);
|
||
|
|
src:url(#{$fontUrl}icomoon.eot?#iefix) format('embedded-opentype'),
|
||
|
|
url(#{$fontUrl}icomoon.woff) format('woff'),
|
||
|
|
url(#{$fontUrl}icomoon.ttf) format('truetype'),
|
||
|
|
url(#{$fontUrl}icomoon.svg#icomoon) format('svg');
|
||
|
|
font-weight: normal;
|
||
|
|
font-style: normal;
|
||
|
|
}
|
||
|
|
|
||
|
|
[data-icon]:before {
|
||
|
|
font-family: 'icomoon';
|
||
|
|
content: attr(data-icon);
|
||
|
|
speak: none;
|
||
|
|
font-weight: normal;
|
||
|
|
font-variant: normal;
|
||
|
|
text-transform: none;
|
||
|
|
//line-height: 1;
|
||
|
|
-webkit-font-smoothing: antialiased;
|
||
|
|
}
|
||
|
|
|
||
|
|
.icon-menu, .icon-cancel, .icon-info-sign {
|
||
|
|
font-family: 'icomoon';
|
||
|
|
display: inline-block;
|
||
|
|
color: $icon-color;
|
||
|
|
speak: none;
|
||
|
|
font-size: $icon-size;
|
||
|
|
font-style: normal;
|
||
|
|
font-weight: normal;
|
||
|
|
font-variant: normal;
|
||
|
|
text-transform: none;
|
||
|
|
//line-height: 1;
|
||
|
|
-webkit-font-smoothing: antialiased;
|
||
|
|
}
|
||
|
|
.icon-menu:before {
|
||
|
|
display: inline-block;
|
||
|
|
content: "\e000";
|
||
|
|
}
|
||
|
|
.icon-cancel:before {
|
||
|
|
content: "\e001";
|
||
|
|
}
|
||
|
|
.icon-info-sign:before {
|
||
|
|
content: "\f05a";
|
||
|
|
}
|
||
|
|
|
||
|
|
// ===========================
|
||
|
|
// LAYOUT
|
||
|
|
// ===========================
|
||
|
|
|
||
|
|
.page {
|
||
|
|
position:relative;
|
||
|
|
width:101%;
|
||
|
|
height: 100%;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.page > div {
|
||
|
|
float:left;
|
||
|
|
box-sizing:border-box;
|
||
|
|
-moz-box-sizing: border-box;
|
||
|
|
overflow:hidden;
|
||
|
|
.img {
|
||
|
|
padding-right: 2px;
|
||
|
|
display:block;
|
||
|
|
height:100%;
|
||
|
|
width:100%;
|
||
|
|
top:0;
|
||
|
|
left:0;
|
||
|
|
position:relative;
|
||
|
|
z-index:1;
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
}
|
||
|
|
.caption {
|
||
|
|
background:$img-caption-background-color;
|
||
|
|
font-size: 1em;
|
||
|
|
padding:5px;
|
||
|
|
line-height: 1.3em;
|
||
|
|
color:$img-caption-color;
|
||
|
|
position:absolute;
|
||
|
|
width: 100%;
|
||
|
|
bottom:0px;
|
||
|
|
box-sizing:border-box;
|
||
|
|
-moz-box-sizing:border-box;
|
||
|
|
z-index:2;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.img.loaded {
|
||
|
|
background-size: cover;
|
||
|
|
background-position:center;
|
||
|
|
}
|
||
|
|
.img.loading {
|
||
|
|
background-image:url(data:image/png;base64,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
|
||
|
|
background-position: center center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.blurred {
|
||
|
|
-webkit-filter: blur(10px);
|
||
|
|
}
|
||
|
|
|
||
|
|
// page templates
|
||
|
|
|
||
|
|
// generates a 5 items page with one big item somewhere
|
||
|
|
@mixin fullpage5($bigIndex:1) {
|
||
|
|
@for $i from 1 through 5 {
|
||
|
|
$width: 33%;
|
||
|
|
&:nth-child(#{$i}) {
|
||
|
|
@if ($i==$bigIndex) {
|
||
|
|
$width: 66%;
|
||
|
|
};
|
||
|
|
width: $width;
|
||
|
|
height: 50%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// 4 simple combinations
|
||
|
|
.page-5-1 > div {
|
||
|
|
@include fullpage5(1);
|
||
|
|
}
|
||
|
|
.page-5-2 > div {
|
||
|
|
@include fullpage5(2);
|
||
|
|
}
|
||
|
|
.page-5-3 > div {
|
||
|
|
@include fullpage5(4);
|
||
|
|
}
|
||
|
|
.page-5-4 > div {
|
||
|
|
@include fullpage5(5);
|
||
|
|
}
|