fixed table of contents sticking on all pages; more minor changes

This commit is contained in:
2025-07-14 14:36:05 +02:00
parent 777386a149
commit 6781bedcee
7 changed files with 33 additions and 23 deletions

View File

@@ -30,6 +30,7 @@
footer p {
font-family: var(--font-mono);
font-weight: 500;
}
.bottom-rat {

View File

@@ -1,11 +1,3 @@
<!-- <div class="center-stuff">
<p class="banner-text" style="margin-right: 8px;">denizk0461's</p>
<a class="banner-image" href="/">
<img src="/favicon.webp" alt="Favicon">
</a>
<p class="banner-text" style="margin-left: 8px;">website</p>
</div> -->
<div class="header-container">
<div class="header-content">
<a class="favicon" href="/">
@@ -25,7 +17,6 @@
.header-container {
margin: 0 0 ;
padding: 0;
background-color: transparent;
}
.header-content {

View File

@@ -1,6 +1,12 @@
<script lang="ts">
import {onMount} from 'svelte';
let {
disableStickyScrolling,
}: {
disableStickyScrolling?: boolean;
} = $props();
let idCounter: number = 0;
let container: HTMLElement;
@@ -46,9 +52,15 @@
}
</script>
{#if disableStickyScrolling}
<div class="toc-container notched">
<ul class="toc-list" bind:this={container}></ul>
</div>
{:else}
<div class="toc-container notched sticky-toc">
<ul class="toc-list" bind:this={container}></ul>
</div>
{/if}
<style>
:global {
@@ -59,6 +71,9 @@
background-color: var(--color-background-highlight);
padding: 16px 0;
}
.sticky-toc {
position: sticky;
top: 20px;
}

View File

@@ -26,6 +26,8 @@
var selectedPicture = pictures[getRandom(pictures.length)];
meImg = "common/me/" + selectedPicture + ".webp";
};
let latestDevlogDate = posts[0].date.substring(0, 7).replace("/", "-") + "-" + posts[0].date.substring(7);
</script>
<svelte:head>
@@ -40,7 +42,7 @@
<Gallery entries={[
{
title: "Project N5 devlog",
subtitle: "my active Godot game project about finding yourself in an unfamiliar future",
subtitle: "my active Godot game project about finding yourself in an unfamiliar future.\n<i>latest update: " + latestDevlogDate + "</i>",
fullWidth: true,
img: "projects/projectn5/devlog/2025/0523/birds_eye.webp",
link: "projects/projectn5/devlog",

View File

@@ -22,11 +22,11 @@
<LinkList entries={
[
{
text: "swordsnstuff",
text: "Swords & Stuff Unity 2D RPG (unfinished)",
link: "swordsnstuff",
},
{
text: "magician - warning no server",
text: "Magician Online Multiplayer Card Game (not playable)",
link: "magician",
}
]

View File

@@ -28,7 +28,7 @@
/>
<Content>
<TableOfContents />
<TableOfContents disableStickyScrolling={true} />
<h2>Active Projects</h2>
{#each getActiveProjects(projects, true) as activeProject}

View File

@@ -58,7 +58,8 @@
transition: background-color 0.16s ease-in-out;
margin: 4px;
--notch-size-devlog: 36px;
--notch-size-devlog: 42px;
--notch-size-devlog-img: 36px;
clip-path: polygon(
0% var(--notch-size-devlog),
var(--notch-size-devlog) 0%,
@@ -90,14 +91,14 @@
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)),
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) 100%,
0% calc(100% - var(--notch-size-devlog))
var(--notch-size-devlog-img) 100%,
0% calc(100% - var(--notch-size-devlog-img))
);
}
@@ -112,8 +113,8 @@
100% 0%,
100% 0%,
100% 0%,
100% calc(100% - var(--notch-size-devlog)),
calc(100% - var(--notch-size-devlog)) 100%,
100% calc(100% - var(--notch-size-devlog-img)),
calc(100% - var(--notch-size-devlog-img)) 100%,
0% 100%,
0% 100%
);