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

@@ -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"

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.

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;
 }

layouts/partials/widgets/accomplishments.html

@@ -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>

layouts/partials/widgets/experience.html

@@ -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>