mi/sunday
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

✨ variables to allow for customizing the css easily.

Browse Source
This commit is contained in:
mi
2025-11-12 11:29:17 +10:00
parent bf8ed23bc4
commit 83ea55adc3
1 changed files with 213 additions and 160 deletions
Download Patch File Download Diff File Expand all files Collapse all files

373
static/css/style.css
View File

@@ -1,3 +1,56 @@
/* CSS Variables for easy customization */
:root {
/* Colors */
--color-primary: #000;
--color-background: #fff;
--color-text: #000;
--color-text-muted: #666;
--color-disabled: #999;
--color-hover-bg: #f0f0f0;
/* Typography */
--font-family: 'Courier New', Courier, monospace;
--font-size-base: 1rem;
--font-size-xs: 0.7rem;
--font-size-sm: 0.75rem;
--font-size-md: 0.85rem;
--font-size-lg: 0.9rem;
--font-size-xl: 1.2rem;
--font-size-2xl: 1.5rem;
--font-size-3xl: 2rem;
--font-size-4xl: 6rem;
--line-height-base: 1.5;
--line-height-tight: 1.3;
--line-height-relaxed: 1.6;
--letter-spacing-tight: 1px;
--letter-spacing-wide: 2px;
/* Spacing */
--space-xs: 0.25rem;
--space-sm: 0.5rem;
--space-md: 1rem;
--space-lg: 1.5rem;
--space-xl: 2rem;
--space-2xl: 3rem;
--space-3xl: 4rem;
/* Borders */
--border-width-thin: 2px;
--border-width-thick: 3px;
--border-color: var(--color-primary);
--border-radius: 0; /* Can be changed for rounded corners */
/* Layout */
--container-max-width: 900px;
--content-max-width: 700px;
--archive-grid-min: 180px;
--archive-grid-min-mobile: 140px;
--archive-thumbnail-height: 120px;
/* Transitions (for future enhancements) */
--transition-speed: 0.2s;
}
/* Reset and base styles */ /* Reset and base styles */
* { * {
margin: 0; margin: 0;
@@ -6,16 +59,16 @@
} }
body { body {
font-family: 'Courier New', Courier, monospace; font-family: var(--font-family);
line-height: 1.5; line-height: var(--line-height-base);
color: #000; color: var(--color-text);
background-color: #fff; background-color: var(--color-background);
} }
.container { .container {
max-width: 900px; max-width: var(--container-max-width);
margin: 0 auto; margin: 0 auto;
padding: 0 1rem; padding: 0 var(--space-md);
} }
/* Site Header Image */ /* Site Header Image */
@@ -33,16 +86,16 @@ body {
/* Header and Navigation */ /* Header and Navigation */
header { header {
border-bottom: 3px solid #000; border-bottom: var(--border-width-thick) solid var(--border-color);
padding: 1.5rem 0; padding: var(--space-lg) 0;
margin-bottom: 2rem; margin-bottom: var(--space-xl);
} }
/* Header with image variant - no border, no padding, centered nav */ /* Header with image variant - no border, no padding, centered nav */
header.header-with-image { header.header-with-image {
border-bottom: none; border-bottom: none;
padding: 1rem 0 0 0; padding: var(--space-md) 0 0 0;
margin-bottom: 0.5rem; margin-bottom: var(--space-sm);
} }
header.header-with-image nav .container { header.header-with-image nav .container {
@@ -50,7 +103,7 @@ header.header-with-image nav .container {
} }
header.header-with-image .nav-links a { header.header-with-image .nav-links a {
font-size: 1.2rem; font-size: var(--font-size-xl);
font-weight: bold; font-weight: bold;
} }
@@ -59,26 +112,26 @@ nav .container {
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
flex-wrap: wrap; flex-wrap: wrap;
gap: 1rem; gap: var(--space-md);
} }
.nav-brand a { .nav-brand a {
color: #000; color: var(--color-text);
text-decoration: none; text-decoration: none;
font-size: 1.5rem; font-size: var(--font-size-2xl);
font-weight: bold; font-weight: bold;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 2px; letter-spacing: var(--letter-spacing-wide);
} }
.nav-links { .nav-links {
display: flex; display: flex;
list-style: none; list-style: none;
gap: 1.5rem; gap: var(--space-lg);
} }
.nav-links a { .nav-links a {
color: #000; color: var(--color-text);
text-decoration: none; text-decoration: none;
text-transform: lowercase; text-transform: lowercase;
} }
@@ -91,49 +144,49 @@ nav .container {
/* Main content */ /* Main content */
main { main {
min-height: calc(100vh - 250px); min-height: calc(100vh - 250px);
padding: 0 0 3rem 0; padding: 0 0 var(--space-2xl) 0;
} }
/* Page header */ /* Page header */
.page-header { .page-header {
margin-bottom: 2rem; margin-bottom: var(--space-xl);
padding-bottom: 1rem; padding-bottom: var(--space-md);
border-bottom: 2px solid #000; border-bottom: var(--border-width-thin) solid var(--border-color);
} }
.page-header h1 { .page-header h1 {
color: #000; color: var(--color-text);
font-size: 2rem; font-size: var(--font-size-3xl);
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 1px; letter-spacing: var(--letter-spacing-tight);
} }
.page-header p { .page-header p {
margin-top: 0.5rem; margin-top: var(--space-sm);
font-size: 0.9rem; font-size: var(--font-size-lg);
} }
/* Content sections */ /* Content sections */
.about-content { .about-content {
max-width: 700px; max-width: var(--content-max-width);
} }
.about-content h2 { .about-content h2 {
color: #000; color: var(--color-text);
margin-top: 2rem; margin-top: var(--space-xl);
margin-bottom: 0.5rem; margin-bottom: var(--space-sm);
text-transform: uppercase; text-transform: uppercase;
font-size: 1.2rem; font-size: var(--font-size-xl);
letter-spacing: 1px; letter-spacing: var(--letter-spacing-tight);
} }
.about-content p { .about-content p {
margin-bottom: 1rem; margin-bottom: var(--space-md);
} }
.about-content ul { .about-content ul {
margin-left: 1.5rem; margin-left: var(--space-lg);
margin-bottom: 1rem; margin-bottom: var(--space-md);
} }
.about-content li { .about-content li {
@@ -144,49 +197,49 @@ main {
.btn { .btn {
display: inline-block; display: inline-block;
padding: 0.6rem 1.2rem; padding: 0.6rem 1.2rem;
background-color: #000; background-color: var(--color-primary);
color: #fff; color: var(--color-background);
text-decoration: none; text-decoration: none;
border: 2px solid #000; border: var(--border-width-thin) solid var(--border-color);
cursor: pointer; cursor: pointer;
font-size: 0.9rem; font-size: var(--font-size-lg);
font-family: 'Courier New', Courier, monospace; font-family: var(--font-family);
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 1px; letter-spacing: var(--letter-spacing-tight);
} }
.btn:hover { .btn:hover {
background-color: #fff; background-color: var(--color-background);
color: #000; color: var(--color-primary);
} }
/* Error page */ /* Error page */
.error-page { .error-page {
text-align: center; text-align: center;
padding: 4rem 1rem; padding: var(--space-3xl) var(--space-md);
} }
.error-page h1 { .error-page h1 {
font-size: 6rem; font-size: var(--font-size-4xl);
color: #000; color: var(--color-text);
margin-bottom: 1rem; margin-bottom: var(--space-md);
} }
.error-page h2 { .error-page h2 {
color: #000; color: var(--color-text);
margin-bottom: 1rem; margin-bottom: var(--space-md);
text-transform: uppercase; text-transform: uppercase;
} }
.error-page p { .error-page p {
color: #000; color: var(--color-text);
margin-bottom: 2rem; margin-bottom: var(--space-xl);
} }
/* Comic Container */ /* Comic Container */
.comic-container { .comic-container {
border: 3px solid #000; border: var(--border-width-thick) solid var(--border-color);
padding: 1rem; padding: var(--space-md);
} }
/* Full-width comic variant */ /* Full-width comic variant */
@@ -198,11 +251,11 @@ main {
.comic-container-fullwidth .comic-header, .comic-container-fullwidth .comic-header,
.comic-container-fullwidth .comic-navigation, .comic-container-fullwidth .comic-navigation,
.comic-container-fullwidth .comic-transcript { .comic-container-fullwidth .comic-transcript {
max-width: 900px; max-width: var(--container-max-width);
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
padding-left: 1rem; padding-left: var(--space-md);
padding-right: 1rem; padding-right: var(--space-md);
} }
.comic-container-fullwidth .comic-image { .comic-container-fullwidth .comic-image {
@@ -224,30 +277,30 @@ main {
} }
.comic-header { .comic-header {
margin-bottom: 1.5rem; margin-bottom: var(--space-lg);
padding-bottom: 1rem; padding-bottom: var(--space-md);
border-bottom: 2px solid #000; border-bottom: var(--border-width-thin) solid var(--border-color);
} }
.comic-header h1 { .comic-header h1 {
color: #000; color: var(--color-text);
font-size: 1.5rem; font-size: var(--font-size-2xl);
margin-bottom: 0.25rem; margin-bottom: var(--space-xs);
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 1px; letter-spacing: var(--letter-spacing-tight);
} }
.comic-date { .comic-date {
color: #000; color: var(--color-text);
font-size: 0.85rem; font-size: var(--font-size-md);
} }
/* Comic Image */ /* Comic Image */
.comic-image { .comic-image {
text-align: center; text-align: center;
margin-bottom: 1.5rem; margin-bottom: var(--space-lg);
padding: 0.5rem; padding: var(--space-sm);
background: #fff; background: var(--color-background);
} }
.comic-image a { .comic-image a {
@@ -264,16 +317,16 @@ main {
/* Comic Navigation */ /* Comic Navigation */
.comic-navigation { .comic-navigation {
border-top: 2px solid #000; border-top: var(--border-width-thin) solid var(--border-color);
padding-top: 1rem; padding-top: var(--space-md);
margin-bottom: 1rem; margin-bottom: var(--space-md);
} }
.nav-buttons { .nav-buttons {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
gap: 0.5rem; gap: var(--space-sm);
flex-wrap: wrap; flex-wrap: wrap;
} }
@@ -283,54 +336,54 @@ main {
} }
.btn-disabled { .btn-disabled {
background-color: #fff; background-color: var(--color-background);
color: #999; color: var(--color-disabled);
border-color: #999; border-color: var(--color-disabled);
cursor: not-allowed; cursor: not-allowed;
} }
.btn-disabled:hover { .btn-disabled:hover {
background-color: #fff; background-color: var(--color-background);
color: #999; color: var(--color-disabled);
} }
.comic-date-display { .comic-date-display {
padding: 0 0.5rem; padding: 0 var(--space-sm);
color: #000; color: var(--color-text);
font-weight: bold; font-weight: bold;
margin: 0 0.25rem; margin: 0 var(--space-xs);
font-size: 0.85rem; font-size: var(--font-size-md);
font-style: italic; font-style: italic;
} }
/* Comic Transcript */ /* Comic Transcript */
.comic-transcript { .comic-transcript {
border: 2px solid #000; border: var(--border-width-thin) solid var(--border-color);
padding: 1rem; padding: var(--space-md);
margin-top: 1rem; margin-top: var(--space-md);
} }
.comic-transcript h3 { .comic-transcript h3 {
color: #000; color: var(--color-text);
margin-bottom: 0.5rem; margin-bottom: var(--space-sm);
text-transform: uppercase; text-transform: uppercase;
font-size: 0.9rem; font-size: var(--font-size-lg);
letter-spacing: 1px; letter-spacing: var(--letter-spacing-tight);
} }
.comic-transcript p { .comic-transcript p {
color: #000; color: var(--color-text);
line-height: 1.6; line-height: var(--line-height-relaxed);
font-size: 0.9rem; font-size: var(--font-size-lg);
} }
.comic-transcript ul, .comic-transcript ul,
.comic-transcript ol { .comic-transcript ol {
margin-left: 1.5rem; margin-left: var(--space-lg);
margin-bottom: 1rem; margin-bottom: var(--space-md);
color: #000; color: var(--color-text);
line-height: 1.6; line-height: var(--line-height-relaxed);
font-size: 0.9rem; font-size: var(--font-size-lg);
} }
.comic-transcript li { .comic-transcript li {
@@ -339,36 +392,36 @@ main {
/* Archive Content */ /* Archive Content */
.archive-content { .archive-content {
margin-top: 1rem; margin-top: var(--space-md);
} }
.archive-grid { .archive-grid {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(var(--archive-grid-min), 1fr));
gap: 1rem; gap: var(--space-md);
} }
.archive-item { .archive-item {
border: 2px solid #000; border: var(--border-width-thin) solid var(--border-color);
overflow: hidden; overflow: hidden;
} }
.archive-item:hover { .archive-item:hover {
background: #f0f0f0; background: var(--color-hover-bg);
} }
.archive-item a { .archive-item a {
text-decoration: none; text-decoration: none;
color: #000; color: var(--color-text);
display: block; display: block;
} }
.archive-item img { .archive-item img {
width: 100%; width: 100%;
height: 120px; height: var(--archive-thumbnail-height);
object-fit: cover; object-fit: cover;
display: block; display: block;
border-bottom: 2px solid #000; border-bottom: var(--border-width-thin) solid var(--border-color);
} }
.archive-info { .archive-info {
@@ -376,39 +429,39 @@ main {
} }
.archive-info h3 { .archive-info h3 {
color: #000; color: var(--color-text);
font-size: 0.85rem; font-size: var(--font-size-md);
margin-bottom: 0.25rem; margin-bottom: var(--space-xs);
line-height: 1.3; line-height: var(--line-height-tight);
text-transform: uppercase; text-transform: uppercase;
} }
.archive-date { .archive-date {
color: #000; color: var(--color-text);
font-size: 0.75rem; font-size: var(--font-size-sm);
} }
/* Responsive adjustments */ /* Responsive adjustments */
@media (max-width: 768px) { @media (max-width: 768px) {
.nav-brand a { .nav-brand a {
font-size: 1.2rem; font-size: var(--font-size-xl);
} }
.nav-links { .nav-links {
gap: 1rem; gap: var(--space-md);
} }
.btn-nav { .btn-nav {
padding: 0.3rem 0.6rem; padding: 0.3rem 0.6rem;
font-size: 0.75rem; font-size: var(--font-size-sm);
} }
.comic-date-display { .comic-date-display {
font-size: 0.7rem; font-size: var(--font-size-xs);
} }
.archive-grid { .archive-grid {
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(var(--archive-grid-min-mobile), 1fr));
gap: 0.75rem; gap: 0.75rem;
} }
@@ -419,16 +472,16 @@ main {
/* Footer */ /* Footer */
footer { footer {
border-top: 3px solid #000; border-top: var(--border-width-thick) solid var(--border-color);
padding: 2rem 0; padding: var(--space-xl) 0;
margin-top: 3rem; margin-top: var(--space-2xl);
} }
.footer-content { .footer-content {
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
gap: 2rem; gap: var(--space-xl);
margin-bottom: 2rem; margin-bottom: var(--space-xl);
flex-wrap: wrap; flex-wrap: wrap;
} }
@@ -438,23 +491,23 @@ footer {
} }
.footer-section h3 { .footer-section h3 {
color: #000; color: var(--color-text);
font-size: 0.9rem; font-size: var(--font-size-lg);
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 1px; letter-spacing: var(--letter-spacing-tight);
margin-bottom: 1rem; margin-bottom: var(--space-md);
} }
.social-links { .social-links {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 0.5rem; gap: var(--space-sm);
} }
.social-links a { .social-links a {
color: #000; color: var(--color-text);
text-decoration: none; text-decoration: none;
font-size: 0.85rem; font-size: var(--font-size-md);
} }
.social-links a:hover { .social-links a:hover {
@@ -463,50 +516,50 @@ footer {
.newsletter-form { .newsletter-form {
display: flex; display: flex;
gap: 0.5rem; gap: var(--space-sm);
} }
.newsletter-form input[type="email"] { .newsletter-form input[type="email"] {
flex: 1; flex: 1;
padding: 0.5rem; padding: var(--space-sm);
border: 2px solid #000; border: var(--border-width-thin) solid var(--border-color);
font-family: 'Courier New', Courier, monospace; font-family: var(--font-family);
font-size: 0.85rem; font-size: var(--font-size-md);
} }
.newsletter-form button { .newsletter-form button {
padding: 0.5rem 1rem; padding: var(--space-sm) var(--space-md);
background-color: #000; background-color: var(--color-primary);
color: #fff; color: var(--color-background);
border: 2px solid #000; border: var(--border-width-thin) solid var(--border-color);
cursor: pointer; cursor: pointer;
font-family: 'Courier New', Courier, monospace; font-family: var(--font-family);
font-size: 0.85rem; font-size: var(--font-size-md);
text-transform: uppercase; text-transform: uppercase;
} }
.newsletter-form button:hover { .newsletter-form button:hover {
background-color: #fff; background-color: var(--color-background);
color: #000; color: var(--color-primary);
} }
.newsletter-placeholder { .newsletter-placeholder {
font-size: 0.85rem; font-size: var(--font-size-md);
color: #666; color: var(--color-text-muted);
} }
.footer-bottom { .footer-bottom {
text-align: center; text-align: center;
padding-top: 1.5rem; padding-top: var(--space-lg);
border-top: 2px solid #000; border-top: var(--border-width-thin) solid var(--border-color);
} }
.footer-bottom p { .footer-bottom p {
margin: 0; margin: 0;
color: #000; color: var(--color-text);
font-size: 0.85rem; font-size: var(--font-size-md);
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 1px; letter-spacing: var(--letter-spacing-tight);
} }
/* Compact Footer Mode */ /* Compact Footer Mode */
@@ -520,13 +573,13 @@ footer.compact-footer .container {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 1rem; gap: var(--space-md);
} }
footer.compact-footer .footer-content { footer.compact-footer .footer-content {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 1rem; gap: var(--space-md);
margin-bottom: 0; margin-bottom: 0;
flex-wrap: nowrap; flex-wrap: nowrap;
} }
@@ -536,26 +589,26 @@ footer.compact-footer .footer-section {
min-width: auto; min-width: auto;
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.5rem; gap: var(--space-sm);
} }
footer.compact-footer .footer-section h3 { footer.compact-footer .footer-section h3 {
font-size: 0.75rem; font-size: var(--font-size-sm);
margin-bottom: 0; margin-bottom: 0;
display: inline; display: inline;
} }
footer.compact-footer .social-links { footer.compact-footer .social-links {
flex-direction: row; flex-direction: row;
gap: 0.5rem; gap: var(--space-sm);
} }
footer.compact-footer .social-links a { footer.compact-footer .social-links a {
font-size: 0.75rem; font-size: var(--font-size-sm);
} }
footer.compact-footer .newsletter-placeholder { footer.compact-footer .newsletter-placeholder {
font-size: 0.75rem; font-size: var(--font-size-sm);
margin: 0; margin: 0;
} }
@@ -568,18 +621,18 @@ footer.compact-footer .footer-bottom {
footer.compact-footer .footer-bottom::before { footer.compact-footer .footer-bottom::before {
content: '|'; content: '|';
margin-right: 1rem; margin-right: var(--space-md);
color: #666; color: var(--color-text-muted);
} }
footer.compact-footer .footer-bottom p { footer.compact-footer .footer-bottom p {
font-size: 0.75rem; font-size: var(--font-size-sm);
margin: 0; margin: 0;
} }
/* Add separator between sections in compact mode */ /* Add separator between sections in compact mode */
footer.compact-footer .footer-section:not(:last-child)::after { footer.compact-footer .footer-section:not(:last-child)::after {
content: '|'; content: '|';
margin-left: 1rem; margin-left: var(--space-md);
color: #666; color: var(--color-text-muted);
} }