codegirl.games/codegirl.games-hugo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

theme updates

Browse Source
This commit is contained in:
codegirl007
2026-07-04 01:22:01 -07:00
parent 2f4fceadad
commit 6e8907ebf6
9 changed files with 288 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files
themes/codegirl/layouts/_default/single.html
+1 -1
View File
@@ -1,5 +1,5 @@
{{ define "main" }}
<article class="post container container--narrow">
<article class="post container">
<header class="post__header">
<p class="post__meta">
{{ with .Params.type }}<span class="post__type">{{ humanize . }}</span>{{ end }}
themes/codegirl/layouts/index.html
+17 -3
View File
@@ -1,8 +1,22 @@
{{ define "main" }}
<section class="coming-soon container">
<h1 class="coming-soon__title">{{ .Title }}</h1>
<section class="hero container">
<p class="hero__eyebrow">{{ .Site.Params.tagline }}</p>
<h1 class="hero__title">{{ .Title }}</h1>
{{ with .Content }}
<div class="coming-soon__body content">{{ . }}</div>
<div class="hero__body content">{{ . }}</div>
{{ end }}
</section>
<section class="latest container">
<header class="latest__header">
<h2 class="latest__title">Latest</h2>
<a class="latest__link" href="{{ "/posts/" | relURL }}">All posts →</a>
</header>
<ul class="post-list">
{{ range where .Site.RegularPages "Section" "eq" "posts" | first 12 }}
<li class="post-list__item">
{{ partial "post-card.html" . }}
</li>
{{ end }}
</ul>
</section>
{{ end }}
themes/codegirl/layouts/partials/footer.html
+8 -1
View File
@@ -1,3 +1,10 @@
<footer class="site-footer container">
<p class="site-footer__copy">&copy; {{ now.Year }} {{ .Site.Params.author }}</p>
<div class="site-footer__inner">
<p class="site-footer__tagline">{{ .Site.Params.tagline }}</p>
<nav class="site-footer__nav" aria-label="Footer">
<a class="site-footer__link" href="{{ "/posts/" | relURL }}">Posts</a>
<a class="site-footer__link" href="{{ "/about/" | relURL }}">About</a>
</nav>
<p class="site-footer__copy">&copy; {{ now.Year }} {{ .Site.Params.author }}</p>
</div>
</footer>
themes/codegirl/layouts/partials/header.html
+11 -1
View File
@@ -1,3 +1,13 @@
<header class="site-header container">
<span class="site-header__logo">{{ .Site.Params.logo }}</span>
<a class="site-header__logo" href="{{ "/" | relURL }}">
{{ with .Site.Params.logo_image }}
<img class="site-header__logo-image" src="{{ . | relURL }}" alt="{{ $.Site.Params.logo | default $.Site.Title }}">
{{ else }}
{{ $.Site.Params.logo }}
{{ end }}
</a>
<nav class="site-nav" aria-label="Main">
<a class="site-nav__link{{ if eq .Section "posts" }} site-nav__link--active{{ end }}" href="{{ "/posts/" | relURL }}">Posts</a>
<a class="site-nav__link{{ if and .IsPage (eq .File.BaseFileName "about") }} site-nav__link--active{{ end }}" href="{{ "/about/" | relURL }}">About</a>
</nav>
</header>
themes/codegirl/layouts/shortcodes/clip.html
+12
View File
@@ -0,0 +1,12 @@
{{- $src := .Get "src" -}}
{{- if not (or (hasPrefix $src "/") (hasPrefix $src "http")) -}}
{{- $src = .Page.RelPermalink | path.Join $src -}}
{{- end -}}
<figure class="clip">
<video controls playsinline preload="metadata">
<source src="{{ $src }}" type="{{ .Get "type" | default "video/mp4" }}">
</video>
{{- with .Get "caption" -}}
<figcaption>{{ . }}</figcaption>
{{- end -}}
</figure>
themes/codegirl/static/css/style.css
+233 -71
View File
@@ -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;
}
}