move stylesheets and refactor js bundler

1 files changed, 155 insertions, 0 deletions

diff --git a/web/nodecard.css b/web/nodecard.css
new file mode 100644
index 0000000..bfc0b74
--- /dev/null
+++ b/web/nodecard.css
@@ -0,0 +1,155 @@
+/*
+    This file is part of jellything (https://codeberg.org/metamuffin/jellything)
+    which is licensed under the GNU Affero General Public License (version 3); see /COPYING.
+    Copyright (C) 2023 metamuffin <metamuffin.org>
+    Copyright (C) 2023 tpart
+*/
+.children {
+    padding: 1em;
+    padding-left: 3em;
+    padding-right: 3em;
+    list-style: none;
+    display: flex;
+    flex-wrap: wrap;
+    width: 100%;
+    box-sizing: border-box;
+}
+.children li {
+    display: block;
+}
+
+.dirup {
+    width: 100%;
+    font-size: large;
+    display: block;
+    text-align: center;
+    background-color: var(--background-light);
+    border-radius: 0.2em;
+    padding: 0.6em;
+    margin: 0.2em;
+    transition: filter 0.22s;
+}
+.dirup:hover {
+    filter: brightness(120%);
+}
+
+.node.card {
+    padding: 1em;
+    height: var(--card-size);
+}
+.node.card.poster.poster-port {
+    width: calc(var(--card-size) / var(--port-poster-aspect));
+}
+.node.card.poster.poster-land {
+    width: calc(var(--card-size) / var(--land-poster-aspect));
+}
+.node.card.poster.thumb-land {
+    width: calc(var(--card-size) / var(--land-thumb-aspect));
+}
+.node.card.poster.poster-square {
+    width: calc(var(--card-size));
+}
+
+.node.card .title {
+    margin-top: 0.1em;
+    text-align: center;
+    text-overflow: ellipsis;
+}
+.node.card .poster {
+    display: grid;
+}
+.node.card .poster a {
+    grid-area: 1 / 1;
+}
+
+.node.card.poster.poster-port .poster img {
+    width: calc(var(--card-size) / var(--port-poster-aspect));
+    height: var(--card-size);
+}
+.node.card.poster.poster-land .poster img {
+    width: calc(var(--card-size) / var(--land-poster-aspect));
+    height: var(--card-size);
+}
+.node.card.poster.thumb-land .poster img {
+    width: calc(var(--card-size) / var(--land-thumb-aspect));
+    height: var(--card-size);
+}
+.node.card.poster.poster-square .poster img {
+    width: calc(var(--card-size));
+    height: var(--card-size);
+}
+.node.card .poster a img {
+    object-fit: cover;
+    object-position: center;
+}
+
+.node.card.poster .poster .cardhover.open {
+    transition: opacity 0.3s, backdrop-filter 0.3s;
+    opacity: 0;
+    display: flex;
+    position: relative;
+    bottom: 0px;
+    height: 5em;
+    margin-top: -5em;
+}
+.node.card.poster .poster:hover .cardhover.open {
+    opacity: 1;
+    background-color: #0004;
+    backdrop-filter: blur(3px);
+}
+.node.card.poster .poster .cardhover.open a {
+    text-decoration: none;
+    width: 100%;
+    height: 1.7em;
+    font-size: large;
+    display: block;
+    text-align: center;
+    background-color: #0004;
+    border-radius: 0.2em;
+    padding: 0.6em;
+    margin: 0.6em;
+    transition: background-color 0.2s;
+}
+.node.card.poster .poster .cardhover.open a:hover {
+    background-color: #0008;
+}
+
+.node.card.poster .poster .cardhover.item {
+    position: relative;
+    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;
+}
+.node.card.poster .poster:hover .cardhover.item {
+    opacity: 1;
+    background-color: #0004;
+    backdrop-filter: blur(3px);
+}
+
+.node.card.poster .poster .cardhover.item a.play {
+    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;
+}
+.node.card.poster .poster .cardhover.item a.play:hover {
+    background-color: #0008;
+    font-size: 2.4em;
+}
+.node.card.poster .poster .cardhover.item .props {
+    position: absolute;
+    bottom: 0px;
+    left: 0px;
+}