fix: update design - colors, remove texts

This commit is contained in:
2026-09-12 18:39:50 +05:00
parent 0c2de3f191
commit f2829de216
3 changed files with 12 additions and 37 deletions
+11 -11
View File
@@ -101,11 +101,11 @@
--brand-main: #86efac;
--brand-alt: hct(from var(--brand-main) calc(h + 90) c t);
--color-background: hct(from var(--brand-main) h 8 95);
--color-background-muted: hct(from var(--brand-main) h 12 85);
--color-panel: hct(from var(--brand-main) h 6.5 98);
--color-checker-main: hct(from var(--brand-main) h 10.7 85.7);
--color-checker-alt: hct(from var(--brand-main) h 13.2 76);
--color-background: hct(from var(--brand-main) h 2 95);
--color-background-muted: hct(from var(--brand-main) h 4 85);
--color-panel: hct(from var(--brand-main) h 3 98);
--color-checker-main: hct(from var(--brand-main) h 5 85.7);
--color-checker-alt: hct(from var(--brand-main) h 7 76);
--color-border: hct(from var(--brand-main) h 13.1 69.4);
@@ -186,13 +186,13 @@
--brand-main: #86efac;
--brand-alt: hct(from var(--brand-main) calc(h + 90) c t);
--color-background: hct(from var(--brand-main) h 15 6);
--color-background-muted: hct(from var(--brand-main) h 15 10);
--color-panel: hct(from var(--brand-main) h 12 8);
--color-checker-main: hct(from var(--brand-main) h 12 10);
--color-checker-alt: hct(from var(--brand-main) h 14 14);
--color-background: hct(from var(--brand-main) h 2 16);
--color-background-muted: hct(from var(--brand-main) h 4 24);
--color-panel: hct(from var(--brand-main) h 3 26);
--color-checker-main: hct(from var(--brand-main) h 6 16);
--color-checker-alt: hct(from var(--brand-main) h 8 24);
--color-border: hct(from var(--brand-main) h 15 25);
--color-border: hct(from var(--brand-main) h 8 40);
--color-text: hct(from var(--brand-main) h 25 90);
--color-text-muted: hct(from var(--brand-main) h 22 70);
@@ -7,7 +7,6 @@
<div class="catalog-head">
<div>
<div class="eyebrow">EASY-PNG-TOOLS / CATALOG</div>
<h1>Tool catalog</h1>
<p>
Focused utilities for working with PNG. Inspect, transform, and export —
@@ -28,12 +27,6 @@
gap: var(--space-xxl);
flex-wrap: wrap;
}
.eyebrow {
font: var(--font-size-s) var(--font-mono);
letter-spacing: var(--space-text-xl);
color: var(--color-text-muted);
margin-bottom: var(--space-m);
}
h1 {
margin: 0;
font-size: var(--font-size-2xl);
+1 -19
View File
@@ -160,11 +160,9 @@
<div class="schema-tool">
<header class="header">
<div class="title-block">
<span class="eyebrow">PNG PROCESSING <span>/</span> SINGLE TOOL</span>
<h1>{tool.title}</h1>
<p class="lede">{tool.description}</p>
</div>
<span class="status"><i></i> LIVE PREVIEW</span>
</header>
<div class="workspace">
@@ -221,14 +219,11 @@
line-height: 1.1;
color: var(--color-text);
}
.eyebrow,
.label,
.status {
.label {
font: var(--font-size-s) var(--font-mono);
letter-spacing: var(--space-text-l);
color: var(--color-text-muted);
}
.eyebrow span,
.label {
color: var(--color-main);
}
@@ -239,19 +234,6 @@
font-size: var(--font-size-s);
line-height: 1.5;
}
.status {
display: inline-flex;
align-items: center;
gap: var(--space-m);
align-self: flex-start;
white-space: nowrap;
}
.status i {
width: var(--size-border-thick);
height: var(--size-border-thick);
border-radius: 50%;
background: var(--color-success);
}
.workspace {
display: grid;
grid-template-columns: minmax(var(--size-workspace-min), 1fr) minmax(