diff --git a/site/css/default.css b/site/css/default.css index e6ff830..3e3142b 100644 --- a/site/css/default.css +++ b/site/css/default.css @@ -1,10 +1,12 @@ :root { + --background-color: darkslategrey; + --text-color: antiquewhite; --link-color: greenyellow; --link-visited-color: lightsteelblue; } body { - color: antiquewhite; + color: var(--text-color); font-size: 12pt; font-family: 'Tippa'; font-weight: normal; @@ -12,15 +14,16 @@ body { margin: 0; display: grid; grid-template-columns: [leftcol] 1fr [maincol] auto [rightcol] 1fr; - grid-template-rows: [headerrow] auto [mainrow] 1fr [footerrow] auto; + grid-template-rows: [headerrow] 1fr [mainrow] auto [plugrow] 1fr [extrasrow] 1fr; grid-template-areas: "inlinks logo outlinks" "main main main" - "plugs plugs extras"; + "plugs plugs plugs" + "extras extras extras"; justify-content: stretch; align-content: stretch; min-height: 100vh; - background-color: darkslategrey; + background-color: var(--background-color); } body::after { @@ -38,7 +41,7 @@ body::after { background-origin: padding-box; background-clip: content-box; background-position: center; - z-index: -1; + z-index: -2; } a { @@ -52,7 +55,7 @@ a:visited { } img, video { - margin: 10px; + padding: 10px; width: 66%; max-width: 500px; } @@ -61,8 +64,8 @@ hr { color: black; border: 0; background-color: black; - height: 2px; - margin: 5px 0 5px; + height: 3px; + margin: 20px 10% 20px; } header { @@ -79,20 +82,20 @@ header a:visited { color: var(--link-color); } -header > hr { - margin-top: 0px; -} - article { text-align: left; + padding: 0 0 5px; margin: 0 auto 0; - padding: 0 20px 0; overflow: auto; grid-area: main; max-width: 80em; } -article a:hover{ +article hr { + margin-top: 100px; +} + +article a:hover, .extras a:hover{ text-decoration: underline; } @@ -112,7 +115,7 @@ article li:before { article li { text-indent: -2ex; - margin-left: 1.5ex; + padding-left: 1.5ex; } .liberapay { @@ -123,6 +126,9 @@ article li { .inlinks { grid-area: inlinks; +} + +.inlinks ul { justify-content: flex-end; } @@ -133,6 +139,9 @@ article li { .outlinks { grid-area: outlinks; +} + +.outlnks ul { justify-content: flex-start; } @@ -144,23 +153,30 @@ article li { grid-area: extras; } -.inlinks, .outlinks, .tags, .plugs { +.plugs, .extras { + padding : 20px; + color: black; +} + +.inlinks, .outlinks, .tags, .plugs, .extras { padding: 20px 20px 20px 20px; + line-height: 100%; } .logo img { width: 200px; } -.tags p, .plugs p { +.tags p, .plugs p, article p { text-align: left; margin: 0; } -.inlinks, .outlinks, .plugs ul { +.inlinks ul, .outlinks ul, .plugs ul, .extras ul { list-style: none; margin: 0; display: inline-block; + height: 100%; } .inlinks li a:link, .outlinks li a:link { @@ -176,41 +192,93 @@ article li { color: var(--link-color); } -.inlinks, .outlinks, .plugs ul { +.inlinks ul, .outlinks ul, .plugs, .extras, .plugs ul, .extras ul { display: flex; flex-direction: row; align-items: center; } -.inlinks li, .outlinks li, .plugs li { +.inlinks li, .outlinks li { display: inline-block; - margin: 20px; + margin: 0; + padding: 20px; } .plugs li a { display: inline-block; - height: 40px; } -.plugs svg { +.plugs img { width: 40px; height: 40px; } -.plugs ul, .extras ul { - list-style: none; - padding: 0; +.plugs, .extras { + padding: 0 40px 0; margin: 0; } +.plugs, .extras, .plugs ul, .extras ul { + list-style: none; + justify-content: space-evenly; + padding: 0; +} + .plugs li, .extras li { display: inline-block; - text-align: center; - width: auto; - padding: 0; margin: 0; } +.extras a { + display: inline-block; + height: 40px; + line-height: 40px; + padding: 10px; +} + +.extras a:link, .extras a:visited { + color: black; + font-weight: bold; +} + +.plug-container, .extras-container { + display: inline-block; + height: 85px; + padding: 20px; +} + +.plug-container, .extras-container { + width: 25%; +} + +.plug-container::after, .extras-container::after { + content: ""; + position: relative; + top: -125px; + left: -20px; + display: inline-block; + height: 125px; + width: 100%; + background-color: var(--text-color); + border-radius: 5px; + opacity: 50%; + z-index: -1; +} + +/*.extras-container::after { + content: ""; + position: relative; + top: -100px; + left: -20px; + display: inline-block; + height: 125px; + width: 100%; + background-color: var(--text-color); + border-radius: 5px; + opacity: 50%; + z-index: -1; +}*/ + pre { border: dashed 1px #000000; border-radius: 5px; @@ -259,15 +327,15 @@ h2 { .left, .right { float: left; - margin-left: 25%; + padding-left: 25%; display: inline-block; fill: currentColor; } .left svg, .right svg { - margin-bottom: -3px; - margin-left: 0.8ex; - margin-right: 0.8ex; + padding-bottom: -3px; + padding-left: 0.8ex; + padding-right: 0.8ex; } .info { @@ -281,7 +349,7 @@ h2 { width: 2ex; height: 2ex; content: ""; - margin-right: 0.5ex; + padding-right: 0.5ex; background-repeat: no-repeat; background-size: contain; background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgaGVpZ2h0PSIxMDAlIgogICB3aWR0aD0iMTAwJSIKICAgdmVyc2lvbj0iMS4xIgogICBpZD0ic3ZnNDMwMyIKICAgdmlld0JveD0iMCAtMjU2IDE5NTAgMTk1MCI+CiAgPG1ldGFkYXRhCiAgICAgaWQ9Im1ldGFkYXRhNDMxMyI+CiAgICA8cmRmOlJERj4KICAgICAgPGNjOldvcmsKICAgICAgICAgcmRmOmFib3V0PSIiPgogICAgICAgIDxkYzpmb3JtYXQ+aW1hZ2Uvc3ZnK3htbDwvZGM6Zm9ybWF0PgogICAgICAgIDxkYzp0eXBlCiAgICAgICAgICAgcmRmOnJlc291cmNlPSJodHRwOi8vcHVybC5vcmcvZGMvZGNtaXR5cGUvU3RpbGxJbWFnZSIgLz4KICAgICAgICA8ZGM6dGl0bGU+PC9kYzp0aXRsZT4KICAgICAgPC9jYzpXb3JrPgogICAgPC9yZGY6UkRGPgogIDwvbWV0YWRhdGE+CiAgPGRlZnMKICAgICBpZD0iZGVmczQzMTEiIC8+CiAgPGcKICAgICBpZD0iZzQzMDUiCiAgICAgdHJhbnNmb3JtPSJtYXRyaXgoMSwwLDAsLTEsMjEuNjc4Nzg2LDEzOTIuODE5KSI+CiAgICA8cGF0aAogICAgICAgc3R5bGU9ImZpbGw6Y3VycmVudENvbG9yIgogICAgICAgaWQ9InBhdGg0MzA3IgogICAgICAgZD0ibSA0NDgsMTA4OCBxIDAsNTMgLTM3LjUsOTAuNSBRIDM3MywxMjE2IDMyMCwxMjE2IDI2NywxMjE2IDIyOS41LDExNzguNSAxOTIsMTE0MSAxOTIsMTA4OCAxOTIsMTAzNSAyMjkuNSw5OTcuNSAyNjcsOTYwIDMyMCw5NjAgcSA1MywwIDkwLjUsMzcuNSBRIDQ0OCwxMDM1IDQ0OCwxMDg4IHogTSAxNTE1LDUxMiBxIDAsLTUzIC0zNywtOTAgTCA5ODcsLTcwIHEgLTM5LC0zNyAtOTEsLTM3IC01MywwIC05MCwzNyBMIDkxLDY0NiBRIDUzLDY4MyAyNi41LDc0NyAwLDgxMSAwLDg2NCB2IDQxNiBxIDAsNTIgMzgsOTAgMzgsMzggOTAsMzggaCA0MTYgcSA1MywwIDExNywtMjYuNSA2NCwtMjYuNSAxMDIsLTY0LjUgbCA3MTUsLTcxNCBxIDM3LC0zOSAzNywtOTEgeiBtIDM4NCwwIHEgMCwtNTMgLTM3LC05MCBMIDEzNzEsLTcwIHEgLTM5LC0zNyAtOTEsLTM3IC0zNiwwIC01OSwxNCAtMjMsMTQgLTUzLDQ1IGwgNDcwLDQ3MCBxIDM3LDM3IDM3LDkwIDAsNTIgLTM3LDkxIGwgLTcxNSw3MTQgcSAtMzgsMzggLTEwMiw2NC41IC02NCwyNi41IC0xMTcsMjYuNSBoIDIyNCBxIDUzLDAgMTE3LC0yNi41IDY0LC0yNi41IDEwMiwtNjQuNSBsIDcxNSwtNzE0IHEgMzcsLTM5IDM3LC05MSB6IiAvPgogIDwvZz4KPC9zdmc+Cg==); @@ -289,7 +357,7 @@ h2 { .feed{ display: inline-block; - margin-bottom: -2px; + padding-bottom: -2px; fill: currentColor; } @@ -313,7 +381,7 @@ h2 { } .scripture p { - margin-top: 25px; + padding-top: 25px; } .with-initial > p:first-child::first-letter { @@ -323,15 +391,15 @@ h2 { font-weight: normal; font-style: normal; float: left; - margin-top: 0.1ex; - margin-right: 5px; + padding-top: 0.1ex; + padding-right: 5px; } .postlist { columns: 2; } -@media screen and (max-width: 1100px){ +@media screen and (max-width: 1100px) { body { display: block; @@ -372,7 +440,7 @@ h2 { img { float: right; - margin: 10px; + padding: 10px; padding-left: 100%; width: 230px; } diff --git a/site/images/gitea.svg b/site/images/gitea.svg new file mode 100644 index 0000000..fd9edfe --- /dev/null +++ b/site/images/gitea.svg @@ -0,0 +1,21 @@ + + + + + + + diff --git a/site/images/ko-fi.svg b/site/images/ko-fi.svg new file mode 100644 index 0000000..2c35eaf --- /dev/null +++ b/site/images/ko-fi.svg @@ -0,0 +1,2 @@ + + diff --git a/site/images/liberapay.svg b/site/images/liberapay.svg new file mode 100644 index 0000000..ff44b1b --- /dev/null +++ b/site/images/liberapay.svg @@ -0,0 +1,2 @@ + + diff --git a/site/images/mastodon.svg b/site/images/mastodon.svg new file mode 100644 index 0000000..4ef72a5 --- /dev/null +++ b/site/images/mastodon.svg @@ -0,0 +1,35 @@ + + + + + + + image/svg+xml + + + + + + + + + diff --git a/site/images/tipeee.svg b/site/images/tipeee.svg new file mode 100644 index 0000000..77aeb13 --- /dev/null +++ b/site/images/tipeee.svg @@ -0,0 +1,2 @@ + + diff --git a/site/images/twitter.svg b/site/images/twitter.svg new file mode 100644 index 0000000..0a4dae5 --- /dev/null +++ b/site/images/twitter.svg @@ -0,0 +1,2 @@ + + diff --git a/templates/default.html b/templates/default.html index 7e0896a..ecac3b3 100644 --- a/templates/default.html +++ b/templates/default.html @@ -24,23 +24,28 @@ - + - -
+ $if(datetime)$

$title$

@@ -49,19 +54,44 @@

$title$

$endif$ $body$ -

+ +