mirror of
https://github.com/tiennm99/HugoBlox-kit.git
synced 2026-10-14 16:16:47 +00:00
style(widget): improve appearance of Experience & Accomplishments
New mobile first approach improves style of widgets on small devices. Close #860
This commit is contained in:
1 parent
e2274c6b35
commit
177dd391d3
5 files changed
+57
-64
No files matched your search
@@ -2,13 +2,11 @@
|
||||
# Accomplishments widget.
|
||||
widget = "accomplishments" # Do not modify this line!
|
||||
active = true # Activate this widget? true/false
|
||||
weight = 50 # Order that this section will appear.
|
||||
|
||||
title = "Accomplish­ments"
|
||||
subtitle = ""
|
||||
|
||||
# Order that this section will appear in.
|
||||
weight = 50
|
||||
|
||||
# Date format
|
||||
# Refer to https://sourcethemes.com/academic/docs/customization/#date-format
|
||||
date_format = "Jan 2006"
|
||||
@@ -20,24 +18,30 @@ date_format = "Jan 2006"
|
||||
# Begin/end multi-line descriptions with 3 quotes `"""`.
|
||||
|
||||
[[item]]
|
||||
title = "Neural Networks and Deep Learning"
|
||||
organization = "Coursera"
|
||||
organization_url = "https://www.coursera.org"
|
||||
title = "Neural Networks and Deep Learning"
|
||||
url = ""
|
||||
certificate_url = "https://www.coursera.org"
|
||||
date_start = "2018-10-01"
|
||||
date_end = ""
|
||||
description = ""
|
||||
|
||||
[[item]]
|
||||
title = "Blockchain Fundamentals"
|
||||
organization = "edX"
|
||||
organization_url = "https://www.edx.org"
|
||||
title = "Blockchain Fundamentals"
|
||||
url = "https://www.edx.org/professional-certificate/uc-berkeleyx-blockchain-fundamentals"
|
||||
certificate_url = "https://www.edx.org"
|
||||
date_start = "2018-03-01"
|
||||
date_end = ""
|
||||
description = ""
|
||||
description = "Formulated informed blockchain models, hypotheses, and use cases."
|
||||
|
||||
[[item]]
|
||||
title = "Intro to Python"
|
||||
organization = "DataCamp"
|
||||
organization_url = "https://www.datacamp.com"
|
||||
title = "Object-Oriented Programming in R: S3 and R6 Course"
|
||||
url = ""
|
||||
certificate_url = "https://www.datacamp.com"
|
||||
date_start = "2017-07-01"
|
||||
date_end = "2017-12-21"
|
||||
|
||||
@@ -2,16 +2,14 @@
|
||||
# Experience widget.
|
||||
widget = "experience" # Do not modify this line!
|
||||
active = true # Activate this widget? true/false
|
||||
weight = 40 # Order that this section will appear.
|
||||
|
||||
title = "Experience"
|
||||
subtitle = ""
|
||||
|
||||
# Order that this section will appear in.
|
||||
weight = 40
|
||||
|
||||
# Date format for experience
|
||||
# Refer to https://sourcethemes.com/academic/docs/customization/#date-format
|
||||
date_format = "January 2006"
|
||||
date_format = "Jan 2006"
|
||||
|
||||
# Experiences.
|
||||
# Add/remove as many `[[experience]]` blocks below as you like.
|
||||
|
||||
@@ -1352,22 +1352,19 @@ article .article-metadata {
|
||||
* Accomplishments
|
||||
**************************************************/
|
||||
|
||||
.course {
|
||||
margin-bottom: -0.5rem;
|
||||
.card.course {
|
||||
margin-bottom: 1rem; /* More compact spacing than Experience widget as typically more items here. */
|
||||
}
|
||||
|
||||
.course h6 {
|
||||
font-size: 0.80rem;
|
||||
font-weight: 700;
|
||||
line-height: 1.5;
|
||||
text-transform: uppercase;
|
||||
.card.course:last-of-type {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.course h6 a {
|
||||
.course .card-subtitle a {
|
||||
border-bottom: solid 1px transparent;
|
||||
}
|
||||
|
||||
.course h6 a:hover {
|
||||
.course .card-subtitle a:hover {
|
||||
border-bottom: solid 1px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@@ -12,41 +12,36 @@
|
||||
|
||||
{{ if $page.Params.item }}
|
||||
{{ range $idx, $key := sort $page.Params.item ".date_start" "desc" }}
|
||||
<div class="row experience">
|
||||
<!-- Content -->
|
||||
<div class="col py-2">
|
||||
<div class="card course">
|
||||
<div class="card-body">
|
||||
<div class="float-right text-muted exp-meta">
|
||||
<div class="text-right">
|
||||
{{ (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>
|
||||
<div class="text-right">
|
||||
{{ if .certificate_url }}
|
||||
<h6 class="card-title exp-company text-muted my-0">
|
||||
<a href="{{.certificate_url}}" target="_blank" rel="noopener">
|
||||
{{ i18n "see_certificate" | default "See certificate" }}
|
||||
</a>
|
||||
</h6>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
<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 .organization_url}}<a href="{{.}}" target="_blank" rel="noopener">{{end}}
|
||||
{{.organization | markdownify | emojify}}
|
||||
{{with .organization_url}}</a>{{end -}}
|
||||
</h4>
|
||||
{{with .description}}
|
||||
<div class="card-text">{{. | markdownify | emojify}}</div>
|
||||
<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 -}}
|
||||
|
||||
<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>
|
||||
{{end}}
|
||||
|
||||
{{ with .certificate_url }}
|
||||
<a class="card-link" href="{{.}}" target="_blank" rel="noopener">
|
||||
{{ i18n "see_certificate" | default "See certificate" }}
|
||||
</a>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{end}}
|
||||
{{end}}
|
||||
</div>
|
||||
|
||||
@@ -32,23 +32,22 @@
|
||||
<div class="col py-2">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="float-right text-muted exp-meta">
|
||||
<div class="text-right">
|
||||
{{ (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}}
|
||||
</div>
|
||||
{{with .location}}
|
||||
<div class="text-right">{{.}}</div>
|
||||
{{end}}
|
||||
</div>
|
||||
<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>
|
||||
|
||||
Reference in new issue
Block a user