Something went wrong. Try again.
lightweight, simple, classless CSS framework inspired by new.css devcss.devins.page
framework lightweight css classless stylesheet
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480/* dev.css v3, a classless CSS framework - https://github.com/intergrav/dev.css */
/* Table of Contents 1. Configuration 2. Dark Mode Handling 3. CSS Reset 4. Margins for Most Elements 5. Font Family 6. Body and Selection Styling 7. Typography 8. Blockquotes 9. Header 10. Footer 11. Buttons and Inputs 12. Code and Keyboards 13. Details 14. Description Lists 15. Horizontal Rules 16. Fieldsets 17. Tables 18. Lists*/
/* 1. Configuration */:root { /* Font families */ --dc-font-sans: "Geist", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --dc-font-mono: "Geist Mono", monospace;
/* Light colors */ --dc-tx-1: #000000; --dc-tx-2: #1a1a1a; --dc-bg-1: #fafafa; --dc-bg-2: #fff; --dc-bg-3: #ebebeb; --dc-lk-1: #0068d6; --dc-lkb-1: #0072f5; --dc-lkb-2: #0062d1; --dc-lkb-tx: #ededed; --dc-ac-1: #8e4ec6; --dc-ac-tx: #ededed;
/* Dark colors */ --dc-d-tx-1: #ededed; --dc-d-tx-2: #a1a1a1; --dc-d-bg-1: #000; --dc-d-bg-2: #0a0a0a; --dc-d-bg-3: #2e2e2e; --dc-d-lk-1: #52a8ff; --dc-d-lkb-1: #0072f5; --dc-d-lkb-2: #0062d1; --dc-d-lkb-tx: #ededed; --dc-d-ac-1: #8e4ec6; --dc-d-ac-tx: #ededed;}
/* 2. Dark Mode Handling */@media (prefers-color-scheme: dark) { :root { --dc-tx-1: var(--dc-d-tx-1); --dc-tx-2: var(--dc-d-tx-2); --dc-bg-1: var(--dc-d-bg-1); --dc-bg-2: var(--dc-d-bg-2); --dc-bg-3: var(--dc-d-bg-3); --dc-lk-1: var(--dc-d-lk-1); --dc-lkb-1: var(--dc-d-lkb-1); --dc-lkb-2: var(--dc-d-lkb-2); --dc-lkb-tx: var(--dc-d-lkb-tx); --dc-ac-1: var(--dc-d-ac-1); --dc-ac-tx: var(--dc-d-ac-tx); }}
/* 3. CSS Reset */*,*::before,*::after { box-sizing: border-box; margin: 0; word-break: break-word;}
body { line-height: 1.5;}
img,picture,video,canvas,svg { display: block; max-width: 100%;}
input,button,textarea,select { font: inherit;}
#root,#__next { isolation: isolate;}
/* 4. Margins for Most Elements */address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,input,iframe,img,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video { margin-bottom: 1rem;}
/* 5. Font Family */html { font-family: var(--dc-font-sans);}
code,pre,kbd,samp { font-family: var(--dc-font-mono);}
/* 6. Body and Selection Styling */body { margin: 0 auto; max-width: 48rem; padding: 2rem; background: var(--dc-bg-1); color: var(--dc-tx-2);}
::selection { background: var(--dc-ac-1); color: var(--dc-ac-tx);}
/* 7. Typography */h1,h2,h3,h4,h5,h6 { line-height: 1; color: var(--dc-tx-1); padding-top: 1rem;}
h1,h2,h3 { padding-bottom: 0.25rem; margin-bottom: 0.5rem; border-bottom: 1px solid var(--dc-bg-3);}
h4,h5,h6 { margin-bottom: 0.25rem;}
a { color: var(--dc-lk-1); text-decoration: none;}
a:hover { text-decoration: underline;}
mark { padding: 0.125rem 0.25rem; background: var(--dc-ac-1); color: var(--dc-ac-tx); border-radius: 0.25rem;}
/* 8. Blockquotes */blockquote { padding: 1.25rem; background: var(--dc-bg-2); border: 1px solid var(--dc-bg-3); border-left: 5px solid var(--dc-bg-3); border-radius: 0.25rem;}
blockquote *:last-child { padding-bottom: 0; margin-bottom: 0;}
/* 9. Header */header { background: var(--dc-bg-2); border-bottom: 1px solid var(--dc-bg-3); padding: 0.5rem calc(50vw - 50%); margin: -2rem calc(50% - 50vw) 2rem;}
header nav a + a::before { content: "• "; color: var(--dc-tx-2);}
header * { padding-top: 0rem; padding-bottom: 0rem; margin-top: 0.25rem; margin-bottom: 0.25rem;}
header h1,header h2,header h3 { border-bottom: 0;}
header h1 { font-size: 1.6rem;}
header h2 { font-size: 1.4rem;}
header h3 { font-size: 1.2rem;}
header h4 { font-size: 1rem;}
header h5 { font-size: 0.9rem;}
header p { font-size: 1rem;}
header nav { font-size: 0.9rem;}
header h6 { font-size: 0.8rem;}
/* 10. Footer */footer { border-top: 1px solid var(--dc-bg-3); padding: 0.5rem calc(50vw - 50%); margin: 2rem calc(50% - 50vw) -2rem;}
footer * { padding-top: 0rem; padding-bottom: 0rem; margin-top: 0.25rem; margin-bottom: 0.25rem;}
footer h1,footer h2,footer h3 { border-bottom: 0;}
/* 11. Buttons and Inputs */a button,button,input[type="submit"],input[type="reset"],input[type="button"] { display: inline-block; padding: 0.25rem 0.75rem; text-align: center; text-decoration: none; white-space: nowrap; background: var(--dc-lkb-1); color: var(--dc-lkb-tx); border: 0; border-radius: 0.25rem; box-sizing: border-box; cursor: pointer;}
a button[disabled],button[disabled],input[type="submit"][disabled],input[type="reset"][disabled],input[type="button"][disabled] { cursor: not-allowed; opacity: 0.5;}
.button:focus,.button:enabled:hover,button:focus,button:enabled:hover,input[type="submit"]:focus,input[type="submit"]:enabled:hover,input[type="reset"]:focus,input[type="reset"]:enabled:hover,input[type="button"]:focus,input[type="button"]:enabled:hover { background: var(--dc-lkb-2);}
textarea,select,input { padding: 0.25rem 0.5rem; margin-bottom: 0.5rem; background: var(--dc-bg-2); color: var(--dc-tx-2); border: 1px solid var(--dc-bg-3); border-radius: 0.25rem; box-shadow: none; box-sizing: border-box;}
textarea { max-width: 100%;}
/* 12. Code and Keyboards */code,samp,kbd,pre { background: var(--dc-bg-2); border: 1px solid var(--dc-bg-3); border-radius: 0.25rem; padding: 0.125rem 0.25rem; font-size: 0.9rem;}
kbd { border-bottom: 3px solid var(--dc-bg-3);}
pre { padding: 1rem 1.5rem; max-width: 100%; overflow: auto;}
/* 13. Details */details { padding: 0.5rem 1rem; background: var(--dc-bg-2); border: 1px solid var(--dc-bg-3); border-radius: 0.25rem;}
summary { cursor: pointer; font-weight: bold;}
details[open] summary { margin-bottom: 0.5rem;}
details[open] > *:first-child { margin-top: 0; padding-top: 0;}
details[open] > *:last-child { margin-bottom: 0; padding-bottom: 0;}
/* 14. Description Lists */dt { font-weight: bold;}
dd::before { content: "→ ";}
/* 15. Horizontal Rules */hr { border: 0; border-bottom: 1px solid var(--dc-bg-3); margin: 1rem auto;}
/* 16. Fieldsets */fieldset { margin-top: 1rem; padding: 2rem; border: 1px solid var(--dc-bg-3); border-radius: 0.25rem;}
legend { padding: auto 0.5rem;}
/* 17. Tables */table { border-collapse: collapse; width: 100%;}
td,th { border: 1px solid var(--dc-bg-3); text-align: left; padding: 0.5rem;}
th { background: var(--dc-bg-2);}
tr:nth-child(even) { background: var(--dc-bg-2);}
table caption { font-weight: bold; margin-bottom: 0.5rem;}
/* 18. Lists */ol,ul { padding-left: 2rem;}
li { margin-top: 0.4rem;}
ul ul,ol ul,ul ol,ol ol { margin-bottom: 0;}