rename stylesheets
This commit is contained in:
Talon Poole
parent
ed684e24d8
commit
e5c4b6016d
|
|
@ -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.
|
||||
|
||||
|
|
|
|||
|
|
@ -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 `<html>`.
|
||||
[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>`.
|
||||
|
||||
```html
|
||||
<head>
|
||||
<!-- assuming you wanna host a copy and link to it... -->
|
||||
<link rel="stylesheet" type="text/css" href="gmi.css" />
|
||||
<link rel="stylesheet" type="text/css" href="gmi-web.css" />
|
||||
<meta name="color-scheme" content="dark light" />
|
||||
<!-- ... -->
|
||||
</head>
|
||||
|
|
@ -171,7 +171,7 @@ 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!
|
||||
[gmi.css](./gmi.css) is a good starting point!
|
||||
|
||||
# license
|
||||
|
||||
|
|
|
|||
23
core.css
23
core.css
|
|
@ -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;
|
||||
}
|
||||
14
css.js
14
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 `
|
||||
<meta name="color-scheme" content="dark light">
|
||||
<style>${stringify(FULL, { compress: true })}</style>`;
|
||||
|
||||
if (css === "core")
|
||||
return `<style>${stringify(CORE, { compress: true })}</style>`;
|
||||
if (css === "full")
|
||||
return `<meta name="color-scheme" content="dark light">\n<style>${stringify(
|
||||
FULL,
|
||||
{ compress: true }
|
||||
)}</style>`;
|
||||
|
||||
if (inline || css === "none") return "";
|
||||
|
||||
return `<style>${stringify(load(css, { compress: true }))}</style>`;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
174
gmi-web.css
Normal file
174
gmi-web.css
Normal file
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
176
gmi.css
176
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);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue