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

Updated styles for mobile compatibility; removed live update column from devlog overview

Browse Source
This commit is contained in:
denizk0461
2025-09-17 15:55:13 +01:00
parent 6de17570c9
commit 167b7e1b29
9 changed files with 177 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,6 +1,6 @@
<script lang="ts">
import BannerTitleAlt from "$lib/banner-title-alt.svelte";
import ContentSidebar from "$lib/content-sidebar.svelte";
import Content from "$lib/content.svelte";
import type { DevlogPost } from "./devlog-posts";
import { posts } from "./devlog-posts";
import { onMount } from 'svelte';
@@ -51,30 +51,17 @@
wide
/>
<ContentSidebar>
<Content>
<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>
<div slot="side-left" class="live-devlog-panel">
<h2>*New* Small Updates!</h2>
<p>Here I'll post some smaller text only updates about the game's progress!</p>
<div class="live-devlog-container">
{#each entries as entry}
{@render liveUpdate({entry})}
{/each}
</div>
<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, index}
{@render devlogPost({post, index})}
{/each}
</div>
<div slot="main">
<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 developments in a more collected format.</p>
<div class="post-container">
{#each posts as post, index}
{@render devlogPost({post, index})}
{/each}
</div>
</div>
</ContentSidebar>
</Content>
{#snippet liveUpdate({entry}: {entry: DevlogLiveEntry})}
<div class="live-devlog-entry notched-small">
@@ -88,10 +75,14 @@
<a href="/projects/projectn5/devlog/{post.date}/" class="post">
<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>
<!-- <p class="post-number">#{posts.length - index}</p> -->
</div>
<div class="post-text-container">
<p class="post-date">{post.subtitle}</p>
{#if post.subtitle}
<p class="post-date">#{posts.length - index} // {post.subtitle}</p>
{:else}
<p class="post-date">#{posts.length - index} ~</p>
{/if}
<p class="post-title">{post.title}</p>
</div>
</a>
@@ -189,7 +180,7 @@
position: relative;
height: fit-content;
width: fit-content;
background-color: var(--color-background-highlight-hover);
/* background-color: var(--color-background-highlight-hover); */
transition: background-color 0.16s ease-in-out;
clip-path: polygon(
@@ -267,4 +258,25 @@
width: 100% !important;
}
}
@media screen and (max-width: 800px) {
.post {
--notch-size-devlog: 24px;
--notch-size-devlog-img: 18px;
}
.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>