single.html (3365B)
1 {{ define "title" }}
2 Showcase: {{ .Title }}
3 {{ end }}
4
5 {{ define "main" }}
6 <article class="center ph3 ph4-ns pv3 pv5-ns mw9">
7
8 <!-- header spans the full width -->
9 <div class="flex flex-wrap">
10
11 <div class="w-100 w-20-l order-1 order-0-l">
12 {{template "sc-details" .}}
13 </div>
14
15 <div class="w-100 w-60-l order-0 order-1-l ph4-l">
16 {{template "sc-main-column" .}}
17 </div>
18
19 <aside class="dn mid-gray w-100 w-20-ns flex-l justify-center order-2">
20 {{template "sc-navigation" .}}
21 </aside>
22
23 </div>
24
25 <div class="f6 gray mv6">{{/* bottom row */}}
26 Last Update: {{ .Lastmod.Format "January 2, 2006" }} <br>
27 {{ partial "page-edit.html" . }}
28 </div>
29 <div class="b">The Showcase articles are copyright the content authors. Any open source license will be attached.</div>
30 </article>
31 {{ end }}
32
33
34
35 {{define "sc-main-column"}}
36 {{ $img := (.Resources.ByType "image").GetMatch "*featured*" }}
37 {{ with $img }}
38 {{ $big := .Fill "1024x512 top" }}
39 {{ $small := $big.Resize "512x" }}
40 <img
41 alt="{{ $img.Title }}"
42 src="{{ $big.RelPermalink }}"
43 srcset="{{ $small.RelPermalink }} 512w, {{ $big.RelPermalink }} 1024w"
44 sizes="(min-width: 1570px) 822px, (max-width: 1569px) and (min-width: 960px) 50vw, 93vw"
45 width="{{ $big.Width }}"
46 class="mw-100 b--light-gray ba"
47 >
48 {{ end }}
49 <div class="mid-gray nested-copy-line-height nested-img nested-links">
50 {{with .Params.byline }}
51 <div style="margin-top: 20px; font-style: italic;">By {{ . | markdownify -}}</div>
52 {{ end }}
53 {{with .Content}}
54 {{- . -}}
55 {{end}}
56 </div>
57
58 {{end}}
59
60 {{define "sc-details"}}
61 <div class="mt4 mt0-ns nested-links">
62 <div class="ba b--light-gray bg-white pa3">
63 <h1 class="f2-fluid mt0">{{.Title}}</h1>
64 {{ with .Params.siteURL }}
65 <a href="{{ . }}" class="db f5 mb1">{{ . | replaceRE "^https?://(www\\.)?([^/]+).*" "$2"}} {{ partial "svg/link-ext.svg" (dict "size" "10") }}</a>
66 {{ end }}
67 {{ with .Params.siteSource }}
68 <a href="{{ . }}" class="db mb4">source {{ partial "svg/link-ext.svg" (dict "size" "10") }}</a>
69 {{ end }}
70 {{ $bio := (.Resources.ByType "page").GetMatch "bio*" }}
71 {{ with $bio }}
72 <div class="f6 mid-gray nested-copy-line-height nested-links">
73 {{- .Content -}}
74 </div>
75 {{ end }}
76 </div>
77 <div class="b--light-gray bt dn-l pt3">
78 <div class="f6 gray mb2">Previous/Next</div>
79 {{- partial "previous-next-links-in-section-with-title.html" . -}}
80 </div>
81 </div>
82 {{end}}
83
84 {{define "sc-navigation"}}
85 {{$section := where .Site.RegularPages "Section" .Section}}
86 {{$number_of_entries := $section | len}}
87 <ul class="pa0 list">
88 <li class="b f5 blTK b--light-gray pb2 pl2">
89 More Sites
90 </li>
91 {{range first 20 $section}}
92 <li class="bl b--light-gray pl2 f6 hover-bg-light-gray hover-accent-color-light {{if eq $ .}} bg-light-gray{{end}}">
93 <a href="{{.RelPermalink}}" class="db link w-100 pv1 ph1 {{ if eq $ . }} b primary-color{{else}} mid-gray {{end}}">
94 {{- .Title -}}
95 </a>
96 </li>
97 {{end}}
98 {{if gt $number_of_entries 20}}
99 <li class="mt3">
100 <a href="/showcase/page/2/" class="link blue">
101 See More »
102 </a>
103 </li>
104 {{end}}
105 </ul>
106 {{end}}