From 963bcbf8892d0441fbcec33f7e3804b311cbd229 Mon Sep 17 00:00:00 2001 From: Max Nuding Date: Sat, 1 Apr 2023 20:05:52 +0200 Subject: [PATCH] UI improvements --- src/app.html | 19 ++++++------- src/lib/components/PostComponent.svelte | 18 ++++++++++--- src/routes/+page.svelte | 36 ++++++++++++++++++++++--- static/style.css | 25 +++++++++++++++++ 4 files changed, 83 insertions(+), 15 deletions(-) create mode 100644 static/style.css diff --git a/src/app.html b/src/app.html index 117bd02..8109779 100644 --- a/src/app.html +++ b/src/app.html @@ -1,12 +1,13 @@ - - - - - %sveltekit.head% - - -
%sveltekit.body%
- + + + + + + %sveltekit.head% + + +
%sveltekit.body%
+ diff --git a/src/lib/components/PostComponent.svelte b/src/lib/components/PostComponent.svelte index a0c3967..5bc09d2 100644 --- a/src/lib/components/PostComponent.svelte +++ b/src/lib/components/PostComponent.svelte @@ -8,12 +8,15 @@ $: dateCreated = new Date(post.created_at).toLocaleString(); +
- - {dateCreated} - {@html post.content} +
+ + {dateCreated} +
+
{@html post.content}
@@ -24,8 +27,17 @@ .post { display: flex; flex-direction: column; + flex-grow: 2; + } + .meta { + display: flex; + justify-content: space-between; } .avatar { margin-right: 1em; } + .content { + max-width: calc(600px - 1em - 50px); + overflow-x: auto; + } \ No newline at end of file diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 0e3fa4a..3e9cb74 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -35,7 +35,37 @@ onMount(async () => { } }) +

Metalhead.club music list

+
+
+
+ {#if data.posts.length === 0} + Sorry, no posts recommending music aave been found yet + {/if} + {#each data.posts as post (post.id)} +
+ {/each} +
+
+
+ \ No newline at end of file diff --git a/static/style.css b/static/style.css new file mode 100644 index 0000000..c4789c0 --- /dev/null +++ b/static/style.css @@ -0,0 +1,25 @@ +body { + --color-text: #2F0C7A; + --color-bg: white; + --color-border: #17063B; + --color-link: #563ACC; + --color-link-visited: #858AFA; + + color: var(--color-text); + background-color: var(--color-bg); +} + +a { + color: var(--color-link); +} +a:visited { + color: var(--color-link-visited); +} + +@media (prefers-color-scheme: dark) { + body { + --color-text: white; + --color-bg: #17063B; + --color-border: white; + } +} \ No newline at end of file