Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Refactored Spacing component to use CSS variables #184

Merged
merged 2 commits into from
Nov 2, 2021
Merged

Refactored Spacing component to use CSS variables #184

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9aa590d
Refactored Spacing component to use CSS variables
EthanThatOneKid Nov 2, 2021
8d792f4
Shortened the CSS variable names
EthanThatOneKid Nov 2, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 7 additions & 17 deletions src/lib/components/sections/spacing.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,32 +1,22 @@
<script lang="ts">
import { styleProps } from '$lib/actions/use-style-props';
export let amount: string = '100px';
export let minAmount: string = amount;
export let maxAmount: string = amount;
</script>

<div
use:styleProps={{
'min-spacing-height': minAmount,
'med-spacing-height': amount,
'max-spacing-height': maxAmount
}}
/>
<div />

<style>
div {
height: var(--min-spacing-height);
--med: 100px;
--min: var(--med, 100px);
--max: var(--med, 100px);
height: var(--min);
}

@media screen and (min-width: 768px) {
div {
height: var(--med-spacing-height);
height: var(--med);
}
}

@media screen and (min-width: 1440px) {
div {
height: var(--max-spacing-height);
height: var(--max);
}
}
</style>
2 changes: 1 addition & 1 deletion src/lib/components/utils/skip-navbar-content.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,4 +2,4 @@
import Spacing from '$lib/components/sections/spacing.svelte';
</script>

<Spacing amount="100px" minAmount="200px" maxAmount="250px" />
<Spacing --med="100px" --min="200px" --max="250px" />
2 changes: 2 additions & 0 deletions src/routes/__layout.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,13 @@
<script lang="ts">
import Navbar from '$lib/components/sections/navbar.svelte';
import SkipNavbarContent from '$lib/components/utils/skip-navbar-content.svelte';
import Footer from '$lib/components/sections/footer.svelte';

export let segment: string;
</script>

<Navbar {segment} />
<SkipNavbarContent />
<main><slot /></main>
<Footer />

Expand Down
15 changes: 7 additions & 8 deletions src/routes/about.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,11 +14,11 @@
};
</script>

<Spacing minAmount="100px" amount="175px" maxAmount="200px" />
<Spacing --min="100px" --med="175px" --max="200px" />

<Header />

<Spacing minAmount="32px" maxAmount="64px" />
<Spacing --min="32px" --max="64px" />

<CommonHero>
<h2 slot="headline" class="size-l">Who are we?</h2>
Expand All @@ -36,14 +36,13 @@
</p>
</CommonHero>

<Spacing amount="150px" />
<Spacing --med="150px" />

<!-- TODO: Get the content below from the `/events.json` endpoint and just
display the most upcoming event with a reminder/notice flair. -->
<Admonition
path="with-shadow/nodebuds"
expiration={new Date('Sat Oct 07 2021 00:00:00 GMT-0700').valueOf()}
>
expiration={new Date('Sat Oct 07 2021 00:00:00 GMT-0700').valueOf()}>
Looking to improve your computer science skills AND make a friend in the process? Join <span
class="headers brand-light">node<span class="brand-em brand-red">Buds</span></span
>, our mentorship program where students get paired with
Expand All @@ -53,17 +52,17 @@ display the most upcoming event with a reminder/notice flair. -->
<a href="/nbapp" class="link headers brand-light">Click here to apply now!</a>
</Admonition>

<Spacing amount="150px" />
<Spacing --med="150px" />

<div class="container">
<h2 class="headers size-l">Board members</h2>
</div>

<Spacing amount="16px" />
<Spacing --med="16px" />

<OfficerProfileList filter={filterOfficers} placeholderPicture="placeholder.png" />

<Spacing minAmount="40px" amount="95px" maxAmount="120px" />
<Spacing --min="40px" --med="95px" --max="120px" />

<style lang="scss">
@import 'static/theme.scss';
Expand Down
8 changes: 4 additions & 4 deletions src/routes/connect.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
const googleFormId = '1FAIpQLSfJanOAaL2mdjpf193tFeCClBzpW_COEO_crAE8hqsJCB_Rwg';
</script>

<Spacing minAmount="100px" amount="175px" maxAmount="200px" />
<Spacing --min="100px" --med="175px" --max="200px" />

<CommonHero>
<h2 slot="headline" class="size-l">Connect with us!</h2>
Expand All @@ -18,15 +18,15 @@
</p>
</CommonHero>

<Spacing amount="64px" />
<Spacing --med="64px" />

<SocialMediaLinks />

<Spacing minAmount="100px" amount="175px" maxAmount="200px" />
<Spacing --min="100px" --med="175px" --max="200px" />

<GetInTouchForm {googleFormId} />

<Spacing minAmount="40px" amount="95px" maxAmount="120px" />
<Spacing --min="40px" --med="95px" --max="120px" />

<style lang="scss">
@import 'static/theme.scss';
Expand Down
11 changes: 5 additions & 6 deletions src/routes/events.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
});
</script>

<Spacing minAmount="100px" amount="175px" maxAmount="200px" />
<Spacing --min="100px" --med="175px" --max="200px" />

<CommonHero>
<h2 slot="headline" class="size-l">Curated events for growth and success</h2>
Expand All @@ -29,16 +29,15 @@
workshops, info sessions, community building events, and much more!
<br /><br />
<span class="brand-med"
>Events are open to anyone interested, regardless of major or background experience.</span
>
>Events are open to anyone interested, regardless of major or background experience.</span>
</p>
</CommonHero>

<Spacing minAmount="100px" amount="125px" maxAmount="125px" />
<Spacing --min="100px" --med="125px" --max="125px" />

<h2 class="size-l headers">This week's events 📅</h2>

<Spacing amount="16px" />
<Spacing --med="16px" />

{#if events.length > 0}
<EventCarousel {events} />
Expand All @@ -54,7 +53,7 @@
</AcmEmpty>
{/if}

<Spacing minAmount="8px" amount="63px" maxAmount="88px" />
<Spacing --min="8px" --med="63px" --max="88px" />

<style lang="scss">
@import 'static/theme.scss';
Expand Down
10 changes: 5 additions & 5 deletions src/routes/index.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,20 +6,20 @@
import ReadyUp from '$lib/components/index/ready-up.svelte';
</script>

<Spacing minAmount="100px" amount="175px" maxAmount="200px" />
<Spacing --min="100px" --med="175px" --max="200px" />

<Hero />

<Spacing minAmount="100px" amount="175px" maxAmount="200px" />
<Spacing --min="100px" --med="175px" --max="200px" />

<WhyJoin />

<Spacing minAmount="100px" amount="175px" maxAmount="200px" />
<Spacing --min="100px" --med="175px" --max="200px" />

<AcmPaths />

<Spacing minAmount="100px" amount="175px" maxAmount="200px" />
<Spacing --min="100px" --med="175px" --max="200px" />

<ReadyUp />

<Spacing minAmount="40px" amount="95px" maxAmount="120px" />
<Spacing --min="40px" --med="95px" --max="120px" />
11 changes: 5 additions & 6 deletions src/routes/nodebuds.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
};
</script>

<Spacing minAmount="100px" amount="175px" maxAmount="200px" />
<Spacing --min="100px" --med="175px" --max="200px" />

<div class="container">
<section>
Expand All @@ -26,8 +26,7 @@
</span>
is our exclusive program in partnership with
<a href="/acm-w" class="w-text" target="_blank" rel="noopener noreferrer">
<span class="headers">ACM </span>W</a
>
<span class="headers">ACM </span>W</a>
that exposes students to various opportunities that encourage connection, skill building, as
well as both personal and technical development.
<br /><br />
Expand Down Expand Up @@ -65,17 +64,17 @@
</p>
</NodeBudsTestimonial> -->

<Spacing minAmount="100px" amount="175px" maxAmount="200px" />
<Spacing --min="100px" --med="175px" --max="200px" />

<div class="container">
<h2 class="headers size-l">Buddies</h2>
</div>

<Spacing amount="16px" />
<Spacing --med="16px" />

<OfficerProfileList filter={filterNodeBuddies} />

<Spacing minAmount="40px" amount="95px" maxAmount="120px" />
<Spacing --min="40px" --med="95px" --max="120px" />

<style lang="scss">
@import 'static/theme.scss';
Expand Down
10 changes: 5 additions & 5 deletions src/routes/paths.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
import Spacing from '$lib/components/sections/spacing.svelte';
</script>

<Spacing minAmount="100px" amount="175px" maxAmount="200px" />
<Spacing --min="100px" --med="175px" --max="200px" />

<CommonHero>
<h2 slot="headline" class="size-l">What are paths?</h2>
Expand All @@ -16,7 +16,7 @@
</p>
</CommonHero>

<Spacing minAmount="100px" amount="175px" maxAmount="200px" />
<Spacing --min="100px" --med="175px" --max="200px" />

<PathSection info={acmAlgo} textAlign="right">
<p slot="content" class="size-xs">
Expand All @@ -26,7 +26,7 @@
</p>
</PathSection>

<Spacing amount="64px" />
<Spacing --med="64px" />

<PathSection info={acmCreate} textAlign="left">
<p slot="content" class="size-xs">
Expand All @@ -37,7 +37,7 @@
</p>
</PathSection>

<Spacing amount="64px" />
<Spacing --med="64px" />

<PathSection info={acmDev} textAlign="right">
<p slot="content" class="size-xs">
Expand All @@ -47,7 +47,7 @@
</p>
</PathSection>

<Spacing minAmount="40px" amount="95px" maxAmount="120px" />
<Spacing --min="40px" --med="95px" --max="120px" />

<style lang="scss">
@import 'static/theme.scss';
Expand Down