SebinNyshkim/sebin-reference
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: add notch compatibility

Browse source
This commit is contained in:
Sebin Nyshkim 2022-01-06 23:16:59 +01:00
parent d6df8dd21d
commit 9fab037276
3 changed files with 16 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

2
public/index.html
View file

@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<link rel="<%= htmlWebpackPlugin.options.links.favicon.rel %>" href="<%= htmlWebpackPlugin.options.links.favicon.href %>" type="<%= htmlWebpackPlugin.options.links.favicon.type %>"> <link rel="<%= htmlWebpackPlugin.options.links.favicon.rel %>" href="<%= htmlWebpackPlugin.options.links.favicon.href %>" type="<%= htmlWebpackPlugin.options.links.favicon.type %>">
<link rel="<%= htmlWebpackPlugin.options.links.icon.rel %>" href="<%= htmlWebpackPlugin.options.links.icon.href %>" type="<%= htmlWebpackPlugin.options.links.icon.type %>"> <link rel="<%= htmlWebpackPlugin.options.links.icon.rel %>" href="<%= htmlWebpackPlugin.options.links.icon.href %>" type="<%= htmlWebpackPlugin.options.links.icon.type %>">
<title><%= htmlWebpackPlugin.options.title %></title> <title><%= htmlWebpackPlugin.options.title %></title>

18
src/App.vue
View file

@ -96,9 +96,9 @@ header {
align-items: center; align-items: center;
position: fixed; position: fixed;
top: 0; top: env(safe-area-inset-top);
right: 0; right: env(safe-area-inset-right);
left: 0; left: env(safe-area-inset-left);
z-index: 2; z-index: 2;
@ -125,11 +125,19 @@ header {
} }
.footer { .footer {
background-color: $bg-color-light;
margin: 2em 0 0 0; margin: 2em 0 0 0;
padding: 0.5em 0; padding: 0.75em 0;
background-color: $bg-color-light;
text-align: center; text-align: center;
@media (orientation: landscape) {
padding: env(safe-area-inset-bottom) 0;
}
@include mq-desktop {
padding: 0.75em 0;
}
&__copyright { &__copyright {
margin: 0; margin: 0;
} }

2
src/components/Prose.vue
View file

@ -8,6 +8,8 @@
@import "@/scss/base.scss"; @import "@/scss/base.scss";
.prose { .prose {
padding: 0 env(safe-area-inset-right) 0 env(safe-area-inset-left);
h1, h1,
h2, h2,
h3, h3,