diff --git a/CHANGELOG.md b/CHANGELOG.md index d1680e0..86e4930 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,12 @@ +## [1.3.2](https://github.com/npup/css-to-go/compare/v1.3.1...v1.3.2) (2023-01-11) + + +### Bug Fixes + +* don't bundle the example pages css ffs ([236a97d](https://github.com/npup/css-to-go/commit/236a97d384c3c4e116d35c43bdaaf581695054dc)) +* regenerate package-lock.json ([67b3d4e](https://github.com/npup/css-to-go/commit/67b3d4e5282f27b7dd3192fd4ea6349f0a253e0d)) +* try to remove dist files from repo ([1cf45cd](https://github.com/npup/css-to-go/commit/1cf45cdc3cebe00ce77f19b7056dba9a88b3fd47)) + ## [1.3.1](https://github.com/npup/css-to-go/compare/v1.3.0...v1.3.1) (2023-01-11) diff --git a/dist/css-to-go.css b/dist/css-to-go.css new file mode 100644 index 0000000..359008b --- /dev/null +++ b/dist/css-to-go.css @@ -0,0 +1,318 @@ +.ctg-root { + --color-GREEN: #171; + --color-LIGHT_GREEN: #8f8; + --color-RED: #c44; + --color-ORANGE: #fa2; + --color-BLUE: #16e; + --color-LIGHT_BLUE: #5df; + --color-WHITE: #fdfdfd; + --color-WHITE2: #eeffff; + --color-GRAY_LIGHT: #dee; + --color-GRAY: #cdd; + --color-GRAY2: #9aa; + --color-BLACK: #222222; + --color-DARK_BLUE: #046; +} +.ctg-root { + --color-background-main: var(--color-BLACK); + --color-text-main: var(--color-WHITE2); + --color-link: var(--color-WHITE); + --color-link--hover: var(--color-LIGHT_BLUE); + --color-link--active: var(--color-LIGHT_BLUE); + --color-headings: var(--color-LIGHT_BLUE); + --color-table-head: var(--color-LIGHT_BLUE); + --color-row--hover: var(--color-DARK_BLUE); + --color-general--yes: var(--color-GREEN); + --color-general--no: var(--color-RED); + --color-general--warn: var(--color-ORANGE); + --color-list-marker: var(--color-LIGHT_BLUE); + --color-em: var(--color-LIGHT_BLUE); + --color-code: var(--color-ORANGE); + --color-hr: var(--color-DARK_BLUE); + --outlinecolor-form-control--focus: var(--color-BLUE); + --bgcolor-blockquote: var(--color-DARK_BLUE); + --bordercolor-blockquote: var(--color-GRAY_LIGHT); + --color-note: var(--color-text-main); + --bgcolor-note: var(--color-row--hover); + --font-main: Lato, Avenir, Sans serif; + --font-formatted-numerical: Courier, Monospace, Sans serif; + --font-formatted-date: Courier, Monospace, Sans serif; + --transition--color: color 0.125s ease-in; + --transition--bgcolor: background-color 0.125s ease-in; + --button-boxshadow-transition: box-shadow 0.125s ease-in; + --transform--checkbox: scale(1.4); + --transform--radio: scale(1.4); + --border-radius: 4px; + --line-height-copy: 1.5; + --input-text-padding: 0.2rem; + --textarea-padding: 0.3rem; + --margin-list-item: 0 0 0.2rem 1rem; + --padding-list-item: 0.2rem 0.4rem 0.2rem 0.4rem; + --margin-label: 0.5rem 0 0.8rem; + --padding-label: 0 0 0.5rem; + --margintop--input-text: 0.2rem; + --margintop--textarea: 0.2rem; + --marginright--checkbox: 0.3rem; + --marginright--radio: 0.3rem; + --margintop--select: 0.2rem; + --padding--select: 0.2rem; + --margin-button: 0.1rem 0.2rem; + --padding-button: 0.4rem 0.8rem; + --padding-container: 0.3rem 1rem; + --button-boxshadow-shape: 0px 0px 2px 2px; + --button-boxshadow--off: var(--button-boxshadow-shape) transparent; + --button-boxshadow--on: var(--button-boxshadow-shape) var(--color-WHITE); + --marginright-label--form-controls-row: 1rem; + --padding-label--form-controls-row: 0 0.5rem 0 0; + --marginleft-label--form-controls-col: 0.5rem; + --marginbottom-label--form-controls-col: 0; + --paddingbottom-label--form-controls-col: 0; + --paddingbottom--form-controls-col: 1rem; + --margin--headings: 0.8rem 0; + --max-width--copy: 50rem; + --padding-right--copy: 0.5rem; +} +.ctg-root.ctg-theme--light, +.ctg-root .ctg-theme--light { + --color-background-main: var(--color-WHITE2); + --color-text-main: var(--color-BLACK); + --color-link: var(--color-BLACK); + --color-link--hover: var(--color-BLUE); + --color-link--active: var(--color-BLUE); + --color-em: var(--color-BLACK); + --color-code: var(--color-DARK_BLUE); + --outlinecolor-form-control--focus: var(--color-BLUE); + --bgcolor-blockquote: var(--color-GRAY); + --bordercolor-blockquote: var(--color-DARK_BLUE); + --color-list-marker: var(--color-DARK_BLUE); + --color-row--hover: var(--color-GRAY_LIGHT); + --color-headings: var(--color-DARK_BLUE); + --color-note: var(--color-text-main); + --bgcolor-note: var(--color-row--hover); + --button-boxshadow--on: var(--button-boxshadow-shape) var(--color-BLUE); +} +@media screen and (min-width: 481px) { + .ctg-root { + --padding-container: 0.6rem 2rem; + } +} +@media screen and (min-width: 1025px) { + .ctg-root { + --margin-container: 0 auto; + --maxwidth-container: 1024px; + } +} +.ctg-root, +.ctg-root * { + box-sizing: border-box; +} +.ctg-root { + margin: 0; +} +.ctg-root h1, +.ctg-root h2, +.ctg-root h3, +.ctg-root h4 { + margin: var(--margin--headings); +} +.ctg-root ul, +.ctg-root ol { + margin: 0.8em 0; + padding: 0 0 0 1rem; +} +.ctg-root h1, +.ctg-root h2, +.ctg-root h3, +.ctg-root h4 { + color: var(--color-headings); +} +.ctg-root p { + line-height: var(--line-height-copy); + max-width: var(--max-width--copy); + padding-right: var(--padding-right--copy); +} +.ctg-root em { + color: var(--color-em); +} +.ctg-root code { + color: var(--color-code); +} +.ctg-root blockquote { + font-style: italic; + max-width: 30em; + border-left: 4px solid var(--bordercolor-blockquote); + padding: 1rem; + margin-left: 1rem; + background-color: var(--bgcolor-blockquote); + border-radius: 0 var(--border-radius) var(--border-radius) 0; +} +.ctg-root blockquote p { + margin: 0; +} +.ctg-root hr { + margin: 1.5rem 0; + border: 0; + height: 2px; + width: 100%; + border-radius: var(--border-radius); + background-color: var(--color-hr); + box-shadow: 0 0 1px var(--color-hr); +} +.ctg-root a, +.ctg-root a:link, +.ctg-root a:visited, +.ctg-root a:hover, +.ctg-root a:active { + color: var(--color-link); + transition: var(--transition--color); + text-underline-position: under; + text-decoration-color: var(--color-link--hover); +} +.ctg-root a:hover, +.ctg-root a:focus { + color: var(--color-link--hover); +} +.ctg-root li { + margin: var(--margin-list-item); + padding: var(--padding-list-item); + border-radius: var(--border-radius); + transition: var(--transition--bgcolor); +} +.ctg-root li:hover { + background-color: var(--color-row--hover); +} +.ctg-root li::marker { + color: var(--color-list-marker); +} +.ctg-root label { + cursor: pointer; + display: block; + margin: var(--margin-label); + padding: var(--padding-label); +} +.ctg-root label > input[type="text"] { + display: block; + margin-top: var(--margintop--input-text); + padding: var(--input-text-padding); +} +.ctg-root label > input[type="password"] { + display: block; + margin-top: var(--margintop--input-text); + padding: var(--input-text-padding); +} +.ctg-root label > input[type="range"] { + display: block; + margin-top: var(--margintop--input-text); + padding: var(--input-text-padding); +} +.ctg-root label > textarea { + display: block; + margin-top: var(--margintop--textarea); + padding: var(--textarea-padding); + border-radius: var(--border-radius); +} +.ctg-root label > input[type="checkbox"] { + margin-right: var(--marginright--checkbox); + transform: var(--transform--checkbox); +} +.ctg-root label > input[type="radio"] { + margin-right: var(--marginright--radio); + transform: var(--transform--radio); +} +.ctg-root label > select { + display: block; + margin-top: var(--margintop--select); + padding: var(--padding--select); + border-radius: var(--border-radius); +} +.ctg-root input[type="submit"], +.ctg-root button[type="button"], +.ctg-root button[type="submit"] { + border: 0; + margin: var(--margin-button); + padding: var(--padding-button); + background-color: var(--color-BLUE); + color: var(--color-WHITE2); + border-radius: var(--border-radius); + cursor: pointer; + box-shadow: var(--button-boxshadow--off); + transition: var(--button-boxshadow-transition); + outline-offset: 2px; +} +.ctg-root input[type="submit"]:hover, +.ctg-root button[type="button"]:hover, +.ctg-root button[type="submit"]:hover { + outline: -webkit-focus-ring-color auto 2px; +} +.ctg-root label > input[type="text"]:focus-visible, +.ctg-root label > textarea:focus-visible, +.ctg-root label > input[type="checkbox"]:focus-visible, +.ctg-root label > input[type="radio"]:focus-visible, +.ctg-root label > select:focus-visible { + outline-color: var(--outlinecolor-form-control--focus); +} +.ctg-form-controls--row label { + cursor: pointer; + flex: 0 1 auto; + margin-right: var(--marginright-label--form-controls-row); + padding: var(--padding-label--form-controls-row); +} +.ctg-form-controls--col label { + margin-left: var(--marginleft-label--form-controls-col); + margin-bottom: var(--marginbottom-label--form-controls-col); + padding-bottom: var(--paddingbottom-label--form-controls-col); +} +.ctg-root.ctg-container, +.ctg-root .ctg-container { + padding: var(--padding-container); + margin: var(--margin-container); + max-width: var(--maxwidth-container); +} +.ctg-root .ctg-form-controls--row { + display: flex; +} +.ctg-root .ctg-form-controls--col { + padding-bottom: var(--paddingbottom--form-controls-col); +} +.ctg-root .ctg-format--date { + font-family: var(--font-formatted-date); +} +.ctg-root .ctg-format--numerical { + font-family: var(--font-formatted-numerical); +} +.ctg-root .ctg-signal--yes.ctg-signal--yes { + background-color: var(--color-general--yes); + color: var(--color-WHITE2); +} +.ctg-root .ctg-signal--no.ctg-signal--no { + background-color: var(--color-general--no); + color: var(--color-WHITE2); +} +.ctg-root .ctg-signal--warn.ctg-signal--warn { + background-color: var(--color-general--warn); + color: var(--color-WHITE2); +} +.ctg-root .ctg-note, +.ctg-root .ctg-note--error, +.ctg-root .ctg-note--warn, +.ctg-root .ctg-note--info { + color: var(--color-note); + border-left: 0.5rem solid var(--color-LIGHT_BLUE); + padding: 0.2rem 0 0.2rem 0.5rem; + background-color: var(--bgcolor-note); + border-radius: 0 var(--border-radius) var(--border-radius) 0; +} +.ctg-root .ctg-note--info { + border-left-color: var(--color-LIGHT_GREEN); +} +.ctg-root .ctg-note--warn { + border-left-color: var(--color-general--warn); +} +.ctg-root .ctg-note--error { + border-left-color: var(--color-general--no); +} +.ctg-root { + font-family: var(--font-main); + background-color: var(--color-background-main); + color: var(--color-text-main); +} diff --git a/dist/css-to-go.min.css b/dist/css-to-go.min.css new file mode 100644 index 0000000..28172fc --- /dev/null +++ b/dist/css-to-go.min.css @@ -0,0 +1 @@ +.ctg-root{--color-GREEN: #171;--color-LIGHT_GREEN: #8f8;--color-RED: #c44;--color-ORANGE: #fa2;--color-BLUE: #16e;--color-LIGHT_BLUE: #5df;--color-WHITE: #fdfdfd;--color-WHITE2: #eeffff;--color-GRAY_LIGHT: #dee;--color-GRAY: #cdd;--color-GRAY2: #9aa;--color-BLACK: #222222;--color-DARK_BLUE: #046}.ctg-root{--color-background-main: var(--color-BLACK);--color-text-main: var(--color-WHITE2);--color-link: var(--color-WHITE);--color-link--hover: var(--color-LIGHT_BLUE);--color-link--active: var(--color-LIGHT_BLUE);--color-headings: var(--color-LIGHT_BLUE);--color-table-head: var(--color-LIGHT_BLUE);--color-row--hover: var(--color-DARK_BLUE);--color-general--yes: var(--color-GREEN);--color-general--no: var(--color-RED);--color-general--warn: var(--color-ORANGE);--color-list-marker: var(--color-LIGHT_BLUE);--color-em: var(--color-LIGHT_BLUE);--color-code: var(--color-ORANGE);--color-hr: var(--color-DARK_BLUE);--outlinecolor-form-control--focus: var(--color-BLUE);--bgcolor-blockquote: var(--color-DARK_BLUE);--bordercolor-blockquote: var(--color-GRAY_LIGHT);--color-note: var(--color-text-main);--bgcolor-note: var(--color-row--hover);--font-main: Lato, Avenir, Sans serif;--font-formatted-numerical: Courier, Monospace, Sans serif;--font-formatted-date: Courier, Monospace, Sans serif;--transition--color: color .125s ease-in;--transition--bgcolor: background-color .125s ease-in;--button-boxshadow-transition: box-shadow .125s ease-in;--transform--checkbox: scale(1.4);--transform--radio: scale(1.4);--border-radius: 4px;--line-height-copy: 1.5;--input-text-padding: .2rem;--textarea-padding: .3rem;--margin-list-item: 0 0 .2rem 1rem;--padding-list-item: .2rem .4rem .2rem .4rem;--margin-label: .5rem 0 .8rem;--padding-label: 0 0 .5rem;--margintop--input-text: .2rem;--margintop--textarea: .2rem;--marginright--checkbox: .3rem;--marginright--radio: .3rem;--margintop--select: .2rem;--padding--select: .2rem;--margin-button: .1rem .2rem;--padding-button: .4rem .8rem;--padding-container: .3rem 1rem;--button-boxshadow-shape: 0px 0px 2px 2px;--button-boxshadow--off: var(--button-boxshadow-shape) transparent;--button-boxshadow--on: var(--button-boxshadow-shape) var(--color-WHITE);--marginright-label--form-controls-row: 1rem;--padding-label--form-controls-row: 0 .5rem 0 0;--marginleft-label--form-controls-col: .5rem;--marginbottom-label--form-controls-col: 0;--paddingbottom-label--form-controls-col: 0;--paddingbottom--form-controls-col: 1rem;--margin--headings: .8rem 0;--max-width--copy: 50rem;--padding-right--copy: .5rem}.ctg-root.ctg-theme--light,.ctg-root .ctg-theme--light{--color-background-main: var(--color-WHITE2);--color-text-main: var(--color-BLACK);--color-link: var(--color-BLACK);--color-link--hover: var(--color-BLUE);--color-link--active: var(--color-BLUE);--color-em: var(--color-BLACK);--color-code: var(--color-DARK_BLUE);--outlinecolor-form-control--focus: var(--color-BLUE);--bgcolor-blockquote: var(--color-GRAY);--bordercolor-blockquote: var(--color-DARK_BLUE);--color-list-marker: var(--color-DARK_BLUE);--color-row--hover: var(--color-GRAY_LIGHT);--color-headings: var(--color-DARK_BLUE);--color-note: var(--color-text-main);--bgcolor-note: var(--color-row--hover);--button-boxshadow--on: var(--button-boxshadow-shape) var(--color-BLUE)}@media screen and (min-width: 481px){.ctg-root{--padding-container: .6rem 2rem}}@media screen and (min-width: 1025px){.ctg-root{--margin-container: 0 auto;--maxwidth-container: 1024px}}.ctg-root,.ctg-root *{box-sizing:border-box}.ctg-root{margin:0}.ctg-root h1,.ctg-root h2,.ctg-root h3,.ctg-root h4{margin:var(--margin--headings)}.ctg-root ul,.ctg-root ol{margin:.8em 0;padding:0 0 0 1rem}.ctg-root h1,.ctg-root h2,.ctg-root h3,.ctg-root h4{color:var(--color-headings)}.ctg-root p{line-height:var(--line-height-copy);max-width:var(--max-width--copy);padding-right:var(--padding-right--copy)}.ctg-root em{color:var(--color-em)}.ctg-root code{color:var(--color-code)}.ctg-root blockquote{font-style:italic;max-width:30em;border-left:4px solid var(--bordercolor-blockquote);padding:1rem;margin-left:1rem;background-color:var(--bgcolor-blockquote);border-radius:0 var(--border-radius) var(--border-radius) 0}.ctg-root blockquote p{margin:0}.ctg-root hr{margin:1.5rem 0;border:0;height:2px;width:100%;border-radius:var(--border-radius);background-color:var(--color-hr);box-shadow:0 0 1px var(--color-hr)}.ctg-root a,.ctg-root a:link,.ctg-root a:visited,.ctg-root a:hover,.ctg-root a:active{color:var(--color-link);transition:var(--transition--color);text-underline-position:under;text-decoration-color:var(--color-link--hover)}.ctg-root a:hover,.ctg-root a:focus{color:var(--color-link--hover)}.ctg-root li{margin:var(--margin-list-item);padding:var(--padding-list-item);border-radius:var(--border-radius);transition:var(--transition--bgcolor)}.ctg-root li:hover{background-color:var(--color-row--hover)}.ctg-root li::marker{color:var(--color-list-marker)}.ctg-root label{cursor:pointer;display:block;margin:var(--margin-label);padding:var(--padding-label)}.ctg-root label>input[type=text]{display:block;margin-top:var(--margintop--input-text);padding:var(--input-text-padding)}.ctg-root label>input[type=password]{display:block;margin-top:var(--margintop--input-text);padding:var(--input-text-padding)}.ctg-root label>input[type=range]{display:block;margin-top:var(--margintop--input-text);padding:var(--input-text-padding)}.ctg-root label>textarea{display:block;margin-top:var(--margintop--textarea);padding:var(--textarea-padding);border-radius:var(--border-radius)}.ctg-root label>input[type=checkbox]{margin-right:var(--marginright--checkbox);transform:var(--transform--checkbox)}.ctg-root label>input[type=radio]{margin-right:var(--marginright--radio);transform:var(--transform--radio)}.ctg-root label>select{display:block;margin-top:var(--margintop--select);padding:var(--padding--select);border-radius:var(--border-radius)}.ctg-root input[type=submit],.ctg-root button[type=button],.ctg-root button[type=submit]{border:0;margin:var(--margin-button);padding:var(--padding-button);background-color:var(--color-BLUE);color:var(--color-WHITE2);border-radius:var(--border-radius);cursor:pointer;box-shadow:var(--button-boxshadow--off);transition:var(--button-boxshadow-transition);outline-offset:2px}.ctg-root input[type=submit]:hover,.ctg-root button[type=button]:hover,.ctg-root button[type=submit]:hover{outline:-webkit-focus-ring-color auto 2px}.ctg-root label>input[type=text]:focus-visible,.ctg-root label>textarea:focus-visible,.ctg-root label>input[type=checkbox]:focus-visible,.ctg-root label>input[type=radio]:focus-visible,.ctg-root label>select:focus-visible{outline-color:var(--outlinecolor-form-control--focus)}.ctg-form-controls--row label{cursor:pointer;flex:0 1 auto;margin-right:var(--marginright-label--form-controls-row);padding:var(--padding-label--form-controls-row)}.ctg-form-controls--col label{margin-left:var(--marginleft-label--form-controls-col);margin-bottom:var(--marginbottom-label--form-controls-col);padding-bottom:var(--paddingbottom-label--form-controls-col)}.ctg-root.ctg-container,.ctg-root .ctg-container{padding:var(--padding-container);margin:var(--margin-container);max-width:var(--maxwidth-container)}.ctg-root .ctg-form-controls--row{display:flex}.ctg-root .ctg-form-controls--col{padding-bottom:var(--paddingbottom--form-controls-col)}.ctg-root .ctg-format--date{font-family:var(--font-formatted-date)}.ctg-root .ctg-format--numerical{font-family:var(--font-formatted-numerical)}.ctg-root .ctg-signal--yes.ctg-signal--yes{background-color:var(--color-general--yes);color:var(--color-WHITE2)}.ctg-root .ctg-signal--no.ctg-signal--no{background-color:var(--color-general--no);color:var(--color-WHITE2)}.ctg-root .ctg-signal--warn.ctg-signal--warn{background-color:var(--color-general--warn);color:var(--color-WHITE2)}.ctg-root .ctg-note,.ctg-root .ctg-note--error,.ctg-root .ctg-note--warn,.ctg-root .ctg-note--info{color:var(--color-note);border-left:.5rem solid var(--color-LIGHT_BLUE);padding:.2rem 0 .2rem .5rem;background-color:var(--bgcolor-note);border-radius:0 var(--border-radius) var(--border-radius) 0}.ctg-root .ctg-note--info{border-left-color:var(--color-LIGHT_GREEN)}.ctg-root .ctg-note--warn{border-left-color:var(--color-general--warn)}.ctg-root .ctg-note--error{border-left-color:var(--color-general--no)}.ctg-root{font-family:var(--font-main);background-color:var(--color-background-main);color:var(--color-text-main)} diff --git a/package.json b/package.json index 9a7e155..38037ce 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "css-to-go", - "version": "1.3.1", + "version": "1.3.2", "license": "ISC", "description": "A bit of global CSS to help shape up the looks of a plain HTML document. Has a dark mode and a light mode.", "author": "P.Envall ",