Build Dangerous Wonder website — 8-page utopian-scholastic site with DK book aesthetic
- Static HTML/CSS/JS site with late-90s/early-2000s hidden-gem feel - White background, serif fonts (Georgia), drop-shadow images, colored section bars - 8 pages: Home, Natural World, Inventions, Phenomena, Maps & Places, Human Body, Space, About - Fun 90s touches: fake visitor counter, 'Best viewed at 1024x768', Konami code easter egg - All content fact-checked and corrected across all pages - Key corrections: Pando age, patent numbers, neutron star density, synesthesia history, DRC/Greenland size comparison, Derinkuyu depth, rogue planet designation, and many more
This commit is contained in:
577
css/style.css
Normal file
577
css/style.css
Normal file
@@ -0,0 +1,577 @@
|
||||
/* ============================================
|
||||
DANGEROUS WONDER
|
||||
A Field Guide to Everything Worth Knowing
|
||||
Est. 1999
|
||||
|
||||
Style: Utopian Scholastic / DK Book Aesthetic
|
||||
Era feel: Late 90s-early 2000s web
|
||||
============================================ */
|
||||
|
||||
/* --- Reset & Base --- */
|
||||
*, *::before, *::after {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: Georgia, 'Times New Roman', Times, serif;
|
||||
background-color: #ffffff;
|
||||
color: #2c2c2c;
|
||||
line-height: 1.6;
|
||||
min-height: 100vh;
|
||||
|
||||
}
|
||||
|
||||
a {
|
||||
color: #1a3a5c;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: #5c2d6e;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #b8860b;
|
||||
}
|
||||
|
||||
a:active {
|
||||
color: #8b0000;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/* --- Layout --- */
|
||||
.page-wrapper {
|
||||
max-width: 820px;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.page-wrapper-wide {
|
||||
max-width: 960px;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
/* --- Site Header --- */
|
||||
.site-header {
|
||||
border-bottom: 3px double #8b7355;
|
||||
padding: 20px 0 10px 0;
|
||||
margin-bottom: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.site-title {
|
||||
font-size: 2.8rem;
|
||||
font-weight: normal;
|
||||
letter-spacing: 0.08em;
|
||||
color: #1a3a5c;
|
||||
text-shadow: 1px 1px 0 rgba(0,0,0,0.08);
|
||||
margin: 0;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.site-title a {
|
||||
text-decoration: none;
|
||||
color: #1a3a5c;
|
||||
}
|
||||
|
||||
.site-title a:visited {
|
||||
color: #1a3a5c;
|
||||
}
|
||||
|
||||
.site-subtitle {
|
||||
font-size: 1.05rem;
|
||||
font-style: italic;
|
||||
color: #8b7355;
|
||||
margin-top: 4px;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
/* --- Navigation --- */
|
||||
.site-nav {
|
||||
background: #1a3a5c;
|
||||
padding: 6px 0;
|
||||
border-bottom: 2px solid #b8860b;
|
||||
}
|
||||
|
||||
.site-nav ul {
|
||||
list-style: none;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.site-nav li {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.site-nav a {
|
||||
display: inline-block;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
padding: 6px 14px;
|
||||
font-family: Georgia, serif;
|
||||
font-size: 0.92rem;
|
||||
letter-spacing: 0.03em;
|
||||
border-right: 1px solid rgba(255,255,255,0.2);
|
||||
transition: background 0.15s;
|
||||
}
|
||||
|
||||
.site-nav li:last-child a {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.site-nav a:hover {
|
||||
background: #2c5a8c;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.site-nav a:visited {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.site-nav a.active {
|
||||
background: #b8860b;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* --- Section Colors --- */
|
||||
.section-natural-world { border-color: #2d6a2d; }
|
||||
.section-natural-world .section-bar { background: #2d6a2d; }
|
||||
.section-natural-world .section-header { color: #2d6a2d; }
|
||||
|
||||
.section-inventions { border-color: #b8860b; }
|
||||
.section-inventions .section-bar { background: #b8860b; }
|
||||
.section-inventions .section-header { color: #b8860b; }
|
||||
|
||||
.section-phenomena { border-color: #5c2d6e; }
|
||||
.section-phenomena .section-bar { background: #5c2d6e; }
|
||||
.section-phenomena .section-header { color: #5c2d6e; }
|
||||
|
||||
.section-maps { border-color: #8b4513; }
|
||||
.section-maps .section-bar { background: #8b4513; }
|
||||
.section-maps .section-header { color: #8b4513; }
|
||||
|
||||
.section-human-body { border-color: #a0522d; }
|
||||
.section-human-body .section-bar { background: #a0522d; }
|
||||
.section-human-body .section-header { color: #a0522d; }
|
||||
|
||||
.section-space { border-color: #1a3a5c; }
|
||||
.section-space .section-bar { background: #1a3a5c; }
|
||||
.section-space .section-header { color: #1a3a5c; }
|
||||
|
||||
.section-about { border-color: #8b7355; }
|
||||
.section-about .section-bar { background: #8b7355; }
|
||||
.section-about .section-header { color: #8b7355; }
|
||||
|
||||
/* --- Page Header (Section) --- */
|
||||
.section-bar {
|
||||
padding: 8px 16px;
|
||||
color: #fff;
|
||||
font-size: 0.82rem;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
font-variant: small-caps;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
padding: 0;
|
||||
margin: 24px 0 6px 0;
|
||||
font-size: 1.9rem;
|
||||
font-weight: normal;
|
||||
letter-spacing: 0.02em;
|
||||
line-height: 1.2;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.section-header-sub {
|
||||
font-size: 1rem;
|
||||
font-style: italic;
|
||||
color: #8b7355;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
/* --- Breadcrumbs --- */
|
||||
.breadcrumbs {
|
||||
font-size: 0.82rem;
|
||||
color: #8b7355;
|
||||
padding: 10px 0 2px 0;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.breadcrumbs a {
|
||||
color: #8b7355;
|
||||
}
|
||||
|
||||
/* --- Content Blocks --- */
|
||||
.content-section {
|
||||
margin: 30px 0;
|
||||
}
|
||||
|
||||
.content-section h2 {
|
||||
font-size: 1.45rem;
|
||||
font-weight: normal;
|
||||
color: #1a3a5c;
|
||||
border-bottom: 1px solid #d4c9a8;
|
||||
padding-bottom: 6px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.content-section h3 {
|
||||
font-size: 1.15rem;
|
||||
font-weight: bold;
|
||||
color: #3c3c3c;
|
||||
margin: 18px 0 6px 0;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
/* --- Images (DK Book Style) --- */
|
||||
.figure {
|
||||
margin: 24px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.figure img {
|
||||
border: 3px solid #fff;
|
||||
box-shadow: 3px 4px 8px rgba(0,0,0,0.28), 0 1px 3px rgba(0,0,0,0.12);
|
||||
max-width: 100%;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.figure-right {
|
||||
float: right;
|
||||
margin: 0 0 16px 24px;
|
||||
max-width: 280px;
|
||||
}
|
||||
|
||||
.figure-left {
|
||||
float: left;
|
||||
margin: 0 24px 16px 0;
|
||||
max-width: 280px;
|
||||
}
|
||||
|
||||
.figure-caption {
|
||||
font-size: 0.85rem;
|
||||
font-style: italic;
|
||||
color: #6b6b6b;
|
||||
margin-top: 8px;
|
||||
line-height: 1.4;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Clear floats */
|
||||
.clearfix::after {
|
||||
content: '';
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
/* --- Fact Boxes (Sidebar style) --- */
|
||||
.fact-box {
|
||||
background: #f5f0e0;
|
||||
border: 1px solid #d4c9a8;
|
||||
padding: 16px 18px;
|
||||
margin: 20px 0;
|
||||
font-size: 0.92rem;
|
||||
}
|
||||
|
||||
.fact-box h4 {
|
||||
font-size: 0.88rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
color: #8b7355;
|
||||
margin-bottom: 8px;
|
||||
font-variant: small-caps;
|
||||
}
|
||||
|
||||
.fact-box p {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.fact-box ul {
|
||||
margin: 6px 0 6px 20px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.fact-box li {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
/* --- Home Page Card Grid --- */
|
||||
.card-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 20px;
|
||||
margin: 30px 0;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: #fff;
|
||||
border: 1px solid #d4c9a8;
|
||||
text-align: center;
|
||||
transition: box-shadow 0.2s, transform 0.15s;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
color: #2c2c2c;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
box-shadow: 4px 5px 12px rgba(0,0,0,0.18);
|
||||
transform: translateY(-2px);
|
||||
text-decoration: none;
|
||||
color: #2c2c2c;
|
||||
}
|
||||
|
||||
.card:visited {
|
||||
color: #2c2c2c;
|
||||
}
|
||||
|
||||
.card-image {
|
||||
width: 100%;
|
||||
height: 180px;
|
||||
object-fit: cover;
|
||||
border-bottom: 2px solid #d4c9a8;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.card-body {
|
||||
padding: 14px 14px 16px;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 1.2rem;
|
||||
font-weight: normal;
|
||||
color: #1a3a5c;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.card-text {
|
||||
font-size: 0.85rem;
|
||||
color: #6b6b6b;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* DK-style colored header bars on cards */
|
||||
.card-header-bar {
|
||||
height: 6px;
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* --- Numbered/Fact Lists --- */
|
||||
.fact-list {
|
||||
list-style: none;
|
||||
counter-reset: fact-counter;
|
||||
padding: 0;
|
||||
margin: 16px 0;
|
||||
}
|
||||
|
||||
.fact-list li {
|
||||
counter-increment: fact-counter;
|
||||
margin-bottom: 14px;
|
||||
padding-left: 36px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.fact-list li::before {
|
||||
content: counter(fact-counter);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
font-size: 1.4rem;
|
||||
font-weight: bold;
|
||||
color: #b8860b;
|
||||
font-family: Georgia, serif;
|
||||
}
|
||||
|
||||
.fact-list li p {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* --- Horizontal Rule (DK book style) --- */
|
||||
.dk-rule {
|
||||
border: none;
|
||||
height: 2px;
|
||||
background: linear-gradient(to right, #d4c9a8 0%, #b8860b 50%, #d4c9a8 100%);
|
||||
margin: 30px 0;
|
||||
}
|
||||
|
||||
.dk-rule-thin {
|
||||
border: none;
|
||||
height: 1px;
|
||||
background: #d4c9a8;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
/* --- Did You Know? Box --- */
|
||||
.did-you-know {
|
||||
background: #1a3a5c;
|
||||
color: #fff;
|
||||
padding: 18px 22px;
|
||||
margin: 28px 0;
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.did-you-know strong {
|
||||
color: #b8860b;
|
||||
font-variant: small-caps;
|
||||
letter-spacing: 0.08em;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
/* --- Pull Quote --- */
|
||||
.pull-quote {
|
||||
border-left: 4px solid #b8860b;
|
||||
padding: 12px 20px;
|
||||
margin: 24px 0;
|
||||
font-size: 1.15rem;
|
||||
font-style: italic;
|
||||
color: #4a4a4a;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* --- Table of Contents / Index (for About page) --- */
|
||||
.toc {
|
||||
columns: 2;
|
||||
column-gap: 30px;
|
||||
margin: 16px 0;
|
||||
}
|
||||
|
||||
.toc ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.toc li {
|
||||
margin-bottom: 6px;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
/* --- Footer --- */
|
||||
.site-footer {
|
||||
border-top: 3px double #8b7355;
|
||||
margin-top: 40px;
|
||||
padding: 20px 0;
|
||||
text-align: center;
|
||||
font-size: 0.82rem;
|
||||
color: #8b7355;
|
||||
}
|
||||
|
||||
.site-footer p {
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.visitor-counter {
|
||||
display: inline-block;
|
||||
background: #000;
|
||||
color: #0f0;
|
||||
font-family: 'Courier New', Courier, monospace;
|
||||
font-size: 0.85rem;
|
||||
padding: 3px 10px;
|
||||
letter-spacing: 0.12em;
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
.footer-badge {
|
||||
font-style: italic;
|
||||
font-size: 0.78rem;
|
||||
color: #a09878;
|
||||
margin-top: 6px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.footer-badge a {
|
||||
color: #a09878;
|
||||
}
|
||||
|
||||
/* --- Inline Decorative Elements --- */
|
||||
.drop-cap::first-letter {
|
||||
float: left;
|
||||
font-size: 3.2rem;
|
||||
line-height: 0.8;
|
||||
padding: 0 8px 0 0;
|
||||
color: #b8860b;
|
||||
font-family: Georgia, serif;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.ornament {
|
||||
text-align: center;
|
||||
font-size: 1.5rem;
|
||||
color: #b8860b;
|
||||
margin: 20px 0;
|
||||
letter-spacing: 0.5em;
|
||||
}
|
||||
|
||||
.small-caps {
|
||||
font-variant: small-caps;
|
||||
letter-spacing: 0.06em;
|
||||
}
|
||||
|
||||
/* --- Special: Hidden Easter Egg Text --- */
|
||||
.easter-egg {
|
||||
color: #fff;
|
||||
font-size: 0;
|
||||
line-height: 0;
|
||||
cursor: default;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.easter-egg:hover {
|
||||
color: #b8860b;
|
||||
font-size: 0.75rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/* --- Responsive --- */
|
||||
@media (max-width: 600px) {
|
||||
.site-title {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
.card-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.figure-right, .figure-left {
|
||||
float: none;
|
||||
margin: 16px 0;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.site-nav a {
|
||||
padding: 6px 8px;
|
||||
font-size: 0.82rem;
|
||||
}
|
||||
|
||||
.toc {
|
||||
columns: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* --- Utility --- */
|
||||
.text-center { text-align: center; }
|
||||
.text-small { font-size: 0.85rem; }
|
||||
.margin-top { margin-top: 24px; }
|
||||
.margin-bottom { margin-bottom: 24px; }
|
||||
.clear { clear: both; }
|
||||
Reference in New Issue
Block a user