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 08:29:33 +09:00
parent 0335e6c126
commit f1eade2766
4 changed files with 146 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

3
docs/index.html
View file

@ -4,9 +4,10 @@
<title></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">
</head>
<body><header>
<h1>CaAlden: Films</h1>
<h2 class="color:invert bg:secondary">CaAlden: <span class="color:accent">Films</span></h2>
</header>
<main id="content">
<div>

3
docs/reviews/index.html
View file

@ -3,9 +3,10 @@
<title>Reviews</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">
</head>
<body><header>
<h1>CaAlden: Films</h1>
<h2 class="color:invert bg:secondary">CaAlden: <span class="color:accent">Films</span></h2>
</header>
<main id="content">
<article>

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

@ -3,14 +3,15 @@
<title>The French Dispatch</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">
</head>
<body><header>
<h1>CaAlden: Films</h1>
<h2 class="color:invert bg:secondary">CaAlden: <span class="color:accent">Films</span></h2>
</header>
<main id="content">
<article>
<header>
<h2>The French Dispatch</h2>
<h1>The French Dispatch</h1>
<strong>Rating</strong>
@ -27,16 +28,16 @@
</header>
<div><h3 id="synopsis">Synopsis</h3>
<div><h2 id="synopsis">Synopsis</h2>
<p>The french dispatch follows several different stories and perspectives surrounding the authors of a magazine based in kansas, but about
a small town in France. The film is framed in sections similar to how a magazine like The New Yorker is divided and each section is
stylistically different from the last to reflect the style of the author.</p>
<h3 id="review">Review</h3>
<h2 id="review">Review</h2>
<p>I found this movie very charming. I am a sucker for Wes Anderson films and this, like The Grand Budapest Hotel, strikes a perfect cord with
me both stylistically and substantively. The movie is very funny without many outright spoken jokes. It is visually pleasing in the standard
Wes Anderson way. Each individual story is also engaging and the binding narrative about the death of the magazine&rsquo;s editor pulls things
together just well enough that the movie as a whole feels coherent.</p>
<h3 id="recommendation">Recommendation</h3>
<h2 id="recommendation">Recommendation</h2>
<p>I would recommend this to anyone who is already a Wes Anderson fan, but I wouldn&rsquo;t necessarily suggest this if you are new to Wes Anderson.
It is <em>very</em> stylized and if you don&rsquo;t like the style you would hate the film. It also has a lot of absurdist humor which is not for everyone.
As my rating reflects, I really enjoyed this film so it gets a general recommendation from me as long as you consider my hesitations about

136
docs/style.css Normal file
View file

@ -0,0 +1,136 @@
:root {
--title-font-family: 'Merriweather';
--title-font-weight: 700;
--title-font-line-height: 80px;
--title-font-size: 64px;
--title-font-letter-spacing: -0.04em;
--h2-font-family: 'Merriweather';
--h2-font-weight: 700;
--h2-font-line-height: 50px;
--h2-font-size: 40px;
--h2-font-letter-spacing: -0.02em;
--subtitle-font-family: 'Rufina';
--subtitle-font-weight: 700;
--subtitle-font-line-height: 30px;
--subtitle-font-size: 24px;
--subtitle-font-letter-spacing: -0.02em;
--body-font-family: 'Inika';
--body-font-weight: 400;
--body-font-line-height: 26px;
--body-font-size: 16px;
--body-font-letter-spacing: 0.04em;
--caption-font-family: 'Inika';
--caption-font-weight: 400;
--caption-font-line-height: 12px;
--caption-font-size: 10px;
--caption-font-letter-spacing: 0.05em;
--button-font-family: 'Inika';
--button-font-weight: 700;
--button-font-line-height: 26px;
--button-primary-font-size: 16px;
--button-large-font-size: 24px;
--button-font-letter-spacing: 0.1em;
--numbers-font-family: 'Monaco';
--numbers-font-weight: 400;
--numbers-font-line-height: 12px;
--numbers-font-size: 16px;
--numbers-font-letter-spacing: -0.02em;
--color-primary: #FFFFFF;
--color-secondary: #110F12;
--color-accent: #D2002E;
--color-light-background: #f2f2f2;
--color-dark-background: #333;
--color-link: #2F7BD5;
font-size: var(--body-font-size);
}
* {
box-sizing: border-box;
}
html, body, p, section, header, article {
font-family: var(--body-font-family);
font-weight: var(--body-font-weight);
line-height: var(--body-font-line-height);
letter-spacing: var(--body-font-letter-spacing);
}
html, body {
background: var(--color-light-background);
color: var(--color-secondary);
width: 100vw;
min-height: 100vh;
padding: 0;
margin: 0;
}
.title, h1 {
font-family: var(--title-font-family);
font-weight: var(--title-font-weight);
line-height: var(--title-font-line-height);
font-size: var(--title-font-size);
letter-spacing: var(--title-font-letter-spacing);
margin: 0;
padding: 0;
}
.h2, h2 {
font-family: var(--h2-font-family);
font-weight: var(--h2-font-weight);
line-height: var(--h2-font-line-height);
font-size: var(--h2-font-size);
letter-spacing: var(--h2-font-letter-spacing);
margin: 0;
padding: 0;
}
.subtitle, h3, h4, h5, h6 {
font-family: var(--subtitle-font-family);
font-weight: var(--subtitle-font-weight);
line-height: var(--subtitle-font-line-height);
font-size: var(--subtitle-font-size);
letter-spacing: var(--subtitle-font-letter-spacing);
margin: 0;
padding: 0;
}
.caption {
font-family: var(--caption-font-family);
font-weight: var(--caption-font-weight);
line-height: var(--caption-font-line-height);
font-size: var(--caption-font-size);
letter-spacing: var(--caption-font-letter-spacing);
}
.numbers {
font-family: var(--numbers-font-family);
font-weight: var(--numbers-font-weight);
line-height: var(--numbers-font-line-height);
font-size: var(--numbers-font-size);
letter-spacing: var(--numbers-font-letter-spacing);
}
.button {
font-family: var(--button-font-family);
font-weight: var(--button-font-weight);
line-height: var(--button-font-line-height);
font-size: var(--button-primary-font-size);
letter-spacing: var(--button-font-letter-spacing);
}
.button\:large {
font-size: var(--button-large-font-size);
}
a {
color: var(--color-link)
}
.color\:accent {
color: var(--color-accent);
}
.color\:invert {
color: var(--color-primary);
}
.bg\:secondary {
background: var(--color-secondary);
}