From 6e8907ebf6b00403ec6fbe871fba9e2caefb375b Mon Sep 17 00:00:00 2001 From: codegirl-007 Date: Sat, 4 Jul 2026 01:22:01 -0700 Subject: [PATCH] theme updates --- archetypes/{learn.md => posts.md} | 1 - content/_index.md | 6 +- hugo.toml | 4 +- themes/codegirl/layouts/_default/single.html | 2 +- themes/codegirl/layouts/index.html | 20 +- themes/codegirl/layouts/partials/footer.html | 9 +- themes/codegirl/layouts/partials/header.html | 12 +- themes/codegirl/layouts/shortcodes/clip.html | 12 + themes/codegirl/static/css/style.css | 304 ++++++++++++++----- 9 files changed, 288 insertions(+), 82 deletions(-) rename archetypes/{learn.md => posts.md} (93%) create mode 100644 themes/codegirl/layouts/shortcodes/clip.html diff --git a/archetypes/learn.md b/archetypes/posts.md similarity index 93% rename from archetypes/learn.md rename to archetypes/posts.md index 729fabc..6a07d00 100644 --- a/archetypes/learn.md +++ b/archetypes/posts.md @@ -8,7 +8,6 @@ series: "" series_order: 0 languages: [] tags: [] -video_url: "" book: "" chapter: 0 --- diff --git a/content/_index.md b/content/_index.md index 05b27c8..8c5e9ea 100644 --- a/content/_index.md +++ b/content/_index.md @@ -1,6 +1,6 @@ --- -title: Coming soon -description: Codegirl Games — building games and learning together. +title: codegirl.games +description: We build affordable games and teach the craft along the way — documenting every step in public. --- -We're working on something new. Check back soon. +We aim to build affordable games and teach things we learn along the way by documenting our journey. diff --git a/hugo.toml b/hugo.toml index 3c3d28b..b643baf 100644 --- a/hugo.toml +++ b/hugo.toml @@ -5,7 +5,9 @@ theme = 'codegirl' [params] logo = 'codegirl.games' - description = 'Building affordable, full-feature games in public — and teaching game development along the way.' + logo_image = '/images/logo.png' + description = 'We build affordable games and teach the craft along the way — documenting every step in public.' + tagline = 'Affordable games. Built in public.' author = 'Codegirl Games' [markup] diff --git a/themes/codegirl/layouts/_default/single.html b/themes/codegirl/layouts/_default/single.html index 35d0342..4708ad2 100644 --- a/themes/codegirl/layouts/_default/single.html +++ b/themes/codegirl/layouts/_default/single.html @@ -1,5 +1,5 @@ {{ define "main" }} -
+

{{ with .Params.type }}{{ humanize . }}{{ end }} diff --git a/themes/codegirl/layouts/index.html b/themes/codegirl/layouts/index.html index fac6acf..b88f26c 100644 --- a/themes/codegirl/layouts/index.html +++ b/themes/codegirl/layouts/index.html @@ -1,8 +1,22 @@ {{ define "main" }} -

-

{{ .Title }}

+
+

{{ .Site.Params.tagline }}

+

{{ .Title }}

{{ with .Content }} -
{{ . }}
+
{{ . }}
{{ end }}
+
+
+

Latest

+ All posts → +
+
    + {{ range where .Site.RegularPages "Section" "eq" "posts" | first 12 }} +
  • + {{ partial "post-card.html" . }} +
    • + {{ end }} +
+
{{ end }} diff --git a/themes/codegirl/layouts/partials/footer.html b/themes/codegirl/layouts/partials/footer.html index 4afd5e8..911ffc0 100644 --- a/themes/codegirl/layouts/partials/footer.html +++ b/themes/codegirl/layouts/partials/footer.html @@ -1,3 +1,10 @@
-

© {{ now.Year }} {{ .Site.Params.author }}

+
+

{{ .Site.Params.tagline }}

+ +

© {{ now.Year }} {{ .Site.Params.author }}

+
diff --git a/themes/codegirl/layouts/partials/header.html b/themes/codegirl/layouts/partials/header.html index 71ee64f..27bd697 100644 --- a/themes/codegirl/layouts/partials/header.html +++ b/themes/codegirl/layouts/partials/header.html @@ -1,3 +1,13 @@
- + +
diff --git a/themes/codegirl/layouts/shortcodes/clip.html b/themes/codegirl/layouts/shortcodes/clip.html new file mode 100644 index 0000000..3b6a177 --- /dev/null +++ b/themes/codegirl/layouts/shortcodes/clip.html @@ -0,0 +1,12 @@ +{{- $src := .Get "src" -}} +{{- if not (or (hasPrefix $src "/") (hasPrefix $src "http")) -}} + {{- $src = .Page.RelPermalink | path.Join $src -}} +{{- end -}} +
+ + {{- with .Get "caption" -}} +
{{ . }}
+ {{- end -}} +
diff --git a/themes/codegirl/static/css/style.css b/themes/codegirl/static/css/style.css index 3610e04..1d7c902 100644 --- a/themes/codegirl/static/css/style.css +++ b/themes/codegirl/static/css/style.css @@ -1,11 +1,14 @@ :root { --color-bg: #000000; - --color-surface: #141414; + --color-surface: #111111; + --color-border: #222222; --color-text: #ffffff; - --color-muted: #888888; + --color-muted: #999999; --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --space-inline: clamp(1.25rem, 4vw, 3.5rem); + --width-site: 72rem; --width-read: 42rem; + --font-content: 1.125rem; } *, @@ -41,12 +44,12 @@ body { .container { width: 100%; - padding-inline: var(--space-inline); + max-width: calc(var(--width-site) + var(--space-inline) * 2); + margin-inline: auto; } .container--narrow { max-width: calc(var(--width-read) + var(--space-inline) * 2); - margin-inline: auto; } /* Site header */ @@ -54,65 +57,87 @@ body { .site-header { display: flex; align-items: center; - justify-content: center; - padding-block: clamp(1.25rem, 2vw, 1.75rem); + justify-content: space-between; + gap: 1.5rem; + border-bottom: 1px solid var(--color-border); } .site-header__logo { + display: flex; + align-items: center; color: var(--color-text); text-decoration: none; font-weight: 700; - font-size: clamp(1rem, 2vw, 1.125rem); + font-size: clamp(0.9375rem, 2vw, 1.0625rem); letter-spacing: -0.02em; } -/* Coming soon */ - -.coming-soon { - flex: 1; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - text-align: center; - padding-block: clamp(4rem, 12vh, 8rem); +.site-header__logo-image { + display: block; + height: 150px; + width: auto; } -.coming-soon__title { - margin: 0 0 clamp(1rem, 2vw, 1.5rem); - font-size: clamp(2.5rem, 8vw, 5rem); - font-weight: 700; - line-height: 1.05; - letter-spacing: -0.04em; -} - -.coming-soon__body { - max-width: 28rem; +.site-header__logo:hover { color: var(--color-muted); - font-size: clamp(1rem, 2vw, 1.125rem); - line-height: 1.7; +} + +.site-header__logo:hover .site-header__logo-image { + opacity: 0.85; +} + +.site-nav { + display: flex; + align-items: center; + gap: clamp(1rem, 3vw, 1.75rem); +} + +.site-nav__link { + color: var(--color-muted); + text-decoration: none; + font-size: 0.9375rem; + font-weight: 500; + letter-spacing: -0.01em; +} + +.site-nav__link:hover, +.site-nav__link--active { + color: var(--color-text); } /* Hero */ .hero { - padding-block: clamp(3rem, 8vw, 6rem) clamp(2.5rem, 6vw, 4rem); + padding-block: clamp(3.5rem, 10vw, 7rem) clamp(2.5rem, 6vw, 4rem); +} + +.hero__eyebrow { + margin: 0 0 1rem; + font-size: 0.8125rem; + font-weight: 500; + letter-spacing: 0.08em; + text-transform: uppercase; + color: var(--color-muted); } .hero__title { - margin: 0 0 clamp(1rem, 2vw, 1.5rem); - font-size: clamp(2.25rem, 7vw, 4.5rem); + margin: 0 0 clamp(1.25rem, 2vw, 1.75rem); + font-size: clamp(2.5rem, 8vw, 5rem); font-weight: 700; - line-height: 1.05; + line-height: 1.02; letter-spacing: -0.04em; - max-width: 14ch; + max-width: 16ch; } .hero__body { max-width: 38rem; color: var(--color-muted); - font-size: clamp(1rem, 2vw, 1.25rem); - line-height: 1.7; + font-size: clamp(1.0625rem, 2vw, 1.25rem); + line-height: 1.75; +} + +.hero__body p:last-child { + margin-bottom: 0; } /* Latest section */ @@ -127,20 +152,23 @@ body { justify-content: space-between; gap: 1rem; margin-bottom: clamp(1.5rem, 3vw, 2rem); + padding-bottom: 1rem; + border-bottom: 1px solid var(--color-border); } .latest__title { margin: 0; - font-size: clamp(1.25rem, 2.5vw, 1.75rem); - font-weight: 700; + font-size: clamp(1.125rem, 2vw, 1.375rem); + font-weight: 600; letter-spacing: -0.02em; } .latest__link { color: var(--color-muted); text-decoration: none; - font-size: 0.9375rem; + font-size: 0.875rem; font-weight: 500; + white-space: nowrap; } .latest__link:hover { @@ -153,30 +181,16 @@ body { list-style: none; margin: 0; padding: 0; - display: grid; - gap: 0; -} - -@media (min-width: 640px) { - .post-list { - grid-template-columns: repeat(2, 1fr); - column-gap: clamp(1.5rem, 4vw, 3rem); - } -} - -@media (min-width: 1100px) { - .post-list { - grid-template-columns: repeat(3, 1fr); - } } .post-list__item { margin: 0; + border-bottom: 1px solid var(--color-border); } .post-list__link { display: block; - padding-block: 1.25rem; + padding-block: clamp(1.25rem, 2.5vw, 1.75rem); text-decoration: none; color: inherit; } @@ -190,14 +204,14 @@ body { flex-wrap: wrap; gap: 0.5rem; align-items: center; - margin: 0 0 0.375rem; - font-size: 0.8125rem; + margin: 0 0 0.5rem; + font-size: 0.75rem; color: var(--color-muted); } .post-list__type { text-transform: uppercase; - letter-spacing: 0.06em; + letter-spacing: 0.08em; font-weight: 500; } @@ -208,7 +222,7 @@ body { .post-list__title { margin: 0 0 0.375rem; - font-size: clamp(1rem, 1.8vw, 1.125rem); + font-size: clamp(1.0625rem, 2vw, 1.25rem); font-weight: 600; line-height: 1.35; letter-spacing: -0.02em; @@ -220,6 +234,7 @@ body { color: var(--color-muted); font-size: 0.9375rem; line-height: 1.55; + max-width: 52rem; } .post-list__series { @@ -234,6 +249,12 @@ body { padding-block: clamp(2.5rem, 5vw, 4rem) clamp(3rem, 6vw, 5rem); } +.section__header { + margin-bottom: clamp(1.5rem, 3vw, 2.5rem); + padding-bottom: clamp(1.25rem, 2vw, 1.75rem); + border-bottom: 1px solid var(--color-border); +} + .section__title { margin: 0 0 0.75rem; font-size: clamp(2rem, 5vw, 3rem); @@ -244,8 +265,7 @@ body { .section__intro { max-width: 38rem; color: var(--color-muted); - font-size: clamp(1rem, 2vw, 1.125rem); - margin-bottom: clamp(1.5rem, 3vw, 2.5rem); + font-size: clamp(1.0625rem, 2vw, 1.1875rem); } /* Post (single) */ @@ -254,21 +274,26 @@ body { padding-block: clamp(2.5rem, 5vw, 4rem) clamp(3rem, 6vw, 5rem); } +.post__header { + margin-bottom: clamp(2rem, 4vw, 2.5rem); + padding-bottom: clamp(1.5rem, 3vw, 2rem); + border-bottom: 1px solid var(--color-border); +} + .post__meta { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 0 0 1rem; - font-size: 0.875rem; + font-size: 0.75rem; color: var(--color-muted); } .post__type { text-transform: uppercase; - letter-spacing: 0.06em; + letter-spacing: 0.08em; font-weight: 500; - font-size: 0.8125rem; } .post__type::after { @@ -287,18 +312,23 @@ body { .post__lead { margin: 0 0 1.25rem; color: var(--color-muted); - font-size: clamp(1rem, 2vw, 1.25rem); - line-height: 1.6; + font-size: clamp(1.125rem, 2vw, 1.375rem); + line-height: 1.65; } .post__tags, .post__series, .post__reference { - margin: 0 0 1rem; + margin: 0 0 0.5rem; color: var(--color-muted); font-size: 0.9375rem; } +.content .post__video { + margin: 2rem 0 0; + aspect-ratio: 16 / 9; +} + .post__video { margin: 0 0 2rem; aspect-ratio: 16 / 9; @@ -317,7 +347,8 @@ body { /* Content typography */ .content { - font-size: 1rem; + font-size: var(--font-content); + line-height: 1.7; } .content > :first-child { @@ -331,7 +362,7 @@ body { .content h2 { margin-top: 2.5rem; margin-bottom: 0.75rem; - font-size: clamp(1.25rem, 2.5vw, 1.5rem); + font-size: clamp(1.375rem, 2.5vw, 1.625rem); font-weight: 700; letter-spacing: -0.02em; } @@ -339,7 +370,7 @@ body { .content h3 { margin-top: 2rem; margin-bottom: 0.5rem; - font-size: 1.125rem; + font-size: 1.25rem; font-weight: 600; } @@ -377,6 +408,7 @@ body { overflow-x: auto; padding: 1rem; background-color: var(--color-surface); + border: 1px solid var(--color-border); } .content pre code { @@ -391,14 +423,144 @@ body { color: var(--color-muted); } +.content img { + display: block; + width: 100%; + max-width: 100%; + height: auto; + margin: 1.5rem 0 2rem; + border: 1px solid var(--color-border); +} + +.content .clip { + margin: 1.5rem 0 2rem; +} + +.content .clip video { + display: block; + width: 100%; + max-width: 100%; + height: auto; + border: 1px solid var(--color-border); + background-color: var(--color-surface); +} + +.content .clip figcaption { + margin-top: 0.5rem; + color: var(--color-muted); + font-size: 0.9375rem; +} + +.content table { + width: 100%; + margin: 0 0 1.5rem; + border-collapse: collapse; + table-layout: fixed; + font-size: 1rem; + line-height: 1.6; +} + +.content thead th { + padding: 0 1rem 0.75rem; + font-size: 0.8125rem; + font-weight: 600; + letter-spacing: 0.06em; + text-transform: uppercase; + text-align: left; + color: var(--color-muted); + border-bottom: 1px solid var(--color-border); +} + +.content tbody td { + padding: 0.875rem 1rem; + vertical-align: top; + border-bottom: 1px solid var(--color-border); +} + +.content tbody tr:last-child td { + border-bottom: none; +} + +.content tbody td:first-child { + padding-left: 0; +} + +.content thead th:first-child { + padding-left: 0; +} + +.content tbody td:last-child, +.content thead th:last-child { + padding-right: 0; +} + +@media (max-width: 640px) { + .content table { + display: block; + overflow-x: auto; + -webkit-overflow-scrolling: touch; + } + + .content thead th, + .content tbody td { + padding-inline: 0.75rem; + min-width: 10rem; + } + + .content tbody td:first-child, + .content thead th:first-child { + padding-left: 0; + } +} + /* Site footer */ .site-footer { + margin-top: auto; padding-block: clamp(2rem, 4vw, 3rem); + border-top: 1px solid var(--color-border); +} + +.site-footer__inner { + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: space-between; + gap: 1rem 2rem; +} + +.site-footer__tagline { + margin: 0; + color: var(--color-muted); + font-size: 0.875rem; + letter-spacing: -0.01em; +} + +.site-footer__nav { + display: flex; + gap: 1.25rem; +} + +.site-footer__link { + color: var(--color-muted); + text-decoration: none; + font-size: 0.875rem; + font-weight: 500; +} + +.site-footer__link:hover { + color: var(--color-text); } .site-footer__copy { margin: 0; color: var(--color-muted); - font-size: 0.875rem; + font-size: 0.8125rem; +} + +@media (max-width: 640px) { + .site-footer__inner { + flex-direction: column; + align-items: flex-start; + } }