Import new minimalist design

author: Óscar Nájera <hi@oscarnajera.com> 2022-01-01 21:03:20 +0100
committer: Óscar Nájera <hi@oscarnajera.com> 2022-01-01 21:03:20 +0100
commit: 113d4e53416ddf42212da6f217670bdc6f0c9dd8 (patch)
tree: 7e9bcd4a2a274e45da5538fe67c525dfb36680de /layouts/partials
parent: e34ded01904b07456a48cf28f1a5a2d2d77a0be7 (diff)
download: hugo-minimalist-theme-113d4e53416ddf42212da6f217670bdc6f0c9dd8.tar.gz
hugo-minimalist-theme-113d4e53416ddf42212da6f217670bdc6f0c9dd8.tar.bz2
hugo-minimalist-theme-113d4e53416ddf42212da6f217670bdc6f0c9dd8.zip
11 files changed, 133 insertions, 112 deletions
diff --git a/layouts/partials/author_card.html b/layouts/partials/author_card.html
new file mode 100644
index 0000000..33c86b8
--- /dev/null
+++ b/layouts/partials/author_card.html
@@ -0,0 +1,12 @@
+<div class="mw7 center ph3 flex flex-column flex-row-ns">
+    <div class="w-10-ns">
+    <img src="{{ .Site.Params.Owner_avatar }}" class="br-100">
+    </div>
+    <div class="w-90-ns ph3-ns">
+        <h5 class="f3 mv1 berkshire-swash">{{ .Site.Params.Owner }}</h5>
+        <h6 class="f4 fw4 light-gray pa0 ma0">{{ .Site.Params.Role }}</h6>
+        <p class="f5 lh-copy">
+            {{ .Site.Params.bio }}
+        </p>
+    </div>
+</div>
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index d437bde..a9e1474 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -1,5 +1,7 @@
-<footer id="footer" class="fl center pa2 bg-white-40">
-  <span class="db tc black-80">
-    &copy; {{ now.Format "2006" }} {{ with .Site.Params.footer.copyright }}{{ . | safeHTML }}{{ else }}{{ with .Site.Author.name }}{{ . }}{{ else }}{{ with .Site.Title }}{{ . }}{{ end }}{{ end }}{{ end }}. All Rights Reserved
-  </span>
+<footer class="bg-black">
+    <div class="w-100 ph3 pv3 tc">
+        {{ with .Site.GetPage "footer.md" }}
+            {{ .Content }}
+        {{ end }}
+    </div>
 </footer>
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index adaa5ab..48eaddd 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -1,45 +1,12 @@
-<meta name="viewport" content="width=device-width, initial-scale=1">
-<meta charset="UTF-8">
-<link rel="stylesheet" href="https://unpkg.com/tachyons@4.10.0/css/tachyons.min.css"/>
-<!-- FontAwesome -->
-<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
-
-<!-- CustomCSS -->
-    {{ range .Site.Params.customCSS }}
-      {{ if isset . "href" }}
-        <link {{ if not (isset . "rel") }}rel="stylesheet" {{ end }}{{ range $key, $value := . }} {{ if eq $key "href" }}{{ (printf "%s=\"%s\"" $key ($value | absURL)) | safeHTMLAttr }}{{ else }}{{ (printf "%s=\"%s\"" $key (string $value)) | safeHTMLAttr }}{{ end }}{{ end }}>
-      {{ else }}
-        <link rel="stylesheet" href="{{ . | absURL }}">
-      {{ end }}
-    {{ end }}
-
-<!-- Highligth.js -->
-<link rel="stylesheet"
-      href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/zenburn.min.css">
-<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
-<script>hljs.initHighlightingOnLoad();</script>
-
-<!-- Mathjax -->
-<script src='https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js?config=TeX-MML-AM_CHTML' async></script>
-
-<!-- CSS -->
-<style>
- a {
-     text-decoration: none;
-     color: #357edd;
- }
-
- #sidebar {
-    text-shadow: 1px 1px 1px #111;
- }
-
- .post-header {
-     text-shadow: 1px 2px 1px rgba(0,0,0,0.9);
- }
-
- pre {
-     background: #3f3f3f;
-     color: #dcdcdc;
-     padding: 0.5em;}
-
-</style>
+<head>
+    <meta charset="utf-8">
+    <link rel="icon" href="/images/favicon.png">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    {{ $styles := resources.Get "scss/style.scss" | resources.ToCSS | resources.Minify }}
+    <link rel="stylesheet" href="{{ $styles.Permalink }}" type="text/css" media="screen" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+    {{ $title := print .Site.Title " | " .Title }}
+    {{ if .IsHome }}{{ $title = .Site.Title }}{{ end }}
+    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js"></script>
+    <title>{{ $title }}</title>
+</head>
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 9b2aaab..ef345ca 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -1,44 +1,27 @@
-{{ if .Site.Author.gravataremail }}
-    {{ .Scratch.Set "authorPicture" (printf "//www.gravatar.com/avatar/%s" (urlize (md5 (.Site.Author.gravataremail )))) }}
-{{ else if .Site.Author.picture }}
-    {{ .Scratch.Set "authorPicture" (absURL .Site.Author.picture) }}
-{{ end }}
+<nav class="header w-100 w3-theme-d3 w3-theme-border z-2 cf">
+  <a href="{{ site.BaseURL }}" class="pl5 db fl link">
 
-<nav id="sidebar" class="fl w-25-ns bg-gray vh-100-ns">
-    <div class="tc pv4">
-        <a href="/#about" class="white link">
-            {{ with ($.Scratch.Get "authorPicture") }}
-            <img class="br-100" src="{{ . }}{{ if in . "//www.gravatar.com/avatar/" }}?s=110{{ end }}"/>
-            {{ end }}
-            <h3 class="f3">
-                {{ .Site.Author.name }}
-            </h3>
-        </a>
-    </div>
-    <ul class="list bd ba">
-        {{ range .Site.Menus.main }}
-        <li class="ma2 dib">
-            <a class="link white db grow" href="{{ .URL | relLangURL }}" title="{{ .Title }}">
-                {{ .Pre }} {{ .Name }}</a>
-        </li>
-        {{ end }}
-    </ul>
-    <ul class="list">
-        {{ range .Site.Menus.links }}
-        <li class="pv2">
-            <a class="link white db grow" href="{{ .URL | relLangURL }}" title="{{ .Title }}">
-                {{ .Pre }} {{ .Name }}</a>
-        </li>
-        {{ end }}
-    </ul>
+    {{ with resources.Get .Site.Params.logo }}
+       <img height="{{ site.Params.logo_height }}" class="v-btm" src="{{ .Permalink }}" alt="{{ site.Title }}">
+    {{ end }}
+
+    <span class="near-white pl2 pt0 f2 berkshire-swash">
+      {{ .Site.Title }}
+    </span>
 
-    <ul class="list">
-        {{ range .Site.Menus.misc }}
-        <li class="pv2">
-            <a class="link white db grow" href="{{ .URL | relLangURL }}" title="{{ .Title }}">
-                {{ .Pre }} {{ .Name }}</a>
-        </li>
-        {{ end }}
-    </ul>
 
+  </a>
+  <input class="menu-btn dn" type="checkbox" id= "menu-btn">
+  <label class="fr dn-ns ma2 pa3 menu-icon" for="menu-btn">
+    <span class="navicon bg-near-white"></span>
+  </label>
+  <ul class="ma0 pa0 list overflow-hidden br w3-theme-border">
+      {{ range .Site.Menus.main }}
+      <li class="fl-ns bl bb br2 w3-hover-theme w3-theme-border ">
+        <a class="db f6 pa3 link near-white grow"
+           href="{{ .URL }}">{{$text := print .Name | safeHTML }} {{ $text }}
+        </a>
+      </li>
+      {{ end }}
+  </ul>
 </nav>
diff --git a/layouts/partials/hero.html b/layouts/partials/hero.html
new file mode 100644
index 0000000..7345fe9
--- /dev/null
+++ b/layouts/partials/hero.html
@@ -0,0 +1,7 @@
+<div style="background: linear-gradient( rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.5) ), url('{{ .Params.image }}'); background-position: center;"
+     class="bg-center pv5" >
+  <div class="mw7 center ph2">
+    <h1 class="f1 tc title berkshire-swash">{{ .Title }}</h1>
+    {{ .Content }}
+  </div>
+</div>
diff --git a/layouts/partials/meta.html b/layouts/partials/meta.html
deleted file mode 100644
index 84e76e5..0000000
--- a/layouts/partials/meta.html
+++ /dev/null
@@ -1,15 +0,0 @@
-{{ with .Params.categories }}
-<i class="fa fa-lg fa-bookmark"></i>
-{{ range . }}
-<a class="link underline-hover white mr3"
-   href="{{ $.Site.LanguagePrefix }}/categories/{{ . | urlize }}/">{{ . }}</a>
-{{ end }}
-{{ end }}
-
-{{ with .Params.tags }}
-<i class="fa fa-lg fa-tags"></i>
-{{ range . }}
-<a class="link underline-hover white"
-   href="{{ $.Site.LanguagePrefix }}/tags/{{ . | urlize }}/">{{ . }}</a>
-{{ end }}
-{{ end }}
diff --git a/layouts/partials/metadata.html b/layouts/partials/metadata.html
new file mode 100644
index 0000000..77373f9
--- /dev/null
+++ b/layouts/partials/metadata.html
@@ -0,0 +1,24 @@
+{{ $dateTime := .PublishDate.Format "2006-01-02" }}
+{{ $dateFormat := .Site.Params.dateFormat | default "Jan 2, 2006" }}
+
+<p class="f6 lh-copy mv0 ph4 pv2">By {{ range .Params.authors }} {{ . }} {{ end }}
+<br/>
+<i class="far fa-calendar"></i>
+<time class="f6 lh-copy mv0" datetime="{{ $dateTime }}">{{ .PublishDate.Format $dateFormat }}</time>
+|
+{{ .ReadingTime }} mins read
+{{ with .Params.tags }}
+| <i class="fas fa-tags"></i>
+    {{ range . }}
+    {{ $href := print (absURL "tags/") (urlize .) }}
+    <a class="link underline light-gray" href="{{ $href }}">{{ . }}</a>
+    {{ end }}
+{{ end }}
+{{ with .Params.categories }}
+| <i class="fas fa-bookmark"></i>
+    {{ range . }}
+    {{ $href := print (absURL "tags/") (urlize .) }}
+    <a class="link underline light-gray" href="{{ $href }}">{{ . }}</a>
+    {{ end }}
+{{ end }}
+</p>
diff --git a/layouts/partials/open_section.html b/layouts/partials/open_section.html
new file mode 100644
index 0000000..f58cdf9
--- /dev/null
+++ b/layouts/partials/open_section.html
@@ -0,0 +1,9 @@
+<div class="stripe-dark">
+  <div class="mw7 center pa2">
+    <h2 class="baskerville f2 lh-title">{{ .Title }}</h2>
+
+    <div class="main-content lh-copy">
+      {{ .Content }}
+    </div>
+  </div>
+</div>
diff --git a/layouts/partials/pagination.html b/layouts/partials/pagination.html
index 16ad74e..3aa16f7 100644
--- a/layouts/partials/pagination.html
+++ b/layouts/partials/pagination.html
@@ -1,15 +1,17 @@
 {{ $pag := $.Paginator }}
 {{ if gt $pag.TotalPages 1 }}
-<div class="center db tc ma4 f6">
+<nav class="flex items-center justify-center pa4 f5">
     {{ if $pag.HasPrev }}
-        <a href="{{ $pag.Prev.URL }}" aria-label="Previous" class="dib link dim ph3 pv2 ba br1 ttu">Newer Posts</a>
+      <a href="{{ $pag.Prev.URL }}" rel="prev" class="near-white link grow hover-bg-light-gray hover-near-black pa2 ba">« {{ T "Prev" }}</a>
     {{ end }}
-
     {{ range $pag.Pagers }}
-    <a href="{{ .URL }}" class="dib link dim ph3 pv2 b ba br1 {{ if eq . $pag }}bg-blue white{{ end }}">{{ .PageNumber }}</a>
+    {{ if eq . $pag }}
+      <span class= "white w3-theme ma1 pa2 ba"> {{ $pag.PageNumber }}</span>
+    {{ else }}
+      <a href="{{ .URL }}" class="db near-white link grow hover-bg-light-gray hover-near-black pa2 ba">{{ .PageNumber }}</a>
     {{ end }}
-{{ if $pag.HasNext }}
-    <a href="{{ $pag.Next.URL }}" aria-label="Next" class="dib link dim ph3 pv2 ba br1 ttu">Older posts</a>
-{{ end }}
-</div>
+    {{ end }}
+    {{ if $pag.HasNext }}
+    <a href="{{ $pag.Next.URL }}" rel="next" class="near-white link grow hover-bg-light-gray hover-near-black pa2 ba">{{ T "Next" }} »</a> {{ end }}
+</nav>
 {{ end }}
diff --git a/layouts/partials/post.html b/layouts/partials/post.html
new file mode 100644
index 0000000..8eaadee
--- /dev/null
+++ b/layouts/partials/post.html
@@ -0,0 +1,20 @@
+<article class="mw7 center pv4 ph3">
+<a class="db no-underline grow" href= "{{ .RelPermalink }}">
+  <h3 class="f3 baskerville mt0 lh-title near-white">{{.Title }}</h3>
+  <div class="cf">
+    {{ if isset .Params "image" }}
+    {{ $image := resources.Get .Params.image }}
+    {{ $image := $image.Resize (default "320x" .Params.thumbnail_size) }}
+    <div class="fl-ns mb4 mb0-ns pr3-ns">
+      <img src="{{ $image.RelPermalink }}" class="db center">
+    </div>
+    {{ end }}
+    <div class="f5 lh-copy near-white">
+      {{ .Summary }}
+    </div>
+  </div>
+</a>
+{{ if isset .Params "metadata" }}
+{{ partial "metadata.html" . }}
+{{ end }}
+</article>
diff --git a/layouts/partials/post_pager.html b/layouts/partials/post_pager.html
new file mode 100644
index 0000000..6fe00aa
--- /dev/null
+++ b/layouts/partials/post_pager.html
@@ -0,0 +1,10 @@
+<nav class="flex items-center justify-center pa4 f5">
+{{ with .NextInSection }}
+    <a href="{{ .RelPermalink }}" rel="prev" class="near-white link bg-animate hover-bg-light-gray hover-near-black pa2 ba ma2">
+        « {{ .Title }}</a>
+{{ end }}
+{{ with .PrevInSection }}
+    <a href="{{ .RelPermalink }}" rel="prev" class="near-white link bg-animate hover-bg-light-gray hover-near-black pa2 ba ma2">
+        {{ .Title }} »</a>
+{{ end }}
+</nav>
author	Óscar Nájera <hi@oscarnajera.com>	2022-01-01 21:03:20 +0100
committer	Óscar Nájera <hi@oscarnajera.com>	2022-01-01 21:03:20 +0100
commit	113d4e53416ddf42212da6f217670bdc6f0c9dd8 (patch)
tree	7e9bcd4a2a274e45da5538fe67c525dfb36680de /layouts/partials
parent	e34ded01904b07456a48cf28f1a5a2d2d77a0be7 (diff)
download	hugo-minimalist-theme-113d4e53416ddf42212da6f217670bdc6f0c9dd8.tar.gz hugo-minimalist-theme-113d4e53416ddf42212da6f217670bdc6f0c9dd8.tar.bz2 hugo-minimalist-theme-113d4e53416ddf42212da6f217670bdc6f0c9dd8.zip