Many small adjustments

- Adjust header width for scrollbar presence
- Added new header assets for grass and dirt
- Adjusted styles for hosted and tracker
- Expand header to implement templating system
- Much more I have forgotten

WebHostLib/static/assets/styleController.js

@@ -19,7 +19,29 @@ const adjustFooterHeight = () => {
   footer.style.marginTop = `${margin}px`;
 };
 
+const adjustHeaderWidth = () => {
+  // If there is no header, do nothing
+  const header = document.getElementById('base-header');
+  if (!header) { return; }
+
+  const tempDiv = document.createElement('div');
+  tempDiv.style.width = '100px';
+  tempDiv.style.height = '100px';
+  tempDiv.style.overflow = 'scroll';
+  tempDiv.style.position = 'absolute';
+  tempDiv.style.top = '-500px';
+  document.body.appendChild(tempDiv);
+  const scrollbarWidth = tempDiv.offsetWidth - tempDiv.clientWidth;
+  document.body.removeChild(tempDiv);
+
+  const documentRoot = document.compatMode === 'BackCompat' ? document.body : document.documentElement;
+  const margin = (documentRoot.scrollHeight > documentRoot.clientHeight) ? 0-scrollbarWidth : 0;
+  document.getElementById('base-header-right').style.marginRight = `${margin}px`;
+};
+
 window.addEventListener('load', () => {
   adjustFooterHeight();
+  adjustHeaderWidth();
   window.addEventListener('resize', adjustFooterHeight);
+  window.addEventListener('resize', adjustHeaderWidth);
 });