1
0
mirror of https://tildegit.org/sbgodin/HtmGem.git synced 2023-08-25 13:53:12 +02:00

Compare commits

...

2 Commits

Author SHA1 Message Date
12f823fe5a Updates doc: can use other styles in the config 2022-08-02 23:31:11 +02:00
86f07b2f2f Updates the Lagrange style
Thanks to Eric <ortie10 at gmx.fr>
2022-08-02 23:13:39 +02:00
12 changed files with 823 additions and 400 deletions

BIN
css/lagrange/Mada-Bold.ttf Normal file

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

BIN
css/lagrange/RobotoMono.ttf Normal file

Binary file not shown.

Binary file not shown.

View File

@ -1,455 +1,433 @@
html {
font-family: sans-serif;
}
#gmi {
max-width: 1024px;
margin: auto;
margin-top: 0.5em;
margin-bottom: 2em;
}
h1, h2, h3, blockquote, p, pre, li, ul {
margin: 0 0 0.3em;
padding: 0;
}
h1 { font-size: 2em; }
h2 { font-size: 1.6em; }
h3 { font-size: 1.2em; }
blockquote {
margin-left: 3em;
padding-left: 3px;
margin-right: 3em;
}
pre {
overflow-x: auto;
font-size: 1em;
}
a {
text-decoration: none;
}
.menu:nth-of-type(1) .menu-line {
text-align: left;
}
.menu:nth-of-type(3) .menu-line {
text-align: left;
}
.menu a, .menu a:visited {
#color: #888;
}
.menu a:hover {
#color: #000;
}
.menu hr {
border: 0;
}
/*
@media only screen and (max-width: 1024px) {
body {
margin: 0.5em 3em;
}
h1 {
font-size: 4em;
}
h2 {
font-size: 3.5em;
}
h3 {
font-size: 3em;
}
p, pre, ul, blockquote {
font-size: 2.6em;
}
.menu {
font-size: 2em;
}
.menu hr {
border: 1px solid gray;
}
}
*/
html {
color:#1E4147;
background-color:#fafafa;
}
h1, h2, h3 {
color: #66f;
}
blockquote {
background-color: #eee;
border-left: 3px solid #444;
margin: 1rem -1rem 1rem calc(-1rem - 3px);
padding: 1rem;
}
.menu a, .menu a:visited {
/* color: #888;*/
}
.menu a:hover {
/* color: #000;*/
}
.menu hr {
color: white;
}
#gmi a {
margin: -0.1rem;
color:#820;
}
#gmi a:before {
content: "🔗 ";
}
#gmi a:visited {
/* color: #868;*/
}
#gmi a:hover {
color: #0a6e82;
}
#gmi a.local:before {
content: "➤️ ";
font-weight: bold;
}
#gmi a.gemini:before {
content: "🚀 ";
}
#gmi a.gopher:before {
content: "📜 ";
}
#gmi a.https:before {
content: "🕸️ ";
font-weight: bolder;
}
#gmi a.http:before {
content: "🕸️ ";
font-weight: lighter;
}
#gmi a.mumble:before {
content: "🎤 ";
}
#gmi a.mailto:before {
content: "✉️ ";
}
@media only screen and (max-width: 1024px) {
#gmi a {
margin: -1.9rem;
}
}
/* *************************************** */
/*----------------------- /*-----------------------
---------------- ----------------
- Lagrange - - Lagrange -
---------------- ----------------
a template for Lionwiki-t2t a template for htmGem
https://lionwiki-t2t.sourceforge.io/
based on
based on
https://github.com/skyjake/lagrange https://github.com/skyjake/lagrange
----------------------------*/ ----------------------------*/
/* theme 1 */
/* gemini link */
/* web link */
/* normal or bold */ @font-face {
@font-face { font-family: nunito;
font-family: nunito; font-style: normal;
font-style: normal; font-weight: 400;
font-weight: 400; src: local('Nunito Bold'), url(Nunito-Bold.ttf) format('truetype');
src: local('Nunito Medium'), url(Nunito-Medium.ttf) format('truetype'); }
@font-face {
font-family: Mada;
font-style: normal;
font-weight: 400;
src: local('Mada'), url(Mada-Regular.ttf) format('truetype');
}
@font-face {
font-family: Mada;
font-style: italic;
font-weight: normal;
src: url(SourceSansPro-Italic.ttf) format('truetype');
}
@font-face {
font-family: Mada;
font-style: bold;
font-weight: 800;
src: local('Mada Bold'), url(Mada-Bold.ttf) format('truetype');
} }
/* Source Sans Pro */ @font-face {
@font-face { font-family: mycourier;
font-family: Source Sans; font-style: normal;
font-style: normal; font-weight: 400;
font-weight: normal; src: local('Courier'), url(courier.ttf) format('truetype');
src: url(SourceSansPro-Regular.ttf) format('truetype');
}
@font-face {
font-family: Source Sans;
font-style: italic;
font-weight: normal;
src: url(SourceSansPro-Italic.ttf) format('truetype');
}
@font-face {
font-family: Source Sans;
font-weight: bold;
src: url(SourceSansPro-Bold.ttf) format('truetype');
}
@font-face {
font-family: Source Sans;
font-style: italic;
font-weight: bold;
src: url(SourceSansPro-BoldItalic.ttf) format('truetype');
} }
body {
font-family: "Source Sans", "Nunito", "Roboto", "Source Sans 3", sans-serif; @font-face {
font-weight: 400; font-family: Roboto Mono;
/* font-size: 15pt;*/ font-style: normal;
font-size: 1.4em; font-weight: 400;
margin-top: 0em; src: local('Roboto Mono'), url(RobotoMono.ttf) format('truetype');
margin-left: 0em;
margin-right: 0em;
padding-right: 0em;
}
.menu-line {
font-size: 100%;
/*color: darken(@bg,15%);*/
padding: 2em;
}
.menu-line h1 a {
/* color: #956a11;
font-weight: 300;
*/
}
#container {
margin: auto;
max-width: 37em;
}
.menu {
/* text-align: center;*/
}
.menu li {
display: inline-block;
list-style: none;
margin: 0 1rem;
}
.menu li::before {
content: "";
} }
h1, h2, h3 {
font-family: "Nunito", "Roboto", "Source Sans 3", sans-serif;
body {
font-family: "Mada", sans-serif;
font-weight: 400;
font-size: 1.5em;
margin-top: 0em;
margin-left: 0em;
margin-right: 0em;
padding-right: 0em;
}
.menu-line {
font-size: 105%;
padding: 1.8em;
} }
h1 {
font-size: 2em; #gmi {
font-weight: 400; max-width: 1024px;
margin-left: 0.5em; margin: auto;
} margin-top: 0.5em;
h2 { margin-bottom: 1.5em;
font-size: 1.8em;
font-weight: 600;
margin-left: 0.5em;
}
h2 span.par-edit {
visibility: hidden;
font-size: x-small;
}
h2:hover span.par-edit {
visibility: visible;
}
h3 {
font-size: 1.6em;
font-weight: 700;
margin-left: 1em;
}
h4 {
margin-left: 2em;
}
.link-icon {
display: inline-block;
width: 1.5em;
font-family: Symbola;
text-indent: 0;
}
div.link {
text-indent: -1.5em;
padding-left: 1.5em;
margin-top: 0.15em;
margin-bottom: 0.15em;
} }
a {
text-decoration: none;
font-weight: 600; .menu li {
color: #734c00; display: inline-block;
list-style: none;
margin: 0 1rem;
}
.menu li::before {
content: "";
} }
a:hover { p {
color: #0a6e82; margin-left: 2.5em;
margin-right: 0.5em;
margin-top: 0;
margin-bottom: 0.05em;
} }
p {
margin-left: 1.8em; p:empty {
margin-right: 0.5em; margin-top: 0.3em;
margin-bottom: 0.3em;
} }
p {
margin-top: 0;
margin-bottom: 0.15em; li, ul {
margin: 0 0 0.3em;
padding: 0;
} }
p:empty {
margin-top: 0.3em;
margin-bottom: 0.3em; h1, h2, h3 {
font-family: "Nunito", sans-serif;
margin: 0 0 0.0em;
padding: 0;
} }
p.lede {
font-size: 120%;
margin-left: 1.25em;
h1 {
font-size: 2.2em;
font-weight: 400;
margin-left: 0.5em;
} }
ul { h2 {
list-style: none; font-size: 1.8em;
margin-left: 0; font-weight: 600;
padding-left: 3em; margin-left: 0.5em;
} }
ol { h2 span.par-edit {
margin-left: 0; visibility: hidden;
padding-left: 3em; font-size: x-small;
} }
ul li, h2:hover span.par-edit {
ol li { visibility: visible;
margin-top: 5pt;
margin-bottom: 5pt;
} }
ul li::before { h3 {
content: "•"; font-size: 1.6em;
color: #503909; font-weight: 700;
font-weight: bold; margin-left: 1em;
display: inline-block;
width: 1.1em;
margin-left: -1.1em;
} }
blockquote { h4 {
margin-left: 2.25em; margin-left: 2em;
font-style: italic;
font-weight: 300;
padding-left: 0.75em;
border-left: 1px solid #c38b16;
} }
pre { .link-icon {
font-family: monospace; display: inline-block;
font-size: 100%; width: 1.5em;
margin-left: 2.5em; font-family: Symbola;
max-width: 100%; text-indent: 0;
overflow: auto;
} }
img { div.link {
max-width: 100%; text-indent: -1.5em;
padding-left: 1.5em;
margin-top: 0.15em;
margin-bottom: 0.15em;
}
a {
text-decoration: none;
font-weight: 600;
}
ul {
list-style: none;
margin-left: 0;
padding-left: 3em;
}
ol {
margin-left: 0;
padding-left: 3em;
}
ul li, ol li {
margin-top: 5pt;
margin-bottom: 5pt;
}
ul li::before {
content: "•";
font-weight: bold;
display: inline-block;
width: 1.1em;
margin-left: -1.1em;
}
blockquote {
font-style: italic;
font-weight: 300;
padding-left: 0.75em;
font-size: 100%;
font-size: 1em;
/*border-left: 1px solid #c38b16;
*/
margin-left: 1em;
/* margin-right: 3em;*/
margin-top: -1em;
margin-bottom: 0em;
}
blockquote:before {
content: '“';
font-weight: bold;
font-size: 2.6em;
line-height: 0.1em;
/*vertical-align: -0.4em;*/
margin-top: -2em;
position: relative;
top: 0.85em;
left: 0.2em;
}
pre {
font-family: Roboto Mono, monospace;
font-size: 0.9em;
margin-left: 2.8em;
margin-bottom: 0.05em;
max-width: 100%;
overflow: auto;
}
img {
max-width: 100%;
}
.menu:nth-of-type(1) .menu-line {
text-align: left;
}
.menu:nth-of-type(3) .menu-line {
text-align: left;
}
.menu hr {
border: 0;
}
#gmi a {
margin: -1.5em;
}
#gmi a:before {
content: "🔗 ";
}
#gmi a:visited {
font-weight: normal;
/* doesn't work */
}
#gmi a.local:before {
content: "➤️ ";
font-weight: bold;
font-size: 1.5em;
}
#gmi a.local:visited {
font-weight: normal;
}
#gmi a.gemini:before {
content: "➤️ ";
font-size: 1.5em;
}
#gmi a.gopher:before {
content: "📜 ";
font-size: 1.5em;
}
#gmi a.https:before {
content: "🌐 ";
font-weight: bolder;
font-size: 1.5em;
}
#gmi a.http:before {
content: "🌐 ";
font-weight: lighter;
font-size: 1.5em;
}
#gmi a.mumble:before {
content: "🎤 ";
font-size: 1.5em;
}
#gmi a.mailto:before {
content: "✉️ ";
font-size: 1.5em;
} }
/* Responsivity */ /* Responsivity */
@media only screen and (max-width: 499px) and (orientation: portrait) { @media only screen and (max-width: 499px) and (orientation: portrait) {
body { body {
font-size: 1.0em; font-size: 1.2em;
-webkit-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;
padding-left: 0; padding-left: 0;
padding-right: 0; padding-right: 0;
margin-left: 0; margin-left: 0;
margin-right: 0; margin-right: 0;
margin-top: 0; margin-top: 0;
} }
p { h1 {
margin-right: 1em; font-size: 1.9em;
font-size: 1.2em; font-weight: bold;
} -webkit-text-size-adjust: 200%;
h1 }
{ h2 {
font-size: 1.8em; font-size: 1.5em;
font-weight: bold; font-weight: bold;
} -webkit-text-size-adjust: 160%;
h2 }
{ h3 {
font-size: 1.4em; font-size: 1.3em;
font-weight: bold; font-weight: bold;
} -webkit-text-size-adjust: 140%;
h3 }
{
font-size: 1.2em; blockquote {
font-weight: bold; margin-left: 1.5em ;
} }
blockquote:before {
position: relative;
top: 0.85em;
left: -0.3em;
}
p {
margin-left: 0.7em ;
}
#gmi a {
margin: 0.3em;
}
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
body { body {
filter: invert(100%) hue-rotate(180deg); filter: invert(100%) hue-rotate(180deg);
} }
html { html {
background-color: #111; background-color: #111;
} }
} }
/* doesn't work: /* Orange / sepia Colors (for lagrange.css) */
@import "green.css";
*/
/* Orange Colors (for lagrange.css) */
.menu-line { html, body {
background-color: #efd9b7; background: #f5ebd6;
color: #192715;
} }
.menu-line h1 a { blockquote, pre {
color: #262626; /*background: #ede3d0;
font-weight: 300; */
color: #d2780a;
}
h1 a {
color: #eeeeee;
font-weight: 800;
}
h1 {
color: #d2780a;
font-weight: 800;
}
h2, h3 {
color: #693c05;
}
a:hover {
color: #0a6e82;
}
a {
color: #693c05;
} }
html, ul li::before {
body { color: #503909;
background: #f5ebd6; }
color: #192715;
blockquote:before {
color: #e5b77a;
} }
blockquote, pre { .menu-line {
background: #ede3d0; background-color: #efd9b7;
color: #d2780a; }
.menu-line h1 a {
color: #262626;
font-weight: 300;
} }
.menu a, .menu a:visited {
h1 a { #color: #888;
color: #eeeeee;
font-weight: 800;
} }
h1 { .menu a:hover {
color: #d2780a; #color: #000;
font-weight: 800;
} }
h2, h3 { #gmi a:before {
color: #693c05; color: #d2780a;
} }
#gmi a:visited {
a:hover { color: #a25707;
color: #0a6e82;
} }
a { #gmi a:hover {
color: #693c05; color: #0a6e82;
} }
#gmi a.local:before {
color: #0a6e82;
}
#gmi a.gemini:before {
color: #0a6e82;
}
#gmi a.https:before {
color: #d2780a;
}
#gmi a.http:before {
color: #d2780a;
}

View File

@ -0,0 +1,433 @@
/*-----------------------
----------------
- Lagrange -
----------------
a template for htmGem
based on
https://github.com/skyjake/lagrange
----------------------------*/
@font-face {
font-family: nunito;
font-style: normal;
font-weight: 400;
src: local('Nunito Bold'), url(Nunito-Bold.ttf) format('truetype');
}
@font-face {
font-family: Mada;
font-style: normal;
font-weight: 400;
src: local('Mada'), url(Mada-Regular.ttf) format('truetype');
}
@font-face {
font-family: Mada;
font-style: italic;
font-weight: normal;
src: url(SourceSansPro-Italic.ttf) format('truetype');
}
@font-face {
font-family: Mada;
font-style: bold;
font-weight: 800;
src: local('Mada Bold'), url(Mada-Bold.ttf) format('truetype');
}
@font-face {
font-family: mycourier;
font-style: normal;
font-weight: 400;
src: local('Courier'), url(courier.ttf) format('truetype');
}
@font-face {
font-family: Roboto Mono;
font-style: normal;
font-weight: 400;
src: local('Roboto Mono'), url(RobotoMono.ttf) format('truetype');
}
body {
font-family: "Mada", sans-serif;
font-weight: 400;
font-size: 1.5em;
margin-top: 0em;
margin-left: 0em;
margin-right: 0em;
padding-right: 0em;
}
.menu-line {
font-size: 105%;
padding: 1.8em;
}
#gmi {
max-width: 1024px;
margin: auto;
margin-top: 0.5em;
margin-bottom: 1.5em;
}
.menu li {
display: inline-block;
list-style: none;
margin: 0 1rem;
}
.menu li::before {
content: "";
}
p {
margin-left: 2.5em;
margin-right: 0.5em;
margin-top: 0;
margin-bottom: 0.05em;
}
p:empty {
margin-top: 0.3em;
margin-bottom: 0.3em;
}
li, ul {
margin: 0 0 0.3em;
padding: 0;
}
h1, h2, h3 {
font-family: "Nunito", sans-serif;
margin: 0 0 0.0em;
padding: 0;
}
h1 {
font-size: 2.2em;
font-weight: 400;
margin-left: 0.5em;
}
h2 {
font-size: 1.8em;
font-weight: 600;
margin-left: 0.5em;
}
h2 span.par-edit {
visibility: hidden;
font-size: x-small;
}
h2:hover span.par-edit {
visibility: visible;
}
h3 {
font-size: 1.6em;
font-weight: 700;
margin-left: 1em;
}
h4 {
margin-left: 2em;
}
.link-icon {
display: inline-block;
width: 1.5em;
font-family: Symbola;
text-indent: 0;
}
div.link {
text-indent: -1.5em;
padding-left: 1.5em;
margin-top: 0.15em;
margin-bottom: 0.15em;
}
a {
text-decoration: none;
font-weight: 600;
}
ul {
list-style: none;
margin-left: 0;
padding-left: 3em;
}
ol {
margin-left: 0;
padding-left: 3em;
}
ul li, ol li {
margin-top: 5pt;
margin-bottom: 5pt;
}
ul li::before {
content: "•";
font-weight: bold;
display: inline-block;
width: 1.1em;
margin-left: -1.1em;
}
blockquote {
font-style: italic;
font-weight: 300;
padding-left: 0.75em;
font-size: 100%;
font-size: 1em;
/*border-left: 1px solid #c38b16;
*/
margin-left: 1em;
/* margin-right: 3em;*/
margin-top: -1em;
margin-bottom: 0em;
}
blockquote:before {
content: '“';
font-weight: bold;
font-size: 2.6em;
line-height: 0.1em;
/*vertical-align: -0.4em;*/
margin-top: -2em;
position: relative;
top: 0.85em;
left: 0.2em;
}
pre {
font-family: Roboto Mono, monospace;
font-size: 0.9em;
margin-left: 2.8em;
margin-bottom: 0.05em;
max-width: 100%;
overflow: auto;
}
img {
max-width: 100%;
}
.menu:nth-of-type(1) .menu-line {
text-align: left;
}
.menu:nth-of-type(3) .menu-line {
text-align: left;
}
.menu hr {
border: 0;
}
#gmi a {
margin: -1.5em;
}
#gmi a:before {
content: "🔗 ";
}
#gmi a:visited {
font-weight: normal;
/* doesn't work */
}
#gmi a.local:before {
content: "➤️ ";
font-weight: bold;
font-size: 1.5em;
}
#gmi a.local:visited {
font-weight: normal;
}
#gmi a.gemini:before {
content: "➤️ ";
font-size: 1.5em;
}
#gmi a.gopher:before {
content: "📜 ";
font-size: 1.5em;
}
#gmi a.https:before {
content: "🌐 ";
font-weight: bolder;
font-size: 1.5em;
}
#gmi a.http:before {
content: "🌐 ";
font-weight: lighter;
font-size: 1.5em;
}
#gmi a.mumble:before {
content: "🎤 ";
font-size: 1.5em;
}
#gmi a.mailto:before {
content: "✉️ ";
font-size: 1.5em;
}
/* Responsivity */
@media only screen and (max-width: 499px) and (orientation: portrait) {
body {
font-size: 1.2em;
-webkit-text-size-adjust: 100%;
padding-left: 0;
padding-right: 0;
margin-left: 0;
margin-right: 0;
margin-top: 0;
}
h1 {
font-size: 1.9em;
font-weight: bold;
-webkit-text-size-adjust: 200%;
}
h2 {
font-size: 1.5em;
font-weight: bold;
-webkit-text-size-adjust: 160%;
}
h3 {
font-size: 1.3em;
font-weight: bold;
-webkit-text-size-adjust: 140%;
}
blockquote {
margin-left: 1.5em ;
}
blockquote:before {
position: relative;
top: 0.85em;
left: -0.3em;
}
p {
margin-left: 0.7em ;
}
#gmi a {
margin: 0.3em;
}
}
@media (prefers-color-scheme: dark) {
body {
filter: invert(100%) hue-rotate(180deg);
}
html {
background-color: #111;
}
}
/* Grey Colors (for lagrange.css) */
html, body {
background: #cecece;
color: #343434;
}
blockquote, pre {
/*background: #ede8de;
*/
color: #6e4900;
}
h1 a {
color: #009966;
font-weight: 800;
}
h1 {
color: #009966;
font-weight: 800;
}
h2, h3 {
color: #005b3d;
}
a:hover {
color: #0a6e82;
}
a {
color: #000000;
}
ul li::before {
color: #503909;
}
blockquote:before {
color: #a29271;
}
.menu-line {
background-color: #e0e0e0;
}
.menu-line h1 a {
color: #005035;
font-weight: 300;
}
.menu a, .menu a:visited {
#color: #888;
}
.menu a:hover {
#color: #000;
}
#gmi a:before {
color: #d2780a;
}
#gmi a:visited {
color: #565656;
}
#gmi a:hover {
color: #0a6e82;
}
#gmi a.local:before {
color: #0a6e82;
}
#gmi a.gemini:before {
color: #0a6e82;
}
#gmi a.https:before {
color: #d2780a;
}
#gmi a.http:before {
color: #d2780a;
}

View File

@ -31,6 +31,12 @@ RewriteEngine on
rewriteRule ^(.+\.gmi)$ htmgem/index.php?rw=1&url=$1&style=default,htmgem.css rewriteRule ^(.+\.gmi)$ htmgem/index.php?rw=1&url=$1&style=default,htmgem.css
``` ```
Other available styles:
* style=lagrange,lagrange.css
* style=lagrange,lagrange_gray.css
* style=default,circumlunar.css
* etc…
## Text decoration ## Text decoration
The text decoration, which interprets the bold for instance, is not part of GemText definition. The text decoration applies everywhere except on the titles and preformated texts. The text decoration, which interprets the bold for instance, is not part of GemText definition. The text decoration applies everywhere except on the titles and preformated texts.

View File

@ -31,6 +31,12 @@ RewriteEngine on
rewriteRule ^(.+\.gmi)$ htmgem/index.php?rw=1&url=$1&style=default,htmgem.css rewriteRule ^(.+\.gmi)$ htmgem/index.php?rw=1&url=$1&style=default,htmgem.css
``` ```
Autres styles disponibles :
* style=lagrange,lagrange.css
* style=lagrange,lagrange_gray.css
* style=default,circumlunar.css
* etc…
## Décoration du texte ## Décoration du texte
La décoration du texte, qui interprête le **gras** par exemple, ne fait pas partie de la définition de GemText. La décoration du texte sapplique partout sauf sur les titres et blocs préformatés. La décoration du texte, qui interprête le **gras** par exemple, ne fait pas partie de la définition de GemText. La décoration du texte sapplique partout sauf sur les titres et blocs préformatés.