Make design somewhat bearable

src/app.pcss

@@ -1,4 +1,8 @@
 /* Write your global styles here, in PostCSS syntax */
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
+@tailwind utilities;
+
+* {
+    box-sizing: border-box;
+}

src/lib/components/BackButton.svelte

@@ -3,7 +3,6 @@
     import {Fa} from 'svelte-fa';
     import {onMount} from "svelte";
 
-    /** @type {Props} */
     let { popCount = 1 } = $props();
     let href = $state();
     let pathnameParts = $state(null);
@@ -29,9 +28,6 @@
 
 </script>
 
-<a {href} class="h-full aspect-square">
-    <div class="flex flex-col gap-2 place-content-center">
-        <Fa size={'2x'} icon={faArrowLeft} />
-        <p>Back</p>
-    </div>
+<a {href} class="h-full flex flex-row aspect-square place-content-center justify-center items-center">
+    <Fa color="white" size={'2x'} icon={faArrowLeft} />
 </a>

src/lib/components/GlobalSearch.svelte

@@ -17,6 +17,6 @@
           loading.set(true);
           onsubmit?.(searchString, true);
       }}>
-    <input class="input py-1 px-2 w-96" type="text" placeholder="Search" bind:value={searchString} />
-    <button class="btn btn-md variant-filled" type="submit">Submit</button>
+    <input class="h-10 p-2" type="text" placeholder="Search" bind:value={searchString} />
+    <button class="h-10 p-2 text-white bg-gray-600" type="submit">Submit</button>
 </form>

src/lib/components/Header.svelte

@@ -1,9 +1,9 @@
 <script>
     import {BackAppRailAnchor, GlobalSearch} from "$lib/components";
-    let {onsubmit = null, back = null} = $props();
+    let {onsubmit = null, back = null, class: className} = $props();
 </script>
 
-<header class="top-0 fixed flex">
+<header class="sticky w-full top-0 flex bg-gray-800 py-2 px-4 gap-1 {className}">
     {#if back}
         <BackAppRailAnchor popCount={back} />
     {/if}

src/lib/components/ImageGrid.svelte

@@ -17,7 +17,7 @@
                      loading="lazy"
                      alt={`Post ${post.id}`} />
                 <div class="bg-black px-2 py-1">
-                    <p class="text-center text-dark-token">{post.id} {post.file.ext} {post.rating}</p>
+                    <p class="text-center text-white">{post.id} {post.file.ext} {post.rating}</p>
                 </div>
             </section>
         </a>

src/lib/components/index.js

@@ -1,5 +1,5 @@
 import AppSettings from './AppSettings.svelte';
-import BackAppRailAnchor from './BackAppRailAnchor.svelte';
+import BackAppRailAnchor from './BackButton.svelte';
 import GlobalSearch from './GlobalSearch.svelte';
 import ImageGrid from './ImageGrid.svelte';
 import PostMedia from './PostMedia.svelte';

src/routes/+layout.svelte

@@ -10,7 +10,7 @@
     let { children } = $props();
 </script>
 
-<div class="relative h-dvh">
+<div class="bg-gray-200">
     {#if $loading}
         <p class="absolute top-0 left-0">Loading</p>
     {/if}

src/routes/posts/[post_id]/+page.svelte

@@ -1,5 +1,5 @@
 <script>
-    import { faStar, faCaretUp, faCaretDown, faHeart } from '@fortawesome/free-solid-svg-icons';
+    import {faStar, faCaretUp, faCaretDown, faHeart, faCopy} from '@fortawesome/free-solid-svg-icons';
     import { Fa } from 'svelte-fa';
     import { PostMedia } from '$lib/components';
     import { onMount } from 'svelte';
@@ -22,52 +22,56 @@
     });
 </script>
 
-<div class="grid [grid-template-areas:'main_main_aside''footer_footer_footer']">
-    <Header back={2} onsubmit={(val = '') => {
+<div class="grid [grid-template-areas:'header_header_header''main_main_aside']">
+    <Header class="[grid-area:header]" back={2} onsubmit={(val = '') => {
         const queryParams = new URLSearchParams();
         queryParams.set('search', val);
         goto("/?" + queryParams.toString())
     }}></Header>
 
-    <main clasS="h-screen [grid-area-main]">
+    <main clasS="[grid-area:main]">
         <div class="container mx-auto flex flex-col items-center justify-center">
             {#if post}
                 <div class="card mb-4 flex flex-col">
-                    <section class="flex flex-col place-items-center">
+                    <section class="flex flex-col place-items-center bg-white">
                         <PostMedia {post} />
                     </section>
                     <section class="flex flex-row justify-between bg-black">
-                        <div class="btn-group variant-filled rounded-none">
-                            <button>
-                                    <span class:text-primary-500={!post.is_favorited} class:text-secondary-500={post.is_favorited}>
-                                        <Fa size={'1x'} icon={faHeart} />
-                                    </span>
+                        <div class="flex flex-row px-2 gap-2">
+                            <button class="py-2 px-3 flex flex-row place-items-center gap-1 text-white hover:text-black hover:bg-white">
+                                <span class:accent-yellow-50={!post.is_favorited} class:accent-yellow-500={post.is_favorited}>
+                                    <Fa size={'1.5x'} icon={faHeart} />
+                                </span>
                                 &nbsp;
                                 <span>
-                                        {post.fav_count}
-                                    </span>
+                                    {post.fav_count}
+                                </span>
                             </button>
-                            <button>
-                                    <span class="text-secondary-500">
-                                        <Fa size={'1x'} icon={faStar} />
-                                    </span>
+                        <button class="py-2 px-3 flex flex-row place-items-center text-white hover:text-black hover:bg-white">
+                                <span class="text-secondary-500">
+                                    <Fa size={'1.5x'} icon={faStar} />
+                                </span>
                                 &nbsp;
                                 {post.score.total}
                             </button>
-                            <button>
-                                <Fa size={'1x'} icon={faCaretUp} />
+                            <button class="py-2 px-3 flex flex-row place-items-center text-white hover:text-black hover:bg-white">
+                                <Fa size={'1.5x'} icon={faCaretUp} />
                             </button>
-                            <button>
-                                <Fa size={'1x'} icon={faCaretDown} />
+                            <button class="py-2 px-3 flex flex-row place-items-center text-white hover:text-black hover:bg-white">
+                                <Fa size={'1.5x'} icon={faCaretDown} />
                             </button>
                         </div>
-                        <div class="btn-group variant-filled rounded-none">
-                            <button>
+                        <div class="flex flex-row px-2 gap-2">
+                            <button class="py-2 px-3 flex flex-row place-items-center text-white hover:text-black hover:bg-white"
+                            onclick={() => {}}>
+                                <Fa size={'1.5x'} icon={faCopy} />
+                            </button>
+                            <button class="py-2 px-3 flex flex-row place-items-center text-white hover:text-black hover:bg-white">
                                 ID: {post.id}
                             </button>
                         </div>
                     </section>
-                    <footer class="card-footer pt-4">
+                    <footer class="card-footer py-4 px-2">
                         <h3 class="font-bold mb-2" class:line-through={post.description === ''} >Description</h3>
                         <p>{post.description}</p>
                     </footer>
@@ -76,16 +80,18 @@
         </div>
     </main>
 
-    <aside class="[grid-area-aside]">
+    <aside class="[grid-area:aside]">
         {#if post}
-            <div class="p-2 h-dvh">
+            <div class="p-2">
                 {#each tagTypes as [name, label]}
-                    <div class="mb-2">
-                        <p class="font-bold">{label}</p>
-                        {#each post.tags[name] as tag}
-                            <p>{tag}</p>
-                        {/each}
-                    </div>
+                    {#if post.tags[name].length > 0}
+                        <div class="mb-2">
+                            <p class="font-bold">{label}</p>
+                            {#each post.tags[name] as tag}
+                                <p>{tag}</p>
+                            {/each}
+                        </div>
+                    {/if}
                 {/each}
             </div>
         {/if}

tailwind.config.cjs

@@ -1,8 +1,9 @@
 /** @type {import('tailwindcss').Config} */
 export default {
   content: ['./src/**/*.{html,js,svelte,ts}'],
+  safelist: ['accent-yellow-500', 'accent-yellow-50'],
   theme: {
     extend: {}
   },
-  plugins: []
+  plugins: [],
 };