Home: Add columns feature

This commit is contained in:
jtbx 2023-10-17 22:52:36 +02:00
parent 93b4246cd1
commit 49e0179832
4 changed files with 77 additions and 7 deletions

View file

@ -72,3 +72,12 @@ You can use solid and brand icons from https://fontawesome.com/icons version 6 i
{{< fa envelope >}}
{{< fa brands gitlab >}}
```
## Home One-Pager Architecture
The Home page is a one-pager which combines multiple files from the `content/home` directory.
Each sub-directory is creating a section of the home page and all content files in these directories must have `headless: true` in their front matter.
If a directory only contains an `index.md`, it will be rendered as normal content.
If there are additional markdown files, those will be rendered as a flexbox column layout.
An image gallery can be added by providing a list of `resources` in the front matter.

View file

@ -157,7 +157,7 @@ body>main {
}
}
// Home Friends&Family Gallery
// Home Friends&Family Gallery + Groups Gallery
.flex-grid {
display: flex;
flex-wrap: wrap;
@ -165,11 +165,47 @@ body>main {
div {
width: 250px;
padding-left: 14px; // var(--grid-spacing-horizontal)
padding-right: 14px; // var(--grid-spacing-horizontal)
img.groups-img {
display: block;
margin: 0 auto;
// (250px - 2*var(--grid-spacing-horizontal)) * 3/4
max-height: (222px * 3/4);
}
// 2*250px + 2*var(--spacing) + 1px
@media only screen and (max-width: 533px) {
width: 150px;
img.groups-img {
// (150px - 2*var(--grid-spacing-horizontal)) * 3/4
max-height: (122px*3/4);
}
}
&.wide {
width: 350px;
img.groups-img {
// (350px - 2*var(--grid-spacing-horizontal)) * 3/4
max-height: (322px*3/4);
}
// 2*350px + 2*var(--spacing) + 1px
@media only screen and (max-width: 733px) {
width: 250px;
img.groups-img {
// (250px - 2*var(--grid-spacing-horizontal)) * 3/4
max-height: (222px*3/4);
}
}
}
}
}
@ -177,12 +213,15 @@ body>main {
a {
img {
display: block;
padding: var(--grid-spacing-horizontal);
padding-top: 14px; // var(--grid-spacing-horizontal)
padding-bottom: 14px; // var(--grid-spacing-horizontal)
margin: 0 auto;
}
}
}
// Blog Overview: Categories list
div.nav-aside {
ul {

View file

@ -24,16 +24,34 @@
{{- end }}
{{- $home := .Site.GetPage "/home" }}
{{- range sort ($home.Resources.ByType "page") "File.Path" "asc" }}
{{- $sections := where ($home.Resources.ByType "page") ".File.LogicalName" "index.md" }}
{{- range sort $sections "File.Path" "asc" }}
<div class="section">
<h2>{{ .Title }}</h2>
{{ .Content -}}
{{- $sec := .CurrentSection }}
{{- $subsec_dir := strings.TrimLeft "home/" .File.Dir }}
{{- $subsec_glob := printf "%s*.md" (strings.TrimLeft "home/" .File.Dir) }}
{{- $subsecs := where ($home.Resources.Match $subsec_glob) ".File.LogicalName" "!=" "index.md" }}
{{- if $subsecs }}
<div class="flex-grid">
{{- range $subsecs }}
<div class="wide">
<h4>{{ .Title }}</h4>
{{- $img_path := printf "%s%s" $subsec_dir .Params.Image }}
{{- with $home.Resources.Get $img_path }}
<img class="groups-img" src="{{ .Permalink }}">
{{- end }}
{{ .Content }}
</div>
{{- end }}
</div>
{{- end }}
{{- with .Params.Resources }}
<div class="flex-grid">
{{- range . }}
{{- $img := $sec.Resources.GetMatch (printf "*/%s" .src) }}
{{- $img := $home.Resources.GetMatch (printf "*/%s" .src) }}
<div class="img-link"><a href="{{ .params.url }}"><img src="{{ $img.Permalink }}" class="box-image" alt=""></a></div>
{{- end }}
</div>

View file

@ -6,9 +6,13 @@
{{- $page := .Page }}
{{- if not $isBundle }}
{{ $page_dir := path.Dir .Page.File }}
{{ $pagebundle_path := path.Join "/" $page_dir }}
{{ $page_dir := path.Dir .Page.File }}
{{ $pagebundle_path := path.Join "/" $page_dir }}
{{ $page = .Site.GetPage $pagebundle_path }}
{{- if not $page.IsPage }}
{{ $pagebundle_path := path.Join "/" .Page.Section }}
{{ $page = .Site.GetPage $pagebundle_path }}
{{- end -}}
{{- end -}}
{{- with $page.Resources.Get $imagename }}