143 lines
9.2 KiB
CSS
143 lines
9.2 KiB
CSS
:root { --white: #f1edeb; --pink: #ff00ff; --green: #48bd8d; --lila: #8200ff; --orange: #ff6700; --black: #000 }
|
|
|
|
html { font-family: VG5000; background: var(--white) }
|
|
body { margin: 0 }
|
|
|
|
a { color: var(--black); }
|
|
a:hover { color: var(--pink) }
|
|
h1, h2, h3, h4, h5, p { margin: 0 }
|
|
figure { margin: 0 }
|
|
|
|
h1, .text-40 { font-size: 40pt; line-height: 58pt; font-weight: normal }
|
|
h2, .text-30 { font-size: 30pt; line-height: 29pt; font-weight: normal }
|
|
h3, .text-22 { font-size: 22pt; line-height: 29pt; font-weight: normal }
|
|
h4, .text-16, html { font-size: 16pt; line-height: 29pt; font-weight: normal }
|
|
h5, h6, .text-12 { font-size: 12pt; line-height: 15pt; font-weight: normal }
|
|
|
|
h2 { margin-top: 16pt }
|
|
|
|
h1 + p { margin-top: 21pt }
|
|
h2 + p { margin-top: 5pt }
|
|
|
|
.uppercase { text-transform: uppercase }
|
|
|
|
.block { display: block !important }
|
|
.flex { display: flex !important }
|
|
|
|
.grid { display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: auto; gap: 22pt }
|
|
.grid > .column { grid-column: span var(--span) }
|
|
.grid > .column:has(> .align-self-center) { display: grid }
|
|
.grid img { width: 100%; max-width: 100% }
|
|
|
|
.border-top { border-top: 1px solid var(--black) }
|
|
|
|
.leading-none { line-height: 1 }
|
|
|
|
.font-kobata { font-family: Kobata !important; font-weight: normal }
|
|
.font-vg5000 { font-family: VG5000 !important }
|
|
|
|
.text-center { text-align: center }
|
|
.align-self-center { align-self: center }
|
|
|
|
code { font-family: Kobata !important; font-weight: normal; word-break: break-word; hyphens: auto }
|
|
|
|
.bg-white-white, .bg-white-pink, .bg-white-green, .bg-white-lila, .bg-white-orange, .bg-white-black { background-color: var(--white) }
|
|
.bg-pink-white, .bg-pink-pink, .bg-pink-green, .bg-pink-lila, .bg-pink-orange, .bg-pink-black { background-color: var(--pink) }
|
|
.bg-green-white, .bg-green-pink, .bg-green-green, .bg-green-lila, .bg-green-orange, .bg-green-black { background-color: var(--green) }
|
|
.bg-lila-white, .bg-lila-pink, .bg-lila-green, .bg-lila-lila, .bg-lila-orange, .bg-lila-black { background-color: var(--lila) }
|
|
.bg-orange-white, .bg-orange-pink, .bg-orange-green, .bg-orange-lila, .bg-orange-orange, .bg-orange-black { background-color: var(--orange) }
|
|
.bg-black-white, .bg-black-pink, .bg-black-green, .bg-black-lila, .bg-black-orange, .bg-black-black { background-color: var(--black) }
|
|
|
|
.bg-white-white, .bg-pink-white, .bg-green-white, .bg-lila-white, .bg-orange-white, .bg-black-white { background-image: url("grid/white.png") }
|
|
.bg-white-pink, .bg-pink-pink, .bg-green-pink, .bg-lila-pink, .bg-orange-pink, .bg-black-pink { background-image: url("grid/pink.png") }
|
|
.bg-white-green, .bg-pink-green, .bg-green-green, .bg-lila-green, .bg-orange-green, .bg-black-green { background-image: url("grid/green.png") }
|
|
.bg-white-lila, .bg-pink-lila, .bg-green-lila, .bg-lila-lila, .bg-orange-lila, .bg-black-lila { background-image: url("grid/lila.png") }
|
|
.bg-white-orange, .bg-pink-orange, .bg-green-orange, .bg-lila-orange, .bg-orange-orange, .bg-black-orange { background-image: url("grid/orange.png") }
|
|
.bg-white-black, .bg-pink-black, .bg-green-black, .bg-lila-black, .bg-orange-black, .bg-black-black { background-image: url("grid/black.png") }
|
|
|
|
@media only screen and (min-resolution: 192dpi) {
|
|
.bg-white-white, .bg-pink-white, .bg-green-white, .bg-lila-white, .bg-orange-white, .bg-black-white { background-image: url("grid/white@2x.png"); background-size: 105px 78px }
|
|
.bg-white-pink, .bg-pink-pink, .bg-green-pink, .bg-lila-pink, .bg-orange-pink, .bg-black-pink { background-image: url("grid/pink@2x.png"); background-size: 105px 78px }
|
|
.bg-white-green, .bg-pink-green, .bg-green-green, .bg-lila-green, .bg-orange-green, .bg-black-green { background-image: url("grid/green@2x.png"); background-size: 105px 78px }
|
|
.bg-white-lila, .bg-pink-lila, .bg-green-lila, .bg-lila-lila, .bg-orange-lila, .bg-black-lila { background-image: url("grid/lila@2x.png"); background-size: 105px 78px }
|
|
.bg-white-orange, .bg-pink-orange, .bg-green-orange, .bg-lila-orange, .bg-orange-orange, .bg-black-orange { background-image: url("grid/orange@2x.png"); background-size: 105px 78px }
|
|
.bg-white-black, .bg-pink-black, .bg-green-black, .bg-lila-black, .bg-orange-black, .bg-black-black { background-image: url("grid/black@2x.png"); background-size: 105px 78px }
|
|
}
|
|
|
|
.container { padding: 37pt 22pt }
|
|
|
|
.link { text-decoration: none; color: var(--black) }
|
|
.link:hover { color: var(--lila) }
|
|
|
|
.no-button { border: none; background: transparent; margin: 0; padding: 0 }
|
|
.no-button:hover { cursor: pointer }
|
|
|
|
.embed .iframe { display: none }
|
|
.embed .iframe.active { padding:56.25% 0 0 0; position:relative }
|
|
.embed .iframe.active iframe { position:absolute; top:0; left:0; width:100%; height:100% }
|
|
.embed div { position: relative; }
|
|
.embed video { width: 100%; }
|
|
.embeded-iframe { border: none; width: 100% }
|
|
|
|
.siema { position: relative; transition: height .2s }
|
|
.siema button { position: absolute; top: 50%; background: #fff; color: var(--blue); border: none; font-size: 1rem; margin: 0; opacity: 0; transition: opacity .5s }
|
|
.siema button:hover { cursor: pointer; }
|
|
.siema:hover button { opacity: 1 }
|
|
.siema button.prev { left: 0; }
|
|
.siema button.next { right: 0; }
|
|
.siema img { width: 100%; object-fit: contain }
|
|
|
|
.calendar-entry { display: grid; grid-template-columns: 199pt 508pt }
|
|
|
|
.menu-button { display: none; width: 47px; height: 48px; flex-direction: column; justify-content: center; box-sizing: content-box }
|
|
.menu-button div { width: 47px; height: 7px; background: var(--black) }
|
|
.menu-button:hover { color: var(--lila) }
|
|
.menu-button:hover div { background: var(--lila) }
|
|
|
|
#menu-container { max-width: 498px; position: absolute; left: 0; top: 0; bottom: 0; pointer-events: none; }
|
|
#menu-container button, #menu-container a { pointer-events: initial }
|
|
nav { display: none }
|
|
nav { height: 100%; padding-top: 89pt !important; justify-content: space-between; flex-direction: column; box-sizing: border-box; }
|
|
nav > div { margin-left: -2px }
|
|
|
|
#lang-switch { position: absolute; top: -7px; right: 0 }
|
|
#lang-switch a { line-height: 1rem !important }
|
|
|
|
#content { position: relative; padding-bottom: calc(22pt + 40pt + 22pt); overflow-wrap: break-word; hyphens: auto }
|
|
footer { background: var(--white); padding: 22pt; position: fixed; left: 0; right: 0; bottom: 0; line-height: 1 !important; }
|
|
footer a { line-height: 1 !important; text-align-last: justify; display: block; white-space: nowrap; letter-spacing: 2.8vw }
|
|
@media (max-width: 1700px) { footer a { letter-spacing: 2vw } }
|
|
@media (max-width: 1200px) { footer a { letter-spacing: 1vw } }
|
|
|
|
.headline { padding: 22pt; padding-left: 179pt }
|
|
.content-footer { display:flex; justify-content: space-between; align-items: baseline }
|
|
.content-footer-socials { display: flex; justify-content: space-between; align-items: center; width: 439px; }
|
|
|
|
@media (max-width: 750px) {
|
|
#menu { overflow-y: scroll; }
|
|
#content { padding-bottom: calc(11pt + 22pt + 11pt) }
|
|
footer { font-size: 22pt !important; letter-spacing: 0 !important; padding: 11pt !important }
|
|
.headline { padding-left: 79pt }
|
|
.headline h3 { font-size: 16pt; max-width: calc(100dvw - 22pt - 37pt - 37pt - 37pt - 22pt) }
|
|
.content-footer { flex-direction: column; }
|
|
.content-footer-socials { width: 100% }
|
|
.calendar-entry { grid-template-columns: 1fr }
|
|
.calendar-entry > a { width: calc(100dvw - 22pt - 22pt) }
|
|
|
|
.project-list { text-align: center; }
|
|
.project-list a, .project-list span { display: block }
|
|
|
|
.grid { display: block; }
|
|
.siema button { font-size: 12px; opacity: 1 }
|
|
video { width: 100%; }
|
|
}
|
|
|
|
@media (max-width: 450px) {
|
|
footer { font-size: 16pt !important }
|
|
}
|
|
|
|
.embed-btn { display:block; position:absolute !important; top:0; right:0; bottom:0; left:0; z-index:1; background-position:50%; background-size: 15.5% auto; background-repeat:no-repeat; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 8'%3E%3Crect fill='rgba(0,0,0,.65)' width='13' height='8' rx='1' ry='1'/%3E%3Cpolygon fill='%23fff' points='5 6 9 4 5 2'/%3E%3C/svg%3E") }
|
|
.embed-btn:hover { cursor: pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 8'%3E%3Crect fill='%231AB7EA' width='13' height='8' rx='1' ry='1'/%3E%3Cpolygon fill='%23fff' points='5 6 9 4 5 2'/%3E%3C/svg%3E") }
|
|
.embed-btn.yt { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 68 48'%3E%3Cpath fill='%23212121' fill-opacity='.8' d='M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z'/%3E%3Cpath fill='%23fff' d='m45 24-18-10v20'/%3E%3C/svg%3E") }
|
|
.embed-btn.yt:hover { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 68 48'%3E%3Cpath fill='red' d='M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z'/%3E%3Cpath fill='%23fff' d='m45 24-18-10v20'/%3E%3C/svg%3E") }
|