diff --git a/dist/grayscale.css b/dist/grayscale.css index 5323a27..dc182ee 100644 --- a/dist/grayscale.css +++ b/dist/grayscale.css @@ -1,4 +1,4 @@ -/* Grayscale CSS v:0.8 | MIT LICENSE | https://github.com/n2geoff/grayscale */ +/* Grayscale CSS v:0.8.1 | MIT LICENSE | https://github.com/n2geoff/grayscale */ :root { --Hsl: 207; --hSl: 50%; diff --git a/dist/grayscale.min.css b/dist/grayscale.min.css index 1fd8ead..cdda2dd 100644 --- a/dist/grayscale.min.css +++ b/dist/grayscale.min.css @@ -1,2 +1,2 @@ -/* Grayscale CSS v:0.8 | MIT LICENSE | https://github.com/n2geoff/grayscale */ +/* Grayscale CSS v:0.8.1 | MIT LICENSE | https://github.com/n2geoff/grayscale */ :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%);--hint:hsl(var(--Hsl), 35%, 70%);--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%);--hint:hsl(var(--Hsl), 35%, 30%);--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);color:var(--fg);margin:0;font-family:var(--font);font-size:var(--size);font-weight:var(--weight);line-height:var(--line);padding:0}::placeholder{color:var(--hint)}:disabled::placeholder{color:gray}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,input,label{color:var(--fg)}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{margin:0 calc(var(--space)/4);padding:0 calc(var(--space)/4);background:var(--bg)}article,blockquote,main,pre>code{padding:var(--space)}pre>code{display:block;width:100%}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)}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:clamp(.5rem,var(--space),2rem);margin-bottom:var(--space);margin-right:var(--space)}input:disabled{background:var(--gray);color:var(--bg);cursor:not-allowed}input:focus,select:focus,textarea:focus{border:2px solid var(--theme)}input[type=checkbox],input[type=radio]{display:inline-block;padding:0;margin:0;width:calc(var(--size)*.8);height:calc(var(--size)*.8)}button{color:var(--theme);background-color:var(--bg)}input[type=reset],input[type=submit]{background-color:var(--theme);color:var(--bg)}button,input[type=reset],input[type=submit],select{border:1px solid var(--theme);cursor:pointer}button,input[type=reset],input[type=submit],select,textarea{display:inline-block;outline:0;font-family:var(--font);font-size:var(--size);height:calc(var(--size)*3);width:100%;border-radius:var(--radius);padding:0 var(--space);margin-bottom:var(--space)}select,textarea{background-color:var(--bg)}select,textarea{padding:clamp(.5rem,var(--space),2rem);color:var(--fg)}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;border:1px solid var(--theme);height:calc(var(--line)*6rem);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/css/styles.css b/example/css/styles.css deleted file mode 100644 index 1d1a2ea..0000000 --- a/example/css/styles.css +++ /dev/null @@ -1,14 +0,0 @@ -html { - min-width: 540px -} - -.box { - height: 1.5em; - min-width: 1.5em; - line-height: 1.5em; - margin: 1px; - display: inline-block; - font-weight: bold; - letter-spacing: .2em; - color: #FAFAFA; -} \ No newline at end of file diff --git a/example/example.html b/example/example.html deleted file mode 100644 index 03d08cb..0000000 --- a/example/example.html +++ /dev/null @@ -1,206 +0,0 @@ - - - - - - - Grayscale CSS - - - - - -
-
-
-
-
 
-
 
-
 
-
 
-
 
-
-
-
- GRAYSCALE -
-
CSS
-
-
- CSS For Minimalists -
-
-
-
-

Customize CSS

-
-
- - - - - - -
-
-
- - -
-
-
-
- - -
-
- - -
-
-
-
- - -
-
- - -
-
-
-
- -
-
-
-
- -

Element examples

-

- This is supposed to be a demo page so we need more elements! -

- -

Form elements

-
-
- - -
- -
- - -
- -
- - -
- -
- - -
- -
- - -
- -
- - -
- -

- - -

-
- -

Code

-

- Below is some code, you can copy it with Ctrl-C. - Did you know, alert(1) can show an alert in JavaScript! -

- 
// This logs a message to the console
console.log('Hello, world!')
- -

Other

-

Here's a horizontal rule and image because I don't know where else to put them.

- Example image -
- -

And here's a nicely marked up table!

- - - - - - - - - - - - - - - - - - - - - - - - - -
NameQuantityPrice
Godzilla2$299.99
Mozilla10$100,000.00
Quesadilla1$2.22
- -

Typography

-
- This is a blockquote. Maecenas blandit, quam vel sodales facilisis, urna erat fringilla sem, sed - egestas quam erat a ipsum. Morbi fermentum odio felis, ultricies faucibus purus mattis tristique. -
-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dictum hendrerit velit, quis - ullamcorper sem congue ac. Quisque id magna rhoncus, sodales massa vel, vestibulum elit. Duis ornare - accumsan egestas. Proin maximus lacus interdum leo molestie convallis. Orci varius natoque penatibus - et magnis dis parturient montes, nascetur ridiculus mus. Ut iaculis risus eu felis feugiat, eu - mollis neque elementum. Donec interdum, nisl id dignissim iaculis, felis dui aliquet dui, non - fermentum velit lectus ac quam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, - per inceptos himenaeos. - This is strong, this is normal, this is just bold, and this is - emphasized! And heck, here's a link. -

-
    -
  • Unordered list item 1
    • -
  • Unordered list item 2
    • -
  • Unordered list item 3
    • -
-
    -
  1. Ordered list item 1
    2. -
  2. Ordered list item 2
    3. -
  3. Ordered list item 3
    4. -
-

Heading 1

-

Heading 2

-

Heading 3

-

Heading 4

-
Heading 5
-
Heading 6
-
-
-
- - - - diff --git a/example/img/steelblue-dark.png b/example/img/steelblue-dark.png deleted file mode 100644 index b2dfd90..0000000 Binary files a/example/img/steelblue-dark.png and /dev/null differ diff --git a/example/img/steelblue-light.png b/example/img/steelblue-light.png deleted file mode 100644 index 33e678e..0000000 Binary files a/example/img/steelblue-light.png and /dev/null differ diff --git a/example/js/theme-builder.js b/example/js/theme-builder.js deleted file mode 100644 index c3783d6..0000000 --- a/example/js/theme-builder.js +++ /dev/null @@ -1,148 +0,0 @@ -/////////////////////////////////////////////// -// Grayscale Theme Builder -/////////////////////////////////////////////// - -// query helper -const $ = document.querySelector.bind(document); - -function HEXToRGB(hex) { - var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); - return result ? { - r: parseInt(result[1], 16), - g: parseInt(result[2], 16), - b: parseInt(result[3], 16) - } : null; -} - -function RGBToHSL(r,g,b) { - // Make r, g, and b fractions of 1 - r /= 255; - g /= 255; - b /= 255; - - // Find greatest and smallest channel values - let cmin = Math.min(r,g,b), - cmax = Math.max(r,g,b), - delta = cmax - cmin, - h = 0, - s = 0, - l = 0; - - // Calculate hue - // No difference - if (delta == 0) - h = 0; - // Red is max - else if (cmax == r) - h = ((g - b) / delta) % 6; - // Green is max - else if (cmax == g) - h = (b - r) / delta + 2; - // Blue is max - else - h = (r - g) / delta + 4; - - h = Math.round(h * 60); - - // Make negative hues positive behind 360° - if (h < 0) - h += 360; - - // Calculate lightness - l = (cmax + cmin) / 2; - - // Calculate saturation - s = delta == 0 ? 0 : delta / (1 - Math.abs(2 * l - 1)); - - // Multiply l and s by 100 - s = +(s * 100).toFixed(0); - l = +(l * 100).toFixed(0); - - return { - h,s,l - }; -} - -// refresh current page theme -function refresh() { - const form = $('#settings'); - - // convert hex-to-rbg-to-hsl - const rgb = HEXToRGB(form.elements['theme'].value); - const hsl = RGBToHSL(rgb.r, rgb.g, rgb.b); - - // build theme string - const theme = String(` - :root { - --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; - }`).replace(/\s/g, ''); - - // override :root to update page theme - $('#dynamic').innerHTML = theme; - - return theme; -} - -// download custom grayscaled theme -function download(css) { - const filename = `grayscaled.css`; - - let el = document.createElement('a'); - el.setAttribute('href', 'data:application/json;charset=utf-8,' + encodeURIComponent(css)); - el.setAttribute('download', filename); - el.style.display = 'none'; - el.click(); -} - -// page download button -$('input[type="submit"]').addEventListener('click', (e) => { - e.preventDefault(); - - // get current theme - const theme = refresh(); - - // get style rules as text - function getText(x) { - // exclude :root theme vars - if(x.selectorText !== ':root') { - return x.cssText; - } - } - - // get grayscale stylesheet as dom object - var css = $('#grayscale'); - - // convert stylesheet dom object to string - var style = Array.prototype.map.call(css.sheet.cssRules, getText).join('\n'); - - // build custom grayscaled theme & minify - const grayscaled = `${theme}${style}`.replace(/\s/g, ''); - - download(grayscaled); -}); - -// toggle light / dark mode -$('#mode').addEventListener('click', () => { - const attr = $('html').getAttribute('data-theme'); - - if(attr && attr === 'dark') { - $('html').setAttribute('data-theme', 'light'); - } else { - $('html').setAttribute('data-theme', 'dark'); - } -}); - -// refresh page theme on changes -$('#radius').addEventListener('click', refresh); -$('#font').addEventListener('click', refresh); -$('#size').addEventListener('click', refresh); -$('#spacing').addEventListener('click', refresh); -$('#line').addEventListener('click', refresh); -$('#theme').addEventListener('change', refresh); diff --git a/package.json b/package.json index d98754c..5e9cb43 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "grayscale-css", - "version": "0.8.0", + "version": "0.8.1", "description": "css for minimalists", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" diff --git a/src/experiments/grayscale.less b/src/experiments/grayscale.less deleted file mode 100644 index 64c4dcf..0000000 --- a/src/experiments/grayscale.less +++ /dev/null @@ -1,217 +0,0 @@ -@theme-h: 207; -@theme-s: 50%; -@theme-l: 50%; - -@theme: color(hsl(@theme-h, @theme-s, @theme-l)); -@font-family: sans-serif, "Roboto"; -@line-height: 1.5; -@font-weight: 400; -@font-size: 20px; -@border-radius: 0rem; -@border-width: 1px; -@spacing: 1rem; - -:root { - --theme: color(hsl(@theme-h, @theme-s, @theme-l)); -} - -[data-theme="light"], -:root:not([data-theme="dark"]) { - --bg: color(hsl(@theme-h, 0%, 95%)); - --fg: color(hsl(@theme-h, 0%, 5%)); - --light: hsl(@theme-h, @theme-s, calc(@theme-l + 35%)); - --dark: hsl(@theme-h, @theme-s, calc(@theme-l - 35%)); - --gray: color(hsl(@theme-h, 15%, 75%)); -} - -[data-theme="dark"] { - --bg: color(hsl(@theme-h, 50%, 5%)); - --fg: color(hsl(@theme-h, 20%, 90%)); - --light: hsl(@theme-h, @theme-s, calc(@theme-l - 35%)); - --dark: hsl(@theme-h, @theme-s, calc(@theme-l + 35%)); - --gray: color(hsl(@theme-h, 15%, 15%)); -} - -*, *:before, *:after { box-sizing: border-box; } - -html,body { - background: var(--bg); - color: var(--fg); - margin: 0; - padding: 0; - font-family: @font-family; - font-size: @font-size; - font-weight: @font-weight; - line-height: @line-height; - box-sizing: border-box; - padding: 0; -} - -img,embed,iframe,object,audio,video { - height: auto; - max-width: 100%; - border: none; -} - -main { - margin: calc((100vh / 25) * 1.5) calc((100vw / 25) * 1.5); - padding: @spacing; - height:100vh; -} - -table { - background-color: --bg; - border-collapse: collapse; - border-spacing: 0; - width: 100%; -} - -tbody { - border-top: 2px solid @theme; - border-top: 2px solid @theme; -} - -th {text-align: left;color: var(--dark)} - -th, td { - padding: calc(@spacing / 2); - border-bottom: 1px solid color(@theme) -} - -a {color: @theme} -a:hover {color: var(--fg)} - -blockquote { - margin: @spacing 0; - border-left: calc(@spacing / 2) solid var(--dark); - background: color(hsl(@theme-h, @theme-s, @theme-l)); - color: --bg; - padding: @spacing; -} - -pre, code, kbd { - font-family: monospace; - display: inline-block; - white-space: pre; - margin: 0; - padding: 0; -} - -code { - margin: 0 calc(@spacing / 4); - padding: 0 calc(@spacing / 4); - background: --bg; -} - -hr { - color: @theme; - border: 1px solid; -} - -h1,h2,h3,h4,h5,h6 {text-transform: capitalize;} -h1 {font-size: calc(@font-size * 2); color: var(--dark)} -h2 {color: color(@theme)} -h3 {border-bottom: 1px solid color(@theme);} - -small {color: var(--gray)} - -section { - margin-bottom: @spacing; -} - -article { - padding: @spacing; - background-color: var(--light); -} - -label { - font-size: @font-size; - font-weight: 600; - text-transform: capitalize; - color: var(--fg); - margin: 0 calc(@spacing / 2); -} - -input { - display: block; - outline: none; - box-sizing: border-box; - font-size: @font-size; - background-color: --bg; - color: var(--fg); - width: 100%; - height: calc(@font-size * 3); - border: 1px solid @theme; - border-radius: @border-radius; - padding: @spacing; - margin-bottom: @spacing; - margin-right: @spacing; -} - -input:disabled { - background: var(--gray); - color: var(--bg); - cursor:not-allowed; -} - -input[type="checkbox"], -input[type="radio"] { - display: inline-block; - padding: 0; - margin: 0; - width: @spacing; - height: @spacing; -} - -input[type="submit"] { - font-size: @font-size; - height: calc(@font-size * 3); - padding: @spacing calc(@spacing / 2); - margin: @spacing 0; - cursor: pointer; -} - -input[type="submit"] { - background-color: color(@theme); - color: var(--bg); -} - -button, select, textarea { - display: inline-block; - outline: none; - font-family: @font-family; - font-size: @font-size; - height: calc(@font-size * 3); - width: 100%; - border: 1px solid color(@theme); - color: color(@theme); - background-color: var(--bg); - border-radius: @border-radius; - padding: @spacing; - margin-bottom: @spacing; - cursor: pointer; -} - -select { - background: var(--bg) no-repeat 100%; - color: var(--fg); - 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 color(@theme); - height: calc(@line-height * 6rem); - cursor: text; - color: var(--fg); -} - -.grid { - display: grid; - gap: @spacing; - grid-template-columns: repeat(auto-fit, minmax(0%, 1fr)); -} \ No newline at end of file diff --git a/src/grayscale.css b/src/grayscale.css index 0ec71a2..095c352 100644 --- a/src/grayscale.css +++ b/src/grayscale.css @@ -1,4 +1,4 @@ -/* Grayscale CSS v:0.8 | MIT LICENSE | https://github.com/n2geoff/grayscale */ +/* Grayscale CSS v:0.8.1 | MIT LICENSE | https://github.com/n2geoff/grayscale */ :root { --Hsl: 207; --hSl: 50%;