Update officers 1

src/app/pages/officers/officers.component.html

@@ -1,25 +1,35 @@
 <code-article>
   <header>
     <h1>Officers</h1>
-    <p>Executives are voted in by everyone in the CSSS and serve for a year.</p>
+    <p>The Executives at the CSSS are here to represent the Computing Science program at SFU.</p>
     <p>
-      The exceptions to this are the <strong>Executives at Large</strong>, who are elected for just
-      <strong>one semester</strong>.
+      They're here to plan events, create an inclusive community, and provide resources to the
+      students they represent.
+    </p>
+    <p>
+      Find them hanging out in the <cs-route-link key="common-room" label="Common Room" />, at one
+      of our <cs-route-link key="events" label="events" />, or on
+      <cs-external-link key="discord" />.
     </p>
   </header>
 
   <section>
-    <h2>Current Executives</h2>
+    <h2>Our Executives</h2>
     <div class="gallery">
       @for (exec of currentAdministration()?.members; track $index) {
-        <om-fade direction="up" [animateOnlyOnce]="true">
-          <code-card [bgImg]="exec.photoName" #execCard>
-            <div class="card__footer">
-              <strong class="card__name">{{ exec.name }}</strong>
-              <strong class="card__position">{{ exec.position }}</strong>
+        <div class="card">
+          <div class="card__frame">
+            <img class="card__img" [src]="exec.photoName" [alt]="exec.photoName" />
+            <div class="card__info">
+              <div class="card__name">
+                <strong class="card__text">{{ exec.name }}</strong>
+              </div>
+              <div class="card__position">
+                <strong class="card__text">{{ exec.position }}</strong>
+              </div>
             </div>
-          </code-card>
-        </om-fade>
+          </div>
+        </div>
       }
     </div>
   </section>

src/app/pages/officers/officers.component.scss

@@ -1,35 +1,38 @@
 @use 'globals' as g;
 
 .gallery {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(min(10rem, 100%), 1fr));
-  gap: 1.8rem;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+  justify-content: center;
 }
 
-.gallery code-card {
-  display: grid;
-  width: 100%;
-  aspect-ratio: 1 / 1.5;
-  grid-template-rows: auto auto;
-}
+.card {
+  display: flex;
+  justify-content: center;
 
-.card__footer {
-  position: absolute;
-  bottom: 0;
-  width: 100%;
-  height: fit-content;
-  background-color: g.$bg3;
+  &__frame {
+    width: max(300px, 100%);
+    position: relative;
+  }
 
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
+  &__img {
+    width: 300px;
+    aspect-ratio: 3 / 4;
+    box-shadow: 10px 10px 5px black;
+  }
 
-.card__name,
-.card__position {
-  width: fit-content;
-}
+  &__info {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    width: 100%;
+    position: absolute;
+    bottom: 0.75rem;
+  }
 
-.card__position {
-  color: g.$code-text;
+  &__text {
+    padding: 0.5rem;
+    background-color: g.$accent2;
+  }
 }

src/app/pages/officers/officers.component.ts

@@ -1,12 +1,12 @@
 import { ChangeDetectionStrategy, Component, computed, signal } from '@angular/core';
 import { ArticleComponent } from '@csss-code/article/article.component';
-import { CardComponent } from '@csss-code/card/card.component';
-import { NgxFadeComponent } from '@omnedia/ngx-fade';
+import { ExternalLinkComponent } from 'components/url/external-link/external-link.component';
+import { RouteLinkComponent } from 'components/url/route-link/route-link.component';
 import { ExecutiveAdministration, executives } from './officers.data';
 
 @Component({
   selector: 'cs-officers',
-  imports: [CardComponent, ArticleComponent, NgxFadeComponent],
+  imports: [ArticleComponent, RouteLinkComponent, ExternalLinkComponent],
   templateUrl: './officers.component.html',
   styleUrl: './officers.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush
@@ -22,7 +22,7 @@ export class OfficersComponent {
     let newAdmin = this.cachedAdmins.get(year);
     if (!newAdmin) {
       // TODO: Fetch this from the back end.
-      newAdmin = executives.find(e => e.startYear === year);
+      newAdmin = structuredClone(executives.find(e => e.startYear === year));
       if (!newAdmin) {
         throw new Error(`Administration for year ${year} not found.`);
       }
@@ -53,6 +53,6 @@ export class OfficersComponent {
    * @returns File name in the CSS URL form.
    */
   private toLocalUrl(fileName: string): string {
-    return `images/placeholders/${fileName}`;
+    return `images/executives/${this.currentYear()}/${fileName}`;
   }
 }

src/app/pages/officers/officers.data.ts

@@ -159,72 +159,72 @@ export const executives: ExecutiveAdministration[] = [
       {
         name: 'Mabel Ling',
         position: 'President',
-        photoName: 'ballerina-cappuccina.png'
+        photoName: 'president.png'
       },
       {
         name: 'Karen Yao',
         position: 'Vice President',
-        photoName: 'bobritto-bandito.png'
+        photoName: 'vp.png'
       },
       {
         name: 'Matthew Liu',
         position: 'Treasurer',
-        photoName: 'tralalero-tralala.png'
+        photoName: 'treasurer.png'
       },
       {
         name: 'Michael Ho',
         position: 'Director of Resources',
-        photoName: 'bombombini-gusini.png'
+        photoName: 'dor.png'
       },
       {
         name: 'Samantha Gan',
         position: 'Director of Events',
-        photoName: 'brr-brr-patapim.png'
+        photoName: 'doe.png'
       },
       {
         name: 'Ilia Mosaddegh',
         position: 'Director of Educational Events',
-        photoName: 'lirili-larila.png'
+        photoName: 'doee.png'
       },
       {
         name: 'Nathan Huynh',
         position: 'Assistant Director of Events',
-        photoName: 'chimpanzini-bananini.png'
+        photoName: 'adoe.png'
       },
       {
         name: 'Chloe Shen',
         position: 'Director of Communications',
-        photoName: 'glorbo-fruttodrillo.png'
+        photoName: 'doc.png'
       },
       {
         name: 'Chloe Xie',
         position: 'Director of Multimedia',
-        photoName: 'tung-tung-tung-sahur.png'
+        photoName: 'domm.png'
       },
       {
         name: 'Dina Zeng',
         position: 'Director of Archives',
-        photoName: 'tric-trac-baraboom.png'
-      },
-      {
-        name: 'Arielle Felicia',
-        position: 'Executive at Large',
-        photoName: 'trippi-troppi.png'
-      },
-      {
-        name: 'Barsin Tafazzoli',
-        position: 'Executive at Large',
-        photoName: 'giraffa-celeste.png'
+        photoName: 'doa.png'
       },
       {
         name: 'Laurenzo Maddatu',
         position: 'First-Year Representative',
-        photoName: 'frigo-camelo.png'
+        photoName: 'fyr-1.png'
       },
       {
         name: 'Mengna Ma',
         position: 'First-Year Representative',
-        photoName: 'cappucino-assassino.png'
+        photoName: 'fyr-2.png'
+      },
+      {
+        name: 'Arielle Felicia',
+        position: 'Executive at Large',
+        photoName: 'eal-1.png'
+      },
+      {
+        name: 'Barsin Tafazzoli',
+        position: 'Executive at Large',
+        photoName: 'eal-2.png'
       }
     ]
   },

src/styles.scss

@@ -45,8 +45,6 @@ a.csss-link {
 }
 
 article.content {
-  line-height: 1.5;
-
   hgroup:nth-child(1),
   header:nth-child(1) {
     margin-top: 5svh;

src/ui/csss-code/article/article.component.scss

@@ -5,11 +5,12 @@ aside {
 }
 
 article {
-  max-width: 65rem;
-  margin: 0 auto 3rem;
+  max-width: 80rem;
+  margin: 0 auto;
   font-family: g.$article-font;
   height: fit-content;
-  padding: 0 1rem;
+  padding: 0 1rem 3rem;
+  line-height: 1.5;
 }
 
 @media (min-width: g.$breakpoint-large) {

src/ui/csss-code/card/card.component.scss

@@ -7,7 +7,7 @@
 
   height: 100%;
   width: 100%;
-  box-shadow: 10px 5px 5px black;
+  box-shadow: 10px 10px 5px black;
   transition: transform 0.3s ease;
 
   &.hoverable:hover {