119 lines
3.5 KiB
Svelte
119 lines
3.5 KiB
Svelte
|
<script lang="ts">
|
|||
|
|
import Content from "$lib/viewport/content.svelte";
|
|||
|
|
import Banner2 from "$lib/banner2.svelte";
|
|||
|
|
import TableOfContents from "$lib/components/table-of-contents.svelte";
|
|||
|
|
|
|||
|
|
export let data;
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<svelte:head>
|
|||
|
|
<title>Art Feed | denizk0461</title>
|
|||
|
|
</svelte:head>
|
|||
|
|
|
|||
|
|
{#snippet pageButtons(currentIndex: number)}
|
|||
|
|
<div class="page-button-container blurred-background">
|
|||
|
|
{#if currentIndex == 1}
|
|||
|
|
<p class="page-button page-button-left">x</p>
|
|||
|
|
{:else}
|
|||
|
|
<a class="page-button page-button-left page-button-clickable" href="?p={currentIndex - 1}"><</a>
|
|||
|
|
{/if}
|
|||
|
|
|
|||
|
|
{#each { length: data.maxPages }, index}
|
|||
|
|
<a class="page-index" href="?p={index + 1}">{index + 1}</a>
|
|||
|
|
{/each}
|
|||
|
|
|
|||
|
|
{#if currentIndex == data.maxPages}
|
|||
|
|
<p class="page-button page-button-right">x</p>
|
|||
|
|
{:else}
|
|||
|
|
<a class="page-button page-button-right page-button-clickable" href="?p={currentIndex + 1}">></a>
|
|||
|
|
{/if}
|
|||
|
|
</div>
|
|||
|
|
{/snippet}
|
|||
|
|
|
|||
|
|
<Content>
|
|||
|
|
<Banner2
|
|||
|
|
title="Art & Project Feed"
|
|||
|
|
banner="banner.webp"
|
|||
|
|
bannerAlt="Mirror picture of me, pixelated beyond recognition"
|
|||
|
|
subtitle="subtitle missing"
|
|||
|
|
/>
|
|||
|
|
|
|||
|
|
{@render pageButtons(data.currentPage)}
|
|||
|
|
|
|||
|
|
<p>Welcome to my (new) art feed! It is heavily inspired by <a href="https://deathsurplus.com/">DeathSurplus' art blog</a> – definitely go check out his page!</p>
|
|||
|
|
|
|||
|
|
<p>This page is intended to be a contrasting companion to the <a href="/projects"><code>projects</code> page</a>; I'll use this page for smaller things that don't fit the dedicated-page-format.</p>
|
|||
|
|
|
|||
|
|
<!-- <TableOfContents /> -->
|
|||
|
|
|
|||
|
|
{#each data.feedEntries as entry}
|
|||
|
|
<h2>{entry.title}</h2>
|
|||
|
|
<p class="subtitle">{entry.subtitle}</p>
|
|||
|
|
<p class="subtitle">{entry.date}</p>
|
|||
|
|
<svelte:component this={entry.content} />
|
|||
|
|
{/each}
|
|||
|
|
|
|||
|
|
</Content>
|
|||
|
|
|
|||
|
|
<style>
|
|||
|
|
.page-button-container {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: row;
|
|||
|
|
align-items: stretch;
|
|||
|
|
justify-content: center;
|
|||
|
|
border-radius: var(--border-radius);
|
|||
|
|
overflow: hidden;
|
|||
|
|
width: fit-content;
|
|||
|
|
margin: 12px auto;
|
|||
|
|
border-top: var(--border-style) var(--border-dash-size) var(--color-highlight-alt);
|
|||
|
|
border-bottom: var(--border-style) var(--border-dash-size) var(--color-highlight-alt);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.page-button, .page-index {
|
|||
|
|
font-family: var(--font-mono);
|
|||
|
|
padding: 8px 18px;
|
|||
|
|
font-weight: 600;
|
|||
|
|
margin: 0;
|
|||
|
|
transition: background-color var(--duration-animation) var(--anim-curve);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.page-button {
|
|||
|
|
color: var(--color-text);
|
|||
|
|
}
|
|||
|
|
.page-button-left {
|
|||
|
|
border-right: var(--border-style) var(--border-dash-size) var(--color-highlight-alt);
|
|||
|
|
}
|
|||
|
|
.page-button-right {
|
|||
|
|
border-left: var(--border-style) var(--border-dash-size) var(--color-highlight-alt);
|
|||
|
|
}
|
|||
|
|
.page-button-clickable:hover {
|
|||
|
|
cursor: pointer;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.page-index:link, .page-index:visited {
|
|||
|
|
color: var(--color-text)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.page-index:hover, .page-button-clickable:hover {
|
|||
|
|
text-decoration: none;
|
|||
|
|
background-color: var(--color-background-highlight-alt);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.subtitle {
|
|||
|
|
font-family: var(--font-mono);
|
|||
|
|
margin: 0;
|
|||
|
|
font-size: 1rem;
|
|||
|
|
line-height: 1.4rem;
|
|||
|
|
font-style: italic;
|
|||
|
|
font-weight: 700;
|
|||
|
|
color: var(--color-highlight-alt);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.subtitle::before {
|
|||
|
|
content: "<!-- ";
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.subtitle::after {
|
|||
|
|
content: " -->";
|
|||
|
|
}
|
|||
|
|
</style>
|