main page mostly finished

2025-04-03 20:01:00 +02:00
parent 50f0eb80aa
commit a03939d493
23 changed files with 210 additions and 10 deletions
--- a/src/lib/link-list.svelte
+++ b/src/lib/link-list.svelte
@@ -1 +1,66 @@
-<ul></ul>
+<script lang="ts">
+    export interface LinkEntry {
+        icon?: string;
+        text: string;
+        link: string;
+    }
+
+    let {
+        entries,
+    } : {
+        entries: LinkEntry[];
+    } = $props();
+</script>
+
+<ul>
+    {#each entries as entry}
+    <li>
+        <a href={entry.link}>
+            {#if entry.icon}
+            <img height="24px" src={entry.icon}>
+            {/if}
+            {entry.text}
+        </a>
+    </li>
+    {/each}
+</ul>
+
+<style>
+    ul {
+        padding: 0;
+    }
+
+    li::before {
+        content: "–";
+        color: var(--color-highlight);
+        padding-right: 8px;
+    }
+    li {
+        display: flex;
+        padding-left: 0;
+        margin-top: 4px;
+        margin-bottom: 4px;
+        transition: background-color 0.2s ease-in-out;
+        padding: 2px 12px;
+    }
+    li:hover {
+        background-color: var(--color-background-highlight-hover);
+    }
+    a {
+        width: 100%;
+        transition: color 0.2s ease-in-out;
+    }
+    a:link, a:visited {
+        color: var(--color-text);
+        text-decoration: none;
+    }
+    a:hover {
+        color: var(--color-highlight);
+    }
+
+    img {
+        filter: var(--color-text-img);
+        margin-top: 4px;
+        margin-bottom: -4px;
+    }
+</style>