Add dark theme and secret key creation script
This commit is contained in:
@@ -0,0 +1,77 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Eternity Theme — Starter Template</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="eternity-theme.css">
|
||||
<script>(function(){if(localStorage.getItem('ep-theme')==='dark'){document.documentElement.setAttribute('data-theme','dark');}})();</script>
|
||||
</head>
|
||||
<body>
|
||||
<header class="site-header">
|
||||
<strong style="font-family:'DM Mono',monospace;letter-spacing:1px;">YOUR BRAND</strong>
|
||||
<nav>
|
||||
<a href="#">Home</a>
|
||||
<a href="#">About</a>
|
||||
<a class="button compact" href="#">Get started</a>
|
||||
<button type="button" class="theme-toggle" id="theme-toggle">WASTELAND</button>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<section class="hero">
|
||||
<span class="signal-label">/// STARTER TEMPLATE</span>
|
||||
<h1>Reusable <em>post-apocalyptic</em> theme.</h1>
|
||||
<p>Drop <code>eternity-theme.css</code> into any site, wire up the toggle script, and switch between the daylight and wasteland palettes with a single <code>data-theme</code> attribute.</p>
|
||||
<button class="button">Primary action</button>
|
||||
</section>
|
||||
|
||||
<section style="padding:40px max(5vw,24px);">
|
||||
<div class="card-grid">
|
||||
<div class="card"><h2>Card one</h2><p>Short description of a feature or article.</p></div>
|
||||
<div class="card"><h2>Card two</h2><p>Short description of a feature or article.</p></div>
|
||||
<div class="card"><h2>Card three</h2><p>Short description of a feature or article.</p></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section style="padding:0 max(5vw,24px) 40px;max-width:600px;">
|
||||
<form class="panel">
|
||||
<label>Name<input type="text" placeholder="Jane Doe"></label>
|
||||
<label>Message<textarea rows="4" placeholder="Say something..."></textarea></label>
|
||||
<button class="button" type="submit">Send</button>
|
||||
</form>
|
||||
<div class="flash success" style="margin-top:16px;">This is a success message.</div>
|
||||
<div class="flash error">This is an error message.</div>
|
||||
</section>
|
||||
|
||||
<section style="padding:0 max(5vw,24px) 60px;max-width:700px;">
|
||||
<div class="code-block">
|
||||
<div class="code-block-head"><span>example.js</span><span>copy</span></div>
|
||||
<pre><code>console.log("themed code block");</code></pre>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<span>YOUR BRAND</span>
|
||||
<span>MADE WITH ETERNITY THEME</span>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
(function(){
|
||||
var root=document.documentElement,btn=document.getElementById('theme-toggle');
|
||||
function label(){btn.textContent=root.getAttribute('data-theme')==='dark'?'DAYLIGHT':'WASTELAND';}
|
||||
label();
|
||||
btn.addEventListener('click', function(){
|
||||
var dark=root.getAttribute('data-theme')==='dark';
|
||||
if (dark) { root.removeAttribute('data-theme'); localStorage.setItem('ep-theme','light'); }
|
||||
else { root.setAttribute('data-theme','dark'); localStorage.setItem('ep-theme','dark'); }
|
||||
label();
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -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