Style rework #35
3 changed files with 64 additions and 106 deletions
|
@ -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 {
|
||||||
|
|
|
@ -1,3 +0,0 @@
|
||||||
<footer>
|
|
||||||
<a href="/blog">> Retour à la liste des posts</a>
|
|
||||||
</footer>
|
|
|
@ -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}}
|
||||||
|
|
Loading…
Reference in a new issue