From 177dd391d3497f12119e25b66fee99927b9e0a91 Mon Sep 17 00:00:00 2001 From: George Cushen Date: Sun, 3 Mar 2019 20:15:12 +0000 Subject: [PATCH] style(widget): improve appearance of Experience & Accomplishments New mobile first approach improves style of widgets on small devices. Close #860 --- exampleSite/content/home/accomplishments.md | 18 +++--- exampleSite/content/home/experience.md | 6 +- layouts/partials/css/academic.css | 15 ++--- layouts/partials/widgets/accomplishments.html | 57 +++++++++---------- layouts/partials/widgets/experience.html | 25 ++++---- 5 files changed, 57 insertions(+), 64 deletions(-) diff --git a/exampleSite/content/home/accomplishments.md b/exampleSite/content/home/accomplishments.md index 78924b1e..2cb4799d 100644 --- a/exampleSite/content/home/accomplishments.md +++ b/exampleSite/content/home/accomplishments.md @@ -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" diff --git a/exampleSite/content/home/experience.md b/exampleSite/content/home/experience.md index bc959f99..94ffe748 100644 --- a/exampleSite/content/home/experience.md +++ b/exampleSite/content/home/experience.md @@ -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. diff --git a/layouts/partials/css/academic.css b/layouts/partials/css/academic.css index 98a6c8aa..90e20295 100644 --- a/layouts/partials/css/academic.css +++ b/layouts/partials/css/academic.css @@ -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; } diff --git a/layouts/partials/widgets/accomplishments.html b/layouts/partials/widgets/accomplishments.html index 60a89588..7a52a386 100644 --- a/layouts/partials/widgets/accomplishments.html +++ b/layouts/partials/widgets/accomplishments.html @@ -12,41 +12,36 @@ {{ if $page.Params.item }} {{ range $idx, $key := sort $page.Params.item ".date_start" "desc" }} -
- -
-
-
-
-
- {{ (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}} -
-
- {{ if .certificate_url }} -
- - {{ i18n "see_certificate" | default "See certificate" }} - -
- {{ end }} -
-
-

{{.title | markdownify | emojify}}

-

- {{- with .organization_url}}{{end}} - {{.organization | markdownify | emojify}} - {{with .organization_url}}{{end -}} -

- {{with .description}} -
{{. | markdownify | emojify}}
+
+
+ {{- with .url -}}{{- end -}} +

{{.title | markdownify | emojify}}

+ {{- with .url -}}{{- end -}} + +
+ {{- with .organization_url}}{{end -}} + {{- .organization | markdownify | emojify -}} + {{- with .organization_url}}{{end -}} + + + + {{ (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 .description}} +
{{. | markdownify | emojify}}
+ {{end}} + + {{ with .certificate_url }} + + {{ i18n "see_certificate" | default "See certificate" }} + + {{ end }}
-
{{end}} {{end}}
diff --git a/layouts/partials/widgets/experience.html b/layouts/partials/widgets/experience.html index 3169e340..cbfd5b2b 100644 --- a/layouts/partials/widgets/experience.html +++ b/layouts/partials/widgets/experience.html @@ -32,23 +32,22 @@
-
-
- {{ (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}} -
{{.}}
- {{end}} -

{{.title | markdownify | emojify}}

{{- with .company_url}}{{end}}{{.company | markdownify | emojify}}{{with .company_url}}{{end -}}

+
+ {{ (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}} + + {{.}} + {{end}} +
{{with .description}}
{{. | markdownify | emojify}}
{{end}}