Skip to content

Schedule #997

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 9 commits into from
Dec 10, 2020
Merged

Schedule #997

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
97b82fb
Started schedule
peterkos Dec 10, 2020
5d2cbc1
More progress on events
peterkos Dec 10, 2020
9efbee8
Toggle schedule working
peterkos Dec 10, 2020
489d7ed
Merge branch 'develop' into bh-994
peterkos Dec 10, 2020
d0ecb11
Cleanup
peterkos Dec 10, 2020
216a993
Sequential event color assignment
peterkos Dec 10, 2020
96e2cc2
Added events
peterkos Dec 10, 2020
8907119
Tweak event font sizing; all p is 1.2em
peterkos Dec 10, 2020
0e159a8
Merge branch 'develop' into bh-994
peterkos Dec 10, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
65 changes: 65 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -138,6 +138,71 @@ <h2>What is a Hackathon?</h2>
</div>
</section>
<section id="schedule">
<h1>Schedule</h1>
<p>More events coming soon!</p>
<div id="schedule-block">
<div id="schedule-tapes">
<div class="tape"></div>
<div class="tape"></div>
</div>
<div id="schedule-content">
<div id="days">
<div class="day day-first day-active">
<h2 class="number">20</h2>
<h6 class="name">SATURDAY</h6>
</div>
<div class="day day-second">
<h2 class="number">21</h2>
<h6 class="name">SUNDAY</h6>
</div>
</div>
<div class="events day-first-events">
<div class="event">
<p class="time">10-10:30am</p>
<p class="title">Opening Ceremony</p>
</div>
<div class="event">
<p class="time">10:30am-12am</p>
<p class="title">Hacking!</p>
</div>
<div class="event">
<p class="time">10-10:30am</p>
<p class="title">Lunch (on your own!)</p>
</div>
<div class="event">
<p class="time">2pm-3pm</p>
<p class="title">Mystery Workshop</p>
</div>
<div class="event">
<p class="time">5pm-6pm</p>
<p class="title">Mystery Event</p>
</div>
</div>
<div class="events day-second-events">
<div class="event">
<p class="time">12am-4pm</p>
<p class="title">More Hacking</p>
</div>
<div class="event">
<p class="time">1pm-2pm</p>
<p class="title">Mystery Workshop 2</p>
</div>
<div class="event">
<p class="time">4pm</p>
<p class="title">Coding stops</p>
</div>
<div class="event">
<p class="time">4pm-5pm</p>
<p class="title">Judging</p>
</div>
<div class="event">
<p class="time">5pm-6pm</p>
<p class="title">Closing Ceremony</p>
</div>
</div>
</div>
</div>

</section>
<section id="faq">
</section>
Expand Down
17 changes: 16 additions & 1 deletion index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,4 +21,19 @@ $(document).ready(function() {
autoplaySpeed: 2000,
speed: 1000,
});
});
});

// 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');
});
117 changes: 114 additions & 3 deletions sass/main.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,13 +20,18 @@ $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;

// 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';
Expand All @@ -50,6 +55,12 @@ $title-size: 3em;
}
}

// Functions for random color selection (hero)
@function rand-color($colors...) {
@return nth($colors, random(length($colors)))
}


// General
* {
margin: 0;
Expand All @@ -72,6 +83,10 @@ a {
color: white;
}

p {
font-size: 1.2em;
}

// Nav
nav {
background-color: rgba(white, 5%);
Expand Down Expand Up @@ -138,7 +153,7 @@ nav {

#bh7 {
font-size: 5.4em;
font-weight: $font-bold;
font-weight: $font-extrabold;
}

#premiere {
Expand Down Expand Up @@ -205,7 +220,6 @@ nav {

p {
margin-bottom: 20px;
font-size: 1.2em;
}

.carousel {
Expand Down Expand Up @@ -350,6 +364,103 @@ nav {
}
}

#schedule {
padding: $section-padding;
background-color: $blue;

h1 {
font-size: $title-size;
}

#schedule-block {
// TODO: make margin consistent across other element
margin: 40px auto 0px auto;
width: 1000px;
background-color: $light-blue;
border-radius: $img-border-radius;
position: relative;
}

#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: -20px; // Half of tape height
height: 40px;
width: 25%;
background-color: rgba($red, 60%);
}
}

#schedule-content {
display: flex;
justify-content: space-around;
padding: 60px 100px;

#days {
width: 40%;
display: flex;
justify-content: space-around;
flex-direction: column;
user-select: none;
cursor: pointer;

.day {
.number {
font-size: 6.5em;
font-weight: $font-bold;
line-height: 1; // TODO: Can this be done cleaner?
}

.name {
font-size: 2em;
font-weight: $font-regular;
}
}

// Class set by JS in index.js on click
.day-active {
.number, .name {
color: $orange;
}
}
}

.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;

.time {
color: $light-blue;
}
.title {
color: black;
font-size: 1.3em;
}
}
}

}

}

#leadership {
padding: $section-padding;
background-color: $light-blue;
Expand Down