78 lines
3.3 KiB
HTML
78 lines
3.3 KiB
HTML
<!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>
|