From ca56a2618dd306855a4ede4dbcc389d4c714cccd Mon Sep 17 00:00:00 2001 From: Pinapelz Date: Mon, 27 Oct 2025 23:10:35 -0700 Subject: add metadata section for controlling title --- src/main.cpp | 2 +- src/markdown_translator.cpp | 49 +++- src/markdown_translator.h | 8 +- styles/carbon.css | 646 +++++++++++++++++++++++++++++++++++++++++++ styles/ffxiv-style.css | 649 -------------------------------------------- 5 files changed, 690 insertions(+), 664 deletions(-) create mode 100644 styles/carbon.css delete mode 100644 styles/ffxiv-style.css diff --git a/src/main.cpp b/src/main.cpp index caee08c..85433fe 100644 --- a/src/main.cpp +++ b/src/main.cpp @@ -69,7 +69,7 @@ int main(int argc, char* argv[]) { cssPath = params["-css"]; } - std::string htmlOutput = translator.translate(markdownContent, cssPath, "XIV Lore"); + std::string htmlOutput = translator.translate(markdownContent, cssPath); // Write to output file std::string outputFile = params["-o"]; diff --git a/src/markdown_translator.cpp b/src/markdown_translator.cpp index d362f82..42b8ce5 100644 --- a/src/markdown_translator.cpp +++ b/src/markdown_translator.cpp @@ -3,13 +3,29 @@ #include #include -MarkdownTranslator::MarkdownTranslator(){ +MarkdownTranslator::MarkdownTranslator() : title("Carbon") { + } MarkdownTranslator::~MarkdownTranslator() { } -std::string MarkdownTranslator::translate(const std::string& markdownContent, const std::string& cssPath, const std::string& title) { +void MarkdownTranslator::processMetadata(const std::vector& lines){ + // format of keys -> key: value + for(std::string currentLine : lines){ + size_t colonPos = currentLine.find(':'); + if (colonPos != std::string::npos) { + std::string key = currentLine.substr(0, colonPos); + std::string value = currentLine.substr(colonPos + 1); + value.erase(0, value.find_first_not_of(" \t")); + if (key == "title") { + title = value; + } + } + } +} + +std::string MarkdownTranslator::translate(const std::string& markdownContent, const std::string& cssPath) { std::stringstream htmlOutput; std::stringstream markdownStream(markdownContent); std::string line; @@ -17,6 +33,23 @@ std::string MarkdownTranslator::translate(const std::string& markdownContent, co std::string currentLine; + bool metadataExists{false}; + std::vector metadataLines; + while (std::getline(markdownStream, currentLine)) { + if(currentLine == "---"){ + if(metadataExists){ + break; + } else { + metadataExists = true; + continue; + } + } + if(!metadataExists){ + break; + } + metadataLines.push_back(currentLine); + } + processMetadata(metadataLines); while (std::getline(markdownStream, currentLine)) { std::regex headerRegex("^(#{1,3})\\s+(.*)$"); @@ -30,7 +63,6 @@ std::string MarkdownTranslator::translate(const std::string& markdownContent, co } } - // Reset the stream to start over markdownStream.clear(); markdownStream.str(markdownContent); @@ -46,7 +78,7 @@ std::string MarkdownTranslator::translate(const std::string& markdownContent, co htmlOutput << "\n"; // Add navigation sidebar - generateSideBar(htmlOutput, headers, title); + generateSideBar(htmlOutput, headers); // Main content container htmlOutput << "
\n"; @@ -90,7 +122,7 @@ std::string MarkdownTranslator::translate(const std::string& markdownContent, co return htmlOutput.str(); } -void MarkdownTranslator::generateSideBar(std::stringstream& output, const std::vector& headers, const std::string& title) { +void MarkdownTranslator::generateSideBar(std::stringstream& output, const std::vector& headers) { output << "
\n"; output << "
\n"; output << "

" + title + "

\n"; @@ -161,17 +193,11 @@ std::string MarkdownTranslator::getCurrentDateTime() { std::string MarkdownTranslator::processLine(const std::string& line) { std::string processed = line; - - // Check for headers first (they start at beginning of line) processed = processHeaders(processed); - - // If it wasn't a header, process inline elements if (processed == line) { processed = processBold(processed); processed = processItalic(processed); processed = processLinks(processed); - - // Wrap in paragraph tags if it's regular text if (!processed.empty() && processed[0] != '<') { processed = processParagraph(processed); } @@ -232,7 +258,6 @@ std::string MarkdownTranslator::processSingleFigure(const std::string& text) { std::string alt = matches[1].str(); std::string src = matches[2].str(); std::string title = matches.size() > 4 && matches[4].matched ? " title=\"" + matches[4].str() + "\"" : ""; - // Create the HTML for the image return "\"""; } return text; diff --git a/src/markdown_translator.h b/src/markdown_translator.h index 6d24ac7..6c0c1bc 100644 --- a/src/markdown_translator.h +++ b/src/markdown_translator.h @@ -13,11 +13,12 @@ public: // Destructor ~MarkdownTranslator(); // Main translation function - takes markdown content and returns HTML - std::string translate(const std::string& markdownContent, const std::string& cssPath = "styles/ffxiv-style.css", const std::string& title = "Title"); + std::string translate(const std::string& markdownContent, const std::string& cssPath = "styles/carbon.css"); std::string processLine(const std::string& line); private: // Helper functions for different markdown elements + void processMetadata(const std::vector& lines); std::string processHeaders(const std::string& line); std::string processBold(const std::string& text); std::string processItalic(const std::string& text); @@ -26,10 +27,13 @@ private: std::string processSingleFigure(const std::string& text); std::string processFigureBlock(const std::vector& lines); // Navigation and table of contents - void generateSideBar(std::stringstream& output, const std::vector& headers, const std::string& title); + void generateSideBar(std::stringstream& output, const std::vector& headers); std::string createAnchorId(const std::string& text); // Utility functions std::string getCurrentDateTime(); + + // Member variables + std::string title; }; #endif // MARKDOWN_TRANSLATOR_H diff --git a/styles/carbon.css b/styles/carbon.css new file mode 100644 index 0000000..a6b6228 --- /dev/null +++ b/styles/carbon.css @@ -0,0 +1,646 @@ +/*Carbon themed CSS*/ +:root { + --primary-bg: #1a1a1a; + --secondary-bg: #252525; + --tertiary-bg: #2d2d2d; + --accent-gold: #c9aa71; + --accent-blue: #5b8fc7; + --text-primary: #e2e2e2; + --text-secondary: #b8b8b8; + --text-dim: #888888; + --border-color: #3a3a3a; + --link-color: #7db8e8; + --link-hover: #a5d0f0; + --header-gradient-start: #2a2a2a; + --header-gradient-end: #1a1a1a; + --code-bg: #0d0d0d; + --nav-bg: #1f1f1f; + --nav-hover: #333333; +} + +/* Reset and base styles */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: "Meiryo", "Segoe UI", "Helvetica Neue", Arial, sans-serif; + background-color: var(--primary-bg); + color: var(--text-primary); + line-height: 1.7; + min-height: 100vh; + display: flex; + background-image: repeating-linear-gradient( + 45deg, + transparent, + transparent 10px, + rgba(255, 255, 255, 0.01) 10px, + rgba(255, 255, 255, 0.01) 20px + ); +} + +/* Navigation sidebar */ +.nav-sidebar { + width: 250px; + background-color: var(--nav-bg); + border-right: 1px solid var(--border-color); + height: 100vh; + position: fixed; + overflow-y: auto; + padding: 20px 0; + box-shadow: 2px 0 10px rgba(0, 0, 0, 0.2); +} + +.nav-logo { + padding: 15px 20px; + margin-bottom: 20px; + border-bottom: 1px solid var(--border-color); + text-align: center; +} + +.nav-logo h3 { + color: var(--accent-gold); + font-size: 1.2em; + margin: 0; +} + +.nav-menu { + list-style-type: none; + padding: 0; + margin: 0; +} + +.nav-menu li { + margin: 0; +} + +.nav-menu a { + display: block; + padding: 10px 20px; + color: var(--text-secondary); + text-decoration: none; + border-left: 3px solid transparent; + transition: all 0.3s ease; +} + +.nav-menu a:hover { + background-color: var(--nav-hover); + color: var(--accent-gold); + border-left-color: var(--accent-gold); + text-shadow: none; +} + +.nav-menu a::after { + display: none; +} + +.nav-menu h4 { + padding: 15px 20px 5px; + color: var(--accent-gold); + font-size: 1em; + text-transform: uppercase; + letter-spacing: 1px; +} + +.nav-submenu { + list-style-type: none; + padding-left: 15px; +} + +/* Main content */ +.main-content { + flex: 1; + margin-left: 250px; + width: calc(100% - 250px); +} + +/* Container */ +.container { + max-width: 1200px; + margin: 0 auto; + padding: 40px 20px; + background-color: rgba(26, 26, 26, 0.95); + min-height: 100vh; + box-shadow: 0 0 50px rgba(0, 0, 0, 0.5); +} + +/* Headers with FFXIV styling */ +h1, +h2, +h3, +h4, +h5, +h6 { + font-family: "Jupiter Pro", "Cinzel", "Georgia", serif; + color: var(--accent-gold); + margin-top: 1.5em; + margin-bottom: 0.8em; + font-weight: 500; + letter-spacing: 0.5px; + position: relative; + text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); +} + +h1 { + font-size: 2.2em; + padding-bottom: 0.5em; + border-bottom: 3px solid var(--accent-gold); + background: linear-gradient(90deg, var(--accent-gold), transparent 70%); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + text-shadow: none; + margin-top: 0.5em; +} + +h1::after { + content: ""; + display: block; + position: absolute; + bottom: -3px; + left: 0; + width: 100%; + height: 3px; + background: linear-gradient(90deg, var(--accent-gold), transparent 70%); +} + +h2 { + font-size: 1.8em; + color: var(--accent-blue); + padding-left: 15px; + border-left: 4px solid var(--accent-blue); + margin-left: -15px; +} + +h3 { + font-size: 1.4em; + color: var(--text-primary); +} + +h4 { + font-size: 1.2em; + color: var(--text-secondary); +} + +h5, +h6 { + font-size: 1.1em; + color: var(--text-secondary); +} + +/* Paragraphs and text */ +p { + margin-bottom: 1.2em; + color: var(--text-secondary); + text-align: left; +} + +/* Links with FFXIV styling */ +a { + color: var(--link-color); + text-decoration: none; + position: relative; + transition: color 0.3s ease; + font-weight: 500; +} + +a:hover { + color: var(--link-hover); + text-shadow: 0 0 10px rgba(125, 184, 232, 0.5); +} + +a::after { + content: ""; + position: absolute; + bottom: -2px; + left: 0; + width: 0; + height: 1px; + background-color: var(--link-hover); + transition: width 0.3s ease; +} + +a:hover::after { + width: 100%; +} + +/* Bold and Italic */ +strong, +b { + color: var(--accent-gold); + font-weight: 600; +} + +em, +i { + color: var(--text-primary); + font-style: italic; +} + +/* Lists with FFXIV styling */ +ul, +ol { + margin-left: 30px; + margin-bottom: 1.2em; +} + +li { + margin-bottom: 0.5em; + color: var(--text-secondary); +} + +ul li::marker { + color: var(--accent-gold); +} + +ol li::marker { + color: var(--accent-blue); + font-weight: bold; +} + +/* Code blocks with FFXIV terminal style */ +pre { + background-color: var(--code-bg); + border: 1px solid var(--border-color); + border-left: 4px solid var(--accent-blue); + padding: 15px; + margin: 1.5em 0; + overflow-x: auto; + font-family: "Consolas", "Monaco", monospace; + font-size: 0.9em; + line-height: 1.5; + box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.5); +} + +code { + background-color: var(--code-bg); + color: var(--accent-blue); + padding: 3px 6px; + border-radius: 3px; + font-family: "Consolas", "Monaco", monospace; + font-size: 0.9em; + border: 1px solid var(--border-color); +} + +pre code { + background-color: transparent; + color: var(--text-primary); + padding: 0; + border: none; +} + +/* Blockquotes with FFXIV quest text styling */ +blockquote { + border-left: 4px solid var(--accent-gold); + background: linear-gradient(90deg, rgba(201, 170, 113, 0.1), transparent); + padding: 15px 20px; + margin: 1.5em 0; + font-style: italic; + color: var(--text-secondary); + position: relative; +} + +blockquote::before { + content: '"'; + font-size: 3em; + color: var(--accent-gold); + opacity: 0.3; + position: absolute; + top: -10px; + left: 10px; +} + +/* Tables with FFXIV UI styling */ +table { + width: 100%; + border-collapse: separate; + border-spacing: 0; + margin: 1.5em 0; + background-color: var(--secondary-bg); + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); +} + +thead { + background: linear-gradient( + 180deg, + var(--tertiary-bg), + var(--secondary-bg) + ); +} + +th { + padding: 12px 15px; + text-align: left; + color: var(--accent-gold); + font-weight: 600; + border-bottom: 2px solid var(--accent-gold); + text-transform: uppercase; + font-size: 0.9em; + letter-spacing: 1px; +} + +td { + padding: 10px 15px; + color: var(--text-secondary); + border-bottom: 1px solid var(--border-color); +} + +tr:hover td { + background-color: rgba(201, 170, 113, 0.05); +} + +/* Horizontal rules with FFXIV ornamental style */ +hr { + border: none; + height: 2px; + background: linear-gradient( + 90deg, + transparent, + var(--accent-gold) 20%, + var(--accent-gold) 50%, + var(--accent-gold) 80%, + transparent + ); + margin: 2em 0; + position: relative; +} + +hr::before { + content: "◆"; + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + background-color: var(--primary-bg); + color: var(--accent-gold); + padding: 0 10px; + font-size: 1.2em; +} + +/* Images */ +img { + max-width: 100%; + height: auto; + display: block; + margin: 1.5em auto; + border: 2px solid var(--border-color); + box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5); +} + +/* Wiki-style additional elements */ +.wiki-infobox { + float: right; + width: 300px; + margin: 0 0 20px 20px; + background-color: var(--secondary-bg); + border: 1px solid var(--border-color); + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); +} + +.wiki-infobox-header { + background-color: var(--tertiary-bg); + color: var(--accent-gold); + padding: 10px 15px; + text-align: center; + font-weight: bold; + border-bottom: 1px solid var(--border-color); +} + +.wiki-infobox-content { + padding: 15px; +} + +.wiki-infobox-row { + display: flex; + margin-bottom: 10px; +} + +.wiki-infobox-label { + flex: 1; + font-weight: bold; + color: var(--accent-blue); +} + +.wiki-infobox-value { + flex: 2; + color: var(--text-secondary); +} + +/* Article meta information */ +.article-meta { + border-top: 1px solid var(--border-color); + margin-top: 40px; + padding-top: 20px; + font-size: 0.9em; + color: var(--text-dim); +} + +.article-categories { + margin-top: 10px; +} + +.article-category { + display: inline-block; + background-color: var(--tertiary-bg); + color: var(--accent-gold); + padding: 3px 10px; + margin-right: 5px; + margin-bottom: 5px; + border-radius: 3px; + font-size: 0.85em; +} + +/* Scrollbar styling */ +::-webkit-scrollbar { + width: 12px; + height: 12px; +} + +::-webkit-scrollbar-track { + background: var(--secondary-bg); + border: 1px solid var(--border-color); +} + +::-webkit-scrollbar-thumb { + background: var(--accent-gold); + border: 1px solid var(--border-color); +} + +::-webkit-scrollbar-thumb:hover { + background: var(--accent-blue); +} + +/* Selection styling */ +::selection { + background-color: rgba(201, 170, 113, 0.3); + color: var(--text-primary); +} + +::-moz-selection { + background-color: rgba(201, 170, 113, 0.3); + color: var(--text-primary); +} + +/* Custom Figure styling */ +.custom-figure { + margin: 2.5rem auto; + padding: 1.5rem; + background-color: var(--secondary-bg); + border: 1px solid var(--border-color); + border-radius: 5px; + box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4); + position: relative; + overflow: hidden; + max-width: 95%; +} + +/* Image gallery layout for multiple images */ +.custom-figure .image-gallery { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + grid-gap: 1rem; + margin-bottom: 1.5rem; +} + +/* Single image in figure */ +.custom-figure img { + margin: 0 auto 1rem; + border: 1px solid var(--border-color); + box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3); + transition: + transform 0.3s ease, + box-shadow 0.3s ease; + max-height: 500px; + width: auto; +} + +/* Hover effect for images */ +.custom-figure img:hover { + transform: scale(1.02); + box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); + border-color: var(--accent-gold); +} + +/* Image titles (from title attribute) */ +.custom-figure .image-title { + display: block; + text-align: center; + font-style: italic; + color: var(--accent-gold); + font-size: 0.9em; + margin-top: 0.5rem; + margin-bottom: 1rem; +} + +/* Caption styling */ +.custom-figure figcaption { + font-family: "Jupiter Pro", "Cinzel", "Georgia", serif; + text-align: center; + color: var(--text-primary); + font-size: 1.1em; + padding: 0.8rem 0; + border-top: 1px solid rgba(201, 170, 113, 0.3); + margin-top: 0.5rem; + position: relative; +} + +/* Special styling for captions to match FFXIV aesthetic */ +.custom-figure figcaption::before { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 4px; + background: linear-gradient(90deg, var(--accent-gold), var(--accent-blue)); +} + +/* Responsive design */ +@media (max-width: 1200px) { + .container { + max-width: 100%; + } +} + +@media (max-width: 992px) { + .nav-sidebar { + width: 200px; + } + + .main-content { + margin-left: 200px; + width: calc(100% - 200px); + } +} + +@media (max-width: 768px) { + body { + flex-direction: column; + } + + .nav-sidebar { + width: 100%; + height: auto; + position: relative; + border-right: none; + border-bottom: 1px solid var(--border-color); + } + + .main-content { + margin-left: 0; + width: 100%; + } + + .container { + padding: 20px 15px; + } + + .wiki-infobox { + float: none; + width: 100%; + margin: 1.5em 0; + } + + h1 { + font-size: 2em; + } + + h2 { + font-size: 1.6em; + } + + h3 { + font-size: 1.3em; + } +} + +/* Animation for page load */ +@keyframes fadeIn { + from { + opacity: 0; + transform: translateY(20px); + } + to { + opacity: 1; + transform: translateY(0); + } + + .custom-figure { + padding: 1rem; + margin: 2rem auto; + } + + .custom-figure .image-gallery { + grid-template-columns: 1fr; + } + + .custom-figure img { + max-height: 350px; + } +} + +.main-content > * { + animation: fadeIn 0.6s ease-out; +} diff --git a/styles/ffxiv-style.css b/styles/ffxiv-style.css deleted file mode 100644 index 2b1c0e9..0000000 --- a/styles/ffxiv-style.css +++ /dev/null @@ -1,649 +0,0 @@ -/* FFXIV Wiki-inspired CSS */ -/* Base typography and colors inspired by the Lodestone and Wiki style */ - -:root { - /* Color palette inspired by FFXIV UI */ - --primary-bg: #1a1a1a; - --secondary-bg: #252525; - --tertiary-bg: #2d2d2d; - --accent-gold: #c9aa71; - --accent-blue: #5b8fc7; - --text-primary: #e2e2e2; - --text-secondary: #b8b8b8; - --text-dim: #888888; - --border-color: #3a3a3a; - --link-color: #7db8e8; - --link-hover: #a5d0f0; - --header-gradient-start: #2a2a2a; - --header-gradient-end: #1a1a1a; - --code-bg: #0d0d0d; - --nav-bg: #1f1f1f; - --nav-hover: #333333; -} - -/* Reset and base styles */ -* { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -body { - font-family: "Meiryo", "Segoe UI", "Helvetica Neue", Arial, sans-serif; - background-color: var(--primary-bg); - color: var(--text-primary); - line-height: 1.7; - min-height: 100vh; - display: flex; - background-image: repeating-linear-gradient( - 45deg, - transparent, - transparent 10px, - rgba(255, 255, 255, 0.01) 10px, - rgba(255, 255, 255, 0.01) 20px - ); -} - -/* Navigation sidebar */ -.nav-sidebar { - width: 250px; - background-color: var(--nav-bg); - border-right: 1px solid var(--border-color); - height: 100vh; - position: fixed; - overflow-y: auto; - padding: 20px 0; - box-shadow: 2px 0 10px rgba(0, 0, 0, 0.2); -} - -.nav-logo { - padding: 15px 20px; - margin-bottom: 20px; - border-bottom: 1px solid var(--border-color); - text-align: center; -} - -.nav-logo h3 { - color: var(--accent-gold); - font-size: 1.2em; - margin: 0; -} - -.nav-menu { - list-style-type: none; - padding: 0; - margin: 0; -} - -.nav-menu li { - margin: 0; -} - -.nav-menu a { - display: block; - padding: 10px 20px; - color: var(--text-secondary); - text-decoration: none; - border-left: 3px solid transparent; - transition: all 0.3s ease; -} - -.nav-menu a:hover { - background-color: var(--nav-hover); - color: var(--accent-gold); - border-left-color: var(--accent-gold); - text-shadow: none; -} - -.nav-menu a::after { - display: none; -} - -.nav-menu h4 { - padding: 15px 20px 5px; - color: var(--accent-gold); - font-size: 1em; - text-transform: uppercase; - letter-spacing: 1px; -} - -.nav-submenu { - list-style-type: none; - padding-left: 15px; -} - -/* Main content */ -.main-content { - flex: 1; - margin-left: 250px; - width: calc(100% - 250px); -} - -/* Container */ -.container { - max-width: 1200px; - margin: 0 auto; - padding: 40px 20px; - background-color: rgba(26, 26, 26, 0.95); - min-height: 100vh; - box-shadow: 0 0 50px rgba(0, 0, 0, 0.5); -} - -/* Headers with FFXIV styling */ -h1, -h2, -h3, -h4, -h5, -h6 { - font-family: "Jupiter Pro", "Cinzel", "Georgia", serif; - color: var(--accent-gold); - margin-top: 1.5em; - margin-bottom: 0.8em; - font-weight: 500; - letter-spacing: 0.5px; - position: relative; - text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); -} - -h1 { - font-size: 2.2em; - padding-bottom: 0.5em; - border-bottom: 3px solid var(--accent-gold); - background: linear-gradient(90deg, var(--accent-gold), transparent 70%); - background-clip: text; - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - text-shadow: none; - margin-top: 0.5em; -} - -h1::after { - content: ""; - display: block; - position: absolute; - bottom: -3px; - left: 0; - width: 100%; - height: 3px; - background: linear-gradient(90deg, var(--accent-gold), transparent 70%); -} - -h2 { - font-size: 1.8em; - color: var(--accent-blue); - padding-left: 15px; - border-left: 4px solid var(--accent-blue); - margin-left: -15px; -} - -h3 { - font-size: 1.4em; - color: var(--text-primary); -} - -h4 { - font-size: 1.2em; - color: var(--text-secondary); -} - -h5, -h6 { - font-size: 1.1em; - color: var(--text-secondary); -} - -/* Paragraphs and text */ -p { - margin-bottom: 1.2em; - color: var(--text-secondary); - text-align: left; -} - -/* Links with FFXIV styling */ -a { - color: var(--link-color); - text-decoration: none; - position: relative; - transition: color 0.3s ease; - font-weight: 500; -} - -a:hover { - color: var(--link-hover); - text-shadow: 0 0 10px rgba(125, 184, 232, 0.5); -} - -a::after { - content: ""; - position: absolute; - bottom: -2px; - left: 0; - width: 0; - height: 1px; - background-color: var(--link-hover); - transition: width 0.3s ease; -} - -a:hover::after { - width: 100%; -} - -/* Bold and Italic */ -strong, -b { - color: var(--accent-gold); - font-weight: 600; -} - -em, -i { - color: var(--text-primary); - font-style: italic; -} - -/* Lists with FFXIV styling */ -ul, -ol { - margin-left: 30px; - margin-bottom: 1.2em; -} - -li { - margin-bottom: 0.5em; - color: var(--text-secondary); -} - -ul li::marker { - color: var(--accent-gold); -} - -ol li::marker { - color: var(--accent-blue); - font-weight: bold; -} - -/* Code blocks with FFXIV terminal style */ -pre { - background-color: var(--code-bg); - border: 1px solid var(--border-color); - border-left: 4px solid var(--accent-blue); - padding: 15px; - margin: 1.5em 0; - overflow-x: auto; - font-family: "Consolas", "Monaco", monospace; - font-size: 0.9em; - line-height: 1.5; - box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.5); -} - -code { - background-color: var(--code-bg); - color: var(--accent-blue); - padding: 3px 6px; - border-radius: 3px; - font-family: "Consolas", "Monaco", monospace; - font-size: 0.9em; - border: 1px solid var(--border-color); -} - -pre code { - background-color: transparent; - color: var(--text-primary); - padding: 0; - border: none; -} - -/* Blockquotes with FFXIV quest text styling */ -blockquote { - border-left: 4px solid var(--accent-gold); - background: linear-gradient(90deg, rgba(201, 170, 113, 0.1), transparent); - padding: 15px 20px; - margin: 1.5em 0; - font-style: italic; - color: var(--text-secondary); - position: relative; -} - -blockquote::before { - content: '"'; - font-size: 3em; - color: var(--accent-gold); - opacity: 0.3; - position: absolute; - top: -10px; - left: 10px; -} - -/* Tables with FFXIV UI styling */ -table { - width: 100%; - border-collapse: separate; - border-spacing: 0; - margin: 1.5em 0; - background-color: var(--secondary-bg); - box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); -} - -thead { - background: linear-gradient( - 180deg, - var(--tertiary-bg), - var(--secondary-bg) - ); -} - -th { - padding: 12px 15px; - text-align: left; - color: var(--accent-gold); - font-weight: 600; - border-bottom: 2px solid var(--accent-gold); - text-transform: uppercase; - font-size: 0.9em; - letter-spacing: 1px; -} - -td { - padding: 10px 15px; - color: var(--text-secondary); - border-bottom: 1px solid var(--border-color); -} - -tr:hover td { - background-color: rgba(201, 170, 113, 0.05); -} - -/* Horizontal rules with FFXIV ornamental style */ -hr { - border: none; - height: 2px; - background: linear-gradient( - 90deg, - transparent, - var(--accent-gold) 20%, - var(--accent-gold) 50%, - var(--accent-gold) 80%, - transparent - ); - margin: 2em 0; - position: relative; -} - -hr::before { - content: "◆"; - position: absolute; - left: 50%; - top: 50%; - transform: translate(-50%, -50%); - background-color: var(--primary-bg); - color: var(--accent-gold); - padding: 0 10px; - font-size: 1.2em; -} - -/* Images */ -img { - max-width: 100%; - height: auto; - display: block; - margin: 1.5em auto; - border: 2px solid var(--border-color); - box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5); -} - -/* Wiki-style additional elements */ -.wiki-infobox { - float: right; - width: 300px; - margin: 0 0 20px 20px; - background-color: var(--secondary-bg); - border: 1px solid var(--border-color); - box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); -} - -.wiki-infobox-header { - background-color: var(--tertiary-bg); - color: var(--accent-gold); - padding: 10px 15px; - text-align: center; - font-weight: bold; - border-bottom: 1px solid var(--border-color); -} - -.wiki-infobox-content { - padding: 15px; -} - -.wiki-infobox-row { - display: flex; - margin-bottom: 10px; -} - -.wiki-infobox-label { - flex: 1; - font-weight: bold; - color: var(--accent-blue); -} - -.wiki-infobox-value { - flex: 2; - color: var(--text-secondary); -} - -/* Article meta information */ -.article-meta { - border-top: 1px solid var(--border-color); - margin-top: 40px; - padding-top: 20px; - font-size: 0.9em; - color: var(--text-dim); -} - -.article-categories { - margin-top: 10px; -} - -.article-category { - display: inline-block; - background-color: var(--tertiary-bg); - color: var(--accent-gold); - padding: 3px 10px; - margin-right: 5px; - margin-bottom: 5px; - border-radius: 3px; - font-size: 0.85em; -} - -/* Scrollbar styling */ -::-webkit-scrollbar { - width: 12px; - height: 12px; -} - -::-webkit-scrollbar-track { - background: var(--secondary-bg); - border: 1px solid var(--border-color); -} - -::-webkit-scrollbar-thumb { - background: var(--accent-gold); - border: 1px solid var(--border-color); -} - -::-webkit-scrollbar-thumb:hover { - background: var(--accent-blue); -} - -/* Selection styling */ -::selection { - background-color: rgba(201, 170, 113, 0.3); - color: var(--text-primary); -} - -::-moz-selection { - background-color: rgba(201, 170, 113, 0.3); - color: var(--text-primary); -} - -/* Custom Figure styling */ -.custom-figure { - margin: 2.5rem auto; - padding: 1.5rem; - background-color: var(--secondary-bg); - border: 1px solid var(--border-color); - border-radius: 5px; - box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4); - position: relative; - overflow: hidden; - max-width: 95%; -} - -/* Image gallery layout for multiple images */ -.custom-figure .image-gallery { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); - grid-gap: 1rem; - margin-bottom: 1.5rem; -} - -/* Single image in figure */ -.custom-figure img { - margin: 0 auto 1rem; - border: 1px solid var(--border-color); - box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3); - transition: - transform 0.3s ease, - box-shadow 0.3s ease; - max-height: 500px; - width: auto; -} - -/* Hover effect for images */ -.custom-figure img:hover { - transform: scale(1.02); - box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); - border-color: var(--accent-gold); -} - -/* Image titles (from title attribute) */ -.custom-figure .image-title { - display: block; - text-align: center; - font-style: italic; - color: var(--accent-gold); - font-size: 0.9em; - margin-top: 0.5rem; - margin-bottom: 1rem; -} - -/* Caption styling */ -.custom-figure figcaption { - font-family: "Jupiter Pro", "Cinzel", "Georgia", serif; - text-align: center; - color: var(--text-primary); - font-size: 1.1em; - padding: 0.8rem 0; - border-top: 1px solid rgba(201, 170, 113, 0.3); - margin-top: 0.5rem; - position: relative; -} - -/* Special styling for captions to match FFXIV aesthetic */ -.custom-figure figcaption::before { - content: ""; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 4px; - background: linear-gradient(90deg, var(--accent-gold), var(--accent-blue)); -} - -/* Responsive design */ -@media (max-width: 1200px) { - .container { - max-width: 100%; - } -} - -@media (max-width: 992px) { - .nav-sidebar { - width: 200px; - } - - .main-content { - margin-left: 200px; - width: calc(100% - 200px); - } -} - -@media (max-width: 768px) { - body { - flex-direction: column; - } - - .nav-sidebar { - width: 100%; - height: auto; - position: relative; - border-right: none; - border-bottom: 1px solid var(--border-color); - } - - .main-content { - margin-left: 0; - width: 100%; - } - - .container { - padding: 20px 15px; - } - - .wiki-infobox { - float: none; - width: 100%; - margin: 1.5em 0; - } - - h1 { - font-size: 2em; - } - - h2 { - font-size: 1.6em; - } - - h3 { - font-size: 1.3em; - } -} - -/* Animation for page load */ -@keyframes fadeIn { - from { - opacity: 0; - transform: translateY(20px); - } - to { - opacity: 1; - transform: translateY(0); - } - - .custom-figure { - padding: 1rem; - margin: 2rem auto; - } - - .custom-figure .image-gallery { - grid-template-columns: 1fr; - } - - .custom-figure img { - max-height: 350px; - } -} - -.main-content > * { - animation: fadeIn 0.6s ease-out; -} -- cgit v1.2.3