From 2d79422364007a83ab636bcc726a5b06a4bb8a2b Mon Sep 17 00:00:00 2001 From: Romain de Laage Date: Thu, 24 Nov 2022 09:52:47 +0100 Subject: [PATCH] Style and interaction improvments --- themes/poc/layouts/_default/baseof.html | 5 +-- themes/poc/layouts/_default/single.html | 1 - themes/poc/static/fedicomment.css | 39 ++++++++++++++++++---- themes/poc/static/fedicomment.js | 4 +-- themes/poc/static/main.css | 43 +++++++++++++++++++++++-- 5 files changed, 76 insertions(+), 16 deletions(-) diff --git a/themes/poc/layouts/_default/baseof.html b/themes/poc/layouts/_default/baseof.html index 02f1816..91b45ad 100644 --- a/themes/poc/layouts/_default/baseof.html +++ b/themes/poc/layouts/_default/baseof.html @@ -3,11 +3,8 @@ {{- partial "head.html" . -}}
-

{{ .Site.Title }}

+

{{ if .Params.Title}}{{ .Params.Title }}{{ else }}{{ .Site.Title }}{{ end }}

{{- block "main" . }}{{- end }} - diff --git a/themes/poc/layouts/_default/single.html b/themes/poc/layouts/_default/single.html index 4dc61cc..58f6084 100644 --- a/themes/poc/layouts/_default/single.html +++ b/themes/poc/layouts/_default/single.html @@ -1,6 +1,5 @@ {{ define "main" }}
-{{ if .Params.Title }}

{{ .Params.Title }}

{{ end }} {{ .Content }}
{{ if .Params.postid }} diff --git a/themes/poc/static/fedicomment.css b/themes/poc/static/fedicomment.css index 8a4dec6..bc0388b 100644 --- a/themes/poc/static/fedicomment.css +++ b/themes/poc/static/fedicomment.css @@ -1,5 +1,32 @@ +:root { + --fedi-button-color: #502102; + --fedi-warning-color: #b5680b; + --fedi-error-color: #fca01d; + --fedi-light-color: #f8efd5; + --fedi-dark-color: #2e1600; + --fedi-hl-color: #7c7672; +} + +#fedicomment-button { + background-color: var(--fedi-button-color); + border: none; + border-radius: 10px; + margin: auto; + color: var(--fedi-light-color); + padding: 15px 32px; + text-align: center; + text-decoration: none; + display: block; + font-size: 16px; + transition: 0.2s; +} + +#fedicomment-button:hover { + border-radius: 15px; +} + .fedicomment-alert { - color: white; + color: var(--fedi-light-color); text-align: center; font-weight: bold; padding: 30px; @@ -9,17 +36,17 @@ } .fedicomment-error { - background-color: red; + background-color: var(--fedi-error-color); } .fedicomment-warning { - background-color: blue; + background-color: var(--fedi-warning-color); } .fedicomment-comment { margin: 10px; padding: 10px; - border: solid grey 1px; + border: solid var(--fedi-hl-color) 1px; border-radius: 10px; } @@ -30,7 +57,7 @@ margin-left: 5px; padding: 0; padding-left: 5px; - border-left: solid grey 1px; + border-left: solid var(--fedi-hl-color) 1px; } .fedicomment-comment-header img { @@ -45,7 +72,7 @@ .fedicomment-reactions { margin: 10px; padding: 10px; - border: solid grey 1px; + border: solid var(--fedi-hl-color) 1px; border-radius: 10px; } diff --git a/themes/poc/static/fedicomment.js b/themes/poc/static/fedicomment.js index f9d55a0..6571539 100644 --- a/themes/poc/static/fedicomment.js +++ b/themes/poc/static/fedicomment.js @@ -1,6 +1,6 @@ class Fedicomment { container; - postod; + postid; mastodonurl; constructor() { @@ -50,7 +50,7 @@ class Fedicomment { .then((resp) => { if (resp.ok) { resp.json().then((data) => { - this.container.innerHTML = `
${data.reblogs_count} - ${data.favourites_count} - ${data.replies_count} replies
`; + this.container.innerHTML = `
Interact with this postCopy and paste this URL in your Mastodon application: ${data.url}
${data.reblogs_count} - ${data.favourites_count} - ${data.replies_count} replies
`; }) } else { diff --git a/themes/poc/static/main.css b/themes/poc/static/main.css index 89bf38f..fef8edb 100644 --- a/themes/poc/static/main.css +++ b/themes/poc/static/main.css @@ -1,21 +1,58 @@ +:root { + --bg-color: #fefee2; + --fg-color: #000000; + --hl-color1: #2f1b0c; + --hl-color2: #370028; + --link-color1: #2e006c; + --link-color2: #2c007a; +} + * { margin: 0; box-sizing: border-box; font-family: sans-serif; + color: var(--fg-color); +} + +a { + color: var(--link-color1); +} + +a:hover { + color: var(--link-color2); +} + +h1, h2, h3, h3, h5, h6 { + color: var(--hl-color1); +} + +h1:hover, h2:hover, h3:hover, h3:hover, h5:hover, h6:hover { + color: var(--hl-color2); } body { height: 100%; padding: 15px; - width: 70%; + width: 60%; margin: auto; + background-color: var(--bg-color); } -h1 { - margin: 15px; +header h1 { + margin: 60px; text-align: center; } +article h1, article h2, article h3, article h4, article h5, article h6 { + margin-bottom: 35px; + padding-left: 35px; +} + article { padding: 15px; } + +.articles { + line-height: 3em; + margin: 60px; +}