Initial version of app

app/resources/embed.css

@@ -0,0 +1,191 @@
+html,
+body {
+    background-color: #282c37;
+    font-family: 'Roboto', roboto, Arial, sans-serif;
+    color: #ffffff;
+    font-weight: lighter;
+    overflow-x: hidden;
+    font-size: 80%;
+    word-break: break-word;
+}
+
+* {
+    margin: 0;
+    padding: 0;
+}
+
+a,
+a * {
+    color: #2b90d9;
+}
+
+::-webkit-scrollbar {
+    display: none;
+}
+
+.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;
+    border: none;
+    max-height: 12rem;
+}
+
+a.enclosure {
+    cursor: zoom-in;
+}
+
+.enclosure > * {
+    flex: 1 1 auto;
+    width: 100%;
+    max-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;
+}