diff --git a/dist/scales.min.css b/dist/scales.min.css index 38979c6..885a950 100644 --- a/dist/scales.min.css +++ b/dist/scales.min.css @@ -1,2 +1,2 @@ -/* Scales CSS v:0.1 | MIT LICENSE | https://github.com/n2geoff/scales */ -:root{--theme-h:207;--theme-s:50%;--theme-l:50%;--theme:hsl(var(--theme-h), var(--theme-s), var(--theme-l));--muted:hsl(var(--theme-h), 15%, 15%);--font-family:sans-serif,"Roboto";--line-height:1.5;--font-weight:400;--font-size:20px;--border-color:var(--theme);--border-radius:0rem;--border-width:1px;--spacing:1rem}:root:not([data-theme=dark]),[data-theme=light]{--theme-light:hsl(var(--theme-h), var(--theme-s), calc(var(--theme-l) + 35%));--theme-dark:hsl(var(--theme-h), var(--theme-s), calc(var(--theme-l) - 35%));--background:hsl(var(--theme-h), 0%, 95%);--foreground:hsl(var(--theme-h), 0%, 5%);--muted:hsl(var(--theme-h), 15%, 75%)}[data-theme=dark]{--theme-light:hsl(var(--theme-h), var(--theme-s), calc(var(--theme-l) - 35%));--theme-dark:hsl(var(--theme-h), var(--theme-s), calc(var(--theme-l) + 35%));--background:hsl(var(--theme-h), 50%, 5%);--foreground:hsl(var(--theme-h), 20%, 90%)}*,:after,:before{box-sizing:border-box}body,html{background:var(--background);color:var(--foreground);margin:0;padding:0;font-family:var(--font-family);font-size:var(--font-size);font-weight:var(--font-weight);line-height:var(--line-height);box-sizing:border-box;padding:0}audio,embed,iframe,img,object,video{height:auto;max-width:100%;border:none}main{margin:calc((100vh / 25) * 1.5) calc((100vw / 25) * 1.5);padding:var(--spacing);height:100vh}table{background-color:var(--background);border-collapse:collapse;border-spacing:0;width:100%}tbody{border-top:2px solid var(--theme);border-top:2px solid var(--theme)}th{text-align:left;color:var(--theme-dark)}td,th{padding:calc(var(--spacing)/ 2);border-bottom:1px solid var(--theme)}a{color:var(--theme)}a:hover{color:var(--foreground)}blockquote{margin:var(--spacing) 0;border-left:calc(var(--spacing)/ 2) solid var(--theme-dark);background:hsl(var(--theme-h) var(--theme-s) var(--theme-l));color:var(--background);padding:var(--spacing)}code,kbd,pre{font-family:monospace;display:inline-block;white-space:pre;margin:0;padding:0}code{margin:0 calc(var(--spacing)/ 4);padding:0 calc(var(--spacing)/ 4);background:var(--background)}hr{color:var(--theme);border:1px solid}h1,h2,h3,h4,h5,h6{text-transform:capitalize}h1{font-size:calc(var(--font-size) * 2);color:var(--theme-dark)}h2{color:var(--theme)}h3{border-bottom:1px solid var(--theme)}small{color:var(--muted)}section{margin-bottom:var(--spacing)}article{padding:var(--spacing);background-color:var(--theme-light)}label{font-size:var(--font-size);font-weight:600;text-transform:capitalize;color:var(--foreground);margin:0 calc(var(--spacing)/ 2)}input{display:block;outline:0;box-sizing:border-box;font-size:var(--font-size);background-color:var(--background);color:var(--foreground);width:100%;height:calc(var(--font-size) * 3);border:1px solid var(--theme);border-radius:var(--border-radius);padding:var(--spacing);margin-bottom:var(--spacing);margin-right:var(--spacing)}input:disabled{background:var(--muted);color:var(--background);cursor:not-allowed}input[type=checkbox],input[type=radio]{display:inline-block;padding:0;margin:0;width:var(--spacing);height:var(--spacing)}input[type=submit]{font-size:var(--font-size);height:calc(var(--font-size) * 3);padding:var(--spacing) calc(var(--spacing)/ 2);margin:var(--spacing) 0;cursor:pointer}input[type=submit]{background-color:var(--theme);color:var(--background)}button,select,textarea{display:inline-block;outline:0;font-family:var(--font-family);font-size:var(--font-size);height:calc(var(--font-size) * 3);width:100%;border:1px solid var(--theme);color:var(--theme);background-color:var(--background);border-radius:var(--border-radius);padding:var(--spacing);margin-bottom:var(--spacing);cursor:pointer}select{background:var(--background) no-repeat 100%;color:var(--foreground);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(--line-height) * 6rem);cursor:text;color:var(--foreground)}.grid{display:grid;gap:var(--spacing);grid-template-columns:repeat(auto-fit,minmax(0,1fr))} \ No newline at end of file +/* Scales CSS v:0.3 | MIT LICENSE | https://github.com/n2geoff/scales */ +:root{--Hsl:207;--hSl:50%;--hsL:50%;--theme:hsl(var(--Hsl), var(--hSl), var(--hsL));--font:Arial, Helvetica, san-serif;--line:1.5;--weight:400;--size:20px;--radius:0rem;--space:1rem}:root:not([data-theme=dark]),[data-theme=light]{--light:hsl(var(--Hsl), var(--hSl), calc(var(--hsL) + 35%));--dark:hsl(var(--Hsl), var(--hSl), calc(var(--hsL) - 35%));--gray:hsl(var(--Hsl), 15%, 75%);--bg:hsl(var(--Hsl), 0%, 95%);--fg:hsl(var(--Hsl), 0%, 5%)}[data-theme=dark]{--light:hsl(var(--Hsl), var(--hSl), calc(var(--hsL) - 35%));--dark:hsl(var(--Hsl), var(--hSl), calc(var(--hsL) + 35%));--gray:hsl(var(--Hsl), 15%, 15%);--bg:hsl(var(--Hsl), 50%, 5%);--fg:hsl(var(--Hsl), 20%, 90%)}*,:after,:before,body,html{box-sizing:border-box}body,html{background:var(--bg);margin:0;font-family:var(--font);font-weight:var(--weight);line-height:var(--line);padding:0}audio,embed,iframe,img,object,video{height:auto;max-width:100%;border:0}main{margin:0 auto;height:100vh;max-width:1140px}table{background-color:var(--bg);border-collapse:collapse;border-spacing:0;width:100%}tbody{border-top:2px solid var(--theme)}th{text-align:left;color:var(--dark)}td,th{padding:calc(var(--space)/2);border-bottom:1px solid var(--theme)}a{color:var(--theme)}a:hover,body,html,input,label{color:var(--fg)}article,blockquote,main{padding:var(--space)}blockquote{margin:var(--space) 0;border-left:calc(var(--space)/2) solid var(--dark);background:hsl(var(--Hsl) var(--hSl) var(--hsL));color:var(--bg)}code,kbd,pre{font-family:monospace;display:inline-block;white-space:pre;margin:0;padding:0}code{margin:0 calc(var(--space)/4);padding:0 calc(var(--space)/4);background:var(--bg)}hr{border:1px solid}h1,h2,h3,h4,h5,h6{text-transform:capitalize}h1{font-size:calc(var(--size)*2);color:var(--dark)}h2,hr{color:var(--theme)}h3{border-bottom:1px solid var(--theme)}small{color:var(--gray)}section{margin-bottom:var(--space)}article{background-color:var(--light)}body,html,input,label{font-size:var(--size)}label{font-weight:600;text-transform:capitalize;margin:0 calc(var(--size)/2)}input{display:block;outline:0;box-sizing:border-box;background-color:var(--bg);width:100%;height:calc(var(--size)*3);border:1px solid var(--theme);border-radius:var(--radius);padding:var(--space);margin-bottom:var(--space);margin-right:var(--space)}input:disabled{background:var(--gray);color:var(--bg);cursor:not-allowed}input[type=checkbox],input[type=radio]{background:red;display:inline-block;padding:0;margin:0;width:calc(var(--size)*.8);height:calc(var(--size)*.8)}button,input[type=submit],select,textarea{font-size:var(--size);height:calc(var(--size)*3)}input[type=submit]{background-color:var(--theme);color:var(--bg);padding:0;margin:var(--space) 0;cursor:pointer}button,select,textarea{display:inline-block;outline:0;font-family:var(--font);width:100%;border:1px solid var(--theme);color:var(--theme);background-color:var(--bg);border-radius:var(--radius);margin-bottom:var(--space)}select,textarea{color:var(--fg)}button,select{padding:0 var(--space);cursor:pointer}select{background:var(--bg) no-repeat 100%;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(--line)*6rem);padding:var(--space);cursor:text}.grid{display:grid;gap:var(--space);grid-template-columns:repeat(auto-fit,minmax(0,1fr))} \ No newline at end of file diff --git a/example/example.html b/example/example.html index c5a7414..1b043eb 100644 --- a/example/example.html +++ b/example/example.html @@ -24,26 +24,26 @@
-
 
-
 
+
 
+
 
 
-
 
-
 
+
 
+
 
-
+
SCALES
-
CSS
+
CSS
- A Minimalist Dream of CSS + Minimalist CSS Dream

Customize CSS

-
+
@@ -57,7 +57,7 @@
- +
@@ -77,7 +77,7 @@
- +
diff --git a/example/js/example.js b/example/js/example.js index 0ed0087..f2f11b0 100644 --- a/example/js/example.js +++ b/example/js/example.js @@ -71,14 +71,14 @@ function update() { const style = document.createElement('style'); style.innerHTML = ` :root { - --theme-h: ${hsl.h}; - --theme-s: ${hsl.s}%; - --theme-l: ${hsl.l}%; - --font-family: ${form.elements['font'].value}; - --font-size: ${form.elements['size'].value}px; - --spacing: ${form.elements['spacing'].value}rem; - --line-height: ${form.elements['line'].value}; - --border-radius: ${form.elements['radius'].value}rem; + --Hsl: ${hsl.h}; + --hSl: ${hsl.s}%; + --hsL: ${hsl.l}%; + --font: ${form.elements['font'].value}; + --size: ${form.elements['size'].value}px; + --space: ${form.elements['spacing'].value}rem; + --line: ${form.elements['line'].value}; + --radius: ${form.elements['radius'].value}rem; } `; diff --git a/src/scales.css b/src/scales.css index 183a2fd..32aef83 100644 --- a/src/scales.css +++ b/src/scales.css @@ -1,51 +1,47 @@ +/* Scales CSS v:0.3 | MIT LICENSE | https://github.com/n2geoff/scales */ :root { - --theme-h: 207; - --theme-s: 50%; - --theme-l: 50%; + --Hsl: 207; + --hSl: 50%; + --hsL: 50%; - --theme: hsl(var(--theme-h), var(--theme-s), var(--theme-l)); - --muted: hsl(var(--theme-h), 15%, 15%); + --theme: hsl(var(--Hsl), var(--hSl), var(--hsL)); - --font-family: sans-serif, "Roboto"; - --line-height: 1.5; - --font-weight: 400; - --font-size: 20px; - --border-color: var(--theme); - --border-radius: 0rem; - --border-width: 1px; - --spacing: 1rem; + --font: Arial, Helvetica, san-serif; + --line: 1.5; + --weight: 400; + --size: 20px; + --radius: 0rem; + --space: 1rem; } [data-theme="light"], :root:not([data-theme="dark"]) { - --theme-light: hsl(var(--theme-h), var(--theme-s), calc(var(--theme-l) + 35%)); - --theme-dark: hsl(var(--theme-h), var(--theme-s), calc(var(--theme-l) - 35%)); - - --background: hsl(var(--theme-h), 0%, 95%); - --foreground: hsl(var(--theme-h), 0%, 5%); - - --muted: hsl(var(--theme-h), 15%, 75%); + --light: hsl(var(--Hsl), var(--hSl), calc(var(--hsL) + 35%)); + --dark: hsl(var(--Hsl), var(--hSl), calc(var(--hsL) - 35%)); + --gray: hsl(var(--Hsl), 15%, 75%); + --bg: hsl(var(--Hsl), 0%, 95%); + --fg: hsl(var(--Hsl), 0%, 5%); } [data-theme="dark"] { - --theme-light: hsl(var(--theme-h), var(--theme-s), calc(var(--theme-l) - 35%)); - --theme-dark: hsl(var(--theme-h), var(--theme-s), calc(var(--theme-l) + 35%)); - - --background: hsl(var(--theme-h), 50%, 5%); - --foreground: hsl(var(--theme-h), 20%, 90%); + --light: hsl(var(--Hsl), var(--hSl), calc(var(--hsL) - 35%)); + --dark: hsl(var(--Hsl), var(--hSl), calc(var(--hsL) + 35%)); + --gray: hsl(var(--Hsl), 15%, 15%); + --bg: hsl(var(--Hsl), 50%, 5%); + --fg: hsl(var(--Hsl), 20%, 90%); } *, *:before, *:after { box-sizing: border-box; } html,body { - background: var(--background); - color: var(--foreground); + background: var(--bg); + color: var(--fg); margin: 0; padding: 0; - font-family: var(--font-family); - font-size: var(--font-size); - font-weight: var(--font-weight); - line-height: var(--line-height); + font-family: var(--font); + font-size: var(--size); + font-weight: var(--weight); + line-height: var(--line); box-sizing: border-box; padding: 0; } @@ -57,13 +53,14 @@ img,embed,iframe,object,audio,video { } main { - margin: calc((100vh / 25) * 1.5) calc((100vw / 25) * 1.5); - padding: var(--spacing); + margin: 0 auto; + padding: var(--space); height:100vh; + max-width: 1140px; } table { - background-color: var(--background); + background-color: var(--bg); border-collapse: collapse; border-spacing: 0; width: 100%; @@ -74,22 +71,22 @@ tbody { border-top: 2px solid var(--theme); } -th {text-align: left;color: var(--theme-dark)} +th {text-align: left;color: var(--dark)} th, td { - padding: calc(var(--spacing) / 2); + padding: calc(var(--space) / 2); border-bottom: 1px solid var(--theme) } a {color: var(--theme)} -a:hover {color: var(--foreground)} +a:hover {color: var(--fg)} blockquote { - margin: var(--spacing) 0; - border-left: calc(var(--spacing) / 2) solid var(--theme-dark); - background: hsl(var(--theme-h) var(--theme-s) var(--theme-l)); - color: var(--background); - padding: var(--spacing); + margin: var(--space) 0; + border-left: calc(var(--space) / 2) solid var(--dark); + background: hsl(var(--Hsl) var(--hSl) var(--hsL)); + color: var(--bg); + padding: var(--space); } pre, code, kbd { @@ -101,9 +98,9 @@ pre, code, kbd { } code { - margin: 0 calc(var(--spacing) / 4); - padding: 0 calc(var(--spacing) / 4); - background: var(--background); + margin: 0 calc(var(--space) / 4); + padding: 0 calc(var(--space) / 4); + background: var(--bg); } hr { @@ -112,92 +109,90 @@ hr { } h1,h2,h3,h4,h5,h6 {text-transform: capitalize;} -h1 {font-size: calc(var(--font-size) * 2); color: var(--theme-dark)} +h1 {font-size: calc(var(--size) * 2); color: var(--dark)} h2 {color: var(--theme)} h3 {border-bottom: 1px solid var(--theme);} -small {color: var(--muted)} +small {color: var(--gray)} section { - margin-bottom: var(--spacing); + margin-bottom: var(--space); } article { - padding: var(--spacing); - background-color: var(--theme-light); + padding: var(--space); + background-color: var(--light); } label { - font-size: var(--font-size); + font-size: var(--size); font-weight: 600; text-transform: capitalize; - color: var(--foreground); - margin: 0 calc(var(--spacing) / 2); + color: var(--fg); + margin: 0 calc(var(--size) / 2); } input { display: block; outline: none; box-sizing: border-box; - font-size: var(--font-size); - background-color: var(--background); - color: var(--foreground); + font-size: var(--size); + background-color: var(--bg); + color: var(--fg); width: 100%; - height: calc(var(--font-size) * 3); + height: calc(var(--size) * 3); border: 1px solid var(--theme); - border-radius: var(--border-radius); - padding: var(--spacing); - margin-bottom: var(--spacing); - margin-right: var(--spacing); + border-radius: var(--radius); + padding: var(--space); + margin-bottom: var(--space); + margin-right: var(--space); } input:disabled { - background: var(--muted); - color: var(--background); + background: var(--gray); + color: var(--bg); cursor:not-allowed; } input[type="checkbox"], input[type="radio"] { + background: red; display: inline-block; padding: 0; margin: 0; - width: var(--spacing); - height: var(--spacing); -} - -input[type="submit"] { - font-size: var(--font-size); - height: calc(var(--font-size) * 3); - padding: var(--spacing) calc(var(--spacing) / 2); - margin: var(--spacing) 0; - cursor: pointer; + width: calc(var(--size) * .8); + height: calc(var(--size) * .8); } input[type="submit"] { background-color: var(--theme); - color: var(--background); + color: var(--bg); + font-size: var(--size); + height: calc(var(--size) * 3); + padding: 0; + margin: var(--space) 0; + cursor: pointer; } button, select, textarea { display: inline-block; outline: none; - font-family: var(--font-family); - font-size: var(--font-size); - height: calc(var(--font-size) * 3); + font-family: var(--font); + font-size: var(--size); + height: calc(var(--size) * 3); width: 100%; border: 1px solid var(--theme); color: var(--theme); - background-color: var(--background); - border-radius: var(--border-radius); - padding: var(--spacing); - margin-bottom: var(--spacing); + background-color: var(--bg); + border-radius: var(--radius); + padding: 0 var(--space); + margin-bottom: var(--space); cursor: pointer; } select { - background: var(--background) no-repeat 100%; - color: var(--foreground); + background: var(--bg) no-repeat 100%; + color: var(--fg); appearance: none; background-size: 1ex; background-origin: content-box; @@ -208,13 +203,14 @@ textarea { overflow: auto; resize: vertical; border: 1px solid var(--theme); - height: calc(var(--line-height) * 6rem); + height: calc(var(--line) * 6rem); + padding: var(--space); cursor: text; - color: var(--foreground); + color: var(--fg); } .grid { display: grid; - gap: var(--spacing); + gap: var(--space); grid-template-columns: repeat(auto-fit, minmax(0%, 1fr)); } \ No newline at end of file