From 5a16ebc04da1d9434b601684b298fa20428f21ff Mon Sep 17 00:00:00 2001
From: Adam Argyle <argyle@google.com>
Date: Mon, 1 Mar 2021 12:42:48 -0800
Subject: [PATCH] light theme fixes

---
 components/gradient.module.css | 13 ++++++++++++-
 style.css                      | 11 +++++++++++
 2 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/components/gradient.module.css b/components/gradient.module.css
index 4ea8f3b..b6e4d92 100644
--- a/components/gradient.module.css
+++ b/components/gradient.module.css
@@ -1,8 +1,9 @@
 .conic-swatch {
   --swatch-border: 5px;
+  --border-darkness: 100%;
 
   border-radius: 25px;
-  border: var(--swatch-border) solid hsl(0 0% 100% / 25%);
+  border: var(--swatch-border) solid hsl(0 0% var(--border-darkness) / 25%);
   aspect-ratio: 1;
   transition: aspect-ratio .5s ease;
   box-shadow: 0 20px 100px -45px var(--shadow, gray);
@@ -14,6 +15,10 @@
     outline-color: var(--shadow, gray);
   }
 
+  @media (prefers-color-scheme: light) {
+    --border-darkness: 0%;
+  }
+
   @media (orientation: landscape) {
     & {
       aspect-ratio: 16/9;
@@ -24,6 +29,12 @@
     & {
       height: 240px;
     }
+
+    @media (width <= 720px) {
+      & {
+        height: 120px;
+      }
+    }
   }
 }
 
diff --git a/style.css b/style.css
index e53eaef..31f18d7 100644
--- a/style.css
+++ b/style.css
@@ -112,6 +112,17 @@ header {
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
 
+    @media (prefers-color-scheme: light) {
+      & {
+        background: conic-gradient(
+          from 220deg at 50% -200%, 
+          rebeccapurple, red, hotpink
+        ) border-box;
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+      }
+    }
+
     @media (prefers-reduced-motion: no-preference) {
       animation: magic 7s ease infinite forwards;
     }