-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
36 lines (36 loc) · 4.3 KB
/
Copy pathindex.html
File metadata and controls
36 lines (36 loc) · 4.3 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS minifier</title>
<meta name="description" content="Remove ordinary comments and redundant CSS whitespace while preserving strings and license comments.">
<link rel="canonical" href="https://cig13zs.github.io/minify-css/">
<style>
:root { color-scheme: light dark; --paper:#f7f4ed; --ink:#1f1d19; --muted:#6f695f; --line:#d7d0c3; --panel:#fffdf8; --accent:#0369a1; --soft:color-mix(in srgb, var(--accent) 12%, var(--paper)); }
@media (prefers-color-scheme:dark) { :root { --paper:#171613; --ink:#f2eee4; --muted:#aaa296; --line:#39342c; --panel:#201e19; --soft:#292118; } }
* { box-sizing:border-box; } body { width:min(100%, 980px); margin:0 auto; padding:clamp(20px, 5vw, 64px); background:var(--paper); color:var(--ink); font:15px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif; }
header { display:grid; grid-template-columns:1fr auto; gap:18px; align-items:start; border-bottom:1px solid var(--line); padding-bottom:18px; }
.path { color:var(--accent); font:12px/1.3 ui-monospace,Consolas,monospace; } h1 { margin:5px 0 4px; font:700 clamp(25px,5vw,42px)/1.05 Georgia,serif; letter-spacing:-.025em; }
.desc { max-width:660px; margin:0; color:var(--muted); } .note { color:var(--muted); font:12px ui-monospace,Consolas,monospace; white-space:nowrap; }
main { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:18px; margin-top:22px; } .pane { min-width:0; } label { display:block; margin-bottom:7px; font-weight:650; }
textarea { width:100%; min-height:330px; resize:vertical; border:1px solid var(--line); border-radius:7px; padding:12px; background:var(--panel); color:var(--ink); font:13px/1.55 ui-monospace,Consolas,monospace; }
:where(a,button,input,textarea):focus-visible { outline:3px solid var(--accent); outline-offset:3px; } .actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
button,.file { border:1px solid var(--line); border-radius:6px; padding:9px 13px; background:var(--panel); color:var(--ink); font:650 13px system-ui,sans-serif; cursor:pointer; } button.primary { background:var(--accent); border-color:var(--accent); color:#fff; }
.file input { display:block; margin-top:7px; max-width:220px; font-weight:400; } #status { min-height:23px; margin-top:10px; color:var(--muted); } #preview { display:block; max-width:100%; max-height:240px; margin-top:12px; border:1px solid var(--line); } #swatches { display:flex; gap:6px; flex-wrap:wrap; margin-top:10px; } #swatches span { width:38px; height:38px; border:1px solid var(--line); border-radius:5px; }
footer { display:flex; gap:18px; border-top:1px solid var(--line); margin-top:24px; padding-top:14px; font-size:13px; } a { color:var(--accent); }
@media (max-width:700px) { header,main { grid-template-columns:1fr; } .note { white-space:normal; } textarea { min-height:190px; } }
@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; transition:none!important; } }
</style>
</head>
<body>
<header><div><div class="path">jju1s/tools/minify-css</div><h1>CSS Minifier</h1><p class="desc">Remove ordinary comments and redundant CSS whitespace while preserving strings and license comments.</p></div><div class="note">browser tool</div></header>
<main>
<section class="pane"><label for="input">Input</label><textarea id="input" spellcheck="false" placeholder="Paste input or load the sample"></textarea><div class="actions"><button class="primary" id="run" type="button">Run</button><button id="sample" type="button">Sample</button></div></section>
<section class="pane"><label for="output">Result</label><textarea id="output" readonly spellcheck="false"></textarea><div class="actions"><button id="copy" type="button">Copy</button></div><div id="status" role="status" aria-live="polite">Ready</div><img id="preview" alt="Decoded preview" hidden><div id="swatches" aria-label="Extracted colors"></div></section>
</main>
<footer><a href="https://github.com/cig13zs/minify-css" target="_blank" rel="noopener noreferrer">source</a><a href="privacy.html">privacy</a><a href="https://ko-fi.com/jju1s" target="_blank" rel="noopener noreferrer">support</a></footer>
<script src="core.js"></script>
<script src="app.js"></script>
</body>
</html>