- {{ exec.name }}
- {{ exec.position }}
+
diff --git a/src/app/pages/officers/officers.component.scss b/src/app/pages/officers/officers.component.scss
index 1109680c..bdc297f8 100644
--- a/src/app/pages/officers/officers.component.scss
+++ b/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;
+ }
}
diff --git a/src/app/pages/officers/officers.component.ts b/src/app/pages/officers/officers.component.ts
index aafdfe6f..9f6468f0 100644
--- a/src/app/pages/officers/officers.component.ts
+++ b/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}`;
}
}
diff --git a/src/app/pages/officers/officers.data.ts b/src/app/pages/officers/officers.data.ts
index 2e0ab01c..32845066 100644
--- a/src/app/pages/officers/officers.data.ts
+++ b/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'
}
]
},
diff --git a/src/styles.scss b/src/styles.scss
index f3edc364..15725818 100644
--- a/src/styles.scss
+++ b/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;
diff --git a/src/ui/csss-code/article/article.component.scss b/src/ui/csss-code/article/article.component.scss
index e717da7e..60468066 100644
--- a/src/ui/csss-code/article/article.component.scss
+++ b/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) {
+
}
+ ![]()
+
+
+
-
-
+
+ {{ exec.name }}
+
+
+ {{ exec.position }}
+