Add first info page, improve layout

Public/festival/assets/back.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 36"><path fill="#fff" fill-rule="evenodd" d="M19.5 2.6 3.7 18l15.8 15.4a1.5 1.5 0 0 1 0 2.1 1.6 1.6 0 0 1-2.2 0L.4 19.1a1.5 1.5 0 0 1 0-2.2L17.4.4a1.6 1.6 0 0 1 2.1 0 1.5 1.5 0 0 1 0 2.2z"/></svg>

Public/festival/assets/festival.css

@@ -17,6 +17,8 @@ body {
   margin: 0;
   min-height: 100%;
   background: linear-gradient(160deg, #784141, #271c27);
+  display: flex;
+  align-items: center;
 }
 
 .texts {
@@ -32,7 +34,6 @@ body {
       grid-template-columns: 100%;
   justify-items: center;
   position: absolute;
-  top: 20%;
   -webkit-transition-duration: 500ms;
   transition-duration: 500ms;
 }
@@ -50,6 +51,13 @@ body {
   font-weight: 100;
 }
 
+.button-text {
+  font-size: 40px;
+  -ms-grid-column: 1;
+  grid-column: 1;
+  font-weight: 300;
+}
+
 .date-text {
   -ms-grid-row: 2;
   grid-row: 2;
@@ -88,6 +96,11 @@ body {
   background: rgba(255, 255, 255, 0.2);
 }
 
+.info-button {
+    text-decoration: none;
+    color: white;
+}
+
 .register-button {
   -ms-grid-row: 4;
   grid-row: 4;
@@ -191,6 +204,7 @@ input[type=text] {
 .add-calender-event {
   -ms-grid-row: 5;
   grid-row: 5;
+  cursor: pointer;
 }
 
 .music-control {
@@ -224,6 +238,158 @@ input[type=text] {
     display: none;
 }
 
+.top-bar {
+    position: absolute;
+    width: 100%;
+    height: 150px;
+    display: block;
+    text-align: center;
+}
+
+@media only screen and (max-width: 767px) {
+    .top-bar {
+        width: calc(100% - 40px);
+        padding: 0 20px;
+    }
+}
+
+.content {
+    width: calc(100% - 40px);
+    max-width: 800px;
+    padding: 0 20px;
+    margin: 0 auto;
+    overflow-y: auto;
+    height: 100vh;
+}
+
+.content-grid {
+    width: 100%;
+    display: grid;
+    grid-template-columns: 25% 40% 25%;
+    grid-column-gap: 5%;
+    align-items: center;
+    z-index: 1;
+    padding-top: 10px;
+}
+
+.back-link {
+    text-decoration: none;
+    grid-column: 1;
+    grid-row: 1;
+    display: inline-flex;
+    align-items: center;
+    vertical-align: baseline;
+    line-height: 30px;
+    box-sizing: border-box;
+    z-index: 2;
+}
+
+.back-icon {
+    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAzNiI+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMTkuNSAyLjYgMy43IDE4bDE1LjggMTUuNGExLjUgMS41IDAgMCAxIDAgMi4xIDEuNiAxLjYgMCAwIDEtMi4yIDBMLjQgMTkuMWExLjUgMS41IDAgMCAxIDAtMi4yTDE3LjQuNGExLjYgMS42IDAgMCAxIDIuMSAwIDEuNSAxLjUgMCAwIDEgMCAyLjJ6Ii8+PC9zdmc+');
+    background-size: cover;
+    height: 18px;
+    width: 10px;
+}
+
+.back-text {
+    color: #fff;
+    display: table-cell;
+    vertical-align: middle;
+    padding-left: 5px;
+}
+
+.header-subtitle {
+    box-sizing: border-box;
+    grid-column: 2;
+    grid-row: 1;
+    font-size: 36px;
+    font-weight: 200;
+    color: #fff;
+    line-height: 48px;
+    letter-spacing: -.02em;
+    z-index: 1;
+    text-align: center;
+}
+
+@media only screen and (max-width: 767px) {
+    .header-subtitle {
+        font-size: 22px;
+        line-height: 24px;
+    }
+}
+
+@media only screen and (max-width: 374px) {
+    .header-subtitle {
+        font-size: 20px;
+    }
+}
+
+.top-line {
+    height: 1px;
+    background-color: #fff9;
+    margin: 0px 80px;
+}
+
+.header-title {
+    font-size: 48px;
+    font-weight: 200;
+    color: #fff;
+    line-height: 60px;
+    letter-spacing: -.02em;
+}
+
+.scroll-content {
+    top: 120px;
+    position: absolute;
+    width: calc(100% - 40px);
+    max-width: 800px;
+    bottom: 15px;
+    overflow-y: auto;
+    color: white;
+}
+
+@media only screen and (max-width: 767px) {
+    
+    .scroll-content {
+        top: 100px;
+    }
+}
+
+.topic-title {
+    font-weight: 400;
+    font-size: 24px;
+    padding: 25px 0 10px;
+}
+
+.topic-content {
+    font-size: 20px;
+}
+
+
+@media only screen and (max-width: 350px) {
+    .content {
+        width: calc(100% - 20px);
+        padding: 0 10px;
+    }
+    
+    .scroll-content {
+        width: calc(100% - 20px);
+    }
+}
+
+@media only screen and (max-width: 767px) {
+    .header-title {
+        font-size: 40px;
+        line-height: 54px;
+    }
+}
+
+@media only screen and (max-width: 374px) {
+    .header-title {
+        font-size: 36px;
+    }
+}
+
 @media only screen and (max-width: 800px) {
   .title-text {
     font-size: 18vw;
@@ -231,6 +397,9 @@ input[type=text] {
   .normal-text {
     font-size: 7vw;
   }
+  .button-text {
+    font-size: 5vw;
+  }
   input[type=text] {
     font-size: 7vw;
   }
@@ -243,6 +412,12 @@ input[type=text] {
   .normal-text {
     font-size: 4vh;
   }
+  .button-text {
+    font-size: 3vh;
+  }
+  .register-button {
+      margin-top: 0px;
+  }
   input[type=text] {
     font-size: 4vh;
   }

Public/festival/festival.html

@@ -54,7 +54,8 @@
             <div class="error-text normal-text final-text" id="error-text">Registrierung fehlgeschlagen</div>
             <div class="registered-text normal-text final-text" id="registered-text">Registrierung erfolgreich</div>
             <div class="declined-text normal-text final-text" id="declined-text">Einladung abgelehnt</div>
-            <div class="add-calender-event button normal-text" id="add-calender-event" onclick="download('/festival/festival.ics')">Kalendereintrag</div>
+            <div class="add-calender-event button-text" id="add-calender-event" onclick="download('/festival/festival.ics')">Kalendereintrag</div>
+            <a class="button-text info-button" href="/festival/info.html">Mehr Infos</a>
         </div>
         <audio loop autoplay id="audio">
             <source src="/festival/since77.mp3" type="audio/mp3">
@@ -63,7 +64,7 @@
             <img src="assets/play.svg" class="player-icon" id="play-button"/>
             <img src="assets/pause.svg" class="player-icon" id="pause-button"/>
             <div class="player-text" id="playing-text">Paul Kalkbrenner - Since 77</div>
-            <div class="player-text" id="paused-text">Musik starten</div>
+            <div class="player-text" id="paused-text">Musik</div>
         </div>
     </div>
 </body>

Public/festival/info.html

@@ -0,0 +1,75 @@
+<html>
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width initial-scale=1" />
+    <!-- Prevent search engine indexing -->
+    <meta name="robots" content="noindex" />
+    
+    <link rel="shortcut icon" sizes="16x16 24x24 32x32 48x48 64x64" type="image/vnd.microsoft.icon" href="/festival/icons/festival.ico" />
+    <link rel="apple-touch-icon" href="/festival/icons/festival.png" />
+    <link rel="icon" href="/festival/icons/festival.png">
+    
+    <title>CC Festival</title>
+    <meta name="author" content="Christoph Hagen & Charlotte Strohofer" />
+    <meta property="og:title" content="CC Festival: Infos" />
+    <meta property="og:description" content="Presented by Charlotte & Christoph">
+    <link rel="canonical" href="https://christophhagen.de/festival/info.html" />
+    
+    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
+    <link rel="stylesheet" type="text/css" href="assets/festival.css?v=1">
+    <script src="assets/festival.js?v=10"></script>
+</head>
+<body>
+    <div class="wrapper">
+        <div class="bokeh">
+            <div></div> <div></div> <div></div> <div></div> <div></div>
+            <div></div> <div></div> <div></div> <div></div> <div></div>
+            <div></div> <div></div> <div></div> <div></div> <div></div>
+            <div></div> <div></div> <div></div> <div></div> <div></div>
+            <div></div> <div></div> <div></div> <div></div> <div></div>
+            <div></div> <div></div> <div></div> <div></div> <div></div>
+            <div></div> <div></div> <div></div> <div></div> <div></div>
+            <div></div> <div></div> <div></div> <div></div> <div></div>
+            <div></div> <div></div> <div></div> <div></div> <div></div>
+            <div></div> <div></div> <div></div> <div></div> <div></div>
+            <div></div> <div></div> <div></div> <div></div> <div></div>
+            <div></div> <div></div> <div></div> <div></div> <div></div>
+            <div></div> <div></div> <div></div> <div></div> <div></div>
+            <div></div> <div></div> <div></div> <div></div> <div></div>
+            <div></div> <div></div> <div></div> <div></div> <div></div>
+            <div></div> <div></div> <div></div> <div></div> <div></div>
+        </div>
+        <div class="content">
+            <div class="content-grid">
+                <a class="back-link" href="/festival/festival.html">
+                    <div class="back-icon"></div>
+                    <div class="back-text">Zurück</div>
+                </a>
+                <div class="header-subtitle">CC Festival</div>
+                <!-- <div class="top-line"></div> -->
+            </div>
+            <div class="header-title">Wissenswertes</div>
+            <div class="scroll-content">
+                <div class="topic-title">Ist das eine Hochzeits-/Verlobungsfeier?</div>
+                <div class="topic-content">Nein - eine gute Party braucht keinen Grund.</div>
+                <div class="topic-title">Was soll ich schenken?</div>
+                <div class="topic-content">Nichts. Es werden keine Geschenke gewünscht oder erwartet. Alkoholische Getränke sollten auch genug vorhanden sein. Wenn dir aber was richtig Cooles einfällt, was die Party noch besser macht, dann bring es gerne mit.</div>
+                <div class="topic-title">Was soll ich anziehen?</div>
+                <div class="topic-content">Es ist ein Sommerfest, also komm so, wie du dich wohlfühlst. Denk dran: Es gibt auch Aktivitäten wie Beachvolleyball, und Abends wird es draußen doch etwas kühler.</div>
+                <div class="topic-title">Darf ich jemanden mitbringen?</div>
+                <div class="topic-content">Wahrscheinlich. Bitte sprich aber zuerst mit uns.</div>
+                <div class="topic-title">Was kostet der Spaß?</div>
+                <div class="topic-content">Nichts (für euch). Alle Getränke und Speisen sind kostenfrei für alle Gäste.</div>
+                <div class="topic-title">Was gibt es an Unterhaltung?</div>
+                <div class="topic-content">Nachmittags kann Beach-Volleyball gespielt werden, und es gibt lockere Musik. Im besten Fall sogar eine Hüpfburg (für Erwachsene!) Abends spielt eine kleine Band, die später von DJs abgelöst wird. Dazu natürlich eine Auswahl an Getränken und Speisen.</div>
+                <div class="topic-title">Wo kann ich schlafen?</div>
+                <div class="topic-content">Du/ihr könnt auf der angrenzenden Wiese zelten, ansonsten gibt es in Geiselwind auch eine Anzahl von Hotels/Gasthäusern. Internationale Gäste dürfen sich gerne nochmal an uns wenden.</div>
+                <div class="topic-title">Bin ich als Vegetarier/Veganer/Allergiker gut versorgt?</div>
+                <div class="topic-content">Es gibt diverse vegetarische und vegane Speisen. Falls du Allergien oder Unverträglichkeiten hast, sprich gerne nochmal mit uns. Wir finden dann sicher auch etwas Genießbares für dich.</div>
+                <div class="topic-title"></div>
+                <div class="topic-content"></div>
+            </div>
+        </div>
+    </div>
+</body>
+</html>