css: I am once again going crazy over borders and shadows

1 files changed, 36 insertions, 9 deletions

diff --git a/src/static/css/site.css b/src/static/css/site.css
index 17b3c600..303277d9 100644
--- a/src/static/css/site.css
+++ b/src/static/css/site.css
@@ -61,13 +61,18 @@ body::before, .wallpaper-part {
 
 #page-container {
   max-width: 1100px;
-  margin: 0 auto 38px;
-  padding: 15px 0;
+
+  margin: 0 auto 40px;
+  padding: calc(15px - var(--page-border-width)) 0;
+
+  --page-border-width: 0;
+  border: var(--page-border-width) solid transparent;
+  box-sizing: border-box;
 }
 
 #page-container > * {
-  margin-left: 15px;
-  margin-right: 15px;
+  margin-left: calc(15px - var(--page-border-width));
+  margin-right: calc(15px - var(--page-border-width));
 }
 
 #skippers:focus-within {
@@ -83,9 +88,9 @@ body::before, .wallpaper-part {
 }
 
 #banner {
-  margin: 10px 0;
-  width: 100%;
+  margin: 10px calc(-1 * var(--page-border-width));
   position: relative;
+  z-index: 2;
 
   --banner-shine: 4%;
   -webkit-box-reflect: below -12px linear-gradient(transparent, color-mix(in srgb, transparent, var(--banner-shine) white));
@@ -252,6 +257,16 @@ body::before, .wallpaper-part {
 
 /* Design & Appearance - Layout elements */
 
+@property --box-opacity {
+  /* This property rule doesn't actually do anything in practice.
+   * It just lets us see the effective value of --box-opacity
+   * in browser CSS inspectors.
+   */
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 0.6;
+}
+
 :root {
   color-scheme: dark;
 
@@ -291,11 +306,23 @@ body::before, .wallpaper-part {
       calc((var(--box-opacity, 0.6) - 0.6) * 40%));
 
   color: #ffffff;
-  border-bottom: 2px solid #fff1;
+
+  --page-border-width: 0.5px;
+  border-bottom-width: 1px;
+  border-radius: 4px 4px 5px 5px;
+
+  border-color: #f7f7f733;
+  border-color:
+    rgba(
+      144, 144, 144,
+      calc(0.4 + 0.5 * (var(--box-opacity) - 0.6) / 0.4));
+
   box-shadow:
     0 0 40px #0008,
-    0 2px 15px -3px #2221,
-    0 2px 6px 2px #1113;
+    0 20px 15px -4px #0002,
+    0 6px 15px -3px #2221,
+    0 4px 6px 2px #1113,
+    0 1px 4px 1px #1114;
 }
 
 #skippers > * {