/*** Core page styles to set the primary colours and styles to be inherited by everything else ***/ /* Core Styling */ html * { 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; } /********************************/ /********************************/ /*** 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; } 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; } 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: 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 */ } hr { 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; } a { color: #c57c3b; /* burnt sienna links */ text-decoration: none; } a:hover { color: #f0d89a; /* amber hover */ } h1{ line-height:1.2; color: #e0d5aa; /* slightly lighter heading */ } h2,h3{ padding-top:24px; line-height:1.2; color: #d6b676; /* muted gold */ } /* Inline dates */ .date { padding-bottom:0; margin-bottom:0; font-size:14px; } @media screen and (max-width: 900px) { .date { text-align:right; } } @media screen and (min-width: 901px) { .date { float:right; margin-left:30px; } } /********************************/ /********************************/ /*** Modular components ***/ /* Logo */ .logo { margin-bottom:20px; text-align:center; } .logo img { 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; } .topbar a { color: #d2b48c; padding: 0 8px; text-decoration:none; } .topbar a:hover { color: #f0d89a; } /* Footer styling */ .footer { border-top: 1px solid #6b5633; /* bronze */ color: #a89064; font-size: 13px; margin-top: 100px; text-align: center; padding-top: 15px; padding-bottom: 20px; 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 */