diff --git a/Mona-Sans.woff2 b/Mona-Sans.woff2 new file mode 100644 index 0000000..d88d5ff Binary files /dev/null and b/Mona-Sans.woff2 differ diff --git a/VCROCDFaux.woff2 b/VCROCDFaux.woff2 new file mode 100644 index 0000000..5c823bd Binary files /dev/null and b/VCROCDFaux.woff2 differ diff --git a/script.js b/script.js index a30718a..c9f3ebf 100644 --- a/script.js +++ b/script.js @@ -10,8 +10,8 @@ let fields = [ "Kabel vergessen", "Halle gesucht", "$dinge gelötet", - "an SoS teilgenommen", - "Neue Leute kennengelernt", + "an SoS teil-genommen", + "Neue Leute kennen-gelernt", "Wasser getrunken", "Waffel gegessen", "Corona Test gemacht", @@ -19,9 +19,9 @@ let fields = [ "Fairydust bewundert", "Talk angeschaut", "CCC Merch getragen", - "Engelschicht gemacht", + "Engel-schicht gemacht", "In der Lounge getanzt", - "Etwas Neues ausprobiert", + "Etwas Neues aus-probiert", "Maske getragen", "geduscht" ]; diff --git a/style.css b/style.css index b1e01d9..2b4edcb 100644 --- a/style.css +++ b/style.css @@ -1,6 +1,66 @@ + @font-face { + font-family: "VCROCDFaux"; + src: url("./VCROCDFaux.woff2") format("woff2"); + } + + @font-face { + font-family: "MonaSans"; + src: url("./Mona-Sans.woff2") format("woff2"); + } + + /*body { + background: #000; + color: #fff; + margin: 20px auto; + max-width: 640px; + padding: 0 20px; + } + + .cover { + aspect-ratio: 1/1; + display: block; + margin: 20px 0; + width: 100%; + }*/ + + h2 { + font-family: MonaSans, sans-serif; + margin-top: 60px; + font-weight: bold; + } + + p { + font-family: VCROCDFaux, monospace; + color: #aaa; + } + + /*.btn { + display: block; + background: #cc4d47; + color: #fff; + font-family: VCROCDFaux, monospace; + text-decoration: none; + text-align: center; + line-height: 50px; + display: flex; + gap: 15px; + justify-content: center; + align-items: center; + margin: 40px 0; + } + + .btn:hover { + background: #4e1614; + } + + .btn svg { + width: 20px; + height: 20px; + }*/ + /* HTML Selectors */ body { - font-family: monospace; + font-family: VCROCDFaux, monospace; height: 95vh; width: 95vw; overflow: hidden; @@ -27,7 +87,7 @@ td { height: calc(100vh / 6); transition: background-color ease-out .350s; border-radius: 40px; - font-size: xx-large; + font-size: x-large; } h1, p { @@ -141,7 +201,7 @@ div#winner-message.won { @media screen and (max-width: 576px) and (orientation: portrait) { td { - font-size: unset; + font-size: small; } div#winner-message.won { animation: unset;