first commit
This commit is contained in:
commit
d86fcb8bc9
GPG key ID:
3166C9D8E09EA462
3 changed files with 282 additions and 0 deletions
BIN
icon.png
Normal file
BIN
icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 724 KiB |
282
index.html
Normal file
282
index.html
Normal file
|
|
@ -0,0 +1,282 @@
|
|||
<!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>
|
||||
BIN
logo.png
Normal file
BIN
logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 MiB |
Loading…
Add table
Add a link
Reference in a new issue