initial theme - coming soon
This commit is contained in:
@@ -0,0 +1,13 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="{{ .Site.LanguageCode }}">
|
||||
<head>
|
||||
{{ partial "head.html" . }}
|
||||
</head>
|
||||
<body class="page">
|
||||
{{ partial "header.html" . }}
|
||||
<main class="page__main">
|
||||
{{ block "main" . }}{{ end }}
|
||||
</main>
|
||||
{{ partial "footer.html" . }}
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,17 @@
|
||||
{{ define "main" }}
|
||||
<section class="section container">
|
||||
<header class="section__header">
|
||||
<h1 class="section__title">{{ .Title }}</h1>
|
||||
{{ with .Content }}
|
||||
<div class="section__intro content">{{ . }}</div>
|
||||
{{ end }}
|
||||
</header>
|
||||
<ul class="post-list">
|
||||
{{ range .Pages.ByDate.Reverse }}
|
||||
<li class="post-list__item">
|
||||
{{ partial "post-card.html" . }}
|
||||
</li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
</section>
|
||||
{{ end }}
|
||||
@@ -0,0 +1,33 @@
|
||||
{{ define "main" }}
|
||||
<article class="post container container--narrow">
|
||||
<header class="post__header">
|
||||
<p class="post__meta">
|
||||
{{ with .Params.type }}<span class="post__type">{{ humanize . }}</span>{{ end }}
|
||||
<time class="post__date" datetime="{{ .Date.Format "2006-01-02" }}">{{ .Date.Format "January 2, 2006" }}</time>
|
||||
</p>
|
||||
<h1 class="post__title">{{ .Title }}</h1>
|
||||
{{ with .Description }}<p class="post__lead">{{ . }}</p>{{ end }}
|
||||
{{ with .Params.languages }}
|
||||
<p class="post__tags">{{ delimit . ", " }}</p>
|
||||
{{ end }}
|
||||
{{ with .Params.series }}
|
||||
<p class="post__series">Part of {{ . }}</p>
|
||||
{{ end }}
|
||||
{{ with .Params.video_url }}
|
||||
<figure class="post__video">
|
||||
<iframe
|
||||
class="post__iframe"
|
||||
src="{{ . }}"
|
||||
title="{{ $.Title }}"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
||||
allowfullscreen
|
||||
></iframe>
|
||||
</figure>
|
||||
{{ end }}
|
||||
{{ if and .Params.book .Params.chapter }}
|
||||
<p class="post__reference">From <em>{{ .Params.book }}</em> — Chapter {{ .Params.chapter }}</p>
|
||||
{{ end }}
|
||||
</header>
|
||||
<div class="post__body content">{{ .Content }}</div>
|
||||
</article>
|
||||
{{ end }}
|
||||
@@ -0,0 +1,8 @@
|
||||
{{ define "main" }}
|
||||
<section class="coming-soon container">
|
||||
<h1 class="coming-soon__title">{{ .Title }}</h1>
|
||||
{{ with .Content }}
|
||||
<div class="coming-soon__body content">{{ . }}</div>
|
||||
{{ end }}
|
||||
</section>
|
||||
{{ end }}
|
||||
@@ -0,0 +1,3 @@
|
||||
<footer class="site-footer container">
|
||||
<p class="site-footer__copy">© {{ now.Year }} {{ .Site.Params.author }}</p>
|
||||
</footer>
|
||||
@@ -0,0 +1,8 @@
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>{{ if .IsHome }}{{ .Site.Title }}{{ else }}{{ .Title }} · {{ .Site.Title }}{{ end }}</title>
|
||||
<meta name="description" content="{{ with .Description }}{{ . }}{{ else }}{{ .Site.Params.description }}{{ end }}">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="{{ "css/style.css" | relURL }}">
|
||||
@@ -0,0 +1,3 @@
|
||||
<header class="site-header container">
|
||||
<span class="site-header__logo">{{ .Site.Params.logo }}</span>
|
||||
</header>
|
||||
@@ -0,0 +1,9 @@
|
||||
<a class="post-list__link" href="{{ .RelPermalink }}">
|
||||
<p class="post-list__meta">
|
||||
{{ with .Params.type }}<span class="post-list__type">{{ humanize . }}</span>{{ end }}
|
||||
<time class="post-list__date" datetime="{{ .Date.Format "2006-01-02" }}">{{ .Date.Format "Jan 2, 2006" }}</time>
|
||||
</p>
|
||||
<h3 class="post-list__title">{{ .Title }}</h3>
|
||||
{{ with .Description }}<p class="post-list__excerpt">{{ . }}</p>{{ end }}
|
||||
{{ with .Params.series }}<p class="post-list__series">{{ . }}</p>{{ end }}
|
||||
</a>
|
||||
@@ -0,0 +1,404 @@
|
||||
:root {
|
||||
--color-bg: #000000;
|
||||
--color-surface: #141414;
|
||||
--color-text: #ffffff;
|
||||
--color-muted: #888888;
|
||||
--font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
|
||||
--space-inline: clamp(1.25rem, 4vw, 3.5rem);
|
||||
--width-read: 42rem;
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: var(--font-sans);
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-text);
|
||||
line-height: 1.6;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
.page {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.page__main {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
padding-inline: var(--space-inline);
|
||||
}
|
||||
|
||||
.container--narrow {
|
||||
max-width: calc(var(--width-read) + var(--space-inline) * 2);
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
/* Site header */
|
||||
|
||||
.site-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding-block: clamp(1.25rem, 2vw, 1.75rem);
|
||||
}
|
||||
|
||||
.site-header__logo {
|
||||
color: var(--color-text);
|
||||
text-decoration: none;
|
||||
font-weight: 700;
|
||||
font-size: clamp(1rem, 2vw, 1.125rem);
|
||||
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);
|
||||
}
|
||||
|
||||
.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;
|
||||
color: var(--color-muted);
|
||||
font-size: clamp(1rem, 2vw, 1.125rem);
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
/* Hero */
|
||||
|
||||
.hero {
|
||||
padding-block: clamp(3rem, 8vw, 6rem) clamp(2.5rem, 6vw, 4rem);
|
||||
}
|
||||
|
||||
.hero__title {
|
||||
margin: 0 0 clamp(1rem, 2vw, 1.5rem);
|
||||
font-size: clamp(2.25rem, 7vw, 4.5rem);
|
||||
font-weight: 700;
|
||||
line-height: 1.05;
|
||||
letter-spacing: -0.04em;
|
||||
max-width: 14ch;
|
||||
}
|
||||
|
||||
.hero__body {
|
||||
max-width: 38rem;
|
||||
color: var(--color-muted);
|
||||
font-size: clamp(1rem, 2vw, 1.25rem);
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
/* Latest section */
|
||||
|
||||
.latest {
|
||||
padding-block: clamp(2.5rem, 5vw, 4rem) clamp(3rem, 6vw, 5rem);
|
||||
}
|
||||
|
||||
.latest__header {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
margin-bottom: clamp(1.5rem, 3vw, 2rem);
|
||||
}
|
||||
|
||||
.latest__title {
|
||||
margin: 0;
|
||||
font-size: clamp(1.25rem, 2.5vw, 1.75rem);
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.latest__link {
|
||||
color: var(--color-muted);
|
||||
text-decoration: none;
|
||||
font-size: 0.9375rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.latest__link:hover {
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
/* Post list */
|
||||
|
||||
.post-list {
|
||||
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;
|
||||
}
|
||||
|
||||
.post-list__link {
|
||||
display: block;
|
||||
padding-block: 1.25rem;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.post-list__link:hover .post-list__title {
|
||||
color: var(--color-muted);
|
||||
}
|
||||
|
||||
.post-list__meta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
align-items: center;
|
||||
margin: 0 0 0.375rem;
|
||||
font-size: 0.8125rem;
|
||||
color: var(--color-muted);
|
||||
}
|
||||
|
||||
.post-list__type {
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.post-list__type::after {
|
||||
content: "·";
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
.post-list__title {
|
||||
margin: 0 0 0.375rem;
|
||||
font-size: clamp(1rem, 1.8vw, 1.125rem);
|
||||
font-weight: 600;
|
||||
line-height: 1.35;
|
||||
letter-spacing: -0.02em;
|
||||
transition: color 0.15s ease;
|
||||
}
|
||||
|
||||
.post-list__excerpt {
|
||||
margin: 0;
|
||||
color: var(--color-muted);
|
||||
font-size: 0.9375rem;
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.post-list__series {
|
||||
margin: 0.5rem 0 0;
|
||||
color: var(--color-muted);
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
|
||||
/* Section (list pages) */
|
||||
|
||||
.section {
|
||||
padding-block: clamp(2.5rem, 5vw, 4rem) clamp(3rem, 6vw, 5rem);
|
||||
}
|
||||
|
||||
.section__title {
|
||||
margin: 0 0 0.75rem;
|
||||
font-size: clamp(2rem, 5vw, 3rem);
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.03em;
|
||||
}
|
||||
|
||||
.section__intro {
|
||||
max-width: 38rem;
|
||||
color: var(--color-muted);
|
||||
font-size: clamp(1rem, 2vw, 1.125rem);
|
||||
margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
|
||||
}
|
||||
|
||||
/* Post (single) */
|
||||
|
||||
.post {
|
||||
padding-block: clamp(2.5rem, 5vw, 4rem) clamp(3rem, 6vw, 5rem);
|
||||
}
|
||||
|
||||
.post__meta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
align-items: center;
|
||||
margin: 0 0 1rem;
|
||||
font-size: 0.875rem;
|
||||
color: var(--color-muted);
|
||||
}
|
||||
|
||||
.post__type {
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
font-weight: 500;
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
|
||||
.post__type::after {
|
||||
content: "·";
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
.post__title {
|
||||
margin: 0 0 0.75rem;
|
||||
font-size: clamp(2rem, 5vw, 3rem);
|
||||
font-weight: 700;
|
||||
line-height: 1.15;
|
||||
letter-spacing: -0.03em;
|
||||
}
|
||||
|
||||
.post__lead {
|
||||
margin: 0 0 1.25rem;
|
||||
color: var(--color-muted);
|
||||
font-size: clamp(1rem, 2vw, 1.25rem);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.post__tags,
|
||||
.post__series,
|
||||
.post__reference {
|
||||
margin: 0 0 1rem;
|
||||
color: var(--color-muted);
|
||||
font-size: 0.9375rem;
|
||||
}
|
||||
|
||||
.post__video {
|
||||
margin: 0 0 2rem;
|
||||
aspect-ratio: 16 / 9;
|
||||
}
|
||||
|
||||
.post__iframe {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.post__body {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Content typography */
|
||||
|
||||
.content {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.content > :first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.content > :last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.content h2 {
|
||||
margin-top: 2.5rem;
|
||||
margin-bottom: 0.75rem;
|
||||
font-size: clamp(1.25rem, 2.5vw, 1.5rem);
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.content h3 {
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 0.5rem;
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.content p {
|
||||
margin: 0 0 1rem;
|
||||
}
|
||||
|
||||
.content a {
|
||||
color: var(--color-text);
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 2px;
|
||||
}
|
||||
|
||||
.content a:hover {
|
||||
color: var(--color-muted);
|
||||
}
|
||||
|
||||
.content ul,
|
||||
.content ol {
|
||||
margin: 0 0 1rem;
|
||||
padding-left: 1.25rem;
|
||||
}
|
||||
|
||||
.content li {
|
||||
margin-bottom: 0.375rem;
|
||||
}
|
||||
|
||||
.content code {
|
||||
font-size: 0.875em;
|
||||
padding: 0.125rem 0.25rem;
|
||||
background-color: var(--color-surface);
|
||||
}
|
||||
|
||||
.content pre {
|
||||
overflow-x: auto;
|
||||
padding: 1rem;
|
||||
background-color: var(--color-surface);
|
||||
}
|
||||
|
||||
.content pre code {
|
||||
padding: 0;
|
||||
background: none;
|
||||
}
|
||||
|
||||
.content blockquote {
|
||||
margin: 1.5rem 0;
|
||||
padding-left: 1rem;
|
||||
border-left: 2px solid var(--color-muted);
|
||||
color: var(--color-muted);
|
||||
}
|
||||
|
||||
/* Site footer */
|
||||
|
||||
.site-footer {
|
||||
padding-block: clamp(2rem, 4vw, 3rem);
|
||||
}
|
||||
|
||||
.site-footer__copy {
|
||||
margin: 0;
|
||||
color: var(--color-muted);
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
name = "Codegirl"
|
||||
license = "MIT"
|
||||
licenselink = "https://opensource.org/licenses/MIT"
|
||||
description = "Dark, minimal theme for Codegirl Games"
|
||||
tags = ["dark", "minimal", "blog"]
|
||||
min_version = "0.120.0"
|
||||
|
||||
[author]
|
||||
name = "Codegirl Games"
|
||||
Reference in New Issue
Block a user