diff --git a/assets/desk1-mobile.svg b/assets/desk1-mobile.svg new file mode 100644 index 000000000..7cbf861a3 --- /dev/null +++ b/assets/desk1-mobile.svg @@ -0,0 +1,108 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/shapes.svg b/assets/shapes.svg index 564afc0a6..fdcdeb892 100644 --- a/assets/shapes.svg +++ b/assets/shapes.svg @@ -1,53 +1,12 @@ - - - - - - - - - - - - - - - - - + + + + + + + + + + + diff --git a/index.html b/index.html index f56e06e65..0feb05e46 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,8 @@ BrickHack 7 - + + @@ -163,11 +164,7 @@
SUNDAY

Opening Ceremony

-

10:30am-12am

-

Hacking!

-
-
-

10-10:30am

+

12pm

Lunch (on your own!)

@@ -181,23 +178,19 @@
SUNDAY
-

12am-4pm

-

More Hacking

+

10am

+

Devpost submission

1pm-2pm

Mystery Workshop 2

-

4pm

-

Coding stops

+

12:30pm-2pm

+

Coding stops / Judging begins

-

4pm-5pm

-

Judging

-
-
-

5pm-6pm

+

2pm-4pm

Closing Ceremony

diff --git a/index.js b/index.js index 8d513c93e..2160a10c8 100644 --- a/index.js +++ b/index.js @@ -20,6 +20,14 @@ $(document).ready(function() { autoplay: true, autoplaySpeed: 2000, speed: 1000, + responsive: [ + { + breakpoint: 1000, + settings: { + centerMode: true + } + } + ] }); }); diff --git a/sass/main.scss b/sass/main.scss index 89257c00c..183919dc5 100644 --- a/sass/main.scss +++ b/sass/main.scss @@ -142,29 +142,27 @@ nav { height: calc(100vh - #{$nav-height}); background-color: $light-blue; display: flex; - align-items: center; + justify-content: space-between; padding-left: $section-padding; + // border: 3px solid yellow; #hero-text { z-index: 2; - width: 40%; - } - - p, a { - margin-bottom: 30px; + white-space: nowrap; + margin-top: 13%; + // border: 3px solid yellow; } p { - // This and the margin-bottom for {p, a} - // lets the different h elements + // This lets the different h elements // appear to be equally spaced. line-height: 0.7; + margin-bottom: 30px; } #bh7 { font-size: 5.4em; font-weight: $font-extrabold; - margin-top: -200px; } #premiere { @@ -193,7 +191,7 @@ nav { z-index: 1; background-image: url("../assets/desk1.svg"); background-repeat: no-repeat; - background-position: right; + background-position: bottom right; } #shelf { @@ -210,7 +208,8 @@ nav { } #shapes { - position: relative; + position: absolute; + right: 0; height: 900px; width: 900px; margin-top: -80px; @@ -414,6 +413,7 @@ nav { .accordion-header { background-color: transparent; cursor: pointer; + outline: none; text-align: left; padding: 20px 30px; border: none; @@ -650,8 +650,55 @@ footer { } } -@media screen and (max-width: 1500px) { +// TODO: Make standard breakpoint widths with vars +@media screen and (max-width: 1100px) { + + #hero #hero-text { + margin: 30% auto 0% auto; + text-align: center; + margin-top: 10%; + } +} + +@media screen and (max-width: 1200px) { + #hero { + padding: 50px; + + #hero-text { + padding: 0; + } + + #bh7 { + font-size: 5.0em; + } + + #premiere { + font-size: 2.0em; + } + + #dates { + font-size: 1.1em; + } + + #desk { + height: 100%; + width: 1000px; + overflow: clip; + background-image: url("../assets/desk1-mobile.svg"); + } + + #shapes { + display: none; + } + } + + #schedule #schedule-block { + width: 100%; + } +} + +@media screen and (max-width: 1500px) { // Scaling idea, key is clip #shelf { @@ -659,9 +706,31 @@ footer { overflow: clip; } + #hackathon { + .carousel .slick-arrow { + // TODO: this can be refactored to be unnessecary + margin-top: 10px; + } + #hackathon-content { + flex-direction: column; + #hackathon-text { + width: 100%; + } + } + } + + #faq #faq-wrapper #faq-cards { + flex-direction: column; + + &-left, &-right { + margin: 0; + width: 100%; + } + } + #leadership #leaders { justify-content: space-between; - grid-template-columns: repeat(5, $leadership-size-mobile); + grid-template-columns: repeat(3, $leadership-size-mobile); width: 100%; gap: 30px; @@ -676,17 +745,8 @@ footer { } } -@media screen and (max-width: 1630px) { - #hero { - padding-left: 100px; - #bh7 { - margin-top: -340px; - } - #hero-text { - width: 70%; - } - } +@media screen and (max-width: 1630px) { #leadership #leaders { justify-content: space-between;