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,