fix(widget): rename Accomplishments widget + use soft-hyphen

exampleSite/content/home/accomplishments.md

@@ -3,7 +3,7 @@
 widget = "accomplishments"  # Do not modify this line!
 active = true  # Activate this widget? true/false
 
-title = "Accomplishments"
+title = "Accomplish­ments"
 subtitle = ""
 
 # Order that this section will appear in.

layouts/partials/css/academic.css

@@ -78,7 +78,16 @@ h1, h2, h3, h4, h5, h6 {
   line-height: 1.25;
   color: #313131;
   text-rendering: optimizeLegibility;
-  overflow-wrap: break-word; /* Ensures very long heading words do not overflow into content. */
+
+  /* Ensure long words do not overflow into content. */
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+  word-break: break-word;
+
+  /* Add a hyphen where the word breaks (use `­` to insert a soft-hyphen in a word). */
+  -webkit-hyphens: manual;
+  -ms-hyphens: manual;
+  hyphens: manual;
 }
 h1 {
   font-size: 2.25rem;

layouts/partials/widgets/accomplishments.html

@@ -15,30 +15,36 @@
     <div class="row experience">
       <!-- Content -->
       <div class="col py-2">
-	    <div class="card course">
+        <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") }}
+                – {{ (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>
+                {{ 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 -}}
+              {{- 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>{{end}}
+            {{with .description}}
+            <div class="card-text">{{. | markdownify | emojify}}</div>
+            {{end}}
           </div>
-		</div>
+        </div>
       </div>
     </div>
     {{end}}