diff --git a/index.html b/index.html index e9d780439..e965039aa 100644 --- a/index.html +++ b/index.html @@ -202,9 +202,79 @@
SUNDAY
-
+
+

Frequently Asked Questions

+
+
+
+ +
+

Anyone currently enrolled as a student can attend!

+

If you don't fit that description, you're + absolutely welcome to attend as a mentor or volunteer. All attendees must be 18 years or older.

+
+
+
+ +
+

Nope! If you have an existing team, that's great — otherwise, we'll provide time to form new teams with other hackers at the start of the event.

+
+
+
+ +
+

Yes. All students, RIT or not, need to apply to the event.

+

Our main limitation is space. Even though we're a digtial event, we need to provide judging, chat moderation, interpreting services, and more. All of these require staff, and we only have so many resources to run the event.

+

Maybe next year we'll have AI run the event...

+
+
+
+
+
+ +
+

We've put a lot of thought into making sure all of BrickHack can be enjoyed by everyone. We're planning to have intepreting services and audio captioning to boot, with more accomodations to come in the future.

+

During registration, put services that you require in the "special needs" field, and we'll do our best to meet them!

+

For any outstanding questions, email hello@coderit.org.

+
+
+
+ +
+

Soon!

+

(We'll send an email out if you are accepted.)

+
+
+
+ +
+

We've got you covered.

+
+
+
+
+

Don't see your question here? Contact Us

+

Leadership Team

diff --git a/index.js b/index.js index 9e4687372..8d513c93e 100644 --- a/index.js +++ b/index.js @@ -23,6 +23,29 @@ $(document).ready(function() { }); }); +let card = document.getElementsByClassName("card"); +for (let i = 0; i < card.length; i++) { + let accordion = card[i].getElementsByClassName("accordion-header")[0]; + // Click should only work on accordion-header of each card + accordion.addEventListener("click", function() { + + card[i].classList.toggle("active"); + + let panel = card[i].getElementsByClassName("panel")[0]; + let fa = this.getElementsByTagName("i")[0]; + + // Toggle panel and plus/minus on click of header + if ($(card[i]).hasClass("active")) { + $(panel).slideDown(200); + } else { + $(panel).slideUp(200); + } + + $(fa).toggleClass("fa-plus"); + $(fa).toggleClass("fa-minus"); + }); +} + // Schedule toggle code $('.day-second-events').hide(); $('.day-first').click(function() { diff --git a/sass/main.scss b/sass/main.scss index 8345de3ec..3f50b91e2 100644 --- a/sass/main.scss +++ b/sass/main.scss @@ -84,7 +84,7 @@ a { } p { - font-size: 1.2em; + font-size: 1.3em; } // Nav @@ -364,6 +364,101 @@ nav { } } +#faq { + padding: $section-padding; + background-color: $dark-blue; + #faq-wrapper { + h1 { + font-size: $title-size; + margin-bottom: 4rem; + } + #faq-cards { + display: flex; + flex-flow: row wrap; + justify-content: space-between; + + // TODO: This can be cleaner. + $card-m: 20px; + &-left { + width: calc(50% - (#{$card-m} / 2)); + margin-right: $card-m / 2; + } + &-right { + width: calc(50% - (#{$card-m} / 2)); + margin-left: $card-m / 2; + } + .card { + width: 100%; + margin-bottom: $card-m; + border-radius: 7px; + background-color: $light-blue; + &:hover { + background-color: lighten($light-blue, 5%); + } + .accordion-header { + background-color: transparent; + cursor: pointer; + text-align: left; + padding: 20px 30px; + border: none; + width: 100%; + font-size: $nav-fontsize; + + .fa-plus, .fa-minus { + margin-right: 10px; + } + .fa-plus { + &-red { color: $red; } + &-pink { color: $pink; } + &-orange { color: $orange; } + } + .fa-minus { + color: $blue; + } + } + .panel { + display: none; // Toggled in JS + margin-top: -30px; + padding: 20px 30px; + font-size: 0.8em; + // Align w/ header text, not sure if this can be made cleaner. + margin-left: 35px; + + p { + color: $dark-blue; + line-height: 23px; + margin-bottom: 10px; + } + a { + color: $red; + } + } + } + .active { + background-color: white; + + // Need to explicitly set for some reason + .accordion-header, .panel { + color: $dark-blue; + } + &:hover { + background-color: white; + } + } + } + #contact { + a { + text-transform: uppercase; + color: $red; + font-weight: $font-bold; + &:hover { + text-decoration: underline; + } + } + } + } +} + #schedule { padding: $section-padding; background-color: $blue;