Anri/mylloon.fr
1
0
Fork 0
Code Issues 21 Pull requests 2 Releases Packages 1 Activity Actions

Style rework #35

Merged
Anri merged 70 commits from rework into main 2023-10-15 20:58:23 +02:00
Conversation 0 Commits 70 Files changed 49 +85 -179
4 changed files with 85 additions and 179 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit 4b42442ed2 - Show all commits

23
src/routes/blog.rs
View file

@ -21,7 +21,7 @@ use crate::{
markdown::{get_metadata, get_options, read_file, File, FileMetadata}, markdown::{get_metadata, get_options, read_file, File, FileMetadata},
utils::get_url, utils::get_url,
}, },
template::Infos, template::{Infos, NavBar},
}; };
const MIME_TYPE_RSS: &str = "application/rss+xml"; const MIME_TYPE_RSS: &str = "application/rss+xml";
@ -36,6 +36,7 @@ async fn index(req: HttpRequest, config: web::Data<Config>) -> impl Responder {
#[derive(Content, Debug)] #[derive(Content, Debug)]
struct BlogIndexTemplate { struct BlogIndexTemplate {
navbar: NavBar,
posts: Vec<Post>, posts: Vec<Post>,
no_posts: bool, no_posts: bool,
} }
@ -51,6 +52,10 @@ fn build_index(config: Config, url: String) -> String {
config.tmpl.render( config.tmpl.render(
"blog/index.html", "blog/index.html",
BlogIndexTemplate { BlogIndexTemplate {
navbar: NavBar {
blog: true,
..NavBar::default()
},
no_posts: posts.is_empty(), no_posts: posts.is_empty(),
posts, posts,
}, },
@ -172,6 +177,7 @@ fn get_posts(location: &str) -> Vec<Post> {
#[derive(Content, Debug)] #[derive(Content, Debug)]
struct BlogPostTemplate { struct BlogPostTemplate {
navbar: NavBar,
post: Option<File>, post: Option<File>,
toc: String, toc: String,
} }
@ -193,9 +199,18 @@ fn build_post(file: String, config: Config, url: String) -> String {
let mut post = None; let mut post = None;
let (infos, toc) = get_post(&mut post, file, config.fc.name.unwrap_or_default(), url); let (infos, toc) = get_post(&mut post, file, config.fc.name.unwrap_or_default(), url);
config config.tmpl.render(
.tmpl "blog/post.html",
.render("blog/post.html", BlogPostTemplate { post, toc }, infos) BlogPostTemplate {
navbar: NavBar {
blog: true,
..NavBar::default()
},
post,
toc,
},
infos,
)
} }
fn get_post( fn get_post(

187
static/css/blog/index.css
View file

@ -1,127 +1,54 @@
@media (prefers-color-scheme: light) { @media (prefers-color-scheme: light) {
:root { :root {
--selection: #36837db3;
--bg: #ffffff;
--line: #aebed0; --line: #aebed0;
--date: #d2e0f0; --date: #d2e0f0;
--point: #8c9daf; --point: #8c9daf;
--bg-hover: #cedce2; --bg-hover: #cedce2;
--point-hover: #ff00ff; --point-hover: #ff00ff;
--font-color: #18181b;
--title-color: #a14cb3; --title-color: #a14cb3;
--rss-inverse: 0%;
} }
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
:root { :root {
--selection: #4bad9480;
--bg: #171e26;
--line: #374351; --line: #374351;
--date: #242e38; --date: #242e38;
--point: #515f70; --point: #515f70;
--bg-hover: #1f2730; --bg-hover: #1f2730;
--point-hover: #ff00ff; --point-hover: #ff00ff;
--font-color: #a1a1aa;
--title-color: #a25add; --title-color: #a25add;
--rss-inverse: 80%;
} }
} }
:root { /* Title */
--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 */
h1 { h1 {
color: var(--font-color);
text-transform: uppercase;
letter-spacing: 0.3cap;
margin-bottom: 0; margin-bottom: 0;
} }
h2, /* RSS link */
p { #rss::before {
margin: 0px; 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;
h1, filter: invert(var(--rss-inverse));
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;
} }
/* Card */ /* Card */
.timeline > ul > li { main li {
padding: 20px 20px; padding: 20px 20px;
position: relative; position: relative;
cursor: pointer; cursor: pointer;
border-radius: 5px; border-radius: 5px;
} }
/* Dates */ main li:hover {
.timeline > ul > li > span { background: var(--bg-hover);
display: inline-block; }
/* Card dates */
main span {
background-color: var(--date); background-color: var(--date);
border-radius: 5px; border-radius: 5px;
padding: 2px 5px; padding: 2px 5px;
@ -129,82 +56,48 @@ a:hover {
font-family: monospace; font-family: monospace;
} }
/* Titles */ /* Card text */
.timeline > ul > li > .content > h2 { li h2,
li p {
margin: 0px;
padding-top: 5px;
}
/* Card titles */
li h2 {
color: var(--title-color); color: var(--title-color);
font-size: var(--font-size); font-size: var(--font-size);
padding-top: 5px;
text-decoration: none;
} }
/* Descriptions */ /* Card descriptions */
.timeline > ul > li > .content > p { li p {
padding-top: 5px;
font-size: calc(var(--font-size) - 2px); 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 bar */
.timeline > ul > li::before { main ul {
list-style-type: none;
border-left: 2px solid var(--line);
padding: 0px 5px;
}
/* Timeline dot */
main li::before {
position: absolute; position: absolute;
content: ""; content: "";
width: 10px; width: 10px;
height: 10px; height: 10px;
background-color: var(--point); background-color: var(--point);
border-radius: 50%; border-radius: 50%;
left: -11px; left: -11px;
top: 59px; top: 59px;
transition: 0.2s; transition: 0.2s;
} }
/* Card hover */ main li:hover::before {
.timeline > ul > li:hover {
background-color: var(--bg-hover);
}
/* Point côté hover */
.timeline > ul > li:hover::before {
background-color: var(--point-hover); background-color: var(--point-hover);
box-shadow: 0px 0px 10px 2px 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);
}
}

8
templates/blog/head.html
View file

@ -1,8 +0,0 @@
<title>{{page_title}}{{#page_title}} - {{/page_title}}{{app_name}}</title>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="author" href="/humans.txt" />
<link rel="alternate" type="application/rss+xml" title="RSS" href="/blog/rss" />
{{>icons.html}} {{>metadata.html}}

30
templates/blog/index.html
View file

@ -1,34 +1,40 @@
<!DOCTYPE html> <!DOCTYPE html>
<html class="index" lang="fr"> <html lang="fr">
<head dir="ltr"> <head dir="ltr">
{{>blog/head.html}} {{>head.html}}
<link
rel="alternate"
type="application/rss+xml"
title="RSS"
href="/blog/rss"
/>
<link rel="stylesheet" href="/css/blog/index.css" /> <link rel="stylesheet" href="/css/blog/index.css" />
</head> </head>
<body class="index"> <body>
<header>{{>navbar.html}}</header>
<main>
{{#data}} {{#data}}
<h1>Blog</h1> <h1>Blog</h1>
<nav><a id="rss" href="/blog/rss">RSS</a></nav> <p>Blog perso, je dis peut-être n'importe quoi 🫶</p>
<hr /> <a id="rss" href="/blog/rss">Lien vers le flux RSS</a>
{{#no_posts}} {{#no_posts}}
<h2 class="subtitle" style="text-align: center">Aucun posts</h2> <h2>Aucun posts</h2>
{{/no_posts}} {{^no_posts}} {{/no_posts}} {{^no_posts}}
<div class="timeline">
<ul> <ul>
{{#posts}} {{#posts}}
<li onclick="location.href='/blog/p/{{url}}';"> <li onclick="window.open('/blog/p/{{url}}', '_parent');">
{{>blog/date.html}} {{>blog/date.html}}
<div class="content">
<h2>{{title}}</h2> <h2>{{title}}</h2>
{{#desc}} {{#desc}}
<p>{{desc}}</p> <p>{{desc}}</p>
{{/desc}} {{/desc}}
</div>
</li> </li>
{{/posts}} {{/posts}}
</ul> </ul>
</div> {{/no_posts}} {{/data}}
{{/no_posts}} {{/data}} {{>footer.html}} </main>
</body> </body>
</html> </html>