From 6f4cccc7fb177e1c68c6f067f387b1985d871128 Mon Sep 17 00:00:00 2001
From: vanten <vanten-s@vanten-s.com>
Date: Wed, 30 Aug 2023 08:36:26 +0200
Subject: [PATCH] Changed Order And Some Styles

---
 assets/styles.css | 13 ++++++---
 src/main.rs       | 68 ++++++++++++++++++++++++++---------------------
 src/navbar.rs     |  2 +-
 3 files changed, 48 insertions(+), 35 deletions(-)

diff --git a/assets/styles.css b/assets/styles.css
index b5c61c9..700134d 100644
--- a/assets/styles.css
+++ b/assets/styles.css
@@ -1,3 +1,10 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+:root {
+    --rosewater: #f5e0dc,
+    --flamingo: #f2cdcd,
+    --pink: #f5c2e7,
+    --mauve: #cba6f7,
+}
+
+h1 {
+    color: var(--pink)
+}
diff --git a/src/main.rs b/src/main.rs
index 9673355..b66bb9f 100644
--- a/src/main.rs
+++ b/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>
         </>
diff --git a/src/navbar.rs b/src/navbar.rs
index dcbc946..045a0c1 100644
--- a/src/navbar.rs
+++ b/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>