diff --git a/css/lagrange/Mada-Bold.ttf b/css/lagrange/Mada-Bold.ttf new file mode 100644 index 0000000..dd6cef4 Binary files /dev/null and b/css/lagrange/Mada-Bold.ttf differ diff --git a/css/lagrange/Mada-Regular.ttf b/css/lagrange/Mada-Regular.ttf new file mode 100644 index 0000000..44d7aa5 Binary files /dev/null and b/css/lagrange/Mada-Regular.ttf differ diff --git a/css/lagrange/Nunito-Bold.ttf b/css/lagrange/Nunito-Bold.ttf new file mode 100644 index 0000000..14be6b7 Binary files /dev/null and b/css/lagrange/Nunito-Bold.ttf differ diff --git a/css/lagrange/Nunito-Medium.ttf b/css/lagrange/Nunito-Medium.ttf deleted file mode 100644 index a9a0083..0000000 Binary files a/css/lagrange/Nunito-Medium.ttf and /dev/null differ diff --git a/css/lagrange/RobotoMono.ttf b/css/lagrange/RobotoMono.ttf new file mode 100644 index 0000000..3dbe11f Binary files /dev/null and b/css/lagrange/RobotoMono.ttf differ diff --git a/css/lagrange/SourceSansPro-Bold.ttf b/css/lagrange/SourceSansPro-Bold.ttf deleted file mode 100644 index b8879af..0000000 Binary files a/css/lagrange/SourceSansPro-Bold.ttf and /dev/null differ diff --git a/css/lagrange/SourceSansPro-BoldItalic.ttf b/css/lagrange/SourceSansPro-BoldItalic.ttf deleted file mode 100644 index b38bae9..0000000 Binary files a/css/lagrange/SourceSansPro-BoldItalic.ttf and /dev/null differ diff --git a/css/lagrange/SourceSansPro-Regular.ttf b/css/lagrange/SourceSansPro-Regular.ttf deleted file mode 100644 index 98e8579..0000000 Binary files a/css/lagrange/SourceSansPro-Regular.ttf and /dev/null differ diff --git a/css/lagrange/lagrange.css b/css/lagrange/lagrange.css index bcc0b5d..2ef9e2c 100644 --- a/css/lagrange/lagrange.css +++ b/css/lagrange/lagrange.css @@ -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 - ----------------- - -a template for Lionwiki-t2t -https://lionwiki-t2t.sourceforge.io/ - -based on - + ---------------- + - Lagrange - + ---------------- + + 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'); + + + + @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'); } -/* Source Sans Pro */ -@font-face { - font-family: Source Sans; - font-style: normal; - font-weight: normal; - 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'); - + @font-face { + font-family: mycourier; + font-style: normal; + font-weight: 400; + src: local('Courier'), url(courier.ttf) format('truetype'); } -body { - font-family: "Source Sans", "Nunito", "Roboto", "Source Sans 3", sans-serif; - font-weight: 400; - /* font-size: 15pt;*/ - font-size: 1.4em; - margin-top: 0em; - 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: ""; + + @font-face { + font-family: Roboto Mono; + font-style: normal; + font-weight: 400; + src: local('Roboto Mono'), url(RobotoMono.ttf) format('truetype'); } -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; - 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; + + #gmi { + max-width: 1024px; + margin: auto; + margin-top: 0.5em; + margin-bottom: 1.5em; } -a { - text-decoration: none; - font-weight: 600; - color: #734c00; + + + .menu li { + display: inline-block; + list-style: none; + margin: 0 1rem; +} + .menu li::before { + content: ""; } -a:hover { - color: #0a6e82; + p { + margin-left: 2.5em; + margin-right: 0.5em; + margin-top: 0; + margin-bottom: 0.05em; } -p { - margin-left: 1.8em; - margin-right: 0.5em; + + p:empty { + 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 { - list-style: none; - margin-left: 0; - padding-left: 3em; + h2 { + font-size: 1.8em; + font-weight: 600; + margin-left: 0.5em; } -ol { - margin-left: 0; - padding-left: 3em; + h2 span.par-edit { + visibility: hidden; + font-size: x-small; } -ul li, -ol li { - margin-top: 5pt; - margin-bottom: 5pt; + h2:hover span.par-edit { + visibility: visible; } -ul li::before { - content: "β€’"; - color: #503909; - font-weight: bold; - display: inline-block; - width: 1.1em; - margin-left: -1.1em; + h3 { + font-size: 1.6em; + font-weight: 700; + margin-left: 1em; } -blockquote { - margin-left: 2.25em; - font-style: italic; - font-weight: 300; - padding-left: 0.75em; - border-left: 1px solid #c38b16; + h4 { + margin-left: 2em; } -pre { - font-family: monospace; - font-size: 100%; - margin-left: 2.5em; - max-width: 100%; - overflow: auto; + .link-icon { + display: inline-block; + width: 1.5em; + font-family: Symbola; + text-indent: 0; } -img { - max-width: 100%; + 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.0em; - -webkit-text-size-adjust: 100%; - padding-left: 0; - padding-right: 0; - margin-left: 0; - margin-right: 0; - margin-top: 0; - } - p { - margin-right: 1em; - font-size: 1.2em; - } - h1 - { - font-size: 1.8em; - font-weight: bold; - } - h2 - { - font-size: 1.4em; - font-weight: bold; - } - h3 - { - font-size: 1.2em; - font-weight: bold; - } + @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; - } + @media (prefers-color-scheme: dark) { + body { + filter: invert(100%) hue-rotate(180deg); + } + html { + background-color: #111; + } } -/* doesn't work: -@import "green.css"; -*/ +/* Orange / sepia Colors (for lagrange.css) */ -/* Orange Colors (for lagrange.css) */ -.menu-line { - background-color: #efd9b7; + html, body { + background: #f5ebd6; + color: #192715; } -.menu-line h1 a { - color: #262626; - font-weight: 300; + 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; } -html, -body { - background: #f5ebd6; - color: #192715; + ul li::before { + color: #503909; +} + + + blockquote:before { + color: #e5b77a; } -blockquote, pre { - background: #ede3d0; - color: #d2780a; + .menu-line { + background-color: #efd9b7; +} + .menu-line h1 a { + color: #262626; + font-weight: 300; } - -h1 a { - color: #eeeeee; - font-weight: 800; + .menu a, .menu a:visited { + #color: #888; } -h1 { - color: #d2780a; - font-weight: 800; + .menu a:hover { + #color: #000; } -h2, h3 { - color: #693c05; + #gmi a:before { + color: #d2780a; } - -a:hover { - color: #0a6e82; + #gmi a:visited { + color: #a25707; } -a { - color: #693c05; + #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; +} \ No newline at end of file diff --git a/css/lagrange/lagrange_gray.css b/css/lagrange/lagrange_gray.css new file mode 100644 index 0000000..34f4be4 --- /dev/null +++ b/css/lagrange/lagrange_gray.css @@ -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; +} \ No newline at end of file