Draw the rest of the fucking owl

Signed-off-by: Nikolaos Karaolidis <nick@karaolidis.com>
2025-08-05 21:46:57 +02:00
parent 455372e75c
commit 1f49f0ee88
22 changed files with 544 additions and 1 deletions
--- a/README.md
+++ b/README.md
@@ -1,3 +1,3 @@
 # huell

-A Hugo Shell theme
+A Hugo Shell theme
--- a/layouts/404.html
+++ b/layouts/404.html
@@ -0,0 +1,4 @@
+{{ define "main" }}
+  <h1>Page not found</h1>
+  <p><a href="{{ .Site.BaseURL }}">Return to the home page</a>.</p>
+{{ end }}
--- a/layouts/_default/_markup/render-heading.html
+++ b/layouts/_default/_markup/render-heading.html
@@ -0,0 +1,3 @@
+
+<!-- prettier-ignore -->
+<h{{ .Level }} id="{{ .Anchor | safeURL }}">{{ .Text | safeHTML }}</h{{ .Level }}>
--- a/layouts/_default/_markup/render-image.html
+++ b/layouts/_default/_markup/render-image.html
@@ -0,0 +1,6 @@
+<img
+  src="{{ .Destination | safeURL }}"
+  alt="{{ .Text }}"
+  {{ with .Title }}title="{{ . }}"{{ end }}
+  class="img-responsive"
+/>
--- a/layouts/_default/_markup/render-link.html
+++ b/layouts/_default/_markup/render-link.html
@@ -0,0 +1,9 @@
+<a
+  href="{{ .Destination | safeURL }}"
+  {{ with .Title }}
+    title="{{ . }}"
+  {{ end }}{{ if strings.HasPrefix .Destination "http" }}
+    target="_blank" rel="noopener"
+  {{ end }}
+  >{{ .Text | safeHTML }}</a
+>
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<html lang="{{ .Site.LanguageCode }}">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+
+    <title>
+      {{ .Site.Title }}{{ $url := urls.Parse .Page.Permalink }}{{ $url.Path }}
+    </title>
+    {{ with .Site.Params.description }}
+      <meta name="description" content="{{ . }}" />
+    {{ end }}
+
+
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="robots" content="all,follow" />
+    <meta name="googlebot" content="index,follow,snippet,archive" />
+
+    <link rel="stylesheet" href="{{ "css/animate.min.css" | absURL }}" />
+    <link rel="stylesheet" href="{{ "css/terminal.min.css" | absURL }}" />
+    <link rel="stylesheet" href="{{ "css/huell.css" | absURL }}" />
+
+    <script src="{{ "js/masonry.min.js" | absURL }}" async></script>
+
+    {{ `
+      <!--[if lt IE 9]>
+      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
+      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
+      <![endif]-->
+      ` | safeHTML
+    }}
+
+    {{- partial "favicon.html" . -}}
+
+    {{ with .OutputFormats.Get "RSS" }}
+      {{ printf `
+        <link href="%s" rel="%s" type="%s" title="%s" />` .Permalink .Rel .MediaType.Type $.Site.Title | safeHTML
+      }}
+    {{ end }}
+
+    {{- partial "opengraph.html" . -}}
+    {{- partial "twitter.html" . -}}
+  </head>
+
+  <body class="terminal">
+    {{- partial "header.html" . -}}
+
+
+    <div class="container {{ .Site.Params.animateStyle }}">
+      {{ block "main" . }}
+      {{ end }}
+      {{ partial "footer.html" . }}
+    </div>
+  </body>
+</html>
--- a/layouts/_default/list.html
+++ b/layouts/_default/list.html
@@ -0,0 +1,10 @@
+{{ define "main" }}
+  <h1>{{ .Title }}</h1>
+  <br />
+  {{ .Content }}
+
+
+  <div class="posts-list">
+    {{ partial "posts.html" . }}
+  </div>
+{{ end }}
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -0,0 +1,4 @@
+{{ define "main" }}
+  <h1>{{ .Title }}</h1>
+  {{ .Content }}
+{{ end }}
--- a/layouts/gallery/list.html
+++ b/layouts/gallery/list.html
@@ -0,0 +1,7 @@
+{{ define "main" }}
+  <h1>{{ .Title }}</h1>
+  {{ .Content }}
+  <div class="image-grid">
+    {{ partial "gallery.html" . }}
+  </div>
+{{ end }}
--- a/layouts/gallery/single.html
+++ b/layouts/gallery/single.html
@@ -0,0 +1,18 @@
+{{ define "main" }}
+  <h1>{{ .Title }}</h1>
+
+  <div>
+    {{ .Date | time.Format ":date_medium" }}
+  </div>
+
+  {{ if and (isset .Params "image") .Params.image }}
+    {{ $image := .Page.Resources.GetMatch .Params.image }}
+    {{ with $image }}
+      {{ $thumb := .Resize "1000x" }}
+      {{ printf `<img src="%s" alt="%s" class="img-responsive gallery-image">` $thumb.RelPermalink .Title | safeHTML }}
+    {{ end }}
+  {{ end }}
+
+  {{ .Content }}
+  {{ partial "comments.html" . }}
+{{ end }}
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -0,0 +1,7 @@
+{{ define "main" }}
+  <div class="posts-list">
+    {{ with .Site.GetPage "/posts" }}
+      {{ partial "posts.html" . }}
+    {{ end }}
+  </div>
+{{ end }}
--- a/layouts/partials/comments.html
+++ b/layouts/partials/comments.html
--- a/layouts/partials/favicon.html
+++ b/layouts/partials/favicon.html
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -0,0 +1 @@
+<div class="footer">{{ .Site.Title }} © {{ now.Year }}</div>
--- a/layouts/partials/gallery.html
+++ b/layouts/partials/gallery.html
@@ -0,0 +1,17 @@
+{{ range sort .Pages "Date" "desc" }}
+  {{ if not .Params.private }}
+    {{ if and (isset .Params "image") .Params.image }}
+      <a href="{{ .Permalink }}" title="{{ .Title }}">
+        {{ $image := .Page.Resources.GetMatch .Params.image }}
+        {{ with $image }}
+          {{ $thumb := .Resize "400x" }}
+          <img
+            src="{{ $thumb.RelPermalink }}"
+            alt="{{ .Title }}"
+            class="img-responsive"
+          />
+        {{ end }}
+      </a>
+    {{ end }}
+  {{ end }}
+{{ end }}
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -0,0 +1,35 @@
+<div class="container">
+  <div class="terminal-nav">
+    <header class="terminal-logo">
+      <div class="logo terminal-prompt">
+        {{ $url := replace .Permalink ( printf "%s" .Site.BaseURL) "" }}
+        {{ $.Scratch.Add "path" .Site.BaseURL }}
+        <a
+          href="{{ .Site.BaseURL }}"
+          class="no-style {{ with .Site.Params.TitleCutting }}
+            site-name
+          {{ end }}"
+          >{{ .Site.Params.prompt | default .Site.Title }}</a
+        ><span class="prompt-symbol">:~#</span>
+        {{ range $index, $element := split $url "/" }}
+          {{ $.Scratch.Add "path" $element }}{{ if ne $element "" }}
+            <a href="{{ $.Scratch.Get " path" | absURL }}">{{ . }}</a>
+            <span class="prompt-symbol">/{{ $.Scratch.Add "path" "/" }}</span>
+          {{ end }}
+        {{ end }}
+      </div>
+    </header>
+    <nav class="terminal-menu">
+      <ul vocab="https://schema.org/" typeof="BreadcrumbList">
+        {{ range $index, $element := .Site.Params.navlinks }}
+          <li property="itemListElement" typeof="ListItem">
+            <a property="item" typeof="WebPage" href="{{ absURL .url }}">
+              <span property="name">{{ .name }}</span>
+            </a>
+            <meta property="position" content="{{ add $index 1 }}" />
+          </li>
+        {{ end }}
+      </ul>
+    </nav>
+  </div>
+</div>
--- a/layouts/partials/opengraph.html
+++ b/layouts/partials/opengraph.html
@@ -0,0 +1,78 @@
+<meta property="og:title" content="{{ .Title }}" />
+<meta
+  property="og:description"
+  content="{{ with .Description }}
+    {{ . }}
+  {{ else }}
+    {{ if .IsPage }}{{ with .Site.Params.description }}{{ . }}{{ end }}{{ end }}
+  {{ end }}"
+/>
+<meta
+  property="og:type"
+  content="{{ if .IsPage }}
+    article
+  {{ else }}
+    website
+  {{ end }}"
+/>
+<meta property="og:url" content="{{ .Permalink }}" />
+
+{{- with .Params.image }}
+  {{ $image := $.Resources.GetMatch . }}
+  {{ with $image }}
+    {{ $thumb := .Resize "400x" }}
+    <meta property="og:image" content="{{ $thumb.Permalink }}" />
+  {{ end }}
+{{ end }}
+
+{{- $iso8601 := "2000-01-01T00:00:00-01:00" -}}
+{{- if .IsPage }}
+  {{- if not .PublishDate.IsZero }}
+    <meta
+      property="article:published_time"
+      {{ .PublishDate.Format $iso8601 | printf "content=%q" | safeHTMLAttr }}
+    />
+  {{ else if not .Date.IsZero }}
+    <meta
+      property="article:published_time"
+      {{ .Date.Format $iso8601 | printf "content=%q" | safeHTMLAttr }}
+    />
+  {{ end }}
+{{- end }}
+{{/* .IsPage */}}
+
+{{- with .Params.audio }}
+  <meta property="og:audio" content="{{ . }}" />
+{{ end }}
+{{- with .Params.locale }}
+  <meta property="og:locale" content="{{ . }}" />
+{{ end }}
+{{- with .Site.Params.title }}
+  <meta property="og:site_name" content="{{ . }}" />
+{{ end }}
+{{- with .Params.videos }}
+  {{- range . }}
+    <meta property="og:video" content="{{ . | absURL }}" />
+  {{ end }}
+{{ end }}
+
+{{- $permalink := .Permalink }}
+{{- $siteSeries := .Site.Taxonomies.series }}{{ with .Params.series }}
+  {{- range $name := . }}
+    {{- $series := index $siteSeries $name }}
+    {{- range $page := first 6 $series.Pages }}
+      {{- if ne $page.Permalink $permalink }}
+        <meta property="og:see_also" content="{{ $page.Permalink }}" />
+      {{ end }}
+    {{- end }}
+  {{ end }}
+{{ end }}
+
+{{- if .IsPage }}
+  <meta property="article:section" content="{{ .Section }}" />
+  {{- with .Params.tags }}
+    {{ range first 6 . }}
+      <meta property="article:tag" content="{{ . }}" />
+    {{- end }}
+  {{ end }}
+{{- end }}
--- a/layouts/partials/posts.html
+++ b/layouts/partials/posts.html
@@ -0,0 +1,11 @@
+{{ range sort .Pages "Date" "desc" }}
+{{ if not .Params.private }}
+<div class="post">
+  <p>
+  <div class="date">{{ .Date | time.Format ":date_medium" }}</div>
+  <h1><a href="{{ .Permalink }}" title="{{ .Title }}">{{ .Title }}</a></h1>
+  {{ .Summary }}
+  </p>
+</div>
+{{ end }}
+{{ end }}
--- a/layouts/partials/twitter.html
+++ b/layouts/partials/twitter.html
@@ -0,0 +1,23 @@
+{{- with .Params.image }}
+  {{ $image := $.Resources.GetMatch . }}
+  {{ with $image }}
+    {{ $thumb := .Resize "400x" }}
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:image" content="{{ $thumb.Permalink }}" />
+  {{ end }}
+{{ end }}
+
+
+<meta name="twitter:title" content="{{ .Title }}" />
+<meta
+  name="twitter:description"
+  content="{{ with .Description }}
+    {{ . }}
+  {{ else }}
+    {{ if .IsPage }}
+      {{ .Summary }}
+    {{ else }}
+      {{ with .Site.Params.description }}{{ . }}{{ end }}
+    {{ end }}
+  {{ end -}}"
+/>
--- a/layouts/posts/single.html
+++ b/layouts/posts/single.html
@@ -0,0 +1,12 @@
+{{ define "main" }}
+  <h1>{{ .Title }}</h1>
+
+  <div>
+    {{ .Date | time.Format ":date_medium" }}
+  </div>
+
+  <br />
+
+  {{ .Content }}
+  {{ partial "comments.html" . }}
+{{ end }}
--- a/layouts/sitemap.xml
+++ b/layouts/sitemap.xml
@@ -0,0 +1,16 @@
+{{ printf "<?xml version=\"1.0\" encoding=\"utf-8\" standalone=\"yes\" ?>" | safeHTML }}
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
+    xmlns:xhtml="http://www.w3.org/1999/xhtml">
+    {{ range .Pages }}
+        {{ if not .Params.private }}
+        <url>
+            <loc>{{ .Permalink }}</loc>{{ if not .Lastmod.IsZero }}
+            <lastmod>{{ safeHTML ( .Lastmod.Format "2006-01-02T15:04:05-07:00" ) }}</lastmod>{{ end }}{{ with .Sitemap.ChangeFreq }}
+            <changefreq>{{ . }}</changefreq>{{ end }}{{ if ge .Sitemap.Priority 0.0 }}
+            <priority>{{ .Sitemap.Priority }}</priority>{{ end }}{{ if .IsTranslated }}{{ range .Translations }}
+            <xhtml:link rel="alternate" hreflang="{{ .Lang }}" href="{{ .Permalink }}"/>{{ end }}
+            <xhtml:link rel="alternate" hreflang="{{ .Lang }}" href="{{ .Permalink }}"/>{{ end }}
+        </url>
+        {{ end }}
+    {{ end }}
+</urlset>
--- a/static/css/huell.css
+++ b/static/css/huell.css
@@ -29,3 +29,230 @@
  font-weight: 700;
  text-rendering: optimizeLegibility;
 }
+
+:root {
+  --global-font-size: 16px;
+  --global-font-color: #444;
+  --mono-font-stack: Roboto Mono, Menlo, Monaco, Lucida Console,
+    Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono,
+    Courier New, monospace, serif;
+  --font-stack: Roboto Mono, Menlo, Monaco, Lucida Console, Liberation Mono,
+    DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace,
+    serif;
+  --global-line-height: 1.6em;
+  --page-width: 45em;
+  --display-h1-decoration: 1;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background-color: #222225;
+    --font-color: #e8e9ed;
+    --invert-font-color: #222225;
+    --primary-color: #62c4ff;
+    --secondary-color: #a3abba;
+    --tertiary-color: #a3abba;
+    --error-color: #ff3c74;
+    --progress-bar-background: #3f3f44;
+    --progress-bar-fill: #62c4ff;
+    --code-bg-color: #3f3f44;
+  }
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    --background-color: #fff;
+    --font-color: #151515;
+    --invert-font-color: #fff;
+    --primary-color: #1a95e0;
+    --secondary-color: #727578;
+    --tertiary-color: #727578;
+    --error-color: #d20962;
+    --progress-bar-background: #727578;
+    --progress-bar-fill: #151515;
+    --code-bg-color: #e8eff2;
+  }
+}
+
+@media only screen and (max-width: 850px) {
+  :root {
+    --global-font-size: 14px;
+    --global-font-color: #444;
+    --global-line-height: 1.6em;
+    --page-width: 70em;
+  }
+}
+
+body {
+  font-family: var(--font-stack);
+  font-size: var(--global-font-size);
+  background-color: var(--background-color);
+  margin-bottom: 75px;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+.h1,
+.h2,
+.h3,
+.h4,
+.h5,
+.h6 {
+  font-family: var(--font-stack);
+  clear: both;
+}
+
+h1 {
+  margin-bottom: 10px;
+  display: inline-block;
+}
+
+.logo {
+  font-weight: normal;
+}
+
+.terminal-menu li {
+  margin-right: 30px;
+}
+
+figure {
+  margin-top: 15px;
+  margin-bottom: 15px;
+  margin-left: 60px;
+  margin-right: 60px;
+}
+
+.footer {
+  clear: both;
+  margin-top: 100px;
+  padding-top: 10px;
+  border-top: 1px solid var(--secondary-color);
+  color: var(--global-font-color);
+}
+
+.image-grid {
+  display: grid;
+  grid-template-rows: auto;
+  display: grid;
+  grid-gap: 1em;
+  grid-template-rows: auto;
+  grid-template-columns: repeat(auto-fit,
+      minmax(calc(var(--page-width) / 4), 1fr));
+}
+
+.prompt-symbol {
+  padding-left: 1ch;
+  padding-right: 1ch;
+}
+
+.terminal-prompt {
+  display: flex;
+  align-items: center;
+  flex-wrap: nowrap;
+  white-space: nowrap;
+}
+
+.terminal-prompt::after {
+  -webkit-animation: cursor 1s infinite;
+  animation: cursor 1s infinite;
+  width: 10px;
+}
+
+.terminal-prompt::before {
+  content: none;
+}
+
+.gallery-image {
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+
+.posts-list {
+  position: relative;
+  padding-left: 130px;
+  top: 0;
+}
+
+.post h1,
+.post h2 {
+  padding-top: 0;
+  margin: 0;
+  margin-bottom: 5px;
+}
+
+.posts-list .date {
+  display: inline-block;
+  position: absolute;
+  left: 0px;
+  width: 130px;
+  z-index: 400;
+  padding-top: 0;
+}
+
+@media only screen and (max-width: 45em) {
+  .site-name {
+    width: 2ch;
+    overflow: hidden;
+    display: inline-block;
+  }
+
+  .terminal-nav {
+    align-items: flex-start;
+    flex-direction: column;
+    display: flex;
+  }
+
+  .terminal-menu ul {
+    align-items: flex-start;
+    display: flex;
+    flex-direction: row;
+    justify-content: left;
+    margin-top: 0;
+  }
+
+  .terminal-menu li {
+    margin-right: 20px;
+  }
+
+  .logo {
+    padding: calc(var(--global-space) * 1) 0 calc(var(--global-space) * 1);
+  }
+
+  figure {
+    margin-top: 5px;
+    margin-bottom: 5px;
+    margin-left: 30px;
+    margin-right: 30px;
+  }
+
+  .posts-list {
+    position: relative;
+    padding-left: 0;
+    top: 0;
+  }
+
+  .post h1,
+  .post h2 {
+    padding-top: 0;
+  }
+
+  .posts-list .date {
+    display: inline-block;
+    position: absolute;
+    left: 0px;
+    width: 150px;
+    z-index: 400;
+    font-weight: bold;
+    padding-top: 0;
+    display: none;
+  }
+
+  .footer {
+    margin-top: 50px;
+    padding-top: 5px;
+  }
+}
				`@@ -0,0 +1 @@`
				`<div class="footer">{{ .Site.Title }} © {{ now.Year }}</div>`