1 files changed, 65 insertions, 0 deletions
diff --git a/web/style/nodepage.css b/web/style/nodepage.css
new file mode 100644
index 0000000..e40706e
--- /dev/null
+++ b/web/style/nodepage.css
@@ -0,0 +1,65 @@
+/*
+    This file is part of jellything (https://codeberg.org/metamuffin/jellything)
+    which is licensed under the GNU Affero General Public License (version 3); see /COPYING.
+    Copyright (C) 2023 metamuffin <metamuffin.org>
+    Copyright (C) 2023 tpart
+*/
+.backdrop {
+    width: calc(100% + 2 * var(--main-side-margin));
+    height: calc(var(--backdrop-height) + 5em);
+    margin-left: calc(-1 * var(--main-side-margin));
+    margin-right: calc(-1 * var(--main-side-margin));
+    margin-top: calc(-1 * var(--bar-height));
+    margin-bottom: -5em;
+    -webkit-mask-image: linear-gradient(
+        rgba(0, 0, 0, 1),
+        transparent calc(var(--backdrop-height) + 5em)
+    );
+    mask-image: linear-gradient(
+        rgba(0, 0, 0, 1),
+        transparent calc(var(--backdrop-height) + 5em)
+    );
+    -webkit-mask-mode: alpha;
+    mask-mode: alpha;
+    pointer-events: none;
+    object-fit: cover;
+    object-position: center;
+}
+.page.node {
+    position: relative;
+    width: 100%;
+}
+.page.node .bigposter {
+    width: max(8em, 25%);
+    float: left;
+    margin: 3em;
+    margin-top: -1em;
+}
+.page.node .bigposter img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    object-position: center;
+}
+
+.page.node .title h1 {
+    display: inline;
+    margin-right: 1em;
+}
+.page.node .title .play {
+    display: inline;
+    font-stretch: 200%;
+}
+.page.node .title .play::before {
+    content: "▶";
+}
+
+.props p {
+    margin: 0.4em;
+    font-size: small;
+    font-weight: bolder;
+    display: inline-block;
+    padding: 0.2em;
+    background: #5a5a5a85;
+    border-radius: 4px;
+}