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