Incorporate Choriosity CI

static/site.css

@@ -1,8 +1,55 @@
+:root {
+    --color-white-100: white;
+    --color-white-90: #e6e6e6;
+    --color-white-80: #cccccc;
+    --color-white-70: #b3b3b3;
+    --color-white-10: #191919;
+    --color-choriosity-red: #be0519;
+    --color-choriosity-red--medium: #990514;
+    --color-choriosity-red--darker: #66030d;
+    --color-choriosity-red--rgba: 190, 5, 25;
+    --color-choriosity-red--light: #faeaea;
+    --color-background: #fffffa;
+    --color-tap: var(--color-choriosity-red--darker);
+    --color-callout-bg: var(--color-background);
+  }
+
+
+  @font-face {
+    font-family: 'Fira Sans';
+    src: url(FiraSans-Regular.woff2) format("woff2");
+    font-weight: 400;
+    font-style: normal;
+  }
+  
+  @font-face {
+    font-family: 'Fira Sans';
+    src: url(FiraSans-Italic.woff2) format("woff2");
+    font-weight: 400;
+    font-style: italic;
+  }
+  
+  @font-face {
+    font-family: 'Fira Sans';
+    src: url(FiraSans-Medium.woff2) format("woff2");
+    font-weight: 500;
+    font-style: normal;
+  }
+  
+  @font-face {
+    font-family: 'Fira Sans';
+    src: url(FiraSans-SemiBold.woff2) format("woff2");
+    font-weight: 600;
+    font-style: normal;
+  }
+
+  
+
 * {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
-    font-family: sans-serif;
+    font-family: Fira Sans, Helvetica, Arial, sans-serif;
 }
 
 .vote-buttons,
@@ -31,6 +78,7 @@
     padding: 0.3em;
     margin-bottom: 0.7em;
     display: inline-block;
+    font-size: 1.25rem;
 }
 
 .clear {
@@ -38,13 +86,13 @@
 }
 
 .song {
-    background-color: #f0f0f0;
+    background-color: var(--color-choriosity-red--light);
     padding: 0.4em;
     border-radius: 0.5em;
     width: 30em;
-    font-family: sans-serif;
     margin-bottom: 1rem;
     margin-left: 0.5em;
+    float: left;
 }
 
 
@@ -225,21 +273,28 @@
 }
 
 h1 {
-    font-family: sans-serif;
     padding: 0.1em;
     padding-left: 0.2em;
     margin-bottom: 1rem;
-    font-size: 1.5em;
+    font-size: 1.25rem;
+    background-color: var(--color-choriosity-red);
+    color: white;
+    /*border-bottom: 0.3rem solid var(--color-choriosity-red--light);*/
+    clear: both;
+}
+
+#songs h1 .color {
+    border: 0.2rem solid color-mix(in srgb, hsl(calc(var(--hue) * 360), 100%, 40%) 50%, white);
+    background-color: hsl(calc(var(--hue) * 360), 100%, 40%);
+    border-radius: 0.5em;
+    margin-right: 1em;
 }
 
 #songs h1 {
-    background-color: color-mix(in srgb, hsl(calc(var(--hue) * 360), 100%, 40%) 50%, transparent);
+    border-left: 0.3em solid white;
-    border-bottom: 0.3rem solid hsl(calc(var(--hue) * 360), 100%, 40%);
+    box-shadow: -1em 0px 0px 0px hsl(calc(var(--hue) * 360), 100%, 40%);
-}
+    margin-left: 1em;
-
+    padding-left: 0.3em;
-body>h1 {
-    background-color: color-mix(in srgb, hsl(0, 0%, 40%) 50%, transparent);
-    border-bottom: 0.3rem solid hsl(0, 0%, 40%);
 }
 
 #yt-player,
@@ -278,4 +333,19 @@ body>h1 {
     -ms-transform: translate(-50%, -50%);
     transform: translate(-50%, -50%);
     width: 1.5em;
+}
+
+#title {
+    margin-top: 1em;
+    font-size: 2rem;
+    /*line-height: 2rem;*/
+}
+
+#title-logo {
+    margin-top: -0.7em;
+    margin-bottom: -0.8em;
+    vertical-align: middle;
+    height: 3em;
+    filter: drop-shadow(0 0 1px var(--color-choriosity-red--medium));
+    margin-right: 1em;
 }

templates/voting.html

@@ -189,8 +189,8 @@
         abgeben.
     </div>
     {% else %}
-    <h1>Hallo :)</h1>
+    <h1 id="title"><img id="title-logo" src="https://choriosity.de/assets/images/logo-choriosity_weiss.svg"> Liederwahl</h1>
-    <div class="text">Du kannst die Liederwahl jederzeit unterbrechen und zu einem späteren Zeitpunkt weitermachen.
+    <div class="text">Du kannst die Liederwahl jederzeit unterbrechen und zu einem späteren Zeitpunkt weitermachen. Mit einem Klick auf das Thumbnail kannst du das Lied abspielen.
     </div>
     {% endif %}
     <div id="songs">