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

22
src/routes/+layout.svelte
View File

@@ -13,8 +13,6 @@
<Footer />
<style>
/* @import url('https://fonts.upset.dev/css2?family=Reddit+Mono:wght@200..900&family=Reddit+Sans+Condensed:wght@200..900&family=Reddit+Sans:ital,wght@0,200..900;1,200..900&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap'); */
@import url('https://fonts.upset.dev/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Manrope:wght@200..800&family=Michroma&family=Space+Grotesk:wght@300..700&display=swap');
@font-face {
@@ -77,7 +75,7 @@
--color-text: #d0d0d0;
--color-text-img: invert(98%) sepia(1%) saturate(4643%) hue-rotate(297deg) brightness(115%) contrast(76%);
--color-text-dark: #1e1e1e;
--color-highlight: #72b175;
--color-highlight: #DB7072 !important;
--color-background: #1b1b1b;
--color-background-highlight: color-mix(in srgb, var(--color-highlight) 10%, transparent);
@@ -156,18 +154,36 @@
font-size: 3.5rem;
line-height: 4rem;
}
h2 {
font-size: 2rem;
line-height: 2.2rem;
}
h2::before {
letter-spacing: -0.5rem;
content: '› ';
margin-right: 15px;
}
h3 {
font-size: 1.4rem;
line-height: 1.5rem;
}
h3::before {
letter-spacing: -0.3rem;
content: '›› ';
margin-right: 10px;
}
h4, h5, h6 {
font-size: 1.2rem;
line-height: 1.3rem;
}
h4::before {
letter-spacing: -0.26rem;
content: '››› ';
margin-right: 6px;
}
h1, h2, h3, h4, h5, h6 {
font-weight: 700;

28
src/routes/projects/projectn5/devlog/+layout.svelte
View File

@@ -1,28 +0,0 @@
<script>
let { children } = $props();
</script>
{@render children()}
<style>
:root {
--color-highlight: #C76668 !important;
}
:global {
h2::before {
letter-spacing: -0.5rem;
content: '› ';
margin-right: 15px;
}
h3::before {
letter-spacing: -0.3rem;
content: '›› ';
margin-right: 10px;
}
h4::before {
letter-spacing: -0.26rem;
content: '››› ';
margin-right: 6px;
}
}
</style>

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>