Add dark theme and secret key creation script
This commit is contained in:
@@ -0,0 +1,107 @@
|
||||
/* Eternity Project theme — portable core styles.
|
||||
Usage: <html data-theme="dark"> to activate the wasteland variant,
|
||||
or toggle the attribute at runtime and persist the choice yourself. */
|
||||
|
||||
:root {
|
||||
--ink:#11212b; --paper:#f1f1e9; --acid:#c7ef4b; --orange:#ff6b35;
|
||||
--line:#b9c5bc; --muted:#59706b;
|
||||
--panel:rgba(241,241,233,.8); --field:#fbfbf6; --backdrop:rgba(17,33,43,.85);
|
||||
--flash-error:#ffe3d9; --grid:17,33,43; --grid-a1:.05; --grid-a2:.04;
|
||||
}
|
||||
|
||||
[data-theme="dark"] {
|
||||
--ink:#e7e2d3; --paper:#161210; --acid:#8fae3d; --orange:#e4632c;
|
||||
--line:#4a3f33; --muted:#a89a86;
|
||||
--panel:rgba(22,18,16,.82); --field:#211b17; --backdrop:rgba(8,6,5,.9);
|
||||
--flash-error:#3a1c14; --grid:228,98,44; --grid-a1:.07; --grid-a2:.05;
|
||||
}
|
||||
|
||||
* { box-sizing:border-box; }
|
||||
html { scroll-behavior:smooth; }
|
||||
body {
|
||||
margin:0; background:var(--paper); color:var(--ink);
|
||||
font-family:"Space Grotesk", sans-serif; transition:background .2s, color .2s;
|
||||
}
|
||||
body::before {
|
||||
content:""; position:fixed; inset:0; pointer-events:none; opacity:.4;
|
||||
background-image:
|
||||
linear-gradient(90deg, transparent 49.5%, rgba(var(--grid),var(--grid-a1)) 50%, transparent 50.5%),
|
||||
linear-gradient(rgba(var(--grid),var(--grid-a2)) 1px, transparent 1px);
|
||||
background-size:70px 70px, 7px 7px;
|
||||
}
|
||||
[data-theme="dark"] body::after {
|
||||
content:""; position:fixed; inset:0; pointer-events:none; opacity:.5; mix-blend-mode:overlay;
|
||||
background-image:
|
||||
radial-gradient(circle at 12% 20%, rgba(143,174,61,.12), transparent 35%),
|
||||
radial-gradient(circle at 85% 75%, rgba(228,98,44,.14), transparent 40%);
|
||||
}
|
||||
a { color:inherit; text-decoration:none; }
|
||||
|
||||
/* header / nav */
|
||||
.site-header {
|
||||
min-height:76px; padding:16px max(5vw, 24px); border-bottom:1px solid var(--ink);
|
||||
display:flex; align-items:center; justify-content:space-between; gap:24px; position:relative; z-index:1;
|
||||
}
|
||||
nav { display:flex; align-items:center; gap:22px; font-family:"DM Mono", monospace; font-size:12px; }
|
||||
nav a:hover { color:var(--orange); }
|
||||
|
||||
/* buttons */
|
||||
.button {
|
||||
display:inline-flex; align-items:center; justify-content:center; gap:18px;
|
||||
background:var(--ink); color:var(--paper); padding:13px 17px; border:1px solid var(--ink);
|
||||
font:500 13px "DM Mono", monospace; cursor:pointer;
|
||||
}
|
||||
.button:hover { background:var(--acid); color:var(--ink); }
|
||||
.button.compact { padding:9px 12px; }
|
||||
.theme-toggle {
|
||||
border:1px solid var(--ink); background:transparent; color:inherit; padding:6px 9px;
|
||||
font:11px "DM Mono", monospace; cursor:pointer; letter-spacing:.5px;
|
||||
}
|
||||
.theme-toggle:hover { background:var(--acid); color:var(--paper); }
|
||||
|
||||
/* hero */
|
||||
.hero {
|
||||
min-height:420px; padding:clamp(70px, 12vw, 150px) max(5vw, 24px) 75px;
|
||||
border-bottom:1px solid var(--ink); position:relative; overflow:hidden; z-index:1;
|
||||
}
|
||||
.signal-label { color:var(--orange); font:11px "DM Mono", monospace; letter-spacing:.7px; }
|
||||
.hero h1 { max-width:820px; margin:20px 0; font-size:clamp(40px, 9vw, 110px); line-height:.88; font-weight:600; }
|
||||
.hero h1 em { font-family:Georgia, serif; font-weight:400; }
|
||||
.hero p { max-width:510px; color:var(--muted); font-size:18px; line-height:1.45; margin:28px 0; }
|
||||
|
||||
/* cards / grid */
|
||||
.card-grid { display:grid; grid-template-columns:repeat(3, 1fr); border-top:1px solid var(--ink); border-left:1px solid var(--ink); }
|
||||
.card { min-height:260px; padding:21px; border-right:1px solid var(--ink); border-bottom:1px solid var(--ink); display:flex; flex-direction:column; transition:background .2s; }
|
||||
.card:hover { background:var(--acid); }
|
||||
.card h2 { font-size:26px; line-height:1; margin:22px 0 12px; }
|
||||
.card p { line-height:1.45; margin:0; color:var(--muted); }
|
||||
|
||||
/* forms */
|
||||
.panel { padding:27px; border:1px solid var(--ink); background:var(--panel); display:grid; gap:19px; }
|
||||
label { display:grid; gap:7px; font:11px "DM Mono", monospace; }
|
||||
input, textarea {
|
||||
width:100%; resize:vertical; background:var(--field); border:1px solid var(--ink);
|
||||
border-radius:0; padding:12px; color:var(--ink); font:15px "Space Grotesk", sans-serif;
|
||||
}
|
||||
input:focus, textarea:focus { outline:3px solid var(--acid); outline-offset:1px; }
|
||||
|
||||
/* code blocks */
|
||||
.code-block { margin:28px 0; border:1px solid var(--ink); background:var(--ink); }
|
||||
.code-block-head {
|
||||
display:flex; align-items:center; justify-content:space-between; min-height:38px;
|
||||
padding:7px 10px 7px 14px; color:var(--paper); font:11px "DM Mono", monospace;
|
||||
letter-spacing:.7px; text-transform:uppercase;
|
||||
}
|
||||
.code-block pre { margin:0; padding:18px; overflow:auto; background:var(--field); color:var(--ink); font:14px/1.55 "DM Mono", monospace; white-space:pre; }
|
||||
|
||||
/* flash / alerts */
|
||||
.flash { margin:16px 0; padding:11px 14px; font:12px "DM Mono", monospace; border:1px solid var(--ink); }
|
||||
.flash.error { border-color:var(--orange); background:var(--flash-error); }
|
||||
.flash.success { background:var(--acid); }
|
||||
|
||||
footer { border-top:1px solid var(--ink); padding:23px max(5vw, 24px); display:flex; justify-content:space-between; font:10px "DM Mono", monospace; color:var(--muted); position:relative; z-index:1; }
|
||||
|
||||
@media (max-width:720px) {
|
||||
.card-grid { grid-template-columns:1fr; }
|
||||
.site-header { flex-wrap:wrap; }
|
||||
}
|
||||
Reference in New Issue
Block a user