duckylib 0.1.6 → 0.1.7

package/dist/components/buttons/ThemeButton.svelte

@@ -33,6 +33,10 @@
         if(browser) {
             themes.filter(t => t !== (theme === "system" ? systemMode : theme)).forEach(t => document.body.classList.remove(t))
             document.body.classList.add(theme === "system" ? systemMode : theme)
+
+            window.addEventListener("theme", (e: any) => {
+                theme = e.detail.theme;
+            })
         }
     })
 
@@ -80,7 +84,7 @@
         outline: none;
         border: none;
 
-        color: var(--text);
+        /* color: var(--text); */
     }
     
     .icon_only {
@@ -104,23 +108,38 @@
     .with_text {
         padding: 0.2em 0.66em;
         border-radius: var(--border-md);
-        background-color: var(--overlay-2);
-        color: var(--base);
+        background-color: var(--crust);
+        color: var(--text);
         gap: 0.66em;
         
         font-size: 1em;
+        border: 2px solid var(--mantle);
+    }
+
+    .btn-dark:not(.icon_only)[data-theme="system"] {
+        color: var(--teal);
+        & {
+            p {
+                color: var(--text);
+            }
+        }
     }
 
     .btn-dark:not(.icon_only):not([data-theme="system"]) {
         color: var(--yellow);
         & {
             p {
-                color: var(--base);
+                color: var(--text);
             }
         }
     }
 
     .btn-light:not(.icon_only) {
-        color: var(--surface-0);
+        color: var(--yellow);
+        & {
+            p {
+                color: var(--text);
+            }
+        }
     }
 </style>

package/dist/components/containers/AgeConfirm.svelte

@@ -4,7 +4,7 @@
     import Column from "./Column.svelte";
     import Text from "../text/Text.svelte"
     import Row from "./Row.svelte";
-    import { onMount } from "svelte";
+    import { onMount, type Snippet } from "svelte";
     import Button from "../buttons/Button.svelte";
     import { browser } from "$app/environment";
     import Symbol from "../text/Symbol.svelte";
@@ -13,9 +13,10 @@
     interface AgeConfirmProps {
         age?: number;
         references?: ("substances" | "sexual" | "death" | "sh")[];
+        onDenial: (e: MouseEvent) => Promise<void>;
     }
 
-    let {age = 18, references = []}: AgeConfirmProps = $props();
+    let {age = 18, references = [], onDenial}: AgeConfirmProps = $props();
 
     const referenceMap = {
         "substances": "Alcohol, Drugs, and Substance Abuse",
@@ -68,7 +69,7 @@
         <Text weight="normal" classList={["italic"]}>{loaded ? `You must be at least ${age} years old to access this website.` : ""}</Text>
         <Row>
             <Button label="I am {age} or older" size="large" type="success" onclick={(e) => {setAgeVerified(true)}} />
-            <Button label="I am younger than {age}" size="large" type="danger" onclick={(e) => {setAgeVerified(false)}} />
+            <Button label="I am younger than {age}" size="large" type="danger" onclick={(e) => {setAgeVerified(false); onDenial(e);}} />
         </Row>
         {/if}
     </Column>
@@ -85,7 +86,7 @@
         left: 0;
 
         width: 100%;
-        height: 110%; 
+        height: 120%; 
 
 
         padding: 0.33em;
@@ -95,6 +96,6 @@
         background-color: var(--base);
         color: var(--text);
 
-        z-index: 1000;
+        z-index: 4000;
     }
 </style>

package/dist/components/containers/AgeConfirm.svelte.d.ts

@@ -1,6 +1,7 @@
 interface AgeConfirmProps {
     age?: number;
     references?: ("substances" | "sexual" | "death" | "sh")[];
+    onDenial: (e: MouseEvent) => Promise<void>;
 }
 declare const AgeConfirm: import("svelte").Component<AgeConfirmProps, {}, "">;
 type AgeConfirm = ReturnType<typeof AgeConfirm>;

package/dist/components/containers/Loading.svelte

@@ -9,6 +9,8 @@
     let loaded = $state(false);
 
     onMount(() => {
+        if(!loaded) window.scrollTo({top: 0, behavior: "instant"})
+
         window.onscroll = (e) => {
             if(!loaded) {
                 e.preventDefault();
@@ -22,6 +24,8 @@
         }, 7e2)
     })
 
+    let { children } = $props();
+
 </script>
 
 {#if !loaded}
@@ -36,6 +40,9 @@
     </Column>
 </Column>
 </div>
+
+{:else}
+{@render children()}
 {/if}
 
 <style>
@@ -57,6 +64,6 @@
         background-color: var(--base);
         color: var(--text);
 
-        z-index: 2000;
+        z-index: 5000;
     }
 </style>

package/dist/components/containers/Loading.svelte.d.ts

@@ -1,3 +1,5 @@
-declare const Loading: import("svelte").Component<Record<string, never>, {}, "">;
+declare const Loading: import("svelte").Component<{
+    children: any;
+}, {}, "">;
 type Loading = ReturnType<typeof Loading>;
 export default Loading;

package/dist/components/containers/Website.svelte

@@ -15,13 +15,14 @@
 
     let systemMode = browser ? window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light" : "dark";
 
-    let theme = $state(getTheme());
+    let theme = $state("dark");
 
     let w = $state(0)
     let h = $state(0);
 
     
     onMount(() => {
+        theme = getTheme();
         if(browser) {
             w = window.outerWidth
             h = window.outerHeight

package/dist/components/containers/navigation/Footer.svelte

@@ -100,15 +100,16 @@
     @import url("../../../styles/globals.css");
 
     div {
-        /* position: absolute; */
-        /* left: 5%; */
-        /* bottom: 0.33em; */
+        position: sticky;
+        /* left: 0;
+        bottom: 0; */
 
         box-sizing: border-box;
         padding: 0 0.66em;
         margin-top: 3em;
         /* margin-left: auto;
         margin-right: auto; */
+        margin-bottom: 0.66em;
 
         width: 90%;
         height: 2.33em;

package/dist/components/containers/navigation/Header.svelte

@@ -12,7 +12,7 @@
     import { PUBLIC_MOBILE_SIZE_PX, PUBLIC_TABLET_SIZE_PX } from "$env/static/public";
     import SearchBar, { type QueryMapKeys, type SearchResult } from "./SearchBar.svelte";
 
-    interface HeaderNavigation {
+    export interface HeaderNavigation {
         label: string;
         pathname: string;
         symbol: string;

package/dist/components/containers/navigation/Header.svelte.d.ts

@@ -1,6 +1,6 @@
 import type { Snippet } from "svelte";
 import { type QueryMapKeys, type SearchResult } from "./SearchBar.svelte";
-interface HeaderNavigation {
+export interface HeaderNavigation {
     label: string;
     pathname: string;
     symbol: string;

package/dist/components/containers/navigation/SearchBar.svelte

@@ -294,6 +294,7 @@
                     showBar = false;
                     showInput = false;
                     searching = false;
+                    closeResults();
                 }
             }}
         >

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "duckylib",
-	"version": "0.1.6",
+	"version": "0.1.7",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",