Ku6epXBOCTuK/easy-png-tools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: fix lint css vars rules

Browse Source
This commit is contained in:
Ku6epXBOCTuK
2026-09-08 07:02:54 +05:00
parent 5a4fbe7ac6
commit 2d24f51fd5
32 changed files with 270 additions and 265 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/lib/components/kit/CatalogGroup.svelte
+11 -11
View File
@@ -23,29 +23,29 @@
.catalog-group {
display: flex;
flex-direction: column;
gap: 1rem;
gap: var(--space-xl);
}
.group-title {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 1rem;
padding-bottom: 0.5rem;
border-bottom: 1px solid var(--line);
gap: var(--space-xl);
padding-bottom: var(--space-m);
border-bottom: 1px solid var(--color-border);
}
.group-title span {
font: 12px var(--font-mono);
letter-spacing: 0.14em;
color: var(--foreground);
font: var(--font-size-s) var(--font-mono);
letter-spacing: var(--space-text-xl);
color: var(--color-text);
}
.group-title i {
font: 10px var(--font-mono);
font: var(--font-size-s) var(--font-mono);
font-style: normal;
letter-spacing: 0.08em;
color: var(--muted);
letter-spacing: var(--space-text-l);
color: var(--color-text-muted);
}
.tool-cards {
display: grid;
gap: 10px;
gap: var(--space-m);
}
</style>
web/src/lib/components/kit/CatalogHeader.svelte
+16 -16
View File
@@ -25,26 +25,26 @@
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 1.5rem;
gap: var(--space-xxl);
flex-wrap: wrap;
}
.eyebrow {
font: 12px var(--font-mono);
letter-spacing: 0.18em;
color: var(--muted);
margin-bottom: 0.5rem;
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: 2rem;
font-size: var(--font-size-2xl);
font-weight: 700;
color: var(--foreground);
color: var(--color-text);
}
p {
margin: 0.5rem 0 0;
margin: var(--space-m) 0 0;
max-width: 56ch;
color: var(--muted);
font-size: 0.95rem;
color: var(--color-text-muted);
font-size: var(--font-size-m);
}
.catalog-total {
display: flex;
@@ -53,14 +53,14 @@
line-height: 1;
}
.catalog-total b {
font: 700 2rem var(--font-mono);
color: var(--foreground);
font: 700 var(--font-size-2xl) var(--font-mono);
color: var(--color-text);
}
.catalog-total span {
font: 10px var(--font-mono);
letter-spacing: 0.08em;
color: var(--muted);
font: var(--font-size-s) var(--font-mono);
letter-spacing: var(--space-text-l);
color: var(--color-text-muted);
text-align: right;
margin-top: 0.35rem;
margin-top: var(--space-s);
}
</style>
web/src/lib/components/kit/CatalogToolbar.svelte
+23 -23
View File
@@ -1,5 +1,5 @@
<script lang="ts">
import { Search, Filter } from "@lucide/svelte";
import { Filter, Search } from "@lucide/svelte";
interface Props {
query: string;
@@ -46,50 +46,50 @@
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
gap: var(--space-xl);
flex-wrap: wrap;
padding: 1.25rem 0;
padding: var(--space-xl) 0;
}
.catalog-search {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 0.75rem;
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--panel);
color: var(--muted);
gap: var(--space-m);
padding: var(--space-m) var(--space-l);
border: 1px solid var(--color-border);
border-radius: var(--radius-m);
background: var(--color-panel);
color: var(--color-text-muted);
}
.catalog-search input {
border: none;
background: transparent;
outline: none;
color: var(--foreground);
font: 12px var(--font-mono);
color: var(--color-text);
font: var(--font-size-s) var(--font-mono);
}
.catalog-search input::placeholder {
color: var(--muted);
color: var(--color-text-muted);
}
.catalog-filters {
display: inline-flex;
align-items: center;
gap: 0.4rem;
gap: var(--space-s);
flex-wrap: wrap;
color: var(--muted);
color: var(--color-text-muted);
}
.catalog-filters button {
border: 1px solid var(--line);
border: 1px solid var(--color-border);
background: transparent;
color: var(--muted);
font: 10px var(--font-mono);
letter-spacing: 0.06em;
padding: 0.4rem 0.6rem;
border-radius: var(--radius);
color: var(--color-text-muted);
font: var(--font-size-s) var(--font-mono);
letter-spacing: var(--space-text-m);
padding: var(--space-s) var(--space-m);
border-radius: var(--radius-m);
cursor: pointer;
}
.catalog-filters button.active {
background: var(--blue);
color: #fff;
border-color: var(--blue);
background: var(--color-main);
color: var(--color-background);
border-color: var(--color-main);
}
</style>
web/src/lib/components/kit/CheckerCanvas.svelte
+4 -4
View File
@@ -20,13 +20,13 @@
display: grid;
place-items: center;
overflow: hidden;
background-color: #0b0f14;
background-color: var(--color-text);
background-image:
linear-gradient(45deg, #1a2129 25%, transparent 25%),
linear-gradient(-45deg, #1a2129 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, #1a2129 75%),
linear-gradient(-45deg, transparent 75%, #1a2129 75%);
background-size: 20px 20px;
background-size: var(--space-xl) var(--space-xl);
background-position:
0 0,
0 10px,
@@ -35,10 +35,10 @@
}
.checker-canvas--sm {
min-height: 180px;
min-height: var(--size-preview-canvas-min-height-s);
}
.checker-canvas--large {
min-height: 360px;
min-height: var(--size-preview-canvas-min-height-l);
}
</style>
web/src/lib/components/kit/CodeBlock.svelte
+10 -10
View File
@@ -24,27 +24,27 @@
<style>
.code-block {
position: relative;
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--background);
padding: 0.6rem 0.8rem;
border: 1px solid var(--color-border);
border-radius: var(--radius-m);
background: var(--color-background);
padding: var(--space-m) var(--space-l);
}
.code-lang {
font-family: var(--font-mono);
font-size: 10px;
font-size: var(--font-size-s);
text-transform: uppercase;
color: var(--muted);
color: var(--color-text-muted);
}
.code-pre {
margin: 0;
overflow: auto;
font-family: var(--font-mono);
font-size: 11px;
color: var(--foreground);
font-size: var(--font-size-s);
color: var(--color-text);
}
.code-copy {
position: absolute;
top: 0.4rem;
right: 0.4rem;
top: var(--space-s);
right: var(--space-s);
}
</style>
web/src/lib/components/kit/Dropzone.svelte
+15 -15
View File
@@ -63,32 +63,32 @@
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.5rem;
min-height: 220px;
padding: 2rem;
border: 1px dashed var(--line);
border-radius: var(--radius);
color: var(--muted);
background: var(--background);
gap: var(--space-m);
min-height: var(--size-panel-min-height);
padding: var(--space-xxxl);
border: 1px dashed var(--color-border);
border-radius: var(--radius-m);
color: var(--color-text-muted);
background: var(--color-background);
cursor: pointer;
text-align: center;
transition:
border-color 0.15s ease,
background 0.15s ease;
border-color var(--duration-m) ease,
background var(--duration-m) ease;
}
.dropzone:hover,
.dropzone:focus-visible,
.dropzone.dragging {
border-color: var(--blue);
color: var(--foreground);
border-color: var(--color-main);
color: var(--color-text);
outline: none;
}
.dz-title {
font: 600 0.9rem var(--font-mono);
color: var(--foreground);
font: 600 var(--font-size-m) var(--font-mono);
color: var(--color-text);
}
.dz-sub {
font: 10px var(--font-mono);
letter-spacing: 0.04em;
font: var(--font-size-s) var(--font-mono);
letter-spacing: var(--space-text-m);
}
</style>
web/src/lib/components/kit/EmptyState.svelte
+7 -7
View File
@@ -23,20 +23,20 @@
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
padding: 2rem 1rem;
gap: var(--space-m);
padding: var(--space-xxxl) var(--space-xl);
text-align: center;
color: var(--muted);
color: var(--color-text-muted);
}
.empty-icon {
color: var(--muted);
color: var(--color-text-muted);
}
.empty-title {
color: var(--foreground);
font-size: 0.95rem;
color: var(--color-text);
font-size: var(--font-size-m);
}
.empty-desc {
font-size: 0.8rem;
font-size: var(--font-size-s);
max-width: 32ch;
}
</style>
web/src/lib/components/kit/ImageCard.svelte
+6 -6
View File
@@ -18,15 +18,15 @@
.image-card {
display: flex;
flex-direction: column;
gap: 0.4rem;
gap: var(--space-s);
margin: 0;
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 0.6rem;
background: var(--panel);
border: 1px solid var(--color-border);
border-radius: var(--radius-m);
padding: var(--space-m);
background: var(--color-panel);
}
.image-canvas {
border-radius: var(--radius);
border-radius: var(--radius-m);
overflow: hidden;
}
</style>
web/src/lib/components/kit/MetaList.svelte
+3 -3
View File
@@ -15,10 +15,10 @@
<style>
.meta-list {
border-top: 1px solid var(--line);
border-top: 1px solid var(--color-border);
grid-template-columns: repeat(3, 1fr);
gap: 8px;
padding-top: 14px;
gap: var(--space-m);
padding-top: var(--space-l);
display: grid;
}
</style>
web/src/lib/components/kit/MetaRow.svelte
+6 -6
View File
@@ -13,19 +13,19 @@
<style>
.meta-row {
gap: 5px;
gap: var(--space-s);
display: grid;
}
.meta-caption {
font-family: var(--font-mono);
font-size: 9px;
color: var(--muted);
font-size: var(--font-size-s);
color: var(--color-text-muted);
line-height: normal;
}
.meta-value {
margin-top: 5px;
margin-top: var(--space-s);
line-height: normal;
font: 11px var(--font-mono);
color: var(--foreground);
font: var(--font-size-s) var(--font-mono);
color: var(--color-text);
}
</style>
web/src/lib/components/kit/PanelHeading.svelte
+6 -6
View File
@@ -23,18 +23,18 @@
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0.75rem 1rem;
border-bottom: 1px solid var(--line);
gap: var(--space-xl);
padding: var(--space-l) var(--space-xl);
border-bottom: 1px solid var(--color-border);
}
.heading-text {
display: flex;
flex-direction: column;
gap: 2px;
gap: var(--space-s);
}
.heading-title {
font-size: 0.95rem;
font-size: var(--font-size-m);
font-weight: 600;
color: var(--foreground);
color: var(--color-text);
}
</style>
web/src/lib/components/kit/SchemaPreview.svelte
+1 -1
View File
@@ -139,7 +139,7 @@
.meta {
margin-top: var(--space-l);
}
@media (max-width: var(--bp-tablet)) {
@media (--bp-tablet) {
.pair {
grid-template-columns: 1fr;
}
web/src/lib/components/kit/SchemaToolView.svelte
+1 -1
View File
@@ -293,7 +293,7 @@
.no-schema {
font: var(--font-size-s) var(--font-mono);
}
@media (max-width: var(--bp-tablet)) {
@media (--bp-tablet) {
.workspace {
grid-template-columns: 1fr;
}
web/src/lib/components/kit/SettingGroup.svelte
+4 -4
View File
@@ -19,13 +19,13 @@
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0.6rem 1rem;
border-bottom: 1px solid var(--line);
gap: var(--space-xl);
padding: var(--space-m) var(--space-xl);
border-bottom: 1px solid var(--color-border);
}
.setting-control {
display: flex;
align-items: center;
gap: 0.5rem;
gap: var(--space-m);
}
</style>
web/src/lib/components/kit/SettingsFooter.svelte
+3 -3
View File
@@ -14,8 +14,8 @@
display: flex;
align-items: center;
justify-content: flex-end;
gap: 0.5rem;
padding: 0.75rem 1rem;
border-top: 1px solid var(--line);
gap: var(--space-m);
padding: var(--space-l) var(--space-xl);
border-top: 1px solid var(--color-border);
}
</style>
web/src/lib/components/kit/StatusDot.svelte
+3 -3
View File
@@ -2,9 +2,9 @@
<style>
.status-dot {
width: 6px;
height: 6px;
width: var(--space-s);
height: var(--space-s);
border-radius: 50%;
background-color: var(--success2);
background-color: var(--color-success);
}
</style>
web/src/lib/components/kit/StatusLine.svelte
+1 -1
View File
@@ -18,6 +18,6 @@
.status-line {
display: inline-flex;
align-items: center;
gap: 6px;
gap: var(--space-s);
}
</style>
web/src/lib/components/kit/StepCard.svelte
+21 -21
View File
@@ -46,44 +46,44 @@
.step-card {
display: grid;
grid-template-columns: 46px 20px 1fr;
min-height: 138px;
border: 1px solid var(--line);
background: var(--panel);
min-height: var(--size-step-min-height);
border: 1px solid var(--color-border);
background: var(--color-panel);
}
.step-index {
font: 11px var(--font-mono);
color: var(--blue);
padding: 17px 0 0px 15px;
font: var(--font-size-s) var(--font-mono);
color: var(--color-main);
padding: var(--space-xl) 0 0px var(--space-xl);
}
.step-body {
padding: 15px 18px 18px;
padding: var(--space-xl) var(--space-xl) var(--space-xl);
}
.step-heading {
display: flex;
align-items: center;
justify-content: space-between;
gap: 15px;
border-color: var(--line);
gap: var(--space-xl);
border-color: var(--color-border);
}
.step-type {
color: var(--muted);
font: 10px var(--font-mono);
letter-spacing: 0.12em;
color: var(--color-text-muted);
font: var(--font-size-s) var(--font-mono);
letter-spacing: var(--space-text-xl);
}
.step-title {
margin: 5px 0 18px;
font: 600 15px var(--font-mono);
color: var(--foreground);
margin: var(--space-s) 0 var(--space-xl);
font: 600 var(--font-size-m) var(--font-mono);
color: var(--color-text);
}
.step-tools {
display: flex;
align-items: center;
gap: 13px;
gap: var(--space-l);
}
.step-remove {
border: 0;
background: transparent;
color: var(--muted);
color: var(--color-text-muted);
cursor: pointer;
line-height: inherit;
& :global(svg) {
@@ -92,13 +92,13 @@
}
}
.step-card :global(.drag) {
margin-top: 17px;
color: var(--line);
margin-top: var(--space-xl);
color: var(--color-border);
}
.step-remove:hover {
color: var(--danger);
color: var(--color-danger);
}
.step-body > :not(.step-heading) {
padding: 0.75rem;
padding: var(--space-l);
}
</style>
web/src/lib/components/kit/ToolCard.svelte
+20 -20
View File
@@ -29,46 +29,46 @@
<style>
.tool-card {
display: grid;
grid-template-columns: 42px minmax(0, 1fr) 24px 18px;
grid-template-columns: var(--size-tool-icon) minmax(0, 1fr) 24px 18px;
align-items: center;
gap: 14px;
min-height: 106px;
padding: 16px;
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--panel);
color: var(--foreground);
gap: var(--space-l);
min-height: var(--size-tool-min-height);
padding: var(--space-xl);
border: 1px solid var(--color-border);
border-radius: var(--radius-m);
background: var(--color-panel);
color: var(--color-text);
text-decoration: none;
}
.tool-card:hover {
border-color: var(--blue);
border-color: var(--color-main);
}
.tool-icon {
width: 42px;
height: 42px;
width: var(--size-tool-icon);
height: var(--size-tool-icon);
display: grid;
place-items: center;
background: color-mix(in srgb, var(--blue) 12%, transparent);
color: var(--blue);
border-radius: var(--radius);
background: var(--color-main-soft);
color: var(--color-main);
border-radius: var(--radius-m);
}
.tool-copy {
display: flex;
flex-direction: column;
gap: 2px;
gap: var(--space-s);
min-width: 0;
}
.tool-copy strong {
font: 600 13px var(--font-mono);
color: var(--foreground);
font: 600 var(--font-size-s) var(--font-mono);
color: var(--color-text);
}
.tool-copy span {
font: 12px/1.5 var(--font-mono);
color: var(--muted);
color: var(--color-text-muted);
}
.tool-index {
font: 10px var(--font-mono);
color: var(--muted);
font: var(--font-size-s) var(--font-mono);
color: var(--color-text-muted);
align-self: start;
}
</style>
web/src/lib/components/kit/fields/CheckboxField.svelte
+4 -4
View File
@@ -21,12 +21,12 @@
.checkbox-field {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-size: 0.85rem;
color: var(--foreground);
gap: var(--space-m);
font-size: var(--font-size-m);
color: var(--color-text);
cursor: pointer;
}
.checkbox-field input {
accent-color: var(--blue);
accent-color: var(--color-main);
}
</style>
web/src/lib/components/kit/fields/ColorField.svelte
+16 -16
View File
@@ -39,42 +39,42 @@
<style>
.control-block :global(.icon) {
color: var(--foreground);
color: var(--color-text);
}
.control-title {
display: flex;
justify-content: space-between;
font: 10px var(--font-mono);
letter-spacing: 0.08em;
color: var(--muted);
margin-bottom: 8px;
font: var(--font-size-s) var(--font-mono);
letter-spacing: var(--space-text-l);
color: var(--color-text-muted);
margin-bottom: var(--space-m);
}
.color-field {
display: flex;
align-items: center;
gap: 8px;
padding-left: 8px;
padding-right: 8px;
height: 32px;
border: 1px solid var(--line);
gap: var(--space-m);
padding-left: var(--space-m);
padding-right: var(--space-m);
height: var(--space-xxxl);
border: 1px solid var(--color-border);
}
.swatch {
width: 14px;
height: 14px;
border: 1px solid var(--line);
width: var(--space-l);
height: var(--space-l);
border: 1px solid var(--color-border);
flex: none;
}
.color-field input {
min-width: 0;
color: var(--foreground);
font: 11px var(--font-mono);
color: var(--color-text);
font: var(--font-size-s) var(--font-mono);
background: 0 0;
border: 0;
outline: 0;
flex: 1;
}
.color-field :global(svg) {
color: var(--muted);
color: var(--color-text-muted);
flex: none;
}
</style>
web/src/lib/components/kit/fields/SelectField.svelte
+6 -6
View File
@@ -32,11 +32,11 @@
.select-field {
width: 100%;
font-family: var(--font-mono);
font-size: 11px;
color: var(--foreground);
background: var(--background);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 0.35rem 0.5rem;
font-size: var(--font-size-s);
color: var(--color-text);
background: var(--color-background);
border: 1px solid var(--color-border);
border-radius: var(--radius-m);
padding: var(--space-s) var(--space-m);
}
</style>
web/src/lib/components/kit/fields/SliderField.svelte
+8 -8
View File
@@ -33,19 +33,19 @@
label {
display: flex;
justify-content: space-between;
font: 10px var(--font-mono);
letter-spacing: 0.08em;
color: var(--muted);
margin-bottom: 8px;
font: var(--font-size-s) var(--font-mono);
letter-spacing: var(--space-text-l);
color: var(--color-text-muted);
margin-bottom: var(--space-m);
}
output {
font: 10px var(--font-mono);
color: var(--foreground);
font: var(--font-size-s) var(--font-mono);
color: var(--color-text);
}
input[type="range"] {
color: var(--foreground);
color: var(--color-text);
line-height: inherit;
width: 100%;
accent-color: var(--blue);
accent-color: var(--color-main);
}
</style>
web/src/lib/components/kit/fields/TextField.svelte
+7 -7
View File
@@ -36,15 +36,15 @@
.text-field {
width: 100%;
font-family: var(--font-mono);
font-size: 11px;
color: var(--foreground);
background: var(--background);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 0.35rem 0.5rem;
font-size: var(--font-size-s);
color: var(--color-text);
background: var(--color-background);
border: 1px solid var(--color-border);
border-radius: var(--radius-m);
padding: var(--space-s) var(--space-m);
}
.text-field:focus {
outline: none;
border-color: var(--blue);
border-color: var(--color-main);
}
</style>
web/src/lib/components/kit/ui/LangToggle.svelte
+7 -7
View File
@@ -23,22 +23,22 @@
.lang {
display: flex;
align-items: center;
border: 1px solid var(--line);
border: 1px solid var(--color-border);
}
.lang-btn {
border: 0;
background: transparent;
color: var(--muted);
font: 10px var(--font-mono);
padding: 6px 9px;
color: var(--color-text-muted);
font: var(--font-size-s) var(--font-mono);
padding: var(--space-s) var(--space-m);
cursor: pointer;
}
.lang-div {
color: var(--foreground);
color: var(--color-text);
font-family: var(--font-sans);
}
.lang-btn.active {
background: var(--foreground);
color: var(--background);
background: var(--color-text);
color: var(--color-background);
}
</style>
web/src/lib/components/kit/ui/Toggle.svelte
+7 -7
View File
@@ -27,19 +27,19 @@
<style>
.toggle {
position: relative;
width: 32px;
height: 18px;
border: 1px solid var(--line);
width: var(--space-xxxl);
height: var(--space-xl);
border: 1px solid var(--color-border);
border-radius: 0;
background: var(--background);
background: var(--color-background);
cursor: pointer;
padding: 0;
}
.toggle.on {
background: var(--blue);
border-color: var(--blue);
background: var(--color-main);
border-color: var(--color-main);
}
.toggle-knob {
transition: transform 0.12s ease;
transition: transform var(--duration-s) ease;
}
</style>
web/src/preview.css
+10
View File
@@ -138,10 +138,14 @@
--space-brand: 32px;
--space-page-top: 48px;
--space-page-bottom: 72px;
--space-text-s: 0;
--space-text-m: 0.04em;
--space-text-l: 0.08em;
--space-text-xl: 0.12em;
--space-text-2xl: 0.18em;
--size-border: 1px;
--size-border-thick: 2px;
@@ -150,6 +154,12 @@
--size-preview-canvas-min-height-l: 360px;
--size-panel-min-height: 220px;
--size-tool-icon: 42px;
--size-tool-min-height: 106px;
--size-step-min-height: 138px;
--size-content-max: 880px;
--size-content-max-wide: 1680px;
--font-size-s: 12px;
--font-size-m: 14px;
--font-size-l: 16px;
web/src/routes/preview/+layout.svelte
+3 -14
View File
@@ -32,7 +32,6 @@
});
let crumb = $derived(toCrumb(page.url.pathname));
let status = $derived(toStatus(page.url.pathname));
const CRUMB: Record<string, string> = {
"/preview/list-tools": "CATALOG",
@@ -40,12 +39,6 @@
"/preview/tools/remove-background-png": "BACKGROUND REMOVER",
};
const STATUS: Record<string, string> = {
"/preview/list-tools": "LOCAL MODE / READY",
"/preview/tools/linear-gradient-png": "LIVE PREVIEW",
"/preview/tools/remove-background-png": "AUTO PROCESSING",
};
function toCrumb(path: string): string {
return (
"/ " +
@@ -54,10 +47,6 @@
"PREVIEW")
);
}
function toStatus(path: string): string {
return STATUS[path] ?? "AUTO PIPELINE";
}
</script>
<main class="preview-root" data-theme={theme}>
@@ -70,9 +59,9 @@
main {
background-color: var(--color-background);
background-image:
linear-gradient(var(--background-muted) 1px, #0000 1px),
linear-gradient(90deg, var(--background-muted) 1px, #0000 1px);
background-size: 32px 32px;
linear-gradient(var(--color-background-muted) 1px, #0000 1px),
linear-gradient(90deg, var(--color-background-muted) 1px, #0000 1px);
background-size: var(--space-xxxl) var(--space-xxxl);
min-height: 100vh;
}
</style>
web/src/routes/preview/+page.svelte
+15 -15
View File
@@ -60,40 +60,40 @@
<style>
.workspace {
max-width: 880px;
max-width: var(--size-content-max);
margin: 0 auto;
padding: 2.5rem 1.25rem 4rem;
padding: var(--space-page-top) var(--space-xl) var(--space-page-bottom);
display: flex;
flex-direction: column;
gap: 1.5rem;
gap: var(--space-xxl);
}
.ws-head {
display: flex;
flex-direction: column;
gap: 0.5rem;
gap: var(--space-m);
}
.ws-eyebrow {
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.18em;
color: var(--muted);
font-size: var(--font-size-s);
letter-spacing: var(--space-text-2xl);
color: var(--color-text-muted);
}
.ws-title {
margin: 0;
font-size: 2rem;
font-size: var(--font-size-2xl);
font-weight: 700;
color: var(--foreground);
color: var(--color-text);
}
.ws-lede {
margin: 0;
max-width: 56ch;
color: var(--muted);
font-size: 0.95rem;
color: var(--color-text-muted);
font-size: var(--font-size-l);
}
.ws-search {
display: flex;
gap: 0.5rem;
padding: 0.75rem 1rem;
gap: var(--space-m);
padding: var(--space-l) var(--space-xl);
align-items: center;
}
.ws-field {
@@ -102,7 +102,7 @@
.ws-results {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 0.75rem;
padding: 0.5rem 1rem 1rem;
gap: var(--space-l);
padding: var(--space-m) var(--space-xl);
}
</style>
web/src/routes/preview/kit/+page.svelte
+11 -9
View File
@@ -192,10 +192,12 @@
.showcase {
max-width: none;
margin: 0 auto;
padding: 2.5rem clamp(24px, 4vw, 72px) 4rem;
padding: var(--space-page-top)
clamp(var(--space-xxl), 4vw, var(--space-page-bottom))
var(--space-page-bottom);
display: flex;
flex-direction: column;
gap: 1.25rem;
gap: var(--space-xl);
}
.showcase-head {
display: flex;
@@ -204,9 +206,9 @@
}
.showcase-eyebrow {
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.18em;
color: var(--muted);
font-size: var(--font-size-s);
letter-spacing: var(--space-text-2xl);
color: var(--color-text-muted);
}
.stack {
display: flex;
@@ -215,13 +217,13 @@
.tool-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 0.75rem;
padding: 0.75rem 1rem;
gap: var(--space-l);
padding: var(--space-l) var(--space-xl);
}
.preview-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 0.75rem;
padding: 0.75rem 1rem;
gap: var(--space-l);
padding: var(--space-l) var(--space-xl);
}
</style>
web/src/routes/preview/list-tools/+page.svelte
+11 -9
View File
@@ -49,25 +49,27 @@
<style>
.catalog-page {
padding: 60px clamp(24px, 4vw, 72px) 72px;
padding: var(--space-page-top)
clamp(var(--space-xxl), 4vw, var(--space-page-bottom))
var(--space-page-bottom);
}
.catalog-groups {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 56px 28px;
gap: var(--space-page-top) var(--space-xxl);
}
.catalog-footer {
display: flex;
gap: 1.5rem;
gap: var(--space-xxl);
flex-wrap: wrap;
margin-top: 56px;
padding-top: 24px;
border-top: 1px solid var(--line);
margin-top: var(--space-page-top);
padding-top: var(--space-xxl);
border-top: 1px solid var(--color-border);
font: 10px var(--font-mono);
letter-spacing: 0.08em;
color: var(--muted);
letter-spacing: var(--space-text-l);
color: var(--color-text-muted);
}
@media (max-width: 800px) {
@media (--bp-tablet) {
.catalog-groups {
grid-template-columns: 1fr;
}
web/src/routes/preview/tools/[id]/+page.svelte
+4 -2
View File
@@ -31,8 +31,10 @@
<style>
.notfound {
max-width: 1680px;
max-width: var(--size-content-max-wide);
margin: 0 auto;
padding: 48px clamp(24px, 4vw, 72px) 72px;
padding: var(--space-page-top)
clamp(var(--space-xxl), 4vw, var(--space-page-bottom))
var(--space-page-bottom);
}
</style>