PUBLISH: Dark mode via settings
This commit is contained in:
Campbell Alden
parent
9eebd5d680
commit
8ea4b817c2
7 changed files with 233 additions and 161 deletions
|
|
@ -3,7 +3,7 @@
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
border-radius: 10px;
|
||||
background: var(--color-primary);
|
||||
background: var(--color-secondary-background);
|
||||
aspect-ratio: 2 / 3;
|
||||
height: 100%; /* This feels like it shouldn't be necessary */
|
||||
flex-basis: 280px;
|
||||
|
|
|
|||
|
|
@ -56,6 +56,30 @@
|
|||
</header>
|
||||
<div class="carasol">
|
||||
|
||||
<div class="card">
|
||||
<div class="card-image">
|
||||
<img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BYTM3ZTllNzItNTNmOS00NzJiLTg1MWMtMjMxNDc0NmJhODU5XkEyXkFqcGdeQXVyODE5NzE3OTE@._V1_SX800.webp alt="Kingsman: The Secret Service" />
|
||||
|
||||
</div>
|
||||
<section class="card-content">
|
||||
<header>
|
||||
<h3 class="subtitle card-title-long">Kingsman: The Secret Service</h3>
|
||||
</header>
|
||||
<div>A secret British spy agency unravels a billionaire’s evil plot</div>
|
||||
<div class="cluster spacing:between">
|
||||
<div class="cluster s1 align:center">
|
||||
Rating:
|
||||
<span class="numbers">4/5</span>
|
||||
</div>
|
||||
<div>
|
||||
<a class="button" href="/film/reviews/kingsman/">
|
||||
Read review
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="card">
|
||||
<div class="card-image">
|
||||
<img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BYjhlNDljNTgtZjc4My00NmZmLTk2YzAtYWE5MDYwYjM4MTkzXkEyXkFqcGdeQXVyODE5NzE3OTE@._V1_SX800.webp alt="Now You See Me 2" />
|
||||
|
|
@ -80,30 +104,6 @@
|
|||
</div>
|
||||
|
||||
|
||||
<div class="card">
|
||||
<div class="card-image">
|
||||
<img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BN2MyZDE0YjAtNWFjYy00MWRlLTk3MTktMzY3ZDVhNTJkZTlmXkEyXkFqcGdeQXVyNDk3NzU2MTQ@._V1_SX800.webp alt="Beverly Hills Cop" />
|
||||
|
||||
</div>
|
||||
<section class="card-content">
|
||||
<header>
|
||||
<h3 class="subtitle">Beverly Hills Cop</h3>
|
||||
</header>
|
||||
<div>A Detroit cop comes to Beverly Hills to find the man who murdered his friend</div>
|
||||
<div class="cluster spacing:between">
|
||||
<div class="cluster s1 align:center">
|
||||
Rating:
|
||||
<span class="numbers">4/5</span>
|
||||
</div>
|
||||
<div>
|
||||
<a class="button" href="/film/reviews/beverly-hills-cop/">
|
||||
Read review
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="card">
|
||||
<div class="card-image">
|
||||
<img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BMjA3NzI1ODc1MV5BMl5BanBnXkFtZTcwMzI5NjQwNg@@._V1_SX800.webp alt="In Time" />
|
||||
|
|
@ -160,21 +160,21 @@
|
|||
|
||||
<div class="card">
|
||||
<div class="card-image">
|
||||
<img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BYTM3ZTllNzItNTNmOS00NzJiLTg1MWMtMjMxNDc0NmJhODU5XkEyXkFqcGdeQXVyODE5NzE3OTE@._V1_SX800.webp alt="Kingsman: The Secret Service" />
|
||||
<img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BN2MyZDE0YjAtNWFjYy00MWRlLTk3MTktMzY3ZDVhNTJkZTlmXkEyXkFqcGdeQXVyNDk3NzU2MTQ@._V1_SX800.webp alt="Beverly Hills Cop" />
|
||||
|
||||
</div>
|
||||
<section class="card-content">
|
||||
<header>
|
||||
<h3 class="subtitle card-title-long">Kingsman: The Secret Service</h3>
|
||||
<h3 class="subtitle">Beverly Hills Cop</h3>
|
||||
</header>
|
||||
<div>A secret British spy agency unravels a billionaire’s evil plot</div>
|
||||
<div>A Detroit cop comes to Beverly Hills to find the man who murdered his friend</div>
|
||||
<div class="cluster spacing:between">
|
||||
<div class="cluster s1 align:center">
|
||||
Rating:
|
||||
<span class="numbers">4/5</span>
|
||||
</div>
|
||||
<div>
|
||||
<a class="button" href="/film/reviews/kingsman/">
|
||||
<a class="button" href="/film/reviews/beverly-hills-cop/">
|
||||
Read review
|
||||
</a>
|
||||
</div>
|
||||
|
|
@ -332,21 +332,27 @@
|
|||
|
||||
<div class="card">
|
||||
<div class="card-image">
|
||||
<img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BYTM3ZTllNzItNTNmOS00NzJiLTg1MWMtMjMxNDc0NmJhODU5XkEyXkFqcGdeQXVyODE5NzE3OTE@._V1_SX800.webp alt="Kingsman: The Secret Service" />
|
||||
<img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BMTg0MTU5ODkwM15BMl5BanBnXkFtZTYwMzgxNzY3._V1_SX800.webp alt="Holes" />
|
||||
|
||||
<a class="card-favorite-star" href="https://caalden.github.io/film/favorites">
|
||||
<span hidden>Favorite</span>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="yellow" stroke="gold" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-star"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
|
||||
|
||||
</a>
|
||||
|
||||
</div>
|
||||
<section class="card-content">
|
||||
<header>
|
||||
<h3 class="subtitle card-title-long">Kingsman: The Secret Service</h3>
|
||||
<h3 class="subtitle">Holes</h3>
|
||||
</header>
|
||||
<div>A secret British spy agency unravels a billionaire’s evil plot</div>
|
||||
<div>A boy is sent to a juvenile work camp as punishment after being mistakenly arrested.</div>
|
||||
<div class="cluster spacing:between">
|
||||
<div class="cluster s1 align:center">
|
||||
Rating:
|
||||
<span class="numbers">4/5</span>
|
||||
<span class="numbers">3/5</span>
|
||||
</div>
|
||||
<div>
|
||||
<a class="button" href="/film/reviews/kingsman/">
|
||||
<a class="button" href="/film/reviews/holes/">
|
||||
Read review
|
||||
</a>
|
||||
</div>
|
||||
|
|
@ -378,6 +384,40 @@
|
|||
</div>
|
||||
|
||||
|
||||
<div class="card">
|
||||
<div class="card-image">
|
||||
<img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BYTM3ZTllNzItNTNmOS00NzJiLTg1MWMtMjMxNDc0NmJhODU5XkEyXkFqcGdeQXVyODE5NzE3OTE@._V1_SX800.webp alt="Kingsman: The Secret Service" />
|
||||
|
||||
</div>
|
||||
<section class="card-content">
|
||||
<header>
|
||||
<h3 class="subtitle card-title-long">Kingsman: The Secret Service</h3>
|
||||
</header>
|
||||
<div>A secret British spy agency unravels a billionaire’s evil plot</div>
|
||||
<div class="cluster spacing:between">
|
||||
<div class="cluster s1 align:center">
|
||||
Rating:
|
||||
<span class="numbers">4/5</span>
|
||||
</div>
|
||||
<div>
|
||||
<a class="button" href="/film/reviews/kingsman/">
|
||||
Read review
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<header class="cluster spacing:between p1" style="align-items: flex-end;">
|
||||
<h2>Comedy</h2>
|
||||
<a href="comedy" class="button button:large">See more</a>
|
||||
</header>
|
||||
<div class="carasol">
|
||||
|
||||
<div class="card">
|
||||
<div class="card-image">
|
||||
<img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BMTg0MTU5ODkwM15BMl5BanBnXkFtZTYwMzgxNzY3._V1_SX800.webp alt="Holes" />
|
||||
|
|
@ -408,15 +448,29 @@
|
|||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</section>
|
||||
<div class="card">
|
||||
<div class="card-image">
|
||||
<img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BYjhlNDljNTgtZjc4My00NmZmLTk2YzAtYWE5MDYwYjM4MTkzXkEyXkFqcGdeQXVyODE5NzE3OTE@._V1_SX800.webp alt="Now You See Me 2" />
|
||||
|
||||
<section>
|
||||
<header class="cluster spacing:between p1" style="align-items: flex-end;">
|
||||
<h2>Comedy</h2>
|
||||
<a href="comedy" class="button button:large">See more</a>
|
||||
</header>
|
||||
<div class="carasol">
|
||||
</div>
|
||||
<section class="card-content">
|
||||
<header>
|
||||
<h3 class="subtitle">Now You See Me 2</h3>
|
||||
</header>
|
||||
<div>A group of magicians are coerced into pulling off another heist</div>
|
||||
<div class="cluster spacing:between">
|
||||
<div class="cluster s1 align:center">
|
||||
Rating:
|
||||
<span class="numbers">2/5</span>
|
||||
</div>
|
||||
<div>
|
||||
<a class="button" href="/film/reviews/now-you-see-me-2/">
|
||||
Read review
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="card">
|
||||
<div class="card-image">
|
||||
|
|
@ -442,36 +496,6 @@
|
|||
</div>
|
||||
|
||||
|
||||
<div class="card">
|
||||
<div class="card-image">
|
||||
<img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BMTg0MTU5ODkwM15BMl5BanBnXkFtZTYwMzgxNzY3._V1_SX800.webp alt="Holes" />
|
||||
|
||||
<a class="card-favorite-star" href="https://caalden.github.io/film/favorites">
|
||||
<span hidden>Favorite</span>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="yellow" stroke="gold" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-star"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
|
||||
|
||||
</a>
|
||||
|
||||
</div>
|
||||
<section class="card-content">
|
||||
<header>
|
||||
<h3 class="subtitle">Holes</h3>
|
||||
</header>
|
||||
<div>A boy is sent to a juvenile work camp as punishment after being mistakenly arrested.</div>
|
||||
<div class="cluster spacing:between">
|
||||
<div class="cluster s1 align:center">
|
||||
Rating:
|
||||
<span class="numbers">3/5</span>
|
||||
</div>
|
||||
<div>
|
||||
<a class="button" href="/film/reviews/holes/">
|
||||
Read review
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="card">
|
||||
<div class="card-image">
|
||||
<img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BNmQxZTNiODYtNzBhYy00MzVlLWJlN2UtNTc4YWZjMDIwMmEzXkEyXkFqcGdeQXVyMTkxNjUyNQ@@._V1_SX800.webp alt="The French Dispatch" />
|
||||
|
|
@ -520,30 +544,6 @@
|
|||
</div>
|
||||
|
||||
|
||||
<div class="card">
|
||||
<div class="card-image">
|
||||
<img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BYjhlNDljNTgtZjc4My00NmZmLTk2YzAtYWE5MDYwYjM4MTkzXkEyXkFqcGdeQXVyODE5NzE3OTE@._V1_SX800.webp alt="Now You See Me 2" />
|
||||
|
||||
</div>
|
||||
<section class="card-content">
|
||||
<header>
|
||||
<h3 class="subtitle">Now You See Me 2</h3>
|
||||
</header>
|
||||
<div>A group of magicians are coerced into pulling off another heist</div>
|
||||
<div class="cluster spacing:between">
|
||||
<div class="cluster s1 align:center">
|
||||
Rating:
|
||||
<span class="numbers">2/5</span>
|
||||
</div>
|
||||
<div>
|
||||
<a class="button" href="/film/reviews/now-you-see-me-2/">
|
||||
Read review
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
|
@ -554,30 +554,6 @@
|
|||
</header>
|
||||
<div class="carasol">
|
||||
|
||||
<div class="card">
|
||||
<div class="card-image">
|
||||
<img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BNmQxZTNiODYtNzBhYy00MzVlLWJlN2UtNTc4YWZjMDIwMmEzXkEyXkFqcGdeQXVyMTkxNjUyNQ@@._V1_SX800.webp alt="The French Dispatch" />
|
||||
|
||||
</div>
|
||||
<section class="card-content">
|
||||
<header>
|
||||
<h3 class="subtitle">The French Dispatch</h3>
|
||||
</header>
|
||||
<div>Authors for a New Yorker-esque magazine report on a small town in France</div>
|
||||
<div class="cluster spacing:between">
|
||||
<div class="cluster s1 align:center">
|
||||
Rating:
|
||||
<span class="numbers">4/5</span>
|
||||
</div>
|
||||
<div>
|
||||
<a class="button" href="/film/reviews/the-french-dispatch/">
|
||||
Read review
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="card">
|
||||
<div class="card-image">
|
||||
<img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BMTg0MTU5ODkwM15BMl5BanBnXkFtZTYwMzgxNzY3._V1_SX800.webp alt="Holes" />
|
||||
|
|
@ -656,6 +632,30 @@
|
|||
</div>
|
||||
|
||||
|
||||
<div class="card">
|
||||
<div class="card-image">
|
||||
<img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BNmQxZTNiODYtNzBhYy00MzVlLWJlN2UtNTc4YWZjMDIwMmEzXkEyXkFqcGdeQXVyMTkxNjUyNQ@@._V1_SX800.webp alt="The French Dispatch" />
|
||||
|
||||
</div>
|
||||
<section class="card-content">
|
||||
<header>
|
||||
<h3 class="subtitle">The French Dispatch</h3>
|
||||
</header>
|
||||
<div>Authors for a New Yorker-esque magazine report on a small town in France</div>
|
||||
<div class="cluster spacing:between">
|
||||
<div class="cluster s1 align:center">
|
||||
Rating:
|
||||
<span class="numbers">4/5</span>
|
||||
</div>
|
||||
<div>
|
||||
<a class="button" href="/film/reviews/the-french-dispatch/">
|
||||
Read review
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
|
@ -700,30 +700,6 @@
|
|||
</header>
|
||||
<div class="carasol">
|
||||
|
||||
<div class="card">
|
||||
<div class="card-image">
|
||||
<img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BZDg0MWNmNjktMGEwZC00ZDlmLWI1MTUtMDBmNjQzMWM2NjBjXkEyXkFqcGdeQXVyMTMxODk2OTU@._V1_SX800.webp alt="Whisper of the Heart" />
|
||||
|
||||
</div>
|
||||
<section class="card-content">
|
||||
<header>
|
||||
<h3 class="subtitle">Whisper of the Heart</h3>
|
||||
</header>
|
||||
<div>A slice of life story about a bookish middle school girl living in Tokyo</div>
|
||||
<div class="cluster spacing:between">
|
||||
<div class="cluster s1 align:center">
|
||||
Rating:
|
||||
<span class="numbers">5/5</span>
|
||||
</div>
|
||||
<div>
|
||||
<a class="button" href="/film/reviews/whisper-of-the-heart/">
|
||||
Read review
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="card">
|
||||
<div class="card-image">
|
||||
<img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BMTI1NzQ5MzU1OV5BMl5BanBnXkFtZTcwNzExODU0MQ@@._V1_SX800.webp alt="No Reservations" />
|
||||
|
|
@ -748,6 +724,30 @@
|
|||
</div>
|
||||
|
||||
|
||||
<div class="card">
|
||||
<div class="card-image">
|
||||
<img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BZDg0MWNmNjktMGEwZC00ZDlmLWI1MTUtMDBmNjQzMWM2NjBjXkEyXkFqcGdeQXVyMTMxODk2OTU@._V1_SX800.webp alt="Whisper of the Heart" />
|
||||
|
||||
</div>
|
||||
<section class="card-content">
|
||||
<header>
|
||||
<h3 class="subtitle">Whisper of the Heart</h3>
|
||||
</header>
|
||||
<div>A slice of life story about a bookish middle school girl living in Tokyo</div>
|
||||
<div class="cluster spacing:between">
|
||||
<div class="cluster s1 align:center">
|
||||
Rating:
|
||||
<span class="numbers">5/5</span>
|
||||
</div>
|
||||
<div>
|
||||
<a class="button" href="/film/reviews/whisper-of-the-heart/">
|
||||
Read review
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="card">
|
||||
<div class="card-image">
|
||||
<img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BNmQxZTNiODYtNzBhYy00MzVlLWJlN2UtNTc4YWZjMDIwMmEzXkEyXkFqcGdeQXVyMTkxNjUyNQ@@._V1_SX800.webp alt="The French Dispatch" />
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
.quicklook {
|
||||
max-width: 600px;
|
||||
border-radius: 16px;
|
||||
background: #F4C2CD;
|
||||
color: #702E2E;
|
||||
background: var(--color-quicklook-background);
|
||||
color: var(--color-quicklook-primary);
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
}
|
||||
|
||||
.quicklook-emphasized-color {
|
||||
color: #3D292D !important ;
|
||||
color: var(--color-quicklook-emphasized) !important ;
|
||||
}
|
||||
|
||||
.quicklook-info {
|
||||
|
|
|
|||
|
|
@ -51,14 +51,38 @@
|
|||
|
||||
--color-primary: #FFFFFF;
|
||||
--color-secondary: #110F12;
|
||||
--color-header: #000;
|
||||
--color-accent: #D2002E;
|
||||
--color-light-background: #f2f2f2;
|
||||
--color-dark-background: #333;
|
||||
--color-primary-background: #f2f2f2;
|
||||
--color-secondary-background: #fff;
|
||||
--color-link: #1D4F8C;
|
||||
--color-deemphasize: #4D4D4D;
|
||||
|
||||
/* Quick Look section */
|
||||
--color-quicklook-primary: #702E2E;
|
||||
--color-quicklook-emphasized: #3D292D;
|
||||
--color-quicklook-background: #F4C2CD;
|
||||
|
||||
font-size: var(--body-font-size);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--color-primary: #1A1A1A;
|
||||
--color-secondary: #FFFFFF;
|
||||
--color-header: #0D0D0D;
|
||||
--color-accent: #D2002E;
|
||||
--color-primary-background: #1A1A1A;
|
||||
--color-secondary-background: #0D0D0D;
|
||||
--color-link: #4487D9;
|
||||
--color-deemphasize: #ADADAD;
|
||||
|
||||
--color-quicklook-primary: #F4C2CD;
|
||||
--color-quicklook-emphasized: #F4C2CD;
|
||||
--color-quicklook-background: #520F1D;
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
|
|
@ -76,7 +100,7 @@ html, body, p, section, header, article {
|
|||
}
|
||||
|
||||
html, body {
|
||||
background: var(--color-light-background);
|
||||
background: var(--color-primary-background);
|
||||
color: var(--color-secondary);
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
|
@ -193,8 +217,14 @@ a:hover {
|
|||
.color\:invert {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.color\:invert {
|
||||
color: var(--color-secondary);
|
||||
}
|
||||
}
|
||||
|
||||
.bg\:secondary {
|
||||
background: var(--color-secondary);
|
||||
background: var(--color-secondary-background);
|
||||
}
|
||||
.color\:deemphasize {
|
||||
color: var(--color-deemphasize);
|
||||
|
|
@ -213,10 +243,16 @@ a:hover {
|
|||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
background: var(--color-secondary);
|
||||
background: var(--color-header);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.header {
|
||||
color: var(--color-secondary);
|
||||
}
|
||||
}
|
||||
|
||||
.cluster {
|
||||
display: flex;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue