From 27b1ef53107ab8f8a0ee83116f6a7c7f12f2f5fd Mon Sep 17 00:00:00 2001 From: Peter Kos Date: Fri, 11 Dec 2020 16:13:52 -0500 Subject: [PATCH 1/8] Attempt at hero bug fixes Signed-off-by: Peter Kos --- assets/shapes.svg | 63 ++++++++------------------------------------ index.html | 3 ++- sass/main.scss | 67 ++++++++++++++++++++++++++++++++--------------- 3 files changed, 59 insertions(+), 74 deletions(-) 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..48bd7e3f8 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,8 @@ BrickHack 7 - + + diff --git a/sass/main.scss b/sass/main.scss index 89257c00c..233cdf676 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; @@ -650,8 +649,43 @@ footer { } } +// TODO: Make standard breakpoint widths with vars @media screen and (max-width: 1500px) { + #hero { + padding-left: 50px; + + #hero-text { + margin-top: 5%; + } + + #bh7 { + font-size: 5.0em; + } + + #premiere { + font-size: 2.0em; + } + #dates { + font-size: 1.3em; + } + + #desk { + height: 100%; + width: 1000px; + bottom: 0; + overflow: clip; + top: auto; + border: 3px solid yellow; + } + + #shapes { + display: none; + } + } +} + +@media screen and (max-width: 1500px) { // Scaling idea, key is clip #shelf { @@ -676,17 +710,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; From 19f0a5963f11443ee11f10c62c620901cfb0b34b Mon Sep 17 00:00:00 2001 From: Peter Kos Date: Fri, 11 Dec 2020 16:27:43 -0500 Subject: [PATCH 2/8] Fixed schedule items Signed-off-by: Peter Kos --- index.html | 20 ++++++-------------- sass/main.scss | 1 - 2 files changed, 6 insertions(+), 15 deletions(-) diff --git a/index.html b/index.html index 48bd7e3f8..a657c7c44 100644 --- a/index.html +++ b/index.html @@ -164,11 +164,7 @@
SUNDAY

Opening Ceremony

-

10:30am-12am

-

Hacking!

-
-
-

10-10:30am

+

12pm

Lunch (on your own!)

@@ -182,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/sass/main.scss b/sass/main.scss index 233cdf676..6a139abd8 100644 --- a/sass/main.scss +++ b/sass/main.scss @@ -676,7 +676,6 @@ footer { bottom: 0; overflow: clip; top: auto; - border: 3px solid yellow; } #shapes { From 5ef4753f69841a77d01cf0e2f0059e44ad1c1e2b Mon Sep 17 00:00:00 2001 From: Peter Kos Date: Fri, 11 Dec 2020 16:41:11 -0500 Subject: [PATCH 3/8] Fix clipping on temp mobile version Signed-off-by: Peter Kos --- index.js | 8 ++++++++ sass/main.scss | 23 ++++++++++++++++++++--- 2 files changed, 28 insertions(+), 3 deletions(-) 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 6a139abd8..b291107c2 100644 --- a/sass/main.scss +++ b/sass/main.scss @@ -413,6 +413,7 @@ nav { .accordion-header { background-color: transparent; cursor: pointer; + outline: none; text-align: left; padding: 20px 30px; border: none; @@ -655,7 +656,7 @@ footer { padding-left: 50px; #hero-text { - margin-top: 5%; + margin-top: 30%; } #bh7 { @@ -675,13 +676,16 @@ footer { width: 1000px; bottom: 0; overflow: clip; - top: auto; } #shapes { display: none; } } + + #schedule #schedule-block { + width: 100%; + } } @media screen and (max-width: 1500px) { @@ -692,9 +696,22 @@ 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%; + } + } + } + #leadership #leaders { justify-content: space-between; - grid-template-columns: repeat(5, $leadership-size-mobile); + grid-template-columns: repeat(4, $leadership-size-mobile); width: 100%; gap: 30px; From c10f8ade81f9f5cb80d0a1e139aa59712a6d88fa Mon Sep 17 00:00:00 2001 From: Peter Kos Date: Fri, 11 Dec 2020 16:44:17 -0500 Subject: [PATCH 4/8] Tweak leadership Signed-off-by: Peter Kos --- sass/main.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/sass/main.scss b/sass/main.scss index b291107c2..c0d891a15 100644 --- a/sass/main.scss +++ b/sass/main.scss @@ -711,7 +711,7 @@ footer { #leadership #leaders { justify-content: space-between; - grid-template-columns: repeat(4, $leadership-size-mobile); + grid-template-columns: repeat(3, $leadership-size-mobile); width: 100%; gap: 30px; From 1c43d146b2582028a9f4bf72e933f321ee9cddb6 Mon Sep 17 00:00:00 2001 From: Peter Kos Date: Fri, 11 Dec 2020 16:58:46 -0500 Subject: [PATCH 5/8] =?UTF-8?q?Mobile=20=E2=80=9Chack=E2=80=9D=20for=20her?= =?UTF-8?q?o=20works?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Peter Kos --- assets/desk1-mobile.svg | 108 ++++++++++++++++++++++++++++++++++++++++ sass/main.scss | 8 +-- 2 files changed, 113 insertions(+), 3 deletions(-) create mode 100644 assets/desk1-mobile.svg 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/sass/main.scss b/sass/main.scss index c0d891a15..18799e792 100644 --- a/sass/main.scss +++ b/sass/main.scss @@ -653,10 +653,12 @@ footer { // TODO: Make standard breakpoint widths with vars @media screen and (max-width: 1500px) { #hero { - padding-left: 50px; + padding: 0; #hero-text { - margin-top: 30%; + padding: 0; + margin: 30% auto 0% auto; + text-align: center; } #bh7 { @@ -674,8 +676,8 @@ footer { #desk { height: 100%; width: 1000px; - bottom: 0; overflow: clip; + background-image: url("../assets/desk1-mobile.svg"); } #shapes { From 4bcf286afcff5cb1c12a7b85014f65ef947da6f5 Mon Sep 17 00:00:00 2001 From: Peter Kos Date: Fri, 11 Dec 2020 17:04:51 -0500 Subject: [PATCH 6/8] Comment issue link viewport Signed-off-by: Peter Kos --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index a657c7c44..0feb05e46 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,7 @@ BrickHack 7 - + From cd38ff3b116bf96b2c714475c5b14ba10c5ce883 Mon Sep 17 00:00:00 2001 From: Peter Kos Date: Fri, 11 Dec 2020 17:28:44 -0500 Subject: [PATCH 7/8] Messy mobile styling for hero Signed-off-by: Peter Kos --- sass/main.scss | 18 +++++++++++++----- 1 file changed, 13 insertions(+), 5 deletions(-) diff --git a/sass/main.scss b/sass/main.scss index 18799e792..531827c5a 100644 --- a/sass/main.scss +++ b/sass/main.scss @@ -651,14 +651,22 @@ footer { } // TODO: Make standard breakpoint widths with vars -@media screen and (max-width: 1500px) { +@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: 0; + padding: 50px; #hero-text { padding: 0; - margin: 30% auto 0% auto; - text-align: center; } #bh7 { @@ -670,7 +678,7 @@ footer { } #dates { - font-size: 1.3em; + font-size: 1.1em; } #desk { From 75d69ff5fab13424cf9bfe2c5c3d1cbd378bcced Mon Sep 17 00:00:00 2001 From: Peter Kos Date: Fri, 11 Dec 2020 17:30:28 -0500 Subject: [PATCH 8/8] Mobile FAQ Signed-off-by: Peter Kos --- sass/main.scss | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/sass/main.scss b/sass/main.scss index 531827c5a..183919dc5 100644 --- a/sass/main.scss +++ b/sass/main.scss @@ -719,6 +719,15 @@ footer { } } + #faq #faq-wrapper #faq-cards { + flex-direction: column; + + &-left, &-right { + margin: 0; + width: 100%; + } + } + #leadership #leaders { justify-content: space-between; grid-template-columns: repeat(3, $leadership-size-mobile);