Wrap container with section for responsive padding

master
Quentin Duchemin 2021-05-26 19:03:43 +02:00
parent a7d1ab3b21
commit 82f1516371
3 changed files with 77 additions and 73 deletions

View File

@ -1,4 +1,5 @@
{{ define "main" }} {{ define "main" }}
<div class="section">
<div class="container is-max-widescreen"> <div class="container is-max-widescreen">
<main> <main>
{{ with .Content }} {{ with .Content }}
@ -8,12 +9,12 @@
</div> </div>
</article> </article>
{{ end }} {{ end }}
<div class="columns is-multiline is-mobile"> <div class="columns is-multiline">
<!-- Custom paginator with only blog posts --> <!-- Custom paginator with only blog posts -->
{{ $paginator := .Paginate (where .Site.RegularPages "FirstSection.Section" "posts") }} {{ $paginator := .Paginate (where .Site.RegularPages "FirstSection.Section" "posts") }}
{{ range $paginator.Pages }} {{ range $paginator.Pages }}
{{ if (eq .FirstSection.Section "posts")}} {{ if (eq .FirstSection.Section "posts")}}
<div class="column is-one-third"> <div class="column is-variable is-one-third">
{{ .Render "summary" }} {{ .Render "summary" }}
</div> </div>
{{ end }} {{ end }}
@ -22,4 +23,5 @@
{{- partial "pagination.html" $paginator -}} {{- partial "pagination.html" $paginator -}}
</main> </main>
</div> </div>
</div>
{{ end }} {{ end }}

View File

@ -1,6 +1,7 @@
{{ define "main" }} {{ define "main" }}
<div class="section">
<div class="container"> <div class="container">
<div class="columns mt-5 is-variable is-mobile is-8"> <div class="columns mt-5 is-variable is-8">
<!-- <!--
If the current page is a blog post and belongs to a case, we will add a side menu If the current page is a blog post and belongs to a case, we will add a side menu
with all other blog posts belonging to that case, emphasis to the current. with all other blog posts belonging to that case, emphasis to the current.
@ -57,4 +58,5 @@
</section> </section>
</div> </div>
</div> </div>
</div>
{{ end }} {{ end }}

View File

@ -1,7 +1,7 @@
<div class="card has-equal-height mt-5"> <div class="card has-equal-height mt-5">
<div class="card-image"> <div class="card-image">
<figure class="image is-4by3 mt-5"> <figure class="image is-5by3 mt-5">
<img src="https://bulma.io/images/placeholders/1280x960.png" alt="Placeholder image"> <img src="https://bulma.io/images/placeholders/800x480.png" alt="Placeholder image">
</figure> </figure>
</div> </div>
<div class="card-content" style="height:100%;"> <div class="card-content" style="height:100%;">