Added language switcher

drpayyne · May 25, 2020 · 7979617 · 7979617
1 parent bf55981
commit 7979617
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 8 deletions.
diff --git a/index.html b/index.html
@@ -5,13 +5,17 @@
         <meta name="description" content="Adarsh Manickam; Privacy & Pizza" />
         <meta charset="utf-8" />
         <link rel="canonical" href="https://manick.am" />
-        <link rel="alternate" href="https://manick.am/ta" hreflang="ta" />
         <link rel="alternate" href="https://manick.am/it" hreflang="it" />
+        <link rel="alternate" href="https://manick.am/ta" hreflang="ta" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <link rel="stylesheet" type="text/css" href="./styles.css" />
     </head>
     <body>
         <div class="container">
+            <div class="language-switcher">
+                <div class="language-container"><a href="ta">தமிழ்</a></div>
+                <div class="language-container"><a href="it">italiano</a></div>
+            </div>
             <span class="text">Welcome to</span>
             <div class="link-container">
                 <a class="link" href="#">manick.am</a>

diff --git a/it/index.html b/it/index.html
@@ -2,16 +2,20 @@
 <html lang="it">
     <head>
         <title>Adarsh Manickam</title>
-        <meta name="description" content="Adarsh Manickam; Privacy & Pizza" />
+        <meta name="description" content="Adarsh Manickam; Privacy a Pizza" />
         <meta charset="utf-8" />
         <link rel="canonical" href="https://manick.am/it" />
-        <link rel="alternate" href="https://manick.am/ta" hreflang="ta" />
         <link rel="alternate" href="https://manick.am" hreflang="en" />
+        <link rel="alternate" href="https://manick.am/ta" hreflang="ta" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <link rel="stylesheet" type="text/css" href="../styles.css" />
     </head>
     <body>
         <div class="container">
+            <div class="language-switcher">
+                <div class="language-container"><a href="../ta">தமிழ்</a></div>
+                <div class="language-container"><a href="../">english</a></div>
+            </div>
             <span class="text">Benvenuti a</span>
             <div class="link-container">
                 <a class="link" href="#">manick.am</a>

diff --git a/styles.css b/styles.css
@@ -12,26 +12,59 @@ body,
 }
 
 .container {
-    font-family: sans-serif;
+    font-family: sans-serif, sans-serif;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     font-size: 2rem;
 }
 
+.language-switcher {
+    position: absolute;
+    top: 0;
+    right: 0;
+    display: flex;
+    justify-content: space-evenly;
+    width: 11rem;
+    height: 3rem;
+}
+
+.language-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 5rem;
+}
+
+.language-container a {
+    text-decoration: none;
+    color: black;
+    font-size: 1rem;
+    background-color: lightskyblue;
+    border-radius: 0.5rem;
+    width: 100%;
+    height: 1.4rem;
+    text-align: center;
+    line-height: 1.4rem;
+}
+
+a[href="ta"] {
+    font-weight: bold;
+}
+
 .link {
     display: block;
-    font-family: monospace;
+    font-family: monospace, monospace;
     font-size: 4rem;
     text-decoration: none;
     color: unset;
     border-right: 0.25rem solid lightskyblue;
     overflow: hidden;
     width: 0%;
     animation: typing 2.5s steps(9, start) forwards,
-        blinking-cursor 1s step-end 1,
-        blinking-cursor 0.28s step-start 8,
+    blinking-cursor 1s step-end 1,
+    blinking-cursor 0.28s step-start 8,
         blinking-cursor 1s step-end infinite;
     animation-delay: 1s, 0s, 1s, 3.5s;
 }
@@ -53,7 +86,8 @@ body,
 }
 
 @keyframes blinking-cursor {
-    from, to {
+    from,
+    to {
         border-color: transparent;
     }
     50% {

diff --git a/ta/index.html b/ta/index.html
@@ -12,6 +12,10 @@
     </head>
     <body>
         <div class="container">
+            <div class="language-switcher">
+                <div class="language-container"><a href="../">english</a></div>
+                <div class="language-container"><a href="../it">italiano</a></div>
+            </div>
             <div class="link-container">
                 <a class="link" href="#">manick.am</a>
             </div>