jedmund/jedmund-svelte
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Mobile layout adjustments

Browse source
This commit is contained in:
Justin Edmund 2025-06-10 10:22:08 -07:00
parent f2a6bf3f99
commit 205244584f
12 changed files with 185 additions and 147 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
src/lib/components/Header.svelte
View file

@ -89,16 +89,13 @@
.header-content {
display: flex;
align-items: center;
justify-content: center;
gap: $unit-3x;
pointer-events: auto;
width: 100%;
max-width: 900px;
margin: 0 auto;
@include breakpoint('phone') {
gap: $unit-2x;
max-width: none;
justify-content: center;
}
}

9
src/lib/components/Page.svelte
View file

@ -1,8 +1,13 @@
<script lang="ts">
export let noHorizontalPadding = false
interface Props {
noHorizontalPadding?: boolean
class?: string
}
let { noHorizontalPadding = false, class: className = '' }: Props = $props()
</script>
<section class="page" class:no-horizontal-padding={noHorizontalPadding}>
<section class="page {className}" class:no-horizontal-padding={noHorizontalPadding}>
<header>
<slot name="header" />
</header>

5
src/lib/components/ProjectList.svelte
View file

@ -56,6 +56,11 @@
justify-content: center;
width: 100%;
@include breakpoint('phone') {
box-sizing: border-box;
padding: 0 $unit-2x;
}
ul {
display: flex;
flex-direction: column;

3
src/lib/components/UniverseFeed.svelte
View file

@ -29,7 +29,8 @@
.universe-feed {
display: flex;
flex-direction: column;
gap: $unit-3x;
gap: $unit-2x;
padding: 0 $unit-2x;
}
.empty-container {

4
src/lib/components/admin/Button.svelte
View file

@ -170,7 +170,7 @@
align-items: center;
justify-content: center;
gap: $unit;
font-weight: 500;
font-weight: 400;
border: none;
cursor: pointer;
transition: all 0.15s ease;
@ -211,7 +211,7 @@
}
.btn-medium {
padding: $unit $unit-2x;
padding: ($unit * 1.5) $unit-2x;
font-size: 14px;
border-radius: 24px;
min-height: 36px;

95
src/routes/about/+page.svelte
View file

@ -12,47 +12,48 @@
$: ({ albums, games, error } = data)
</script>
<Page>
<svelte:fragment slot="header">
<h2>A little about me</h2>
</svelte:fragment>
<section class="about-container">
<Page>
<svelte:fragment slot="header">
<h2>A little about me</h2>
</svelte:fragment>
<section class="bio">
<p>
Hello! My name is <em>Justin Edmund</em>. I'm a software designer and developer living in San
Francisco.
</p>
<p>
Right now, I'm spending my free time building a hobby journaling app called <a
href="https://maitsu.co"
target="_blank">Maitsu</a
>. I've spent time at several companies over the last 11 years, but you might know me from
<a href="https://www.pinterest.com/" target="_blank">Pinterest</a>, where I was the first
design hire.
</p>
<p>
I was born and raised in New York City and spend a lot of time in Tokyo. I graduated from <a
href="http://design.cmu.edu/"
target="_blank">Carnegie Mellon University</a
> in 2011 with a Bachelors of Arts in Communication Design.
</p>
</section>
</Page>
<Page>
<svelte:fragment slot="header">
<h2>Notable mentions</h2>
</svelte:fragment>
<section class="bio">
<p>
Hello! My name is <em>Justin Edmund</em>. I'm a software designer and developer living in
San Francisco.
</p>
<p>
Right now, I'm spending my free time building a hobby journaling app called <a
href="https://maitsu.co"
target="_blank">Maitsu</a
>. I've spent time at several companies over the last 11 years, but you might know me from
<a href="https://www.pinterest.com/" target="_blank">Pinterest</a>, where I was the first
design hire.
</p>
<p>
I was born and raised in New York City and spend a lot of time in Tokyo. I graduated from <a
href="http://design.cmu.edu/"
target="_blank">Carnegie Mellon University</a
> in 2011 with a Bachelors of Arts in Communication Design.
</p>
</section>
</Page>
<Page>
<svelte:fragment slot="header">
<h2>Notable mentions</h2>
</svelte:fragment>
<MentionList />
</Page>
<Page noHorizontalPadding={true}>
<svelte:fragment slot="header">
<h2>Now playing</h2>
</svelte:fragment>
<MentionList />
</Page>
<Page noHorizontalPadding={true}>
<svelte:fragment slot="header">
<h2>Now playing</h2>
</svelte:fragment>
<RecentAlbums {albums} />
<RecentAlbums {albums} />
<!-- <section class="latest-games">
<!-- <section class="latest-games">
{#if games && games.length > 0}
<ul>
{#each games.slice(0, 3) as game}
@ -63,9 +64,27 @@
<p>Loading games...</p>
{/if}
</section> -->
</Page>
</Page>
</section>
<style lang="scss">
.about-container {
display: flex;
flex-direction: column;
gap: $unit-2x;
justify-content: center;
max-width: 700px;
margin: 0 auto;
@include breakpoint('phone') {
padding: 0 $unit-2x;
}
:global(.page) {
margin: 0;
}
}
a,
em {
color: $red-60;

3
src/routes/labs/+page.svelte
View file

@ -39,7 +39,8 @@
padding: 0 $unit-2x;
@include breakpoint('phone') {
padding: $unit-3x $unit;
padding: 0 $unit-2x;
box-sizing: border-box;
}
}

143
src/routes/labs/[slug]/+page.svelte
View file

@ -11,74 +11,84 @@
const error = $derived(data.error as string | undefined)
</script>
{#if error}
<Page>
<div slot="header" class="error-header">
<h1>Error</h1>
</div>
<div class="error-content">
<p>{error}</p>
<a href="/labs" class="back-link">← Back to labs</a>
</div>
</Page>
{:else if !project}
<Page>
<div class="loading">Loading project...</div>
</Page>
{:else if project.status === 'list-only'}
<Page>
<div slot="header" class="error-header">
<h1>Project Not Available</h1>
</div>
<div class="error-content">
<p>This project is not yet available for viewing. Please check back later.</p>
<a href="/labs" class="back-link">← Back to labs</a>
</div>
</Page>
{:else if project.status === 'password-protected'}
<Page>
<ProjectPasswordProtection
projectSlug={project.slug}
correctPassword={project.password || ''}
projectType="labs"
>
{#snippet children()}
<div slot="header" class="project-header">
{#if project.logoUrl}
<div
class="project-logo"
style="background-color: {project.backgroundColor || '#f5f5f5'}"
>
<img src={project.logoUrl} alt="{project.title} logo" />
</div>
{/if}
<h1 class="project-title">{project.title}</h1>
{#if project.subtitle}
<p class="project-subtitle">{project.subtitle}</p>
{/if}
</div>
<ProjectContent {project} />
{/snippet}
</ProjectPasswordProtection>
</Page>
{:else}
<Page>
<div slot="header" class="project-header">
{#if project.logoUrl}
<div class="project-logo" style="background-color: {project.backgroundColor || '#f5f5f5'}">
<img src={project.logoUrl} alt="{project.title} logo" />
</div>
{/if}
<h1 class="project-title">{project.title}</h1>
{#if project.subtitle}
<p class="project-subtitle">{project.subtitle}</p>
{/if}
</div>
<ProjectContent {project} />
</Page>
{/if}
<div class="project-page-container">
{#if error}
<Page>
<div slot="header" class="error-header">
<h1>Error</h1>
</div>
<div class="error-content">
<p>{error}</p>
<a href="/labs" class="back-link">← Back to labs</a>
</div>
</Page>
{:else if !project}
<Page>
<div class="loading">Loading project...</div>
</Page>
{:else if project.status === 'list-only'}
<Page>
<div slot="header" class="error-header">
<h1>Project Not Available</h1>
</div>
<div class="error-content">
<p>This project is not yet available for viewing. Please check back later.</p>
<a href="/labs" class="back-link">← Back to labs</a>
</div>
</Page>
{:else if project.status === 'password-protected'}
<Page>
<ProjectPasswordProtection
projectSlug={project.slug}
correctPassword={project.password || ''}
projectType="labs"
>
{#snippet children()}
<div slot="header" class="project-header">
{#if project.logoUrl}
<div
class="project-logo"
style="background-color: {project.backgroundColor || '#f5f5f5'}"
>
<img src={project.logoUrl} alt="{project.title} logo" />
</div>
{/if}
<h1 class="project-title">{project.title}</h1>
{#if project.subtitle}
<p class="project-subtitle">{project.subtitle}</p>
{/if}
</div>
<ProjectContent {project} />
{/snippet}
</ProjectPasswordProtection>
</Page>
{:else}
<Page class="project-page">
<div slot="header" class="project-header">
{#if project.logoUrl}
<div
class="project-logo"
style="background-color: {project.backgroundColor || '#f5f5f5'}"
>
<img src={project.logoUrl} alt="{project.title} logo" />
</div>
{/if}
<h1 class="project-title">{project.title}</h1>
{#if project.subtitle}
<p class="project-subtitle">{project.subtitle}</p>
{/if}
</div>
<ProjectContent {project} />
</Page>
{/if}
</div>
<style lang="scss">
.project-page-container {
padding: 0 $unit-2x;
box-sizing: border-box;
}
/* Error and Loading States */
.error-header h1 {
color: $red-60;
@ -116,6 +126,7 @@
.project-header {
text-align: center;
width: 100%;
padding: $unit-2x 0;
}
.project-logo {

9
src/routes/photos/+page.svelte
View file

@ -8,7 +8,7 @@
const error = $derived(data.error)
</script>
<div class="photos-page">
<div class="photos-container">
{#if error}
<div class="error-container">
<div class="error-message">
@ -29,14 +29,15 @@
</div>
<style lang="scss">
.photos-page {
.photos-container {
width: 100%;
max-width: 900px;
max-width: 700px;
margin: 0 auto;
padding: 0 $unit-3x;
@include breakpoint('phone') {
padding: $unit-3x $unit-2x;
padding: 0 $unit-2x;
box-sizing: border-box;
}
}

12
src/routes/universe/+page.svelte
View file

@ -24,17 +24,7 @@
.universe-container {
max-width: 784px;
margin: 0 auto;
padding: 0 $unit-5x;
@include breakpoint('phone') {
margin-top: $unit-3x;
margin-bottom: $unit-3x;
padding: 0 $unit-3x;
}
@include breakpoint('small-phone') {
padding: 0 $unit-2x;
}
padding: 0;
}
.error-message {

41
src/routes/universe/[slug]/+page.svelte
View file

@ -39,26 +39,33 @@
{/if}
</svelte:head>
{#if error || !post}
<Page>
<div class="error-container">
<div class="error-content">
<h1>Post Not Found</h1>
<p>{error || "The post you're looking for doesn't exist."}</p>
<button onclick={() => goto('/universe')} class="back-button">
<ArrowLeft class="back-arrow" />
Back to Universe
</button>
<div class="universe-page-container">
{#if error || !post}
<Page>
<div class="error-container">
<div class="error-content">
<h1>Post Not Found</h1>
<p>{error || "The post you're looking for doesn't exist."}</p>
<button onclick={() => goto('/universe')} class="back-button">
<ArrowLeft class="back-arrow" />
Back to Universe
</button>
</div>
</div>
</div>
</Page>
{:else}
<Page>
<DynamicPostContent {post} />
</Page>
{/if}
</Page>
{:else}
<Page>
<DynamicPostContent {post} />
</Page>
{/if}
</div>
<style lang="scss">
.universe-page-container {
padding: 0 $unit-2x;
box-sizing: border-box;
}
.error-container {
display: flex;
justify-content: center;

3
src/routes/work/[slug]/+page.svelte
View file

@ -157,9 +157,10 @@
width: 100%;
max-width: 700px;
margin: 0 auto;
box-sizing: border-box;
@include breakpoint('phone') {
margin-top: $unit-3x;
padding: 0 $unit-2x;
}
:global(.page) {