⚑ → Language list

assets/scss/main.scss

@@ -874,19 +874,6 @@ textarea {
    clip-path: ellipse(40% 25% at 50% 50%);
  }
 
- /* Flags */
-
- .flag-icon {
-   border: 0.02px solid black;
- }
-
- .flag-icon-en {
-   background-image: url(../flags/4x3/en.svg);
-   &.flag-icon-squared {
-     background-image: url(../flags/1x1/en.svg);
-   }
- }
-
  /* Share Button */
 
  .share-btn {
@@ -1223,7 +1210,7 @@ textarea {
    .flyout-menu {
      background-color: #fff;
      border-left: 1px solid rgba(160, 160, 160, 0.3);
-     height: calc(100vh - 3.5em);
+     height: 100%;
      margin-top: 3.5em;
      padding: 0;
      position: fixed;
@@ -1256,12 +1243,8 @@ textarea {
    display: flex;
    justify-content: space-between;
    .flyout-menu {
-     right: -183px;
-     width: 183px;
-     @include for-laptop-up {
-       right: -183px;
-       width: 183px;
-     }
+     right: -177px;
+     width: 177px;
      @include for-desktop-up {
        background-color: unset;
        border: none;
@@ -1372,7 +1355,6 @@ textarea {
      }
    }
    .lang-toggle {
-     width: 61px;
      &:hover {
        span {
          box-shadow: inset 0 0 0 100px rgba(46, 187, 170, .5);
@@ -1403,11 +1385,16 @@ textarea {
 
  #lang-menu {
    &.flyout-menu {
-     right: -61px;
-     width: 61px;
+     right: -177px;
+     width: 177px;
      a {
        border-left: 0;
      }
+     ul {
+      list-style-type: none;
+      padding: 0;
+      margin: 0;
+     }
      span {
        display: inline-block;
        font-size: 1.75em;
@@ -1421,6 +1408,10 @@ textarea {
          box-shadow: inset 0 0 0 100px rgba(46, 187, 170, .5);
        }
      }
+     .link {
+       border-bottom: dotted 1px rgba(160, 160, 160, 0.3);
+       display: block;
+      }
      .no-lang {
        cursor: not-allowed;
        opacity: .25;
@@ -1442,8 +1433,8 @@ textarea {
      justify-content: flex-start;
    }
    &.flyout-menu {
-     width: 183px;
-     right: -183px;
+     width: 177px;
+     right: -177px;
      padding: 1em;
      h1, a {
        margin: 0 .25em;

exampleSite/config.toml

@@ -140,12 +140,12 @@ disableLanguages        = [""]
 [Languages]
   # Each language has its own menu.
   [Languages.en]
-    languageCode        = "en"
+    LanguageCode        = "en"
     LanguageName        = "English"
     weight              = 1
 
   [Languages.de]
-    languageCode        = "de"
+    LanguageCode        = "de"
     LanguageName        = "Deutsch"
     title               = "Hugo Future Imperfect Slim auf deutsch"
     description         = "Ein Thema von HTML5 UP, portiert von Julio Pescador.  Vereinfacht und verbessert von Patrick Collins. Mehrsprachig von StatnMap. Unterstützt von: Hugo. "
@@ -182,7 +182,7 @@ disableLanguages        = [""]
       weight            = 6
 
   [Languages.fr]
-    languageCode        = "fr"
+    LanguageCode        = "fr"
     LanguageName        = "Français"
     title               = "Hugo Future Imperfect Slim en français"
     description         = "Un thème par HTML5 UP, porté par Julio Pescador. Simplifié et amélioré par Patrick Collins. Multilingue par StatnMap. Propulsé par Hugo."
@@ -219,9 +219,9 @@ disableLanguages        = [""]
       weight            = 6
 
   [Languages.pl]
-    languageCode        = "pl"
-    LanguageName        = "Polskie"
-    title               = "Hugo przyszłość niedoskonała"
+    LanguageCode        = "pl"
+    LanguageName        = "Polski"
+    title               = "Hugo Future Imperfect Slim po polsku"
     description         = "Motyw HTML5 UP, przeniesiony przez Julio Pescadora i wzbogacony przez Patricka Collinsa. Wielojęzyczny przez StatnMap. Zasilany przez Hugo."
     weight              = 2
 
@@ -256,7 +256,7 @@ disableLanguages        = [""]
       weight            = 6
 
   [Languages.pt]
-    languageCode        = "pt"
+    LanguageCode        = "pt"
     LanguageName        = "Português"
     title               = "Hugo Future Imperfect Slim em português"
     description         = "Um tema do HTML5 UP, portado por Julio Pescadora e reduzido por Patrick Collins. Multilíngue por StatnMap. Feito com Hugo."

exampleSite/resources/_gen/assets/scss/scss/main.scss_b5a97001882d870cddf46d3bce56b70e.json

@@ -1 +1 @@
-{"Target":"css/main.min.23afd7f8b5afb4794b8283807f9ba0681c4be2c45a9d16cf05ba5ea0d7cce5f6.css","MediaType":"text/css","Data":{"Integrity":"sha256-I6/X+LWvtHlLgoOAf5ugaBxL4sRanRbPBbpeoNfM5fY="}}
+{"Target":"css/main.min.1b31ef55024da14996b25283db21d8b249bf405d2c3c4da88ea3f262280698cf.css","MediaType":"text/css","Data":{"Integrity":"sha256-GzHvVQJNoUmWslKD2yHYskm/QF0sPE2ojqPyYigGmM8="}}

layouts/partials/head.html

@@ -12,7 +12,6 @@
     {{ if eq . "default" }}
       <link rel="stylesheet" href="{{ "css/normalize.css" | relURL}}">
       <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway:400,800,900|Source+Sans+Pro:400,700">
-      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/3.1.0/css/flag-icon.min.css">
       <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/academicons/1.8.6/css/academicons.min.css">
       <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.9.0/css/all.css" integrity="sha384-i1LQnF23gykqWXg6jxC2ZbCbUMxyw5gLZY6UiUS98LYV5unm8GWmfkIS6jqJfb4E" crossorigin="anonymous">
       <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.min.css" />

layouts/partials/language-menu.html

@@ -1,13 +1,13 @@
 <menu id="lang-menu" class="flyout-menu">
-  <a href="#" lang="{{ .Site.Language.Lang }}" class="active"><span class="flag-icon flag-icon-{{ .Site.Language.Lang }}" alt="{{ .Site.Language.Lang }}"></span></a>
+  <a href="#" lang="{{ .Site.Language.Lang }}" class="link active">{{ .Site.Language.LanguageName }} ({{ .Site.Language.Lang }})</a>
   {{ if .IsTranslated -}}
     {{ range .Translations }}
-        <a href="{{ .Permalink }}" lang="{{ .Lang }}"><span class="flag-icon flag-icon-{{ .Lang }}" alt="{{ .Lang }}"></span></a>
+      <a href="{{ .Permalink }}" lang="{{ .Lang }}" class="link">{{ .Language.LanguageName }} ({{ .Site.Language.Lang }})</a>
     {{ end }}
   {{ else }}
     {{ range .Site.Languages }}
       {{ if not (eq .Lang $.Site.Language.Lang) }}
-        <a href="{{ "" | relLangURL }}" lang="{{ .Lang }}" class="no-lang"><span class="flag-icon flag-icon-{{ .Lang }}" alt="{{ .Lang }}"></span></a>
+        <a href="{{ relURL .Lang }}" lang="{{ .Lang }}" class="no-lang link">{{ .LanguageName }} ({{ .Lang }})</a>
       {{ end }}
     {{ end }}
   {{ end }}

layouts/partials/site-header.html

@@ -27,7 +27,7 @@ <h1 class="nav-title">
     </menu>
     {{ if .Site.Params.header.searchMenu }}{{ partial "search-menu" . }}{{ end }}
     {{ if .Site.Params.header.shareMenu }}<a href="#share-menu" class="share-toggle"><i class="fas fa-share-alt fa-2x">&nbsp;</i></a>{{ end }}
-    {{ if .Site.Params.header.languageMenu }}<a href="#lang-menu" class="lang-toggle" lang="{{ .Site.Language.Lang }}"><span class="flag-icon flag-icon-{{ .Site.Language.Lang }}" alt="{{ .Site.Language.Lang }}"></span></a>{{ end }}
+    {{ if .Site.Params.header.languageMenu }}<a href="#lang-menu" class="lang-toggle" lang="{{ .Site.Language.Lang }}">{{ .Site.Language.Lang }}</a>{{ end }}
     <a href="#site-nav" class="nav-toggle"><i class="fas fa-bars fa-2x"></i></a>
   </nav>
   {{ if .Site.Params.header.languageMenu }}{{ partial "language-menu" . }}{{ end }}

layouts/partials/site-intro.html

@@ -14,4 +14,5 @@
       </ul>
     </footer>
   {{ end }}
+  <p>{{ .Site.Languages }}</p>
 </section>