Update website retro theme styles

This commit is contained in:
juvdiaz 2026-06-10 15:14:00 -06:00
parent b45cd2d508
commit a270c6eca4
1 changed files with 134 additions and 25 deletions

View File

@ -1314,7 +1314,7 @@ body.home-page.theme-dark {
.theme-dark.home-page .hero-image img {
border-radius: 0;
border: 2px solid #a8ffb0;
filter: saturate(0.8) contrast(1.08);
filter: grayscale(1) contrast(1.12);
}
.theme-dark .cv-header-text {
@ -1331,7 +1331,7 @@ body.home-page.theme-dark {
.theme-dark .cv-portrait-img {
border-radius: 0;
border: 2px solid #a8ffb0;
filter: saturate(0.8) contrast(1.08);
filter: grayscale(1) contrast(1.12);
}
body.theme-dark {
@ -2029,11 +2029,15 @@ body.theme-dark {
}
body.theme-light {
background: #fffff0;
color: #1b1610;
font-family: "Brush Script MT", "Segoe Script", "Snell Roundhand", "Apple Chancery", cursive;
font-size: 1.12rem;
line-height: 1.68;
background:
linear-gradient(rgba(36, 92, 52, 0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(36, 92, 52, 0.04) 1px, transparent 1px),
#f4f0df;
background-size: 22px 22px;
color: #151a12;
font-family: "Courier New", "Lucida Console", Monaco, monospace;
font-size: 1rem;
line-height: 1.58;
}
body.theme-dark .top-nav,
@ -2144,6 +2148,12 @@ body.theme-dark .diagram-link {
stroke: #39ff14;
}
body.theme-dark .profile-img,
body.theme-dark.home-page .hero-image img,
body.theme-dark .cv-portrait-img {
filter: grayscale(1) contrast(1.12);
}
body.theme-light .top-nav,
body.theme-light .site-theme-toolbar,
body.theme-light .nav-left,
@ -2157,7 +2167,7 @@ body.theme-light h2,
body.theme-light h3,
body.theme-light h4,
body.theme-light strong {
color: #1b1610;
color: #162316;
font-family: inherit;
}
@ -2173,7 +2183,7 @@ body.theme-light .cta,
body.theme-light .diagram-caption,
body.theme-light .source-links span,
body.theme-light .visitor-idea-card footer {
color: #1b1610;
color: #263421;
}
body.theme-light .container,
@ -2199,10 +2209,63 @@ body.theme-light .cv-skill-grid article,
body.theme-light .cv-recruiter-panel,
body.theme-light .cv-proof-section,
body.theme-light .cv-skill-section {
background: #fffff0;
border-color: #1b1610;
color: #1b1610;
box-shadow: none;
background:
linear-gradient(180deg, #245c34 0 14px, transparent 14px),
#fbf7e6;
border: 2px solid #151a12;
border-radius: 3px;
color: #263421;
box-shadow: 5px 5px 0 #245c34;
}
body.theme-light .blog-hero,
body.theme-light .demos-hero {
padding: 22px;
}
body.theme-light .home-proof-card span,
body.theme-light .case-card span,
body.theme-light .blog-kicker,
body.theme-light .section-kicker,
body.theme-light .demo-label,
body.theme-light .activity-number {
color: #0f6b2d;
}
body.theme-light .message.question {
border-left-color: #586e2f;
}
body.theme-light .message.answer {
border-left-color: #0f6b2d;
}
body.theme-light .top-nav,
body.theme-light .site-theme-toolbar {
background: #fbf7e6;
border: 2px solid #151a12;
border-radius: 3px;
padding: 10px 12px;
box-shadow: 4px 4px 0 #245c34;
}
body.theme-light .nav-left::before {
content: "tux@homelab:~$ ";
color: #0f6b2d;
}
body.theme-light.home-page .hero-text h1,
body.theme-light .cv-header-text h1 {
color: #162316;
font-family: inherit;
font-size: clamp(2.2rem, 6vw, 3.1rem);
font-weight: 900;
letter-spacing: 0;
}
body.theme-light.home-page .hero-role {
color: #0f6b2d;
font-weight: 900;
}
body.theme-light .hero-actions a,
@ -2210,10 +2273,12 @@ body.theme-light .cv-recruiter-actions a,
body.theme-light .case-card a,
body.theme-light .idea-form button,
body.theme-light .site-theme-option {
background: #fffff0;
border-color: #1b1610;
color: #1b1610;
background: #fbf7e6;
border: 2px solid #151a12;
border-radius: 3px;
color: #151a12;
font-family: inherit;
box-shadow: 3px 3px 0 #245c34;
}
body.theme-light .site-theme-option.is-active,
@ -2221,23 +2286,26 @@ body.theme-light .hero-actions a:hover,
body.theme-light .cv-recruiter-actions a:hover,
body.theme-light .case-card a:hover,
body.theme-light .idea-form button:hover {
background: #1b1610;
color: #fffff0;
background: #151a12;
color: #d6ff7a;
transform: translate(1px, 1px);
box-shadow: 2px 2px 0 #245c34;
}
body.theme-light .idea-form input,
body.theme-light .idea-form textarea,
body.theme-light .diagram-shell {
background: #fffff0;
border-color: #1b1610;
color: #1b1610;
background: #fbf7e6;
border: 2px solid #151a12;
border-radius: 3px;
color: #151a12;
font-family: inherit;
}
body.theme-light .diagram-zone,
body.theme-light .diagram-node rect {
fill: #fffff0;
stroke: #1b1610;
fill: #fbf7e6;
stroke: #151a12;
}
body.theme-light .diagram-zone-title,
@ -2245,9 +2313,50 @@ body.theme-light .diagram-node text,
body.theme-light .diagram-link-label,
body.theme-light .diagram-node .diagram-small,
body.theme-light .diagram-small {
fill: #1b1610;
fill: #151a12;
}
body.theme-light .diagram-link {
stroke: #1b1610;
stroke: #0f6b2d;
}
body.theme-light .profile-img,
body.theme-light.home-page .hero-image img,
body.theme-light .cv-portrait-img {
border: 3px solid #151a12;
border-radius: 3px;
box-shadow: 5px 5px 0 #245c34;
filter: sepia(0.14) contrast(1.06) saturate(0.88);
}
body.theme-light .cv-portrait-orbit text {
fill: #0f6b2d;
font-family: inherit;
letter-spacing: 0;
}
body.theme-light .source-links a,
body.theme-light .idea-status-thanks {
background: #eef6cf;
}
body.theme-light .idea-status-invalid,
body.theme-light .idea-status-slow,
body.theme-light .idea-status-error {
background: #ffe9d2;
}
body.theme-light .cruncher-icon,
body.theme-light .demo-icon {
background: #e8efcf;
border: 2px solid #151a12;
border-radius: 3px;
color: #151a12;
box-shadow: 3px 3px 0 #245c34;
}
body.theme-light .network-icon span,
body.theme-light .architecture-icon::before,
body.theme-light .architecture-icon::after {
background: #0f6b2d;
}