Skip to content

Commit 531c676

Browse files
peterkosww2497sjmiller7sjv01180JeremyRudman
authored
BrickHack 7 Updates (#1174)
* More opaque * Changed README badge * turning autoplay back on * Highlighting nav items with scroll (#1064) * Basic nav highlighting * Nav is now hidden on mobile again * Fixed conflicting smooth scrolling settings * Added transparency transition * Adjusted transition target * Adjusted transition target * Added a comment * Update sass/main.scss Co-authored-by: Peter Kos <[email protected]> * Restored old nav structure, adjusted scrolling * Searchbar no longer shows ID, fixed border unaligning nav items * Remove hover on click * Cleaned up CSS, added comment * Removed newline * Update package-lock.json * Update package-lock.json * Target navbar links instead of login button Co-authored-by: Peter Kos <[email protected]> * Bh-970 large screen layout (#1053) * initial commit * deleted swap file, increased nav size along with desk and shape dimensions * mobile section newlines * moved min-breakpoint above * removed extra newline * added spacing for mlh-badge styling * removed needless nav changes and fixed remaining spacing issues * Fix extra newlines Co-authored-by: Peter Kos <[email protected]> * fixed shelf clipping bug on large screen sizes (#1089) changed it to be a percentage over 1500px screen width * Sponsors section (#1088) * Initial sponsor/partner logos * “Inrterested in sponsor” bit * logo updates, added prospectus * Fixed logos, fixed bg color * on hover show color logo; some bugs MLH logo wonky pinnacle no URl * attempt to fix hover delay gltich * Fix partner image size * Update pinnalce link, add sponsors to navbar * Multline sponsors; img size to match amt given * Responsive sponsor section * Exclude transition properly (Refactor l8r) * Hover state on mobile is now handled https://css-tricks.com/solving-sticky-hover-states-with-media-hover-hover/ * Tweak prospectus spacing * Extra newline * Hero section parallax (#1091) * Hero section parallax * Update package-lock.json * Update dependencies * Tweak parallax values for now * Fix zindex on hero content; reorder desk container * Fix shapes div disappearing * Fixed hero text clipping over shelf, disabled mobile parallax * Removed rellax class from the shelf Co-authored-by: Peter Kos <[email protected]> * Carousel image clips over the front clip on mobile on tap/slide (#1078) * Carousel image: removed transparency on hover for smaller screens * Changed hover effect to brightness from opacity * Older iOS can now close image modal * Disabled filter effect on mobile * Increased nav z-index from 4 to 5 Co-authored-by: Peter Kos <[email protected]> * Adding social media summary cards (#1095) * text for cards; still need imgs from design * fixing the example url I left in * removing theme-color meta tag * adding social card image * fixing file paths * fixing twitter * Add parcel-plugin-metaimage * twitter:image property->name Co-authored-by: Peter Kos <[email protected]> * Update shipping FAQ, team size (#1086) * Update shipping FAQ * Remove extra newline * Add team membership limit to faq * Update to logistics wording * Remove extra spaces after some text * Fix hover effect (#1098) * Integrating with FeaturePeek (#1108) * Integrating with FeaturePeek * Fix the newlines * Integrating with FeaturePeek * Fix build script, damn featurepeek * Removes Dokku files/integrations (#1113) * Removes Dokku files/integrations * Update deploy-staging.yml * Update FAQ (#1114) * Add Prizes section (#1117) * Start prizes section * More deisgn + more repsosnive * cleanup * real emdashes * Add wegmans, stickermule (#1120) * making schedule match prizes with border-top (#1122) * new media query for mobile nav (#1123) * stickermule link update (#1129) * adding line about timezone (#1124) Co-authored-by: Peter Kos <[email protected]> * restructuring assets folder (#1126) Co-authored-by: Peter Kos <[email protected]> * Hotfix redirect brickhack.io/apply to apply.brickhack.io (#1135) * Add redirect script Meta redirect is a bit wonky with some browsers so lets try this (GH pages also has no .htaccess) * redirecting all 404s to the main page (not tested) Co-authored-by: sjmiller7 <[email protected]> * Added dynamic schedule (#1139) * Schedule is now pulled from HackathonManager * Schedule is now pulled from HackathonManager * Switched schedule JS to use correct data format * Scaffolded API fetch code * Added date/time background fade * Added time progress indicator * Event marker now extends outside event div * Second-day events can be shown automatically * CSS code style fixes * Event border works for any size events * Fix second day click * More CSS code style fixes * Removed fake API data * fix url for testing * fix now, change url, change section description Co-authored-by: Peter Kos <[email protected]> * update faq (#1143) * Hotfix timezones on schedule (#1147) * Fix timeone schedule * whooops * mtbank->mttech (#1144) * Update ricky hero svgs to use the ones on Notion, adjust color of site (#1138) * changed color and replaced desk files with those on notion * update node and reinstall * another push with the same changes to package-lock * ignore this * updated package-lock for lockfile fix attempt * upgraded npm to fix the package-lock file * need something to push * fservent error fix attempt * update fservent fix * third attempt of fservent update * no warnings on fservent nor lockfile. Please work * fix nit Co-authored-by: Peter Kos <[email protected]> * Schedule dates are shown in local timezone (#1148) * Schedule dates are shown in local timezone * Added timezone message * Update index.html Co-authored-by: Peter Kos <[email protected]> Co-authored-by: Peter Kos <[email protected]> * Gallery (#1103) * Header and flex box for gallery (#1102) * Remove old gallery * Setup gallery link * header for gallery * images flex box * indentation corrected * resolved issues * changes part 3 lol * resolved issue - favicon and description * resolved css issue * newline & semicolon resolved Co-authored-by: Peter Kos <[email protected]> Co-authored-by: Saranya Dadi <[email protected]> * adding navbar * newline at end of js * fixes and refactoring js * fixes * Update sass/gallery.scss Co-authored-by: Peter Kos <[email protected]> * Update sass/gallery.scss Co-authored-by: Peter Kos <[email protected]> * Gallery Image Popup (#1107) * adding html/css for modal * making the modal open/close * fixing stuff * scss fixes * fixes * fixing the modal * fixes * Gallery Mobile Styling + CSS Cleanup (#1111) * attempt 1 at cliping images * mobile gallery + css cleanup * fixes * Dynamically adding images (#1115) * first bit of changes * attempts at dynamic * FIx IAM credentials * putting image into modal * fixing image loading * comment fix * fixing my comment Co-authored-by: Peter Kos <[email protected]> * trying to add lazy * more attempts at Lazy loading * Revert "more attempts at Lazy loading" This reverts commit a61ba2f. * Revert "trying to add lazy" This reverts commit 22a9145. * Lazy load background images in gallery (#1119) * adding lazy * fixing modal * header information * Dynamic loading + transitions!!!!! * getting the last of the gallery content up Co-authored-by: sjmiller7 <[email protected]> * Gallery thumbnail images and added logos (#1137) * attempts at adding logos * making thumbnails appear * CD/local dev now uses .env for IAM auth; update README w/ local dev instructions (#1132) * Add keys.js generation as part of GH actions Would be ncie to refactor later to chain the build job * switch from keys.js to env var * Update readme to include IAM env settings * Update build to use env var * Remove TODO * Env var CI/CD is now valid YAML :) * Update gallery button w/ new icon + text * fixing ios links issue * Adjusting gallery modal design (#1151) * adjusting modal design * fixing modal scroll breakpoint & dumb padding * Fix package lock sync from backmerge Co-authored-by: SaranyaDadi <[email protected]> Co-authored-by: Saranya Dadi <[email protected]> Co-authored-by: sjmiller7 <[email protected]> Co-authored-by: sjmiller7 <[email protected]> * Removed outdated comment * Added event sorting code * Renamed sortEvents to compareEvents * New schedule design with pre-event workshop support (no mobile) (#1160) * Start new schedule; add binder ringz * tabs animation * tabs :) * tabs toggle hell yeah * tab toggling works fully * Schedule contnet layout fixed * Pre-event layout prog; 2 other pages work * Pre events work * color pre event thing * full schedule toggle done * Fix bug * More space on top and fix other bug * fix things * fix js range * no pointer * beeg tabs * Added more sponsor logos (#1164) * Schedule 2.0 Mobile (#1163) * progress on mobile * Progress * Aligning things and fix specifity roadblock * Tab spacing and tweak section on very small screen * style fix * Fixing gallery modal size and background scrolling (#1169) * the modal is fixed, thanks colby * deleting the inline CSS for overflow on hide * "Show more" buttons share tab colors * Add discord button to hero (#1155) * Add discord button to registration; no mobile * Add discord link * Mobile button progress * More buton * Remove stray comment * Fix link (#1176) Co-authored-by: ww2497 <[email protected]> Co-authored-by: sjmiller7 <[email protected]> Co-authored-by: William Wu <[email protected]> Co-authored-by: Samuel Velasquez <[email protected]> Co-authored-by: JeremyRudman <[email protected]> Co-authored-by: sjmiller7 <[email protected]> Co-authored-by: Chris Baudouin, Jr <[email protected]> Co-authored-by: Colby Gallup <[email protected]> Co-authored-by: SaranyaDadi <[email protected]> Co-authored-by: Saranya Dadi <[email protected]>
1 parent da68a0c commit 531c676

File tree

5 files changed

+118
-88
lines changed

5 files changed

+118
-88
lines changed

‎gallery.html

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -17,11 +17,12 @@
1717
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
1818
</head>
1919
<body>
20-
<div id="modal">
21-
<i class="fas fa-times" id="close-modal"></i>
22-
<img id="modal-img" src="https://images.unsplash.com/photo-1567309254107-5babef35b7b4?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1351&q=80" alt="image"/>
20+
<div id="modal-container">
21+
<div id="modal">
22+
<i class="fas fa-times" id="close-modal"></i>
23+
<img id="modal-img" src="https://images.unsplash.com/photo-1567309254107-5babef35b7b4?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1351&q=80" alt="image"/>
24+
</div>
2325
</div>
24-
<div id="modal-background"></div>
2526
<nav>
2627
<div id="mobile-menu">
2728
<i class="fas fa-bars" id="toggler"></i>

‎gallery.js

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -62,25 +62,27 @@ function viewAlbum(albumName) {
6262
// Opening modal
6363
$(document).on('click', function(event) {
6464
if ($(event.target).hasClass('image')) {
65-
$('#modal').show();
66-
var top = 'calc(5% + ' + (window.scrollY) + 'px)';
6765
var fullUrl = $(event.target).attr('data-bg').replaceAll('/thumb/', '/full/');
6866
$('#modal-img').attr('src', fullUrl);
69-
$('#modal').css('top', top);
70-
$('#modal-background').show();
67+
$('#modal-container').css('display', 'flex');
68+
$('html').css('overflow', 'hidden');
7169
}
7270
});
7371

7472
// Closing modal with x
7573
$('#close-modal').on('click', function() {
76-
$('#modal').hide();
77-
$('#modal-background').hide();
74+
$('#modal-container').hide();
75+
$('html').css('overflow', '');
76+
});
77+
78+
$('#modal').on('click', function(event) {
79+
event.stopPropagation();
7880
});
7981

8082
// Closing modal with background
81-
$('#modal-background').on('click', function() {
82-
$('#modal').hide();
83-
$('#modal-background').hide();
83+
$('#modal-container').on('click', function(event) {
84+
$('#modal-container').hide();
85+
$('html').css('overflow', '');
8486
});
8587

8688
// Navbar functionality

‎index.html

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -58,9 +58,11 @@
5858
<!-- Background images due to easier positioning. -->
5959
<div id="hero-text">
6060
<p id="bh7">BRICKHACK 7</p>
61-
<p id="premiere">RIT's Premiere Hackathon</p>
62-
<p id="dates">FEB 20-21 | ROCHESTER INSTITUTE OF TECHNOLOGY</p>
63-
<a id="register" href="https://apply.brickhack.io/users/sign_up">REGISTER</a>
61+
<p id="dates">FEB 20-21 | RIT DIGITAL HACKATHON</p>
62+
<div id="action-buttons">
63+
<a id="register" href="https://apply.brickhack.io/users/sign_up">REGISTER</a>
64+
<a id="discord" href="https://discord.gg/rXapGXsYEK">DISCORD</a>
65+
</div>
6466
</div>
6567
</div>
6668
<div id="desk-container" class="rellax" data-rellax-speed="0" data-rellax-desktop-speed="-8">
@@ -189,7 +191,6 @@ <h1>Schedule</h1>
189191
<p>Feb 21st</p>
190192
</div>
191193
</div>
192-
193194
<div id="schedule-content-wrapper">
194195
<div id="pre-event-content" class="schedule-content">
195196
<div class="day-row pre-16">

‎sass/gallery.scss

Lines changed: 12 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -123,14 +123,18 @@ p {
123123
}
124124
}
125125

126-
#modal-background {
126+
#modal-container {
127127
background-color: rgba(black, 85%);
128128
width: 100%;
129129
height: 100%;
130130
position: fixed;
131+
padding: 25px;
131132
z-index: 2;
132133
display: none;
134+
justify-content: center;
135+
align-items: center;
133136
top: 0;
137+
overflow: auto;
134138
cursor: pointer;
135139
}
136140

@@ -139,22 +143,20 @@ p {
139143
background-color: $off-white;
140144
border-radius: 20px;
141145
padding-top: 50px;
142-
top: 10%;
146+
position: relative;
147+
max-width: 100%;
148+
max-height: 100%;
143149
margin: auto;
144-
width: auto;
145-
left: 50%;
146-
transform: translateX(-50%);
147-
max-height: 90%;
148-
position: absolute;
149150
z-index: 3;
150-
display: none;
151+
display: block;
152+
cursor: default;
151153

152154
img {
153155
display: block;
154-
max-width: 100%;
155-
max-height: calc(90vh - 40px); // 40px from the padding of modal (20 top + 20 bottom)
156156
width: auto;
157157
height: auto;
158+
max-width: 100%;
159+
max-height: 100%;
158160
border: 8px solid $off-white;
159161
border-top: none;
160162
border-radius: 20px;
@@ -187,21 +189,6 @@ p {
187189
.image-container {
188190
grid-template-columns: repeat(2, 1fr);
189191
}
190-
191-
#modal {
192-
width: 90%;
193-
max-height: none;
194-
padding-top: 40px;
195-
196-
img {
197-
width: 100%;
198-
max-height: none;
199-
}
200-
}
201-
202-
#close-modal {
203-
font-size: 30px;
204-
}
205192
}
206193

207194
@media screen and (max-width: 660px) {

‎sass/main.scss

Lines changed: 85 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ $title-size: 3em;
4141
text-decoration: none;
4242
user-select: none;
4343
padding: 10px 20px;
44-
border-radius: 50px;
44+
border-radius: 20px;
4545
display: inline-block;
4646
color: white;
4747
cursor: pointer;
@@ -191,28 +191,37 @@ nav {
191191
// This lets the different h elements
192192
// appear to be equally spaced.
193193
line-height: 0.7;
194-
margin-bottom: 30px;
194+
margin-bottom: 40px;
195195
}
196196

197197
#bh7 {
198-
font-size: 5.4em;
198+
font-size: 6em;
199199
font-weight: $font-extrabold;
200200
}
201201

202-
#premiere {
203-
font-size: 2.5em;
204-
font-weight: $font-medium;
205-
}
206-
207202
#dates {
208-
font-size: 1.3em;
209-
font-weight: $font-regular;
203+
font-size: 2em;
204+
font-weight: $font-extrabold;
210205
}
211206

212-
#register {
213-
@include button;
214-
padding: 10px 80px;
215-
font-size: 2em;
207+
#action-buttons {
208+
display: flex;
209+
justify-content: space-between;
210+
width: 80%;
211+
212+
#register, #discord {
213+
@include button;
214+
font-size: 2.3em;
215+
width: 48%;
216+
text-align: center;
217+
}
218+
219+
#discord {
220+
background-color: $dark-blue;
221+
&:hover {
222+
background-color: lighten($dark-blue, 5%);
223+
}
224+
}
216225
}
217226

218227
// Hero Graphics
@@ -808,6 +817,31 @@ nav {
808817
}
809818
}
810819

820+
#feb-20-content {
821+
.show-full-schedule, .hide-full-schedule {
822+
i {
823+
color: $orange;
824+
}
825+
}
826+
827+
&:hover {
828+
animation: tab-hover-in 0.2s;
829+
animation-fill-mode: forwards;
830+
}
831+
832+
p {
833+
color: $dark-blue;
834+
}
835+
}
836+
837+
#feb-21-content {
838+
.show-full-schedule, .hide-full-schedule {
839+
i {
840+
color: $light-gray;
841+
}
842+
}
843+
}
844+
811845
// Part of the above content ids
812846
// but specificity is counterproductive to mobile styling
813847
.show-full-schedule, .hide-full-schedule {
@@ -826,7 +860,6 @@ nav {
826860
}
827861

828862
i {
829-
color: $red;
830863
font-size: 2em;
831864
margin-left: 10px;
832865
}
@@ -1216,18 +1249,6 @@ footer {
12161249
}
12171250

12181251
#hero {
1219-
#bh7 {
1220-
font-size: 6.4em;
1221-
}
1222-
1223-
#premiere {
1224-
font-size: 3em;
1225-
}
1226-
1227-
#dates {
1228-
font-size: 1.6em;
1229-
}
1230-
12311252
#register {
12321253
font-size: 2.3em;
12331254
}
@@ -1256,18 +1277,13 @@ footer {
12561277
}
12571278

12581279
#hero {
1259-
12601280
#bh7 {
12611281
font-size: 5.0em;
12621282
}
12631283

1264-
#premiere {
1265-
font-size: 2.0em;
1266-
}
1267-
1268-
#dates {
1269-
font-size: 1.1em;
1270-
}
1284+
// #dates {
1285+
// font-size: 1.7em;
1286+
// }
12711287

12721288
#shapes {
12731289
right: -100px;
@@ -1369,6 +1385,20 @@ footer {
13691385

13701386
@media screen and (max-width: 1220px) {
13711387

1388+
#hero {
1389+
#dates {
1390+
font-size: 1.5em;
1391+
}
1392+
1393+
#action-buttons {
1394+
width: 70%;
1395+
1396+
#register, #discord {
1397+
font-size: 1.7em;
1398+
}
1399+
}
1400+
}
1401+
13721402
#hackathon #hackathon-content #hackathon-buttons {
13731403
width: 100%;
13741404
}
@@ -1497,16 +1527,20 @@ footer {
14971527
font-size: 4.2em;
14981528
}
14991529

1500-
#premiere {
1501-
font-size: 2.0em;
1530+
#hero-text {
1531+
margin-top: 10vh;
15021532
}
15031533

15041534
#dates {
1505-
font-size: 1.1em;
1535+
font-size: 1.5em;
15061536
}
15071537

1508-
#hero-text {
1509-
margin-top: 10vh;
1538+
#action-buttons {
1539+
width: 60%;
1540+
1541+
#register, #discord {
1542+
font-size: 1.2em;
1543+
}
15101544
}
15111545

15121546
#desk-container {
@@ -1703,18 +1737,23 @@ footer {
17031737

17041738
p {
17051739
line-height: 0.4;
1740+
margin-bottom: 25px;
17061741
}
17071742

17081743
#bh7 {
1709-
font-size: 2.4em;
1744+
font-size: 3em;
17101745
}
17111746

1712-
#premiere {
1713-
font-size: 1.5em;
1747+
#dates {
1748+
font-size: 1em;
17141749
}
17151750

1716-
#dates {
1717-
font-size: 0.7em;
1751+
#action-buttons {
1752+
width: 80%;
1753+
1754+
#register, #discord {
1755+
font-size: 1.2em;
1756+
}
17181757
}
17191758

17201759
#desk-container {
@@ -1817,7 +1856,7 @@ footer {
18171856

18181857
@media screen and (max-width: 320px) {
18191858

1820-
#hero #premiere {
1859+
#hero #dates {
18211860
font-size: 1.2em;
18221861
}
18231862
}

0 commit comments

Comments
 (0)