Skip to content

Commit 1130579

Browse files
teahibiscusteahibiscus
committed
fixed the pages for the mobile!! and recent stuff
1 parent 596cf8e commit 1130579

File tree

6 files changed

+400
-100
lines changed

6 files changed

+400
-100
lines changed

‎Leadership.css

Lines changed: 68 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ body {
44
box-sizing: border-box;;
55
color: #e6e6e6;
66
background-color: #141624;
7+
overflow-x: hidden;
78
}
89

910
/* navy background color: #1b263b or #2c3e50 */
@@ -12,7 +13,7 @@ nav {
1213
width: 100%;
1314
z-index: 100;
1415
position: fixed;
15-
top: 0px;
16+
top: 0;
1617
left: 0;
1718
background-color: #1B263B;
1819

@@ -60,23 +61,67 @@ nav {
6061
transition: opacity 0.5s ease;
6162
}
6263

64+
.hamburge {
65+
display: none;
66+
}
6367

6468
@media screen and (max-width: 600px) {
6569
.nav {
6670
flex-direction: column;
71+
padding-bottom: 0;
6772
}
6873
.nav li {
6974
margin: 0;
7075
}
76+
}
7177

72-
78+
@media screen and (max-width: 600px) {
79+
.nav {
80+
display: none; /* Initially hide the nav on small screens */
81+
flex-direction: column;
82+
padding-bottom: 0;
83+
z-index: 4;
84+
}
85+
86+
.nav.show {
87+
display: flex; /* Show nav when hamburger is clicked */
88+
}
89+
90+
.hamburger {
91+
display: flex; /* Show hamburger only on mobile */
92+
flex-direction: column;
93+
justify-content: space-between;
94+
width: 30px;
95+
height: 25px;
96+
cursor: pointer;
97+
position: absolute;
98+
right: 20px;
99+
top: 15px;
100+
}
101+
102+
.hamburger .line {
103+
width: 100%;
104+
height: 4px;
105+
background-color: #e6e6e6;
106+
margin: 2px 0;
107+
}
108+
109+
.nav li {
110+
margin: 10px 0;
111+
}
112+
113+
.nav li .logo {
114+
display: none; /* Optionally hide the logo on mobile */
115+
}
73116
}
74117

75118

119+
76120
h1 {
77121
display: flex;
78122
justify-content: center;
79123
align-items: center;
124+
text-align: center;
80125
padding: 7% 0 1% 0;
81126
font-family: scandia-web;
82127
font-size: 3.5em;
@@ -111,7 +156,7 @@ h2 {
111156
position: -webkit-sticky; /* For Safari */
112157

113158

114-
z-index: 101; /* Ensures it appears above other content */
159+
z-index: 99; /* Ensures it appears above other content */
115160

116161
transition: transform 0.5s ease-in-out;
117162
}
@@ -162,8 +207,9 @@ h2 {
162207
font-size: 1.50em;
163208
padding: 20px;
164209
color: #e6e6e6;
165-
width: 250px;
210+
width: 200px;
166211
height: 80px;
212+
flex: 1 1 250px;
167213

168214
background-color: #1b263b;
169215
transition: transform 0.5s ease
@@ -212,7 +258,11 @@ h2 {
212258
}
213259

214260
.electrical_flex {
215-
width: 80%;
261+
width: 95%;
262+
}
263+
264+
.electrical_flex > div{
265+
margin: 0 auto;
216266
}
217267

218268
@media screen and (max-width: 600px) {
@@ -228,10 +278,23 @@ h2 {
228278
margin: 0 auto;
229279
}
230280

281+
.electrical_flex > div{
282+
margin: 0 auto;
283+
}
284+
285+
h1 {
286+
font-size: 2.8em;
287+
}
288+
231289
h2 {
232290
font-size: 1.75em;
291+
width: 80%;
292+
text-align: center;
293+
233294
}
234295

296+
297+
235298
}
236299

237300
.portrait {

‎Leadership.html

Lines changed: 31 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,9 @@
77

88
<title>formulaslug</title>
99
<meta name="viewport" content="width=device-width, initial-scale=1.0">
10+
<link rel="icon" type="image/x-icon" href="favicon.ico">
11+
12+
<meta charset="UTF-8">
1013
<link rel="stylesheet" href="Leadership.css">
1114
<link rel="preconnect" href="https://fonts.googleapis.com">
1215
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
@@ -47,24 +50,30 @@
4750

4851
<body>
4952
<nav>
50-
<ul class="nav">
53+
<div class="hamburger" onclick="toggleNav()">
54+
<div class="line"></div>
55+
<div class="line"></div>
56+
<div class="line"></div>
57+
</div>
58+
<ul class="nav" id="nav">
5159
<li><a href="home_page.html">Home</a></li>
5260
<li><a href="how_to_join.html">How To Join?</a></li>
5361
<li><a href="what_is_FSAE.html">What Is FSAE?</a></li>
5462
<li><div class="logo"><img src="FSexpandedLogoWriting.png" alt="Formula Slug Logo" width = "200"></div></li>
5563
<li><a href="photo_gallery.html">Photo Gallery</a></li>
5664
<li><a href="sponsors.html">Sponsors</a></li>
5765
<li><a href="Leadership.html">Leadership</a></li>
58-
66+
5967
</ul>
6068
</nav>
6169

70+
6271
<h1>Meet the Team</h1>
6372
<!--Originally said "Our Team"-->
6473

6574

6675

67-
<h2 class="banner board">Board and Management</h2>
76+
<div class="banner board"><h2>Board and Management</h2></div>
6877
<!--all the portraits for captains + management leads-->
6978

7079

@@ -187,7 +196,7 @@ <h3 class ="member_title">Mechanical Technical Project Manager</h3>
187196

188197

189198

190-
<h2 class="banner electrical">Electrical</h2>
199+
<div class="banner electrical"><h2>Electrical</h2></div>
191200
<!--leads for electrical with team photo-->
192201

193202
<!--for future notice, the pictures are causing a gap in between the banner and content. the temporary fix for now is keeping the width <=80% -->
@@ -197,14 +206,11 @@ <h2 class="banner electrical">Electrical</h2>
197206

198207
<div class="flex-container electrical_flex">
199208

200-
<div class = "item">
201-
<!--list of names here-->
202-
203-
<p class ="lead_name"> <b>Andrew She</b> <em>Accumulator Lead</em></p>
204-
<p class ="lead_name"> <b>Victor Kalastirsky </b> <em>Accumulator Hardware Lead</em></p>
205-
206-
209+
<div class="item">
210+
<p class="lead_name"><b>Andrew She</b> <em>Accumulator Lead</em></p>
211+
<p class="lead_name"><b>Victor Kalastirsky</b> <em>Accumulator Hardware Lead</em></p>
207212
</div>
213+
208214
<div class = "item">
209215
<!--list of names here-->
210216

@@ -245,7 +251,7 @@ <h2 class="banner electrical">Electrical</h2>
245251
</div>
246252

247253

248-
<h2 class="banner mechanical">Mechanical</h2>
254+
<div class="banner mechanical"><h2>Mechanical</h2></div>
249255
<!--leads for mechanical with team photo-->
250256

251257
<div class="pictures teampics"><img src="leadership_portraits/mechanical_default.jpg" alt="Team Picture of Mechanical" width="80%" ></div>
@@ -320,9 +326,11 @@ <h2 class="banner mechanical">Mechanical</h2>
320326
banner.style.top = `${navBarHeight}px`;
321327
})
322328
}
323-
324-
window.addEventListener('load', stickyBanner);
329+
if (window.innerWidth > 768) {
330+
window.addEventListener('load', stickyBanner);
325331
window.addEventListener('resize', stickyBanner);
332+
}
333+
326334
</script>
327335

328336
<!--this script is for the name of the section sticking to the top of the page-->
@@ -355,6 +363,15 @@ <h2 class="banner mechanical">Mechanical</h2>
355363

356364
</script>
357365

366+
<script>
367+
function toggleNav() {
368+
var navbar = document.getElementById("nav");
369+
console.log("Hamburger clicked!"); // Debugging log to check if it runs
370+
navbar.classList.toggle("show");
371+
}
372+
373+
</script>
374+
358375

359376
<div class="socials">
360377
<div class="insta"><a href="https://www.instagram.com/formula_slug?utm_source=ig_web_button_share_sheet&igsh=ZDNlZDc0MzIxNw==" target="_blank"><img src="instagram_logo.png" alt="Instagram Logo" width = "50"></a></div>

0 commit comments

Comments
 (0)