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