Wombosvideo/f.bosin.ch
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update page design

Browse Source
This commit is contained in:
Luca Bosin
2023-08-25 21:26:34 +02:00
parent 52f05db659
commit b239c72fc0
7 changed files with 212 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/lib/components/Gallery.svelte
View File

@ -14,7 +14,8 @@
<section>
<ul>
{#each (items || album.items) as item (item.item)}
<Photo src={`${base}${item.item}`} {album} {item} />
{@const src = `${base}${item.item}`}
<Photo {src} {album} {item} />
{/each}
</ul>
</section>
@ -22,10 +23,18 @@
<style>
section {
display: block;
padding: 1.5rem;
}
ul {
display: flex;
--image-width: 24rem;
--image-height: calc(var(--image-width) * 2 / 3);
display: grid;
grid-template-columns: repeat(auto-fill, var(--image-width));
justify-content: center;
width: 100%;
max-width: 80rem;
margin: 0 auto;
list-style: none;
gap: 1em;
}

131
src/lib/components/Header.svelte
View File

@ -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>

2
src/lib/components/Icon.svelte
View File

@ -22,7 +22,7 @@
/** Load the icon from the `$lib/icons` folder. */
async function loadIcon(mdi: string) {
if (mdi === mdiOld) return;
path = (await import(`$lib/icons/${mdi}.js`)).default;
path = (await import(`$lib/icons/${mdi}.ts`)).default;
}
</script>

58
src/lib/components/Photo.svelte
View File

@ -17,8 +17,10 @@
/** The click handler for the image. */
async function clickHandler(event: MouseEvent) {
event.preventDefault();
console.log('click', event);
if (!event.shiftKey && !event.ctrlKey) {
event.preventDefault();
}
}
/** The right click handler for the image. */
@ -50,10 +52,10 @@
<picture>
<source media="(min-width: 2560px)" srcset="{src}/t/l" />
<source media="(min-width: 1600px)" srcset="{src}/t/m" />
<img src="{src}/t" {alt} loading={lazy ? 'lazy' : 'eager'} />
<img src="{src}/t" {alt} loading={lazy ? 'lazy' : 'eager'} {title} />
</picture>
<figcaption>
<b>{title}</b>
<strong>{title}</strong>
<cite>{author}</cite>
</figcaption>
</figure>
@ -67,25 +69,34 @@
position: relative;
height: fit-content;
border-radius: 10px;
overflow: hidden;
min-width: 28.125em
}
figure {
width: 28.125em;
height: 18.75em;
width: var(--image-width, 28.125em);
height: var(--image-height, 18.75em);
background-color: rgba(0,0,0,.25);
background-image: linear-gradient(rgba(0,0,0,.125), rgba(0,0,0,.25)), var(--image);
background-position: center;
background-size: cover;
overflow: hidden;
border-radius: 10px;
}
picture {
position: relative;
}
img {
position: absolute;
width: 28.125em;
height: 18.75em;
width: var(--image-width, 28.125em);
height: var(--image-height, 18.75em);
object-fit: contain;
top: 0;
border-radius: 10px;
overflow: hidden;
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
transform: scale(1.001);
transition: transform .5s cubic-bezier(.23,.13,.45,.97), clip-path .5s cubic-bezier(.23,.13,.45,.97);
}
figcaption {
@ -94,7 +105,7 @@
bottom: 0;
left: 0;
width: 100%;
padding: 1em;
padding: 1.5em;
opacity: 0;
transition: opacity .5s;
z-index: 1;
@ -102,8 +113,9 @@
pointer-events: none;
}
b {
strong {
font-size: 1.25em;
letter-spacing: .05em;
}
cite {
@ -120,17 +132,31 @@
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,.5);
color: inherit;
background-color: transparent;;
color: transparent;
text-decoration: none;
opacity: 0;
transition: opacity .5s;
transition: background-color .5s, color .5s;
justify-content: center;
align-content: center;
border-radius: 10px;
overflow: hidden;
}
li:hover :is(figcaption, a) {
a:focus {
outline: 2px solid var(--main-text-color);
}
li:hover img {
transform: scale(1.25);
}
li:hover figcaption {
opacity: 1;
}
li:hover a {
background-color: rgba(0,0,0,.75);
color: inherit;
}
</style>

8
src/lib/data/language.ts
View File

@ -5,6 +5,7 @@ export const language: Writable<TranslationKey> = writable('de');
const translations: Record<TranslationKey, Record<string, string>> = {
de: {
'gallery': 'Galerie',
'gallery-description': 'Fotogalerie von Luca Bosin',
'album': 'Album',
'albums': 'Alben',
'photo': 'Foto',
@ -19,9 +20,13 @@ const translations: Record<TranslationKey, Record<string, string>> = {
'open-name': '{0} öffnen',
'download': 'Herunterladen',
'download-all': 'Alle herunterladen',
'author': 'Autor',
'authors': 'Autoren',
'license': 'Lizenz',
},
en: {
'gallery': 'Gallery',
'gallery-description': 'Photo gallery by Luca Bosin',
'album': 'Album',
'albums': 'Albums',
'photo': 'Photo',
@ -36,6 +41,9 @@ const translations: Record<TranslationKey, Record<string, string>> = {
'open-name': 'Open {0}',
'download': 'Download',
'download-all': 'Download all',
'author': 'Author',
'authors': 'Authors',
'license': 'License',
}
};

24
src/lib/styles/base.css
View File

@ -1,12 +1,30 @@
:root {
--main-text-color: #1a1a1a;
--main-bg-color: #fff;
--interactive-color: var(--main-text-color);
--interactive-text-color: var(--main-text-color);
--interactive-text-hover-color: var(--main-bg-color);
--interactive-bg-color: #d4d4d4;
--interactive-bg-hover-color: var(--main-text-color);
--primary-color: #1a1a1a;
}
@media screen and (prefers-color-scheme: dark) {
:root {
--main-text-color: #e7e7e7;
--main-bg-color: #1a1a1a;
--main-bg-color: #181818;
/* --interactive-color: var(--main-text-color); */
/* --interactive-text-color: var(--main-text-color); */
--interactive-text-hover-color: #fff;
--interactive-bg-color: #272727;
--interactive-bg-hover-color: #353535;
/* --primary-color: #1a1a1a; */
}
}
@ -16,7 +34,7 @@
border: 0;
box-sizing: border-box;
font-size: 1em;
font-family: 'Roboto', 'Open Sans', sans-serif;
font-family: 'Poppins', sans-serif;
}
html,
@ -28,7 +46,7 @@ body,
}
body {
font-family: sans-serif;
font-family: 'Poppins', sans-serif;
background-color: var(--main-bg-color);
color: var(--main-text-color);
}

10
src/routes/[slug]/[[timestamp]]/+page.svelte
View File

@ -4,17 +4,13 @@
import Header from '$lib/components/Header.svelte';
import Gallery from '$lib/components/Gallery.svelte';
import type { PageData } from './$types';
import Footer from '$lib/components/Footer.svelte';
export let data: PageData;
</script>
<Header title={$strf(data.album.title)}/>
<p>
<b>Description:</b> {#if data.album.description}{$strf(data.album.description)}{:else}<i>no description</i>{/if}<br />
<b>Authors: </b> {#if data.album.authors}{Array.isArray(data.album.authors) ? data.album.authors.join(', ') : data.album.authors}{:else}<i>unknown author</i>{/if}<br />
<b>Sorting Date:</b> {data.album.date}<br />
<b>License:</b> {data.album.license}<br />
</p>
<main>
<Header album={data.album} base={data.base} />
<Gallery album={data.album} base={`${data.base}/i/`} />
<Footer />
</main>