CaAlden/film
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

PUBLISH: Fix card styles

Browse source
This commit is contained in:
Campbell Alden 2022-08-24 17:35:42 +09:00
parent fdedcf03b6
commit 6cda217a59
5 changed files with 18 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

2
content/reviews/the-french-dispatch.md
View file

@ -1,5 +1,5 @@
--- ---
title: "The French Dispatch" title: The French Dispatch
date: 2022-08-17T17:18:04+09:00 date: 2022-08-17T17:18:04+09:00
draft: false draft: false
rating: 4 rating: 4

10
docs/card.css
View file

@ -5,11 +5,15 @@
border-radius: 10px; border-radius: 10px;
background: var(--color-primary); background: var(--color-primary);
aspect-ratio: 2 / 3; aspect-ratio: 2 / 3;
max-width: 250px; width: 280px;
max-height: 380px; max-height: 380px;
padding: 10px; padding: 10px;
} }
.card-title-long {
font-size: 20px !important;
}
.card .card-content { .card .card-content {
flex-basis: 0.0001%; flex-basis: 0.0001%;
} }
@ -18,11 +22,11 @@
} }
.card:hover .card-content { .card:hover .card-content {
flex-basis: 50%; flex-basis: 60%;
padding-top: 10px; padding-top: 10px;
} }
.card:hover .card-image { .card:hover .card-image {
flex-basis: 50%; flex-basis: 40%;
} }
.card-content { .card-content {

5
docs/index.html
View file

@ -49,10 +49,7 @@
</div> </div>
<section class="card-content"> <section class="card-content">
<header> <header>
<h3 class="subtitle"> <h3 class="subtitle">The French Dispatch</h3>
The French Dispatch
</a>
</h3>
</header> </header>
<div style="text-align: justify;">Authors for a New Yorker-esque magazine report on a small town in France</div> <div style="text-align: justify;">Authors for a New Yorker-esque magazine report on a small town in France</div>
<div class="cluster spacing:between"> <div class="cluster spacing:between">

5
layouts/_default/summary.html
View file

@ -4,9 +4,8 @@
</div> </div>
<section class="card-content"> <section class="card-content">
<header> <header>
<h3 class="subtitle"> <h3 class="subtitle{{if gt (len .Title) 20 }} card-title-long{{end}}">
{{ .Title }} {{- .Title | truncate 50 "..." -}}
</a>
</h3> </h3>
</header> </header>
<div style="text-align: justify;"> <div style="text-align: justify;">

10
static/card.css
View file

@ -5,11 +5,15 @@
border-radius: 10px; border-radius: 10px;
background: var(--color-primary); background: var(--color-primary);
aspect-ratio: 2 / 3; aspect-ratio: 2 / 3;
max-width: 250px; width: 280px;
max-height: 380px; max-height: 380px;
padding: 10px; padding: 10px;
} }
.card-title-long {
font-size: 20px !important;
}
.card .card-content { .card .card-content {
flex-basis: 0.0001%; flex-basis: 0.0001%;
} }
@ -18,11 +22,11 @@
} }
.card:hover .card-content { .card:hover .card-content {
flex-basis: 50%; flex-basis: 60%;
padding-top: 10px; padding-top: 10px;
} }
.card:hover .card-image { .card:hover .card-image {
flex-basis: 50%; flex-basis: 40%;
} }
.card-content { .card-content {