diff options
Diffstat (limited to 'server/src/routes')
-rw-r--r-- | server/src/routes/ui/node.rs | 4 | ||||
-rw-r--r-- | server/src/routes/ui/style/nodecard.css | 30 | ||||
-rw-r--r-- | server/src/routes/ui/style/nodepage.css | 9 |
3 files changed, 25 insertions, 18 deletions
diff --git a/server/src/routes/ui/node.rs b/server/src/routes/ui/node.rs index dc64eda..d9cc849 100644 --- a/server/src/routes/ui/node.rs +++ b/server/src/routes/ui/node.rs @@ -68,7 +68,7 @@ markup::define! { NodeCard<'a>(id: &'a str, node: &'a NodePublic) { @let cls = format!("node card poster {}", match node.kind {NodeKind::Channel => "poster-square", NodeKind::Video => "thumb-land", NodeKind::Collection => "poster-land", _ => "poster-port"}); div[class=cls] { - div.banner { + div.poster { a[href=uri!(r_library_node(id))] { img[src=uri!(r_item_assets(id, AssetRole::Poster))]; } @@ -91,7 +91,7 @@ markup::define! { } div.page.node { @if !matches!(node.kind, NodeKind::Collection) { - div.banner { img[src=uri!(r_item_assets(id, AssetRole::Poster))]; } + div.bigposter { img[src=uri!(r_item_assets(id, AssetRole::Poster))]; } } div.title { h1 { @node.title } diff --git a/server/src/routes/ui/style/nodecard.css b/server/src/routes/ui/style/nodecard.css index 53ee10e..e6d8a29 100644 --- a/server/src/routes/ui/style/nodecard.css +++ b/server/src/routes/ui/style/nodecard.css @@ -53,36 +53,36 @@ text-align: center; text-overflow: ellipsis; } -.node.card .banner { +.node.card .poster { display: grid; } -.node.card .banner a { +.node.card .poster a { grid-area: 1 / 1; } -.node.card.poster.poster-port .banner img { +.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 .banner img { +.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 .banner img { +.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 .banner img { +.node.card.poster.poster-square .poster img { width: calc(var(--card-size)); height: var(--card-size); } -.node.card .banner a img { +.node.card .poster a img { object-fit: cover; object-position: center; } -.node.card.poster .banner .hoverdir { +.node.card.poster .poster .hoverdir { transition: opacity 0.3s, backdrop-filter 0.3s; opacity: 0; display: flex; @@ -91,12 +91,12 @@ height: 5em; margin-top: -5em; } -.node.card.poster .banner:hover .hoverdir { +.node.card.poster .poster:hover .hoverdir { opacity: 1; background-color: #0004; backdrop-filter: blur(3px); } -.node.card.poster .banner .hoverdir a { +.node.card.poster .poster .hoverdir a { text-decoration: none; width: 100%; height: 1.7em; @@ -109,11 +109,11 @@ margin: 0.6em; transition: background-color 0.2s; } -.node.card.poster .banner .hoverdir a:hover { +.node.card.poster .poster .hoverdir a:hover { background-color: #0008; } -.node.card.poster .banner .hoveritem { +.node.card.poster .poster .hoveritem { pointer-events: none; grid-area: 1 / 1; transition: opacity 0.3s, backdrop-filter 0.3s; @@ -122,12 +122,12 @@ justify-content: center; align-items: center; } -.node.card.poster .banner:hover .hoveritem { +.node.card.poster .poster:hover .hoveritem { opacity: 1; background-color: #0004; backdrop-filter: blur(3px); } -.node.card.poster .banner .hoveritem a { +.node.card.poster .poster .hoveritem a { text-decoration: none; font-stretch: 200%; width: 1em; @@ -141,7 +141,7 @@ background-color: #0005; transition: background-color 0.2s, font-size 0.2s; } -.node.card.poster .banner .hoveritem a:hover { +.node.card.poster .poster .hoveritem a:hover { background-color: #0008; font-size: 2.4em; } diff --git a/server/src/routes/ui/style/nodepage.css b/server/src/routes/ui/style/nodepage.css index daba61e..21d7754 100644 --- a/server/src/routes/ui/style/nodepage.css +++ b/server/src/routes/ui/style/nodepage.css @@ -29,7 +29,13 @@ position: relative; width: 100%; } -.page.node .banner img { +.page.node .bigposter { + width: max(8em, 25%); + float: left; + margin: 3em; + margin-top: -1em; +} +.page.node .bigposter img { width: 100%; height: 100%; object-fit: cover; @@ -47,6 +53,7 @@ .page.node .title .play::before { content: "▶"; } + .page.node .props p { margin: 0.4em; font-size: small; |