slightly-better-css/dist/slightly-better.min.css

A webpage without any CSS is slightly too ugly, libraries like Bootstrap are way too heavy, and you have too much taste to use the other CSS libraries out there. Slightly Better CSS is a small, simple stylesheet for any project that needs to look just a l

/*!
 * Slightly Better CSS v1.0.0
 * Author: printer_scanner
 * License: MIT
 */:where(*,:before,:after){box-sizing:border-box}:root{--accent-color:#33e;--background-color:#fff;--border-radius:0.25rem;--font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;--font-size:110%;--muted-color:#f6f6f6;--page-width:47rem;--text-color:#202020;--transition-speed:0.2s;--button-padding:0.625rem 0.9375rem}@media (min-width:48rem){:root{--font-size:var(--font-size-lg)}}@media (min-width:75rem){:root{--font-size:var(--font-size-lg)}}@media (prefers-color-scheme:dark){:root{--accent-color:#c4c8b1;--background-color:#17161a;--text-color:#ecdfcc;--muted-color:#3c3d37}}body{animation:fadeIn var(--transition-speed) ease-in-out;background-color:var(--background-color);color:var(--text-color);font-family:var(--font-family);font-size:var(--font-size);line-height:1.4;margin:0;word-break:break-word}h1,h2,h3,h4,h5,h6{font-weight:800;line-height:1.2}h1{font-size:2.5rem}h2{font-size:1.75rem}h3{font-size:1.5rem}h4,h5,h6{font-size:1rem}a{color:var(--text-color);font-weight:inherit;text-decoration:none}a:focus,a:hover{color:var(--accent-color);text-decoration:underline}a:focus,button:focus,input:focus{outline:.125rem solid var(--accent-color);outline-offset:.125rem}time{font-weight:700}sub{font-size:.6em;vertical-align:bottom}small{font-size:.8em}blockquote,q{background:var(--muted-color);border-left:.5rem solid var(--accent-color);border-radius:var(--border-radius);display:block;margin:2rem 0;padding:1rem}code,kbd,pre,samp,var{font-family:Menlo,monospace;font-size:.9em}var{font-style:normal}pre{overflow:auto;padding:1rem}code,pre{background-color:var(--muted-color);border-radius:var(--border-radius)}code{color:var(--accent-color);padding:.25rem}hr{background:var(--text-color);border:0;height:.0625rem;margin:4rem 0}img{display:block;height:auto;margin:0 auto;max-width:100%}figure{margin:2rem 0;padding:1rem;text-align:center}figure figcaption{font-size:.8em;margin-top:.5rem}footer,header,section{padding:1.875rem}footer,header,main{margin:auto;width:var(--page-width)}ol,ul{line-height:2;padding-left:1.25rem}table{border:.0625rem solid var(--accent-color);border-collapse:collapse;table-layout:fixed;width:100%}table caption{margin:1rem 0}table tbody tr:nth-child(2n){background:var(--muted-color)}table td,table th{border:.0625rem solid var(--accent-color);padding:1rem}table th{background:var(--accent-color);color:var(--background-color);font-weight:400}input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--muted-color);border:.0625rem solid var(--accent-color);border-radius:var(--border-radius);color:var(--text-color);font-size:.8em;margin:.5rem 0;padding:.5rem}input:active,input:focus{border-color:var(--accent-color);outline:none}button{background-color:var(--accent-color);border:none;border-radius:var(--border-radius);cursor:pointer;font-weight:700;padding:var(--button-padding);transition:background-color var(--transition-speed) ease}button,button:hover{color:var(--background-color)}button:hover{background-color:var(--text-color)}button:active{transform:scale(.98)}details{border:.0625rem solid var(--muted-color);border-radius:var(--border-radius);margin-bottom:1rem;padding:1rem}summary{cursor:pointer;font-weight:700}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.p-1{padding:.5rem}.p-2{padding:1rem}.text-center{text-align:center}.text-right{text-align:right}