Commit 82ede950 authored by CSA's avatar CSA
Browse files

Pillar widget uses CSS grid + some CSS simplification

parent 4bb6f8c3
<article class="h-entry post-summary hvr-glow pure-u-1 pure-g">
<div class="pure-u-1 pure-u-md-1-3 post-summary-meta">
<a href="{{ .Permalink }}"><img alt="{{ .Title }}" src="{{ $.Site.BaseURL }}images/{{ with .Params.image }}{{ . }}{{ else }}post.png{{ end }}"></a>
<a href="{{ .Permalink }}"><img class="fitImg scaleImg" alt="{{ .Title }}" src="{{ $.Site.BaseURL }}images/{{ with .Params.image }}{{ . }}{{ else }}post.png{{ end }}"></a>
</div>
<div class="pure-u-1 pure-u-md-2-3 post-summary-content">
<div>
......
<footer style="grid-area: footer;">
<hr>
{{ partialCached "footer.html" . }}
</footer>
......@@ -26,7 +26,7 @@
<i class="fa fa-bars fa-2x"></i>
</a>
</aside>
<ul class="pure-menu-list pure-menu-navigation">
<ul class="rawList pure-menu-list pure-menu-navigation">
{{ partial "menu/proc.html" . }}
</ul>
<a href="#menu-nav-main" id="menu-nav-main-close" class="pure-menu-close">
......
......@@ -5,7 +5,7 @@
Optional arguments:
- icon: (string)
*/}}
<a href="{{ i18n .name 1 }}" class="menu-header">
<a href="{{ i18n .name 1 }}" class="menu-header center">
{{ if .icon }}
<div>
<i class="fa fa-4x fa-{{ .icon }}"></i>
......
......@@ -10,5 +10,5 @@
{{ $params := $.Scratch.Get "menu-item" }}
{{ $i18nKey := (printf "%s-%s" (delimit $params.lineage "-") $params.itemName) }}
<a {{ if $params.linkClass }} class="{{ $params.linkClass }}"{{ end }} href="{{ i18n $i18nKey 1 | relLangURL }}">
<img class="web-banner" src="{{ $params.image | strings.TrimPrefix "static/" | relURL }}" alt="{{ i18n $i18nKey 2 }}">
<img class="fitImg" src="{{ $params.image | strings.TrimPrefix "static/" | relURL }}" alt="{{ i18n $i18nKey 2 }}">
</a>
......@@ -20,7 +20,7 @@
{{ else }}
<a class="{{ $params.linkClass }}" href="{{ i18n $itemName 1 }}">{{ if $params.icon }}<i class="fa fa-{{ $params.icon }}"></i> {{ end }}{{ i18n $itemName 2 }}</a>
{{ end }}
<ul>
<ul class="rawList">
{{ $.Scratch.SetInMap "menu" "ignoreTemplate" true }}
{{ partial "menu/proc.html" . }}
</ul>
......@@ -25,6 +25,6 @@
</article>
{{ end }}
<hr>
<a href="https://radar.squat.net"><img alt="radar.squat.net" src="{{ "/images/radar.png" | relURL }}" class="web-banner"></a>
<a href="https://radar.squat.net"><img alt="radar.squat.net" src="{{ "/images/radar.png" | relURL }}" class="fitImg"></a>
<hr>
</section>
......@@ -19,14 +19,64 @@
*/}}
{{ $pillar := $.Scratch.Get "pillar" }}
{{ $columns := len $pillar.items }}
<div class="pure-g pillar-widget">
{{ range $i := $pillar.items }}
<!-- Maximum 3 columns on medium screens -->
<div class="pure-u-1 pure-u-md-1-{{ cond (gt $columns 3) 3 $columns }} pure-u-lg-1-{{ $columns }}{{ if $pillar.childClass }} {{ $pillar.childClass }}{{ end }}">
{{ $n := len $pillar.items }}
{{/* Maximum columns for each screen width (in rem) */}}
{{ $sizes := (dict "48" 2 "64" 3 "96" 4) }}
{{ $columnSpan := 2 }}
<div class="widget-pillar">
<style scoped="scoped">
/* Default size */
@supports (grid-area: auto) {
.widget-pillar {
grid-template-areas:{{ range $i, $item := $pillar.items }} "column{{ $i }}"{{ end }};
}
{{ range $size, $maxColumns := $sizes }}
@media (min-width: {{ $size }}rem) {
.widget-pillar {
grid-template-columns: repeat({{ mul $columnSpan $maxColumns }}, 1fr);
grid-template-areas:
{{ $completeRows := div $n $maxColumns }}
{{ $leftover := mod $n $maxColumns }}
{{ $.Scratch.Set "widget-pillar-lines" "" }}
{{ if gt $completeRows 0 }}
{{ range $row := (seq 0 (sub $completeRows 1)) }}
{{ $.Scratch.Add "widget-pillar-lines" " \"" }}
{{ $start := mul $row $maxColumns }}
{{ range $column := seq $start (add $start (sub $maxColumns 1)) }}
{{ range seq $columnSpan }}{{ $.Scratch.Add "widget-pillar-lines" (printf "column%d " $column) }}{{ end }}
{{ end }}
{{ $.Scratch.Add "widget-pillar-lines" "\"" }}
{{ end }}
{{ end }}
{{ if gt $leftover 0 }}
{{ $.Scratch.Add "widget-pillar-lines" " \"" }}
{{ $spaceAround := sub $maxColumns $leftover }}
{{ $spaceAround := div (mul $spaceAround $columnSpan) 2 }}
{{ range (seq $spaceAround) }}{{ $.Scratch.Add "widget-pillar-lines" ". " }}{{ end }}
{{ $incompleteRowFirstItem := mul $completeRows $maxColumns }}
{{ range $column := seq $incompleteRowFirstItem (add $incompleteRowFirstItem (sub $leftover 1)) }}
{{ range seq $columnSpan }}{{ $.Scratch.Add "widget-pillar-lines" (printf "column%d " $column) }}{{end}}
{{ end }}
{{ range (seq $spaceAround) }}{{ $.Scratch.Add "widget-pillar-lines" ". " }}{{ end }}
{{ $.Scratch.Add "widget-pillar-lines" "\"" }}
{{ end }}
{{ $.Scratch.Get "widget-pillar-lines" | safeCSS }};
}
}
{{ end }}
}
</style>
{{ range $count, $i := $pillar.items }}
<div {{ with $pillar.childClass }}class="{{ . }}"{{ end }} style="grid-area: column{{ $count }};">
{{ if eq $i.type "menu" }}
<!-- Menu type needs name -->
{{ $.Scratch.Set "menu" (dict "name" $i.name "template" "v" "class" "") }}
{{ $params := $i.params }}
{{/* Can't join two dicts? That's sad :'( Now we have to use Scratch */}}
{{ $.Scratch.Set "menu" (dict "template" "v" "name" $i.name) }}
{{ range $key, $value := $i.params }}{{ $.Scratch.SetInMap "menu" $key $value }}{{ end }}
{{ partial "widgets/menu.html" $ }}
{{ else if eq $i.type "template" }}
<!-- Template type needs name -->
......
......@@ -6,7 +6,7 @@
*/
/* Post titles (single view) */
.post #content h1, .post #content h2, .post #content h3, .post #content h4, .post #content h5, .post #content h6 { text-align: center; }
.post #content h1, .post #content h2, .post #content h3, .post #content h4, .post #content h5, .post #content h6 { text-align: center; }
/* Post name (single/summary view) */
.post .published { margin-bottom: 1em; }
......@@ -21,6 +21,9 @@ li { text-align: justify; }
/* Functions */
.center { text-align: center; }
.rawList { padding: 0; margin: 0; list-style: none; }
.fitImg { display: block; max-width: 100%; margin: auto; }
.scaleImg { width: 100%; }
/* Banner styles */
.header-banner source, .header-banner img { width: 100%; }
......@@ -53,9 +56,6 @@ li { text-align: justify; }
.translations { text-align: center; }
.sidebar .events article:not(:first-child) h3 { margin-top: 0.5em; }
/* Web banners */
.web-banner { display: block; max-width: 100%; margin: auto; }
/* Post styles */
.post p, .post-summary p { text-align: justify; }
@media screen and (min-width: 48em) {
......@@ -66,7 +66,6 @@ li { text-align: justify; }
.post h2, .post h3 { text-align: center; }
/* Post (summary view) */
.post-summary-meta img { width: 100%; }
.post-summary-content > div { text-align: justify; padding: 0 1em; }
.post-summary { padding-top: var(--v-spacing); padding-bottom: var(--v-spacing); }
.post-summary time { text-align: center; display: block; font-weight: bold; }
......@@ -107,3 +106,12 @@ https://github.com/IanLunn/Hover/blob/master/license.txt */
.hvr-glow:active,.hvr-glow:focus,.hvr-glow:hover {
box-shadow:0 0 8px rgba(0,0,0,.6)
}
/* Pillar widget (new version) */
.widget-pillar {
display: grid;
grid-template-rows: auto;
grid-template-columns: 1fr;
grid-gap: 1rem 1rem;
padding: 0 1rem;
}
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment