Update page design

src/lib/components/Header.svelte

@@ -1,19 +1,140 @@
 <script lang="ts">
+	import { str, strf } from "$lib/data/language";
 	import Icon from "./Icon.svelte";
 
-  export let title = 'Galerie';
-  export let description = '';
+  /** The album. */
+  export let album: Album | undefined = undefined;
+
+  /** The title. Set to `undefined` (or leave unset) to use the title the album (if exists, `Galerie` otherwise). */
+  export let title: string | undefined = undefined;
+
+  /** The description. Set to `undefined` (or leave unset) to use the description the album (if exists, `Fotogalerie von Luca Bosin` otherwise). */
+  export let description: string | undefined = undefined;
+
+  /** The back link. Set to `undefined` (or leave unset) to hide the back link. */
   export let back: string | undefined = undefined;
+
+  /** Base URL */
+  export let base = '';
+
+  $: displayTitle = title || (album && album.title ? $strf(album.title) : $str('gallery'));
+  $: displayDescription = description || (album && album.description ? $strf(album.description) : $str('gallery-description'));
+  $: displayAuthors = album && album.authors ? (
+                Array.isArray(album.authors) ?
+                  album.authors.join(', '):
+                typeof album.authors === 'string' ?
+                  album.authors:
+                "unknown author"):
+              "Luca Bosin";
+  $: displayAuthorsTitle = album && album.authors ? (
+                Array.isArray(album.authors) ?
+                  album.authors.length > 1 ?
+                    $str('authors'):
+                    $str('author'):
+                typeof album.authors === 'string' ?
+                  $str('author'):
+                "unknown author"):
+              $str('author');
 </script>
 
 <header>
-  <section class="title">
+  <section>
     {#if back}
       <a href={back}>
         <Icon mdi="arrow-left" />
       </a>
     {/if}
-    <h1>{title}</h1>
-    <p>{description}</p>
+    <h1>{displayTitle}</h1>
+    <p>{displayDescription}</p>
   </section>
+  {#if album}
+    <section class="nospace">
+      <dl>
+        <dt>{displayAuthorsTitle}</dt>
+        <dd>{displayAuthors}</dd>
+        <dt>{$str('license')}</dt>
+        <dd><a href={`${base}/license`} tabindex="0">{album.license}</a></dd>
+      </dl>
+      <menu>
+        {#if album.allowDownload !== false}
+          <li>
+            <a href={`${base}/download`} tabindex="0">{$str('download-all')}</a>
+          </li>
+        {/if}
+      </menu>
+    </section>
+  {/if}
 </header>
+
+<style>
+  header {
+    display: block;
+    padding: 1.5rem 0;
+  }
+
+  section:not(.nospace) {
+    padding-top: 1.5rem;
+  }
+
+  section {
+    padding-right: 1.5rem;
+    padding-bottom: 1.5rem;
+    padding-left: 1.5rem;
+    margin: 0 auto;
+    max-width: 80rem;
+  }
+
+  h1 {
+    font-size: 2.5rem;
+    margin-bottom: 1.2rem;
+    font-weight: 500;
+  }
+
+  dl {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    row-gap: .25rem;
+    column-gap: 1rem;
+  }
+
+  dt {
+    font-weight: 600;
+  }
+
+  dd a {
+    color: inherit;
+    border-radius: 3px;
+  }
+
+  dd a:focus {
+    outline: 2px solid var(--main-text-color);
+    outline-offset: 2px;
+  }
+
+  menu {
+    list-style: none;
+  }
+
+  menu :has(> *) {
+    padding-top: 1rem;
+  }
+
+  menu a {
+    display: inline-block;
+    padding: .5rem 1rem;
+    border-radius: 8px;
+    background-color: var(--interactive-bg-color);
+    color: var(--interactive-text-color);
+    transition: background-color .2s, color .2s;
+    text-decoration: none;
+  }
+
+  menu a:hover {
+    background-color: var(--interactive-bg-hover-color);
+    color: var(--interactive-text-hover-color);
+  }
+
+  menu a:focus {
+    outline: 2px solid var(--main-text-color);
+  }
+</style>