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

PUBLISH: Remove some margin on reviews

Browse source
This commit is contained in:
Campbell Alden 2022-10-19 17:42:19 +09:00
parent 22459e87dd
commit 4c3cf70733
3 changed files with 208 additions and 210 deletions
Download patch file Download diff file Expand all files Collapse all files

416
docs/genres/index.html
View file

@ -59,21 +59,27 @@
<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/MV5BMjA3NzI1ODc1MV5BMl5BanBnXkFtZTcwMzI5NjQwNg@@._V1_SX800.webp alt="In Time" /> <img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BMTU2MDc0NDY0M15BMl5BanBnXkFtZTcwOTgzMTYyNQ@@._V1_SX800.webp alt="Fright Night" />
<a class="card-favorite-star" href="https://caalden.github.io/film/favorites">
<span hidden>Favorite</span>
<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>
</a>
</div> </div>
<section class="card-content"> <section class="card-content">
<header> <header>
<h3 class="subtitle">In Time</h3> <h3 class="subtitle">Fright Night</h3>
</header> </header>
<div>A dystopian future where time is literally money</div> <div>A high school student suspects his next door neighbor is a vampire</div>
<div class="cluster spacing:between"> <div class="cluster spacing:between">
<div class="cluster s1 align:center"> <div class="cluster s1 align:center">
Rating: Rating:
<span class="numbers">4/5</span> <span class="numbers">4/5</span>
</div> </div>
<div> <div>
<a class="button" href="/film/reviews/in-time/"> <a class="button" href="/film/reviews/fright-night/">
Read review Read review
</a> </a>
</div> </div>
@ -105,60 +111,6 @@
</div> </div>
<div class="card">
<div class="card-image">
<img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BN2MyZDE0YjAtNWFjYy00MWRlLTk3MTktMzY3ZDVhNTJkZTlmXkEyXkFqcGdeQXVyNDk3NzU2MTQ@._V1_SX800.webp alt="Beverly Hills Cop" />
</div>
<section class="card-content">
<header>
<h3 class="subtitle">Beverly Hills Cop</h3>
</header>
<div>A Detroit cop comes to Beverly Hills to find the man who murdered his friend</div>
<div class="cluster spacing:between">
<div class="cluster s1 align:center">
Rating:
<span class="numbers">4/5</span>
</div>
<div>
<a class="button" href="/film/reviews/beverly-hills-cop/">
Read review
</a>
</div>
</div>
</div>
<div class="card">
<div class="card-image">
<img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BMTU2MDc0NDY0M15BMl5BanBnXkFtZTcwOTgzMTYyNQ@@._V1_SX800.webp alt="Fright Night" />
<a class="card-favorite-star" href="https://caalden.github.io/film/favorites">
<span hidden>Favorite</span>
<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>
</a>
</div>
<section class="card-content">
<header>
<h3 class="subtitle">Fright Night</h3>
</header>
<div>A high school student suspects his next door neighbor is a vampire</div>
<div class="cluster spacing:between">
<div class="cluster s1 align:center">
Rating:
<span class="numbers">4/5</span>
</div>
<div>
<a class="button" href="/film/reviews/fright-night/">
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/MV5BYjhlNDljNTgtZjc4My00NmZmLTk2YzAtYWE5MDYwYjM4MTkzXkEyXkFqcGdeQXVyODE5NzE3OTE@._V1_SX800.webp alt="Now You See Me 2" /> <img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BYjhlNDljNTgtZjc4My00NmZmLTk2YzAtYWE5MDYwYjM4MTkzXkEyXkFqcGdeQXVyODE5NzE3OTE@._V1_SX800.webp alt="Now You See Me 2" />
@ -183,6 +135,54 @@
</div> </div>
<div class="card">
<div class="card-image">
<img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BMjA3NzI1ODc1MV5BMl5BanBnXkFtZTcwMzI5NjQwNg@@._V1_SX800.webp alt="In Time" />
</div>
<section class="card-content">
<header>
<h3 class="subtitle">In Time</h3>
</header>
<div>A dystopian future where time is literally money</div>
<div class="cluster spacing:between">
<div class="cluster s1 align:center">
Rating:
<span class="numbers">4/5</span>
</div>
<div>
<a class="button" href="/film/reviews/in-time/">
Read review
</a>
</div>
</div>
</div>
<div class="card">
<div class="card-image">
<img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BN2MyZDE0YjAtNWFjYy00MWRlLTk3MTktMzY3ZDVhNTJkZTlmXkEyXkFqcGdeQXVyNDk3NzU2MTQ@._V1_SX800.webp alt="Beverly Hills Cop" />
</div>
<section class="card-content">
<header>
<h3 class="subtitle">Beverly Hills Cop</h3>
</header>
<div>A Detroit cop comes to Beverly Hills to find the man who murdered his friend</div>
<div class="cluster spacing:between">
<div class="cluster s1 align:center">
Rating:
<span class="numbers">4/5</span>
</div>
<div>
<a class="button" href="/film/reviews/beverly-hills-cop/">
Read review
</a>
</div>
</div>
</div>
</div> </div>
</section> </section>
@ -331,6 +331,30 @@
</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/MV5BYjhlNDljNTgtZjc4My00NmZmLTk2YzAtYWE5MDYwYjM4MTkzXkEyXkFqcGdeQXVyODE5NzE3OTE@._V1_SX800.webp alt="Now You See Me 2" />
</div>
<section class="card-content">
<header>
<h3 class="subtitle">Now You See Me 2</h3>
</header>
<div>A group of magicians are coerced into pulling off another heist</div>
<div class="cluster spacing:between">
<div class="cluster s1 align:center">
Rating:
<span class="numbers">2/5</span>
</div>
<div>
<a class="button" href="/film/reviews/now-you-see-me-2/">
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/MV5BMTg0MTU5ODkwM15BMl5BanBnXkFtZTYwMzgxNzY3._V1_SX800.webp alt="Holes" /> <img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BMTg0MTU5ODkwM15BMl5BanBnXkFtZTYwMzgxNzY3._V1_SX800.webp alt="Holes" />
@ -361,30 +385,6 @@
</div> </div>
<div class="card">
<div class="card-image">
<img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BYjhlNDljNTgtZjc4My00NmZmLTk2YzAtYWE5MDYwYjM4MTkzXkEyXkFqcGdeQXVyODE5NzE3OTE@._V1_SX800.webp alt="Now You See Me 2" />
</div>
<section class="card-content">
<header>
<h3 class="subtitle">Now You See Me 2</h3>
</header>
<div>A group of magicians are coerced into pulling off another heist</div>
<div class="cluster spacing:between">
<div class="cluster s1 align:center">
Rating:
<span class="numbers">2/5</span>
</div>
<div>
<a class="button" href="/film/reviews/now-you-see-me-2/">
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/MV5BYTM3ZTllNzItNTNmOS00NzJiLTg1MWMtMjMxNDc0NmJhODU5XkEyXkFqcGdeQXVyODE5NzE3OTE@._V1_SX800.webp alt="Kingsman: The Secret Service" /> <img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BYTM3ZTllNzItNTNmOS00NzJiLTg1MWMtMjMxNDc0NmJhODU5XkEyXkFqcGdeQXVyODE5NzE3OTE@._V1_SX800.webp alt="Kingsman: The Secret Service" />
@ -419,30 +419,6 @@
</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.webp alt="The French Dispatch" />
</div>
<section class="card-content">
<header>
<h3 class="subtitle">The French Dispatch</h3>
</header>
<div>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">
Rating:
<span class="numbers">4/5</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/MV5BYTM3ZTllNzItNTNmOS00NzJiLTg1MWMtMjMxNDc0NmJhODU5XkEyXkFqcGdeQXVyODE5NzE3OTE@._V1_SX800.webp alt="Kingsman: The Secret Service" /> <img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BYTM3ZTllNzItNTNmOS00NzJiLTg1MWMtMjMxNDc0NmJhODU5XkEyXkFqcGdeQXVyODE5NzE3OTE@._V1_SX800.webp alt="Kingsman: The Secret Service" />
@ -521,6 +497,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.webp alt="The French Dispatch" />
</div>
<section class="card-content">
<header>
<h3 class="subtitle">The French Dispatch</h3>
</header>
<div>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">
Rating:
<span class="numbers">4/5</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/MV5BYjhlNDljNTgtZjc4My00NmZmLTk2YzAtYWE5MDYwYjM4MTkzXkEyXkFqcGdeQXVyODE5NzE3OTE@._V1_SX800.webp alt="Now You See Me 2" /> <img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BYjhlNDljNTgtZjc4My00NmZmLTk2YzAtYWE5MDYwYjM4MTkzXkEyXkFqcGdeQXVyODE5NzE3OTE@._V1_SX800.webp alt="Now You See Me 2" />
@ -555,6 +555,60 @@
</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/MV5BMTg0MTU5ODkwM15BMl5BanBnXkFtZTYwMzgxNzY3._V1_SX800.webp alt="Holes" />
<a class="card-favorite-star" href="https://caalden.github.io/film/favorites">
<span hidden>Favorite</span>
<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>
</a>
</div>
<section class="card-content">
<header>
<h3 class="subtitle">Holes</h3>
</header>
<div>A boy is sent to a juvenile work camp as punishment after being mistakenly arrested.</div>
<div class="cluster spacing:between">
<div class="cluster s1 align:center">
Rating:
<span class="numbers">3/5</span>
</div>
<div>
<a class="button" href="/film/reviews/holes/">
Read review
</a>
</div>
</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.webp alt="The French Dispatch" />
</div>
<section class="card-content">
<header>
<h3 class="subtitle">The French Dispatch</h3>
</header>
<div>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">
Rating:
<span class="numbers">4/5</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.webp alt="No Reservations" /> <img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BMTI1NzQ5MzU1OV5BMl5BanBnXkFtZTcwNzExODU0MQ@@._V1_SX800.webp alt="No Reservations" />
@ -603,60 +657,6 @@
</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.webp alt="The French Dispatch" />
</div>
<section class="card-content">
<header>
<h3 class="subtitle">The French Dispatch</h3>
</header>
<div>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">
Rating:
<span class="numbers">4/5</span>
</div>
<div>
<a class="button" href="/film/reviews/the-french-dispatch/">
Read review
</a>
</div>
</div>
</div>
<div class="card">
<div class="card-image">
<img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BMTg0MTU5ODkwM15BMl5BanBnXkFtZTYwMzgxNzY3._V1_SX800.webp alt="Holes" />
<a class="card-favorite-star" href="https://caalden.github.io/film/favorites">
<span hidden>Favorite</span>
<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>
</a>
</div>
<section class="card-content">
<header>
<h3 class="subtitle">Holes</h3>
</header>
<div>A boy is sent to a juvenile work camp as punishment after being mistakenly arrested.</div>
<div class="cluster spacing:between">
<div class="cluster s1 align:center">
Rating:
<span class="numbers">3/5</span>
</div>
<div>
<a class="button" href="/film/reviews/holes/">
Read review
</a>
</div>
</div>
</div>
</div> </div>
</section> </section>
@ -725,30 +725,6 @@
</div> </div>
<div class="card">
<div class="card-image">
<img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BMTI1NzQ5MzU1OV5BMl5BanBnXkFtZTcwNzExODU0MQ@@._V1_SX800.webp alt="No Reservations" />
</div>
<section class="card-content">
<header>
<h3 class="subtitle">No Reservations</h3>
</header>
<div>A NY City chef and her recently adopted niece adapt to their life together</div>
<div class="cluster spacing:between">
<div class="cluster s1 align:center">
Rating:
<span class="numbers">3/5</span>
</div>
<div>
<a class="button" href="/film/reviews/no-reservations/">
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/MV5BZDg0MWNmNjktMGEwZC00ZDlmLWI1MTUtMDBmNjQzMWM2NjBjXkEyXkFqcGdeQXVyMTMxODk2OTU@._V1_SX800.webp alt="Whisper of the Heart" /> <img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BZDg0MWNmNjktMGEwZC00ZDlmLWI1MTUtMDBmNjQzMWM2NjBjXkEyXkFqcGdeQXVyMTMxODk2OTU@._V1_SX800.webp alt="Whisper of the Heart" />
@ -773,6 +749,30 @@
</div> </div>
<div class="card">
<div class="card-image">
<img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BMTI1NzQ5MzU1OV5BMl5BanBnXkFtZTcwNzExODU0MQ@@._V1_SX800.webp alt="No Reservations" />
</div>
<section class="card-content">
<header>
<h3 class="subtitle">No Reservations</h3>
</header>
<div>A NY City chef and her recently adopted niece adapt to their life together</div>
<div class="cluster spacing:between">
<div class="cluster s1 align:center">
Rating:
<span class="numbers">3/5</span>
</div>
<div>
<a class="button" href="/film/reviews/no-reservations/">
Read review
</a>
</div>
</div>
</div>
</div> </div>
</section> </section>
@ -783,30 +783,6 @@
</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/MV5BN2MyZDE0YjAtNWFjYy00MWRlLTk3MTktMzY3ZDVhNTJkZTlmXkEyXkFqcGdeQXVyNDk3NzU2MTQ@._V1_SX800.webp alt="Beverly Hills Cop" />
</div>
<section class="card-content">
<header>
<h3 class="subtitle">Beverly Hills Cop</h3>
</header>
<div>A Detroit cop comes to Beverly Hills to find the man who murdered his friend</div>
<div class="cluster spacing:between">
<div class="cluster s1 align:center">
Rating:
<span class="numbers">4/5</span>
</div>
<div>
<a class="button" href="/film/reviews/beverly-hills-cop/">
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/MV5BMTY0NDY3MDMxN15BMl5BanBnXkFtZTcwOTM5NzMzOQ@@._V1_SX800.webp alt="Now You See Me" /> <img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BMTY0NDY3MDMxN15BMl5BanBnXkFtZTcwOTM5NzMzOQ@@._V1_SX800.webp alt="Now You See Me" />
@ -837,6 +813,30 @@
</div> </div>
<div class="card">
<div class="card-image">
<img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BN2MyZDE0YjAtNWFjYy00MWRlLTk3MTktMzY3ZDVhNTJkZTlmXkEyXkFqcGdeQXVyNDk3NzU2MTQ@._V1_SX800.webp alt="Beverly Hills Cop" />
</div>
<section class="card-content">
<header>
<h3 class="subtitle">Beverly Hills Cop</h3>
</header>
<div>A Detroit cop comes to Beverly Hills to find the man who murdered his friend</div>
<div class="cluster spacing:between">
<div class="cluster s1 align:center">
Rating:
<span class="numbers">4/5</span>
</div>
<div>
<a class="button" href="/film/reviews/beverly-hills-cop/">
Read review
</a>
</div>
</div>
</div>
</div> </div>
</section> </section>

1
docs/review.css
View file

@ -11,7 +11,6 @@
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
gap: 30px; gap: 30px;
margin: 30px 0;
} }
.review-header h1 { .review-header h1 {

1
static/review.css
View file

@ -11,7 +11,6 @@
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
gap: 30px; gap: 30px;
margin: 30px 0;
} }
.review-header h1 { .review-header h1 {