From 8944ce4c3febd9db95728c9e367f730642c1d903 Mon Sep 17 00:00:00 2001
From: a <a@trwnh.com>
Date: Wed, 22 Dec 2021 17:14:41 -0600
Subject: [PATCH] fix mobile viewport height with js :(

---
 assets/scss/base/components.scss       |  4 ++++
 layouts/_default/baseof.html           |  3 +++
 static/scripts/mobileViewportHeight.js | 11 +++++++++++
 3 files changed, 18 insertions(+)
 create mode 100644 static/scripts/mobileViewportHeight.js

diff --git a/assets/scss/base/components.scss b/assets/scss/base/components.scss
index 6930db9..29ebdb1 100644
--- a/assets/scss/base/components.scss
+++ b/assets/scss/base/components.scss
@@ -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;
 	}
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 82a1878..f445ced 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -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>
diff --git a/static/scripts/mobileViewportHeight.js b/static/scripts/mobileViewportHeight.js
new file mode 100644
index 0000000..ab92e98
--- /dev/null
+++ b/static/scripts/mobileViewportHeight.js
@@ -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`);
+});
\ No newline at end of file