update

index.ts

@@ -3,6 +3,7 @@ export { default as Comment } from "./src/Comment.astro"
 export { default as Dialog } from "./src/Dialog.astro"
 export { default as MobileNavigation } from "./src/MobileNavigation.astro"
 export { default as Search } from "./src/search/Field.astro"
+export { default as SearchField} from "./src/search/Field.astro"
 export { default as Sidebar } from "./src/Sidebar.astro"
 export { default as SidebarCreator } from "./src/SidebarCreator.astro"
 export { default as VideoItem } from "./src/VideoItem.astro"

package.json

@@ -1,12 +1,11 @@
 {
   "name": "@minpluto/polestar",
-  "author": "SudoVanilla <korbs@sudovanilla.org>",
+  "author": "SudoVanilla",
   "type": "module",
-  "version": "0.0.55",
+  "version": "0.0.60",
   "license": "AGPL-3.0-only",
   "bugs": {
     "url": "https://ark.sudovanilla.org/MinPluto/Polestar/issues",
-    "email": "support@minpluto.org"
   },
   "funding": [
     {

src/Dialog.astro

@@ -88,6 +88,28 @@ const {
 </div>
 
 <style lang="scss" is:inline>
+    @media only screen and (max-width: 800px) {
+        .fl-dialog {
+            bottom: 0px !important;
+            top: inherit !important;
+            transform: inherit !important;
+            left: 0px !important;
+            padding: 24px 0px !important;
+            border-radius: 24px 24px 0px 0px !important;
+            background: #171717 !important;
+            h2 {
+                font-size: 32px !important;
+            }
+            p {
+                font-size: 24px !important;
+            }
+            a, button {
+                font-size: 24px !important;
+                border-radius: 3rem !important;
+                padding: 16px 32px !important;
+            }
+        }
+    }
     .fl-dialog-backdrop {
         position: fixed;
         top: 0px;

src/MobileNavigation.astro

@@ -1,59 +1,30 @@
----
-import { HomeSimple, Safari, List, Settings } from "@iconoir/vue";
----
-
 <div class="mobile-navigation">
-    <a href="#"><HomeSimple /> Home</a>
+    <slot name="items"/>
-    <a href="#"><Safari /> Discover</a>
-    <a href="#"><List /> Subscription</a>
-    <a href="#"><Settings /> Settings</a>
 </div>
 
-<style lang="scss">
+<style lang="scss" is:global>
     .mobile-navigation {
         position: fixed;
         bottom: 0px;
         left: 0px;
         width: 100%;
-        background: rgb(24,24,24);
+        color: white;
-        padding: 24px 0px;
+        backdrop-filter: blur(24px) brightness(0.2) contrast(0.8);
-        text-align: center;
+        padding: 0px;
-        display: flex;
+        z-index: 5;
+        display: grid;
+        grid-template-columns: auto auto auto auto;
+        justify-items: stretch;
+        align-items: baseline;
         justify-content: space-evenly;
-        z-index: 10;
-        height: 100%;
-        max-height: 80px;
         a {
             color: white;
             text-decoration: none;
             display: flex;
+            flex-direction: column;
             align-items: center;
             gap: 12px;
-            padding: 12px 4px 12px 16px;
+            padding: 24px 0px;
-            border-radius: 3rem;
-            font-size: 0px;
-            transition: 0.3s background, 0.3s padding, 0.3s font-size;
-            &:hover {
-                color: black;
-                background: white;
-                padding: 12px 16px;
-                font-size: 32px;
-                transition: 0.3s background, 0.3s padding, 0.3s font-size;
-                svg {
-                    width: 32px;
-                    height: 32px;
-                    background: rgb(24,24,24);
-                    border-radius: 3rem;
-                    padding: 12px;
-                    transition: 0.3s width, 0.3s height, 0.4s padding, 0.5 background;
-                    color: white;
-                }
-            }
-            svg {
-                width: 48px;
-                height: 48px;
-                transition: 0.3s width, 0.3s height, 0.4s padding, 0.5 background;
-            }
         }
     }
 </style>

src/Sidebar.astro

@@ -136,7 +136,6 @@ import { Image } from "astro:assets";
                     }
                     &:hover {
                         background: #3c3c3c;
-                        border: 1px #5c5c5c solid;
                     }
                 }
             }
@@ -162,7 +161,6 @@ import { Image } from "astro:assets";
                 }
                 &:hover {
                     background: #3c3c3c;
-                    border: 1px #5c5c5c solid;
                 }
             }
         }

src/SidebarCreator.astro

@@ -9,7 +9,6 @@ const {
 
 // Components
 import { Image } from "astro:assets";
-
 ---
 
 <a href={Link} class="fl-sidebar-creator">

src/VideoItem.astro

@@ -17,7 +17,7 @@ import { Image } from 'astro:assets';
 
 <a href={"/watch?v=" + VideoId} class="fl-vi">
     <div class="fl-vi-thumbnail">
-        <Image src={Thumbnail} alt={'Thumbnail'} inferSize={true} loading="lazy" format="webp"/>
+        <Image src={Thumbnail} alt={'Thumbnail'} inferSize={true} loading="eagerly" format="webp"/>
         <!-- <p>{Platform}</p> -->
         <p>{Length}</p>
     </div>
@@ -61,7 +61,7 @@ import { Image } from 'astro:assets';
             border-radius: 3rem;
         }
         strong {
-            max-width: 340px;
+            max-width: 100%;
             overflow: hidden;
             white-space: wrap;
             text-overflow: ellipsis;

src/search/Field.astro

@@ -37,7 +37,6 @@ import { Search } from "@iconoir/vue";
         display: flex;
         align-items: center;
         position: relative;
-        max-width: 360px;
         input {
             position: absolute;
             top: 0px;

test/src/pages/index.astro

@@ -16,25 +16,6 @@ import Category from '../../../src/Category.astro'
 import SearchField from '../../../src/search/Field.astro'
 import MobileNavigation from '../../../src/MobileNavigation.astro'
 
-// Data
-/// Fetch Categories for YouTube
-const TrendingFetch = 'https://yt.sudovanilla.org' + '/api/v1/trending'
-const TrendingResponse = await fetch(TrendingFetch)
-const TrendingData = await TrendingResponse.json()
-
-const MoviesFetch = 'https://yt.sudovanilla.org' + '/api/v1/trending?type=movies'
-const MoviesResponse = await fetch(MoviesFetch)
-const MoviesData = await MoviesResponse.json()
-
-const MusicFetch = 'https://yt.sudovanilla.org' + '/api/v1/trending?type=music'
-const MusicResponse = await fetch(MusicFetch)
-const MusicData = await MusicResponse.json()
-
-
-const GamingFetch = 'https://yt.sudovanilla.org' + '/api/v1/trending?type=gaming'
-const GamingResponse = await fetch(GamingFetch)
-const GamingData = await GamingResponse.json()
-
 // Icons
 import {
     InputSearch,
@@ -73,11 +54,18 @@ import {
 	</slot>
 </Dialog>
 
-<MobileNavigation/>
+<MobileNavigation>
+	<slot slot="items">
+		<a href="#"><PlanetAlt/> Home</a>
+		<a href="#"><MediaVideoList/> Feed</a>
+		<a href="#" onclick="OpenExampleDialog()"><OpenInBrowser/> Open Dialog</a>
+		<a href="#"><Settings/> Settings</a>
+	</slot>
+</MobileNavigation>
 
 <Sidebar
 	ShowHeader
-	LogoPath="https://ark.sudovanilla.org/avatars/984c733421da0eca64a9ec4f55305f739d748f0f50e5a91890a3372c544aa119?size=200"
+	LogoPath="https://md.sudovanilla.org/images/minpluto-2024.png"
 	ShowVersion
 	FooterLinks
 	Version={version}
@@ -124,7 +112,7 @@ import {
 </Sidebar>
 
 <div class="content">
-	<div style="margin: auto;width: 360px;padding: 64px;">
+	<div style="margin: auto;padding: 64px;">
 		<SearchField Design="Pill"/>
 	</div>