talon
/
gmi-web
1
Fork 0
Code Issues Releases Activity

rename stylesheets

Browse Source
feature/server
Talon Poole 2 years ago
parent ed684e24d8
commit e5c4b6016d
7 changed files with 191 additions and 212 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  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

6
CONTRIBUTING.md
Unescape View File

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

6
README.md
Unescape View File

@ -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
Unescape 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
Unescape View File

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

4
gmi-web.1.scd
Unescape View File

@ -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
Unescape 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
Unescape View File

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

Write Preview
Loading…
Cancel
Save