merged main page and devlog galleries to common lib
This commit is contained in:
@@ -1,91 +0,0 @@
|
||||
<script lang="ts">
|
||||
export interface GalleryEntry {
|
||||
title: string;
|
||||
subtitle: string;
|
||||
fullWidth: boolean;
|
||||
img: string;
|
||||
imgAlt: string;
|
||||
link: string;
|
||||
}
|
||||
|
||||
let {
|
||||
entries,
|
||||
}: {
|
||||
entries: GalleryEntry[];
|
||||
} = $props();
|
||||
</script>
|
||||
|
||||
<div class="container">
|
||||
{#each entries as entry}
|
||||
{#if entry.fullWidth}
|
||||
<div class="entry-parent full-width notched">
|
||||
{@render galleryEntry({entry})}
|
||||
</div>
|
||||
{:else}
|
||||
<div class="entry-parent half-width notched">
|
||||
{@render galleryEntry({entry})}
|
||||
</div>
|
||||
{/if}
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
{#snippet galleryEntry({entry}: {entry: GalleryEntry})}
|
||||
<a class="entry" href="{entry.link}">
|
||||
<img src="{entry.img}" alt="{entry.imgAlt}">
|
||||
<p class="wide-font">{entry.title}</p>
|
||||
<p>{@html entry.subtitle}</p>
|
||||
</a>
|
||||
{/snippet}
|
||||
|
||||
<style>
|
||||
.container {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
/* flex-flow: row wrap; */
|
||||
justify-content: left;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.entry-parent {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.entry {
|
||||
width: 100%;
|
||||
margin: 4px;
|
||||
padding-bottom: 20px;
|
||||
background-color: var(--color-background-highlight);
|
||||
text-decoration: none; /* removes link underline */
|
||||
transition: background-color 0.16s ease-in-out;
|
||||
}
|
||||
.entry:hover {
|
||||
background-color: var(--color-background-highlight-hover);
|
||||
}
|
||||
|
||||
.entry img {
|
||||
width: 100%;
|
||||
object-fit: cover;
|
||||
max-height: 300px;
|
||||
}
|
||||
.entry p {
|
||||
margin: 0 32px;
|
||||
}
|
||||
/* gallery entry header */
|
||||
.entry p:nth-child(2) {
|
||||
font-size: 20px;
|
||||
margin-top: 12px;
|
||||
font-family: var(--font-title);
|
||||
font-size: 1.2rem;
|
||||
font-weight: 800;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.half-width {
|
||||
width: 50%;
|
||||
}
|
||||
.full-width {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
109
src/lib/lists/gallery.svelte
Normal file
109
src/lib/lists/gallery.svelte
Normal file
@@ -0,0 +1,109 @@
|
||||
<script lang="ts">
|
||||
export interface GalleryEntry {
|
||||
title: string;
|
||||
subtitle: string;
|
||||
img: string;
|
||||
imgAlt: string;
|
||||
link: string;
|
||||
}
|
||||
|
||||
let {
|
||||
entries,
|
||||
reverseTextOrder,
|
||||
}: {
|
||||
entries: GalleryEntry[];
|
||||
reverseTextOrder?: boolean;
|
||||
} = $props();
|
||||
</script>
|
||||
|
||||
<div class="post-list">
|
||||
{#each entries as entry}
|
||||
{@render galleryEntry({entry, reverseTextOrder})}
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
{#snippet galleryEntry({entry, reverseTextOrder}: {entry: GalleryEntry, reverseTextOrder?: boolean})}
|
||||
<!-- {#snippet galleryEntry({key, post, index}: {key: string, post: DevlogPost, index: number})} -->
|
||||
<a class="gallery-container" href="{entry.link}">
|
||||
<img class="gallery-img" src="{entry.img}" alt="{entry.imgAlt}">
|
||||
<div class="gallery-text-container">
|
||||
{#if reverseTextOrder}
|
||||
<p class="gallery-date">{@html entry.subtitle}</p>
|
||||
<p class="gallery-title">{entry.title}</p>
|
||||
{:else}
|
||||
<p class="gallery-title">{entry.title}</p>
|
||||
<p class="gallery-date">{@html entry.subtitle}</p>
|
||||
{/if}
|
||||
</div>
|
||||
</a>
|
||||
{/snippet}
|
||||
|
||||
<style>
|
||||
:root {
|
||||
--color-laura: #C76668CC;
|
||||
--color-laura-darker: #A55051CC;
|
||||
}
|
||||
|
||||
.post-list {
|
||||
max-width: 1600px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.gallery-container {
|
||||
box-sizing: content-box;
|
||||
height: 80px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
text-decoration: none;
|
||||
align-items: center;
|
||||
margin: 6px 0;
|
||||
}
|
||||
|
||||
.gallery-img {
|
||||
width: 145px;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
object-fit: cover;
|
||||
filter: grayscale(60%);
|
||||
transition: filter 0.1s ease-out;
|
||||
}
|
||||
|
||||
.gallery-text-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
height: 100%;
|
||||
padding-left: 16px;
|
||||
border-style: dashed;
|
||||
justify-content: center;
|
||||
border-color: transparent;
|
||||
border-width: 2px;
|
||||
border-left: none;
|
||||
transition: border-color 0.1s ease-out;
|
||||
}
|
||||
|
||||
.gallery-date, .gallery-title {
|
||||
margin: 0;
|
||||
transition: color 0.1s ease-out;
|
||||
}
|
||||
|
||||
.gallery-date {
|
||||
font-size: 1.0rem;
|
||||
}
|
||||
|
||||
.gallery-title {
|
||||
font-family: var(--font-mono);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.gallery-container:hover .gallery-text-container {
|
||||
border-color: var(--color-highlight);
|
||||
}
|
||||
.gallery-container:hover .gallery-img {
|
||||
filter: grayscale(0%);
|
||||
}
|
||||
.gallery-container:hover p {
|
||||
color: var(--color-highlight);
|
||||
}
|
||||
</style>
|
||||
@@ -81,10 +81,9 @@
|
||||
<style>
|
||||
:global {
|
||||
.toc-container {
|
||||
width: 80%;
|
||||
width: 70%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
|
||||
background-color: var(--color-background-highlight);
|
||||
padding: 16px 0;
|
||||
}
|
||||
|
||||
@@ -2,12 +2,11 @@
|
||||
import { onMount } from "svelte";
|
||||
import Content from "$lib/content.svelte";
|
||||
import GamedevWebring from "$lib/webrings/gamedev.svelte";
|
||||
import Gallery from "$lib/lists/gallery-entry.svelte";
|
||||
import Gallery, { type GalleryEntry } from "$lib/lists/gallery.svelte";
|
||||
import LinkList from "$lib/link-list.svelte";
|
||||
import { quotes, type Quote } from "./quotes";
|
||||
|
||||
import { posts, type DevlogPost } from "./projects/projectn5/devlog/posts";
|
||||
import { type GalleryEntry } from "$lib/lists/gallery-entry.svelte";
|
||||
import { posts } from "./projects/projectn5/devlog/posts";
|
||||
|
||||
let meImg: string = $state("common/me/a.webp");
|
||||
let marqueeQuote: Quote = $state({
|
||||
@@ -20,8 +19,7 @@
|
||||
const galleryEntries: GalleryEntry[] = [
|
||||
{
|
||||
title: "Project N5 – devlog",
|
||||
subtitle: `my active Godot game project about finding yourself in an unfamiliar future.\n<i>latest update: ${latestDevlogDate}</i>`,
|
||||
fullWidth: true,
|
||||
subtitle: `my active Godot game project about finding yourself in an unfamiliar future. <i>latest update: ${latestDevlogDate}</i>`,
|
||||
img: "projects/projectn5/devlog/2025/0523/birds_eye.webp",
|
||||
imgAlt: "Project N5 screenshot of Laura looking down at two cuboids",
|
||||
link: "projects/projectn5/devlog",
|
||||
@@ -29,15 +27,13 @@
|
||||
{
|
||||
title: "Projects",
|
||||
subtitle: "an overview of what I do and have done",
|
||||
fullWidth: false,
|
||||
img: "projects/project-mix.webp",
|
||||
imgAlt: "A collage of multiple projects: the Unity default third-person character and CJ from GTA San Andreas in the top left; purple protagonist from Project N5 holding a massive rocket launcher in the top right; two wizards in the bottom left; a breadboard with a microcontroller and input components in the bottom right",
|
||||
link: "projects",
|
||||
},
|
||||
{
|
||||
title: "Files",
|
||||
subtitle: "find things I've put for download on my <a href='https://github.com/9001/copyparty'>copyparty</a> instance",
|
||||
fullWidth: false,
|
||||
subtitle: "find things I've put for download on my copyparty instance",
|
||||
img: "common/hypertext.webp",
|
||||
imgAlt: "Screenshot of Hypertext Unity level. Crates are strewn across the floor, Waluigi is flying in front of the camera, and text such as 'COME AND TRY OUR ALL-NEW BLENDER' and 'omg! it's the brandenburg er tor!' is displayed",
|
||||
link: "//files.denizk0461.dev/",
|
||||
|
||||
@@ -5,16 +5,6 @@
|
||||
import { projects } from './projects';
|
||||
import LinkList from "$lib/link-list.svelte";
|
||||
import Content from "$lib/content.svelte";
|
||||
|
||||
let getActiveProjects = function(projects: Project[], isActive: boolean): Project[] {
|
||||
var result: Project[] = [];
|
||||
projects.forEach(project => {
|
||||
if (project.isActive == isActive) {
|
||||
result.push(project);
|
||||
}
|
||||
});
|
||||
return result;
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
@@ -123,7 +113,7 @@
|
||||
|
||||
color: var(--color-text-dark);
|
||||
background-color: var(--color-highlight);
|
||||
font-family: var(--font-stylised);
|
||||
font-family: var(--font-sans-serif);
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
|
||||
@@ -3,6 +3,19 @@
|
||||
import Content from "$lib/content.svelte";
|
||||
// import type { DevlogPost } from "./devlog-posts";
|
||||
import { posts, type DevlogPost } from "./posts";
|
||||
import Gallery, { type GalleryEntry } from "$lib/lists/gallery.svelte";
|
||||
|
||||
let entries: GalleryEntry[] = posts.entries().map(mapEntries).toArray();
|
||||
|
||||
function mapEntries(m: [String, DevlogPost], index: number): GalleryEntry {
|
||||
return {
|
||||
title: `${m[1].title}`,
|
||||
subtitle: `#${posts.size - index} // ${m[1].date}`,
|
||||
img: `/projects/projectn5/devlog/${m[0]}/preview.webp`,
|
||||
link: `/projects/projectn5/devlog/${m[0]}/`,
|
||||
imgAlt: `Preview image for ${m[1].title}`,
|
||||
};
|
||||
}
|
||||
|
||||
// Leftpads a single-digit number to two digits
|
||||
function leftpad(n: number): String {
|
||||
@@ -28,227 +41,5 @@
|
||||
|
||||
<p>2023 progress updates summarise an entire month's work, respectively. Progress updates thereafter denote noteworthy developments in a more collected format.</p>
|
||||
|
||||
<div class="post-list">
|
||||
{#each posts.entries() as [key, post], index}
|
||||
{@render devlogPost2({key, post, index})}
|
||||
{/each}
|
||||
</div>
|
||||
<Gallery entries={entries} reverseTextOrder />
|
||||
</Content>
|
||||
|
||||
{#snippet devlogPost2({key, post, index}: {key: string, post: DevlogPost, index: number})}
|
||||
<a class="post2-container" href="/projects/projectn5/devlog/{key}/">
|
||||
<img class="post2-img" src="/projects/projectn5/devlog/{key}/preview.webp" alt="Preview image for devlog {post.title}">
|
||||
<div class="post2-text-container">
|
||||
<p class="post2-date"><span class="post2-number">#{posts.size - index}</span> // {post.date}</p>
|
||||
<p class="post2-title">{post.title}</p>
|
||||
</div>
|
||||
</a>
|
||||
{/snippet}
|
||||
|
||||
|
||||
<style>
|
||||
:root {
|
||||
--color-laura: #C76668CC;
|
||||
--color-laura-darker: #A55051CC;
|
||||
}
|
||||
|
||||
.post-list {
|
||||
max-width: 1600px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.post2-container {
|
||||
box-sizing: content-box;
|
||||
height: 80px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
text-decoration: none;
|
||||
align-items: center;
|
||||
margin: 6px 0;
|
||||
/* gap: 16px; */
|
||||
}
|
||||
|
||||
.post2-img {
|
||||
width: 145px;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
object-fit: cover;
|
||||
filter: grayscale(60%);
|
||||
transition: filter 0.1s ease-out;
|
||||
}
|
||||
|
||||
.post2-text-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
height: 100%;
|
||||
padding-left: 16px;
|
||||
border-style: dashed;
|
||||
justify-content: center;
|
||||
border-color: transparent;
|
||||
border-width: 2px;
|
||||
border-left: none;
|
||||
transition: border-color 0.1s ease-out;
|
||||
}
|
||||
|
||||
.post2-date, .post2-title, .post2-number {
|
||||
margin: 0;
|
||||
transition: color 0.1s ease-out;
|
||||
}
|
||||
|
||||
.post2-date, .post2-number {
|
||||
font-size: 1.0rem;
|
||||
}
|
||||
|
||||
.post2-number {
|
||||
color: var(--color-highlight);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.post2-title {
|
||||
font-family: var(--font-mono);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.post2-container:hover .post2-text-container {
|
||||
/* background-color: var(--color-background-highlight-hover); */
|
||||
border-color: var(--color-highlight);
|
||||
}
|
||||
.post2-container:hover .post2-img {
|
||||
filter: grayscale(0%);
|
||||
}
|
||||
.post2-container:hover p{/*}, .post2-container:hover .post2-number {*/
|
||||
color: var(--color-highlight);
|
||||
}
|
||||
|
||||
.post {
|
||||
text-decoration: none;
|
||||
background-color: #00000044;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
padding: 16px;
|
||||
transition: background-color 0.16s ease-in-out;
|
||||
margin: 4px;
|
||||
|
||||
--notch-size-devlog: 30px;
|
||||
--notch-size-devlog-img: 24px;
|
||||
clip-path: polygon(
|
||||
0% var(--notch-size-devlog),
|
||||
var(--notch-size-devlog) 0%,
|
||||
calc(100% - var(--notch-size-devlog)) 0%,
|
||||
100% var(--notch-size-devlog),
|
||||
100% calc(100% - var(--notch-size-devlog)),
|
||||
calc(100% - var(--notch-size-devlog)) 100%,
|
||||
var(--notch-size-devlog) 100%,
|
||||
0% calc(100% - var(--notch-size-devlog))
|
||||
);
|
||||
}
|
||||
.post:hover {
|
||||
background-color: var(--color-background-highlight-hover);
|
||||
}
|
||||
|
||||
.post:hover .post-title, .post:hover .post-date {
|
||||
color: var(--color-text-dark);
|
||||
}
|
||||
|
||||
.post:hover .post-img-container {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.post-img-container {
|
||||
position: relative;
|
||||
height: fit-content;
|
||||
width: fit-content;
|
||||
/* background-color: var(--color-background-highlight-hover); */
|
||||
|
||||
transition: background-color 0.16s ease-in-out;
|
||||
clip-path: polygon(
|
||||
0% var(--notch-size-devlog-img),
|
||||
var(--notch-size-devlog-img) 0%,
|
||||
calc(100% - var(--notch-size-devlog-img)) 0%,
|
||||
100% var(--notch-size-devlog-img),
|
||||
100% calc(100% - var(--notch-size-devlog-img)),
|
||||
100% 100%,
|
||||
var(--notch-size-devlog-img) 100%,
|
||||
0% calc(100% - var(--notch-size-devlog-img))
|
||||
);
|
||||
}
|
||||
|
||||
.post-img {
|
||||
width: 125px;
|
||||
height: 100px;
|
||||
margin: 0;
|
||||
object-fit: cover;
|
||||
|
||||
clip-path: polygon(
|
||||
0% 0%,
|
||||
100% 0%,
|
||||
100% 0%,
|
||||
100% 0%,
|
||||
100% calc(100% - var(--notch-size-devlog-img)),
|
||||
calc(100% - var(--notch-size-devlog-img)) 100%,
|
||||
0% 100%,
|
||||
0% 100%
|
||||
);
|
||||
}
|
||||
|
||||
.post-text-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-left: 24px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.post-date, .post-title {
|
||||
font-family: 'Space Mono', monospace;
|
||||
margin: 4px 0;
|
||||
transition: color 0.16s ease-in-out;
|
||||
}
|
||||
|
||||
.post-date {
|
||||
font-size: 0.8rem;
|
||||
line-height: 0.7rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.post-title {
|
||||
font-size: 1.1rem;
|
||||
line-height: 1.4rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1250px) {
|
||||
.post-supercontainer {
|
||||
width: 50% !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 700px) {
|
||||
.post-supercontainer {
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
.post {
|
||||
--notch-size-devlog: 18px;
|
||||
--notch-size-devlog-img: 12px;
|
||||
}
|
||||
.post-img {
|
||||
width: 100px;
|
||||
height: 70px;
|
||||
}
|
||||
|
||||
.post-date {
|
||||
font-size: 0.8rem;
|
||||
line-height: 0.9rem;
|
||||
}
|
||||
|
||||
.post-title {
|
||||
font-size: 1.0rem;
|
||||
line-height: 1.1rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user