From e5c4b6016d70cba59191811ad97b1b130623923c Mon Sep 17 00:00:00 2001 From: Talon Poole Date: Fri, 19 Feb 2021 21:05:50 +0000 Subject: [PATCH] rename stylesheets --- CONTRIBUTING.md | 6 +- README.md | 6 +- core.css | 23 ------- css.js | 14 ++-- gmi-web.1.scd | 4 +- gmi-web.css | 174 +++++++++++++++++++++++++++++++++++++++++++++++ gmi.css | 176 +----------------------------------------------- 7 files changed, 191 insertions(+), 212 deletions(-) delete mode 100644 core.css create mode 100644 gmi-web.css diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index ed0ff0b..91522c5 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,8 +1,8 @@ There are currently three core components to gmi-web. -* `core.css` and `gmi.css` stylesheets -* `html.js` gmi-to-html implementation -* gmi-web(1) as defined by `cli.js` +- `html.js` gmi-to-html implementation +- `gmi.css` and `gmi-web.css` stylesheets +- gmi-web(1) as defined by `cli.js` The stylesheets are simple enough to modify. The latter two may compel you to clone this repo and make changes you'd like to test locally. You will need [node(1)](https://nodejs.org/en/) and [scdoc(1)](https://git.sr.ht/~sircmpwn/scdoc) to run `cli.js` and build the `gmi-web.1.scd` man page. `npm link` will install gmi-web(1) from the source allowing you to make modifications locally and test them immediately. diff --git a/README.md b/README.md index d635d47..38f95ce 100644 --- a/README.md +++ b/README.md @@ -47,12 +47,12 @@ These may also be nice to have: # gmi.css -[core.css](./core.css) is a maximally miniminal stylesheet that overrides the default CSS [Normal Flow](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow) to render content horizontally in a Gemini way. [gmi.css](./gmi.css) extends upon that slightly with font and color options. The default values are optimized for readability and mobile-friendliness and may be customized by adding a style property to ``. +[gmi.css](./gmi.css) is a maximally miniminal stylesheet that overrides the default CSS [Normal Flow](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow) to render content horizontally in a Gemini way. [gmi-web.css](./gmi-web.css) extends upon that slightly with font and color options. The default values are optimized for readability and mobile-friendliness and may be customized by adding a style property to ``. ```html - + @@ -171,7 +171,7 @@ gmi-web --body --css custom.css < doc.gmi gmi-web auto-detects the need for the `` color-schemes and allows for using `--inline` to insert the declarations as `style` properties on their respective blocks. -[core.css](./core.css) is a good starting point! +[gmi.css](./gmi.css) is a good starting point! # license diff --git a/core.css b/core.css deleted file mode 100644 index 7ec480a..0000000 --- a/core.css +++ /dev/null @@ -1,23 +0,0 @@ -p, -pre, -ul, -blockquote, -h1, -h2, -h3 { - margin-top: 0; - margin-bottom: 0; - overflow-wrap: break-word; -} - -p:empty { - padding-bottom: 20px; -} - -a { - display: block; -} - -pre { - overflow-y: auto; -} diff --git a/css.js b/css.js index 4a6cd82..83abfab 100644 --- a/css.js +++ b/css.js @@ -2,7 +2,6 @@ import { readFileSync } from "fs"; // TODO import.meta.resolve is supposed to accomplish this without "path" import path from "path"; import { stringify, parse } from "css"; -export { stringify, parse }; export const CORE = parse( readFileSync( @@ -49,14 +48,15 @@ export function override(options) { } export function style({ inline, css }) { - if (inline || css === "none") return ""; + if (css === "full") + return ` + +`; + if (css === "core") return ``; - if (css === "full") - return `\n`; + + if (inline || css === "none") return ""; return ``; } diff --git a/gmi-web.1.scd b/gmi-web.1.scd index 4ff2102..7ae4e43 100644 --- a/gmi-web.1.scd +++ b/gmi-web.1.scd @@ -31,10 +31,10 @@ fashion! with an ellipsis at that number of characters. *--css* _MODE_ | _FILE_ - *--html* will default _MODE_ to *full* enabling a handful of font and color + *--html* will default _MODE_ to *web* enabling a handful of font and color variables. See *--help* for the complete list. - *--body* will default _MODE_ to *core* and use just what is needed to fix + *--body* will default _MODE_ to *gmi* and use just what is needed to fix CSS Normal Flow quirks. Pointing to a CSS _FILE_ will use those styles. This works with *--body* or diff --git a/gmi-web.css b/gmi-web.css new file mode 100644 index 0000000..2611503 --- /dev/null +++ b/gmi-web.css @@ -0,0 +1,174 @@ +@import ("gmi.css"); + +img, +audio, +video { + display: block; + max-width: 100%; +} + +:root { + --foreground: black; + --background: white; + + --body-width: 48rem; + --hyphens: manual; + + --serif: georgia, times, serif; + --sans-serif: avenir, helvetica, arial, sans-serif; + --mono: consolas, monaco, monospace; + + --p-family: var(--serif); + --p-size: 1.25rem; + --p-height: 1.5; + --p-indent: 0rem; + + --a-family: var(--serif); + --a-size: var(--p-size); + --a-height: 1.5; + --a-decoration: underline; + --a-style: normal; + + --pre-family: var(--mono); + --pre-size: 1rem; + --pre-height: 1; + + --h1-family: var(--sans-serif); + --h1-size: 3rem; + --h1-height: 1.25; + + --h2-family: var(--sans-serif); + --h2-size: 2.25rem; + --h2-height: 1.25; + + --h3-family: var(--sans-serif); + --h3-size: 1.5rem; + --h3-height: 1.25; + + --ul-family: var(--serif); + --ul-size: var(--p-size); + --ul-height: 1.25; + + --quote-family: var(--serif); + --quote-size: var(--p-size); + --quote-height: 1.25; + --quote-style: italic; +} + +body { + margin: 0 auto; + padding: 0.5rem; + max-width: var(--body-width); + hyphens: var(--hyphens); +} + +p { + font-family: var(--p-family); + font-size: var(--p-size); + line-height: var(--p-height); + text-indent: var(--p-indent); +} + +a { + font-size: var(--a-size); + font-style: var(--a-style); + font-family: var(--serif); + line-height: var(--a-line-height); + text-decoration: var(--a-decoration); +} + +pre { + padding: 1rem; + font-family: var(--pre-family); + font-size: var(--pre-size); + line-height: var(--pre-height); +} + +h1 { + font-family: var(--h1-family); + font-size: var(--h1-size); + line-height: var(--h1-height); +} + +h2 { + font-family: var(--h2-family); + font-size: var(--h2-size); + line-height: var(--h2-height); +} + +h3 { + font-family: var(--h3-family); + font-size: var(--h3-size); + line-height: var(--h3-height); +} + +ul { + padding-left: 1rem; + list-style-type: var(--ul-style); + font-size: var(--ul-size); + font-family: var(--ul-family); + line-height: var(--ul-height); +} + +blockquote { + margin-left: 0; + margin-right: 0; + padding-left: 0.5rem; + font-family: var(--quote-family); + font-size: var(--quote-size); + font-style: var(--quote-style); + line-height: var(--quote-height); +} + +/* foreground and background colors */ +html, +body, +h1, +h2, +h3, +p, +a, +ul, +blockquote, +pre::selection { + color: var(--foreground); + background-color: var(--background); +} + +blockquote { + border-left: 0.5rem solid var(--foreground); +} + +pre, +::selection, +a:hover { + color: var(--background); + background-color: var(--foreground); +} + +@media (prefers-color-scheme: dark) { + html, + body, + h1, + h2, + h3, + p, + a, + ul, + blockquote, + pre::selection { + color: var(--background); + background-color: var(--foreground); + } + + blockquote { + border-left: 0.5rem solid var(--background); + } + + pre, + ::selection, + a:hover { + color: var(--foreground); + background-color: var(--background); + } +} diff --git a/gmi.css b/gmi.css index 36a9474..7ec480a 100644 --- a/gmi.css +++ b/gmi.css @@ -9,8 +9,9 @@ h3 { margin-bottom: 0; overflow-wrap: break-word; } + p:empty { - margin: revert; + padding-bottom: 20px; } a { @@ -20,176 +21,3 @@ a { pre { overflow-y: auto; } - -img, -audio, -video { - display: block; - max-width: 100%; -} - -:root { - --foreground: black; - --background: white; - - --body-width: 48rem; - --hyphens: manual; - - --serif: georgia, times, serif; - --sans-serif: avenir, helvetica, arial, sans-serif; - --mono: consolas, monaco, monospace; - - --p-family: var(--serif); - --p-size: 1.25rem; - --p-height: 1.5; - --p-indent: 0rem; - - --a-family: var(--serif); - --a-size: var(--p-size); - --a-height: 1.5; - --a-decoration: underline; - --a-style: normal; - - --pre-family: var(--mono); - --pre-size: 1rem; - --pre-height: 1; - - --h1-family: var(--sans-serif); - --h1-size: 3rem; - --h1-height: 1.25; - - --h2-family: var(--sans-serif); - --h2-size: 2.25rem; - --h2-height: 1.25; - - --h3-family: var(--sans-serif); - --h3-size: 1.5rem; - --h3-height: 1.25; - - --ul-family: var(--serif); - --ul-size: var(--p-size); - --ul-height: 1.25; - - --quote-family: var(--serif); - --quote-size: var(--p-size); - --quote-height: 1.25; - --quote-style: italic; -} - -body { - margin: 0 auto; - padding: 0.5rem; - max-width: var(--body-width); - hyphens: var(--hyphens); -} - -p { - font-family: var(--p-family); - font-size: var(--p-size); - line-height: var(--p-height); - text-indent: var(--p-indent); -} - -a { - font-size: var(--a-size); - font-style: var(--a-style); - font-family: var(--serif); - line-height: var(--a-line-height); - text-decoration: var(--a-decoration); -} - -pre { - padding: 1rem; - font-family: var(--pre-family); - font-size: var(--pre-size); - line-height: var(--pre-height); -} - -h1 { - font-family: var(--h1-family); - font-size: var(--h1-size); - line-height: var(--h1-height); -} - -h2 { - font-family: var(--h2-family); - font-size: var(--h2-size); - line-height: var(--h2-height); -} - -h3 { - font-family: var(--h3-family); - font-size: var(--h3-size); - line-height: var(--h3-height); -} - -ul { - padding-left: 1rem; - list-style-type: var(--ul-style); - font-size: var(--ul-size); - font-family: var(--ul-family); - line-height: var(--ul-height); -} - -blockquote { - margin-left: 0; - margin-right: 0; - padding-left: 0.5rem; - font-family: var(--quote-family); - font-size: var(--quote-size); - font-style: var(--quote-style); - line-height: var(--quote-height); -} - -/* foreground and background colors */ -html, -body, -h1, -h2, -h3, -p, -a, -ul, -blockquote, -pre::selection { - color: var(--foreground); - background-color: var(--background); -} - -blockquote { - border-left: 0.5rem solid var(--foreground); -} - -pre, -::selection, -a:hover { - color: var(--background); - background-color: var(--foreground); -} - -@media (prefers-color-scheme: dark) { - html, - body, - h1, - h2, - h3, - p, - a, - ul, - blockquote, - pre::selection { - color: var(--background); - background-color: var(--foreground); - } - - blockquote { - border-left: 0.5rem solid var(--background); - } - - pre, - ::selection, - a:hover { - color: var(--foreground); - background-color: var(--background); - } -}