diff --git a/app.js b/app.js index a3251ff..32dbedf 100644 --- a/app.js +++ b/app.js @@ -1,24 +1,8 @@ import { stripComments } from './src/comment-stripper.js'; import { getProfiles, detectLanguageByContent, detectLanguageByFilename } from './src/languages.js'; -const codeInput=document.querySelector('#codeInput');const output=document.querySelector('#outputCode');const languageSelect=document.querySelector('#languageSelect');const fileInput=document.querySelector('#fileInput');const inputLabel=document.querySelector('#inputLabel');const outputLabel=document.querySelector('#outputLabel');const inputFileName=document.querySelector('#inputFileName');const outputPane=document.querySelector('#outputPane');const outputStatus=document.querySelector('#outputStatus');const inputGutter=document.querySelector('#inputGutter');const outputGutter=document.querySelector('#outputGutter');const commentsStat=document.querySelector('#commentsStat');const bytesStat=document.querySelector('#bytesStat');const linesStat=document.querySelector('#linesStat');const statusStat=document.querySelector('#statusStat');const statsbar=document.querySelector('#statsbar');const stripButton=document.querySelector('#stripButton');const themeToggle=document.querySelector('#themeToggle');const themeLabel=document.querySelector('#themeLabel');const themeFlag=document.querySelector('#themeFlag');const snippetTray=document.querySelector('#snippetTray'); -const snippets={javascript:'// API configuration\nconst url = "https://example.com/api//users";\n\n/* temporary calculation */\nconst total = 10 + 20;\n\nconst message = "Don\'t remove // this";\nconsole.log(message);',python:'# Configuration\nname = "Aaqib" # user name\n\nurl = "https://example.com/api#users"\n\n"""\nThis is a multiline string.\n# This must NOT be removed.\n"""\n\nprint(name)',java:'// Create the user\npublic class User {\n /* constructor */\n public User(String name) {\n this.name = name;\n }\n\n private String name;\n\n // return the name\n public String getName() {\n return name;\n }\n}',html:'\n\n\n \n

Hello World

\n \n',css:'/* Main container */\n.container {\n width: 100%; /* keep the declaration */\n background: url("https://example.com/image//1.png");\n}',sql:"-- Fetch active users\nSELECT id, name\nFROM users\nWHERE status = 'active'; -- only active users\n\n/* temporary filter */\nORDER BY name;"}; -let currentLanguage='generic';let lastOutput='';let processing=false;const prefersReducedMotion=window.matchMedia('(prefers-reduced-motion: reduce)').matches; -function lineCount(value){return value?value.split(/\r\n|\r|\n/).length:0} -function updateGutter(gutter,count){gutter.innerHTML=Array.from({length:Math.max(1,count)},(_,i)=>`${i+1}`).join('')} -function updateLabels(){const suffix=currentLanguage==='generic'?'txt':currentLanguage;inputLabel.textContent=`input.${suffix} · ${lineCount(codeInput.value)} lines`;outputLabel.textContent=`output.${suffix} · ${lineCount(output.value)} lines`} -function detectLanguage(){const selected=languageSelect.value;currentLanguage=selected==='auto'?detectLanguageByContent(codeInput.value):selected} -function setOutput(value){lastOutput=value;output.value=value;updateGutter(outputGutter,lineCount(value));output.scrollTop=codeInput.scrollTop;updateLabels()} -function calculateStats(source,result){const saved=Math.max(0,new TextEncoder().encode(source).length-new TextEncoder().encode(result).length);const lines=Math.max(0,lineCount(source)-lineCount(result));const comments=Math.max(0,Math.round((source.length-result.length)/8));return{saved,lines,comments}} -function flashStats(){statsbar.classList.remove('flash');requestAnimationFrame(()=>{statsbar.classList.add('flash');setTimeout(()=>statsbar.classList.remove('flash'),420)})} -function process(){if(processing)return;detectLanguage();try{const result=stripComments(codeInput.value,currentLanguage);setOutput(result);const stats=calculateStats(codeInput.value,result);commentsStat.textContent=stats.comments.toLocaleString();bytesStat.textContent=stats.saved.toLocaleString();linesStat.textContent=stats.lines.toLocaleString();statusStat.textContent=codeInput.value?'ready':'awaiting input...';outputPane.classList.remove('error');outputStatus.classList.remove('visible');flashStats()}catch(error){outputPane.classList.add('error');outputStatus.textContent=`error: ${error instanceof Error?error.message:String(error)}`;outputStatus.classList.add('visible');statusStat.textContent='error';}} -function loadLanguages(){languageSelect.innerHTML=''+getProfiles().filter(p=>p.id!=='generic').map(p=>``).join('')} -function syncScroll(){inputGutter.scrollTop=codeInput.scrollTop;outputGutter.scrollTop=output.scrollTop} -function setTheme(theme){document.documentElement.dataset.theme=theme;const dark=theme==='dark';themeLabel.textContent=dark?'--dark':'--light';themeFlag.textContent=dark?'[■□]':'[□■]';localStorage.setItem('nocodecomments-theme',theme)} -function toggleTheme(){setTheme(document.documentElement.dataset.theme==='dark'?'light':'dark')} -function startProcessing(){if(processing)return;processing=true;stripButton.disabled=true;const frames=['[ | ]','[ / ]','[ – ]','[ \\ ]'];let index=0;stripButton.textContent=frames[index];const timer=setInterval(()=>{index=(index+1)%frames.length;stripButton.textContent=frames[index]},90);setTimeout(()=>{clearInterval(timer);stripButton.textContent='> strip comments';processing=false;stripButton.disabled=false;const wrap=document.querySelector('#outputEditorWrap');wrap.classList.add('sweep');if(!prefersReducedMotion)setTimeout(()=>wrap.classList.remove('sweep'),360);process()},prefersReducedMotion?0:360)} -function readFile(file){const reader=new FileReader();reader.onload=()=>{codeInput.value=String(reader.result||'');inputFileName.textContent=file.name;const detected=detectLanguageByFilename(file.name);languageSelect.value=detected==='generic'?'auto':detected;updateGutter(inputGutter,lineCount(codeInput.value));process()};reader.onerror=()=>{outputPane.classList.add('error');outputStatus.textContent='error: unable to read file';outputStatus.classList.add('visible')};reader.readAsText(file)} -function download(text,name){const url=URL.createObjectURL(new Blob([text],{type:'text/plain;charset=utf-8'}));const link=document.createElement('a');link.href=url;link.download=name;link.click();URL.revokeObjectURL(url)} -loadLanguages();setTheme(localStorage.getItem('nocodecomments-theme')==='light'?'light':'dark');updateGutter(inputGutter,1);updateGutter(outputGutter,1);updateLabels(); -codeInput.addEventListener('input',()=>{updateGutter(inputGutter,lineCount(codeInput.value));updateLabels();process()});codeInput.addEventListener('scroll',syncScroll);output.addEventListener('scroll',()=>{outputGutter.scrollTop=output.scrollTop});languageSelect.addEventListener('change',process);themeToggle.addEventListener('click',toggleTheme);stripButton.addEventListener('click',startProcessing);document.querySelector('#clearButton').addEventListener('click',()=>{codeInput.value='';setOutput('');inputFileName.textContent='stdin';commentsStat.textContent='0';bytesStat.textContent='0';linesStat.textContent='0';statusStat.textContent='awaiting input...';outputPane.classList.remove('error');outputStatus.classList.remove('visible');updateGutter(inputGutter,1)});document.querySelector('#copyButton').addEventListener('click',async()=>{await navigator.clipboard.writeText(lastOutput);statusStat.textContent='copied';setTimeout(()=>statusStat.textContent=codeInput.value?'ready':'awaiting input...',900)});document.querySelector('#inputDownloadButton').addEventListener('click',()=>download(codeInput.value,inputFileName.textContent&&inputFileName.textContent!=='stdin'?inputFileName.textContent:'source-code.txt'));document.querySelector('#outputDownloadButton').addEventListener('click',()=>download(lastOutput,'stripped-code.txt'));fileInput.addEventListener('change',e=>{const file=e.target.files?.[0];if(file)readFile(file)});codeInput.addEventListener('dragover',e=>{e.preventDefault();document.querySelector('#inputEditorWrap').classList.add('drag')});codeInput.addEventListener('dragleave',()=>document.querySelector('#inputEditorWrap').classList.remove('drag'));codeInput.addEventListener('drop',e=>{e.preventDefault();document.querySelector('#inputEditorWrap').classList.remove('drag');const file=e.dataTransfer.files?.[0];if(file)readFile(file)});document.querySelectorAll('.snippet').forEach(button=>button.addEventListener('click',()=>{const language=button.dataset.language;codeInput.value=snippets[language];languageSelect.value=language;inputFileName.textContent=`test-${language}.txt`;snippetTray.open=false;updateGutter(inputGutter,lineCount(codeInput.value));process()}));document.addEventListener('keydown',e=>{if((e.ctrlKey||e.metaKey)&&e.key==='Enter'){e.preventDefault();startProcessing()}if(e.key==='Escape'&&snippetTray.open)snippetTray.open=false}); -process(); +const codeInput=document.querySelector('#codeInput');const output=document.querySelector('#outputCode');const languageSelect=document.querySelector('#languageSelect');const fileInput=document.querySelector('#fileInput');const fileName=document.querySelector('#fileName');const stats=document.querySelector('#stats');const whitespaceToggle=document.querySelector('#trimWhitespace');const copyButton=document.querySelector('#copyButton');const downloadButton=document.querySelector('#downloadButton');const clearButton=document.querySelector('#clearButton'); +function loadLanguages(){languageSelect.innerHTML=''+getProfiles().filter(p=>p.id!=='generic').map(p=>``).join('');} +function process(){const selected=languageSelect.value;const language=selected==='auto'?detectLanguageByContent(codeInput.value):selected;let result=stripComments(codeInput.value,language);if(whitespaceToggle.checked)result=result.replace(/^[ \t]+$/gm,'').replace(/\n{3,}/g,'\n\n');output.value=result;stats.textContent=`${language} · ${Math.max(0,codeInput.value.length-result.length).toLocaleString()} characters removed`;} +function readFile(file){const reader=new FileReader();reader.onload=()=>{codeInput.value=String(reader.result||'');fileName.textContent=file.name;const detected=detectLanguageByFilename(file.name);languageSelect.value=detected==='generic'?'auto':detected;process();};reader.readAsText(file);} +loadLanguages();codeInput.addEventListener('input',process);languageSelect.addEventListener('change',process);whitespaceToggle.addEventListener('change',process);document.querySelector('#uploadButton').addEventListener('click',()=>fileInput.click());fileInput.addEventListener('change',e=>{const file=e.target.files?.[0];if(file)readFile(file);});codeInput.addEventListener('dragover',e=>{e.preventDefault();codeInput.classList.add('drag');});codeInput.addEventListener('dragleave',()=>codeInput.classList.remove('drag'));codeInput.addEventListener('drop',e=>{e.preventDefault();codeInput.classList.remove('drag');const file=e.dataTransfer.files?.[0];if(file)readFile(file);});copyButton.addEventListener('click',async()=>{await navigator.clipboard.writeText(output.value);copyButton.textContent='Copied';setTimeout(()=>{copyButton.textContent='Copy output';},1200);});downloadButton.addEventListener('click',()=>{const blob=new Blob([output.value],{type:'text/plain;charset=utf-8'});const url=URL.createObjectURL(blob);const link=document.createElement('a');link.href=url;link.download=fileName.textContent&&fileName.textContent!=='No file selected'?`stripped-${fileName.textContent}`:'stripped-code.txt';link.click();URL.revokeObjectURL(url);});clearButton.addEventListener('click',()=>{codeInput.value='';output.value='';fileName.textContent='No file selected';stats.textContent='Ready';});codeInput.addEventListener('keydown',e=>{if(e.ctrlKey&&e.key==='Enter')process();});process(); diff --git a/index.html b/index.html index 07e35ab..c922658 100644 --- a/index.html +++ b/index.html @@ -1,68 +1,47 @@ - - - - - - - - - - -NoCodeComments · strip-comments - - - -
- ~/strip-comments $ -
- -
-
- - -
-
-
-
-
-
- input.js · 0 lines - -
-
- - -
-
stdin
-
-
-
- output.js · 0 lines - -
-
-
- - -
-
-
-
- comments: 0|bytes saved: 0|lines removed: 0|awaiting input... -
-
- > test snippets -
- - - - - - -
-
- -
- - - +NoCodeComments · Universal Comment Stripper
NoCodeComments

Strip comments without breaking code.

A browser-only, syntax-aware comment remover. It protects quoted strings, template literals and regex literals, preserves line endings, and supports dozens of language families.

No file selectedReady

Input

Paste, type, or drop a file

Comment-free output

Test snippets

Copy a snippet into the editor to verify comment removal and string protection.

JavaScript
// API configuration
+const url = "https://example.com/api//users";
+
+/* temporary calculation */
+const total = 10 + 20;
+
+const message = "Don't remove // this";
+console.log(message);
Python
# Configuration
+name = "Aaqib"  # user name
+
+url = "https://example.com/api#users"
+
+"""
+This is a multiline string.
+# This must NOT be removed.
+"""
+
+print(name)
Java
// Create the user
+public class User {
+    /* constructor */
+    public User(String name) {
+        this.name = name;
+    }
+
+    private String name;
+
+    // return the name
+    public String getName() {
+        return name;
+    }
+}
HTML
<!DOCTYPE html>
+<!-- Page comment -->
+<html>
+  <body>
+    <h1>Hello <!-- inline comment --> World</h1>
+  </body>
+</html>
CSS
/* Main container */
+.container {
+    width: 100%; /* keep the declaration */
+    background: url("https://example.com/image//1.png");
+}
SQL
-- Fetch active users
+SELECT id, name
+FROM users
+WHERE status = 'active'; -- only active users
+
+/* temporary filter */
+ORDER BY name;
Legacy versionGitHub repository
diff --git a/style.css b/style.css index a1f1c85..c92850f 100644 --- a/style.css +++ b/style.css @@ -1,4 +1,37 @@ -@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600&display=swap'); -:root{font-family:"JetBrains Mono","Fira Code","IBM Plex Mono",ui-monospace,monospace;font-size:13px;font-weight:400;color-scheme:dark;--bg:#0a0e0f;--raised:#111716;--inset:#0d1212;--border:#1f2b28;--active:#2ecc71;--primary:#d7f5df;--muted:#5f7d70;--accent:#2ecc71;--bright:#4ade80;--warn:#f5b942;--error:#ff5f56;--caret:#2ecc71;--button-text:#08110c} -:root[data-theme=light]{color-scheme:light;--bg:#f4f1e8;--raised:#fff;--inset:#faf8f0;--border:#d9d3bf;--active:#1f7a3d;--primary:#1a1f1c;--muted:#6b6555;--accent:#1f7a3d;--bright:#2ecc71;--warn:#b8860b;--error:#c93b32;--caret:#1f7a3d;--button-text:#fff} -*{box-sizing:border-box}html,body{height:100%;margin:0}body{overflow:hidden;background:var(--bg);color:var(--primary);font-family:inherit}button,select,textarea,input{font:inherit;font-weight:400}button,select{color:var(--primary)}button{cursor:pointer}button:disabled{cursor:wait;opacity:.7}.topbar{position:fixed;inset:0 0 auto 0;height:48px;z-index:10;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;background:var(--raised);border-bottom:1px solid var(--border)}.wordmark{color:var(--accent);font-weight:600;text-decoration:none;padding:0 14px}.topbar-center{justify-self:center}.language-shell{display:flex;align-items:center;height:30px;border:1px solid var(--border);background:var(--raised);padding-left:10px}.language-shell span{color:var(--muted)}.language-shell select{height:28px;border:0;outline:0;background:transparent;padding:0 28px 0 5px;color:var(--primary);appearance:auto}.topbar-actions{justify-self:end;display:flex;align-items:center;gap:8px;padding-right:10px}.theme-control,.button,.bracket-button{border:1px solid var(--border);border-radius:0;background:transparent;min-height:30px;padding:4px 9px;transition:color 110ms ease-out,border-color 110ms ease-out,background-color 110ms ease-out}.theme-control:hover,.bracket-button:hover{border-color:var(--accent);color:var(--primary)}.theme-control{display:flex;gap:7px;align-items:center;color:var(--muted)}.button.primary{border-color:var(--accent);background:var(--accent);color:var(--button-text);font-weight:600}.button.primary:hover{background:var(--bright);border-color:var(--bright)}.app-shell{height:100%;padding-top:48px;display:grid;grid-template-rows:minmax(0,1fr) 32px;gap:0}.workspace{min-height:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.pane{min-width:0;min-height:0;display:grid;grid-template-rows:30px minmax(0,1fr) 26px;background:var(--inset)}.pane+ .pane{border-left:1px solid var(--border)}.pane-tab{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 8px;border-bottom:1px solid var(--border);background:var(--raised);color:var(--muted);font-size:13px;white-space:nowrap}.pane-actions{display:flex;gap:4px}.bracket-button{min-height:24px;padding:2px 6px;color:var(--muted);font-size:12px}.editor-wrap{min-height:0;display:grid;grid-template-columns:50px minmax(0,1fr);overflow:hidden}.gutter{overflow:hidden;border-right:1px solid var(--border);padding:12px 10px 12px 8px;text-align:right;color:var(--muted);font-size:14px;line-height:1.6;user-select:none}.gutter span{display:block;height:22.4px}.editor-wrap textarea{width:100%;height:100%;min-height:0;resize:none;border:0;outline:0;border-radius:0;background:var(--inset);color:var(--primary);padding:12px 16px;font:14px/1.6 inherit;caret-color:transparent;overflow:auto}.editor-wrap textarea:focus{outline:1px solid var(--accent);outline-offset:-1px}.editor-wrap textarea::placeholder{color:var(--muted);opacity:1}.editor-wrap textarea:focus::after{content:""}.editor-wrap:focus-within{outline:1px solid var(--accent);outline-offset:2px}.editor-wrap textarea:focus{background-image:linear-gradient(var(--caret),var(--caret));background-repeat:no-repeat;background-size:2px 1.6em;background-position:16px 12px}.output-wrap textarea{cursor:text}.pane-footer{display:flex;justify-content:space-between;align-items:center;padding:0 9px;border-top:1px solid var(--border);color:var(--muted);background:var(--raised);font-size:12px}.file-button{cursor:pointer;color:var(--muted);transition:color 110ms ease-out}.file-button:hover{color:var(--primary)}.output-status{display:none;height:24px;padding:4px 10px;border-bottom:1px solid var(--error);color:var(--error);background:var(--inset);font-size:12px}.output-status.visible{display:block}.pane.error .editor-wrap{outline:1px solid var(--error);outline-offset:-1px}.output-wrap.sweep{background:linear-gradient(90deg,transparent 0%,rgba(46,204,113,.12) 48%,transparent 100%);background-size:180% 100%;animation:sweep 360ms linear}.statsbar{display:flex;align-items:center;gap:9px;padding:0 10px;border-top:1px solid var(--border);background:var(--raised);color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden}.statsbar b{font-weight:400;color:var(--muted)}.statsbar.flash b{color:var(--accent)}.snippet-tray{position:fixed;left:10px;right:10px;bottom:40px;z-index:8;border:1px solid var(--border);background:var(--raised);max-height:220px}.snippet-tray summary{cursor:pointer;padding:7px 9px;color:var(--muted);list-style:none}.snippet-tray summary::-webkit-details-marker{display:none}.snippet-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0;border-top:1px solid var(--border)}.snippet{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:9px 10px;border:0;border-right:1px solid var(--border);border-radius:0;background:transparent;text-align:left}.snippet:last-child{border-right:0}.snippet:hover{background:color-mix(in srgb,var(--accent) 8%,transparent)}.snippet span{color:var(--primary);font-size:12px}.snippet small{color:var(--muted);font-size:10px;line-height:1.4}@keyframes cursor-blink{0%,49%{opacity:1}50%,100%{opacity:0}}@keyframes sweep{from{background-position:-180% 0}to{background-position:180% 0}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.editor-wrap textarea:focus{background-image:none}}@media(max-width:767px){body{overflow:auto}.app-shell{height:auto;min-height:100%;grid-template-rows:auto 32px}.workspace{grid-template-columns:1fr}.pane{min-height:46vh}.pane+ .pane{border-left:0;border-top:1px solid var(--border)}.topbar{position:sticky;grid-template-columns:1fr auto;height:auto;min-height:48px}.topbar-center{grid-column:1 / -1;grid-row:2;padding:6px 10px}.topbar-actions{grid-column:2;grid-row:1}.wordmark{grid-column:1;grid-row:1}.snippet-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.snippet{border-bottom:1px solid var(--border)}.snippet-tray{position:static;margin:0 10px 8px;max-height:none}.statsbar{position:sticky;bottom:0}.app-shell{padding-top:0}} +*{box-sizing:border-box} +:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#172033;background:#f5f7fb;color-scheme:light} +body{margin:0;background:linear-gradient(180deg,#f8fafc 0%,#eef3f8 100%);color:#172033} +main{max-width:1320px;margin:0 auto;padding:32px} +.hero{margin-bottom:24px} +.eyebrow{color:#2563eb;text-transform:uppercase;letter-spacing:.12em;font-size:12px;font-weight:800} +.hero h1{font-size:clamp(30px,5vw,56px);line-height:1.05;margin:8px 0 10px;letter-spacing:-.03em;color:#101828} +.hero p{color:#475467;max-width:820px;line-height:1.65;margin:0} +.grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px} +.card{background:#fff;border:1px solid #d9e0e8;border-radius:16px;padding:18px;box-shadow:0 10px 28px rgba(16,24,40,.06)} +.bar{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:12px;flex-wrap:wrap} +.bar h2{font-size:17px;margin:0;color:#101828} +textarea{width:100%;min-height:55vh;resize:vertical;background:#fbfcfe;color:#1d2939;border:1px solid #cfd8e3;border-radius:12px;padding:16px;font:14px/1.65 ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace;outline:none;box-shadow:inset 0 1px 2px rgba(16,24,40,.03)} +textarea:focus{border-color:#84adff;box-shadow:0 0 0 3px rgba(37,99,235,.12)} +.drag{border-color:#2563eb!important;background:#f8fbff} +.controls{display:flex;gap:10px;align-items:center;flex-wrap:wrap} +.controls select,.controls button{background:#fff;color:#1d2939;border:1px solid #cfd8e3;border-radius:9px;padding:10px 12px;font-weight:650;cursor:pointer} +.controls select:focus,.controls button:focus{outline:none;border-color:#84adff;box-shadow:0 0 0 3px rgba(37,99,235,.12)} +.controls button:hover{background:#f8fafc;border-color:#b9c4d1} +.controls button.primary{background:#2563eb;color:#fff;border-color:#2563eb} +.controls button.primary:hover{background:#1d4ed8;border-color:#1d4ed8} +.status{color:#667085;font-size:13px} +.snippets{margin-top:18px} +.snippet-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px} +.snippet-grid details{border:1px solid #d9e0e8;border-radius:12px;background:#fbfcfe;overflow:hidden} +.snippet-grid summary{cursor:pointer;padding:12px 14px;font-weight:700;color:#344054;list-style:none} +.snippet-grid summary::-webkit-details-marker{display:none} +.snippet-grid summary::after{content:"+";float:right;color:#667085} +.snippet-grid details[open] summary::after{content:"−"} +.snippet-grid pre{margin:0;padding:0 14px 14px;white-space:pre-wrap;overflow:auto} +.snippet-grid code{display:block;font:12px/1.6 ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace;color:#1d2939} +.footer{display:flex;justify-content:center;gap:10px;margin:28px 0 4px;flex-wrap:wrap} +.legacy,.repo-link{color:#667085;text-decoration:none;border:1px solid #cfd8e3;padding:9px 13px;border-radius:9px;background:#fff} +.legacy:hover,.repo-link:hover{color:#344054;border-color:#98a2b3;background:#f8fafc} +@media(max-width:1000px){.snippet-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} +@media(max-width:900px){.grid{grid-template-columns:1fr}textarea{min-height:36vh}main{padding:20px}} +@media(max-width:620px){.snippet-grid{grid-template-columns:1fr}}