light theme fixes

argyleink · Mar 1, 2021 · 5a16ebc · 5a16ebc
1 parent 64386bb
commit 5a16ebc
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 1 deletion.
diff --git 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
@@ -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;
  }