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-08-21 10:32:26 +09:00
parent 9931edd601
commit 6d7cd88cc1
7 changed files with 110 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

7
docs/about/index.html
View file

@ -4,6 +4,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inika:wght@400;700&family=Merriweather:wght@400;700&family=Rufina&display=swap" rel="stylesheet">
@ -12,10 +13,10 @@
<h2 class="title">CaAlden: <span class="color:accent">Films</span></h2><nav class="navbar">
<ul class="navbar-list">
<li class="navbar-item button:large">
<a href="https://caalden.github.io/film/about" class="button button:large">about</a>
<a href="https://caalden.github.io/film/about" class="button button:large color:invert">about</a>
</li>
<li class="navbar-item button:large">
<a href="https://caalden.github.io/film/" class="button button:large">home</a>
<a href="https://caalden.github.io/film/" class="button button:large color:invert">home</a>
</li>
</ul>
</nav>
@ -25,6 +26,7 @@
<header>
<h1>About</h1>
</header>
<div><p>This is a blog that I&rsquo;ve wanted to start for a long time! I create it with two goals in
mind.</p>
@ -40,6 +42,7 @@ For now, I hope you can find something useful or interesting in what I write.</p
</article>
</main><footer>
<span></span>
</footer>
</body>
</html>

46
docs/card.css Normal file
View file

@ -0,0 +1,46 @@
.card {
position: relative;
display: flex;
flex-direction: column;
border-radius: 10px;
background: var(--color-primary);
aspect-ratio: 2 / 3;
max-width: 250px;
max-height: 380px;
padding: 10px;
}
.card .card-content {
flex-basis: 0.0001%;
}
.card .card-image {
flex-basis: 99.9999%;
}
.card:hover .card-content {
flex-basis: 50%;
padding-top: 10px;
}
.card:hover .card-image {
flex-basis: 50%;
}
.card-content {
overflow: hidden;
display: flex;
flex-direction: column;
gap: 10px;
justify-content: space-between;
transition: flex-basis 250ms ease-out;
}
.card-image {
transition: flex-basis 250ms ease-out;
flex-grow: 1;
flex-basis: 100%;
object-fit: cover;
display: flex;
overflow: hidden;
border-radius: 8px;
}

BIN
docs/imdb-logo-small.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.5 KiB

51
docs/index.html
View file

@ -5,6 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inika:wght@400;700&family=Merriweather:wght@400;700&family=Rufina&display=swap" rel="stylesheet">
@ -13,10 +14,10 @@
<h2 class="title">CaAlden: <span class="color:accent">Films</span></h2><nav class="navbar">
<ul class="navbar-list">
<li class="navbar-item button:large">
<a href="https://caalden.github.io/film/about" class="button button:large">about</a>
<a href="https://caalden.github.io/film/about" class="button button:large color:invert">about</a>
</li>
<li class="navbar-item button:large">
<a href="https://caalden.github.io/film/" class="button button:large">home</a>
<a href="https://caalden.github.io/film/" class="button button:large color:invert">home</a>
</li>
</ul>
</nav>
@ -26,40 +27,44 @@
<p>This site is under construction but will eventually host my movie comments and reviews!</p>
</div>
<div>
<div class="cluster s1">
<div>
<div>
<h2>
<a href="/film/reviews/the-french-dispatch/">
The French Dispatch
</a>
</h2>
<div class="card">
<div class="card-image">
<img class="card-image" src=https://m.media-amazon.com/images/M/MV5BNmQxZTNiODYtNzBhYy00MzVlLWJlN2UtNTc4YWZjMDIwMmEzXkEyXkFqcGdeQXVyMTkxNjUyNQ@@._V1_SX300.jpg />
</div>
<section class="card-content">
<header>
<h3 class="subtitle">
The French Dispatch
</a>
</h3>
</header>
<div>
A new film from Wes Anderson styled after a magazine
</div>
</div>
</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">
<span class="numbers">7.2</span>
</div>
<div>
<div>
<h2>
<a href="/film/about/">
About
</a>
</h2>
<div>
This is a blog that I&rsquo;ve wanted to start for a long time! I create it with two goals in mind.
First, I want to jot down and share my thoughts about movies as I have them. I normally have a pretty clear opinion and thoughts about movies after I watch them, but then cannot remember clearly all the little things I was thinking after about a week. I hope to use this blog to track those ideas while they&rsquo;re still fresh.
<a class="button" href="/film/reviews/the-french-dispatch/">
Read review
</a>
</div>
</div>
</div>
</div>
</main><footer>
<span></span>
</footer>
</body>
</html>

6
docs/reviews/index.html
View file

@ -4,6 +4,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inika:wght@400;700&family=Merriweather:wght@400;700&family=Rufina&display=swap" rel="stylesheet">
@ -12,10 +13,10 @@
<h2 class="title">CaAlden: <span class="color:accent">Films</span></h2><nav class="navbar">
<ul class="navbar-list">
<li class="navbar-item button:large">
<a href="https://caalden.github.io/film/about" class="button button:large">about</a>
<a href="https://caalden.github.io/film/about" class="button button:large color:invert">about</a>
</li>
<li class="navbar-item button:large">
<a href="https://caalden.github.io/film/" class="button button:large">home</a>
<a href="https://caalden.github.io/film/" class="button button:large color:invert">home</a>
</li>
</ul>
</nav>
@ -38,6 +39,7 @@
</ul>
</main><footer>
<span></span>
</footer>
</body>
</html>

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

@ -4,6 +4,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inika:wght@400;700&family=Merriweather:wght@400;700&family=Rufina&display=swap" rel="stylesheet">
@ -12,10 +13,10 @@
<h2 class="title">CaAlden: <span class="color:accent">Films</span></h2><nav class="navbar">
<ul class="navbar-list">
<li class="navbar-item button:large">
<a href="https://caalden.github.io/film/about" class="button button:large">about</a>
<a href="https://caalden.github.io/film/about" class="button button:large color:invert">about</a>
</li>
<li class="navbar-item button:large">
<a href="https://caalden.github.io/film/" class="button button:large">home</a>
<a href="https://caalden.github.io/film/" class="button button:large color:invert">home</a>
</li>
</ul>
</nav>
@ -25,6 +26,9 @@
<header>
<h1>The French Dispatch</h1>
<img src=https://m.media-amazon.com/images/M/MV5BNmQxZTNiODYtNzBhYy00MzVlLWJlN2UtNTc4YWZjMDIwMmEzXkEyXkFqcGdeQXVyMTkxNjUyNQ@@._V1_SX300.jpg alt="Poster">
<strong>Rating</strong>
⭐
@ -58,6 +62,7 @@ style. I think I might recommend watching another Wes Anderson film first and th
</article>
</main><footer>
<span></span>
</footer>
</body>
</html>

23
docs/style.css
View file

@ -122,7 +122,6 @@ button, .button {
background: transparent;
/* inherit font & color from ancestor */
color: inherit;
font: inherit;
/* Corrects font smoothing for webkit */
@ -182,9 +181,27 @@ a:hover {
color: var(--color-primary);
}
.cluster {
display: flex;
}
.spacing\:between {
justify-content: space-between;
}
.align\:center {
align-items: center;
}
.icon {
width: 24px;
height: 24px;
border-radius: 4px;
overflow: hidden;
}
.s1 {
gap: 10px;
}
.s2 {
gap: 20px;
.p1 {
padding: 10px;
}