fix up css

4 files changed, 43 insertions, 39 deletions

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;
 }