191 lines
3.4 KiB
CSS
191 lines
3.4 KiB
CSS
@font-face {
|
|
font-family: "Archivo";
|
|
src: url(../media/Archivo-Regular.ttf) format('truetype');
|
|
font-weight: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "Archivo";
|
|
src: url(../media/Archivo-SemiBold.ttf) format('truetype');
|
|
font-weight: bold;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "Archivo";
|
|
src: url(../media/Archivo-Italic.ttf) format('truetype');
|
|
font-weight: italic;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "SourceSansPro";
|
|
src: url(../media/SourceSansPro-Regular.ttf) format('truetype');
|
|
font-weight: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "SourceSansPro";
|
|
src: url(../media/SourceSansPro-SemiBold.ttf) format('truetype');
|
|
font-weight: bold;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "SourceSansPro";
|
|
src: url(../media/SourceSansPro-Italic.ttf) format('truetype');
|
|
font-weight: italic;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "Exo2";
|
|
src: url(../media/Exo2-Regular.ttf) format('truetype');
|
|
font-weight: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "Exo2";
|
|
src: url(../media/Exo2-Bold.ttf) format('truetype');
|
|
font-weight: bold;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "Exo2";
|
|
src: url(../media/Exo2-Italic.ttf) format('truetype');
|
|
font-weight: italic;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "Roboto";
|
|
src: url(../media/Roboto-Regular.ttf) format('truetype');
|
|
font-weight: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "Roboto";
|
|
src: url(../media/Roboto-Bold.ttf) format('truetype');
|
|
font-weight: bold;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "Roboto";
|
|
src: url(../media/Roboto-Italic.ttf) format('truetype');
|
|
font-weight: italic;
|
|
font-display: swap;
|
|
}
|
|
|
|
@keyframes appear {
|
|
from {
|
|
opacity: 0.05;
|
|
}
|
|
|
|
to {
|
|
opacity: 1.0;
|
|
}
|
|
}
|
|
|
|
@keyframes appear-from-right {
|
|
from {
|
|
margin-left: 100%;
|
|
width: 300%;
|
|
opacity: 0.05;
|
|
}
|
|
|
|
to {
|
|
margin-left: 0%;
|
|
width: 100%;
|
|
opacity: 1.0;
|
|
}
|
|
}
|
|
|
|
@keyframes appear-from-below {
|
|
from {
|
|
margin-top: 100%;
|
|
opacity: 0.05;
|
|
}
|
|
|
|
to {
|
|
margin-top: 0%;
|
|
opacity: 1.0;
|
|
}
|
|
}
|
|
|
|
@media (min-device-width: 10cm) {
|
|
body {
|
|
font-size: 25px;
|
|
}
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body .section:first-child {
|
|
animation-name: appear;
|
|
animation-duration: 1s;
|
|
}
|
|
|
|
body .section:not(:first-child) {
|
|
animation-name: appear-from-below;
|
|
animation-duration: 1.2s;
|
|
animation-timing-function: cubic-bezier(.27,.72,.44,1.01);
|
|
}
|
|
|
|
.trianglify {
|
|
size: 100%;
|
|
background-repeat: no-repeat;
|
|
background-attachment: fixed;
|
|
background-image: url(../media/bg.png);
|
|
}
|
|
|
|
.section {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
font-family: "Exo2";
|
|
margin-left: 1em;
|
|
margin-right: 1em;
|
|
margin-bottom: 2em;
|
|
filter: drop-shadow(5px 5px 8px rgba(0,0,0,.4));
|
|
overflow: hidden;
|
|
|
|
}
|
|
|
|
.section > div {
|
|
padding: 10px;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
}
|
|
|
|
.section > * {
|
|
flex: 1 1 650px;
|
|
}
|
|
|
|
.section h1 {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.section h2 {
|
|
font-weight: italic;
|
|
}
|
|
|
|
.container {
|
|
text-align: center;
|
|
background: rgba(0,150,136,0.2);
|
|
}
|
|
|
|
.container ul {
|
|
text-align: left;
|
|
padding-left: 5%;
|
|
}
|
|
|
|
.pane {
|
|
max-width: 100%;
|
|
}
|