Skip to content

Commit 1251579

Browse files
peterkospeterkos
authored
Merge pull request #1049 from codeRIT/bh-1048
Clip refactor
2 parents 657d327 + ccc2e4f commit 1251579

2 files changed

Lines changed: 52 additions & 50 deletions

File tree

‎index.html‎

Lines changed: 22 additions & 22 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" 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" 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" 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" 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" 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" 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" 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" 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" 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" 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" alt="BrickHack 6 attendees"/>
125125
</div>
126126
</div>

‎sass/main.scss‎

Lines changed: 30 additions & 28 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,64 +233,68 @@ 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;
297+
z-index: 2;
296298
}
297299
}
298300

0 commit comments

Comments
 (0)