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},
|
||||
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<Config>) -> impl Responder {
|
|||
|
||||
#[derive(Content, Debug)]
|
||||
struct BlogIndexTemplate {
|
||||
navbar: NavBar,
|
||||
posts: Vec<Post>,
|
||||
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<Post> {
|
|||
|
||||
#[derive(Content, Debug)]
|
||||
struct BlogPostTemplate {
|
||||
navbar: NavBar,
|
||||
post: Option<File>,
|
||||
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(
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
<html class="index" lang="fr">
|
||||
<html lang="fr">
|
||||
<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" />
|
||||
</head>
|
||||
<body class="index">
|
||||
<body>
|
||||
<header>{{>navbar.html}}</header>
|
||||
<main>
|
||||
{{#data}}
|
||||
|
||||
<h1>Blog</h1>
|
||||
<nav><a id="rss" href="/blog/rss">RSS</a></nav>
|
||||
<hr />
|
||||
<p>Blog perso, je dis peut-être n'importe quoi 🫶</p>
|
||||
<a id="rss" href="/blog/rss">Lien vers le flux RSS</a>
|
||||
|
||||
{{#no_posts}}
|
||||
<h2 class="subtitle" style="text-align: center">Aucun posts</h2>
|
||||
<h2>Aucun posts</h2>
|
||||
|
||||
{{/no_posts}} {{^no_posts}}
|
||||
<div class="timeline">
|
||||
<ul>
|
||||
{{#posts}}
|
||||
<li onclick="location.href='/blog/p/{{url}}';">
|
||||
<li onclick="window.open('/blog/p/{{url}}', '_parent');">
|
||||
{{>blog/date.html}}
|
||||
<div class="content">
|
||||
<h2>{{title}}</h2>
|
||||
{{#desc}}
|
||||
<p>{{desc}}</p>
|
||||
{{/desc}}
|
||||
</div>
|
||||
</li>
|
||||
{{/posts}}
|
||||
</ul>
|
||||
</div>
|
||||
{{/no_posts}} {{/data}} {{>footer.html}}
|
||||
{{/no_posts}} {{/data}}
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Reference in a new issue