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

PUBLISH: Add favorite star

Browse source
This commit is contained in:
Campbell Alden 2022-09-02 18:16:54 +09:00
parent 6488acfb56
commit aba362a6d2
12 changed files with 70 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

1
archetypes/reviews.md
View file

@ -1,6 +1,7 @@
--- ---
title: "{{ replace .Name "-" " " | title }}" title: "{{ replace .Name "-" " " | title }}"
date: {{ .Date }} date: {{ .Date }}
favorite: false
draft: true draft: true
rating: 5 rating: 5
imdb: 0.0 imdb: 0.0

10
docs/card.css
View file

@ -56,6 +56,16 @@
border-radius: 8px; border-radius: 8px;
} }
.card-favorite-star {
position: absolute;
display: flex;
right: 20px;
top: 20px;
padding: 10px;
background: rgba(255,255,255,0.25);
border-radius: 100%;
}
@media (prefers-reduced-motion) { @media (prefers-reduced-motion) {
.card-content { .card-content {
transition: none; transition: none;

1
docs/genres/action/index.html
View file

@ -43,6 +43,7 @@
<div class="card"> <div class="card">
<div class="card-image"> <div class="card-image">
<img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BYTM3ZTllNzItNTNmOS00NzJiLTg1MWMtMjMxNDc0NmJhODU5XkEyXkFqcGdeQXVyODE5NzE3OTE@._V1_SX800.jpg alt="Kingsman: The Secret Service" /> <img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BYTM3ZTllNzItNTNmOS00NzJiLTg1MWMtMjMxNDc0NmJhODU5XkEyXkFqcGdeQXVyODE5NzE3OTE@._V1_SX800.jpg alt="Kingsman: The Secret Service" />
</div> </div>
<section class="card-content"> <section class="card-content">
<header> <header>

1
docs/genres/adventure/index.html
View file

@ -43,6 +43,7 @@
<div class="card"> <div class="card">
<div class="card-image"> <div class="card-image">
<img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BYTM3ZTllNzItNTNmOS00NzJiLTg1MWMtMjMxNDc0NmJhODU5XkEyXkFqcGdeQXVyODE5NzE3OTE@._V1_SX800.jpg alt="Kingsman: The Secret Service" /> <img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BYTM3ZTllNzItNTNmOS00NzJiLTg1MWMtMjMxNDc0NmJhODU5XkEyXkFqcGdeQXVyODE5NzE3OTE@._V1_SX800.jpg alt="Kingsman: The Secret Service" />
</div> </div>
<section class="card-content"> <section class="card-content">
<header> <header>

2
docs/genres/comedy/index.html
View file

@ -43,6 +43,7 @@
<div class="card"> <div class="card">
<div class="card-image"> <div class="card-image">
<img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BYTM3ZTllNzItNTNmOS00NzJiLTg1MWMtMjMxNDc0NmJhODU5XkEyXkFqcGdeQXVyODE5NzE3OTE@._V1_SX800.jpg alt="Kingsman: The Secret Service" /> <img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BYTM3ZTllNzItNTNmOS00NzJiLTg1MWMtMjMxNDc0NmJhODU5XkEyXkFqcGdeQXVyODE5NzE3OTE@._V1_SX800.jpg alt="Kingsman: The Secret Service" />
</div> </div>
<section class="card-content"> <section class="card-content">
<header> <header>
@ -64,6 +65,7 @@
<div class="card"> <div class="card">
<div class="card-image"> <div class="card-image">
<img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BNmQxZTNiODYtNzBhYy00MzVlLWJlN2UtNTc4YWZjMDIwMmEzXkEyXkFqcGdeQXVyMTkxNjUyNQ@@._V1_SX800.jpg alt="The French Dispatch" /> <img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BNmQxZTNiODYtNzBhYy00MzVlLWJlN2UtNTc4YWZjMDIwMmEzXkEyXkFqcGdeQXVyMTkxNjUyNQ@@._V1_SX800.jpg alt="The French Dispatch" />
</div> </div>
<section class="card-content"> <section class="card-content">
<header> <header>

2
docs/genres/drama/index.html
View file

@ -43,6 +43,7 @@
<div class="card"> <div class="card">
<div class="card-image"> <div class="card-image">
<img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BMTI1NzQ5MzU1OV5BMl5BanBnXkFtZTcwNzExODU0MQ@@._V1_SX800.jpg alt="No Reservations" /> <img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BMTI1NzQ5MzU1OV5BMl5BanBnXkFtZTcwNzExODU0MQ@@._V1_SX800.jpg alt="No Reservations" />
</div> </div>
<section class="card-content"> <section class="card-content">
<header> <header>
@ -64,6 +65,7 @@
<div class="card"> <div class="card">
<div class="card-image"> <div class="card-image">
<img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BNmQxZTNiODYtNzBhYy00MzVlLWJlN2UtNTc4YWZjMDIwMmEzXkEyXkFqcGdeQXVyMTkxNjUyNQ@@._V1_SX800.jpg alt="The French Dispatch" /> <img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BNmQxZTNiODYtNzBhYy00MzVlLWJlN2UtNTc4YWZjMDIwMmEzXkEyXkFqcGdeQXVyMTkxNjUyNQ@@._V1_SX800.jpg alt="The French Dispatch" />
</div> </div>
<section class="card-content"> <section class="card-content">
<header> <header>

54
docs/genres/index.html
View file

@ -50,6 +50,7 @@
<div class="card"> <div class="card">
<div class="card-image"> <div class="card-image">
<img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BYTM3ZTllNzItNTNmOS00NzJiLTg1MWMtMjMxNDc0NmJhODU5XkEyXkFqcGdeQXVyODE5NzE3OTE@._V1_SX800.jpg alt="Kingsman: The Secret Service" /> <img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BYTM3ZTllNzItNTNmOS00NzJiLTg1MWMtMjMxNDc0NmJhODU5XkEyXkFqcGdeQXVyODE5NzE3OTE@._V1_SX800.jpg alt="Kingsman: The Secret Service" />
</div> </div>
<section class="card-content"> <section class="card-content">
<header> <header>
@ -83,6 +84,7 @@
<div class="card"> <div class="card">
<div class="card-image"> <div class="card-image">
<img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BYTM3ZTllNzItNTNmOS00NzJiLTg1MWMtMjMxNDc0NmJhODU5XkEyXkFqcGdeQXVyODE5NzE3OTE@._V1_SX800.jpg alt="Kingsman: The Secret Service" /> <img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BYTM3ZTllNzItNTNmOS00NzJiLTg1MWMtMjMxNDc0NmJhODU5XkEyXkFqcGdeQXVyODE5NzE3OTE@._V1_SX800.jpg alt="Kingsman: The Secret Service" />
</div> </div>
<section class="card-content"> <section class="card-content">
<header> <header>
@ -116,6 +118,7 @@
<div class="card"> <div class="card">
<div class="card-image"> <div class="card-image">
<img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BYTM3ZTllNzItNTNmOS00NzJiLTg1MWMtMjMxNDc0NmJhODU5XkEyXkFqcGdeQXVyODE5NzE3OTE@._V1_SX800.jpg alt="Kingsman: The Secret Service" /> <img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BYTM3ZTllNzItNTNmOS00NzJiLTg1MWMtMjMxNDc0NmJhODU5XkEyXkFqcGdeQXVyODE5NzE3OTE@._V1_SX800.jpg alt="Kingsman: The Secret Service" />
</div> </div>
<section class="card-content"> <section class="card-content">
<header> <header>
@ -139,6 +142,7 @@
<div class="card"> <div class="card">
<div class="card-image"> <div class="card-image">
<img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BNmQxZTNiODYtNzBhYy00MzVlLWJlN2UtNTc4YWZjMDIwMmEzXkEyXkFqcGdeQXVyMTkxNjUyNQ@@._V1_SX800.jpg alt="The French Dispatch" /> <img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BNmQxZTNiODYtNzBhYy00MzVlLWJlN2UtNTc4YWZjMDIwMmEzXkEyXkFqcGdeQXVyMTkxNjUyNQ@@._V1_SX800.jpg alt="The French Dispatch" />
</div> </div>
<section class="card-content"> <section class="card-content">
<header> <header>
@ -172,6 +176,7 @@
<div class="card"> <div class="card">
<div class="card-image"> <div class="card-image">
<img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BMTI1NzQ5MzU1OV5BMl5BanBnXkFtZTcwNzExODU0MQ@@._V1_SX800.jpg alt="No Reservations" /> <img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BMTI1NzQ5MzU1OV5BMl5BanBnXkFtZTcwNzExODU0MQ@@._V1_SX800.jpg alt="No Reservations" />
</div> </div>
<section class="card-content"> <section class="card-content">
<header> <header>
@ -195,6 +200,7 @@
<div class="card"> <div class="card">
<div class="card-image"> <div class="card-image">
<img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BNmQxZTNiODYtNzBhYy00MzVlLWJlN2UtNTc4YWZjMDIwMmEzXkEyXkFqcGdeQXVyMTkxNjUyNQ@@._V1_SX800.jpg alt="The French Dispatch" /> <img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BNmQxZTNiODYtNzBhYy00MzVlLWJlN2UtNTc4YWZjMDIwMmEzXkEyXkFqcGdeQXVyMTkxNjUyNQ@@._V1_SX800.jpg alt="The French Dispatch" />
</div> </div>
<section class="card-content"> <section class="card-content">
<header> <header>
@ -225,32 +231,10 @@
</header> </header>
<div class="carasol"> <div class="carasol">
<div class="card">
<div class="card-image">
<img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BNmQxZTNiODYtNzBhYy00MzVlLWJlN2UtNTc4YWZjMDIwMmEzXkEyXkFqcGdeQXVyMTkxNjUyNQ@@._V1_SX800.jpg alt="The French Dispatch" />
</div>
<section class="card-content">
<header>
<h3 class="subtitle">The French Dispatch</h3>
</header>
<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 s1 align:center">
<img src="https://caalden.github.io/film/imdb-logo-small.png" class="icon" alt="imbd logo">
<span class="numbers">7.2</span>
</div>
<div>
<a class="button" href="/film/reviews/the-french-dispatch/">
Read review
</a>
</div>
</div>
</div>
<div class="card"> <div class="card">
<div class="card-image"> <div class="card-image">
<img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BMTI1NzQ5MzU1OV5BMl5BanBnXkFtZTcwNzExODU0MQ@@._V1_SX800.jpg alt="No Reservations" /> <img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BMTI1NzQ5MzU1OV5BMl5BanBnXkFtZTcwNzExODU0MQ@@._V1_SX800.jpg alt="No Reservations" />
</div> </div>
<section class="card-content"> <section class="card-content">
<header> <header>
@ -271,6 +255,30 @@
</div> </div>
<div class="card">
<div class="card-image">
<img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BNmQxZTNiODYtNzBhYy00MzVlLWJlN2UtNTc4YWZjMDIwMmEzXkEyXkFqcGdeQXVyMTkxNjUyNQ@@._V1_SX800.jpg alt="The French Dispatch" />
</div>
<section class="card-content">
<header>
<h3 class="subtitle">The French Dispatch</h3>
</header>
<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 s1 align:center">
<img src="https://caalden.github.io/film/imdb-logo-small.png" class="icon" alt="imbd logo">
<span class="numbers">7.2</span>
</div>
<div>
<a class="button" href="/film/reviews/the-french-dispatch/">
Read review
</a>
</div>
</div>
</div>
</div> </div>
</section> </section>

2
docs/genres/romance/index.html
View file

@ -43,6 +43,7 @@
<div class="card"> <div class="card">
<div class="card-image"> <div class="card-image">
<img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BMTI1NzQ5MzU1OV5BMl5BanBnXkFtZTcwNzExODU0MQ@@._V1_SX800.jpg alt="No Reservations" /> <img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BMTI1NzQ5MzU1OV5BMl5BanBnXkFtZTcwNzExODU0MQ@@._V1_SX800.jpg alt="No Reservations" />
</div> </div>
<section class="card-content"> <section class="card-content">
<header> <header>
@ -64,6 +65,7 @@
<div class="card"> <div class="card">
<div class="card-image"> <div class="card-image">
<img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BNmQxZTNiODYtNzBhYy00MzVlLWJlN2UtNTc4YWZjMDIwMmEzXkEyXkFqcGdeQXVyMTkxNjUyNQ@@._V1_SX800.jpg alt="The French Dispatch" /> <img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BNmQxZTNiODYtNzBhYy00MzVlLWJlN2UtNTc4YWZjMDIwMmEzXkEyXkFqcGdeQXVyMTkxNjUyNQ@@._V1_SX800.jpg alt="The French Dispatch" />
</div> </div>
<section class="card-content"> <section class="card-content">
<header> <header>

3
docs/index.html
View file

@ -86,6 +86,7 @@
<div class="card"> <div class="card">
<div class="card-image"> <div class="card-image">
<img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BYTM3ZTllNzItNTNmOS00NzJiLTg1MWMtMjMxNDc0NmJhODU5XkEyXkFqcGdeQXVyODE5NzE3OTE@._V1_SX800.jpg alt="Kingsman: The Secret Service" /> <img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BYTM3ZTllNzItNTNmOS00NzJiLTg1MWMtMjMxNDc0NmJhODU5XkEyXkFqcGdeQXVyODE5NzE3OTE@._V1_SX800.jpg alt="Kingsman: The Secret Service" />
</div> </div>
<section class="card-content"> <section class="card-content">
<header> <header>
@ -107,6 +108,7 @@
<div class="card"> <div class="card">
<div class="card-image"> <div class="card-image">
<img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BMTI1NzQ5MzU1OV5BMl5BanBnXkFtZTcwNzExODU0MQ@@._V1_SX800.jpg alt="No Reservations" /> <img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BMTI1NzQ5MzU1OV5BMl5BanBnXkFtZTcwNzExODU0MQ@@._V1_SX800.jpg alt="No Reservations" />
</div> </div>
<section class="card-content"> <section class="card-content">
<header> <header>
@ -128,6 +130,7 @@
<div class="card"> <div class="card">
<div class="card-image"> <div class="card-image">
<img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BNmQxZTNiODYtNzBhYy00MzVlLWJlN2UtNTc4YWZjMDIwMmEzXkEyXkFqcGdeQXVyMTkxNjUyNQ@@._V1_SX800.jpg alt="The French Dispatch" /> <img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BNmQxZTNiODYtNzBhYy00MzVlLWJlN2UtNTc4YWZjMDIwMmEzXkEyXkFqcGdeQXVyMTkxNjUyNQ@@._V1_SX800.jpg alt="The French Dispatch" />
</div> </div>
<section class="card-content"> <section class="card-content">
<header> <header>

7
layouts/_default/summary.html
View file

@ -1,6 +1,11 @@
<div class="card"> <div class="card">
<div class="card-image"> <div class="card-image">
<img loading="lazy" class="card-image" src={{ .Params.image }} alt="{{- .Title -}}" /> <img loading="lazy" class="card-image" src={{ .Params.image }} alt="{{- .Title -}}" />
{{ if .Params.favorite }}
<div class="card-favorite-star">
{{ partial "star.html" }}
</div>
{{ end }}
</div> </div>
<section class="card-content"> <section class="card-content">
<header> <header>
@ -14,7 +19,7 @@
<div class="cluster spacing:between"> <div class="cluster spacing:between">
<div class="cluster s1 align:center"> <div class="cluster s1 align:center">
<img src="{{site.BaseURL}}imdb-logo-small.png" class="icon" alt="imbd logo"> <img src="{{site.BaseURL}}imdb-logo-small.png" class="icon" alt="imbd logo">
<span class="numbers">{{- .Params.imdb -}}</span> <span class="numbers">{{- lang.NumFmt 1 .Params.imdb -}}</span>
</div> </div>
<div> <div>
<a class="button" href="{{ .RelPermalink }}"> <a class="button" href="{{ .RelPermalink }}">

1
layouts/partials/star.html Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="yellow" stroke="gold" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-star"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
Side by side

After

Width:  |  Height:  |  Size: 334 B

10
static/card.css
View file

@ -56,6 +56,16 @@
border-radius: 8px; border-radius: 8px;
} }
.card-favorite-star {
position: absolute;
display: flex;
right: 20px;
top: 20px;
padding: 10px;
background: rgba(255,255,255,0.25);
border-radius: 100%;
}
@media (prefers-reduced-motion) { @media (prefers-reduced-motion) {
.card-content { .card-content {
transition: none; transition: none;