Skip to content

Commit b95f26f

Browse files
26samaahmed26samaahmed
committed
Update +page.svelte
1 parent e22cf6b commit b95f26f

1 file changed

Lines changed: 131 additions & 118 deletions

File tree

‎src/routes/(site)/teams/+page.svelte‎

Lines changed: 131 additions & 118 deletions
Original file line numberDiff line numberDiff line change
@@ -58,95 +58,66 @@
5858

5959
<section class="team-container">
6060
<div class="team-icons-inner-container">
61-
<a
62-
href="#general"
63-
class="icon icon"
64-
on:click={handleIconClick}
65-
style="background-color: var(--acm-blue)"
66-
>
67-
<p>General</p>
68-
</a>
69-
70-
<a
71-
href="#ai"
72-
class="icon icon"
73-
on:click={handleIconClick}
74-
style="background-color: var(--acm-emerald)"
75-
>
76-
<p>AI</p>
77-
</a>
78-
79-
<a
80-
href="#algo"
81-
class="icon icon"
82-
on:click={handleIconClick}
83-
style="background-color: var(--acm-purple)"
84-
>
85-
<p>Algo</p>
86-
</a>
87-
88-
<a
89-
href="#design"
90-
class="icon icon"
91-
on:click={handleIconClick}
92-
style="background-color: var(--acm-pink)"
93-
>
94-
<p>Design</p>
95-
</a>
96-
97-
<a
98-
href="#dev"
99-
class="icon"
100-
on:click={handleIconClick}
101-
style="background-color: var(--acm-bluer)"
102-
>
103-
<p>Dev</p>
104-
</a>
105-
106-
<a
107-
href="#gamedev"
108-
class="icon"
109-
on:click={handleIconClick}
110-
style="background-color: var(--acm-red)"
111-
>
112-
<p>Game Dev</p>
113-
</a>
114-
115-
<a
116-
href="#icpc"
117-
class="icon"
118-
on:click={handleIconClick}
119-
style="background-color: var(--acm-orange)"
120-
>
121-
<p>ICPC</p>
122-
</a>
123-
124-
<a
125-
href="#marketing"
126-
class="icon"
127-
on:click={handleIconClick}
128-
style="background-color: var(--acm-blush)"
129-
>
130-
<p>Marketing</p>
131-
</a>
132-
133-
<a
134-
href="#nodebuds"
135-
class="icon"
136-
on:click={handleIconClick}
137-
style="background-color: var(--acm-red)"
138-
>
139-
<p>Node Buds</p>
140-
</a>
141-
142-
<a
143-
href="#oss"
144-
class="icon"
145-
on:click={handleIconClick}
146-
style="background-color: var(--acm-turquoise)"
147-
>
148-
<p>Open Source</p>
149-
</a>
61+
<div class="icon">
62+
<a href="#general" class="general" on:click={handleIconClick}>
63+
<img src="/assets/general-logo.svg" alt="acm-logo" width="125px" height="125px" />
64+
</a>
65+
<p class="acm-heaviest">General</p>
66+
</div>
67+
<div class="icon">
68+
<a href="#ai" class="ai" on:click={handleIconClick}>
69+
<img src="/assets/ai-logo.svg" alt="ai-logo" width="125px" height="125px" />
70+
</a>
71+
<p class="acm-heaviest">AI</p>
72+
</div>
73+
<div class="icon">
74+
<a href="#algo" class="algo" on:click={handleIconClick}>
75+
<img src="/assets/algo-logo.svg" alt="algo-logo" width="125px" height="125p" />
76+
</a>
77+
<p class="acm-heaviest">Algo</p>
78+
</div>
79+
<div class="icon">
80+
<a href="#design" class="design" on:click={handleIconClick}>
81+
<img src="/assets/design-logo.svg" alt="design-logo" width="125px" height="125px" />
82+
</a>
83+
<p class="acm-heaviest">Design</p>
84+
</div>
85+
<div class="icon">
86+
<a href="#dev" class="dev" on:click={handleIconClick}>
87+
<img src="/assets/dev-logo.svg" alt="dev-logo" width="125px" height="125px" />
88+
</a>
89+
<p class="acm-heaviest">Dev</p>
90+
</div>
91+
<div class="icon">
92+
<a href="#gamedev" class="gamedev" on:click={handleIconClick}>
93+
<img src="/assets/gamedev-logo.svg" alt="gamedev-logo" width="125px" height="125px" />
94+
</a>
95+
<p class="acm-heaviest">Game Dev</p>
96+
</div>
97+
<div class="icon">
98+
<a href="#icpc" class="icpc" on:click={handleIconClick}>
99+
<img src="/assets/icpc-logo.svg" alt="icpc-logo" width="125px" height="125px" />
100+
</a>
101+
<p class="acm-heaviest">ICPC</p>
102+
</div>
103+
<div class="icon">
104+
<a href="#marketing" class="marketing" on:click={handleIconClick}>
105+
<img src="/assets/marketing-logo.svg" alt="marketing-logo" width="100px" height="100px" />
106+
</a>
107+
<p class="acm-heaviest">Marketing</p>
108+
</div>
109+
<div class="icon">
110+
<a href="#nodebuds" class="nodebuds" on:click={handleIconClick}>
111+
<img src="/assets/nodebuds-logo-old.svg" alt="nodebuds-logo" width="100px" height="100px" />
112+
</a>
113+
<p class="acm-heaviest">Node Buds</p>
114+
</div>
115+
<div class="icon">
116+
<a href="#oss" class="oss" on:click={handleIconClick}>
117+
<img src="/assets/oss-logo.svg" alt="oss-logo" width="100px" height="100px" />
118+
</a>
119+
<p class="acm-heaviest">Open Source</p>
120+
</div>
150121
</div>
151122
<Spacing --min="100px" --med="125px" --max="125px" />
152123
</section>
@@ -255,6 +226,10 @@
255226
<Spacing --min="100px" --med="125px" --max="125px" />
256227

257228
<style>
229+
p {
230+
align-self: start;
231+
}
232+
258233
section {
259234
display: grid;
260235
}
@@ -285,37 +260,87 @@
285260
286261
section .team-icons-inner-container {
287262
display: grid;
288-
grid-template-columns: repeat(2, 120px);
289-
column-gap: 45px;
290-
row-gap: 20px;
263+
grid-template-columns: repeat(auto-fit, minmax(125px, 1fr));
264+
column-gap: 50px;
265+
row-gap: 30px;
291266
justify-content: center;
292-
justify-items: center;
267+
padding: 10px;
293268
}
294269
295-
.icon {
296-
width: 120px;
297-
height: 20px;
298-
border-radius: 10px;
270+
section .team-icons-inner-container .icon {
271+
display: grid;
272+
align-items: center;
273+
text-align: center;
299274
padding: 10px;
275+
}
276+
277+
section .team-icons-inner-container .icon a {
300278
display: flex;
301-
align-items: center;
302279
justify-content: center;
303-
text-decoration: none;
280+
align-items: center;
304281
}
305-
.icon p {
306-
color: white;
307-
margin: 0;
282+
283+
section .team-icons-inner-container .general :hover {
284+
cursor: pointer;
285+
transform: scale(1.07);
286+
filter: brightness(97%);
308287
}
309288
310-
@media screen and (min-width: 768px) and (max-width: 999px) {
311-
section .team-icons-inner-container {
312-
grid-template-columns: repeat(4, 120px);
289+
section .team-icons-inner-container a :hover {
290+
cursor: pointer;
291+
transform: scale(1.07);
292+
filter: brightness(95%);
293+
}
294+
295+
section .team-icons-inner-container .general :active {
296+
filter: brightness(92%);
297+
}
298+
299+
section .team-icons-inner-container a :active {
300+
filter: brightness(90%);
301+
}
302+
303+
@media (prefers-color-scheme: dark) {
304+
[data-theme='dark'] section .team-icons-inner-container .ai :hover {
305+
cursor: pointer;
306+
transform: scale(1.07);
307+
filter: brightness(105%);
308+
}
309+
310+
[data-theme='dark'] section .team-icons-inner-container a :hover {
311+
cursor: pointer;
312+
transform: scale(1.07);
313+
filter: brightness(110%);
314+
}
315+
316+
[data-theme='dark'] section .team-icons-inner-container .icon .ai :active {
317+
filter: brightness(110%);
318+
}
319+
320+
[data-theme='dark'] section .team-icons-inner-container .icon a :active {
321+
filter: brightness(120%);
313322
}
314323
}
315324
325+
section .team-icons-inner-container .icon a img {
326+
width: 100%;
327+
height: auto;
328+
}
329+
330+
section .team-icons-inner-container .icon p {
331+
width: auto;
332+
height: 50px;
333+
display: flex;
334+
justify-content: center;
335+
align-items: center;
336+
text-align: center;
337+
}
338+
316339
@media screen and (min-width: 1000px) {
317340
section {
341+
display: grid;
318342
place-items: center;
343+
align-items: center;
319344
max-width: 1280px;
320345
margin: 0 auto;
321346
}
@@ -337,19 +362,7 @@
337362
}
338363
339364
section .team-icons-inner-container {
340-
grid-template-columns: repeat(5, 140px);
341-
column-gap: 40px;
342-
}
343-
344-
section .team-icons-inner-container a:hover {
345-
cursor: pointer;
346-
transform: scale(1.07);
347-
filter: brightness(95%);
348-
}
349-
350-
.icon {
351-
width: 140px;
352-
height: 15px;
365+
grid-template-columns: repeat(5, minmax(125px, 1fr));
353366
}
354367
}
355368

0 commit comments

Comments
 (0)