refine css variables
This commit is contained in:
parent
853752ec5c
commit
1afd0db0d9
|
@ -5,7 +5,7 @@
|
||||||
.nh
|
.nh
|
||||||
.ad l
|
.ad l
|
||||||
.\" Begin generated content:
|
.\" Begin generated content:
|
||||||
.TH "gmi-web" "1" "2021-02-15" "1.0.2-rc.2"
|
.TH "gmi-web" "1" "2021-02-16" "1.0.3-rc.2"
|
||||||
.P
|
.P
|
||||||
.SH NAME
|
.SH NAME
|
||||||
.P
|
.P
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
gmi-web(1) "1.0.3-rc.2"
|
gmi-web(1) "1.0.4-rc.2"
|
||||||
|
|
||||||
# NAME
|
# NAME
|
||||||
|
|
||||||
|
|
33
gmi.css
33
gmi.css
|
@ -1,26 +1,28 @@
|
||||||
:root {
|
:root {
|
||||||
--body-width: 48rem;
|
--body-width: 48rem;
|
||||||
|
--mono: Consolas, monaco, monospace;
|
||||||
|
--serif: georgia, times, serif;
|
||||||
|
--sans-serif: ubuntu, roboto, noto, sans-serif;
|
||||||
--foreground: black;
|
--foreground: black;
|
||||||
--background: white;
|
--background: white;
|
||||||
--p-size: 1.25rem;
|
--p-size: 1.25rem;
|
||||||
--p-indent: 0rem;
|
--p-indent: 0rem;
|
||||||
--p-line-height: 1.5;
|
--p-line-height: 1.5;
|
||||||
--a-size: var(--p-size);
|
--a-size: 1.25rem;
|
||||||
|
--a-weight: normal;
|
||||||
|
--a-decoration: none;
|
||||||
|
--a-prefix: "⇒";
|
||||||
--pre-size: 1rem;
|
--pre-size: 1rem;
|
||||||
--pre-line-height: 1;
|
--pre-line-height: 1;
|
||||||
--h1-size: 3rem;
|
--h1-size: 3rem;
|
||||||
--h2-size: 2.25rem;
|
--h2-size: 2.25rem;
|
||||||
--h3-size: 1.5rem;
|
--h3-size: 1.5rem;
|
||||||
--heading-line-height: 1.25;
|
--h-line-height: 1.25;
|
||||||
--ul-size: var(--p-size);
|
--ul-size: 1.25rem;
|
||||||
--ul-line-height: 1.25;
|
--ul-line-height: 1.25;
|
||||||
--blockquote-size: var(--p-size);
|
--ul-bullet: "*";
|
||||||
--blockquote-line-height: 1.25;
|
--quote-size: 1.25rem;
|
||||||
--mono: Consolas, monaco, monospace;
|
--quote-line-height: 1.25;
|
||||||
--serif: georgia, times, serif;
|
|
||||||
--sans-serif: -apple-system, BlinkMacSystemFont, "avenir next", avenir,
|
|
||||||
helvetica, "helvetica neue", ubuntu, roboto, noto, "segoe ui", arial,
|
|
||||||
sans-serif;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
|
@ -51,7 +53,7 @@ h1,
|
||||||
h2,
|
h2,
|
||||||
h3 {
|
h3 {
|
||||||
font-family: var(--sans-serif);
|
font-family: var(--sans-serif);
|
||||||
line-height: var(--heading-line-height);
|
line-height: var(--h-line-height);
|
||||||
}
|
}
|
||||||
|
|
||||||
p {
|
p {
|
||||||
|
@ -64,7 +66,7 @@ p {
|
||||||
a::before {
|
a::before {
|
||||||
font-size: var(--p-size);
|
font-size: var(--p-size);
|
||||||
font-family: var(--mono);
|
font-family: var(--mono);
|
||||||
content: "⇒";
|
content: var(--a-prefix);
|
||||||
padding-right: 0.25rem;
|
padding-right: 0.25rem;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
|
@ -72,7 +74,8 @@ a::before {
|
||||||
a {
|
a {
|
||||||
font-size: var(--p-size);
|
font-size: var(--p-size);
|
||||||
font-family: var(--serif);
|
font-family: var(--serif);
|
||||||
text-decoration: none;
|
font-weight: var(--a-weight);
|
||||||
|
text-decoration: var(--a-decoration);
|
||||||
}
|
}
|
||||||
|
|
||||||
pre {
|
pre {
|
||||||
|
@ -105,7 +108,7 @@ ul {
|
||||||
li::before {
|
li::before {
|
||||||
font-size: var(--p-size);
|
font-size: var(--p-size);
|
||||||
font-family: var(--mono);
|
font-family: var(--mono);
|
||||||
content: "*";
|
content: var(--ul-bullet);
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
padding-right: 0.5rem;
|
padding-right: 0.5rem;
|
||||||
}
|
}
|
||||||
|
@ -113,7 +116,7 @@ li::before {
|
||||||
blockquote {
|
blockquote {
|
||||||
font-size: var(--p-size);
|
font-size: var(--p-size);
|
||||||
font-family: var(--serif);
|
font-family: var(--serif);
|
||||||
line-height: var(--blockquote-line-height);
|
line-height: var(--quote-line-height);
|
||||||
padding-left: 0.75rem;
|
padding-left: 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
8
html.js
8
html.js
|
@ -25,16 +25,16 @@ export function toHTML(gemtext, options) {
|
||||||
const vars = CSS.rootVariables(CSS.FULL);
|
const vars = CSS.rootVariables(CSS.FULL);
|
||||||
|
|
||||||
return Object.keys(vars).reduce((styles, key) => {
|
return Object.keys(vars).reduce((styles, key) => {
|
||||||
if (options[key] && options[key] !== vars[key])
|
if (typeof options[key] !== undefined && options[key] !== vars[key])
|
||||||
styles += `--${key}: ${options[key]};`;
|
styles += `--${key}:${options[key]};`;
|
||||||
return styles;
|
return styles;
|
||||||
}, "");
|
}, "");
|
||||||
}
|
}
|
||||||
|
|
||||||
return `<!DOCTYPE html>
|
return `<!DOCTYPE html>
|
||||||
<html lang="${options.language}" dir="${options.dir}" style="${overrideStyles(
|
<html lang="${options.language}" dir="${options.dir}" style='${overrideStyles(
|
||||||
options
|
options
|
||||||
)}">
|
)}'>
|
||||||
<head>${head(
|
<head>${head(
|
||||||
Object.assign(options, {
|
Object.assign(options, {
|
||||||
title: tokens[0].h1,
|
title: tokens[0].h1,
|
||||||
|
|
2
package-lock.json
generated
2
package-lock.json
generated
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "gmi-web-cli",
|
"name": "gmi-web-cli",
|
||||||
"version": "1.0.2-rc.2",
|
"version": "1.0.3-rc.2",
|
||||||
"lockfileVersion": 1,
|
"lockfileVersion": 1,
|
||||||
"requires": true,
|
"requires": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "gmi-web-cli",
|
"name": "gmi-web-cli",
|
||||||
"version": "1.0.3-rc.2",
|
"version": "1.0.4-rc.2",
|
||||||
"description": "A bridge between HTML and Gemini",
|
"description": "A bridge between HTML and Gemini",
|
||||||
"main": "html.js",
|
"main": "html.js",
|
||||||
"type": "module",
|
"type": "module",
|
||||||
|
|
Loading…
Reference in a new issue