youtube_clone/ui
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Changed Order And Some Styles

Browse source
This commit is contained in:
vanten 2023-08-30 08:36:26 +02:00
parent ae8f99a362
commit 16e3480c9d
3 changed files with 48 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
assets/styles.css
View file

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

68
src/main.rs
View file

@ -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>
</>

2
src/navbar.rs
View file

@ -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>