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