implement language switch function + header improvements + accessibility optimization

hugo.toml

@@ -18,7 +18,9 @@ defaultContentLanguage = 'de'
     description = ""
     tags = ""
     author = "Michi von Ah"
-    faviconPath = ""
+    legalLink = "https://legal.michivonah.ch"
+    faviconPath = "assets/logo/favicon_256.png"
+    faviconPathSVG = "assets/logo/logo_black.svg"
     themeColor = "#3498db"
     twitterUsername = "@michivonah"
     umamiUrl = "https://data.mchvnh.ch/script.js"

i18n/de.toml

@@ -7,3 +7,6 @@ blog = 'Blog'
 contact = 'Kontakt'
 logo = 'Logo'
 gotop = 'Nach oben!'
+godown = 'Nach unten!'
+language = 'Sprache'
+select-language = 'Sprache auswählen'

i18n/en.toml

@@ -7,3 +7,6 @@ blog = 'Blog'
 contact = 'Contact'
 logo = 'Logo'
 gotop = 'Go to top'
+godown = 'Scroll down!'
+language = 'Language'
+select-language = 'Select language'

layouts/partials/footer.html

@@ -1,7 +1,7 @@
 <div class="footer">
     <div class="footer-part">
         <p>&#169; {{ dateFormat "2006" now }}</p>
-        <a href="#" alt='{{ T "legal" }}' title='{{ T "legal" }}'>{{ T "legal" }}</a>
+        <a href="{{ .Site.Params.legalLink }}" alt='{{ T "legal" }}' title='{{ T "legal" }}'>{{ T "legal" }}</a>
         <div class="sm-icons">
             {{ range .Site.Data.socialmedia }}
                 {{ if .footer }}
@@ -11,9 +11,9 @@
         </div>
     </div>
     <div class="footer-part">
-        <select>
+        <select class="language-selector" alt='{{ T "language" }}' title='{{ T "language" }}' name="language">
             {{ range $.Site.Home.AllTranslations }}
-                <option>{{ .Language.LanguageName }}</option>
+                <option value="{{ .Permalink }}" {{ if eq $.Site.Language.Lang .Lang }}selected{{ end }}>{{ .Language.LanguageName }}</option>
             {{ end }}
         </select>
     </div>

layouts/partials/header.html

@@ -5,18 +5,16 @@
     <meta name="mobile-web-app-title" content="{{ .Site.Title }}">
     <meta name="apple-mobile-web-app-title" content="{{ .Site.Title }}">
     <link id="favicon" rel="icon" type="image/png" href="{{ .Site.Params.faviconPath | relURL }}">
-    <link rel="icon" type="image/svg+xml" href="assets/logo/logo_black.svg">
+    <link rel="icon" type="image/svg+xml" href="{{ .Site.Params.faviconPathSVG | relURL }}">
     <link rel="shortcut icon" type="image/png" href="{{ .Site.Params.faviconPath | relURL }}">
     <link rel="apple-touch-icon" href="{{ .Site.Params.faviconPath | relURL }}">
     <link rel="apple-touch-icon" sizes="152x152" href="{{ .Site.Params.faviconPath | relURL }}">
     <link rel="apple-touch-icon" sizes="180x180" href="{{ .Site.Params.faviconPath | relURL }}">
     <link rel="apple-touch-icon" sizes="167x167" href="{{ .Site.Params.faviconPath | relURL }}">
     <link rel="canonical" href="{{ .Site.BaseURL }}">
-    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js" async></script>
     <script src='{{ "/akar-icons-fonts/src/index.js" | relURL }}'></script>
     <script src='{{ "/main.js" | absURL }}' defer></script>
     <link rel="stylesheet" type="text/css" href='{{ "/style.css" | absURL }}' media="screen"/>
-    <link rel="stylesheet" type="text/css" href="https://unpkg.com/aos@2.3.1/dist/aos.css" media="screen"/>
     <meta charset="UTF-8">
     <meta name="description" content="{{ .Site.Params.description }}">
     <meta name="keywords" content="{{ .Site.Params.tags }}">
@@ -41,10 +39,7 @@
     <meta name="theme-color" content="{{ .Site.Params.themeColor }}">
     <meta name="mobile-web-app-status-bar-style" content="{{ .Site.Params.themeColor }}">
     <meta name="apple-mobile-web-app-status-bar-style" content="{{ .Site.Params.themeColor }}">
-    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <meta name="mobile-web-app-capable" content="yes">
-    <meta name="apple-mobile-web-app-capable" content="yes">
-    <link rel="manifest" href='{{ "manifest.json" | absURL }}'>
     <!-- <script defer src="{{ .Site.Params.umamiUrl }}" data-website-id="{{ .Site.Params.websiteId }}"></script> -->
 
 </head>

layouts/partials/hero.html

@@ -18,5 +18,5 @@
     {{ with .Site.Home.Params.slogan }}
         <p>{{ . }}</p>
     {{ end }}
-    <a href="#about"><i class="ai-chevron-down"></i></a>
+    <a href="#about" alt='{{ T "godown" }}' title='{{ T "godown" }}'><i class="ai-chevron-down"></i></a>
 </div>

static/main.js

@@ -3,6 +3,12 @@ document.addEventListener('DOMContentLoaded', function(){
     scrollTopVisibilityUpdate();
     updateNavStyle();
     calculateAge(".age");
+
+    // add eventlistener to language selector
+    const languageSelector = document.querySelector(".language-selector");
+    languageSelector.addEventListener('change', function(){
+        window.location.href = languageSelector.value + window.location.hash;
+    });
 });
 
 window.addEventListener('scroll', function(){
@@ -68,12 +74,12 @@ const observer = new IntersectionObserver(entries => {
   
       actionObject.classList.remove('typewriter-animation');
     });
-  });
+});
   
-  observer.observe(document.querySelector('.contact-title-wrapper'));
+observer.observe(document.querySelector('.contact-title-wrapper'));
 
-  // calculate age
+// calculate age
-  function calculateAge(selector){
+function calculateAge(selector){
     const obj = document.querySelector(selector);
     const birthdate = obj.getAttribute("data-birthdate").split(",");
     const birth = new Date(birthdate[2], birthdate[1] - 1, birthdate[0]);
@@ -88,4 +94,4 @@ const observer = new IntersectionObserver(entries => {
     }
 
     obj.textContent = age;
-  }
+}

static/style.css

@@ -80,8 +80,10 @@ nav.small img{
     position: relative;
 }
 
-.nav-links a:hover, nav a:focus{
+.nav-links a:hover,
+.nav-links a:focus{
     text-decoration: none;
+    outline: none;
 }
 
 .nav-links a:not(:last-child)::after{
@@ -97,7 +99,8 @@ nav.small img{
     transform: scaleX(0);
 }
 
-.nav-links a:not(:last-child):hover::after{
+.nav-links a:not(:last-child):hover::after,
+.nav-links a:not(:last-child):focus::after{
     transform: scaleX(0.5);
 }
 
@@ -115,11 +118,13 @@ nav.small .nav-links a:last-child{
     color: var(--primary);
 }
 
-.nav-links a:last-child:hover{
+.nav-links a:last-child:hover,
+.nav-links a:last-child:focus{
     background: var(--secondary);
 }
 
-nav.small .nav-links a:last-child:hover{
+nav.small .nav-links a:last-child:hover,
+nav.small .nav-links a:last-child:focus{
     background: var(--secondary);
     color: var(--color);
 }
@@ -269,7 +274,8 @@ nav.small .nav-links a:last-child:hover{
     animation: scrollHint 2000ms infinite;
 }
 
-.hero a:hover{
+.hero a:hover,
+.hero a:focus{
     filter: drop-shadow(0 0 1.1rem var(--primary));
 }
 
@@ -328,8 +334,10 @@ nav.small .nav-links a:last-child:hover{
     transition: var(--baseTransition);
 }
 
-.about a:hover{
+.about a:hover,
+.about a:focus{
     background: var(--primary);
+    outline: none;
 }
 
 .about var{
@@ -349,7 +357,9 @@ nav.small .nav-links a:last-child:hover{
     align-content: flex-start;
     align-items: baseline;
     flex-wrap: wrap;
+    -webkit-user-select: none;
     user-select: none;
+    
 }
 
 .tag{
@@ -575,11 +585,13 @@ nav.small .nav-links a:last-child:hover{
     transition: var(--baseTransition);
 }
 
-.contact a:hover{
+.contact a:hover,
+.contact a:focus{
     margin: 10px 20px;
     color: var(--color);
     text-decoration: none;
     transform: scale(1.8);
+    outline: none;
 }
 
 /* SCROLL TOP */
@@ -666,17 +678,21 @@ nav.small .nav-links a:last-child:hover{
     transition: var(--baseTransition);
 }
 
-.footer a:hover{
+.footer a:hover,
+.footer a:focus{
     color: var(--color);
     text-decoration: none;
+    outline: none;
 }
 
 @media (pointer: fine){
-    .footer a:hover:has(i){
+    .footer a:hover:has(i),
+    .footer a:focus:has(i){
         transform: scale(1.4);
     }
     
-    .footer a:hover:not(:has(i)){
+    .footer a:hover:not(:has(i)),
+    .footer a:focus:not(:has(i)){
         transform: scale(1.1);
     }
 }