redesign
@@ -14,18 +14,9 @@ language: pt-BR logo: assets/logo.png favicon: assets/favicon.png palette: - - scheme: slate - primary: black - accent: light blue - toggle: - icon: material/weather-night - name: Mudar para o modo claro - - scheme: default - primary: white - accent: light blue - toggle: - icon: material/weather-sunny - name: Mudar para o modo escuro + scheme: default + primary: custom + accent: custom features: - navigation.instant - navigation.instant.progress
@@ -11,6 +11,12 @@ Não é blog: é log das prateleiras. As [últimas coisas](index.md#últimas-coisas) na home apontam só o topo desta pilha. +## 27 de setembro de 2026 — roupa nova + +- A casa trocou de roupa: ardósia, vidro ciano e botões em gel, só no claro. + Linguagem visual inspirada no [Modernist](https://github.com/orderedlist/modernist), + de Steve Smith. Texto em Lato; código segue em Plex Mono. Netuno ficou onde estava. + ## 27 de setembro de 2026 — directórios indie - [Directórios indie](guias/directorios.md) — a prateleira do Ray; Weirdnet com estrela
@@ -1,33 +1,25 @@ @font-face { - font-family: "IBM Plex Sans"; + font-family: "Lato"; font-style: normal; font-weight: 400; font-display: swap; - src: url("../assets/fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); + src: url("../assets/fonts/lato-latin-400-normal.woff2") format("woff2"); } @font-face { - font-family: "IBM Plex Sans"; + font-family: "Lato"; font-style: italic; font-weight: 400; font-display: swap; - src: url("../assets/fonts/ibm-plex-sans-latin-400-italic.woff2") format("woff2"); + src: url("../assets/fonts/lato-latin-400-italic.woff2") format("woff2"); } @font-face { - font-family: "IBM Plex Sans"; - font-style: normal; - font-weight: 600; - font-display: swap; - src: url("../assets/fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); -} - -@font-face { - font-family: "IBM Plex Sans"; + font-family: "Lato"; font-style: normal; font-weight: 700; font-display: swap; - src: url("../assets/fonts/ibm-plex-sans-latin-700-normal.woff2") format("woff2"); + src: url("../assets/fonts/lato-latin-700-normal.woff2") format("woff2"); } @font-face { @@ -54,77 +46,654 @@ font-display: swap; src: url("../assets/fonts/ibm-plex-mono-latin-600-normal.woff2") format("woff2"); } -:root { - --brand-sky: #a6cbe2; - --brand-sky-deep: #2d6f8c; - --brand-peach: #e1a771; - --brand-ink: #0b0b0e; - --brand-panel: #131318; - --brand-hairline: rgba(166, 203, 226, 0.14); - --brand-label: rgba(166, 203, 226, 0.6); - --md-text-font: "IBM Plex Sans"; +/* ---- tokens: modernist (ardósia, vidro ciano, gel azul) ----------------- */ + +:root, +[data-md-color-scheme="default"] { + --slate-top: #6c7989; + --slate-bottom: #434b55; + --card-top: #fafafa; + --card: #dedede; + --ink: #444; + --ink-strong: #222; + --ink-h2: #393939; + --ink-h3: #494949; + --link: #069; + --link-hover: #004d73; + --glass-top: #ddfbfc; + --glass-bottom: #c6eafa; + --glass-edge: #b2d2e1; + --gel-top: #4a8dd4; + --gel-bottom: #1a5a9c; + --gel-light: #7db0e6; + --gel-dark: #174f8a; + --code-bg: #3a3c42; + --code-fg: #f8f8f2; + --on-slate: #e3e7eb; + --brand-label: #4f6273; + --brand-hairline: rgba(0, 0, 0, 0.15); + --card-pad: 1.6rem; + + --md-text-font: "Lato"; --md-code-font: "IBM Plex Mono"; - --md-accent-fg-color: var(--brand-sky); - --md-accent-fg-color--transparent: rgba(166, 203, 226, 0.1); - --md-typeset-a-color: var(--brand-peach); + --md-primary-fg-color: var(--link); + --md-primary-fg-color--light: #3782cd; + --md-primary-fg-color--dark: var(--link-hover); + --md-primary-bg-color: #fff; + --md-primary-bg-color--light: rgba(255, 255, 255, 0.7); + --md-accent-fg-color: #3782cd; + --md-accent-fg-color--transparent: rgba(55, 130, 205, 0.1); + --md-accent-bg-color: #fff; + --md-accent-bg-color--light: rgba(255, 255, 255, 0.7); + --md-default-fg-color: #333; + --md-default-fg-color--light: #444; + --md-default-fg-color--lighter: var(--brand-label); + --md-default-fg-color--lightest: rgba(0, 0, 0, 0.12); + --md-default-bg-color: var(--card-top); + --md-typeset-color: var(--ink); + --md-typeset-a-color: var(--link); + --md-typeset-table-color: #aaa; + + --md-code-bg-color: var(--code-bg); + --md-code-fg-color: var(--code-fg); + --md-code-hl-color: rgba(125, 176, 230, 0.35); + --md-code-hl-color--light: rgba(125, 176, 230, 0.15); + --md-code-hl-number-color: #ff9f9f; + --md-code-hl-special-color: #ff9f9f; + --md-code-hl-function-color: #8fd3c9; + --md-code-hl-constant-color: #c7b3ff; + --md-code-hl-keyword-color: #7fc4f5; + --md-code-hl-string-color: #b5d98a; + --md-code-hl-name-color: var(--code-fg); + --md-code-hl-operator-color: #c8c8c8; + --md-code-hl-punctuation-color: #b0b0b8; + --md-code-hl-comment-color: #a9afb8; + --md-code-hl-generic-color: #b0b0b8; + --md-code-hl-variable-color: var(--code-fg); + + --md-footer-bg-color: transparent; + --md-footer-bg-color--dark: transparent; + --md-footer-fg-color: #fff; + --md-footer-fg-color--light: var(--on-slate); + --md-footer-fg-color--lighter: var(--on-slate); + + --md-mermaid-font-family: "Lato"; + --md-mermaid-node-bg-color: #eefbfd; + --md-mermaid-node-fg-color: var(--ink-strong); + --md-mermaid-edge-color: #3782cd; + --md-mermaid-label-bg-color: #eefbfd; + --md-mermaid-label-fg-color: var(--ink-strong); + --md-mermaid-sequence-actor-bg-color: #eefbfd; + --md-mermaid-sequence-actor-border-color: var(--glass-edge); + --md-mermaid-sequence-actor-fg-color: var(--ink-strong); + --md-mermaid-sequence-actor-line-color: #3782cd; + --md-mermaid-sequence-actorman-bg-color: #eefbfd; + --md-mermaid-sequence-actorman-line-color: #3782cd; + --md-mermaid-sequence-box-bg-color: #f2f4f6; + --md-mermaid-sequence-box-fg-color: var(--ink); + --md-mermaid-sequence-label-bg-color: #eefbfd; + --md-mermaid-sequence-label-fg-color: var(--ink-strong); + --md-mermaid-sequence-loop-bg-color: rgba(55, 130, 205, 0.06); + --md-mermaid-sequence-loop-border-color: var(--glass-edge); + --md-mermaid-sequence-loop-fg-color: var(--ink); + --md-mermaid-sequence-message-fg-color: var(--ink-strong); + --md-mermaid-sequence-message-line-color: #3782cd; + --md-mermaid-sequence-note-bg-color: #fff8dc; + --md-mermaid-sequence-note-border-color: #d9c77a; + --md-mermaid-sequence-note-fg-color: var(--ink-strong); + --md-mermaid-sequence-number-bg-color: var(--link); + --md-mermaid-sequence-number-fg-color: #fff; +} + +/* ---- página: ardósia com xadrez fino ----------------------------------- */ + +body { + -webkit-font-smoothing: antialiased; + background-color: var(--slate-bottom); + background-image: + repeating-conic-gradient(rgba(255, 255, 255, 0.04) 0 25%, transparent 0 50%), + linear-gradient(var(--slate-top), var(--slate-bottom)); + background-size: 4px 4px, 100% 100%; + background-attachment: fixed; +} + +* { + scrollbar-color: #7a8796 transparent; +} + +::selection { + background: var(--glass-bottom); + color: var(--ink-strong); +} + +:focus-visible { + outline: 2px solid #3782cd; + outline-offset: 2px; +} + +/* ---- header em vidro ciano --------------------------------------------- */ + +.md-header { + color: var(--link); + background: linear-gradient(var(--glass-top), var(--glass-bottom)); + border-bottom: 1px solid var(--glass-edge); + box-shadow: none; +} + +.md-header--shadow { + box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25); +} + +.md-header__title { + font-weight: 700; + text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9); +} + +.md-header__button { + color: var(--link); +} + +.md-header__button.md-logo img, +.md-header__button.md-logo svg { + height: 2.4rem; + width: auto; +} + +.md-search__button { + color: #61778b; + background: #fff; + border: 1px solid var(--glass-edge); + border-radius: 5px; + box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); +} + +.md-search__button:hover { + background: #fff; + border-color: #8fbcd4; +} + +.md-search__button::before { + background-color: currentColor; +} + +.md-search__button::after { + color: var(--brand-label); + background: #eef6fa; + border: 1px solid var(--glass-edge); + border-radius: 3px; +} + +/* ---- abas: grupo de botões em gel -------------------------------------- */ + +.md-tabs { + color: #fff; + background: linear-gradient(var(--gel-top), var(--gel-bottom)); + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.45), + inset 0 -1px 0 rgba(0, 0, 0, 0.2); +} + +.md-tabs__item { + height: auto; + padding: 0; + box-shadow: inset 1px 0 0 var(--gel-light), inset -1px 0 0 var(--gel-dark); +} + +.md-tabs__link { + display: block; + margin: 0; + padding: 0.6rem 0.9rem; + font-size: 0.7rem; + font-weight: 700; + color: #fff; + opacity: 1; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4); +} + +.md-tabs__item:hover { + background: linear-gradient(#5d9fe4, #2468ae); +} + +.md-tabs__item--active, +.md-tabs__item--active:hover { + background: linear-gradient(#1a5a9c, #2a6db4); + box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4); +} + +.md-tabs__link:hover, +.md-tabs__link:focus, +.md-tabs__item--active .md-tabs__link { + color: #fff; +} + +/* ---- cartão do conteúdo ------------------------------------------------ */ + +.md-main__inner .md-content { + min-width: 0; + margin-bottom: 1.2rem; + background: linear-gradient(var(--card-top), var(--card) 700px) var(--card); + border-radius: 8px; + box-shadow: + inset 0 1px 0 #fff, + 0 0 0 1px rgba(0, 0, 0, 0.2), + 0 3px 10px rgba(0, 0, 0, 0.45); +} + +[dir] .md-main__inner.md-grid .md-content > .md-content__inner { + max-width: none; + margin-inline: 0; + padding-inline: var(--card-pad); +} + +.md-content .md-path { + margin-inline: var(--card-pad); +} + +@media (min-width: 37.5em) and (max-width: 76.234375em) { + .md-main__inner .md-content { + margin-inline: 0.8rem; + } +} + +/* ---- barras laterais: bandeja fumê sobre a ardósia --------------------- */ + +@media (min-width: 76.25em) { + .md-sidebar--primary .md-sidebar__inner:has(.md-nav__link) { + padding-block: 0.4rem; + background: rgba(0, 0, 0, 0.2); + border-radius: 8px; + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); + } + + .md-nav--primary .md-nav__title, + .md-nav--lifted > .md-nav__list > .md-nav__item--active > .md-nav__link { + color: #fff; + background: transparent; + box-shadow: none; + } + + .md-nav--primary .md-nav__link { + position: relative; + padding-left: 0.55rem; + color: rgba(255, 255, 255, 0.9); + } + + .md-nav--primary .md-nav__item--section > .md-nav__link { + color: #fff; + } + + .md-nav--primary .md-nav__link:is(:hover, :focus-visible) { + color: #cfefff; + } + + .md-nav--primary .md-nav__link--active, + .md-nav--primary .md-nav__link--active:hover { + color: #fff; + font-weight: 700; + } + + .md-nav--primary .md-nav__link--active::before { + content: ""; + position: absolute; + left: 0; + top: 0.2em; + bottom: 0.2em; + width: 3px; + border-radius: 2px; + background: linear-gradient(#9fd4ff, #4a8dd4); + } +} + +@media (min-width: 60em) { + .md-sidebar--secondary .md-sidebar__inner:has(.md-nav__link) { + padding-block: 0.4rem; + background: rgba(0, 0, 0, 0.2); + border-radius: 8px; + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); + } + + .md-nav--secondary .md-nav__title { + color: #fff; + background: transparent; + box-shadow: none; + } + + .md-nav--secondary .md-nav__link { + color: rgba(255, 255, 255, 0.85); + } + + .md-nav--secondary .md-nav__link:is(:hover, :focus-visible), + .md-nav--secondary .md-nav__link--active { + color: #fff; + } + + .md-nav--secondary .md-nav__link--active { + font-weight: 700; + } +} + +.md-sidebar--primary .md-nav__link, +.md-sidebar--secondary .md-nav__link { + font-size: 0.7rem; + line-height: 1.35; +} + +.md-nav .md-typeset { + color: inherit; + font-size: inherit; + line-height: inherit; +} + +/* ---- tipografia -------------------------------------------------------- */ + +.md-typeset { + font-size: 0.85rem; + line-height: 1.65; + color: var(--ink); +} + +.md-typeset p { + margin-block: 0.9em; +} + +.md-typeset strong { + color: var(--ink-strong); +} + +.md-typeset h1 { + color: var(--ink-strong); + font-weight: 700; + letter-spacing: -0.01em; + line-height: 1.15; + margin-block: 0 0.7em; +} + +.md-typeset h2 { + color: var(--ink-h2); + font-weight: 700; + line-height: 1.2; + margin-block: 1.8em 0.6em; +} + +.md-typeset h3 { + color: var(--ink-h3); + font-weight: 700; + line-height: 1.3; + margin-block: 1.5em 0.5em; +} + +.md-typeset hr { + border: 0; + border-top: 1px solid #aaa; + margin-block: 2.2em; +} + +.md-typeset .headerlink { + color: rgba(0, 102, 153, 0.35); +} + +.md-typeset .headerlink:hover, +.md-typeset .headerlink:focus-visible { + color: var(--link); +} + +/* links do corpo: azul modernist com sublinhado fino que acende no hover */ +.md-typeset a { + color: var(--link); +} + +.md-typeset a:not(.headerlink):not(.footnote-ref):not(.footnote-backref):not(.md-tag) { + text-decoration-line: underline; + text-decoration-thickness: 1px; + text-decoration-color: rgba(0, 102, 153, 0.35); + text-underline-offset: 0.18em; +} + +.md-typeset a:not(.headerlink):not(.footnote-ref):not(.footnote-backref):not(.md-tag):hover { + color: var(--link-hover); + text-decoration-color: var(--link-hover); +} + +@media (prefers-reduced-motion: no-preference) { + .md-typeset a:not(.headerlink):not(.footnote-ref):not(.footnote-backref):not(.md-tag) { + transition: color 0.15s ease, text-decoration-color 0.15s ease; + } +} + +/* ---- código ------------------------------------------------------------ */ + +.md-typeset :not(pre) > code { + color: #333; + background: rgba(0, 0, 0, 0.06); + border: 1px solid rgba(0, 0, 0, 0.08); + border-radius: 4px; +} + +.md-typeset a > code { + color: inherit; +} + +.md-typeset .highlight { + margin-block: 1.2em; + min-width: 0; + background: var(--code-bg); + border-radius: 8px; + overflow: hidden; +} + +.md-typeset .highlight pre { + max-width: 100%; + margin: 0; +} + +.md-typeset pre > code { + padding: 1rem var(--card-pad); + line-height: 1.55; + background: var(--code-bg); +} + +.md-typeset > .highlight { + margin-inline: calc(-1 * var(--card-pad)); + border-radius: 0; +} + +.md-typeset .highlight .filename { + padding: 0.55rem var(--card-pad); + font-family: var(--md-code-font-family); + font-size: 0.64rem; + color: rgba(248, 248, 242, 0.7); + background-color: rgba(255, 255, 255, 0.06); + border-bottom: 1px solid rgba(255, 255, 255, 0.08); +} + +.md-typeset .md-code__nav { + background: transparent; +} + +.md-typeset :is(.md-code__button, .md-clipboard) { + color: rgba(255, 255, 255, 0.45); } -[data-md-color-scheme="slate"] { - --md-hue: 240; - --md-default-bg-color: var(--brand-panel); - --md-primary-fg-color: #0a0a0d; - --md-primary-fg-color--light: #17171c; - --md-primary-fg-color--dark: #000000; - --md-accent-fg-color: var(--brand-sky); - --md-typeset-a-color: var(--brand-peach); - --md-mermaid-font-family: "IBM Plex Sans"; - --md-mermaid-node-bg-color: #1b1b22; - --md-mermaid-node-fg-color: var(--brand-sky); - --md-mermaid-edge-color: rgba(166, 203, 226, 0.55); - --md-mermaid-label-bg-color: #1b1b22; - --md-mermaid-label-fg-color: rgba(255, 255, 255, 0.85); - --md-mermaid-sequence-actor-bg-color: #1b1b22; - --md-mermaid-sequence-actor-border-color: var(--brand-sky); - --md-mermaid-sequence-actor-fg-color: rgba(255, 255, 255, 0.85); - --md-mermaid-sequence-actor-line-color: rgba(166, 203, 226, 0.55); - --md-mermaid-sequence-actorman-bg-color: #1b1b22; - --md-mermaid-sequence-actorman-line-color: rgba(166, 203, 226, 0.55); - --md-mermaid-sequence-box-bg-color: #17171c; - --md-mermaid-sequence-box-fg-color: rgba(255, 255, 255, 0.65); - --md-mermaid-sequence-label-bg-color: #1b1b22; - --md-mermaid-sequence-label-fg-color: rgba(255, 255, 255, 0.85); - --md-mermaid-sequence-loop-bg-color: rgba(166, 203, 226, 0.06); - --md-mermaid-sequence-loop-border-color: rgba(166, 203, 226, 0.35); - --md-mermaid-sequence-loop-fg-color: rgba(255, 255, 255, 0.65); - --md-mermaid-sequence-message-fg-color: rgba(255, 255, 255, 0.85); - --md-mermaid-sequence-message-line-color: rgba(166, 203, 226, 0.55); - --md-mermaid-sequence-note-bg-color: #1b1b22; - --md-mermaid-sequence-note-border-color: var(--brand-peach); - --md-mermaid-sequence-note-fg-color: rgba(255, 255, 255, 0.85); - --md-mermaid-sequence-number-bg-color: var(--brand-sky-deep); - --md-mermaid-sequence-number-fg-color: #ffffff; +.md-typeset :is(.md-code__button, .md-clipboard):is(:hover, :focus-visible) { + color: #fff; } -body[data-md-color-scheme="slate"] { - background-color: var(--brand-ink); - background-image: url("../assets/bg-tile.png"); - background-repeat: repeat; - background-attachment: fixed; +/* ---- avisos: plaqueta com título em vidro ------------------------------ */ + +.md-typeset :is(.admonition, details)[class] { + margin-block: 1.3em; + font-size: 0.76rem; + background: rgba(255, 255, 255, 0.45); + border: 1px solid var(--brand-hairline); + border-radius: 8px; + box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7); } -[data-md-color-scheme="slate"] .md-header { - background-color: rgba(8, 8, 11, 0.92); - border-bottom: 2px solid var(--brand-sky); - backdrop-filter: saturate(140%) blur(6px); +.md-typeset :is(.admonition, details)[class] > :is(.admonition-title, summary) { + font-weight: 700; + color: var(--ink-strong); + text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); + background-color: #f2f4f6; + background-image: linear-gradient(#f7f8f9, #e9ecef); + border-bottom: 1px solid rgba(0, 0, 0, 0.08); } -[data-md-color-scheme="slate"] .md-tabs { - background-color: rgba(8, 8, 11, 0.75); +.md-typeset :is(.admonition, details)[class] > :is(.admonition-title, summary)::before, +.md-typeset details[class] > summary::after { + background-color: var(--brand-label); } -[data-md-color-scheme="slate"] .md-footer { - background-color: rgba(8, 8, 11, 0.92); - border-top: 1px solid rgba(166, 203, 226, 0.35); +.md-typeset .note[class] > :is(.admonition-title, summary) { + background-color: #ddf3fa; + background-image: linear-gradient(#eefbfd, #ddf3fa); +} + +.md-typeset .warning[class] > :is(.admonition-title, summary) { + background-color: #fcefb4; + background-image: linear-gradient(#fff8dc, #fcefb4); +} + +.md-typeset .danger[class] > :is(.admonition-title, summary) { + background-color: #f8d4d4; + background-image: linear-gradient(#fdecec, #f8d4d4); +} + +/* ---- tabelas, citações ------------------------------------------------- */ + +.md-typeset table { + font-size: 0.88em; +} + +.md-typeset .md-typeset__table { + max-width: 100%; +} + +.md-typeset table:not([class]) { + background: transparent; + border: 0; + border-radius: 0; +} + +.md-typeset table:not([class]) th { + color: var(--ink-strong); + font-weight: 700; + background: transparent; + border-bottom: 1px solid #aaa; +} + +.md-typeset table:not([class]) th, +.md-typeset table:not([class]) td { + padding: 0.6em 0.8em; +} + +.md-typeset table:not([class]) td { + font-variant-numeric: tabular-nums; + border-top: 1px solid #aaa; +} + +.md-typeset blockquote { + color: #333; + font-style: italic; + background: rgba(0, 0, 0, 0.06); + border: 0; + border-radius: 6px; + padding: 0.1rem 1rem; +} + +.md-typeset > blockquote { + margin-inline: calc(-1 * var(--card-pad)); + padding-inline: var(--card-pad); + border-radius: 0; +} + +/* ---- breadcrumb como path de shell: ~/secao/pagina --------------------- */ + +.md-path { + font-family: var(--md-code-font-family); + font-size: 0.68rem; +} + +.md-path__list::before { + content: "~/"; + color: var(--brand-label); +} + +.md-path__item:not(:first-child)::before { + content: "/"; + color: var(--brand-label); + background: none; + -webkit-mask-image: none; + mask-image: none; + width: auto; + height: auto; +} + +.md-path__link { + color: var(--brand-label); +} + +.md-path__item:last-child .md-path__link { + color: var(--link); +} + +/* ---- tags: #etiqueta em Lato ------------------------------------------- */ + +.md-tags { + display: flex; + flex-wrap: wrap; + gap: 0.35rem 0.6rem; + margin: 0; + padding: 0; +} + +article.md-content__inner { + position: relative; +} + +article.md-content__inner:has(> .md-tags) { + padding-top: 2.4rem; +} + +article.md-content__inner > .md-tags { + position: absolute; + top: 0.9rem; + inset-inline: var(--card-pad); +} + +.md-typeset .md-tag, +.md-typeset a.md-tag { + display: inline-flex; + align-items: center; + gap: 0.1em; + font-size: 0.7rem; + font-weight: 700; + text-transform: lowercase; + text-decoration: none !important; + color: var(--brand-label); + background: transparent; + border: 0; + border-radius: 0; + padding: 0; + box-shadow: none; +} + +.md-typeset .md-tag::before, +.md-typeset a.md-tag::before { + content: "#"; + color: var(--link); +} + +.md-typeset a.md-tag:hover, +.md-typeset a.md-tag:focus-visible { + color: var(--link-hover); +} + +/* ---- rodapé sobre a ardósia -------------------------------------------- */ + +.md-footer, +.md-footer-meta { + color: var(--on-slate); + background: transparent; } .md-footer { @@ -147,15 +716,13 @@ } .md-footer .md-footer__title { font-size: 0.8rem; + font-weight: 700; line-height: 1.3; } .md-footer .md-footer__direction { - font-size: 0.58rem; -} - -.md-footer-meta { - background-color: rgba(8, 8, 11, 0.92); + font-size: 0.6rem; + font-weight: 400; } .md-footer .md-footer-meta__inner { @@ -185,90 +752,48 @@ padding: 0; justify-content: flex-end; } -.md-footer .footer-build { - display: inline; -} - .md-footer .md-social__link { width: 1rem; height: 1rem; + color: var(--on-slate); } -.at-dot { - color: var(--brand-sky); -} - -.md-typeset .contato-mail { - font-family: var(--md-code-font-family); - font-size: 0.68rem; - line-height: 1.3; - margin: 0.4em 0 1em; +.md-footer .footer-meta, +.md-footer .footer-version { + font-size: inherit; + color: var(--on-slate); } .md-footer .footer-sep { - opacity: 0.45; -} - -.md-footer .footer-meta { - font-size: inherit; - color: rgba(255, 255, 255, 0.55); + opacity: 0.6; } .md-footer .footer-build { - font-size: 0.68rem; + display: inline; + font-family: var(--md-code-font-family); + font-size: 0.64rem; font-style: italic; - color: rgba(255, 255, 255, 0.45); + color: #fff; } .md-footer .footer-build:hover { - color: var(--brand-peach); + text-decoration: underline; } -.md-footer .footer-version { - font-size: 0.68rem; - color: rgba(255, 255, 255, 0.45); +.at-dot { + color: var(--link); } -[data-md-color-scheme="slate"] .md-main__inner .md-content { - background-color: rgba(19, 19, 24, 0.80); - border-radius: 8px; -} +/* ---- peças do conteúdo ------------------------------------------------- */ -.md-header__button.md-logo img, -.md-header__button.md-logo svg { - height: 2.4rem; - width: auto; +.md-typeset .contato-mail { + font-family: var(--md-code-font-family); + font-size: 0.68rem; + line-height: 1.3; + margin: 0.4em 0 1em; } -* { - scrollbar-color: var(--brand-sky-deep) transparent; -} - -::selection { - background: var(--brand-sky); - color: var(--brand-ink); -} - -.md-typeset a { - color: var(--brand-peach); -} - -.md-typeset h1, -.md-typeset h2 { - letter-spacing: -0.01em; -} - -.md-typeset .admonition.note, -.md-typeset details.note { - border-color: var(--brand-sky); -} - -.md-typeset .note > .admonition-title, -.md-typeset .note > summary { - background-color: rgba(166, 203, 226, 0.12); -} - -.gist-embed { max-height: 380px; overflow: auto; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 8px; margin: 1rem 0; } +.gist-embed { max-height: 380px; overflow: auto; border: 1px solid var(--brand-hairline); border-radius: 8px; margin: 1rem 0; } .gist-embed :where(pre, table, iframe, .gist) { max-width: 100%; margin: 0; } .md-typeset figure.neptune { @@ -323,8 +848,7 @@ width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; - border: 2px solid rgba(225, 167, 113, 0.55); - box-shadow: 0 0 0 5px rgba(166, 203, 226, 0.08); + box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2), 0 3px 10px rgba(0, 0, 0, 0.3); } .md-typeset .sobre-bio__copy { @@ -397,7 +921,7 @@ .md-typeset .ascii-art .md-clipboard { display: none; } -.md-typeset figure:is(.neptune, .portrait, .site-shot) figcaption { +.md-typeset figure.neptune figcaption { margin-top: 0.55em; font-family: var(--md-code-font-family); font-size: 0.66rem; @@ -405,6 +929,14 @@ letter-spacing: 0.02em; color: var(--md-default-fg-color--lighter); } +.md-typeset figure:is(.portrait, .site-shot) figcaption { + margin-top: 0.55em; + font-size: 0.72rem; + font-style: italic; + line-height: 1.4; + color: var(--brand-label); +} + .md-typeset figure:is(.neptune, .portrait, .site-shot) figcaption a { color: var(--brand-label); } @@ -417,86 +949,10 @@ .md-typeset figure.site-shot img { display: block; width: 100%; border-radius: 8px; - border: 1px solid rgba(166, 203, 226, 0.28); -} - -.md-typeset table { - font-size: 0.88em; -} - -.md-content { - min-width: 0; -} - -.md-content--article .md-content__inner { - max-width: 80ch; - margin-inline: auto; - padding-inline: 1.2rem; -} - -.md-typeset { - line-height: 1.65; -} - -.md-typeset p { - margin-block: 0.9em; -} - -.md-typeset h1 { - margin-bottom: 1.15em; - line-height: 1.25; -} - -.md-typeset h2 { - margin-top: 2em; - margin-bottom: 0.75em; - font-weight: 600; - line-height: 1.35; + box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2), 0 3px 10px rgba(0, 0, 0, 0.3); } -.md-typeset h3 { - margin-top: 1.6em; - margin-bottom: 0.6em; - font-weight: 600; - line-height: 1.4; -} - -.md-nav__link--active { - font-weight: 700; - box-shadow: inset 2px 0 0 var(--brand-sky); -} - -.md-typeset .highlight { - margin-block: 1.2em; - min-width: 0; -} - -.md-typeset pre { - max-width: 100%; -} - -.md-typeset pre > code { - padding: 1rem; - line-height: 1.55; -} - -.md-typeset .highlight .filename { - padding: 0.55rem 1rem; -} - -.md-typeset .admonition, -.md-typeset details { - margin-block: 1.3em; -} - -.md-typeset table:not([class]) th, -.md-typeset table:not([class]) td { - padding: 0.8em 1em; -} - -.md-typeset .md-typeset__table { - max-width: 100%; -} +/* ---- catálogo ---------------------------------------------------------- */ .md-content--catalog .catalog-grid { display: grid; @@ -506,6 +962,9 @@ } .md-content--catalog .catalog-group { min-width: 0; + border-top: 1px solid #aaa; + margin-top: 1.2rem; + padding-top: 0.2rem; } .md-content--catalog .catalog-group > h2 { @@ -518,6 +977,10 @@ } .md-content--catalog .catalog-group li { margin-bottom: 0.65em; +} + +.md-content--catalog .catalog-group li::marker { + color: var(--link); } .md-content--catalog .catalog-group a { @@ -530,237 +993,12 @@ grid-template-columns: repeat(2, minmax(0, 1fr)); } } -@media (max-width: 599px) { - .md-content--article .md-content__inner { - padding-inline: 0.8rem; - } - - .md-typeset .sobre-bio .portrait { - flex-basis: 7.5rem; - width: 7.5rem; - } -} - - -/* ---- acabamento: tipografia, etiquetas, componentes -------------------- */ - -body { - -webkit-font-smoothing: antialiased; -} - -/* breadcrumb como path de shell: ~/secao/pagina */ -.md-path { - font-family: var(--md-code-font-family); - font-size: 0.68rem; -} - -.md-path__list::before { - content: "~/"; - color: var(--brand-label); -} - -.md-path__item:not(:first-child)::before { - content: "/"; - color: var(--brand-label); - background: none; - -webkit-mask-image: none; - mask-image: none; - width: auto; - height: auto; -} - -.md-path__link { - color: var(--md-default-fg-color--lighter); -} - -.md-path__item:last-child .md-path__link { - color: var(--brand-peach); -} - -/* hairline horizontal */ -.md-typeset hr { - border: 0; - border-top: 1px solid var(--brand-hairline); - margin-block: 2.2em; -} - -/* admonitions: plaqueta com título em etiqueta mono */ -.md-typeset .admonition, -.md-typeset details { - border: 1px solid var(--brand-hairline); - border-radius: 8px; - box-shadow: none; -} - -.md-typeset .note { - border-left: 0.2rem solid var(--brand-sky); -} - -.md-typeset .warning { - border-left: 0.2rem solid var(--brand-peach); -} +/* ---- home: últimas coisas e mapa --------------------------------------- */ -.md-typeset .danger { - border-left: 0.2rem solid #c96f6f; -} - -.md-typeset :is(.note, .warning, .danger) > :is(.admonition-title, summary) { - font-family: var(--md-code-font-family); - font-size: 0.66rem; - font-weight: 600; - letter-spacing: 0.09em; - text-transform: uppercase; -} - -.md-typeset .note > :is(.admonition-title, summary)::before { - background-color: var(--brand-sky); -} - -.md-typeset .warning > :is(.admonition-title, summary) { - background-color: rgba(225, 167, 113, 0.12); -} - -.md-typeset .warning > :is(.admonition-title, summary)::before { - background-color: var(--brand-peach); -} - -.md-typeset .danger > :is(.admonition-title, summary) { - background-color: rgba(201, 111, 111, 0.12); -} - -.md-typeset .danger > :is(.admonition-title, summary)::before { - background-color: #c96f6f; -} - -/* blocos de código: hairline, cantos do painel, filename em mono */ -.md-typeset .highlight { - border: 1px solid var(--brand-hairline); - border-radius: 8px; - overflow: hidden; -} - -.md-typeset .highlight .filename { - font-family: var(--md-code-font-family); - font-size: 0.64rem; - letter-spacing: 0.05em; - color: var(--brand-label); - background-color: rgba(255, 255, 255, 0.04); - border-bottom: 1px solid var(--brand-hairline); -} - -/* código inline: chip discreto */ -.md-typeset code:not(pre code) { - border: 1px solid var(--brand-hairline); - border-radius: 4px; -} - -/* tabelas: header em etiqueta, números tabulares, hairline em volta */ -.md-typeset .md-typeset__table { - border: 1px solid var(--brand-hairline); - border-radius: 8px; -} - -.md-typeset table:not([class]) th { - font-family: var(--md-code-font-family); - font-size: 0.62rem; - font-weight: 600; - letter-spacing: 0.09em; - text-transform: uppercase; -} - -.md-typeset table:not([class]) td { - font-variant-numeric: tabular-nums; -} - -/* links do corpo: sublinhado pêssego discreto que acende no hover */ -.md-typeset a:not(.headerlink):not(.footnote-ref):not(.footnote-backref):not(.md-tag) { - text-decoration-line: underline; - text-decoration-thickness: 1px; - text-decoration-color: rgba(225, 167, 113, 0.35); - text-underline-offset: 0.18em; -} - -.md-typeset a:not(.headerlink):not(.footnote-ref):not(.footnote-backref):not(.md-tag):hover { - text-decoration-color: var(--brand-peach); -} - -@media (prefers-reduced-motion: no-preference) { - .md-typeset a:not(.headerlink):not(.footnote-ref):not(.footnote-backref):not(.md-tag) { - transition: text-decoration-color 0.15s ease; - } -} - -/* tags: etiqueta mono, não pastilha */ -.md-tags { - display: flex; - flex-wrap: wrap; - gap: 0.35rem 0.5rem; - margin: 0 0 1.1em; - padding: 0; -} - -article.md-content__inner { - display: flex; - flex-direction: column; -} - -article.md-content__inner > .md-tags { - order: -1; -} - -.md-typeset .md-tag, -.md-typeset a.md-tag { - display: inline-flex; - align-items: center; - gap: 0.2em; - font-family: var(--md-code-font-family); - font-size: 0.62rem; - font-weight: 500; - letter-spacing: 0.04em; - text-transform: lowercase; - text-decoration: none !important; - color: var(--brand-label); - background: transparent; - border: 0; - border-radius: 0; - padding: 0; - box-shadow: none; -} - -.md-typeset .md-tag::before, -.md-typeset a.md-tag::before { - content: "#"; - color: var(--brand-sky); - opacity: 0.85; -} - -.md-typeset a.md-tag:hover, -.md-typeset a.md-tag:focus-visible { - color: var(--brand-peach); - border-color: transparent; -} - -.md-typeset a.md-tag:hover::before, -.md-typeset a.md-tag:focus-visible::before { - color: var(--brand-peach); -} - -/* catálogo: hairline entre grupos, marcadores em sky */ -.md-content--catalog .catalog-group { - border-top: 1px solid var(--brand-hairline); - margin-top: 1.2rem; - padding-top: 0.2rem; -} - -.md-content--catalog .catalog-group li::marker { - color: var(--brand-sky); -} - -/* home: últimas coisas vs mapa */ .md-typeset .ultimas { margin-bottom: 1.6rem; padding-bottom: 1.2rem; - border-bottom: 1px solid var(--brand-hairline); + border-bottom: 1px solid #aaa; } .md-typeset .ultimas ul { @@ -780,11 +1018,10 @@ .md-typeset .ultimas li::before { content: "·"; position: absolute; left: 0; - color: var(--brand-sky); + color: var(--link); font-weight: 700; } -/* home: mapa do site com prefixo de diretório */ .md-typeset .mapa { margin-top: 0.4rem; } @@ -802,17 +1039,12 @@ .md-typeset .mapa li::before { content: "./"; font-family: var(--md-code-font-family); - color: var(--brand-sky); + color: var(--brand-label); padding-right: 0.15em; } -/* rodapé: metadados em mono */ -.md-footer .md-copyright { - font-family: var(--md-code-font-family); - font-size: 0.64rem; -} +/* ---- 404: gato e bloco de terminal ------------------------------------- */ -/* 404: gato e bloco de terminal */ .md-typeset figure.notfound-cat { max-width: 18rem; margin: 0.2em auto 1.4em; @@ -824,7 +1056,6 @@ width: 100%; height: auto; } -/* 404: bloco de terminal */ .md-typeset .notfound { font-family: var(--md-code-font-family); font-size: 0.72rem; @@ -833,11 +1064,12 @@ border: 1px solid var(--brand-hairline); border-radius: 8px; padding: 0.9rem 1.1rem; margin-block: 1.2em; - color: var(--md-default-fg-color--light); + color: var(--ink); + background: rgba(255, 255, 255, 0.45); } .md-typeset .notfound s { - color: var(--md-default-fg-color--lighter); + color: #6b6b6b; text-decoration-color: rgba(201, 111, 111, 0.7); } @@ -848,138 +1080,26 @@ padding: 0; box-shadow: none; } -/* foco visível */ -[data-md-color-scheme="slate"] :focus-visible { - outline: 2px solid var(--brand-sky); - outline-offset: 2px; -} - -/* leitura: tipografia, contraste, TOC */ - -[data-md-color-scheme="slate"] { - --md-default-fg-color: rgba(255, 255, 255, 0.9); - --md-default-fg-color--light: rgba(255, 255, 255, 0.72); - --md-default-fg-color--lighter: rgba(255, 255, 255, 0.48); - --md-default-fg-color--lightest: rgba(255, 255, 255, 0.18); -} - -.md-typeset { - line-height: 1.7; - font-size: 0.78rem; -} - -.md-typeset h1 { - font-weight: 700; - letter-spacing: -0.02em; - line-height: 1.2; - margin-block: 0 0.85em; -} - -.md-typeset h2 { - font-weight: 700; - letter-spacing: -0.015em; - margin-block: 1.6em 0.55em; - padding-bottom: 0.2em; - border-bottom: 1px solid var(--brand-hairline); -} - -.md-typeset h3 { - font-weight: 600; - margin-block: 1.35em 0.45em; -} - -[data-md-color-scheme="slate"] .md-typeset h3 { - color: rgba(255, 255, 255, 0.92); -} - -[data-md-color-scheme="slate"] .md-typeset p, -[data-md-color-scheme="slate"] .md-typeset li { - color: rgba(255, 255, 255, 0.84); -} - -.md-content__inner { - max-width: 46rem; -} - -.md-sidebar--primary .md-nav__link, -.md-sidebar--secondary .md-nav__link { - font-size: 0.7rem; - line-height: 1.35; -} - -.md-sidebar--secondary .md-nav__link { - color: var(--md-default-fg-color--lighter); -} - -.md-sidebar--secondary .md-nav__link--active, -.md-sidebar--secondary .md-nav__link:hover { - color: var(--brand-sky); -} +/* ---- mobile: o cartão vira a página ------------------------------------ */ -.md-nav--primary .md-nav__title { - color: var(--brand-label); - font-family: var(--md-code-font-family); - font-size: 0.62rem; - letter-spacing: 0.08em; - text-transform: uppercase; -} +@media (max-width: 37.4375em) { + :root, + [data-md-color-scheme="default"] { + --card-pad: 0.8rem; + } -.md-typeset .headerlink { - color: rgba(166, 203, 226, 0.35); -} + .md-main__inner { + margin-top: 0; + } -.md-typeset .headerlink:hover, -.md-typeset .headerlink:focus-visible { - color: var(--brand-sky); -} - -/* ===== tema claro (default): mesma identidade, invertida ================= */ + .md-main__inner .md-content { + margin-bottom: 0; + border-radius: 0; + box-shadow: none; + } -[data-md-color-scheme="default"] { - --brand-sky: #2d6f8c; - --brand-sky-deep: #1d4d63; - --brand-peach: #a75d24; - --brand-ink: #eef1f4; - --brand-panel: #ffffff; - --brand-hairline: rgba(45, 111, 140, 0.16); - --brand-label: rgba(45, 111, 140, 0.75); - --md-accent-fg-color: #2d6f8c; - --md-typeset-a-color: #a75d24; - --md-default-bg-color: #ffffff; - --md-mermaid-node-bg-color: #eef4f8; - --md-mermaid-node-fg-color: #1d4d63; - --md-mermaid-edge-color: rgba(45, 111, 140, 0.7); -} - -body[data-md-color-scheme="default"] { - background-color: var(--brand-ink); - background-image: url("../assets/bg-tile-light.png"); - background-repeat: repeat; - background-attachment: fixed; -} - -[data-md-color-scheme="default"] .md-main__inner .md-content { - background-color: rgba(255, 255, 255, 0.86); - border-radius: 8px; -} - -[data-md-color-scheme="default"] .md-header { - background-color: rgba(255, 255, 255, 0.92); - border-bottom: 2px solid var(--brand-sky); - backdrop-filter: saturate(140%) blur(6px); -} - -[data-md-color-scheme="default"] .md-tabs { - background-color: rgba(255, 255, 255, 0.78); -} - -/* rodapé segue escuro nos dois temas (identidade + contraste do texto) */ -[data-md-color-scheme="default"] .md-footer { - background-color: rgba(8, 8, 11, 0.92); - border-top: 1px solid rgba(166, 203, 226, 0.35); -} - -[data-md-color-scheme="default"] :focus-visible { - outline: 2px solid var(--brand-sky); - outline-offset: 2px; + .md-typeset .sobre-bio .portrait { + flex-basis: 7.5rem; + width: 7.5rem; + } }