more style
Some checks are pending
Deploy Arise to html branch / Deploy Arise (push) Waiting to run

This commit is contained in:
Jose Falanga 2025-10-13 18:45:47 -03:00
parent 7d4b47382a
commit 03b3a997ad
2 changed files with 113 additions and 130 deletions

View file

@ -49,9 +49,9 @@
<!-- Navigation --> <!-- Navigation -->
<nav class="topbar"> <nav class="topbar">
<a href="/">Home</a> <a href="/">Home</a> <span class="sep"></span>
<a href="/posts">Posts</a> <a href="/katas">Katas</a> <span class="sep"></span>
<a href="https://github.com/spectrasecure/arise">GitHub</a> <a href="/rehosted">Reshosted</a> <span class="sep"></span>
</nav> </nav>
<!-- End Navigation --> <!-- End Navigation -->
</head> </head>

View file

@ -1,65 +1,44 @@
/*** Core page styles to set the primary colours and styles to be inherited by everything else ***/ /*** Core page styles ***/
/* Core Styling */ /* Base styling */
html * { html * {
font-family: system-ui, sans-serif; font-family: system-ui, sans-serif;
} }
body{ body {
margin:40px auto; margin: 40px auto;
max-width:650px; max-width: 650px;
line-height:1.6; line-height: 1.6;
font-size:18px; font-size: 18px;
color: #e0c997; /* main warm gold text */ color: #e0d5b3; /* soft warm parchment gold */
background-color: #121212; /* deep desaturated dark base */ background-color: #101010; /* deep neutral dark */
padding:0 10px; padding: 0 10px;
} }
/********************************/
/********************************/
/*** Post styling ***/ /*** Post styling ***/
img { img {
max-width: 100%; max-width: 100%;
max-height: 100%; max-height: 100%;
margin-top:20px; margin: 20px auto;
margin-bottom:20px; border-radius: 16px;
border-radius:16px;
margin-left: auto;
margin-right: auto;
display: block; display: block;
} }
code { code {
background-color: #1f1c19; /* darker warm code background */ font-family: monospace, "Courier New", Courier, monospace;
border-radius:16px;
padding-left:30px;
padding-right:30px;
line-height:2em;
padding-top:1px;
padding-bottom:1px;
color: #d2b48c;
font-family:monospace;
} }
pre { pre {
overflow-x: auto; overflow-x: auto;
white-space: pre-wrap; white-space: pre-wrap;
white-space: -moz-pre-wrap;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
word-wrap: break-word; word-wrap: break-word;
} }
blockquote { blockquote {
border-left: 2px solid #8a9a5b; /* moss/olive */ border-left: 2px solid #7a8a56; /* moss/olive accent */
display:block; margin: 1em 40px 1em 30px;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 30px;
padding-left: 10px; padding-left: 10px;
margin-right: 40px;
font-style: italic; font-style: italic;
color: #bfa074; /* subtle warm text */ color: #bfa074; /* warm subtle tone */
} }
hr { hr {
@ -71,60 +50,55 @@ hr {
#endline { #endline {
border: none; border: none;
border-top:1px solid #6b5633; /* bronze */ border-top: 1px solid #6b5633; /* bronze */
margin-left: auto; margin: 80px auto 0;
margin-right: auto;
max-width: 300px; max-width: 300px;
margin-top: 80px;
} }
a { a {
color: #c57c3b; /* burnt sienna links */ color: #c9a66b; /* muted gold */
text-decoration: none; text-decoration: none;
} }
a:hover { a:hover {
color: #f0d89a; /* amber hover */ color: #f0d89a; /* soft amber */
} }
h1{ h1 {
line-height:1.2; line-height: 1.2;
color: #e0d5aa; /* slightly lighter heading */ color: #e0d5b3;
} }
h2,h3{ h2, h3 {
padding-top:24px; padding-top: 24px;
line-height:1.2; line-height: 1.2;
color: #d6b676; /* muted gold */ color: #d6b676;
} }
/* Inline dates */ /* Inline dates */
.date { .date {
padding-bottom:0; padding-bottom: 0;
margin-bottom:0; margin-bottom: 0;
font-size:14px; font-size: 14px;
} }
@media screen and (max-width: 900px) { @media screen and (max-width: 900px) {
.date { .date {
text-align:right; text-align: right;
} }
} }
@media screen and (min-width: 901px) { @media screen and (min-width: 901px) {
.date { .date {
float:right; float: right;
margin-left:30px; margin-left: 30px;
}
} }
}
/********************************/
/********************************/
/*** Modular components ***/ /*** Modular components ***/
/* Logo */ /* Logo */
.logo { .logo {
margin-bottom:20px; margin-bottom: 20px;
text-align:center; text-align: center;
} }
.logo img { .logo img {
max-height: 80px; max-height: 80px;
@ -140,13 +114,17 @@ h2,h3{
margin-bottom: 20px; margin-bottom: 20px;
} }
.topbar a { .topbar a {
color: #d2b48c; color: #c9a66b;
padding: 0 8px; padding: 0 8px;
text-decoration:none; text-decoration: none;
} }
.topbar a:hover { .topbar a:hover {
color: #f0d89a; color: #f0d89a;
} }
.topbar .sep {
color: #7a6f50; /* muted bronze */
padding: 0 6px;
}
/* Footer styling */ /* Footer styling */
.footer { .footer {
@ -155,65 +133,70 @@ h2,h3{
font-size: 13px; font-size: 13px;
margin-top: 100px; margin-top: 100px;
text-align: center; text-align: center;
padding-top: 15px; padding: 15px 0 20px 0;
padding-bottom: 20px;
line-height: 1.5; line-height: 1.5;
} }
.footer a { .footer a {
color: #c57c3b; color: #c57c3b;
text-decoration: none; text-decoration: none;
} }
.footer a:hover { .footer a:hover {
color: #f0d89a; color: #f0d89a;
} }
.footer span { .footer span {
opacity: 0.8; opacity: 0.8;
} }
/********************************/ /*** Arise Syntax Highlighted Code ***/
/********************************/ pre.sourceCode,
pre.sourceCode code,
pre.sourceCode code span {
font-family: monospace, "Courier New", Courier, monospace;
background-color: #1a1a1a;
color: #e0d5b3;
border-radius: 16px;
padding: 1px 30px;
line-height: 2em;
display: block;
overflow-x: auto;
}
/*** Other misc garbage ***/ /* 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 .st { color: #d6b676; } /* strings */
pre.sourceCode code .fu { color: #c57c3b; } /* functions/variables */
pre.sourceCode code .va { color: #f0d89a; } /* variable values */
/* Arise Index Style */ /*** Tables for Arise Index and Markdown ***/
.arise-toc-td { .arise-toc-td {
border-width: 1px; border-width: 1px;
border-color: #6b5633; border-color: #6b5633;
border-top-style: solid; border-top-style: solid;
text-align: center; text-align: center;
padding-right: 10px; padding-right: 10px;
padding-bottom: 5px padding-bottom: 5px;
} }
.arise-toc-th { .arise-toc-th {
padding-bottom: 20px; padding-bottom: 20px;
border-bottom: 1px; border-bottom: 1px;
border-bottom-style: solid; border-bottom-style: solid;
} }
table {
/*** Optional subtle code “syntax accents” using analogous palette ***/ border-collapse: collapse;
code span.number { color: #f0d89a; } /* amber numbers */ margin: 20px 0;
code span.comment { color: #8a9a5b; } /* moss comments */ width: 100%;
code span.keyword { color: #b05a3c; } /* rust keywords */ }
table th, table td {
/* ============================= */ border: 1px solid #6b5633;
/* Arise Syntax Highlighted Code */ padding: 6px 10px;
/* ============================= */ }
table th {
pre.sourceCode, background-color: #161412;
pre.sourceCode code, color: #e0d5b3;
pre.sourceCode code span { }
font-family: monospace, "Courier New", Courier, monospace; table td {
background-color: #1f1c19; /* dark warm background */ background-color: #121010;
color: #d2b48c; /* default gold text */ color: #d6b676;
} }
/* Optional: color accents for syntax highlighting */
pre.sourceCode code .co { color: #8a9a5b; } /* comments */
pre.sourceCode code .kw { color: #b05a3c; } /* keywords */
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 */