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

added wavy effects to links as well as headers; added blurs to code blocks and more elements with background; changed table of contents style

Browse Source
This commit is contained in:
denizk0461
2026-02-12 16:39:28 +01:00
parent b0b89569d9
commit 80b1a2f592
4 changed files with 12 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/lib/components/subtitled-image.svelte
View File

@@ -46,6 +46,7 @@
border: var(--border-dash-size) var(--color-highlight) dashed;
text-decoration: none;
box-sizing: border-box;
backdrop-filter: blur(var(--blur-radius-background));
transition: background-color var(--duration-animation) ease-out;
}

8
src/lib/table-of-contents.svelte
View File

@@ -65,11 +65,11 @@
</script>
{#if stickyScrolling}
<div class="toc-container notched sticky-toc" bind:this={root}>
<div class="toc-container sticky-toc" bind:this={root}>
{@render tocList()}
</div>
{:else}
<div class="toc-container notched" bind:this={root}>
<div class="toc-container" bind:this={root}>
{@render tocList()}
</div>
{/if}
@@ -86,6 +86,8 @@
margin-right: auto;
background-color: var(--color-background-highlight);
padding: 16px 0;
border: dashed var(--border-dash-size) var(--color-highlight);
backdrop-filter: blur(var(--blur-radius-background));
}
.sticky-toc {
@@ -109,6 +111,8 @@
display: inline-block;
text-decoration: none;
box-sizing: border-box;
transition: color var(--duration-animation) ease-out,
background-color var(--duration-animation) ease-out;
}
.toc-list a, .toc-list a:link, .toc-list a:visited {
color: var(--color-text);

1
src/lib/viewport/header.svelte
View File

@@ -45,6 +45,7 @@
/* mouse over link */
a:hover {
color: var(--color-highlight);
text-decoration: wavy var(--underline-dash-size) var(--color-highlight) underline;
}
@media screen and (max-width: 500px) {

5
src/routes/+layout.svelte
View File

@@ -123,6 +123,7 @@
/* borders */
--border-dash-size: 2px;
--underline-dash-size: 1px;
/* durations */
--duration-animation: 0.1s;
@@ -274,6 +275,7 @@
line-height: var(--font-line-height);
font-weight: 500;
background-color: var(--color-background-highlight);
backdrop-filter: blur(var(--blur-radius-background));
/* color: var(--color-background); */
border-radius: 8px;
padding-left: 6px;
@@ -313,6 +315,7 @@
a:link {
color: var(--color-link-unvisited);
text-decoration-style: dashed;
text-decoration-thickness: var(--underline-dash-size);
}
/* visited link */
a:visited {
@@ -321,7 +324,7 @@
/* mouse over link */
a:hover {
color: var(--color-link-hovered);
text-decoration-thickness: 1px;
text-decoration-style: wavy;
}
.notched {