1 files changed, 74 insertions, 0 deletions
diff --git a/server/src/routes/ui/style/directorypage.css b/server/src/routes/ui/style/directorypage.css
new file mode 100644
index 0000000..8c6d5d9
--- /dev/null
+++ b/server/src/routes/ui/style/directorypage.css
@@ -0,0 +1,74 @@
+
+.page.dir {
+    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) * var(--banner-aspect));
+    padding: 1em;
+}
+.card.dir {
+    width: calc(var(--card-size) * 2);
+    height: calc(var(--card-size) * var(--banner-aspect));
+}
+
+.card.item .title {
+    margin-top: 0.1em;
+    text-align: center;
+    text-overflow: ellipsis;
+}
+.card.item .banner {
+    display: grid;
+}
+.card.item .banner a {
+    grid-area: 1 / 1;
+}
+.card.item .banner a img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    object-position: center;
+}
+.card.item .banner .hover {
+    pointer-events: none;
+    grid-area: 1 / 1;
+    transition: opacity 0.3s, backdrop-filter 0.3s;
+    opacity: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.card.item .banner:hover .hover {
+    opacity: 1;
+    background-color: #0004;
+    backdrop-filter: blur(3px);
+}
+.card.item .banner .hover a {
+    text-decoration: none;
+    font-stretch: 200%;
+    width: 1em;
+    height: 1em;
+    line-height: 1;
+    margin: auto;
+    padding: 0.4em 0.3em 0.4em 0.5em;
+    border-radius: 50%;
+    font-size: 1.8em;
+    pointer-events: all;
+    background-color: #0005;
+    transition: background-color 0.2s, font-size 0.2s;
+}
+.card.item .banner .hover a:hover {
+    background-color: #0008;
+    font-size: 2.4em;
+}