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;
   }