First try at a HUGO theme for phiax.nl
This commit is contained in:
Frank "PHiAX" Weggelaar
commit
4d1ddd22ed
13 changed files with 342 additions and 0 deletions
5
archetypes/default.md
Normal file
5
archetypes/default.md
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
+++
|
||||
date = '{{ .Date }}'
|
||||
draft = true
|
||||
title = '{{ replace .File.ContentBaseName "-" " " | title }}'
|
||||
+++
|
||||
206
assets/css/main.css
Normal file
206
assets/css/main.css
Normal file
|
|
@ -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; }
|
||||
BIN
assets/images/logo_purple.png
Normal file
BIN
assets/images/logo_purple.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.2 KiB |
1
layouts/_partials/footer.html
Normal file
1
layouts/_partials/footer.html
Normal file
|
|
@ -0,0 +1 @@
|
|||
<p>CC3.0-SA-NC {{ now.Year }}. PHiAX.</p>
|
||||
5
layouts/_partials/head.html
Normal file
5
layouts/_partials/head.html
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="">
|
||||
<title>{{ if .IsHome }}{{ site.Title }}{{ else }}{{ printf "%s | %s" .Title site.Title }}{{ end }}</title>
|
||||
{{ partialCached "head/css.html" . }}
|
||||
9
layouts/_partials/head/css.html
Normal file
9
layouts/_partials/head/css.html
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
{{- with resources.Get "css/main.css" }}
|
||||
{{- if hugo.IsDevelopment }}
|
||||
<link rel="stylesheet" href="{{ .RelPermalink }}">
|
||||
{{- else }}
|
||||
{{- with . | minify | fingerprint }}
|
||||
<link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous">
|
||||
{{- end }}
|
||||
{{- end }}
|
||||
{{- end }}
|
||||
3
layouts/_partials/header.html
Normal file
3
layouts/_partials/header.html
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
{{- with resources.Get "images/logo_purple.png" }}
|
||||
<img src="{{ .RelPermalink }}" />
|
||||
{{- end }}
|
||||
51
layouts/_partials/menu.html
Normal file
51
layouts/_partials/menu.html
Normal file
|
|
@ -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 }}
|
||||
<nav>
|
||||
<ul>
|
||||
{{- partial "inline/menu/walk.html" (dict "page" $page "menuEntries" .) }}
|
||||
</ul>
|
||||
</nav>
|
||||
{{- 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 }}
|
||||
<li>
|
||||
<a
|
||||
{{- range $k, $v := $attrs }}
|
||||
{{- with $v }}
|
||||
{{- printf " %s=%q" $k $v | safeHTMLAttr }}
|
||||
{{- end }}
|
||||
{{- end -}}
|
||||
>{{ $name }}</a>
|
||||
{{- with .Children }}
|
||||
<ul>
|
||||
{{- partial "inline/menu/walk.html" (dict "page" $page "menuEntries" .) }}
|
||||
</ul>
|
||||
{{- end }}
|
||||
</li>
|
||||
{{- end }}
|
||||
{{- end }}
|
||||
1
layouts/_partials/navigation.html
Normal file
1
layouts/_partials/navigation.html
Normal file
|
|
@ -0,0 +1 @@
|
|||
{{ partial "menu.html" (dict "menuID" "main" "page" .) }}
|
||||
18
layouts/_partials/terms.html
Normal file
18
layouts/_partials/terms.html
Normal file
|
|
@ -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 . }}
|
||||
<div class="article-end-ribbon">Tags: <a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></div>
|
||||
{{- end }}
|
||||
{{- end }}
|
||||
19
layouts/baseof.html
Normal file
19
layouts/baseof.html
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="{{ site.Language.LanguageCode }}" dir="{{ or site.Language.LanguageDirection `ltr` }}">
|
||||
<head>
|
||||
{{ partial "head.html" . }}
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
{{ partial "header.html" . }}
|
||||
</header>
|
||||
<nav>
|
||||
</nav>
|
||||
{{ block "main" . }}{{ end }}
|
||||
<footer>
|
||||
<div class="container">
|
||||
{{ partial "footer.html" . }}
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
12
layouts/home.html
Normal file
12
layouts/home.html
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
{{ define "main" }}
|
||||
{{ range site.RegularPages.Reverse }}
|
||||
<article class="article-box">
|
||||
<article class="article-content">
|
||||
<div class="article-meta">{{ time.Format "Monday 2 January 2006" .PublishDate }}</div>
|
||||
<div class="article-title">{{ .LinkTitle }}</div>
|
||||
{{ .Summary }}
|
||||
<a href="{{ .RelPermalink }}" class="article-end-ribbon">Read more</a>
|
||||
</article>
|
||||
</article>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
12
layouts/page.html
Normal file
12
layouts/page.html
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
{{ define "main" }}
|
||||
<article class="article-box">
|
||||
<article class="article-content">
|
||||
{{ $dateMachine := .Date | time.Format "2006-01-02T15:04:05-07:00" }}
|
||||
{{ $dateHuman := .Date | time.Format ":date_long" }}
|
||||
<div class="article-meta"><time datetime="{{ $dateMachine }}">{{ $dateHuman }}</time></div>
|
||||
<div class="article-title">{{ .LinkTitle }}</div>
|
||||
{{ .Content }}
|
||||
{{ partial "terms.html" (dict "taxonomy" "tags" "page" .) }}
|
||||
</article>
|
||||
</article>
|
||||
{{ end }}
|
||||
Loading…
Add table
Add a link
Reference in a new issue