rename stylesheets

feature/server
Talon Poole 2 years ago
parent ed684e24d8
commit e5c4b6016d
  1. 6
      CONTRIBUTING.md
  2. 6
      README.md
  3. 23
      core.css
  4. 14
      css.js
  5. 4
      gmi-web.1.scd
  6. 174
      gmi-web.css
  7. 176
      gmi.css

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

@ -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;
}

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

@ -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);
}
}

@ -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…
Cancel
Save