app/assets/stylesheets/modules/_layout.scss
html, body {
min-height: 100%;
}
html {
color: $white;
background: $background-color image-url('bg.jpg') no-repeat center bottom;
@include background-size(cover);
&:before {
content: '1';
position: fixed;
bottom: 0;
right: 0;
font-weight: bold;
font-size: 10em;
width: .5em;
height: .75em;
line-height: 1em;
color: $header-color;
color: rgba($header-color, .5);
overflow: hidden;
z-index: -1;
}
}
.container {
margin: auto;
padding: $padding * 1.5;
max-width: 700px;
@media screen and (max-width: $breakpoint-small) {
padding: $padding;
}
}
// -------------- //
.header {
width: (100% / 3);
background: $header-color;
background-color: rgba($header-color, .5);
}
.main {
overflow-x: hidden;
overflow-y: scroll;
width: (100% / 3 * 2);
}
.header, .main {
float: left;
height: 100vh;
.container {
margin: 0;
}
@media only screen and (max-width: $breakpoint-medium) {
float: none;
width: auto;
height: auto;
min-height: 0 !important;
}
}
@media only screen and (max-width: $breakpoint-medium) {
.header {
position: relative;
padding-bottom: 2em;
overflow: hidden;
}
.main {
@include box-sizing(border-box);
}
}
// -------------------------------------- //
.map {
display: block;
overflow: hidden;
max-width: 75%;
&:hover {
text-indent: -9999px;
background: image-url("map2.png") no-repeat top;
@include background-size(100%);
}
@media only screen and (max-width: $breakpoint-medium) {
position: absolute;
width: 10em;
top: 2em;
right: 2em;
bottom: 2em;
}
@media only screen and (max-width: $breakpoint-small) {
top: -2em;
bottom: -2em;
right: -1em;
opacity: .75;
z-index: -1;
width: 15em;
}
}
.sponsors {
position: fixed;
left: 0;
bottom: $padding;
color: $white;
width: 33.3334%;
padding: 0 $padding;
@include box-sizing(border-box);
ul {
margin: .75em 0 0;
li {
display: inline-block;
margin: 0 .25em .25em 0;
}
}
a {
color: white;
}
@media only screen and (max-width: $breakpoint-medium) {
position: static;
padding: 0;
width: auto;
}
}
.sponsor-link {
display: inline-block;
height: 1.5em;
}
.statistics {
li {
position: relative;
float: left;
width: 16.6667%;
p {
margin: 0 0 .5em;
font-size: 4em;
line-height: 1em;
}
}
@media only screen and (max-width: $breakpoint-small) {
height: 16em;
li {
label {
white-space: nowrap;
position: absolute;
top: 0; left: 0;
margin: -.75em 0 0 .25em;
@include transform-origin(0);
@include transform(rotate(90deg));
}
p {
font-size: 2em;
padding: 0 1em;
}
}
}
@media only screen and (max-width: $breakpoint-small) {
li p { padding: 0 .5em; }
}
}