From 97b82fb2ca3a100eaf10c408f8665c496f97b6e5 Mon Sep 17 00:00:00 2001 From: Peter Kos Date: Thu, 10 Dec 2020 02:00:00 -0500 Subject: [PATCH 1/7] Started schedule HTML done Styling started Signed-off-by: Peter Kos --- index.html | 42 ++++++++++++++++++++++++++++++++ sass/main.scss | 66 ++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 108 insertions(+) diff --git a/index.html b/index.html index 3ac3f2d76..7b1e44380 100644 --- a/index.html +++ b/index.html @@ -134,6 +134,48 @@

What is a Hackathon?

+

Schedule

+
+
+
+
+
+
+
+
+

20

+
SATURDAY
+
+
+

21

+
SUNDAY
+
+
+
+
+

10-10:30am

+

Test Event

+
+
+

10-10:30am

+

Test Event

+
+
+

10-10:30am

+

Test Event

+
+
+

10-10:30am

+

Test Event

+
+
+

10-10:30am

+

Test Event

+
+
+
+
+
diff --git a/sass/main.scss b/sass/main.scss index 193049bf2..6a4c0f0fa 100644 --- a/sass/main.scss +++ b/sass/main.scss @@ -351,6 +351,72 @@ nav { } } +#schedule { + padding: $section-padding; + background-color: $blue; + + h1 { + font-size: $title-size; + } + + #schedule-block { + // TODO: make margin consistnet across other element + margin: 0 auto; + width: 100%; + background-color: $light-blue; + border-radius: $img-border-radius; + position: relative; + } + + #schedule-tapes { + display: flex; + width: 100%; + border: 3px solid yellow; + justify-content: space-around; + + .tape { + height: 20px; + width: 20%; + background-color: rgba($red, 60%); + } + } + + #schedule-content { + display: flex; + justify-content: space-around; + + + #days, #events { + width: 50%; + } + + #days { + border: 3px solid $light-gray; + display: flex; + justify-content: space-around; + flex-direction: column; + + .day { + .number { + font-size: 4em; + font-weight: $font-medium; + } + + .name { + font-size: 1em; + font-weight: $font-regular; + } + } + } + + #events { + border: 3px solid $light-gray; + } + + } + +} + #leadership { padding: $section-padding; background-color: $light-blue; From 5d2cbc1f9b7f52173b90b451441e052d34da5c97 Mon Sep 17 00:00:00 2001 From: Peter Kos Date: Thu, 10 Dec 2020 02:12:33 -0500 Subject: [PATCH 2/7] More progress on events Signed-off-by: Peter Kos --- sass/main.scss | 37 ++++++++++++++++++++++++++++--------- 1 file changed, 28 insertions(+), 9 deletions(-) diff --git a/sass/main.scss b/sass/main.scss index 6a4c0f0fa..01faea905 100644 --- a/sass/main.scss +++ b/sass/main.scss @@ -360,8 +360,9 @@ nav { } #schedule-block { - // TODO: make margin consistnet across other element - margin: 0 auto; + // TODO: make margin consistent across other element + margin: 40px auto 0px auto; + // width: 1000px; width: 100%; background-color: $light-blue; border-radius: $img-border-radius; @@ -370,12 +371,12 @@ nav { #schedule-tapes { display: flex; - width: 100%; - border: 3px solid yellow; justify-content: space-around; .tape { - height: 20px; + // For some reason, margin doesn't work on #schedule-tapes. + margin-top: -15px; // Half of tape height + height: 30px; width: 20%; background-color: rgba($red, 60%); } @@ -384,6 +385,7 @@ nav { #schedule-content { display: flex; justify-content: space-around; + margin: 0px 50px; #days, #events { @@ -391,26 +393,43 @@ nav { } #days { - border: 3px solid $light-gray; + // border: 3px solid $light-gray; display: flex; justify-content: space-around; flex-direction: column; .day { + .number { - font-size: 4em; + font-size: 6em; font-weight: $font-medium; + line-height: 1; // TODO: Can this be done cleaner? } .name { - font-size: 1em; + font-size: 1.5em; font-weight: $font-regular; } } } #events { - border: 3px solid $light-gray; + + .event { + background-color: white; + border-radius: 15px; + margin: 10px 0px; + padding: 10px; + border-left: 30px solid $red; + + .time { + color: $light-blue; + } + .title { + color: black; + font-size: 1.3em; + } + } } } From 9efbee852db7a871119697ef1cb850aa3d62a91d Mon Sep 17 00:00:00 2001 From: Peter Kos Date: Thu, 10 Dec 2020 03:15:55 -0500 Subject: [PATCH 3/7] Toggle schedule working Signed-off-by: Peter Kos --- index.html | 36 +++++++++++++++++++++++++++++++++--- index.js | 17 ++++++++++++++++- sass/main.scss | 49 +++++++++++++++++++++++++++++++++---------------- 3 files changed, 82 insertions(+), 20 deletions(-) diff --git a/index.html b/index.html index 7b1e44380..e97974983 100644 --- a/index.html +++ b/index.html @@ -142,16 +142,24 @@

Schedule

-
+

20

SATURDAY
-
+

21

SUNDAY
-
+ +

10-10:30am

Test Event

@@ -173,6 +181,28 @@
SUNDAY

Test Event

+
+
+

10-10:30am

+

Test 2 Event

+
+
+

10-10:30am

+

Test 2 Event

+
+
+

10-10:30am

+

Test 2 Event

+
+
+

10-10:30am

+

Test 2 Event

+
+
+

10-10:30am

+

Test 2 Event

+
+
diff --git a/index.js b/index.js index 12eb33781..9e4687372 100644 --- a/index.js +++ b/index.js @@ -21,4 +21,19 @@ $(document).ready(function() { autoplaySpeed: 2000, speed: 1000, }); -}); \ No newline at end of file +}); + +// Schedule toggle code +$('.day-second-events').hide(); +$('.day-first').click(function() { + $('.day-first-events').show(); + $('.day-first').addClass('day-active'); + $('.day-second-events').hide(); + $('.day-second').removeClass('day-active'); +}); +$('.day-second').click(function() { + $('.day-first-events').hide(); + $('.day-first').removeClass('day-active'); + $('.day-second-events').show(); + $('.day-second').addClass('day-active'); +}); diff --git a/sass/main.scss b/sass/main.scss index 01faea905..5898c1e0b 100644 --- a/sass/main.scss +++ b/sass/main.scss @@ -20,7 +20,8 @@ $leadership-size: 220px; $wire-height: 15px; // Just to make it more semantic -$font-bold: 700; +$font-extrabold: 700; +$font-bold: 600; $font-medium: 500; $font-regular: 400; @@ -28,7 +29,7 @@ $font-regular: 400; $title-size: 3em; // Fonts and other imports -@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap'); @import '../node_modules/slick-carousel/slick/slick.css'; @import '../node_modules/slick-carousel/slick/slick-theme.css'; @@ -139,7 +140,7 @@ nav { #bh7 { font-size: 5.4em; - font-weight: $font-bold; + font-weight: $font-extrabold; } #premiere { @@ -362,8 +363,8 @@ nav { #schedule-block { // TODO: make margin consistent across other element margin: 40px auto 0px auto; - // width: 1000px; - width: 100%; + width: 1000px; + // width: 100%; background-color: $light-blue; border-radius: $img-border-radius; position: relative; @@ -372,12 +373,14 @@ nav { #schedule-tapes { display: flex; justify-content: space-around; + position: absolute; + width: 100%; .tape { // For some reason, margin doesn't work on #schedule-tapes. - margin-top: -15px; // Half of tape height - height: 30px; - width: 20%; + margin-top: -20px; // Half of tape height + height: 40px; + width: 25%; background-color: rgba($red, 60%); } } @@ -385,24 +388,24 @@ nav { #schedule-content { display: flex; justify-content: space-around; - margin: 0px 50px; + padding: 60px; - - #days, #events { - width: 50%; + #days, .events { + // border: 3px solid yellow; } #days { - // border: 3px solid $light-gray; + width: 40%; display: flex; justify-content: space-around; flex-direction: column; + user-select: none; + cursor: pointer; .day { - .number { font-size: 6em; - font-weight: $font-medium; + font-weight: $font-bold; line-height: 1; // TODO: Can this be done cleaner? } @@ -411,11 +414,25 @@ nav { font-weight: $font-regular; } } + + // Class set by JS in index.js on click + .day-active { + .number, .name { + color: $orange; + } + } + } + + #times { + // width: 10%; + // margin-top: ; } - #events { + .events { + width: 60%; .event { + height: 100px; background-color: white; border-radius: 15px; margin: 10px 0px; From d0ecb112d453288aa92d408f6442ebc0732f7867 Mon Sep 17 00:00:00 2001 From: Peter Kos Date: Thu, 10 Dec 2020 03:54:49 -0500 Subject: [PATCH 4/7] Cleanup Signed-off-by: Peter Kos --- sass/main.scss | 10 ---------- 1 file changed, 10 deletions(-) diff --git a/sass/main.scss b/sass/main.scss index 8603de294..162f88b0d 100644 --- a/sass/main.scss +++ b/sass/main.scss @@ -389,10 +389,6 @@ nav { justify-content: space-around; padding: 60px; - #days, .events { - // border: 3px solid yellow; - } - #days { width: 40%; display: flex; @@ -422,16 +418,10 @@ nav { } } - #times { - // width: 10%; - // margin-top: ; - } - .events { width: 60%; .event { - height: 100px; background-color: white; border-radius: 15px; margin: 10px 0px; From 216a993f8273f03f94777893376021f34df74e86 Mon Sep 17 00:00:00 2001 From: Peter Kos Date: Thu, 10 Dec 2020 15:07:58 -0500 Subject: [PATCH 5/7] Sequential event color assignment Signed-off-by: Peter Kos --- sass/main.scss | 21 ++++++++++++++++++++- 1 file changed, 20 insertions(+), 1 deletion(-) diff --git a/sass/main.scss b/sass/main.scss index 162f88b0d..7e8acb170 100644 --- a/sass/main.scss +++ b/sass/main.scss @@ -51,6 +51,17 @@ $title-size: 3em; } } +// Functions for random color selection (hero) +@function rand-color($colors...) { + @return nth($colors, random(length($colors))) +} + +$event-count: 5; + +// @function rand-events($colors...) { + +// } + // General * { margin: 0; @@ -421,12 +432,20 @@ nav { .events { width: 60%; + + // Sequentially assign colors to all elements + $colors: $red, $orange, $light-gray; + @for $i from 1 through $event-count { + .event:nth-child(#{$i}) { + border-left: 30px solid nth($colors, $i % length($colors) + 1); + } + } + .event { background-color: white; border-radius: 15px; margin: 10px 0px; padding: 10px; - border-left: 30px solid $red; .time { color: $light-blue; From 96e2cc2b3383cb00da35b980d7140b0334f8ab5b Mon Sep 17 00:00:00 2001 From: Peter Kos Date: Thu, 10 Dec 2020 15:16:25 -0500 Subject: [PATCH 6/7] Added events Signed-off-by: Peter Kos --- index.html | 49 +++++++++++++++++++++++-------------------------- sass/main.scss | 10 ++++------ 2 files changed, 27 insertions(+), 32 deletions(-) diff --git a/index.html b/index.html index 2969e4a4b..0d9676f00 100644 --- a/index.html +++ b/index.html @@ -139,6 +139,7 @@

What is a Hackathon?

Schedule

+

More events coming soon!

@@ -155,56 +156,52 @@

21

SUNDAY
-

10-10:30am

-

Test Event

+

Opening Ceremony

-

10-10:30am

-

Test Event

+

10:30am-12am

+

Hacking!

10-10:30am

-

Test Event

+

Lunch (on your own!)

-

10-10:30am

-

Test Event

+

2pm-3pm

+

Mystery Workshop

-

10-10:30am

-

Test Event

+

5pm-6pm

+

Mystery Event

-

10-10:30am

-

Test 2 Event

+

12am-10:30am

+

More Hacking

-

10-10:30am

-

Test 2 Event

+

10:30am-4pm

+

Still Hacking

-

10-10:30am

-

Test 2 Event

+

1pm-2pm

+

Mystery Workshop 2

-

10-10:30am

-

Test 2 Event

+

4pm

+

Coding stops

-

10-10:30am

-

Test 2 Event

+

4pm-5pm

+

Judging

+
+
+

5pm-6pm

+

Closing Ceremony

diff --git a/sass/main.scss b/sass/main.scss index 7e8acb170..9b252be4d 100644 --- a/sass/main.scss +++ b/sass/main.scss @@ -28,6 +28,10 @@ $font-regular: 400; // Size for all titles on page $title-size: 3em; +// MAX events (across either day) +// TODO: Make this more dynamic via JS? +$event-count: 6; + // Import carousel @import '../node_modules/slick-carousel/slick/slick.css'; @import '../node_modules/slick-carousel/slick/slick-theme.css'; @@ -56,11 +60,6 @@ $title-size: 3em; @return nth($colors, random(length($colors))) } -$event-count: 5; - -// @function rand-events($colors...) { - -// } // General * { @@ -432,7 +431,6 @@ nav { .events { width: 60%; - // Sequentially assign colors to all elements $colors: $red, $orange, $light-gray; @for $i from 1 through $event-count { From 89071198e9ef8c21d25695bcf9600e040b0ba700 Mon Sep 17 00:00:00 2001 From: Peter Kos Date: Thu, 10 Dec 2020 15:20:42 -0500 Subject: [PATCH 7/7] Tweak event font sizing; all p is 1.2em Signed-off-by: Peter Kos --- index.html | 6 +----- sass/main.scss | 12 +++++++----- 2 files changed, 8 insertions(+), 10 deletions(-) diff --git a/index.html b/index.html index 0d9676f00..5ed60eede 100644 --- a/index.html +++ b/index.html @@ -180,13 +180,9 @@
SUNDAY
-

12am-10:30am

+

12am-4pm

More Hacking

-
-

10:30am-4pm

-

Still Hacking

-

1pm-2pm

Mystery Workshop 2

diff --git a/sass/main.scss b/sass/main.scss index 9b252be4d..5409f38e9 100644 --- a/sass/main.scss +++ b/sass/main.scss @@ -83,6 +83,10 @@ a { color: white; } +p { + font-size: 1.2em; +} + // Nav nav { background-color: rgba(white, 5%); @@ -216,7 +220,6 @@ nav { p { margin-bottom: 20px; - font-size: 1.2em; } .carousel { @@ -373,7 +376,6 @@ nav { // TODO: make margin consistent across other element margin: 40px auto 0px auto; width: 1000px; - // width: 100%; background-color: $light-blue; border-radius: $img-border-radius; position: relative; @@ -397,7 +399,7 @@ nav { #schedule-content { display: flex; justify-content: space-around; - padding: 60px; + padding: 60px 100px; #days { width: 40%; @@ -409,13 +411,13 @@ nav { .day { .number { - font-size: 6em; + font-size: 6.5em; font-weight: $font-bold; line-height: 1; // TODO: Can this be done cleaner? } .name { - font-size: 1.5em; + font-size: 2em; font-weight: $font-regular; } }