diff --git a/2023/index.html b/2023/index.html index 0a26059..3197c89 100644 --- a/2023/index.html +++ b/2023/index.html @@ -56,25 +56,37 @@ --hovercolor: #db2e47; --cyboxcolor: #333; --yellow: #d29d30; + + --color-background: var(--backcolor); + --color-text: var(--maincolor); + --color-footer-text: var(--cyboxcolor); + --color-menu-background: var(--headerfooterbgcolor); + --color-hover: var(--yellow); + --color-support: var(--supportcolor); } *::selection { - background-color: var(--yellow); + background-color: var(--color-hover); } html { font-family: "block"; font-size: 1rem; - background-color: var(--backcolor); - color: var(--maincolor); + background-color: var(--color-background); + color: var(--color-text); height: 100%; line-height: 1.2; + text-rendering: optimizeLegibility !important; + font-smooth: always !important; + -webkit-font-smoothing: antialiased !important; + -moz-osx-font-smoothing: grayscale; } body { height: 100%; position: relative; margin: 0; + font-size: 2rem; } a { @@ -83,7 +95,7 @@ } a:hover { - color: var(--maincolor); + color: var(--color-text); } .c-layout { @@ -98,7 +110,8 @@ position: fixed; bottom: 0; right: 0; - color: var(--cyboxcolor); + font-size: 1rem; + color: var(--color-footer-text); } .c-footer__content { @@ -106,18 +119,17 @@ } .c-title { - font-size: 3.1rem; + font-size: 3.4rem; transform: skewY(-3deg); - color: var(--yellow); + color: var(--color-hover); } .c-title::selection, .c-title *::selection { - background-color: var(--maincolor); + background-color: var(--color-text); } .c-text { - font-size: 2rem; transform: skewY(-3deg); } @@ -126,7 +138,7 @@ text-transform: uppercase; font-size: 6rem; text-decoration: none; - color: var(--maincolor); + color: var(--color-text); transform: skewY(-3deg); opacity: 0.5; margin-left: 24px; @@ -140,9 +152,70 @@ border-radius: 12px; } + .c-menu { + position: fixed; + top: 0; + left: 0; + z-index: 1000; + } + + .c-menu__hamburger-button { + height: 70px; + width: 70px; + text-align: center; + box-sizing: border-box; + cursor: pointer !important; + position: relative; + transition: margin 300ms ease-out; + background: transparent; + border: none; + color: var(--color-text); + } + + .c-menu__hamburger-button:hover, + .c-menu__hamburger-button:focus { + color: var(--color-hover); + } + + .c-menu__hamburger-button-bg { + margin: 0; + padding: 0; + position: absolute; + top: 0; + left: 0; + z-index: 2; + display: block; + width: 100%; + height: 100%; + } + + .c-menu__hamburger-button-icon { + color: var(--color-menu-background); + position: absolute; + left: 50%; + top: 50%; + display: block; + -webkit-transform: translateX(-50%) translateY(-50%); + transform: translateX(-50%) translateY(-50%); + width: 30px; + height: 30px; + z-index: 2; + } + .u-highlight-text { font-weight: bold; - color: var(--supportcolor); + color: var(--color-support); + } + + .u-monospace { + display: inline-flex; + justify-content: center; + } + + .u-monospace span { + display: inline-block; + width: 1ch; + text-align: center; } .u-visually-hidden { diff --git a/index.html b/index.html index d5ddfdf..dbae60e 100644 --- a/index.html +++ b/index.html @@ -37,163 +37,94 @@ + + +

Hoeveel vrouwen spelen er komende editie op Jera on Air diff --git a/style.css b/style.css new file mode 100644 index 0000000..7093650 --- /dev/null +++ b/style.css @@ -0,0 +1,193 @@ +@font-face { + font-family: "block"; + src: url(https://hoeveelvrouwenopjera.nl/blocktregcon-webfont.woff2); +} + +@font-face { + font-family: "Jera on Air"; + src: url(https://hoeveelvrouwenopjera.nl/jera-font-air-webfont.woff2); +} + +*::selection { + background-color: var(--color-hover); +} + +html { + font-family: "block"; + font-size: 1rem; + background-color: var(--color-background); + color: var(--color-text); + height: 100%; + line-height: 1.2; + text-rendering: optimizeLegibility !important; + font-smooth: always !important; + -webkit-font-smoothing: antialiased !important; + -moz-osx-font-smoothing: grayscale; +} + +body { + height: 100%; + position: relative; + margin: 0; + font-size: 2rem; +} + +a { + color: inherit; + text-decoration: none; +} + +a:hover { + color: var(--color-text); +} + +.c-layout { + max-width: 51rem; + margin: 0 auto; + padding: 24px; +} + +.c-footer { + width: 100%; + text-align: right; + position: fixed; + bottom: 0; + right: 0; + font-size: 1rem; + color: var(--color-footer-text); +} + +.c-footer__content { + padding: 8px 12px; +} + +.c-title { + font-size: 3.4rem; + transform: skewY(-3deg); + color: var(--color-hover); +} + +.c-title::selection, +.c-title *::selection { + background-color: var(--color-text); +} + +.c-text { + transform: skewY(-3deg); +} + +.c-link { + font-family: "Jera on Air"; + text-transform: uppercase; + font-size: 6rem; + text-decoration: none; + color: var(--color-text); + transform: skewY(-3deg); + opacity: 0.5; + margin-left: 24px; +} + +.c-link:hover { + opacity: 1; +} + +.c-spotify-embed { + border-radius: 12px; +} + +.c-menu { + position: fixed; + top: 0; + left: 0; + z-index: 1000; +} + +.c-menu__hamburger-button { + height: 70px; + width: 70px; + text-align: center; + box-sizing: border-box; + cursor: pointer !important; + position: relative; + transition: margin 300ms ease-out; + background: transparent; + border: none; + color: var(--color-text); +} + +.c-menu__hamburger-button:hover, +.c-menu__hamburger-button:focus { + color: var(--color-hover); +} + +.c-menu__hamburger-button-bg { + margin: 0; + padding: 0; + position: absolute; + top: 0; + left: 0; + z-index: 2; + display: block; + width: 100%; + height: 100%; +} + +.c-menu__hamburger-button-icon { + color: var(--color-menu-background); + position: absolute; + left: 50%; + top: 50%; + display: block; + -webkit-transform: translateX(-50%) translateY(-50%); + transform: translateX(-50%) translateY(-50%); + width: 30px; + height: 30px; + z-index: 2; +} + +.u-highlight-text { + font-weight: bold; + color: var(--color-support); +} + +.u-monospace { + display: inline-flex; + justify-content: center; +} + +.u-monospace span { + display: inline-block; + width: 1ch; + text-align: center; +} + +.u-visually-hidden { + clip: rect(0 0 0 0); + clip-path: inset(50%); + height: 1px; + overflow: hidden; + position: absolute; + white-space: nowrap; + width: 1px; +} + +.u-prevent-break { + display: inline-block; +} + +@media only screen and (min-width: 656px) { + .c-layout { + padding: 48px; + } + + .c-title { + font-size: 5rem; + } + + .c-link { + position: absolute; + bottom: 20%; + right: 20%; + margin: 0; + } +} \ No newline at end of file