Stop offending people with flags.

The icon that we use is from http://www.languageicon.org/ and released
under a CC license.

4 files changed, 63 insertions, 7 deletions

diff --git a/common/navigation.j2.inc b/common/navigation.j2.inc
index a1656721..4fb8dfdf 100644
--- a/common/navigation.j2.inc
+++ b/common/navigation.j2.inc
@@ -17,27 +17,27 @@
         </ul>
       </li>
     </ul>
-    <ul class="nav navbar-right navbar-form">
+    <ul class="nav navbar-right">
       <li>
         <button class="btn btn-dark dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
-          <img src="{{ url('images/'+lang+'.png') }}" alt="{{lang}}" />
+          <img  src="{{ url('images/languageicon.svg') }}" height="35" alt="[{{lang}}]" /> {{ lang_full }} [{{ lang }}]
           <span class="caret"></span>
         </button>
         <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
           <li>
-           <a href="{{ self_localized('en') }}"><img src="{{ url('images/gb.png') }}" height="15" width="23" alt="English"> English</a>
+           <a href="{{ self_localized('en') }}">English [en]</a>
           </li>
           <li>
-           <a href="{{ self_localized('de') }}"><img src="{{ url('images/de.png') }}" height="15" width="25" alt="Deutsch"> Deutsch</a>
+           <a href="{{ self_localized('de') }}">Deutsch [de]</a>
           </li>
           <li>
-           <a href="{{ self_localized('fr') }}"><img src="{{ url('images/fr.png') }}" height="15" width="22" alt="Français"> Français</a>
+           <a href="{{ self_localized('fr') }}">Français [fr]</a>
           </li>
           <li>
-           <a href="{{ self_localized('it') }}"><img src="{{ url('images/it.png') }}" height="15" width="22" alt="Italiano"> Italiano</a>
+           <a href="{{ self_localized('it') }}">Italiano [it]</a>
           </li>
           <li>
-           <a href="{{ self_localized('es') }}"><img src="{{ url('images/es.png') }}" height="15" width="23" alt="Español"> Español</a>
+           <a href="{{ self_localized('es') }}">Español [es]</a>
           </li>
         </ul>
       </li>
diff --git a/images/languageicon.svg b/images/languageicon.svg
new file mode 100644
index 00000000..22d58da6
--- /dev/null
+++ b/images/languageicon.svg
@@ -0,0 +1,48 @@
+<?xml version="1.0" encoding="utf-8"?>

+<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->

+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"

+	 viewBox="0 0 2411.2 2794" style="enable-background:new 0 0 2411.2 2794;" xml:space="preserve">

+<style type="text/css">

+	.st0{fill:#FFFFFF;}

+	.st1{fill-rule:evenodd;clip-rule:evenodd;}

+	.st2{fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;}

+</style>

+<g id="Layer_2">

+</g>

+<g id="Layer_x5F_1_x5F_1">

+	<g>

+		<polygon points="1204.6,359.2 271.8,30 271.8,2060.1 1204.6,1758.3 		"/>

+		<polygon class="st0" points="1182.2,358.1 2150.6,29 2150.6,2059 1182.2,1757.3 		"/>

+		<polygon class="st0" points="30,2415.4 1182.2,2031.4 1182.2,357.9 30,742 		"/>

+		<polygon points="1707.2,2440.7 1870.5,2709.4 1956.6,2459.8 		"/>

+		<g>

+			<path d="M421.7,934.8c-6.1-6,8,49.1,27.6,68.9c34.8,35.1,61.9,39.6,76.4,40.2c32,1.3,71.5-8,94.9-17.8

+				c22.7-9.7,62.4-30,77.5-59.6c3.2-6.3,11.9-17,6.4-43.2c-4.2-20.2-17-27.3-32.7-26.2c-15.7,1.1-63.2,13.7-86.1,20.8

+				c-23,7-70.3,21.4-90.9,25.8C474.3,948.2,429,941.7,421.7,934.8z"/>

+			<path d="M1003.1,1593.7c-9.1-3.3-196.9-81.1-223.6-93.9c-21.8-10.5-75.2-33.1-100.4-43.3c70.8-109.2,115.5-191.6,121.5-204.1

+				c11-23,86-169.6,87.7-178.7c1.7-9.1,3.8-42.9,2.2-51c-1.7-8.2-29.1,7.6-66.4,20.2c-37.4,12.6-108.4,58.8-135.8,64.6

+				c-27.5,5.7-115.5,39.1-160.5,54c-45,14.9-130.2,40.9-165.2,50.4c-35.1,9.5-65.7,10.2-85.3,16.2c0,0,2.6,27.5,7.8,35.7

+				c5.2,8.2,23.7,28.4,45.3,34.1c21.6,5.7,57.3,3.4,73.6-0.3c16.3-3.8,44.4-17.5,48.2-23.6c3.8-6.1-2-24.9,4.5-30.6

+				c6.5-5.6,92.2-25.7,124.6-35.4c32.4-10,156.3-52.6,173.1-50.5c-5.3,17.7-105,215.1-137.1,274c-32.1,58.9-218.6,318-258.3,363.6

+				c-30.1,34.7-103.2,123.5-128.5,143.6c6.4,1.8,51.6-2.1,59.9-7.2c51.3-31.6,136.9-138.1,164.4-170.5

+				c81.9-96,153.8-196.8,210.8-283.4h0.1c11.1,4.6,100.9,77.8,124.4,94c23.4,16.2,115.9,67.8,136,76.4c20,8.7,97.1,44.2,100.3,32.2

+				C1029.4,1668,1012.2,1597.1,1003.1,1593.7z"/>

+		</g>

+		<path class="st1" d="M569,2572c18,11,35,20,54,29c38,19,81,39,122,54c56,21,112,38,168,51c31,7,65,13,98,18c3,0,92,11,110,11h90

+			c35-3,68-5,103-10c28-4,59-9,89-16c22-5,45-10,67-17c21-6,45-14,68-22c15-5,31-12,47-18c13-6,29-13,44-19c18-8,39-19,59-29

+			c16-8,34-18,51-28c13-7,43-30,59-30c18,0,30,16,30,30c0,29-39,38-57,51c-19,13-42,23-62,34c-40,21-81,39-120,54

+			c-51,19-107,37-157,49c-19,4-38,9-57,12c-10,2-114,18-143,18h-132c-35-3-72-7-107-12c-31-5-64-11-95-18c-24-5-50-12-73-19

+			c-40-11-79-25-117-40c-69-26-141-60-209-105c-12-8-13-16-13-25c0-15,11-29,29-29C531,2546,563,2569,569,2572z"/>

+		<path class="st1" d="M1151,2009L61,2372V764l1090-363V2009z M1212,354v1680c-1,5-3,10-7,15c-2,3-6,7-9,8c-25,10-1151,388-1166,388

+			c-12,0-23-8-29-21c0-1-1-2-1-4V739c2-5,3-12,7-16c8-11,22-13,31-16c17-6,1126-378,1142-378C1190,329,1212,336,1212,354z"/>

+		<path class="st1" d="M2120,2017l-907-282V380l907-308V2017z M2181,32v2023c-1,23-17,33-32,33c-13,0-107-32-123-37

+			c-126-39-253-78-378-117c-28-9-57-18-84-27c-24-7-50-15-74-23c-107-33-216-66-323-102c-4-1-14-15-14-18V351c2-5,4-11,9-15

+			c8-9,351-123,486-168c36-13,487-168,501-168C2167,0,2181,13,2181,32z"/>

+		<polygon points="2411.2,2440.7 1199.5,2054.5 1204.6,373.2 2411.2,757.2 		"/>

+		<g>

+			<path class="st2" d="M1800.3,1124.6L1681.4,1412l218.6,66.3L1800.3,1124.6z M1729,853.2l156.1,47.3l284.4,1025l-160.3-48.7

+				l-57.6-210.4L1620.2,1566l-71.3,171.4l-160.4-48.7L1729,853.2z"/>

+		</g>

+	</g>

+</g>

+</svg>

diff --git a/styles.css b/styles.css
index 2dd48d9b..4f2a806b 100644
--- a/styles.css
+++ b/styles.css
@@ -125,3 +125,8 @@ footer {
 .cushion-below {
   padding-bottom: 2em;
 }
+
+.invert {
+  -webkit-filter: invert(100%);
+  filter: invert(100%);
+}
diff --git a/template.py b/template.py
index 059bca5d..450bd3db 100755
--- a/template.py
+++ b/template.py
@@ -25,6 +25,8 @@ env = jinja2.Environment(loader=jinja2.FileSystemLoader(os.path.dirname(__file__
                          undefined=jinja2.StrictUndefined,
                          autoescape=False)
 
+langs_full = {"en": "English", "fr": "Français", "it": "Italiano", "es": "Español", "de": "Deutsch"}
+
 for in_file in glob.glob("*.j2"):
     name, ext = re.match(r"(.*)\.([^.]+)$", in_file.rstrip(".j2")).groups()
     tmpl = env.get_template(in_file)
@@ -57,6 +59,7 @@ for in_file in glob.glob("*.j2"):
 
         content = tmpl.render(
                 lang=locale,
+                lang_full=langs_full[locale],
                 url=url,
                 self_localized=self_localized,
                 url_localized=url_localized,