denizk0461/pages
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

merged main page and devlog galleries to common lib

Browse Source
This commit is contained in:
denizk0461
2026-01-21 22:08:09 +01:00
parent 7e5130783f
commit 6c28a4c5f3
6 changed files with 130 additions and 336 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/routes/projects/+page.svelte
View File

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

239
src/routes/projects/projectn5/devlog/+page.svelte
View File

@@ -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>
</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>
<Gallery entries={entries} reverseTextOrder />
</Content>