sites/abdullahtarawneh.com
1
Fork 0
Code Issues Pull requests Releases Wiki Activity

fix mobile viewport height with js :(

Browse source
This commit is contained in:
a 2021-12-22 17:14:41 -06:00
parent ca008ced6b
commit 8944ce4c3f
3 changed files with 18 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
assets/scss/base/components.scss
View file

@ -119,15 +119,19 @@ a:visited {color: rgb(147, 85, 197)}
background-repeat: no-repeat;
min-height: max-content;
max-height: calc(100vh - 9em);
max-height: calc(var(--vh, 1vh) * 100 - 9em);
@media (min-width: 960px) {
max-height: calc(100vh - 6em);
max-height: calc(var(--vh, 1vh) * 100 - 6em);
}
padding: 0;
.container {
position: relative;
height: calc(100vh - 9em);
height: calc(var(--vh, 1vh) * 100 - 9em);
@media (min-width: 960px) {
height: calc(100vh - 6em);
height: calc(var(--vh, 1vh) * 100 - 6em);
}
padding: 1em;
}

3
layouts/_default/baseof.html
View file

@ -8,6 +8,9 @@
{{ $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="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">
{{ if .IsPage }}<meta name="keywords" content='{{ delimit .Params.tags " "}}'>{{ end }}
{{ if .IsHome }}<title>{{ .Site.Title }}</title>

11
static/scripts/mobileViewportHeight.js Normal file
View 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`);
});