From 9c9464994af7c75b30d7f75f4a0544a15d18ee7a Mon Sep 17 00:00:00 2001 From: robee <robin.code22@gmail.com> Date: Fri, 31 Mar 2023 15:35:31 +0100 Subject: [PATCH] feat(rules.html-&&-styles.css): create rules page --- rules.html | 31 +++++++++++++++++++++++++ styles.css | 68 +++++++++++++++++++++++++++++++++++------------------- 2 files changed, 75 insertions(+), 24 deletions(-) diff --git a/rules.html b/rules.html index e9c6279..b83f6b9 100644 --- a/rules.html +++ b/rules.html @@ -49,8 +49,39 @@ </header> <main> <!-- Rules -- uses class="text-section" -- about.html && rules.html && location.html --> + <section id="rules__jam-rules" class="text-section"> + <h1>Jam Rules</h1> + <p>We want all our participants to have a great time, make new friends and finish their game knowing they've contributed to an amazing cause in <i>Stop Hate UK</i>!</p> + <p>To make this jam a success, all participants must comply with the following rules:</p> + <ol> + <li> + <i>Create Against Hate</i> has a zero-tolerance policy towards any kind of hate speech, aggressive behaviour or bullying of any kind. Participants found engaging in such behaviour will be made to leave. + </li> + <li> + All participants must be at least 16. Any under-18's attending the event in-person must be accompanied by a guardian. + </li> + <li> + Teams will be assigned to you for this jam! This way, everyone will have a team with a broad range of specialties, but we'd also like participants to take this opportunity to make new friends! + </li> + <li> + This is a family-friendly event, so NSFW content is prohibited. We ask that participants' works are compliant with PEGI 3, 7 or 12 guidelines and that games are submitted with the proposed PEGI age classification noted. For further info about what your game can include, please visit <a href="https://pegi.info/" target="_blank" rel="noopener">pegi.info/</a>. + </li> + <li> + All content submitted must be created during the jam. This includes images, audio, text, code or any other aspect of your game. Any content found to have been created before the jam will be removed. If you want to include something created before the jam, please ask one of our friendly moderators! All requests will be handled on a case-by-case basis. + </li> + <li> + All submissions must be based on the theme (manga). + </li> + </ol> + <a class="btn--primary" href="index.html#home__sign-up"> + Sign Up Now! + </a> + </section> <!-- Ideas -- uses class="text-section" -- about.html && rules.html && location.html --> + <section id="rules__get-help" class="text-section"> <!-- Slideshow --> + + </section> </main> <footer> <!-- Footer -- index.html && about.html && rules.html && location.html --> diff --git a/styles.css b/styles.css index 0db7a34..6d956f5 100644 --- a/styles.css +++ b/styles.css @@ -8,6 +8,9 @@ /* Poppins Bold Font Import */ @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap"); + /* Open Sans Font Import */ + @import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,700;1,300;1,700&display=swap'); + /* Segoe UI Semilight Configuration */ @font-face { font-family: "Segoe UI"; @@ -88,7 +91,8 @@ html { background-color: var(--main-dark); - font-family: "Segoe UI", sans-serif; + font-family: "Segoe UI", "Open Sans", Arial, Helvetica, sans-serif; + font-weight: 300; scroll-behavior: smooth; } @@ -367,8 +371,6 @@ display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 2rem; - - min-height: 90vh; } .hero article { @@ -561,7 +563,6 @@ } #home .hero article { - display: grid; grid-gap: 1em; color: var(--accent-purple); @@ -585,24 +586,23 @@ margin: 0 auto; } + /* Align the Stop Hate UK Logo */ #home .hero article div:last-of-type { - flex-wrap: wrap; - gap: 1em; + flex-wrap: wrap; + gap: 1em; - padding-bottom: 2rem; + padding-bottom: 2rem; - color: var(--accent-blue); - font-size: 1.2rem; - } - - #home .hero article div:last-of-type img { - width: 50%; - min-width: 12.5rem; + color: var(--accent-blue); + font-size: 1.2rem; + } - background-color: white; + #home .hero article div:last-of-type img { + width: 50%; + min-width: 12.5rem; - object-fit: initial; - } + background-color: white; + } /** About Section **/ #home__about { @@ -776,13 +776,8 @@ text-align: center; } - #about .hero img { - text-align: center; - } - #about .hero article { - grid-template-rows: repeat(4, auto); - grid-row-gap: 1.5em; + grid-row-gap: 1.5rem; } #about .hero article * { @@ -790,6 +785,10 @@ } #about .hero article img { + width: 70%; + + margin: 0 auto; + background-color: white; } @@ -830,12 +829,33 @@ bottom: -2rem; } - /** text-section **/ + /** About Section **/ #about .text-section { background-color: var(--section-purple-saturated); color: white; } + +/*** Rules Page Styling ***/ + h1, h2 { + text-align: center; + } + /** Rules Section **/ + #rules__jam-rules.text-section { + color: white; + } + + #rules__jam-rules ol { + list-style-position: inside; + } + + #rules__jam-rules ol li { + margin-bottom: 1rem; + } + + #rules__jam-rules .btn--primary { + margin: 2rem auto 0 auto; + } /* 64em == 1024px */ @media only screen and (min-width: 64em) { /*** Global Styles ***/ -- GitLab