commit 4d1ddd22ed70dbd51a2c9c2732844043c34c64e0 Author: Frank "PHiAX" Weggelaar Date: Sat Jan 24 20:28:16 2026 +0100 First try at a HUGO theme for phiax.nl diff --git a/archetypes/default.md b/archetypes/default.md new file mode 100644 index 0000000..25b6752 --- /dev/null +++ b/archetypes/default.md @@ -0,0 +1,5 @@ ++++ +date = '{{ .Date }}' +draft = true +title = '{{ replace .File.ContentBaseName "-" " " | title }}' ++++ diff --git a/assets/css/main.css b/assets/css/main.css new file mode 100644 index 0000000..4013e11 --- /dev/null +++ b/assets/css/main.css @@ -0,0 +1,206 @@ +@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@400;700&display=swap'); + +*, +*::before, +*::after { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + display: grid; + align-content: center; + gap: 2rem; + padding: 2rem; + color: rgba(30, 30, 30); + background-image: radial-gradient(#181818 2px, transparent 2px), radial-gradient(#181818 2px, transparent 2px); + background-size: 32px 32px; + background-position: 0 0, 16px 16px; + background-color: #121212; + position: relative; + --accent-color: #a256ff; + font-family: 'Josefin Sans', sans-serif; +} + +header { + width: min(60rem, 100%); + margin-inline: auto; + display: flex; + row-gap: 2rem; + flex-wrap: nowrap; + justify-content: left; +} + +nav { + width: min(60rem, 100%); + margin-inline: auto; + display: flex; + row-gap: 2rem; + height: 2rem; + flex-wrap: wrap; + justify-content: left; + font-size: 1.2rem; + color: white; + background-color: var(--accent-color); + z-index: 1; /* Make sure nav content is above pseudo-elements */ +} + +nav::before, +nav::after { + content: ''; + position: absolute; + height: 2rem; + width: calc(50vw - 30rem); /* Adjust width to ensure it extends to the edges */ + background-color: var(--accent-color); /* Same background color */ + z-index: -1; /* Place behind the nav */ +} + +nav::before { + left: 0; /* Extend to the left */ +} + +nav::after { + right: 0; /* Extend to the right */ +} + +article.article-box { + width: min(60rem, 90%); + margin-inline: auto; + display: flex; + row-gap: 2rem; + flex-wrap: wrap; + justify-content: center; +} + +article.article-box article.article-content { + background: rgba(224, 224, 224, 1.0); + --overlap-size: 1.5rem; + width: min(60rem, 100%); + padding-block-start: 0.5rem; + padding-block-end: 2rem; + display: grid; + grid-template-rows: max-content max-content 1fr max-content; + gap: 0.5rem; + box-shadow: 0.25rem 0.25rem 0.5rem rgba(0, 0, 0, 0.5); +} + +article.article-box article.article-content p { + padding: 0 1rem 0 1rem ; +} + +article.article-box article.article-content .article-meta { + font-size: 1.2rem; + color: var(--accent-color); + text-align: left; + padding-left: 0.75rem; +} + +article.article-box article.article-content .article-title { + justify-self: start; + margin-left: calc(var(--overlap-size) * -1); + padding-block: 0.5rem; + padding-inline: 2.5rem; + + border: none; + font-family: inherit; + color: white; + font-size: 1.1rem; + + background-color: var(--accent-color); + + position: relative; +} + +article.article-box article.article-content .article-title::after { + content: ""; + position: absolute; + height: var(--overlap-size); + width: var(--overlap-size); + left: 0; + bottom: 100%; + background-color: inherit; + background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)); + clip-path: polygon(100% 0, 100% 100%, 0 100%); +} + +article.article-box article.article-content .article-end-ribbon { + justify-self: end; + margin-right: calc(var(--overlap-size) * -1); + padding-block: 0.25rem; + padding-inline: 2.5rem; + background-color: var(--accent-color); + color: white; + font-size: 1.1rem; + + background-image: linear-gradient(transparent 50%, rgba(0, 0, 0, 0.25) 0); + background-size: 100% 200%; + + transition: background-position 100ms ease; + cursor: pointer; + + position: relative; +} + +article.article-box article.article-content .article-end-ribbon:focus-visible { + outline-offset: 5px; + outline: 2px solid var(--accent-color); + background-position: 0 100%; +} + +article.article-box article.article-content .article-end-ribbon:hover { + background-position: 0 100%; +} + +article.article-box article.article-content .article-end-ribbon::after { + content: ""; + position: absolute; + height: var(--overlap-size); + width: var(--overlap-size); + right: 0; + top: 100%; + background-color: inherit; + background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)); + clip-path: polygon(0 0, 100% 0, 0 100%); +} + +footer { + position: fixed; + left: 0; + right: 0; + bottom: 0; + width: 100%; + max-width: none; + margin: 0; + display: flex; + height: 3rem; + padding-inline: min(2rem, 4vw); + background-color: var(--accent-color); + z-index: 1; +} + +footer .container { + width: min(60rem, 100%); + margin-inline: auto; + display: flex; + align-items: center; + height: 100%; + padding-inline: 1rem; /* optional inner padding */ + gap: 1rem; + font-size: 1.2rem; + color: white; +} + +/* Ensure the background strips (pseudo-elements) still span outwards */ +footer::before, +footer::after { + content: ''; + position: absolute; + height: 3rem; + width: 50vw; + background-color: var(--accent-color); + z-index: -1; +} + +footer::before { left: 0; } +footer::after { right: 0; } diff --git a/assets/images/logo_purple.png b/assets/images/logo_purple.png new file mode 100644 index 0000000..c8346f1 Binary files /dev/null and b/assets/images/logo_purple.png differ diff --git a/layouts/_partials/footer.html b/layouts/_partials/footer.html new file mode 100644 index 0000000..a38701a --- /dev/null +++ b/layouts/_partials/footer.html @@ -0,0 +1 @@ +

CC3.0-SA-NC {{ now.Year }}. PHiAX.

diff --git a/layouts/_partials/head.html b/layouts/_partials/head.html new file mode 100644 index 0000000..5e6f48b --- /dev/null +++ b/layouts/_partials/head.html @@ -0,0 +1,5 @@ + + + +{{ if .IsHome }}{{ site.Title }}{{ else }}{{ printf "%s | %s" .Title site.Title }}{{ end }} +{{ partialCached "head/css.html" . }} diff --git a/layouts/_partials/head/css.html b/layouts/_partials/head/css.html new file mode 100644 index 0000000..d76d23a --- /dev/null +++ b/layouts/_partials/head/css.html @@ -0,0 +1,9 @@ +{{- with resources.Get "css/main.css" }} + {{- if hugo.IsDevelopment }} + + {{- else }} + {{- with . | minify | fingerprint }} + + {{- end }} + {{- end }} +{{- end }} diff --git a/layouts/_partials/header.html b/layouts/_partials/header.html new file mode 100644 index 0000000..a908cf8 --- /dev/null +++ b/layouts/_partials/header.html @@ -0,0 +1,3 @@ +{{- with resources.Get "images/logo_purple.png" }} + +{{- end }} diff --git a/layouts/_partials/menu.html b/layouts/_partials/menu.html new file mode 100644 index 0000000..14245b5 --- /dev/null +++ b/layouts/_partials/menu.html @@ -0,0 +1,51 @@ +{{- /* +Renders a menu for the given menu ID. + +@context {page} page The current page. +@context {string} menuID The menu ID. + +@example: {{ partial "menu.html" (dict "menuID" "main" "page" .) }} +*/}} + +{{- $page := .page }} +{{- $menuID := .menuID }} + +{{- with index site.Menus $menuID }} + +{{- end }} + +{{- define "_partials/inline/menu/walk.html" }} + {{- $page := .page }} + {{- range .menuEntries }} + {{- $attrs := dict "href" .URL }} + {{- if $page.IsMenuCurrent .Menu . }} + {{- $attrs = merge $attrs (dict "class" "active" "aria-current" "page") }} + {{- else if $page.HasMenuCurrent .Menu .}} + {{- $attrs = merge $attrs (dict "class" "ancestor" "aria-current" "true") }} + {{- end }} + {{- $name := .Name }} + {{- with .Identifier }} + {{- with T . }} + {{- $name = . }} + {{- end }} + {{- end }} +
  • + {{ $name }} + {{- with .Children }} + + {{- end }} +
    • + {{- end }} +{{- end }} diff --git a/layouts/_partials/navigation.html b/layouts/_partials/navigation.html new file mode 100644 index 0000000..8995308 --- /dev/null +++ b/layouts/_partials/navigation.html @@ -0,0 +1 @@ +{{ partial "menu.html" (dict "menuID" "main" "page" .) }} diff --git a/layouts/_partials/terms.html b/layouts/_partials/terms.html new file mode 100644 index 0000000..53603bc --- /dev/null +++ b/layouts/_partials/terms.html @@ -0,0 +1,18 @@ +{{- /* +For a given taxonomy, renders a list of terms assigned to the page. + +@context {page} page The current page. +@context {string} taxonomy The taxonomy. + +@example: {{ partial "terms.html" (dict "taxonomy" "tags" "page" .) }} +*/}} + +{{- $page := .page }} +{{- $taxonomy := .taxonomy }} + +{{- with $page.GetTerms $taxonomy }} + {{- $label := (index . 0).Parent.LinkTitle }} + {{- range . }} +
    Tags: {{ .LinkTitle }}
    + {{- end }} +{{- end }} diff --git a/layouts/baseof.html b/layouts/baseof.html new file mode 100644 index 0000000..4b965b1 --- /dev/null +++ b/layouts/baseof.html @@ -0,0 +1,19 @@ + + + + {{ partial "head.html" . }} + + +
    + {{ partial "header.html" . }} +
    + + {{ block "main" . }}{{ end }} + + + diff --git a/layouts/home.html b/layouts/home.html new file mode 100644 index 0000000..b7df497 --- /dev/null +++ b/layouts/home.html @@ -0,0 +1,12 @@ +{{ define "main" }} + {{ range site.RegularPages.Reverse }} +
    +
    +
    {{ time.Format "Monday 2 January 2006" .PublishDate }}
    +
    {{ .LinkTitle }}
    + {{ .Summary }} + Read more +
    +
    + {{ end }} +{{ end }} diff --git a/layouts/page.html b/layouts/page.html new file mode 100644 index 0000000..ef20466 --- /dev/null +++ b/layouts/page.html @@ -0,0 +1,12 @@ +{{ define "main" }} +
    +
    + {{ $dateMachine := .Date | time.Format "2006-01-02T15:04:05-07:00" }} + {{ $dateHuman := .Date | time.Format ":date_long" }} +
    +
    {{ .LinkTitle }}
    + {{ .Content }} + {{ partial "terms.html" (dict "taxonomy" "tags" "page" .) }} +
    +
    +{{ end }}