Home: Add columns feature
This commit is contained in:
parent
93b4246cd1
commit
49e0179832
|
@ -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.
|
||||
|
|
|
@ -157,7 +157,7 @@ body>main {
|
|||
}
|
||||
}
|
||||
|
||||
// Home Friends&Family Gallery
|
||||
// Home Friends&Family Gallery + Groups Gallery
|
||||
.flex-grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
@ -165,24 +165,63 @@ 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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.img-link {
|
||||
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 {
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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 }}
|
||||
|
|
Loading…
Reference in a new issue