Changed Order And Some Styles

assets/styles.css

@@ -1,3 +1,10 @@
-@tailwind base;
+:root {
-@tailwind components;
+    --rosewater: #f5e0dc,
-@tailwind utilities;
+    --flamingo: #f2cdcd,
+    --pink: #f5c2e7,
+    --mauve: #cba6f7,
+}
+
+h1 {
+    color: var(--pink)
+}

src/main.rs

@@ -8,6 +8,42 @@ use navbar::NavbarElemProps;
 #[function_component]
 fn App() -> Html {
     let elements = vec![
+        NavbarElemProps {
+            icon: "fa-solid fa-key".to_string(),
+            tooltip: "PGP Key".to_string(),
+            link: "https://keyoxide.org/58D7A3458C36566E2088A04ADE3060396884D3F2".to_string(),
+            spacer: false,
+        },
+        NavbarElemProps {
+            icon: "".to_string(),
+            tooltip: "PGP Key".to_string(),
+            link: "".to_string(),
+            spacer: true,
+        },
+        NavbarElemProps {
+            icon: "fa-brands fa-mastodon".to_string(),
+            tooltip: "Fedi".to_string(),
+            link: "https://kolektiva.social/@vanten_s".to_string(),
+            spacer: false,
+        },
+        NavbarElemProps {
+            icon: "fa-solid fa-envelope".to_string(),
+            tooltip: "Mail".to_string(),
+            link: "mailto:vanten-s@vanten-s.com".to_string(),
+            spacer: false,
+        },
+        NavbarElemProps {
+            icon: "".to_string(),
+            tooltip: "PGP Key".to_string(),
+            link: "".to_string(),
+            spacer: true,
+        },
+        NavbarElemProps {
+            icon: "fa-brands fa-github".to_string(),
+            tooltip: "GitHub".to_string(),
+            link: "https://github.com/vanten-s/".to_string(),
+            spacer: false,
+        },
         NavbarElemProps {
             icon: "fa-brands fa-git-alt".to_string(),
             tooltip: "Forgejo".to_string(),
@@ -20,43 +56,13 @@ fn App() -> Html {
             link: "https://www.vanten-s.com/rss.xml".to_string(),
             spacer: false,
         },
-        NavbarElemProps {
-            icon: "fa-brands fa-mastodon".to_string(),
-            tooltip: "Fedi".to_string(),
-            link: "https://kolektiva.social/@vanten_s".to_string(),
-            spacer: false,
-        },
-        NavbarElemProps {
-            icon: "fa-solid fa-cloud".to_string(),
-            tooltip: "Nextcloud".to_string(),
-            link: "https://nextcloud.vanten-s.com/".to_string(),
-            spacer: false,
-        },
-        NavbarElemProps {
-            icon: "fa-solid fa-envelope".to_string(),
-            tooltip: "Mail".to_string(),
-            link: "mailto:vanten-s@vanten-s.com".to_string(),
-            spacer: false,
-        },
-        NavbarElemProps {
-            icon: "fa-brands fa-github".to_string(),
-            tooltip: "GitHub".to_string(),
-            link: "https://github.com/vanten-s/".to_string(),
-            spacer: false,
-        },
-        NavbarElemProps {
-            icon: "fa-solid fa-key".to_string(),
-            tooltip: "PGP Key".to_string(),
-            link: "https://keyoxide.org/58D7A3458C36566E2088A04ADE3060396884D3F2".to_string(),
-            spacer: false,
-        },
     ];
 
     html! {
         <>
         <navbar::Navbar {elements}/>
         <a rel="me" href="https://kolektiva.social/@vanten_s" class="h-0 w-0"></a>
-        <div class="pl-16">
+        <div class="pl-20 pt-4">
         <h1>{ "Helu" }</h1>
         </div>
         </>

src/navbar.rs

@@ -32,7 +32,7 @@ fn NavbarElem(props: &NavbarElemProps) -> Html {
     false => html! {
         <a href={ props.link.clone() } class="w-12 h-12 justify-content-center bg-surface0 shadow-lg hover:bg-green flex items-center justify-center rounded-3xl hover:rounded-xl transition-all group text-white hover:text-base">
             <i class={  format!("text-3xl {}", props.icon.clone() )}></i>
-            <span class="absolute w-auto p-2 m-2 min-w-max left-16 bg-surface0 rounded-xl text-white scale-0 group-hover:scale-100 transition-all">
+            <span class="absolute w-auto p-2 m-2 min-w-max left-16 bg-surface0 rounded-xl text-white opacity-0 group-hover:opacity-100 transition-all">
                 {props.tooltip.clone()}
             </span>
         </a>