fixed table of contents sticking on all pages; more minor changes
This commit is contained in:
@@ -30,6 +30,7 @@
|
||||
|
||||
footer p {
|
||||
font-family: var(--font-mono);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.bottom-rat {
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
}
|
||||
]
|
||||
|
||||
@@ -28,7 +28,7 @@
|
||||
/>
|
||||
|
||||
<Content>
|
||||
<TableOfContents />
|
||||
<TableOfContents disableStickyScrolling={true} />
|
||||
|
||||
<h2>Active Projects</h2>
|
||||
{#each getActiveProjects(projects, true) as activeProject}
|
||||
|
||||
@@ -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%
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user