/* -------------------------------------------------------------- styles_index.css – styling for index.html -------------------------------------------------------------- */ /* -------------------------------------------------------------- 1️⃣ Colour palette – defined as CSS custom properties (variables) -------------------------------------------------------------- */ :root { /* Light‑mode defaults */ --bg-color: #ffffff; --text-color: #111111; --accent-color: #bfc147; /* title accent */ --link-color: #c147a3; /* matches original a {color} */ --highlight-bg: #e6ffe6; /* for “keys.openpgp.org” */ --code-bg: #f5f5f5; } /* Dark‑mode overrides – activated when */ [data-theme="dark"] { --bg-color: #000000; --text-color: #e0e0e0; --accent-color: #bfc147; --link-color: #c147a3; --highlight-bg: #003300; --code-bg: #1a1a1a; } /* -------------------------------------------------------------- 2️⃣ Global resets & base styling -------------------------------------------------------------- */ html { box-sizing: border-box; font-size: 100%; /* 1rem = 16px (adjustable by user) */ } *, *::before, *::after { box-sizing: inherit; margin: 0; padding: 0; } /* Body – uses the custom variables */ body { background-color: var(--bg-color); color: var(--text-color); line-height: 1.6; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; margin: 0 auto; max-width: 800px; /* Keeps content readable on wide screens */ padding: 2rem 6%; } /* -------------------------------------------------------------- 3️⃣ Layout components -------------------------------------------------------------- */ .site-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; } .site-title { font-size: 2.2rem; color: var(--accent-color); margin: 0; } /* Theme‑toggle button – minimal styling */ .theme-toggle { background: none; border: 2px solid var(--link-color); border-radius: 0.4rem; color: var(--link-color); cursor: pointer; font-size: 1rem; padding: 0.3rem 0.6rem; transition: background-color 0.2s ease, color 0.2s ease; } .theme-toggle:hover, .theme-toggle:focus { background-color: var(--link-color); color: var(--bg-color); } /* Main content area */ .content { font-size: 1rem; } /* Paragraph spacing */ .content p { margin-bottom: 1.2rem; } /* Links – use the variable for colour, underline on hover */ a { color: var(--link-color); text-decoration: none; } a:hover, a:focus { text-decoration: underline; } /* Highlighted text (the “keys.openpgp.org” span) */ .highlight { background-color: var(--highlight-bg); padding: 0.1rem 0.3rem; border-radius: 0.2rem; } /* Fingerprint / code blocks – monospaced styling */ .fingerprint, code { font-family: "Courier New", Courier, monospace; background-color: var(--code-bg); padding: 0.15rem 0.35rem; border-radius: 0.3rem; word-break: break-all; } /* -------------------------------------------------------------- 4️⃣ Responsive tweaks -------------------------------------------------------------- */ @media (max-width: 480px) { .site-title { font-size: 1.8rem; } .theme-toggle { font-size: 0.9rem; padding: 0.2rem 0.5rem; } } .stealth-link { position: fixed; /* or absolute inside a container */ bottom: 0.5rem; right: 0.5rem; opacity: 0.15; /* barely visible */ transition: opacity .2s; } .stealth-link:hover { opacity: 0.8; } /* -------------------------------------------------------------- 5️⃣ Preserve original comment block (do NOT delete) -------------------------------------------------------------- */ /* https://sss08.pages.dev */