PUBLISH
This commit is contained in:
Campbell Alden
parent
9931edd601
commit
6d7cd88cc1
7 changed files with 110 additions and 32 deletions
|
|
@ -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’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
46
docs/card.css
Normal 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
BIN
docs/imdb-logo-small.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
|
|
@ -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/">
|
||||
|
||||
<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>
|
||||
</h2>
|
||||
</h3>
|
||||
</header>
|
||||
<div>
|
||||
A new film from Wes Anderson styled after a magazine
|
||||
</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>
|
||||
<div>
|
||||
<h2>
|
||||
<a href="/film/about/">
|
||||
About
|
||||
<a class="button" href="/film/reviews/the-french-dispatch/">
|
||||
Read review
|
||||
</a>
|
||||
</h2>
|
||||
<div>
|
||||
This is a blog that I’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’re still fresh.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</main><footer>
|
||||
<span></span>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue