124 lines
3.9 KiB
Svelte
124 lines
3.9 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 offer a shared space for all my projects without the need to create strictly-separated pages for each hobby. Some other pages on this website have been merged into this one; namely the "Small Projects" and "Drawing Gallery" pages, so don't be surprised if content from those pages shows up here.</p>
|
||
|
||
<p>I'll add some more of my past projects, new projects, and an option to filter by project type <i>soon™</i>. Maybe I'll also split the content into pages, if I ever figure out how to do that.</p>
|
||
|
||
<p>I <b>MAY</b> merge this with the <a href="/projects">Projects</a> page, I've not yet decided.</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>
|