Merge pull request #405 from EthanThatOneKid/mike/design-tweaks

Minor design tweaks

src/lib/components/about/about-us.svelte

@@ -0,0 +1,58 @@
+<section>
+  <div class="container">
+    <img src="assets/about-illustration.svg" alt="acmCSUF badges" />
+
+    <div class="text">
+      <h1 class="size-lg brand-header">About us</h1>
+
+      <p class="size-sm">
+        acmCSUF is a student chapter of the
+        <a href="https://acm.org" class="brand-med" target="_blank" rel="noopener noreferrer">
+          Association for Computing Machinery</a
+        >, an international organization based in New York that advocates for the advancement of
+        computer science as a science and profession. Based in California State University,
+        Fullerton, we strive to bring passionate Titans together into a community that promotes
+        innovation, collaboration, creativity, and inclusivity within tech.
+      </p>
+    </div>
+  </div>
+</section>
+
+<style lang="scss">
+  section {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    .container {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      padding: 0 24px;
+      width: 1280px;
+      gap: 64px;
+
+      img {
+        min-width: 250px;
+        max-width: 800px;
+        width: 100%;
+      }
+
+      .text {
+        display: flex;
+        flex-direction: column;
+        text-align: center;
+        gap: 16px;
+
+        p a {
+          text-decoration: none;
+          transition: 0.25s ease-in-out;
+
+          &:hover {
+            color: var(--acm-blue);
+          }
+        }
+      }
+    }
+  }
+</style>

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

@@ -4,7 +4,6 @@
   import { OFFICERS, VISIBLE_TERMS } from '$lib/constants/officers';
   import type { Officer } from '$lib/constants/officers';
   import { termIndex } from '$lib/stores/term-index';
-
   export let placeholderPicture: string | undefined = undefined;
   export let filter: (officer: Officer) => boolean;
 
@@ -44,12 +43,12 @@
 </script>
 
 <section>
-  <div class="school-year-input-container">
-    <AcmSelect bind:defaultValue={currentFormattedTerm} options={formattedTerms} />
-  </div>
-
   <div class="container">
-    <div class="officer-profile-list">
+    <div class="button">
+      <AcmSelect bind:defaultValue={currentFormattedTerm} options={formattedTerms} />
+    </div>
+
+    <div class="officer-list">
       {#each filteredOfficers as officer ($termIndex + officer.fullName)}
         <OfficerProfile info={officer} {placeholderPicture} />
       {/each}
@@ -63,24 +62,24 @@
     flex-direction: column;
     justify-content: center;
     align-items: center;
-  }
+    gap: 16px;
 
-  .school-year-input-container {
-    text-align: center;
-    z-index: 100;
-  }
+    .container {
+      width: 100%;
+      max-width: 1280px;
 
-  .container {
-    z-index: 1;
-    margin-top: -64px;
-    width: 100%;
-    max-width: 1280px;
-  }
+      .button {
+        display: flex;
+        justify-content: center;
+      }
 
-  .officer-profile-list {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
-    justify-content: center;
-    align-items: center;
+      .officer-list {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+        justify-content: center;
+        align-items: center;
+        row-gap: 64px;
+      }
+    }
   }
 </style>

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

@@ -11,13 +11,10 @@
   const officerPicture = info.picture ?? placeholderPicture;
 
   $: titleHTML = info.positions[VISIBLE_TERMS[$termIndex]].title
-    .replace(/Create\s/, `<span class="brand-em brand-pink">Create </span>`)
-    .replace(/Algo\s/, `<span class="brand-em brand-purple">Algo </span>`)
-    .replace(/Dev\s/, `<span class="brand-em brand-bluer">Dev </span>`)
-    .replace(
-      /NodeBuds/,
-      `<span class="headers">node<span class="brand-em brand-red">Buds</span></span>`
-    );
+    .replace(/Algo\s/, `<span class="brand-bold acm-purple">Algo&nbsp</span>`)
+    .replace(/Create\s/, `<span class="brand-bold acm-pink">Create&nbsp</span>`)
+    .replace(/Dev\s/, `<span class="brand-bold acm-bluer">Dev&nbsp</span>`)
+    .replace(/nodebuds\s/, `<span class="brand-header">Node Buds&nbsp</span>`);
 
   $: officerTier = dev ? TIERS[info.positions[VISIBLE_TERMS[$termIndex]].tier] : '';
 </script>
@@ -28,13 +25,17 @@
     src={`../assets/authors/${officerPicture}`}
     alt={`Image of ${officerName}.`}
   />
-  <h3 class="headers">
-    {officerName}
-    {#if officerTier.length}<br />{officerTier}<br />{/if}
-  </h3>
-  <p>
-    {@html titleHTML}
-  </p>
+
+  <div>
+    <h3 class="brand-header">
+      {officerName}
+      {#if officerTier.length}<br />{officerTier}<br />{/if}
+    </h3>
+
+    <p class="brand-med">
+      {@html titleHTML}
+    </p>
+  </div>
 </div>
 
 <style lang="scss">
@@ -43,22 +44,15 @@
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    padding: 64px 64px 0;
     text-align: center;
-  }
 
-  .officer-image {
-    width: 200px;
-    height: 200px;
-  }
-
-  h3 {
-    color: var(--acm-dark);
-  }
+    .officer-image {
+      width: 200px;
+      height: auto;
+    }
 
-  p {
-    font-weight: 500;
-    max-width: 250px;
-    color: var(--acm-dark);
+    p {
+      max-width: 250px;
+    }
   }
 </style>