From 76bfd344e49e12bc41c85da70e46b6a7189cc7ec Mon Sep 17 00:00:00 2001 From: denizk0461 Date: Wed, 25 Feb 2026 17:52:13 +0100 Subject: [PATCH] moved outline/border styles to property --- src/lib/components/outlined-button.svelte | 2 +- src/lib/components/subtitled-image.svelte | 2 +- src/lib/components/table-of-contents.svelte | 2 +- src/lib/lists/gallery-row.svelte | 2 +- src/lib/lists/gallery.svelte | 2 +- src/lib/viewport/footer.svelte | 2 +- src/lib/viewport/header.svelte | 2 +- src/routes/+layout.svelte | 5 +++-- src/routes/+page.svelte | 4 ++-- 9 files changed, 12 insertions(+), 11 deletions(-) diff --git a/src/lib/components/outlined-button.svelte b/src/lib/components/outlined-button.svelte index 8940f6d..d08e7eb 100644 --- a/src/lib/components/outlined-button.svelte +++ b/src/lib/components/outlined-button.svelte @@ -21,7 +21,7 @@ font-family: var(--font-mono); font-size: var(--font-size-mono); padding: 8px; - border: dashed var(--border-dash-size) var(--color-highlight); + border: var(--border-style) var(--border-dash-size) var(--color-highlight); color: var(--color-highlight); font-weight: 700; cursor: pointer; diff --git a/src/lib/components/subtitled-image.svelte b/src/lib/components/subtitled-image.svelte index ee91a4a..ac781b1 100644 --- a/src/lib/components/subtitled-image.svelte +++ b/src/lib/components/subtitled-image.svelte @@ -43,7 +43,7 @@ .subtitled-img-container { display: flex; flex-direction: column; - border: var(--border-dash-size) var(--color-highlight) dashed; + border: var(--border-dash-size) var(--color-highlight) var(--border-style); text-decoration: none; box-sizing: border-box; backdrop-filter: blur(var(--blur-radius-background)); diff --git a/src/lib/components/table-of-contents.svelte b/src/lib/components/table-of-contents.svelte index fef34ad..212fbe0 100644 --- a/src/lib/components/table-of-contents.svelte +++ b/src/lib/components/table-of-contents.svelte @@ -85,7 +85,7 @@ margin-right: auto; background-color: var(--color-background-highlight); padding: 16px 0; - border: dashed var(--border-dash-size) var(--color-highlight); + border: var(--border-style) var(--border-dash-size) var(--color-highlight); backdrop-filter: blur(var(--blur-radius-background)); } diff --git a/src/lib/lists/gallery-row.svelte b/src/lib/lists/gallery-row.svelte index 5f5074c..4dc7398 100644 --- a/src/lib/lists/gallery-row.svelte +++ b/src/lib/lists/gallery-row.svelte @@ -43,7 +43,7 @@ transition: background-color var(--duration-animation) ease-out, border-color var(--duration-animation) ease-out, backdrop-filter var(--duration-blur) ease-out; - border: var(--border-dash-size) dashed transparent; + border: var(--border-dash-size) var(--border-style) transparent; } .row-entry:hover { diff --git a/src/lib/lists/gallery.svelte b/src/lib/lists/gallery.svelte index 9fdf19d..7fb68f8 100644 --- a/src/lib/lists/gallery.svelte +++ b/src/lib/lists/gallery.svelte @@ -85,7 +85,7 @@ height: 100%; padding-left: 16px; padding-right: 16px; - border-style: dashed; + border-style: var(--border-style); justify-content: center; border-color: transparent; border-width: var(--border-dash-size); diff --git a/src/lib/viewport/footer.svelte b/src/lib/viewport/footer.svelte index 92af8d0..e1ca1fd 100644 --- a/src/lib/viewport/footer.svelte +++ b/src/lib/viewport/footer.svelte @@ -68,7 +68,7 @@ footer a:hover { font-weight: 700; - text-decoration: dashed var(--underline-dash-size) var(--color-highlight) underline; + text-decoration: var(--border-style) var(--underline-dash-size) var(--color-highlight) underline; } .bottom-rat { diff --git a/src/lib/viewport/header.svelte b/src/lib/viewport/header.svelte index b2bc204..8e11213 100644 --- a/src/lib/viewport/header.svelte +++ b/src/lib/viewport/header.svelte @@ -46,7 +46,7 @@ a:hover { font-weight: 700; /* color: var(--color-highlight); */ - text-decoration: dashed var(--underline-dash-size) var(--color-highlight) underline; + text-decoration: var(--border-style) var(--underline-dash-size) var(--color-highlight) underline; } @media screen and (max-width: 500px) { diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 0a20439..785e883 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -134,6 +134,7 @@ --blur-radius-background: 6px; /* borders */ + --border-style: dashed; --border-dash-size: 2px; --underline-dash-size: 1px; @@ -277,7 +278,7 @@ width: 100%; height: 1px; border: none; - border-top: var(--border-dash-size) dashed var(--color-highlight); + border-top: var(--border-dash-size) var(--border-style) var(--color-highlight); margin: 8px 0; } @@ -328,7 +329,7 @@ color: var(--color-link-unvisited); text-decoration-thickness: var(--underline-dash-size); text-decoration-color: transparent; - text-decoration-style: dashed; + text-decoration-style: var(--border-style); } /* visited link */ a:visited { diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 58cd840..dd9b12c 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -131,7 +131,7 @@ .update-container { padding: 8px 24px; - border: var(--border-dash-size) var(--color-highlight) dashed; + border: var(--border-dash-size) var(--color-highlight) var(--border-style); backdrop-filter: blur(var(--blur-radius-background)); } @@ -139,7 +139,7 @@ text-decoration: none; } .update-header-link:hover { - text-decoration: underline dashed var(--border-dash-size) var(--color-highlight); + text-decoration: underline var(--border-style) var(--border-dash-size) var(--color-highlight); } .update-header {