diff --git a/dist/stylelite.map b/dist/stylelite.map
index 45fac61..55c31c3 100644
--- a/dist/stylelite.map
+++ b/dist/stylelite.map
@@ -1 +1 @@
-{"version":3,"sources":["src/stylelite.css"],"names":[],"mappings":";AACA,K,CACI,Y,CACA,a,CACA,a,CACA,Y,CACA,Y,CACA,Y,CAGJ,iB,CACI,Y,CACA,Y,CACA,Y,CAGJ,C,CAAW,M,CAAT,O,CACE,qB,CAGC,I,CAAL,I,CA+BA,K,CACI,oB,CAhCC,I,CAAL,I,CAEI,e,CACA,Q,CAEA,8C,CACA,qB,CACA,sB,CACA,iC,CACA,qB,CACA,S,CAGoB,K,CAApB,K,CAAM,M,CAAV,G,CAAiB,M,CAAa,K,CAC1B,W,CACA,c,CACA,Q,CA+BJ,U,CA5BA,I,CAiCI,oB,CAjCJ,I,CACI,a,CAEA,Y,CACA,gB,CAGE,E,CAAH,E,CAAH,E,CACI,+B,CACA,S,CAGJ,K,CAEI,wB,CACA,gB,CACA,U,CAGJ,E,CACI,e,CAGD,E,CAJH,E,CAKI,8B,CACA,iC,CAGJ,U,CAEI,gD,CACA,e,CACA,oB,CAIJ,I,CAEI,qB,CAGJ,e,CA+CA,M,CAjBA,O,CA9BiB,Y,CACb,e,CAGJ,E,CAEI,gB,CAGJ,E,CAAG,E,CAAG,E,CAAG,E,CAAG,E,CAAG,E,CACX,qB,CACA,mC,CACA,yB,CAGJ,E,CACI,6B,CAIJ,C,CAzBA,I,CASA,E,CAuJA,iB,CAvIG,e,CACH,O,CANA,E,CAMS,e,CAEA,O,CAAT,O,CACI,iC,CACA,2B,CAtCJ,U,CA2CA,O,CACI,qB,CADJ,O,CAGI,c,CAGJ,a,CAEI,0B,CAGJ,S,CAAW,4B,CAA+B,8B,CAL1C,a,CAOA,O,CACI,0B,CAGJ,M,CAkBI,wB,CAEA,a,CAMA,oB,CA1BJ,M,CAAQ,K,CAgBA,iB,CAAoB,kB,CACxB,oB,CAEA,2B,CAnBJ,M,CAAQ,K,CAEJ,S,CACA,qB,CACA,qB,CACA,oB,CAGA,0B,CACA,0B,CAEA,sC,CACA,0B,CACA,yB,CAbI,K,CAMJ,e,CACA,U,CASI,iB,CAAoB,kB,CAExB,wB,CAEA,a,CACA,oB,CACA,e,CAQJ,Y,CAAc,uB,CAA0B,wB,CACpC,oB,CACA,e,CACA,c,CAGJ,c,CACI,oB,CACA,e,CACA,kB,CAGwB,W,CAA5B,Y,CAAa,c,CACT,0B,CAGJ,oB,CAAuB,iB,CACnB,oB,CACA,S,CACA,c,CACA,0B,CACA,2B,CAGJ,M,CAAO,Q,CACH,oB,CACA,S,CACA,qB,CACA,0B,CACA,U,CAGA,oB,CACA,2B,CACA,sB,CACA,0B,CAiBA,0B,CAIA,e,CAhCJ,M,CAYI,c,CAIA,mC,CAEA,wC,CACA,e,CACA,mB,CACA,6B,CACA,qK,CAtBG,Q,CA0BH,a,CACA,e,CAEA,6B,CACA,sC,CACA,W,CAMJ,G,CAEI,6B,CACA,kB,CACA,0B,CACA,e,CAGJ,M,CAEI,oB,CAGJ,W,CACI,e,CACA,oB,CAOJ,K,CACI,Y,CACA,gB,CACA,oD,CAGJ,I,CA5BA,G,CAQA,M,CAqBI,Y,CADJ,I,CAEI,a,CACA,kB,CACA,c,CACA,Q,CAEI,I,CAAR,M,CAMI,M,CANI,I,CAAM,M,CAAQ,M,CAAQ,M,CAAQ,M,CAAO,M,CAA7C,M,CACI,Y,CACA,qB,CACA,6B,CACA,mB,CACA,qB,CAEA,c,CAGJ,M,CAAQ,gB,CACR,M,CAAQ,gB,CACR,M,CAAQ,gB,CACR,M,CAAQ,gB,CACR,M,CAAQ,gB,CAIR,M,CAAQ,W,CACR,K,CAAO,U,CACP,O,CAAS,iB,CACT,M,CAAQ,U,CAAW,a,CAAe,U,CAClC,K,CAAO,U,CAAa,W,CACpB,Q,CAAU,4B,CAA+B,e,CAAkB,0B,CAC3D,U,CAAY,iC,CACZ,O,CAAS,0B,CACT,Q,CAAU,oB,CACV,S,CAAW,+B,CAAoC,0B,CAA6B,iB,CAE5E,G,CAAK,e,CAAiB,4B,CAAgC,+B,CACtD,G,CAAK,iB,CAAmB,4B,CAAgC,gC","file":"src/stylelite.css","sourcesContent":["/*! Stylelite v:0.5.0 | MIT LICENSE | https://github.com/n2geoff/stylelite */\r\n:root {\r\n --space: 1rem;\r\n --size: 1.1rem;\r\n --radius: 0rem;\r\n --fg: #17202A;\r\n --bg: #FDFEFE;\r\n --mg: #ABB2B9;\r\n}\r\n\r\n[data-theme=dark] {\r\n --mg: #ABB2B9;\r\n --bg: #17202A;\r\n --fg: #FDFEFE;\r\n}\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 margin: 0;\r\n padding: 0;\r\n font-family: Verdana, Arial, Helvetica, sans-serif;\r\n font-size: var(--size);\r\n letter-spacing: 0.0625em;\r\n line-height: calc(var(--size) * 1.5);\r\n box-sizing: border-box;\r\n padding: 0;\r\n}\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\nmain {\r\n margin: 0 auto;\r\n padding: var(--space);\r\n height: 100vh;\r\n max-width: 1140px;\r\n}\r\n\r\nul,ol,li {\r\n margin: 0 calc(var(--space) *.72);\r\n padding: 0\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\nth {\r\n text-align: left;\r\n}\r\n\r\nth,td {\r\n padding: calc(var(--space) / 2.4);\r\n border-bottom: 1px solid var(--mg);\r\n}\r\n\r\nblockquote {\r\n margin: var(--space) 0;\r\n border-left: calc(var(--space) / 2) solid var(--fg);\r\n color: var(--fg);\r\n background: var(--mg);\r\n padding: var(--space);\r\n}\r\n\r\ncode {\r\n color: var(--mg);\r\n font-family: monospace;\r\n}\r\n\r\nblockquote code, details code {\r\n color: var(--bg);\r\n}\r\n\r\nhr {\r\n color: var(--mg);\r\n border: 1px solid;\r\n}\r\n\r\nh1,h2,h3,h4,h5,h6 {\r\n margin: var(--space) 0;\r\n padding-bottom: calc(var(--space) / 2);\r\n text-transform: capitalize;\r\n}\r\n\r\nh1 {\r\n font-size: calc(var(--size) * 2);\r\n color: var(--fg);\r\n}\r\n\r\na {color: var(--mg)}\r\na:hover {color: var(--fg)}\r\n\r\nsection, article {\r\n margin-top: calc(var(--space) * 1.2);\r\n padding-bottom: var(--space);\r\n}\r\n\r\n/* Forms */\r\n\r\ndetails {\r\n margin: var(--space) 0;\r\n color: var(--bg);\r\n cursor: pointer;\r\n}\r\n\r\ndetails[open] {\r\n background-color: var(--mg);\r\n margin-bottom: var(--space);\r\n}\r\n\r\ndetails>* {padding: calc(var(--space)/2); border-top: 1px solid var(--bg)}\r\n\r\nsummary {\r\n background-color: var(--mg);\r\n}\r\n\r\nbutton, input {\r\n display: inline-block;\r\n outline: none;\r\n box-sizing: border-box;\r\n font-size: var(--size);\r\n background: var(--bg);\r\n color: var(--fg);\r\n width: 100%;\r\n height: calc(var(--size) * 3);\r\n border: 1px solid var(--mg);\r\n border-radius: var(--radius);\r\n padding: clamp(.5rem, var(--space), 2rem);\r\n margin-bottom: var(--space);\r\n margin-right: var(--space);\r\n}\r\n\r\nbutton, input[type=\"reset\"],input[type=\"submit\"] {\r\n display: inline-block;\r\n text-transform: uppercase;\r\n border-radius: var(--radius);\r\n width: initial;\r\n background: var(--fg);\r\n color: var(--bg);\r\n}\r\n\r\nbutton {\r\n background: var(--fg);\r\n color: var(--bg);\r\n}\r\n\r\nbutton:hover, input[type=\"reset\"]:hover,input[type=\"submit\"]:hover {\r\n background: var(--mg);\r\n color: var(--fg);\r\n cursor: pointer;\r\n}\r\n\r\ninput:disabled {\r\n background: var(--mg);\r\n color: var(--bg);\r\n cursor: not-allowed;\r\n}\r\n\r\nselect:focus,textarea:focus,input:focus {\r\n border: 2px solid var(--mg);\r\n}\r\n\r\ninput[type=\"checkbox\"],input[type=\"radio\"] {\r\n display: inline-block;\r\n padding: 0;\r\n margin: 0 .5rem;\r\n width: calc(var(--size) * .8);\r\n height: calc(var(--size) * .8);\r\n}\r\n\r\nselect,textarea {\r\n display: inline-block;\r\n outline: none;\r\n font-size: var(--size);\r\n height: calc(var(--size) * 3);\r\n width: 100%;\r\n border: 1px solid var(--mg);\r\n color: var(--fg);\r\n background: var(--bg);\r\n border-radius: var(--radius);\r\n padding: 0 var(--space);\r\n margin-bottom: var(--space);\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(--space), 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(--mg);\r\n height: calc(var(--size) * 6rem);;\r\n padding: clamp(.5rem, var(--space), 2rem);\r\n cursor: text;\r\n color: var(--fg);\r\n}\r\n\r\n/* Navigation */\r\n\r\nnav {\r\n display: flex;\r\n justify-content: space-between;\r\n padding: .5rem 1rem;\r\n background-color: var(--fg);\r\n color: var(--bg);\r\n}\r\n\r\nnav ul {\r\n display: flex;\r\n list-style-type: none;\r\n}\r\n\r\nnav ul li a {\r\n color: var(--bg);\r\n text-decoration: none;\r\n}\r\nnav ul li a:hover {color: var(--mg)}\r\n\r\n\r\n/* Grid System */\r\n\r\n.grid {\r\n display: grid;\r\n gap: var(--space);\r\n grid-template-columns: repeat(auto-fit, minmax(0%, 1fr));\r\n}\r\n\r\n.row {\r\n display: flex;\r\n flex: 0 1 auto;\r\n flex-direction: row;\r\n flex-wrap: wrap;\r\n margin:0;\r\n}\r\n.row>*, .col, .col-1, .col-2, .col-3, .col-4,.col-5 {\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: space-between;\r\n align-items: stretch;\r\n box-sizing: border-box;\r\n flex: 1;\r\n max-width: 100%;\r\n}\r\n\r\n.col-1 {flex: 1 !important;}\r\n.col-2 {flex: 2 !important;}\r\n.col-3 {flex: 3 !important;}\r\n.col-4 {flex: 4 !important;}\r\n.col-5 {flex: 5 !important;}\r\n\r\n/* Utilities */\r\n\r\n.right {float:right}\r\n.left {float:left}\r\n.center {text-align: center;}\r\n.clear {content:'';display: table;clear:both}\r\n.fill {width: 100%; height: 100%}\r\n.outline {background-color: transparent; color: var(--fg); border: 1px solid var(--fg)}\r\n.underline {border-bottom: 1px solid var(--mg)}\r\n.border {border: 1px solid var(--mg)}\r\n.content {padding: var(--space)}\r\n.subtitle {margin-top: calc(var(--size) * -1); margin-bottom: var(--space); font-size: smaller};\r\n.spaceless {margin: 0; padding:0}\r\n.sm {font-size: small;height: calc(var(--size) * 1.5);padding: 0 calc(var(--size)/ .75);}\r\n.lg {font-size: x-large;height: calc(var(--size) * 4.5);padding: 0 calc(var(--size) / 1.25);}"]}
\ No newline at end of file
+{"version":3,"sources":["src/stylelite.css"],"names":[],"mappings":";AACA,K,CACI,Y,CACA,W,CACA,a,CACA,Y,CACA,Y,CACA,Y,CAEA,Y,CACA,Y,CACA,c,CAEA,e,CACA,W,CAEA,iB,CAEA,iB,CACA,iB,CACA,gB,CACA,iB,CACA,c,CAGJ,iB,CACI,Y,CACA,Y,CACA,Y,CAGJ,C,CAAW,M,CAAT,O,CACE,qB,CAGC,I,CAAL,I,CAsCA,K,CACI,oB,CAvCC,I,CAAL,I,CAEI,e,CACA,yB,CACA,Q,CAEA,gC,CACA,c,CACA,sB,CACA,kB,CACA,qB,CACA,S,CAGQ,M,CAAZ,G,CAAK,K,CAAyB,M,CAAV,Q,CAAkB,oB,CAEtC,C,CAAG,c,CAEqB,K,CAApB,K,CAAM,M,CAAV,G,CAAiB,M,CAAa,K,CAC1B,W,CACA,c,CACA,Q,CAGJ,K,CACI,c,CACA,e,CACA,iB,CACA,e,CACA,kB,CAGJ,I,CACI,a,CACA,oB,CACA,gB,CAGJ,K,CAEI,wB,CACA,gB,CACA,U,CAGJ,iB,CACI,oC,CAGJ,oC,CACI,kB,CAGJ,E,CACI,e,CAGD,E,CAJH,E,CAKI,a,CACA,oC,CAGJ,iB,CAAmB,S,CAEnB,Q,CAMA,M,CALI,oB,CACA,Y,CACA,6B,CAGJ,M,CACI,gB,CACA,e,CACA,kB,CAEA,a,CACA,iB,CACA,oB,CACA,Q,CACA,mB,CAIJ,U,CAoDA,O,CAlCA,E,CAAG,E,CAAG,E,CAAG,E,CAAG,E,CAAG,E,CAmCX,oB,CACA,kB,CAtDJ,U,CAGI,yB,CACA,oB,CAGJ,kB,CAAoB,kB,CAAqB,oB,CAAuB,+B,CAChE,iB,CAAmB,kB,CAAqB,mB,CAAsB,8B,CAC9D,e,CAAiB,kB,CAAqB,oB,CAAwB,+B,CAC9D,kB,CAAoB,kB,CAAqB,oB,CAAuB,+B,CAChE,kB,CAAoB,e,CAAkB,iB,CAAoB,4B,CAE1D,E,CAEI,gB,CAGJ,E,CAAG,E,CAAG,E,CAAG,E,CAAG,E,CAAG,E,CAEX,mC,CACA,yB,CAGA,kB,CAGJ,E,CACI,gB,CAGJ,E,CAAI,gB,CACJ,E,CAAI,gB,CAAkB,c,CACtB,E,CACA,E,CACA,E,CAFI,gB,CAAmB,e,CACvB,E,CACA,E,CADI,c,CACJ,E,CAAI,e,CAEJ,C,CAxBA,E,CAwBG,kB,CACH,O,CAAS,iB,CAEA,O,CAAT,O,CACI,kB,CAGJ,O,CACI,iC,CACA,yB,CACA,oB,CAKJ,O,CAGI,c,CAGJ,a,CAUA,O,CAGI,+B,CAbJ,a,CAEI,0B,CAGJ,S,CACI,qB,CACA,kB,CAGJ,O,CACI,kB,CACA,W,CAEA,6B,CAGJ,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,M,CAAQ,iB,CAAoB,kB,CACxB,oB,CACA,2B,CACA,a,CAGJ,gB,CAAkB,sB,CACd,U,CACA,kB,CACA,mB,CAGJ,W,CACI,Q,CACA,c,CACA,kB,CAGJ,Q,CAAU,M,CACN,uB,CACA,kB,CAGJ,c,CACI,yB,CACA,kB,CAGJ,c,CACI,yB,CACA,kB,CAGJ,c,CACI,yB,CACA,kB,CAGJ,a,CACI,wB,CACA,kB,CAGJ,c,CACI,yB,CACA,kB,CAGJ,c,CAAgB,Y,CAAc,uB,CAA0B,wB,CACpD,sB,CACA,6B,CACA,kB,CACA,c,CAG+B,c,CAAnC,e,CAAiB,iB,CACb,a,CACA,kB,CACA,kB,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,sB,CAiBA,6B,CAIA,e,CA/BJ,M,CAWI,c,CAIA,mC,CAEA,wC,CACA,e,CACA,mB,CACA,6B,CACA,qK,CArBG,Q,CAyBH,a,CACA,e,CAEA,6B,CACA,sC,CACA,W,CAMJ,G,CAEI,6B,CACA,oC,CAGJ,M,CACI,iB,CAEA,oB,CAGJ,W,CACI,a,CACA,oB,CACA,kB,CAGJ,iB,CAAmB,W,CAInB,K,CACI,Y,CACA,U,CACA,oD,CAIJ,I,CA7BA,G,CAMA,M,CAwBI,Y,CADJ,I,CAEI,a,CACA,kB,CACA,c,CACA,gB,CACA,Q,CACA,gB,CAGI,I,CAAR,M,CAKI,M,CALI,I,CAAM,M,CAAQ,M,CAAQ,M,CAAQ,M,CAAO,M,CAA7C,M,CACI,Y,CACA,qB,CACA,6B,CACA,mB,CAEA,a,CACA,c,CAGJ,M,CAAQ,gB,CACR,M,CAAQ,gB,CACR,M,CAAQ,gB,CACR,M,CAAQ,gB,CACR,M,CAAQ,gB,CAIR,M,CAAQ,Y,CACR,O,CAAS,c,CACT,M,CAAQ,W,CACR,K,CAAO,U,CACP,O,CAAS,iB,CACT,M,CAAQ,U,CAAW,a,CAAe,U,CAClC,K,CAAO,U,CAAa,W,CACpB,Q,CAAU,4B,CAA+B,kB,CAAqB,0B,CAC9D,U,CAAY,iC,CACZ,O,CAAS,6B,CACT,Q,CAAU,oB,CACV,O,CAAS,mB,CACT,M,CAAQ,Q,CAAW,S,CAGnB,G,CAFA,S,CAEK,iB,CAFL,S,CAAW,kB,CAEX,G,CAAwB,4B,CAAgC,+B,CACxD,G,CAAK,iB,CAAmB,4B,CAAgC,gC,CACxD,Q,CAAU,iC,CACV,U,CAAY,Q,CACZ,W,CAAa,S,CACb,U,CAAY,Q,CACZ,S,CAAW,iB","file":"src/stylelite.css","sourcesContent":["/*! Stylelite v:0.6.0 | MIT LICENSE | https://github.com/n2geoff/stylelite */\r\n:root {\r\n --space: 1rem;\r\n --size: 1rem;\r\n --radius: 0rem;\r\n --fg: #17202A;\r\n --bg: #FDFEFE;\r\n --mg: #99A3A4;\r\n\r\n --white: #FFF;\r\n --black: #000;\r\n --gray: #DCDCDC;\r\n\r\n --light: #f1f1f1;\r\n --dark: #222;\r\n\r\n --theme: steelblue;\r\n\r\n --primary: #1F618D;\r\n --warning: #B7950B;\r\n --danger: #C0392B;\r\n --success: #1E8449;\r\n --default: #EEE;\r\n}\r\n\r\n[data-theme=dark] {\r\n --mg: #99A3A4;;\r\n --bg: #17202A;\r\n --fg: #EAECEE;\r\n}\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 margin: 0;\r\n padding: 0;\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 box-sizing: border-box;\r\n padding: 0;\r\n}\r\n\r\ndiv, input, button, textarea, select {margin-bottom: .25rem;}\r\n\r\np {margin: .5rem 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\nlabel {\r\n display: inline;\r\n font-weight: 600;\r\n color: var(--dark);\r\n padding: .5rem 0;\r\n vertical-align: top;\r\n}\r\n\r\nmain {\r\n margin: 0 auto;\r\n padding: var(--space);\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\ntable.striped tbody>:nth-child(2n-1) {\r\n background: #f5f5f5;\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.condensed * {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(--space) 0;\r\n color: var(--black);\r\n background: var(--default);\r\n padding: var(--space);\r\n}\r\n\r\nblockquote.primary {background: #EBF5FB; color: var(--primary); border: 1px solid var(--primary)}\r\nblockquote.danger {background: #FDEDEC; color: var(--danger); border: 1px solid var(--danger)}\r\nblockquote.warn {background: #FEF9E7; color: var(--warning) ; border: 1px solid var(--warning)}\r\nblockquote.success {background: #EAFAF1; color: var(--success); border: 1px solid var(--success)}\r\nblockquote.default {background: #EEE; color: var(--dark); border: 1px solid var(--dark)}\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 margin: var(--space) 0;\r\n padding-bottom: calc(var(--space) / 2);\r\n text-transform: capitalize;\r\n color: var(--fg);\r\n\r\n color: var(--theme);\r\n}\r\n\r\nh1 {\r\n font-size: 2.2rem;\r\n}\r\n\r\nh2 {font-size: 1.8rem}\r\nh3 {font-size: 1.4rem;margin: .5rem 0}\r\nh4 {font-size: 1.2rem; margin: .25rem 0}\r\nh5 {font-size: 1rem; margin: .25rem 0}\r\nh6 {font-size: .9rem; margin: .25rem 0}\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 {\r\n border: 1px solid rgba(0,0,0,.125);\r\n background: var(--default);\r\n padding: var(--space);\r\n}\r\n\r\n/* Forms */\r\n\r\ndetails {\r\n margin: var(--space) 0;\r\n color: var(--black);\r\n cursor: pointer;\r\n}\r\n\r\ndetails[open] {\r\n background-color: var(--default);\r\n margin-bottom: var(--space);\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(--default);\r\n border: 1px solid var(--theme);\r\n}\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\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 opacity: .5;\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\na.button, button {\r\n background: var(--theme);\r\n color: var(--white);\r\n}\r\n\r\nbutton.default {\r\n background: var(--default);\r\n color: var(--black);\r\n}\r\n\r\nbutton.primary {\r\n background: var(--primary);\r\n color: var(--white);\r\n}\r\n\r\nbutton.warning {\r\n background: var(--warning);\r\n color: var(--white);\r\n}\r\n\r\nbutton.danger {\r\n background: var(--danger);\r\n color: var(--white);\r\n}\r\n\r\nbutton.success {\r\n background: var(--success);\r\n color: var(--white);\r\n}\r\n\r\na.button:hover, button:hover, input[type=\"reset\"]:hover,input[type=\"submit\"]:hover {\r\n background: var(--dark);\r\n border: 2px solid var(--theme);\r\n color: var(--light);\r\n cursor: pointer;\r\n}\r\n\r\nselect:disabled, textarea:disabled,input:disabled {\r\n color: #404040;\r\n background: #EBEDEF;\r\n cursor: not-allowed;\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(--space);\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(--space), 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(--space), 2rem);\r\n cursor: text;\r\n color: var(--fg);\r\n}\r\n\r\n/* Navigation */\r\n\r\nnav {\r\n display: flex;\r\n justify-content: space-between;\r\n border-bottom: 1px solid var(--theme);\r\n}\r\n\r\nnav > ul {\r\n margin: 0 0 0 -2rem;\r\n display: flex;\r\n list-style-type: none;\r\n}\r\n\r\nnav ul li a {\r\n padding: .5rem;\r\n text-decoration: none;\r\n vertical-align: sub;\r\n}\r\n\r\nnav ul li a:hover {opacity: .75;}\r\n\r\n/* Grid System */\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 /* padding: 0; */\r\n}\r\n\r\n.row {\r\n display: flex;\r\n flex: 0 1 auto;\r\n flex-direction: row;\r\n flex-wrap: wrap;\r\n column-gap: .5rem;\r\n margin:0;\r\n padding: .25rem 0;\r\n}\r\n\r\n.row>*, .col, .col-1, .col-2, .col-3, .col-4,.col-5 {\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: space-between;\r\n align-items: stretch;\r\n flex: 1;\r\n padding: .5rem;\r\n max-width: 100%;\r\n}\r\n\r\n.col-1 {flex: 1 !important;}\r\n.col-2 {flex: 2 !important;}\r\n.col-3 {flex: 3 !important;}\r\n.col-4 {flex: 4 !important;}\r\n.col-5 {flex: 5 !important;}\r\n\r\n/* Utilities */\r\n\r\n.group {display: flex;}\r\n.cursor {cursor: pointer;}\r\n.right {float:right}\r\n.left {float:left}\r\n.center {text-align: center;}\r\n.clear {content:'';display: table;clear:both}\r\n.fill {width: 100%; height: 100%}\r\n.outline {background-color: transparent; color: var(--theme); border: 1px solid var(--fg)}\r\n.underline {border-bottom: 1px solid var(--mg)}\r\n.border {border: 1px solid var(--theme)}\r\n.padding {padding: var(--space)}\r\n.margin {margin: var(--space)}\r\n.title {margin: 0; padding:0}\r\n.subtitle {margin-top: -.25rem; font-size: smaller};\r\n.spaceless {margin: 0; padding:0}\r\n.sm {font-size: smaller;height: calc(var(--size) * 1.5);padding: 0 calc(var(--size)/ .75);}\r\n.lg {font-size: x-large;height: calc(var(--size) * 4.5);padding: 0 calc(var(--size) / 1.25);}\r\n.rounded {border-radius: calc(var(--size) / 4);}\r\n.no-border {border: none}\r\n.no-padding {padding: 0}\r\n.no-margin {margin: 0}\r\n.no-theme {--theme: var(--fg)}\r\n"]}
\ No newline at end of file
diff --git a/dist/stylelite.min.css b/dist/stylelite.min.css
index 92f4c7b..cda369a 100644
--- a/dist/stylelite.min.css
+++ b/dist/stylelite.min.css
@@ -1,3 +1,3 @@
-/*! Stylelite v:0.5.0 | MIT LICENSE | https://github.com/n2geoff/stylelite */
-:root{--space:1rem;--size:1.1rem;--radius:0rem;--fg:#17202A;--bg:#FDFEFE;--mg:#ABB2B9}[data-theme=dark]{--mg:#ABB2B9;--bg:#17202A;--fg:#FDFEFE}*,:after,:before{box-sizing:border-box}body,html,table{background:var(--bg)}body,html{color:var(--fg);margin:0;font-family:Verdana,Arial,Helvetica,sans-serif;font-size:var(--size);letter-spacing:.0625em;line-height:calc(var(--size)*1.5);box-sizing:border-box;padding:0}audio,embed,iframe,img,object,video{height:auto;max-width:100%;border:0}blockquote,main{padding:var(--space)}main{margin:0 auto;height:100vh;max-width:1140px}li,ol,ul{margin:0 calc(var(--space)*.72);padding:0}table{border-collapse:collapse;border-spacing:0;width:100%}th{text-align:left}td,th{padding:calc(var(--space)/2.4);border-bottom:1px solid var(--mg)}blockquote{border-left:calc(var(--space)/2) solid var(--fg);color:var(--fg);background:var(--mg)}code{font-family:monospace}blockquote code,button,details,details code{color:var(--bg)}hr{border:1px solid}h1,h2,h3,h4,h5,h6{margin:var(--space) 0;padding-bottom:calc(var(--space)/2);text-transform:capitalize}h1{font-size:calc(var(--size)*2)}a,code,hr,nav ul li a:hover{color:var(--mg)}a:hover,h1{color:var(--fg)}article,section{margin-top:calc(var(--space)*1.2);padding-bottom:var(--space)}blockquote,details{margin:var(--space) 0}details{cursor:pointer}details[open]{margin-bottom:var(--space)}details>*{padding:calc(var(--space)/2);border-top:1px solid var(--bg)}details[open],summary{background-color:var(--mg)}button{text-transform:uppercase;width:initial;background:var(--fg)}button,input,input[type=reset],input[type=submit]{display:inline-block;border-radius:var(--radius)}button,input{outline:0;box-sizing:border-box;font-size:var(--size);background:var(--bg);height:calc(var(--size)*3);border:1px solid var(--mg);padding:clamp(.5rem,var(--space),2rem);margin-bottom:var(--space);margin-right:var(--space)}input{color:var(--fg);width:100%}input[type=reset],input[type=submit]{text-transform:uppercase;width:initial;background:var(--fg);color:var(--bg)}button:hover,input[type=reset]:hover,input[type=submit]:hover{background:var(--mg);color:var(--fg);cursor:pointer}input:disabled{background:var(--mg);color:var(--bg);cursor:not-allowed}input:focus,select:focus,textarea:focus{border:2px solid var(--mg)}input[type=checkbox],input[type=radio]{display:inline-block;padding:0;margin:0 .5rem;width:calc(var(--size)*.8);height:calc(var(--size)*.8)}select,textarea{display:inline-block;outline:0;font-size:var(--size);height:calc(var(--size)*3);width:100%;background:var(--bg);border-radius:var(--radius);padding:0 var(--space);margin-bottom:var(--space);border:1px solid var(--mg);color:var(--fg)}select{cursor:pointer;background:var(--bg) no-repeat 100%;padding:0 clamp(.5rem,var(--space),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(--space),2rem);cursor:text}nav{justify-content:space-between;padding:.5rem 1rem;background-color:var(--fg);color:var(--bg)}nav ul{list-style-type:none}nav ul li a{color:var(--bg);text-decoration:none}.grid{display:grid;gap:var(--space);grid-template-columns:repeat(auto-fit,minmax(0,1fr))}.row,nav,nav ul{display:flex}.row{flex:0 1 auto;flex-direction:row;flex-wrap:wrap;margin:0}.col,.row>*{flex:1}.col,.col-1,.col-2,.col-3,.col-4,.col-5,.row>*{display:flex;flex-direction:column;justify-content:space-between;align-items:stretch;box-sizing:border-box;max-width:100%}.col-1{flex:1!important}.col-2{flex:2!important}.col-3{flex:3!important}.col-4{flex:4!important}.col-5{flex:5!important}.right{float:right}.left{float:left}.center{text-align:center}.clear{content:'';display:table;clear:both}.fill{width:100%;height:100%}.outline{background-color:transparent;color:var(--fg);border:1px solid var(--fg)}.underline{border-bottom:1px solid var(--mg)}.border{border:1px solid var(--mg)}.content{padding:var(--space)}.subtitle{margin-top:calc(var(--size)*-1);margin-bottom:var(--space);font-size:smaller}.sm{font-size:small;height:calc(var(--size)*1.5);padding:0 calc(var(--size)/.75)}.lg{font-size:x-large;height:calc(var(--size)*4.5);padding:0 calc(var(--size)/1.25)}
+/*! Stylelite v:0.6.0 | MIT LICENSE | https://github.com/n2geoff/stylelite */
+:root{--space:1rem;--size:1rem;--radius:0rem;--fg:#17202A;--bg:#FDFEFE;--mg:#99A3A4;--white:#FFF;--black:#000;--gray:#DCDCDC;--light:#f1f1f1;--dark:#222;--theme:steelblue;--primary:#1F618D;--warning:#B7950B;--danger:#C0392B;--success:#1E8449;--default:#EEE}[data-theme=dark]{--mg:#99A3A4;--bg:#17202A;--fg:#EAECEE}*,:after,:before{box-sizing:border-box}body,html,table{background:var(--bg)}body,html{color:var(--fg);accent-color:var(--theme);margin:0;font-family:system-ui,sans-serif;font-size:16px;letter-spacing:.0125em;line-height:1.5rem;box-sizing:border-box;padding:0}button,div,input,select,textarea{margin-bottom:.25rem}p{margin:.5rem 0}audio,embed,iframe,img,object,video{height:auto;max-width:100%;border:0}label{display:inline;font-weight:600;color:var(--dark);padding:.5rem 0;vertical-align:top}main{margin:0 auto;padding:var(--space);max-width:1140px}table{border-collapse:collapse;border-spacing:0;width:100%}table>thead>tr>th{border-bottom:2px solid var(--theme)}table.striped tbody>:nth-child(2n-1){background:#f5f5f5}th{text-align:left}td,th{padding:.5rem;border-bottom:1px solid var(--theme)}table.condensed *{padding:0}fieldset,legend{background:var(--bg);padding:1rem;border:1px solid var(--theme)}legend{font-size:larger;font-weight:600;color:var(--theme);display:block;width:fit-content;padding:.25rem .5rem;margin:0;line-height:inherit}blockquote,details,h1,h2,h3,h4,h5,h6{margin:var(--space)0;color:var(--black)}blockquote{background:var(--default);padding:var(--space)}blockquote.primary{background:#ebf5fb;color:var(--primary);border:1px solid var(--primary)}blockquote.danger{background:#fdedec;color:var(--danger);border:1px solid var(--danger)}blockquote.warn{background:#fef9e7;color:var(--warning);border:1px solid var(--warning)}blockquote.success{background:#eafaf1;color:var(--success);border:1px solid var(--success)}blockquote.default{background:#eee;color:var(--dark);border:1px solid var(--dark)}hr{border:1px solid}h1,h2,h3,h4,h5,h6{padding-bottom:calc(var(--space)/2);text-transform:capitalize;color:var(--theme)}h1{font-size:2.2rem}h2{font-size:1.8rem}h3{font-size:1.4rem;margin:.5rem 0}h4,h5,h6{font-size:1.2rem;margin:.25rem 0}h5,h6{font-size:1rem}h6{font-size:.9rem}a,hr{color:var(--theme)}a:hover{color:var(--dark)}article,section{margin-bottom:2rem}article{border:1px solid rgba(0,0,0,.125);background:var(--default);padding:var(--space)}details{cursor:pointer}details[open],summary{background-color:var(--default)}details[open]{margin-bottom:var(--space)}details>*{box-sizing:border-box;padding:.5rem 1rem}summary{color:var(--theme);height:40px;border:1px solid var(--theme)}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}button,input[type=reset],input[type=submit]{display:inline-block;border-radius:var(--radius);width:initial}button[disabled],button[disabled]:hover{opacity:.5;cursor:not-allowed;pointer-events:none}button.link{border:0;background:0 0;color:var(--theme)}a.button,button{background:var(--theme);color:var(--white)}button.default{background:var(--default);color:var(--black)}button.primary{background:var(--primary);color:var(--white)}button.warning{background:var(--warning);color:var(--white)}button.danger{background:var(--danger);color:var(--white)}button.success{background:var(--success);color:var(--white)}a.button:hover,button:hover,input[type=reset]:hover,input[type=submit]:hover{background:var(--dark);border:2px solid var(--theme);color:var(--light);cursor:pointer}input:disabled,select:disabled,textarea:disabled{color:#404040;background:#ebedef;cursor:not-allowed}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(--space);border:1px solid var(--theme);color:var(--fg)}select{cursor:pointer;background:var(--bg) no-repeat 100%;padding:0 clamp(.5rem,var(--space),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(--space),2rem);cursor:text}nav{justify-content:space-between;border-bottom:1px solid var(--theme)}nav>ul{margin:0 0 0-2rem;list-style-type:none}nav ul li a{padding:.5rem;text-decoration:none;vertical-align:sub}nav ul li a:hover{opacity:.75}.grid{display:grid;gap:.25rem;grid-template-columns:repeat(auto-fit,minmax(0,1fr))}.row,nav,nav>ul{display:flex}.row{flex:0 1 auto;flex-direction:row;flex-wrap:wrap;column-gap:.5rem;margin:0;padding:.25rem 0}.col,.row>*{flex:1}.col,.col-1,.col-2,.col-3,.col-4,.col-5,.row>*{display:flex;flex-direction:column;justify-content:space-between;align-items:stretch;padding:.5rem;max-width:100%}.col-1{flex:1!important}.col-2{flex:2!important}.col-3{flex:3!important}.col-4{flex:4!important}.col-5{flex:5!important}.group{display:flex}.cursor{cursor:pointer}.right{float:right}.left{float:left}.center{text-align:center}.clear{content:"";display:table;clear:both}.fill{width:100%;height:100%}.outline{background-color:transparent;color:var(--theme);border:1px solid var(--fg)}.underline{border-bottom:1px solid var(--mg)}.border{border:1px solid var(--theme)}.padding{padding:var(--space)}.margin{margin:var(--space)}.title{margin:0;padding:0}.sm,.subtitle{font-size:smaller}.subtitle{margin-top:-.25rem}.sm{height:calc(var(--size)*1.5);padding:0 calc(var(--size)/.75)}.lg{font-size:x-large;height:calc(var(--size)*4.5);padding:0 calc(var(--size)/1.25)}.rounded{border-radius:calc(var(--size)/4)}.no-border{border:0}.no-padding{padding:0}.no-margin{margin:0}.no-theme{--theme:var(--fg)}
/*# sourceMappingURL=stylelite.map */
\ No newline at end of file
diff --git a/examples/overview.html b/examples/overview.html
index f5102ab..12772f1 100644
--- a/examples/overview.html
+++ b/examples/overview.html
@@ -13,8 +13,18 @@
+
+
- Styles
+
+
+ STYLELITE
+ CSS
+
-
-
- Prefered theme
+ Preferred theme
Choose One
Light
@@ -178,13 +188,10 @@
+
-
- Remember me
+ Remember Me
-
-
-
@@ -194,17 +201,14 @@
Buttons
- Button
- Default
- Primary
+ Theme
Disabled
+ Default
Link
-
Default
Primary
-
Info
Warning
Danger
Success
@@ -244,22 +248,17 @@
Grid System
-
+
The flex-based grid system dynamicly divides content on the number of
- child elements under
row
, be that a plain
div
(auto) or
col-*
+ child elements under
row
, be that a plain
div
(auto) or
col-*
.
-
- column sizes range from col-1
to col-5
-
-
-
- a col-5
is 5x col-1
-
+ Column sizes range from
col-1
to
col-5
+ a
col-5
is 5x
col-1
if col-*
is not defined on a div
, it is considered a col-1
-
+
auto
@@ -320,11 +319,21 @@
Components
-
-
- Content
-
-
+
+
+
+ Modal
+
+
+ Something
+
+
diff --git a/package.json b/package.json
index 0d1fd2a..8163274 100644
--- a/package.json
+++ b/package.json
@@ -1,9 +1,9 @@
{
"name": "stylelite",
- "version": "0.5.0",
- "description": "css for minimalists",
+ "version": "0.6.0",
+ "description": "a class-lite stylesheet on the light-side",
"scripts": {
- "build": "npx csso .\\src\\stylelite.css --comments first-exclamation --output .\\dist\\stylelite.min.css -s .\\dist\\stylelite.map"
+ "build": "npx csso-cli .\\src\\stylelite.css --comments first-exclamation --output .\\dist\\stylelite.min.css -s .\\dist\\stylelite.map"
},
"repository": {
"type": "git",
@@ -24,7 +24,7 @@
},
"homepage": "https://n2geoff.github.io/stylelite",
"devDependencies": {
- "csso-cli": "^3.0.0"
+ "csso-cli": "^4.0.2"
},
"dependencies": {}
}
diff --git a/src/stylelite.css b/src/stylelite.css
index 1a7d55b..086108a 100644
--- a/src/stylelite.css
+++ b/src/stylelite.css
@@ -1,4 +1,4 @@
-/*! Stylelite v:0.5.0 | MIT LICENSE | https://github.com/n2geoff/stylelite */
+/*! Stylelite v:0.6.0 | MIT LICENSE | https://github.com/n2geoff/stylelite */
:root {
--space: 1rem;
--size: 1rem;
@@ -36,9 +36,10 @@
html,body {
background: var(--bg);
color: var(--fg);
+ accent-color: var(--theme);
margin: 0;
padding: 0;
- font-family: -apple-system, system-ui, Roboto, sans-serif;
+ font-family: system-ui, sans-serif;
font-size: 16px;
letter-spacing: 0.0125em;
line-height: 1.5rem;
@@ -46,18 +47,27 @@ html,body {
padding: 0;
}
+div, input, button, textarea, select {margin-bottom: .25rem;}
+
+p {margin: .5rem 0}
+
img,embed,iframe,object,audio,video {
height: auto;
max-width: 100%;
border: none;
}
-label {font-weight: 600;color: var(--dark)}
+label {
+ display: inline;
+ font-weight: 600;
+ color: var(--dark);
+ padding: .5rem 0;
+ vertical-align: top;
+}
main {
margin: 0 auto;
padding: var(--space);
- height: 100vh;
max-width: 1140px;
}
@@ -138,34 +148,21 @@ h1 {
}
h2 {font-size: 1.8rem}
-h3 {font-size: 1.4rem}
-h4 {font-size: 1.2rem}
-h5 {font-size: 1rem}
-h6 {font-size: .9rem}
+h3 {font-size: 1.4rem;margin: .5rem 0}
+h4 {font-size: 1.2rem; margin: .25rem 0}
+h5 {font-size: 1rem; margin: .25rem 0}
+h6 {font-size: .9rem; margin: .25rem 0}
a {color: var(--theme)}
a:hover {color: var(--dark);}
section, article {
- margin-bottom: calc(var(--space) * 1.2);
- padding-bottom: var(--space);
+ margin-bottom: 2rem;
}
article {
border: 1px solid rgba(0,0,0,.125);
background: var(--default);
-}
-
-article main {
- height: auto;
- padding: var(--space);
-}
-
-article header {
- padding: var(--space);
-}
-
-article footer {
padding: var(--space);
}
@@ -211,6 +208,14 @@ a.button, button, input {
input[type=color] {padding: .25rem}
+input[type="checkbox"],
+input[type="radio"]{
+ padding: 0;
+ width: 1.1rem;
+ height: 1.1rem;
+ margin-right: .5rem;
+}
+
button, input[type="reset"],input[type="submit"] {
display: inline-block;
border-radius: var(--radius);
@@ -278,14 +283,6 @@ select:focus,textarea:focus,input:focus {
option { line-height: 1rem; vertical-align: center;}
-input[type="checkbox"],input[type="radio"] {
- display: inline-block;
- padding: 0;
- margin: 0 .5rem;
- width: calc(var(--size) * .8);
- height: calc(var(--size) * .8);
-}
-
select,textarea {
display: inline-block;
outline: none;
@@ -332,7 +329,6 @@ nav > ul {
margin: 0 0 0 -2rem;
display: flex;
list-style-type: none;
-
}
nav ul li a {
@@ -347,9 +343,9 @@ nav ul li a:hover {opacity: .75;}
.grid {
display: grid;
- gap: var(--space);
+ gap: .25rem;
grid-template-columns: repeat(auto-fit, minmax(0%, 1fr));
- padding: .4rem;
+ /* padding: 0; */
}
.row {
@@ -357,6 +353,7 @@ nav ul li a:hover {opacity: .75;}
flex: 0 1 auto;
flex-direction: row;
flex-wrap: wrap;
+ column-gap: .5rem;
margin:0;
padding: .25rem 0;
}
@@ -366,9 +363,8 @@ nav ul li a:hover {opacity: .75;}
flex-direction: column;
justify-content: space-between;
align-items: stretch;
- box-sizing: border-box;
flex: 1;
- padding: calc(var(--size) / 2);
+ padding: .5rem;
max-width: 100%;
}
@@ -393,9 +389,9 @@ nav ul li a:hover {opacity: .75;}
.padding {padding: var(--space)}
.margin {margin: var(--space)}
.title {margin: 0; padding:0}
-.subtitle {margin-top: -.25rem; font-size: small};
+.subtitle {margin-top: -.25rem; font-size: smaller};
.spaceless {margin: 0; padding:0}
-.sm {font-size: small;height: calc(var(--size) * 1.5);padding: 0 calc(var(--size)/ .75);}
+.sm {font-size: smaller;height: calc(var(--size) * 1.5);padding: 0 calc(var(--size)/ .75);}
.lg {font-size: x-large;height: calc(var(--size) * 4.5);padding: 0 calc(var(--size) / 1.25);}
.rounded {border-radius: calc(var(--size) / 4);}
.no-border {border: none}