mfahampshire
b6df383584
* Rawer landing page - Angular, clean docs styling inspired by Oxide - zero all border-radius globally (kill rounded corners) - sharp code blocks with subtle border - callouts: left-border accent instead of rounded pill - clean table grid lines, sharp search box and MUI buttons - tighter heading letter-spacing (-0.02em) - flat left-border sidebar active item instead of background blob * Add JetBrains Mono for headings/sidebar, push Oxide styling further - import JetBrains Mono via Google Fonts - apply mono font to headings, sidebar, nav bar, search, table headers - darken background (#181C1E), muted body text, h2 bottom border - subtle background tint on active sidebar item - inline code: background-only (no border), monospace table headers - fix active sidebar item font size (scope separator label rule) * Rework docs landing page: hero, ASCII cards, SDKs, get started - add hero section with subtitle covering all doc areas - replace PNG vector illustrations with ASCII art in primary green - add SDKs section with Rust and TypeScript links - add get started section: What is the Mixnet, Send a message, Run a node - add footer links to GitHub and Matrix - fix nav dropdown font (button + ul selectors) - add landing card hover style * Self-host JetBrains Mono, refine landing page - replace Google Fonts import with local @font-face (woff2) - add font files + OFL license to public/fonts/ - remove redundant "Nym Docs" hero heading (already in nav) - drop quick-links pills section - fix SDK box borders (negative margin collapse) - rewrite footer as simple link row (GitHub, Matrix, nym.com) * Light mode styling, dark-mode diagram invert, click-to-expand images - add full light mode CSS: pale grey bg, darker green links, mono fonts - invert diagram images in dark mode with mix-blend-mode: lighten - add click-to-expand overlay for content images - revert mermaid diagrams back to original PNGs * Fix Lychee config for fonts * Make light mode green darker * Animate landing page ASCII art, remove architecture diagram - Network: animated packet traversal through gw_e → M1/M2/M3 → gw_ex with diagonal cross-connections showing mixing paths - Developers: typewriter effect with blinking cursor - Operators: looping progress bar with continuously incrementing packet count - APIs: staged line-by-line response reveal - Remove architecture overview PNG from network/architecture.mdx * Small copy change to SDK headers * Fix links
504 lines
11 KiB
CSS
504 lines
11 KiB
CSS
/* nym docs – angular, clean styling (oxide-inspired) */
|
||
|
||
@font-face {
|
||
font-family: 'JetBrains Mono';
|
||
src: url('/docs/fonts/JetBrainsMono-Regular.woff2') format('woff2');
|
||
font-weight: 400;
|
||
font-style: normal;
|
||
font-display: swap;
|
||
}
|
||
|
||
@font-face {
|
||
font-family: 'JetBrains Mono';
|
||
src: url('/docs/fonts/JetBrainsMono-Medium.woff2') format('woff2');
|
||
font-weight: 500;
|
||
font-style: normal;
|
||
font-display: swap;
|
||
}
|
||
|
||
@font-face {
|
||
font-family: 'JetBrains Mono';
|
||
src: url('/docs/fonts/JetBrainsMono-SemiBold.woff2') format('woff2');
|
||
font-weight: 600;
|
||
font-style: normal;
|
||
font-display: swap;
|
||
}
|
||
|
||
@font-face {
|
||
font-family: 'JetBrains Mono';
|
||
src: url('/docs/fonts/JetBrainsMono-Bold.woff2') format('woff2');
|
||
font-weight: 700;
|
||
font-style: normal;
|
||
font-display: swap;
|
||
}
|
||
|
||
:root {
|
||
--colorPrimary: #85E89D;
|
||
--textPrimary: #E0E0E0;
|
||
--textMuted: #8B9295;
|
||
--bg-dark: #181C1E;
|
||
--bg-code: #1C2022;
|
||
--border-dark: #2A2F32;
|
||
--border: #2A2F32;
|
||
--font-mono: 'JetBrains Mono', 'SFMono-Regular', 'Consolas', 'Liberation Mono', 'Menlo', monospace;
|
||
}
|
||
|
||
/* ── Global: kill all rounded corners ── */
|
||
|
||
*,
|
||
*::before,
|
||
*::after {
|
||
border-radius: 0 !important;
|
||
}
|
||
|
||
/* ── Dark mode backgrounds ── */
|
||
|
||
html.dark {
|
||
background-color: var(--bg-dark);
|
||
}
|
||
|
||
html.dark body {
|
||
background-color: var(--bg-dark);
|
||
color: var(--textPrimary);
|
||
}
|
||
|
||
html.dark .nextra-nav-container,
|
||
html.dark .nextra-sidebar-container,
|
||
html.dark .nextra-content,
|
||
html.dark .nx-bg-white,
|
||
html.dark .dark\:nx-bg-dark {
|
||
background-color: var(--bg-dark) !important;
|
||
}
|
||
|
||
/* ── Typography ── */
|
||
|
||
h1, h2, h3, h4, h5, h6 {
|
||
font-family: var(--font-mono);
|
||
letter-spacing: -0.02em;
|
||
font-weight: 600;
|
||
}
|
||
|
||
html.dark h1 {
|
||
color: #FFFFFF;
|
||
font-weight: 700;
|
||
}
|
||
|
||
html.dark h2 {
|
||
color: #F0F0F0;
|
||
padding-bottom: 0.3em;
|
||
border-bottom: 1px solid var(--border-dark);
|
||
}
|
||
|
||
html.dark p, html.dark li {
|
||
color: var(--textPrimary);
|
||
line-height: 1.7;
|
||
}
|
||
|
||
/* ── Layout ── */
|
||
|
||
footer {
|
||
text-align: center;
|
||
}
|
||
|
||
.nextra-code-block > pre {
|
||
max-height: none !important;
|
||
scroll-y: auto !important;
|
||
}
|
||
|
||
.nx-mx-auto.nx-flex.nx-max-w-\[90rem\] {
|
||
max-width: 110rem;
|
||
}
|
||
|
||
.nextra-content {
|
||
padding-top: 0 !important;
|
||
padding-right: 0 !important;
|
||
padding-bottom: 0 !important;
|
||
padding-left: 0 !important;
|
||
margin: 0 !important;
|
||
}
|
||
|
||
/* ── Nav bar ── */
|
||
|
||
html.dark .nextra-nav-container {
|
||
border-bottom: 1px solid var(--border-dark) !important;
|
||
}
|
||
|
||
html.dark .nextra-nav-container nav a,
|
||
html.dark .nextra-nav-container nav button,
|
||
html.dark .nextra-nav-container nav ul a {
|
||
font-family: var(--font-mono);
|
||
font-size: 0.85rem;
|
||
}
|
||
|
||
html.dark .nextra-nav-container nav a:hover,
|
||
html.dark .nextra-nav-container nav ul a:hover {
|
||
color: var(--colorPrimary) !important;
|
||
}
|
||
|
||
/* ── Sidebar ── */
|
||
|
||
.nextra-sidebar-container {
|
||
border-right: 1px solid var(--border-dark);
|
||
width: 300px !important;
|
||
}
|
||
|
||
.nextra-sidebar {
|
||
column-width: 500px;
|
||
}
|
||
|
||
/* Sidebar font */
|
||
html.dark .nextra-sidebar-container {
|
||
font-family: var(--font-mono);
|
||
font-size: 0.82rem;
|
||
}
|
||
|
||
/* Sidebar text: muted by default */
|
||
html.dark .nextra-sidebar-container a {
|
||
color: var(--textMuted) !important;
|
||
}
|
||
|
||
html.dark .nextra-sidebar-container a:hover {
|
||
color: var(--textPrimary) !important;
|
||
}
|
||
|
||
/* Sidebar separator labels (not active items) */
|
||
html.dark .nextra-sidebar-container li.nx-mt-5 .nx-font-semibold {
|
||
color: var(--textMuted) !important;
|
||
font-size: 0.7rem;
|
||
letter-spacing: 0.05em;
|
||
}
|
||
|
||
/* Active sidebar item: left-border accent + subtle tint */
|
||
:is(html .dark\:nx-bg-primary-400\/10) {
|
||
background: rgba(133, 232, 157, 0.06) !important;
|
||
border-left: 2px solid var(--colorPrimary);
|
||
color: #FFFFFF !important;
|
||
}
|
||
|
||
html.dark .nextra-sidebar-container :is(.dark\:nx-bg-primary-400\/10) a {
|
||
color: #FFFFFF !important;
|
||
}
|
||
|
||
:is(html:not(.dark) .dark\:nx-bg-primary-400\/10) {
|
||
background: rgba(74, 158, 92, 0.08) !important;
|
||
border-left: 2px solid #4A9E5C;
|
||
color: #242B2D !important;
|
||
}
|
||
|
||
:is(html[class~="dark"] .dark\:nx-bg-primary-300\/10) {
|
||
background-color: transparent !important;
|
||
}
|
||
|
||
/* ── TOC (hidden — subsections live in sidebar) ── */
|
||
|
||
.nextra-toc {
|
||
display: none !important;
|
||
}
|
||
|
||
/* ── Code blocks ── */
|
||
|
||
html.dark .nextra-code-block > pre {
|
||
background-color: var(--bg-code) !important;
|
||
border: 1px solid var(--border-dark);
|
||
}
|
||
|
||
/* Language tag in code blocks */
|
||
html.dark .nextra-code-block [class*="nx-absolute"] {
|
||
color: var(--textMuted);
|
||
font-size: 0.7rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.05em;
|
||
}
|
||
|
||
/* Inline code: subtle background, no border */
|
||
html.dark code:not(pre code) {
|
||
background-color: rgba(255, 255, 255, 0.06) !important;
|
||
border: none !important;
|
||
padding: 0.15em 0.4em;
|
||
font-size: 0.88em;
|
||
color: var(--textPrimary);
|
||
}
|
||
|
||
/* ── Callouts: left-border accent ── */
|
||
|
||
html.dark .nextra-callout {
|
||
border: none;
|
||
border-left: 3px solid;
|
||
background: rgba(255, 255, 255, 0.02);
|
||
}
|
||
|
||
/* ── Tables: monospace uppercase headers ── */
|
||
|
||
html.dark table {
|
||
border-collapse: collapse;
|
||
width: 100%;
|
||
}
|
||
|
||
html.dark th {
|
||
border-bottom: 1px solid var(--border-dark);
|
||
text-align: left;
|
||
font-weight: 600;
|
||
font-family: var(--font-mono);
|
||
font-size: 0.75rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.08em;
|
||
color: var(--textMuted);
|
||
padding: 0.6em 1em;
|
||
}
|
||
|
||
html.dark td {
|
||
border-bottom: 1px solid var(--border-dark);
|
||
padding: 0.6em 1em;
|
||
color: var(--textPrimary);
|
||
}
|
||
|
||
html.dark tr:hover td {
|
||
background-color: rgba(255, 255, 255, 0.02);
|
||
}
|
||
|
||
/* ── Search box ── */
|
||
|
||
html.dark .nextra-search input {
|
||
border: 1px solid var(--border-dark);
|
||
background-color: var(--bg-dark) !important;
|
||
color: var(--textMuted);
|
||
font-family: var(--font-mono);
|
||
font-size: 0.8rem;
|
||
}
|
||
|
||
html.dark .nextra-search input::placeholder {
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.08em;
|
||
font-size: 0.72rem;
|
||
}
|
||
|
||
/* ── Links ── */
|
||
|
||
.nx-text-primary-600.nx-underline.nx-decoration-from-font {
|
||
color: var(--colorPrimary) !important;
|
||
}
|
||
|
||
.nx-text-primary-600 {
|
||
color: var(--colorPrimary) !important;
|
||
}
|
||
|
||
.nextra-scrollbar.nx-sticky {
|
||
color: var(--colorPrimary) !important;
|
||
}
|
||
|
||
/* ── Breadcrumbs / navigation links ── */
|
||
|
||
html.dark .nextra-breadcrumb {
|
||
color: var(--textMuted);
|
||
}
|
||
|
||
/* Prev/next page links */
|
||
html.dark a.nx-flex.nx-items-center {
|
||
border-color: var(--border-dark) !important;
|
||
}
|
||
|
||
html.dark a.nx-flex.nx-items-center:hover {
|
||
border-color: var(--colorPrimary) !important;
|
||
}
|
||
|
||
/* ── Material UI overrides ── */
|
||
|
||
.MuiTypography-root.MuiTypography-inherit.MuiLink-root.MuiLink-underlineAlways {
|
||
color: var(--colorPrimary) !important;
|
||
}
|
||
|
||
.chipContained {
|
||
background-color: var(--colorPrimary) !important;
|
||
}
|
||
|
||
.MuiButton-root {
|
||
color: var(--colorPrimary) !important;
|
||
border-color: var(--colorPrimary) !important;
|
||
}
|
||
|
||
.MuiButton-root:hover {
|
||
color: white !important;
|
||
background-color: var(--colorPrimary) !important;
|
||
}
|
||
|
||
.MuiCircularProgress-root {
|
||
color: var(--colorPrimary) !important;
|
||
}
|
||
|
||
a.MuiLink-root {
|
||
color: var(--colorPrimary) !important;
|
||
}
|
||
|
||
input:focus-visible {
|
||
--tw-ring-shadow: var(--colorPrimary) !important;
|
||
}
|
||
|
||
.Mui-focused > fieldset {
|
||
border-color: var(--colorPrimary) !important;
|
||
}
|
||
|
||
.MuiPaper-root.MuiAccordion-root {
|
||
border-radius: 0;
|
||
}
|
||
|
||
/* ── Landing page ── */
|
||
|
||
.landing-heading {
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
.landing-card:hover {
|
||
background-color: rgba(255, 255, 255, 0.03) !important;
|
||
}
|
||
|
||
/* ── Invert diagrams in dark mode ── */
|
||
|
||
html.dark .nextra-content img:not([src*="landing"]) {
|
||
filter: invert(1) hue-rotate(180deg) brightness(0.92) contrast(1.1);
|
||
mix-blend-mode: lighten;
|
||
cursor: zoom-in;
|
||
}
|
||
|
||
/* Expanded image overlay */
|
||
.nextra-content img.img-expanded {
|
||
position: fixed !important;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100vw !important;
|
||
height: 100vh !important;
|
||
max-width: none !important;
|
||
object-fit: contain;
|
||
background: rgba(0, 0, 0, 0.9);
|
||
z-index: 9999;
|
||
cursor: zoom-out;
|
||
padding: 2rem;
|
||
mix-blend-mode: normal;
|
||
filter: none;
|
||
}
|
||
|
||
html.dark .nextra-content img.img-expanded {
|
||
filter: invert(1) hue-rotate(180deg) brightness(0.92) contrast(1.1);
|
||
mix-blend-mode: normal;
|
||
}
|
||
|
||
/* ── Light mode ── */
|
||
|
||
html:not(.dark) {
|
||
--colorPrimary: #1a7a32;
|
||
--colorPrimary-light: #1a7a32;
|
||
--bg-light: #F5F5F5;
|
||
--border-light: #E0E0E0;
|
||
--border: #E0E0E0;
|
||
--textMuted: #6B7280;
|
||
--textMuted-light: #6B7280;
|
||
}
|
||
|
||
html:not(.dark) body {
|
||
background-color: var(--bg-light);
|
||
}
|
||
|
||
html:not(.dark) .nextra-nav-container,
|
||
html:not(.dark) .nextra-sidebar-container,
|
||
html:not(.dark) .nextra-content,
|
||
html:not(.dark) .nx-bg-white {
|
||
background-color: var(--bg-light) !important;
|
||
}
|
||
|
||
/* Light mode links: darker green */
|
||
html:not(.dark) .nx-text-primary-600 {
|
||
color: var(--colorPrimary-light) !important;
|
||
}
|
||
|
||
html:not(.dark) .nx-text-primary-600.nx-underline.nx-decoration-from-font {
|
||
color: var(--colorPrimary-light) !important;
|
||
}
|
||
|
||
/* Light mode sidebar */
|
||
html:not(.dark) .nextra-sidebar-container {
|
||
font-family: var(--font-mono);
|
||
font-size: 0.82rem;
|
||
border-right: 1px solid var(--border-light);
|
||
}
|
||
|
||
html:not(.dark) .nextra-sidebar-container a {
|
||
color: var(--textMuted-light) !important;
|
||
}
|
||
|
||
html:not(.dark) .nextra-sidebar-container a:hover {
|
||
color: #111 !important;
|
||
}
|
||
|
||
/* Light mode nav */
|
||
html:not(.dark) .nextra-nav-container {
|
||
border-bottom: 1px solid var(--border-light) !important;
|
||
}
|
||
|
||
html:not(.dark) .nextra-nav-container nav a,
|
||
html:not(.dark) .nextra-nav-container nav button,
|
||
html:not(.dark) .nextra-nav-container nav ul a {
|
||
font-family: var(--font-mono);
|
||
font-size: 0.85rem;
|
||
}
|
||
|
||
html:not(.dark) .nextra-nav-container nav a:hover,
|
||
html:not(.dark) .nextra-nav-container nav ul a:hover {
|
||
color: var(--colorPrimary-light) !important;
|
||
}
|
||
|
||
/* Light mode code */
|
||
html:not(.dark) code:not(pre code) {
|
||
background-color: rgba(0, 0, 0, 0.05) !important;
|
||
border: none !important;
|
||
padding: 0.15em 0.4em;
|
||
font-size: 0.88em;
|
||
}
|
||
|
||
/* Light mode callouts */
|
||
html:not(.dark) .nextra-callout {
|
||
border: none;
|
||
border-left: 3px solid;
|
||
background: rgba(0, 0, 0, 0.02);
|
||
}
|
||
|
||
/* Light mode tables */
|
||
html:not(.dark) th {
|
||
font-family: var(--font-mono);
|
||
font-size: 0.75rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.08em;
|
||
color: var(--textMuted-light);
|
||
}
|
||
|
||
/* Light mode search */
|
||
html:not(.dark) .nextra-search input {
|
||
font-family: var(--font-mono);
|
||
font-size: 0.8rem;
|
||
border: 1px solid var(--border-light);
|
||
background-color: #FFFFFF !important;
|
||
}
|
||
|
||
html:not(.dark) .nextra-search input::placeholder {
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.08em;
|
||
font-size: 0.72rem;
|
||
}
|
||
|
||
/* Light mode h2 border */
|
||
html:not(.dark) h2 {
|
||
padding-bottom: 0.3em;
|
||
border-bottom: 1px solid var(--border-light);
|
||
}
|
||
|
||
/* Light mode landing page */
|
||
html:not(.dark) .landing-heading {
|
||
color: #1a1a1a !important;
|
||
}
|
||
|
||
html:not(.dark) .landing-card:hover {
|
||
background-color: rgba(0, 0, 0, 0.02) !important;
|
||
}
|
||
|
||
html:not(.dark) .landing-card {
|
||
border-color: var(--border-light) !important;
|
||
}
|