diff --git a/arise-source/config/main.css b/arise-source/config/main.css index adce72a..178bcae 100644 --- a/arise-source/config/main.css +++ b/arise-source/config/main.css @@ -1,179 +1,183 @@ -/*** Core page styles ***/ +/* =========================== + Thergic Cyber Markdown Theme + Expanded Neon Palette Edition + =========================== */ -/* Base styling */ +/*** Base colors ***/ +:root { + --bg-main: #121619; + --bg-surface: #1c2024; + --text-main: #cfd6cf; + --text-bright: #e6ffe8; + --accent-green: #65f85a; + --accent-teal: #3af8c2; + --accent-violet: #b86aff; + --border-dim: #2a2f33; +} + +/*** General layout ***/ body { - margin: 40px auto; - max-width: 650px; - line-height: 1.6; - font-size: 18px; - font-family: sans-serif; - color: #65f85a; - background-color: #121619; - padding: 0 10px; + background-color: var(--bg-main); + color: var(--text-main); + font-family: "Inter", "Segoe UI", sans-serif; + line-height: 1.65; + font-size: 18px; + margin: 40px auto; + max-width: 750px; + padding: 0 16px; } -/*** Post styling ***/ -img { - max-width: 100%; - max-height: 100%; - margin-top: 20px; - margin-bottom: 20px; - border-radius: 16px; - margin-left: auto; - margin-right: auto; - display: block; -} - -/* Inline code */ -code { - background-color: #293137; - border-radius: 8px; /* slightly smaller radius */ - padding: 2px 6px; /* much smaller padding */ - line-height: 1.4em; /* reasonable line height */ - color: #65f85a; - font-family: monospace !important; /* force monospace */ -} - -/* Pre background and alignment */ -pre.sourceCode { - background-color: #293137; - border-radius: 16px; - padding: 12px 16px; - overflow-x: auto; - line-height: 1.35em; /* keep tight but readable */ - font-family: monospace !important; /* force monospace */ - color: #65f85a; - white-space: pre; /* prevent text wrap issues */ -} -pre.sourceCode * { - font-family: monospace !important; /* enforce monospace inside spans */ -} - -/* Reset span backgrounds so lines don’t stack weirdly */ -pre.sourceCode span, -pre.sourceCode span a { - background: none !important; - display: inline; -} - -/* Syntax highlight colors */ -pre.sourceCode .co { color: #6ab04c; } /* comments */ -pre.sourceCode .kw { color: #eb4d4b; } /* keywords */ -pre.sourceCode .st { color: #f9ca24; } /* strings */ -pre.sourceCode .bu { color: #12CBC4; } /* built-ins */ -pre.sourceCode .fu { color: #ff7979; } /* function names */ -pre.sourceCode .va { color: #e056fd; } /* variables */ - -/* Standard pre for other purposes */ -pre { - overflow-x: auto; - white-space: pre-wrap; - white-space: -moz-pre-wrap; - white-space: -pre-wrap; - white-space: -o-pre-wrap; - word-wrap: break-word; -} - -blockquote { - border-left: 1px solid #65f85a; - display: block; - margin-top: 1em; - margin-bottom: 1em; - margin-left: 30px; - padding-left: 10px; - margin-right: 40px; - font-style: italic; - color: #46ab3e; -} - -hr { - color: #65f85a; - margin-left: auto; - margin-right: auto; - max-width: 300px; -} - -#endline { - color: #65f85a; - margin-left: auto; - margin-right: auto; - max-width: 300px; - margin-top: 80px; -} - -a { - color: #b8f1b4; - text-decoration: none; +/*** Headings ***/ +h1, h2, h3, h4, h5, h6 { + color: var(--accent-green); + font-weight: 700; + margin-top: 2.2em; + margin-bottom: 0.8em; + line-height: 1.25; + text-shadow: 0 0 6px rgba(101, 248, 90, 0.3); } h1 { - line-height: 1.2; + font-size: 2.2em; + letter-spacing: 1px; + border-bottom: 1px solid var(--accent-green); + padding-bottom: 0.4em; +} +h2 { font-size: 1.7em; } +h3 { font-size: 1.3em; color: var(--accent-teal); } + +/*** Paragraphs and lists ***/ +p, ul, ol { + margin: 0 0 1.2em 0; } -h2, h3 { - padding-top: 24px; - line-height: 1.2; +ul li, ol li { + margin: 0.25em 0; } -/* Inline dates */ -.date { - padding-bottom: 0; - margin-bottom: 0; - font-size: 14px; +hr { + border: none; + height: 1px; + background: linear-gradient( + 90deg, + transparent, + var(--accent-green), + transparent + ); + margin: 2.2em 0; + opacity: 0.6; } -@media screen and (max-width: 900px) { - .date { - text-align: right; - } +/*** Links ***/ +a { + color: var(--accent-teal); + text-decoration: none; + transition: color 0.25s ease, text-shadow 0.25s ease; } -@media screen and (min-width: 901px) { - .date { - float: right; - margin-left: 30px; - } +a:hover { + color: var(--accent-violet); + text-shadow: 0 0 8px var(--accent-violet); } -/*** Modular component styles ***/ - -/* Logo */ -.logo { - margin-bottom: 20px; - text-align: center; +/*** Code blocks ***/ +code, pre { + font-family: "JetBrains Mono", "Fira Code", monospace; + font-size: 0.95em; } -/* Navbar styling */ -.topbar { - padding-right: 10px; - border-top: 1px solid #65f85a; - border-bottom: 1px solid #65f85a; - margin-bottom: 20px; - text-align: center; -} -.topbar a { - color: #65f85a; - text-decoration: none; +code { + background: rgba(184, 106, 255, 0.08); + color: var(--accent-violet); + padding: 2px 5px; + border-radius: 4px; } -/* Footer styling */ -.footer { - border-top: 2px solid #65f85a; - font-size: 12px; - margin-top: 120px; - text-align: center; +pre { + background: var(--bg-surface); + padding: 1em; + border-radius: 8px; + overflow-x: auto; + margin: 1.5em 0; + border: 1px solid var(--border-dim); + box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.5); } -/*** Arise Index Style ***/ -.arise-toc-td { - border-width: 1px; - border-color: #65f85a; - border-top-style: solid; - text-align: center; - padding-right: 10px; - padding-bottom: 5px; +pre code { + background: none; + color: var(--text-bright); } -.arise-toc-th { - padding-bottom: 20px; - border-bottom: 1px; - border-bottom-style: solid; + +/*** Syntax highlighting (light-touch pseudo) ***/ +pre span.kw { color: var(--accent-teal); } +pre span.fn { color: var(--accent-violet); } +pre span.str { color: var(--accent-green); } +pre span.num { color: #f8cb3a; } + +/*** Blockquotes ***/ +blockquote { + border-left: 3px solid var(--accent-violet); + background: rgba(184, 106, 255, 0.05); + padding: 0.8em 1em; + margin: 1.8em 0; + font-style: italic; + color: var(--text-bright); + border-radius: 4px; +} + +/*** Tables ***/ +table { + width: 100%; + border-collapse: collapse; + margin: 2em 0; + font-size: 0.95em; +} +th, td { + border: 1px solid var(--border-dim); + padding: 0.6em 0.8em; +} +th { + background: rgba(101, 248, 90, 0.1); + color: var(--accent-green); + text-align: left; +} +tr:nth-child(even) td { + background: rgba(255, 255, 255, 0.02); +} +tr:hover td { + background: rgba(58, 248, 194, 0.05); +} + +/*** Misc elements ***/ +em { color: var(--accent-teal); } +strong { color: var(--accent-green); } +del { opacity: 0.6; } +sup { font-size: 0.7em; } + +img { + display: block; + max-width: 100%; + height: auto; + border-radius: 8px; + margin: 1.5em auto; + border: 1px solid var(--border-dim); +} + +/*** Footer ***/ +footer { + border-top: 1px solid var(--accent-green); + margin-top: 3em; + padding-top: 1em; + text-align: center; + font-size: 0.85em; + opacity: 0.8; +} + +/*** Transitions / Interactions ***/ +button, a, code, pre, table, blockquote { + transition: all 0.25s ease; +} + +/*** Glow hover for fun ***/ +pre:hover, blockquote:hover, table:hover { + box-shadow: 0 0 8px rgba(101, 248, 90, 0.25); }