↔ @@ -13,10 +13,10 @@ The converted Gemini document should exist inside the `
`. Consider if shar↔ > ```` -`` must be wrapped with a ` ` tag. Take care to render `
` blocks with their original formatting, DO NOT indent the generated +`` must be wrapped in ` `. Take care to render `
` blocks with their original formatting, _do not_ indent the generated HTML for these tags. -`` tags are categorized as [inline](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow#elements_participating_in_an_inline_formatting_context) which CSS [Normal Flow](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow) presents _vertically_—Gemini only deals with _horizontally_ flowing content, this can be addressed by using [`display: block;` at the CSS level.](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow#changing_the_formatting_context_an_element_participates_in) +`` tags are categorized as inline which CSS [Normal Flow](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow) presents vertically—Gemini only deals with horizontally flowing content, this can be addressed by using [`display: block;` at the CSS level.](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow#changing_the_formatting_context_an_element_participates_in) ## optional: inline media @@ -47,7 +47,7 @@ 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 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 ``. +[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 ``. ```html @@ -66,6 +66,8 @@ The `--foreground` and `--background` variables will be inverted when # gmi-web(1) +A command-line utility that pulls together all of the above into a unix-like API. + ```sh npm install --global gmi-web-cli && gmi-web --help ``` @@ -161,6 +163,18 @@ A JSON file can be passed to `--config` for conveniently applying any option wit gmi-web --config web.json $(find ~/gmi/dst -name '*.gmi') ``` +## custom css + +It is possible to use your own set of completely custom CSS rules by pointing to a .css file containing them. + +```sh +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! + # license gmi-web is free and unencumbered public domain software. For more information, see http://unlicense.org/ or the accompanying UNLICENSE file. diff --git a/core.css b/core.css index 73360fe..7ec480a 100644 --- a/core.css +++ b/core.css @@ -9,8 +9,9 @@ h3 { margin-bottom: 0; overflow-wrap: break-word; } + p:empty { - margin: revert; + padding-bottom: 20px; } a { diff --git a/gmi-web.1.scd b/gmi-web.1.scd index c460c88..4ff2102 100644 --- a/gmi-web.1.scd +++ b/gmi-web.1.scd @@ -30,28 +30,22 @@ fashion! file as the description tag. _LIMIT_ may be used to truncate the text with an ellipsis at that number of characters. -*--css* _MODE_|_FILE_ +*--css* _MODE_ | _FILE_ *--html* will default _MODE_ to *full* enabling a handful of font and color variables. See *--help* for the complete list. -``` -gmi-web --html en \\ - --foreground "#555555" \\ - --background "#9EEBCF" < doc.gmi -``` - *--body* will default _MODE_ to *core* 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 - *--inline*. + Pointing to a CSS _FILE_ will use those styles. This works with *--body* or + *--inline* and auto-detects the need for the color-schemes. *--inline* will insert the declarations as "style" properties on their respective blocks. This is the only behavior when using *--body*. - Choosing *none* will not include any style information. + Choosing _MODE_ *none* will not include any style information. -*--image|--audio|--video* _EXTENSIONS_ +*--image | --audio | --video* _EXTENSIONS_ Include media extensions inline. You can provide multiple extensions per flag or multiple flags per extension. @@ -64,7 +58,7 @@ gmi-web --html en \\ ``` *--config* _JSON_ - All the options documented here and by *--help* may be captured in a .json + All the options documented here and by *--help* may be captured in a _JSON_ file and passed to *--config* instead of as flags on the command-line. # AUTHORS