From 307f3447ed6d8c5db1c420b3b6b684cbaa02ccc7 Mon Sep 17 00:00:00 2001
From: Charney Kaye <charneykaye@users.noreply.github.com>
Date: Wed, 15 May 2024 15:55:35 -0700
Subject: [PATCH] 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 | 15 +++++--------
 layouts/partials/menu-footer.html   |  9 ++++++--
 static/css/custom.css               | 35 +++++++++++++++++++++++++++++
 3 files changed, 47 insertions(+), 12 deletions(-)
 create mode 100644 static/css/custom.css

diff --git a/layouts/partials/custom-header.html b/layouts/partials/custom-header.html
index 1c114cb..9e18013 100644
--- a/layouts/partials/custom-header.html
+++ b/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}}
\ No newline at end of file
+{{- if .Site.GoogleAnalytics }}
+{{ template "_internal/google_analytics.html" . }}
+{{- end}}
diff --git a/layouts/partials/menu-footer.html b/layouts/partials/menu-footer.html
index 8650847..290ac0d 100644
--- a/layouts/partials/menu-footer.html
+++ b/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';
diff --git a/static/css/custom.css b/static/css/custom.css
new file mode 100644
index 0000000..c588c1a
--- /dev/null
+++ b/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;
+    }
+}
\ No newline at end of file