mylloon.fr/static/css/blog/post.css

@media (prefers-color-scheme: light) {
  :root {
    --code-font-color: #333333;
    --code-bg-color: #eeeeee;
    --quote-border-color: #9852fa;
    --quote-bg-color: #d8d6d6;
    --separator-color: #cccccc;
    --tag-bg-color: #d2e0f0;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --code-font-color: #eeeeee;
    --code-bg-color: #333333;
    --quote-border-color: #bd93f9;
    --quote-bg-color: #273341;
    --separator-color: #414558;
    --tag-bg-color: #242e38;
  }
}

:root {
  --max-width: 750px;
}

/* Page */
html {
  scroll-behavior: smooth;
}

body {
  max-width: var(--max-width);
  margin: auto;
}

/* Post title */
header h1 {
  font-size: calc(var(--font-size) * 2);
}

/* Post date */
header span {
  font-style: italic;
}

/* Post tags */
header > ul:last-of-type {
  display: inline;
  margin-left: 1em;
  padding: 0;
}

header > ul:last-of-type li::before {
  content: "#";
}

header > ul:last-of-type li {
  display: inline;
  background: var(--tag-bg-color);
  border-radius: 5px;
  padding: 2px 8px;
  font-size: calc(var(--font-size) * 0.9);
}

/* Post */
main {
  margin: 0;
  padding-block: 0;
  max-width: 100%;
}

/* Anchors */
:is(h1, h2, h3, h4, h5, h6):hover a.anchor::before {
  visibility: visible;
}

a.anchor::before {
  content: "#";
  visibility: hidden;
  padding-right: 0.1em;
}

a.anchor {
  text-decoration: none;
  vertical-align: baseline;
}

/* Links in headers */
:is(h1, h2, h3, h4, h5, h6) a {
  font-size: inherit;
}

/* Separators */
hr {
  border: 0;
  height: 1px;
  background: var(--separator-color);
}

/* Quotes */
blockquote {
  margin: 1em 0;
  padding: 0.1em 10px;
  border-left: 6px solid;
  border-color: var(--quote-border-color);
  background: var(--quote-bg-color);
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

/* Images */
img {
  display: block;
  margin: auto;
  max-width: var(--max-width);
}

/* Code */
kbd,
code {
  font-family: monospace;
}

/* Little snippet of code (not blocks) */
kbd,
code:not(.hljs):not(:has(svg)) {
  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) * 0.8);
  padding: 2px 4px;
  vertical-align: 1.5px;
}

/* Code blocks */
.hljs {
  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;
}

/* Numbers in codeblocks */
.hljs-ln-numbers {
  text-align: right;
  color: var(--font-color);
}

/* Fix scroll in codeblocks with line numbering */
table.hljs-ln {
  overflow: hidden;
}

/* Background for copy code button */
.hljs-copy-button {
  background-color: var(--background) !important;
}

/* Light theme for the copy code button */
@media (prefers-color-scheme: light) {
  .hljs-copy-button {
    background-color: var(--font-color) !important;
    filter: invert(100%);
  }
}

/* Hide last line in codeblocks if empty */
.hljs-ln
  > tbody
  > tr:last-child:has(td:last-child > span::-moz-only-whitespace) {
  visibility: collapse;
}

/* Temporary fix for layout.css.has-selector.enabled available only on
 * Firefox under certain circumstances */
.hljs-ln > tbody > tr:last-child {
  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", "Segoe UI Symbol", system-ui;
  text-decoration: underline dotted;
}

/* Mermaid diagrams */
pre:has(code.language-mermaid) {
  text-align: center;
}

/* Table of content */
nav#toc {
  position: fixed;
  top: 0;
  left: 25px;
  margin-left: 50px;
}

/* breakpoint */
@media only screen and (max-width: 1500px) {
  /* Visible only on large screens */
  nav#toc {
    visibility: hidden;
  }
}