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 { .header-content {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center;
gap: $unit-3x; gap: $unit-3x;
pointer-events: auto; pointer-events: auto;
width: 100%; width: 100%;
max-width: 900px;
margin: 0 auto;
@include breakpoint('phone') { @include breakpoint('phone') {
gap: $unit-2x; gap: $unit-2x;
max-width: none;
justify-content: center;
} }
} }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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