Repository: IllinoisWCS/IllinoisWCS.github.io
Pull request #397: Update Font Styles
Author: login: BeckyBlake
Created: 2025-04-09T19:24:44Z | Merged: 2025-04-14T04:46:51Z

## Status:

<!--
:rocket: Ready
:construction: In development
:no_entry_sign: Do not merge
-->
:rocket: Ready

## Description

<!--
A few sentences describing the overall goals of the pull request's commits. If applicable, link the PR to the corresponding issue below by filling out the number.
-->

<!-- Addresses #<number> -->

- added import statement for nunito and zilla slab

## Screenshots

<!--
Mac OS Screenshots: ctrl + shift + cmd + 3 (entire screen) or 4 (selection of screen), then paste in editor
Mac OS GIFs: Try using Kap
Linux/Windows: Ctrl + Alt + PrintScreen (of a window) or Ctrl + Shift + PrintScreen (selection of screen), then paste in editor
-->
<img width="1457" alt="Screenshot 2025-04-09 at 2 19 35 PM" src="https://github.com/user-attachments/assets/743146ae-c095-4ddc-8a7e-223263c79fa0" />




Diff:
diff --git a/src/pages/_document.js b/src/pages/_document.js
index 94865597..ae46f0d6 100644
--- a/src/pages/_document.js
+++ b/src/pages/_document.js
@@ -17,11 +17,7 @@ export default function Document() {
           rel="stylesheet"
         />
         <link
-          href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap"
-          rel="stylesheet"
-        />
-        <link
-          href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
+          href="https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&family=Zilla+Slab:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap"
           rel="stylesheet"
         />
       </Head>
diff --git a/src/pages/resources.js b/src/pages/resources.js
index 663a262d..d80bd4e1 100644
--- a/src/pages/resources.js
+++ b/src/pages/resources.js
@@ -9,7 +9,7 @@ export default function Resources() {
   return (
     <main className={`${styles.main}`}>
       <ComputerWindow className={resourcesStyles.window} showButtons={false}>
-        <h2>Resources</h2>
+        <h1>Resources</h1>
       </ComputerWindow>
 
       <div className={`${resourcesStyles.descriptionContainer}`}>
diff --git a/src/pages/team.js b/src/pages/team.js
index ade39b56..9b25b5b8 100644
--- a/src/pages/team.js
+++ b/src/pages/team.js
@@ -70,7 +70,7 @@ export default function Team() {
   return (
     <div className={styles.main}>
       <ComputerWindow className={styles.title} showButtons={false}>
-        <h2>Our Team</h2>
+        <h1>Our Team</h1>
       </ComputerWindow>
       <Image
         className={styles.teamPic}
@@ -80,7 +80,7 @@ export default function Team() {
         alt="team"
       />
       <ComputerWindow className={styles.subHeader} showTopbar={false}>
-        <h3>Executive Board</h3>
+        <h2>Executive Board</h2>
       </ComputerWindow>
 
       <div className={styles.cards}>
@@ -108,7 +108,7 @@ export default function Team() {
       </div>
 
       <ComputerWindow className={styles.subHeader} showTopbar={false}>
-        <h3 id="committeeHeader">Committees</h3>
+        <h2 id="committeeHeader">Committees</h2>
       </ComputerWindow>
 
       {committeeData.map(
diff --git a/src/sections/AboutUsSection.js b/src/sections/AboutUsSection.js
index 2deee2d8..e2adfe83 100644
--- a/src/sections/AboutUsSection.js
+++ b/src/sections/AboutUsSection.js
@@ -60,16 +60,18 @@ export default function AboutUsSection() {
             showButtons={false}
           >
             <div className={styles.diversityStatement}>
-              Women in Computer Science at UIUC is committed to promoting
-              diversity, equity, and inclusion in the community. Read more about
-              our stance and mission{' '}
-              <a
-                href="/assets/WCS-Diversity-Statement.pdf"
-                className={styles.diversityLink}
-              >
-                here
-              </a>
-              .
+              <p>
+                Women in Computer Science at UIUC is committed to promoting
+                diversity, equity, and inclusion in the community. Read more
+                about our stance and mission{' '}
+                <a
+                  href="/assets/WCS-Diversity-Statement.pdf"
+                  className={styles.diversityLink}
+                >
+                  here
+                </a>
+                .
+              </p>
             </div>
           </ComputerWindow>
         </div>
diff --git a/src/sections/UpcomingEventsSection.js b/src/sections/UpcomingEventsSection.js
index 6bc3e5f4..fd48dd57 100644
--- a/src/sections/UpcomingEventsSection.js
+++ b/src/sections/UpcomingEventsSection.js
@@ -262,7 +262,7 @@ export default function UpcomingEventsSection() {
             window.location.href = '/past-events';
           }}
         >
-          <h2 className={styles.pastEventsButtonText}>View our Past Events</h2>
+          <h3 className={styles.pastEventsButtonText}>View our Past Events</h3>
         </StyledButton>
       </div>
     </div>
diff --git a/src/styles/globals.css b/src/styles/globals.css
index b9e578f3..a881eb30 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -1,6 +1,5 @@
 @import '~bootstrap/dist/css/bootstrap.min.css';
-@import url('https://fonts.googleapis.com/css?family=Roboto Mono');
-@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&family=Zilla+Slab:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap');
 
 :root {
   --max-width: 1100px;
@@ -52,40 +51,39 @@ a {
 }
 
 h1 {
-  font-family: 'Roboto Mono';
-  font-weight: normal;
+  font-family: 'Zilla Slab', serif;
+  font-weight: bold;
   font-size: 48px;
   color: black;
 }
 
 h2 {
-  font-family: 'Roboto Mono';
-  font-weight: normal;
+  font-family: 'Zilla Slab', serif;
+  font-weight: bold;
   font-size: 32px;
   color: black;
 }
 
 h3 {
-  font-family: 'Roboto Mono';
+  font-family: 'Zilla Slab', serif;
   color: black;
   font-size: 30px;
-  font-weight: normal;
 }
 
 h4 {
-  font-family: 'Roboto Mono';
+  font-family: 'Zilla Slab', serif;
   font-size: 25px;
   color: black;
 }
 
 h5 {
-  font-family: 'Roboto';
+  font-family: 'Zilla Slab', serif;
   font-size: 16px;
   color: black;
 }
 
 p {
-  font-family: 'Roboto';
+  font-family: 'Nunito', sans-serif;
   font-weight: normal;
   font-size: 20px;
   margin-bottom: 0;
@@ -97,7 +95,7 @@ ul {
 }
 
 li {
-  font-family: 'Roboto';
+  font-family: 'Nunito', sans-serif;
   font-weight: normal;
   font-size: 16px;
   color: black;
diff --git a/src/styles/pages/404.module.css b/src/styles/pages/404.module.css
index 64c8610a..cd103f15 100644
--- a/src/styles/pages/404.module.css
+++ b/src/styles/pages/404.module.css
@@ -13,5 +13,4 @@
 .text {
   font-weight: normal;
   margin-top: -6vh;
-  font-family: 'Roboto Mono';
 }
diff --git a/src/styles/pages/Resources.module.css b/src/styles/pages/Resources.module.css
index bc1a2e21..6df938ae 100644
--- a/src/styles/pages/Resources.module.css
+++ b/src/styles/pages/Resources.module.css
@@ -1,12 +1,12 @@
-.window h2 {
+.window h1 {
   margin: 1rem;
   text-align: center;
 }
 
 .window {
   text-align: center;
-  margin: 2rem auto 0;
-  width: 90%;
+  margin: 1rem auto 0;
+  width: 100%;
 }
 
 .descriptionContainer {
diff --git a/src/styles/pages/Team.module.css b/src/styles/pages/Team.module.css
index 0d7da296..ac44701f 100644
--- a/src/styles/pages/Team.module.css
+++ b/src/styles/pages/Team.module.css
@@ -6,16 +6,15 @@
   position: relative;
 }
 
-.title h2 {
+.title h1 {
   margin: 1rem;
-  font-size: 42px;
   text-align: center;
 }
 
 .main .title {
   text-align: center;
-  margin: 2rem auto;
-  width: 90%;
+  margin: 4rem auto 0;
+  width: 87%;
 }
 
 .teamPic {
@@ -30,10 +29,8 @@
   align-items: center;
 }
 
-.subHeader h3 {
+.subHeader h2 {
   margin: 1rem;
-  font-weight: 300;
-  font-size: 32px;
 }
 
 .main .subHeader {
diff --git a/src/styles/sections/AboutUsSection.module.css b/src/styles/sections/AboutUsSection.module.css
index 2af004c6..a14eb9d6 100644
--- a/src/styles/sections/AboutUsSection.module.css
+++ b/src/styles/sections/AboutUsSection.module.css
@@ -35,6 +35,10 @@
   padding: 1rem;
 }
 
+.windowContent h1 {
+  margin: 0;
+}
+
 .computerWindowContainer {
   align-self: center;
   padding: 0rem;


Reviews:
user: login: inolasv
body: the changes look pretty good, i think theres a couple places where the font should be smth Else:

This should probably be h2
<img width="452" alt="image" src="https://github.com/user-attachments/assets/c30d9762-bfbc-4755-9c64-1e5a306c7b47" />

This should be an h3
<img width="452" alt="image" src="https://github.com/user-attachments/assets/6a7745bf-dfcb-4cff-80f4-4afe3494a2ce" />


This is what i found, but if you see anything else that looks off feel free to change + add a note
state: CHANGES_REQUESTED
author_association: COLLABORATOR
submitted_at: 2025-04-13T14:20:51Z
user: login: inolasv
state: APPROVED
author_association: COLLABORATOR
submitted_at: 2025-04-14T02:27:29Z

Review comments:
diff_hunk: @@ -24,6 +24,10 @@ export default function Document() {
           href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
path: src/pages/_document.js
user: login: inolasv
body: we can probably also get rid of the old fonts.
created_at: 2025-04-13T14:20:14Z
author_association: COLLABORATOR
diff_hunk: @@ -1,6 +1,7 @@
 @import '~bootstrap/dist/css/bootstrap.min.css';
 @import url('https://fonts.googleapis.com/css?family=Roboto Mono');
 @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
path: src/styles/globals.css
user: login: inolasv
body: and get rid of these old fonts here too.
created_at: 2025-04-13T14:20:26Z
author_association: COLLABORATOR

PR comments:
user: login: notion-workspace[bot]
created_at: 2025-04-09T19:25:26Z
body: <a href="https://www.notion.so/change-font-styles-based-on-Wcs-branding-1c6e552db9f280419497f1c229d7d937?pvs=8&n=github_linkback">change font styles based on Wcs branding</a>
author_association: NONE
user: login: inolasv
created_at: 2025-04-13T18:23:06Z
body: one more thing I just saw, the resources title should probably be an h1 too (to match how our team is)


author_association: COLLABORATOR
user: login: BeckyBlake
created_at: 2025-04-13T18:28:40Z
body: > one more thing I just saw, the resources title should probably be an h1 too (to match how our team is)

I changed resources header to h1, but the our team header is h2? do you want me to change that one too?
author_association: CONTRIBUTOR
user: login: BeckyBlake
created_at: 2025-04-13T18:31:00Z
body: Also a small thing i noticed but is unrelated to the font stuff is the margins between the navbar and the main page header, our team header, and the resources header are all different. should i make them all the same?
author_association: CONTRIBUTOR