Cosmetic fixes (#9)

- Don't duplicate GitHub repo stars badge (in footer next to GitHub Repo) when switching theme
- Home page header title size reduces on mobile, the same way it does on the other pages
- Body text is left aligned (not full width justified)
- Headers have standard line height (not super tall spaced out)
- Body text width has relaxed margins (not super tight horizontally)

Closes #2

layouts/partials/custom-header.html

@@ -1,12 +1,7 @@
+<link rel="stylesheet" href="/css/custom.css">
 
-    <style>
-      #R-body img.bg-white {
-        background-color: white;
-      }
-    </style>
+<link rel="stylesheet" href="/css/cookieconsent.css">
 
-    <link rel="stylesheet" href="/css/cookieconsent.css">
-
-    {{- if .Site.GoogleAnalytics }}
-    {{ template "_internal/google_analytics.html" . }}
-    {{- end}}
+{{- if .Site.GoogleAnalytics }}
+{{ template "_internal/google_analytics.html" . }}
+{{- end}}

layouts/partials/menu-footer.html

@@ -25,6 +25,10 @@
               }
               var scheme = githubButtonsScheme();
 
+              document.querySelectorAll('.github-button-container').forEach(function(element) {
+                element.parentNode.removeChild(element);
+              });
+
               var starsElement = document.createElement('a');
               starsElement.className = 'github-button';
               starsElement.href = 'https://github.com/xjmusic/xjmusic';
@@ -35,8 +39,9 @@
               starsElement.textContent = 'Star';
 
               var starsContainerElement = document.createElement('div');
-                starsContainerElement.style.paddingTop = '11px';
-                starsContainerElement.appendChild( starsElement );
+              starsContainerElement.className = 'github-button-container';
+              starsContainerElement.style.paddingTop = '11px';
+              starsContainerElement.appendChild( starsElement );
 
               var repoListItem = document.querySelector( '#R-shortcuts > .space > li:first-child' );
               repoListItem.style.display = 'flex';

static/css/custom.css

@@ -0,0 +1,35 @@
+#R-body img.bg-white {
+    background-color: white;
+}
+
+body:not(.print) #R-body-inner h1 {
+    line-height: 1.2em;
+}
+
+body:not(.print) #R-body-inner p {
+    text-align: left !important;
+}
+
+body:not(.print) #R-body-inner.narrow {
+    padding: 0 3.75rem 2rem 3.75rem;
+}
+
+@media screen and (max-width: 59.999rem) {
+    body:not(.print) #R-body-inner.narrow {
+        padding: 0 2.5rem 1rem 2.5rem;
+    }
+}
+
+@media only screen and (max-width: 47.999rem) {
+    body:not(.print) #R-body-inner h1 {
+        font-size: 2.5rem;
+    }
+
+    body:not(.print) #R-body-inner.narrow h1 {
+        font-size: 2.5rem;
+    }
+
+    body:not(.print) #R-body-inner.narrow {
+        padding: 0 1.5rem .375rem 1.5rem;
+    }
+}