Skip to content

Commit 8f02e9f

Browse files
sjmiller7sjmiller7
authored
Gallery Mobile Styling + CSS Cleanup (#1111)
* attempt 1 at cliping images * mobile gallery + css cleanup * fixes
1 parent f09bd8b commit 8f02e9f

File tree

2 files changed

+81
-43
lines changed

2 files changed

+81
-43
lines changed

‎gallery.html‎

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -51,16 +51,16 @@ <h1>BrickHack 6</h1>
5151
<p>February 8-9 2020</p>
5252
<p>40 schools - 590 hackers - 24 hours</p>
5353
</div>
54-
<div class="images">
55-
<img class="image" src="https://images.unsplash.com/photo-1532630571098-79a3d222b00d?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=2938&q=80" alt="image"/>
56-
<img class="image" src="https://images.unsplash.com/photo-1532630571098-79a3d222b00d?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=2938&q=80" alt="image"/>
57-
<img class="image" src="https://images.unsplash.com/photo-1532630571098-79a3d222b00d?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=2938&q=80" alt="image"/>
58-
<img class="image" src="https://images.unsplash.com/photo-1532630571098-79a3d222b00d?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=2938&q=80" alt="image"/>
59-
<img class="image" src="https://images.unsplash.com/photo-1532630571098-79a3d222b00d?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=2938&q=80" alt="image"/>
60-
<img class="image" src="https://images.unsplash.com/photo-1532630571098-79a3d222b00d?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=2938&q=80" alt="image"/>
61-
<img class="image" src="https://images.unsplash.com/photo-1532630571098-79a3d222b00d?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=2938&q=80" alt="image"/>
62-
<img class="image" src="https://images.unsplash.com/photo-1532630571098-79a3d222b00d?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=2938&q=80" alt="image"/>
63-
<img class="image" src="https://images.unsplash.com/photo-1532630571098-79a3d222b00d?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=2938&q=80" alt="image"/>
54+
<div class="image-container">
55+
<div class="image"></div>
56+
<div class="image"></div>
57+
<div class="image"></div>
58+
<div class="image"></div>
59+
<div class="image"></div>
60+
<div class="image"></div>
61+
<div class="image"></div>
62+
<div class="image"></div>
63+
<div class="image"></div>
6464
</div>
6565
<!-- BH5 -->
6666
<div class="header">
@@ -71,16 +71,16 @@ <h1>BrickHack 5</h1>
7171
<p>February 8-9 2019 idk</p>
7272
<p>this is filler</p>
7373
</div>
74-
<div class="images">
75-
<img src="https://images.unsplash.com/photo-1532630571098-79a3d222b00d?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=2938&q=80" alt="image"/>
76-
<img src="https://images.unsplash.com/photo-1532630571098-79a3d222b00d?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=2938&q=80" alt="image"/>
77-
<img src="https://images.unsplash.com/photo-1532630571098-79a3d222b00d?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=2938&q=80" alt="image"/>
78-
<img src="https://images.unsplash.com/photo-1532630571098-79a3d222b00d?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=2938&q=80" alt="image"/>
79-
<img src="https://images.unsplash.com/photo-1532630571098-79a3d222b00d?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=2938&q=80" alt="image"/>
80-
<img src="https://images.unsplash.com/photo-1532630571098-79a3d222b00d?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=2938&q=80" alt="image"/>
81-
<img src="https://images.unsplash.com/photo-1532630571098-79a3d222b00d?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=2938&q=80" alt="image"/>
82-
<img src="https://images.unsplash.com/photo-1532630571098-79a3d222b00d?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=2938&q=80" alt="image"/>
83-
<img src="https://images.unsplash.com/photo-1532630571098-79a3d222b00d?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=2938&q=80" alt="image"/>
74+
<div class="image-container">
75+
<div class="image"></div>
76+
<div class="image"></div>
77+
<div class="image"></div>
78+
<div class="image"></div>
79+
<div class="image"></div>
80+
<div class="image"></div>
81+
<div class="image"></div>
82+
<div class="image"></div>
83+
<div class="image"></div>
8484
</div>
8585
<!-- This is where Parcel imports are located! (SASS, etc.) -->
8686
<script src="./gallery.js"></script>

‎sass/gallery.scss‎

Lines changed: 61 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,44 @@
1+
// Variables
2+
$orange: #F98728;
3+
$off-white: #F9F6F3;
4+
15
* {
26
padding: 0;
37
margin: 0;
48
box-sizing: border-box;
59
}
610

711
body {
8-
background-color: #F9F6F3;
12+
background-color: $off-white;
913
}
1014

1115
nav {
1216
position: fixed;
1317
top: 0;
1418
width: 100%;
15-
background-color: #F9F6F3;
16-
border-bottom: 3px solid #F98728;
19+
background-color: $off-white;
20+
border-bottom: 3px solid $orange;
1721
display: flex;
1822
justify-content: space-between;
1923
padding: 0px 20px;
2024
z-index: 1;
2125

2226
a {
23-
color: #F98728;
27+
color: $orange;
2428
font-family: Roboto, sans-serif;
2529
text-decoration: none;
2630
font-size: 25px;
2731
margin: 10px;
28-
border-bottom: 3px solid rgba(#F98728, 0%);
32+
border-bottom: 3px solid rgba($orange, 0%);
2933
border-top: 3px solid transparent; // for balance
3034

3135
&:hover, &:active {
32-
border-bottom: 3px solid rgba(#F98728, 100%);
36+
border-bottom: 3px solid rgba($orange, 100%);
3337
}
3438
}
3539

3640
i {
37-
color: #F98728;
41+
color: $orange;
3842
font-size: 35px;
3943
margin: 10px;
4044
}
@@ -58,7 +62,7 @@ nav {
5862
}
5963

6064
.header {
61-
background-color: #F98728;
65+
background-color: $orange;
6266
width: 100%;
6367
padding: 30px;
6468
}
@@ -69,7 +73,7 @@ nav {
6973

7074
h1, p {
7175
text-align: center;
72-
color: white;
76+
color: $off-white;
7377
font-family: Roboto, sans-serif;
7478
}
7579

@@ -87,27 +91,29 @@ p {
8791
margin: auto;
8892
width: 100px;
8993
height: 100px;
90-
background: #F9F6F3;
94+
background: $off-white;
9195
border-radius: 25px;
9296
}
9397

94-
.images {
98+
.image-container {
9599
display: grid;
96-
grid-template-columns: repeat(3, 1fr);
100+
grid-template-columns: repeat(5, 1fr);
97101
gap: 20px;
98102
padding: 20px;
99-
justify-items: stretch;
100-
justify-content: center;
101-
}
103+
align-items: center;
102104

103-
.images img {
104-
width: 100%;
105-
height: 285px;
106-
cursor: pointer;
105+
.image {
106+
cursor: pointer;
107+
width: 100%;
108+
height: 40vh;
109+
background-size: cover;
110+
background-position: center center;
111+
background-image: url(https://images.unsplash.com/photo-1532630571098-79a3d222b00d?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=2938&q=80);
112+
}
107113
}
108114

109115
#modal-background {
110-
background-color: #000000dd;
116+
background-color: rgba(black, 85%);
111117
width: 100%;
112118
height: 100%;
113119
position: fixed;
@@ -119,7 +125,7 @@ p {
119125

120126
#modal {
121127
text-align: center;
122-
background-color: #F9F6F3;
128+
background-color: $off-white;
123129
border-radius: 20px;
124130
padding: 20px;
125131
top: 10%;
@@ -133,7 +139,7 @@ p {
133139
display: none;
134140

135141
i {
136-
color: #F98728;
142+
color: $orange;
137143
font-size: 40px;
138144
}
139145

@@ -167,6 +173,24 @@ p {
167173
justify-content: space-between;
168174
}
169175

176+
@media screen and (max-width: 1800px) {
177+
.images {
178+
grid-template-columns: repeat(4, 1fr);
179+
}
180+
}
181+
182+
@media screen and (max-width: 1400px) {
183+
.images {
184+
grid-template-columns: repeat(3, 1fr);
185+
}
186+
}
187+
188+
@media screen and (max-width: 1000px) {
189+
.images {
190+
grid-template-columns: repeat(2, 1fr);
191+
}
192+
}
193+
170194
@media screen and (max-width: 660px) {
171195
#mobile-menu {
172196
display: flex;
@@ -184,11 +208,25 @@ p {
184208
flex-direction: column;
185209
align-items: center;
186210
display: none;
187-
border-top: 3px solid #F98728ff;
211+
border-top: 3px solid $orange;
188212
width: 100%;
189213
}
190214

191215
.show-menu {
192216
display: flex;
193217
}
218+
219+
.images {
220+
grid-template-columns: repeat(1, 1fr);
221+
}
222+
223+
#modal {
224+
width: 80%;
225+
max-height: none;
226+
227+
img {
228+
width: 100%;
229+
max-height: none;
230+
}
231+
}
194232
}

0 commit comments

Comments
 (0)