From fbc6c697296ec3e77c8d5e8540233611742eac57 Mon Sep 17 00:00:00 2001 From: Sam Therapy Date: Sun, 6 Feb 2022 16:48:09 -0600 Subject: [PATCH] Add misskey and pleroma themes Signed-off-by: Sam Therapy --- lib/template.ejs | 14 +- src/public/css/masto-auto.css | 309 +++++++++++++++ .../{pleroma.css => css/masto-dark.css} | 0 src/public/css/masto-light.css | 170 +++++++++ src/public/css/misskey-auto.css | 351 ++++++++++++++++++ src/public/css/misskey-dark.css | 171 +++++++++ src/public/css/misskey-light.css | 177 +++++++++ src/public/css/pleroma.css | 163 ++++++++ src/public/{ => css}/stylesheet.css | 2 +- src/public/index.html | 8 +- src/public/{ => js}/script.js | 0 11 files changed, 1359 insertions(+), 6 deletions(-) create mode 100644 src/public/css/masto-auto.css rename src/public/{pleroma.css => css/masto-dark.css} (100%) create mode 100644 src/public/css/masto-light.css create mode 100644 src/public/css/misskey-auto.css create mode 100644 src/public/css/misskey-dark.css create mode 100644 src/public/css/misskey-light.css create mode 100644 src/public/css/pleroma.css rename src/public/{ => css}/stylesheet.css (98%) rename src/public/{ => js}/script.js (100%) diff --git a/lib/template.ejs b/lib/template.ejs index 06b9357..d2c1f18 100644 --- a/lib/template.ejs +++ b/lib/template.ejs @@ -5,11 +5,19 @@ <% if (opts.theme && opts.theme.toLowerCase() == 'masto-light'){ %> - + <% } else if (opts.theme && opts.theme.toLowerCase() == 'auto'){ %> - + + <% } else if (opts.theme && opts.theme.toLowerCase() == 'misskey-dark'){ %> + + <% } else if (opts.theme && opts.theme.toLowerCase() == 'misskey-light'){ %> + + <% } else if (opts.theme && opts.theme.toLowerCase() == 'misskey-auto'){ %> + + <% } else if (opts.theme && opts.theme.toLowerCase() == 'pleroma'){ %> + <% } else { %> - + <% } %> <% if (opts.size){ %> diff --git a/src/public/css/masto-auto.css b/src/public/css/masto-auto.css new file mode 100644 index 0000000..773c8d8 --- /dev/null +++ b/src/public/css/masto-auto.css @@ -0,0 +1,309 @@ +html, +body { + background-color: #ffffff; + font-family: 'Roboto', roboto, Arial, sans-serif; + color: #282c37; + font-weight: lighter; + overflow-x: hidden; + font-size: 100%; + word-break: break-word; } + +* { + margin: 0; + padding: 0; } + +a, +a * { + color: #2b90d9; } + +.meta { + background-color: #ecf0f4; } + +.header { + display: flex; + background-size: cover; + min-height: 8rem; + color: #282c37; } + .header .header-left, .header .header-right { + margin: 0; } + .header .header-left { + min-width: 8rem; + position: relative; + text-align: center; + background: rgba(255, 255, 255, 0.3); } + .header .header-left .avatar { + width: 6rem; + height: 6rem; + position: relative; + top: calc(50% - 3rem); } + .header .header-right { + flex-grow: 1; + font-size: 0.9rem; + padding: 0.9rem; + background: rgba(255, 255, 255, 0.85); } + .header .header-title { + font-size: 1.3rem; } + +.item { + padding: 1rem; + border-top: solid 1px #8494ab; } + +.item-content, +.cw, +.title { + font-size: 1.1rem; + font-weight: lighter; } + +.item-content *, .cw { + margin: 1rem 0; + line-height: 1.4rem; } + +.item-title, +.date, +.author-fullname { + color: #90a1ba; + font-size: 0.9rem; } + +.date { + margin: 1rem 0 0 0; + text-decoration: none; + display: block; } + +.date:hover { + text-decoration: underline; } + +.item-title { + margin-bottom: 0.7rem; } + +.author { + display: flex; + margin-bottom: 1rem; } + +.author-info { + margin: 0 1rem; + display: flex; + flex-direction: column; + justify-content: space-around; } + .author-info .author-displayname { + font-size: 1.2rem; + color: #282c37; + text-decoration: none; + display: block; + font-weight: bolder; } + +.avatar { + width: 3rem; + height: 3rem; + border: none; + border-radius: 10%; } + .avatar.circular { + border-radius: 100%; } + +.enclosures { + padding: 0.5em 0; + display: flex; + flex-wrap: wrap; + flex-direction: row; + overflow: hidden; } + +.enclosure { + display: flex; + flex: 1 1 auto; + width: 50%; + border: none; + max-height: 12rem; } + +a.enclosure { + cursor: zoom-in; } + +.enclosure > * { + flex: 1 1 auto; + width: 100%; + height: 100%; + object-fit: cover; } + +.meta .title { + font-weight: bold; } + +.hidden { + display: none; } + +.button { + padding: 0.5rem 1rem; + border: none; + margin: 1rem; + border-radius: 0.5rem; + display: inline-block; + text-decoration: none; + background: #2b90d9; + color: #282c37; + font-weight: 400; + cursor: pointer; + text-transform: uppercase; + user-select: none; } + +label.button { + padding: 0.25rem 0.5rem; + margin: 0.4rem; + background: #8494ab; + color: #ffffff; + font-size: 0.8rem; } + +input[type=checkbox] { + position: absolute; + left: -9999px; } + +input[type=checkbox]:checked ~ label::after { + content: " Less"; } + +input[type=checkbox]:not(:checked) ~ label::after { + content: " More"; } + +input[type=checkbox]:not(:checked) ~ div { + display: none; } + +.item-content, +.description, +.title, +html, +body { + font-weight: normal; } + +@media (prefers-color-scheme: masto-dark) { + html, + body { + background-color: #282c37; + font-family: 'Roboto', roboto, Arial, sans-serif; + color: #ffffff; + font-weight: lighter; + overflow-x: hidden; + font-size: 100%; + word-break: break-word; } + * { + margin: 0; + padding: 0; } + a, + a * { + color: #2b90d9; } + .meta { + background-color: #39404d; } + .header { + display: flex; + background-size: cover; + min-height: 8rem; + color: #ffffff; } + .header .header-left, .header .header-right { + margin: 0; } + .header .header-left { + min-width: 8rem; + position: relative; + text-align: center; + background: rgba(40, 44, 55, 0.3); } + .header .header-left .avatar { + width: 6rem; + height: 6rem; + position: relative; + top: calc(50% - 3rem); } + .header .header-right { + flex-grow: 1; + font-size: 0.9rem; + padding: 0.9rem; + background: rgba(40, 44, 55, 0.85); } + .header .header-title { + font-size: 1.3rem; } + .item { + padding: 1rem; + border-top: solid 1px #626d80; } + .item-content, + .cw, + .title { + font-size: 1.1rem; + font-weight: lighter; } + .item-content *, .cw { + margin: 1rem 0; + line-height: 1.4rem; } + .item-title, + .date, + .author-fullname { + color: #9baec8; + font-size: 0.9rem; } + .date { + margin: 1rem 0 0 0; + text-decoration: none; + display: block; } + .date:hover { + text-decoration: underline; } + .item-title { + margin-bottom: 0.7rem; } + .author { + display: flex; + margin-bottom: 1rem; } + .author-info { + margin: 0 1rem; + display: flex; + flex-direction: column; + justify-content: space-around; } + .author-info .author-displayname { + font-size: 1.2rem; + color: #ffffff; + text-decoration: none; + display: block; + font-weight: bolder; } + .avatar { + width: 3rem; + height: 3rem; + border: none; + border-radius: 10%; } + .avatar.circular { + border-radius: 100%; } + .enclosures { + padding: 0.5em 0; + display: flex; + flex-wrap: wrap; + flex-direction: row; + overflow: hidden; } + .enclosure { + display: flex; + flex: 1 1 auto; + width: 50%; + border: none; + max-height: 12rem; } + a.enclosure { + cursor: zoom-in; } + .enclosure > * { + flex: 1 1 auto; + width: 100%; + height: 100%; + object-fit: cover; } + .meta .title { + font-weight: bold; } + .hidden { + display: none; } + .button { + padding: 0.5rem 1rem; + border: none; + margin: 1rem; + border-radius: 0.5rem; + display: inline-block; + text-decoration: none; + background: #2b90d9; + color: #ffffff; + font-weight: 400; + cursor: pointer; + text-transform: uppercase; + user-select: none; } + label.button { + padding: 0.25rem 0.5rem; + margin: 0.4rem; + background: #626d80; + color: #282c37; + font-size: 0.8rem; } + input[type=checkbox] { + position: absolute; + left: -9999px; } + input[type=checkbox]:checked ~ label::after { + content: " Less"; } + input[type=checkbox]:not(:checked) ~ label::after { + content: " More"; } + input[type=checkbox]:not(:checked) ~ div { + display: none; } } diff --git a/src/public/pleroma.css b/src/public/css/masto-dark.css similarity index 100% rename from src/public/pleroma.css rename to src/public/css/masto-dark.css diff --git a/src/public/css/masto-light.css b/src/public/css/masto-light.css new file mode 100644 index 0000000..d2ebe1e --- /dev/null +++ b/src/public/css/masto-light.css @@ -0,0 +1,170 @@ +html, +body { + background-color: #ffffff; + font-family: 'Roboto', roboto, Arial, sans-serif; + color: #282c37; + font-weight: lighter; + overflow-x: hidden; + font-size: 100%; + word-break: break-word; } + +* { + margin: 0; + padding: 0; } + +a, +a * { + color: #2b90d9; } + +.meta { + background-color: #ecf0f4; } + +.header { + display: flex; + background-size: cover; + min-height: 8rem; + color: #282c37; } + .header .header-left, .header .header-right { + margin: 0; } + .header .header-left { + min-width: 8rem; + position: relative; + text-align: center; + background: rgba(255, 255, 255, 0.3); } + .header .header-left .avatar { + width: 6rem; + height: 6rem; + position: relative; + top: calc(50% - 3rem); } + .header .header-right { + flex-grow: 1; + font-size: 0.9rem; + padding: 0.9rem; + background: rgba(255, 255, 255, 0.85); } + .header .header-title { + font-size: 1.3rem; } + +.item { + padding: 1rem; + border-top: solid 1px #8494ab; } + +.item-content, +.cw, +.title { + font-size: 1.1rem; + font-weight: lighter; } + +.item-content *, .cw { + margin: 1rem 0; + line-height: 1.4rem; } + +.item-title, +.date, +.author-fullname { + color: #90a1ba; + font-size: 0.9rem; } + +.date { + margin: 1rem 0 0 0; + text-decoration: none; + display: block; } + +.date:hover { + text-decoration: underline; } + +.item-title { + margin-bottom: 0.7rem; } + +.author { + display: flex; + margin-bottom: 1rem; } + +.author-info { + margin: 0 1rem; + display: flex; + flex-direction: column; + justify-content: space-around; } + .author-info .author-displayname { + font-size: 1.2rem; + color: #282c37; + text-decoration: none; + display: block; + font-weight: bolder; } + +.avatar { + width: 3rem; + height: 3rem; + border: none; + border-radius: 10%; } + .avatar.circular { + border-radius: 100%; } + +.enclosures { + padding: 0.5em 0; + display: flex; + flex-wrap: wrap; + flex-direction: row; + overflow: hidden; } + +.enclosure { + display: flex; + flex: 1 1 auto; + width: 50%; + border: none; + max-height: 12rem; } + +a.enclosure { + cursor: zoom-in; } + +.enclosure > * { + flex: 1 1 auto; + width: 100%; + height: 100%; + object-fit: cover; } + +.meta .title { + font-weight: bold; } + +.hidden { + display: none; } + +.button { + padding: 0.5rem 1rem; + border: none; + margin: 1rem; + border-radius: 0.5rem; + display: inline-block; + text-decoration: none; + background: #2b90d9; + color: #282c37; + font-weight: 400; + cursor: pointer; + text-transform: uppercase; + user-select: none; } + +label.button { + padding: 0.25rem 0.5rem; + margin: 0.4rem; + background: #8494ab; + color: #ffffff; + font-size: 0.8rem; } + +input[type=checkbox] { + position: absolute; + left: -9999px; } + +input[type=checkbox]:checked ~ label::after { + content: " Less"; } + +input[type=checkbox]:not(:checked) ~ label::after { + content: " More"; } + +input[type=checkbox]:not(:checked) ~ div { + display: none; } + +.item-content, +.description, +.title, +html, +body { + font-weight: normal; } diff --git a/src/public/css/misskey-auto.css b/src/public/css/misskey-auto.css new file mode 100644 index 0000000..3b6376e --- /dev/null +++ b/src/public/css/misskey-auto.css @@ -0,0 +1,351 @@ +html, +body { + background-color: rgb(249, 249, 249); + font-family: 'Roboto', roboto, Arial, sans-serif; + color: #282c37; + font-weight: lighter; + overflow-x: hidden; + font-size: 100%; + word-break: break-word; } + +* { + margin: 0; + padding: 0; } + +a, +a * { + color: rgb(68, 164, 193); } + +a[rel = "tag"] { + color: rgb(255, 145, 86); } + +.meta { + background-color: #ecf0f4; } + +.header { + display: flex; + background-size: cover; + min-height: 8rem; + color: #282c37; } + .header .header-left, .header .header-right { + margin: 0; } + .header .header-left { + min-width: 8rem; + position: relative; + text-align: center; + background: rgba(255, 255, 255, 0.3); } + .header .header-left .avatar { + width: 6rem; + height: 6rem; + position: relative; + top: calc(50% - 3rem); } + .header .header-right { + flex-grow: 1; + font-size: 0.9rem; + padding: 0.9rem; + background: rgba(255, 255, 255, 0.85); } + .header .header-title { + font-size: 1.3rem; } + +.item { + padding: 1rem; + border-top: solid 1px #8494ab; } + +.item-content, +.cw, +.title { + font-size: 1.1rem; + font-weight: lighter; } + +.item-content *, .cw { + margin: 1rem 0; + line-height: 1.4rem; } + +.item-title, +.date, +.author-fullname { + color: #90a1ba; + font-size: 0.9rem; } + +.date { + margin: 1rem 0 0 0; + text-decoration: none; + display: block; } + +.date:hover { + text-decoration: underline; } + +.item-title { + margin-bottom: 0.7rem; } + +.author { + display: flex; + margin-bottom: 1rem; } + +.author-info { + margin: 0 1rem; + display: flex; + flex-direction: column; + justify-content: space-around; } + .author-info .author-displayname { + font-size: 1.2rem; + color: #282c37; + text-decoration: none; + display: block; + font-weight: bolder; } + +.avatar { + width: 3rem; + height: 3rem; + border: none; + border-radius: 10%; } + .avatar.circular { + border-radius: 100%; } + +.enclosures { + padding: 0.5em 0; + display: flex; + flex-wrap: wrap; + flex-direction: row; + overflow: hidden; } + +.enclosure { + display: flex; + flex: 1 1 auto; + width: 50%; + border: none; + max-height: 12rem; } + +a.enclosure { + cursor: zoom-in; } + +.enclosure > * { + flex: 1 1 auto; + width: 100%; + height: 100%; + object-fit: cover; } + +.meta .title { + font-weight: bold; } + +.hidden { + display: none; } + +.u-url, + .mention{ + color: #86b300; } + +.button { + padding: 0.5rem 1rem; + border: none; + margin: 1rem; + border-radius: 0.5rem; + display: inline-block; + text-decoration: none; + background: #2b90d9; + color: #282c37; + font-weight: 400; + cursor: pointer; + text-transform: uppercase; + user-select: none; } + +label.button { + padding: 0.25rem 0.5rem; + margin: 0.4rem; + background: #8494ab; + color: #ffffff; + font-size: 0.8rem; } + +input[type=checkbox] { + position: absolute; + left: -9999px; } + +input[type=checkbox]:checked ~ label::after { + content: " Less"; } + +input[type=checkbox]:not(:checked) ~ label::after { + content: " More"; } + +input[type=checkbox]:not(:checked) ~ div { + display: none; } + +.item-content, +.description, +.title, +html, +body { + font-weight: normal; } + +@media (prefers-color-scheme: misskey-dark) { +html, +body { + background-color: #232323; + font-family: 'Roboto', roboto, Arial, sans-serif; + color: #dadada; + font-weight: lighter; + overflow-x: hidden; + font-size: 100%; + word-break: break-word; } + +* { + margin: 0; + padding: 0; } + +a, +a * { + color: rgb(134, 179, 0); } + +a[rel = "tag"] { + color: rgb(76, 184, 212); } + +.meta { + background-color: #39404d; } + +.header { + display: flex; + background-size: cover; + min-height: 8rem; + color: rgb(199, 209, 216); } + .header .header-left, .header .header-right { + margin: 0; } + .header .header-left { + min-width: 8rem; + position: relative; + text-align: center; + background: rgba(45, 45, 45, 0.3); } + .header .header-left .avatar { + width: 6rem; + height: 6rem; + position: relative; + top: calc(50% - 3rem); } + .header .header-right { + flex-grow: 1; + font-size: 0.9rem; + padding: 0.9rem; + background: rgba(45, 45, 45, 0.85); } + .header .header-title { + font-size: 1.3rem; } + +.item { + padding: 1rem; + border-top: solid 1px #626d80; } + +.item-content, +.cw, +.title { + font-size: 1.1rem; + font-weight: lighter; } + +.item-content *, .cw { + margin: 1rem 0; + line-height: 1.4rem; } + +.item-title, +.date, +.author-fullname { + color: #9baec8; + font-size: 0.9rem; + opacity: .5; } + +.date { + margin: 1rem 0 0 0; + text-decoration: none; + display: block; } + +.date:hover { + text-decoration: underline; } + +.item-title { + margin-bottom: 0.7rem; } + +.author { + display: flex; + margin-bottom: 1rem; } + +.author-info { + margin: 0 1rem; + display: flex; + flex-direction: column; + justify-content: space-around; } + .author-info .author-displayname { + font-size: 1.2rem; + color: #dadada; + text-decoration: none; + display: block; + font-weight: bolder; } + +.avatar { + width: 3rem; + height: 3rem; + border: none; + border-radius: 10%; } + .avatar.circular { + border-radius: 100%; } + +.enclosures { + padding: 0.5em 0; + display: flex; + flex-wrap: wrap; + flex-direction: row; + overflow: hidden; } + +.enclosure { + display: flex; + flex: 1 1 auto; + width: 50%; + border: none; + max-height: 12rem; } + +a.enclosure { + cursor: zoom-in; } + +.enclosure > * { + flex: 1 1 auto; + width: 100%; + height: 100%; + object-fit: cover; } + +.meta .title { + font-weight: bold; } + +.hidden { + display: none; } + +.u-url, + .mention{ + color: #86b300; } + +.button { + padding: 0.5rem 1rem; + border: none; + margin: 1rem; + border-radius: 0.5rem; + display: inline-block; + text-decoration: none; + background: rgba(255, 255, 255, 0.05); + color: rgba(255, 255, 255, 0.1); + font-weight: 400; + cursor: pointer; + text-transform: uppercase; + user-select: none; } + +label.button { + padding: 0.25rem 0.5rem; + margin: 0.4rem; + background: #626d80; + color: #282c37; + font-size: 0.8rem; } + +input[type=checkbox] { + position: absolute; + left: -9999px; } + +input[type=checkbox]:checked ~ label::after { + content: " Less"; } + +input[type=checkbox]:not(:checked) ~ label::after { + content: " More"; } + +input[type=checkbox]:not(:checked) ~ div { + display: none; } } + \ No newline at end of file diff --git a/src/public/css/misskey-dark.css b/src/public/css/misskey-dark.css new file mode 100644 index 0000000..db4fa90 --- /dev/null +++ b/src/public/css/misskey-dark.css @@ -0,0 +1,171 @@ +html, +body { + background-color: #232323; + font-family: 'Roboto', roboto, Arial, sans-serif; + color: #dadada; + font-weight: lighter; + overflow-x: hidden; + font-size: 100%; + word-break: break-word; } + +* { + margin: 0; + padding: 0; } + +a, +a * { + color: rgb(134, 179, 0); } + +a[rel = "tag"] { + color: rgb(76, 184, 212); } + +.meta { + background-color: #39404d; } + +.header { + display: flex; + background-size: cover; + min-height: 8rem; + color: rgb(199, 209, 216); } + .header .header-left, .header .header-right { + margin: 0; } + .header .header-left { + min-width: 8rem; + position: relative; + text-align: center; + background: rgba(45, 45, 45, 0.3); } + .header .header-left .avatar { + width: 6rem; + height: 6rem; + position: relative; + top: calc(50% - 3rem); } + .header .header-right { + flex-grow: 1; + font-size: 0.9rem; + padding: 0.9rem; + background: rgba(45, 45, 45, 0.85); } + .header .header-title { + font-size: 1.3rem; } + +.item { + padding: 1rem; + border-top: solid 1px #626d80; } + +.item-content, +.cw, +.title { + font-size: 1.1rem; + font-weight: lighter; } + +.item-content *, .cw { + margin: 1rem 0; + line-height: 1.4rem; } + +.item-title, +.date, +.author-fullname { + color: #9baec8; + font-size: 0.9rem; + opacity: .5; } + +.date { + margin: 1rem 0 0 0; + text-decoration: none; + display: block; } + +.date:hover { + text-decoration: underline; } + +.item-title { + margin-bottom: 0.7rem; } + +.author { + display: flex; + margin-bottom: 1rem; } + +.author-info { + margin: 0 1rem; + display: flex; + flex-direction: column; + justify-content: space-around; } + .author-info .author-displayname { + font-size: 1.2rem; + color: #dadada; + text-decoration: none; + display: block; + font-weight: bolder; } + +.avatar { + width: 3rem; + height: 3rem; + border: none; + border-radius: 10%; } + .avatar.circular { + border-radius: 100%; } + +.enclosures { + padding: 0.5em 0; + display: flex; + flex-wrap: wrap; + flex-direction: row; + overflow: hidden; } + +.enclosure { + display: flex; + flex: 1 1 auto; + width: 50%; + border: none; + max-height: 12rem; } + +a.enclosure { + cursor: zoom-in; } + +.enclosure > * { + flex: 1 1 auto; + width: 100%; + height: 100%; + object-fit: cover; } + +.meta .title { + font-weight: bold; } + +.hidden { + display: none; } + +.u-url, + .mention{ + color: #86b300; } + +.button { + padding: 0.5rem 1rem; + border: none; + margin: 1rem; + border-radius: 0.5rem; + display: inline-block; + text-decoration: none; + background: rgba(255, 255, 255, 0.05); + color: rgba(255, 255, 255, 0.1); + font-weight: 400; + cursor: pointer; + text-transform: uppercase; + user-select: none; } + +label.button { + padding: 0.25rem 0.5rem; + margin: 0.4rem; + background: #626d80; + color: #282c37; + font-size: 0.8rem; } + +input[type=checkbox] { + position: absolute; + left: -9999px; } + +input[type=checkbox]:checked ~ label::after { + content: " Less"; } + +input[type=checkbox]:not(:checked) ~ label::after { + content: " More"; } + +input[type=checkbox]:not(:checked) ~ div { + display: none; } diff --git a/src/public/css/misskey-light.css b/src/public/css/misskey-light.css new file mode 100644 index 0000000..f5f9d04 --- /dev/null +++ b/src/public/css/misskey-light.css @@ -0,0 +1,177 @@ +html, +body { + background-color: rgb(249, 249, 249); + font-family: 'Roboto', roboto, Arial, sans-serif; + color: #282c37; + font-weight: lighter; + overflow-x: hidden; + font-size: 100%; + word-break: break-word; } + +* { + margin: 0; + padding: 0; } + +a, +a * { + color: rgb(68, 164, 193); } + +a[rel = "tag"] { + color: rgb(255, 145, 86); } + +.meta { + background-color: #ecf0f4; } + +.header { + display: flex; + background-size: cover; + min-height: 8rem; + color: #282c37; } + .header .header-left, .header .header-right { + margin: 0; } + .header .header-left { + min-width: 8rem; + position: relative; + text-align: center; + background: rgba(255, 255, 255, 0.3); } + .header .header-left .avatar { + width: 6rem; + height: 6rem; + position: relative; + top: calc(50% - 3rem); } + .header .header-right { + flex-grow: 1; + font-size: 0.9rem; + padding: 0.9rem; + background: rgba(255, 255, 255, 0.85); } + .header .header-title { + font-size: 1.3rem; } + +.item { + padding: 1rem; + border-top: solid 1px #8494ab; } + +.item-content, +.cw, +.title { + font-size: 1.1rem; + font-weight: lighter; } + +.item-content *, .cw { + margin: 1rem 0; + line-height: 1.4rem; } + +.item-title, +.date, +.author-fullname { + color: #90a1ba; + font-size: 0.9rem; } + +.date { + margin: 1rem 0 0 0; + text-decoration: none; + display: block; } + +.date:hover { + text-decoration: underline; } + +.item-title { + margin-bottom: 0.7rem; } + +.author { + display: flex; + margin-bottom: 1rem; } + +.author-info { + margin: 0 1rem; + display: flex; + flex-direction: column; + justify-content: space-around; } + .author-info .author-displayname { + font-size: 1.2rem; + color: #282c37; + text-decoration: none; + display: block; + font-weight: bolder; } + +.avatar { + width: 3rem; + height: 3rem; + border: none; + border-radius: 10%; } + .avatar.circular { + border-radius: 100%; } + +.enclosures { + padding: 0.5em 0; + display: flex; + flex-wrap: wrap; + flex-direction: row; + overflow: hidden; } + +.enclosure { + display: flex; + flex: 1 1 auto; + width: 50%; + border: none; + max-height: 12rem; } + +a.enclosure { + cursor: zoom-in; } + +.enclosure > * { + flex: 1 1 auto; + width: 100%; + height: 100%; + object-fit: cover; } + +.meta .title { + font-weight: bold; } + +.hidden { + display: none; } + +.u-url, + .mention{ + color: #86b300; } + +.button { + padding: 0.5rem 1rem; + border: none; + margin: 1rem; + border-radius: 0.5rem; + display: inline-block; + text-decoration: none; + background: #2b90d9; + color: #282c37; + font-weight: 400; + cursor: pointer; + text-transform: uppercase; + user-select: none; } + +label.button { + padding: 0.25rem 0.5rem; + margin: 0.4rem; + background: #8494ab; + color: #ffffff; + font-size: 0.8rem; } + +input[type=checkbox] { + position: absolute; + left: -9999px; } + +input[type=checkbox]:checked ~ label::after { + content: " Less"; } + +input[type=checkbox]:not(:checked) ~ label::after { + content: " More"; } + +input[type=checkbox]:not(:checked) ~ div { + display: none; } + +.item-content, +.description, +.title, +html, +body { + font-weight: normal; } diff --git a/src/public/css/pleroma.css b/src/public/css/pleroma.css new file mode 100644 index 0000000..60e4ac1 --- /dev/null +++ b/src/public/css/pleroma.css @@ -0,0 +1,163 @@ +html, +body { + background-color: rgba(15, 22, 30, 1); + font-family: 'Roboto', roboto, Arial, sans-serif; + color: rgba(185, 185, 186, 1); + font-weight: lighter; + overflow-x: hidden; + font-size: 100%; + word-break: break-word; } + +* { + margin: 0; + padding: 0; } + +a, +a * { + color: #e2b188; } + +.meta { + background-color: #39404d; } + +.header { + display: flex; + background-size: cover; + min-height: 8rem; + color: rgba(185, 185, 186, 1); } + .header .header-left, .header .header-right { + margin: 0; } + .header .header-left { + min-width: 8rem; + position: relative; + text-align: center; + background: rgba(40, 44, 55, 0.3); } + .header .header-left .avatar { + width: 6rem; + height: 6rem; + position: relative; + top: calc(50% - 3rem); } + .header .header-right { + flex-grow: 1; + font-size: 0.9rem; + padding: 0.9rem; + background: rgba(40, 44, 55, 0.85); } + .header .header-title { + font-size: 1.3rem; } + +.item { + padding: 1rem; + border-top: solid 1px #626d80; } + +.item-content, +.cw, +.title { + font-size: 1.1rem; + font-weight: lighter; } + +.item-content *, .cw { + margin: 1rem 0; + line-height: 1.4rem; } + +.item-title, +.date, +.author-fullname { + color: rgba(185, 185, 186, 0.5); + font-size: 0.9rem; } + +.date { + margin: 1rem 0 0 0; + text-decoration: none; + display: block; } + +.date:hover { + text-decoration: underline; } + +.item-title { + margin-bottom: 0.7rem; } + +.author { + display: flex; + margin-bottom: 1rem; } + +.author-info { + margin: 0 1rem; + display: flex; + flex-direction: column; + justify-content: space-around; } + .author-info .author-displayname { + font-size: 1.2rem; + color: rgba(185, 185, 186, 1); + text-decoration: none; + display: block; + font-weight: bolder; } + +.avatar { + width: 3rem; + height: 3rem; + border: none; + border-radius: 10%; } + .avatar.circular { + border-radius: 100%; } + +.enclosures { + padding: 0.5em 0; + display: flex; + flex-wrap: wrap; + flex-direction: row; + overflow: hidden; } + +.enclosure { + display: flex; + flex: 1 1 auto; + width: 50%; + border: none; + max-height: 12rem; } + +a.enclosure { + cursor: zoom-in; } + +.enclosure > * { + flex: 1 1 auto; + width: 100%; + height: 100%; + object-fit: cover; } + +.meta .title { + font-weight: bold; } + +.hidden { + display: none; } + +.button { + padding: 0.5rem 1rem; + border: none; + margin: 1rem; + border-radius: 0.5rem; + display: inline-block; + text-decoration: none; + background: #2b90d9; + color: rgba(185, 185, 186, 1); + font-weight: 400; + cursor: pointer; + text-transform: uppercase; + user-select: none; } + +label.button { + padding: 0.25rem 0.5rem; + margin: 0.4rem; + background: #626d80; + color: #282c37; + font-size: 0.8rem; } + +input[type=checkbox] { + position: absolute; + left: -9999px; } + +input[type=checkbox]:checked ~ label::after { + content: " Less"; } + +input[type=checkbox]:not(:checked) ~ label::after { + content: " More"; } + +input[type=checkbox]:not(:checked) ~ div { + display: none; } diff --git a/src/public/stylesheet.css b/src/public/css/stylesheet.css similarity index 98% rename from src/public/stylesheet.css rename to src/public/css/stylesheet.css index d428c8e..5665634 100644 --- a/src/public/stylesheet.css +++ b/src/public/css/stylesheet.css @@ -43,7 +43,7 @@ body { text-size-adjust: none; box-sizing: border-box; font-family: Roboto, sans-serif; - background-color: #1f232b; + background-color: #000000; color: #5f6b84; font-size: 13px; line-height: 18px; diff --git a/src/public/index.html b/src/public/index.html index 35b00d2..6de5162 100644 --- a/src/public/index.html +++ b/src/public/index.html @@ -5,8 +5,8 @@ Fedifeed - embeddable ActivityPub feeds - - + + @@ -44,6 +44,10 @@ + + + +
diff --git a/src/public/script.js b/src/public/js/script.js similarity index 100% rename from src/public/script.js rename to src/public/js/script.js