3 files changed, 29 insertions, 36 deletions

diff --git a/server/src/routes/ui/node.rs b/server/src/routes/ui/node.rs
index 5e69050..dc64eda 100644
--- a/server/src/routes/ui/node.rs
+++ b/server/src/routes/ui/node.rs
@@ -66,7 +66,7 @@ pub async fn r_library_node(
 
 markup::define! {
     NodeCard<'a>(id: &'a str, node: &'a NodePublic) {
-        @let cls = format!("card poster {}", match node.kind {NodeKind::Channel => "poster-square", NodeKind::Video => "thumb-land", NodeKind::Collection => "poster-land", _ => "poster-port"});
+        @let cls = format!("node card poster {}", match node.kind {NodeKind::Channel => "poster-square", NodeKind::Video => "thumb-land", NodeKind::Collection => "poster-land", _ => "poster-port"});
         div[class=cls] {
             div.banner {
                 a[href=uri!(r_library_node(id))] {
@@ -89,7 +89,7 @@ markup::define! {
         @if !matches!(node.kind, NodeKind::Collection) {
             img.backdrop[src=uri!(r_item_assets(id, AssetRole::Backdrop))];
         }
-        div.page.item {
+        div.page.node {
             @if !matches!(node.kind, NodeKind::Collection) {
                 div.banner { img[src=uri!(r_item_assets(id, AssetRole::Poster))]; }
             }
diff --git a/server/src/routes/ui/style/nodecard.css b/server/src/routes/ui/style/nodecard.css
index fea2a10..53ee10e 100644
--- a/server/src/routes/ui/style/nodecard.css
+++ b/server/src/routes/ui/style/nodecard.css
@@ -31,58 +31,58 @@
     filter: brightness(120%);
 }
 
-.card {
+.node.card {
     padding: 1em;
     height: var(--card-size);
 }
-.card.poster.poster-port {
+.node.card.poster.poster-port {
     width: calc(var(--card-size) / var(--port-poster-aspect));
 }
-.card.poster.poster-land {
+.node.card.poster.poster-land {
     width: calc(var(--card-size) / var(--land-poster-aspect));
 }
-.card.poster.thumb-land {
+.node.card.poster.thumb-land {
     width: calc(var(--card-size) / var(--land-thumb-aspect));
 }
-.card.poster.poster-square {
+.node.card.poster.poster-square {
     width: calc(var(--card-size));
 }
 
-.card .title {
+.node.card .title {
     margin-top: 0.1em;
     text-align: center;
     text-overflow: ellipsis;
 }
-.card .banner {
+.node.card .banner {
     display: grid;
 }
-.card .banner a {
+.node.card .banner a {
     grid-area: 1 / 1;
 }
 
-.card.poster.poster-port .banner img {
+.node.card.poster.poster-port .banner img {
     width: calc(var(--card-size) / var(--port-poster-aspect));
     height: var(--card-size);
 }
-.card.poster.poster-land .banner img {
+.node.card.poster.poster-land .banner img {
     width: calc(var(--card-size) / var(--land-poster-aspect));
     height: var(--card-size);
 }
-.card.poster.thumb-land .banner img {
+.node.card.poster.thumb-land .banner img {
     width: calc(var(--card-size) / var(--land-thumb-aspect));
     height: var(--card-size);
 }
-.card.poster.poster-square .banner img {
+.node.card.poster.poster-square .banner img {
     width: calc(var(--card-size));
     height: var(--card-size);
 }
-.card .banner a img {
+.node.card .banner a img {
     object-fit: cover;
     object-position: center;
 }
 
 
-.card.poster .banner .hoverdir {
+.node.card.poster .banner .hoverdir {
     transition: opacity 0.3s, backdrop-filter 0.3s;
     opacity: 0;
     display: flex;
@@ -91,12 +91,12 @@
     height: 5em;
     margin-top: -5em;
 }
-.card.poster .banner:hover .hoverdir {
+.node.card.poster .banner:hover .hoverdir {
     opacity: 1;
     background-color: #0004;
     backdrop-filter: blur(3px);
 }
-.card.poster .banner .hoverdir a {
+.node.card.poster .banner .hoverdir a {
     text-decoration: none;
     width: 100%;
     height: 1.7em;
@@ -109,11 +109,11 @@
     margin: 0.6em;
     transition: background-color 0.2s;
 }
-.card.poster .banner .hoverdir a:hover {
+.node.card.poster .banner .hoverdir a:hover {
     background-color: #0008;
 }
 
-.card.poster .banner .hoveritem {
+.node.card.poster .banner .hoveritem {
     pointer-events: none;
     grid-area: 1 / 1;
     transition: opacity 0.3s, backdrop-filter 0.3s;
@@ -122,12 +122,12 @@
     justify-content: center;
     align-items: center;
 }
-.card.poster .banner:hover .hoveritem {
+.node.card.poster .banner:hover .hoveritem {
     opacity: 1;
     background-color: #0004;
     backdrop-filter: blur(3px);
 }
-.card.poster .banner .hoveritem a {
+.node.card.poster .banner .hoveritem a {
     text-decoration: none;
     font-stretch: 200%;
     width: 1em;
@@ -141,7 +141,7 @@
     background-color: #0005;
     transition: background-color 0.2s, font-size 0.2s;
 }
-.card.poster .banner .hoveritem a:hover {
+.node.card.poster .banner .hoveritem a:hover {
     background-color: #0008;
     font-size: 2.4em;
 }
diff --git a/server/src/routes/ui/style/nodepage.css b/server/src/routes/ui/style/nodepage.css
index 2913ff7..daba61e 100644
--- a/server/src/routes/ui/style/nodepage.css
+++ b/server/src/routes/ui/style/nodepage.css
@@ -25,36 +25,29 @@
     object-fit: cover;
     object-position: center;
 }
-.page.item {
+.page.node {
     position: relative;
     width: 100%;
 }
-.page.item .banner {
-    width: max(8em, 25%);
-    float: left;
-    margin: 3em;
-    margin-top: -1em;
-}
-.page.item .banner img {
+.page.node .banner img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     object-position: center;
 }
 
-.page.item .title h1 {
+.page.node .title h1 {
     display: inline;
     margin-right: 1em;
 }
-.page.item .title .play {
+.page.node .title .play {
     display: inline;
     font-stretch: 200%;
 }
-.page.item .title .play::before {
+.page.node .title .play::before {
     content: "▶";
 }
-
-.page.item .props p {
+.page.node .props p {
     margin: 0.4em;
     font-size: small;
     font-weight: bolder;