From bc4e72a73e733b7417ee62bfc239c754dea2d389 Mon Sep 17 00:00:00 2001 From: "P. Envall" Date: Mon, 8 May 2023 16:01:03 +0200 Subject: [PATCH] somewhat bigger font-size, except headings and code blocks --- dist/css-to-go.css | 7 +++++++ dist/css-to-go.min.css | 2 +- docs/examples/index.html | 2 +- docs/examples/theme-light/index.html | 2 +- docs/index.html | 8 +++----- package.json | 2 +- src/styles/_basic-elements.css | 4 ++++ 7 files changed, 18 insertions(+), 9 deletions(-) diff --git a/dist/css-to-go.css b/dist/css-to-go.css index b67a4ba..1979f84 100644 --- a/dist/css-to-go.css +++ b/dist/css-to-go.css @@ -121,6 +121,9 @@ margin: 0.8em 0; padding: 0 0 0 1rem; } +.ctg-root :not(h1, h2, h3, h4) { + font-size: 1.12rem; +} .ctg-root h1, .ctg-root h2, .ctg-root h3, @@ -141,6 +144,10 @@ .ctg-root code > pre { border: 2px solid var(--color-codepre-border); border-radius: var(--border-radius); + margin: 1rem 0; + padding: 0.5rem; + white-space: break-spaces; + font-size: 1rem; } .ctg-root blockquote { font-style: italic; diff --git a/dist/css-to-go.min.css b/dist/css-to-go.min.css index 50032e3..94891a7 100644 --- a/dist/css-to-go.min.css +++ b/dist/css-to-go.min.css @@ -1 +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-codepre-border: var(--color-DARK_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 code>pre{border:2px solid var(--color-codepre-border);border-radius:var(--border-radius)}.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}:is(.ctg-root label > input[type="text"],.ctg-root label > textarea,.ctg-root label > input[type="checkbox"],.ctg-root label > input[type="radio"],.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{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{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;border-left-color:var(--color-LIGHT_GREEN)}.ctg-root .ctg-note--warn{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;border-left-color:var(--color-general--warn)}.ctg-root .ctg-note--error{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;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)} +.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-codepre-border: var(--color-DARK_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 :not(h1,h2,h3,h4){font-size:1.12rem}.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 code>pre{border:2px solid var(--color-codepre-border);border-radius:var(--border-radius);margin:1rem 0;padding:.5rem;white-space:break-spaces;font-size:1rem}.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}:is(.ctg-root label > input[type="text"],.ctg-root label > textarea,.ctg-root label > input[type="checkbox"],.ctg-root label > input[type="radio"],.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{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{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;border-left-color:var(--color-LIGHT_GREEN)}.ctg-root .ctg-note--warn{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;border-left-color:var(--color-general--warn)}.ctg-root .ctg-note--error{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;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/docs/examples/index.html b/docs/examples/index.html index 8cf3b75..c7db272 100644 --- a/docs/examples/index.html +++ b/docs/examples/index.html @@ -4,7 +4,7 @@ CSS To Go - Example pages - +

CSS To Go - examples

diff --git a/docs/examples/theme-light/index.html b/docs/examples/theme-light/index.html index 370ddd6..764147b 100644 --- a/docs/examples/theme-light/index.html +++ b/docs/examples/theme-light/index.html @@ -4,7 +4,7 @@ CSS To Go - Example pages - +

CSS To Go - examples

diff --git a/docs/index.html b/docs/index.html index 6c571cd..c533fb0 100644 --- a/docs/index.html +++ b/docs/index.html @@ -4,7 +4,7 @@ CSS To Go - Example pages - +

CSS To Go

@@ -75,8 +75,7 @@

How to use it

- 
        
-    <DOCTYPE html>
+        
<DOCTYPE html>
     <html>
     <head>
         <title>Example</title>
@@ -87,8 +86,7 @@ 
How to use it

         ... your content
 
     </body>
-    <html>
-        

+<html>

diff --git a/package.json b/package.json index 1b7491b..7968557 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "css-to-go", "type": "module", - "version": "1.6.5", + "version": "1.7.0", "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 ", "homepage": "https://npup.github.io/css-to-go", diff --git a/src/styles/_basic-elements.css b/src/styles/_basic-elements.css index a9fe103..64f1ba3 100644 --- a/src/styles/_basic-elements.css +++ b/src/styles/_basic-elements.css @@ -1,4 +1,7 @@ .ctg-root { + & :not(h1, h2, h3, h4) { + font-size: 1.12rem; + } /** Headings 1-4 */ & h1, & h2, @@ -31,6 +34,7 @@ margin: 1rem 0; padding: 0.5rem; white-space: break-spaces; + font-size: 1rem; } /** quote section */