tiennm99/HugoBlox-kit
1
0 Fork 0
mirror of https://github.com/tiennm99/HugoBlox-kit.git synced 2026-10-13 18:15:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: support both 1 and 2 column variations for most widgets

Browse Source 
- support both 1 and 2 column variations for following widgets: "pages" "featured" "experience" "accomplishments" "contact" "blank" "tag_cloud"
- fix parallax conflict with new CSS page grid causing 100% entire page height for a section
   - add dedicated child div for bg prevents parallax 100% height issue within new CSS grid page wrapper
- fix `.page-wrapper` min-height when no-navbar
- fix `.home-section.fullscreen` min-height when no-navbar
- refactor `contact-widget` styles to use existing `wg-contact` class
This commit is contained in:
George Cushen committed 2020-11-08 22:55:18 +00:00
1 parent 49515d9e14
commit b647d7e81a
10 files changed
+330 -342
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

wowchemy/assets/scss/wowchemy/_root.scss
+3
View File
@@ -48,6 +48,9 @@ body.no-navbar {
min-height: calc(100vh - 50px);
}
}
.page-wrapper.no-navbar {
min-height: 100vh;
}
.page-header,
.page-footer {
wowchemy/assets/scss/wowchemy/_widgets.scss
+20 -6
View File
@@ -28,6 +28,9 @@
min-height: calc(100vh - 50px);
}
}
.no-navbar .home-section.fullscreen {
min-height: 100vh;
}
/* Override dark colors that may be inherited from body.dark */
.home-section.dark,
@@ -66,8 +69,19 @@
top: 100%;
}*/
// Fill padding of `.home-section` parent
.home-section-bg {
position: absolute;
top: 0;
left: 0;
height: fill-available;
height: -webkit-fill-available;
width: fill-available;
width: -webkit-fill-available;
}
/* Default background image properties for home sections. */
.home-section.bg-image {
.home-section-bg .bg-image {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
@@ -557,24 +571,24 @@ ul.ul-edu li .description p.institution {
* Contact
**************************************************/
.contact-widget .fa-ul {
.wg-contact .fa-ul {
margin-left: 3.14285714rem; /* Must be > `fa-2x` icon size. */
}
.contact-widget .fa-li {
.wg-contact .fa-li {
position: absolute;
left: -3.14285714rem; /* Negative of `.contact-widget .fa-ul` margin. */
left: -3.14285714rem; /* Negative of `.wg-contact .fa-ul` margin. */
width: 2rem; /* Match `fa-2x` icon size. */
top: 0.14285714em; /* Default FA value. */
text-align: center;
}
.contact-widget li {
.wg-contact li {
padding-top: 0.8rem; /* Align text with bottom of `fa-2x` icon. */
margin-bottom: 0.3rem;
}
.contact-widget li:last-of-type {
.wg-contact li:last-of-type {
margin-bottom: 0;
}
wowchemy/layouts/partials/widget_page.html
+35 -6
View File
@@ -28,13 +28,14 @@
{{/* Begin widget styling */}}
{{ $bg := $st.Params.design.background }}
{{ $style := "" }}
{{ $style_bg := "" }}
{{ if $bg.color }}
{{ $style = printf "background-color: %s;" ($bg.color | default "transparent") }}
{{ $style_bg = printf "background-color: %s;" ($bg.color | default "transparent") }}
{{ end }}
{{ if and $bg.gradient_start $bg.gradient_end }}
{{ $style = printf "%sbackground-image: linear-gradient(%s, %s);" $style $bg.gradient_start $bg.gradient_end }}
{{ $style_bg = printf "%sbackground-image: linear-gradient(%s, %s);" $style_bg $bg.gradient_start $bg.gradient_end }}
{{ end }}
{{ if $bg.image }}
@@ -44,14 +45,14 @@
{{ end }}
{{/* See Hugo note on linking assets in styles: https://github.com/gohugoio/hugoThemes#common-permalink-issues */}}
{{ $media_dir := $.Scratch.Get "media_dir" }}
{{ $style = printf "%sbackground-image: %s url('%s');" $style $darken (printf "%s/%s" $media_dir $bg.image | absURL) }}
{{ $style_bg = printf "%sbackground-image: %s url('%s');" $style_bg $darken (printf "%s/%s" $media_dir $bg.image | absURL) }}
{{ with $bg.image_size }}
{{/* Allow sizes: actual, cover, and contain. */}}
{{ $style = printf "%sbackground-size: %s;" $style (replace . "actual" "auto") }}
{{ $style_bg = printf "%sbackground-size: %s;" $style_bg (replace . "actual" "auto") }}
{{ end }}
{{ with $bg.image_position }}
{{/* Allow valid CSS positions including left, center, and right. */}}
{{ $style = printf "%sbackground-position: %s;" $style . }}
{{ $style_bg = printf "%sbackground-position: %s;" $style_bg . }}
{{ end }}
{{ end }}
@@ -98,9 +99,37 @@
{{ $use_container = $cfg.use_container }}
{{end}}
<section id="{{$hash_id}}" class="home-section {{$widget_class}} {{if $bg.text_color_light}}dark{{end}} {{if $bg.image}} bg-image{{if ($bg.image_parallax | default true) }} parallax{{end}}{{end}} {{with $css_classes}}{{.}}{{end}}" {{with $style}}style="{{. | safeCSS}}"{{end}} {{print $extra_attributes | safeHTMLAttr}}>
{{ $columns := $st.Params.design.columns | default "2" }}
{{ $use_cols := in (slice "pages" "featured" "experience" "accomplishments" "contact" "blank" "tag_cloud") $widget }}
{{/* Dedicated child div for bg prevents parallax 100% height issue within new CSS grid page wrapper. */}}
<section id="{{$hash_id}}" class="home-section {{$widget_class}} {{if $bg.text_color_light}}dark{{end}} {{with $css_classes}}{{.}}{{end}}" {{with $style}}style="{{. | safeCSS}}"{{end}} {{print $extra_attributes | safeHTMLAttr}}>
<div class="home-section-bg {{if $bg.image}} bg-image{{if ($bg.image_parallax | default true) }} parallax{{end}}{{end}}" {{with $style_bg}}style="{{. | safeCSS}}"{{end}}></div>
{{if $use_container}}<div class="container">{{end}}
{{if $use_cols}}
<div class="row {{if not $st.Title | or (eq $columns "1") }}justify-content-center{{end}}">
{{ if $st.Title }}
{{ if eq $columns "1" }}
<div class="col-12 section-heading text-center">
{{ with $st.Title }}<h1>{{.}}</h1>{{ end }}
{{ with $st.Params.subtitle }}<p>{{ . | markdownify | emojify }}</p>{{ end }}
</div>
{{else}}
<div class="col-12 col-lg-4 section-heading">
{{ with $st.Title }}<h1>{{.}}</h1>{{ end }}
{{ with $st.Params.subtitle }}<p>{{ . | markdownify | emojify }}</p>{{ end }}
</div>
{{end}}
{{end}}
{{end}}
{{ partial $widget_path $widget_args }}
{{if $use_cols}}
</div>
{{end}}
{{if $use_container}}</div>{{end}}
</section>
{{ end }}
wowchemy/layouts/partials/widgets/accomplishments.html
+31 -36
View File
@@ -1,48 +1,43 @@
{{ $ := .root }}
{{ $page := .page }}
{{ $columns := $page.Params.design.columns | default "2" }}
<!-- Accomplishments 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 }}{{ . }}{{ end }}
<div class="col-12 {{if eq $columns "2"}}col-lg-8{{end}}">
{{ with $page.Content }}{{ . }}{{ end }}
{{ if $page.Params.item }}
{{ range $idx, $key := sort $page.Params.item ".date_start" "desc" }}
<div class="card experience course">
<div class="card-body">
{{- with .url -}}<a href="{{.}}" target="_blank" rel="noopener">{{- end -}}
<h4 class="card-title exp-title text-muted my-0">{{.title | markdownify | emojify}}</h4>
{{- with .url -}}</a>{{- end -}}
{{ if $page.Params.item }}
{{ range $idx, $key := sort $page.Params.item ".date_start" "desc" }}
<div class="card experience course">
<div class="card-body">
{{- with .url -}}<a href="{{.}}" target="_blank" rel="noopener">{{- end -}}
<h4 class="card-title exp-title text-muted my-0">{{.title | markdownify | emojify}}</h4>
{{- with .url -}}</a>{{- end -}}
<div class="card-subtitle my-0 article-metadata">
{{- with .organization_url}}<a href="{{.}}" target="_blank" rel="noopener">{{end -}}
{{- .organization | markdownify | emojify -}}
{{- with .organization_url}}</a>{{end -}}
<div class="card-subtitle my-0 article-metadata">
{{- with .organization_url}}<a href="{{.}}" target="_blank" rel="noopener">{{end -}}
{{- .organization | markdownify | emojify -}}
{{- with .organization_url}}</a>{{end -}}
<span class="middot-divider"></span>
<span class="middot-divider"></span>
{{ (time .date_start).Format ($page.Params.date_format | default "Jan 2006") }}
{{ if .date_end}}
– {{ (time .date_end).Format ($page.Params.date_format | default "Jan 2006") }}
{{end}}
</div>
{{with .description}}
<div class="card-text">{{. | markdownify | emojify}}</div>
{{ (time .date_start).Format ($page.Params.date_format | default "Jan 2006") }}
{{ if .date_end}}
– {{ (time .date_end).Format ($page.Params.date_format | default "Jan 2006") }}
{{end}}
{{ with .certificate_url }}
<a class="card-link" href="{{.}}" target="_blank" rel="noopener">
{{ i18n "see_certificate" | default "See certificate" }}
</a>
{{ end }}
</div>
{{with .description}}
<div class="card-text">{{. | markdownify | emojify}}</div>
{{end}}
{{ with .certificate_url }}
<a class="card-link" href="{{.}}" target="_blank" rel="noopener">
{{ i18n "see_certificate" | default "See certificate" }}
</a>
{{ end }}
</div>
{{end}}
{{end}}
</div>
</div>
{{end}}
{{end}}
</div>
wowchemy/layouts/partials/widgets/blank.html
+9 -17
View File
@@ -1,20 +1,12 @@
{{ $st := .page }}
{{ $columns := $st.Params.design.columns | default "2" }}
<div class="row">
{{ if ne $columns "1" }}
<div class="col-12 col-lg-4 section-heading">
{{ with $st.Title }}<h1>{{ . | markdownify | emojify }}</h1>{{ end }}
{{ with $st.Params.subtitle }}<p>{{ . | markdownify | emojify }}</p>{{ end }}
</div>
<div class="col-12 col-lg-8">
{{ $st.Content }}
</div>
{{ else }}
<div class="col-lg-12">
{{ with $st.Title }}<h1>{{ . | markdownify | emojify }}</h1>{{ end }}
{{ with $st.Params.subtitle }}<p>{{ . | markdownify | emojify }}</p>{{ end }}
{{ $st.Content }}
</div>
{{ end }}
</div>
{{ if ne $columns "1" }}
<div class="col-12 col-lg-8">
{{ $st.Content }}
</div>
{{ else }}
<div class="col-12">
{{ $st.Content }}
</div>
{{ end }}
wowchemy/layouts/partials/widgets/contact.html
+124 -139
View File
@@ -5,152 +5,137 @@
{{ $columns := $st.Params.design.columns | default "2" }}
<div class="row contact-widget {{if not $st.Title | or (eq $columns "1") }}justify-content-center{{end}}">
{{ if $st.Title }}
{{ if eq $columns "1" }}
<div class="col-12 col-lg-8 section-heading text-center">
{{ with $st.Title }}<h1>{{.}}</h1>{{ end }}
{{ with $st.Params.subtitle }}<p>{{ . | markdownify | emojify }}</p>{{ end }}
<div class="col-12 {{if eq $columns "2"}}col-lg-8{{end}}">
{{ with $st.Content }}{{ . }}{{ end }}
{{ if $st.Params.email_form }}
{{ $post_action := "" }}
{{ if eq $st.Params.email_form 1 }}
{{ $post_action = "netlify" }}
{{ else }}
{{ if not $data.email }}
{{ errorf "Please set an email address for the contact form using the `email` parameter in `params.toml`. Otherwise, set `email_form = 0` to disable the contact form." }}
{{ end }}
{{ $post_action = printf "action=\"https://formspree.io/%s\"" $data.email }}
{{end}}
<div class="mb-3">
<form name="contact" method="POST" {{ $post_action | safeHTMLAttr }} {{ if eq $st.Params.email_form 1 }}netlify-honeypot="welcome-bot"{{end}} {{ if $st.Params.netlify.captcha }}data-netlify-recaptcha="true"{{end}}>
<div class="form-group form-inline">
<label class="sr-only" for="inputName">{{ i18n "contact_name" }}</label>
<input type="text" name="name" class="form-control w-100" id="inputName" placeholder="{{ i18n "contact_name" | default "Name" }}" required>
</div>
{{else}}
<div class="col-12 col-lg-4 section-heading">
{{ with $st.Title }}<h1>{{.}}</h1>{{ end }}
{{ with $st.Params.subtitle }}<p>{{ . | markdownify | emojify }}</p>{{ end }}
<div class="form-group form-inline">
<label class="sr-only" for="inputEmail">{{ i18n "contact_email" }}</label>
<input type="email" name="email" class="form-control w-100" id="inputEmail" placeholder="{{ i18n "contact_email" | default "Email" }}" required>
</div>
<div class="form-group">
<label class="sr-only" for="inputMessage">{{ i18n "contact_message" }}</label>
<textarea name="message" class="form-control" id="inputMessage" rows="5" placeholder="{{ i18n "contact_message" | default "Message" }}" required></textarea>
</div>
{{ if eq $st.Params.email_form 1 }}
<div class="d-none">
<label>Do not fill this field unless you are a bot: <input name="welcome-bot"></label>
</div>
{{end}}
{{ end }}
<div class="col-12 col-lg-8">
{{ with $st.Content }}{{ . }}{{ end }}
{{ if $st.Params.email_form }}
{{ $post_action := "" }}
{{ if eq $st.Params.email_form 1 }}
{{ $post_action = "netlify" }}
{{ else }}
{{ if not $data.email }}
{{ errorf "Please set an email address for the contact form using the `email` parameter in `params.toml`. Otherwise, set `email_form = 0` to disable the contact form." }}
{{ end }}
{{ $post_action = printf "action=\"https://formspree.io/%s\"" $data.email }}
{{end}}
<div class="mb-3">
<form name="contact" method="POST" {{ $post_action | safeHTMLAttr }} {{ if eq $st.Params.email_form 1 }}netlify-honeypot="welcome-bot"{{end}} {{ if $st.Params.netlify.captcha }}data-netlify-recaptcha="true"{{end}}>
<div class="form-group form-inline">
<label class="sr-only" for="inputName">{{ i18n "contact_name" }}</label>
<input type="text" name="name" class="form-control w-100" id="inputName" placeholder="{{ i18n "contact_name" | default "Name" }}" required>
</div>
<div class="form-group form-inline">
<label class="sr-only" for="inputEmail">{{ i18n "contact_email" }}</label>
<input type="email" name="email" class="form-control w-100" id="inputEmail" placeholder="{{ i18n "contact_email" | default "Email" }}" required>
</div>
<div class="form-group">
<label class="sr-only" for="inputMessage">{{ i18n "contact_message" }}</label>
<textarea name="message" class="form-control" id="inputMessage" rows="5" placeholder="{{ i18n "contact_message" | default "Message" }}" required></textarea>
</div>
{{ if eq $st.Params.email_form 1 }}
<div class="d-none">
<label>Do not fill this field unless you are a bot: <input name="welcome-bot"></label>
</div>
{{ end }}
{{ if $st.Params.netlify.captcha }}
<div class="form-group" data-netlify-recaptcha="true"></div>
{{ end }}
<button type="submit" class="btn btn-outline-primary px-3 py-2">{{ i18n "contact_send" | default "Send" }}</button>
</form>
</div>
{{end}}
<ul class="fa-ul">
{{ if and $data.email (not $st.Params.email_form) }}
<li>
<i class="fa-li fas fa-envelope fa-2x" aria-hidden="true"></i>
<span id="person-email">
{{- if $autolink }}<a href="mailto:{{ $data.email }}">{{ $data.email }}</a>{{ else }}{{ $data.email }}{{ end -}}
</span>
</li>
{{ if $st.Params.netlify.captcha }}
<div class="form-group" data-netlify-recaptcha="true"></div>
{{ end }}
<button type="submit" class="btn btn-outline-primary px-3 py-2">{{ i18n "contact_send" | default "Send" }}</button>
</form>
</div>
{{end}}
{{ with $data.phone }}
<li>
<i class="fa-li fas fa-phone fa-2x" aria-hidden="true"></i>
<span id="person-telephone">
{{- if $autolink }}<a href="tel:{{ . }}">{{ . }}</a>{{ else }}{{ . }}{{ end -}}
</span>
</li>
{{ end }}
<ul class="fa-ul">
{{ $addr_formatted := "" }}{{/* Scoping for maps. */}}
{{ if $data.address.street | or $data.address.city | or $data.address.region | or $data.address.postcode | or $data.address.country }}
{{ $addr_formatted = partial "functions/get_address" (dict "root" . "address" $data.address) }}
<li>
<i class="fa-li fas fa-map-marker fa-2x" aria-hidden="true"></i>
<span id="person-address">{{$addr_formatted}}</span>
</li>
{{ end }}
{{ with $data.directions }}
<li>
<i class="fa-li fas fa-compass fa-2x" aria-hidden="true"></i>
<span>{{ . | markdownify | emojify }}</span>
</li>
{{ end }}
{{ with $data.office_hours }}
<li>
<i class="fa-li fas fa-clock fa-2x" aria-hidden="true"></i>
<span>
{{- if not (reflect.IsSlice .)}}{{/* Support legacy string format. */}}
{{- . | markdownify | emojify -}}
{{else}}
{{- delimit . "<br>" | markdownify | emojify -}}
{{end -}}
</span>
</li>
{{ end }}
{{ with $data.appointment_url }}
<li>
<i class="fa-li fas fa-calendar-check fa-2x" aria-hidden="true"></i>
<a href="{{ . }}" target="_blank" rel="noopener">{{ i18n "book_appointment" | default "Book an appointment" }}</a>
</li>
{{ end }}
{{/* Contact links. */}}
{{ range $data.contact_links }}
{{ $pack := or .icon_pack "fas" }}
{{ $pack_prefix := $pack }}
{{ if in (slice "fab" "fas" "far" "fal") $pack }}
{{ $pack_prefix = "fa" }}
{{ end }}
{{ $link := .link }}
{{ $scheme := (urls.Parse $link).Scheme }}
{{ $target := "" }}
{{ if not $scheme }}
{{ $link = .link | relLangURL }}
{{ else if in (slice "http" "https") $scheme }}
{{ $target = "target=\"_blank\" rel=\"noopener\"" }}
{{ end }}
<li>
<i class="fa-li {{ $pack }} {{ $pack_prefix }}-{{ .icon }} fa-2x" aria-hidden="true"></i>
<a href="{{ $link | safeURL }}" {{ $target | safeHTMLAttr }}>{{.name|markdownify|emojify|safeHTML}}</a>
</li>
{{ end }}
</ul>
{{ if and site.Params.map.engine $data.coordinates.latitude }}
<div class="d-none">
<input id="map-provider" value="{{ site.Params.map.engine }}">
<input id="map-lat" value="{{ $data.coordinates.latitude }}">
<input id="map-lng" value="{{ $data.coordinates.longitude }}">
<input id="map-dir" value="{{ $addr_formatted }}">
<input id="map-zoom" value="{{ site.Params.map.zoom | default "15" }}">
<input id="map-api-key" value="{{ site.Params.map.api_key }}">
</div>
<div id="map"></div>
{{ if and $data.email (not $st.Params.email_form) }}
<li>
<i class="fa-li fas fa-envelope fa-2x" aria-hidden="true"></i>
<span id="person-email">
{{- if $autolink }}<a href="mailto:{{ $data.email }}">{{ $data.email }}</a>{{ else }}{{ $data.email }}{{ end -}}
</span>
</li>
{{ end }}
{{ with $data.phone }}
<li>
<i class="fa-li fas fa-phone fa-2x" aria-hidden="true"></i>
<span id="person-telephone">
{{- if $autolink }}<a href="tel:{{ . }}">{{ . }}</a>{{ else }}{{ . }}{{ end -}}
</span>
</li>
{{ end }}
{{ $addr_formatted := "" }}{{/* Scoping for maps. */}}
{{ if $data.address.street | or $data.address.city | or $data.address.region | or $data.address.postcode | or $data.address.country }}
{{ $addr_formatted = partial "functions/get_address" (dict "root" . "address" $data.address) }}
<li>
<i class="fa-li fas fa-map-marker fa-2x" aria-hidden="true"></i>
<span id="person-address">{{$addr_formatted}}</span>
</li>
{{ end }}
{{ with $data.directions }}
<li>
<i class="fa-li fas fa-compass fa-2x" aria-hidden="true"></i>
<span>{{ . | markdownify | emojify }}</span>
</li>
{{ end }}
{{ with $data.office_hours }}
<li>
<i class="fa-li fas fa-clock fa-2x" aria-hidden="true"></i>
<span>
{{- if not (reflect.IsSlice .)}}{{/* Support legacy string format. */}}
{{- . | markdownify | emojify -}}
{{else}}
{{- delimit . "<br>" | markdownify | emojify -}}
{{end -}}
</span>
</li>
{{ end }}
{{ with $data.appointment_url }}
<li>
<i class="fa-li fas fa-calendar-check fa-2x" aria-hidden="true"></i>
<a href="{{ . }}" target="_blank" rel="noopener">{{ i18n "book_appointment" | default "Book an appointment" }}</a>
</li>
{{ end }}
{{/* Contact links. */}}
{{ range $data.contact_links }}
{{ $pack := or .icon_pack "fas" }}
{{ $pack_prefix := $pack }}
{{ if in (slice "fab" "fas" "far" "fal") $pack }}
{{ $pack_prefix = "fa" }}
{{ end }}
{{ $link := .link }}
{{ $scheme := (urls.Parse $link).Scheme }}
{{ $target := "" }}
{{ if not $scheme }}
{{ $link = .link | relLangURL }}
{{ else if in (slice "http" "https") $scheme }}
{{ $target = "target=\"_blank\" rel=\"noopener\"" }}
{{ end }}
<li>
<i class="fa-li {{ $pack }} {{ $pack_prefix }}-{{ .icon }} fa-2x" aria-hidden="true"></i>
<a href="{{ $link | safeURL }}" {{ $target | safeHTMLAttr }}>{{.name|markdownify|emojify|safeHTML}}</a>
</li>
{{ end }}
</ul>
{{ if and site.Params.map.engine $data.coordinates.latitude }}
<div class="d-none">
<input id="map-provider" value="{{ site.Params.map.engine }}">
<input id="map-lat" value="{{ $data.coordinates.latitude }}">
<input id="map-lng" value="{{ $data.coordinates.longitude }}">
<input id="map-dir" value="{{ $addr_formatted }}">
<input id="map-zoom" value="{{ site.Params.map.zoom | default "15" }}">
<input id="map-api-key" value="{{ site.Params.map.api_key }}">
</div>
<div id="map"></div>
{{ end }}
</div>
wowchemy/layouts/partials/widgets/experience.html
+42 -47
View File
@@ -1,59 +1,54 @@
{{ $ := .root }}
{{ $page := .page }}
{{ $columns := $page.Params.design.columns | default "2" }}
<!-- 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 }}{{ . }}{{ end }}
<div class="col-12 {{if eq $columns "2"}}col-lg-8{{end}}">
{{ with $page.Content }}{{ . }}{{ 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}}">&nbsp;</div>
<div class="col">&nbsp;</div>
</div>
<div class="m-2">
<span class="badge badge-pill border {{if not .date_end}}exp-fill{{end}}">&nbsp;</span>
</div>
<div class="row h-50">
<div class="col {{if lt $idx (sub $exp_len 1)}}border-right{{end}}">&nbsp;</div>
<div class="col">&nbsp;</div>
</div>
{{ 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}}">&nbsp;</div>
<div class="col">&nbsp;</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 class="m-2">
<span class="badge badge-pill border {{if not .date_end}}exp-fill{{end}}">&nbsp;</span>
</div>
<div class="row h-50">
<div class="col {{if lt $idx (sub $exp_len 1)}}border-right{{end}}">&nbsp;</div>
<div class="col">&nbsp;</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>
{{end}}
{{end}}
</div>
{{end}}
{{end}}
</div>
wowchemy/layouts/partials/widgets/featured.html
+15 -19
View File
@@ -48,26 +48,23 @@
{{ $i18n = "more_pages" }}
{{ end }}
<div class="row">
<div class="col-12 col-lg-4 section-heading">
<h1>{{ with $st.Title }}{{ . | markdownify | emojify }}{{ end }}</h1>
{{ with $st.Params.subtitle }}<p>{{ . | markdownify | emojify }}</p>{{ end }}
</div>
<div class="col-12 col-lg-8">
{{ $columns := $st.Params.design.columns | default "2" }}
{{ with $st.Content }}{{ . }}{{ end }}
<div class="col-12 {{if eq $columns "2"}}col-lg-8{{end}}">
{{ range $post := $query }}
{{ if eq $st.Params.design.view 1 }}
{{ partial "li_list" . }}
{{ else if eq $st.Params.design.view 3 }}
{{ partial "li_card" . }}
{{ else if eq $st.Params.design.view 4 | and (eq $items_type "publication") }}
{{ partial "li_citation" . }}
{{ else }}
{{ partial "li_compact" . }}
{{ end }}
{{end}}
{{ with $st.Content }}{{ . }}{{ end }}
{{ range $post := $query }}
{{ if eq $st.Params.design.view 1 }}
{{ partial "li_list" . }}
{{ else if eq $st.Params.design.view 3 }}
{{ partial "li_card" . }}
{{ else if eq $st.Params.design.view 4 | and (eq $items_type "publication") }}
{{ partial "li_citation" . }}
{{ else }}
{{ partial "li_compact" . }}
{{ end }}
{{end}}
{{ if $st.Params.content.link_to_archive }}
<div class="see-all">
@@ -78,5 +75,4 @@
</div>
{{ end }}
</div>
</div>
wowchemy/layouts/partials/widgets/pages.html
+31 -46
View File
@@ -71,56 +71,41 @@
{{ $columns := $st.Params.design.columns | default "2" }}
<div class="row {{if not $st.Title | or (eq $columns "1") }}justify-content-center{{end}}">
{{ if $st.Title }}
{{ if eq $columns "1" }}
<div class="col-12 col-lg-8 section-heading text-center">
{{ with $st.Title }}<h1>{{.}}</h1>{{ end }}
{{ with $st.Params.subtitle }}<p>{{ . | markdownify | emojify }}</p>{{ end }}
</div>
{{else}}
<div class="col-12 col-lg-4 section-heading">
{{ with $st.Title }}<h1>{{.}}</h1>{{ end }}
{{ with $st.Params.subtitle }}<p>{{ . | markdownify | emojify }}</p>{{ end }}
</div>
{{end}}
{{ end }}
<div class="col-12 col-lg-8">
<div class="col-12 {{if eq $columns "2"}}col-lg-8{{end}}">
{{ with $st.Content }}{{ . }}{{ end }}
{{ with $st.Content }}{{ . }}{{ end }}
{{ range $post := $query }}
{{ if eq $st.Params.design.view 1 }}
{{ partial "li_list" . }}
{{ else if eq $st.Params.design.view 3 }}
{{ partial "li_card" . }}
{{ else if eq $st.Params.design.view 4 | and (eq $items_type "publication") }}
{{ partial "li_citation" . }}
{{ else }}
{{ partial "li_compact" . }}
{{ end }}
{{end}}
{{ range $post := $query }}
{{ if eq $st.Params.design.view 1 }}
{{ partial "li_list" . }}
{{ else if eq $st.Params.design.view 3 }}
{{ partial "li_card" . }}
{{ else if eq $st.Params.design.view 4 | and (eq $items_type "publication") }}
{{ partial "li_citation" . }}
{{ else }}
{{ partial "li_compact" . }}
{{ end }}
{{end}}
{{/* Archive link */}}
{{ $show_archive_link := $st.Params.content.archive.enable | default (gt $count $items_count) }}
{{ if $show_archive_link }}
{{/* Archive link */}}
{{ $show_archive_link := $st.Params.content.archive.enable | default (gt $count $items_count) }}
{{ if $show_archive_link }}
{{ $archive_link := "" }}
{{ if $st.Params.content.archive.link }}
{{ $archive_link = $st.Params.content.archive.link | relLangURL }}
{{ else }}
{{ $archive_link = $archive_page.RelPermalink }}
{{ end }}
{{ $archive_text := $st.Params.content.archive.text | default (i18n $i18n) | default "See all" }}
<div class="see-all">
<a href="{{ $archive_link }}">
{{ $archive_text | emojify }}
<i class="fas fa-angle-right"></i>
</a>
</div>
{{ $archive_link := "" }}
{{ if $st.Params.content.archive.link }}
{{ $archive_link = $st.Params.content.archive.link | relLangURL }}
{{ else }}
{{ $archive_link = $archive_page.RelPermalink }}
{{ end }}
</div>
{{ $archive_text := $st.Params.content.archive.text | default (i18n $i18n) | default "See all" }}
<div class="see-all">
<a href="{{ $archive_link }}">
{{ $archive_text | emojify }}
<i class="fas fa-angle-right"></i>
</a>
</div>
{{ end }}
</div>
wowchemy/layouts/partials/widgets/tag_cloud.html
+20 -26
View File
@@ -1,5 +1,3 @@
{{/* Pages Widget */}}
{{/* Initialise */}}
{{ $ := .root }}
{{ $st := .page }}
@@ -18,32 +16,28 @@
{{ $tags := first $items_count (index site.Taxonomies $taxonomy).ByCount }}
{{ $count := len $tags }}
<div class="row">
<div class="col-12 col-lg-4 section-heading">
<h1>{{ with $st.Title }}{{ . | markdownify | emojify }}{{ end }}</h1>
{{ with $st.Params.subtitle }}<p>{{ . | markdownify | emojify }}</p>{{ end }}
</div>
<div class="col-12 col-lg-8">
{{ with $st.Content }}{{ . }}{{ end }}
{{ $columns := $st.Params.design.columns | default "2" }}
{{ if ne $count 0 }}
<div class="col-12 {{if eq $columns "2"}}col-lg-8{{end}}">
{{ with $st.Content }}{{ . }}{{ end }}
{{ $fontDelta := sub $fontBig $fontSmall }}
{{/* Warning: Hugo's `Reverse` function appears to operate in-place, hence the order of performing $max/$min matters. */}}
{{ $max := add (len (index $tags 0).Pages) 1 }}
{{ $min := len (index ($tags).Reverse 0).Pages }}
{{ $delta := sub $max $min }}
{{ $fontStep := div $fontDelta $delta }}
{{ if ne $count 0 }}
<div class="tag-cloud">
{{ range $name, $term := (sort $tags ".Page.Title" "asc") }}
{{ $tagCount := len $term.Pages }}
{{ $weight := div (sub (math.Log $tagCount) (math.Log $min)) (sub (math.Log $max) (math.Log $min)) }}
{{ $fontSize := add $fontSmall (mul (sub $fontBig $fontSmall) $weight) }}
<a href="{{ .Page.RelPermalink }}" style="font-size:{{ $fontSize }}rem">{{ .Page.Title }}</a>
{{ end }}
</div>
{{ end }}
{{ $fontDelta := sub $fontBig $fontSmall }}
{{/* Warning: Hugo's `Reverse` function appears to operate in-place, hence the order of performing $max/$min matters. */}}
{{ $max := add (len (index $tags 0).Pages) 1 }}
{{ $min := len (index ($tags).Reverse 0).Pages }}
{{ $delta := sub $max $min }}
{{ $fontStep := div $fontDelta $delta }}
<div class="tag-cloud">
{{ range $name, $term := (sort $tags ".Page.Title" "asc") }}
{{ $tagCount := len $term.Pages }}
{{ $weight := div (sub (math.Log $tagCount) (math.Log $min)) (sub (math.Log $max) (math.Log $min)) }}
{{ $fontSize := add $fontSmall (mul (sub $fontBig $fontSmall) $weight) }}
<a href="{{ .Page.RelPermalink }}" style="font-size:{{ $fontSize }}rem">{{ .Page.Title }}</a>
{{ end }}
</div>
{{ end }}
</div>
</div>