Skip to content
This repository has been archived by the owner on Feb 22, 2023. It is now read-only.

Fix homepage RTL #796

Merged
merged 4 commits into from
Feb 7, 2022
Merged
Show file tree
Hide file tree
Changes from 2 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions src/assets/brand.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 1 addition & 2 deletions src/assets/logo.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
11 changes: 8 additions & 3 deletions src/components/VFourOhFour.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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"
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"
Expand Down Expand Up @@ -53,12 +56,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,
},
Expand Down
13 changes: 13 additions & 0 deletions src/layouts/blank.vue
Original file line number Diff line number Diff line change
@@ -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>
21 changes: 16 additions & 5 deletions src/pages/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Neither header nor VLogoButton have a color class, so the color of the logo becomes black instead of dark charcoal.

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">
<div class="flex flex-row ps-6 xl:ps-15">
<NuxtLink to="/" class="relative z-10 hidden lg:block">
<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 justify-center"
>
<OpenverseLogo class="w-[70px] h-[70px] me-6 xl:me-7" />
<OpenverseBrand class="w-[315px] h-[60px]" />
</span>
</h1>
</NuxtLink>
</div>

<div class="px-6 lg:ps-30 lg:pe-0 xl:px-40 mx-auto w-full lg:w-auto">
<h2 class="text-4xl lg:text-6xl mt-auto lg:mt-6">
{{ $t('hero.subtitle') }}
</h2>
Expand Down Expand Up @@ -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'
Expand All @@ -139,6 +149,7 @@ const HomePage = {
layout: 'blank',
components: {
OpenverseLogo,
OpenverseBrand,
VContentSwitcherPopover,
VContentTypeButton,
VSearchBar,
Expand Down
1 change: 1 addition & 0 deletions tailwind.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down