Merge branch 'mgr8/teams' into mig/index

src/lib/components/block/block.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+  import { TextAlignment } from '$lib/legacy/text-alignment';
+
+  export let align: TextAlignment = TextAlignment.CENTER;
+</script>
+
+<section style:--alignment={align}>
+  <div>
+    <slot name="headline" tag="h2" class="headline" />
+    <slot name="text" tag="p" class="text" />
+  </div>
+</section>
+
+<style lang="scss">
+  section {
+    --alignment: center;
+
+    display: flex;
+    justify-content: center;
+    text-align: var(--alignment);
+    margin: 0 24px;
+  }
+
+  section div {
+    width: min(1150px, calc(70% + 100px));
+  }
+
+  section div :global(h2) {
+    font-weight: 600;
+  }
+
+  section div :global(p) {
+    margin-top: 16px;
+  }
+</style>

src/lib/legacy/path-section.svelte

@@ -0,0 +1,91 @@
+<script lang="ts">
+  import type { AcmPath } from '$lib/legacy/acm-paths';
+  import { TextAlignment } from '$lib/legacy/text-alignment';
+
+  export let textAlign: TextAlignment = TextAlignment.RIGHT;
+  export let info: AcmPath | undefined;
+</script>
+
+<div class="container">
+  {#if info !== undefined}
+    <section id={info.slug} class:👈={textAlign === TextAlignment.LEFT}>
+      <img src={info.picture} alt={`acm${info.title} Logo`} />
+      <div>
+        <h2>
+          <span class="headers size-lg">
+            <span style:--font-color={info.color}>
+              <span class="brand-em">{info.title}</span>
+            </span>
+            <span class="brand-em">Team</span>
+          </span>
+        </h2>
+        <slot name="content" tag="p" />
+      </div>
+    </section>
+  {/if}
+</div>
+
+<style lang="scss">
+  .container {
+    display: flex;
+    justify-content: center;
+  }
+
+  section {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 1064px;
+    margin: 0 32px;
+    scroll-margin-top: 4rem;
+  }
+
+  section img {
+    margin-left: -32px;
+    width: 350px;
+  }
+
+  section div {
+    text-align: right;
+    max-width: 650px;
+  }
+
+  section div h2 {
+    padding-bottom: 16px;
+  }
+
+  section div h2 span span {
+    color: var(--font-color);
+  }
+
+  /* Left */
+  .👈 {
+    flex-direction: row-reverse;
+  }
+
+  .👈 div {
+    text-align: left;
+  }
+
+  .👈 img {
+    margin-right: -32px;
+  }
+
+  @media (max-width: 900px) {
+    section,
+    .👈 {
+      flex-direction: column;
+    }
+
+    section div,
+    .👈 div {
+      text-align: center;
+    }
+
+    section img,
+    .👈 img {
+      margin: 0;
+      width: 200px;
+    }
+  }
+</style>

src/lib/legacy/text-alignment.ts

@@ -0,0 +1,5 @@
+export enum TextAlignment {
+  LEFT = 'left',
+  RIGHT = 'right',
+  CENTER = 'center',
+}

src/routes/teams/+page.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+  import { acmAI, acmAlgo, acmDesign, acmDev } from '$lib/legacy/acm-paths';
+  import { TextAlignment } from '$lib/legacy/text-alignment';
+  import PathSection from '$lib/legacy/path-section.svelte';
+  import Spacing from '$lib/legacy/spacing.svelte';
+  import Block from '$lib/components/block/block.svelte';
+</script>
+
+<svelte:head>
+  <title>Teams | ACM at CSUF</title>
+</svelte:head>
+
+<Spacing --min="175px" --med="200px" --max="200px" />
+
+<Block>
+  <h2 slot="headline" class="size-xl">Meet the Teams</h2>
+  <p slot="text" class="size-md">
+    Teams are committees that specialize in specific fields in the tech industry. We’ve designed the
+    teams to be gateways for students to explore new fields, develop new interests, and learn new
+    skills that will benefit them in the industry.
+  </p>
+</Block>
+
+<Spacing --min="100px" --med="175px" --max="200px" />
+
+<PathSection info={acmAI} textAlign={TextAlignment.RIGHT}>
+  <p slot="content" class="size-md">
+    This team is dedicated to providing accessible information about artificial intelligence and
+    machine learning to all. <span class="brand-emerald brand-em">AI</span> focuses on fun projects geared
+    towards beginners in the field.
+  </p>
+</PathSection>
+
+<Spacing --med="64px" />
+
+<PathSection info={acmAlgo} textAlign={TextAlignment.LEFT}>
+  <p slot="content" class="size-md">
+    This team is dedicated to building programming fundamentals within students.
+    <span class="brand-purple brand-em">Algo</span> focuses on mastering data structures and algorithms,
+    enhancing problem solving abilities, and exploration of competitive programming.
+  </p>
+</PathSection>
+
+<Spacing --med="64px" />
+
+<PathSection info={acmDesign} textAlign={TextAlignment.RIGHT}>
+  <p slot="content" class="size-md">
+    This team is dedicated to emphasizing the importance of product design and product management in
+    the tech industry. <span class="brand-pink brand-em">Design</span> focuses on educating students
+    about design principles, design tools, and the intricacies of conceptualization, development, and
+    management of a product.
+  </p>
+</PathSection>
+
+<Spacing --med="64px" />
+
+<PathSection info={acmDev} textAlign={TextAlignment.LEFT}>
+  <p slot="content" class="size-md">
+    This team is dedicated to giving students the opportunity to explore tech via hands-on projects
+    and activities. <span class="brand-em brand-bluer">Dev</span> focuses on introducing students to
+    software development, and the various tech stacks used in the industry.
+  </p>
+</PathSection>
+
+<Spacing --min="40px" --med="95px" --max="120px" />