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

added post numbers to devlogs; matched project n5 page style to entire website

Browse Source
This commit is contained in:
denizk0461
2025-07-14 09:47:48 +02:00
parent dce6b9130a
commit d8cd9f9b7f
3 changed files with 76 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -12,20 +12,23 @@
<Content>
<BannerTitle title="Project N5; Development Log" banner="/projects/projectn5/devlog/2024/0323/unity_overview.webp" />
<p>This is the development log for my game <strong>Project N5</strong>! It's an action-adventure jump-and-run game heavily inspired by games such as Ratchet & Clank. Development started on <b>2023-09-16</b> and rebooted on <b>2025-05-16</b>.</p>
<p>This is the development log for my game <strong>Project N5</strong>! It's an action-adventure jump-and-run game inspired by games such as Ratchet & Clank. Development started on <b>2023-09-16</b> and rebooted on <b>2025-05-16</b>.</p>
<p>2023 progress updates summarise an entire month's work, respectively. Progress updates thereafter denote noteworthy achievements in a more collected format.</p>
<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-container">
{#each posts as post}
{@render devlogPost({post})}
{#each posts as post, index}
{@render devlogPost({post, index})}
{/each}
</div>
</Content>
{#snippet devlogPost({post}: {post: DevlogPost})}
{#snippet devlogPost({post, index}: {post: DevlogPost, index: number})}
<a href="/projects/projectn5/devlog/{post.date}/" class="post">
<img class="post-img notched" src="/projects/projectn5/devlog/previews/{post.date}.webp">
<div class="post-img-container">
<img class="post-img" src="/projects/projectn5/devlog/previews/{post.date}.webp" alt="Preview image for devlog {post.title}">
<p class="post-number">#{posts.length - index}</p>
</div>
<div class="post-text-container">
<p class="post-date">{post.subtitle}</p>
<p class="post-title">{post.title}</p>
@@ -55,7 +58,7 @@
transition: background-color 0.16s ease-in-out;
margin: 4px;
--notch-size-devlog: 40px;
--notch-size-devlog: 36px;
clip-path: polygon(
0% var(--notch-size-devlog),
var(--notch-size-devlog) 0%,
@@ -71,15 +74,49 @@
background-color: var(--color-background-highlight-hover);
}
.post:hover .post-title, .post:hover .post-date {
.post:hover .post-title, .post:hover .post-date, .post-number {
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),
var(--notch-size-devlog) 0%,
calc(100% - var(--notch-size-devlog)) 0%,
100% var(--notch-size-devlog),
100% calc(100% - var(--notch-size-devlog)),
100% 100%,
var(--notch-size-devlog) 100%,
0% calc(100% - var(--notch-size-devlog))
);
}
.post-img {
width: 150px;
height: 120px;
margin: 0;
object-fit: cover;
clip-path: polygon(
0% 0%,
100% 0%,
100% 0%,
100% 0%,
100% calc(100% - var(--notch-size-devlog)),
calc(100% - var(--notch-size-devlog)) 100%,
0% 100%,
0% 100%
);
}
.post-text-container {
@@ -89,7 +126,7 @@
justify-content: center;
}
.post-date, .post-title {
.post-date, .post-title, .post-number {
font-family: 'Space Mono', monospace;
margin: 4px 0;
transition: color 0.16s ease-in-out;
@@ -104,4 +141,15 @@
font-size: 1.3rem;
font-weight: 700;
}
.post-number {
font-size: 0.77rem;
font-weight: 700;
position: absolute;
right: 2px;
bottom: 1px;
margin: 0;
padding: 0;
line-height: 1rem;
}
</style>