Revert wiki theme CSS to previous version

This commit is contained in:
Jennie Robinson Faber 2026-03-29 21:30:58 +01:00
parent b4bd938ac3
commit c22dd91556
3 changed files with 351 additions and 350 deletions

View file

@ -1,369 +1,61 @@
/*
* Ghost Guild Outline Wiki Theme
* Ghost Guild Outline Wiki Custom Theme
*
* Injected via nginx sub_filter into every Outline page.
* Served from /custom/ghost-guild.css.
*
* Fonts: Brygada 1918 + Commit Mono via Google Fonts.
*
* NOTE: Outline's internal class names and DOM structure may change between
* versions. After upgrading Outline, verify these selectors still work.
*/
@import url('https://fonts.googleapis.com/css2?family=Brygada+1918:ital,wght@0,400..700;1,400..700&family=Commit+Mono&display=swap');
/* ============================================================
TOKENS
============================================================ */
/* ---------------------------------------------------------------------------
Brand color overrides
--------------------------------------------------------------------------- */
:root {
/* Ground */
--gg-bg: #131210;
--gg-surface: #1a1815;
--gg-bg-hover: #222220;
--gg-border: #2a2520;
/* Candlelight */
--gg-candle: #d4a03a;
--gg-candle-bright: #e8b44c;
--gg-candle-dim: #8a6628;
--gg-candle-faint: #5c4520;
/* Text */
--gg-text-bright: #d0c8b0;
--gg-text: #a89880;
--gg-text-dim: #605848;
--gg-text-faint: #3a3228;
/* Warm accent */
--gg-ember: #b26840;
/* Parchment (for light-bg contexts if needed) */
--gg-parch: #ede4d0;
--gg-parch-text: #2a2015;
--gg-parch-body: #4a3f30;
/* Circles */
--gg-community: #a07060;
--gg-founder: #b26840;
--gg-practitioner: #4a6670;
/* Typography */
--gg-font-display: 'Brygada 1918', Georgia, serif;
--gg-font-body: 'Commit Mono', 'SF Mono', 'Consolas', monospace;
--ghost-guild-primary: #2563eb;
--ghost-guild-bg: #fafafa;
--ghost-guild-text: #1a1a2e;
}
/* ---------------------------------------------------------------------------
Hide Outline branding
--------------------------------------------------------------------------- */
/* ============================================================
GLOBAL OVERRIDES
============================================================ */
body {
font-family: var(--gg-font-body) !important;
font-size: 14px;
line-height: 1.65;
background: var(--gg-bg) !important;
color: var(--gg-text) !important;
-webkit-font-smoothing: antialiased;
/* "Built with Outline" footer link */
a[href="https://www.getoutline.com"] {
display: none !important;
}
/* ============================================================
SIDEBAR
============================================================ */
/* Outline's sidebar */
[class*="Sidebar"] {
background: var(--gg-bg) !important;
border-right: 1px dashed var(--gg-border) !important;
/* Outline logo in sidebar */
[data-testid="sidebar-logo"],
a[href="/"] > svg {
/* Replace with Ghost Guild logo via background-image if desired:
background-image: url(/custom/logo.svg);
background-size: contain;
background-repeat: no-repeat;
*/
}
/* Sidebar links */
[class*="SidebarLink"],
[class*="sidebar"] a {
font-family: var(--gg-font-body) !important;
font-size: 13px !important;
color: var(--gg-text-dim) !important;
/* ---------------------------------------------------------------------------
Typography
--------------------------------------------------------------------------- */
/* Placeholder: uncomment and update with Ghost Guild fonts
@font-face {
font-family: "GhostGuild";
src: url("/custom/fonts/ghost-guild.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
[class*="SidebarLink"]:hover,
[class*="sidebar"] a:hover {
color: var(--gg-text) !important;
background: var(--gg-surface) !important;
}
/* ============================================================
DOCUMENT / ARTICLE CONTENT
============================================================ */
/* Main content area */
[class*="Document"],
[class*="Editor"],
.ProseMirror {
font-family: var(--gg-font-body) !important;
font-size: 14px !important;
line-height: 1.7 !important;
color: var(--gg-text) !important;
}
/* Headings */
h1, .ProseMirror h1 {
font-family: var(--gg-font-display) !important;
font-size: 32px !important;
font-weight: 600 !important;
color: var(--gg-text-bright) !important;
line-height: 1.2 !important;
letter-spacing: -0.01em !important;
margin-bottom: 16px !important;
}
h2, .ProseMirror h2 {
font-family: var(--gg-font-display) !important;
font-size: 24px !important;
font-weight: 500 !important;
color: var(--gg-text-bright) !important;
line-height: 1.25 !important;
margin-top: 40px !important;
margin-bottom: 12px !important;
padding-bottom: 8px !important;
border-bottom: 1px dashed var(--gg-border) !important;
}
h3, .ProseMirror h3 {
font-family: var(--gg-font-display) !important;
font-size: 18px !important;
font-weight: 500 !important;
color: var(--gg-text-bright) !important;
line-height: 1.3 !important;
margin-top: 32px !important;
margin-bottom: 8px !important;
}
h4, h5, h6,
.ProseMirror h4,
.ProseMirror h5,
.ProseMirror h6 {
font-family: var(--gg-font-body) !important;
font-size: 14px !important;
color: var(--gg-text-bright) !important;
text-transform: uppercase;
letter-spacing: 0.08em;
margin-top: 28px !important;
margin-bottom: 8px !important;
}
/* Paragraphs */
p, .ProseMirror p {
color: var(--gg-text) !important;
margin-bottom: 14px !important;
}
/* Strong / Bold */
strong, b {
color: var(--gg-text-bright) !important;
font-weight: 600;
}
/* Italic */
em, i {
font-family: var(--gg-font-display) !important;
font-style: italic;
color: var(--gg-text) !important;
}
/* Links */
a, .ProseMirror a {
color: var(--gg-candle) !important;
text-decoration: none !important;
}
a:hover, .ProseMirror a:hover {
text-decoration: underline !important;
}
/* ============================================================
LISTS
============================================================ */
ul, ol, .ProseMirror ul, .ProseMirror ol {
color: var(--gg-text) !important;
padding-left: 20px !important;
}
li, .ProseMirror li {
margin-bottom: 4px !important;
}
li::marker {
color: var(--gg-text-faint) !important;
}
/* ============================================================
CODE
============================================================ */
code, .ProseMirror code {
font-family: var(--gg-font-body) !important;
font-size: 13px !important;
background: var(--gg-surface) !important;
color: var(--gg-candle-dim) !important;
padding: 2px 6px !important;
border: 1px solid var(--gg-border) !important;
}
pre, .ProseMirror pre {
font-family: var(--gg-font-body) !important;
font-size: 13px !important;
background: var(--gg-surface) !important;
color: var(--gg-text) !important;
padding: 20px !important;
border: 1px dashed var(--gg-border) !important;
overflow-x: auto;
}
pre code, .ProseMirror pre code {
background: none !important;
border: none !important;
padding: 0 !important;
}
/* ============================================================
BLOCKQUOTES
============================================================ */
blockquote, .ProseMirror blockquote {
border-left: 3px solid var(--gg-candle-dim) !important;
padding: 12px 20px !important;
margin: 20px 0 !important;
color: var(--gg-text-dim) !important;
font-family: var(--gg-font-display) !important;
font-style: italic !important;
font-size: 16px !important;
line-height: 1.55 !important;
background: none !important;
}
/* ============================================================
TABLES
============================================================ */
table, .ProseMirror table {
border-collapse: collapse !important;
width: 100% !important;
font-size: 13px !important;
}
th, .ProseMirror th {
font-size: 10px !important;
letter-spacing: 0.1em !important;
text-transform: uppercase !important;
color: var(--gg-text-faint) !important;
border-bottom: 1px dashed var(--gg-border) !important;
padding: 8px 12px !important;
text-align: left !important;
}
td, .ProseMirror td {
color: var(--gg-text) !important;
border-bottom: 1px dashed var(--gg-border) !important;
padding: 8px 12px !important;
}
tr:hover td {
background: var(--gg-surface) !important;
}
/* ============================================================
HORIZONTAL RULES
============================================================ */
hr, .ProseMirror hr {
border: none !important;
border-top: 1px dashed var(--gg-border) !important;
margin: 32px 0 !important;
}
/* ============================================================
IMAGES
============================================================ */
img {
border: 1px dashed var(--gg-border) !important;
padding: 4px !important;
}
/* ============================================================
BUTTONS & UI (Outline-specific)
============================================================ */
button[class*="Button"] {
font-family: var(--gg-font-body) !important;
border-radius: 0 !important;
}
/* Primary button overrides */
button[class*="Button"][class*="primary"],
button[class*="Button"][class*="Primary"] {
background: var(--gg-candle) !important;
color: var(--gg-bg) !important;
border: none !important;
}
/* Search input */
input[type="search"],
input[type="text"],
input[class*="Search"] {
font-family: var(--gg-font-body) !important;
background: var(--gg-surface) !important;
color: var(--gg-text) !important;
border: 1px dashed var(--gg-border) !important;
border-radius: 0 !important;
}
/* ============================================================
DOCUMENT TITLE
============================================================ */
[class*="Title"] h1,
[class*="DocumentTitle"],
[class*="title"] input {
font-family: var(--gg-font-display) !important;
font-weight: 600 !important;
color: var(--gg-text-bright) !important;
}
/* ============================================================
SCROLLBAR (dark, subtle)
============================================================ */
::-webkit-scrollbar {
width: 6px;
height: 6px;
}
::-webkit-scrollbar-track {
background: var(--gg-bg);
}
::-webkit-scrollbar-thumb {
background: var(--gg-border);
}
::-webkit-scrollbar-thumb:hover {
background: var(--gg-text-faint);
}
/* ============================================================
SELECTION
============================================================ */
::selection {
background: rgba(212, 160, 58, 0.2);
color: var(--gg-text-bright);
*/
/* ---------------------------------------------------------------------------
Layout adjustments
--------------------------------------------------------------------------- */
/* Widen the document area slightly */
.document-editor,
[class*="DocumentEditor"] {
max-width: 48rem;
}