141 lines
2.1 KiB
CSS
141 lines
2.1 KiB
CSS
@font-face {
|
|
font-family: 'Kufam';
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
font-display: swap;
|
|
src: url(../fonts/Kufam.woff2) format('woff2');
|
|
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
|
}
|
|
|
|
html,body{height:100%;}
|
|
body {
|
|
font: 18px/1.3 'Kufam', cursive;
|
|
background-color: rgb(109, 194, 73); // 6dc249
|
|
color: rgb(252, 250, 248);
|
|
}
|
|
|
|
|
|
h1,h2,h3,h4,h5,h6 {
|
|
word-break: break-all;
|
|
word-wrap: break-word;
|
|
}
|
|
|
|
span.line {
|
|
display: block;
|
|
}
|
|
|
|
body > .container {
|
|
margin-top: 4rem;
|
|
}
|
|
|
|
.logo {
|
|
height: inherit;
|
|
position: relative;
|
|
}
|
|
|
|
.logo svg {
|
|
margin: 2rem;
|
|
}
|
|
|
|
.headline {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
font-size: 5rem;
|
|
z-index: 10;
|
|
}
|
|
|
|
.eventdate {
|
|
transform: rotate(270deg);
|
|
transform-origin: left top 0;
|
|
font-size: 1.5rem;
|
|
color: #888;
|
|
margin-bottom: -3rem;
|
|
}
|
|
|
|
.motto {
|
|
margin-top: -8rem;
|
|
font-size: 3rem;
|
|
text-align: right;
|
|
}
|
|
|
|
footer {
|
|
position: fixed;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
z-index: 1000;
|
|
}
|
|
|
|
#svgArt {
|
|
width:60%;
|
|
}
|
|
|
|
.dropdown-item {
|
|
text-align: center;
|
|
}
|
|
|
|
/* Large devices (desktops, less than 1200px) */
|
|
@media (max-width: 1199.98px) {
|
|
#svgArt {
|
|
width:100%;
|
|
}
|
|
|
|
body > .container {
|
|
margin-top: 2rem;
|
|
}
|
|
|
|
aside {
|
|
margin-top: 1rem;
|
|
padding-top: 1rem;
|
|
padding-bottom: 1rem;
|
|
}
|
|
|
|
footer {
|
|
position: initial;
|
|
}
|
|
}
|
|
|
|
/* tablets, and similar size */
|
|
@media (max-width: 767.98px) {
|
|
body > .container {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.headline {
|
|
margin-top: 1rem;
|
|
font-size: 4rem;
|
|
margin-bottom: -4rem;
|
|
}
|
|
|
|
.motto {
|
|
margin-top: -4rem;
|
|
font-size: 2rem;
|
|
}
|
|
|
|
}
|
|
|
|
/* phones, etc. */
|
|
@media (max-width: 575.98px) {
|
|
span.line {
|
|
display: inline;
|
|
}
|
|
|
|
.headline {
|
|
font-size: 3rem;
|
|
margin-bottom: -1rem;
|
|
}
|
|
|
|
.logo {
|
|
width: 100%;
|
|
}
|
|
|
|
.eventdate {
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
.motto {
|
|
margin-top: -1rem;
|
|
font-size: 1.5rem;
|
|
}
|
|
} |