4 files changed, 31 insertions, 18 deletions
diff --git a/server/src/routes/ui/style/layout.css b/server/src/routes/ui/style/layout.css
index 7aadadc..2da6d97 100644
--- a/server/src/routes/ui/style/layout.css
+++ b/server/src/routes/ui/style/layout.css
@@ -12,8 +12,9 @@
 :root {
     --card-size: 17em;
     --bar-height: 5em;
-    --item-banner-aspect: 1.41;
-    --dir-banner-aspect: (1.41 / 2);
+    --port-poster-aspect: 1.41;
+    --land-poster-aspect: (1.41 / 2);
+    --land-thumb-aspect: (9 / 16);
     --accent-light: rgb(255, 163, 87);
     --accent-dark: rgb(199, 90, 0);
     --backdrop-height: 24em;
diff --git a/server/src/routes/ui/style/mod.rs b/server/src/routes/ui/style/mod.rs
index e1ba17b..9098691 100644
--- a/server/src/routes/ui/style/mod.rs
+++ b/server/src/routes/ui/style/mod.rs
@@ -35,8 +35,8 @@ fn css_bundle() -> String {
     concat_files!(
         "layout.css",
         "player.css",
-        "itempage.css",
-        "directorypage.css",
+        "nodepage.css",
+        "nodecard.css",
         "js-player.css",
         "forms.css"
     )
diff --git a/server/src/routes/ui/style/directorypage.css b/server/src/routes/ui/style/nodecard.css
index 0d18c82..fea2a10 100644
--- a/server/src/routes/ui/style/directorypage.css
+++ b/server/src/routes/ui/style/nodecard.css
@@ -4,21 +4,19 @@
     Copyright (C) 2023 metamuffin <metamuffin.org>
     Copyright (C) 2023 tpart
 */
-.page.dir {
+.children {
     padding: 1em;
     padding-left: 3em;
     padding-right: 3em;
-}
-.directorylisting {
     list-style: none;
     display: flex;
     flex-wrap: wrap;
 }
-.directorylisting li {
+.children li {
     display: block;
 }
 
-.page.dir .dirup {
+.dirup {
     width: 100%;
     font-size: large;
     display: block;
@@ -29,7 +27,7 @@
     margin: 0.2em;
     transition: filter 0.2s;
 }
-.page.dir .dirup:hover {
+.dirup:hover {
     filter: brightness(120%);
 }
 
@@ -37,11 +35,17 @@
     padding: 1em;
     height: var(--card-size);
 }
-.card.poster {
-    width: calc(var(--card-size) / var(--item-banner-aspect));
+.card.poster.poster-port {
+    width: calc(var(--card-size) / var(--port-poster-aspect));
+}
+.card.poster.poster-land {
+    width: calc(var(--card-size) / var(--land-poster-aspect));
 }
-.card.poster.wide {
-    width: calc(var(--card-size) / var(--dir-banner-aspect));
+.card.poster.thumb-land {
+    width: calc(var(--card-size) / var(--land-thumb-aspect));
+}
+.card.poster.poster-square {
+    width: calc(var(--card-size));
 }
 
 .card .title {
@@ -56,12 +60,20 @@
     grid-area: 1 / 1;
 }
 
-.card.poster .banner img {
-    width: calc(var(--card-size) / var(--item-banner-aspect));
+.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 {
+    width: calc(var(--card-size) / var(--land-poster-aspect));
+    height: var(--card-size);
+}
+.card.poster.thumb-land .banner img {
+    width: calc(var(--card-size) / var(--land-thumb-aspect));
     height: var(--card-size);
 }
-.card.poster.wide .banner img {
-    width: calc(var(--card-size) / var(--dir-banner-aspect));
+.card.poster.poster-square .banner img {
+    width: calc(var(--card-size));
     height: var(--card-size);
 }
 .card .banner a img {
diff --git a/server/src/routes/ui/style/itempage.css b/server/src/routes/ui/style/nodepage.css
index 2913ff7..2913ff7 100644
--- a/server/src/routes/ui/style/itempage.css
+++ b/server/src/routes/ui/style/nodepage.css