From 31ba45713247e31c9ae2c7bd251808d586b0a6e9 Mon Sep 17 00:00:00 2001
From: sarayourfriend <24264157+sarayourfriend@users.noreply.github.com>
Date: Mon, 7 Feb 2022 16:17:22 -0500
Subject: [PATCH] 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/assets/brand.svg                       |  5 +++++
 src/assets/icons/openverse-logo-text.svg   |  1 +
 src/assets/logo.svg                        |  3 +--
 src/components/VFourOhFour.vue             | 11 +++++++---
 src/components/VHeader/VLogoButton.vue     |  2 +-
 src/components/VLogoLoader/VLogoLoader.vue |  1 +
 src/layouts/blank.vue                      | 13 +++++++++++
 src/pages/index.vue                        | 25 ++++++++++++++++------
 tailwind.config.js                         |  1 +
 9 files changed, 49 insertions(+), 13 deletions(-)
 create mode 100644 src/assets/brand.svg

diff --git a/src/assets/brand.svg b/src/assets/brand.svg
new file mode 100644
index 0000000000..439f37362a
--- /dev/null
+++ b/src/assets/brand.svg
@@ -0,0 +1,5 @@
+<svg width="215" height="42" viewBox="0 0 215 42" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g id="brand" fill="currentColor">
+    <path class="text" fill-rule="evenodd" clip-rule="evenodd" d="M 24.69 21.3293 C 24.69 28.0657 19.2652 33.5266 12.5734 33.5266 C 5.8816 33.5266 0.4568 28.0657 0.4568 21.3293 C 0.4568 14.5929 5.8816 9.132 12.5734 9.132 C 19.2652 9.132 24.69 14.5929 24.69 21.3293 Z M 17.4199 21.3293 C 17.4199 24.0238 15.25 26.2082 12.5733 26.2082 C 9.8965 26.2082 7.7266 24.0238 7.7266 21.3293 C 7.7266 18.6347 9.8965 16.4504 12.5733 16.4504 C 15.25 16.4504 17.4199 18.6347 17.4199 21.3293 Z M 34.8984 41.5588 H 26.5855 V 9.5409 H 34.8382 V 13.6037 H 35.019 C 35.922 11.2388 38.091 9.2377 41.525 9.2377 C 46.103 9.2377 50.56 12.7548 50.56 21.1837 C 50.56 29.2488 46.404 33.1298 41.464 33.1298 C 38.212 33.1298 35.983 31.3712 35.019 29.0063 H 34.8984 V 41.5588 Z M 38.392 15.6655 C 36.103 15.6655 34.7177 17.7272 34.7177 21.1837 C 34.7177 24.5796 36.103 26.702 38.392 26.702 C 40.681 26.702 42.007 24.6402 42.007 21.1837 C 42.007 17.7272 40.681 15.6655 38.392 15.6655 Z M 75.18 25.3072 C 74.396 30.1584 70.27 33.2511 63.855 33.2511 C 56.445 33.2511 51.927 28.7789 51.927 21.2444 C 51.927 14.0282 56.506 9.2377 63.674 9.2377 C 70.662 9.2377 75.18 13.7705 75.18 21.1837 V 23.1242 H 60.12 V 23.488 C 60.12 25.7317 61.566 27.369 64.035 27.369 C 65.737 27.369 67.108 26.6262 67.589 25.3072 H 75.18 Z M 63.855 15.1197 C 61.822 15.1197 60.165 16.4993 60.12 18.5156 H 67.529 C 67.484 16.5144 65.918 15.1197 63.855 15.1197 Z M 85.612 19.7284 C 85.627 17.424 86.923 16.0293 88.986 16.0293 C 91.079 16.0293 92.314 17.424 92.299 19.7284 V 32.8266 H 100.612 V 17.9698 C 100.627 12.9064 97.449 9.2377 92.54 9.2377 C 89.136 9.2377 86.441 11.0265 85.432 13.9676 H 85.191 V 9.5409 H 77.299 V 32.8266 H 85.612 V 19.7284 Z M 117.193 9.5409 H 125.927 L 118.157 32.8266 H 108.518 L 100.748 9.5409 H 109.482 L 113.217 24.9434 H 113.458 L 117.193 9.5409 Z M 137.399 33.2511 C 143.815 33.2511 147.941 30.1584 148.724 25.3072 H 141.134 C 140.652 26.6262 139.282 27.369 137.58 27.369 C 135.11 27.369 133.665 25.7317 133.665 23.488 V 23.1242 H 148.724 V 21.1837 C 148.724 13.7705 144.206 9.2377 137.219 9.2377 C 130.05 9.2377 125.472 14.0282 125.472 21.2444 C 125.472 28.7789 129.99 33.2511 137.399 33.2511 Z M 133.665 18.5156 C 133.71 16.4993 135.366 15.1197 137.399 15.1197 C 139.463 15.1197 141.029 16.5144 141.074 18.5156 H 133.665 Z M 159.157 32.8266 H 150.844 V 9.5409 H 158.916 V 13.9676 H 159.157 C 160 10.693 161.928 9.2377 164.398 9.2377 C 165.121 9.2377 165.844 9.3589 166.506 9.556 V 16.6964 C 165.678 16.4083 164.292 16.2719 163.434 16.2719 C 160.979 16.2719 159.157 18.0304 159.157 20.6986 V 32.8266 Z M 189.104 17.1208 C 188.893 12.1938 184.827 9.2377 178.14 9.2377 C 171.529 9.2377 167.448 11.9664 167.478 16.8176 C 167.448 20.4864 169.812 22.8362 174.526 23.67 L 178.622 24.3976 C 180.429 24.7312 181.242 25.2163 181.272 26.0956 C 181.242 27.0658 180.143 27.6116 178.622 27.6116 C 176.74 27.6116 175.414 26.7929 175.188 25.3072 H 166.936 C 167.387 30.0826 171.484 33.2511 178.562 33.2511 C 184.962 33.2511 189.676 30.113 189.706 25.1253 C 189.676 21.684 187.387 19.6829 182.658 18.8188 L 177.959 17.9698 C 176.197 17.6514 175.7 17.0147 175.731 16.3325 C 175.7 15.3623 176.89 14.8165 178.321 14.8165 C 179.962 14.8165 181.333 15.6958 181.453 17.1208 H 189.104 Z M 214.027 25.3072 C 213.244 30.1584 209.118 33.2511 202.703 33.2511 C 195.293 33.2511 190.775 28.7789 190.775 21.2444 C 190.775 14.0282 195.354 9.2377 202.522 9.2377 C 209.51 9.2377 214.027 13.7705 214.027 21.1837 V 23.1242 H 198.968 V 23.488 C 198.968 25.7317 200.414 27.369 202.883 27.369 C 204.585 27.369 205.956 26.6262 206.437 25.3072 H 214.027 Z M 202.703 15.1197 C 200.67 15.1197 199.013 16.4993 198.968 18.5156 H 206.377 C 206.332 16.5144 204.766 15.1197 202.703 15.1197 Z" />
+  </g>
+</svg>
diff --git a/src/assets/icons/openverse-logo-text.svg b/src/assets/icons/openverse-logo-text.svg
index 254ec78c13..c228afff0e 100644
--- a/src/assets/icons/openverse-logo-text.svg
+++ b/src/assets/icons/openverse-logo-text.svg
@@ -1,6 +1,7 @@
 <svg
   viewBox="0 0 95 15"
   xmlns="http://www.w3.org/2000/svg"
+  fill="currentColor"
 >
   <path
     fill-rule="evenodd"
diff --git a/src/assets/logo.svg b/src/assets/logo.svg
index d1884ee0e6..a29b04be06 100644
--- a/src/assets/logo.svg
+++ b/src/assets/logo.svg
@@ -1,4 +1,4 @@
-<svg width="280" height="42" viewBox="0 0 280 42" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="50" height="42" viewBox="0 0 50 42" fill="none" xmlns="http://www.w3.org/2000/svg">
   <g id="logo" fill="currentColor">
     <path class="circle" d="M37.5589 18.795C42.7146 18.795 46.8942 14.5876 46.8942 9.3975C46.8942 4.2074 42.7146 0 37.5589 0C32.4031 0 28.2236 4.2074 28.2236 9.3975C28.2236 14.5876 32.4031 18.795 37.5589 18.795Z"/>
     <path class="circle" d="M0.999969 9.3975C0.999969 14.5687 5.17217 18.795 10.3353 18.795V0C5.17217 0 0.999969 4.2 0.999969 9.3975Z"/>
@@ -6,6 +6,5 @@
     <path class="circle" d="M37.5589 41.9212C42.7146 41.9212 46.8942 37.7138 46.8942 32.5238C46.8942 27.3337 42.7146 23.1263 37.5589 23.1263C32.4031 23.1263 28.2236 27.3337 28.2236 32.5238C28.2236 37.7138 32.4031 41.9212 37.5589 41.9212Z"/>
     <path class="circle" d="M14.6118 32.5238C14.6118 37.695 18.784 41.9213 23.9471 41.9213V23.1525C18.8101 23.1525 14.6118 27.3525 14.6118 32.5238Z"/>
     <path class="circle" d="M0.999969 32.6025C0.999969 37.8 5.17217 42 10.3353 42V23.2312C5.17217 23.2312 0.999969 27.4312 0.999969 32.6025Z"/>
-    <path class="text" fill-rule="evenodd" clip-rule="evenodd" d="M89.69 21.3293C89.69 28.0657 84.2652 33.5266 77.5734 33.5266C70.8816 33.5266 65.4568 28.0657 65.4568 21.3293C65.4568 14.5929 70.8816 9.13202 77.5734 9.13202C84.2652 9.13202 89.69 14.5929 89.69 21.3293ZM82.4199 21.3293C82.4199 24.0238 80.25 26.2082 77.5733 26.2082C74.8965 26.2082 72.7266 24.0238 72.7266 21.3293C72.7266 18.6347 74.8965 16.4504 77.5733 16.4504C80.25 16.4504 82.4199 18.6347 82.4199 21.3293ZM99.8984 41.5588H91.5855V9.54085H99.8382V13.6037H100.019C100.922 11.2388 103.091 9.23765 106.525 9.23765C111.103 9.23765 115.56 12.7548 115.56 21.1837C115.56 29.2488 111.404 33.1298 106.464 33.1298C103.212 33.1298 100.983 31.3712 100.019 29.0063H99.8984V41.5588ZM103.392 15.6655C101.103 15.6655 99.7177 17.7272 99.7177 21.1837C99.7177 24.5796 101.103 26.702 103.392 26.702C105.681 26.702 107.007 24.6402 107.007 21.1837C107.007 17.7272 105.681 15.6655 103.392 15.6655ZM140.18 25.3072C139.396 30.1584 135.27 33.2511 128.855 33.2511C121.445 33.2511 116.927 28.7789 116.927 21.2444C116.927 14.0282 121.506 9.23765 128.674 9.23765C135.662 9.23765 140.18 13.7705 140.18 21.1837V23.1242H125.12V23.488C125.12 25.7317 126.566 27.369 129.035 27.369C130.737 27.369 132.108 26.6262 132.589 25.3072H140.18ZM128.855 15.1197C126.822 15.1197 125.165 16.4993 125.12 18.5156H132.529C132.484 16.5144 130.918 15.1197 128.855 15.1197ZM150.612 19.7284C150.627 17.424 151.923 16.0293 153.986 16.0293C156.079 16.0293 157.314 17.424 157.299 19.7284V32.8266H165.612V17.9698C165.627 12.9064 162.449 9.23765 157.54 9.23765C154.136 9.23765 151.441 11.0265 150.432 13.9676H150.191V9.54085H142.299V32.8266H150.612V19.7284ZM182.193 9.54085H190.927L183.157 32.8266H173.518L165.748 9.54085H174.482L178.217 24.9434H178.458L182.193 9.54085ZM202.399 33.2511C208.815 33.2511 212.941 30.1584 213.724 25.3072H206.134C205.652 26.6262 204.282 27.369 202.58 27.369C200.11 27.369 198.665 25.7317 198.665 23.488V23.1242H213.724V21.1837C213.724 13.7705 209.206 9.23765 202.219 9.23765C195.05 9.23765 190.472 14.0282 190.472 21.2444C190.472 28.7789 194.99 33.2511 202.399 33.2511ZM198.665 18.5156C198.71 16.4993 200.366 15.1197 202.399 15.1197C204.463 15.1197 206.029 16.5144 206.074 18.5156H198.665ZM224.157 32.8266H215.844V9.54085H223.916V13.9676H224.157C225 10.693 226.928 9.23765 229.398 9.23765C230.121 9.23765 230.844 9.35893 231.506 9.55601V16.6964C230.678 16.4083 229.292 16.2719 228.434 16.2719C225.979 16.2719 224.157 18.0304 224.157 20.6986V32.8266ZM254.104 17.1208C253.893 12.1938 249.827 9.23765 243.14 9.23765C236.529 9.23765 232.448 11.9664 232.478 16.8176C232.448 20.4864 234.812 22.8362 239.526 23.67L243.622 24.3976C245.429 24.7312 246.242 25.2163 246.272 26.0956C246.242 27.0658 245.143 27.6116 243.622 27.6116C241.74 27.6116 240.414 26.7929 240.188 25.3072H231.936C232.387 30.0826 236.484 33.2511 243.562 33.2511C249.962 33.2511 254.676 30.113 254.706 25.1253C254.676 21.684 252.387 19.6829 247.658 18.8188L242.959 17.9698C241.197 17.6514 240.7 17.0147 240.731 16.3325C240.7 15.3623 241.89 14.8165 243.321 14.8165C244.962 14.8165 246.333 15.6958 246.453 17.1208H254.104ZM279.027 25.3072C278.244 30.1584 274.118 33.2511 267.703 33.2511C260.293 33.2511 255.775 28.7789 255.775 21.2444C255.775 14.0282 260.354 9.23765 267.522 9.23765C274.51 9.23765 279.027 13.7705 279.027 21.1837V23.1242H263.968V23.488C263.968 25.7317 265.414 27.369 267.883 27.369C269.585 27.369 270.956 26.6262 271.437 25.3072H279.027ZM267.703 15.1197C265.67 15.1197 264.013 16.4993 263.968 18.5156H271.377C271.332 16.5144 269.766 15.1197 267.703 15.1197Z" />
   </g>
 </svg>
diff --git a/src/components/VFourOhFour.vue b/src/components/VFourOhFour.vue
index d6fdaa1cf3..81958db4ec 100644
--- a/src/components/VFourOhFour.vue
+++ b/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,
   },
diff --git a/src/components/VHeader/VLogoButton.vue b/src/components/VHeader/VLogoButton.vue
index f5ad5ab508..7bddd71273 100644
--- a/src/components/VHeader/VLogoButton.vue
+++ b/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'"
diff --git a/src/components/VLogoLoader/VLogoLoader.vue b/src/components/VLogoLoader/VLogoLoader.vue
index 91f537e5b0..874db85b2d 100644
--- a/src/components/VLogoLoader/VLogoLoader.vue
+++ b/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
diff --git a/src/layouts/blank.vue b/src/layouts/blank.vue
index 5d3ae9c407..c1852bff56 100644
--- a/src/layouts/blank.vue
+++ b/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>
diff --git a/src/pages/index.vue b/src/pages/index.vue
index 2c3b5de7bb..cfe40345a2 100644
--- a/src/pages/index.vue
+++ b/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,
diff --git a/tailwind.config.js b/tailwind.config.js
index 2ea44f7633..66271c8726 100644
--- a/tailwind.config.js
+++ b/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',