css: steeple banner preview

1 files changed, 16 insertions, 7 deletions

diff --git a/src/static/css/site.css b/src/static/css/site.css
index 55410bdb..6b969b8d 100644
--- a/src/static/css/site.css
+++ b/src/static/css/site.css
@@ -101,7 +101,7 @@ body::before, .wallpaper-part {
   transition-delay: 0.3s;
 }
 
-#banner::after {
+#banner::after, #banner::before {
   content: "";
   position: absolute;
   top: 0;
@@ -310,11 +310,10 @@ body::before, .wallpaper-part {
   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));
+  --page-border-color: rgba(
+    144, 144, 144,
+    calc(0.4 + 0.5 * (var(--box-opacity) - 0.6) / 0.4));
+  border-color: var(--page-border-color);
 
   box-shadow:
     0 0 40px #0008,
@@ -352,8 +351,18 @@ body::before, .wallpaper-part {
   border-bottom: 1px solid var(--primary-color);
 }
 
+#banner::before {
+  top: -1px;
+  left: var(--page-border-width);
+  right: var(--page-border-width);
+  border-top: 1px dashed var(--page-border-color);
+  pointer-events: none;
+}
+
 #banner::after {
-  box-shadow: inset 0 -2px 3px rgba(0, 0, 0, 0.35);
+  box-shadow:
+    inset 0 -2px 3px rgba(0, 0, 0, 0.35),
+    inset 0 1px 4px 2px rgba(0, 0, 0, 0.15);
   pointer-events: none;
 }