refactor: header padding calculations [breaking]

- Rewrote in vanilla js
- Takes into account the actual vertical height of the header from the top of viewport in addition to the header itself
  - Themes often add stuff above the header, and so theme-related hacks will no longer be necessary

public/persona.js

@@ -23,11 +23,19 @@ $(document).ready(function () {
 
 	function fixHeaderPadding() {
 		var env = utils.findBootstrapEnvironment();
-		if (env === 'sm' || env === 'xs' || env === 'md') {
+		const headerEl = document.getElementById('header-menu');
-			$('#panel').css('padding-top', $('#header-menu').outerHeight(true));
+		const panelEl = document.getElementById('panel');
-		} else {
+		const headerRect = headerEl.getBoundingClientRect();
-			$('#panel').css('padding-top', $('#header-menu').outerHeight(true) - 70);
+		const headerStyle = window.getComputedStyle(headerEl);
+		let paddingTop = headerRect.y + headerRect.height + (parseInt(headerStyle.marginTop, 10) || 0) + (parseInt(headerStyle.marginBottom, 10) || 0);
+
+		// body element itself introduces a hardcoded 70px padding on desktop resolution
+		if (env === 'lg') {
+			paddingTop -= 70;
 		}
+
+		panelEl.style.paddingTop = `${paddingTop}px`;
+
 	}
 
 	var lastBSEnv = '';