diff --git a/src/assets/icons/arrow-left.svg b/src/assets/icons/arrow-left.svg new file mode 100644 index 0000000..10084bc --- /dev/null +++ b/src/assets/icons/arrow-left.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/icons/arrow-right.svg b/src/assets/icons/arrow-right.svg new file mode 100644 index 0000000..6d8b9cf --- /dev/null +++ b/src/assets/icons/arrow-right.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/lib/components/DynamicPostContent.svelte b/src/lib/components/DynamicPostContent.svelte index 315fc78..91a779e 100644 --- a/src/lib/components/DynamicPostContent.svelte +++ b/src/lib/components/DynamicPostContent.svelte @@ -4,6 +4,7 @@ import { formatDate } from '$lib/utils/date' import { renderEdraContent } from '$lib/utils/content' import { goto } from '$app/navigation' + import ArrowLeft from '$icons/arrow-left.svg' let { post }: { post: any } = $props() @@ -82,15 +83,7 @@ @@ -345,20 +338,28 @@ border-radius: 24px; outline: none; - &:hover:not(:disabled) { - .back-arrow { - transform: translateX(-3px); - } + &:hover:not(:disabled) :global(.back-arrow) { + transform: translateX(-3px); } &:focus-visible { box-shadow: 0 0 0 3px rgba($red-60, 0.25); } - .back-arrow { + :global(.back-arrow) { + width: 16px; + height: 16px; flex-shrink: 0; transition: transform 0.2s ease; margin-left: -$unit-half; + + :global(path) { + stroke: currentColor; + stroke-width: 2.25; + stroke-linecap: round; + stroke-linejoin: round; + fill: none; + } } } diff --git a/src/lib/components/ProjectContent.svelte b/src/lib/components/ProjectContent.svelte index 20adb6c..de0a8eb 100644 --- a/src/lib/components/ProjectContent.svelte +++ b/src/lib/components/ProjectContent.svelte @@ -1,5 +1,7 @@
- -
-
- {#if project.client} -
- Client - {project.client} -
- {/if} - - {#if project.year} -
- Year - {project.year} -
- {/if} - - {#if project.role} -
- Role - {project.role} -
- {/if} -
- - {#if project.externalUrl} -
- - Visit Project → - -
- {/if} -
- {#if project.caseStudyContent && project.caseStudyContent.content && project.caseStudyContent.content.length > 0}
@@ -109,13 +72,19 @@ {/if} - +
diff --git a/src/lib/components/ProjectHeaderContent.svelte b/src/lib/components/ProjectHeaderContent.svelte new file mode 100644 index 0000000..c2d1412 --- /dev/null +++ b/src/lib/components/ProjectHeaderContent.svelte @@ -0,0 +1,113 @@ + + +
+
+

{project.title}

+
+ {#if project.externalUrl} + + Visit + + {/if} +
+ + \ No newline at end of file diff --git a/src/routes/universe/[slug]/+page.svelte b/src/routes/universe/[slug]/+page.svelte index 098c766..83f613f 100644 --- a/src/routes/universe/[slug]/+page.svelte +++ b/src/routes/universe/[slug]/+page.svelte @@ -3,6 +3,7 @@ import DynamicPostContent from '$components/DynamicPostContent.svelte' import { getContentExcerpt } from '$lib/utils/content' import { goto } from '$app/navigation' + import ArrowLeft from '$icons/arrow-left.svg' import type { PageData } from './$types' let { data }: { data: PageData } = $props() @@ -45,15 +46,7 @@

Post Not Found

{error || "The post you're looking for doesn't exist."}

@@ -106,20 +99,28 @@ border-radius: 24px; outline: none; - &:hover:not(:disabled) { - .back-arrow { - transform: translateX(-3px); - } + &:hover:not(:disabled) :global(.back-arrow) { + transform: translateX(-3px); } &:focus-visible { box-shadow: 0 0 0 3px rgba($red-60, 0.25); } - .back-arrow { + :global(.back-arrow) { + width: 16px; + height: 16px; flex-shrink: 0; transition: transform 0.2s ease; margin-left: -$unit-half; + + :global(path) { + stroke: currentColor; + stroke-width: 2.25; + stroke-linecap: round; + stroke-linejoin: round; + fill: none; + } } } } diff --git a/src/routes/work/[slug]/+page.svelte b/src/routes/work/[slug]/+page.svelte index 3b71d44..cf5549b 100644 --- a/src/routes/work/[slug]/+page.svelte +++ b/src/routes/work/[slug]/+page.svelte @@ -1,6 +1,7 @@