diff --git a/docs/card.css b/docs/card.css index 504ea89..1408b6a 100644 --- a/docs/card.css +++ b/docs/card.css @@ -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; diff --git a/docs/genres/index.html b/docs/genres/index.html index ce46138..80bd9d3 100644 --- a/docs/genres/index.html +++ b/docs/genres/index.html @@ -56,6 +56,30 @@
+
+
+ Kingsman: The Secret Service + +
+
+
+

Kingsman: The Secret Service

+
+
A secret British spy agency unravels a billionaire’s evil plot
+
+
+ Rating: + 4/5 +
+
+ + Read review + +
+
+
+ +
Now You See Me 2 @@ -80,30 +104,6 @@
-
-
- Beverly Hills Cop - -
-
-
-

Beverly Hills Cop

-
-
A Detroit cop comes to Beverly Hills to find the man who murdered his friend
-
-
- Rating: - 4/5 -
- -
-
- -
In Time @@ -160,21 +160,21 @@
- Kingsman: The Secret Service + Beverly Hills Cop
-

Kingsman: The Secret Service

+

Beverly Hills Cop

-
A secret British spy agency unravels a billionaire’s evil plot
+
A Detroit cop comes to Beverly Hills to find the man who murdered his friend
Rating: 4/5
@@ -332,21 +332,27 @@
- Kingsman: The Secret Service + Holes + + + + + +
-

Kingsman: The Secret Service

+

Holes

-
A secret British spy agency unravels a billionaire’s evil plot
+
A boy is sent to a juvenile work camp as punishment after being mistakenly arrested.
Rating: - 4/5 + 3/5
@@ -378,6 +384,40 @@
+
+
+ Kingsman: The Secret Service + +
+
+
+

Kingsman: The Secret Service

+
+
A secret British spy agency unravels a billionaire’s evil plot
+
+
+ Rating: + 4/5 +
+ +
+
+ + +
+
+ +
+
+

Comedy

+ See more +
+
+
Holes @@ -408,15 +448,29 @@
-
-
+
+
+ Now You See Me 2 -
-
-

Comedy

- See more -
-
+
+
+
+

Now You See Me 2

+
+
A group of magicians are coerced into pulling off another heist
+
+
+ Rating: + 2/5 +
+ +
+
+
@@ -442,36 +496,6 @@
-
-
- Holes - - - - - - - -
-
-
-

Holes

-
-
A boy is sent to a juvenile work camp as punishment after being mistakenly arrested.
-
-
- Rating: - 3/5 -
- -
-
- -
The French Dispatch @@ -520,30 +544,6 @@
-
-
- Now You See Me 2 - -
-
-
-

Now You See Me 2

-
-
A group of magicians are coerced into pulling off another heist
-
-
- Rating: - 2/5 -
- -
-
- -
@@ -554,30 +554,6 @@
-
-
- The French Dispatch - -
-
-
-

The French Dispatch

-
-
Authors for a New Yorker-esque magazine report on a small town in France
-
-
- Rating: - 4/5 -
- -
-
- -
Holes @@ -656,6 +632,30 @@
+
+
+ The French Dispatch + +
+
+
+

The French Dispatch

+
+
Authors for a New Yorker-esque magazine report on a small town in France
+
+
+ Rating: + 4/5 +
+ +
+
+ +
@@ -700,30 +700,6 @@
-
-
- Whisper of the Heart - -
-
-
-

Whisper of the Heart

-
-
A slice of life story about a bookish middle school girl living in Tokyo
-
-
- Rating: - 5/5 -
- -
-
- -
No Reservations @@ -748,6 +724,30 @@
+
+
+ Whisper of the Heart + +
+
+
+

Whisper of the Heart

+
+
A slice of life story about a bookish middle school girl living in Tokyo
+
+
+ Rating: + 5/5 +
+ +
+
+ +
The French Dispatch diff --git a/docs/quick_look.css b/docs/quick_look.css index ab506ef..01f28f1 100644 --- a/docs/quick_look.css +++ b/docs/quick_look.css @@ -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 { diff --git a/docs/style.css b/docs/style.css index c5ea059..5b80772 100644 --- a/docs/style.css +++ b/docs/style.css @@ -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; } diff --git a/static/card.css b/static/card.css index 504ea89..1408b6a 100644 --- a/static/card.css +++ b/static/card.css @@ -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; diff --git a/static/quick_look.css b/static/quick_look.css index ab506ef..01f28f1 100644 --- a/static/quick_look.css +++ b/static/quick_look.css @@ -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 { diff --git a/static/style.css b/static/style.css index c5ea059..5b80772 100644 --- a/static/style.css +++ b/static/style.css @@ -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; }