MDM

README.md

@@ -29,6 +29,35 @@ Please do not add links in the endorsement section. This isn't an exercise in SE
 
 Please use the PR process described below, issuing your PR against the `develop` branch.
 
+### Edit content in an existing language or add a new language
+
+If you want to modify an existing language, simply go to the corresponding file in the `i18n/` folder, e.g. `i18n/en.yml` (for english) and modify the contents. If a translation key doesn't exist, it automatically switches to english content.
+
+If you want to add a new language, it's only a 2-step process:
+1. In the `hugo.toml` file, add the new language, e.g. spanish in third position
+```
+[languages]
+  [languages.en]
+    contentDir = 'i18n/en'
+    weight = 1
+    [languages.en.params]
+      languageName = 'english'
+      languageNameShort = 'en'
+  [languages.fr]
+    contentDir = 'i18n/fr'
+    weight = 2
+    [languages.fr.params]
+      languageName = 'français'
+      languageNameShort = 'fr'
+  [languages.es]
+    contentDir = 'i18n/es'
+    weight = 3
+    [languages.fr.params]
+      languageName = 'español'
+      languageNameShort = 'es'
+```
+2. In the `i18n/` folder, add a yml file with the language shortname, e.g. `i18n/es.yml` (if spanish), and translate each key in this file.
+
 ### Design and/or Code
 
 Contributions to the design and/ or code are encouraged!

config.toml

@@ -0,0 +1,32 @@
+baseURL = 'https://overlayfactsheet.com/'
+title = 'Overlay Fact Sheet'
+
+# Site language. Available translations in the theme’s `/i18n` directory.
+defaultContentLanguage = 'en'
+
+# Renders the default content language in subdir, e.g. /. The root directory / will redirect to /
+defaultContentLanguageInSubdir = 'true'
+
+relativeURLs = 'true'
+
+disableKinds = ['taxonomy', 'term']
+
+[markup.goldmark.renderer]
+unsafe = true
+
+[outputs]
+home = ['HTML']
+
+[languages]
+  [languages.en]
+    contentDir = 'i18n/en'
+    weight = 1
+    [languages.en.params]
+      languageName = 'english'
+      languageNameShort = 'en'
+  [languages.fr]
+    contentDir = 'i18n/fr'
+    weight = 2
+    [languages.fr.params]
+      languageName = 'français'
+      languageNameShort = 'fr'

hugo.toml

@@ -0,0 +1,32 @@
+baseURL = 'https://overlayfactsheet.com/'
+title = 'Overlay Fact Sheet'
+
+# Site language. Available translations in the theme’s `/i18n` directory.
+defaultContentLanguage = 'en'
+
+# Renders the default content language in subdir, e.g. /. The root directory / will redirect to /
+defaultContentLanguageInSubdir = 'true'
+
+relativeURLs = 'true'
+
+disableKinds = ['taxonomy', 'term']
+
+[markup.goldmark.renderer]
+unsafe = true
+
+[outputs]
+home = ['HTML']
+
+[languages]
+  [languages.en]
+    contentDir = 'i18n/en'
+    weight = 1
+    [languages.en.params]
+      languageName = 'english'
+      languageNameShort = 'en'
+  [languages.fr]
+    contentDir = 'i18n/fr'
+    weight = 2
+    [languages.fr.params]
+      languageName = 'français'
+      languageNameShort = 'fr'

netlify.toml

@@ -0,0 +1,42 @@
+[build]
+publish = "public"
+command = "hugo --gc --minify"
+
+[context.production.environment]
+HUGO_VERSION = "0.93.3"
+HUGO_ENV = "production"
+HUGO_ENABLEGITINFO = "true"
+
+[context.split1]
+command = "hugo --gc --minify --enableGitInfo"
+
+[context.split1.environment]
+HUGO_VERSION = "0.93.3"
+HUGO_ENV = "production"
+
+[context.deploy-preview]
+command = "hugo --gc --minify --buildFuture -b $DEPLOY_PRIME_URL"
+
+[context.deploy-preview.environment]
+HUGO_VERSION = "0.93.3"
+
+[context.branch-deploy]
+command = "hugo --gc --minify -b $DEPLOY_PRIME_URL"
+
+[context.branch-deploy.environment]
+HUGO_VERSION = "0.93.3"
+
+[context.next.environment]
+HUGO_ENABLEGITINFO = "true"
+
+[[headers]]
+  for = "*.css"
+  [headers.values]
+    Cache-Control = "public, max-age=2592000"
+
+[[headers]]
+  for = "/*"
+  [headers.values]
+    X-Content-Type-Options = "nosniff"
+    X-Frame-Options = "DENY"
+    Content-Security-Policy = "base-uri 'self';"

src/screen.css → static/screen.css

@@ -152,6 +152,19 @@ a:focus {
 
 
 /* Utilities */
+.sr-only {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px); 
+  clip-path: inset(50%);  
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+  white-space: nowrap;            
+}
+
 .text-align-center {
   text-align: center;
 }
@@ -238,6 +251,36 @@ a:focus {
   margin-top: 0.5rem;
 }
 
+.lang {
+  position: absolute;
+  top: 1rem;
+  right: 1.5rem;
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+}
+.lang li {
+  display: inline-block;
+  margin: 0;
+  color: var(--color-gray-100);
+  font-size: 1rem;
+  text-transform: uppercase;
+}
+.lang li:not(:last-child)::after {
+  content: "";
+  border-right: 1px solid var(--color-gray-100);
+  padding-right: .5rem;
+  margin-right: .25rem;
+}
+.lang a {
+  display: inline-block;
+  margin: 0;
+  color: var(--color-red-100);
+}
+.lang a:hover, .lang a:focus{
+  background: none;
+}
+
 .summary {
   border: var(--border-thickness) solid var(--color-yellow-200);
   background-color: var(--color-yellow-100);
@@ -336,6 +379,16 @@ a:focus {
     color: var(--color-gray-800);
   }
 
+  .lang li {
+    color: var(--color-gray-800);
+  }
+  .lang li:not(:last-child)::after {
+    border-right-color: var(--color-gray-800);
+  }
+  .lang a {
+    color: var(--color-red-900);
+  }
+
   .conformance-quote {
     background-color: var(--color-gray-800);
   }