feat: add language switcher and update localization files

Author: Lemon73-Computing

assets/css/main.css

@@ -23,8 +23,14 @@
 /* ## IMPORT FONTS (END) ## */
 
 
-/* ## THEME COLORS ## */
 :root {
+  --default-fonts: "IBM Plex Sans JP", "IBM Plex Sans",
+                   "Noto Sans Japanese", "Noto Sans",
+                   "Ubuntu", "Roboto", Sans;
+  font-family: var(--default-fonts);
+  margin: 0 5%;
+
+  /* ## THEME COLORS ## */
   @media (prefers-color-scheme: light) {
     --fonts-color: #2f2f2f;
     --background-color: #ffffff;
@@ -34,7 +40,6 @@
     --info-card-color: transparent;
     --info-card-border: var(--fonts-color);
 
-    /* --svg-color: invert(16%) sepia(5%) saturate(17%) hue-rotate(316deg) brightness(96%) contrast(91%); */
     --svg-color: brightness(1) invert(0);
     --link-youtube: #e64553;
     --link-misskey: #40a02b;
@@ -52,30 +57,19 @@
     --info-card-color: #131820;
     --info-card-border: transparent;
 
-    /* --svg-color: invert(100%) sepia(1%) saturate(7500%) hue-rotate(268deg) brightness(102%) contrast(101%); */
     --svg-color: brightness(0) invert(1);
     --link-youtube: #f38ba8;
     --link-misskey: #a6e3a1;
     --link-github: #bac2de;
     --link-contact: #89b4fa;
   }
-}
-
-/* ## THEME COLORS (END) ## */
-
-:root {
-  --default-fonts: "IBM Plex Sans JP", "IBM Plex Sans",
-                   "Noto Sans Japanese", "Noto Sans",
-                   "Ubuntu", "Roboto", Sans;
-  font-family: var(--default-fonts);
-  margin: 0 5%;
+  /* ## THEME COLORS (END) ## */
 }
 
 body {
+  color: var(--fonts-color);
   background-color: var(--background-color);
 
-  color: var(--fonts-color);
-  /* font-family: sans-serif; */
   line-height: 1.5;
   margin: 0 auto;
   max-width: 768px;
@@ -97,8 +91,8 @@ a {
   word-break: break-all;
 }
 
-/* color when we touch URL in smartphone */
 a:active {
+  /* color when we touch URL in smartphone */
   -webkit-tap-highlight-color: transparent;
 }
 
@@ -274,7 +268,7 @@ header {
   }
 }
 
-header ul {
+#menu-header ul {
   list-style: none;
   padding: 0 5%;
   display: flex;
@@ -293,13 +287,15 @@ header ul {
   }
 }
 
+#select-lang {
+  padding: 2px 10%;
+}
 /* End: Header */
 
 /* Search Page */
 form {
   display: flex;
   justify-content: center;
-
 }
 
 input {
@@ -334,13 +330,6 @@ button img {
   vertical-align: middle;
 }
 
-/* 
-.card {
-  background-color: var(--info-card-color);
-  border-radius: 20px;
-}
-*/
-
 .small {
   color: var(--fonts-color);
 }

i18n/en.yaml

@@ -22,3 +22,6 @@ search-type-here:
   other: "Type here to search"
 # search-no-results:
 #   other: "No results found."
+
+lang_select_title:
+  other: "Other languages"

i18n/ja.yaml

@@ -22,3 +22,6 @@ search-type-here:
   other: "検索内容を入力してください"
 # search-no-results:
 #   other: "結果が見つかりませんでした。"
+
+lang_select_title:
+  other: "その他の言語"

layouts/partials/language-switcher.html

@@ -0,0 +1,16 @@
+<p id="select-lang">{{ i18n "lang_select_title" }}:</p>
+<nav class="language-selector layout__language-selector">
+  <ul class="navbar">
+    {{ if .IsTranslated -}}
+      {{ range .Translations }}
+      <li><a rel="alternate" href="{{ .RelPermalink }}" hreflang="{{ .Lang }}" lang="{{ .Lang }}">{{ .Language.LanguageName }}</a></li>
+      {{ end -}}
+    {{ else -}}
+      {{ range .Site.Languages -}}
+        {{ if ne $.Site.Language.Lang .Lang }}
+        <li><a rel="alternate" href="{{ .Lang | relURL }}" hreflang="{{ .Lang }}" lang="{{ .Lang }}">{{ .LanguageName }}</a></li>
+        {{ end -}}
+      {{ end -}}
+    {{ end -}}
+  </ul>
+</nav>

layouts/partials/menu.html

@@ -15,6 +15,7 @@
     <ul>
       {{- partial "inline/menu/walk.html" (dict "page" $page "menuEntries" .) }}
     </ul>
+    {{- partial "language-switcher.html" $page }}
   </nav>
 {{- end }}