From 9fab037276083a6a0e6a4ec37e9ad3d44649d7f8 Mon Sep 17 00:00:00 2001 From: Sebin Nyshkim Date: Thu, 6 Jan 2022 23:16:59 +0100 Subject: [PATCH] feat: add notch compatibility --- public/index.html | 2 +- src/App.vue | 18 +++++++++++++----- src/components/Prose.vue | 2 ++ 3 files changed, 16 insertions(+), 6 deletions(-) diff --git a/public/index.html b/public/index.html index a536def..27aef28 100644 --- a/public/index.html +++ b/public/index.html @@ -3,7 +3,7 @@ - + <%= htmlWebpackPlugin.options.title %> diff --git a/src/App.vue b/src/App.vue index aa84b41..e6c07c4 100644 --- a/src/App.vue +++ b/src/App.vue @@ -96,9 +96,9 @@ header { align-items: center; position: fixed; - top: 0; - right: 0; - left: 0; + top: env(safe-area-inset-top); + right: env(safe-area-inset-right); + left: env(safe-area-inset-left); z-index: 2; @@ -125,11 +125,19 @@ header { } .footer { - background-color: $bg-color-light; margin: 2em 0 0 0; - padding: 0.5em 0; + padding: 0.75em 0; + background-color: $bg-color-light; text-align: center; + @media (orientation: landscape) { + padding: env(safe-area-inset-bottom) 0; + } + + @include mq-desktop { + padding: 0.75em 0; + } + &__copyright { margin: 0; } diff --git a/src/components/Prose.vue b/src/components/Prose.vue index 07f3089..9cd3a1d 100644 --- a/src/components/Prose.vue +++ b/src/components/Prose.vue @@ -8,6 +8,8 @@ @import "@/scss/base.scss"; .prose { + padding: 0 env(safe-area-inset-right) 0 env(safe-area-inset-left); + h1, h2, h3,