Style rework #35

Merged
Anri merged 70 commits from rework into main 2023-10-15 20:58:23 +02:00
3 changed files with 64 additions and 106 deletions
Showing only changes of commit a1bb702beb - Show all commits

View file

@ -1,13 +1,9 @@
@media (prefers-color-scheme: light) { @media (prefers-color-scheme: light) {
:root { :root {
--selection: rgba(92, 54, 131, 0.7);
--bg: #ffffff;
--font-color: #18181b;
--code-font-color: #333333; --code-font-color: #333333;
--code-bg-color: #eeeeee; --code-bg-color: #eeeeee;
--quote-border-color: #9852fa; --quote-border-color: #9852fa;
--quote-bg-color: #d8d6d6; --quote-bg-color: #d8d6d6;
--link-hover-color: #fd62af;
--separator-color: #cccccc; --separator-color: #cccccc;
--tag-bg-color: #d2e0f0; --tag-bg-color: #d2e0f0;
} }
@ -15,103 +11,73 @@
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
:root { :root {
--selection: rgba(124, 75, 173, 0.5);
--bg: #171e26;
--font-color: #bcbcc5;
--code-font-color: #eeeeee; --code-font-color: #eeeeee;
--code-bg-color: #333333; --code-bg-color: #333333;
--quote-border-color: #bd93f9; --quote-border-color: #bd93f9;
--quote-bg-color: #273341; --quote-bg-color: #273341;
--link-hover-color: #ff80bf;
--separator-color: #414558; --separator-color: #414558;
--tag-bg-color: #242e38; --tag-bg-color: #242e38;
} }
} }
:root { :root {
--font-size: 17px;
--max-width: 750px; --max-width: 750px;
} }
/* Page */
html { html {
font-family: "Segoe UI", Arial, sans-serif, "Segoe UI Emoji",
"Segoe UI Symbol";
font-size: var(--font-size);
scroll-behavior: smooth; scroll-behavior: smooth;
background-color: var(--bg);
line-height: 1.5;
} }
/* Scrollbar - Firefox */ body {
* { max-width: var(--max-width);
scrollbar-color: var(--font-color) var(--bg); margin: auto;
} }
/* Scrollbar - Chrome */ /* Post title */
*::-webkit-scrollbar { header h1 {
width: 7px; font-size: calc(var(--font-size) * 2);
height: 9px;
background: var(--bg);
} }
*::-webkit-scrollbar-thumb { /* Post date */
background-color: var(--font-color); header span {
border-radius: 10px;
}
/* Post's title */
header > h1 {
font-size: 2.5rem;
}
/* Date's title */
header > span {
font-style: italic; font-style: italic;
} }
/* Tags */ /* Post tags */
header > ul { header > ul:last-of-type {
display: inline; display: inline;
margin-left: 1em; margin-left: 1em;
padding: 0; padding: 0;
} }
header li::before { header > ul:last-of-type li::before {
content: "#"; content: "#";
} }
header li { header > ul:last-of-type li {
display: inline; display: inline;
background-color: var(--tag-bg-color); background: var(--tag-bg-color);
border-radius: 5px; border-radius: 5px;
padding: 2px 8px; padding: 2px 8px;
font-size: calc(var(--font-size) / 1.1); font-size: calc(var(--font-size) * 0.9);
} }
::selection { /* Post */
color: rgb(255, 255, 255); main {
background: var(--selection); margin: 0;
} padding: 0;
max-width: 100%;
* {
color: var(--font-color);
outline: none;
}
p {
color: var(--font-color);
font-size: var(--font-size);
} }
/* Anchors */ /* Anchors */
h1:hover > a.anchor::before, h1:hover a.anchor::before,
h2:hover > a.anchor::before, h2:hover a.anchor::before,
h3:hover > a.anchor::before, h3:hover a.anchor::before,
h4:hover > a.anchor::before, h4:hover a.anchor::before,
h5:hover > a.anchor::before, h5:hover a.anchor::before,
h6:hover > a.anchor::before { h6:hover a.anchor::before {
visibility: visible; visibility: visible;
color: var(--font-color);
} }
a.anchor::before { a.anchor::before {
@ -122,30 +88,11 @@ a.anchor::before {
a.anchor { a.anchor {
text-decoration: none; text-decoration: none;
font-size: calc(var(--font-size) * 1.3);
vertical-align: baseline;
} }
body { /* Separators */
margin: 0 auto;
max-width: var(--max-width);
}
footer {
text-align: center;
}
footer > * {
text-transform: uppercase;
font-size: calc(var(--font-size) / 1.2);
letter-spacing: 0.15rem;
opacity: 0.6;
text-decoration: none;
padding-bottom: 1em;
}
a:hover {
color: var(--link-hover-color);
}
hr { hr {
border: 0; border: 0;
height: 1px; height: 1px;
@ -158,7 +105,7 @@ blockquote {
padding: 0.1em 10px; padding: 0.1em 10px;
border-left: 6px solid; border-left: 6px solid;
border-color: var(--quote-border-color); border-color: var(--quote-border-color);
background-color: var(--quote-bg-color); background: var(--quote-bg-color);
border-top-right-radius: 5px; border-top-right-radius: 5px;
border-bottom-right-radius: 5px; border-bottom-right-radius: 5px;
} }
@ -173,17 +120,17 @@ img {
/* Code */ /* Code */
kbd, kbd,
code { code {
font-family: Consolas, monospace; font-family: monospace;
} }
/* Little snippet of code (not blocks) */ /* Little snippet of code (not blocks) */
kbd, kbd,
code:not(.hljs):not(:has(svg)) { code:not(.hljs):not(:has(svg)) {
background-color: var(--code-bg-color); background: var(--code-bg-color);
border-radius: 3px; border-radius: 3px;
color: var(--code-font-color); color: var(--code-font-color);
box-shadow: 0 1px 1px black; box-shadow: 0 1px 1px black;
font-size: calc(var(--font-size) / 1.2); font-size: calc(var(--font-size) * 0.8);
padding: 2px 4px; padding: 2px 4px;
vertical-align: 1.5px; vertical-align: 1.5px;
} }
@ -193,6 +140,17 @@ code:not(.hljs):not(:has(svg)) {
border-radius: 5px; border-radius: 5px;
} }
.hljs::-webkit-scrollbar {
width: 7px;
height: 9px;
background: var(--background);
}
.hljs::-webkit-scrollbar-thumb {
background-color: var(--font-color);
border-radius: 10px;
}
/* Marge for numbers */ /* Marge for numbers */
.hljs-ln-n { .hljs-ln-n {
margin-right: 0.4em; margin-right: 0.4em;
@ -201,6 +159,7 @@ code:not(.hljs):not(:has(svg)) {
/* Numbers in codeblocks */ /* Numbers in codeblocks */
.hljs-ln-numbers { .hljs-ln-numbers {
text-align: right; text-align: right;
color: var(--font-color);
} }
/* Fix scroll in codeblocks with line numbering */ /* Fix scroll in codeblocks with line numbering */
@ -210,7 +169,7 @@ table.hljs-ln {
/* Background for copy code button */ /* Background for copy code button */
.hljs-copy-button { .hljs-copy-button {
background-color: var(--bg) !important; background-color: var(--background) !important;
} }
/* Light theme for the copy code button */ /* Light theme for the copy code button */
@ -234,28 +193,23 @@ table.hljs-ln {
visibility: collapse; visibility: collapse;
} }
/* Reference to footnotes */
.footnote-ref a {
text-decoration: underline dotted;
font-size: calc(var(--font-size) * 0.8);
}
/* Footnotes */ /* Footnotes */
.footnotes a { .footnotes a {
font-family: "Segoe UI"; font-family: "Segoe UI";
text-decoration: underline dotted; text-decoration: underline dotted;
} }
/* Reference to footnotes */
.footnote-ref > a {
text-decoration: underline dotted;
}
/* Mermaid diagrams */ /* Mermaid diagrams */
pre:has(code.language-mermaid) { pre:has(code.language-mermaid) {
text-align: center; text-align: center;
} }
@media only screen and (max-width: 750px) {
body {
margin: 20px;
}
}
/* Table of content */ /* Table of content */
nav#toc { nav#toc {
position: fixed; position: fixed;
@ -264,6 +218,7 @@ nav#toc {
margin-left: 50px; margin-left: 50px;
} }
/* breakpoint */
@media only screen and (max-width: 1500px) { @media only screen and (max-width: 1500px) {
/* Visible only on large screens */ /* Visible only on large screens */
nav#toc { nav#toc {

View file

@ -1,3 +0,0 @@
<footer>
<a href="/blog">> Retour à la liste des posts</a>
</footer>

View file

@ -1,15 +1,21 @@
<!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/post.css" /> <link rel="stylesheet" href="/css/blog/post.css" />
{{#data}} {{#post}} {{#metadata}} {{#data}} {{#post}} {{#metadata}}
{{#math}}{{>libs/katex_head.html}}{{/math}} {{#math}}{{>libs/katex_head.html}}{{/math}}
{{#syntax_highlight}}{{>libs/hljs_head.html}}{{/syntax_highlight}} {{#syntax_highlight}}{{>libs/hljs_head.html}}{{/syntax_highlight}}
</head> </head>
<body class="index"> <body>
<header> <header>
{{#info}} {{>navbar.html}} {{#info}}
<h1>{{title}}</h1> <h1>{{title}}</h1>
{{#date}} {{>blog/date.html}} {{/date}} {{#date}} {{>blog/date.html}} {{/date}}
<ul> <ul>
@ -26,7 +32,7 @@
<article>{{&content}}</article> <article>{{&content}}</article>
{{/post}} {{/post}}
</main> </main>
{{>blog/footer.html}} {{#post}} {{#metadata}} {{#post}} {{#metadata}}
{{#mermaid}}{{>libs/mermaid_footer.html}}{{/mermaid}} {{#mermaid}}{{>libs/mermaid_footer.html}}{{/mermaid}}
{{#math}}{{>libs/katex_footer.html}}{{/math}} {{#math}}{{>libs/katex_footer.html}}{{/math}}
{{#syntax_highlight}}{{>libs/hljs_footer.html}}{{/syntax_highlight}} {{#syntax_highlight}}{{>libs/hljs_footer.html}}{{/syntax_highlight}}