feat(site): modernize to 2026 standards (Vite, design, perf, SEO)
- Migrate PHP TOS to static HTML for better SEO - Refresh CSS with modern design and performance improvements - Update HTML structure for semantic markup and accessibility - Improve metadata and readme documentation Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-opencode) Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
This commit is contained in:
269
styles.css
269
styles.css
@@ -1,41 +1,228 @@
|
||||
:root {
|
||||
--bs-primary: #3D3300;
|
||||
--bs-secondary: #F8FDDD;
|
||||
--bs-success: #4CAF50;
|
||||
--bs-info: #17A2B8;
|
||||
--bs-warning: #FFC107;
|
||||
--bs-danger: #DC3545;
|
||||
--bs-light: #F8F9FA;
|
||||
--bs-dark: #343A40;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'IBM Plex Mono', monospace;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: var(--bs-secondary); /* Updated background color */
|
||||
color: var(--bs-primary); /* Updated text color */
|
||||
}
|
||||
header {
|
||||
background-color: var(--bs-primary); /* Updated background color */
|
||||
color: var(--bs-secondary); /* Updated text color */
|
||||
padding: 1rem 0;
|
||||
text-align: center;
|
||||
}
|
||||
.container {
|
||||
padding: 2rem;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
h1, h2 {
|
||||
color: var(--bs-primary); /* Updated heading color */
|
||||
}
|
||||
footer {
|
||||
background-color: var(--bs-primary); /* Updated background color */
|
||||
color: var(--bs-secondary); /* Updated text color */
|
||||
text-align: center;
|
||||
padding: 1rem 0;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
}
|
||||
:root {
|
||||
/* Palette */
|
||||
--color-charcoal: #1a1a1a;
|
||||
--color-cream: #f8f5f0;
|
||||
--color-electric-blue: #00b4d8;
|
||||
|
||||
/* Semantic Colors - Light Mode Default */
|
||||
--bg-body: var(--color-cream);
|
||||
--text-body: var(--color-charcoal);
|
||||
--bg-surface: #ffffff;
|
||||
--border-subtle: color-mix(in srgb, var(--color-charcoal), transparent 90%);
|
||||
--shadow-soft: 0 4px 20px -2px color-mix(in srgb, var(--color-charcoal), transparent 90%);
|
||||
|
||||
/* Typography */
|
||||
--font-sans: 'Inter', system-ui, -apple-system, sans-serif;
|
||||
|
||||
/* BS Overrides */
|
||||
--bs-body-bg: var(--bg-body);
|
||||
--bs-body-color: var(--text-body);
|
||||
--bs-primary: var(--color-electric-blue);
|
||||
--bs-primary-rgb: 0, 180, 216;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
/* Semantic Colors - Dark Mode */
|
||||
--bg-body: var(--color-charcoal);
|
||||
--text-body: var(--color-cream);
|
||||
--bg-surface: color-mix(in srgb, var(--color-cream), transparent 95%);
|
||||
--border-subtle: color-mix(in srgb, var(--color-cream), transparent 85%);
|
||||
--shadow-soft: 0 4px 20px -2px black;
|
||||
|
||||
/* BS Overrides */
|
||||
--bs-body-bg: var(--bg-body);
|
||||
--bs-body-color: var(--text-body);
|
||||
--bs-dark: #121212;
|
||||
}
|
||||
}
|
||||
|
||||
/* Global Reset & Base */
|
||||
body {
|
||||
font-family: var(--font-sans);
|
||||
background-color: var(--bg-body);
|
||||
color: var(--text-body);
|
||||
line-height: 1.6;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
transition: background-color 0.3s ease, color 0.3s ease;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--color-electric-blue);
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
transition: text-decoration-color 0.2s;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
text-decoration-thickness: 2px;
|
||||
text-underline-offset: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Typography Enhancements */
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-weight: 800;
|
||||
letter-spacing: -0.03em;
|
||||
color: currentColor;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: clamp(2.5rem, 5vw, 4rem);
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: clamp(1.75rem, 3vw, 2.5rem);
|
||||
margin-top: 3rem;
|
||||
padding-bottom: 0.5rem;
|
||||
border-bottom: 2px solid var(--color-electric-blue);
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
header {
|
||||
background-color: var(--bg-body);
|
||||
padding: 3rem 1rem;
|
||||
margin-bottom: 2rem;
|
||||
|
||||
h1 {
|
||||
color: var(--color-electric-blue) !important; /* Force override inline style if present, ideally remove inline */
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 1.25rem;
|
||||
opacity: 0.8;
|
||||
max-width: 600px;
|
||||
margin-inline: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* Cards (Services & Portfolio) */
|
||||
.card {
|
||||
background-color: var(--bg-surface);
|
||||
border: 1px solid var(--border-subtle);
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.3s ease;
|
||||
height: 100%;
|
||||
|
||||
/* Scroll Animation Entry */
|
||||
view-timeline-name: --card-entry;
|
||||
view-timeline-axis: block;
|
||||
animation: fade-in-up linear both;
|
||||
animation-timeline: view();
|
||||
animation-range: entry 10% cover 20%;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-4px) scale(1.01);
|
||||
box-shadow: var(--shadow-soft);
|
||||
border-color: var(--color-electric-blue);
|
||||
}
|
||||
|
||||
.card-img-top {
|
||||
aspect-ratio: 16/9;
|
||||
object-fit: cover;
|
||||
transition: transform 0.5s ease;
|
||||
}
|
||||
|
||||
&:hover .card-img-top {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.card-body {
|
||||
padding: 1.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
h5.card-title {
|
||||
font-size: 1.25rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
p.card-text {
|
||||
font-size: 0.95rem;
|
||||
opacity: 0.9;
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* List Group (Services) */
|
||||
.list-group {
|
||||
--bs-list-group-bg: transparent;
|
||||
--bs-list-group-border-color: var(--border-subtle);
|
||||
|
||||
.list-group-item {
|
||||
background-color: var(--bg-surface);
|
||||
border-color: var(--border-subtle);
|
||||
font-weight: 500;
|
||||
transition: background-color 0.2s;
|
||||
|
||||
&:hover {
|
||||
background-color: color-mix(in srgb, var(--color-electric-blue), transparent 95%);
|
||||
border-left: 4px solid var(--color-electric-blue);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
footer {
|
||||
background-color: var(--color-charcoal) !important;
|
||||
color: var(--color-cream) !important;
|
||||
padding: 3rem 0;
|
||||
margin-top: 5rem;
|
||||
border-top: 4px solid var(--color-electric-blue);
|
||||
|
||||
a {
|
||||
color: var(--color-cream);
|
||||
opacity: 0.7;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
color: var(--color-electric-blue);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Animations */
|
||||
@keyframes fade-in-up {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Container Queries for Responsive Typography inside cards if needed */
|
||||
.card-body {
|
||||
container-type: inline-size;
|
||||
}
|
||||
|
||||
@container (max-width: 300px) {
|
||||
.card-title {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Utility Overrides for Bootstrap Buttons to match theme */
|
||||
.btn-primary {
|
||||
background-color: var(--color-electric-blue);
|
||||
border-color: var(--color-electric-blue);
|
||||
color: white; /* Electric blue needs white text for contrast */
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
font-size: 0.85rem;
|
||||
letter-spacing: 0.05em;
|
||||
padding: 0.6em 1.2em;
|
||||
border-radius: 50px; /* Pill shape */
|
||||
|
||||
&:hover, &:focus, &:active {
|
||||
background-color: color-mix(in srgb, var(--color-electric-blue), black 10%) !important;
|
||||
border-color: color-mix(in srgb, var(--color-electric-blue), black 10%) !important;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user