website/_includes/index.css

428 lines
5.5 KiB
CSS
Raw Normal View History

2016-08-10 15:34:00 +00:00
/* Animation */
2016-12-22 18:53:29 +00:00
@keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
2016-08-10 15:34:00 +00:00
}
2016-12-22 18:53:29 +00:00
2016-08-10 15:34:00 +00:00
/* Main */
2016-12-22 18:53:29 +00:00
2016-08-10 15:34:00 +00:00
* {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
2016-12-22 08:50:43 +00:00
html,
body {
2016-08-10 15:34:00 +00:00
width: 100%;
height: 100%;
}
body {
2016-12-22 18:53:29 +00:00
background: #f5f5f5;
color: #565656;
font-family: montserratlight, "Helvetica Neue", Helvetica, Arial, sans-serif;
2016-08-10 15:34:00 +00:00
font-size: 1.000em;
line-height: 1;
2016-12-22 18:53:29 +00:00
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
2016-08-10 15:34:00 +00:00
}
2016-12-22 18:53:29 +00:00
2016-08-10 15:34:00 +00:00
::-moz-selection {
2016-12-22 18:53:29 +00:00
background: rgba(0, 0, 0, .3);
2016-08-10 15:34:00 +00:00
}
2016-12-22 18:53:29 +00:00
2016-08-10 15:34:00 +00:00
::selection {
2016-12-22 18:53:29 +00:00
background: rgba(0, 0, 0, .3);
2016-08-10 15:34:00 +00:00
}
2016-12-22 08:50:43 +00:00
h1,
h2 {
2016-12-22 18:53:29 +00:00
color: #aa0000;
font-family: montserratbold, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 3.000em;
2016-08-10 15:34:00 +00:00
font-style: normal;
font-weight: normal;
2016-12-22 18:53:29 +00:00
letter-spacing: 1px;
margin: 0 0 0.438em 0;
2016-08-10 15:34:00 +00:00
text-transform: uppercase;
}
a {
2016-12-22 18:53:29 +00:00
color: #aa0000;
2016-08-10 15:34:00 +00:00
text-decoration: none;
}
2016-12-22 08:50:43 +00:00
a:hover,
a:focus {
2016-12-22 18:53:29 +00:00
color: #d10000;
2016-08-10 15:34:00 +00:00
}
2016-12-22 18:53:29 +00:00
/* Icons */
.logo:before {
content: '\1F525';
2016-08-10 15:34:00 +00:00
}
2016-12-22 18:53:29 +00:00
.join:before {
2016-08-10 15:34:00 +00:00
content: "\2139";
}
2016-12-22 18:53:29 +00:00
.downloads:before {
2016-08-10 15:34:00 +00:00
content: "\2193";
}
2016-12-22 18:53:29 +00:00
/* Main */
.main {
2016-08-10 15:34:00 +00:00
display: table;
2016-12-22 18:53:29 +00:00
height: 100%;
width: 100%;
2016-08-10 15:34:00 +00:00
}
2016-12-22 18:53:29 +00:00
.main-container {
animation: fadein 1s;
2016-08-10 15:34:00 +00:00
display: table-cell;
vertical-align: middle;
2016-12-22 19:27:52 +00:00
padding: 3.000em 4% 3.000em 12%;
2016-08-10 15:34:00 +00:00
text-align: center;
}
2016-12-22 18:53:29 +00:00
.main p {
2016-08-10 15:34:00 +00:00
margin: 0 0 1.875em 0;
line-height: 1.6;
}
2016-12-22 18:53:29 +00:00
/* Navigation */
#navigation {
2016-08-10 15:34:00 +00:00
background: #aa0000;
2016-12-22 18:53:29 +00:00
display: table;
height: 100%;
position: fixed;
table-layout: fixed;
text-align: center;
2016-08-10 15:34:00 +00:00
}
2016-12-22 18:53:29 +00:00
#navigation span {
display: table-row;
2016-12-22 08:50:43 +00:00
}
2016-12-22 18:53:29 +00:00
#navigation a:before {
font-family: 'icons';
2016-08-10 15:34:00 +00:00
}
2016-12-22 18:53:29 +00:00
#navigation a.logo {
font-size: 3.250em;
padding: 0.250em;
2016-08-10 15:34:00 +00:00
}
2016-12-22 18:53:29 +00:00
#navigation a {
color: #f5f5f5;
display: table-cell;
font-size: 1.875em;
padding: 0.875em;
vertical-align: middle;
2016-08-10 15:34:00 +00:00
}
2016-12-22 18:53:29 +00:00
#navigation a:hover,
#navigation a:focus {
2016-08-10 15:34:00 +00:00
color: #fff;
}
2016-12-22 18:53:29 +00:00
/* Buttons */
.button {
background: #aa0000;
border-radius: 0.375em;
color: #f5f5f5;
2016-12-22 09:06:14 +00:00
cursor: pointer;
display: inline-block;
2016-12-22 18:53:29 +00:00
font-family: montserratregular, "Helvetica Neue", Helvetica, Arial, sans-serif;
2016-12-22 09:06:14 +00:00
font-size: 1.000em;
2016-12-22 18:53:29 +00:00
margin: 0 0.313em 0 0.313em;
padding: 0.938em;
2016-12-22 09:06:14 +00:00
text-transform: uppercase;
}
2016-12-22 18:53:29 +00:00
.button:hover,
.button:focus {
background: #d10000;
color: #f5f5f5;
2016-12-22 09:06:14 +00:00
}
2016-12-22 18:53:29 +00:00
2016-08-10 15:34:00 +00:00
/* Responsive Design */
2016-12-22 18:53:29 +00:00
2016-08-10 15:34:00 +00:00
@media (min-width: 0px) {
2016-12-22 18:53:29 +00:00
html {
font-size: 84%;
}
2016-08-10 15:34:00 +00:00
}
@media (min-width: 100px) {
2016-12-22 18:53:29 +00:00
html {
font-size: 86%;
}
2016-08-10 15:34:00 +00:00
}
@media (min-width: 200px) {
2016-12-22 18:53:29 +00:00
html {
font-size: 88%;
}
2016-08-10 15:34:00 +00:00
}
@media (min-width: 300px) {
2016-12-22 18:53:29 +00:00
html {
font-size: 90%;
}
2016-08-10 15:34:00 +00:00
}
@media (min-width: 400px) {
2016-12-22 18:53:29 +00:00
html {
font-size: 92%;
}
2016-08-10 15:34:00 +00:00
}
@media (min-width: 500px) {
2016-12-22 18:53:29 +00:00
html {
font-size: 94%;
2016-08-10 15:34:00 +00:00
}
2016-12-22 18:53:29 +00:00
}
2016-08-10 15:34:00 +00:00
@media (min-width: 600px) {
2016-12-22 18:53:29 +00:00
html {
font-size: 96%;
}
2016-08-10 15:34:00 +00:00
}
2016-12-22 19:39:01 +00:00
@media (max-width: 600px) {
#navigation {
height: auto;
width: 100%;
}
#navigation span{
display: table-cell;
}
#navigation a {
display: inline-block;
}
.main-container:first-child {
padding-top: 8.000em;
}
.main-container {
padding-left: 4%;
padding-right: 4%;
}
}
2016-08-10 15:34:00 +00:00
@media (min-width: 700px) {
2016-12-22 18:53:29 +00:00
html {
font-size: 98%;
}
2016-08-10 15:34:00 +00:00
}
@media (min-width: 800px) {
2016-12-22 18:53:29 +00:00
html {
font-size: 100%;
}
2016-08-10 15:34:00 +00:00
}
@media (min-width: 900px) {
2016-12-22 18:53:29 +00:00
html {
font-size: 102%;
}
2016-08-10 15:34:00 +00:00
}
@media (min-width: 1000px) {
2016-12-22 18:53:29 +00:00
html {
font-size: 104%;
}
2016-08-10 15:34:00 +00:00
}
@media (min-width: 1100px) {
2016-12-22 18:53:29 +00:00
html {
font-size: 106%;
}
2016-08-10 15:34:00 +00:00
}
2016-12-22 18:53:29 +00:00
2016-08-10 15:34:00 +00:00
@media (min-width: 1200px) {
2016-12-22 18:53:29 +00:00
html {
font-size: 108%;
}
2016-08-10 15:34:00 +00:00
}
@media (min-width: 1300px) {
2016-12-22 18:53:29 +00:00
html {
font-size: 110%;
}
2016-08-10 15:34:00 +00:00
}
@media (min-width: 1400px) {
2016-12-22 18:53:29 +00:00
html {
font-size: 112%;
}
2016-08-10 15:34:00 +00:00
}
@media (min-width: 1500px) {
2016-12-22 18:53:29 +00:00
html {
font-size: 114%;
}
2016-08-10 15:34:00 +00:00
}
@media (min-width: 1600px) {
2016-12-22 18:53:29 +00:00
html {
font-size: 116%;
}
2016-08-10 15:34:00 +00:00
}
@media (min-width: 1700px) {
2016-12-22 18:53:29 +00:00
html {
font-size: 118%;
}
2016-08-10 15:34:00 +00:00
}
@media (min-width: 1800px) {
2016-12-22 18:53:29 +00:00
html {
font-size: 120%;
}
2016-08-10 15:34:00 +00:00
}
@media (min-width: 1900px) {
2016-12-22 18:53:29 +00:00
html {
font-size: 122%;
}
2016-08-10 15:34:00 +00:00
}
@media (min-width: 2000px) {
2016-12-22 18:53:29 +00:00
html {
font-size: 124%;
}
2016-08-10 15:34:00 +00:00
}
@media (min-width: 2100px) {
2016-12-22 18:53:29 +00:00
html {
font-size: 126%;
}
2016-08-10 15:34:00 +00:00
}
@media (min-width: 2200px) {
2016-12-22 18:53:29 +00:00
html {
font-size: 128%;
}
2016-08-10 15:34:00 +00:00
}
@media (min-width: 2300px) {
2016-12-22 18:53:29 +00:00
html {
font-size: 130%;
}
2016-08-10 15:34:00 +00:00
}
@media (min-width: 2400px) {
2016-12-22 18:53:29 +00:00
html {
font-size: 132%;
}
2016-12-22 08:50:43 +00:00
}
@media (min-width: 2500px) {
2016-12-22 18:53:29 +00:00
html {
font-size: 134%;
}
2016-12-22 08:50:43 +00:00
}
@media (min-width: 2600px) {
2016-12-22 18:53:29 +00:00
html {
font-size: 136%;
}
2016-12-22 08:50:43 +00:00
}
@media (min-width: 2700px) {
2016-12-22 18:53:29 +00:00
html {
font-size: 138%;
}
2016-12-22 08:50:43 +00:00
}
@media (min-width: 2800px) {
2016-12-22 18:53:29 +00:00
html {
font-size: 140%;
}
2016-12-22 08:50:43 +00:00
}
@media (min-width: 2900px) {
2016-12-22 18:53:29 +00:00
html {
font-size: 142%;
}
2016-12-22 08:50:43 +00:00
}
@media (min-width: 3000px) {
2016-12-22 18:53:29 +00:00
html {
font-size: 144%;
}
2016-12-22 08:50:43 +00:00
}
@media (min-width: 3100px) {
2016-12-22 18:53:29 +00:00
html {
font-size: 146%;
}
2016-12-22 08:50:43 +00:00
}
@media (min-width: 3200px) {
2016-12-22 18:53:29 +00:00
html {
font-size: 148%;
}
2016-12-22 08:50:43 +00:00
}
@media (min-width: 3300px) {
2016-12-22 18:53:29 +00:00
html {
font-size: 150%;
}
2016-12-22 08:50:43 +00:00
}
@media (min-width: 3400px) {
2016-12-22 18:53:29 +00:00
html {
font-size: 152%;
}
2016-12-22 08:50:43 +00:00
}
@media (min-width: 3500px) {
2016-12-22 18:53:29 +00:00
html {
font-size: 154%;
}
2016-12-22 08:50:43 +00:00
}
@media (min-width: 3600px) {
2016-12-22 18:53:29 +00:00
html {
font-size: 156%;
}
2016-12-22 08:50:43 +00:00
}
@media (min-width: 3700px) {
2016-12-22 18:53:29 +00:00
html {
font-size: 158%;
}
2016-12-22 08:50:43 +00:00
}
@media (min-width: 3800px) {
2016-12-22 18:53:29 +00:00
html {
font-size: 160%;
}
2016-12-22 08:50:43 +00:00
}
@media (min-width: 3900px) {
2016-12-22 18:53:29 +00:00
html {
font-size: 162%;
}
2016-12-22 08:50:43 +00:00
}
@media (min-width: 4000px) {
2016-12-22 18:53:29 +00:00
html {
font-size: 164%;
}
2016-12-22 08:50:43 +00:00
}
@media (min-width: 4100px) {
2016-12-22 18:53:29 +00:00
html {
font-size: 166%;
}
2016-12-22 08:50:43 +00:00
}
@media (min-width: 4200px) {
2016-12-22 18:53:29 +00:00
html {
font-size: 168%;
}
2016-12-22 08:50:43 +00:00
}
@media (min-width: 4300px) {
2016-12-22 18:53:29 +00:00
html {
font-size: 170%;
}
2016-12-22 08:50:43 +00:00
}
@media (min-width: 4400px) {
2016-12-22 18:53:29 +00:00
html {
font-size: 172%;
}
2016-12-22 08:50:43 +00:00
}
@media (min-width: 4500px) {
2016-12-22 18:53:29 +00:00
html {
font-size: 174%;
}
2016-12-22 08:50:43 +00:00
}
@media (min-width: 4600px) {
2016-12-22 18:53:29 +00:00
html {
font-size: 176%;
}
2016-12-22 08:50:43 +00:00
}
@media (min-width: 4700px) {
2016-12-22 18:53:29 +00:00
html {
font-size: 178%;
}
2016-12-22 08:50:43 +00:00
}
@media (min-width: 4800px) {
2016-12-22 18:53:29 +00:00
html {
font-size: 180%;
}
2016-12-22 08:50:43 +00:00
}
@media (min-width: 4900px) {
2016-12-22 18:53:29 +00:00
html {
font-size: 182%;
}
2016-12-22 08:50:43 +00:00
}
@media (min-width: 5000px) {
2016-12-22 18:53:29 +00:00
html {
font-size: 184%
}
2016-12-22 08:50:43 +00:00
}
@media (min-width: 5100px) {
2016-12-22 18:53:29 +00:00
html {
font-size: 186%;
}
2016-08-10 15:34:00 +00:00
}