This commit is contained in:
Campbell Alden 2022-08-21 09:19:28 +09:00
parent fb1620f563
commit 525726ae37
7 changed files with 163 additions and 8 deletions

45
docs/about/index.html Normal file
View file

@ -0,0 +1,45 @@
<!DOCTYPE html>
<html><head>
<title>About</title>
<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="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">
</head>
<body><header class="header">
<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>
</li>
<li class="navbar-item button:large">
<a href="https://caalden.github.io/film/" class="button button:large">home</a>
</li>
</ul>
</nav>
</header>
<main id="content">
<article>
<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>
<p>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.</p>
<p>Secondly, I find myself recommending movies a lot but often it&rsquo;s after the point where I&rsquo;ve lost track of why
I really liked the movie in the first place. I can talk vaguely about the things I liked, but I&rsquo;ve always thought
it would be nice to have a blog post I could throw at someone when I make a recommendation.</p>
<p>Maybe someday if people find this and like my ideas, I can share these thoughts and recommendations more publicly!
For now, I hope you can find something useful or interesting in what I write.</p>
</div>
</article>
</main><footer>
</footer>
</body>
</html>

View file

@ -5,9 +5,21 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <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="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/style.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">
</head> </head>
<body><header> <body><header class="header">
<h2 class="color:invert bg:secondary">CaAlden: <span class="color:accent">Films</span></h2> <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>
</li>
<li class="navbar-item button:large">
<a href="https://caalden.github.io/film/" class="button button:large">home</a>
</li>
</ul>
</nav>
</header> </header>
<main id="content"> <main id="content">
<div> <div>
@ -30,6 +42,21 @@
</div> </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.
</div>
</div>
</div>
</div> </div>
</main><footer> </main><footer>

View file

@ -16,5 +16,15 @@
<description>A new film from Wes Anderson styled after a magazine</description> <description>A new film from Wes Anderson styled after a magazine</description>
</item> </item>
<item>
<title>About</title>
<link>https://caalden.github.io/film/about/</link>
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>https://caalden.github.io/film/about/</guid>
<description>This is a blog that I&amp;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&amp;rsquo;re still fresh.</description>
</item>
</channel> </channel>
</rss> </rss>

View file

@ -4,9 +4,21 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <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="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/style.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">
</head> </head>
<body><header> <body><header class="header">
<h2 class="color:invert bg:secondary">CaAlden: <span class="color:accent">Films</span></h2> <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>
</li>
<li class="navbar-item button:large">
<a href="https://caalden.github.io/film/" class="button button:large">home</a>
</li>
</ul>
</nav>
</header> </header>
<main id="content"> <main id="content">
<article> <article>

View file

@ -4,9 +4,21 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <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="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/style.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">
</head> </head>
<body><header> <body><header class="header">
<h2 class="color:invert bg:secondary">CaAlden: <span class="color:accent">Films</span></h2> <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>
</li>
<li class="navbar-item button:large">
<a href="https://caalden.github.io/film/" class="button button:large">home</a>
</li>
</ul>
</nav>
</header> </header>
<main id="content"> <main id="content">
<article> <article>

View file

@ -11,6 +11,8 @@
</url><url> </url><url>
<loc>https://caalden.github.io/film/reviews/the-french-dispatch/</loc> <loc>https://caalden.github.io/film/reviews/the-french-dispatch/</loc>
<lastmod>2022-08-17T17:18:04+09:00</lastmod> <lastmod>2022-08-17T17:18:04+09:00</lastmod>
</url><url>
<loc>https://caalden.github.io/film/about/</loc>
</url><url> </url><url>
<loc>https://caalden.github.io/film/categories/</loc> <loc>https://caalden.github.io/film/categories/</loc>
</url><url> </url><url>

View file

@ -111,18 +111,41 @@ html, body {
letter-spacing: var(--numbers-font-letter-spacing); letter-spacing: var(--numbers-font-letter-spacing);
} }
.button { button, .button {
border: none;
margin: 0;
padding: 0;
width: auto;
overflow: visible;
text-align: inherit;
outline: none;
background: transparent;
/* inherit font & color from ancestor */
color: inherit;
font: inherit;
/* Corrects font smoothing for webkit */
-webkit-font-smoothing: inherit;
-moz-osx-font-smoothing: inherit;
/* Corrects inability to style clickable `input` types in iOS */
-webkit-appearance: none;
font-family: var(--button-font-family); font-family: var(--button-font-family);
font-weight: var(--button-font-weight); font-weight: var(--button-font-weight);
line-height: var(--button-font-line-height); line-height: var(--button-font-line-height);
font-size: var(--button-primary-font-size); font-size: var(--button-primary-font-size);
letter-spacing: var(--button-font-letter-spacing); letter-spacing: var(--button-font-letter-spacing);
text-transform: uppercase;
} }
.button\:large { .button\:large {
font-size: var(--button-large-font-size); font-size: var(--button-large-font-size);
} }
a { a {
color: var(--color-link) color: var(--color-link);
}
a:hover {
color: var(--color-accent);
} }
.color\:accent { .color\:accent {
@ -134,3 +157,27 @@ a {
.bg\:secondary { .bg\:secondary {
background: var(--color-secondary); background: var(--color-secondary);
} }
.navbar {
display: flex;
}
.navbar-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
gap: 30px;
}
.navbar-item {
padding: 0;
margin: 0;
}
.header {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
padding: 20px;
background: var(--color-secondary);
color: var(--color-primary);
}