move styles to file
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:23:48 -03:00
parent 6942af4c2f
commit d8f897abe4
2 changed files with 27 additions and 73 deletions

View file

@ -43,56 +43,6 @@
<meta name="theme-color" content="#1e1b17"> <meta name="theme-color" content="#1e1b17">
<!-- End Favicon --> <!-- End Favicon -->
<!-- Styles+Logo -->
<style>
html * {
font-family: system-ui, sans-serif;
}
body {
background-color: #1e1b17;
color: #d2b48c;
margin: 40px auto;
max-width: 650px;
padding: 0 10px;
line-height: 1.6;
}
a {
color: #d6b676;
text-decoration: none;
}
a:hover {
color: #f0d89a;
}
hr {
border: none;
border-top: 1px solid #6b5633;
margin: 1.5em auto;
max-width: 300px;
}
.logo {
text-align: center;
margin-bottom: 20px;
}
.logo img {
max-height: 80px;
opacity: 0.95;
}
.topbar {
text-align: center;
padding: 10px 0;
border-top: 1px solid #6b5633;
border-bottom: 1px solid #6b5633;
margin-bottom: 20px;
}
.topbar a {
color: #d2b48c;
padding: 0 8px;
}
.topbar a:hover {
color: #f0d89a;
}
</style>
<link rel="stylesheet" href="/config/main.css"> <link rel="stylesheet" href="/config/main.css">
<div class="logo"><a href="/"><img src="/config/logo.png" alt="Site logo" /></a></div> <div class="logo"><a href="/"><img src="/config/logo.png" alt="Site logo" /></a></div>
<!-- End Styles+Logo --> <!-- End Styles+Logo -->

View file

@ -1,9 +1,8 @@
/*** Core page styles to set the primary colours and styles to be inherited by everything else ***/ /*** Core page styles to set the primary colours and styles to be inherited by everything else ***/
/* Core Styling */ /* Core Styling */
html * { html * {
font-family:sans-serif; font-family: system-ui, sans-serif;
} }
body{ body{
margin:40px auto; margin:40px auto;
@ -11,7 +10,7 @@ body{
line-height:1.6; line-height:1.6;
font-size:18px; font-size:18px;
color: #d2b48c; /* muted gold-beige text */ color: #d2b48c; /* muted gold-beige text */
background-color: #171511; /* warm dark brown background */ background-color: #1e1b17; /* warm dark brown background */
padding:0 10px; padding:0 10px;
} }
/********************************/ /********************************/
@ -36,11 +35,10 @@ code {
padding-left:30px; padding-left:30px;
padding-right:30px; padding-right:30px;
line-height:2em; line-height:2em;
padding-top:1px; padding-top:1px;
padding-bottom:1px; padding-bottom:1px;
color: #d2b48c; /* same as body text */ color: #d2b48c; /* same as body text */
font-family:monospace; font-family:monospace;
} }
pre { pre {
@ -65,14 +63,15 @@ blockquote {
} }
hr { hr {
color:#6b5633; border: none;
margin-left: auto; border-top: 1px solid #6b5633;
margin-right: auto; margin: 1.5em auto;
max-width: 300px; max-width: 300px;
} }
#endline { /* Special kind of <hr> for spacing out footnotes from the rest of a post */ #endline { /* Special kind of <hr> for spacing out footnotes from the rest of a post */
color:#6b5633; border: none;
border-top:1px solid #6b5633;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
max-width: 300px; max-width: 300px;
@ -80,10 +79,11 @@ hr {
} }
a { a {
color: #dd9266; /* muted gold */ color: #d6b676; /* muted gold */
text-decoration: none;
} }
a:hover { a:hover {
color: #f37d7d; /* lighter gold on hover */ color: #f0d89a; /* lighter gold on hover */
} }
h1{ h1{
@ -117,30 +117,36 @@ h2,h3{
/********************************/ /********************************/
/********************************/ /********************************/
/*** Modular component styles. Includes styling for the headers, navigation controls, and footer. */
/*** Modular component styles. Includes styling for the headers, navigation controls, and footer. ***/
/* Site logo. Styled to responsively move to either left or be centred, depending if the page is being viewed on desktop or mobile respectively. */ /* Site logo. Styled to responsively move to either left or be centred, depending if the page is being viewed on desktop or mobile respectively. */
.logo { .logo {
margin-bottom:20px; margin-bottom:20px;
text-align:center; text-align:center;
} }
.logo img {
max-height: 80px;
opacity: 0.95;
}
/* Navbar styling. */ /* Navbar styling. */
.topbar { .topbar {
padding-right:10px; text-align: center;
border-top:1px solid #6b5633; padding: 10px 0;
border-bottom:1px solid #6b5633; border-top: 1px solid #6b5633;
margin-bottom:20px; border-bottom: 1px solid #6b5633;
text-align:center; margin-bottom: 20px;
} }
.topbar a { .topbar a {
color:#6b5633; color: #d2b48c;
text-decoration:none; padding: 0 8px;
text-decoration:none;
}
.topbar a:hover {
color: #f0d89a;
} }
/* Site footer styling */ /* Site footer styling */
/* Footer */
.footer { .footer {
border-top: 1px solid #6b5633; border-top: 1px solid #6b5633;
color: #a89064; color: #a89064;
@ -161,7 +167,6 @@ text-decoration:none;
color: #f0d89a; color: #f0d89a;
} }
/* Optional: subtle fade effect for decorative symbol */
.footer span { .footer span {
opacity: 0.8; opacity: 0.8;
} }
@ -169,7 +174,6 @@ text-decoration:none;
/********************************/ /********************************/
/********************************/ /********************************/
/*** Other misc garbage ***/ /*** Other misc garbage ***/
/* Arise Index Style */ /* Arise Index Style */