220 lines
3.2 KiB
CSS
220 lines
3.2 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: 20px/1.3 'Kufam', cursive;
|
|
background-color: rgb(109, 194, 73);
|
|
color: #212529;
|
|
}
|
|
|
|
a {
|
|
color: #fff;
|
|
}
|
|
|
|
h1,h2,h3,h4,h5,h6 {
|
|
word-break: break-all;
|
|
word-wrap: break-word;
|
|
}
|
|
|
|
h2, h3 {
|
|
margin-bottom: 1em;
|
|
}
|
|
|
|
span.line {
|
|
display: block;
|
|
}
|
|
|
|
body > .container {
|
|
margin-top: 4rem;
|
|
}
|
|
|
|
section {
|
|
padding: 3em;
|
|
margin-top: 3em;
|
|
text-align: left
|
|
}
|
|
|
|
section:nth-child(2n+1) {
|
|
background-color: rgb(64, 169, 64);
|
|
color: #000000;
|
|
}
|
|
|
|
section:last-child {
|
|
margin-bottom: 3em;
|
|
}
|
|
|
|
dt {
|
|
color: #000000;
|
|
margin-bottom: .5em;
|
|
}
|
|
|
|
.logo {
|
|
height: inherit;
|
|
position: relative;
|
|
}
|
|
|
|
.logo svg {
|
|
margin: 2rem;
|
|
}
|
|
|
|
.headline {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
font-size: 5rem;
|
|
z-index: 10;
|
|
}
|
|
|
|
.highlight {
|
|
padding: 1em 2em;
|
|
background-color: rgb(230,230,230);
|
|
color: rgb(64, 169, 64);
|
|
height: 100%;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.bg-dark {
|
|
background-color: rgb(64, 169, 64) !important;
|
|
}
|
|
|
|
.bg-light {
|
|
background-color: rgb(109, 194, 73) !important;
|
|
}
|
|
|
|
.fg-light {
|
|
color: rgb(230,230,230) !important;
|
|
}
|
|
|
|
.fg-dark2 {
|
|
color: rgb(109, 194, 73) !important;
|
|
}
|
|
|
|
footer {
|
|
position: fixed;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
z-index: 1000;
|
|
background-color: rgb(64, 169, 64);
|
|
}
|
|
|
|
#svgArt {
|
|
width:60%;
|
|
}
|
|
|
|
.dropdown-item {
|
|
text-align: center;
|
|
}
|
|
|
|
.text-columns {
|
|
column-count: 3;
|
|
column-gap: 2rem;
|
|
}
|
|
|
|
.keep-together {
|
|
break-inside: avoid;
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
|
|
section {
|
|
padding: 2em;
|
|
}
|
|
|
|
.headline {
|
|
margin-top: 1rem;
|
|
font-size: 4rem;
|
|
margin-bottom: -4rem;
|
|
}
|
|
|
|
.motto {
|
|
margin-top: -4rem;
|
|
font-size: 2rem;
|
|
}
|
|
|
|
.text-columns {
|
|
column-count: 2;
|
|
column-gap: 1rem;
|
|
}
|
|
|
|
}
|
|
|
|
/* phones, etc. */
|
|
@media (max-width: 575.98px) {
|
|
span.line {
|
|
display: inline;
|
|
}
|
|
|
|
section {
|
|
padding: 1em;
|
|
margin-top: 2em;
|
|
}
|
|
|
|
.headline {
|
|
font-size: 3rem;
|
|
margin-bottom: -1rem;
|
|
}
|
|
|
|
.logo {
|
|
width: 100%;
|
|
}
|
|
|
|
.eventdate {
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
.motto {
|
|
margin-top: -1rem;
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
.text-columns {
|
|
column-count: initial;
|
|
column-gap: initial;
|
|
}
|
|
} |