Merge pull request 'Make blog cover clickable' (#976) from clickable-blog-image into main

Reviewed-on: https://git.joinplu.me/Plume/Plume/pulls/976
This commit is contained in:
KitaitiMakoto 2022-01-02 17:40:30 +00:00
commit 3daf405ae2
3 changed files with 20 additions and 8 deletions

View File

@ -219,17 +219,21 @@ p.error {
margin: 20px; margin: 20px;
} }
.cover-link {
margin: 0;
&:hover {
opacity: 0.9;
}
}
.cover { .cover {
min-height: 10em; min-height: 10em;
background-position: center; background-position: center;
background-size: cover; background-size: cover;
margin: 0px; margin: 0px;
&:hover {
opacity: 0.9;
}
} }
header { header {
display: flex; display: flex;
} }
@ -245,6 +249,9 @@ p.error {
position: relative; position: relative;
a { a {
display: block; display: block;
width: 100%;
height: 100%;
padding-block-start: 0.5em;
transition: color 0.1s ease-in; transition: color 0.1s ease-in;
color: $text-color; color: $text-color;
@ -611,4 +618,4 @@ code {
.function{ .function{
color:inherit; color:inherit;
} }
} }

View File

@ -6,7 +6,9 @@
<div class="card h-entry"> <div class="card h-entry">
@if article.cover_id.is_some() { @if article.cover_id.is_some() {
<a href="@uri!(posts::details: blog = article.get_blog_fqn(ctx.0), slug = &article.slug, responding_to = _)"><div class="cover" style="background-image: url('@Html(article.cover_url(ctx.0).unwrap_or_default())')"></div></a> <a class="cover-link" href="@uri!(posts::details: blog = article.get_blog_fqn(ctx.0), slug = &article.slug, responding_to = _)">
<div class="cover" style="background-image: url('@Html(article.cover_url(ctx.0).unwrap_or_default())')"></div>
</a>
} }
<header dir="auto"> <header dir="auto">
<h3 class="p-name"> <h3 class="p-name">

View File

@ -18,7 +18,10 @@
@for blog in blogs { @for blog in blogs {
<div class="card"> <div class="card">
@if blog.banner_id.is_some() { @if blog.banner_id.is_some() {
<div class="cover" style="background-image: url('@Html(blog.banner_url(ctx.0).unwrap_or_default())')"></div> <a class="cover-link" href="@uri!(blogs::details: name = &blog.actor_id, page = _)">
<div class="cover" style="background-image: url('@Html(blog.banner_url(ctx.0).unwrap_or_default())')">
</div>
</a>
} }
<h3><a href="@uri!(blogs::details: name = blog.actor_id, page = _)">@blog.title</a></h3> <h3><a href="@uri!(blogs::details: name = blog.actor_id, page = _)">@blog.title</a></h3>
<main><p>@Html(blog.summary_html)</p></main> <main><p>@Html(blog.summary_html)</p></main>