feat: css audit fixes

2026-08-30 04:11:17 +05:00
parent 2ef4709038
commit dbeffac082
5 changed files with 161 additions and 171 deletions
@@ -0,0 +1,21 @@
+<footer class="preview-footer">
+	<span>easy-png-tools <b class="version">v2.4.0</b></span>
+	<span>© 2024</span>
+</footer>
+
+<style>
+	.preview-footer {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: 1rem;
+		padding: 16px clamp(20px, 4vw, 64px);
+		border-top: 1px solid var(--line);
+		font: 10px var(--font-mono);
+		letter-spacing: 0.08em;
+		color: var(--muted);
+	}
+	.preview-footer .version {
+		color: var(--blue);
+	}
+</style>
@@ -0,0 +1,37 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+
+	interface Props {
+		settings: Snippet;
+		preview: Snippet;
+	}
+
+	let { settings, preview }: Props = $props();
+</script>
+
+<div class="ws">
+	<section class="ws-settings">{@render settings()}</section>
+	{@render preview()}
+</div>
+
+<style>
+	.ws {
+		display: grid;
+		grid-template-columns: minmax(0, 1.05fr) minmax(520px, 0.95fr);
+		align-items: start;
+		gap: 56px;
+		max-width: none;
+		margin: auto;
+		padding: 60px clamp(24px, 4vw, 72px) 72px;
+	}
+	.ws-settings {
+		min-width: 0;
+	}
+	@media (max-width: 800px) {
+		.ws {
+			grid-template-columns: 1fr;
+			gap: var(--ws-gap-mobile);
+			padding: 36px 16px 48px;
+		}
+	}
+</style>
@@ -1,57 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from "svelte";
-
-	interface Props {
-		settings: Snippet;
-		preview: Snippet;
-		columns?: string;
-		gap?: string;
-		padding?: string;
-		maxWidth?: string;
-		stickyTop?: string;
-		padMobile?: string;
-		gapMobile?: string;
-	}
-
-	let {
-		settings,
-		preview,
-		columns = "minmax(0, 1fr) minmax(0, 1.1fr)",
-		gap = "40px",
-		padding = "48px clamp(24px, 4vw, 72px) 72px",
-		maxWidth = "1680px",
-		stickyTop = "84px",
-		padMobile = "32px 16px 48px",
-		gapMobile = "24px",
-	}: Props = $props();
-</script>
-
-<div
-	class="ws"
-	style="--ws-cols:{columns};--ws-gap:{gap};--ws-pad:{padding};--ws-max:{maxWidth};--ws-sticky:{stickyTop};--ws-pad-mobile:{padMobile};--ws-gap-mobile:{gapMobile};"
->
-	<section class="ws-settings">{@render settings()}</section>
-	{@render preview()}
-</div>
-
-<style>
-	.ws {
-		display: grid;
-		grid-template-columns: var(--ws-cols);
-		align-items: start;
-		gap: var(--ws-gap);
-		max-width: var(--ws-max);
-		margin: auto;
-		padding: var(--ws-pad);
-	}
-	.ws-settings {
-		min-width: 0;
-	}
-	@media (max-width: 800px) {
-		.ws {
-			grid-template-columns: 1fr;
-			gap: var(--ws-gap-mobile);
-			padding: var(--ws-pad-mobile);
-		}
-	}
-</style>