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

PUBLISH

Browse source
This commit is contained in:
Campbell Alden 2022-09-02 19:33:04 +09:00
parent 858c725bac
commit ade4dfd1d2
8 changed files with 56 additions and 34 deletions
Download patch file Download diff file Expand all files Collapse all files

68
docs/genres/index.html
View file

@ -115,6 +115,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/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/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" />
@ -139,6 +163,16 @@
</div> </div>
</div>
</section>
<section>
<header class="cluster spacing:between p1" style="align-items: flex-end;">
<h2>Drama</h2>
<a href="drama" class="button button:large">See more</a>
</header>
<div class="carasol">
<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" />
@ -163,16 +197,6 @@
</div> </div>
</div>
</section>
<section>
<header class="cluster spacing:between p1" style="align-items: flex-end;">
<h2>Drama</h2>
<a href="drama" class="button button:large">See more</a>
</header>
<div class="carasol">
<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" />
@ -197,30 +221,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.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>

11
docs/review.css
View file

@ -19,6 +19,7 @@
} }
.review-poster { .review-poster {
position: relative;
aspect-ratio: 1/1; aspect-ratio: 1/1;
flex-basis: 200px; flex-basis: 200px;
max-width: 200px; max-width: 200px;
@ -32,3 +33,13 @@
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
} }
.review-favorite {
position: absolute;
display: flex;
right: 10px;
top: 10px;
padding: 10px;
background: rgba(255,255,255,0.25);
border-radius: 100%;
}

1
docs/reviews/kingsman/index.html
View file

@ -50,6 +50,7 @@
<div class="review-poster"> <div class="review-poster">
<img src=https://m.media-amazon.com/images/M/MV5BYTM3ZTllNzItNTNmOS00NzJiLTg1MWMtMjMxNDc0NmJhODU5XkEyXkFqcGdeQXVyODE5NzE3OTE@._V1_SX800.jpg alt="Poster"> <img src=https://m.media-amazon.com/images/M/MV5BYTM3ZTllNzItNTNmOS00NzJiLTg1MWMtMjMxNDc0NmJhODU5XkEyXkFqcGdeQXVyODE5NzE3OTE@._V1_SX800.jpg alt="Poster">
</div> </div>
<h1>Kingsman: The Secret Service</h1> <h1>Kingsman: The Secret Service</h1>

1
docs/reviews/no-reservations/index.html
View file

@ -50,6 +50,7 @@
<div class="review-poster"> <div class="review-poster">
<img src=https://m.media-amazon.com/images/M/MV5BMTI1NzQ5MzU1OV5BMl5BanBnXkFtZTcwNzExODU0MQ@@._V1_SX800.jpg alt="Poster"> <img src=https://m.media-amazon.com/images/M/MV5BMTI1NzQ5MzU1OV5BMl5BanBnXkFtZTcwNzExODU0MQ@@._V1_SX800.jpg alt="Poster">
</div> </div>
<h1>No Reservations</h1> <h1>No Reservations</h1>

1
docs/reviews/the-french-dispatch/index.html
View file

@ -50,6 +50,7 @@
<div class="review-poster"> <div class="review-poster">
<img src=https://m.media-amazon.com/images/M/MV5BNmQxZTNiODYtNzBhYy00MzVlLWJlN2UtNTc4YWZjMDIwMmEzXkEyXkFqcGdeQXVyMTkxNjUyNQ@@._V1_SX800.jpg alt="Poster"> <img src=https://m.media-amazon.com/images/M/MV5BNmQxZTNiODYtNzBhYy00MzVlLWJlN2UtNTc4YWZjMDIwMmEzXkEyXkFqcGdeQXVyMTkxNjUyNQ@@._V1_SX800.jpg alt="Poster">
</div> </div>
<h1>The French Dispatch</h1> <h1>The French Dispatch</h1>

4
docs/search.js
View file

@ -1,8 +1,12 @@
const searchInput = document.getElementById('movie-search'); const searchInput = document.getElementById('movie-search');
const datalist = document.getElementById('movies'); const datalist = document.getElementById('movies');
const dataitems = new Map(); const dataitems = new Map();
const dataSummaries = new Map();
Array.from(datalist.children).forEach(function (ch) { Array.from(datalist.children).forEach(function (ch) {
dataitems.set(ch.value, ch.getAttribute('data-value')); dataitems.set(ch.value, ch.getAttribute('data-value'));
if (navigator.userAgent.match(/firefox/i)) {
ch.innerHTML = ch.value;
}
}); });
searchInput.addEventListener('change', function(e) { searchInput.addEventListener('change', function(e) {

0
layouts/partials/search.html
View file

4
static/search.js
View file

@ -1,8 +1,12 @@
const searchInput = document.getElementById('movie-search'); const searchInput = document.getElementById('movie-search');
const datalist = document.getElementById('movies'); const datalist = document.getElementById('movies');
const dataitems = new Map(); const dataitems = new Map();
const dataSummaries = new Map();
Array.from(datalist.children).forEach(function (ch) { Array.from(datalist.children).forEach(function (ch) {
dataitems.set(ch.value, ch.getAttribute('data-value')); dataitems.set(ch.value, ch.getAttribute('data-value'));
if (navigator.userAgent.match(/firefox/i)) {
ch.innerHTML = ch.value;
}
}); });
searchInput.addEventListener('change', function(e) { searchInput.addEventListener('change', function(e) {