Chosto
/
blog
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
themes/chosto/layouts/_default/list.html
View File

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

102
themes/chosto/layouts/_default/single.html
View File

@ -1,60 +1,62 @@
{{ define "main" }}
<div class="container">
<div class="columns mt-5 is-variable is-mobile is-8">
<!--
<div class="section">
<div class="container">
<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
with all other blog posts belonging to that case, emphasis to the current.
-->
{{ if (and .IsPage (eq .FirstSection.Section "posts"))}}
{{ with .CurrentSection }}
<aside class="menu column is-3 mt-2 is-align-self-flex-start">
<p class="menu-label">
Dans le dossier « <a href="{{ .Permalink }}">{{ .Params.Title }} »</a>...
</p>
<div class="menu-list">
{{ $posts := (where $.Site.RegularPages "CurrentSection.Params.Code" "==" $.CurrentSection.Params.Code )}}
{{ $postsSorted := (sort $posts "Date" )}}
{{ range $postsSorted }}
<a {{ if eq $.Title .Title }} class="is-active" {{ end }} href="{{ .Permalink }}">{{ .Title }}</a>
{{ end }}
</div>
</aside>
{{ end }}
{{ end }}
<section class="column is-7">
<div>
<article>
{{ with .Params.summary }}
{{ . }}
<br /><br />
{{ end }}
{{ if (or (not .Params.notoc) (gt .WordCount 400)) }}
<div class="message is-info">
<div class="message-header">Sommaire</div>
<!-- Appreciate this horrible trick, even a 2000's HTML generator won't generate such code -->
<div class="message-body pt-1">{{ .TableOfContents | replaceRE "<a" "<a style='text-decoration:none;'" | safeHTML }}</div>
</div>
{{ end }}
{{ .Content }}
</article>
</div>
<aside class="container level my-5">
<div class="level-left">
{{ with .PrevInSection }}
<div class="level-item">
<a class="button is-info" href="{{ .Permalink }}">&laquo;&nbsp;{{ .Title }}</a>
</div>
{{ end }}
</div>
<div class="level-right">
{{ with .NextInSection }}
<div class="level-item">
<a class="button is-info" href="{{ .Permalink }}">{{ .Title }}&nbsp;&raquo;</a>
</div>
{{ if (and .IsPage (eq .FirstSection.Section "posts"))}}
{{ with .CurrentSection }}
<aside class="menu column is-3 mt-2 is-align-self-flex-start">
<p class="menu-label">
Dans le dossier « <a href="{{ .Permalink }}">{{ .Params.Title }} »</a>...
</p>
<div class="menu-list">
{{ $posts := (where $.Site.RegularPages "CurrentSection.Params.Code" "==" $.CurrentSection.Params.Code )}}
{{ $postsSorted := (sort $posts "Date" )}}
{{ range $postsSorted }}
<a {{ if eq $.Title .Title }} class="is-active" {{ end }} href="{{ .Permalink }}">{{ .Title }}</a>
{{ end }}
</div>
</aside>
</section>
{{ end }}
{{ end }}
<section class="column is-7">
<div>
<article>
{{ with .Params.summary }}
{{ . }}
<br /><br />
{{ end }}
{{ if (or (not .Params.notoc) (gt .WordCount 400)) }}
<div class="message is-info">
<div class="message-header">Sommaire</div>
<!-- Appreciate this horrible trick, even a 2000's HTML generator won't generate such code -->
<div class="message-body pt-1">{{ .TableOfContents | replaceRE "<a" "<a style='text-decoration:none;'" | safeHTML }}</div>
</div>
{{ end }}
{{ .Content }}
</article>
</div>
<aside class="container level my-5">
<div class="level-left">
{{ with .PrevInSection }}
<div class="level-item">
<a class="button is-info" href="{{ .Permalink }}">&laquo;&nbsp;{{ .Title }}</a>
</div>
{{ end }}
</div>
<div class="level-right">
{{ with .NextInSection }}
<div class="level-item">
<a class="button is-info" href="{{ .Permalink }}">{{ .Title }}&nbsp;&raquo;</a>
</div>
{{ end }}
</div>
</aside>
</section>
</div>
</div>
</div>
{{ end }}

4
themes/chosto/layouts/_default/summary.html
View File

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