Skip to content

Commit 405e550

Browse files
NoahTheNerdNoahTheNerd
committed
properly implement a credits page
1 parent 8e89bd6 commit 405e550

File tree

5 files changed

+144
-40
lines changed

5 files changed

+144
-40
lines changed

‎credits/credits-disclaimer.txt‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎credits/credits.css‎

Lines changed: 84 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,91 @@
1-
/*
1+
/*
22
for the disclaimer text at the top
33
*/
44
.centered{
5-
text-align: center;
5+
font-weight: lighter;
6+
font-size: clamp(12px, 1.25vw, 36px);
7+
font-family: Futura, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
8+
text-align: center;
9+
margin-top: 2.5%;
10+
margin-left: 5%;
11+
margin-right: 5%;
612
}
713

8-
/*
9-
for the div of contributors
10-
just shifts to the right a little?
11-
*/
12-
.shifted_right {
13-
padding-left: 1%;
14+
.contributors{
15+
font-weight: bolder;
16+
font-size: 5vw;
17+
font-family: Futura, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
18+
text-align: center;
19+
margin-top: -5%;
1420
}
1521

16-
/*
17-
spacing to have the footer be normal and not at the top of the screen
18-
*/
19-
.spacer{
20-
padding-bottom: 5%;
21-
}
22+
#contributor-grid{
23+
display: flex;
24+
flex-wrap: wrap;
25+
justify-content: center;
26+
gap: 4vw;
27+
margin-top: -2.5%;
28+
margin-bottom: 5%;
29+
}
30+
31+
.contributor-cell{
32+
display: flex;
33+
flex-direction: column;
34+
align-items: center;
35+
color: white;
36+
text-decoration: none;
37+
background-color: #242323;
38+
padding: clamp(15px, 4vw, 50px) clamp(15px, 4vw, 50px) clamp(5px, 1vw, 10px);
39+
border-radius: clamp(10px, 2.5vw, 50px)
40+
}
41+
42+
.contributor-initials {
43+
margin-top: 1vw;
44+
margin-bottom: 0.5vw;
45+
font-size: clamp(12px, 5vw, 64px);
46+
}
47+
48+
.contributor-grad-year {
49+
color: #aaaaaa;
50+
font-size: clamp(10px, 2vw, 16px);
51+
}
52+
53+
.contributor-cell img{
54+
border-radius: 50%;
55+
width: 8vw;
56+
height: 8vw;
57+
border: 0.3vw solid white;
58+
}
59+
60+
.contributor-pfp-fallback { /* added this because GitHub PFP API kept rate-limiting me and not loading images */
61+
width: 8vw;
62+
height: 8vw;
63+
border-radius: 50%;
64+
background-color: #f57029;
65+
border: 0.3vw solid white;
66+
}
67+
68+
/* mobile scaling stuff */
69+
@media (max-width: 850px) {
70+
.contributor-cell img, .contributor-pfp-fallback {
71+
width: 30vw;
72+
height: 30vw;
73+
border: 0.75vw solid white;
74+
}
75+
.contributor-initials {
76+
font-size: clamp(16px, 12vw, 64px);
77+
}
78+
.contributor-grad-year {
79+
font-size: clamp(12px, 4vw, 24px);
80+
}
81+
.contributor-cell {
82+
border-radius: clamp(15px, 6vw, 50px);
83+
}
84+
}
85+
86+
/*!**/
87+
/*spacing to have the footer be normal and not at the top of the screen*/
88+
/**!*/
89+
/*.spacer{*/
90+
/* padding-bottom: 5%;*/
91+
/*}*/

‎credits/credits.js‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
const contributors = [
2+
{ username: "willgames-afk", initials: "wk", gradYear: 2026 },
3+
{ username: "i1aw", initials: "cw", gradYear: 2027},
4+
{ username: "SketchedDoughnut", initials: "ap", gradYear: 2027},
5+
{ username: "BubbleShade", initials: "ok", gradYear: 2026},
6+
{ username: "NoahTheNerd", initials: "ng", gradYear: 2027},
7+
]
8+
9+
async function loadContributors() {
10+
const grid = $("#contributor-grid")
11+
12+
for (const contributor of contributors) {
13+
const response = await fetch(`https://api.github.com/users/${contributor.username}`)
14+
const data = await response.json()
15+
16+
const cell = $(`
17+
<a href="https://github.com/${contributor.username}" target="_blank" class="contributor-cell">
18+
<img src="${data.avatar_url}" alt="${contributor.initials}">
19+
<p class="contributor-initials">${contributor.initials}</p>
20+
<p class="contributor-grad-year">Class of ${contributor.gradYear}</p>
21+
</a>
22+
`)
23+
24+
grid.append(cell)
25+
cell.find('img').on('error', function() {
26+
$(this).replaceWith(`<div class="contributor-pfp-fallback"></div>`)
27+
})
28+
}
29+
}
30+
31+
window.addEventListener('load', loadContributors)

‎credits/index.html‎

Lines changed: 20 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,6 @@
11
<!DOCTYPE html>
22
<html lang="en">
33

4-
<!--
5-
Disable the credits page for now, without deleting / removing it
6-
-->
7-
<script>
8-
window.location.href = "/maintenance"
9-
</script>
10-
11-
124
<!--
135
things that link to different files
146
such as CSS or Javascript
@@ -25,6 +17,7 @@
2517
<link rel="stylesheet" href="/shared/css/fonts.css">
2618
<link rel="stylesheet" href="/shared/css/style.css">
2719
<link rel="stylesheet" href="/credits/credits.css">
20+
<script src="/credits/credits.js"></script>
2821
<title>Beavertronics</title>
2922
</head>
3023

@@ -48,27 +41,30 @@
4841
a disclaimer regarding how credit and whatnot is distributed
4942
-->
5043
<h2 class="centered">
51-
NOTE: This page is not meant to discredit people for their work. It is to track who worked on what in order to make it easier to discuss those changes, and also give people credit where credit is due.
52-
Read more <a target="_blank" href="/credits/credits-disclaimer.txt">here</a>.
44+
NOTE: A "Contributor" includes anyone who has contributed to the GitHub, and is marked as a contributor on the repository. There is no minimum for how much one has to contribute to be marked as a contributor.
5345
</h2>
5446

5547
<!-- information regarding all contributors -->
56-
<div class="centered">
48+
<div class="contributors">
5749
<h3>CONTRIBUTORS</h3>
58-
<div>
59-
wk - <a href="https://github.com/willgames-afk" target="_blank">Github</a>
60-
</div>
61-
<div>
62-
cw - <a href="https://github.com/i1aw" target="_blank">Github</a>
63-
</div>
64-
<div>
65-
ap - <a href="https://github.com/SketchedDoughnut" target="_blank">Github</a>
66-
</div>
67-
<div>
68-
ok - <a href="https://github.com/BubbleShade" target="_blank">Github</a>
69-
</div>
70-
<p id="spacer"></p>
50+
<div id="contributor-grid"></div>
51+
<!-- <div>-->
52+
<!-- wk - <a href="https://github.com/willgames-afk" target="_blank">Github</a>-->
53+
<!-- </div>-->
54+
<!-- <div>-->
55+
<!-- cw - <a href="https://github.com/i1aw" target="_blank">Github</a>-->
56+
<!-- </div>-->
57+
<!-- <div>-->
58+
<!-- ap - <a href="https://github.com/SketchedDoughnut" target="_blank">Github</a>-->
59+
<!-- </div>-->
60+
<!-- <div>-->
61+
<!-- ok - <a href="https://github.com/BubbleShade" target="_blank">Github</a>-->
62+
<!-- </div>-->
63+
<!-- <p id="spacer"></p>-->
7164
</div>
65+
<h2 class="centered">
66+
meow :3
67+
</h2>
7268
</body>
7369

7470
<!--

‎shared/css/style.css‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -242,7 +242,7 @@ h1{
242242
justify-content: space-evenly;
243243
align-items: center;
244244
font-family: Futura-lt;
245-
font-weight: light;
245+
font-weight: lighter;
246246
color: white;
247247
}
248248

@@ -518,3 +518,11 @@ html, body {
518518
margin: 0 auto;
519519
padding-bottom: 2.5%;
520520
}
521+
522+
/*
523+
if page is too short or you scroll past end of the page (some browsers do that before "bouncing" you back up),
524+
then you just see the color of the footer instead of white
525+
*/
526+
html {
527+
background-color: rgb(49, 49, 49);
528+
}

0 commit comments

Comments
 (0)