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,250 +1,85 @@
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 -
----------------
a template for Lionwiki-t2t
https://lionwiki-t2t.sourceforge.io/
a template for htmGem
based on
https://github.com/skyjake/lagrange
----------------------------*/
/* theme 1 */
/* gemini link */
/* web link */
/* normal or bold */
@font-face {
font-family: nunito;
font-style: normal;
font-weight: 400;
src: local('Nunito Medium'), url(Nunito-Medium.ttf) format('truetype');
src: local('Nunito Bold'), url(Nunito-Bold.ttf) format('truetype');
}
/* Source Sans Pro */
@font-face {
font-family: Source Sans;
font-family: Mada;
font-style: normal;
font-weight: normal;
src: url(SourceSansPro-Regular.ttf) format('truetype');
font-weight: 400;
src: local('Mada'), url(Mada-Regular.ttf) format('truetype');
}
@font-face {
font-family: Source Sans;
font-family: Mada;
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-family: Mada;
font-style: bold;
font-weight: 800;
src: local('Mada Bold'), url(Mada-Bold.ttf) format('truetype');
}
@font-face {
font-family: Source Sans;
font-style: italic;
font-weight: bold;
src: url(SourceSansPro-BoldItalic.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: "Source Sans", "Nunito", "Roboto", "Source Sans 3", sans-serif;
font-family: "Mada", sans-serif;
font-weight: 400;
/* font-size: 15pt;*/
font-size: 1.4em;
font-size: 1.5em;
margin-top: 0em;
margin-left: 0em;
margin-right: 0em;
padding-right: 0em;
}
.menu-line {
font-size: 100%;
/*color: darken(@bg,15%);*/
padding: 2em;
font-size: 105%;
padding: 1.8em;
}
.menu-line h1 a {
/* color: #956a11;
font-weight: 300;
*/
}
#container {
#gmi {
max-width: 1024px;
margin: auto;
max-width: 37em;
}
.menu {
/* text-align: center;*/
margin-top: 0.5em;
margin-bottom: 1.5em;
}
.menu li {
display: inline-block;
list-style: none;
@ -254,12 +89,35 @@ body {
content: "";
}
h1, h2, h3 {
font-family: "Nunito", "Roboto", "Source Sans 3", sans-serif;
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: 2em;
font-size: 2.2em;
font-weight: 400;
margin-left: 0.5em;
}
@ -295,32 +153,11 @@ div.link {
margin-top: 0.15em;
margin-bottom: 0.15em;
}
a {
text-decoration: none;
font-weight: 600;
color: #734c00;
}
a:hover {
color: #0a6e82;
}
p {
margin-left: 1.8em;
margin-right: 0.5em;
}
p {
margin-top: 0;
margin-bottom: 0.15em;
}
p:empty {
margin-top: 0.3em;
margin-bottom: 0.3em;
}
p.lede {
font-size: 120%;
margin-left: 1.25em;
}
ul {
list-style: none;
margin-left: 0;
@ -330,42 +167,135 @@ ol {
margin-left: 0;
padding-left: 3em;
}
ul li,
ol li {
ul li, ol li {
margin-top: 5pt;
margin-bottom: 5pt;
}
ul li::before {
content: "•";
color: #503909;
font-weight: bold;
display: inline-block;
width: 1.1em;
margin-left: -1.1em;
}
blockquote {
margin-left: 2.25em;
font-style: italic;
font-weight: 300;
padding-left: 0.75em;
border-left: 1px solid #c38b16;
}
pre {
font-family: monospace;
font-size: 100%;
margin-left: 2.5em;
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.0em;
font-size: 1.2em;
-webkit-text-size-adjust: 100%;
padding-left: 0;
padding-right: 0;
@ -373,25 +303,40 @@ img {
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-right: 1em;
font-size: 1.2em;
margin-left: 0.7em ;
}
h1
{
font-size: 1.8em;
font-weight: bold;
}
h2
{
font-size: 1.4em;
font-weight: bold;
}
h3
{
font-size: 1.2em;
font-weight: bold;
#gmi a {
margin: 0.3em;
}
}
@ -406,11 +351,44 @@ img {
}
/* doesn't work:
@import "green.css";
*/
/* Orange / sepia Colors (for lagrange.css) */
/* Orange Colors (for lagrange.css) */
html, body {
background: #f5ebd6;
color: #192715;
}
blockquote, pre {
/*background: #ede3d0;
*/
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;
}
ul li::before {
color: #503909;
}
blockquote:before {
color: #e5b77a;
}
.menu-line {
background-color: #efd9b7;
@ -420,36 +398,36 @@ img {
font-weight: 300;
}
html,
body {
background: #f5ebd6;
color: #192715;
.menu a, .menu a:visited {
#color: #888;
}
.menu a:hover {
#color: #000;
}
blockquote, pre {
background: #ede3d0;
#gmi a:before {
color: #d2780a;
}
h1 a {
color: #eeeeee;
font-weight: 800;
}
h1 {
color: #d2780a;
font-weight: 800;
#gmi a:visited {
color: #a25707;
}
h2, h3 {
color: #693c05;
}
a:hover {
#gmi a:hover {
color: #0a6e82;
}
a {
color: #693c05;
#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
```
Other available styles:
* style=lagrange,lagrange.css
* style=lagrange,lagrange_gray.css
* style=default,circumlunar.css
* etc…
## 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.

View File

@ -31,6 +31,12 @@ RewriteEngine on
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
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.