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 envelope >}}
|
||||||
{{< fa brands gitlab >}}
|
{{< 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 {
|
.flex-grid {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
|
@ -165,24 +165,63 @@ body>main {
|
||||||
|
|
||||||
div {
|
div {
|
||||||
width: 250px;
|
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
|
// 2*250px + 2*var(--spacing) + 1px
|
||||||
@media only screen and (max-width: 533px) {
|
@media only screen and (max-width: 533px) {
|
||||||
width: 150px;
|
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 {
|
.img-link {
|
||||||
a {
|
a {
|
||||||
img {
|
img {
|
||||||
display: block;
|
display: block;
|
||||||
padding: var(--grid-spacing-horizontal);
|
padding-top: 14px; // var(--grid-spacing-horizontal)
|
||||||
|
padding-bottom: 14px; // var(--grid-spacing-horizontal)
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// Blog Overview: Categories list
|
// Blog Overview: Categories list
|
||||||
div.nav-aside {
|
div.nav-aside {
|
||||||
ul {
|
ul {
|
||||||
|
|
|
@ -24,16 +24,34 @@
|
||||||
{{- end }}
|
{{- end }}
|
||||||
|
|
||||||
{{- $home := .Site.GetPage "/home" }}
|
{{- $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">
|
<div class="section">
|
||||||
<h2>{{ .Title }}</h2>
|
<h2>{{ .Title }}</h2>
|
||||||
{{ .Content -}}
|
{{ .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 }}
|
{{- with .Params.Resources }}
|
||||||
<div class="flex-grid">
|
<div class="flex-grid">
|
||||||
{{- range . }}
|
{{- 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>
|
<div class="img-link"><a href="{{ .params.url }}"><img src="{{ $img.Permalink }}" class="box-image" alt=""></a></div>
|
||||||
{{- end }}
|
{{- end }}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -6,9 +6,13 @@
|
||||||
|
|
||||||
{{- $page := .Page }}
|
{{- $page := .Page }}
|
||||||
{{- if not $isBundle }}
|
{{- if not $isBundle }}
|
||||||
{{ $page_dir := path.Dir .Page.File }}
|
{{ $page_dir := path.Dir .Page.File }}
|
||||||
{{ $pagebundle_path := path.Join "/" $page_dir }}
|
{{ $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 }}
|
{{ $page = .Site.GetPage $pagebundle_path }}
|
||||||
|
{{- end -}}
|
||||||
{{- end -}}
|
{{- end -}}
|
||||||
|
|
||||||
{{- with $page.Resources.Get $imagename }}
|
{{- with $page.Resources.Get $imagename }}
|
||||||
|
|
Loading…
Reference in a new issue