mirror of
https://github.com/Ku6epXBOCTuK/easy-png-tools.git
synced 2026-09-14 21:46:35 +00:00
fix: update design - colors, remove texts
This commit is contained in:
+11
-11
@@ -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);
|
||||
|
||||
@@ -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(
|
||||
|
||||
Reference in New Issue
Block a user