From 99655ce656972d42f4bb67b8e0f88dc971094551 Mon Sep 17 00:00:00 2001 From: Geoff Doty Date: Sun, 25 Jan 2026 11:23:38 -0500 Subject: [PATCH] new stylelite, simpiler, smaller, powerful --- dist/stylelite.map | 2 +- dist/stylelite.min.css | 4 +- examples/index.html | 378 +++++++++++++++++++++++++++++++ examples/overview.html | 431 ----------------------------------- package-lock.json | 4 +- package.json | 2 +- src/extras/layout.css | 6 + src/shim.css | 24 ++ src/stylelite.css | 495 ++++++++++++++++------------------------- 9 files changed, 611 insertions(+), 735 deletions(-) create mode 100644 examples/index.html delete mode 100644 examples/overview.html create mode 100644 src/shim.css diff --git a/dist/stylelite.map b/dist/stylelite.map index af5a3bf..ce92a09 100644 --- a/dist/stylelite.map +++ b/dist/stylelite.map @@ -1 +1 @@ -{"version":3,"sources":["src/stylelite.css"],"names":[],"mappings":";AACA,K,CACI,iB,CACA,W,CACA,a,CAEA,Y,CACA,Y,CACA,Y,CAEA,Y,CACA,Y,CAEA,Y,CACA,W,CAGJ,iB,CACI,e,CAEA,Y,CACA,Y,CACA,Y,CAEA,Y,CACA,Y,CAEA,c,CACA,e,CAGJ,C,CAAG,Q,CAAH,C,CAEY,O,CAAV,Q,CACE,qB,CAGC,I,CAAL,I,CAmDA,K,CACI,oB,CApDC,I,CAAL,I,CAEI,e,CACA,yB,CACA,gC,CACA,c,CACA,sB,CACA,kB,CAGa,M,CAAZ,G,CAAK,K,CAAyB,M,CAAnC,I,CAAyB,Q,CAAkB,oB,CAAsB,iB,CAEjE,C,CAAG,a,CAEqB,K,CAApB,K,CAAM,M,CAAV,G,CAAiB,M,CAAa,K,CAC1B,W,CACA,c,CACA,Q,CAKJ,E,CAFA,E,CAAI,E,CAAI,gB,CAIR,K,CACI,oB,CACA,e,CACA,e,CACA,kB,CACA,kB,CAGJ,W,CACI,iB,CACA,uB,CACA,kB,CACA,iB,CAGA,I,CAAJ,G,CACI,uB,CACA,iB,CACA,c,CAGJ,I,CACI,a,CACA,mB,CACA,gB,CAGJ,K,CAEI,wB,CACA,gB,CACA,U,CAGJ,iB,CACI,oC,CAGJ,E,CACI,e,CAGD,E,CAJH,E,CAKI,a,CACA,oC,CAGJ,oC,CACI,kB,CAGJ,kB,CAAoB,kB,CAAoB,S,CAExC,Q,CAMA,M,CALI,oB,CACA,Y,CACA,6B,CAGJ,M,CACI,gB,CACA,e,CAGA,a,CACA,iB,CACA,oB,CACA,Q,CACA,mB,CAIJ,U,CACI,mB,CAEA,uB,CACA,mB,CACA,kC,CACA,2B,CAGJ,E,CAEI,gB,CAGJ,E,CAAG,E,CAAG,E,CAAG,E,CAAG,E,CAAG,E,CACX,kB,CACA,mB,CACA,kC,CACA,yB,CAGJ,E,CAAI,gB,CACJ,E,CAAI,gB,CACJ,E,CAAI,gB,CACJ,E,CAAI,gB,CACJ,E,CAAI,gB,CACJ,E,CAAI,c,CAEJ,C,CAnBA,E,CAtBA,M,CAyCG,kB,CACH,O,CA7BA,U,CA6BS,iB,CAEA,O,CAAT,O,CACI,kB,CAGJ,O,CAAS,K,CACL,iC,CACA,uB,CACA,iB,CACA,Y,CAKJ,O,CACI,mB,CACA,e,CAIJ,a,CAWA,O,CAGI,0B,CACA,6B,CAfJ,a,CAEI,yB,CAIJ,S,CACI,qB,CACA,kB,CAGJ,O,CACI,kB,CACA,W,CAnBJ,O,CAwBA,a,CAAe,c,CACf,YAAY,c,CAAgB,c,CAE5B,Q,CAAU,M,CAAQ,K,CAEd,S,CACA,qB,CACA,c,CACA,oB,CAEA,qB,CAEA,a,CACA,6B,CAEA,kB,CAZJ,Q,CAAkB,K,CACd,oB,CAOA,U,CAGA,2B,CAXc,K,CAMd,e,CASJ,iB,CAAmB,c,CAEnB,oB,CACA,iB,CACI,S,CACH,Y,CACA,a,CACA,kB,CAGD,kB,CAAoB,e,CAEpB,M,CAAQ,iB,CAAoB,kB,CACxB,oB,CACA,2B,CACA,a,CAGJ,gB,CAAkB,sB,CACd,sB,CACA,kB,CACA,mB,CAGJ,W,CAMA,iB,CALI,Q,CACA,c,CACA,kB,CAGJ,iB,CAII,yB,CAGJ,Q,CAAU,M,CAAQ,kB,CACd,uB,CACA,kB,CAGJ,c,CACI,c,CACA,oB,CACA,e,CAGJ,c,CAAgB,Y,CAAc,uB,CAA0B,wB,CACpD,gC,CACA,c,CAG+B,c,CAAnC,e,CAAiB,iB,CACb,kB,CACA,mB,CACA,sB,CAGwB,W,CAA5B,Y,CAAa,c,CACT,6B,CAGJ,M,CAAS,gB,CAAmB,qB,CAE5B,M,CAAO,Q,CACH,oB,CACA,S,CACA,qB,CACA,a,CACA,U,CAGA,oB,CACA,2B,CACA,qB,CAiBA,6B,CAIA,e,CA/BJ,M,CAWI,c,CAIA,mC,CAEA,uC,CACA,e,CACA,mB,CACA,6B,CACA,qK,CArBG,Q,CAyBH,a,CACA,e,CAEA,6B,CACA,qC,CACA,W,CAIkB,Q,CAAtB,S,CAAgC,mB,CAIhC,G,CAcA,M,CAAQ,Y,CAdR,G,CAEI,6B,CACA,W,CACA,oC,CAEJ,U,CACI,uB,CACA,kB,CACA,Q,CAEJ,gB,CAAkB,uB,CAAyB,kB,CAC3C,Y,CAAc,a,CAEd,M,CAAsB,oB,CAAsB,Q,CAAS,S,CAAW,gB,CAChE,S,CAAW,e,CAAmB,Q,CAC9B,qB,CAAqC,a,CACrC,K,CAAO,oB,CAIP,Y,CACI,W,CAGJ,M,CACI,6B,CACA,8D,CACA,2B,CACA,a,CAKJ,K,CACI,Y,CACA,U,CACA,oD,CAGJ,M,CAAQ,Y,CACR,M,CAAQ,W,CACR,K,CAAO,U,CACP,O,CAAS,iB","file":"src/stylelite.css","sourcesContent":["/*! Stylelite v:0.9.10 | MIT LICENSE | https://github.com/n2geoff/stylelite */\r\n:root {\r\n --theme: steelblue;\r\n --size: 1rem;\r\n --radius: 0rem;\r\n\r\n --fg: #17202A;\r\n --bg: #FDFEFE;\r\n --mg: #99A3A4;\r\n\r\n --white: #FFF;\r\n --black: #000;\r\n\r\n --light: #EEE;\r\n --dark: #222;\r\n}\r\n\r\n[data-theme=dark] {\r\n --theme: #5499C7;\r\n\r\n --mg: #6B7280;\r\n --bg: #1A1A1A;\r\n --fg: #E0E0E0;\r\n\r\n --white: #FFF;\r\n --black: #000;\r\n\r\n --dark: #D4D4D4;\r\n --light: #272727;\r\n}\r\n\r\n* {margin:0}\r\n\r\n*,*::before,*::after {\r\n box-sizing: border-box;\r\n}\r\n\r\nhtml,body {\r\n background: var(--bg);\r\n color: var(--fg);\r\n accent-color: var(--theme);\r\n font-family: system-ui, sans-serif;\r\n font-size: 16px;\r\n letter-spacing: 0.0125em;\r\n line-height: 1.5rem;\r\n}\r\n\r\nspan,div, input, button, textarea, select {margin-bottom: .25rem;margin-top: .25rem;}\r\n\r\np {margin: 1rem 0}\r\n\r\nimg,embed,iframe,object,audio,video {\r\n height: auto;\r\n max-width: 100%;\r\n border: none;\r\n}\r\n\r\nol, ul {margin-left: 1rem}\r\n\r\nli {margin-left: 1rem}\r\n\r\nlabel {\r\n display: inline-block;\r\n font-weight: 600;\r\n color: var(--fg);\r\n white-space: nowrap;\r\n vertical-align: top;\r\n}\r\n\r\nlabel.addon {\r\n max-height: 2.5rem;\r\n background: var(--theme);\r\n padding: .5rem 1rem;\r\n margin-top: .25rem;\r\n}\r\n\r\npre,code {\r\n background: var(--light);\r\n color: var(--dark);\r\n padding: .25rem\r\n}\r\n\r\nmain {\r\n margin: 0 auto;\r\n padding: var(--size);\r\n max-width: 1140px;\r\n}\r\n\r\ntable {\r\n background: var(--bg);\r\n border-collapse: collapse;\r\n border-spacing: 0;\r\n width: 100%;\r\n}\r\n\r\ntable>thead>tr>th {\r\n border-bottom: 2px solid var(--theme);\r\n}\r\n\r\nth {\r\n text-align: left;\r\n}\r\n\r\nth,td {\r\n padding: .5rem;\r\n border-bottom: 1px solid var(--theme);\r\n}\r\n\r\ntable.striped tbody>:nth-child(2n-1) {\r\n background: #f5f5f5;\r\n}\r\n\r\ntable.condensed td, table.condensed th {padding:0}\r\n\r\nfieldset {\r\n background: var(--bg);\r\n padding: 1rem;\r\n border: 1px solid var(--theme);\r\n}\r\n\r\nlegend {\r\n font-size: larger;\r\n font-weight: 600;\r\n color: var(--theme);\r\n background: var(--bg);\r\n display: block;\r\n width: fit-content;\r\n padding: .25rem .5rem;\r\n margin: 0;\r\n line-height: inherit;\r\n border: 1px solid var(--theme);\r\n}\r\n\r\nblockquote {\r\n margin: var(--size) 0;\r\n color: var(--dark);\r\n background: var(--light);\r\n padding: var(--size);\r\n border-left: 8px solid var(--theme);\r\n border-radius: var(--radius);\r\n}\r\n\r\nhr {\r\n color: var(--theme);\r\n border: 1px solid;\r\n}\r\n\r\nh1,h2,h3,h4,h5,h6 {\r\n color: var(--theme);\r\n margin: var(--size) 0;\r\n padding-bottom: calc(var(--size) / 2);\r\n text-transform: capitalize;\r\n}\r\n\r\nh1 {font-size: 2.2rem}\r\nh2 {font-size: 1.8rem}\r\nh3 {font-size: 1.4rem}\r\nh4 {font-size: 1.2rem}\r\nh5 {font-size: 1.1rem}\r\nh6 {font-size: 1rem}\r\n\r\na {color: var(--theme)}\r\na:hover {color: var(--dark);}\r\n\r\nsection, article {\r\n margin-bottom: 2rem;\r\n}\r\n\r\narticle, aside {\r\n border: 1px solid rgba(0,0,0,.125);\r\n background: var(--light);\r\n color: var(--dark);\r\n padding: 1rem;\r\n}\r\n\r\n/* Forms */\r\n\r\ndetails {\r\n margin: var(--size) 0;\r\n color: var(--fg);\r\n cursor: pointer;\r\n}\r\n\r\ndetails[open] {\r\n background-color: var(--bg);\r\n margin-bottom: var(--size);\r\n border: 1px solid var(--theme);\r\n}\r\n\r\ndetails>* {\r\n box-sizing: border-box;\r\n padding: .5rem 1rem;\r\n}\r\n\r\nsummary {\r\n color: var(--theme);\r\n height: 40px;\r\n background-color: var(--bg);\r\n border: 1px solid var(--theme);\r\n}\r\n\r\nsummary:hover {cursor: pointer;}\r\ndetails:not(summary):hover {cursor: default}\r\n\r\na.button, button, input {\r\n display: inline-block;\r\n outline: none;\r\n box-sizing: border-box;\r\n font-size: 1rem;\r\n background: var(--bg);\r\n color: var(--fg);\r\n min-width: fit-content;\r\n width: 100%;\r\n height: 2.5rem;\r\n border: 1px solid var(--theme);\r\n border-radius: var(--radius);\r\n padding: .5rem 1rem;\r\n}\r\n\r\ninput[type=color] {padding: .25rem}\r\n\r\ninput[type=\"checkbox\"],\r\ninput[type=\"radio\"]{\r\n padding: 0;\r\n\twidth: 1.1rem;\r\n\theight: 1.1rem;\r\n\tmargin-right: .5rem;\r\n}\r\n\r\ninput::placeholder {color: var(--mg)}\r\n\r\nbutton, input[type=\"reset\"],input[type=\"submit\"] {\r\n display: inline-block;\r\n border-radius: var(--radius);\r\n width: initial;\r\n}\r\n\r\nbutton[disabled], button[disabled]:hover {\r\n filter: brightness(75%);\r\n cursor: not-allowed;\r\n pointer-events: none;\r\n}\r\n\r\nbutton.link {\r\n border: none;\r\n background: none;\r\n color: var(--theme);\r\n}\r\n\r\nbutton.link:hover {\r\n background: none;\r\n border: none;\r\n color: var(--theme);\r\n text-decoration: underline;\r\n}\r\n\r\na.button, button, input[type=\"submit\"] {\r\n background: var(--theme);\r\n color: var(--white);\r\n}\r\n\r\nbutton.outline {\r\n background: none;\r\n outline: var(--theme);\r\n color: var(--fg);\r\n}\r\n\r\na.button:hover, button:hover, input[type=\"reset\"]:hover,input[type=\"submit\"]:hover {\r\n filter:brightness(90%) !important;\r\n cursor: pointer;\r\n}\r\n\r\nselect:disabled, textarea:disabled,input:disabled {\r\n cursor: not-allowed;\r\n pointer-events: none;\r\n filter: brightness(95%);\r\n}\r\n\r\nselect:focus,textarea:focus,input:focus {\r\n border: 2px solid var(--theme);\r\n}\r\n\r\noption { line-height: 1rem; vertical-align: center;}\r\n\r\nselect,textarea {\r\n display: inline-block;\r\n outline: none;\r\n font-size: var(--size);\r\n height: 2.5rem;\r\n width: 100%;\r\n border: 1px solid var(--theme);\r\n color: var(--fg);\r\n background: var(--bg);\r\n border-radius: var(--radius);\r\n padding: 0 var(--size);\r\n cursor: pointer;\r\n}\r\n\r\nselect {\r\n background: var(--bg) no-repeat 100%;\r\n color: var(--fg);\r\n padding: 0 clamp(.5rem, var(--size), 2rem);\r\n appearance: none;\r\n background-size: 1ex;\r\n background-origin: content-box;\r\n background-image: url(\"data:image/svg+xml;utf8,\");\r\n}\r\n\r\ntextarea {\r\n overflow: auto;\r\n resize: vertical;\r\n border: 1px solid var(--theme);\r\n height: calc(var(--size) * 6rem);;\r\n padding: clamp(.5rem, var(--size), 2rem);\r\n cursor: text;\r\n color: var(--fg);\r\n}\r\n\r\n*:disabled, .disable, .disable {pointer-events: none;}\r\n\r\n/* Navigation */\r\n\r\nnav {\r\n display: flex;\r\n justify-content: space-between;\r\n height: 2rem;\r\n border-bottom: 1px solid var(--theme);\r\n}\r\nnav.navbar {\r\n background: var(--theme);\r\n color: var(--light);\r\n border: none;\r\n}\r\n.navbar li:hover {background: var(--white);color: var(--theme)}\r\n.navbar li a {color: inherit}\r\n\r\nnav ul {display: flex;list-style-type: none;margin:0;padding:0; line-height: 2rem}\r\nnav ul li {padding:0rem .5rem;margin:0}\r\nnav ul li:first-child {margin-left:0;margin-left:0}\r\nnav a {text-decoration: none;}\r\n\r\n/* Dialog */\r\n\r\ndialog[open] {\r\n margin: auto;\r\n}\r\n\r\ndialog {\r\n border: 1px solid var(--theme);\r\n box-shadow: 0 0 #0000, 0 0 #0000, 0 25px 50px -12px rgba(0, 0, 0, 0.25);\r\n padding: calc(var(--size) * 2);\r\n max-width: 85%;\r\n}\r\n\r\n/* Layout Utilities */\r\n\r\n.grid {\r\n display: grid;\r\n gap: .25rem;\r\n grid-template-columns: repeat(auto-fit, minmax(0%, 1fr));\r\n}\r\n\r\n.group {display: flex}\r\n.right {float:right}\r\n.left {float:left}\r\n.center {text-align: center}\r\n"]} \ No newline at end of file +{"version":3,"sources":["src/stylelite.css"],"names":[],"mappings":";AACA,K,CACI,W,CACA,c,CAEA,iB,CACA,iB,CAEA,e,CACA,c,CAEA,iB,CACA,iB,CACA,mB,CAEA,iB,CACA,iB,CACA,gB,CAGJ,iB,CACI,iB,CACA,iB,CAEA,c,CAGE,I,CAAN,I,CACI,uB,CACA,4B,CAEA,c,CAEA,Q,CACA,S,CACA,sB,CACA,W,CACA,kB,CAGJ,K,CAEI,e,CACA,a,CAGI,E,CAAR,E,CAAI,E,CAAQ,gB,CAuDZ,E,CArDA,O,CAAS,a,CAET,I,CAAK,M,CAED,e,CACA,e,CAGA,I,CAAK,G,CAAT,G,CACI,qB,CACA,iB,CACA,oB,CACA,yB,CACA,uB,CALK,G,CAcL,iB,CACA,kB,CACA,yB,CAEA,wB,CAVJ,I,CACI,wB,CACA,W,CA+DJ,C,CApDA,C,CAAG,qB,CAkDH,Q,CAhD2C,M,CAAP,M,CAAP,M,CAAN,K,CAA2B,I,CAA3C,M,CAAP,M,CAAc,Q,CAAqD,uC,CApD7D,I,CAAN,I,CAsDuB,K,CAAhB,M,CAAP,M,CAAc,Q,CAEV,qB,CACA,4C,CAHmB,K,CAAhB,M,CAAP,M,CAAc,Q,CACV,oB,CAGA,c,CACA,U,CACA,+B,CACA,2B,CACA,mB,CAEJ,Y,CAkGA,a,CAlGc,c,CAEd,E,CACA,E,CACA,E,CACA,E,CACA,E,CACA,E,CALI,gB,CAMe,e,CAAiB,mB,CALpC,E,CACA,E,CACA,E,CACA,E,CACA,E,CAJI,gB,CACJ,E,CACA,E,CACA,E,CACA,E,CAHI,gB,CACJ,E,CACA,E,CACA,E,CAFI,gB,CACJ,E,CACA,E,CADI,gB,CACJ,E,CAAI,c,CAGJ,E,CAAoB,2B,CAEpB,U,CAYA,M,CA3DS,G,CA2DgD,2B,CAZzD,U,CACI,mB,CACA,uB,CACA,iB,CACA,6B,CACA,+B,CACA,qC,CAMJ,M,CAAQ,4C,CAER,Y,CAAc,uB,CAA0B,wB,CACpC,gC,CACA,c,CAGJ,M,CAA4B,iB,CAArB,kB,CACH,Y,CACA,yC,CAGJ,Q,CAAmD,iB,CAEnD,C,CA/EA,I,CAVA,K,CAUK,M,CA+EF,oB,CAAH,C,CAAiD,oB,CACjD,O,CAAS,uB,CACT,O,CAAS,Y,CAET,kB,CACI,+B,CAGJ,oB,CACA,iB,CACI,oB,CACA,qB,CACH,U,CACA,W,CAGD,S,CAAY,kB,CACZ,e,CAAkB,kB,CAIlB,K,CACI,wB,CACA,gB,CACA,U,CAGJ,K,CACI,mC,CACA,sC,CAGJ,E,CAAI,e,CAED,E,CAFH,E,CAGI,c,CACA,sC,CAGJ,oC,CAAsC,yB,CAItC,O,CACI,iB,CACA,uB,CACA,mB,CACA,c,CACA,+B,CAGJ,a,CACI,yB,CAGJ,S,CACI,qB,CACA,kB,CAIJ,YAAY,c,CAAgB,c,CAI5B,Y,CACI,W,CAGJ,M,CACI,4B,CACA,2B,CACA,S,CACA,Q,CACA,a,CACA,e,CAGJ,gB,CACI,+B,CAKJ,G,CAkBA,S,CAAW,e,CAlBX,G,CAiBA,M,CAAQ,Y,CAjBR,G,CAEI,6B,CAIJ,U,CACI,Q,CACA,iB,CAGJ,K,CASO,oB,CAAsB,oB,CARJ,O,CAAzB,iB,CACI,e,CACA,oC,CAGJ,M,CAAsB,oB,CAAsB,Q,CAAS,S,CAAW,gB,CAChE,S,CAA8B,Q,CAC9B,qB,CAAqC,a,CAKrC,Q,CAAU,kB,CAAqB,yB,CAC/B,U,CAAY,kB,CAAqB,2B,CACjC,Q,CAAU,iB,CAAoB,uB,CAC9B,K,CAAO,kB,CAAqB,sB,CAC5B,M,CAAQ,iB,CAAoB,uB,CAE5B,kB,CAAoB,2B,CACpB,oB,CAAsB,6B,CAEtB,a,CAAe,oB,CACf,e,CAAiB,sB,CACjB,a,CAAe,K,CAAO,oB,CAItB,K,CACI,Y,CACA,U,CACA,oD,CAGJ,M,CAAQ,Y,CAER,U,CACI,a,CACA,mB,CACA,gB,CAGJ,U,CAAY,oC,CACZ,O,CAAS,+B,CAAiC,2B,CAC1C,O,CAAS,kB,CACT,Q,CAAU,c,CACV,O,CAAS,iB,CAAoB,mB","file":"src/stylelite.css","sourcesContent":["/*! Stylelite v:1.0.0 | MIT LICENSE | https://github.com/n2geoff/stylelite */\r\n:root {\r\n --size: 1rem;\r\n --radius: .3rem;\r\n\r\n --foreground: #111;\r\n --background: #FFF;\r\n\r\n --light: #F0F0F0;\r\n --dark: #404040;\r\n\r\n --default: #F0F0F0;\r\n --primary: #5499C7; /* 0000EE */\r\n --secondary: #404040;\r\n\r\n --success: #198754;\r\n --warning: #fbc02d;\r\n --danger: #C62828;\r\n}\r\n\r\n[data-theme=dark] {\r\n --foreground: #FFF;\r\n --background: #222;\r\n\r\n --default: #333;\r\n}\r\n\r\nhtml, body {\r\n color: var(--foreground);\r\n background: var(--background);\r\n font-family: Verdana, Geneva, Tahoma, sans-serif;\r\n font-size: 16px;\r\n box-sizing: border-box;\r\n margin: 0;\r\n padding: 0;\r\n letter-spacing: 0.0125em;\r\n height: 100%;\r\n line-height: 1.5rem;\r\n}\r\n\r\nlabel {\r\n display: inline-block;\r\n font-weight: 700;\r\n margin: .25rem;\r\n}\r\n\r\nol, ul, li {margin-left: 1rem}\r\n\r\nsection {margin: 1rem 0;}\r\n\r\ncite,strong {\r\n display: inline-block;\r\n font-weight: bold;\r\n padding: .5rem 0rem;\r\n}\r\n\r\npre,code,kbd {\r\n font-family: monospace;\r\n font-size: smaller;\r\n padding: .25rem .5rem;\r\n background: var(--default);\r\n color: var(--foreground);\r\n}\r\n\r\nabbr {\r\n border-bottom: 1px dotted;\r\n cursor: help;\r\n}\r\n\r\nkbd {\r\n font-style: normal;\r\n color: var(--light);\r\n background: var(--primary);\r\n border-radius: var(--radius);\r\n text-transform: uppercase;\r\n}\r\n \r\ni {vertical-align: middle;}\r\n\r\nselect,option,textarea,input,header,footer,button,main,blockquote {padding: calc(var(--size)/2) var(--size)}\r\n\r\nselect,option,textarea,input {\r\n display: inline-block;\r\n box-sizing: border-box;\r\n font-family: Verdana, Geneva, Tahoma, sans-serif;\r\n font-size: 1rem;\r\n width: 100%;\r\n border: var(--default) 2px solid;\r\n border-radius: var(--radius);\r\n margin-bottom: .5rem;\r\n}\r\nselect:hover {cursor: pointer;}\r\n\r\nh1 {font-size: 2.2rem}\r\nh2 {font-size: 1.8rem}\r\nh3 {font-size: 1.4rem}\r\nh4 {font-size: 1.2rem}\r\nh5 {font-size: 1.1rem}\r\nh6 {font-size: 1rem}\r\nh1,h2,h3,h4,h5,h6 {margin-top: 1rem;margin-bottom: .5rem;}\r\n\r\nhr {margin: 1rem 0; border-color: var(--primary)}\r\n\r\nblockquote {\r\n margin: var(--size) 0;\r\n color: var(--foreground);\r\n font-style: italic;\r\n padding: calc(var(--size) * 1.5);\r\n border: var(--default) 1px solid;\r\n border-left: var(--default) 1rem solid;\r\n border-radius: var(--radius);\r\n}\r\n\r\n/* Buttons */\r\n\r\nbutton {font-family: Verdana, Geneva, Tahoma, sans-serif;border-radius: var(--radius);}\r\n\r\nbutton:hover, input[type=\"reset\"]:hover,input[type=\"submit\"]:hover {\r\n filter:brightness(90%) !important;\r\n cursor: pointer;\r\n}\r\n\r\nbutton,input[type=\"submit\"],input[type=\"reset\"] {\r\n border: unset;\r\n box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.1);\r\n}\r\n\r\na.button {padding: calc(var(--size)/2) var(--size);text-align: center;}\r\n\r\na {display: inline-block;vertical-align: middle; color: var(--primary)}\r\na:hover {color: var(--foreground)}\r\na[name] {display: none;} /* fix anchors */\r\n\r\ninput:user-invalid {\r\n outline: 2px solid var(--danger);\r\n}\r\n\r\ninput[type=\"checkbox\"],\r\ninput[type=\"radio\"]{\r\n display: inline-block;\r\n vertical-align: middle;\r\n\twidth: 1rem;\r\n\theight: 1rem;\r\n}\r\n\r\n*:disabled {background: #F0F0F0; }\r\n*:disabled:hover {cursor: not-allowed}\r\n\r\n/* Tables */\r\n\r\ntable {\r\n border-collapse: collapse;\r\n border-spacing: 0;\r\n width: 100%;\r\n}\r\n\r\ntbody {\r\n border-top: var(--default) 2px solid;\r\n border-bottom: var(--default) 2px solid;\r\n}\r\n\r\nth {text-align: left}\r\n\r\nth,td {\r\n padding: .25rem;\r\n border-bottom: 1px solid var(--default);\r\n}\r\n\r\ntable.striped tbody>:nth-child(2n-1) {background: var(--default)}\r\n\r\n/* Details */\r\n\r\ndetails {\r\n color: var(--dark);\r\n background: var(--light);\r\n margin: var(--size) 0;\r\n cursor: pointer;\r\n border: var(--default) 2px solid;\r\n}\r\n\r\ndetails[open] {\r\n margin-bottom: var(--size);\r\n}\r\n\r\ndetails>* {\r\n box-sizing: border-box;\r\n padding: .5rem 1rem;\r\n}\r\n\r\nsummary:hover {cursor: pointer;}\r\ndetails:not(summary):hover {cursor: default}\r\n\r\n/* Dialog */\r\n\r\ndialog[open] {\r\n margin: auto;\r\n}\r\n\r\ndialog {\r\n border: 1px solid var(--dark);\r\n border-radius: var(--radius);\r\n padding:0;\r\n margin:0;\r\n max-width: 85%;\r\n min-width: 340px;\r\n}\r\n\r\ndialog::backdrop {\r\n background-color: rgba(0, 0, 0, 0.8);\r\n} \r\n\r\n/* Navigation */\r\n\r\nnav {\r\n display: flex;\r\n justify-content: space-between;\r\n padding: 0rem .5rem;\r\n}\r\n\r\nnav .brand {\r\n margin:0;\r\n font-size: x-large;\r\n}\r\n\r\nnav a {text-decoration: none;}\r\nnav > ul > li > a:hover, .active {\r\n margin-top: -1px; /* fix page bounce */\r\n border-bottom: currentColor 1px solid;\r\n}\r\n\r\nnav ul {display: flex;list-style-type: none;margin:0;padding:0; line-height: 2rem}\r\nnav ul li {padding:0rem .5rem;margin:0}\r\nnav ul li:first-child {margin-left:0;margin-left:0}\r\nnav a {text-decoration: none;color: var(--primary)}\r\n\r\n/* Colors */\r\n\r\n.primary {color: var(--light); background: var(--primary);}\r\n.secondary {color: var(--light); background: var(--secondary);}\r\n.default {color: var(--dark); background: var(--light);}\r\n.dark {color: var(--light); background: var(--dark);}\r\n.light {color: var(--dark); background: var(--light);}\r\n\r\nblockquote.primary {border-color: var(--primary);}\r\nblockquote.secondary {border-color: var(--secondary);}\r\n\r\n.text-primary {color: var(--primary)}\r\n.text-secondary {color: var(--secondary)}\r\n.text-default, .weak {color: var(--default)}\r\n\r\n/* Layout Utilities */\r\n\r\n.grid {\r\n display: grid;\r\n gap: .25rem;\r\n grid-template-columns: repeat(auto-fit, minmax(0%, 1fr));\r\n}\r\n\r\n.group {display: flex}\r\n\r\n.container {\r\n margin: 0 auto;\r\n padding: var(--size);\r\n max-width: 1140px;\r\n}\r\n\r\n.underline {border-bottom: currentColor 1px solid}\r\n.border {border: var(--default) 2px solid;border-radius: var(--radius);}\r\n.indent {margin-left: .25rem;}\r\n.pointer {cursor: pointer;}\r\n.center {align-self: center; justify-self: center;}\r\n"]} \ No newline at end of file diff --git a/dist/stylelite.min.css b/dist/stylelite.min.css index fca61b3..9306c70 100644 --- a/dist/stylelite.min.css +++ b/dist/stylelite.min.css @@ -1,3 +1,3 @@ -/*! Stylelite v:0.9.10 | MIT LICENSE | https://github.com/n2geoff/stylelite */ -:root{--theme:steelblue;--size:1rem;--radius:0rem;--fg:#17202A;--bg:#FDFEFE;--mg:#99A3A4;--white:#FFF;--black:#000;--light:#EEE;--dark:#222}[data-theme=dark]{--theme:#5499C7;--mg:#6B7280;--bg:#1A1A1A;--fg:#E0E0E0;--white:#FFF;--black:#000;--dark:#D4D4D4;--light:#272727}*{margin:0}*,::after,::before{box-sizing:border-box}body,html,table{background:var(--bg)}body,html{color:var(--fg);accent-color:var(--theme);font-family:system-ui,sans-serif;font-size:16px;letter-spacing:.0125em;line-height:1.5rem}button,div,input,select,span,textarea{margin-bottom:.25rem;margin-top:.25rem}p{margin:1rem 0}audio,embed,iframe,img,object,video{height:auto;max-width:100%;border:0}li,ol,ul{margin-left:1rem}label{display:inline-block;font-weight:600;color:var(--fg);white-space:nowrap;vertical-align:top}label.addon{max-height:2.5rem;background:var(--theme);padding:.5rem 1rem;margin-top:.25rem}code,pre{background:var(--light);color:var(--dark);padding:.25rem}main{margin:0 auto;padding:var(--size);max-width:1140px}table{border-collapse:collapse;border-spacing:0;width:100%}table>thead>tr>th{border-bottom:2px solid var(--theme)}th{text-align:left}td,th{padding:.5rem;border-bottom:1px solid var(--theme)}table.striped tbody>:nth-child(2n-1){background:#f5f5f5}table.condensed td,table.condensed th{padding:0}fieldset,legend{background:var(--bg);padding:1rem;border:1px solid var(--theme)}legend{font-size:larger;font-weight:600;display:block;width:fit-content;padding:.25rem .5rem;margin:0;line-height:inherit}blockquote{margin:var(--size)0;background:var(--light);padding:var(--size);border-left:8px solid var(--theme);border-radius:var(--radius)}hr{border:1px solid}h1,h2,h3,h4,h5,h6{color:var(--theme);margin:var(--size)0;padding-bottom:calc(var(--size)/2);text-transform:capitalize}h1{font-size:2.2rem}h2{font-size:1.8rem}h3{font-size:1.4rem}h4{font-size:1.2rem}h5{font-size:1.1rem}h6{font-size:1rem}a,hr,legend{color:var(--theme)}a:hover,blockquote{color:var(--dark)}article,section{margin-bottom:2rem}article,aside{border:1px solid rgba(0,0,0,.125);background:var(--light);color:var(--dark);padding:1rem}details{margin:var(--size)0;color:var(--fg)}details[open],summary{background-color:var(--bg);border:1px solid var(--theme)}details[open]{margin-bottom:var(--size)}details>*{box-sizing:border-box;padding:.5rem 1rem}summary{color:var(--theme);height:40px}details,summary:hover{cursor:pointer}details:not(summary):hover{cursor:default}a.button,button,input{outline:0;box-sizing:border-box;font-size:1rem;background:var(--bg);min-width:fit-content;height:2.5rem;border:1px solid var(--theme);padding:.5rem 1rem}a.button,input{display:inline-block;width:100%;border-radius:var(--radius)}input{color:var(--fg)}input[type=color]{padding:.25rem}input[type=checkbox],input[type=radio]{padding:0;width:1.1rem;height:1.1rem;margin-right:.5rem}input::placeholder{color:var(--mg)}button,input[type=reset],input[type=submit]{display:inline-block;border-radius:var(--radius);width:initial}button[disabled],button[disabled]:hover{filter:brightness(75%);cursor:not-allowed;pointer-events:none}button.link,button.link:hover{border:0;background:0 0;color:var(--theme)}button.link:hover{text-decoration:underline}a.button,button,input[type=submit]{background:var(--theme);color:var(--white)}button.outline{background:0 0;outline:var(--theme);color:var(--fg)}a.button:hover,button:hover,input[type=reset]:hover,input[type=submit]:hover{filter:brightness(90%)!important;cursor:pointer}input:disabled,select:disabled,textarea:disabled{cursor:not-allowed;pointer-events:none;filter:brightness(95%)}input:focus,select:focus,textarea:focus{border:2px solid var(--theme)}option{line-height:1rem;vertical-align:center}select,textarea{display:inline-block;outline:0;font-size:var(--size);height:2.5rem;width:100%;background:var(--bg);border-radius:var(--radius);padding:0 var(--size);border:1px solid var(--theme);color:var(--fg)}select{cursor:pointer;background:var(--bg) no-repeat 100%;padding:0 clamp(.5rem,var(--size),2rem);appearance:none;background-size:1ex;background-origin:content-box;background-image:url("data:image/svg+xml;utf8,")}textarea{overflow:auto;resize:vertical;height:calc(var(--size)*6rem);padding:clamp(.5rem,var(--size),2rem);cursor:text}.disable,:disabled{pointer-events:none}nav,nav ul{display:flex}nav{justify-content:space-between;height:2rem;border-bottom:1px solid var(--theme)}nav.navbar{background:var(--theme);color:var(--light);border:0}.navbar li:hover{background:var(--white);color:var(--theme)}.navbar li a{color:inherit}nav ul{list-style-type:none;margin:0;padding:0;line-height:2rem}nav ul li{padding:0 .5rem;margin:0}nav ul li:first-child{margin-left:0}nav a{text-decoration:none}dialog[open]{margin:auto}dialog{border:1px solid var(--theme);box-shadow:0 0#0000,0 0#0000,0 25px 50px -12px rgba(0,0,0,.25);padding:calc(var(--size)*2);max-width:85%}.grid{display:grid;gap:.25rem;grid-template-columns:repeat(auto-fit,minmax(0,1fr))}.group{display:flex}.right{float:right}.left{float:left}.center{text-align:center} +/*! Stylelite v:1.0.0 | MIT LICENSE | https://github.com/n2geoff/stylelite */ +:root{--size:1rem;--radius:.3rem;--foreground:#111;--background:#FFF;--light:#F0F0F0;--dark:#404040;--default:#F0F0F0;--primary:#5499C7;--secondary:#404040;--success:#198754;--warning:#fbc02d;--danger:#C62828}[data-theme=dark]{--foreground:#FFF;--background:#222;--default:#333}body,html{color:var(--foreground);background:var(--background);font-size:16px;margin:0;padding:0;letter-spacing:.0125em;height:100%;line-height:1.5rem}label{font-weight:700;margin:.25rem}li,ol,ul{margin-left:1rem}hr,section{margin:1rem 0}cite,strong{font-weight:700;padding:.5rem 0}code,kbd,pre{font-family:monospace;font-size:smaller;padding:.25rem .5rem;background:var(--default);color:var(--foreground)}kbd{font-style:normal;color:var(--light);background:var(--primary);text-transform:uppercase}abbr{border-bottom:1px dotted;cursor:help}a,i{vertical-align:middle}a.button,button,footer,header,input,main,option,select,textarea{padding:calc(var(--size)/2) var(--size)}body,html,input,option,select,textarea{box-sizing:border-box;font-family:Verdana,Geneva,Tahoma,sans-serif}input,option,select,textarea{display:inline-block;font-size:1rem;width:100%;border:var(--default) 2px solid;border-radius:var(--radius);margin-bottom:.5rem}select:hover,summary:hover{cursor:pointer}h1,h2,h3,h4,h5,h6{font-size:2.2rem;margin-top:1rem;margin-bottom:.5rem}h2,h3,h4,h5,h6{font-size:1.8rem}h3,h4,h5,h6{font-size:1.4rem}h4,h5,h6{font-size:1.2rem}h5,h6{font-size:1.1rem}h6{font-size:1rem}hr{border-color:var(--primary)}blockquote,button,kbd{border-radius:var(--radius)}blockquote{margin:var(--size)0;color:var(--foreground);font-style:italic;padding:calc(var(--size)*1.5);border:var(--default) 1px solid;border-left:var(--default) 1rem solid}button{font-family:Verdana,Geneva,Tahoma,sans-serif}button:hover,input[type=reset]:hover,input[type=submit]:hover{filter:brightness(90%)!important;cursor:pointer}button,input[type=reset],input[type=submit]{border:unset;box-shadow:1px 1px 1px 1px rgba(0,0,0,.1)}a.button{text-align:center}a,cite,label,strong{display:inline-block}a{color:var(--primary)}a:hover{color:var(--foreground)}a[name]{display:none}input:user-invalid{outline:2px solid var(--danger)}input[type=checkbox],input[type=radio]{display:inline-block;vertical-align:middle;width:1rem;height:1rem}:disabled{background:#f0f0f0}:disabled:hover{cursor:not-allowed}table{border-collapse:collapse;border-spacing:0;width:100%}tbody{border-top:var(--default) 2px solid;border-bottom:var(--default) 2px solid}th{text-align:left}td,th{padding:.25rem;border-bottom:1px solid var(--default)}table.striped tbody>:nth-child(2n-1){background:var(--default)}details{color:var(--dark);background:var(--light);margin:var(--size)0;cursor:pointer;border:var(--default) 2px solid}details[open]{margin-bottom:var(--size)}details>*{box-sizing:border-box;padding:.5rem 1rem}details:not(summary):hover{cursor:default}dialog[open]{margin:auto}dialog{border:1px solid var(--dark);border-radius:var(--radius);padding:0;margin:0;max-width:85%;min-width:340px}dialog::backdrop{background-color:rgba(0,0,0,.8)}nav,nav ul li{padding:0 .5rem}nav,nav ul{display:flex}nav{justify-content:space-between}nav .brand{margin:0;font-size:x-large}nav a{text-decoration:none;color:var(--primary)}.active,nav>ul>li>a:hover{margin-top:-1px;border-bottom:currentColor 1px solid}nav ul{list-style-type:none;margin:0;padding:0;line-height:2rem}nav ul li{margin:0}nav ul li:first-child{margin-left:0}.primary{color:var(--light);background:var(--primary)}.secondary{color:var(--light);background:var(--secondary)}.default{color:var(--dark);background:var(--light)}.dark{color:var(--light);background:var(--dark)}.light{color:var(--dark);background:var(--light)}blockquote.primary{border-color:var(--primary)}blockquote.secondary{border-color:var(--secondary)}.text-primary{color:var(--primary)}.text-secondary{color:var(--secondary)}.text-default,.weak{color:var(--default)}.grid{display:grid;gap:.25rem;grid-template-columns:repeat(auto-fit,minmax(0,1fr))}.group{display:flex}.container{margin:0 auto;padding:var(--size);max-width:1140px}.underline{border-bottom:currentColor 1px solid}.border{border:var(--default) 2px solid;border-radius:var(--radius)}.indent{margin-left:.25rem}.pointer{cursor:pointer}.center{align-self:center;justify-self:center} /*# sourceMappingURL=stylelite.map */ \ No newline at end of file diff --git a/examples/index.html b/examples/index.html new file mode 100644 index 0000000..dd945b9 --- /dev/null +++ b/examples/index.html @@ -0,0 +1,378 @@ + + + + + + Example + + + + + + +
+
+
+ +

+

+
 
+
 
+
 
+
+

+
+
+
+
+
+ +

Overview

+
+

+ DIV is not the only tag available to your designs. + Stylelite mimics traditional .container class by just using a MAIN tag, + which by default centers your content to an 1140px width. +

+

+ Need to divide major sections of your code, eh...use SECTION tag. + Need little extra content flair, wrap in an ARTICLE tag. +

+

+ Use AS-IS or Customize +

+
+
+
+ +

Typography

+
+
+ The alternative to good design is always bad design. there is no such thing as no design. + Simplicity carried to an extreme, becomes elegance. + -- Adam Judge +
+

+ P + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vestibulum luctus arcu, + eu faucibus ex. Ut consequat lorem eget aliquet semper. Praesent quis vestibulum ante, + id tristique leo. Etiam sed congue lacus. Nunc ut ornare metus. Suspendisse tincidunt in + odio eu faucibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla + facilisi. +

+

+ STRONG + Generated 1 paragraph, 52 words, 354 bytes of + Lorem Ipsum + +

+
+
+
+
+

H1 Heading...

+

H2 Heading...

+

H3 Heading...

+

H4 Heading...

+
H5 Heading...
+
H6 Heading...
+
+
+

P can simply be a paragraph

+

A can be a link

+

STRONG can be bold

+

U can be underlined

+

EM can be emphasized

+

KBD acts like a tag

+

SMALL can be small

+

CODE can be code

+
+
+
+ IMG +
+ Example image +
+
+
+ HR +
+
+ +
+
+ +

Buttons

+

+ button can be customize by applying a color class. +

+

+ Link + + + + + + +

+
+
+ +

Navigation

+
+

+ nav provides a convenient way to build navigation systems + using ul and li. Internally elements nav + divide, so you can put an empty div before the ul + to make the nav on the right side or div on both sides + to center +

+ + + +
+
+
+ +

Forms

+
+
+ Details Summary +
+ Default details and summary behavior. + wrap content in tag, like div +
+
+ +
+ + +
+
+ + +
+
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+

+ +

+
+
+
+ +

Tables

+

TABLE is clean by default

+ + + + + + + + + + + + + + + + + + + + + + + + + +
OneTwoThere
DataDataData
DataDataData
DataDataData
+
+
+ +

Components

+ +

+ These are native UI components that typically do not have any + style +

+ +
+
+
+ Dialogs +
+
+ A native modal UI element exists as dialog + and is supported with a little javascript. +

+ SEE: + MDN Documentation + +

+
+
+ +
+
+
+
+ More... +
+
+
+
+ More... +
+
+
+ +
Default Dialog Modal
+
+
+ +
+
+ +
+
+

Dark Mode

+

+ Add data-theme="dark" to your html tag +

+
+
+
+

Custom Theme

+

+ Create a custom theme by overriding variables in :root stylesheet +

+ + + + + + + + + + + + + + + + + + +
VariableDescriptionDefault
--primaryDesigning a site around primary theme color, set here#5499C7
--radiusPrefer rounded-corners, try .4rem.3rem
+
+
+ +
+ +

Utilities

+ + + + + + + + + +
.grid + a display:grid layout helper, that acts a lot like + .row but without the column control +
.group + really just display:flex however used on + input groups provides form element designs +
+
+
+
+ + + + \ No newline at end of file diff --git a/examples/overview.html b/examples/overview.html deleted file mode 100644 index 40b3094..0000000 --- a/examples/overview.html +++ /dev/null @@ -1,431 +0,0 @@ - - - - - - - Stylelite - - - - - - -
-
- -

-

-
 
-
 
-
 
-
-

-
-
- -

Overview

-
-

- DIV is not the only tag available to your designs. - Mimic traditional .container class by just using a MAIN tag, - which by default centers your content to an 1140 width. -

-

- Need to divide major sections of your code, eh...use SECTION tag. - Need little extra content flair, wrap in an ARTICLE tag. -

-

- Use AS-IS or Customize -

-
-
-
- -

Navigation

-
-

- nav provides a convenient way to build navigation systems - using ul and li. Internally elements nav - divide, so you can put an empty div before the ul - to make the nav on the right side or div on both sides - to center - -

- - - - -
-
-
- -

Typography

-
-
- The alternative to good design is always bad design. there is no such thing as no design. - Simplicity carried to an extreme, becomes elegance. - -- Adam Judge -
-

- P - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vestibulum luctus arcu, - eu faucibus ex. Ut consequat lorem eget aliquet semper. Praesent quis vestibulum ante, - id tristique leo. Etiam sed congue lacus. Nunc ut ornare metus. Suspendisse tincidunt in - odio eu faucibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla - facilisi. -

-

- STRONG - Generated 1 paragraph, 52 words, 354 bytes of - Lorem Ipsum - -

-
-
-
-
-

H1 Heading...

-

H2 Heading...

-

H3 Heading...

-

H4 Heading...

-
H5 Heading...
-
H6 Heading...
-
-
-

P can simply be a paragraph

-

A can be a link

-

STRONG can be bold

-

U can be underlined

-

EM can be emphasized

-

SMALL can be small

-

CODE can be code

-
-
-
- HR -
-
-
-
- IMG -
- Example image -
-
-
- -

Lists

-
-
- UL -
    -
  • LIList Item
    • -
  • LIList Item
    • -
  • LIList Item
    • -
  • LIList Item
    • -
-
-
- OL -
    -
  1. LIList Item
    2. -
  2. LIList Item
    3. -
  3. LIList Item
    4. -
  4. LIList Item
    5. -
-
-
-
-
- -

Forms

-
-
- Details Summary -
- Default details and summary behavior. - wrap content in tag, like div -
-
- -
- - -
-
- -
- - -
-
-
- - -
- -
- - -
- -
- - -
- -
- - -
- -
- - - -
-
-
-
- -

Buttons

-
- - - - -
-
-
- -

Tables

- - - - - - - - - - - - - - - - - - - - - - - - - -
OneTwoThere
DataDataData
DataDataData
DataDataData
-
- -
- -

Components

- -

- These are native UI components that typically do not have any - style -

- -
-
-
- Dialogs -
-
- A native modal UI element exists as dialog - and is supported with a little javascript. -

- SEE: - MDN Documentation - -

-
-
- -
-
-
-
- More... -
-
-
-
- More... -
-
-
- -

Default Dialog Modal

-
- -
- -
- -
- -

Misc Utility Classes

- - - - - - - - - -
.grid - a display:grid layout helper, that acts a lot like - .row but without the column control -
.group - really just display:flex however used on - input groups provides form element designs -
-
- -
- -
-

Customize

-
-

- /extras provides some useful styles that complement - Stylelite and have been removed to keep it focused - closer to a classless css solution -- and smaller. -

-
- NOTE: Some extras exist in Stylelite, - but are also useful in isolation -
-
- -
-

CSS Variables

- - - - - - - - - - - - - - - - - - -
VariableDescriptionDefault
--theme (color)Designing a site around a theme color, set heresteelblue
--radiusPrefer rounded-corners, try .4rem0rem
-
- -
-

Dark Mode

- Add data-theme="dark" to your html tag -
- -
-

Colors

-

- Customize with your own styles or some examples available extras like -

- -
- Bootstrap-inspired color classes found - in extras/colors.css -
- -
- - - - -
-
- -
- - - \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index d01d05b..d8824cb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "stylelite", - "version": "0.8.2", + "version": "1.0.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "stylelite", - "version": "0.8.2", + "version": "1.0.0", "license": "MIT", "devDependencies": { "csso-cli": "^4.0.2" diff --git a/package.json b/package.json index 9c75b0f..6a8698b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "stylelite", - "version": "0.9.10", + "version": "1.0.0", "description": "a class-lite stylesheet on the light-side", "scripts": { "build": "npx csso-cli .\\src\\stylelite.css --comments first-exclamation --output .\\dist\\stylelite.min.css -s .\\dist\\stylelite.map" diff --git a/src/extras/layout.css b/src/extras/layout.css index 9a1b8bd..3ab37b7 100644 --- a/src/extras/layout.css +++ b/src/extras/layout.css @@ -6,6 +6,12 @@ max-width: 1140px; } +.page { + display: grid; + min-height: 100%; + grid-template-rows: auto 1fr auto; +} + .row { display: flex; flex: 0 1 auto; diff --git a/src/shim.css b/src/shim.css new file mode 100644 index 0000000..110d6cc --- /dev/null +++ b/src/shim.css @@ -0,0 +1,24 @@ +/* Old Stylelite Shim */ + +:root { + --theme: #d69711; + + /* real --theme (for now) */ + --primary: #d69711; + --default: #d69711; +} + +main {margin: 0 auto;} +button {color: var(--light);background: var(--primary);} +label.addon { + display: inline-block; + vertical-align: middle; + text-align: center; + color: var(--light); + background: var(--primary); + margin: 0 0 .5rem -2px; + min-width: fit-content; + padding: .5rem; +} + +h1 {color: var(--primary)} \ No newline at end of file diff --git a/src/stylelite.css b/src/stylelite.css index 4e6c0c1..ab77bed 100644 --- a/src/stylelite.css +++ b/src/stylelite.css @@ -1,156 +1,95 @@ -/*! Stylelite v:0.9.10 | MIT LICENSE | https://github.com/n2geoff/stylelite */ +/*! Stylelite v:1.0.0 | MIT LICENSE | https://github.com/n2geoff/stylelite */ :root { - --theme: steelblue; --size: 1rem; - --radius: 0rem; + --radius: .3rem; - --fg: #17202A; - --bg: #FDFEFE; - --mg: #99A3A4; + --foreground: #111; + --background: #FFF; - --white: #FFF; - --black: #000; + --light: #F0F0F0; + --dark: #404040; - --light: #EEE; - --dark: #222; + --default: #F0F0F0; + --primary: #5499C7; /* 0000EE */ + --secondary: #404040; + + --success: #198754; + --warning: #fbc02d; + --danger: #C62828; } [data-theme=dark] { - --theme: #5499C7; + --foreground: #FFF; + --background: #222; - --mg: #6B7280; - --bg: #1A1A1A; - --fg: #E0E0E0; - - --white: #FFF; - --black: #000; - - --dark: #D4D4D4; - --light: #272727; + --default: #333; } -* {margin:0} - -*,*::before,*::after { - box-sizing: border-box; -} - -html,body { - background: var(--bg); - color: var(--fg); - accent-color: var(--theme); - font-family: system-ui, sans-serif; +html, body { + color: var(--foreground); + background: var(--background); + font-family: Verdana, Geneva, Tahoma, sans-serif; font-size: 16px; + box-sizing: border-box; + margin: 0; + padding: 0; letter-spacing: 0.0125em; + height: 100%; line-height: 1.5rem; } -span,div, input, button, a,textarea, select {margin-bottom: .25rem;margin-top: .25rem;} - -p {margin: 1rem 0} - -img,embed,iframe,object,audio,video { - height: auto; - max-width: 100%; - border: none; -} - -ol, ul {margin-left: 1rem} - -li {margin-left: 1rem} - label { display: inline-block; - font-weight: 600; - color: var(--fg); - white-space: nowrap; - vertical-align: top; + font-weight: 700; + margin: .25rem; } -label.addon { - max-height: 2.5rem; - background: var(--theme); - padding: .5rem 1rem; - margin-top: .25rem; +ol, ul, li {margin-left: 1rem} + +section {margin: 1rem 0;} + +cite,strong { + display: inline-block; + font-weight: bold; + padding: .5rem 0rem; } -pre,code { - background: var(--light); - color: var(--dark); - padding: .25rem; -} - -main { - margin: 0 auto; - padding: var(--size); - max-width: 1140px; -} - -table { - background: var(--bg); - border-collapse: collapse; - border-spacing: 0; - width: 100%; -} - -table>thead>tr>th { - border-bottom: 2px solid var(--theme); -} - -th { - text-align: left; -} - -th,td { - padding: .5rem; - border-bottom: 1px solid var(--theme); -} - -table.striped tbody>:nth-child(2n-1) { - background: #f5f5f5; -} - -table.condensed td, table.condensed th {padding:0} - -fieldset { - background: var(--bg); - padding: 1rem; - border: 1px solid var(--theme); -} - -legend { - font-size: larger; - font-weight: 600; - color: var(--theme); - background: var(--bg); - display: block; - width: fit-content; +pre,code,kbd { + font-family: monospace; + font-size: smaller; padding: .25rem .5rem; - margin: 0; - line-height: inherit; - border: 1px solid var(--theme); + background: var(--default); + color: var(--foreground); } -blockquote { - margin: var(--size) 0; - color: var(--dark); - background: var(--light); - padding: var(--size); - border-left: 8px solid var(--theme); +abbr { + border-bottom: 1px dotted; + cursor: help; +} + +kbd { + font-style: normal; + color: var(--light); + background: var(--primary); border-radius: var(--radius); + text-transform: uppercase; } + +i {vertical-align: middle;} -hr { - color: var(--theme); - border: 1px solid; -} +select,option,textarea,input,header,footer,button,main,blockquote {padding: calc(var(--size)/2) var(--size)} -h1,h2,h3,h4,h5,h6 { - color: var(--theme); - margin: var(--size) 0; - padding-bottom: calc(var(--size) / 2); - text-transform: capitalize; +select,option,textarea,input { + display: inline-block; + box-sizing: border-box; + font-family: Verdana, Geneva, Tahoma, sans-serif; + font-size: 1rem; + width: 100%; + border: var(--default) 2px solid; + border-radius: var(--radius); + margin-bottom: .5rem; } +select:hover {cursor: pointer;} h1 {font-size: 2.2rem} h2 {font-size: 1.8rem} @@ -158,37 +97,89 @@ h3 {font-size: 1.4rem} h4 {font-size: 1.2rem} h5 {font-size: 1.1rem} h6 {font-size: 1rem} +h1,h2,h3,h4,h5,h6 {margin-top: 1rem;margin-bottom: .5rem;} -a {color: var(--theme);} -a:hover {color: var(--dark);} +hr {margin: 1rem 0; border-color: var(--primary)} -section, article { - margin-bottom: 2rem; -} - -article, aside { - border: 1px solid rgba(0,0,0,.125); - background: var(--light); - color: var(--dark); - padding: 1rem; -} - -/* Forms */ - -input:user-invalid { - outline: 2px solid var(--theme); -} - -details { +blockquote { margin: var(--size) 0; - color: var(--fg); + color: var(--foreground); + font-style: italic; + padding: calc(var(--size) * 1.5); + border: var(--default) 1px solid; + border-left: var(--default) 1rem solid; + border-radius: var(--radius); +} + +/* Buttons */ + +button {font-family: Verdana, Geneva, Tahoma, sans-serif;border-radius: var(--radius);} + +button:hover, input[type="reset"]:hover,input[type="submit"]:hover { + filter:brightness(90%) !important; cursor: pointer; } +button,input[type="submit"],input[type="reset"] { + border: unset; + box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.1); +} + +a.button {padding: calc(var(--size)/2) var(--size);text-align: center;} + +a {display: inline-block;vertical-align: middle; color: var(--primary)} +a:hover {color: var(--foreground)} +a[name] {display: none;} /* fix anchors */ + +input:user-invalid { + outline: 2px solid var(--danger); +} + +input[type="checkbox"], +input[type="radio"]{ + display: inline-block; + vertical-align: middle; + width: 1rem; + height: 1rem; +} + +*:disabled {background: #F0F0F0; } +*:disabled:hover {cursor: not-allowed} + +/* Tables */ + +table { + border-collapse: collapse; + border-spacing: 0; + width: 100%; +} + +tbody { + border-top: var(--default) 2px solid; + border-bottom: var(--default) 2px solid; +} + +th {text-align: left} + +th,td { + padding: .25rem; + border-bottom: 1px solid var(--default); +} + +table.striped tbody>:nth-child(2n-1) {background: var(--default)} + +/* Details */ + +details { + color: var(--dark); + background: var(--light); + margin: var(--size) 0; + cursor: pointer; + border: var(--default) 2px solid; +} + details[open] { - background-color: var(--bg); margin-bottom: var(--size); - border: 1px solid var(--theme); } details>* { @@ -196,155 +187,9 @@ details>* { padding: .5rem 1rem; } -summary { - color: var(--theme); - height: 40px; - background-color: var(--bg); - border: 1px solid var(--theme); -} - summary:hover {cursor: pointer;} details:not(summary):hover {cursor: default} -a.button,button, input { - display: inline-block; - box-sizing: border-box; - text-decoration: none; - outline: none; - font-size: 1rem; - background: var(--bg); - color: var(--fg); - min-width: fit-content; - width: 100%; - height: 2.5rem; - border: 1px solid var(--theme); - border-radius: var(--radius); - padding: .5rem 1rem; -} - -input[type=color] {padding: .25rem} - -input[type="checkbox"], -input[type="radio"]{ - padding: 0; - width: 1.1rem; - height: 1.1rem; - margin-right: .5rem; -} - -input::placeholder {color: var(--mg)} - -button, input[type="reset"],input[type="submit"] { - display: inline-block; - border-radius: var(--radius); - width: initial; -} - -button[disabled], button[disabled]:hover { - filter: brightness(75%); - cursor: not-allowed; - pointer-events: none; -} - -button.link { - border: none; - background: none; - color: var(--theme); - margin:0; -} - -button.link:hover { - background: none; - border: none; - color: var(--theme); - text-decoration: underline; -} - -a.button, button, input[type="submit"] { - background: var(--theme); - color: var(--white); -} - -button.outline { - background: none; - outline: var(--theme); - color: var(--fg); -} - -a.button:hover, button:hover, input[type="reset"]:hover,input[type="submit"]:hover { - filter:brightness(90%) !important; - cursor: pointer; -} - -select:disabled, textarea:disabled,input:disabled { - cursor: not-allowed; - pointer-events: none; - filter: brightness(95%); -} - -select:focus,textarea:focus,input:focus { - border: 2px solid var(--theme); -} - -option { line-height: 1rem; vertical-align: center;} - -select,textarea { - display: inline-block; - outline: none; - font-size: var(--size); - height: 2.5rem; - width: 100%; - border: 1px solid var(--theme); - color: var(--fg); - background: var(--bg); - border-radius: var(--radius); - padding: 0 var(--size); - cursor: pointer; -} - -select { - background: var(--bg) no-repeat 100%; - color: var(--fg); - padding: 0 clamp(.5rem, var(--size), 2rem); - appearance: none; - background-size: 1ex; - background-origin: content-box; - background-image: url("data:image/svg+xml;utf8,"); -} - -textarea { - overflow: auto; - resize: vertical; - border: 1px solid var(--theme); - height: calc(var(--size) * 6rem);; - padding: clamp(.5rem, var(--size), 2rem); - cursor: text; - color: var(--fg); -} - -*:disabled, .disable, .disable {pointer-events: none;} - -/* Navigation */ - -nav { - display: flex; - justify-content: space-between; - height: 2rem; - border-bottom: 1px solid var(--theme); -} -nav.navbar { - background: var(--theme); - color: var(--white); - border: none; -} -.navbar li:hover {background: var(--white);color: var(--black); cursor: pointer;} -.navbar li a {color: inherit;} - -nav ul {display: flex;list-style-type: none;margin:0;padding:0; line-height: 2rem} -nav ul li {padding:0rem .5rem;margin:0} -nav ul li:first-child {margin-left:0;margin-left:0} -nav a {text-decoration: none;} - /* Dialog */ dialog[open] { @@ -352,12 +197,57 @@ dialog[open] { } dialog { - border: 1px solid var(--theme); - box-shadow: 0 0 #0000, 0 0 #0000, 0 25px 50px -12px rgba(0, 0, 0, 0.25); - padding: calc(var(--size) * 2); + border: 1px solid var(--dark); + border-radius: var(--radius); + padding:0; + margin:0; max-width: 85%; + min-width: 340px; } +dialog::backdrop { + background-color: rgba(0, 0, 0, 0.8); +} + +/* Navigation */ + +nav { + display: flex; + justify-content: space-between; + padding: 0rem .5rem; +} + +nav .brand { + margin:0; + font-size: x-large; +} + +nav a {text-decoration: none;} +nav > ul > li > a:hover, .active { + margin-top: -1px; /* fix page bounce */ + border-bottom: currentColor 1px solid; +} + +nav ul {display: flex;list-style-type: none;margin:0;padding:0; line-height: 2rem} +nav ul li {padding:0rem .5rem;margin:0} +nav ul li:first-child {margin-left:0;margin-left:0} +nav a {text-decoration: none;color: var(--primary)} + +/* Colors */ + +.primary {color: var(--light); background: var(--primary);} +.secondary {color: var(--light); background: var(--secondary);} +.default {color: var(--dark); background: var(--light);} +.dark {color: var(--light); background: var(--dark);} +.light {color: var(--dark); background: var(--light);} + +blockquote.primary {border-color: var(--primary);} +blockquote.secondary {border-color: var(--secondary);} + +.text-primary {color: var(--primary)} +.text-secondary {color: var(--secondary)} +.text-default, .weak {color: var(--default)} + /* Layout Utilities */ .grid { @@ -367,6 +257,15 @@ dialog { } .group {display: flex} -.right {float:right} -.left {float:left} -.center {text-align: center} + +.container { + margin: 0 auto; + padding: var(--size); + max-width: 1140px; +} + +.underline {border-bottom: currentColor 1px solid} +.border {border: var(--default) 2px solid;border-radius: var(--radius);} +.indent {margin-left: .25rem;} +.pointer {cursor: pointer;} +.center {align-self: center; justify-self: center;}