282 lines
7.7 KiB
HTML
282 lines
7.7 KiB
HTML
<!doctype html>
|
|
<html lang="en" class="dark">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Kumikode</title>
|
|
<link rel="icon" href="icon.png" />
|
|
<style>
|
|
html,
|
|
body {
|
|
height: 100%;
|
|
}
|
|
|
|
body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
font-family:
|
|
-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
|
|
"Helvetica Neue", Arial, sans-serif;
|
|
margin: 0;
|
|
background: #fcfaf6;
|
|
color: #2b2b2b;
|
|
overflow-x: hidden;
|
|
transition: background 0.3s, color 0.3s;
|
|
}
|
|
.dark body {
|
|
background: #1a1a1a;
|
|
color: #f5f5f5;
|
|
}
|
|
|
|
code,
|
|
pre {
|
|
font-family:
|
|
SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
|
|
"Courier New", monospace;
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3 {
|
|
margin: 0;
|
|
font-family: "Merriweather", serif;
|
|
}
|
|
a {
|
|
text-decoration: none;
|
|
color: inherit;
|
|
}
|
|
a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.kumiko-bg {
|
|
position: fixed;
|
|
inset: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: -1;
|
|
pointer-events: none;
|
|
overflow: hidden;
|
|
}
|
|
.kumiko-bg svg {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.kumiko-line {
|
|
stroke: rgba(180, 145, 100, 0.3);
|
|
stroke-width: 1;
|
|
fill: none;
|
|
stroke-linecap: round;
|
|
animation: drift 40s linear infinite;
|
|
}
|
|
.kumiko-line:nth-child(even) {
|
|
animation-duration: 50s;
|
|
}
|
|
@keyframes drift {
|
|
0% { transform: translate(0px, 0px); }
|
|
50% { transform: translate(3px, 2px); }
|
|
100% { transform: translate(0px, 0px); }
|
|
}
|
|
|
|
header {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 1.5rem;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
position: relative;
|
|
z-index: 10;
|
|
}
|
|
|
|
nav a {
|
|
margin-left: 1rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
main {
|
|
flex: 1;
|
|
}
|
|
|
|
.hero {
|
|
text-align: center;
|
|
padding: 6rem 1rem;
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
position: relative;
|
|
z-index: 10;
|
|
}
|
|
.hero h1 {
|
|
font-size: 4rem;
|
|
line-height: 1.2;
|
|
margin-bottom: 1rem;
|
|
font-weight: 700;
|
|
letter-spacing: -1px;
|
|
color: #b48e57;
|
|
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.dark .hero h1 {
|
|
color: #fcd77f;
|
|
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
|
|
}
|
|
|
|
footer {
|
|
background: #fef3c7;
|
|
color: #92400e;
|
|
padding: 3rem 1rem;
|
|
margin-top: 4rem;
|
|
}
|
|
.dark footer {
|
|
background: #1a1a1a;
|
|
color: #facc15;
|
|
}
|
|
|
|
.footer-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
gap: 2rem;
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.footer-bottom {
|
|
text-align: center;
|
|
margin-top: 2rem;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
#theme-toggle {
|
|
cursor: pointer;
|
|
background: transparent;
|
|
border: none;
|
|
padding: 0.5rem 1rem;
|
|
border-radius: 0.5rem;
|
|
font-weight: bold;
|
|
}
|
|
|
|
@media (max-width: 600px) {
|
|
.hero h1 { font-size: 2.2rem; }
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<!-- kumiko background -->
|
|
<div class="kumiko-bg">
|
|
<svg viewBox="0 0 1000 1000" preserveAspectRatio="xMidYMid slice">
|
|
<!-- diagonals, parallels and diamonds -->
|
|
<g>
|
|
<g>
|
|
<line x1="0" y1="0" x2="1000" y2="1000" class="kumiko-line" />
|
|
<line x1="0" y1="1000" x2="1000" y2="0" class="kumiko-line" />
|
|
<line x1="0" y1="200" x2="1000" y2="1200" class="kumiko-line" />
|
|
<line x1="0" y1="400" x2="1000" y2="1400" class="kumiko-line" />
|
|
<line x1="0" y1="600" x2="1000" y2="1600" class="kumiko-line" />
|
|
<line x1="0" y1="800" x2="1000" y2="1800" class="kumiko-line" />
|
|
</g>
|
|
<g>
|
|
<line x1="0" y1="0" x2="0" y2="1000" class="kumiko-line" />
|
|
<line x1="125" y1="0" x2="125" y2="1000" class="kumiko-line" />
|
|
<line x1="250" y1="0" x2="250" y2="1000" class="kumiko-line" />
|
|
<line x1="375" y1="0" x2="375" y2="1000" class="kumiko-line" />
|
|
<line x1="500" y1="0" x2="500" y2="1000" class="kumiko-line" />
|
|
<line x1="625" y1="0" x2="625" y2="1000" class="kumiko-line" />
|
|
<line x1="750" y1="0" x2="750" y2="1000" class="kumiko-line" />
|
|
<line x1="875" y1="0" x2="875" y2="1000" class="kumiko-line" />
|
|
</g>
|
|
<g>
|
|
<line x1="0" y1="0" x2="1000" y2="0" class="kumiko-line" />
|
|
<line x1="0" y1="125" x2="1000" y2="125" class="kumiko-line" />
|
|
<line x1="0" y1="250" x2="1000" y2="250" class="kumiko-line" />
|
|
<line x1="0" y1="375" x2="1000" y2="375" class="kumiko-line" />
|
|
<line x1="0" y1="500" x2="1000" y2="500" class="kumiko-line" />
|
|
<line x1="0" y1="625" x2="1000" y2="625" class="kumiko-line" />
|
|
<line x1="0" y1="750" x2="1000" y2="750" class="kumiko-line" />
|
|
<line x1="0" y1="875" x2="1000" y2="875" class="kumiko-line" />
|
|
</g>
|
|
<g>
|
|
<polygon
|
|
points="62.5,62.5 125,125 62.5,187.5 0,125"
|
|
class="kumiko-line"
|
|
/>
|
|
<polygon
|
|
points="187.5,62.5 250,125 187.5,187.5 125,125"
|
|
class="kumiko-line"
|
|
/>
|
|
<polygon
|
|
points="312.5,62.5 375,125 312.5,187.5 250,125"
|
|
class="kumiko-line"
|
|
/>
|
|
<polygon
|
|
points="437.5,62.5 500,125 437.5,187.5 375,125"
|
|
class="kumiko-line"
|
|
/>
|
|
<polygon
|
|
points="562.5,62.5 625,125 562.5,187.5 500,125"
|
|
class="kumiko-line"
|
|
/>
|
|
<polygon
|
|
points="687.5,62.5 750,125 687.5,187.5 625,125"
|
|
class="kumiko-line"
|
|
/>
|
|
<polygon
|
|
points="812.5,62.5 875,125 812.5,187.5 750,125"
|
|
class="kumiko-line"
|
|
/>
|
|
<polygon
|
|
points="937.5,62.5 1000,125 937.5,187.5 875,125"
|
|
class="kumiko-line"
|
|
/>
|
|
</g>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
|
|
<header>
|
|
<nav>
|
|
<a href="https://forge.kumikode.org">Forge</a>
|
|
<a href="https://kumikode.zulipchat.com">Zulip</a>
|
|
<a><button id="theme-toggle">🔦</button></a>
|
|
</nav>
|
|
</header>
|
|
|
|
<main>
|
|
<section class="hero">
|
|
<h1>
|
|
<img src="logo.png" alt="Kumikode Logo" style="height: 8em" />
|
|
</h1>
|
|
</section>
|
|
</main>
|
|
|
|
<footer>
|
|
<div class="footer-grid">
|
|
<div><h4>Kumikode</h4></div>
|
|
<div>
|
|
<h4>Links</h4>
|
|
<ul>
|
|
<li><a href="https://forge.kumikode.org">Forge</a></li>
|
|
<li><a href="https://kumikode.zulipchat.com">Zulip</a></li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h4>Contact</h4>
|
|
<p>Email: <a href="mailto:contact@kumikode.org">contact@kumikode.org</a></p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<script>
|
|
const toggleBtn = document.getElementById("theme-toggle");
|
|
|
|
if (!document.documentElement.classList.contains("dark")) {
|
|
if (window.matchMedia("(prefers-color-scheme: dark)").matches)
|
|
document.documentElement.classList.add("dark");
|
|
}
|
|
|
|
toggleBtn.addEventListener("click", () =>
|
|
document.documentElement.classList.toggle("dark")
|
|
);
|
|
</script>
|
|
</body>
|
|
</html>
|