/* base.css - shared variables and minimal resets used by all pages */
/*
* NOTE: The Lexend font used as the primary body font is NOT loaded here.
* Every page that includes base.css MUST load Lexend via tags in its
* (before base.css) to avoid falling back to system fonts:
*
*
*
*
*/
:root {
--bg-color: #ffffff;
--text-color: #1a1a1a;
--card-bg: #f5f5f5;
--card-hover: #e8e8e8;
--border-color: #e0e0e0;
--shadow: rgba(0, 0, 0, 0.1);
--accent-color: #667eea;
--link-transition:
color 0.18s ease, background 0.18s ease, transform 0.12s ease;
}
[data-theme="dark"] {
--bg-color: #1a1a1a;
--text-color: #ffffff;
--card-bg: #2d2d2d;
--card-hover: #3a3a3a;
--border-color: #404040;
--shadow: rgba(0, 0, 0, 0.3);
--accent-color: #8b9dff;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
/* Primary site font: Lexend (fallbacks provided) */
font-family:
"Lexend",
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
Roboto,
"Helvetica Neue",
Arial,
sans-serif;
/* Base font size tuned for readability */
font-size: 18px;
background: var(--bg-color);
color: var(--text-color);
transition:
background-color 0.18s ease,
color 0.18s ease;
min-height: 100vh;
line-height: 1.6;
padding: 20px 16px;
/* ensure content isn't obscured by a fixed footer */
padding-bottom: 120px; /* avoid fixed footer overlap */
}
@media (max-width: 768px) {
/* slightly smaller base on phones */
body {
font-size: 16px;
}
}
/* SLF Dreamer font used by footer copyright */
@font-face {
font-family: "Slfdreamer";
src: url("assetlab/faces/Slfdreamer-Regular.ttf") format("truetype");
font-weight: normal;
font-style: normal;
font-display: swap;
}
/* theme toggle basics used by multiple pages */
.theme-toggle {
position: fixed;
top: 20px;
right: 20px;
background: var(--card-bg);
border: 2px solid var(--border-color);
border-radius: 50%;
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 1000;
transition:
transform 0.18s ease,
background 0.18s ease,
box-shadow 0.18s ease;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
}
.theme-toggle:hover {
background: var(--card-hover);
transform: rotate(12deg);
}
.theme-toggle svg {
width: 24px;
height: 24px;
color: var(--text-color);
}
@media (max-width: 768px) {
/* keep theme toggle sizing consistent across all pages */
.theme-toggle {
width: 45px;
height: 45px;
top: 15px;
right: 15px;
}
}
/* sun/moon visibility */
.sun-icon {
display: none;
}
.moon-icon {
display: block;
}
[data-theme="dark"] .sun-icon {
display: block;
}
[data-theme="dark"] .moon-icon {
display: none;
}
/* avatar / profile basics */
.avatar {
width: 80px;
height: 80px;
border-radius: 50%;
overflow: hidden;
background: var(--card-bg);
border: 4px solid var(--border-color);
display: flex;
align-items: center;
justify-content: center;
}
.avatar-img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* SLFMacro font for site title */
@font-face {
font-family: "SLFMacro";
src: url("assetlab/faces/Slfmacro-Regular.ttf") format("truetype");
font-weight: normal;
font-style: normal;
font-display: swap;
}
/* footer shared rule */
footer.site-footer {
position: fixed;
left: 0;
right: 0;
bottom: 0;
background: var(--card-bg);
border-top: 1px solid var(--border-color);
padding: 10px 16px;
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
}
/* Keep footer copyright in SLF Dreamer */
footer.site-footer .footer-copyright {
font-family:
"Slfdreamer",
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
Roboto,
"Helvetica Neue",
Arial,
sans-serif;
}
/* link/button groups baseline */
.links {
display: flex;
flex-direction: column;
gap: 16px;
}
.link-button {
text-decoration: none;
border-radius: 10px;
padding: 14px 18px;
display: flex;
align-items: center;
justify-content: center;
}
/* code token baseline colors (may be overridden per page) */
.token-tag {
color: #d97316;
}
.token-attr {
color: #60a5fa;
}
.token-string {
color: #10b981;
}
.token-link {
color: #7dd3fc;
}