fallback banner and directory cards

2 files changed, 26 insertions, 17 deletions

diff --git a/server/src/routes/ui/style/directorypage.css b/server/src/routes/ui/style/directorypage.css
index e46a1fe..0c04af7 100644
--- a/server/src/routes/ui/style/directorypage.css
+++ b/server/src/routes/ui/style/directorypage.css
@@ -18,34 +18,42 @@
     display: block;
 }
 
-.card.item {
-    width: var(--card-size);
-    height: calc(var(--card-size) * var(--banner-aspect));
+.card {
     padding: 1em;
+    height: var(--card-size);
+}
+.card.item {
+    width: calc(var(--card-size) / var(--item-banner-aspect));
 }
 .card.dir {
-    width: calc(var(--card-size) * 2);
-    height: calc(var(--card-size) * var(--banner-aspect));
+    width: calc(var(--card-size) / var(--dir-banner-aspect));
 }
 
-.card.item .title {
+.card .title {
     margin-top: 0.1em;
     text-align: center;
     text-overflow: ellipsis;
 }
-.card.item .banner {
+.card .banner {
     display: grid;
 }
-.card.item .banner a {
+.card .banner a {
     grid-area: 1 / 1;
 }
-.card.item .banner a img {
-    width: 100%;
-    height: 100%;
+
+.card.item .banner img {
+    width: calc(var(--card-size) / var(--item-banner-aspect));
+    height: var(--card-size);
+}
+.card.dir .banner img {
+    width: calc(var(--card-size) / var(--dir-banner-aspect));
+    height: var(--card-size);
+}
+.card .banner a img {
     object-fit: cover;
     object-position: center;
 }
-.card.item .banner .hover {
+.card .banner .hover {
     pointer-events: none;
     grid-area: 1 / 1;
     transition: opacity 0.3s, backdrop-filter 0.3s;
@@ -54,12 +62,12 @@
     justify-content: center;
     align-items: center;
 }
-.card.item .banner:hover .hover {
+.card .banner:hover .hover {
     opacity: 1;
     background-color: #0004;
     backdrop-filter: blur(3px);
 }
-.card.item .banner .hover a {
+.card .banner .hover a {
     text-decoration: none;
     font-stretch: 200%;
     width: 1em;
@@ -73,7 +81,7 @@
     background-color: #0005;
     transition: background-color 0.2s, font-size 0.2s;
 }
-.card.item .banner .hover a:hover {
+.card .banner .hover a:hover {
     background-color: #0008;
     font-size: 2.4em;
 }
diff --git a/server/src/routes/ui/style/layout.css b/server/src/routes/ui/style/layout.css
index 412d1ed..89c12e2 100644
--- a/server/src/routes/ui/style/layout.css
+++ b/server/src/routes/ui/style/layout.css
@@ -10,9 +10,10 @@
 }
 
 :root {
-    --card-size: 12em;
+    --card-size: 17em;
     --bar-height: 5em;
-    --banner-aspect: 1.41;
+    --item-banner-aspect: 1.41;
+    --dir-banner-aspect: (1.41 / 2);
     --accent-light: rgb(255, 163, 87);
     --accent-dark: rgb(199, 90, 0);
     --backdrop-height: 18em;