Update styling

source/src/components/search/Answer.astro

@@ -27,9 +27,11 @@ if (Image === null) {
     display: flex;
     flex-direction: column;
     gap: 6px;
-    background: white;
+    background: var(--box-background);
+    transition: 0.6s background, 0.6s color;
     border-radius: 6px;
     padding: 12px;
+    color: var(--text);
     * {
         margin: 0px;
     }

source/src/components/search/Correction.astro

@@ -13,7 +13,7 @@ const {
 
 <style lang="scss">
 .search-correction {
-    border: 2px #ddd solid;
+    border: 2px #4c4f69 solid;
     padding: 6px 24px;
     font-size: 14px;
     margin-bottom: 6px;

source/src/components/search/RelatedSearches.astro

@@ -9,12 +9,13 @@
     display: flex;
     flex-wrap: wrap;
     a {
-        background: white;
+        background: var(--box-background);
+        transition: 0.6s background, 0.6s color;
         border-radius: 3rem;
         text-decoration: none;
         font-size: 14px;
         padding: 6px 8px;
-        color: black;
+        color: var(--text);
         text-wrap: nowrap;
         margin-bottom: 6px;
         margin-right: 4px;

source/src/components/search/WebLink.astro

@@ -23,14 +23,14 @@ const {
     display: flex;
     flex-direction: column;
     gap: 6px;
-    background: white;
+    background: var(--box-background);
     margin-bottom: 12px;
     border-radius: 6px;
-    padding: 6px 12px;
+    padding: 12px;
     box-shadow: 0px 4px 10px 0px #0000000a;
-    transition: 0.3s box-shadow;
+    transition:  0.6s background, 0.3s box-shadow;
     &:hover {
-        box-shadow: 0px 0px 10px 10px rgba(0, 0, 0, 0.04);
+        box-shadow: 0px 0px 10px 10px rgba(0, 0, 0, 0.2);
         transition: 0.3s box-shadow;
     }
     * {
@@ -43,12 +43,13 @@ const {
         text-decoration: none;
         h2 {
             font-size: 20px;
-            color: black;
+            color: var(--text);
         }
         p {
             font-size: 12px;
             text-decoration: underline;
-            color: rgb(82, 82, 82);
+            color: var(--link);
+            transition: 0.6s color;
         }
     }
     .search-result-web-sublinks {
@@ -57,7 +58,6 @@ const {
         grid-template-columns: auto auto;
         a {
             font-size: 18px;
-            color: black;
         }
     }
 }

source/src/layouts/Search.astro

@@ -24,8 +24,10 @@ import SearchMenu from "@components/global/SearchMenu.astro"
 <style>
 .search-results {
     margin-top: 16px;
-    display: grid;
-    grid-template-columns: 64% 34%;
+    display: flex;
     gap: 24px;
+    .search-results-end {
+        max-width: 400px;
+    }
 }
 </style>

source/src/pages/index.astro

@@ -1,17 +1,33 @@
 ---
 // Layout
 import Base from "@layouts/Base.astro";
+
+// Components
+import SearchBox from "@components/global/SearchBox.astro";
 ---
 
 <Base>
-    <a href="http://localhost:1550/web?=Queen%20Band">Example Search</a>
-    <br class="full"/>
+  <div class="home-center">
+    <SearchBox/>
+  </div>
 </Base>
 <style is:global>
+/* Don't show header search */
+header form {
+  display: none !important;
+}
+/* Home CSS */
+.home-center {
+  position: absolute;
+  top: 42%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
 footer {
   position: absolute;
   bottom: 0px;
   width: 100%;
   max-width: 1200px;
 }
-</style>
+</style>
+<script is:inline>FocusSearch()</script>

source/src/styles/index.scss

@@ -1,17 +1,66 @@
+// Preferred Themes
+:root {
+    .light {
+        --body-background: #dce0e8;
+        --box-background: #eff1f5;
+        --link: #1e66f5;
+        --text: black;
+    }
+    .dark {
+        --body-background: #232634;
+        --box-background: #303446;
+        --link: #8caaee;
+        --text: white;
+    }
+}
+.light {
+    .theme-light {
+        display: inherit;
+    }
+    .theme-dark {
+        display: none;
+    }
+}
+.dark {
+    .theme-light {
+        display: none;
+    }
+    .theme-dark {
+        display: inherit;
+    }
+}
+
+// Fonts
+@font-face {
+    font-family: 'Mona Sans';
+    src:
+      url('/fonts/Mona-Sans/Mona-Sans.woff2') format('woff2 supports variations'),
+      url('/fonts/Mona-Sans/Mona-Sans.woff2') format('woff2-variations');
+    font-weight: 200 900;
+    font-stretch: 75% 125%;
+}
+
+// Master
 html, body {
     height: 100%;
+    font-family: 'Mona Sans';
 }
 
 body {
-    background: #e5e5e5;
+    background: var(--body-background);
+    transition: 0.6s background, 0.6s color;
     margin: auto;
     max-width: 1200px;
-    font-family: arial;
     padding: 0px 12px;
+    color: var(--text);
     .disabled-items {
         opacity: 0.3;
         pointer-events: none;
     }
+    a {
+        color: var(--link);
+        transition: 0.6s color;
+    }
     ::selection {
         background: gray;
         color: white;

source/src/styles/mobile.scss

@@ -1,5 +1,19 @@
 @media screen and (max-width: 860px){
     .search-results {
-        grid-template-columns: auto !important;
+        flex-direction: column-reverse;
+    }
+    .search-results-end {
+        max-width: 100% !important;
+    }
+    .related-search-tags {
+        flex-wrap: nowrap !important;
+        overflow: scroll !important;
+    }
+    .related-search-tags a {
+        padding: 12px 24px !important;
+    }
+    footer {
+        flex-direction: column;
+        padding-bottom: 24px;
     }
 }