diff --git a/Cargo.lock b/Cargo.lock
index bbb1144..43d09c1 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -1787,7 +1787,7 @@ checksum = "69d3587f8a9e599cc7ec2c00e331f71c4e69a5f9a4b8a6efd5b07466b9736f9a"
[[package]]
name = "portfolio"
-version = "0.3.0"
+version = "0.4.0"
dependencies = [
"actix-files",
"actix-web",
diff --git a/Cargo.toml b/Cargo.toml
index 27bc945..270d96d 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -19,6 +19,7 @@ serde = "1.0"
# https://carlosted.github.io/icondata/
leptos_icons = { version = "0.1.0", features = [
+ "FiMenu",
"FiExternalLink",
"FaGithubBrands",
"FaLinkedinBrands",
diff --git a/data_src/posts/test.md b/data_src/posts/test.md
index 0cc74e5..f4a940a 100644
--- a/data_src/posts/test.md
+++ b/data_src/posts/test.md
@@ -17,7 +17,7 @@ tags:
##### Heading 5
###### Heading 6
-This is a paragraph tag. It's used for displaying text content.
+This is a paragraph tag. It's used `for` displaying text content.
[Click me to visit Example website!](https://www.example.com)
diff --git a/src/app/components/mod.rs b/src/app/components/mod.rs
index 2eebd68..169c72b 100644
--- a/src/app/components/mod.rs
+++ b/src/app/components/mod.rs
@@ -27,8 +27,8 @@ mod loading;
pub use loading::Loading;
-mod title;
+mod nav;
-pub use title::Title;
+pub use nav::Nav;
pub use mon_parcours::MonParcours;
diff --git a/src/app/components/nav.rs b/src/app/components/nav.rs
new file mode 100644
index 0000000..fb27d95
--- /dev/null
+++ b/src/app/components/nav.rs
@@ -0,0 +1,21 @@
+use leptos::*;
+use leptos_router::*;
+use leptos_icons::FiIcon::FiMenu;
+use leptos_icons::*;
+
+#[component]
+pub fn Nav() -> impl IntoView {
+ let (mobile_menu, set_mobile_menu) = create_signal(false);
+
+ view! {
+
+ }
+}
\ No newline at end of file
diff --git a/src/app/components/title.rs b/src/app/components/title.rs
deleted file mode 100644
index e834a8d..0000000
--- a/src/app/components/title.rs
+++ /dev/null
@@ -1,17 +0,0 @@
-use leptos::*;
-use leptos_router::A;
-
-#[component]
-pub fn Title(
- href: String,
- #[prop[optional]]
- title: Option
-) -> impl IntoView {
- view! {
-
- }
-}
diff --git a/src/app/pages/experience.rs b/src/app/pages/experience.rs
index a216fe7..e05f646 100644
--- a/src/app/pages/experience.rs
+++ b/src/app/pages/experience.rs
@@ -1,10 +1,10 @@
use leptos::*;
-use super::super::components::{Title, MonParcours};
+use super::super::components::{Nav, MonParcours};
#[component]
pub fn Experience() -> impl IntoView {
view! {
+
-
}
diff --git a/src/app/pages/home.rs b/src/app/pages/home.rs
index 39c39cb..febb20f 100644
--- a/src/app/pages/home.rs
+++ b/src/app/pages/home.rs
@@ -3,7 +3,7 @@ use super::super::components::{TopComponent};
#[component]
pub fn Home() -> impl IntoView {
view! {
-
+
}
diff --git a/src/app/pages/posts.rs b/src/app/pages/posts.rs
index 832e81b..f246ea1 100644
--- a/src/app/pages/posts.rs
+++ b/src/app/pages/posts.rs
@@ -4,7 +4,7 @@ use leptos_router::*;
use crate::app::{
models::Post,
components::{
- Title, Loading
+ Loading, Nav
}
};
@@ -107,16 +107,10 @@ pub fn PostList() -> impl IntoView {
})
};
- let title = move || match tag() {
- Some(tag) => view! { },
- None => view! { }
- };
-
view! {
}>
+
- { title }
-
{posts_view}
@@ -134,7 +128,6 @@ pub fn PostElement() -> impl IntoView {
post.and_then(|post| {
view! {
<>
-
<PostTags tags=post.metadata.tags.clone()/>
{
if post.metadata.draft {
@@ -157,6 +150,7 @@ pub fn PostElement() -> impl IntoView {
view! {
<Suspense fallback=move || view! { <Loading title="Chargement du post...".to_string() /> }>
+ <Nav/>
<main class="post">
{post_view}
<script>load();</script>
diff --git a/style/nav.css b/style/nav.css
new file mode 100644
index 0000000..35bde8a
--- /dev/null
+++ b/style/nav.css
@@ -0,0 +1,30 @@
+@layer components {
+ nav {
+ @apply flex flex-wrap flex-row justify-between items-center py-5;
+ @apply mx-auto max-w-3xl;
+ @apply font-semibold;
+
+ & > .nav-mobile {
+ @apply md:hidden scale-125;
+ }
+
+ & > .nav-home {
+ @apply uppercase font-semibold text-lg;
+ }
+
+ & > .nav-links {
+ @apply hidden flex-row gap-5 md:h-auto md:flex;
+
+ &.open {
+ @apply max-md:flex max-md:flex-col max-md:w-full max-md:my-5 max-md:py-5 max-md:border-y-2;
+ }
+ }
+
+ & a {
+ @apply transition-colors duration-500;
+ &:hover {
+ @apply text-primary underline;
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/style/portfolio.css b/style/portfolio.css
index da8be78..6ef2319 100644
--- a/style/portfolio.css
+++ b/style/portfolio.css
@@ -9,6 +9,10 @@
@import './social_links.css';
@import './tag.css';
@import './timeline.css';
-@import './title.css';
@import './top_component.css';
-/*@import './mermaid.css';*/
\ No newline at end of file
+@import './nav.css';
+/*@import './mermaid.css';*/
+
+body {
+ @apply bg-surface dark:bg-dark_surface text-on_surface dark:text-dark_on_surface px-10;
+}
\ No newline at end of file
diff --git a/style/post.css b/style/post.css
index 0c7355e..c653568 100644
--- a/style/post.css
+++ b/style/post.css
@@ -1,32 +1,31 @@
@layer components {
.posts, .post {
- @apply bg-surface dark:bg-dark_surface text-on_surface dark:text-dark_on_surface;
- @apply min-h-screen p-5;
+ @apply min-h-screen;
& h1 {
- @apply text-5xl;
- }
-
- & h2 {
@apply text-4xl;
}
- & h3 {
+ & h2 {
@apply text-3xl;
}
- & h4 {
+ & h3 {
@apply text-2xl;
}
- & h5 {
+ & h4 {
@apply text-xl;
}
- & h6 {
+ & h5 {
@apply text-lg;
}
+ & h6 {
+ @apply text-base;
+ }
+
& h1, & h2, & h3, & h4, & h5, & h6 {
@apply my-3 font-bold;
}
@@ -36,25 +35,39 @@
}
& ul li {
- @apply list-disc list-inside;
+ @apply list-disc list-inside ml-5;
}
& ol li {
- @apply list-decimal list-inside;
+ @apply list-decimal list-inside ml-5;
+ }
+
+ & a {
+ @apply text-primary;
}
& blockquote {
- @apply border-l-4 border-primary/50 dark:border-dark_primary/50 pl-3 my-3;
+ @apply border-l-4 border-primary/50 dark:border-dark_primary/50 pl-3 my-3 bg-primary/5 dark:bg-dark_primary/5;
}
& .tags_list {
@apply flex flex-row flex-wrap gap-2;
}
+
+ & code {
+ @apply bg-primary/10 dark:bg-dark_primary/10 rounded-md p-1;
+ }
+
+ /* Fix useless padding */
+ & pre code {
+ @apply p-0;
+ }
}
.posts {
& > .posts__cards {
- @apply grid grid-cols-1 gap-5 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 m-5;
+ @apply grid grid-cols-1 gap-5 md:grid-cols-2;
+ @apply mx-auto max-w-3xl;
& > div {
@apply rounded-xl overflow-hidden relative;
diff --git a/style/title.css b/style/title.css
deleted file mode 100644
index 1f6e1a4..0000000
--- a/style/title.css
+++ /dev/null
@@ -1,9 +0,0 @@
-@layer components {
- header {
- @apply flex flex-col md:flex-row items-center justify-between p-5;
-
- & h1 {
- @apply my-3 font-bold text-center text-6xl mb-5 flex-1;
- }
- }
-}
diff --git a/style/top_component.css b/style/top_component.css
index 42d1fbd..39953e4 100644
--- a/style/top_component.css
+++ b/style/top_component.css
@@ -3,14 +3,14 @@
@apply min-h-screen w-full flex flex-col md:flex-row items-center gap-5 relative;
& > div {
- @apply flex-1 p-10;
+ @apply flex-1;
}
& > .top_component__image {
- @apply flex justify-center items-center;
+ @apply flex justify-center items-center px-5;
& > img {
- @apply mx-auto rounded-lg;
+ @apply rounded-lg w-full;
}
}