fun gallery section, some general tweaks while at it

assets/style.sass

@@ -32,17 +32,21 @@ a
     flex-direction: row
     display: flex
     text-align: left
-    line-height: 7rem
     height: 7rem
     width: 100%
     gap: .5rem
     vertical-align: middle
+    span.identity-text
+      display: flex
+      flex-direction: column
+      justify-content: center
+      gap: .3rem
     h3
       font-size: 1.4rem
       line-height: 1.4rem
       margin: 1rem 0 0 0
       padding: 0
-      align-self: center
+      align-self: left
   .logo
     height: 7rem
     width: 7rem
@@ -243,6 +247,7 @@ aside.meta-tags
         padding: .3rem
         background: #d8d8d0
         cursor: pointer
+        color: black
       div
         background: #c5c4bb
         height: 100%
@@ -252,6 +257,8 @@ aside.meta-tags
       &:hover *
         color: white
         background: #819e75!important
+      &:hover button.tag-button
+        color: white
 
 .tags p
   margin: 0
@@ -417,6 +424,21 @@ article.split-me
       h2
         margin-bottom: .6rem
 
+$gallery-gap: 1rem
+.masonry-gallery
+  column-count: 3
+  column-gap: 2em
+  .masonry-item
+    display: inline-block
+    width: 100%
+    margin: 0 0 $gallery-gap 0
+    padding: 10px
+    border: 1px solid #bcbcbc
+    border-radius: 5px
+    img
+      width: 100%
+      height: auto
+
 @media screen and (max-width: 1700px)
   body
     main
@@ -455,8 +477,23 @@ article.split-me
         margin: 0
         width: 90%
         height: auto
+  .masonry-gallery
+    column-count: 2
+    column-gap: 2em
 
 @media screen and (max-width: 1000px)
+  body main
+    width: 96%
+  nav#nav
+    padding: .4rem
+  .category_container div.category
+    display: grid
+    flex-direction: row
+    flex-wrap: wrap
+    grid-gap: 0.3rem
+    grid-template-columns: 1fr 1fr
+
+@media screen and (max-width: 700px)
   body
     margin: 0
     main
@@ -465,15 +502,12 @@ article.split-me
     a
       height: initial
       line-height: 1.4rem
-      align-items: end
       h3
         font-size: 1.2rem
         line-height: 1.4rem
   .nav
     margin: 1rem 0
     flex-wrap: wrap
-  nav#nav
-    padding: .4rem
   .category_container
     padding: .8rem
     h1
@@ -482,7 +516,8 @@ article.split-me
       flex-direction: column
       display: flex
       span.article
-        max-width: 100%
+        width: 93%
+        margin: auto
         div.cover_image
           height: 300px
   article.split-me
@@ -514,6 +549,10 @@ article.split-me
         width: 75%
   div.recent-posts div.article h2
     font-size: revert
+  .masonry-gallery
+    column-count: 1
+    column-gap: 2em
+    width: 96%
 
 @media screen and ( max-width: 750px )
   article.content

content/about.md

@@ -6,7 +6,7 @@ draft: false
 
 ### What's this all about?
 Well food of course! This is a personal project to write down and share my recipes. I love to cook and bake, and I would like to share my recipes with others.
-The recipes are **all vegan** ([learn more](https://adaptt.org/)). I mostly aim to keep the description to the point and short. Also, I tend to mention some basic rules of the dish and which ingredients are optional.
+The recipes are **all vegan**, here is one of my [favorite books](https://grupojovenfl.files.wordpress.com/2019/10/peter-singer-animal-liberation-1.pdf) on the subject. I try to keep the talk short and to the point.  Some other interesting food photos can be found in the [snippets](/snippets) section.
 
 All photos are mine and are subject to copyright under [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/). All recipes are in the public domain.
 

content/snippets/index.md

@@ -0,0 +1,9 @@
+---
+title: "Vegan snippets"
+date: 2023-01-19T23:11:13Z
+draft: false
+---
+# 
+In the interest of bloating up my git repository I decided to add a gallery section of some of my favorite food photos. Enjoy!
+
+{{< gallery dir="snippets/food" >}}

themes/bean/layouts/_default/single.html

@@ -64,7 +64,7 @@ <h2>Recent recipes</h2>
             {{ range ( where .Site.RegularPages "Type" "posts" | first 5 ) }}
                 <div class="article" onclick="location.href='{{ .RelPermalink }}';">
                     {{ $diff := now.Sub .Lastmod }}
-                    {{ if lt $diff.Hours 72 }}
+                    {{ if lt $diff.Hours 120 }}
                         <div class="new">NEW</div>
                     {{ end }}
                         <div class="vertical"><a href="{{ .RelPermalink }}">

themes/bean/layouts/_default/taxonomy.html

@@ -43,7 +43,7 @@ <h1>{{ $title }}</h1>
                 {{ range .Paginator.Pages.ByDate.Reverse }}
                 <span class="article" onclick="location.href='{{ .RelPermalink }}';">
                         {{ $diff := now.Sub .Lastmod }}
-                        {{ if lt $diff.Hours 72 }}
+                        {{ if lt $diff.Hours 120 }}
                             <div class="new">NEW</div>
                         {{ end }}
                         <span><a href="{{ .RelPermalink }}">

themes/bean/layouts/index.html

@@ -14,7 +14,7 @@ <h2>{{ .Title }}</h2>
             {{ range (.Paginate (.Pages).ByDate.Reverse).Pages | first 6 }}
                 <span class="article" onclick="location.href='{{ .RelPermalink }}';">
                     {{ $diff := now.Sub .Lastmod }}
-                    {{ if lt $diff.Hours 72 }}
+                    {{ if lt $diff.Hours 120 }}
                         <div class="new">NEW</div>
                     {{ end }}
                     <span><a href="{{ .RelPermalink }}">

themes/bean/layouts/partials/header.html

@@ -5,13 +5,21 @@
                 {{ $image := resources.Get "static/logo.png" }}
                 <img src="{{.Site.BaseURL}}{{ .Site.Params.logo }}" class="logo"/>
                 {{ if eq .Title .Site.Title }}
-                    <h3>{{.Title}}</h3></a>
+                    <span class="identity-text">
+                        <h3>{{.Title}}</h3>
+                        <span>{{ .Site.Params.description }}</span>
+                    </span>
+                </a>
                 {{ else }}
                     {{ $first := substr .Title 0 1 }}
                     {{ $rest := substr .Title 1 }}
                     {{ $first = upper $first }}
                     {{ $title := print $first $rest }}
-                    <h3>{{ $title }} | {{ .Site.Title }}</h3></a>
+                    <span class="identity-text">
+                        <h3>{{ $title }} | {{ .Site.Title }}</h3>
+                        <span>{{ .Site.Params.description }}</span>
+                    </span>
+                </a>
                 {{ end }}
         </span>
         <span class="nav">

themes/bean/layouts/shortcodes/gallery.html

@@ -0,0 +1,18 @@
+{{ $dir := .Get "dir" }}
+{{ $images := .Page.Resources.ByType "image" }}
+
+<div class="masonry-gallery">
+  {{ range $images }}
+    {{ $ext := path.Ext .Name | strings.TrimPrefix "." }}
+    {{ if in (slice "jpg" "jpeg" "png" "webp") $ext }}
+      {{ $image := . }}
+      {{ $image = $image.Process "resize 700x" }}
+      {{ if $image }}
+        <figure class="masonry-item">
+          <img src="{{ $image.RelPermalink }}" alt="{{ .Name }}">
+          <figcaption>{{ path.Base .Name | strings.TrimSuffix (printf ".%s" $ext) | strings.Title }}</figcaption>
+        </figure>
+      {{ end }}
+    {{ end }}
+  {{ end }}
+</div>