From 07b35bfc0b912b38edeccf51b21fb79d3398a266 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tobias=20Erbsh=C3=A4u=C3=9Fer?= Date: Sun, 24 May 2026 09:22:56 +0200 Subject: [PATCH] replace paddings with variables MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Tobias Erbshäußer --- frontend/src/components/badge.njk | 4 ++-- frontend/src/components/blog-article-list.njk | 10 +++++----- frontend/src/components/blog-article.njk | 6 +++--- frontend/src/components/error.njk | 2 +- frontend/src/components/nav.njk | 8 ++++---- frontend/src/components/pagination.njk | 2 +- frontend/src/components/tag.njk | 2 +- frontend/src/styles/main.css | 4 ++-- 8 files changed, 19 insertions(+), 19 deletions(-) diff --git a/frontend/src/components/badge.njk b/frontend/src/components/badge.njk index 0e35adc..3c4959a 100644 --- a/frontend/src/components/badge.njk +++ b/frontend/src/components/badge.njk @@ -11,13 +11,13 @@ border-radius: 0.4rem; color: var(--gray); font-weight: 600; - padding: 0.2rem 0.5rem; + padding: var(--small-padding) var(--medium-padding); } slot { align-items: center; display: grid; - gap: 0.5rem; + gap: var(--small-padding); grid-auto-flow: column; justify-content: start; } diff --git a/frontend/src/components/blog-article-list.njk b/frontend/src/components/blog-article-list.njk index da0f1c4..2e748e3 100644 --- a/frontend/src/components/blog-article-list.njk +++ b/frontend/src/components/blog-article-list.njk @@ -8,7 +8,7 @@ :host > div { display: grid; - gap: 1rem; + gap: var(--medium-padding); grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; } @@ -20,13 +20,13 @@ .tags { display: flex; flex-wrap: wrap; - gap: 0.5rem; + gap: var(--small-padding); } .list { align-content: start; display: grid; - gap: 2rem; + gap: var(--large-padding); grid-template-columns: 1fr; grid-auto-rows: auto; width: 100%; @@ -42,7 +42,7 @@ .item > h3 { align-items: center; display: grid; - gap: 1rem; + gap: var(--medium-padding); grid-auto-columns: auto; grid-auto-flow: column; justify-content: start; @@ -50,7 +50,7 @@ } .item > .dates { - padding-bottom: 0.6rem; + padding-bottom: var(--small-padding); } tesoft-pagination { diff --git a/frontend/src/components/blog-article.njk b/frontend/src/components/blog-article.njk index a43ec92..1dd7f69 100644 --- a/frontend/src/components/blog-article.njk +++ b/frontend/src/components/blog-article.njk @@ -12,7 +12,7 @@ .article { display: grid; - gap: 1.6rem; + gap: var(--large-padding); grid-template-columns: 1fr; grid-template-rows: auto auto; width: 100%; @@ -27,7 +27,7 @@ .header > h1 { align-items: center; display: grid; - gap: 1rem; + gap: var(--medium-padding); grid-template-columns: auto auto; grid-template-rows: auto; justify-content: start; @@ -43,7 +43,7 @@ .tags { display: flex; flex-wrap: wrap; - gap: 0.5rem; + gap: var(--small-padding); } img { diff --git a/frontend/src/components/error.njk b/frontend/src/components/error.njk index bf8d820..4dda5c3 100644 --- a/frontend/src/components/error.njk +++ b/frontend/src/components/error.njk @@ -9,7 +9,7 @@ :host > div { align-items: center; display: grid; - gap: 1.6rem; + gap: var(--large-padding); grid-template-columns: auto 1fr; grid-template-rows: auto; } diff --git a/frontend/src/components/nav.njk b/frontend/src/components/nav.njk index c200c3c..dc5c06b 100644 --- a/frontend/src/components/nav.njk +++ b/frontend/src/components/nav.njk @@ -17,12 +17,12 @@ nav > div { align-items: center; background-color: var(--gray); - border-radius: 0.5rem; + border-radius: var(--button-border-radius); display: grid; - gap: 1rem; + gap: var(--medium-padding); grid-template-columns: 4rem 1fr; grid-template-rows: auto; - padding: var(--small-padding) var(--medium-padding) var(--small-padding) var(--medium-padding); + padding: var(--small-padding) var(--medium-padding); } a { @@ -50,7 +50,7 @@ tesoft-button.small-menu::part(children) { display: grid; - gap: 1rem; + gap: var(--medium-padding); grid-template-columns: 1fr 4rem; grid-template-rows: auto; width: 100%; diff --git a/frontend/src/components/pagination.njk b/frontend/src/components/pagination.njk index f17c525..ba911ee 100644 --- a/frontend/src/components/pagination.njk +++ b/frontend/src/components/pagination.njk @@ -15,7 +15,7 @@ .cur-page { font-size: 1.8rem; - padding: 0 1rem; + padding: 0 var(--medium-padding); } diff --git a/frontend/src/components/tag.njk b/frontend/src/components/tag.njk index 845d13a..1399f0f 100644 --- a/frontend/src/components/tag.njk +++ b/frontend/src/components/tag.njk @@ -9,7 +9,7 @@ tesoft-button::part(children) { align-items: center; display: grid; - gap: 0.5rem; + gap: var(--small-padding); grid-template-columns: auto auto; grid-template-rows: auto; } diff --git a/frontend/src/styles/main.css b/frontend/src/styles/main.css index 5421feb..90969d2 100644 --- a/frontend/src/styles/main.css +++ b/frontend/src/styles/main.css @@ -29,14 +29,14 @@ body > div { } tesoft-nav { - padding-bottom: 0.8rem; + padding-bottom: var(--medium-padding); position: sticky; top: 0; } main { min-height: var(--full-content-height); - padding: 0 0.5rem; + padding: 0 var(--small-padding); } @media (max-width: 1440px) {