Enable inverting homepage section styling
Add invert Param to the config file. Add the 'odd' class to the post-holders and the 'even' class to the post-afters using Hugo if statements instead of using JS. Marking invert = true in the config file flips which sections are marked odd and even.
This commit is contained in:
parent
67434f0a8f
commit
390ad61694
3 changed files with 5 additions and 10 deletions
|
|
@ -28,17 +28,9 @@ var $sitehead = $("#site-head");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
$(document).ready(function () {
|
$(document).ready(function () {
|
||||||
$postholder.each(function (e) {
|
|
||||||
if (e % 2 != 0) $(this).addClass("odd");
|
|
||||||
});
|
|
||||||
|
|
||||||
$postafter.each(function (e) {
|
$postafter.each(function (e) {
|
||||||
var bg = $(this).parent().css("background-color");
|
var bg = $(this).parent().css("background-color");
|
||||||
$(this).css("border-top-color", bg);
|
$(this).css("border-top-color", bg);
|
||||||
|
|
||||||
if (e % 2 == 0) {
|
|
||||||
$(this).addClass("even");
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
|
|
||||||
$("a.btn.site-menu").click(function (e) {
|
$("a.btn.site-menu").click(function (e) {
|
||||||
|
|
|
||||||
|
|
@ -44,6 +44,9 @@ title = "Jane Doe - Nutrition Coach & Chef Consultant"
|
||||||
# This theme will, by default, inject a design-by-line at the bottom of the page.
|
# This theme will, by default, inject a design-by-line at the bottom of the page.
|
||||||
# You can turn it off, but we would really appreciate if you don’t :-)
|
# You can turn it off, but we would really appreciate if you don’t :-)
|
||||||
hidedesignbyline = false
|
hidedesignbyline = false
|
||||||
|
|
||||||
|
# The sections of the home page alternate styling. Mark invert as true to swap the styling of the sections
|
||||||
|
invert = false
|
||||||
|
|
||||||
[params.meta]
|
[params.meta]
|
||||||
keywords = "some, keywords, for, seo, you, know, google, duckduckgo, and, such"
|
keywords = "some, keywords, for, seo, you, know, google, duckduckgo, and, such"
|
||||||
|
|
|
||||||
|
|
@ -28,7 +28,7 @@
|
||||||
<div class='fixed-nav'>
|
<div class='fixed-nav'>
|
||||||
</div>
|
</div>
|
||||||
{{ range $index_val, $elem_val := $filtered }}
|
{{ range $index_val, $elem_val := $filtered }}
|
||||||
<div class='post-holder'>
|
<div class='post-holder{{ if and (ne .Site.Params.invert true) (not (modBool $index_val 2)) }} odd{{ else if and (eq .Site.Params.invert true) (modBool $index_val 2) }} odd{{ end }}'>
|
||||||
<article id='{{ anchorize .Title }}' class='post {{ if eq $index_val 0 }}first{{ end }} {{ if eq (add $index_val 1) (len $sections) }}last{{ end }}'>
|
<article id='{{ anchorize .Title }}' class='post {{ if eq $index_val 0 }}first{{ end }} {{ if eq (add $index_val 1) (len $sections) }}last{{ end }}'>
|
||||||
<header class="post-header">
|
<header class="post-header">
|
||||||
<h2 class="post-title">{{ .Title | safeHTML }}</h2>
|
<h2 class="post-title">{{ .Title | safeHTML }}</h2>
|
||||||
|
|
@ -37,7 +37,7 @@
|
||||||
{{ .Content }}
|
{{ .Content }}
|
||||||
</section>
|
</section>
|
||||||
</article>
|
</article>
|
||||||
<div class='post-after'></div>
|
<div class='post-after{{ if and (ne .Site.Params.invert true) (modBool $index_val 2) }} even{{ else if and (eq .Site.Params.invert true) (not (modBool $index_val 2)) }} even{{ end }}'></div>
|
||||||
</div>
|
</div>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
</main>
|
</main>
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue