Page: I think this looks nicer

omrilotan · Nov 21, 2023 · c79386a · c79386a
1 parent 8b05fe3
commit c79386a
Showing 1 changed file with 17 additions and 15 deletions.
diff --git a/page/styles.css b/page/styles.css
@@ -1,9 +1,9 @@
 :root {
   --color-background: #e5e5e5;
-  --color-code-background: #eee;
+  --color-background-middle: #eee;
+  --color-background-highlight: #fff;
   --color-foreground: #333;
-  --color-shadow: #0d275041;
-  --color-highlight: #fff;
+  --color-foreground-shadow: #0d275041;
 }
 
 * {
@@ -26,7 +26,11 @@ body {
 body, textarea {
   background: var(--color-background);
   color: var(--color-foreground);
-  text-shadow: var(--color-highlight) 1px 1px 0;
+  text-shadow: var(--color-background-highlight) 1px 1px 0;
+}
+
+body {
+  background: linear-gradient(145deg, var(--color-background-highlight), var(--color-background-middle), var(--color-background));
 }
 
 form {
@@ -57,10 +61,8 @@ textarea {
 
 textarea {
   border-radius: .5em;
-  box-shadow: var(--color-shadow) .5em .5em .5em,
-              var(--color-highlight) -.5em -.5em .5em,
-              inset var(--color-shadow) .5em .5em .5em,
-              inset var(--color-highlight) -.5em -.5em .5em;
+  box-shadow: inset var(--color-foreground-shadow) .5em .5em .5em,
+              inset var(--color-background-highlight) -.5em -.5em .5em;
   border-width: 0;
 }
 
@@ -72,7 +74,7 @@ output {
 
 kbd {
   display: inline-block;
-  background: var(--color-code-background);
+  background: var(--color-background-middle);
   font-size: 0.8em;
   padding: 0 0.2em;
 }
@@ -83,12 +85,12 @@ button {
   border-radius: 0.5em;
   border-width: 0;
   color: var(--color-foreground);
-  text-shadow: var(--color-highlight) 1px 1px 0;
+  text-shadow: var(--color-background-highlight) 1px 1px 0;
   background: var(--color-background);
   color: var(--color-foreground);
-  box-shadow: var(--color-shadow) .1em .1em .1em,
-              inset var(--color-highlight) .1em .1em .1em,
-              inset var(--color-shadow) -.1em -.1em .1em;
+  box-shadow: var(--color-foreground-shadow) .1em .1em .1em,
+              inset var(--color-background-highlight) .1em .1em .1em,
+              inset var(--color-foreground-shadow) -.1em -.1em .1em;
   cursor: pointer;
   margin: 0 0 1em;
 }
@@ -100,13 +102,13 @@ dialog {
   width: 20vw;
   padding: 1em;
   background: var(--color-foreground);
-  color: var(--color-highlight);
+  color: var(--color-background-highlight);
   text-shadow: none;
   text-align: center;
   border-radius: 1em;
   opacity: 0;
   transition: opacity .5s ease-in-out;
-  box-shadow: var(--color-shadow) 0 0 0 .5em;
+  box-shadow: var(--color-foreground-shadow) 0 0 0 .5em;
 }
 
 dialog[open] {