update

source/astro.mjs

@@ -15,7 +15,7 @@ export default defineConfig({
   integrations: [vue(), astroI18next()],
   // Security
   security: {
-    checkOrigin: true
+    checkOrigin: false // Breaks form action
   },
   // Server Options
   server: {

source/src/components/global/Footer.astro

@@ -18,6 +18,19 @@ import {
         <a href="#">API</a> -->
         <a href="https://ark.sudovanilla.org/Korbs/Zarro">Source Code</a>
         <a href="https://ark.sudovanilla.org/Korbs/Zarro/issues">Report Issue</a>
+        <select>
+            <option>English</option>
+            <option disabled>Spanish</option>
+            <option disabled>Japanese</option>
+            <option disabled>Mandarin Chines</option>
+            <option disabled>Russian</option>
+            <option disabled>Javanese</option>
+            <option disabled>Hindi</option>
+            <option disabled>Bengali</option>
+            <option disabled>Portuguese</option>
+            <option disabled>Western Punjabi</option>
+            <option disabled>Arabic</option>
+        </select>
     </div>
 </footer>
 
@@ -33,7 +46,7 @@ footer {
     .footer-end {
         a {
             text-decoration: none;
-            margin-left: 12px;
+            margin-right: 12px;
             &:hover {
                 text-decoration: underline;
             }

source/src/components/global/Header.astro

@@ -12,11 +12,10 @@ import { HalfMoon, Menu, SunLight } from "@iconoir/vue";
 <header>
     <div class="header-start">
         <a href="/"><img width="18px" src="https://md.sudovanilla.org/images/Union.png"/></a>
-        <SearchBox/>
+        <SearchBox QueryText={QueryText}/>
     </div>
     <div class="header-end">
-        <button>English</button>
-        <button onclick="ThemeToggle()" title="Toggle Theme" class="button-icon">
+        <button onclick="ThemeToggle()" title="Toggle Theme" class="button-icon" data-tooltip-placement="bottom">
             <SunLight class:list={'theme-light'}/>
             <HalfMoon class:list={'theme-dark'}/>
         </button>
@@ -64,9 +63,11 @@ header {
         .button-icon {
             aspect-ratio: 1;
             padding: 0px 6px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
             svg {
                 width: 16px;
-                transform: translate(0px, 2px);
             }
         }
     }

source/src/layouts/Search.astro

@@ -26,7 +26,11 @@ import SearchMenu from "@components/global/SearchMenu.astro"
     margin-top: 16px;
     display: flex;
     gap: 24px;
+    .search-results-start {
+        max-width: 776px;
+    }
     .search-results-end {
+        min-width: 100px;
         max-width: 400px;
     }
 }

source/src/pages/web.astro

@@ -15,10 +15,16 @@ import WebLink from "@components/search/WebLink.astro";
 import WebLinkSkeleton from "@components/search/WebLinkSkeleton.astro";
 
 // Fetch
+/// Get Query
 const QueryString = Astro.url.href.split("web?=").pop() // Get user's search query from URL
 const QueryText = `${QueryString}`.replaceAll("%20", " ") // Replace "%20" with a space
+
+/// Get Results
 const Query = await fetch(DEFAULT_API + "/api/v1/web?s=" + QueryString).then((response) => response.json()); // Response
 
+/// Pages
+const NextPage = Astro.url.href.split("?page=").pop() // Get user's search query from URL
+
 // Toggle Functions
 if (Query.answer[0] === undefined) {
   var ShowAnswer = false
@@ -30,7 +36,7 @@ if (Query.related[0] === undefined) {
 } else {
   var ShowRelated = true
 }
-console.log(ShowRelated + '' + Query.related[0])
+console.log(NextPage)
 ---
 
 <Search QueryText={QueryText} Type="Web">
@@ -128,15 +134,15 @@ console.log(ShowRelated + '' + Query.related[0])
 
 .search-web-with-images {
   display: grid;
-  gap: 12px 0px;
+  gap: 6px;
   grid-template-columns: repeat( 4, minmax(100px, 1fr));
   margin-bottom: 12px;
   img {
     width: 182px;
-    height: 80px;
+    height: 90px;
     object-fit: cover;
     border-radius: 6px;
-    border: 1px rgb(170,170,170) solid;
+    border: 2px rgb(80, 80, 80) solid;
   }
 }
 </style>