update

package.json

@@ -2,7 +2,7 @@
   "name": "@minpluto/polestar",
   "author": "SudoVanilla <korbs@sudovanilla.org>",
   "type": "module",
-  "version": "0.0.53",
+  "version": "0.0.54",
   "license": "AGPL-3.0-only",
   "bugs": {
     "url": "https://ark.sudovanilla.org/MinPluto/Polestar/issues",

src/Category.astro

@@ -23,10 +23,20 @@ const {
     position: relative;
     color: white;
     text-decoration: none;
+    &:hover {
+        &::before {
+            backdrop-filter: blur(0px) contrast(1) brightness(0.8);
+            transition: 0.6s backdrop-filter;
+        }
+        p, span {
+            opacity: 0.05;
+        }
+    }
     &::before {
         content: "";
         position: absolute;
         backdrop-filter: blur(12px) contrast(0.8) brightness(0.4);
+        transition: 0.6s backdrop-filter;
         top: 0px;
         left: 0px;
         width: 100%;

src/Dialog.astro

@@ -95,7 +95,7 @@ const {
         width: 100%;
         height: 100%;
         backdrop-filter: blur(10px) brightness(0.8) contrast(0.8);
-        z-index: 1;
+        z-index: 7;
         display: none;
     }
     .fl-dialog {
@@ -103,7 +103,7 @@ const {
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
-        z-index: 2;
+        z-index: 8;
         background: black;
         border-radius: 12px;
         border: 1px #3e3e3e solid;

src/MobileNavigation.astro

@@ -0,0 +1,59 @@
+---
+import { HomeSimple, Safari, List, Settings } from "@iconoir/vue";
+---
+
+<div class="mobile-navigation">
+    <a href="#"><HomeSimple /> Home</a>
+    <a href="#"><Safari /> Discover</a>
+    <a href="#"><List /> Subscription</a>
+    <a href="#"><Settings /> Settings</a>
+</div>
+
+<style lang="scss">
+    .mobile-navigation {
+        position: fixed;
+        bottom: 0px;
+        left: 0px;
+        width: 100%;
+        background: rgb(24,24,24);
+        padding: 24px 0px;
+        text-align: center;
+        display: flex;
+        justify-content: space-evenly;
+        z-index: 10;
+        height: 100%;
+        max-height: 80px;
+        a {
+            color: white;
+            text-decoration: none;
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            padding: 12px 4px 12px 16px;
+            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

@@ -47,6 +47,20 @@ import { Image } from "astro:assets";
 </div>
 
 <style lang="scss" is:global>
+    @media only screen and (max-width: 800px) {
+        .fl-sidebar {
+            display: none !important;
+        }
+        .content {
+            margin-left: 0px !important;
+            padding-bottom: 150px !important;
+        }
+    }
+    @media only screen and (min-width: 800px) {
+        .mobile-navigation {
+            display: none !important;
+        }
+    }
     .fl-sidebar {
         background: #121212;
         color: white;
@@ -132,7 +146,9 @@ import { Image } from "astro:assets";
             align-items: center;
             justify-content: space-between;
             padding: 24px 12px;
-            * {margin: 0px}
+            * {
+                margin: 0px;
+            }
             a {
                 color: white;
                 text-decoration: none;

src/VideoItem.astro

@@ -25,7 +25,7 @@ import { Image } from 'astro:assets';
         <Image src={'https://ipx.sudovanilla.org/https://invidious.private.coffee/ggpht/ytc/AIdro_lAKf-vZLoTI-gZUoP5Y3gbdGd07E4eDHUhTee6aOzDCnU=s900-c-k-c0x00ffffff-no-rj'} alt={'Creator Avatar'} inferSize={true} loading="lazy" format="webp"/>
         <div>
             <p><strong>{Title}</strong></p>
-            <p>{Date} - {Views}</p>
+            <span>{Date} - {Views}</span>
         </div>
     </div>
 </a>
@@ -67,6 +67,10 @@ import { Image } from 'astro:assets';
             text-overflow: ellipsis;
             display: inline-grid;
         }
+        span {
+            font-size: 14px;
+            opacity: 0.5;
+        }
     }
 }
 </style>

src/search/Field.astro

@@ -1,5 +1,11 @@
 ---
-import { Search, ArrowRight } from "@iconoir/vue";
+// Properties
+const {
+    Design = "RoundSquare"
+} = Astro.props
+
+// Icons
+import { Search } from "@iconoir/vue";
 ---
 
 <div class="search-field">
@@ -8,6 +14,24 @@ import { Search, ArrowRight } from "@iconoir/vue";
     <button class="search-field-submit">Go</button>
 </div>
 
+{ 
+    ()=> {
+      if (Design === "RoundSquare") {
+        return <style>
+            .search-field input {
+                border-radius: 6px;
+            }
+        </style>
+      } else if (Design === "Pill") {
+        return <style>
+            .search-field input {
+                border-radius: 3rem;
+            }
+        </style>
+      }
+    }
+  }
+
 <style lang="scss">
     .search-field {
         display: flex;
@@ -20,7 +44,6 @@ import { Search, ArrowRight } from "@iconoir/vue";
             left: 0px;
             height: 100%;
             width: -moz-available;
-            border-radius: 3rem;
             border: 1px #3b3b3b solid;
             background: #282828;
             color: white;

test/src/pages/index.astro

@@ -5,6 +5,8 @@ import {
 } from '../../../package.json'
 
 // Components
+import { Tooltips } from 'astro-tooltips';
+
 import Comment from '../../../src/Comment.astro'
 import SidebarCreator from '../../../src/SidebarCreator.astro'
 import Dialog from '../../../src/Dialog.astro'
@@ -12,6 +14,7 @@ import Sidebar from '../../../src/Sidebar.astro'
 import Video from '../../../src/VideoItem.astro'
 import Category from '../../../src/Category.astro'
 import SearchField from '../../../src/search/Field.astro'
+import MobileNavigation from '../../../src/MobileNavigation.astro'
 
 // Data
 /// Fetch Categories for YouTube
@@ -53,9 +56,13 @@ import {
 	LogOut,
 	OpenInBrowser
 } from '@iconoir/vue'
-import { Search } from '@iconoir/vue'
 ---
-
+<head>
+	<meta charset="UTF-8">
+	<meta name="theme-color" content="#000000">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no, viewport-fit=cover">
+	<Tooltips interactive={false} delay={[15, 10]} />
+</head>
 
 <Dialog
 	Name="dialog-id-thingie"
@@ -71,6 +78,8 @@ import { Search } from '@iconoir/vue'
 	</slot>
 </Dialog>
 
+<MobileNavigation/>
+
 <Sidebar
 	ShowHeader
 	LogoPath="https://ark.sudovanilla.org/avatars/984c733421da0eca64a9ec4f55305f739d748f0f50e5a91890a3372c544aa119?size=200"
@@ -79,8 +88,8 @@ import { Search } from '@iconoir/vue'
 	Version={version}
 >
 	<slot slot="header-items">
-		<a href="#"><InputSearch/></a>
+		<a title="Search" href="#"><InputSearch/></a>
-		<a href="#"><ProfileCircle/></a>
+		<a title="Your Account" href="#"><ProfileCircle/></a>
 	</slot>
 	<slot slot="top-items">
 		<a href="#"><PlanetAlt/> Home</a>
@@ -114,14 +123,53 @@ import { Search } from '@iconoir/vue'
 
 	</slot>
 	<slot slot="footer-items">
-		<a href="#"><LogOut/></a>
+		<a title="Log Out" href="#"><LogOut/></a>
-		<a href="#"><Settings/></a>
+		<a title="Settings" href="#"><Settings/></a>
 	</slot>
 </Sidebar>
 
 <div class="content">
 	<div style="margin: auto;width: 360px;padding: 64px;">
-		<SearchField/>
+		<SearchField Design="Pill"/>
+	</div>
+
+	<br/>
+	<br/>
+	<br/>
+
+	<div style="display: grid; grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); gap: 12px;">
+		{TrendingSplit.map((category) =>
+			<Category
+				Name="Trending"
+				Link="#"
+				Thumbnail={"https://ipx.sudovanilla.org/https://img.youtube.com/vi/" + category.videoId + "/mqdefault.jpg"}
+				Platform="YouTube"
+			/>
+		)}
+		{MoviesSplit.map((category) =>
+			<Category
+				Name="Trailers"
+				Link="#"
+				Thumbnail={"https://ipx.sudovanilla.org/https://img.youtube.com/vi/" + category.videoId + "/mqdefault.jpg"}
+				Platform="YouTube"
+			/>
+		)}
+		{MusicSplit.map((category) =>
+			<Category
+				Name="Music"
+				Link="#"
+				Thumbnail={"https://ipx.sudovanilla.org/https://img.youtube.com/vi/" + category.videoId + "/mqdefault.jpg"}
+				Platform="YouTube"
+			/>
+		)}
+		{GamingSplit.map((category) =>
+			<Category
+				Name="Gaming"
+				Link="#"
+				Thumbnail={"https://ipx.sudovanilla.org/https://img.youtube.com/vi/" + category.videoId + "/mqdefault.jpg"}
+				Platform="YouTube"
+			/>
+		)}
 	</div>
 
 	<br/>
@@ -183,45 +231,6 @@ import { Search } from '@iconoir/vue'
 	<br/>
 	<br/>
 
-	<div style="display: grid; grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); gap: 12px;">
-		{TrendingSplit.map((category) =>
-			<Category
-				Name="Trending"
-				Link="#"
-				Thumbnail={"https://ipx.sudovanilla.org/https://img.youtube.com/vi/" + category.videoId + "/mqdefault.jpg"}
-				Platform="YouTube"
-			/>
-		)}
-		{MoviesSplit.map((category) =>
-			<Category
-				Name="Trailers"
-				Link="#"
-				Thumbnail={"https://ipx.sudovanilla.org/https://img.youtube.com/vi/" + category.videoId + "/mqdefault.jpg"}
-				Platform="YouTube"
-			/>
-		)}
-		{MusicSplit.map((category) =>
-			<Category
-				Name="Music"
-				Link="#"
-				Thumbnail={"https://ipx.sudovanilla.org/https://img.youtube.com/vi/" + category.videoId + "/mqdefault.jpg"}
-				Platform="YouTube"
-			/>
-		)}
-		{GamingSplit.map((category) =>
-			<Category
-				Name="Gaming"
-				Link="#"
-				Thumbnail={"https://ipx.sudovanilla.org/https://img.youtube.com/vi/" + category.videoId + "/mqdefault.jpg"}
-				Platform="YouTube"
-			/>
-		)}
-	</div>
-
-	<br/>
-	<br/>
-	<br/>
-
 	<Comment
 		Avatar="https://ipx.sudovanilla.org/https://invidious.private.coffee/ggpht/ytc/AIdro_lAKf-vZLoTI-gZUoP5Y3gbdGd07E4eDHUhTee6aOzDCnU=s900-c-k-c0x00ffffff-no-rj"
 		Username="The Linux Experiment"