mirror of
https://github.com/tiennm99/HugoBlox-kit.git
synced 2026-10-24 16:17:13 +00:00
George Cushen
177dd391d3
New mobile first approach improves style of widgets on small devices. Close #860
60 lines
2.3 KiB
HTML
60 lines
2.3 KiB
HTML
{{ $ := .root }}
|
||
{{ $page := .page }}
|
||
|
||
<!-- Experience widget -->
|
||
<div class="row">
|
||
<div class="col-12 col-lg-4 section-heading">
|
||
<h1>{{ with $page.Title }}{{ . | markdownify }}{{ end }}</h1>
|
||
{{ with $page.Params.subtitle }}<p>{{ . | markdownify }}</p>{{ end }}
|
||
</div>
|
||
<div class="col-12 col-lg-8">
|
||
{{ with $page.Content }}<p>{{ . | markdownify }}</p>{{ end }}
|
||
|
||
{{ if $page.Params.experience }}
|
||
{{ $exp_len := len $page.Params.experience }}
|
||
{{ range $idx, $key := sort $page.Params.experience ".date_start" "desc" }}
|
||
<div class="row experience">
|
||
<!-- Timeline -->
|
||
<div class="col-auto text-center flex-column d-none d-sm-flex">
|
||
<div class="row h-50">
|
||
<div class="col {{if gt $idx 0}}border-right{{end}}"> </div>
|
||
<div class="col"> </div>
|
||
</div>
|
||
<div class="m-2">
|
||
<span class="badge badge-pill border {{if not .date_end}}exp-fill{{end}}"> </span>
|
||
</div>
|
||
<div class="row h-50">
|
||
<div class="col {{if lt $idx (sub $exp_len 1)}}border-right{{end}}"> </div>
|
||
<div class="col"> </div>
|
||
</div>
|
||
</div>
|
||
<!-- Content -->
|
||
<div class="col py-2">
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<h4 class="card-title exp-title text-muted mt-0 mb-1">{{.title | markdownify | emojify}}</h4>
|
||
<h4 class="card-title exp-company text-muted my-0">
|
||
{{- with .company_url}}<a href="{{.}}" target="_blank" rel="noopener">{{end}}{{.company | markdownify | emojify}}{{with .company_url}}</a>{{end -}}
|
||
</h4>
|
||
<div class="text-muted exp-meta">
|
||
{{ (time .date_start).Format ($page.Params.date_format | default "January 2006") }} –
|
||
{{ if .date_end}}
|
||
{{ (time .date_end).Format ($page.Params.date_format | default "January 2006") }}
|
||
{{else}}
|
||
{{ i18n "present" | default "Present" }}
|
||
{{end}}
|
||
{{with .location}}
|
||
<span class="middot-divider"></span>
|
||
<span>{{.}}</span>
|
||
{{end}}
|
||
</div>
|
||
{{with .description}}<div class="card-text">{{. | markdownify | emojify}}</div>{{end}}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{{end}}
|
||
{{end}}
|
||
</div>
|
||
</div>
|