Update officers 1

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

@@ -12,14 +12,19 @@ <h1>Officers</h1>
     <h2>Current 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>{{ exec.name }}</strong>
+              </div>
+              <div class="card__position">
+                <strong>{{ exec.position }}</strong>
+              </div>
             </div>
-          </code-card>
-        </om-fade>
+          </div>
+        </div>
       }
     </div>
   </section>

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

@@ -2,34 +2,38 @@
 
 .gallery {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(min(10rem, 100%), 1fr));
-  gap: 1.8rem;
+  grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
+  justify-items: center;
+  gap: 2rem;
 }
 
-.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 5px 5px black;
+  }
 
-.card__name,
-.card__position {
-  width: fit-content;
-}
+  &__info {
+    width: 100%;
+    text-align: center;
+    position: absolute;
+    bottom: 0;
+  }
+
+  &__name {
+    background-color: black;
+  }
 
-.card__position {
-  color: g.$code-text;
+  &__position {
+    background-color: black;
+  }
 }

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

@@ -1,12 +1,10 @@
 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 { ExecutiveAdministration, executives } from './officers.data';
 
 @Component({
   selector: 'cs-officers',
-  imports: [CardComponent, ArticleComponent, NgxFadeComponent],
+  imports: [ArticleComponent],
   templateUrl: './officers.component.html',
   styleUrl: './officers.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush
@@ -22,7 +20,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 +51,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,22 +159,22 @@ 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',
@@ -184,7 +184,7 @@ export const executives: ExecutiveAdministration[] = [
       {
         name: 'Ilia Mosaddegh',
         position: 'Director of Educational Events',
-        photoName: 'lirili-larila.png'
+        photoName: 'doee.png'
       },
       {
         name: 'Nathan Huynh',
@@ -194,37 +194,37 @@ export const executives: ExecutiveAdministration[] = [
       {
         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'
+        photoName: 'doa.png'
       },
       {
         name: 'Arielle Felicia',
         position: 'Executive at Large',
-        photoName: 'trippi-troppi.png'
+        photoName: 'eal-1.png'
       },
       {
         name: 'Barsin Tafazzoli',
         position: 'Executive at Large',
-        photoName: 'giraffa-celeste.png'
+        photoName: 'eal-2.png'
       },
       {
         name: 'Laurenzo Maddatu',
         position: 'First-Year Representative',
-        photoName: 'frigo-camelo.png'
+        photoName: 'fyr-2.png'
       },
       {
         name: 'Mengna Ma',
         position: 'First-Year Representative',
-        photoName: 'cappucino-assassino.png'
+        photoName: 'fyr-1.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: 75rem;
+  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) {