item page styled

1 files changed, 61 insertions, 6 deletions

diff --git a/server/src/routes/ui/style/layout.css b/server/src/routes/ui/style/layout.css
index 078dd4e..6a63ccc 100644
--- a/server/src/routes/ui/style/layout.css
+++ b/server/src/routes/ui/style/layout.css
@@ -3,6 +3,10 @@
     src: url(/assets/cantarell.woff2) format("woff2");
 }
 
+:root {
+    --card-size: 12em;
+}
+
 * {
     color: rgb(218, 218, 218);
     font-family: "Cantarell", sans-serif;
@@ -10,8 +14,16 @@
 }
 
 body {
-    background-color: #0f0f0f;
+    background-color: #070707;
     width: 100vw;
+    margin: 0px;
+    padding: 0px;
+}
+
+img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
 }
 
 nav {
@@ -21,7 +33,7 @@ nav {
     padding: 1em;
     width: calc(100vw - 2em);
     height: 2em;
-    background-color: #27272744;
+    background-color: #1c1c1c9a;
 }
 
 nav h1 {
@@ -32,10 +44,6 @@ nav h1 {
 }
 
 #main {
-    margin-top: 5em;
-    padding: 1em;
-    padding-left: 3em;
-    padding-right: 3em;
 }
 
 .error {
@@ -52,3 +60,50 @@ input {
 option {
     font-family: "Cantarell", sans-serif;
 }
+
+.page.dir {
+    margin-top: 5em;
+    padding: 1em;
+    padding-left: 3em;
+    padding-right: 3em;
+}
+.directorylisting {
+    list-style: none;
+    display: flex;
+    flex-wrap: wrap;
+}
+.directorylisting li {
+    display: block;
+}
+
+.card.item {
+    width: var(--card-size);
+    height: calc(var(--card-size) * 1.41);
+    padding: 1em;
+}
+.card.dir {
+    width: calc(var(--card-size) * 2);
+    height: calc(var(--card-size) * 1.41);
+}
+.card a {
+    width: 100%;
+    height: 100%;
+}
+
+.card.item .title {
+    margin-top: 0.1em;
+    text-align: center;
+    text-overflow: ellipsis;
+}
+
+.page.item .backdrop {
+    width: 100%;
+    margin-bottom: calc(-100% * 1.41 + 18em);
+}
+.page.item .backdrop img {
+    mask-mode: alpha;
+    mask-image: linear-gradient(rgba(0, 0, 0, 1), transparent 30%);
+}
+.page.item .banner {
+    width: max(8em, 20%);
+}