From 6a0c4623093eef0cac884036d7a8453455a319cb Mon Sep 17 00:00:00 2001
From: Jon Andre Briones <jonbrsoftware@gmail.com>
Date: Tue, 19 Aug 2025 09:56:55 -0700
Subject: [PATCH 1/6] wip: add route and navbar entry

---
 src/app/app.routes.ts                         |  6 +++++
 src/app/components/nav-bar/nav-entries.ts     |  7 ++++++
 .../event-archives.component.html             |  0
 .../event-archives.component.scss             |  0
 .../event-archives.component.spec.ts          | 23 +++++++++++++++++++
 .../event-archives.component.ts               | 12 ++++++++++
 src/app/services/application/applications.ts  | 10 ++++++++
 7 files changed, 58 insertions(+)
 create mode 100644 src/app/pages/event-archives/event-archives.component.html
 create mode 100644 src/app/pages/event-archives/event-archives.component.scss
 create mode 100644 src/app/pages/event-archives/event-archives.component.spec.ts
 create mode 100644 src/app/pages/event-archives/event-archives.component.ts

diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts
index 85cc662d..e7850c64 100644
--- a/src/app/app.routes.ts
+++ b/src/app/app.routes.ts
@@ -47,6 +47,12 @@ export const routes: Routes = [
     loadComponent: () => import('./pages/events/events.component').then(m => m.EventsComponent),
     title: makeTitle('Events')
   },
+  {
+    path: 'event-archives',
+    loadComponent: () =>
+      import('pages/event-archives/event-archives.component').then(m => m.EventArchivesComponent),
+    title: makeTitle('Event Archives')
+  },
   // Elections
   {
     path: 'elections',
diff --git a/src/app/components/nav-bar/nav-entries.ts b/src/app/components/nav-bar/nav-entries.ts
index 14887d8b..a6549162 100644
--- a/src/app/components/nav-bar/nav-entries.ts
+++ b/src/app/components/nav-bar/nav-entries.ts
@@ -1,6 +1,7 @@
 import { CodeListItem } from '@csss-code/list/list-item/list-item.component';
 import { IconDefinition } from '@fortawesome/angular-fontawesome';
 import {
+  faBook,
   faChevronRight,
   faFile,
   faRoadBarrier,
@@ -89,6 +90,12 @@ export const NAVBAR_ENTRIES: NavItem[] = [
         label: 'Mountain Madness',
         icon: faUpRightFromSquare,
         href: 'https://new.sfucsss.org/mountain_madness/2024/index.html'
+      },
+      {
+        key: 'events.archives',
+        label: 'Archives',
+        icon: faBook,
+        route: '/event-archives'
       }
     ]
   },
diff --git a/src/app/pages/event-archives/event-archives.component.html b/src/app/pages/event-archives/event-archives.component.html
new file mode 100644
index 00000000..e69de29b
diff --git a/src/app/pages/event-archives/event-archives.component.scss b/src/app/pages/event-archives/event-archives.component.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/src/app/pages/event-archives/event-archives.component.spec.ts b/src/app/pages/event-archives/event-archives.component.spec.ts
new file mode 100644
index 00000000..aa5b9eee
--- /dev/null
+++ b/src/app/pages/event-archives/event-archives.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { EventArchivesComponent } from './event-archives.component';
+
+describe('EventsArchiveComponent', () => {
+  let component: EventArchivesComponent;
+  let fixture: ComponentFixture<EventArchivesComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [EventArchivesComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(EventArchivesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/pages/event-archives/event-archives.component.ts b/src/app/pages/event-archives/event-archives.component.ts
new file mode 100644
index 00000000..ead479fb
--- /dev/null
+++ b/src/app/pages/event-archives/event-archives.component.ts
@@ -0,0 +1,12 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+  selector: 'cs-event-archives',
+  imports: [],
+  templateUrl: './event-archives.component.html',
+  styleUrl: './event-archives.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class EventArchivesComponent {
+
+}
diff --git a/src/app/services/application/applications.ts b/src/app/services/application/applications.ts
index d3d18643..ece7f86f 100644
--- a/src/app/services/application/applications.ts
+++ b/src/app/services/application/applications.ts
@@ -101,6 +101,16 @@ export const routeApplicationMap: Map<number, AppInfo> = new Map([
     6,
     {
       id: 6,
+      label: 'Event Archives',
+      activityKey: '',
+      key: 'event-archives',
+      route: '/event-archives'
+    }
+  ],
+  [
+    7,
+    {
+      id: 7,
       label: 'Elections',
       activityKey: '',
       key: 'elections',

From 16a2f310cda74d7b5e175fc01db79599400d437e Mon Sep 17 00:00:00 2001
From: Jon Andre Briones <jonbrsoftware@gmail.com>
Date: Tue, 19 Aug 2025 12:03:11 -0700
Subject: [PATCH 2/6] feat: completed event archives

---
 .../event-archives.component.html             | 56 +++++++++++++++++++
 .../event-archives.component.scss             | 37 ++++++++++++
 .../event-archives.component.ts               | 16 +++++-
 .../event-archives/events-archive.data.ts     |  9 +++
 src/styles.scss                               |  2 +
 5 files changed, 119 insertions(+), 1 deletion(-)
 create mode 100644 src/app/pages/event-archives/events-archive.data.ts

diff --git a/src/app/pages/event-archives/event-archives.component.html b/src/app/pages/event-archives/event-archives.component.html
index e69de29b..5062f98c 100644
--- a/src/app/pages/event-archives/event-archives.component.html
+++ b/src/app/pages/event-archives/event-archives.component.html
@@ -0,0 +1,56 @@
+<code-article>
+  <hgroup>
+    <h1>Event Archives</h1>
+    <p>Here's a list of all the past pages the CSSS used to promote their events.</p>
+    <p>
+      <strong>
+        Note: The links and the functionality of some of these pages were slightly altered, but
+        please be cautious clicking links within these sites.
+      </strong>
+    </p>
+  </hgroup>
+  <section class="events">
+    <section class="event">
+      <section>
+        <h2>Frosh</h2>
+        <ul class="event__list">
+          @for (year of froshYears; track year) {
+            <li class="event__link">
+              <a [href]="makeHref('frosh', year)" target="_blank">{{ year }}</a>
+            </li>
+          }
+        </ul>
+      </section>
+      <section>
+        <h2>Tech Fair</h2>
+        <ul class="event__list">
+          @for (year of techFairYears; track year) {
+            <li class="event__link">
+              <a [href]="makeHref('tech-fair', year)" target="_blank">{{ year }}</a>
+            </li>
+          }
+        </ul>
+      </section>
+      <section>
+        <h2>Fall Hacks</h2>
+        <ul class="event__list">
+          @for (year of fallHacksYears; track year) {
+            <li class="event__link">
+              <a [href]="makeHref('fall-hacks', year)" target="_blank">{{ year }}</a>
+            </li>
+          }
+        </ul>
+      </section>
+      <section>
+        <h2>Mountain Madness</h2>
+        <ul class="event__list">
+          @for (year of mountainMadnessYears; track year) {
+            <li class="event__link">
+              <a [href]="makeHref('madness', year)" target="_blank">{{ year }}</a>
+            </li>
+          }
+        </ul>
+      </section>
+    </section>
+  </section>
+</code-article>
diff --git a/src/app/pages/event-archives/event-archives.component.scss b/src/app/pages/event-archives/event-archives.component.scss
index e69de29b..8991c04e 100644
--- a/src/app/pages/event-archives/event-archives.component.scss
+++ b/src/app/pages/event-archives/event-archives.component.scss
@@ -0,0 +1,37 @@
+@use 'globals';
+
+.events {
+  display: grid;
+  gap: 1rem;
+}
+
+.event__list {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr));
+  gap: 1rem;
+}
+
+.event__link {
+  text-align: center;
+  border: 1px black solid;
+  border-radius: 5px;
+  background-color: globals.$accent;
+
+  &:hover {
+    background-color: globals.$accent1;
+  }
+
+  > a {
+    display: block;
+    padding: 1rem;
+  }
+}
+@media (prefers-reduced-motion: no-preference) {
+  .event__link {
+    transition: background-color 0.5s ease;
+
+    &:active {
+      transform: scale(0.95);
+    }
+  }
+}
diff --git a/src/app/pages/event-archives/event-archives.component.ts b/src/app/pages/event-archives/event-archives.component.ts
index ead479fb..29a4de3c 100644
--- a/src/app/pages/event-archives/event-archives.component.ts
+++ b/src/app/pages/event-archives/event-archives.component.ts
@@ -1,12 +1,26 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ArticleComponent } from '@csss-code/article/article.component';
+import {
+  FALL_HACKS_YEARS,
+  FROSH_YEARS,
+  MOUNTAIN_MADNESS_YEARS,
+  TECH_FAIR_YEARS
+} from './events-archive.data';
 
 @Component({
   selector: 'cs-event-archives',
-  imports: [],
+  imports: [ArticleComponent],
   templateUrl: './event-archives.component.html',
   styleUrl: './event-archives.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class EventArchivesComponent {
+  froshYears = FROSH_YEARS;
+  fallHacksYears = FALL_HACKS_YEARS;
+  techFairYears = TECH_FAIR_YEARS;
+  mountainMadnessYears = MOUNTAIN_MADNESS_YEARS;
 
+  makeHref(event: string, year: number): string {
+    return `https://${event}.sfucsss.org/${year}`;
+  }
 }
diff --git a/src/app/pages/event-archives/events-archive.data.ts b/src/app/pages/event-archives/events-archive.data.ts
new file mode 100644
index 00000000..8baf5b0e
--- /dev/null
+++ b/src/app/pages/event-archives/events-archive.data.ts
@@ -0,0 +1,9 @@
+export const FROSH_YEARS = [
+  2024, 2023, 2022, 2021, 2020, 2019, 2018, 2017, 2016, 2015, 2014, 2013, 2012
+] as const;
+
+export const FALL_HACKS_YEARS = [2024, 2020] as const;
+
+export const TECH_FAIR_YEARS = [2024, 2023, 2022] as const;
+
+export const MOUNTAIN_MADNESS_YEARS = [2024, 2023, 2022, 2021, 2020, 2019] as const;
diff --git a/src/styles.scss b/src/styles.scss
index 30be1f67..296208ad 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -42,6 +42,8 @@ a.csss-link {
 
 article.content {
   line-height: 1.5;
+
+  hgroup,
   header {
     margin-top: 5svh;
   }

From 03ec5063027178dab0f7c6c60f84b58394d94d38 Mon Sep 17 00:00:00 2001
From: Jon Andre Briones <jonbrsoftware@gmail.com>
Date: Tue, 19 Aug 2025 14:39:41 -0700
Subject: [PATCH 3/6] wip: add fall hacks icon

---
 .../icons/logos/fall-hacks-code_black.svg     |  1 +
 .../icons/logos/fall-hacks-leaf_black.svg     |  1 +
 .../event-archives.component.html             |  2 +-
 .../event-archives.component.scss             |  5 ++++
 .../event-archives.component.ts               | 11 +++++----
 src/assets/icons/README.md                    | 16 +++++++++++++
 .../fall-hacks-icon.component.html            |  4 ++++
 .../fall-hacks-icon.component.scss            | 12 ++++++++++
 .../fall-hacks-icon.component.spec.ts         | 23 +++++++++++++++++++
 .../fall-hacks-icon.component.ts              | 15 ++++++++++++
 .../icons/fall-hacks-icon/fall-hacks.svg.ts   | 18 +++++++++++++++
 src/ui/csss-code/button/button.component.scss |  3 ---
 12 files changed, 102 insertions(+), 9 deletions(-)
 create mode 100644 public/static/icons/logos/fall-hacks-code_black.svg
 create mode 100644 public/static/icons/logos/fall-hacks-leaf_black.svg
 create mode 100644 src/assets/icons/README.md
 create mode 100644 src/assets/icons/fall-hacks-icon/fall-hacks-icon.component.html
 create mode 100644 src/assets/icons/fall-hacks-icon/fall-hacks-icon.component.scss
 create mode 100644 src/assets/icons/fall-hacks-icon/fall-hacks-icon.component.spec.ts
 create mode 100644 src/assets/icons/fall-hacks-icon/fall-hacks-icon.component.ts
 create mode 100644 src/assets/icons/fall-hacks-icon/fall-hacks.svg.ts

diff --git a/public/static/icons/logos/fall-hacks-code_black.svg b/public/static/icons/logos/fall-hacks-code_black.svg
new file mode 100644
index 00000000..bae28498
--- /dev/null
+++ b/public/static/icons/logos/fall-hacks-code_black.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" id="svg1" version="1.1" viewBox="0 0 512 512"><path id="text33" fill="#fff" stroke-width=".3" d="M201 395 93 347v-16l108-54v26l-75 35 75 31zm101-138-59 160h-30l59-160zm11 112 75-31-75-35v-26l109 54v16l-109 48z" aria-label="&lt;/&gt;" display="inline" font-size="223.8" font-weight="700" style="-inkscape-font-specification:&quot;sans-serif Bold&quot;"/></svg>
\ No newline at end of file
diff --git a/public/static/icons/logos/fall-hacks-leaf_black.svg b/public/static/icons/logos/fall-hacks-leaf_black.svg
new file mode 100644
index 00000000..b7e92e30
--- /dev/null
+++ b/public/static/icons/logos/fall-hacks-leaf_black.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" id="svg1" version="1.1" viewBox="0 0 512 512"><path id="path1" fill="#000" fill-opacity="1" stroke="#000" stroke-dasharray="none" stroke-opacity="1" stroke-width="5.7" d="m257 45-44 88a9 9 0 0 1-13 3l-44-25 28 141a9 9 0 0 1-15 8l-57-61-14 33a9 9 0 0 1-10 5l-73-15 25 77a9 9 0 0 1-4 10L7 323l127 102a9 9 0 0 1 2 10l-15 43h273l-16-43a9 9 0 0 1 3-10l126-102-28-14a9 9 0 0 1-5-10l25-77-73 15a9 9 0 0 1-10-5l-14-33-57 61a9 9 0 0 1-14-8l27-141-44 25a9 9 0 0 1-12-3z" display="inline"/></svg>
\ No newline at end of file
diff --git a/src/app/pages/event-archives/event-archives.component.html b/src/app/pages/event-archives/event-archives.component.html
index 5062f98c..8023c134 100644
--- a/src/app/pages/event-archives/event-archives.component.html
+++ b/src/app/pages/event-archives/event-archives.component.html
@@ -32,7 +32,7 @@ <h2>Tech Fair</h2>
         </ul>
       </section>
       <section>
-        <h2>Fall Hacks</h2>
+        <h2><cs-fall-hacks-icon /> Fall Hacks</h2>
         <ul class="event__list">
           @for (year of fallHacksYears; track year) {
             <li class="event__link">
diff --git a/src/app/pages/event-archives/event-archives.component.scss b/src/app/pages/event-archives/event-archives.component.scss
index 8991c04e..ebaff608 100644
--- a/src/app/pages/event-archives/event-archives.component.scss
+++ b/src/app/pages/event-archives/event-archives.component.scss
@@ -26,6 +26,11 @@
     padding: 1rem;
   }
 }
+
+.event__icon {
+  // color: hsl(0 100% 43.1%);
+}
+
 @media (prefers-reduced-motion: no-preference) {
   .event__link {
     transition: background-color 0.5s ease;
diff --git a/src/app/pages/event-archives/event-archives.component.ts b/src/app/pages/event-archives/event-archives.component.ts
index 29a4de3c..7151175f 100644
--- a/src/app/pages/event-archives/event-archives.component.ts
+++ b/src/app/pages/event-archives/event-archives.component.ts
@@ -1,5 +1,6 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { ArticleComponent } from '@csss-code/article/article.component';
+import { FallHacksIconComponent } from 'assets/icons/fall-hacks-icon/fall-hacks-icon.component';
 import {
   FALL_HACKS_YEARS,
   FROSH_YEARS,
@@ -9,16 +10,16 @@ import {
 
 @Component({
   selector: 'cs-event-archives',
-  imports: [ArticleComponent],
+  imports: [ArticleComponent, FallHacksIconComponent],
   templateUrl: './event-archives.component.html',
   styleUrl: './event-archives.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class EventArchivesComponent {
-  froshYears = FROSH_YEARS;
-  fallHacksYears = FALL_HACKS_YEARS;
-  techFairYears = TECH_FAIR_YEARS;
-  mountainMadnessYears = MOUNTAIN_MADNESS_YEARS;
+  protected froshYears = FROSH_YEARS;
+  protected fallHacksYears = FALL_HACKS_YEARS;
+  protected techFairYears = TECH_FAIR_YEARS;
+  protected mountainMadnessYears = MOUNTAIN_MADNESS_YEARS;
 
   makeHref(event: string, year: number): string {
     return `https://${event}.sfucsss.org/${year}`;
diff --git a/src/assets/icons/README.md b/src/assets/icons/README.md
new file mode 100644
index 00000000..51a2e967
--- /dev/null
+++ b/src/assets/icons/README.md
@@ -0,0 +1,16 @@
+For some reason the Angular FontAwesome package doesn't document what an `IconDefinition`'s type
+are, so I'm typing it out here. [ Angular FontAwesome Documentation ](https://github.com/FortAwesome/angular-fontawesome/blob/main/docs/guide/custom-icons.md)
+
+```typescript
+export interface {
+  prefix: string; // The package the icon resides in (just use `csss` if you're not sure)
+  iconName: string; // The name of the icon to use when importing it
+  icon: [
+    number,   // viewBox width
+    number,   // viewBox height
+    string[], // litgatures  (not used in Angular FontAwesome, so just pass in an empty array)
+    string,   // unicode (not used in Angular FontAwesome, so just pass in an empty string)
+    string | string[] // paths of the SVG
+  ]
+}
+```
diff --git a/src/assets/icons/fall-hacks-icon/fall-hacks-icon.component.html b/src/assets/icons/fall-hacks-icon/fall-hacks-icon.component.html
new file mode 100644
index 00000000..cec4f4f8
--- /dev/null
+++ b/src/assets/icons/fall-hacks-icon/fall-hacks-icon.component.html
@@ -0,0 +1,4 @@
+<fa-stack size="3x">
+  <fa-icon class="bg" [icon]="fallHacksBg" stackItemSize="1x"></fa-icon>
+  <fa-icon class="fg" [icon]="fallHacksCode" stackItemSize="1x"></fa-icon>
+</fa-stack>
diff --git a/src/assets/icons/fall-hacks-icon/fall-hacks-icon.component.scss b/src/assets/icons/fall-hacks-icon/fall-hacks-icon.component.scss
new file mode 100644
index 00000000..48f5c61c
--- /dev/null
+++ b/src/assets/icons/fall-hacks-icon/fall-hacks-icon.component.scss
@@ -0,0 +1,12 @@
+.bg {
+  color: black;
+}
+
+.fg {
+  color: #00ff00;
+}
+
+fa-stack {
+  width: 1.5em;
+  height: 1em;
+}
diff --git a/src/assets/icons/fall-hacks-icon/fall-hacks-icon.component.spec.ts b/src/assets/icons/fall-hacks-icon/fall-hacks-icon.component.spec.ts
new file mode 100644
index 00000000..0ba72262
--- /dev/null
+++ b/src/assets/icons/fall-hacks-icon/fall-hacks-icon.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FallHacksIconComponent } from './fall-hacks-icon.component';
+
+describe('FallHacksIconComponent', () => {
+  let component: FallHacksIconComponent;
+  let fixture: ComponentFixture<FallHacksIconComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [FallHacksIconComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(FallHacksIconComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/assets/icons/fall-hacks-icon/fall-hacks-icon.component.ts b/src/assets/icons/fall-hacks-icon/fall-hacks-icon.component.ts
new file mode 100644
index 00000000..1c249dbd
--- /dev/null
+++ b/src/assets/icons/fall-hacks-icon/fall-hacks-icon.component.ts
@@ -0,0 +1,15 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { fallHacksBg, fallHacksCode } from './fall-hacks.svg';
+
+@Component({
+  selector: 'cs-fall-hacks-icon',
+  imports: [FontAwesomeModule],
+  templateUrl: './fall-hacks-icon.component.html',
+  styleUrl: './fall-hacks-icon.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class FallHacksIconComponent {
+  fallHacksBg = fallHacksBg;
+  fallHacksCode = fallHacksCode;
+}
diff --git a/src/assets/icons/fall-hacks-icon/fall-hacks.svg.ts b/src/assets/icons/fall-hacks-icon/fall-hacks.svg.ts
new file mode 100644
index 00000000..6c462932
--- /dev/null
+++ b/src/assets/icons/fall-hacks-icon/fall-hacks.svg.ts
@@ -0,0 +1,18 @@
+import { IconDefinition } from '@fortawesome/angular-fontawesome';
+
+const bgPath =
+  'm257 45-44 88a9 9 0 0 1-13 3l-44-25 28 141a9 9 0 0 1-15 8l-57-61-14 33a9 9 0 0 1-10 5l-73-15 25 77a9 9 0 0 1-4 10L7 323l127 102a9 9 0 0 1 2 10l-15 43h273l-16-43a9 9 0 0 1 3-10l126-102-28-14a9 9 0 0 1-5-10l25-77-73 15a9 9 0 0 1-10-5l-14-33-57 61a9 9 0 0 1-14-8l27-141-44 25a9 9 0 0 1-12-3z';
+
+export const fallHacksBg: IconDefinition = {
+  prefix: 'csss',
+  iconName: 'fall-hacks-logo',
+  icon: [512, 512, [], '', bgPath]
+};
+
+const codePath =
+  'M201 395 93 347v-16l108-54v26l-75 35 75 31zm101-138-59 160h-30l59-160zm11 112 75-31-75-35v-26l109 54v16l-109 48z';
+export const fallHacksCode: IconDefinition = {
+  prefix: 'csss',
+  iconName: 'fall-hacks-logo',
+  icon: [512, 512, [], '', codePath]
+};
diff --git a/src/ui/csss-code/button/button.component.scss b/src/ui/csss-code/button/button.component.scss
index 2953494a..dc43372c 100644
--- a/src/ui/csss-code/button/button.component.scss
+++ b/src/ui/csss-code/button/button.component.scss
@@ -25,6 +25,3 @@ button {
 fa-icon {
   color: white;
 }
-
-button:hover {
-}

From f8c9af0faebd51e252184659ca6595646a249075 Mon Sep 17 00:00:00 2001
From: Jon Andre Briones <jonbrsoftware@gmail.com>
Date: Tue, 19 Aug 2025 22:00:01 -0700
Subject: [PATCH 4/6] wip: changed Fall Hacks logo

---
 ...-leaf_black.svg => fall-hacks-code_bg.svg} |  2 +-
 .../icons/logos/fall-hacks-code_black.svg     |  1 -
 .../event-archives.component.html             |  8 ++--
 .../event-archives.component.scss             |  6 +++
 .../fall-hacks-icon.component.html            | 37 +++++++++++++++++--
 .../fall-hacks-icon.component.ts              | 16 +++++---
 src/styles.scss                               |  4 +-
 7 files changed, 56 insertions(+), 18 deletions(-)
 rename public/static/icons/logos/{fall-hacks-leaf_black.svg => fall-hacks-code_bg.svg} (60%)
 delete mode 100644 public/static/icons/logos/fall-hacks-code_black.svg

diff --git a/public/static/icons/logos/fall-hacks-leaf_black.svg b/public/static/icons/logos/fall-hacks-code_bg.svg
similarity index 60%
rename from public/static/icons/logos/fall-hacks-leaf_black.svg
rename to public/static/icons/logos/fall-hacks-code_bg.svg
index b7e92e30..73407203 100644
--- a/public/static/icons/logos/fall-hacks-leaf_black.svg
+++ b/public/static/icons/logos/fall-hacks-code_bg.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" id="svg1" version="1.1" viewBox="0 0 512 512"><path id="path1" fill="#000" fill-opacity="1" stroke="#000" stroke-dasharray="none" stroke-opacity="1" stroke-width="5.7" d="m257 45-44 88a9 9 0 0 1-13 3l-44-25 28 141a9 9 0 0 1-15 8l-57-61-14 33a9 9 0 0 1-10 5l-73-15 25 77a9 9 0 0 1-4 10L7 323l127 102a9 9 0 0 1 2 10l-15 43h273l-16-43a9 9 0 0 1 3-10l126-102-28-14a9 9 0 0 1-5-10l25-77-73 15a9 9 0 0 1-10-5l-14-33-57 61a9 9 0 0 1-14-8l27-141-44 25a9 9 0 0 1-12-3z" display="inline"/></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" id="svg1" version="1.1" viewBox="0 0 512 512"><path id="path1" fill="#000" fill-opacity="1" stroke="#000" stroke-dasharray="none" stroke-opacity="1" stroke-width="5.7" d="m257 45-44 88a9 9 0 0 1-13 3l-44-25 28 141a9 9 0 0 1-15 8l-57-61-14 33a9 9 0 0 1-10 5l-73-15 25 77a9 9 0 0 1-4 10L7 323l127 102a9 9 0 0 1 2 10l-15 43h273l-16-43a9 9 0 0 1 3-10l126-102-28-14a9 9 0 0 1-5-10l25-77-73 15a9 9 0 0 1-10-5l-14-33-57 61a9 9 0 0 1-14-8l27-141-44 25a9 9 0 0 1-12-3z" display="inline"/><path id="text33" fill="#0f0" stroke-width=".3" d="M201 395 93 347v-16l108-54v26l-75 35 75 31zm101-138-59 160h-30l59-160zm11 112 75-31-75-35v-26l109 54v16l-109 48z" aria-label="&lt;/&gt;" display="inline" font-size="223.8" font-weight="700" style="-inkscape-font-specification:&quot;sans-serif Bold&quot;"/></svg>
\ No newline at end of file
diff --git a/public/static/icons/logos/fall-hacks-code_black.svg b/public/static/icons/logos/fall-hacks-code_black.svg
deleted file mode 100644
index bae28498..00000000
--- a/public/static/icons/logos/fall-hacks-code_black.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" id="svg1" version="1.1" viewBox="0 0 512 512"><path id="text33" fill="#fff" stroke-width=".3" d="M201 395 93 347v-16l108-54v26l-75 35 75 31zm101-138-59 160h-30l59-160zm11 112 75-31-75-35v-26l109 54v16l-109 48z" aria-label="&lt;/&gt;" display="inline" font-size="223.8" font-weight="700" style="-inkscape-font-specification:&quot;sans-serif Bold&quot;"/></svg>
\ No newline at end of file
diff --git a/src/app/pages/event-archives/event-archives.component.html b/src/app/pages/event-archives/event-archives.component.html
index 8023c134..9727410c 100644
--- a/src/app/pages/event-archives/event-archives.component.html
+++ b/src/app/pages/event-archives/event-archives.component.html
@@ -12,7 +12,7 @@ <h1>Event Archives</h1>
   <section class="events">
     <section class="event">
       <section>
-        <h2>Frosh</h2>
+        <h2><cs-fall-hacks-icon [width]="48" [height]="48" /> <span>Frosh</span></h2>
         <ul class="event__list">
           @for (year of froshYears; track year) {
             <li class="event__link">
@@ -22,7 +22,7 @@ <h2>Frosh</h2>
         </ul>
       </section>
       <section>
-        <h2>Tech Fair</h2>
+        <h2><cs-fall-hacks-icon [width]="48" [height]="48" /> <span>Tech Fair</span></h2>
         <ul class="event__list">
           @for (year of techFairYears; track year) {
             <li class="event__link">
@@ -32,7 +32,7 @@ <h2>Tech Fair</h2>
         </ul>
       </section>
       <section>
-        <h2><cs-fall-hacks-icon /> Fall Hacks</h2>
+        <h2><cs-fall-hacks-icon [width]="48" [height]="48" /> <span>Fall Hacks</span></h2>
         <ul class="event__list">
           @for (year of fallHacksYears; track year) {
             <li class="event__link">
@@ -42,7 +42,7 @@ <h2><cs-fall-hacks-icon /> Fall Hacks</h2>
         </ul>
       </section>
       <section>
-        <h2>Mountain Madness</h2>
+        <h2><cs-fall-hacks-icon [width]="48" [height]="48" /> <span>Mountain Madness</span></h2>
         <ul class="event__list">
           @for (year of mountainMadnessYears; track year) {
             <li class="event__link">
diff --git a/src/app/pages/event-archives/event-archives.component.scss b/src/app/pages/event-archives/event-archives.component.scss
index ebaff608..da3f7382 100644
--- a/src/app/pages/event-archives/event-archives.component.scss
+++ b/src/app/pages/event-archives/event-archives.component.scss
@@ -1,5 +1,11 @@
 @use 'globals';
 
+h2 {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
 .events {
   display: grid;
   gap: 1rem;
diff --git a/src/assets/icons/fall-hacks-icon/fall-hacks-icon.component.html b/src/assets/icons/fall-hacks-icon/fall-hacks-icon.component.html
index cec4f4f8..673d5fe1 100644
--- a/src/assets/icons/fall-hacks-icon/fall-hacks-icon.component.html
+++ b/src/assets/icons/fall-hacks-icon/fall-hacks-icon.component.html
@@ -1,4 +1,33 @@
-<fa-stack size="3x">
-  <fa-icon class="bg" [icon]="fallHacksBg" stackItemSize="1x"></fa-icon>
-  <fa-icon class="fg" [icon]="fallHacksCode" stackItemSize="1x"></fa-icon>
-</fa-stack>
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  xml:space="preserve"
+  id="svg1"
+  version="1.1"
+  [attr.width]="_width()"
+  [attr.height]="_height()"
+  viewBox="0 0 512 512"
+>
+  <path
+    id="path1"
+    fill="#000"
+    [attr.fill]="_bgColor()"
+    fill-opacity="1"
+    stroke="#000"
+    stroke-dasharray="none"
+    stroke-opacity="1"
+    stroke-width="5.7"
+    d="m257 45-44 88a9 9 0 0 1-13 3l-44-25 28 141a9 9 0 0 1-15 8l-57-61-14 33a9 9 0 0 1-10 5l-73-15 25 77a9 9 0 0 1-4 10L7 323l127 102a9 9 0 0 1 2 10l-15 43h273l-16-43a9 9 0 0 1 3-10l126-102-28-14a9 9 0 0 1-5-10l25-77-73 15a9 9 0 0 1-10-5l-14-33-57 61a9 9 0 0 1-14-8l27-141-44 25a9 9 0 0 1-12-3z"
+    display="inline"
+  />
+  <path
+    id="text33"
+    [attr.fill]="_fgColor()"
+    stroke-width=".3"
+    d="M201 395 93 347v-16l108-54v26l-75 35 75 31zm101-138-59 160h-30l59-160zm11 112 75-31-75-35v-26l109 54v16l-109 48z"
+    aria-label="&lt;/&gt;"
+    display="inline"
+    font-size="223.8"
+    font-weight="700"
+    style="-inkscape-font-specification: 'sans-serif Bold'"
+  />
+</svg>
diff --git a/src/assets/icons/fall-hacks-icon/fall-hacks-icon.component.ts b/src/assets/icons/fall-hacks-icon/fall-hacks-icon.component.ts
index 1c249dbd..8e54df65 100644
--- a/src/assets/icons/fall-hacks-icon/fall-hacks-icon.component.ts
+++ b/src/assets/icons/fall-hacks-icon/fall-hacks-icon.component.ts
@@ -1,15 +1,19 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
-import { fallHacksBg, fallHacksCode } from './fall-hacks.svg';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 
 @Component({
   selector: 'cs-fall-hacks-icon',
-  imports: [FontAwesomeModule],
+  imports: [],
   templateUrl: './fall-hacks-icon.component.html',
   styleUrl: './fall-hacks-icon.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class FallHacksIconComponent {
-  fallHacksBg = fallHacksBg;
-  fallHacksCode = fallHacksCode;
+  bgColor = input<string>();
+  fgColor = input<string>();
+  width = input<number>();
+  height = input<number>();
+  protected _bgColor = computed(() => this.bgColor() ?? '#000');
+  protected _fgColor = computed(() => this.fgColor() ?? '#0f0');
+  protected _width = computed(() => this.width() ?? 64);
+  protected _height = computed(() => this.height() ?? 64);
 }
diff --git a/src/styles.scss b/src/styles.scss
index 296208ad..37081963 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -43,8 +43,8 @@ a.csss-link {
 article.content {
   line-height: 1.5;
 
-  hgroup,
-  header {
+  hgroup:nth-child(1),
+  header:nth-child(1) {
     margin-top: 5svh;
   }
 

From 4715e58cc0075f89ea476cd1cacee362975c730b Mon Sep 17 00:00:00 2001
From: Jon Andre Briones <jonbrsoftware@gmail.com>
Date: Sat, 23 Aug 2025 18:32:37 -0700
Subject: [PATCH 5/6] wip: removed the fall hacks logo for now

---
 .../pages/event-archives/event-archives.component.html    | 8 ++++----
 .../pages/event-archives/event-archives.component.scss    | 4 ----
 2 files changed, 4 insertions(+), 8 deletions(-)

diff --git a/src/app/pages/event-archives/event-archives.component.html b/src/app/pages/event-archives/event-archives.component.html
index 9727410c..9c176389 100644
--- a/src/app/pages/event-archives/event-archives.component.html
+++ b/src/app/pages/event-archives/event-archives.component.html
@@ -12,7 +12,7 @@ <h1>Event Archives</h1>
   <section class="events">
     <section class="event">
       <section>
-        <h2><cs-fall-hacks-icon [width]="48" [height]="48" /> <span>Frosh</span></h2>
+        <h2><span>Frosh</span></h2>
         <ul class="event__list">
           @for (year of froshYears; track year) {
             <li class="event__link">
@@ -22,7 +22,7 @@ <h2><cs-fall-hacks-icon [width]="48" [height]="48" /> <span>Frosh</span></h2>
         </ul>
       </section>
       <section>
-        <h2><cs-fall-hacks-icon [width]="48" [height]="48" /> <span>Tech Fair</span></h2>
+        <h2><span>Tech Fair</span></h2>
         <ul class="event__list">
           @for (year of techFairYears; track year) {
             <li class="event__link">
@@ -32,7 +32,7 @@ <h2><cs-fall-hacks-icon [width]="48" [height]="48" /> <span>Tech Fair</span></h2
         </ul>
       </section>
       <section>
-        <h2><cs-fall-hacks-icon [width]="48" [height]="48" /> <span>Fall Hacks</span></h2>
+        <h2><span>Fall Hacks</span></h2>
         <ul class="event__list">
           @for (year of fallHacksYears; track year) {
             <li class="event__link">
@@ -42,7 +42,7 @@ <h2><cs-fall-hacks-icon [width]="48" [height]="48" /> <span>Fall Hacks</span></h
         </ul>
       </section>
       <section>
-        <h2><cs-fall-hacks-icon [width]="48" [height]="48" /> <span>Mountain Madness</span></h2>
+        <h2><span>Mountain Madness</span></h2>
         <ul class="event__list">
           @for (year of mountainMadnessYears; track year) {
             <li class="event__link">
diff --git a/src/app/pages/event-archives/event-archives.component.scss b/src/app/pages/event-archives/event-archives.component.scss
index da3f7382..15b1af88 100644
--- a/src/app/pages/event-archives/event-archives.component.scss
+++ b/src/app/pages/event-archives/event-archives.component.scss
@@ -33,10 +33,6 @@ h2 {
   }
 }
 
-.event__icon {
-  // color: hsl(0 100% 43.1%);
-}
-
 @media (prefers-reduced-motion: no-preference) {
   .event__link {
     transition: background-color 0.5s ease;

From a3d803ff1577015136026aea15b008d7c59d11b3 Mon Sep 17 00:00:00 2001
From: Jon Andre Briones <jonbrsoftware@gmail.com>
Date: Sat, 23 Aug 2025 18:33:25 -0700
Subject: [PATCH 6/6] fix: removed unused component

---
 src/app/pages/event-archives/event-archives.component.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/app/pages/event-archives/event-archives.component.ts b/src/app/pages/event-archives/event-archives.component.ts
index 7151175f..62f24f51 100644
--- a/src/app/pages/event-archives/event-archives.component.ts
+++ b/src/app/pages/event-archives/event-archives.component.ts
@@ -1,6 +1,5 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { ArticleComponent } from '@csss-code/article/article.component';
-import { FallHacksIconComponent } from 'assets/icons/fall-hacks-icon/fall-hacks-icon.component';
 import {
   FALL_HACKS_YEARS,
   FROSH_YEARS,
@@ -10,7 +9,7 @@ import {
 
 @Component({
   selector: 'cs-event-archives',
-  imports: [ArticleComponent, FallHacksIconComponent],
+  imports: [ArticleComponent],
   templateUrl: './event-archives.component.html',
   styleUrl: './event-archives.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush