489 lines
12 KiB
SCSS
489 lines
12 KiB
SCSS
@import "custom";
|
|
@import "~bootstrap/scss/bootstrap";
|
|
@import "_choose-map";
|
|
|
|
@font-face {
|
|
font-family: OpenSans;
|
|
src: url('../fonts/OpenSans-Regular.ttf');
|
|
}
|
|
|
|
@font-face {
|
|
font-family: '04b03';
|
|
font-style: normal;
|
|
font-weight: normal;
|
|
src: local('04b03'), url('../fonts/04B_03.woff') format('woff');
|
|
}
|
|
@font-face {
|
|
font-family: 'Karmatic Arcade';
|
|
src: url('../fonts/ka1.ttf') format('truetype');
|
|
}
|
|
@font-face {
|
|
font-family: 'VCR OSD Mono';
|
|
src: url('../fonts/VCR_OSD.ttf') format('truetype');
|
|
}
|
|
@function randomNum($min, $max) {
|
|
$rand: random();
|
|
$randomNum: $min + floor($rand * (($max - $min) + 1));
|
|
|
|
@return $randomNum;
|
|
}
|
|
|
|
header {
|
|
background: #28A7FC url("../images/sky.jpg") no-repeat bottom;
|
|
background-size: 100%;
|
|
height: 37rem;
|
|
position: relative;
|
|
.section{
|
|
position: relative;
|
|
}
|
|
|
|
.over-image {
|
|
bottom: 0;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 33rem;
|
|
width: calc(100% - 15px);
|
|
.logo{
|
|
margin: 1rem 0;
|
|
@include media-breakpoint-down(sm) {
|
|
padding-left: 1rem;
|
|
}
|
|
}
|
|
.social-links {
|
|
text-align: right;
|
|
padding-top: 2.25rem;
|
|
a {
|
|
margin-left: 1.25rem;
|
|
}
|
|
}
|
|
@include media-breakpoint-down(sm) {
|
|
.social-links {
|
|
padding-top: 0.5rem;
|
|
padding-right: 0.5rem;
|
|
.share-title {
|
|
display: none;
|
|
}
|
|
a {
|
|
display: block;
|
|
margin-left: 0rem;
|
|
margin-top: 1rem;
|
|
}
|
|
}
|
|
}
|
|
.title {
|
|
z-index: 3;
|
|
position: relative;
|
|
padding: 5rem 0;
|
|
color: black;
|
|
h1 {
|
|
font-family: 'Karmatic Arcade';
|
|
font-size: 2.75rem;
|
|
margin-bottom: 1.25rem;
|
|
color: #0C476C;
|
|
}
|
|
h3 {
|
|
min-height: 200px;
|
|
padding: 1rem;
|
|
color: #0C476C;
|
|
}
|
|
@include media-breakpoint-down(xs) {
|
|
h3 {
|
|
font-size: 1rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
.clouds {
|
|
content: "";
|
|
position: absolute;
|
|
bottom: 0;
|
|
right: 0;
|
|
height: 162px;
|
|
overflow: hidden;
|
|
width: 100%;
|
|
z-index: 1;
|
|
&.clouds-2 {
|
|
bottom: 25px;
|
|
.cloud {
|
|
transform: translateX(50px);
|
|
-webkit-animation-duration: 80s;
|
|
opacity: .6;
|
|
}
|
|
}
|
|
.cloud {
|
|
background: url('../images/cloud.png') repeat-x;
|
|
height: 162px;
|
|
width: 4000px;
|
|
-webkit-animation-name: prop-600;
|
|
-webkit-animation-duration: 50s;
|
|
-webkit-animation-iteration-count: infinite;
|
|
-webkit-animation-direction:alternate;
|
|
}
|
|
}
|
|
@-webkit-keyframes prop-600 {
|
|
0% {
|
|
-webkit-transform: translateX(0px);
|
|
}
|
|
100% {
|
|
-webkit-transform: translateX(-400px);
|
|
}
|
|
}
|
|
|
|
.custom-link{
|
|
cursor: pointer;
|
|
font-family: "VCR OSD Mono";
|
|
font-size: 1.125rem;
|
|
letter-spacing: 5px;
|
|
color: white;
|
|
display: block;
|
|
margin: 0 auto;
|
|
width: 250px;
|
|
height: 64px;
|
|
background-image: url('../images/btn-bg.png');
|
|
background-repeat: no-repeat;
|
|
background-size: 100%;
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 7px;
|
|
padding: 1.125rem;
|
|
text-align: center;
|
|
z-index: 2;
|
|
transition: all .1s cubic-bezier(0.000, -0.600, 1.000, 1.650); /* custom */
|
|
//transition-timing-function: cubic-bezier(0.000, -0.600, 1.000, 1.650); /* custom */
|
|
@include media-breakpoint-down(sm) {
|
|
display: none;
|
|
}
|
|
&:hover {
|
|
color: white;
|
|
transform: translateY(-6px);
|
|
text-decoration: none;
|
|
}
|
|
&.contribute {
|
|
background-image: url('../images/btn-bg-2.png');
|
|
}
|
|
&.play {
|
|
background-image: url('../images/btn-bg-3.png');
|
|
}
|
|
&.start {
|
|
/*padding-left: 55px;*/
|
|
&:before {
|
|
/*content: "";
|
|
position: absolute;
|
|
background: url('../images/playicon.png') no-repeat;
|
|
height: 20px;
|
|
width: 21px;
|
|
left: 36px;
|
|
top: 23px;*/
|
|
}
|
|
}
|
|
&.light{
|
|
background-image: url('../images/btn-bg-light.png');
|
|
}
|
|
|
|
/*&::after{
|
|
content: "";
|
|
position: absolute;
|
|
background-size: 60%;
|
|
width: 100%;
|
|
height: 100%;
|
|
}*/
|
|
}
|
|
|
|
img{
|
|
max-width: 100%;
|
|
}
|
|
|
|
.bg-white{
|
|
color: #000000;
|
|
}
|
|
.bg-gray{
|
|
background-color: #3b3b3b !important;
|
|
}
|
|
.credits {
|
|
text-align: center;
|
|
h2{
|
|
padding: 1rem 0;
|
|
margin: 0;
|
|
min-height: 6rem;
|
|
font-family: 'Karmatic Arcade';
|
|
font-size: 34px;
|
|
margin-bottom: 20px;
|
|
}
|
|
p {
|
|
|
|
}
|
|
}
|
|
.story-wrapper {
|
|
background: white;
|
|
position: relative;
|
|
height: 100vh;
|
|
min-height: calc(672px + 75px);
|
|
padding-top: 75px;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
@include media-breakpoint-down(sm) {
|
|
display: none;
|
|
}
|
|
img {
|
|
max-width: none;
|
|
}
|
|
.sky {
|
|
margin-top: 8vh;
|
|
z-index: 1;
|
|
position: absolute;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 242px;
|
|
background: url(../images/story/sky.jpg) repeat-x top left;
|
|
}
|
|
.clouds {
|
|
bottom: auto;
|
|
top: 0;
|
|
z-index: 2;
|
|
transform: scaleY(-1);
|
|
}
|
|
.mountains {
|
|
z-index: 5;
|
|
position: absolute;
|
|
bottom: 200px;
|
|
width: calc(100% + 200px);
|
|
height: 242px;
|
|
background: url(../images/story/mountains.png) repeat-x top center;
|
|
}
|
|
.story-1 {
|
|
position: absolute;
|
|
z-index: 10;
|
|
left: 0;
|
|
bottom: 0;
|
|
overflow: hidden;
|
|
}
|
|
.character {
|
|
position: absolute;
|
|
z-index: 15;
|
|
bottom: 75px;
|
|
left: 0;
|
|
right: 0;
|
|
margin: auto;
|
|
}
|
|
.birds {
|
|
position: absolute;
|
|
z-index: 20;
|
|
right: -200px;
|
|
$birds: 8;
|
|
@for $i from 1 through $birds {
|
|
@keyframes fly-#{$i} {
|
|
0% {
|
|
transform: translate(0px, 0px);
|
|
}
|
|
25% {
|
|
transform: translate(#{randomNum(0, 50)}px, #{randomNum(0, 50)}px);
|
|
}
|
|
50% {
|
|
transform: translate(#{randomNum(0, 50)}px, #{randomNum(0, 50)}px);
|
|
}
|
|
75% {
|
|
transform: translate(#{randomNum(0, 50)}px, #{randomNum(0, 50)}px);
|
|
}
|
|
100% {
|
|
transform: translate(#{randomNum(0, 50)}px, #{randomNum(0, 50)}px);
|
|
}
|
|
}
|
|
.bird-#{$i} {
|
|
margin: 0 #{randomNum(0, 10)}vw;
|
|
transition-timing-function: cubic-bezier(0.150, -0.600, 0.155, 1.650);
|
|
animation-duration: 15s;
|
|
animation-name: fly-#{$i};
|
|
animation-iteration-count: infinite;
|
|
animation-direction: alternate;
|
|
}
|
|
}
|
|
}
|
|
.bubble {
|
|
color: black;
|
|
position: absolute;
|
|
z-index: 25;
|
|
bottom: 160px;
|
|
left: 263px;
|
|
right: -50px;
|
|
margin: auto;
|
|
opacity: 0;
|
|
height: 151px;
|
|
width: 289px;
|
|
line-height: 22px;
|
|
padding: 5px;
|
|
background: black;
|
|
transform: translateY(25px);
|
|
& > div {
|
|
padding: 15px 15px 30px;
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: white;
|
|
&:before {
|
|
content: "";
|
|
position: absolute;
|
|
background: url(../images/story/bubble-border-bottom-left.png) no-repeat bottom left;
|
|
left: -4px;
|
|
width: 28px;
|
|
height: 25px;
|
|
bottom: -20px;
|
|
}
|
|
p {
|
|
&.bubble-legend {
|
|
font-size: 12px;
|
|
color: grey;
|
|
margin: 0;
|
|
}
|
|
&.bubble-action {
|
|
cursor: pointer;
|
|
text-decoration: underline
|
|
}
|
|
|
|
}
|
|
}
|
|
&.b-revert {
|
|
left: -363px;
|
|
& > div:before {
|
|
left: auto;
|
|
right: -4px;
|
|
background: url(../images/story/bubble-border-bottom-right.png) no-repeat bottom left;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.pin-spacer {
|
|
background: white;
|
|
}
|
|
.section{
|
|
padding-top: 2rem;
|
|
padding-bottom: 5rem;
|
|
&.used-by{
|
|
img{
|
|
padding: 0 1rem;
|
|
}
|
|
}
|
|
&.how-to{
|
|
padding: 6.25rem 0;
|
|
background: url('../images/bg-briques.jpg') repeat-x bottom;
|
|
.desktop-only {
|
|
padding: 0 1.25rem 4rem;
|
|
}
|
|
.image-item{
|
|
height: 100%;
|
|
margin: 0 auto;
|
|
padding: 1.25rem;
|
|
/*transition: all .25s cubic-bezier(0.000, -0.600, 1.000, 1.650);
|
|
&:hover {
|
|
transform: scale(1.1);
|
|
.step-image {
|
|
&:after {
|
|
bottom: -10px;
|
|
left: 10px;
|
|
}
|
|
}
|
|
}
|
|
.step-image {
|
|
position: relative;
|
|
&:after {
|
|
transition: all .25s cubic-bezier(0.000, -0.600, 1.000, 1.650);
|
|
content:"";
|
|
height: 100%;
|
|
width: 100%;
|
|
background: #dcdcdc;
|
|
position: absolute;
|
|
bottom: -25px;
|
|
left: 25px;
|
|
background: url('../images/bg-step.png') no-repeat bottom right;
|
|
}
|
|
img {
|
|
width: 100%;
|
|
z-index: 2;
|
|
position: relative;
|
|
}
|
|
}*/
|
|
h2{
|
|
padding: 1rem 0;
|
|
margin: 0;
|
|
min-height: 6rem;
|
|
font-family: 'Karmatic Arcade';
|
|
font-size: 22px;
|
|
margin-bottom: 1.25rem;
|
|
}
|
|
}
|
|
}
|
|
@include media-breakpoint-down(sm) {
|
|
&.how-to{
|
|
padding: 2rem 0;
|
|
}
|
|
}
|
|
|
|
&.used-by{
|
|
img{
|
|
|
|
}
|
|
}
|
|
|
|
&.quotes{
|
|
h2{
|
|
font-family: 'Karmatic Arcade';
|
|
font-size: 1.75rem;
|
|
margin: 2.5rem 0;
|
|
}
|
|
|
|
.quote-item{
|
|
padding: 1rem 0;
|
|
text-align: center;
|
|
.quote{
|
|
font-size: 1.5rem;
|
|
margin-bottom: 0.5rem;
|
|
letter-spacing: 2px;
|
|
}
|
|
.author{
|
|
font-size: 1rem;
|
|
letter-spacing: 0px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.footer {
|
|
padding: 2rem;
|
|
.floppy {
|
|
text-align: right;
|
|
img {
|
|
float: right;
|
|
margin-left: 1.25rem;
|
|
}
|
|
div {
|
|
float: right;
|
|
margin-left: 1rem;
|
|
font-size: 1rem;
|
|
line-height: 1rem;
|
|
padding-top: 0.625rem;
|
|
span {
|
|
color: grey;
|
|
font-size: 0.8125rem;
|
|
}
|
|
}
|
|
}
|
|
@include media-breakpoint-down(xs) {
|
|
.floppy {
|
|
text-align: center;
|
|
img, div {
|
|
float: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.pixel-title{
|
|
font-family: "Karmatic Arcade" !important;
|
|
}
|
|
|
|
h3 {
|
|
font-weight: 800;
|
|
} |