diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index a296a63..95d7375 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -454,5 +454,61 @@ font-family: var(--font-sans-serif); padding: 4px; } + + /* TODO this should be in a component! */ + .post-tag { + font-family: var(--font-mono); + font-size: 0.8rem; + background-color: var(--color-background-highlight-alt); + margin: 0; + padding: 4px; + border-radius: 8px; + line-height: 1rem; + font-weight: 600; + } + + .tag-filter-header { + font-family: var(--font-mono); + font-size: 0.9rem; + /* margin-left: 10px; + margin-right: 10px; */ + margin: 12px 10px 4px; + color: var(--color-text-highlight-alt); + } + + .tag-filter-container { + display: flex; + gap: 8px 12px; + margin: 0 10px 8px; + flex-wrap: wrap; + } + + .tag-filter { + width: fit-content; + font-size: 0.9rem; + color: var(--color-text); + padding: 8px; + border-radius: 12px; + cursor: pointer; + transition: background-color var(--duration-animation) var(--anim-curve); + } + + .tag-filter-selected { + background-color: var(--color-highlight-alt); + } + + .tag-filter:hover { + background-color: var(--color-background-highlight-hover-alt); + } + + @media screen and (max-width: 600px) { + .tag-filter-container { + gap: 8px; + } + + .tag-filter { + font-size: 0.8rem; + } + } } \ No newline at end of file diff --git a/src/routes/blog/+layout.svelte b/src/routes/blog/+layout.svelte deleted file mode 100644 index 87f21ce..0000000 --- a/src/routes/blog/+layout.svelte +++ /dev/null @@ -1,20 +0,0 @@ - - -{@render children()} - - diff --git a/src/routes/blog/+page.svelte b/src/routes/blog/+page.svelte index a929559..2b0d037 100644 --- a/src/routes/blog/+page.svelte +++ b/src/routes/blog/+page.svelte @@ -17,7 +17,6 @@ } let a: BlogPostLink[] = posts.filter((post) => post.post.tags.includes(filter)) - console.log(a); return a; } @@ -45,50 +44,4 @@ - - - \ No newline at end of file + \ No newline at end of file diff --git a/src/routes/projects/+page.svelte b/src/routes/projects/+page.svelte index 34d1c63..e75355c 100644 --- a/src/routes/projects/+page.svelte +++ b/src/routes/projects/+page.svelte @@ -1,28 +1,13 @@ @@ -46,14 +40,22 @@

Welcome to my (new) projects page! Here I show off all the things I have done. Projects are ordered reverse-chronologically and have some other neat information displayed. have fun browsing~!

-

This page, in its current form, is inspired by DeathSurplus' art blog – definitely go check out his website!

+

I'll add some more of my past projects, new projects, and more details about individual projects. Maybe I'll also split the content into pages.

-

I'll add some more of my past projects, new projects, and an option to filter by project type soon™. Maybe I'll also split the content into pages.

- -
+ +

# filter projects by category:

+
+ {#each Object.values(ProjectCategory) as tag} + {#if tag == filter} + + {:else} + + {/if} + {/each} +
- {#each projects as p} + {#each filterProjects() as p} {@render project(p)} {/each}
@@ -93,42 +95,9 @@ {/snippet} - -