From 03b3a997ad9b9dcbcc33d891035269dd7f518b7b Mon Sep 17 00:00:00 2001 From: Jose Falanga Date: Mon, 13 Oct 2025 18:45:47 -0300 Subject: [PATCH] more style --- arise-source/config/header.html | 6 +- arise-source/config/main.css | 237 +++++++++++++++----------------- 2 files changed, 113 insertions(+), 130 deletions(-) diff --git a/arise-source/config/header.html b/arise-source/config/header.html index f0c8938..fa0b33f 100644 --- a/arise-source/config/header.html +++ b/arise-source/config/header.html @@ -49,9 +49,9 @@ diff --git a/arise-source/config/main.css b/arise-source/config/main.css index 92cf358..6f2e94d 100644 --- a/arise-source/config/main.css +++ b/arise-source/config/main.css @@ -1,152 +1,130 @@ -/*** Core page styles to set the primary colours and styles to be inherited by everything else ***/ +/*** Core page styles ***/ -/* Core Styling */ +/* Base styling */ html * { - font-family: system-ui, sans-serif; + font-family: system-ui, sans-serif; } -body{ - margin:40px auto; - max-width:650px; - line-height:1.6; - font-size:18px; - color: #e0c997; /* main warm gold text */ - background-color: #121212; /* deep desaturated dark base */ - padding:0 10px; +body { + margin: 40px auto; + max-width: 650px; + line-height: 1.6; + font-size: 18px; + color: #e0d5b3; /* soft warm parchment gold */ + background-color: #101010; /* deep neutral dark */ + padding: 0 10px; } -/********************************/ -/********************************/ /*** Post styling ***/ - img { max-width: 100%; max-height: 100%; - margin-top:20px; - margin-bottom:20px; - border-radius:16px; - margin-left: auto; - margin-right: auto; + margin: 20px auto; + border-radius: 16px; display: block; } code { - background-color: #1f1c19; /* darker warm code background */ - border-radius:16px; - padding-left:30px; - padding-right:30px; - line-height:2em; - padding-top:1px; - padding-bottom:1px; - color: #d2b48c; - font-family:monospace; + font-family: monospace, "Courier New", Courier, monospace; } 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; + overflow-x: auto; + white-space: pre-wrap; + word-wrap: break-word; } blockquote { - border-left: 2px solid #8a9a5b; /* moss/olive */ - display:block; - margin-top: 1em; - margin-bottom: 1em; - margin-left: 30px; - padding-left: 10px; - margin-right: 40px; - font-style: italic; - color: #bfa074; /* subtle warm text */ + border-left: 2px solid #7a8a56; /* moss/olive accent */ + margin: 1em 40px 1em 30px; + padding-left: 10px; + font-style: italic; + color: #bfa074; /* warm subtle tone */ } hr { - border: none; - border-top: 1px solid #c57c3b; /* burnt sienna */ - margin: 1.5em auto; - max-width: 300px; + border: none; + border-top: 1px solid #c57c3b; /* burnt sienna */ + margin: 1.5em auto; + max-width: 300px; } #endline { - border: none; - border-top:1px solid #6b5633; /* bronze */ - margin-left: auto; - margin-right: auto; - max-width: 300px; - margin-top: 80px; + border: none; + border-top: 1px solid #6b5633; /* bronze */ + margin: 80px auto 0; + max-width: 300px; } a { - color: #c57c3b; /* burnt sienna links */ + color: #c9a66b; /* muted gold */ text-decoration: none; } a:hover { - color: #f0d89a; /* amber hover */ + color: #f0d89a; /* soft amber */ } -h1{ - line-height:1.2; - color: #e0d5aa; /* slightly lighter heading */ +h1 { + line-height: 1.2; + color: #e0d5b3; } -h2,h3{ - padding-top:24px; - line-height:1.2; - color: #d6b676; /* muted gold */ +h2, h3 { + padding-top: 24px; + line-height: 1.2; + color: #d6b676; } /* Inline dates */ .date { - padding-bottom:0; - margin-bottom:0; - font-size:14px; + padding-bottom: 0; + margin-bottom: 0; + font-size: 14px; } @media screen and (max-width: 900px) { -.date { - text-align:right; -} + .date { + text-align: right; + } } @media screen and (min-width: 901px) { -.date { - float:right; - margin-left:30px; + .date { + float: right; + margin-left: 30px; + } } -} - -/********************************/ -/********************************/ /*** Modular components ***/ /* Logo */ .logo { - margin-bottom:20px; - text-align:center; + margin-bottom: 20px; + text-align: center; } .logo img { - max-height: 80px; - opacity: 0.95; + max-height: 80px; + opacity: 0.95; } /* Navbar styling */ .topbar { - text-align: center; - padding: 10px 0; - border-top: 1px solid #6b5633; /* bronze */ - border-bottom: 1px solid #c57c3b; /* burnt sienna */ - margin-bottom: 20px; + text-align: center; + padding: 10px 0; + border-top: 1px solid #6b5633; /* bronze */ + border-bottom: 1px solid #c57c3b; /* burnt sienna */ + margin-bottom: 20px; } .topbar a { - color: #d2b48c; + color: #c9a66b; padding: 0 8px; - text-decoration:none; + text-decoration: none; } .topbar a:hover { color: #f0d89a; } +.topbar .sep { + color: #7a6f50; /* muted bronze */ + padding: 0 6px; +} /* Footer styling */ .footer { @@ -155,65 +133,70 @@ h2,h3{ font-size: 13px; margin-top: 100px; text-align: center; - padding-top: 15px; - padding-bottom: 20px; + padding: 15px 0 20px 0; line-height: 1.5; } - .footer a { color: #c57c3b; text-decoration: none; } - .footer a:hover { color: #f0d89a; } - .footer span { opacity: 0.8; } -/********************************/ -/********************************/ - -/*** Other misc garbage ***/ - -/* Arise Index Style */ -.arise-toc-td { - border-width: 1px; - border-color: #6b5633; - border-top-style: solid; - text-align: center; - padding-right: 10px; - padding-bottom: 5px -} -.arise-toc-th { - padding-bottom: 20px; - border-bottom: 1px; - border-bottom-style: solid; -} - -/*** Optional subtle code “syntax accents” using analogous palette ***/ -code span.number { color: #f0d89a; } /* amber numbers */ -code span.comment { color: #8a9a5b; } /* moss comments */ -code span.keyword { color: #b05a3c; } /* rust keywords */ - -/* ============================= */ -/* Arise Syntax Highlighted Code */ -/* ============================= */ - +/*** Arise Syntax Highlighted Code ***/ pre.sourceCode, pre.sourceCode code, pre.sourceCode code span { font-family: monospace, "Courier New", Courier, monospace; - background-color: #1f1c19; /* dark warm background */ - color: #d2b48c; /* default gold text */ + background-color: #1a1a1a; + color: #e0d5b3; + border-radius: 16px; + padding: 1px 30px; + line-height: 2em; + display: block; + overflow-x: auto; } -/* Optional: color accents for syntax highlighting */ -pre.sourceCode code .co { color: #8a9a5b; } /* comments */ +/* Syntax accent colors */ +pre.sourceCode code .co { color: #7a8a56; } /* comments */ pre.sourceCode code .kw { color: #b05a3c; } /* keywords */ -pre.sourceCode code .bu { color: #f0d89a; } /* builtins / commands */ +pre.sourceCode code .bu { color: #f0d89a; } /* builtins/commands */ pre.sourceCode code .st { color: #d6b676; } /* strings */ -pre.sourceCode code .fu { color: #c57c3b; } /* functions / variables */ -pre.sourceCode code .va { color: #f0d89a; } /* variable values */ \ No newline at end of file +pre.sourceCode code .fu { color: #c57c3b; } /* functions/variables */ +pre.sourceCode code .va { color: #f0d89a; } /* variable values */ + +/*** Tables for Arise Index and Markdown ***/ +.arise-toc-td { + border-width: 1px; + border-color: #6b5633; + border-top-style: solid; + text-align: center; + padding-right: 10px; + padding-bottom: 5px; +} +.arise-toc-th { + padding-bottom: 20px; + border-bottom: 1px; + border-bottom-style: solid; +} +table { + border-collapse: collapse; + margin: 20px 0; + width: 100%; +} +table th, table td { + border: 1px solid #6b5633; + padding: 6px 10px; +} +table th { + background-color: #161412; + color: #e0d5b3; +} +table td { + background-color: #121010; + color: #d6b676; +}