From 249d30980b8a1a1e69b7f049570fb5ebe9c3b388 Mon Sep 17 00:00:00 2001
From: Jordan Vidrine <jordan@jordanvidrine.com>
Date: Thu, 27 Feb 2025 15:47:00 -0600
Subject: [PATCH] final screens

---
 common/common.scss      |   1 +
 scss/box-view.scss      | 122 ++++++++++++++++++++++++++++++++++++++
 scss/main.scss          | 126 ++--------------------------------------
 scss/search-banner.scss |  38 +++++++++++-
 4 files changed, 166 insertions(+), 121 deletions(-)
 create mode 100644 scss/box-view.scss

diff --git a/common/common.scss b/common/common.scss
index 7383f68..67fee0e 100644
--- a/common/common.scss
+++ b/common/common.scss
@@ -10,3 +10,4 @@
 @import "hiddenstuff";
 @import "topics";
 @import "misc";
+@import "box-view";
diff --git a/scss/box-view.scss b/scss/box-view.scss
new file mode 100644
index 0000000..a873238
--- /dev/null
+++ b/scss/box-view.scss
@@ -0,0 +1,122 @@
+.experimental-screen {
+  @media screen and (max-width: 425px) {
+    display: none;
+  }
+  @media screen and (min-width: 1600px) {
+    display: none;
+  }
+  width: 100%;
+  display: block;
+  margin: 0;
+  padding: 0;
+  position: relative;
+  container: content-width / inline-size;
+  li {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+  &__top-left,
+  &__top-right,
+  &__bottom-left,
+  &__bottom-right {
+    position: fixed;
+    width: var(--d-border-radius-large);
+    height: var(--d-border-radius-large);
+    background-color: var(--secondary);
+    z-index: 999;
+    -webkit-mask: radial-gradient(
+      circle at var(--d-border-radius-large) var(--d-border-radius-large),
+      transparent var(--d-border-radius-large),
+      transparent var(--d-border-radius-large),
+      black var(--d-border-radius-large)
+    );
+  }
+  &__top-left {
+    top: var(--header-offset);
+    left: calc(var(--main-grid-gap) * 2 + var(--d-sidebar-width));
+    @media screen and (max-width: 768px) {
+      left: var(--main-grid-gap);
+    }
+  }
+  &__top-right {
+    top: var(--header-offset);
+    transform: rotate(90deg);
+    @container content-width (width > 1px) {
+      left: calc(
+        var(--main-grid-gap) * 2 + var(--d-sidebar-width) + 100cqw -
+          var(--d-border-radius-large)
+      );
+      @media screen and (max-width: 768px) {
+        left: calc(
+          var(--main-grid-gap) + 100cqw - var(--d-border-radius-large)
+        );
+      }
+    }
+  }
+  &__bottom-left {
+    transform: rotate(-90deg);
+    bottom: var(--d-border-radius-large);
+    left: calc(var(--main-grid-gap) * 2 + var(--d-sidebar-width));
+    @media screen and (max-width: 768px) {
+      left: var(--main-grid-gap);
+      bottom: calc(var(--d-border-radius-large) * 2);
+    }
+  }
+  &__bottom-right {
+    transform: rotate(180deg);
+    bottom: var(--d-border-radius-large);
+    @container content-width (width > 1px) {
+      left: calc(
+        var(--main-grid-gap) * 2 + var(--d-sidebar-width) + 100cqw -
+          var(--d-border-radius-large)
+      );
+      @media screen and (max-width: 768px) {
+        left: calc(
+          var(--main-grid-gap) + 100cqw - var(--d-border-radius-large)
+        );
+        bottom: calc(var(--d-border-radius-large) * 2);
+      }
+    }
+  }
+  &__bottom-bar {
+    position: fixed;
+    width: 100%;
+    z-index: 999;
+    background-color: var(--secondary);
+    bottom: 0;
+    left: calc(var(--main-grid-gap) * 2 + var(--d-sidebar-width));
+    @media screen and (max-width: 768px) {
+      left: var(--main-grid-gap);
+      height: calc(var(--d-border-radius-large) * 2);
+    }
+    height: var(--d-border-radius-large);
+    @container content-width (width > 1px) {
+      width: 100cqw;
+    }
+  }
+}
+
+@media screen and (min-width: 768px) {
+  .with-topic-progress {
+    bottom: calc(
+      env(safe-area-inset-bottom) + var(--composer-height, 0px) +
+        var(--d-border-radius-large)
+    );
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .with-topic-progress {
+    bottom: calc(
+      env(safe-area-inset-bottom) + var(--composer-height, 0px) +
+        calc(var(--d-border-radius-large) * 2)
+    );
+  }
+}
+
+@media screen and (max-width: 400px) {
+  .with-topic-progress {
+    bottom: calc(env(safe-area-inset-bottom) + var(--composer-height, 0px));
+  }
+}
diff --git a/scss/main.scss b/scss/main.scss
index 44196c2..2f42b60 100644
--- a/scss/main.scss
+++ b/scss/main.scss
@@ -10,6 +10,12 @@ body.has-sidebar-page #main-outlet-wrapper {
   gap: 0 var(--main-grid-gap);
 }
 
+@media screen and (max-width: 488px) {
+  #main-outlet-wrapper {
+    gap: 0;
+  }
+}
+
 .powered-by-discourse {
   display: none;
 }
@@ -61,126 +67,6 @@ body:not(.has-full-page-chat) {
   }
 }
 
-.experimental-screen {
-  @media screen and (max-width: 425px) {
-    display: none;
-  }
-  width: 100%;
-  display: block;
-  margin: 0;
-  padding: 0;
-  position: relative;
-  container: content-width / inline-size;
-  li {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-  }
-  &__top-left,
-  &__top-right,
-  &__bottom-left,
-  &__bottom-right {
-    position: fixed;
-    width: var(--d-border-radius-large);
-    height: var(--d-border-radius-large);
-    background-color: var(--secondary);
-    z-index: 999;
-    -webkit-mask: radial-gradient(
-      circle at var(--d-border-radius-large) var(--d-border-radius-large),
-      transparent var(--d-border-radius-large),
-      transparent var(--d-border-radius-large),
-      black var(--d-border-radius-large)
-    );
-  }
-  &__top-left {
-    top: var(--header-offset);
-    left: calc(var(--main-grid-gap) * 2 + var(--d-sidebar-width));
-    @media screen and (max-width: 768px) {
-      left: var(--main-grid-gap);
-    }
-  }
-  &__top-right {
-    top: var(--header-offset);
-    transform: rotate(90deg);
-    @container content-width (width > 1px) {
-      left: calc(
-        var(--main-grid-gap) * 2 + var(--d-sidebar-width) + 100cqw -
-          var(--d-border-radius-large)
-      );
-      @media screen and (max-width: 768px) {
-        left: calc(
-          var(--main-grid-gap) + 100cqw - var(--d-border-radius-large)
-        );
-      }
-    }
-  }
-  &__bottom-left {
-    transform: rotate(-90deg);
-    bottom: var(--d-border-radius-large);
-    left: calc(var(--main-grid-gap) * 2 + var(--d-sidebar-width));
-    @media screen and (max-width: 768px) {
-      left: var(--main-grid-gap);
-      bottom: calc(var(--d-border-radius-large) * 2);
-    }
-  }
-  &__bottom-right {
-    transform: rotate(180deg);
-    bottom: var(--d-border-radius-large);
-    @container content-width (width > 1px) {
-      left: calc(
-        var(--main-grid-gap) * 2 + var(--d-sidebar-width) + 100cqw -
-          var(--d-border-radius-large)
-      );
-      @media screen and (max-width: 768px) {
-        left: calc(
-          var(--main-grid-gap) + 100cqw - var(--d-border-radius-large)
-        );
-        bottom: calc(var(--d-border-radius-large) * 2);
-      }
-    }
-  }
-  &__bottom-bar {
-    position: fixed;
-    width: 100%;
-    z-index: 999;
-    background-color: var(--secondary);
-    bottom: 0;
-    left: calc(var(--main-grid-gap) * 2 + var(--d-sidebar-width));
-    @media screen and (max-width: 768px) {
-      left: var(--main-grid-gap);
-      height: calc(var(--d-border-radius-large) * 2);
-    }
-    height: var(--d-border-radius-large);
-    @container content-width (width > 1px) {
-      width: 100cqw;
-    }
-  }
-}
-
-@media screen and (min-width: 768px) {
-  .with-topic-progress {
-    bottom: calc(
-      env(safe-area-inset-bottom) + var(--composer-height, 0px) +
-        var(--d-border-radius-large)
-    );
-  }
-}
-
-@media screen and (max-width: 768px) {
-  .with-topic-progress {
-    bottom: calc(
-      env(safe-area-inset-bottom) + var(--composer-height, 0px) +
-        calc(var(--d-border-radius-large) * 2)
-    );
-  }
-}
-
-@media screen and (max-width: 400px) {
-  .with-topic-progress {
-    bottom: calc(env(safe-area-inset-bottom) + var(--composer-height, 0px));
-  }
-}
-
 .boxed.white {
   background-color: #fff;
 }
diff --git a/scss/search-banner.scss b/scss/search-banner.scss
index 0008d46..5dccd4b 100644
--- a/scss/search-banner.scss
+++ b/scss/search-banner.scss
@@ -1,13 +1,18 @@
 .custom-search-banner-wrap {
   display: grid;
   grid-template-rows: 0.33fr 0.33fr 0.33fr;
-  grid-template-columns: 0.5fr 0.5fr;
+  grid-template-columns: 1fr 1fr;
   grid-column-gap: 1em;
   grid-row-gap: 0.5em;
   border-bottom: 1px solid var(--primary-300);
   padding: 2.5em 0 2.5em;
   margin-bottom: 2.5em;
   --search-color: #595bca;
+  @media screen and (max-width: 700px) {
+    padding: 1em 1em 0 1em;
+    margin-bottom: 0.5em;
+    border-bottom: none;
+  }
   h1 {
     grid-column: 1/2;
     grid-row: 1/-1;
@@ -17,12 +22,43 @@
     margin: 0;
     font-weight: 400;
     color: #350c73;
+    @media screen and (max-width: 1028px) {
+      font-size: var(--font-up-4);
+      grid-column: 1/-1;
+      grid-row: 1;
+      text-align: center;
+      margin-bottom: 0.5em;
+    }
+    @media screen and (max-width: 768px) {
+      text-align: left;
+      grid-column: 1/2;
+      grid-row: 1/-1;
+      font-size: var(--font-up-3);
+    }
+    @media screen and (max-width: 600px) {
+      grid-column: 1/-1;
+      grid-row: 1;
+      text-align: center;
+      margin-bottom: 0.5em;
+    }
   }
   .search-menu {
     grid-column: 2/3;
     grid-row: 1/-1;
     width: 100%;
     align-self: center;
+    @media screen and (max-width: 1028px) {
+      grid-row: 2/-1;
+      grid-column: 1/-1;
+    }
+    @media screen and (max-width: 768px) {
+      grid-column: 2/-1;
+      grid-row: 1/-1;
+    }
+    @media screen and (max-width: 600px) {
+      grid-row: 2/-1;
+      grid-column: 1/-1;
+    }
   }
   p {
     display: none;