From 98e7098f290325a724937794b00ed4b5f0b54633 Mon Sep 17 00:00:00 2001 From: Christophe HENRY Date: Sat, 27 Mar 2021 20:20:50 +0100 Subject: [PATCH] refactoring, adds debug.css --- css/base.css | 56 ++++++++++++++++++++++++++++ css/black_wide.css | 93 +++------------------------------------------- css/debug.css | 5 +++ css/htmgem.css | 85 +----------------------------------------- css/index.gmi | 15 +++++--- css/raw.css | 59 ++++++----------------------- css/simple.css | 18 ++------- css/terminal.css | 65 +++++--------------------------- lib-htmgem.php | 2 +- 9 files changed, 101 insertions(+), 297 deletions(-) create mode 100644 css/base.css create mode 100644 css/debug.css diff --git a/css/base.css b/css/base.css new file mode 100644 index 0000000..a925733 --- /dev/null +++ b/css/base.css @@ -0,0 +1,56 @@ +html { + font-family: sans-serif; +} + +body { + max-width: 1024px; + margin: auto; + margin-top: 0.5em; + margin-bottom: 2em; +} + +h1, h2, h3, blockquote, p, pre, li, ul { + margin: 0 0 0.3rem; + padding: 0; +} + +h1 { font-size: 2rem; } +h2 { font-size: 1.6rem; } +h3 { font-size: 1.2rem; } + +blockquote { + margin-left: 3rem; + padding-left: 3px; + margin-right: 3rem; +} + +pre { + overflow-x: auto; + font-size: 1rem; +} + +a { + text-decoration: none; +} + +a { + text-decoration: none; +} + +@media only screen and (max-width: 1024px) { + body { + margin: 3rem; + } + h1 { + font-size: 4rem; + } + h2 { + font-size: 3.5rem; + } + h3 { + font-size: 3rem; + } + p, pre, ul, blockquote { + font-size: 2.6rem; + } +} diff --git a/css/black_wide.css b/css/black_wide.css index 4932c0e..832edff 100644 --- a/css/black_wide.css +++ b/css/black_wide.css @@ -1,45 +1,22 @@ +@import "base.css"; + html { - font-family: sans-serif; - font-size:1rem; background-color:#000; } body { - margin: 0.5em; + max-width: none; + margin: 0.5em 5em 2em 5em; } -ul { +p, ul { color: #ccc; - margin: 0.4rem 0; - padding: 0; -} - -p, pre { - margin: 0 0 0.3rem; - padding: 0; -} - -p { - color: #ccc; - text-align: justify; - text-justify: inter-word; -} - -li { - margin-left: 1em; - padding: 0; } h1, h2, h3 { color: #ddd; - margin: 0; - padding: 0; } -h1 { font-size: 2rem; } -h2 { font-size: 1.8rem; } -h3 { font-size: 1.5rem; } - blockquote { background-color: #222; border-left: 3px solid #444; @@ -49,75 +26,15 @@ blockquote { a { color:#ddd; - text-decoration: none; - text-justify: none; -} - -a:before { - content: "🔗 "; } a:visited { color: #888; } -a.local:before { - content: "🛩️ "; - font-weight: bold; -} - -a.gemini:before { - content: "🚀 "; -} - -a.gopher:before { - content: "📜 "; -} - -a.https:before { - content: "🕸️ "; - font-weight: bolder; -} - -a.http:before { - content: "🕸️ "; - font-weight: lighter; -} - -a.mumble:before { - content: "🎤 "; -} - -a.mailto:before { - content: "✉️ "; -} - pre { color: #ccc; scrollbar-color: #222 #000; background-color: #222; - margin: 0 -1rem; - padding: 1rem; - overflow-x: auto; } -@media only screen and (max-width: 1024px) { - a { - margin: -4rem; - } - body { - margin: 3rem; - } - h1 { - font-size: 4rem; - } - h2 { - font-size: 3.5rem; - } - h3 { - font-size: 3rem; - } - p, pre, ul { - font-size: 2.6rem; - } -} diff --git a/css/debug.css b/css/debug.css new file mode 100644 index 0000000..51eff4a --- /dev/null +++ b/css/debug.css @@ -0,0 +1,5 @@ +@import "base.css"; + +h1, h2, h3, p, li, pre, blockquote { + border: 1px solid lightblue; +} diff --git a/css/htmgem.css b/css/htmgem.css index dbda462..d1db5fb 100644 --- a/css/htmgem.css +++ b/css/htmgem.css @@ -1,46 +1,15 @@ +@import "base.css"; + html { - font-family: sans-serif; - font-size:1rem; color:#1E4147; background-color:#fafafa; } -body { - max-width: 1024px; - margin: auto; - margin-top: 0.5em; -} - -ul { - margin: 0.4rem 0; - padding: 0; -} - -p, pre { - margin: 0 0 0.3rem; - padding: 0; -} - -p { - text-align: justify; - text-justify: inter-word; -} - -li { - margin: 0; - padding: 0; -} h1, h2, h3 { color: #66f; - margin: 0; - padding: 0; } -h1 { font-size: 2rem; } -h2 { font-size: 1.6rem; } -h3 { font-size: 1.2rem; } - blockquote { background-color: #eee; border-left: 3px solid #444; @@ -51,8 +20,6 @@ blockquote { a { margin: -1.35rem; color:#820; - text-decoration: none; - text-justify: none; } a:before { @@ -94,51 +61,3 @@ a.mailto:before { content: "✉️ "; } -pre { - overflow-x: auto; -} - -@media only screen and (max-width: 1024px) { - a { - margin: -4rem; - } - body { - margin: 3rem; - } - h1 { - font-size: 4rem; - } - h2 { - font-size: 3.5rem; - } - h3 { - font-size: 3rem; - } - p, pre, ul, blockquote { - font-size: 2.6rem; - } -} - -@media(prefers-color-scheme:dark) { - html { - background-color: #111; - color: #eee; - } - - blockquote { - background-color: #000; - } - - pre { - background-color: #222; - } - - a { - color: #0087BD; - } - - a:visited { - color: #802200; - } -} - diff --git a/css/index.gmi b/css/index.gmi index 6503087..8be2750 100644 --- a/css/index.gmi +++ b/css/index.gmi @@ -1,11 +1,14 @@ # Styles -=> index-fr.gmi|black_wide black_wide.css -=> index-fr.gmi|raw raw.css -=> index-fr.gmi|simple simple.css -=> index-fr.gmi|htmgem htmgem.css -=> index-fr.gmi|terminal terminal.css -=> index-fr.gmi|pre code source préformaté +=> index.gmi|htmgem htmgem.css +=> index.gmi|none None +=> index.gmi|terminal terminal.css +=> index.gmi|black_wide black_wide.css +=> index.gmi|simple simple.css +=> index.gmi|raw raw.css +=> index.gmi|debug debug.css +=> index.gmi|pre Source code +=> index.gmi|source Download source code Lorem ipsum dolor sit amet. //Lorem// **ipsum** __dolor__ ~~sit amet~~. diff --git a/css/raw.css b/css/raw.css index 94d606f..496fb01 100644 --- a/css/raw.css +++ b/css/raw.css @@ -1,41 +1,25 @@ +@import "base.css"; + body { - max-width: 1024px; - margin: auto; - margin-top: 0.5em; - xfont-family: mono; + background-color: white; + color: black; + font-family: mono; } p, h1, h2, h3, ul, li, pre, blockquote { color: black; margin: 0; padding: 0; - font-size: 1rem; font-weight: normal; } -ul { - list-style: none; -} +ul { list-style: none; } +li:before { content: "* "; } +h1:before { content: "# "; } +h2:before { content: "## "; } +h3:before { content: "### "; } -li:before { - content: "* "; -} - -h1:before { - content: "# "; -} - -h2:before { - content: "## "; -} - -h3:before { - content: "### "; -} - -blockquote :before { - content: "> "; -} +blockquote :before { content: "> "; } pre { scrollbar-color: lightgrey white; @@ -53,24 +37,3 @@ a, a:visited { a:before { content: "=> "; } - -@media only screen and (max-width: 1024px) { - a { - margin: -4rem; - } - body { - margin: 3rem; - } - h1 { - font-size: 4rem; - } - h2 { - font-size: 3.5rem; - } - h3 { - font-size: 3rem; - } - p, pre, ul { - font-size: 2.6rem; - } -} diff --git a/css/simple.css b/css/simple.css index 159799a..ef1db58 100644 --- a/css/simple.css +++ b/css/simple.css @@ -1,21 +1,9 @@ -body { - max-width: 1024px; - margin: auto; - margin-top: 0.5em; -} +@import "base.css"; -p, h1, h2, h3 { +p, h1, h2, h3, ul, li, pre, blockquote { margin: 0; padding: 0; + font-weight: normal; } -blockquote { - border-left: 3px solid #444; - margin: 1rem -1rem 1rem calc(-1rem - 3px); - padding: 1rem; -} -pre { - padding: 1rem; - overflow-x: auto; -} diff --git a/css/terminal.css b/css/terminal.css index d137171..24e19b7 100644 --- a/css/terminal.css +++ b/css/terminal.css @@ -1,41 +1,19 @@ +@import "base.css"; + html { font-family: mono; - font-size: 1rem; color: #080; background-color: #000; } body { max-width: 76em; - margin: auto; - margin-top: 0.5em; -} - -ul { - margin: 0.4rem 0; - padding: 0; -} - -p, pre { - margin: 0 0 0.3rem; - padding: 0; -} - -li { - margin: 0; - padding: 0; } h1, h2, h3 { color: #0b0; - margin: 0; - padding: 0; } -h1 { font-size: 2rem; } -h2 { font-size: 1.8rem; } -h3 { font-size: 1.2rem; } - blockquote { background-color: #010; border-left: 3px solid #444; @@ -44,12 +22,17 @@ blockquote { padding: 1rem; } +pre { + scrollbar-color: #030 #010; + background-color: #010; + margin: 0 -1rem; + padding: 1rem; +} + a { margin: -1.35rem; color: #090; font-weight: bold; - text-decoration: none; - text-justify: none; } a:before { @@ -90,33 +73,3 @@ a.mumble:before { a.mailto:before { content: "M "; } - -pre { - scrollbar-color: #030 #010; - background-color: #010; - margin: 0 -1rem; - padding: 1rem; - overflow-x: auto; -} - -@media only screen and (max-width: 1024px) { - a { - margin: -3rem; - } - body { - margin: 3rem; - } - h1 { - font-size: 4rem; - } - h2 { - font-size: 3.5rem; - } - h3 { - font-size: 3rem; - } - p, pre, ul { - font-size: 2.6rem; - } -} - diff --git a/lib-htmgem.php b/lib-htmgem.php index 2a2cb80..a471e63 100644 --- a/lib-htmgem.php +++ b/lib-htmgem.php @@ -362,7 +362,7 @@ class GemtextTranslate_html { EOL; foreach ($css as $c) { - $output .= "\n"; + $output .= "\n\n"; } $output .= <<