fix mobile viewport height with js :(
This commit is contained in:
parent
ca008ced6b
commit
8944ce4c3f
|
@ -119,15 +119,19 @@ a:visited {color: rgb(147, 85, 197)}
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
min-height: max-content;
|
min-height: max-content;
|
||||||
max-height: calc(100vh - 9em);
|
max-height: calc(100vh - 9em);
|
||||||
|
max-height: calc(var(--vh, 1vh) * 100 - 9em);
|
||||||
@media (min-width: 960px) {
|
@media (min-width: 960px) {
|
||||||
max-height: calc(100vh - 6em);
|
max-height: calc(100vh - 6em);
|
||||||
|
max-height: calc(var(--vh, 1vh) * 100 - 6em);
|
||||||
}
|
}
|
||||||
padding: 0;
|
padding: 0;
|
||||||
.container {
|
.container {
|
||||||
position: relative;
|
position: relative;
|
||||||
height: calc(100vh - 9em);
|
height: calc(100vh - 9em);
|
||||||
|
height: calc(var(--vh, 1vh) * 100 - 9em);
|
||||||
@media (min-width: 960px) {
|
@media (min-width: 960px) {
|
||||||
height: calc(100vh - 6em);
|
height: calc(100vh - 6em);
|
||||||
|
height: calc(var(--vh, 1vh) * 100 - 6em);
|
||||||
}
|
}
|
||||||
padding: 1em;
|
padding: 1em;
|
||||||
}
|
}
|
||||||
|
|
|
@ -8,6 +8,9 @@
|
||||||
{{ $styles := resources.Get "scss/main.scss" | toCSS | minify | fingerprint }}
|
{{ $styles := resources.Get "scss/main.scss" | toCSS | minify | fingerprint }}
|
||||||
<link rel="stylesheet" href="{{ $styles.Permalink }}" integrity="{{ $styles.Data.Integrity }}" media="screen">
|
<link rel="stylesheet" href="{{ $styles.Permalink }}" integrity="{{ $styles.Data.Integrity }}" media="screen">
|
||||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fork-awesome@1.1.7/css/fork-awesome.min.css" integrity="sha256-gsmEoJAws/Kd3CjuOQzLie5Q3yshhvmo7YNtBG7aaEY=" crossorigin="anonymous">
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fork-awesome@1.1.7/css/fork-awesome.min.css" integrity="sha256-gsmEoJAws/Kd3CjuOQzLie5Q3yshhvmo7YNtBG7aaEY=" crossorigin="anonymous">
|
||||||
|
<script defer type="text/javascript" src="/scripts/mobileViewportHeight.js">
|
||||||
|
|
||||||
|
</script>
|
||||||
<link rel="shortcut icon" href="/images/people/avatar.png" sizes="400x400">
|
<link rel="shortcut icon" href="/images/people/avatar.png" sizes="400x400">
|
||||||
{{ if .IsPage }}<meta name="keywords" content='{{ delimit .Params.tags " "}}'>{{ end }}
|
{{ if .IsPage }}<meta name="keywords" content='{{ delimit .Params.tags " "}}'>{{ end }}
|
||||||
{{ if .IsHome }}<title>{{ .Site.Title }}</title>
|
{{ if .IsHome }}<title>{{ .Site.Title }}</title>
|
||||||
|
|
11
static/scripts/mobileViewportHeight.js
Normal file
11
static/scripts/mobileViewportHeight.js
Normal file
|
@ -0,0 +1,11 @@
|
||||||
|
// First we get the viewport height and we multiple it by 1% to get a value for a vh unit
|
||||||
|
let vh = window.innerHeight * 0.01;
|
||||||
|
// Then we set the value in the --vh custom property to the root of the document
|
||||||
|
document.documentElement.style.setProperty('--vh', `${vh}px`);
|
||||||
|
|
||||||
|
// We listen to the resize event
|
||||||
|
window.addEventListener('resize', () => {
|
||||||
|
// We execute the same script as before
|
||||||
|
let vh = window.innerHeight * 0.01;
|
||||||
|
document.documentElement.style.setProperty('--vh', `${vh}px`);
|
||||||
|
});
|
Loading…
Reference in a new issue