node highlight card + css cleanup

2 files changed, 39 insertions, 19 deletions

diff --git a/ui/client-style/src/node_card.css b/ui/client-style/src/node_card.css
index 2c0b97f..43c3898 100644
--- a/ui/client-style/src/node_card.css
+++ b/ui/client-style/src/node_card.css
@@ -68,7 +68,7 @@
     grid-area: 1 / 1;
 }
 
-.card .poster .cardhover {
+.card .poster .overlay {
     position: relative;
     pointer-events: none;
     grid-area: 1 / 1;
@@ -79,7 +79,7 @@
     justify-content: center;
     align-items: center;
 }
-.card .poster:hover .cardhover {
+.card .poster:hover .overlay {
     opacity: 1;
 }
 
@@ -90,12 +90,11 @@
 .card .poster a img {
     transition: transform 0.3s;
 }
-
 .card .poster:hover a img {
     transform: scale(1.1);
 }
 
-.card .poster .cardhover a.play {
+.card .poster .overlay a.play {
     text-decoration: none;
     width: 1em;
     height: 1em;
@@ -108,40 +107,61 @@
     background-color: var(--overlay);
     transition: background-color 0.3s, font-size 0.3s;
 }
-.card .poster .cardhover a.play:hover {
+.card .poster .overlay a.play:hover {
     background-color: var(--overlay-hover);
     font-size: 3em;
 }
-.card .poster .cardhover .props {
+.card .poster .overlay .props {
     position: absolute;
     bottom: 0px;
     left: 0px;
 }
 
-.widecard {
+.card.wide {
     display: grid;
     grid-template-columns: 1fr 10000fr;
     width: 100%;
 }
-.widecard .poster {
+.card.wide .poster {
     grid-column: 1;
 }
-.widecard .details {
+.card.wide .details {
     grid-column: 2;
     margin: 1em;
 }
-.widecard .details .title {
+.card.wide .details .title {
     font-size: large;
 }
-.widecard .details .props {
+.card.wide .details .props {
     margin-bottom: 0.5em;
 }
 
-@media (max-width: 750px) {
-    nav .library {
-        display: none;
-    }
-    .children {
-        justify-content: center;
-    }
+.card.highlight {
+    padding: 0em;
+    background-size: cover;
+    background-position: center;
+    background-image: linear-gradient(#0009);
+    border-radius: 1em;
+    width: 100%;
+    box-sizing: border-box;
+}
+.card.highlight .inner {
+    height: var(--card-size);
+    padding: 2em;
+    display: flex;
+    flex-direction: row;
+    backdrop-filter: blur(5px);
+    background-image: linear-gradient(
+        90deg,
+        #000a 0%,
+        #0005 60%,
+        transparent 100%
+    );
+}
+.card.highlight .overview h2 {
+    margin-bottom: 0em;
+}
+.card.highlight .poster {
+    flex-shrink: 0;
+    margin-left: 5em;
 }
diff --git a/ui/client-style/src/node_page.css b/ui/client-style/src/node_page.css
index 62c8c7e..b8306e8 100644
--- a/ui/client-style/src/node_page.css
+++ b/ui/client-style/src/node_page.css
@@ -4,7 +4,7 @@
     Copyright (C) 2026 metamuffin <metamuffin.org>
     Copyright (C) 2023 tpart
 */
-.backdrop {
+#main > .backdrop {
     width: calc(100% + 2 * var(--main-side-margin));
     height: min(50vh, calc(var(--backdrop-height) + 5em));
     margin-left: calc(-1 * var(--main-side-margin));