diff --git a/src/routes/blog.rs b/src/routes/blog.rs index 779f90b..66482d1 100644 --- a/src/routes/blog.rs +++ b/src/routes/blog.rs @@ -21,7 +21,7 @@ use crate::{ markdown::{get_metadata, get_options, read_file, File, FileMetadata}, utils::get_url, }, - template::Infos, + template::{Infos, NavBar}, }; const MIME_TYPE_RSS: &str = "application/rss+xml"; @@ -36,6 +36,7 @@ async fn index(req: HttpRequest, config: web::Data) -> impl Responder { #[derive(Content, Debug)] struct BlogIndexTemplate { + navbar: NavBar, posts: Vec, no_posts: bool, } @@ -51,6 +52,10 @@ fn build_index(config: Config, url: String) -> String { config.tmpl.render( "blog/index.html", BlogIndexTemplate { + navbar: NavBar { + blog: true, + ..NavBar::default() + }, no_posts: posts.is_empty(), posts, }, @@ -172,6 +177,7 @@ fn get_posts(location: &str) -> Vec { #[derive(Content, Debug)] struct BlogPostTemplate { + navbar: NavBar, post: Option, toc: String, } @@ -193,9 +199,18 @@ fn build_post(file: String, config: Config, url: String) -> String { let mut post = None; let (infos, toc) = get_post(&mut post, file, config.fc.name.unwrap_or_default(), url); - config - .tmpl - .render("blog/post.html", BlogPostTemplate { post, toc }, infos) + config.tmpl.render( + "blog/post.html", + BlogPostTemplate { + navbar: NavBar { + blog: true, + ..NavBar::default() + }, + post, + toc, + }, + infos, + ) } fn get_post( diff --git a/static/css/blog/index.css b/static/css/blog/index.css index eb310ac..2f51588 100644 --- a/static/css/blog/index.css +++ b/static/css/blog/index.css @@ -1,127 +1,54 @@ @media (prefers-color-scheme: light) { :root { - --selection: #36837db3; - --bg: #ffffff; --line: #aebed0; --date: #d2e0f0; --point: #8c9daf; --bg-hover: #cedce2; --point-hover: #ff00ff; - --font-color: #18181b; --title-color: #a14cb3; + --rss-inverse: 0%; } } @media (prefers-color-scheme: dark) { :root { - --selection: #4bad9480; - --bg: #171e26; --line: #374351; --date: #242e38; --point: #515f70; --bg-hover: #1f2730; --point-hover: #ff00ff; - --font-color: #a1a1aa; --title-color: #a25add; + --rss-inverse: 80%; } } -:root { - --font-size: 20px; -} - -::selection { - color: rgb(255, 255, 255); - background: var(--selection); -} - -html { - background-color: var(--bg); - font-family: "Segoe UI", Arial, sans-serif, "Segoe UI Emoji", - "Segoe UI Symbol"; -} - -/* Scrollbar - Firefox */ -* { - scrollbar-color: var(--font-color) var(--bg); -} - -/* Scrollbar - Chrome */ -*::-webkit-scrollbar { - width: 7px; - height: 9px; - background: var(--bg); -} - -*::-webkit-scrollbar-thumb { - background-color: var(--font-color); - border-radius: 10px; -} - -/* Title of page */ +/* Title */ h1 { - color: var(--font-color); - text-transform: uppercase; - letter-spacing: 0.3cap; margin-bottom: 0; } -h2, -p { - margin: 0px; -} - -h1, -footer { - text-align: center; - font-size: calc(var(--font-size) * 2); -} - -footer > * { - color: var(--font-color); - font-weight: bold; - text-decoration: none; - font-size: calc(var(--font-size) / 1.5); - text-transform: uppercase; - opacity: 0.7; - letter-spacing: 0.15rem; -} - -footer > *::before { - content: "> "; -} - -a:hover { - color: var(--title-color); -} - -.timeline { - box-sizing: border-box; - color: var(--font-color); - padding: 30px 20px; - display: flex; - width: 100%; - justify-content: center; -} - -/* Barre */ -.timeline > ul { - list-style-type: none; - border-left: 2px solid var(--line); - padding: 0px 5px; +/* RSS link */ +#rss::before { + content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='20' width='20' viewBox='0 0 24 24' %3E%3Cpath d='M6.18 15.64a2.18 2.18 0 0 1 2.18 2.18C8.36 19 7.38 20 6.18 20 5 20 4 19 4 17.82a2.18 2.18 0 0 1 2.18-2.18M4 4.44A15.56 15.56 0 0 1 19.56 20h-2.83A12.73 12.73 0 0 0 4 7.27V4.44m0 5.66a9.9 9.9 0 0 1 9.9 9.9h-2.83A7.07 7.07 0 0 0 4 12.93V10.1Z' %3E%3C/path%3E%3C/svg%3E"); + padding-right: 2px; + vertical-align: middle; + filter: invert(var(--rss-inverse)); } /* Card */ -.timeline > ul > li { +main li { padding: 20px 20px; position: relative; cursor: pointer; border-radius: 5px; } -/* Dates */ -.timeline > ul > li > span { - display: inline-block; +main li:hover { + background: var(--bg-hover); +} + +/* Card dates */ +main span { background-color: var(--date); border-radius: 5px; padding: 2px 5px; @@ -129,82 +56,48 @@ a:hover { font-family: monospace; } -/* Titles */ -.timeline > ul > li > .content > h2 { +/* Card text */ +li h2, +li p { + margin: 0px; + padding-top: 5px; +} + +/* Card titles */ +li h2 { color: var(--title-color); font-size: var(--font-size); - padding-top: 5px; - text-decoration: none; } -/* Descriptions */ -.timeline > ul > li > .content > p { - padding-top: 5px; +/* Card descriptions */ +li p { font-size: calc(var(--font-size) - 2px); - max-width: 25em; - - display: -webkit-box; - -webkit-line-clamp: 2; - -webkit-box-orient: vertical; - overflow: hidden; } -/* Points côté */ -.timeline > ul > li::before { +/* Timeline bar */ +main ul { + list-style-type: none; + border-left: 2px solid var(--line); + padding: 0px 5px; +} + +/* Timeline dot */ +main li::before { position: absolute; + content: ""; width: 10px; height: 10px; background-color: var(--point); border-radius: 50%; + left: -11px; top: 59px; + transition: 0.2s; } -/* Card hover */ -.timeline > ul > li:hover { - background-color: var(--bg-hover); -} - -/* Point côté hover */ -.timeline > ul > li:hover::before { +main li:hover::before { background-color: var(--point-hover); box-shadow: 0px 0px 10px 2px var(--point-hover); } - -nav { - display: flex; - justify-content: center; -} - -#rss { - text-transform: lowercase; - color: var(--font-color); - text-decoration: none; -} - -hr { - border: 0; - margin: 0; - height: 1px; - background: var(--line); - margin: 2rem auto; - width: 20%; -} - -#rss:hover { - color: var(--title-color); - text-decoration: underline; -} - -@media only screen and (max-width: 300px) { - .timeline { - padding: 30px 5px 30px 10px; - } - - .timeline > ul > li > .content > h2 > a { - color: var(--title-color); - font-size: calc(var(--font-size) - 2px); - } -} diff --git a/templates/blog/head.html b/templates/blog/head.html deleted file mode 100644 index b7f5c8b..0000000 --- a/templates/blog/head.html +++ /dev/null @@ -1,8 +0,0 @@ -{{page_title}}{{#page_title}} - {{/page_title}}{{app_name}} - - - - - - -{{>icons.html}} {{>metadata.html}} diff --git a/templates/blog/index.html b/templates/blog/index.html index 844288b..cfd44b4 100644 --- a/templates/blog/index.html +++ b/templates/blog/index.html @@ -1,34 +1,40 @@ - + - {{>blog/head.html}} + {{>head.html}} + - - {{#data}} + +
{{>navbar.html}}
+
+ {{#data}} -

Blog

- -
+

Blog

+

Blog perso, je dis peut-être n'importe quoi 🫶

+ Lien vers le flux RSS - {{#no_posts}} -

Aucun posts

- {{/no_posts}} {{^no_posts}} -
+ {{#no_posts}} +

Aucun posts

+ + {{/no_posts}} {{^no_posts}}
    {{#posts}} -
  • +
  • {{>blog/date.html}} -
    -

    {{title}}

    - {{#desc}} -

    {{desc}}

    - {{/desc}} -
    +

    {{title}}

    + {{#desc}} +

    {{desc}}

    + {{/desc}}
    • {{/posts}}
-
- {{/no_posts}} {{/data}} {{>footer.html}} + {{/no_posts}} {{/data}} +