diff options
-rw-r--r-- | README.md | 3 | ||||
-rw-r--r-- | exampleSite/config.toml | 1 | ||||
-rw-r--r-- | layouts/partials/features.html | 55 |
3 files changed, 36 insertions, 23 deletions
@@ -415,11 +415,12 @@ The meaning of the individual YAML keys is as follows: | `url` | An optional URL the feature icon should point to; if specified, the icon will become a clickable hyperlink | | `description` | A short text below the title text to describe the feature; Markdown is supported | -Once you have completed your features, enable them in the `config.toml` file. +Once you have completed your features, enable them in the `config.toml` file. Also the number of elements per row can be defined, by default is 3 (choose a divisor of 12 like 2, 3, 4 or 6). ```toml [params.features] enable = true + cols = 3 ``` #### Testimonials diff --git a/exampleSite/config.toml b/exampleSite/config.toml index 1bd36b2..1692d27 100644 --- a/exampleSite/config.toml +++ b/exampleSite/config.toml @@ -490,6 +490,7 @@ paginate = 10 [params.features] enable = true + cols = 3 # Default: 3, Available values 2,3,4,6 # All features are defined in their own files. You can find example items # at 'exampleSite/data/features'. # For more informtion take a look at the README. diff --git a/layouts/partials/features.html b/layouts/partials/features.html index f41f2a1..ea73ac5 100644 --- a/layouts/partials/features.html +++ b/layouts/partials/features.html @@ -3,30 +3,41 @@ {{ if gt (len .Site.Data.features) 0 }} <section class="bar background-white"> <div class="container"> - {{ range $index, $element := sort .Site.Data.features "weight" }} - {{ if eq (mod $index 3) 0 }} - <div class="col-md-12"> - <div class="row"> + {{ $elements := default 3 .Site.Params.features.cols }} + {{ $features := sort .Site.Data.features "weight" }} + + {{ $total_rows := div (len $features) $elements }} + + {{ if gt (mod (len $features) $elements) 0 }} + {{ $total_rows = add $total_rows 1 }} {{ end }} - <div class="col-md-4"> - <div class="box-simple"> - {{ with $element.url }} - <a href="{{ $element.url }}"> - {{ end }} - <div class="icon"> - <i class="{{ .icon }}"></i> - </div> - {{ with $element.url }} - </a> - {{ end }} - <h3>{{ $element.name | markdownify }}</h3> - <p>{{ $element.description | markdownify }}</p> + + {{ range $i, $sequence := seq $total_rows }} + <div class="row row-{{ $i }} row-{{ if eq (mod $i 2) 0 }}odd{{ else }}even{{ end }}"> + {{ range $j, $sequence2 := (seq $elements) }} + + {{ $feature_index := add (mul $i $elements) $j }} + {{ if lt $feature_index (len $features) }} + {{ $element := index $features $feature_index }} + + <div class="col-md-{{ div 12 $elements }} col-{{ $j }} col-{{ if eq (mod $j 2) 0 }}odd{{ else }}even{{ end }}"> + <div class="box-simple"> + {{ with $element.url }} + <a href="{{ $element.url }}"> + {{ end }} + <div class="icon"> + <i class="{{ $element.icon }}"></i> + </div> + {{ with $element.url }} + </a> + {{ end }} + <h3>{{ $element.name | markdownify }}</h3> + <p>{{ $element.description | markdownify }}</p> + </div> </div> - </div> - {{ if or (eq (mod $index 3) 2) (eq $index (sub (len $.Site.Data.features) 1 )) }} - </div> - </div> - {{ end }} + {{ end }} + {{ end }} + </div> {{ end }} </div> </section> |