@@ -187,14 +190,12 @@
transform-style: preserve-3d;
will-change: transform;
- // Prevent overflow issues with 3D transforms
- -webkit-mask-image: -webkit-radial-gradient(white, black);
- mask-image: radial-gradient(white, black);
+ // Remove mask-image to allow shadows to render properly
&:hover {
box-shadow:
- 0 10px 30px rgba(0, 0, 0, 0.12),
- 0 2px 10px rgba(0, 0, 0, 0.08);
+ 0 10px 30px rgba(0, 0, 0, 0.1),
+ 0 1px 8px rgba(0, 0, 0, 0.06);
.project-title {
color: $red-60;
@@ -203,6 +204,15 @@
&.clickable {
cursor: pointer;
+
+ &:focus {
+ outline: 2px solid $red-60;
+ outline-offset: 2px;
+ }
+
+ &:focus:not(:focus-visible) {
+ outline: none;
+ }
}
@include breakpoint('phone') {
@@ -224,6 +234,8 @@
:global(.btn) {
flex-shrink: 0;
margin-top: 2px; // Align with title baseline
+ font-size: 1rem !important; // Match detail page Visit button
+ min-height: auto !important; // Remove min-height to match detail page
}
}
@@ -235,13 +247,13 @@
.project-title {
margin: 0;
- font-size: 1.125rem;
+ font-size: 1rem;
font-weight: 400;
color: $grey-00;
line-height: 1.3;
@include breakpoint('phone') {
- font-size: 1.125rem;
+ font-size: 1rem;
}
}
@@ -254,7 +266,7 @@
.project-description {
margin: 0 0 $unit-3x 0;
- font-size: 1.125rem;
+ font-size: 1rem;
line-height: 1.5;
color: $grey-20;
diff --git a/src/lib/components/Mention.svelte b/src/lib/components/Mention.svelte
index b10176f..62c5dd2 100644
--- a/src/lib/components/Mention.svelte
+++ b/src/lib/components/Mention.svelte
@@ -1,9 +1,19 @@
-
diff --git a/src/lib/components/NavDropdown.svelte b/src/lib/components/NavDropdown.svelte
new file mode 100644
index 0000000..e2fa2df
--- /dev/null
+++ b/src/lib/components/NavDropdown.svelte
@@ -0,0 +1,237 @@
+
+
+
+
+
diff --git a/src/lib/components/Page.svelte b/src/lib/components/Page.svelte
index 508e566..e12f243 100644
--- a/src/lib/components/Page.svelte
+++ b/src/lib/components/Page.svelte
@@ -1,13 +1,26 @@
-
-
-
+
+ {#if header}
+
+ {@render header()}
+
+ {/if}
-
diff --git a/src/lib/components/PostItem.svelte b/src/lib/components/PostItem.svelte
index 62e5ade..9ac7d18 100644
--- a/src/lib/components/PostItem.svelte
+++ b/src/lib/components/PostItem.svelte
@@ -57,7 +57,7 @@
&.note {
.post-excerpt {
- font-size: 1.125rem;
+ font-size: 1rem;
}
}
@@ -107,7 +107,7 @@
.post-excerpt {
margin: 0;
color: $grey-00;
- font-size: 1.125rem;
+ font-size: 1rem;
line-height: 1.5;
display: -webkit-box;
-webkit-box-orient: vertical;
diff --git a/src/lib/components/ProjectContent.svelte b/src/lib/components/ProjectContent.svelte
index 5ae021d..b0b7a5f 100644
--- a/src/lib/components/ProjectContent.svelte
+++ b/src/lib/components/ProjectContent.svelte
@@ -1,7 +1,6 @@
diff --git a/src/lib/components/admin/ProjectImagesForm.svelte b/src/lib/components/admin/ProjectImagesForm.svelte
new file mode 100644
index 0000000..bb56332
--- /dev/null
+++ b/src/lib/components/admin/ProjectImagesForm.svelte
@@ -0,0 +1,138 @@
+
+
+
@@ -161,32 +132,17 @@
>
{/if}
- {#if type === 'textarea' && isTextarea(restProps)}
-
- {:else}
-
- {/if}
+
{#if suffixIcon}
+
+
+
\ No newline at end of file
diff --git a/src/lib/components/admin/ProjectMetadataForm.svelte b/src/lib/components/admin/ProjectMetadataForm.svelte
index d8fce21..c0a1861 100644
--- a/src/lib/components/admin/ProjectMetadataForm.svelte
+++ b/src/lib/components/admin/ProjectMetadataForm.svelte
@@ -1,51 +1,58 @@
+
+
+ {#if showFeaturedImage}
+ Images
+ {#if !showFeaturedImage} + + {/if} +
-
-
-
+
+ {#snippet children()}
+
+
+
\ No newline at end of file
diff --git a/src/lib/components/admin/Select.svelte b/src/lib/components/admin/Select.svelte
index 345b288..8721db3 100644
--- a/src/lib/components/admin/Select.svelte
+++ b/src/lib/components/admin/Select.svelte
@@ -49,6 +49,7 @@
.select-wrapper {
position: relative;
display: inline-block;
+ width: 100%;
}
.select {
@@ -59,6 +60,7 @@
transition: all 0.2s ease;
appearance: none;
padding-right: 36px;
+ width: 100%;
&:focus {
outline: none;
diff --git a/src/lib/components/admin/SelectField.svelte b/src/lib/components/admin/SelectField.svelte
new file mode 100644
index 0000000..cd831b5
--- /dev/null
+++ b/src/lib/components/admin/SelectField.svelte
@@ -0,0 +1,60 @@
+
+
+
+ {#snippet children()}
+
+ {/snippet}
+
+
+
\ No newline at end of file
diff --git a/src/lib/components/admin/Textarea.svelte b/src/lib/components/admin/Textarea.svelte
new file mode 100644
index 0000000..cbc53cd
--- /dev/null
+++ b/src/lib/components/admin/Textarea.svelte
@@ -0,0 +1,266 @@
+
+
+
-
-
+
+
+ {#snippet header()}
+
-
-
-
-
-
+
+
+
+
+ {#snippet header()}
+
-
-
-
+
+
+ {#snippet header()}
+
+
+
diff --git a/src/routes/labs/[slug]/+page.svelte b/src/routes/labs/[slug]/+page.svelte
index 7f4f44e..f3e1e11 100644
--- a/src/routes/labs/[slug]/+page.svelte
+++ b/src/routes/labs/[slug]/+page.svelte
@@ -1,6 +1,8 @@
{#if error}
-
-
+
{:else if project.status === 'list-only'}
-
-{:else if project.status === 'password-protected'}
-
-
- {#snippet children()}
-
+
-
-
-
+
+ {/snippet}
+
+ {#each options as option}
+
+ {/each}
+
+
+ {#if label}
+
+ {/if}
+
+
+
+
diff --git a/src/lib/components/edra/editor.css b/src/lib/components/edra/editor.css
index d3dda51..b249457 100644
--- a/src/lib/components/edra/editor.css
+++ b/src/lib/components/edra/editor.css
@@ -131,8 +131,8 @@ input[type='checkbox'] {
display: grid;
place-content: center;
cursor: pointer;
- width: 1.125rem;
- height: 1.125rem;
+ width: 1rem;
+ height: 1rem;
border-radius: 0.25rem;
}
diff --git a/src/lib/types/project.ts b/src/lib/types/project.ts
index e11df9a..8b4553f 100644
--- a/src/lib/types/project.ts
+++ b/src/lib/types/project.ts
@@ -12,7 +12,6 @@ export interface Project {
role: string | null
featuredImage: string | null
logoUrl: string | null
- gallery: any[] | null
externalUrl: string | null
caseStudyContent: any | null
backgroundColor: string | null
@@ -39,7 +38,6 @@ export interface ProjectFormData {
backgroundColor: string
highlightColor: string
logoUrl: string
- gallery: any[] | null
status: ProjectStatus
password: string
caseStudyContent: any
@@ -58,7 +56,6 @@ export const defaultProjectFormData: ProjectFormData = {
backgroundColor: '',
highlightColor: '',
logoUrl: '',
- gallery: null,
status: 'draft',
password: '',
caseStudyContent: {
diff --git a/src/routes/about/+page.svelte b/src/routes/about/+page.svelte
index 7f77695..06c8c6d 100644
--- a/src/routes/about/+page.svelte
+++ b/src/routes/about/+page.svelte
@@ -7,52 +7,55 @@
import type { PageData } from './$types'
- export let data: PageData
+ let { data } = $props<{ data: PageData }>()
- $: ({ albums, games, error } = data)
+ let albums = $derived(data.albums)
+ let games = $derived(data.games)
+ let error = $derived(data.error)
-
+
+
+
+ {#if (error || helpText || showCharCount) && !disabled}
+
+ {/if}
+A little about me
-A little about me
+ {/snippet} -- Hello! My name is Justin Edmund. I'm a software designer and developer living in San - Francisco. -
-- Right now, I'm spending my free time building a hobby journaling app called Maitsu. I've spent time at several companies over the last 11 years, but you might know me from - Pinterest, where I was the first - design hire. -
-- I was born and raised in New York City and spend a lot of time in Tokyo. I graduated from Carnegie Mellon University in 2011 with a Bachelors of Arts in Communication Design. -
-Notable mentions
-+ Hello! My name is Justin Edmund. I'm a software designer and developer living in + San Francisco. +
++ Right now, I'm spending my free time building a hobby journaling app called Maitsu. I've spent time at several companies over the last 11 years, but you might know me from + Pinterest, where I was the first + design hire. +
++ I was born and raised in New York City and spend a lot of time in Tokyo. I graduated from Carnegie Mellon University in 2011 with a Bachelors of Arts in Communication Design. +
+Notable mentions
+ {/snippet} -Now playing
-Now playing
+ {/snippet} -
-
- Error
-
-
- {error}
- ← Back to labs -
+
+
+
{:else if !project}
+
+ {error}
+Loading project...
-
+ {#snippet header()}
+ Project Not Available
-
+
+ {/snippet}
Project Not Available
+
- {#if project.logoUrl}
-
- 
-
- {/if}
- {project.title}
- {#if project.subtitle} -{project.subtitle}
- {/if} +{:else if project.status === 'password-protected' || project.status === 'published'} +
+
+ {#snippet header()}
+
-{:else}
-
-
+
+
{/if}
diff --git a/src/routes/photos/+page.svelte b/src/routes/photos/+page.svelte
index deeb722..6779a51 100644
--- a/src/routes/photos/+page.svelte
+++ b/src/routes/photos/+page.svelte
@@ -8,7 +8,7 @@
const error = $derived(data.error)
-
+
-
- {#if project.logoUrl}
-
+ {#snippet children()}
+
+ {:else}
+
-
-
-
+ {#if project.status === 'password-protected'}
+ {project.title}
- {#if project.subtitle} -{project.subtitle}
- {/if} -
+
-
/* Error and Loading States */
+ .error-container {
+ width: 100%;
+ max-width: 700px;
+ margin: 0 auto;
+ box-sizing: border-box;
+ padding: 0 $unit-2x;
+ }
+
.error-header h1 {
color: $red-60;
font-size: 2rem;
@@ -141,25 +154,15 @@
padding: $unit-4x;
}
- .back-link {
- color: $grey-40;
- text-decoration: none;
- font-size: 0.925rem;
- transition: color 0.2s ease;
-
- &:hover {
- color: $grey-20;
- }
- }
-
/* Project Wrapper */
.project-wrapper {
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) {
{#if error}
-
+
{:else if project.status === 'password-protected' || project.status === 'published'}
@@ -95,9 +98,11 @@
{/if}
@@ -20,7 +20,7 @@
{:else}
@@ -29,14 +29,15 @@
diff --git a/src/routes/universe/[slug]/+page.svelte b/src/routes/universe/[slug]/+page.svelte
index 83f613f..e4f4a98 100644
--- a/src/routes/universe/[slug]/+page.svelte
+++ b/src/routes/universe/[slug]/+page.svelte
@@ -1,9 +1,8 @@
{#if error}
- No photos yet
-Photography albums will appear here once published.
+Photos and albums will be added soon
-
- Error
-
-
- {error}
- ← Back to home -
+
+
+
{:else if !project}
+
+ Error
+
+
+ {error}
+Loading project...
@@ -70,7 +73,7 @@
-
+ {#snippet header()}
+
+
+ {/snippet}
{#if project.status === 'password-protected'}