Redesign the homepage and related pages with a quieter editorial layout.

Author: nassimessaidi

package-lock.json

@@ -9,6 +9,11 @@
     "validate": "html-validate 'dist/**/*.html'"
   },
   "dependencies": {
+    "@fontsource-variable/source-sans-3": "^5.3.0",
+    "@fontsource-variable/source-serif-4": "^5.3.0",
+    "@fontsource/ibm-plex-sans-arabic": "^5.3.0",
+    "@fontsource/ibm-plex-sans-hebrew": "^5.3.0",
+    "@fontsource/noto-naskh-arabic": "^5.3.0",
     "astro": "^6.3.3",
     "marked": "^17.0.2",
     "rehype-autolink-headings": "^7.1.0",

package.json

@@ -16,12 +16,13 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    width: 2rem;
-    height: 2rem;
-    padding: 0.3rem;
+    width: 2.75rem;
+    height: 2.75rem;
+    padding: 0;
     border-radius: 0.5rem;
+    border: 1px solid var(--pico-muted-border-color);
     color: var(--pico-muted-color, #888);
-    opacity: 0.6;
+    opacity: 0.8;
     text-decoration: none;
     transition: opacity 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
   }
@@ -31,6 +32,14 @@
     background-color: rgba(128, 128, 128, 0.08);
     color: var(--pico-color, inherit);
   }
+
+  :global([dir='rtl']) .back-arrow svg {
+    transform: scaleX(-1);
+  }
+
+  :global([dir='rtl']) .back-arrow:hover {
+    transform: translateX(2px);
+  }
   .back-arrow:focus-visible {
     outline: 2px solid currentColor;
     outline-offset: 2px;

src/components/BackArrow.astro

@@ -10,7 +10,7 @@
  *           (e.g. "cta/" for CTA page so entries link to /{locale}/cta/).
  *           For English ("en"), the root is "/" so "/cta/" is the result.
  */
-import { languages } from '../i18n/config';
+import { languages, isRtl } from '../i18n/config';
 
 interface Props {
   locale: string;
@@ -20,6 +20,7 @@ interface Props {
 const { locale, suffix = '' } = Astro.props;
 const currentLabel = languages[locale as keyof typeof languages]?.label ?? 'English';
 const entries = Object.entries(languages) as [string, { label: string; path: string }][];
+const menuId = `language-picker-${locale}-${suffix || 'home'}`.replace(/[^a-zA-Z0-9_-]/g, '-');
 
 // Build the URL for a given locale, honoring the suffix
 function localeHref(code: string, basePath: string): string {
@@ -30,19 +31,31 @@ function localeHref(code: string, basePath: string): string {
 ---
 
 <div class="lang-picker" data-current={locale}>
-  <button class="lang-picker-btn" type="button" aria-expanded="false">
-    <span class="lang-picker-globe">&#127760;</span>
+  <button class="lang-picker-btn" type="button" aria-expanded="false" aria-controls={menuId} aria-haspopup="true">
+    <svg class="lang-picker-globe" viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
+      <circle cx="12" cy="12" r="9"></circle>
+      <path d="M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18"></path>
+    </svg>
     <span class="lang-picker-label">{currentLabel}</span>
-    <span class="lang-picker-caret">&#9662;</span>
+    <span class="lang-picker-caret" aria-hidden="true">&#9662;</span>
   </button>
-  <div class="lang-picker-menu">
+  <ul id={menuId} class="lang-picker-menu" hidden>
     {entries.map(([code, { label, path }]) => (
-      <a href={localeHref(code, path)} data-lang={code} class:list={['lang-picker-item', code === locale && 'lang-current']}>
-        <span class="lang-picker-item-label">{label}</span>
-        {code === locale && <span class="lang-picker-check">&#10003;</span>}
-      </a>
+      <li>
+        <a
+          href={localeHref(code, path)}
+          data-lang={code}
+          lang={code}
+          dir={isRtl(code) ? 'rtl' : 'ltr'}
+          aria-current={code === locale ? 'page' : undefined}
+          class:list={['lang-picker-item', code === locale && 'lang-current']}
+        >
+          <span class="lang-picker-item-label">{label}</span>
+          {code === locale && <span class="lang-picker-check" aria-hidden="true">&#10003;</span>}
+        </a>
+      </li>
     ))}
-  </div>
+  </ul>
 </div>
 
 <script is:inline>
@@ -54,31 +67,79 @@ function localeHref(code: string, basePath: string): string {
  */
 (function() {
   document.querySelectorAll('.lang-picker-btn').forEach(function(btn) {
+    var menu = document.getElementById(btn.getAttribute('aria-controls'));
+    if (!menu) return;
+
+    function closeMenu(returnFocus) {
+      menu.hidden = true;
+      btn.setAttribute('aria-expanded', 'false');
+      if (returnFocus) btn.focus();
+    }
+
+    function openMenu(focusFirst) {
+      document.querySelectorAll('.lang-picker-menu:not([hidden])').forEach(function(otherMenu) {
+        otherMenu.hidden = true;
+      });
+      document.querySelectorAll('.lang-picker-btn').forEach(function(otherButton) {
+        otherButton.setAttribute('aria-expanded', 'false');
+      });
+      menu.hidden = false;
+      btn.setAttribute('aria-expanded', 'true');
+      if (focusFirst) {
+        var current = menu.querySelector('[aria-current="page"]');
+        var first = menu.querySelector('.lang-picker-item');
+        (current || first)?.focus();
+      }
+    }
+
     btn.addEventListener('click', function(e) {
       e.stopPropagation();
-      var menu = btn.parentElement.querySelector('.lang-picker-menu');
-      var isOpen = menu.classList.contains('is-open');
-      // Close any other open pickers first
-      document.querySelectorAll('.lang-picker-menu.is-open').forEach(function(m) { m.classList.remove('is-open'); });
-      document.querySelectorAll('.lang-picker-btn').forEach(function(b) { b.setAttribute('aria-expanded', 'false'); });
-      if (!isOpen) {
-        menu.classList.add('is-open');
-        btn.setAttribute('aria-expanded', 'true');
+      if (menu.hidden) openMenu(false);
+      else closeMenu(false);
+    });
+
+    btn.addEventListener('keydown', function(e) {
+      if (e.key === 'ArrowDown') {
+        e.preventDefault();
+        openMenu(true);
+      }
+    });
+
+    menu.addEventListener('keydown', function(e) {
+      var items = Array.from(menu.querySelectorAll('.lang-picker-item'));
+      var index = items.indexOf(document.activeElement);
+
+      if (e.key === 'Escape') {
+        e.preventDefault();
+        closeMenu(true);
+      } else if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+        e.preventDefault();
+        var direction = e.key === 'ArrowDown' ? 1 : -1;
+        items[(index + direction + items.length) % items.length]?.focus();
+      } else if (e.key === 'Home' || e.key === 'End') {
+        e.preventDefault();
+        items[e.key === 'Home' ? 0 : items.length - 1]?.focus();
       }
     });
   });
 
   document.addEventListener('click', function(e) {
     if (!e.target.closest('.lang-picker')) {
-      document.querySelectorAll('.lang-picker-menu.is-open').forEach(function(m) { m.classList.remove('is-open'); });
+      document.querySelectorAll('.lang-picker-menu:not([hidden])').forEach(function(m) { m.hidden = true; });
       document.querySelectorAll('.lang-picker-btn').forEach(function(b) { b.setAttribute('aria-expanded', 'false'); });
     }
   });
 
   document.addEventListener('keydown', function(e) {
     if (e.key === 'Escape') {
-      document.querySelectorAll('.lang-picker-menu.is-open').forEach(function(m) { m.classList.remove('is-open'); });
-      document.querySelectorAll('.lang-picker-btn').forEach(function(b) { b.setAttribute('aria-expanded', 'false'); });
+      var openMenu = document.querySelector('.lang-picker-menu:not([hidden])');
+      if (!openMenu) return;
+      openMenu.hidden = true;
+      var button = document.querySelector('[aria-controls="' + openMenu.id + '"]');
+      if (button) {
+        button.setAttribute('aria-expanded', 'false');
+        button.focus();
+      }
     }
   });
 
@@ -106,7 +167,8 @@ function localeHref(code: string, basePath: string): string {
 
     if (match && match.getAttribute('data-lang') !== current) {
       match.classList.add('lang-detected');
-      menu.insertBefore(match, menu.firstChild);
+      match.setAttribute('title', 'Suggested from browser language');
+      menu.insertBefore(match.parentElement, menu.firstElementChild);
     }
   });
 })();

src/components/LanguagePicker.astro

@@ -36,8 +36,8 @@ const actualDuration = Math.round(jitter);
  * SPDX-License-Identifier: Apache-2.0
  */
 (function() {
-  if (window.__tickerV6) return;
-  window.__tickerV6 = true;
+  if (window.__tickerV7) return;
+  window.__tickerV7 = true;
 
   var TOUCH_PAUSE_MS = 10000;
   var RAMP_MS = 600;
@@ -60,7 +60,6 @@ const actualDuration = Math.round(jitter);
     }
   }
 
-  // Smoothly ramp playbackRate from current to target over RAMP_MS
   function rampRate(anim, target, ms) {
     if (!anim) return;
     var start = anim.playbackRate;
@@ -69,7 +68,6 @@ const actualDuration = Math.round(jitter);
       if (!startTime) startTime = ts;
       var elapsed = ts - startTime;
       var progress = Math.min(elapsed / ms, 1);
-      // Ease-in-out cubic
       var ease = progress < 0.5
         ? 4 * progress * progress * progress
         : 1 - Math.pow(-2 * progress + 2, 3) / 2;
@@ -80,7 +78,6 @@ const actualDuration = Math.round(jitter);
   }
 
   ready(function() {
-    // Assign per-card colors
     document.querySelectorAll('.ticker-card').forEach(function(card) {
       if (card.getAttribute('data-color')) {
         card.style.setProperty('--tc-accent', card.getAttribute('data-color'));
@@ -100,23 +97,34 @@ const actualDuration = Math.round(jitter);
       var halves = track.querySelectorAll('.ticker-half');
       var touchTimer = null;
 
-      // Get the CSS animation object from the track element
       function getAnim() {
         var anims = track.getAnimations();
         return anims.length > 0 ? anims[0] : null;
       }
 
-      // Mouse hover: gently ramp to 0 on enter, back to 1 on leave
+      function pause() {
+        rampRate(getAnim(), 0, RAMP_MS);
+      }
+
+      function resume() {
+        rampRate(getAnim(), 1, RAMP_MS);
+      }
+
       el.addEventListener('pointerenter', function(e) {
         if (e.pointerType !== 'mouse') return;
-        rampRate(getAnim(), 0, RAMP_MS);
+        pause();
       });
       el.addEventListener('pointerleave', function(e) {
         if (e.pointerType !== 'mouse') return;
-        rampRate(getAnim(), 1, RAMP_MS);
+        resume();
+      });
+
+      el.addEventListener('focusin', pause);
+      el.addEventListener('focusout', function(e) {
+        if (el.contains(e.relatedTarget)) return;
+        resume();
       });
 
-      // Touch: instant pause, resume after timeout
       el.addEventListener('touchstart', function() {
         var anim = getAnim();
         if (anim) anim.playbackRate = 0;
@@ -126,7 +134,6 @@ const actualDuration = Math.round(jitter);
         }, TOUCH_PAUSE_MS);
       }, {passive: true});
 
-      // Reshuffle on each animation cycle
       track.addEventListener('animationiteration', function() {
         for (var i = 0; i < halves.length; i++) {
           shuffleChildren(halves[i]);