refine css variables

This commit is contained in:
Talon Poole 2021-02-16 00:22:11 +00:00
parent 853752ec5c
commit 1afd0db0d9
6 changed files with 26 additions and 23 deletions

View file

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

View file

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

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

View file

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

@ -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": {

View file

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