diff --git a/index.html b/index.html index 841bf2403..85105b57d 100644 --- a/index.html +++ b/index.html @@ -13,7 +13,7 @@ - + @@ -21,12 +21,12 @@ - + - - - + + + @@ -34,43 +34,44 @@ - - -
+
- - - Major League Hacking 2022 Hackathon Season - +
+
+

An archive of older BrickHack sites. View the latest at brickhack.io!

+
+
+ + +

BrickHack 8

+ +
+
+ + +

BrickHack 7

+ +
+
+ + +

Club Site

+ +
+
- -
-

Thanks for a great BrickHack 8!

-

See you next year!

- VIEW PROJECTS -

Check out our club

- -
- - - + + +
diff --git a/index.js b/index.js index 416da699d..e702f40a4 100644 --- a/index.js +++ b/index.js @@ -1,6 +1,5 @@ import "./sass/index.scss" import "@fortawesome/fontawesome-free/css/all.css" -import $ from "jquery" // Hiring message const hiringMessage = `Hey, you. @@ -14,228 +13,3 @@ console.log(hiringMessage); // Comment generated via js instead of directly in HTML so the hiring message text is only in one place const comment = document.createComment("\n" + hiringMessage + "\n"); document.insertBefore(comment, document.firstChild); - -// Leadership easter egg -/*$(document).ready(function() { - var randomNum = Math.floor(Math.random() * 50); - console.log(randomNum); - if (randomNum === 7) { - console.log("Lucky Ricky"); - var ricky = $(".leader:first").clone(); - ricky.appendTo($("#team")); - } -});*/ - -// Nav highlighting on scroll -import ActiveMenuLink from "active-menu-link"; - -let options = { - itemTag: "", - scrollOffset: -90, // nav height - scrollDuration: 1000, - ease: "out-quart", - showHash: false, -}; - -new ActiveMenuLink(".navbar-items", options); - -// Navbar functionality -$(document).on("click", "#toggle", function() { - if ($("nav").hasClass("show-nav")) { - $("nav").removeClass("show-nav"); - $("#toggle").removeClass("fa-times"); - $("#toggle").addClass("fa-bars"); - $(".mobile-grayout").removeClass("show-gray"); - } else { - $("nav").addClass("show-nav"); - $("#toggle").removeClass("fa-bars"); - $("#toggle").addClass("fa-times"); - $(".mobile-grayout").addClass("show-gray"); - } -}); - -// Closing the navbar when a navigation link is clicked -$(document).on("click", ".link", function() { - $("nav").removeClass("show-nav"); - $("#toggle").removeClass("fa-times"); - $("#toggle").addClass("fa-bars"); - $(".mobile-grayout").removeClass("show-gray"); -}); - -// Closing the navbar when outside of the nav is clicked -$(document).on("click", ".mobile-grayout", function() { - $("nav").removeClass("show-nav"); - $("#toggle").removeClass("fa-times"); - $("#toggle").addClass("fa-bars"); - $(".mobile-grayout").removeClass("show-gray"); -}); - -// FAQ Cards hide/show -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 JS */ - -// Making buttons toggle hide/show for different days -// Saturday button -$('#saturday').click(function() { - $('#saturday').addClass('day-active'); - $('#sunday').removeClass('day-active'); - $('#mar-5-content').show(); - $('#mar-6-content').hide(); - $('#date-indicator-saturday').show(); - $('#date-indicator-sunday').hide(); -}); -// Sunday button -$('#sunday').click(function() { - $('#sunday').addClass('day-active'); - $('#saturday').removeClass('day-active'); - $('#mar-6-content').show(); - $('#mar-5-content').hide(); - $('#date-indicator-sunday').show(); - $('#date-indicator-saturday').hide(); -}); - - -// Setting the schedule to match the day -let currentDate = new Date().getDate() -// Before/during saturday -if (currentDate <= 5) { - $('#saturday').addClass('day-active'); - $('#sunday').removeClass('day-active'); - $('#mar-5-content').show(); - $('#mar-6-content').hide(); - $('#date-indicator-saturday').show(); - $('#date-indicator-sunday').hide(); -} -// Sunday -else { - $('#sunday').addClass('day-active'); - $('#saturday').removeClass('day-active'); - $('#mar-6-content').show(); - $('#mar-5-content').hide(); - $('#date-indicator-sunday').show(); - $('#date-indicator-saturday').hide(); -} - - -// Fetching event data from HackEngine -fetch('https://apply.brickhack.io/events.json') - .then(res => res.json()) - .then(events => handleEventData(events)) - .catch(err => console.log(err)); - - -// Turning HackEngine event data into visual events - BH7 code barely modified -function handleEventData(events) { - let now = new Date() - // needed to handle overlapping events - let timeMarkerAdded = false; - // need to sort events by start/end times instead of IDs - events.sort(compareEvents); - - // Looping through each event to handle it - events.forEach(event => { - // Getting strings for times - let startDate = new Date(event.start); // convert ISO 8601 -> Date object - let finishDate = undefined; - let dateString = convertDate(startDate); - if (event.finish) { // finish === null for instantaneous events - finishDate = new Date(event.finish); - let finishString = convertDate(finishDate); - if (dateString.slice(-2) === finishString.slice(-2)) { // hide "am/pm" of first time if both are identical - dateString = dateString.slice(0, -2); - } - dateString += " - " + convertDate(finishDate); - } - - // calculate event container classes - let divClasses = 'event'; - let liveIndicator = ""; - if (finishDate < now) { - divClasses += ' event-complete'; - } - else if (startDate < now && now < finishDate) { - divClasses += ' event-live'; - liveIndicator = '

LIVE!

'; - } - - // adding event to the page - var eventContainer; - // Deciding which day content box it goes inside - switch (startDate.getDate()) { - case 5: eventContainer = $('#mar-5-content'); break; - case 6: eventContainer = $('#mar-6-content'); break; - } - // If it doesn't fall into one of those event days, log the problem and quit trying to add it - if (!eventContainer) { - console.log("Event " + event.title + " date " + startDate + " out of range."); - return; // skip current iteration https://stackoverflow.com/a/31399448/1431900 - } - // Building HTML and adding it to page - let html = `

${dateString}

${event.title}

${liveIndicator}
`; - const eventDiv = eventContainer.append(html); - }); -} - -// Comparing two events to sort them - BH7 code unmodified -function compareEvents(a, b) { - // We can sort by start/end here because the ISO 8061 - // timestamps given by the server are lexicographically - // sortable. - if (a.start < b.start) { // if a starts before b... - return -1; // ...then a goes before b - } else if (a.start > b.start) { // if a starts after b... - return 1; // ...then b goes before a - } else { - if (a.end < b.end) { // if a ends before b... - return -1; // ...then a goes before b - } else if (a.end > b.end) { // if a ends after b... - return 1; // ...then b goes before a - } else { - return 0; - } - } -} - -// Converting dates to something more user friendly - BH7 code unmodified -function convertDate(date) { - let output = ''; - // hour - if (date.getHours() > 12) { - output = String(date.getHours() - 12); - } else { - output = String(date.getHours()); - } - // minute - if (date.getMinutes() !== 0) { - output += ':' + String(date.getMinutes()).padStart(2, '0'); - } - // AM/PM - if (date.getHours() >= 12) { - output += 'pm'; - } else { - output += 'am'; - } - return output; -} \ No newline at end of file diff --git a/sass/index.scss b/sass/index.scss index be676cf8b..ad9c381b6 100644 --- a/sass/index.scss +++ b/sass/index.scss @@ -15,47 +15,6 @@ $beige: #F8953A; --body-font-size: 1.3rem; } -// Mixins -@mixin button-primary { - background-color: $blue; - text-decoration: none; - user-select: none; - padding: 1rem 1.5rem; - border-radius: 6px; - font-weight: 600; - text-transform: uppercase; - text-align: center; - display: inline-block; - color: $off-white; - font-size: var(--body-font-size); - cursor: pointer; - transition: 0.2s all; - - &:hover { - background-color: $dark-blue; - } - - &:active { - transform: translateY(4px); - color: $off-white; - background-color: $darker-blue; - } - - @media screen and (max-width: 900px) { - font-size: 1em; - } -} - -@mixin button-secondary { - @include button-primary; - background-color: white; - color: $blue; - border: 2px solid $blue; - - &:hover { - color: $off-white; - } -} // General Styles * { @@ -74,10 +33,22 @@ $beige: #F8953A; } } +html { + height: 100; +} + body { background-color: $grey; } +#content { + position: relative; + min-height: 100vh; + display: flex; + flex-direction: column; + justify-content: space-around; +} + // Typography h1 { font-size: 3rem; @@ -123,107 +94,6 @@ p { } } } - - -// Nav -nav { - background-color: white; - border-bottom: 2px solid rgba($light-blue, 25%); - display: flex; - justify-content: space-between; - font-size: var(--body-font-size); - height: 100px; - position: fixed; - padding: 0px 85px 0px 8rem; - top: 0; - left: 0; - right: 0; - z-index: 1; - - .top, .left, .right { - display: flex; - align-items: center; - } - - .left { - flex-grow: 1; - } - - #toggle { - margin-right: 2rem; - color: $blue; - font-size: 2rem; - width: 2rem; - display: none; - } - - a { - margin-right: 2rem; - text-decoration: none; - color: $blue; - } - - .link { - border-bottom: 2px solid white; - transition: all 0.2s; - - &:not(:focus):hover { - // underline upon hover, disable hover upon click - font-weight: bold; - border-color: $blue; - } - - &.active { - font-weight: bold; - color: $darker-blue; - border-color: $darker-blue; - - &:hover { - border-color: $darker-blue; - } - } - } - - #login { - @include button-primary; - } - - #logo { - width: 80px; - border: none; - - img { - width: 100%; - height: 100%; - } - } -} - -.mobile-grayout { - position: fixed; - width: 100%; - height: 100%; - top: 0; - left: 0; - background-color: black; - opacity: 0.25; - z-index: 3; - cursor: pointer; - display: none; -} - -// MLH Banner -#mlh-trust-badge { - display: block; - position: fixed; - top: 0; - right: 5px; - width: 75px; - height: 0; - z-index: 2; -} - - // Section padding section { padding: 120px 8rem 0px; // Set up to avoid nav overlap when linked @@ -233,634 +103,27 @@ section { } -// Videos - hiding controls -video::-webkit-media-controls { - opacity: 0; -} - -// Post Event -#post { - text-align: center; +// All past sites +#sites { background-color: $off-white; + flex: 1; + gap: 2rem; - #devpost { - @include button-primary(); - width: max-content; - margin: 1rem auto 0rem; + img { + width: 5rem; } - p { - margin-top: 1rem; - } - - #prizes-ricky { - width: 50%; - margin: auto; - } -} - -// Hero -#hero { - display: flex; - justify-content: space-between; - align-items: center; - flex-flow: row nowrap; - - #hero-video video { - max-width: 100%; - } - - #hero-content { - width: max-content; - margin-right: 2rem; - - h3:not(h3:last-of-type) { - padding-bottom: 0; - } - - h3:last-of-type { - padding-bottom: 3rem; - } - - #hero-buttons { - display: flex; - justify-content: space-between; - - #login { - @include button-secondary(); - margin-right: 2rem; - width: 50%; - } - - #register { - @include button-secondary; - width: 50%; - } - } - - #discord { - @include button-primary(); - width: 100%; - margin-top: 1rem; - } - } -} - -// About -#about { - #about-cards { - display: flex; - justify-content: space-between; - margin: 3rem 0rem; - - .about-card { - background-color: white; - border: 1px solid $light-blue; - border-radius: 6px; - padding: 20px; - width: 48%; - } - } - - #about-stats { - display: flex; - justify-content: space-between; - align-items: center; - - #stats-content { - width: 50%; - - #stats { - display: flex; - justify-content: space-between; - flex-wrap: wrap; - - div { - padding-right: 20px; - - p:first-of-type { - padding-bottom: 0; - } - } - } - } - - video { - max-width: 50%; - } - } -} - -// Schedule -#schedule { - display: flex; - flex-flow: row; - justify-content: space-between; - row-gap: 1rem; - - #schedule-left { - display: flex; - flex-flow: column; - - h2 { - margin-bottom: 1rem; - } - - #schedule-days { - border: 2px solid $blue; - border-radius: 6px; - display: flex; - row-gap: 0; - margin-bottom: 1rem; - overflow: hidden; - width: 100%; - - .day { - @include button-secondary(); - margin: 0; - border-radius: 0px; - border: none; - width: 50%; - - &:active { - transform: translateY(0px); - } - - &-active { - background-color: $blue; - color: $off-white; - } - } - } - } - - #schedule-calendar { - background-color: #FFFFFF; - border: 1px solid $light-blue; - border-radius: 6px; - padding: 0rem 3rem calc(1rem + 15px); - width: 55%; - align-self: flex-start; - - #schedule-tape { - display: flex; - justify-content: space-between; - height: 30px; - position: relative; - top: -15px; - margin-bottom: 1rem; - - &-left { - width: 35%; - height: 100%; - background-color: $orange; - opacity: 0.25; - } - - &-right { - width: 35%; - height: 100%; - background-color: $light-blue; - opacity: 0.25; - } - } - - #mar-6-content { - display: none; - } - - .schedule-events .event { - display: flex; - flex-wrap: wrap; - column-gap: 1rem; - padding: 1rem; - margin-bottom: 1rem; - border-radius: 6px; - background-color: #FFFFFF; - border: 1px solid $light-blue; - - p { - padding-bottom: 0rem; - } - - &-complete { - opacity: 0.3; - background-color: $light-blue; - border: none; - } - - &-live { - background-color: $blue; - border: none; - - p { - color: #FFFFFF; - } - } - - .time { - opacity: 0.75; - font-size: 1rem; - margin: auto 0; // because it's smaller, centering it vertically - } - - .live { - font-weight: bold; - color: $orange; - } - } - } -} - -// FAQ -#faq { - #faq-title { - display: flex; - flex-wrap: wrap; - align-items: center; - - #faq-title-content { - margin-right: 3rem; - } - } - - #faq-cards { - margin-top: 40px; - 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: 6px; - background-color: white; - border: 2px solid $blue; - - &:active { - transform: none; - } - - .accordion-header { - background-color: transparent; - cursor: pointer; - outline: none; - color: $blue; - font-weight: 600; - text-align: left; - padding: 20px 30px; - border: none; - border-radius: 0px 0px 6px 6px; // making bottom corners round and top corners filled - width: 100%; - font-size: var(--body-font-size); - - .fa-plus { - margin-right: 10px; - - &-blue { - color: $blue; - } - - &-light-blue { - color: $light-blue; - } - - &-orange { - color: $orange; - } - } - - .fa-minus { - margin-right: 10px; - color: white; - } - - &:hover { - background-color: $dark-blue; - border-radius: 0; - color: white; - - .fa-plus { - color: white; - } - } - } - - .panel { - display: none; // Toggled in JS - padding: 20px 65px; // large side padding aligns with header text - - p, em { - color: $blue; - line-height: 23px; - margin-bottom: 10px; - } - } - } - - .active .accordion-header { - color: white; - background-color: $blue; - - &:hover { - border-radius: 0px 0px 6px 6px; // making bottom corners round and top corners filled - } - } - } -} - -// Prizes -#prizes { - $tape-offset: 35px; // how far into the card is the tape placed? - - @mixin tape-transform($rotation) { - transform: translate(-50%, -50%) rotate($rotation); - // this makes it so that we're positioning the tape by its center instead of its top-left, pre-rotation - // corner, which is significantly easier - } - - #prizes-ricky { - // placeholder - width: 85%; - max-width: 980px; - height: auto; - background-color: blue; - margin: 0 auto; - } - - #prizes-card { - background-color: white; - border: 1px solid $light-blue; - border-radius: 6px; - padding: 75px 95px; - position: relative; - width: 100%; - - .tape { - background-color: $beige; - height: 40px; - opacity: 0.25; - position: absolute; - width: 165px; - - &.top-left { - @include tape-transform(-45deg); - left: $tape-offset; - top: $tape-offset; - } - - &.top-right { - @include tape-transform(45deg); - right: $tape-offset - 165px; - top: $tape-offset; - } - - &.bottom-left { - @include tape-transform(45deg); - left: $tape-offset; - bottom: $tape-offset - 40px; - } - - &.bottom-right { - @include tape-transform(-45deg); - right: $tape-offset - 165px; - bottom: $tape-offset - 40px; - } - } - - & > .content { - align-items: flex-end; - column-gap: 50px; - display: flex; - flex-direction: row; - margin-bottom: 100px; - - .graphic { - flex: 0 0 auto; - } - - .text { - display: flex; - flex-direction: column; - row-gap: 20px; - - .title { - letter-spacing: 1.5rem; - opacity: 0.50; - } - } - } - - #inner-prizes-card { - background-color: white; - border: 1px solid $light-blue; - border-radius: 6px; - padding: 35px; - width: 100%; - - .title { - padding-bottom: 20px; - } - - .content { - align-items: flex-start; - display: flex; - flex-direction: row; - column-gap: 30px; - } - } - - #prizes-corner-text { - font-size: 1.125rem; - position: absolute; - bottom: calc(75px / 2); - right: 95px; - opacity: 0.50; - transform: translateY(50%); // easy way to perfectly vertical center the text - } + h1 { + padding: 0; } -} -// Sponsors -#sponsors { - #sponsor-btns { - margin: 1rem 0 2rem; + .site { display: flex; - - #prospectus { - @include button-primary(); - margin-right: 2rem; - } - - #email { - @include button-secondary(); - } - } - - .logo-group { + flex-direction: row; align-items: center; - display: flex; - justify-content: space-evenly; - flex-wrap: wrap; - row-gap: 3rem; - column-gap: 5rem; - padding: 2rem 0; - - img { - transition: all 0.2s; - - &:hover { - transform: translateY(-10px); - transition: all 0.2s; - } - } - } - - #brick-tier img { - height: 275px; - max-width: 100%; - } - - #platinum-tier img { - height: 255px; - max-width: 100%; - } - - #gold-tier img { - height: 175px; + gap: 1rem; } - #bronze-silver-tier img { - height: 150px; - } - - #partners { - padding-top: 1rem; - - img { - height: 75px; - } - - #stickermule { // their brand's padding messes with size consistancy - height: 100px; - } - - #simone { // their logo's shape messes with size consistancy - height: 50px; - } - } -} - -// Leadership -#leadership #team { - display: grid; - grid-template-columns: 1fr 1fr 1fr 1fr; - column-gap: 5rem; - row-gap: 2.5rem; - - .leader { - .leader-img { - display: flex; - flex-flow: column; - align-items: center; - margin-bottom: 0.75rem; - - .tape { - opacity: 0.5; - width: 50%; - height: 30px; - border-radius: 2px; - transform: translateY(15px); - margin: auto; - - &-orange { - background-color: $orange; - } - - &-blue { - background-color: $light-blue; - } - } - - img { - border-radius: 6px; - width: 100%; - } - } - - .leader-role { - font-size: 1.2rem; - opacity: 0.7; - font-weight: 500; - padding-bottom: 0px; - } - - .leader-name { - font-weight: bold; - } - } -} - -// Contact -#contact { - padding-bottom: 0; - display: flex; - justify-content: space-between; - flex-direction: row; - min-height: auto; - - #contact-content { - width: 50%; - padding-right: 20px; - } - - #contact-socials { - align-self: flex-end; - background-image: url("../assets/bh8/contact-monitor.svg"); - width: 430px; - max-width: 50%; - height: 330px; - margin-bottom: -2px; // Gets rid of gap between svg and footer - background-size: contain; - background-repeat: no-repeat; - background-position: center bottom; - padding: 1rem 2.5rem 5rem; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - - #social-icons { - display: flex; - flex-wrap: wrap; - - a { - margin: 1rem; - - i { - font-size: 3rem; - color: $blue; - - &:hover { - color: $dark-blue; - } - } - } - } - } } @@ -894,60 +157,12 @@ footer { } -@media screen and (max-width: 1500px) { - // FAQ - #faq { - #faq-title { - flex-direction: column; - align-items: flex-start; - } - - #faq-cards { - flex-direction: column; - - &-left, &-right { - margin: 0; - width: 100%; - } - } - } -} - @media screen and (max-width: 1220px) { - // Nav - nav { - padding: 0px 85px 0px 5rem; - } - // Section padding section { padding: 120px 5rem 0px; // Set up to avoid nav overlap when linked } - // Hero - #hero { - flex-direction: column; - align-items: center; - - #hero-content { - width: auto; - margin-right: 0; - flex-basis: auto; - text-align: center; - } - } - - // About - #about #about-content #about-buttons { - width: 100%; - } - - // Leadership - #leadership #team { - display: grid; - grid-template-columns: 1fr 1fr 1fr; - } - // Footer footer #footer-right { flex-direction: column; @@ -960,125 +175,10 @@ footer { } @media screen and (max-width: 955px) { - // Nav - nav { - height: 70px; - padding: 0px 3.5rem; - - #toggle { - display: block; - } - - #logo { - width: 60px; - } - - .link, #login { - display: none; - } - } - - .show-nav { - height: 100vh; - width: 50vw; - min-width: max-content; - padding: 0px 3.5rem; - border-bottom: none; - border-right: 2px solid rgba($light-blue, 25%); - flex-direction: column; - justify-content: flex-start; - z-index: 4; - - .top { - height: 68px; - } - - .left, .right { - align-items: flex-start; - margin-top: 2rem; - - a { - margin-right: 0rem; - margin-top: 2rem; - } - } - - .left { - flex-direction: column; - flex-grow: 0; - order: 2; - } - - .right { - flex-direction: column-reverse; - order: 1; - } - - .link, #login { - display: block; - } - } - - .show-gray { - display: block; - } - - // MLH Banner - #mlh-trust-badge { - width: 50px; - } - // Section padding section { padding: 100px 3.5rem 0px; // Set up to avoid nav overlap when linked } - - // Hero - #hero #hero-content #hero-buttons { - flex-direction: column; - - #login { - margin: 0rem 0rem 1rem; - width: 100%; - } - - #register { - width: 100%; - } - } - - // About - #about { - #about-cards { - flex-direction: column; - - .about-card { - width: 100%; - - &:not(.about-card:last-of-type) { - margin-bottom: 2rem; - } - } - } - - #about-stats { - flex-direction: column; - - #stats-content { - width: 100%; - } - - video { - max-width: 100%; - padding-top: 2rem; - } - } - } - - // Prizes - #prizes #prizes-card > .content .text .title { - letter-spacing: 0.5rem; - } } @media screen and (max-width: 900px) { @@ -1100,171 +200,6 @@ footer { font-size: 1.35rem; } - // Post - #post #prizes-ricky { - width: 90%; - } - - // About - #about #about-content { - p { - font-size: 1em; - } - - #about-buttons { - flex-direction: column; - width: 60%; - - a { - margin-left: 0; - } - } - } - - // Schedule - #schedule { - display: flex; - flex-flow: column; - - #schedule-left .day { - width: calc(50% - 0.75rem); - - &:first-of-type { - margin-right: 1rem; - } - } - - #schedule-calendar { - margin-top: 1rem; - width: 100%; - } - } - - // FAQ - #faq #faq-cards { - margin-top: 20px; - - .card { - .accordion-header { - padding: 10px 20px; - } - - .panel { - padding: 20px 20px 10px; - } - } - } - - // Prizes - #prizes { - $tape-offset: 12px; // how far into the card is the tape placed? - $overflow-size: 35px; // how far does the outer card go into the section margins? - $inner-card-overflow-size: 20px; // how far does the inner card go into the outer card's margins? - - #prizes-card { - padding: $overflow-size $overflow-size ($overflow-size + 40px); - - & > .content { - margin-bottom: 30px; - - .graphic { - display: none; - } - - .text { - row-gap: 15px; - } - } - - .tape { - height: 12px; - width: 50px; - - &.top-left { - left: $tape-offset; - top: $tape-offset; - } - - &.top-right { - right: $tape-offset - 50px; - top: $tape-offset; - } - - &.bottom-left { - left: $tape-offset; - bottom: $tape-offset - 12px; - } - - &.bottom-right { - right: $tape-offset - 50px; - bottom: $tape-offset - 12px; - } - } - - #inner-prizes-card { - margin-left: -$inner-card-overflow-size; - padding: $inner-card-overflow-size; - width: calc(100% + (2 * #{$inner-card-overflow-size})); - - .content { - flex-direction: column; - row-gap: 20px; - } - } - - #prizes-corner-text { - font-size: 0.75rem; - right: 20px; - } - } - } - - // Sponsors - #sponsors { - #sponsor-btns { - flex-flow: column; - width: max-content; - margin: auto; - - #prospectus { - margin: 0rem 0rem 1rem; - padding: 1rem 3rem; - } - } - - .logo-group { - padding: 1rem 0rem; - } - } - - // Leadership - #leadership #team { - display: grid; - grid-template-columns: 1fr 1fr; - - .leader .leader-role { - font-size: 0.9rem; - } - } - - // Contact - #contact { - flex-direction: column; - - #contact-content { - width: 100%; - padding-right: 0px; - } - - #contact-socials { - margin: 2rem auto -2px; - max-width: 75%; - width: 75%; - height: calc((100vw - 7rem) * 0.56); // should be the same as 75% of the current width - // Essentially: (100vw - section padding to get 100% width) * 0.75 to get the 75% width * 0.75 for 75% of 75% width - } - } - // Footer footer p { line-height: 2rem; @@ -1272,56 +207,6 @@ footer { } @media screen and (max-width: 650px) { - // About - #about #stats-content #stats { - flex-direction: column; - - div { - padding: 0px 0px 20px; - } - } - - // Schedule - #schedule #schedule-left .day { - width: 100%; - - &:first-of-type { - margin-right: 0rem; - } - } - - // Prizes - #prizes #prizes-card { - padding: 20px 20px 60px; - - #inner-prizes-card { - margin-left: 0; - width: 100%; - } - } - - // Leadership - #leadership #team { - display: grid; - grid-template-columns: 1fr; - } - - // Contact - #contact #contact-socials { - max-width: 100%; - width: 100%; - justify-content: flex-start; - padding: 0; - margin: 2rem 0; - background-image: none; - height: auto; - - #social-icons a i { - font-size: 2rem; - } - } - - // Footer footer { flex-direction: column; diff --git a/bh7.html b/sites/bh7/bh7.html similarity index 88% rename from bh7.html rename to sites/bh7/bh7.html index 703317369..9e3577395 100644 --- a/bh7.html +++ b/sites/bh7/bh7.html @@ -13,7 +13,7 @@ - + @@ -21,12 +21,12 @@ - + - - - + + + @@ -36,7 +36,7 @@
- Brickhack 6 logo + Brickhack 6 logo

BrickHack 6


February 8 & 9, 2020

@@ -52,7 +52,7 @@

BrickHack 6

- Brickhack V logo + Brickhack V logo

BrickHack V


February 16 & 17, 2019

@@ -62,7 +62,7 @@

BrickHack V

- Brickhack 4 logo + Brickhack 4 logo

BrickHack 4


January 27 & 28, 2018

@@ -72,7 +72,7 @@

BrickHack 4

- Brickhack 3 logo + Brickhack 3 logo

BrickHack 3


February 11 & 12, 2017

@@ -82,7 +82,7 @@

BrickHack 3

- Brickhack 2 logo + Brickhack 2 logo

BrickHack 2


March 5 & 6, 2016

@@ -92,7 +92,7 @@

BrickHack 2

- Brickhack logo + Brickhack logo

BrickHack


April 18 & 19, 2015

diff --git a/gallery.js b/sites/gallery/gallery.js similarity index 93% rename from gallery.js rename to sites/gallery/gallery.js index cbca28e48..504ec60bb 100644 --- a/gallery.js +++ b/sites/gallery/gallery.js @@ -1,4 +1,4 @@ -import './sass/gallery.scss' +import './gallery.scss' import '@fortawesome/fontawesome-free/css/all.css' import LazyLoad from "vanilla-lazyload"; import $ from 'jquery' @@ -22,7 +22,10 @@ var s3 = new AWS.S3({ params: {Bucket: albumBucketName} }); -var brickhacks = ['bh6', 'bh5', 'bh4', 'bh3', 'bh2', 'bh']; +// Ignore the rest to prevent error spam, +// but we want to show *an* error just in case +// someone wants to actually fix this at some point. +var brickhacks = ['bh6']; // 'bh5', 'bh4', 'bh3', 'bh2', 'bh']; for (let name of brickhacks) { viewAlbum(name); } diff --git a/sass/gallery.scss b/sites/gallery/gallery.scss similarity index 100% rename from sass/gallery.scss rename to sites/gallery/gallery.scss