diff --git a/Public/festival/assets/back.svg b/Public/festival/assets/back.svg new file mode 100644 index 0000000..5996de1 --- /dev/null +++ b/Public/festival/assets/back.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/Public/festival/assets/festival.css b/Public/festival/assets/festival.css index 5fd28e1..cc90c1a 100644 --- a/Public/festival/assets/festival.css +++ b/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; } diff --git a/Public/festival/festival.html b/Public/festival/festival.html index efebd75..bf5d38d 100644 --- a/Public/festival/festival.html +++ b/Public/festival/festival.html @@ -54,7 +54,8 @@
diff --git a/Public/festival/info.html b/Public/festival/info.html new file mode 100644 index 0000000..7908bf6 --- /dev/null +++ b/Public/festival/info.html @@ -0,0 +1,75 @@ + +
+ + + + + + + + + +
+ + + + + + + + + +
+