/* * Tango Remix — Neocities Edition * ================================ * A complete stylesheet for a multi-page Neocities site. * Tango colour palette with colour-coded heading hierarchy. * System-aware light/dark mode via prefers-color-scheme. * Serif body font for that literary-meets-technical feel. * * Usage: * * * Recommended HTML structure: * *
...
* *
...
* * */ /* ===================================================================== 1. FONTS ===================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,600;0,700;1,400;1,600&family=Source+Code+Pro:wght@400;500&display=swap'); /* * Lora: a beautiful serif with ink-trap character — perfect for Tango Remix. * Source Code Pro: clean monospace for code blocks. * Both load from Google Fonts. If you prefer no external requests, * remove the @import and replace with system fallbacks below. */ /* ===================================================================== 2. CSS VARIABLES — LIGHT MODE (default) ===================================================================== */ :root { /* Surfaces */ --bg: #F4EFE3; --bg-secondary: #EBE4D4; --bg-tertiary: #E0D8C4; --bg-nav: #2D2D2D; --bg-nav-active: #1E1E1E; --bg-card: #EEE7D6; /* Text */ --text: #1C1917; --text-body: #2D2926; --text-light: #6B6560; --text-nav: #E8E8E2; --text-nav-hover: #F57900; /* Tango heading colours — light mode (deeper, ink-on-paper) */ --h1-color: #CE5C00; /* Scarecrow orange */ --h2-color: #4E9A06; /* Chameleon green */ --h3-color: #204A87; /* Sky blue */ --h4-color: #5C3566; /* Plum purple */ --h5-color: #A40000; /* Tomato red */ --h6-color: #8F5902; /* Chocolate brown */ /* Accents & UI */ --accent: #CE5C00; --accent-hover: #A84400; --link: #204A87; --link-hover: #5C3566; --border: #D4CBBA; --border-strong: #B8AC98; --blockquote-bg: #EDE6D5; --code-bg: #E4DCC8; --code-text: #4E9A06; --selection: #C8D8F0; --hr-color: #B8AC98; --strong-color: #A40000; /* Layout */ --max-width: 860px; --nav-height: 52px; --border-radius: 4px; } /* ===================================================================== 3. CSS VARIABLES — DARK MODE ===================================================================== */ @media (prefers-color-scheme: dark) { :root { /* Surfaces */ --bg: #1E1E1E; --bg-secondary: #252525; --bg-tertiary: #2C2C2C; --bg-nav: #141414; --bg-nav-active: #0E0E0E; --bg-card: #252522; /* Text */ --text: #E8E8E2; --text-body: #CECCC4; --text-light: #7A7870; --text-nav: #E8E8E2; --text-nav-hover: #F57900; /* Tango heading colours — dark mode (luminous, glowing) */ --h1-color: #F57900; --h2-color: #73D216; --h3-color: #729FCF; --h4-color: #AD7FA8; --h5-color: #EF2929; --h6-color: #E9B96E; /* Accents & UI */ --accent: #F57900; --accent-hover: #FCAF3E; --link: #729FCF; --link-hover: #F57900; --border: #333330; --border-strong: #4A4A46; --blockquote-bg: #242420; --code-bg: #252522; --code-text: #73D216; --selection: #4A3800; --hr-color: #4A4A46; --strong-color: #EF2929; } } /* ===================================================================== 4. RESET & BASE ===================================================================== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 17px; scroll-behavior: smooth; background-color: var(--bg); color: var(--text-body); } body { font-family: "Lora", "Palatino Linotype", "Georgia", serif; line-height: 1.85; background-color: var(--bg); color: var(--text-body); min-height: 100vh; display: flex; flex-direction: column; -webkit-font-smoothing: antialiased; } /* ===================================================================== 5. NAVIGATION ===================================================================== */ nav { background-color: var(--bg-nav); border-bottom: 2px solid var(--accent); position: sticky; top: 0; z-index: 100; width: 100%; } nav ul { list-style: none; display: flex; align-items: center; max-width: var(--max-width); margin: 0 auto; padding: 0 1.5rem; height: var(--nav-height); gap: 0; flex-wrap: wrap; } nav ul li a { display: block; padding: 0.4rem 1rem; color: var(--text-nav); text-decoration: none; font-family: "Lora", serif; font-size: 0.9rem; letter-spacing: 0.02em; border-bottom: 2px solid transparent; transition: color 0.15s ease, border-color 0.15s ease; } nav ul li a:hover { color: var(--text-nav-hover); border-bottom-color: var(--accent); } nav ul li a.active { color: var(--accent); border-bottom-color: var(--accent); } /* Site title in nav */ nav ul li.site-title a { font-weight: 700; font-size: 1rem; color: var(--accent); margin-right: 1rem; border-bottom: none; padding-left: 0; } nav ul li.site-title a:hover { color: var(--accent-hover); border-bottom: none; } /* ===================================================================== 6. HEADER ===================================================================== */ header { background-color: var(--bg-secondary); border-bottom: 1px solid var(--border); padding: 3rem 1.5rem 2.5rem; text-align: center; } header h1 { font-size: 2.4rem; color: var(--h1-color); letter-spacing: -0.02em; margin-bottom: 0.4rem; border: none; padding: 0; margin-top: 0; } header p.tagline { font-size: 1rem; color: var(--text-light); font-style: italic; max-width: 520px; margin: 0 auto; } /* ===================================================================== 7. MAIN CONTENT AREA ===================================================================== */ main { max-width: var(--max-width); width: 100%; margin: 0 auto; padding: 2.5rem 1.5rem 4rem; flex: 1; } /* ===================================================================== 8. HEADINGS ===================================================================== */ h1, h2, h3, h4, h5, h6 { font-family: "Lora", "Georgia", serif; line-height: 1.25; font-weight: 700; margin: 1.9em 0 0.5em; } h1 { font-size: 2rem; color: var(--h1-color); letter-spacing: -0.02em; border-bottom: 2px solid var(--h1-color); padding-bottom: 0.3em; } h2 { font-size: 1.5rem; color: var(--h2-color); letter-spacing: -0.01em; border-bottom: 1px solid var(--border); padding-bottom: 0.2em; } h3 { font-size: 1.2rem; color: var(--h3-color); } h4 { font-size: 1rem; color: var(--h4-color); font-style: italic; font-weight: 400; } h5 { font-size: 0.9rem; color: var(--h5-color); text-transform: uppercase; letter-spacing: 0.08em; } h6 { font-size: 0.85rem; color: var(--h6-color); font-style: italic; font-weight: 400; } /* ===================================================================== 9. PARAGRAPHS & TEXT ===================================================================== */ p { margin: 0 0 1.1em; color: var(--text-body); } strong, b { font-weight: 700; color: var(--strong-color); } em, i { font-style: italic; } small { font-size: 0.85rem; color: var(--text-light); } /* ===================================================================== 10. LINKS ===================================================================== */ a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; transition: color 0.15s ease; } a:hover { color: var(--link-hover); } /* ===================================================================== 11. HORIZONTAL RULE ===================================================================== */ hr { border: none; border-top: 1px solid var(--hr-color); margin: 2.5em 0; } /* ===================================================================== 12. BLOCKQUOTE ===================================================================== */ blockquote { margin: 1.2em 0; padding: 0.8em 1.2em; border-left: 3px solid var(--h6-color); background-color: var(--blockquote-bg); color: var(--text-light); font-style: italic; font-size: 0.97rem; line-height: 1.75; border-radius: 0 var(--border-radius) var(--border-radius) 0; } blockquote p { margin: 0 0 0.5em; color: var(--text-light); } blockquote p:last-child { margin-bottom: 0; } blockquote blockquote { margin: 0.5em 0; border-left-color: var(--border); background-color: transparent; } /* ===================================================================== 13. CODE ===================================================================== */ code { font-family: "Source Code Pro", "Menlo", "Consolas", monospace; font-size: 0.83em; background-color: var(--code-bg); color: var(--code-text); padding: 0.15em 0.45em; border-radius: var(--border-radius); border: 1px solid var(--border); } pre { background-color: var(--bg-secondary); border: 1px solid var(--border-strong); border-left: 3px solid var(--h2-color); border-radius: var(--border-radius); padding: 1.2em 1.4em; overflow-x: auto; margin: 1.2em 0; } pre code { background: none; border: none; padding: 0; font-size: 0.85rem; color: var(--text-body); line-height: 1.6; } /* ===================================================================== 14. LISTS ===================================================================== */ ul, ol { padding-left: 1.7em; margin: 0.5em 0 1em; } li { margin-bottom: 0.35em; line-height: 1.85; color: var(--text-body); } ul li::marker { color: var(--accent); } ol li::marker { color: var(--h3-color); font-weight: 700; } /* ===================================================================== 15. TABLES ===================================================================== */ table { width: 100%; border-collapse: collapse; margin: 1.5em 0; font-size: 0.92rem; overflow-x: auto; display: block; } thead tr { border-bottom: 2px solid var(--accent); background-color: var(--bg-tertiary); } th { text-align: left; font-weight: 700; padding: 0.6em 0.9em; color: var(--accent); font-family: "Lora", serif; white-space: nowrap; } td { padding: 0.5em 0.9em; border-bottom: 1px solid var(--border); color: var(--text-body); } tr:nth-child(even) td { background-color: var(--bg-secondary); } tr:last-child td { border-bottom: none; } /* ===================================================================== 16. IMAGES ===================================================================== */ img { max-width: 100%; height: auto; border-radius: var(--border-radius); display: block; border: 1px solid var(--border); } figure { margin: 1.5em 0; } figcaption { font-size: 0.85rem; color: var(--text-light); font-style: italic; margin-top: 0.5em; text-align: center; } /* ===================================================================== 17. CARDS — useful for profile pages, post listings, link collections ===================================================================== */ .card { background-color: var(--bg-card); border: 1px solid var(--border); border-radius: var(--border-radius); padding: 1.2em 1.4em; margin: 1em 0; transition: border-color 0.15s ease; } .card:hover { border-color: var(--accent); } .card h3 { margin-top: 0; font-size: 1.05rem; } .card p:last-child { margin-bottom: 0; } /* Card grid for link collections etc */ .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; margin: 1.5em 0; } /* ===================================================================== 18. BADGE / TAG — for interests, categories, skills ===================================================================== */ .badge { display: inline-block; font-family: "Source Code Pro", monospace; font-size: 0.75rem; padding: 0.2em 0.6em; border-radius: var(--border-radius); border: 1px solid var(--border-strong); background-color: var(--bg-secondary); color: var(--text-light); margin: 0.15em; text-decoration: none; transition: border-color 0.15s, color 0.15s; } .badge:hover { border-color: var(--accent); color: var(--accent); } /* Coloured badge variants */ .badge-orange { border-color: var(--h1-color); color: var(--h1-color); } .badge-green { border-color: var(--h2-color); color: var(--h2-color); } .badge-blue { border-color: var(--h3-color); color: var(--h3-color); } .badge-purple { border-color: var(--h4-color); color: var(--h4-color); } .badge-red { border-color: var(--h5-color); color: var(--h5-color); } .badge-gold { border-color: var(--h6-color); color: var(--h6-color); } /* ===================================================================== 19. NOW PLAYING / STATUS BOX — very Neocities ===================================================================== */ .status-box { display: inline-flex; align-items: center; gap: 0.6em; background-color: var(--bg-secondary); border: 1px solid var(--border); border-left: 3px solid var(--h2-color); border-radius: var(--border-radius); padding: 0.5em 0.9em; font-size: 0.85rem; color: var(--text-light); margin: 0.5em 0; } .status-box .status-label { color: var(--h2-color); font-weight: 700; font-family: "Source Code Pro", monospace; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; } /* ===================================================================== 20. PROFILE SECTION ===================================================================== */ .profile { display: flex; gap: 1.5rem; align-items: flex-start; margin: 1.5em 0; flex-wrap: wrap; } .profile-avatar { width: 100px; height: 100px; border-radius: 50%; border: 2px solid var(--accent); object-fit: cover; flex-shrink: 0; } .profile-info { flex: 1; min-width: 200px; } .profile-info h2 { margin-top: 0; border: none; padding: 0; } /* ===================================================================== 21. FOOTER ===================================================================== */ footer { background-color: var(--bg-nav); border-top: 2px solid var(--accent); padding: 1.5rem; text-align: center; font-size: 0.85rem; color: var(--text-light); margin-top: auto; } footer a { color: var(--accent); } footer a:hover { color: var(--accent-hover); } /* ===================================================================== 22. UTILITY CLASSES ===================================================================== */ .text-center { text-align: center; } .text-right { text-align: right; } .text-muted { color: var(--text-light); } .text-small { font-size: 0.85rem; } .text-mono { font-family: "Source Code Pro", monospace; } .mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; } .mt-1 { margin-top: 1rem; } .mb-1 { margin-bottom: 1rem; } .mt-2 { margin-top: 2rem; } .mb-2 { margin-bottom: 2rem; } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; } /* ===================================================================== 23. SELECTION ===================================================================== */ ::selection { background-color: var(--selection); color: var(--text); } /* ===================================================================== 24. SCROLLBAR ===================================================================== */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: var(--bg); } ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--text-light); } /* ===================================================================== 25. RESPONSIVE ===================================================================== */ @media (max-width: 600px) { html { font-size: 16px; } header { padding: 2rem 1rem 1.5rem; } header h1 { font-size: 1.8rem; } main { padding: 1.5rem 1rem 3rem; } nav ul { padding: 0 0.75rem; height: auto; min-height: var(--nav-height); } nav ul li a { padding: 0.35rem 0.6rem; font-size: 0.85rem; } .profile { flex-direction: column; } .card-grid { grid-template-columns: 1fr; } table { font-size: 0.85rem; } } /* ===================================================================== EXAMPLE HTML STRUCTURE — copy and adapt for your pages ===================================================================== Your Site — Page Name

Page Title

A short description or tagline.

Daniel

Daniel C. Bush

Writer, blogger, BSD enthusiast. Held back by upādāna.

BSD Ruby Writing Buddhism
Reading Chronic City — Jonathan Lethem

Latest Writing

Nothing Has Any Intrinsic Value

An essay on Buddhism and nihilism.

Vistas of Understanding

Searching for meaning across belief systems.

===================================================================== */