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