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

PUBLISH: Improved Homepage

Browse source
This commit is contained in:
Campbell Alden 2022-08-31 12:57:24 +09:00
parent ea0d2ad97b
commit 8318d8dca5
12 changed files with 130 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

1
docs/404.html
View file

@ -14,6 +14,7 @@
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🎥</text></svg>">
<link rel="stylesheet" href="/film/style.css">
<link rel="stylesheet" href="/film/card.css">
<link rel="stylesheet" href="/film/home.css">
<link rel="stylesheet" href="/film/review.css">
<link rel="stylesheet" href="/film/quick_look.css">
<link rel="preconnect" href="https://fonts.googleapis.com">

1
docs/about/index.html
View file

@ -16,6 +16,7 @@
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🎥</text></svg>">
<link rel="stylesheet" href="/film/style.css">
<link rel="stylesheet" href="/film/card.css">
<link rel="stylesheet" href="/film/home.css">
<link rel="stylesheet" href="/film/review.css">
<link rel="stylesheet" href="/film/quick_look.css">
<link rel="preconnect" href="https://fonts.googleapis.com">

4
docs/card.css
View file

@ -5,8 +5,8 @@
border-radius: 10px;
background: var(--color-primary);
aspect-ratio: 2 / 3;
width: 280px;
max-height: 380px;
flex-basis: 280px;
max-width: 300px;
padding: 10px;
}

40
docs/home.css Normal file
View file

@ -0,0 +1,40 @@
.home-page-header {
display: flex;
flex-direction: column;
text-align: center;
gap: 10px;
}
.home-page-header p {
text-align: center;
margin: 0;
}
.search-bar {
display: flex;
background: white;
padding: 10px;
border-radius: 8px;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
gap: 10px;
align-items: center;
cursor: pointer;
}
.search-bar input {
flex-grow: 1;
flex-basis: 600px;
background: inherit;
outline: none;
border: none;
font-size: 16px;
font-family: var(--body-font-family)
}
.cards {
display: flex;
flex-wrap: wrap;
padding: 10px;
gap: 10px;
justify-content: center;
}

42
docs/index.html
View file

@ -17,6 +17,7 @@
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🎥</text></svg>">
<link rel="stylesheet" href="/film/style.css">
<link rel="stylesheet" href="/film/card.css">
<link rel="stylesheet" href="/film/home.css">
<link rel="stylesheet" href="/film/review.css">
<link rel="stylesheet" href="/film/quick_look.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
@ -36,11 +37,44 @@
</nav>
</header>
<main id="content">
<div>
<p>This site is under construction. Please excuse the mess.</p>
<div class="core-content">
<section class="home-page-header">
<header class="stack s1">
<h1 class="subtitle">Movie Recommendations</h1><p>A collection of quick recommendations and thoughts on movies</p>
</header>
<div class="search-bar">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M11 19C15.4183 19 19 15.4183 19 11C19 6.58172 15.4183 3 11 3C6.58172 3 3 6.58172 3 11C3 15.4183 6.58172 19 11 19Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M20.9999 21L16.6499 16.65" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<input list="movies" name="movie-search" id="movie-search" />
<datalist id="movies">
<option value="No Reservations" data-value="/film/reviews/no-reservations/">A NY City chef and her recently adopted niece adapt to their life together</option>
<option value="The French Dispatch" data-value="/film/reviews/the-french-dispatch/">Authors for a New Yorker-esque magazine report on a small town in France</option>
</datalist>
<script src="https://caalden.github.io/film/search.js" async defer></script>
</div>
<div class="cluster s1">
<div class="cluster justify:center s3">
<a class="button" href="https://caalden.github.io/film/genres">Genres</a>
<a class="button" href="https://caalden.github.io/film/a-z">A-Z</a>
<a class="button" href="https://caalden.github.io/film/favorites">Favorites</a>
</div>
</section>
<section class="stack s1">
<header>
<h2>Recent</h2>
</header>
<div class="cards">
@ -90,6 +124,8 @@
</div>
</section>
</div>
</main><footer>

3
docs/review.css
View file

@ -1,5 +1,6 @@
.review {
max-width: 800px;
max-width: calc(70ch + 60px);
margin: auto;
display: flex;
flex-direction: column;
align-items: center;

1
docs/reviews/index.html
View file

@ -22,6 +22,7 @@
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🎥</text></svg>">
<link rel="stylesheet" href="/film/style.css">
<link rel="stylesheet" href="/film/card.css">
<link rel="stylesheet" href="/film/home.css">
<link rel="stylesheet" href="/film/review.css">
<link rel="stylesheet" href="/film/quick_look.css">
<link rel="preconnect" href="https://fonts.googleapis.com">

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

@ -25,6 +25,7 @@
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🎥</text></svg>">
<link rel="stylesheet" href="/film/style.css">
<link rel="stylesheet" href="/film/card.css">
<link rel="stylesheet" href="/film/home.css">
<link rel="stylesheet" href="/film/review.css">
<link rel="stylesheet" href="/film/quick_look.css">
<link rel="preconnect" href="https://fonts.googleapis.com">

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

@ -25,6 +25,7 @@
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🎥</text></svg>">
<link rel="stylesheet" href="/film/style.css">
<link rel="stylesheet" href="/film/card.css">
<link rel="stylesheet" href="/film/home.css">
<link rel="stylesheet" href="/film/review.css">
<link rel="stylesheet" href="/film/quick_look.css">
<link rel="preconnect" href="https://fonts.googleapis.com">

13
docs/search.js Normal file
View file

@ -0,0 +1,13 @@
const searchInput = document.getElementById('movie-search');
const datalist = document.getElementById('movies');
const dataitems = new Map();
Array.from(datalist.children).forEach(function (ch) {
dataitems.set(ch.value, ch.getAttribute('data-value'));
});
searchInput.addEventListener('change', function(e) {
const targetLocation = dataitems.get(e.target.value);
if (targetLocation) {
window.location.href = targetLocation;
}
});

22
docs/style.css
View file

@ -75,6 +75,10 @@ p {
text-align: justify;
}
.text-align\:center {
text-align: center !important;
}
html, body {
background: var(--color-light-background);
color: var(--color-secondary);
@ -86,7 +90,7 @@ main {
display: flex;
flex-direction: column;
justify-content: center;
max-width: calc(70ch + 60px);
max-width: 900px;
}
.title, h1 {
@ -208,12 +212,20 @@ a:hover {
.cluster {
display: flex;
}
.stack {
display: flex;
flex-direction: column;
}
.spacing\:between {
justify-content: space-between;
}
.align\:center {
align-items: center;
}
.justify\:center {
justify-content: center;
}
.icon {
width: 24px;
@ -225,6 +237,12 @@ a:hover {
.s1 {
gap: 10px;
}
.s2 {
gap: 20px;
}
.s3 {
gap: 30px;
}
.p1 {
padding: 10px;
@ -264,5 +282,5 @@ a:hover {
}
.http-header {
margin-top: 10vh;
class="home-page-header" margin-top: 10vh;
}

1
static/home.css
View file

@ -36,4 +36,5 @@
flex-wrap: wrap;
padding: 10px;
gap: 10px;
justify-content: center;
}