custom CSS guide
This commit is contained in:
Talon Poole
parent
609d77d515
commit
09572cb347
22
README.md
22
README.md
|
|
@ -2,7 +2,7 @@ This project is home to a [gmi-to-html reference](#gmi-to-html), a [gmi.css](#gm
|
|||
|
||||
# gmi-to-html
|
||||
|
||||
The converted Gemini document should exist inside the `<body>`. Consider if sharing the page with other HTML to put the core document inside `<main>`. Each available line-type may be translated using the following guide:
|
||||
The converted Gemini document should exist inside the `<body>`. Consider if sharing the page with other HTML to put the core document inside `<main>`. [Each Gemini line-type](https://gemini.circumlunar.space/docs/specification.html#5-3-line-orientation) may be translated using the following guide:
|
||||
|
||||
````
|
||||
<p> ↔
|
||||
|
|
@ -13,10 +13,10 @@ The converted Gemini document should exist inside the `<body>`. Consider if shar
|
|||
<blockquote> ↔ >
|
||||
````
|
||||
|
||||
`<li>` must be wrapped with a `<ul>` tag. Take care to render `<pre>` blocks with their original formatting, DO NOT indent the generated
|
||||
`<li>` must be wrapped in `<ul>`. Take care to render `<pre>` blocks with their original formatting, _do not_ indent the generated
|
||||
HTML for these tags.
|
||||
|
||||
`<a>` 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)
|
||||
`<a>` 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 `<html>`.
|
||||
[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>`.
|
||||
|
||||
```html
|
||||
<head>
|
||||
|
|
@ -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 `<meta>` 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.
|
||||
|
|
|
|||
3
core.css
3
core.css
|
|
@ -9,8 +9,9 @@ h3 {
|
|||
margin-bottom: 0;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
p:empty {
|
||||
margin: revert;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
a {
|
||||
|
|
|
|||
|
|
@ -30,28 +30,22 @@ fashion!
|
|||
file as the description <meta> 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 <meta> 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
|
||||
|
|
|
|||
Loading…
Reference in a new issue