Added a language selector.

i18n/en.toml

@@ -39,3 +39,45 @@ other = "on"
 
 [string_recent_content]
 other = "Recent content"
+
+[contact_js]
+other = "You must have Javascript enabled to use this contact form."
+
+[contact_submitted]
+other = "Your message was sent."
+
+[contact_error]
+other = "There was an error sending the message."
+
+[contact_name]
+other = "Name"
+
+[contact_name_placeholder]
+other = "Your name"
+
+[contact_mail]
+other = "E-mail address"
+
+[contact_mail_placeholder]
+other = "Your e-mail address"
+
+[contact_subject]
+other = "Subject"
+
+[contact_subject_placeholder]
+other = "A short subject"
+
+[contact_message]
+other = "Message"
+
+[contact_message_placeholder]
+other = "The messages goes here…"
+
+[contact_submit]
+other = "Send message"
+
+[contact_honypot]
+other = "Skip if you are a human"
+
+[lang_select_title]
+other = "Language selector"

i18n/sv.toml

@@ -39,3 +39,45 @@ other = "på"
 
 [string_recent_content]
 other = "Senaste innehåll"
+
+[contact_js]
+other = "Du behöver ha Javascript aktiverat för att använda detta kontaktformulär."
+
+[contact_submitted]
+other = "Ditt meddelande har skickats."
+
+[contact_error]
+other = "Det blev ett fel när meddelandet skickades."
+
+[contact_name]
+other = "Namn"
+
+[contact_name_placeholder]
+other = "Ditt namn"
+
+[contact_mail]
+other = "E-postadress"
+
+[contact_mail_placeholder]
+other = "Din e-postadress"
+
+[contact_subject]
+other = "Rubrik"
+
+[contact_subject_placeholder]
+other = "En kort rubrik"
+
+[contact_message]
+other = "Meddelande"
+
+[contact_message_placeholder]
+other = "Meddelandet skrivs här…"
+
+[contact_submit]
+other = "Skicka meddelande"
+
+[contact_honypot]
+other = "Hoppa över ifall du är människa."
+
+[lang_select_title]
+other = "Språkväljare"

layouts/_default/baseof.html

@@ -14,11 +14,14 @@
 <body>
 <div class="page layout__page{{ if $.Param "sidebar" | default true }} layout__sidebar-second{{ end }}">
 <header class="header layout__header" role="banner">
-{{ if $.Param "logo" | default true }}<a href="{{ "/" | relURL }}" title="Home" rel="home" class="header__logo"><img src="{{ "/images/logo.png" | relURL }}" alt="Home" class="header__logo-image"></a>{{ end }}
+{{ if $.Param "logo" | default true }}<a href="{{ "/" | relLangURL }}" title="Home" rel="home" class="header__logo"><img src="{{ "/images/logo.png" | relURL }}" alt="Home" class="header__logo-image"></a>{{ end }}
 <h1 class="header__site-name">
-<a href="{{ "/" | relURL }}" title="Home" class="header__site-link" rel="home"><span>{{ .Site.Title }}</span></a>
+<a href="{{ "/" | relLangURL }}" title="Home" class="header__site-link" rel="home"><span>{{ .Site.Title }}</span></a>
 </h1>
-<div class="region header__region">{{ if $.Param "search" }}{{ partialCached "search.html" . }}{{ end }}</div>
+<div class="region header__region">
+{{ if .Site.IsMultiLingual }}{{ partial "language-selector.html" . }}{{ end }}
+{{ if $.Param "search" }}{{ partialCached "search.html" . }}{{ end }}
+</div>
 </header>
 
 {{ partial "menu.html" . }}

layouts/partials/language-selector.html

@@ -0,0 +1,21 @@
+<h2 class="visually-hidden">{{ i18n "lang_select_title" }}</h2>
+<nav class="language-selector layout__language-selector" role="navigation">
+<ul class="navbar">
+
+{{ if .IsTranslated -}}
+{{ range .Translations }}
+<li><a rel="alternate" href="{{ .RelPermalink }}" hreflang="{{ .Lang }}" lang="{{ .Lang }}">{{ .Site.Language.Params.LanguageName }}</a></li>
+{{ end -}}
+
+{{ else -}}
+
+{{ range .Site.Languages -}}
+{{ if ne $.Site.Language.Lang .Lang }}
+<li><a rel="alternate" href="/{{ .Lang }}" hreflang="{{ .Lang }}" lang="{{ .Lang }}">{{ .Params.LanguageName }}</a></li>
+{{ end -}}
+{{ end -}}
+
+
+{{ end -}}
+</ul>
+</nav>

layouts/partials/menu.html

@@ -1,4 +1,4 @@
-{{ $home := relURL "/" }}
+{{ $home := relLangURL "/" }}
 {{ $currentSection := .Section }}
 {{ $currentID := .UniqueID }}
 <nav class="main-menu layout__navigation" role="navigation">

sass/_zen.scss

@@ -47,6 +47,7 @@ figcaption {
   }
 }
 
+.language-selector,
 article > header,
 .content-dates,
 .footer {
@@ -282,6 +283,25 @@ figcaption {
   @include type-layout(l, 1);
 }
 
+// Language selector
+
+.language-selector {
+  position: relative;
+  padding-left: 32px;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    background-image: url('../images/language-icon.png');
+    background-size: 24px;
+    background-repeat: no-repeat;
+    height: 24px;
+    width: 24px;
+  }
+}
+
 // Form
 
 .content {

sass/navigation/mobile/_mobile.scss

@@ -69,6 +69,11 @@
   transform: translateX(100vw);
   z-index: 21;
 
+  a {
+    color: color(text-bg);
+    text-decoration: none;
+  }
+
   .js-nav-open & {
     pointer-events: auto;
     box-shadow: -10px 0 10px -10px color(nearblack);
@@ -84,11 +89,6 @@
     li {
       list-style-type: none;
       margin: .4rem 0;
-
-      a {
-        color: color('white');
-        text-decoration: none;
-      }
     }
   }
 }