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 () {
|
||||
$postholder.each(function (e) {
|
||||
if (e % 2 != 0) $(this).addClass("odd");
|
||||
});
|
||||
|
||||
$postafter.each(function (e) {
|
||||
var bg = $(this).parent().css("background-color");
|
||||
$(this).css("border-top-color", bg);
|
||||
|
||||
if (e % 2 == 0) {
|
||||
$(this).addClass("even");
|
||||
}
|
||||
});
|
||||
|
||||
$("a.btn.site-menu").click(function (e) {
|
||||
|
|
|
|||
|
|
@ -45,5 +45,8 @@ title = "Jane Doe - Nutrition Coach & Chef Consultant"
|
|||
# You can turn it off, but we would really appreciate if you don’t :-)
|
||||
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]
|
||||
keywords = "some, keywords, for, seo, you, know, google, duckduckgo, and, such"
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@
|
|||
<div class='fixed-nav'>
|
||||
</div>
|
||||
{{ 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 }}'>
|
||||
<header class="post-header">
|
||||
<h2 class="post-title">{{ .Title | safeHTML }}</h2>
|
||||
|
|
@ -37,7 +37,7 @@
|
|||
{{ .Content }}
|
||||
</section>
|
||||
</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>
|
||||
{{ end }}
|
||||
</main>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue