Style rework #35
4 changed files with 85 additions and 179 deletions
|
@ -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(
|
||||||
|
|
|
@ -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);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
|
@ -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}}
|
|
|
@ -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>
|
||||||
{{#data}}
|
<header>{{>navbar.html}}</header>
|
||||||
|
<main>
|
||||||
|
{{#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}}
|
|
||||||
<div class="timeline">
|
{{/no_posts}} {{^no_posts}}
|
||||||
<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>
|
||||||
|
|
Loading…
Reference in a new issue