Merge branch 'master' into missing-social-icon-fallback

Farossco · Jul 9, 2020 · 65db7a7 · 65db7a7
2 parents 499f512 + 67567fa
commit 65db7a7
Show file tree

Hide file tree

Showing 9 changed files with 57 additions and 26 deletions.
diff --git a/README.md b/README.md
@@ -206,6 +206,10 @@ Supported properties are:
     </tbody>
 </table>
 
+## 5. Internationalization
+
+There are a few hardcoded english strings used in the template, such as the section titles and some labels. If you want to change the default language from english to something else, you can translate these strings by changing the values in `data/strings.json`.
+
 ## SpellCheck
 
 If you run the project locally in development, the content of your `introduction` and `entries` will be automatically spell-checked using your system default spellcheck engine.

diff --git a/src/assets/styles/base/_layout.scss b/src/assets/styles/base/_layout.scss
@@ -48,3 +48,13 @@ body {
         padding-right: 7%;
     }
 }
+
+.grid {
+    display: grid;
+    column-gap: $spacing-x * 2;
+    page-break-inside: avoid;
+
+    &--2col {
+        grid-template-columns: 1fr 1fr;
+    }
+}
diff --git a/src/assets/styles/components/_section.scss b/src/assets/styles/components/_section.scss
@@ -1,23 +1,21 @@
-.sections {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    column-gap: $spacing-x * 2;
-}
-
 .section {
-    grid-column: span 2;
     padding-top: $spacing-y;
     padding-bottom: $spacing-y;
-
-    @include mq(md, true) {
-        &--half {
-            grid-column: span 1;
-        }
-    }
+    page-break-inside: avoid;
 
     &__title {
         margin-bottom: $spacing-y;
         padding-bottom: 0.5rem;
         border-bottom: 1px solid $gray;
     }
 }
+
+.grid .section {
+    grid-column: span 2;
+
+    @include mq(md, true) {
+        &--half {
+            grid-column: span 1;
+        }
+    }
+}
diff --git a/src/assets/styles/print/_index.scss b/src/assets/styles/print/_index.scss
@@ -77,6 +77,7 @@
     .entrylist::before,
     .entrylist__item::before,
     .bulletlist li::before {
+        color-adjust: exact !important;
         -webkit-print-color-adjust: exact !important;
     }
 

diff --git a/src/data/strings.json b/src/data/strings.json
@@ -0,0 +1,16 @@
+{
+    "titles": {
+        "introduction": "About Me",
+        "experience": "Work Experience",
+        "education": "Education",
+        "skills": "Skills",
+        "languages": "Languages"
+    },
+    "labels": {
+        "email": "Email",
+        "telephone": "Telephone",
+        "print": "Print Résumé",
+        "present": "Present",
+        "lastUpdated": "Last updated"
+    }
+}
diff --git a/src/includes/entry.njk b/src/includes/entry.njk
@@ -12,7 +12,7 @@
                     {{ entry.data.end | dateToFormat("MM/yyyy") }}
                 </time>
             {% else %}
-                <span>Present</span>
+                <span>{{ strings.labels.present }}</span>
             {% endif %}
         </p>
 

diff --git a/src/includes/footer.njk b/src/includes/footer.njk
@@ -1,7 +1,7 @@
 <footer class="footer">
     <div class="container utl-space-between">
         <p>&copy; {{ author.name }}</p>
-        <p>Last updated: {{ build.timestamp | dateToFormat('dd.MM.yyyy') }}</p>
+        <p>{{ strings.labels.lastUpdated }}: {{ build.timestamp | dateToFormat('dd.MM.yyyy') }}</p>
         {% if build.demo %}
             <a href="https://github.com/maxboeck/resume" class="repo-link utl-screen-only">
                 <span>{% icon "github" %} view source</span>

diff --git a/src/includes/sidebar.njk b/src/includes/sidebar.njk
@@ -3,16 +3,16 @@
 
         <div class="actions">
             {% if author.email %}
-                <a class="actions__btn has-tooltip" aria-label="Email" href="mailto:{{ author.email | obfuscate | safe }}">
+                <a class="actions__btn has-tooltip" aria-label="{{ strings.labels.email }}" href="mailto:{{ author.email | obfuscate | safe }}">
                     {% icon "email" %}
                 </a>
             {% endif %}
             {% if author.telephone %}
-                <a class="actions__btn has-tooltip" aria-label="Telephone" href="tel:{{ author.telephone | stripSpaces }}">
+                <a class="actions__btn has-tooltip" aria-label="{{ strings.labels.telephone }}" href="tel:{{ author.telephone | stripSpaces }}">
                     {% icon "telephone" %}
                 </a>
             {% endif %}
-            <button class="actions__btn js-print utl-screen-only has-tooltip" aria-label="Print Résumé">
+            <button class="actions__btn js-print utl-screen-only has-tooltip" aria-label="{{ strings.labels.print }}">
                 {% icon "print" %}
             </button>
         </div>

diff --git a/src/layouts/resume.njk b/src/layouts/resume.njk
@@ -2,33 +2,34 @@
 layout: base
 ---
 
-<main class="main">
-    <div class="sections container">
+<main class="main container">
 
         <section class="section" id="section-introduction">
-            <h2 class="section__title">About Me</h2>
+            <h2 class="section__title">{{ strings.titles.introduction }}</h2>
             <div class="lead p-summary" data-spellcheck>
                 {{ content | safe }}
             </div>
         </section>
 
         <section class="section" id="section-experience">
-            <h2 class="section__title">Work Experience</h2>
+            <h2 class="section__title">{{ strings.titles.experience }}</h2>
             {% set entries = collections.work %}
             {% set microformat = "p-experience" %}
             {% include "entrylist.njk" %}
         </section>
 
         <section class="section" id="section-education">
-            <h2 class="section__title">Education</h2>
+            <h2 class="section__title">{{ strings.titles.education }}</h2>
             {% set entries = collections.education %}
             {% set microformat = "p-education" %}
             {% include "entrylist.njk" %}
         </section>
 
+    {% if author.skills or author.languages %}
+    <div class="grid grid--2col">
         {% if author.skills %}
         <section class="section section--half" id="section-skills">
-            <h2 class="section__title">Skills</h2>
+            <h2 class="section__title">{{ strings.titles.skills }}</h2>
             <ul class="bulletlist">
             {% for skill in author.skills %}
                 <li class="p-skill">{{ skill }}</li>
@@ -39,14 +40,15 @@ layout: base
 
         {% if author.languages %}
         <section class="section section--half" id="section-languages">
-            <h2 class="section__title">Languages</h2>
+            <h2 class="section__title">{{ strings.titles.languages }}</h2>
             <ul class="bulletlist">
             {% for language in author.languages %}
                 <li class="p-skill">{{ language.name }} ({{ language.level }})</li>
             {% endfor %}
             </ul>
         </section>
         {% endif %}
-
     </div>
+    {% endif %}
+
 </main>