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; border: var(--border-dash-size) var(--color-highlight) dashed;
text-decoration: none; text-decoration: none;
box-sizing: border-box; box-sizing: border-box;
backdrop-filter: blur(var(--blur-radius-background));
transition: background-color var(--duration-animation) ease-out; transition: background-color var(--duration-animation) ease-out;
} }

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

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

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

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

5
src/routes/+layout.svelte
View File

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