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:
George Cushen committed 2019-03-03 20:15:20 +00:00
1 parent e2274c6b35
commit 177dd391d3
5 files changed
+57 -64

No files matched your search

+11 -7
View File
@@ -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 -4
View File
@@ -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.
+6 -9
View File
@@ -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;
}
+26 -31
View File
@@ -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>
+12 -13
View File
@@ -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>