Fix homepage RTL (#796)

* Fix blank template not handling i18n

* Split logo and brand to allow for easier RTL placements

* Fix logo mark colors

* Fix positioning for extremely wide screens

src/components/VFourOhFour.vue

@@ -2,10 +2,13 @@
   <main class="bg-yellow h-screen relative page-404 overflow-x-hidden">
     <NuxtLink to="/" class="relative z-10 text-dark-charcoal">
       <span class="sr-only">{{ $t('404.link-title') }}</span>
-      <OpenverseLogo
+      <span
+        class="flex flex-row pt-6 lg:pt-8 ms-6 lg:ms-10 h-auto w-30 text-dark-charcoal"
         aria-hidden="true"
-        class="pt-6 lg:pt-8 ms-6 lg:ms-10 w-30 h-auto"
-      />
+      >
+        <OpenverseLogo />
+        <OpenverseBrand class="ms-1" />
+      </span>
     </NuxtLink>
     <Oops
       aria-hidden="true"
@@ -54,12 +57,14 @@ import { FETCH_MEDIA, UPDATE_QUERY } from '~/constants/action-types'
 
 import Oops from '~/assets/oops.svg?inline'
 import OpenverseLogo from '~/assets/logo.svg?inline'
+import OpenverseBrand from '~/assets/brand.svg?inline'
 import VSearchBar from '~/components/VHeader/VSearchBar/VSearchBar'
 
 const VFourOhFour = defineComponent({
   name: 'VFourOhFour',
   components: {
     OpenverseLogo,
+    OpenverseBrand,
     Oops,
     VSearchBar,
   },

src/components/VHeader/VLogoButton.vue

@@ -4,7 +4,7 @@
     to="/"
     variant="plain"
     size="disabled"
-    class="max-w-min hover:bg-yellow"
+    class="max-w-min hover:bg-yellow text-dark-charcoal"
   >
     <VLogoLoader
       :status="isFetching ? 'loading' : 'idle'"

src/components/VLogoLoader/VLogoLoader.vue

@@ -10,6 +10,7 @@
     :data-prefers-reduced-motion="prefersReducedMotion"
     data-testid="logo-loader"
     class="w-12 h-12 md:w-12 md:h-12 p-3 rounded inline-flex justify-center items-center"
+    fill="currentColor"
   >
     <path
       data-logo-part-1

src/layouts/blank.vue

@@ -1,3 +1,16 @@
 <template>
   <Nuxt />
 </template>
+
+<script>
+import { defineComponent } from '@nuxtjs/composition-api'
+import iframeHeight from '~/mixins/iframe-height'
+
+export default defineComponent({
+  name: 'Blank',
+  mixins: [iframeHeight],
+  head() {
+    return this.$nuxtI18nHead({ addSeoAttributes: true, addDirAttribute: true })
+  },
+})
+</script>

src/pages/index.vue

@@ -6,20 +6,29 @@
     <header
       class="flex-grow w-full lg:w-auto lg:min-w-[32rem] xl:min-w-[64rem] box-border flex flex-col justify-between lg:justify-center"
     >
-      <VLogoButton class="lg:hidden ms-3" :auto-resize-logo="false" />
+      <VLogoButton
+        class="lg:hidden ms-3"
+        :auto-resize-logo="false"
+        :is-search-route="false"
+      />
 
-      <div class="px-6 lg:pl-30 lg:pr-0 xl:px-40 mx-auto w-full lg:w-auto">
-        <NuxtLink to="/" class="relative z-10 hidden lg:block">
+      <div class="px-6 lg:ps-30 lg:pe-0 xl:px-40 mx-auto w-full lg:w-auto">
+        <NuxtLink
+          to="/"
+          class="relative z-10 hidden lg:block -left-[6.25rem] rtl:-right-[6.25rem]"
+        >
           <h1>
             <span class="sr-only">{{ $t('hero.brand') }}</span>
             <!-- width and height chosen w.r.t. viewBox "0 0 280 42" -->
-            <OpenverseLogo
+            <span
               aria-hidden="true"
-              class="lg:-translate-x-24 w-30 lg:h-[63px] lg:w-auto pt-6 lg:pt-0"
-            />
+              class="flex flex-row items-center text-dark-charcoal"
+            >
+              <OpenverseLogo class="w-[70px] h-[70px] me-6 xl:me-7" />
+              <OpenverseBrand class="w-[315px] h-[60px]" />
+            </span>
           </h1>
         </NuxtLink>
-
         <h2 class="text-4xl lg:text-6xl mt-auto lg:mt-6">
           {{ $t('hero.subtitle') }}
         </h2>
@@ -129,6 +138,7 @@ import { FETCH_MEDIA, UPDATE_QUERY } from '~/constants/action-types'
 import imageInfo from '~/assets/homepage_images/image_info.json'
 
 import OpenverseLogo from '~/assets/logo.svg?inline'
+import OpenverseBrand from '~/assets/brand.svg?inline'
 import VContentSwitcherPopover from '~/components/VContentSwitcher/VContentSwitcherPopover.vue'
 import VContentTypeButton from '~/components/VContentSwitcher/VContentTypeButton.vue'
 import VSearchBar from '~/components/VHeader/VSearchBar/VSearchBar.vue'
@@ -139,6 +149,7 @@ const HomePage = {
   layout: 'blank',
   components: {
     OpenverseLogo,
+    OpenverseBrand,
     VContentSwitcherPopover,
     VContentTypeButton,
     VSearchBar,

tailwind.config.js

@@ -84,6 +84,7 @@ module.exports = {
       10: '2.50rem',
       12: '3.00rem',
       14: '3.50rem',
+      15: '3.75rem',
       16: '4.00rem',
       20: '5.00rem',
       24: '6.00rem',