Resolved annoying 'css-unused-selector' warning messages

package.json

@@ -23,9 +23,7 @@
     "all": "npm run lint && npm run check && npm run build && npm run preview"
   },
   "dependencies": {
-    "gfm.css": "^1.1.2",
     "html-to-text": "^8.1.0",
-    "rfs": "^9.0.6",
     "rrule": "^2.6.8",
     "rss": "^1.2.2"
   },

src/lib/components/about/officer-profile-list.svelte

@@ -58,8 +58,6 @@
 </section>
 
 <style lang="scss">
-  @import 'static/theme.scss';
-
   section {
     display: flex;
     flex-direction: column;

src/lib/components/about/officer-profile.svelte

@@ -36,8 +36,6 @@
 </div>
 
 <style lang="scss">
-  @import 'static/theme.scss';
-
   .officer-container {
     display: flex;
     flex-direction: column;

src/lib/components/events/event-item.svelte

@@ -63,7 +63,7 @@
       </p>
 
       <a
-        class="event-join size-s"
+        class="event-join size-sm"
         href={info.meetingLink}
         role="button"
         target="_blank"
@@ -133,8 +133,6 @@
 </div>
 
 <style lang="scss">
-  @import 'static/theme.scss';
-
   .event-box {
     position: relative;
   }

src/lib/components/index/acm-paths.svelte

@@ -4,7 +4,7 @@
 
 <section>
   <div class="paths-intro">
-    <h2 class="headers size-l">Find the path you want to take</h2>
+    <h2 class="headers size-lg">Find the path you want to take</h2>
     <p class="size-xs">
       Our programs were designed to allow students to explore the various fields within tech and
       discover what aligns with their interests the most. By joining any of them, students will be
@@ -17,7 +17,7 @@
     {#each pinnedPaths as { title, slug, picture, color } (slug)}
       <a class="path-item" target="_self" href={`/paths#${slug}`}>
         <img src={picture} alt={`${slug}-logo`} />
-        <p class="size-m headers">
+        <p class="size-md headers">
           acm<span class="brand-em" style={`--brand-color: ${color}`}>
             {title}
           </span>
@@ -28,8 +28,6 @@
 </section>
 
 <style lang="scss">
-  @import 'static/theme.scss';
-
   section {
     display: flex;
     flex-direction: column;

src/lib/components/index/hero.svelte

@@ -20,8 +20,6 @@
 </section>
 
 <style lang="scss">
-  @import 'static/theme.scss';
-
   section {
     display: flex;
     justify-content: center;

src/lib/components/index/ready-up.svelte

@@ -5,7 +5,7 @@
 
 <section>
   <div class="main-text">
-    <h2 class="headers size-l">Ready to get started?</h2>
+    <h2 class="headers size-lg">Ready to get started?</h2>
     <p class="size-xs">
       If you want to improve your skills, want to learn how to break into the industry, or just got
       a passion for technology, then we are the perfect organization for you!
@@ -21,8 +21,6 @@
 </section>
 
 <style lang="scss">
-  @import 'static/theme.scss';
-
   section {
     display: flex;
     flex-direction: column;

src/lib/components/index/why-join.svelte

@@ -3,7 +3,7 @@
     <img src="assets/png/why-join-illustration.png" alt="Social event with acmCSUF club members." />
 
     <div class="right-content">
-      <h2 class="headers size-l">Your journey into tech starts here</h2>
+      <h2 class="size-lg headers g">Your journey into tech starts here</h2>
       <p class="size-xs">
         We aim to build a foundation for future industry leaders by developing their technical and
         professional skills. We facilitate these by offering free workshops, social events, guest
@@ -15,8 +15,6 @@
 </section>
 
 <style lang="scss">
-  @import 'static/theme.scss';
-
   section {
     display: flex;
     justify-content: center;

src/lib/components/nodebuds/nodebuds-testimonial.svelte

@@ -1,7 +1,7 @@
 <section>
   <div class="info-container">
-    <h2 class="headers size-l">Testimonials</h2>
-    <span class="size-s">
+    <h2 class="headers size-lg">Testimonials</h2>
+    <span class="size-sm">
       <slot name="content1" tag="p" />
       <slot name="content2" tag="p" />
       <slot name="content3" tag="p" />
@@ -10,8 +10,6 @@
 </section>
 
 <style lang="scss">
-  @import 'static/theme.scss';
-
   section {
     display: flex;
     justify-content: center;

src/lib/components/paths/path-section.svelte

@@ -12,7 +12,7 @@
       <img src={info.picture} alt={`acm${info.title} Logo`} />
       <div>
         <h2>
-          <span class="headers size-l">
+          <span class="headers size-lg">
             acm<span style={`--font-color: ${info.color}`}>
               <span class="brand-em">{info.title}</span>
             </span>
@@ -25,8 +25,6 @@
 </div>
 
 <style lang="scss">
-  @import 'static/theme.scss';
-
   .container {
     display: flex;
     justify-content: center;

src/lib/components/sections/call-to-action-section.svelte

@@ -12,8 +12,6 @@
 </section>
 
 <style lang="scss">
-  @import 'static/theme.scss';
-
   section {
     display: flex;
     flex-direction: column;
@@ -23,12 +21,10 @@
   }
 
   section .main-text {
-    @include font-size(36px);
     max-width: 950px;
   }
 
   section :global(p) {
-    @include font-size(18px);
     margin-top: 16px;
   }
 </style>

src/lib/components/sections/common-hero.svelte

@@ -6,8 +6,6 @@
 </section>
 
 <style lang="scss">
-  @import 'static/theme.scss';
-
   section {
     display: flex;
     justify-content: center;

src/lib/components/sections/footer.svelte

@@ -95,8 +95,6 @@
 </footer>
 
 <style lang="scss">
-  @import 'static/theme.scss';
-
   footer {
     display: flex;
     justify-content: center;

src/lib/components/utils/acm-button.svelte

@@ -11,7 +11,6 @@
   rel="noopener norefferer">{text}</a>
 
 <style lang="scss">
-  @import 'static/theme.scss';
   .call-to-action {
     display: block;
     text-align: center;

src/lib/components/utils/acm-empty.svelte

@@ -10,7 +10,7 @@
   }
 
   section :global(p) {
-    font-size: var(--subheading-font-size);
+    font-size: var(--size-lg);
     margin: 20px;
   }
 </style>

src/lib/components/utils/admonition.svelte

@@ -20,8 +20,6 @@
 {/if}
 
 <style lang="scss">
-  @import 'static/theme.scss';
-
   .wrapper {
     display: flex;
     align-items: center;

src/routes/about.svelte

@@ -20,7 +20,7 @@
 <Spacing --min="32px" --max="64px" />
 
 <CommonHero>
-  <h2 slot="headline" class="size-l">Who are we?</h2>
+  <h2 slot="headline" class="size-lg">Who are we?</h2>
   <p slot="text" class="size-xs">
     acmCSUF is a student chapter of the
     <a href="https://acm.org" class="brand-med" target="_blank" rel="noopener noreferrer">
@@ -35,7 +35,7 @@
 <Spacing --min="120px" --med="150px" --max="200px" />
 
 <div class="container">
-  <h2 class="headers size-l">Board members</h2>
+  <h2 class="headers size-lg">Board members</h2>
 </div>
 
 <Spacing --min="16px" --med="16px" --max="16px" />
@@ -45,8 +45,6 @@
 <Spacing --min="40px" --med="95px" --max="120px" />
 
 <style lang="scss">
-  @import 'static/theme.scss';
-
   a {
     text-decoration: none;
     transition: 0.25s ease-in-out;

src/routes/blog/[id].svelte

@@ -24,13 +24,12 @@
 
 <svelte:head>
   <title>{post.title}</title>
-  <link rel="stylesheet" href="../global.css" />
 </svelte:head>
 
 <Spacing --min="175px" --med="200px" --max="200px" />
 
 <section>
-  <h1 class="headers size-l">{post.title}</h1>
+  <h1 class="headers size-lg">{post.title}</h1>
 
   <Spacing --min="16px" --med="16px" --max="16px" />
 
@@ -63,8 +62,6 @@
 </section>
 
 <style lang="scss">
-  @import '../node_modules/gfm.css/source/gfm.scss';
-
   section {
     display: flex;
     flex-direction: column;

src/routes/blog/index.svelte

@@ -1,8 +1,6 @@
 <script lang="ts" context="module">
   import type { LoadOutput, LoadInput } from '@sveltejs/kit';
-  /**
-   * @type {import('@sveltejs/kit').Load}
-   */
+
   export async function load({ fetch }: LoadInput): Promise<LoadOutput> {
     const response = await fetch(`/blog.json`);
     return { props: { posts: await response.json() } };
@@ -18,7 +16,6 @@
 
 <svelte:head>
   <title>acmCSUF / README</title>
-  <link rel="stylesheet" href="../global.css" />
 </svelte:head>
 
 <Spacing --min="175px" --med="200px" --max="200px" />
@@ -51,8 +48,6 @@
 <Spacing --min="40px" --med="95px" --max="120px" />
 
 <style lang="scss">
-  @import 'static/theme.scss';
-
   .subtitle {
     a {
       display: inline-block;