From 892c8921142a382b28641825b78b8247ef55ad3d Mon Sep 17 00:00:00 2001 From: Geoff Doty Date: Tue, 14 Jun 2022 21:38:32 -0400 Subject: [PATCH] first build --- .gitignore | 3 + dist/stylelite.map | 1 + dist/stylelite.min.css | 3 + package-lock.json | 583 +++++++++++++++++++++++++++++++++++++++++ package.json | 29 ++ src/stylelite.css | 252 ++++++++++++++++++ 6 files changed, 871 insertions(+) create mode 100644 .gitignore create mode 100644 dist/stylelite.map create mode 100644 dist/stylelite.min.css create mode 100644 package-lock.json create mode 100644 package.json create mode 100644 src/stylelite.css diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..5180d57 --- /dev/null +++ b/.gitignore @@ -0,0 +1,3 @@ +node_modules/ +.vscode +sample.html \ No newline at end of file diff --git a/dist/stylelite.map b/dist/stylelite.map new file mode 100644 index 0000000..6cb9c65 --- /dev/null +++ b/dist/stylelite.map @@ -0,0 +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,CAIG,I,CAAL,I,CAHI,qB,CAGC,I,CAAL,I,CAEI,e,CACA,Q,CAEA,8C,CACA,qB,CACA,sB,CACA,iC,CAEA,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,CA5BC,I,CAuFL,M,CAvFA,I,CAuFQ,K,CAxDR,K,CA6DI,oB,CA7DJ,K,CAEI,wB,CACA,gB,CACA,U,CAGJ,E,CACI,e,CAGD,E,CAJH,E,CAKI,8B,CACA,iC,CAGJ,U,CACI,qB,CACA,gD,CACA,e,CACA,oB,CAIJ,I,CASA,E,CACI,e,CAVJ,I,CAEI,qB,CAGJ,e,CACI,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,CAIK,O,CAAT,O,CACI,iC,CACA,2B,CAKJ,M,CAAQ,K,CAEJ,S,CACA,qB,CACA,qB,CAIA,0B,CACA,0B,CAEA,sC,CACA,0B,CACA,yB,CAzBJ,E,CAYQ,K,CAMJ,e,CANI,K,CACJ,a,CAMA,U,CAGA,2B,CAVJ,M,CAgBQ,iB,CAAoB,kB,CACxB,oB,CACA,wB,CACA,2B,CACA,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,K,CACI,Y,CACA,gB,CACA,oD,CAGJ,I,CACI,Y,CACA,a,CACA,kB,CACA,c,CACA,Q,CAEM,I,CAAV,Q,CAMI,M,CANM,I,CAAM,M,CAAQ,M,CAAQ,M,CAAQ,M,CAAO,M,CAA/C,Q,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,M,CAAQ,U,CAAW,a,CAAe,U,CAClC,K,CAAO,U,CAAa,W,CACpB,Q,CAAU,4B,CAA+B,e,CAAkB,0B,CAC3D,O,CAAS,0B,CACT,U,CAAY,iC,CACZ,O,CAAS,iB,CACT,Q,CAAU,qB,CACV,S,CAAW,+B,CAIX,G,CACI,e,CACA,4B,CACA,+B,CAEJ,G,CACI,iB,CACA,4B,CACA,gC","file":"src/stylelite.css","sourcesContent":["/*! Stylelite v:0.1.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 {\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\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\nbutton, input {\r\n display: 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/* 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>div, .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.clear {content:'';display: table;clear:both}\r\n.full {width: 100%; height: 100%}\r\n.outline {background-color: transparent; color: var(--fg); border: 1px solid var(--fg)}\r\n.border {border: 1px solid var(--mg)}\r\n.underline {border-bottom: 1px solid var(--mg)}\r\n.center {text-align: center;}\r\n.content {margin: var(--space) 0}\r\n.subtitle {margin-top: calc(var(--size) * -1)};\r\n.spaceless {margin: 0; padding:0}\r\n\r\n/* experiment */\r\n.sm {\r\n font-size: small;\r\n height: calc(var(--size) * 1.5);\r\n padding: 0 calc(var(--size) / .75);\r\n}\r\n.lg {\r\n font-size: x-large;\r\n height: calc(var(--size) * 4.5);\r\n padding: 0 calc(var(--size) / 1.25);\r\n}"]} \ No newline at end of file diff --git a/dist/stylelite.min.css b/dist/stylelite.min.css new file mode 100644 index 0000000..8831b89 --- /dev/null +++ b/dist/stylelite.min.css @@ -0,0 +1,3 @@ +/*! Stylelite v:0.1.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,body,html{box-sizing:border-box}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);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}body,button,html,input,table{background:var(--bg)}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{margin:var(--space) 0;border-left:calc(var(--space)/2) solid var(--fg);color:var(--fg);background:var(--mg)}code,hr{color:var(--mg)}code{font-family:monospace}blockquote 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)}article,section{margin-top:calc(var(--space)*1.2);padding-bottom:var(--space)}button,input{outline:0;box-sizing:border-box;font-size:var(--size);height:calc(var(--size)*3);border:1px solid var(--mg);padding:clamp(.5rem,var(--space),2rem);margin-bottom:var(--space);margin-right:var(--space)}h1,input{color:var(--fg)}input{display:block;width:100%;border-radius:var(--radius)}button,input[type=reset],input[type=submit]{display:inline-block;text-transform:uppercase;border-radius:var(--radius);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}.grid{display:grid;gap:var(--space);grid-template-columns:repeat(auto-fit,minmax(0,1fr))}.row{display:flex;flex:0 1 auto;flex-direction:row;flex-wrap:wrap;margin:0}.col,.row>div{flex:1}.col,.col-1,.col-2,.col-3,.col-4,.col-5,.row>div{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}.clear{content:'';display:table;clear:both}.full{width:100%;height:100%}.outline{background-color:transparent;color:var(--fg);border:1px solid var(--fg)}.border{border:1px solid var(--mg)}.underline{border-bottom:1px solid var(--mg)}.center{text-align:center}.content{margin:var(--space) 0}.subtitle{margin-top:calc(var(--size)*-1)}.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)} +/*# sourceMappingURL=stylelite.map */ \ No newline at end of file diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..adc0b5f --- /dev/null +++ b/package-lock.json @@ -0,0 +1,583 @@ +{ + "name": "stylelite", + "version": "0.1.0", + "lockfileVersion": 2, + "requires": true, + "packages": { + "": { + "name": "stylelite", + "version": "0.1.0", + "license": "MIT", + "devDependencies": { + "csso-cli": "^3.0.0" + } + }, + "node_modules/ansi-regex": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz", + "integrity": "sha512-TIGnTpdo+E3+pCyAluZvtED5p5wCqLdezCyhPZzKPcxvFplEt4i+W7OONCKgeZFT3+y5NZZfOOS/Bdcanm1MYA==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/ansi-styles": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz", + "integrity": "sha512-kmCevFghRiWM7HB5zTPULl4r9bVFSWjz62MhqizDGUrq2NWuNMQyuv4tHHoKJHs69M/MF64lEcHdYIocrdWQYA==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/anymatch": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz", + "integrity": "sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==", + "dev": true, + "dependencies": { + "normalize-path": "^3.0.0", + "picomatch": "^2.0.4" + }, + "engines": { + "node": ">= 8" + } + }, + "node_modules/binary-extensions": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz", + "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==", + "dev": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/braces": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz", + "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==", + "dev": true, + "dependencies": { + "fill-range": "^7.0.1" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/chalk": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz", + "integrity": "sha512-U3lRVLMSlsCfjqYPbLyVv11M9CPW4I728d6TCKMAOJueEeB9/8o+eSsMnxPJD+Q+K909sdESg7C+tIkoH6on1A==", + "dev": true, + "dependencies": { + "ansi-styles": "^2.2.1", + "escape-string-regexp": "^1.0.2", + "has-ansi": "^2.0.0", + "strip-ansi": "^3.0.0", + "supports-color": "^2.0.0" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/chokidar": { + "version": "3.5.3", + "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz", + "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==", + "dev": true, + "funding": [ + { + "type": "individual", + "url": "https://paulmillr.com/funding/" + } + ], + "dependencies": { + "anymatch": "~3.1.2", + "braces": "~3.0.2", + "glob-parent": "~5.1.2", + "is-binary-path": "~2.1.0", + "is-glob": "~4.0.1", + "normalize-path": "~3.0.0", + "readdirp": "~3.6.0" + }, + "engines": { + "node": ">= 8.10.0" + }, + "optionalDependencies": { + "fsevents": "~2.3.2" + } + }, + "node_modules/clap": { + "version": "1.2.3", + "resolved": "https://registry.npmjs.org/clap/-/clap-1.2.3.tgz", + "integrity": "sha512-4CoL/A3hf90V3VIEjeuhSvlGFEHKzOz+Wfc2IVZc+FaUgU0ZQafJTP49fvnULipOPcAfqhyI2duwQyns6xqjYA==", + "dev": true, + "dependencies": { + "chalk": "^1.1.3" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/css-tree": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.1.3.tgz", + "integrity": "sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==", + "dev": true, + "dependencies": { + "mdn-data": "2.0.14", + "source-map": "^0.6.1" + }, + "engines": { + "node": ">=8.0.0" + } + }, + "node_modules/csso": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/csso/-/csso-4.2.0.tgz", + "integrity": "sha512-wvlcdIbf6pwKEk7vHj8/Bkc0B4ylXZruLvOgs9doS5eOsOpuodOV2zJChSpkp+pRpYQLQMeF04nr3Z68Sta9jA==", + "dev": true, + "dependencies": { + "css-tree": "^1.1.2" + }, + "engines": { + "node": ">=8.0.0" + } + }, + "node_modules/csso-cli": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/csso-cli/-/csso-cli-3.0.0.tgz", + "integrity": "sha512-j0ytVZ8qHXcFnR3HOvfH8RWOeHtlqwt97mYe32AnJ2yG6noqV0Jsn8OwOQq8wpdavkHr8JOx6drRtY2HoKLjqw==", + "dev": true, + "dependencies": { + "chokidar": "^3.0.0", + "clap": "^1.0.9", + "csso": "^4.0.1", + "source-map": "^0.6.1" + }, + "bin": { + "csso": "bin/csso" + }, + "engines": { + "node": ">=8.0.0" + } + }, + "node_modules/escape-string-regexp": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz", + "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==", + "dev": true, + "engines": { + "node": ">=0.8.0" + } + }, + "node_modules/fill-range": { + "version": "7.0.1", + "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz", + "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==", + "dev": true, + "dependencies": { + "to-regex-range": "^5.0.1" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/fsevents": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", + "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==", + "dev": true, + "hasInstallScript": true, + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": "^8.16.0 || ^10.6.0 || >=11.0.0" + } + }, + "node_modules/glob-parent": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", + "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==", + "dev": true, + "dependencies": { + "is-glob": "^4.0.1" + }, + "engines": { + "node": ">= 6" + } + }, + "node_modules/has-ansi": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-2.0.0.tgz", + "integrity": "sha512-C8vBJ8DwUCx19vhm7urhTuUsr4/IyP6l4VzNQDv+ryHQObW3TTTp9yB68WpYgRe2bbaGuZ/se74IqFeVnMnLZg==", + "dev": true, + "dependencies": { + "ansi-regex": "^2.0.0" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/is-binary-path": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz", + "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==", + "dev": true, + "dependencies": { + "binary-extensions": "^2.0.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/is-extglob": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz", + "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/is-glob": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz", + "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==", + "dev": true, + "dependencies": { + "is-extglob": "^2.1.1" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/is-number": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz", + "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==", + "dev": true, + "engines": { + "node": ">=0.12.0" + } + }, + "node_modules/mdn-data": { + "version": "2.0.14", + "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz", + "integrity": "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==", + "dev": true + }, + "node_modules/normalize-path": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz", + "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/picomatch": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz", + "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==", + "dev": true, + "engines": { + "node": ">=8.6" + }, + "funding": { + "url": "https://github.com/sponsors/jonschlinkert" + } + }, + "node_modules/readdirp": { + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz", + "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==", + "dev": true, + "dependencies": { + "picomatch": "^2.2.1" + }, + "engines": { + "node": ">=8.10.0" + } + }, + "node_modules/source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/strip-ansi": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz", + "integrity": "sha512-VhumSSbBqDTP8p2ZLKj40UjBCV4+v8bUSEpUb4KjRgWk9pbqGF4REFj6KEagidb2f/M6AzC0EmFyDNGaw9OCzg==", + "dev": true, + "dependencies": { + "ansi-regex": "^2.0.0" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/supports-color": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz", + "integrity": "sha512-KKNVtd6pCYgPIKU4cp2733HWYCpplQhddZLBUryaAHou723x+FRzQ5Df824Fj+IyyuiQTRoub4SnIFfIcrp70g==", + "dev": true, + "engines": { + "node": ">=0.8.0" + } + }, + "node_modules/to-regex-range": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", + "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==", + "dev": true, + "dependencies": { + "is-number": "^7.0.0" + }, + "engines": { + "node": ">=8.0" + } + } + }, + "dependencies": { + "ansi-regex": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz", + "integrity": "sha512-TIGnTpdo+E3+pCyAluZvtED5p5wCqLdezCyhPZzKPcxvFplEt4i+W7OONCKgeZFT3+y5NZZfOOS/Bdcanm1MYA==", + "dev": true + }, + "ansi-styles": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz", + "integrity": "sha512-kmCevFghRiWM7HB5zTPULl4r9bVFSWjz62MhqizDGUrq2NWuNMQyuv4tHHoKJHs69M/MF64lEcHdYIocrdWQYA==", + "dev": true + }, + "anymatch": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz", + "integrity": "sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==", + "dev": true, + "requires": { + "normalize-path": "^3.0.0", + "picomatch": "^2.0.4" + } + }, + "binary-extensions": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz", + "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==", + "dev": true + }, + "braces": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz", + "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==", + "dev": true, + "requires": { + "fill-range": "^7.0.1" + } + }, + "chalk": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz", + "integrity": "sha512-U3lRVLMSlsCfjqYPbLyVv11M9CPW4I728d6TCKMAOJueEeB9/8o+eSsMnxPJD+Q+K909sdESg7C+tIkoH6on1A==", + "dev": true, + "requires": { + "ansi-styles": "^2.2.1", + "escape-string-regexp": "^1.0.2", + "has-ansi": "^2.0.0", + "strip-ansi": "^3.0.0", + "supports-color": "^2.0.0" + } + }, + "chokidar": { + "version": "3.5.3", + "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz", + "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==", + "dev": true, + "requires": { + "anymatch": "~3.1.2", + "braces": "~3.0.2", + "fsevents": "~2.3.2", + "glob-parent": "~5.1.2", + "is-binary-path": "~2.1.0", + "is-glob": "~4.0.1", + "normalize-path": "~3.0.0", + "readdirp": "~3.6.0" + } + }, + "clap": { + "version": "1.2.3", + "resolved": "https://registry.npmjs.org/clap/-/clap-1.2.3.tgz", + "integrity": "sha512-4CoL/A3hf90V3VIEjeuhSvlGFEHKzOz+Wfc2IVZc+FaUgU0ZQafJTP49fvnULipOPcAfqhyI2duwQyns6xqjYA==", + "dev": true, + "requires": { + "chalk": "^1.1.3" + } + }, + "css-tree": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.1.3.tgz", + "integrity": "sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==", + "dev": true, + "requires": { + "mdn-data": "2.0.14", + "source-map": "^0.6.1" + } + }, + "csso": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/csso/-/csso-4.2.0.tgz", + "integrity": "sha512-wvlcdIbf6pwKEk7vHj8/Bkc0B4ylXZruLvOgs9doS5eOsOpuodOV2zJChSpkp+pRpYQLQMeF04nr3Z68Sta9jA==", + "dev": true, + "requires": { + "css-tree": "^1.1.2" + } + }, + "csso-cli": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/csso-cli/-/csso-cli-3.0.0.tgz", + "integrity": "sha512-j0ytVZ8qHXcFnR3HOvfH8RWOeHtlqwt97mYe32AnJ2yG6noqV0Jsn8OwOQq8wpdavkHr8JOx6drRtY2HoKLjqw==", + "dev": true, + "requires": { + "chokidar": "^3.0.0", + "clap": "^1.0.9", + "csso": "^4.0.1", + "source-map": "^0.6.1" + } + }, + "escape-string-regexp": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz", + "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==", + "dev": true + }, + "fill-range": { + "version": "7.0.1", + "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz", + "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==", + "dev": true, + "requires": { + "to-regex-range": "^5.0.1" + } + }, + "fsevents": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", + "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==", + "dev": true, + "optional": true + }, + "glob-parent": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", + "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==", + "dev": true, + "requires": { + "is-glob": "^4.0.1" + } + }, + "has-ansi": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-2.0.0.tgz", + "integrity": "sha512-C8vBJ8DwUCx19vhm7urhTuUsr4/IyP6l4VzNQDv+ryHQObW3TTTp9yB68WpYgRe2bbaGuZ/se74IqFeVnMnLZg==", + "dev": true, + "requires": { + "ansi-regex": "^2.0.0" + } + }, + "is-binary-path": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz", + "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==", + "dev": true, + "requires": { + "binary-extensions": "^2.0.0" + } + }, + "is-extglob": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz", + "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==", + "dev": true + }, + "is-glob": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz", + "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==", + "dev": true, + "requires": { + "is-extglob": "^2.1.1" + } + }, + "is-number": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz", + "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==", + "dev": true + }, + "mdn-data": { + "version": "2.0.14", + "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz", + "integrity": "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==", + "dev": true + }, + "normalize-path": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz", + "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==", + "dev": true + }, + "picomatch": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz", + "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==", + "dev": true + }, + "readdirp": { + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz", + "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==", + "dev": true, + "requires": { + "picomatch": "^2.2.1" + } + }, + "source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "dev": true + }, + "strip-ansi": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz", + "integrity": "sha512-VhumSSbBqDTP8p2ZLKj40UjBCV4+v8bUSEpUb4KjRgWk9pbqGF4REFj6KEagidb2f/M6AzC0EmFyDNGaw9OCzg==", + "dev": true, + "requires": { + "ansi-regex": "^2.0.0" + } + }, + "supports-color": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz", + "integrity": "sha512-KKNVtd6pCYgPIKU4cp2733HWYCpplQhddZLBUryaAHou723x+FRzQ5Df824Fj+IyyuiQTRoub4SnIFfIcrp70g==", + "dev": true + }, + "to-regex-range": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", + "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==", + "dev": true, + "requires": { + "is-number": "^7.0.0" + } + } + } +} diff --git a/package.json b/package.json new file mode 100644 index 0000000..c85f110 --- /dev/null +++ b/package.json @@ -0,0 +1,29 @@ +{ + "name": "stylelite", + "version": "0.1.0", + "description": "css for minimalists", + "scripts": { + "build": "npx csso .\\src\\stylelite.css --comments first-exclamation --output .\\dist\\stylelite.min.css -s .\\dist\\stylelite.map " + }, + "repository": { + "type": "git", + "url": "git+https://github.com/n2geoff/stylelite.git" + }, + "keywords": [ + "css", + "stylesheet", + "classless", + "classlite" + ], + "author": "Geoff Doty", + "main": "dist/stylelite.min.css", + "license": "MIT", + "bugs": { + "url": "https://github.com/n2geoff/stylelite/issues" + }, + "homepage": "https://n2geoff.github.io/stylelite", + "devDependencies": { + "csso-cli": "^3.0.0" + }, + "dependencies": {} +} diff --git a/src/stylelite.css b/src/stylelite.css new file mode 100644 index 0000000..4df7338 --- /dev/null +++ b/src/stylelite.css @@ -0,0 +1,252 @@ +/*! Stylelite v:0.1.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; +} + +*,*:before,*:after { + box-sizing: border-box; +} + +html,body { + background: var(--bg); + color: var(--fg); + margin: 0; + padding: 0; + font-family: Verdana, Arial, Helvetica, sans-serif; + font-size: var(--size); + letter-spacing: 0.0625em; + line-height: calc(var(--size) * 1.5); + box-sizing: border-box; + padding: 0; +} + +img,embed,iframe,object,audio,video { + height: auto; + max-width: 100%; + border: none; +} + +main { + margin: 0 auto; + padding: var(--space); + height: 100vh; + max-width: 1140px; +} + +ul,ol,li { + margin: 0 calc(var(--space) *.72); + padding: 0 +} + +table { + background: var(--bg); + border-collapse: collapse; + border-spacing: 0; + width: 100%; +} + +th { + text-align: left; +} + +th,td { + padding: calc(var(--space) / 2.4); + border-bottom: 1px solid var(--mg); +} + +blockquote { + margin: var(--space) 0; + border-left: calc(var(--space) / 2) solid var(--fg); + color: var(--fg); + background: var(--mg); + padding: var(--space); +} + +code { + color: var(--mg); + font-family: monospace; +} + +blockquote code { + color: var(--bg); +} + +hr { + color: var(--mg); + 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); + color: var(--fg); +} + +section, article { + margin-top: calc(var(--space) * 1.2); + padding-bottom: var(--space); +} + +/* Forms */ + +button, input { + display: block; + outline: none; + box-sizing: border-box; + font-size: var(--size); + background: var(--bg); + color: var(--fg); + width: 100%; + height: calc(var(--size) * 3); + border: 1px solid var(--mg); + border-radius: var(--radius); + padding: clamp(.5rem, var(--space), 2rem); + margin-bottom: var(--space); + margin-right: var(--space); +} + +button, input[type="reset"],input[type="submit"] { + display: inline-block; + text-transform: uppercase; + border-radius: var(--radius); + width: initial; + background: var(--fg); + color: var(--bg); +} + +button { + 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; +} + +select:focus,textarea:focus,input: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: none; + font-size: var(--size); + height: calc(var(--size) * 3); + width: 100%; + border: 1px solid var(--mg); + color: var(--fg); + background: var(--bg); + border-radius: var(--radius); + padding: 0 var(--space); + margin-bottom: var(--space); + cursor: pointer; +} + +select { + background: var(--bg) no-repeat 100%; + color: var(--fg); + 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; + border: 1px solid var(--mg); + height: calc(var(--size) * 6rem);; + padding: clamp(.5rem, var(--space), 2rem); + cursor: text; + color: var(--fg); +} + +/* Grid System */ + +.grid { + display: grid; + gap: var(--space); + grid-template-columns: repeat(auto-fit, minmax(0%, 1fr)); +} + +.row { + display: flex; + flex: 0 1 auto; + flex-direction: row; + flex-wrap: wrap; + margin:0; +} +.row>div, .col, .col-1, .col-2, .col-3, .col-4,.col-5 { + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: stretch; + box-sizing: border-box; + flex: 1; + 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;} + +/* Utilities */ + +.right {float:right} +.left {float:left} +.clear {content:'';display: table;clear:both} +.full {width: 100%; height: 100%} +.outline {background-color: transparent; color: var(--fg); border: 1px solid var(--fg)} +.border {border: 1px solid var(--mg)} +.underline {border-bottom: 1px solid var(--mg)} +.center {text-align: center;} +.content {margin: var(--space) 0} +.subtitle {margin-top: calc(var(--size) * -1)}; +.spaceless {margin: 0; padding:0} + +/* experiment */ +.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); +} \ No newline at end of file