specter/gmi-web
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

rename stylesheets

Browse source
This commit is contained in:
Talon Poole 2021-02-19 21:05:50 +00:00
parent ed684e24d8
commit e5c4b6016d
7 changed files with 191 additions and 212 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
CONTRIBUTING.md
View file

@ -1,8 +1,8 @@
There are currently three core components to gmi-web. There are currently three core components to gmi-web.
* `core.css` and `gmi.css` stylesheets - `html.js` gmi-to-html implementation
* `html.js` gmi-to-html implementation - `gmi.css` and `gmi-web.css` stylesheets
* gmi-web(1) as defined by `cli.js` - 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. 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.

6
README.md
View file

@ -47,12 +47,12 @@ These may also be nice to have:
# gmi.css # 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 ```html
<head> <head>
<!-- assuming you wanna host a copy and link to it... --> <!-- 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" /> <meta name="color-scheme" content="dark light" />
<!-- ... --> <!-- ... -->
</head> </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. 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 # license

23
core.css
View file

@ -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
View file

@ -2,7 +2,6 @@ import { readFileSync } from "fs";
// TODO import.meta.resolve is supposed to accomplish this without "path" // TODO import.meta.resolve is supposed to accomplish this without "path"
import path from "path"; import path from "path";
import { stringify, parse } from "css"; import { stringify, parse } from "css";
export { stringify, parse };
export const CORE = parse( export const CORE = parse(
readFileSync( readFileSync(
@ -49,14 +48,15 @@ export function override(options) {
} }
export function style({ inline, css }) { 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") if (css === "core")
return `<style>${stringify(CORE, { compress: true })}</style>`; return `<style>${stringify(CORE, { compress: true })}</style>`;
if (css === "full")
return `<meta name="color-scheme" content="dark light">\n<style>${stringify( if (inline || css === "none") return "";
FULL,
{ compress: true }
)}</style>`;
return `<style>${stringify(load(css, { compress: true }))}</style>`; return `<style>${stringify(load(css, { compress: true }))}</style>`;
} }

4
gmi-web.1.scd
View file

@ -31,10 +31,10 @@ fashion!
with an ellipsis at that number of characters. 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 *--html* will default _MODE_ to *web* enabling a handful of font and color
variables. See *--help* for the complete list. 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. CSS Normal Flow quirks.
Pointing to a CSS _FILE_ will use those styles. This works with *--body* or Pointing to a CSS _FILE_ will use those styles. This works with *--body* or

174
gmi-web.css Normal file
View 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
View file

@ -9,8 +9,9 @@ h3 {
margin-bottom: 0; margin-bottom: 0;
overflow-wrap: break-word; overflow-wrap: break-word;
} }
p:empty { p:empty {
margin: revert; padding-bottom: 20px;
} }
a { a {
@ -20,176 +21,3 @@ a {
pre { pre {
overflow-y: auto; 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);
}
}