fix up css

8 files changed, 54 insertions, 43 deletions

diff --git a/server/Cargo.toml b/server/Cargo.toml
index dcaaba6..103c919 100644
--- a/server/Cargo.toml
+++ b/server/Cargo.toml
@@ -32,3 +32,6 @@ serde_json = "1.0.145"
 serde_yaml_ng = "0.10.0"
 tokio = { workspace = true }
 tokio-util = { version = "0.7.17", features = ["io", "io-util"] }
+
+[features]
+reload_css = ["jellyui/reload_css"]
diff --git a/ui/Cargo.toml b/ui/Cargo.toml
index 55ff42f..8801901 100644
--- a/ui/Cargo.toml
+++ b/ui/Cargo.toml
@@ -14,3 +14,6 @@ chrono = "0.4.43"
 jellyui-client-scripts = { path = "client-scripts" }
 jellyui-client-style = { path = "client-style" }
 jellyui-locale = { path = "locale" }
+
+[features]
+reload_css = ["jellyui-client-style/reload"]
diff --git a/ui/client-style/src/layout.css b/ui/client-style/src/layout.css
index 5c5272c..a7f0b28 100644
--- a/ui/client-style/src/layout.css
+++ b/ui/client-style/src/layout.css
@@ -120,32 +120,8 @@ summary h3 {
     margin-right: 3px;
 }
 
-.children {
-    padding: 1em;
-    padding-left: 3em;
-    padding-right: 3em;
-    list-style: none;
-    width: 100%;
-    box-sizing: border-box;
-    display: flex;
-}
-.children:not(.hlist) {
-    flex-wrap: wrap;
-}
-.children li {
-    display: block;
-}
-.hlist {
-    overflow-x: auto;
-    max-width: 100%;
-    flex-wrap: nowrap;
-}
-.hlist li {
-    display: inline-block;
-}
-
 @media (max-width: 750px) {
-    .hlist ul {
+    .nl.inline ul {
         padding-left: 0;
     }
 }
diff --git a/ui/client-style/src/nodecard.css b/ui/client-style/src/node_card.css
index 2c0b97f..2c0b97f 100644
--- a/ui/client-style/src/nodecard.css
+++ b/ui/client-style/src/node_card.css
diff --git a/ui/client-style/src/node_list.css b/ui/client-style/src/node_list.css
new file mode 100644
index 0000000..370d8df
--- /dev/null
+++ b/ui/client-style/src/node_list.css
@@ -0,0 +1,30 @@
+/*
+    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) 2026 metamuffin <metamuffin.org>
+*/
+
+.nl.grid {
+    padding: 1em;
+    padding-left: 3em;
+    padding-right: 3em;
+    list-style: none;
+    width: 100%;
+    box-sizing: border-box;
+    display: flex;
+}
+.nl.grid {
+    flex-wrap: wrap;
+}
+.nl.grid li {
+    display: block;
+}
+
+.nl.inline {
+    overflow-x: auto;
+    max-width: 100%;
+    flex-wrap: nowrap;
+}
+.nl.inline li {
+    display: inline-block;
+}
diff --git a/ui/client-style/src/nodepage.css b/ui/client-style/src/node_page.css
index 1a5b8ee..62c8c7e 100644
--- a/ui/client-style/src/nodepage.css
+++ b/ui/client-style/src/node_page.css
@@ -25,18 +25,16 @@
     object-fit: cover;
     object-position: center;
 }
-.page.node {
-    position: relative;
-    width: 100%;
-}
-.page.node .bigposter {
+.bigposter {
     width: max(8em, 25%);
     float: left;
     margin: 3em;
-    margin-top: -1em;
     height: 100%;
 }
-.page.node .bigposter img {
+.bigposter.has_backdrop {
+    margin-top: -1em;
+}
+.bigposter img {
     width: 100%;
     height: 100%;
     object-fit: cover;
@@ -57,24 +55,24 @@
     aspect-ratio: 1;
 }
 
-.page.node .title h1 {
+.title h1 {
     margin-right: 1em;
 }
-.page.node .title .play {
+.title .play {
     display: inline-block;
     font-size: small;
     background-color: #52b83340;
 }
-.page.node .title .play::before {
+.title .play::before {
     content: "play_arrow";
     vertical-align: middle;
 }
-.page.node .title .mark_watched,
-.page.node .title .mark_unwatched {
+.title .mark_watched,
+.title .mark_unwatched {
     display: inline-block;
 }
-.page.node .title .mark_watched input,
-.page.node .title .mark_unwatched input {
+.title .mark_watched input,
+.title .mark_unwatched input {
     background-color: #80808040;
 }
 
diff --git a/ui/src/components/node_list.rs b/ui/src/components/node_list.rs
index c3571de..cea6cb1 100644
--- a/ui/src/components/node_list.rs
+++ b/ui/src/components/node_list.rs
@@ -9,7 +9,7 @@ use jellycommon::{jellyobject::Object, *};
 
 markup::define! {
     NodeList<'a>(ri: &'a RenderInfo<'a>, nl: Object<'a>) {
-        ul.nodelist { @for nku in nl.iter(NODELIST_ITEM) {
+        ul.nl.grid { @for nku in nl.iter(NODELIST_ITEM) {
             li { @NodeCard { ri, nku } }
         }}
     }
diff --git a/ui/src/components/node_page.rs b/ui/src/components/node_page.rs
index 405f50a..c045dcc 100644
--- a/ui/src/components/node_page.rs
+++ b/ui/src/components/node_page.rs
@@ -17,11 +17,12 @@ markup::define! {
     NodePage<'a>(ri: &'a RenderInfo<'a>, nku: Object<'a>) {
         @let node = nku.get(NKU_NODE).unwrap_or_default();
         @let slug = node.get(NO_SLUG).unwrap_or_default();
-        @if let Some(path) = node.get(NO_PICTURES).unwrap_or_default().get(PICT_BACKDROP) {
+        @let pics = node.get(NO_PICTURES).unwrap_or_default();
+        @if let Some(path) = pics.get(PICT_BACKDROP) {
             img.backdrop[src=u_image(path, 2048)];
         }
-        @if let Some(path) = node.get(NO_PICTURES).unwrap_or_default().get(PICT_COVER) {
-            @let cls = format!("bigposter {}", aspect_class(node));
+        @if let Some(path) = pics.get(PICT_COVER) {
+            @let cls = format!("bigposter {} {}", aspect_class(node), if pics.has(PICT_BACKDROP.0) { "has_backdrop" } else { "" });
             div[class=cls] { img[src=u_image(path, 2048), loading="lazy"]; }
         }
         .title {