Add language flags

config.yml

@@ -6,10 +6,8 @@ theme: custom
 defaultContentLanguage: fr
 defaultContentLanguageInSubdir: true
 languages:
-  fr:
-    languageName: Français
-  en:
-    languageName: English
+  fr: {}
+  en: {}
 
 # Disables warnings
 disableKinds:

themes/custom/layouts/_default/baseof.html

@@ -62,16 +62,18 @@
           </a>
           {{- end }}
 
-          <!-- Translations -->
-          {{ range $.Page.Translations }}
-          <a href="{{ .Permalink }}" class="navbar-item">{{ .Language.LanguageName }}</a>
-          {{ end }}
-  
           <!-- Search -->
           <div class="navbar-item control">
             <input class="input is-small has-background-grey-darker" id="autoComplete" type="search"
               placeholder="{{ i18n "search" }}">
           </div>
+
+          <!-- Translations -->
+          {{ range $.Page.Translations }}
+          <a href="{{ .Permalink }}" class="navbar-item">
+            <img src="{{ printf "images/%s_lang.svg" .Language | relURL }}" width="32" alt="{{ .Language }}"/>
+          </a>
+          {{ end }}
         </div>
       </div>
     </div>

themes/custom/static/images/en_lang.svg

@@ -0,0 +1,61 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1300" height="650">
+<defs>
+<polygon id="pt" points="-0.1624598481164531,0 0,-0.5 0.1624598481164531,0" transform="scale(0.0616)" fill="#FFF"/>
+<g id="star">
+	<use xlink:href="#pt" transform="rotate(-144)"/>
+	<use xlink:href="#pt" transform="rotate(-72)"/>
+	<use xlink:href="#pt"/>
+	<use xlink:href="#pt" transform="rotate(72)"/>
+	<use xlink:href="#pt" transform="rotate(144)"/>
+</g>
+<g id="s5">
+	<use xlink:href="#star" x="-0.252"/>
+	<use xlink:href="#star" x="-0.126"/>
+	<use xlink:href="#star"/>
+	<use xlink:href="#star" x="0.126"/>
+	<use xlink:href="#star" x="0.252"/>
+</g>
+<g id="s6">
+	<use xlink:href="#s5" x="-0.063"/>
+	<use xlink:href="#star" x="0.315"/>
+</g>
+<g id="x4">
+	<use xlink:href="#s6"/>
+	<use xlink:href="#s5" y="0.054"/>
+	<use xlink:href="#s6" y="0.108"/>
+	<use xlink:href="#s5" y="0.162"/>
+</g>
+<g id="u">
+	<use xlink:href="#x4" y="-0.216"/>
+	<use xlink:href="#x4"/>
+	<use xlink:href="#s6" y="0.216"/>
+</g>
+<rect id="stripe" width="1300" height="50" fill="#B22234"/>
+</defs>
+<rect width="1300" height="650" fill="#FFF"/>
+<use xlink:href="#stripe"/>
+<use xlink:href="#stripe" y="100"/>
+<use xlink:href="#stripe" y="200"/>
+<use xlink:href="#stripe" y="300"/>
+<use xlink:href="#stripe" y="400"/>
+<use xlink:href="#stripe" y="500"/>
+<use xlink:href="#stripe" y="600"/>
+<rect width="494" height="350" fill="#3C3B6E"/>
+<use xlink:href="#u" transform="translate(247,175) scale(650)"/>
+<svg viewBox="0 0 60 30" width="1300" height="650">
+	<clipPath id="t">
+		<path d="M30,15L60,30V15H0V30H30z"/>
+	</clipPath>
+	<clipPath id="uk">
+		<path d="M0,30H60V0z"/>
+	</clipPath>
+	<g clip-path="url(#uk)">
+		<path d="M0,0 v30 h60 v-30 z" fill="#00247d"/>
+		<path d="M0,0 L60,30 M60,0 L0,30" stroke="#fff" stroke-width="6"/>
+		<path d="M0,30 L30,15 L60,30" clip-path="url(#t)" fill="none" stroke="#cf142b" stroke-width="4"/>
+		<path d="M30,0 v30 M0,15 h60" stroke="#fff" stroke-width="10"/>
+		<path d="M30,0 v30 M0,15 h60" stroke="#cf142b" stroke-width="6"/>
+	</g>
+</svg>
+</svg>

themes/custom/static/images/fr_lang.svg

@@ -0,0 +1,3 @@
+<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="900" height="600"><rect width="900" height="600" fill="#ED2939"/><rect width="600" height="600" fill="#fff"/><rect width="300" height="600" fill="#002395"/></svg>