Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
ae536ba
commit a306b5b
Showing
4 changed files
with
196 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
export enum TextAlignment { | ||
LEFT = 'left', | ||
RIGHT = 'right', | ||
CENTER = 'center', | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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" /> |