fix: increase font size

This commit is contained in:
2026-09-02 20:19:40 +05:00
parent e9de7a4bf8
commit 1e63eaa03b
8 changed files with 20 additions and 21 deletions
+4 -6
View File
@@ -17,15 +17,13 @@
<style> <style>
.mono-label { .mono-label {
font-family: var(--font-mono); font: normal var(--font-size-s) var(--font-mono);
font-size: 10px; letter-spacing: var(--space-text-l);
font-weight: 400; color: var(--color-text-muted);
letter-spacing: 0.12em;
color: var(--muted);
line-height: normal; line-height: normal;
} }
.accent { .accent {
color: var(--blue); color: var(--color-accent);
} }
</style> </style>
@@ -29,7 +29,7 @@
} }
.field-hint { .field-hint {
font-family: var(--font-mono); font-family: var(--font-mono);
font-size: var(--font-text); font-size: var(--font-size-s);
color: var(--color-text-muted); color: var(--color-text-muted);
} }
</style> </style>
@@ -14,7 +14,7 @@
justify-content: space-between; justify-content: space-between;
padding: var(--space-xl); padding: var(--space-xl);
border-top: var(--size-border) solid var(--color-border); border-top: var(--size-border) solid var(--color-border);
font: var(--font-text) var(--font-mono); font: var(--font-size-s) var(--font-mono);
color: var(--color-text-muted); color: var(--color-text-muted);
& span { & span {
display: flex; display: flex;
@@ -18,7 +18,7 @@
<span class="brand-mark">EP</span> <span class="brand-mark">EP</span>
<span>easy-png-tools</span> <span>easy-png-tools</span>
{#if crumb} {#if crumb}
<span class="version">{crumb}</span> <span class="crumb">{crumb}</span>
{/if} {/if}
</a> </a>
<TopNav /> <TopNav />
@@ -41,7 +41,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
gap: var(--space-m); gap: var(--space-m);
font: bold var(--font-button) var(--font-mono); font: bold var(--font-size-l) var(--font-mono);
color: var(--color-text); color: var(--color-text);
text-decoration: none; text-decoration: none;
} }
@@ -50,12 +50,12 @@
color: var(--color-background); color: var(--color-background);
width: var(--space-brand); width: var(--space-brand);
height: var(--space-brand); height: var(--space-brand);
font-size: var(--font-brand); font-size: var(--font-size-m);
display: grid; display: grid;
place-items: center; place-items: center;
} }
.version { .crumb {
font: var(--font-text) var(--font-mono); font: var(--font-size-s) var(--font-mono);
letter-spacing: var(--space-text-l); letter-spacing: var(--space-text-l);
color: var(--color-main); color: var(--color-main);
} }
+1 -1
View File
@@ -47,7 +47,7 @@
gap: var(--space-s); gap: var(--space-s);
line-height: normal; line-height: normal;
font-family: var(--font-mono); font-family: var(--font-mono);
font-size: var(--font-text); font-size: var(--font-size-s);
font-weight: bold; font-weight: bold;
border-width: var(--size-border-thick); border-width: var(--size-border-thick);
padding: var(--space-s) var(--space-m); padding: var(--space-s) var(--space-m);
+1 -1
View File
@@ -44,7 +44,7 @@
border-color: var(--color-main); border-color: var(--color-main);
border-width: var(--size-border-thick); border-width: var(--size-border-thick);
border-radius: var(--radius-s); border-radius: var(--radius-s);
font-size: var(--font-button); font-size: var(--font-size-l);
font-weight: bold; font-weight: bold;
cursor: pointer; cursor: pointer;
background: var(--color-main); background: var(--color-main);
+1 -1
View File
@@ -21,7 +21,7 @@
} }
.nav a { .nav a {
color: var(--color-text); color: var(--color-text);
font: bold var(--font-text) var(--font-mono); font: bold var(--font-size-s) var(--font-mono);
white-space: nowrap; white-space: nowrap;
text-decoration: none; text-decoration: none;
} }
+6 -5
View File
@@ -133,15 +133,16 @@
--space-brand: 32px; --space-brand: 32px;
--space-text-s: 0; --space-text-s: 0;
--space-text-m: 0.06em; --space-text-m: 0.04em;
--space-text-l: 0.12em; --space-text-l: 0.08em;
--space-text-xl: 0.12em;
--size-border: 1px; --size-border: 1px;
--size-border-thick: 2px; --size-border-thick: 2px;
--font-text: 10px; --font-size-s: 12px;
--font-brand: 12px; --font-size-m: 14px;
--font-button: 14px; --font-size-l: 16px;
--radius-s: 0px; --radius-s: 0px;
--radius-m: 4px; --radius-m: 4px;