For extension developers
++ Start here if you want to build a Godot extension in Zig. The first + guides will cover project setup, class registration, and generated API + lookup. +
+Godot extensions in Zig
-Idiomatic Zig bindings for Godot 4.
-- GDZig is under rapid development while the project shapes the API for Godot - 4.7.2 and Zig 0.16.0. Use it today with care, and expect bugs or missing - features before a stable release. -
-
- Read the docs
+
+
+
+
+
-
-
-
-
+
+ Godot extensions in Zig
+Idiomatic Zig bindings for Godot 4
+Build Godot games and extensions with Zig
+ +
+ Read the docs
+ Learn more
+
+
+
+
+
Choose your path
+Start with the work you need to do.
+
+
+
+
+
+
+
+
For game developers
++ Start here if you want to understand whether GDZig fits your Godot + project. Begin with the example project and project status notes. +
+Choose your path
-Start with the work you need to do.
-
-
-
-
-
+
+
-
-
-
-
For extension developers
-- Start here if you want to build a Godot extension in Zig. The first - guides will cover project setup, class registration, and generated API - lookup. -
-For game developers
-- Start here if you want to understand whether GDZig fits your Godot - project. Begin with the example project and project status notes. -
-
+
Project status
++ GDZig is under rapid development while the project shapes the API for + Godot {godotVersion} and Zig {zigVersion}. +
+Use it today with care.
+Expect bugs or missing features before a stable release.
Human-written docs
-Use the documentation type that matches your task.
-
-
-
-
-
-
-
-
-
+
+
-
-
-
-
Tutorials
-- Guided learning paths will walk through complete GDZig projects from - first build to Godot integration. -
-How-to guides
-- Task-focused guides will cover direct procedures such as building an - extension and registering Godot-facing APIs. -
-Explanations
-- Concept pages will explain architecture, ownership, memory, and why - generated API docs stay separate from guided docs. -
-Reference
-- Curated project reference will collect supported versions, conventions, - compatibility notes, and WebAssembly caveats. -
-
+
+
+
Documentation
+Use the documentation type that matches your task.
+Human-written docs
+
+ {
+ docSections.map((section, index) => (
+
+
+
+ ))
+ }
+
+ {section.title} +
+{section.text}
+Project updates and examples
-Visible stubs keep future sections findable.
-
-
-
-
-
+
+
diff --git a/src/styles/home.css b/src/styles/home.css
index 543f6cc..f265d18 100644
--- a/src/styles/home.css
+++ b/src/styles/home.css
@@ -397,8 +397,8 @@ main > section:not(.hero),
flex-direction: column;
}
- .primary-links,
- .utility-links {
+ .pico .primary-links,
+ .pico .utility-links {
display: none;
}
diff --git a/src/styles/landing.css b/src/styles/landing.css
new file mode 100644
index 0000000..15332b8
--- /dev/null
+++ b/src/styles/landing.css
@@ -0,0 +1,480 @@
+/* Landing page: full-bleed color bands, inspired by https://valvesoftware.github.io/steam-audio/ */
+
+.pico[data-page='landing'] {
+ --landing-dark: #0f0c08;
+ --landing-dark-2: #17120b;
+ --landing-on-dark: #f8efe3;
+ --landing-on-dark-muted: #b9ab97;
+ --landing-accent: #f6a31d;
+ --landing-band-light: #e7ddcc;
+ --landing-band-lighter: #f3ede2;
+ --landing-on-light: #17130b;
+ --landing-on-light-muted: #4f463a;
+ --landing-rule: #17130b;
+ --landing-panel-from: rgba(255, 255, 255, 0.85);
+ --landing-panel-to: rgba(255, 255, 255, 0);
+}
+
+:root[data-theme='dark'] .pico[data-page='landing'] {
+ --landing-band-light: #231c13;
+ --landing-band-lighter: #1b150e;
+ --landing-on-light: #f8efe3;
+ --landing-on-light-muted: #cbbca8;
+ --landing-rule: #f6a31d;
+ --landing-panel-from: rgba(255, 255, 255, 0.07);
+ --landing-panel-to: rgba(255, 255, 255, 0);
+}
+
+@media (prefers-reduced-motion: no-preference) {
+ html:has(.pico[data-page='landing']) {
+ scroll-behavior: smooth;
+ }
+}
+
+.pico[data-page='landing'] main {
+ padding: 0;
+}
+
+.pico[data-page='landing'] main > section {
+ margin: 0;
+}
+
+/* Transparent header laid over the hero */
+.pico[data-page='landing'] .site-header-overlay {
+ position: absolute;
+ top: 0;
+ right: 0;
+ left: 0;
+ z-index: 5;
+ padding-block: 1.5rem;
+}
+
+.pico[data-page='landing'] .site-header-overlay a:not(.wordmark),
+.pico[data-page='landing'] .site-header-overlay .mobile-nav summary {
+ color: var(--landing-on-dark);
+ font-size: 0.85rem;
+ font-weight: 700;
+ letter-spacing: 0.14em;
+ text-decoration: none;
+ text-transform: uppercase;
+}
+
+.pico[data-page='landing'] .site-header-overlay a:not(.wordmark):hover {
+ color: var(--landing-accent);
+}
+
+.pico[data-page='landing'] .site-header-overlay .wordmark {
+ color: #fff;
+ letter-spacing: 0.02em;
+}
+
+.pico[data-page='landing'] .site-header-overlay .wordmark::before {
+ border-color: #fff;
+}
+
+.pico[data-page='landing'] .site-header-overlay .theme-toggle {
+ color: var(--landing-on-dark);
+ border-color: rgba(248, 239, 227, 0.4);
+ background: transparent;
+}
+
+.pico[data-page='landing'] .site-header-overlay .mobile-nav {
+ padding: 0.6rem 0.9rem;
+ background: rgba(15, 12, 8, 0.85);
+ border-radius: 0.5rem;
+}
+
+/* Bands */
+.band {
+ padding-block: clamp(3.5rem, 8vw, 6rem);
+ text-align: center;
+}
+
+.band-dark {
+ --pico-color: var(--landing-on-dark);
+ color: var(--landing-on-dark);
+ background: var(--landing-dark-2);
+}
+
+.band-light {
+ --pico-color: var(--landing-on-light);
+ color: var(--landing-on-light);
+ background: var(--landing-band-light);
+}
+
+.band-lighter {
+ --pico-color: var(--landing-on-light);
+ color: var(--landing-on-light);
+ background: var(--landing-band-lighter);
+}
+
+.band-hero {
+ --pico-color: var(--landing-on-dark);
+ display: flex;
+ align-items: center;
+ min-height: min(100vh, 52rem);
+ padding-block: 9rem 5rem;
+ color: var(--landing-on-dark);
+ background:
+ radial-gradient(ellipse 60% 55% at 78% 18%, rgba(246, 163, 29, 0.32), transparent 70%),
+ radial-gradient(ellipse 50% 50% at 8% 95%, rgba(176, 98, 8, 0.3), transparent 70%),
+ repeating-linear-gradient(
+ 90deg,
+ rgba(255, 255, 255, 0.025) 0 1px,
+ transparent 1px 4.5rem
+ ),
+ linear-gradient(180deg, #0a0805 0%, #1a130a 100%);
+}
+
+.band-hero .hero-content {
+ width: 100%;
+}
+
+.band-glow {
+ --pico-color: var(--landing-on-dark);
+ color: var(--landing-on-dark);
+ background:
+ radial-gradient(ellipse 70% 90% at 50% 0%, rgba(246, 163, 29, 0.16), transparent 70%),
+ var(--landing-dark);
+}
+
+.band-narrow {
+ max-width: 54rem;
+}
+
+/* Hero typography */
+.hero-kicker,
+.hero-sub,
+.hero-meta {
+ letter-spacing: 0.2em;
+ text-transform: uppercase;
+}
+
+.pico .hero-kicker {
+ margin-bottom: 1rem;
+ color: var(--landing-accent);
+ font-size: clamp(0.9rem, 1.6vw, 1.15rem);
+ font-weight: 700;
+}
+
+.band-hero h1 {
+ max-width: 18ch;
+ color: var(--landing-on-dark);
+ margin: 0 auto 1.25rem;
+ font-size: clamp(2.25rem, 6vw, 4.5rem);
+ font-weight: 800;
+ line-height: 1.08;
+ letter-spacing: 0.08em;
+ text-transform: uppercase;
+}
+
+.hero-sub {
+ margin-bottom: 1.5rem;
+ font-size: clamp(1rem, 2vw, 1.4rem);
+ font-weight: 300;
+}
+
+.pico .hero-meta {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ justify-content: center;
+ gap: 0.5rem 1rem;
+ margin-bottom: 2.5rem;
+ color: var(--landing-on-dark-muted);
+ font-size: 0.85rem;
+}
+
+.hero-actions {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 1rem;
+ justify-content: center;
+}
+
+.hero-actions [role='button'] {
+ width: auto;
+ margin: 0;
+ padding: 0.85rem 2.25rem;
+ color: #17130b;
+ font-size: 0.9rem;
+ font-weight: 800;
+ letter-spacing: 0.16em;
+ text-transform: uppercase;
+ background: var(--landing-accent);
+ border: 2px solid var(--landing-accent);
+ border-radius: 0.25rem;
+}
+
+.hero-actions [role='button']:hover {
+ background: #ffb743;
+ border-color: #ffb743;
+}
+
+.hero-actions [role='button'].outline {
+ color: var(--landing-on-dark);
+ background: transparent;
+ border-color: rgba(248, 239, 227, 0.55);
+}
+
+.hero-actions [role='button'].outline:hover {
+ color: #17130b;
+ background: var(--landing-on-dark);
+ border-color: var(--landing-on-dark);
+}
+
+/* Section headings */
+.band-heading {
+ max-width: 40rem;
+ margin: 0 auto 3.5rem;
+}
+
+.band-heading h2,
+.pico .band-title {
+ margin-bottom: 0.5rem;
+ color: inherit;
+ font-size: clamp(1.75rem, 4vw, 2.5rem);
+ font-weight: 800;
+ letter-spacing: 0.1em;
+ text-transform: uppercase;
+}
+
+.band-heading p {
+ margin: 0;
+ color: var(--landing-on-dark-muted);
+ font-size: 1.05rem;
+}
+
+.band-light .band-heading p,
+.band-lighter .band-heading p {
+ color: var(--landing-on-light-muted);
+}
+
+.pico .rule-heading {
+ margin: 0 0 3rem;
+ padding-bottom: 0.5rem;
+ color: var(--landing-on-light);
+ font-size: 0.9rem;
+ font-weight: 800;
+ letter-spacing: 0.12em;
+ text-align: left;
+ text-transform: uppercase;
+ border-bottom: 6px solid var(--landing-rule);
+}
+
+/* Feature columns */
+.columns {
+ display: grid;
+ gap: 2.5rem 2rem;
+}
+
+.columns-2 {
+ grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
+ max-width: 56rem;
+ margin-inline: auto;
+}
+
+.columns-4 {
+ grid-template-columns: repeat(2, 1fr);
+}
+
+@media (max-width: 576px) {
+ .columns-4 {
+ grid-template-columns: 1fr;
+ }
+}
+
+@media (min-width: 992px) {
+ .columns-4 {
+ grid-template-columns: repeat(4, 1fr);
+ }
+}
+
+.pico[data-page='landing'] .feature {
+ position: relative;
+ margin: 0;
+ padding: 0 1rem;
+ background: none;
+ border: 0;
+ box-shadow: none;
+}
+
+.feature-icon {
+ display: inline-grid;
+ place-items: center;
+ width: 5rem;
+ height: 5rem;
+ margin-bottom: 1.5rem;
+ color: var(--landing-accent);
+ border: 2px solid currentColor;
+ border-radius: 50%;
+}
+
+.band-light .feature-icon,
+.band-lighter .feature-icon {
+ color: var(--landing-on-light);
+}
+
+.feature-icon svg {
+ width: 2.25rem;
+ height: 2.25rem;
+}
+
+.feature-number {
+ font-size: 1.35rem;
+ font-weight: 800;
+ letter-spacing: 0.04em;
+}
+
+.feature h3 {
+ margin-bottom: 1rem;
+ color: inherit;
+ font-size: 1rem;
+ font-weight: 800;
+ letter-spacing: 0.12em;
+ text-transform: uppercase;
+}
+
+.feature h3 a {
+ color: inherit;
+ text-decoration: none;
+}
+
+.feature h3 a:hover {
+ text-decoration: underline;
+ text-underline-offset: 0.3em;
+}
+
+.feature p {
+ margin: 0;
+ color: var(--landing-on-dark-muted);
+}
+
+.band-light .feature p,
+.band-lighter .feature p {
+ color: var(--landing-on-light-muted);
+}
+
+.card-links .feature h3 a::after,
+.card-links .update h3 a::after {
+ position: absolute;
+ inset: 0;
+ content: '';
+}
+
+/* Status band */
+.pico .status-lede {
+ margin-bottom: 1.5rem;
+ color: var(--landing-on-dark-muted);
+ font-size: clamp(1.1rem, 2.2vw, 1.5rem);
+ font-weight: 300;
+ line-height: 1.7;
+}
+
+.status-lede strong {
+ color: var(--landing-on-dark);
+ font-weight: 700;
+}
+
+.pico .status-emphasis {
+ margin-bottom: 0.5rem;
+ color: var(--landing-accent);
+ font-size: clamp(1.75rem, 4vw, 2.5rem);
+ font-style: italic;
+ font-weight: 800;
+}
+
+.pico .status-note {
+ margin: 0;
+ color: var(--landing-on-dark-muted);
+ font-size: 1.1rem;
+ font-style: italic;
+}
+
+/* Update panels */
+.pico[data-page='landing'] .update {
+ position: relative;
+ margin: 0;
+ padding: 2rem;
+ color: var(--landing-on-light);
+ text-align: left;
+ background: linear-gradient(to bottom, var(--landing-panel-from), var(--landing-panel-to));
+ border: 0;
+ border-radius: 0;
+ box-shadow: none;
+}
+
+.update h3 {
+ margin: 0 0 1rem;
+ padding-bottom: 0.6rem;
+ color: inherit;
+ font-size: 1rem;
+ font-weight: 800;
+ letter-spacing: 0.12em;
+ text-transform: uppercase;
+ border-bottom: 4px solid var(--landing-rule);
+}
+
+.update h3 a {
+ color: inherit;
+ text-decoration: none;
+}
+
+.update h3 a:hover {
+ text-decoration: underline;
+ text-underline-offset: 0.3em;
+}
+
+.update p:not(.update-label) {
+ margin: 0;
+ color: var(--landing-on-light-muted);
+}
+
+.pico .update-label {
+ margin-bottom: 0.75rem;
+ color: var(--landing-on-light-muted);
+ font-size: 0.8rem;
+ font-weight: 700;
+ letter-spacing: 0.14em;
+ text-transform: uppercase;
+}
+
+/* Footer */
+.landing-footer {
+ padding-block: 2rem;
+ color: #999;
+ background: #000;
+}
+
+.landing-footer-inner {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ justify-content: space-between;
+ gap: 1rem 2rem;
+}
+
+.landing-footer p {
+ margin: 0;
+ color: inherit;
+ font-size: 0.9rem;
+}
+
+.landing-footer nav {
+ width: auto;
+}
+
+.landing-footer ul {
+ flex-wrap: wrap;
+}
+
+.landing-footer a {
+ color: #ccc;
+ font-size: 0.8rem;
+ letter-spacing: 0.12em;
+ text-transform: uppercase;
+}
+
+.landing-footer a:hover {
+ color: var(--landing-accent);
+}
Planned
-Blog
-- Release notes and project updates will live here. Until then, follow - the repository for current changes. -
-Draft
-Showcase
-- Community projects built with GDZig will appear here. Current entries - include Vector Wave and Godot Asset Store video plugins. -
-
+
+
+
Updates & examples
+Visible stubs keep future sections findable.
+