Website/static/css/dark-theme.css
2026-03-29 00:00:17 -04:00

175 lines
3.4 KiB
CSS

/* Night Sky Dark Theme for danesabo.com */
/* Base dark background with subtle gradient */
html, body {
background: linear-gradient(180deg, #0a0a1a 0%, #1a1a2e 50%, #0f0f23 100%);
background-attachment: fixed;
min-height: 100vh;
}
/* Main content area */
main {
background-color: rgba(15, 15, 35, 0.95) !important;
border-radius: 8px;
box-shadow: 0 0 40px rgba(100, 150, 255, 0.1);
border: 1px solid rgba(100, 150, 255, 0.2);
}
/* Text colors - twilight palette */
h1, h2, h3, h4, h5, h6 {
color: #e8c87a !important; /* twilight gold */
}
p, li, td, th {
color: #9aafc8 !important;
}
strong, b {
color: #d4b86a !important; /* muted gold */
}
/* Links - twilight gold */
a {
color: #d4a85a !important;
transition: color 0.3s ease, text-shadow 0.3s ease;
}
a:hover {
color: #f0c878 !important;
text-shadow: 0 0 8px rgba(240, 200, 120, 0.4);
}
/* Header */
.page-header {
border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
background: rgba(10, 10, 30, 0.8);
margin: 0 !important;
padding: 1em;
}
.myname a {
color: #ffffff !important;
text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}
/* Navigation */
nav a {
color: #c8c8e0 !important;
}
nav li:hover {
border-color: #7eb8ff !important;
}
.activetab, li.activetab {
background-color: rgba(126, 184, 255, 0.2) !important;
}
.activetab > a, a.activetab {
color: #ffffff !important;
}
/* Code blocks */
code, kbd {
background-color: #1a1a2e !important;
color: #a8d4ff !important;
border: 1px solid rgba(100, 150, 255, 0.3);
}
pre {
background-color: #0f0f23 !important;
border: 1px solid rgba(100, 150, 255, 0.2);
}
pre code {
border: none;
}
/* Footer */
footer {
background-color: rgba(10, 10, 26, 0.95) !important;
color: #8888a0 !important;
border-top: 1px solid rgba(100, 150, 255, 0.2);
}
/* Contact boxes and cards */
.contactbox ul {
background-color: rgba(20, 20, 40, 0.9) !important;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5) !important;
}
.contactbox a {
color: #c8c8e0 !important;
}
/* Blog post titles */
.blog-post-title a {
color: #e8e8ff !important;
}
.blog-post-info {
color: #8888a0 !important;
}
/* Tables */
th {
background-color: rgba(126, 184, 255, 0.2) !important;
color: #e8e8ff !important;
}
tr:hover {
background-color: rgba(126, 184, 255, 0.1) !important;
}
/* Taxonomy/category links */
.taxonomy-links ul li a {
background-color: rgba(30, 30, 50, 0.9) !important;
color: #c8c8e0 !important;
}
.taxonomy-links ul {
border-bottom-color: rgba(255, 255, 255, 0.2) !important;
}
/* Figures and images */
figure.frame {
background-color: rgba(20, 20, 40, 0.8) !important;
border-color: rgba(100, 150, 255, 0.3) !important;
}
figcaption {
border-bottom-color: rgba(255, 255, 255, 0.2) !important;
}
figcaption p, figcaption h4 {
color: #8888a0 !important;
}
/* Blockquotes */
blockquote {
color: #a8a8c0 !important;
border-left: 3px solid rgba(126, 184, 255, 0.5);
padding-left: 1em;
}
/* Pagination */
.page-item {
color: #c8c8e0 !important;
}
.page-item a {
color: #c8c8e0 !important;
}
.page-item.active {
background-color: rgba(126, 184, 255, 0.3) !important;
}
/* Stars - wishlist for later (CSS pseudo-elements tricky with this theme) */
/* TODO: Add canvas-based or JS star animation */
/* Smooth transitions */
* {
transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}