mylloon.fr/static/css/markdown.css

@media (prefers-color-scheme: light) {
  :root {
    --separator-color: #cccccc;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --separator-color: #414558;
  }
}

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

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

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

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

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

/* Images */
main img,
main svg {
  display: block;
  margin: auto;
}

/* 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: light-dark(#9852fa, #bd93f9);
  background: light-dark(#d8d6d6, #273341);
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

/* Little snippet of code (not blocks) */
kbd,
code:not(.hljs):not(:has(svg)) {
  background: light-dark(#eeeeee, #333333);
  border-radius: 3px;
  color: light-dark(#333333, #eeeeee);
  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);
}

/* Footnote */
section.footnotes * {
  font-size: calc(var(--font-size) * 0.8);
}

/* Hightlight footnote on click */
section.footnotes :target {
  background-color: light-dark(#fafa35b9, #adad213c);
}

/* When multiple ref */
a.footnote-backref sup {
  font-size: calc(var(--font-size) * 0.6);
}
a.footnote-backref sup::before {
  content: "(";
}
a.footnote-backref sup::after {
  content: ")";
}

/* Footnotes links */
a.footnote-backref {
  font-family: "Segoe UI", "Segoe UI Symbol", system-ui;
  text-decoration: underline dotted;
}

/* Footnotes block separation from content */
section.footnotes {
  margin: 3px;
  border-top: 2px dotted var(--separator-color);
}

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

@media (prefers-color-scheme: dark) {
  .language-mermaid {
    filter: invert(0.9);
  }
}

/* Tables */
table:not(.hljs-ln) {
  border-collapse: collapse;
  margin-inline: auto;
}

table:not(.hljs-ln) th,
table:not(.hljs-ln) td {
  padding: 5px;
  border: 1px solid var(--separator-color);
}

table:not(.hljs-ln)th {
  border-bottom: 2px solid var(--separator-color);
}

/* No borders on the outer edges of the table */
table:not(.hljs-ln) tr:last-child td {
  border-bottom: 0;
}

table:not(.hljs-ln) tr:first-child th {
  border-top: 0;
}

table:not(.hljs-ln) tr td:first-child,
table:not(.hljs-ln) tr th:first-child {
  border-left: 0;
}

table:not(.hljs-ln) tr td:last-child,
table:not(.hljs-ln) tr th:last-child {
  border-right: 0;
}

@media print {
  /* Better colors for paper */
  blockquote {
    border-color: black;
    background: var(--background);
  }

  .hljs {
    background: var(--background);
  }

  /* Force line numbering to be on top */
  td.hljs-ln-line {
    vertical-align: top;
  }

  /* Break code */
  code.hljs {
    white-space: break-spaces;
    hyphens: none;
  }

  /* Hide arrows of backref */
  a.footnote-backref {
    visibility: hidden;
  }

  /* No underline for footnotes */
  .footnote-ref > a {
    text-decoration: none;
  }

  /* Prevent figures from splitting accross pages */
  article *:has(img),
  article *:has(svg),
  table:not(.hljs-ln),
  table:not(.hljs-ln) > * {
    page-break-inside: avoid;
  }

  @page {
    @bottom-right {
      content: counter(page) "/" counter(pages);
    }
  }
}