Something went wrong. Try again.
My website, danielmorrisey.com. Written in HTML, CSS and javascript, by hand. danielmorrisey.com
javascript html css wisp-place
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200:root { --bg: #1c1310; --surface: #2e2018; --text: #f4deb8; --muted: #e8c28a; --accent: #d4975c; --accent-hover: #e8c28a; --error: #ef4444; --code-bg: #150f0d;}
* { margin: 0; padding: 0; box-sizing: border-box;}
body { font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; display: flex; flex-direction: column; align-items: center; padding: 2rem;}
a { color: var(--accent); text-decoration: none; transition: opacity 0.2s;}
a:hover { opacity: 0.8;}
/* Wider than the home page (520px) to suit documentation content */.container { max-width: 900px; width: 100%;}
header { text-align: left; margin-bottom: 3rem; padding-bottom: 1.5rem; border-bottom: 1px solid rgba(212, 151, 92, 0.2);}
h1 { font-size: 2.5rem; letter-spacing: -0.02em; margin-bottom: 0.5rem;}
.tagline { color: var(--muted); font-size: 1.1rem;}
h2 { font-size: 1.75rem; color: var(--accent); margin-top: 2.5rem; margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem;}
h3 { font-size: 1.25rem; margin-top: 1.5rem; margin-bottom: 0.75rem; color: var(--text);}
p,li { line-height: 1.6; margin-bottom: 0.75rem; color: var(--muted);}
ul { margin-left: 1.5rem; margin-bottom: 1.5rem;}
/* Code blocks */pre { background: var(--code-bg); border: 1px solid rgba(212, 151, 92, 0.3); border-radius: 10px; padding: 1.25rem; overflow-x: auto; margin-bottom: 1.5rem; font-family: 'SF Mono', 'Fira Code', monospace; font-size: 0.9rem; color: #fff;}
code { font-family: 'SF Mono', 'Fira Code', monospace;}
/* Inline code */p code,li code { background: var(--surface); padding: 0.2rem 0.4rem; border-radius: 6px; color: var(--accent); font-size: 0.9em;}
/* Tables */table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; background: var(--surface); border-radius: 10px; overflow: hidden;}
th,td { padding: 0.75rem 1rem; text-align: left; border-bottom: 1px solid rgba(212, 151, 92, 0.2);}
th { background: rgba(212, 151, 92, 0.1); color: var(--accent); font-weight: 600;}
tr:last-child td { border-bottom: none;}
/* Method badges */.method { display: inline-block; padding: 0.2rem 0.6rem; border-radius: 6px; font-size: 0.75rem; font-weight: bold; text-transform: uppercase; margin-right: 0.5rem;}
.get { background: #2563eb; color: white;}
.post { background: #16a34a; color: white;}
footer { margin-top: auto; padding-top: 3rem; color: var(--muted); font-size: 0.85rem; text-align: center;}
/* Back-to-home link, styled like the site's buttons */.nav-link { display: inline-block; margin-bottom: 2rem; padding: 0.5rem 1rem; background: var(--surface); border: 1px solid var(--accent); border-radius: 10px; color: var(--accent); font-weight: 500;}
.nav-link:hover { background: rgba(212, 151, 92, 0.15);}
@media (max-width: 480px) { body { padding: 1.25rem; }
h1 { font-size: 2rem; }}