Skip to content

Commit 794cba4

Browse files
Shadedog838Shadedog838
committed
Merge branch 'develop' into bh-1034
2 parents 8263ead + e7246a9 commit 794cba4

3 files changed

Lines changed: 98 additions & 78 deletions

File tree

‎index.html‎

Lines changed: 30 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -59,68 +59,68 @@
5959
<div class="carousel">
6060
<div class="slide">
6161
<div class="wire"></div>
62-
<div class="front_clip"></div>
63-
<div class="back_clip"></div>
62+
<div class="front-clip"></div>
63+
<div class="back-clip"></div>
6464
<img src="./assets/imgs/1.jpg" class="slide-image" alt="BrickHack 6 attendees"/>
6565
</div>
6666
<div class="slide">
6767
<div class="wire"></div>
68-
<div class="front_clip"></div>
69-
<div class="back_clip"></div>
68+
<div class="front-clip"></div>
69+
<div class="back-clip"></div>
7070
<img src="./assets/imgs/2.jpg" class="slide-image" alt="BrickHack 6 attendees"/>
7171
</div>
7272
<div class="slide">
7373
<div class="wire"></div>
74-
<div class="front_clip"></div>
75-
<div class="back_clip"></div>
74+
<div class="front-clip"></div>
75+
<div class="back-clip"></div>
7676
<img src="./assets/imgs/3.jpg" class="slide-image" alt="BrickHack 6 attendees"/>
7777
</div>
7878
<div class="slide">
7979
<div class="wire"></div>
80-
<div class="front_clip"></div>
81-
<div class="back_clip"></div>
80+
<div class="front-clip"></div>
81+
<div class="back-clip"></div>
8282
<img src="./assets/imgs/4.jpg" class="slide-image" alt="BrickHack 6 attendees"/>
8383
</div>
8484
<div class="slide">
8585
<div class="wire"></div>
86-
<div class="front_clip"></div>
87-
<div class="back_clip"></div>
86+
<div class="front-clip"></div>
87+
<div class="back-clip"></div>
8888
<img src="./assets/imgs/5.jpg" class="slide-image" alt="BrickHack 6 attendees"/>
8989
</div>
9090
<div class="slide">
9191
<div class="wire"></div>
92-
<div class="front_clip"></div>
93-
<div class="back_clip"></div>
92+
<div class="front-clip"></div>
93+
<div class="back-clip"></div>
9494
<img src="./assets/imgs/6.jpg" class="slide-image" alt="BrickHack 6 attendees"/>
9595
</div>
9696
<div class="slide">
9797
<div class="wire"></div>
98-
<div class="front_clip"></div>
99-
<div class="back_clip"></div>
98+
<div class="front-clip"></div>
99+
<div class="back-clip"></div>
100100
<img src="./assets/imgs/7.jpg" class="slide-image" alt="BrickHack 6 attendees"/>
101101
</div>
102102
<div class="slide">
103103
<div class="wire"></div>
104-
<div class="front_clip"></div>
105-
<div class="back_clip"></div>
104+
<div class="front-clip"></div>
105+
<div class="back-clip"></div>
106106
<img src="./assets/imgs/8.jpg" class="slide-image" alt="BrickHack 6 attendees"/>
107107
</div>
108108
<div class="slide">
109109
<div class="wire"></div>
110-
<div class="front_clip"></div>
111-
<div class="back_clip"></div>
110+
<div class="front-clip"></div>
111+
<div class="back-clip"></div>
112112
<img src="./assets/imgs/9.jpg" class="slide-image" alt="BrickHack 6 attendees"/>
113113
</div>
114114
<div class="slide">
115115
<div class="wire"></div>
116-
<div class="front_clip"></div>
117-
<div class="back_clip"></div>
116+
<div class="front-clip"></div>
117+
<div class="back-clip"></div>
118118
<img src="./assets/imgs/10.jpg" class="slide-image" alt="BrickHack 6 attendees"/>
119119
</div>
120120
<div class="slide">
121121
<div class="wire"></div>
122-
<div class="front_clip"></div>
123-
<div class="back_clip"></div>
122+
<div class="front-clip"></div>
123+
<div class="back-clip"></div>
124124
<img src="./assets/imgs/11.jpg" class="slide-image" alt="BrickHack 6 attendees"/>
125125
</div>
126126
</div>
@@ -135,12 +135,16 @@ <h2>What is a Hackathon?</h2>
135135
<p>Students work in teams and mentors are present to offer help. Sponsors attend to help, recruit, and promote their products. Teams compete in different categories and prizes are awarded, but everyone learns and everyone wins!</p>
136136
<p>Come spend 24 hours with us at BrickHack and dedicate time to learn, collaborate, build, and innovate.</p>
137137
</div>
138-
<a href="https://mlh.io/" id="mlh" target="_blank" rel="noopener noreferrer">
139-
<div>
138+
<div id="hackathon-buttons">
139+
<a href="https://mlh.io/" id="mlh" target="_blank" rel="noopener noreferrer">
140140
<i class="fas fa-arrow-right"></i>
141141
<p>Visit Major League Hacking (MLH)</p>
142-
</div>
143-
</a>
142+
</a>
143+
<a href="javascript:void(0);" id="gallery" rel="noopener noreferrer">
144+
<i class="fas fa-tools"></i>
145+
<p>Gallery (coming soon!)</p>
146+
</a>
147+
</div>
144148
</div>
145149
</section>
146150
<section id="schedule">

‎index.js‎

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,24 @@
1-
2-
31
import './sass/main.scss'
42
import '@fortawesome/fontawesome-free/css/all.css'
53

6-
74
// slick-carousel configuration
8-
95
import $ from 'jquery'
106
import 'slick-carousel'
117

8+
9+
const hiringMessage = `Hey, you.
10+
You’re finally awake.
11+
You were trying to see the code, right?
12+
Walked right into that hiring message, same as us.
13+
If you’d like to work on this website and other cool projects with hackathons, send an email over to engineering@coderit.org!`
14+
15+
console.log(hiringMessage);
16+
17+
// comment generated via js instead of directly in HTML so the hiring message text is only in one place
18+
const comment = document.createComment("\n"+hiringMessage.toString()+"\n");
19+
document.insertBefore(comment, document.firstChild);
20+
21+
1222
$(document).ready(function() {
1323
$('.carousel').slick({
1424
infinite: true,

‎sass/main.scss‎

Lines changed: 54 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,6 @@ $section-padding: 140px;
1616

1717
$img-border-radius: 20px;
1818

19-
$wire-height: 15px;
20-
2119
$leadership-size: 220px;
2220
$leadership-size-mobile: 180px;
2321

@@ -76,7 +74,6 @@ $event-count: 6;
7674
color: white;
7775
// Allows for elements "below" std z-index
7876
// (note: only set if child adopts explicit position value)
79-
z-index: 2;
8077

8178
}
8279

@@ -187,10 +184,10 @@ nav {
187184
width: 100%;
188185
right: 0;
189186
top: -10px; // SVG crop issues?
190-
z-index: 1;
191187
background-image: url("../assets/desk1.svg");
192188
background-repeat: no-repeat;
193189
background-position: bottom right;
190+
z-index: 1;
194191
}
195192

196193
#shelf {
@@ -204,6 +201,7 @@ nav {
204201
background-repeat: no-repeat;
205202
background-position: bottom center;
206203
background-size: cover;
204+
z-index: 2;
207205
}
208206

209207
#shapes {
@@ -212,10 +210,10 @@ nav {
212210
height: 900px;
213211
width: 900px;
214212
margin-top: -80px;
215-
z-index: 1;
216213
background-image: url("../assets/shapes.svg");
217214
background-repeat: no-repeat;
218215
background-position: center;
216+
z-index: 1;
219217
}
220218
}
221219

@@ -235,63 +233,66 @@ nav {
235233
.carousel {
236234
width: 100%;
237235
margin: 0 auto;
238-
margin-top: $section-padding;
236+
margin-top: $section-padding / 2;
239237

240238
.slick-list {
241239
// Slider depends on having the overflow-x hidden,
242240
// CSS (per spec) doesn't allow separate overflow-y and x.
243241
// So, we add some padding to cheat it.
244242
// (https://css-tricks.com/popping-hidden-overflow/)
245-
padding-top: 60px !important; // overrides slick.css
243+
padding-top: 60px !important; // Overrides slick.css
246244
margin-top: -60px;
247245
overflow: hidden;
248246
}
249247

250248
.slick-slide {
251-
height: 300px;
252-
width: 300px;
249+
$slide-size: 300px;
250+
height: $slide-size;
253251
margin-right: 20px; // Same margin as wire top calculation
254252

255253
&:focus {
256254
outline: none;
257255
}
258256

259257
.wire {
258+
position: absolute;
260259
width: 200%;
261260
margin: 0;
262-
height: $wire-height;
261+
height: 15px;
263262
background: $pink;
264-
top: -($wire-height + 20px);
265-
position: relative;
263+
top: -(15px + 20px); // Emphasize 20px margin on 15px height
264+
z-index: 2;
266265
}
267266

268-
.front_clip {
269-
position: relative;
267+
// Offset clips above the carousel image
268+
.front-clip, .back-clip {
269+
position: absolute;
270+
top: -60px;
271+
}
272+
273+
.front-clip {
274+
margin-left: ($slide-size / 2);
270275
width: 30px;
271-
height: 90px;
276+
height: 80px;
272277
background-color: $orange;
273-
margin: 0 auto;
274-
top: -90px;
278+
z-index: 3;
275279
}
276280

277-
.back_clip {
278-
width: 10px;
281+
.back-clip {
282+
$width: 10px;
283+
width: $width;
279284
height: 60px;
280285
background-color: $red;
281-
top: -155px;
282-
margin-left: calc(50% - 25px);
283-
position: relative;
286+
margin-left: ($slide-size / 2) - $width; // Peek out from top clip
287+
margin-top: 10px; // Vertical offset from top clip
284288
z-index: 0;
285289
}
286290

287-
// Clip is easier as rel, so this is abs.
288291
img {
289-
position: absolute;
290-
width: 300px;
291-
height: 300px;
292+
position: relative;
292293
top: 0;
293-
bottom: 0;
294-
z-index: 1;
294+
width: $slide-size;
295+
height: $slide-size;
295296
border-radius: 20px;
296297
cursor: pointer;
297298
transition: 0.3s;
@@ -410,29 +411,34 @@ nav {
410411
}
411412
}
412413

413-
#mlh {
414-
@include button;
415-
@include button-effect($light-blue);
416-
background-color: $light-blue;
417-
margin: 0 auto;
418-
padding: 30px;
419-
border-radius: 20px;
414+
#hackathon-buttons {
415+
display: flex;
416+
flex-direction: column;
417+
margin: 0px auto;
418+
align-items: flex-start;
420419

421-
i, p {
422-
display: inline;
423-
}
420+
#mlh, #gallery {
421+
@include button;
422+
@include button-effect($light-blue);
423+
display: flex;
424+
align-items: center;
425+
background-color: $light-blue;
426+
margin: 24px 0px;
427+
padding: 30px;
428+
border-radius: $img-border-radius;
429+
width: 100%;
424430

425-
p {
426-
font-size: 1.2em;
427-
font-weight: $font-medium;
428-
}
431+
p {
432+
margin: 0px;
433+
font-size: 1.2em;
434+
font-weight: $font-medium;
435+
}
429436

430-
// TODO: Needs better alignment.
431-
i.fa-arrow-right {
432-
font-size: 1.6em;
433-
color: $red;
434-
vertical-align: text-bottom;
435-
padding-right: 10px;
437+
i.fa-arrow-right, i.fa-tools {
438+
font-size: 1.6em;
439+
color: $red;
440+
padding-right: 10px;
441+
}
436442
}
437443
}
438444
}

0 commit comments

Comments
 (0)