From 7bdb2615d4db161ee7c8093ddaa18c0df8982558 Mon Sep 17 00:00:00 2001
From: Anthony Stirling <77850077+Frooodle@users.noreply.github.com>
Date: Thu, 1 Jun 2023 23:12:55 +0100
Subject: [PATCH] css cleanup

---
 src/main/resources/static/css/errorBanner.css |  94 ++++++++++++++
 src/main/resources/static/css/game.css        |  49 ++++++++
 src/main/resources/static/css/home.css        |  70 +++++++++++
 src/main/resources/static/css/merge.css       |  25 ++++
 src/main/resources/static/css/navbar.css      |  42 +++++++
 .../resources/static/images/heart-fill.svg    |   3 -
 .../static/images/suit-heart-fill.svg         |   3 +
 .../resources/templates/fragments/common.html |  53 +-------
 .../fragments/errorBannerPerPage.html         | 118 +-----------------
 .../resources/templates/fragments/footer.html |   8 +-
 .../resources/templates/fragments/navbar.html |  46 +------
 src/main/resources/templates/home.html        |  74 +----------
 src/main/resources/templates/merge-pdfs.html  |  33 +----
 13 files changed, 292 insertions(+), 326 deletions(-)
 create mode 100644 src/main/resources/static/css/errorBanner.css
 create mode 100644 src/main/resources/static/css/game.css
 create mode 100644 src/main/resources/static/css/home.css
 create mode 100644 src/main/resources/static/css/merge.css
 create mode 100644 src/main/resources/static/css/navbar.css
 delete mode 100644 src/main/resources/static/images/heart-fill.svg
 create mode 100644 src/main/resources/static/images/suit-heart-fill.svg

diff --git a/src/main/resources/static/css/errorBanner.css b/src/main/resources/static/css/errorBanner.css
new file mode 100644
index 00000000..69a940b3
--- /dev/null
+++ b/src/main/resources/static/css/errorBanner.css
@@ -0,0 +1,94 @@
+#errorContainer {
+	margin: 20px; /* adjust this value as needed */
+}
+
+#helpModalDialog {
+	width: 90%;
+	max-width: 800px;
+}
+
+#helpModal h1 {
+	text-align: center;
+	margin-top: 10%;
+}
+
+#helpModal p {
+	text-align: center;
+	margin-top: 2em;
+}
+
+#helpModal .button:hover {
+	background-color: #005b7f;
+}
+
+#helpModal .features-container {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(21rem, 3fr));
+	gap: 25px 30px;
+}
+
+#helpModal .feature-card {
+	border: 1px solid rgba(0, 0, 0, .125);
+	border-radius: 0.25rem;
+	padding: 1.25rem;
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
+}
+
+#helpModal .feature-card .card-text {
+	flex: 1;
+}
+
+#support-section {
+	background-color: #f9f9f9;
+	padding: 4rem;
+	margin-top: 1rem;
+	text-align: center;
+}
+
+#support-section h1 {
+	margin-top: 0;
+}
+
+#support-section p {
+	margin-top: 0;
+}
+
+#button-group {
+	display: flex;
+	justify-content: center;
+	flex-wrap: wrap;
+}
+
+#github-button, #discord-button {
+	display: inline-block;
+	padding: 1rem 2rem;
+	margin: 1rem;
+	background-color: #008CBA;
+	color: #fff;
+	font-size: 1.2rem;
+	text-align: center;
+	text-decoration: none;
+	border-radius: 3rem;
+	transition: all 0.3s ease-in-out;
+}
+
+#github-button:hover, #discord-button:hover, #home-button:hover {
+	background-color: #005b7f;
+}
+
+#home-button {
+	display: block;
+	width: 200px;
+	height: 50px;
+	margin: 2em auto;
+	background-color: #008CBA;
+	color: white;
+	text-align: center;
+	line-height: 50px;
+	text-decoration: none;
+	font-weight: bold;
+	border-radius: 25px;
+	transition: all 0.3s ease-in-out;
+}
\ No newline at end of file
diff --git a/src/main/resources/static/css/game.css b/src/main/resources/static/css/game.css
new file mode 100644
index 00000000..01b93e94
--- /dev/null
+++ b/src/main/resources/static/css/game.css
@@ -0,0 +1,49 @@
+#game-container {
+    position: relative;
+    width: 100vh;
+    height: 0;
+    padding-bottom: 75%; /* 4:3 aspect ratio */
+    background-color: transparent;
+    margin: auto;
+    overflow: hidden;
+    border: 2px solid black; /* Add border */
+}
+
+.pdf, .player, .projectile {
+    position: absolute;
+}
+.pdf {
+    width: 50px;
+    height: 50px;
+}
+.player {
+    width: 50px;
+    height: 50px;
+}
+.projectile {
+    background-color: black  !important;
+    width: 5px;
+    height: 10px;
+}
+#score, #level, #lives, #high-score {
+    color: black;
+    font-family: sans-serif;
+    position: absolute;
+    font-size: calc(14px + 0.25vw); /* Reduced font size */
+}
+#score {
+    top: 10px;
+    left: 10px;
+}
+#lives {
+    top: 10px;
+    left: calc(7vw); /* Adjusted position */
+}
+#high-score {
+    top: 10px;
+    left: calc(14vw); /* Adjusted position */
+}
+#level {
+    top: 10px;
+    right: 10px;
+}
\ No newline at end of file
diff --git a/src/main/resources/static/css/home.css b/src/main/resources/static/css/home.css
new file mode 100644
index 00000000..94414be9
--- /dev/null
+++ b/src/main/resources/static/css/home.css
@@ -0,0 +1,70 @@
+.features-container {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(21rem, 3fr));
+    gap: 25px 30px;
+}
+
+.feature-card {
+    border: 2px solid rgba(0, 0, 0, .25);
+    border-radius: 0.25rem;
+    padding: 1.25rem;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    background: rgba(13, 110, 253, 0.05); 
+    transition: transform 0.3s, border 0.3s;
+}
+
+.feature-card a {
+    text-decoration: none;
+    color: inherit;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+}
+
+.feature-card .card-text {
+    flex: 1;
+}
+
+.feature-card:hover {
+    border: 1px solid rgba(0, 0, 0, .5);
+    cursor: pointer;
+    transform: scale(1.1);
+}
+
+.feature-card:hover .card-title {
+    text-decoration: underline;
+}
+.card-title.text-primary {
+  color: #000; /* Replace with your desired shade of blue */
+}
+
+.home-card-icon {
+  width: 30px;
+  height: 30px;
+   transform: translateY(-5px);
+}
+.home-card-icon-colour {
+filter: invert(0.2) sepia(2) saturate(50) hue-rotate(190deg);
+}
+
+.favorite-icon {
+    display: none;
+    position: absolute;
+    top: 10px;
+    right: 10px;
+}
+
+/* Only show the favorite icons when the parent card is being hovered over */
+.feature-card:hover .favorite-icon {
+    display: block;
+}
+.favorite-icon img {
+    filter: brightness(0);
+}
+
+.jumbotron {
+    padding: 3rem 3rem;  /* Reduce vertical padding */
+}
diff --git a/src/main/resources/static/css/merge.css b/src/main/resources/static/css/merge.css
new file mode 100644
index 00000000..349ae19e
--- /dev/null
+++ b/src/main/resources/static/css/merge.css
@@ -0,0 +1,25 @@
+ .list-group-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.filename {
+  flex-grow: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin-right: 10px;
+}
+
+.arrows {
+  flex-shrink: 0;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.move-up span,
+.move-down span {
+  font-weight: bold;
+  font-size: 1.2em;
+}
diff --git a/src/main/resources/static/css/navbar.css b/src/main/resources/static/css/navbar.css
new file mode 100644
index 00000000..60b612c5
--- /dev/null
+++ b/src/main/resources/static/css/navbar.css
@@ -0,0 +1,42 @@
+.main-icon {
+	width: 36px;
+	height: 36px;
+	vertical-align: middle;
+	transform: translateY(-2px);
+}
+
+.icon {
+	width: 16px;
+	height: 16px;
+	vertical-align: middle;
+	transform: translateY(-2px);
+}
+
+.icon+.icon {
+	margin-left: -4px;
+}
+
+.icon-text {
+	margin-left: 4px;
+}
+
+.nav-item-separator {
+	position: relative;
+	margin: 0 4px; /* Adjust the margin as needed */
+}
+
+.nav-item-separator::before {
+	content: '';
+	position: absolute;
+	left: 0;
+	top: 10%; /* Adjust the top and bottom margins as needed */
+	bottom: 10%;
+	width: 1px;
+	background-color: #ccc; /* Adjust the color as needed */
+}
+
+.navbar-icon {
+	width: 20px;
+	height: 20px;
+	transform: translateY(-2px);
+}
\ No newline at end of file
diff --git a/src/main/resources/static/images/heart-fill.svg b/src/main/resources/static/images/heart-fill.svg
deleted file mode 100644
index 517f2f7c..00000000
--- a/src/main/resources/static/images/heart-fill.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="50px" height="50px" viewBox="-8 -4 32 19">
-  <path stroke="#007bff" fill="#007bff" d="M8 1.314C12.438-3.248 23.534 4.735 8 15-7.534 4.736 3.562-3.248 8 1.314z"/>
-</svg>
\ No newline at end of file
diff --git a/src/main/resources/static/images/suit-heart-fill.svg b/src/main/resources/static/images/suit-heart-fill.svg
new file mode 100644
index 00000000..74a0f27a
--- /dev/null
+++ b/src/main/resources/static/images/suit-heart-fill.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="43" height="43" fill="#007bff" class="bi bi-suit-heart-fill" viewBox="0 0 16 16">
+  <path d="M4 1c2.21 0 4 1.755 4 3.92C8 2.755 9.79 1 12 1s4 1.755 4 3.92c0 3.263-3.234 4.414-7.608 9.608a.513.513 0 0 1-.784 0C3.234 9.334 0 8.183 0 4.92 0 2.755 1.79 1 4 1z"/>
+</svg>
\ No newline at end of file
diff --git a/src/main/resources/templates/fragments/common.html b/src/main/resources/templates/fragments/common.html
index 3b654499..eb9ba053 100644
--- a/src/main/resources/templates/fragments/common.html
+++ b/src/main/resources/templates/fragments/common.html
@@ -163,58 +163,7 @@ document.addEventListener("DOMContentLoaded", function () {
             <div id="level">Level: 1</div>
             <img src="favicon.svg" class="player" id="player">
         </div>
-        <style>
-            #game-container {
-                position: relative;
-                width: 100vh;
-                height: 0;
-                padding-bottom: 75%; /* 4:3 aspect ratio */
-                background-color: transparent;
-                margin: auto;
-                overflow: hidden;
-                border: 2px solid black; /* Add border */
-            }
-
-            .pdf, .player, .projectile {
-                position: absolute;
-            }
-            .pdf {
-                width: 50px;
-                height: 50px;
-            }
-            .player {
-                width: 50px;
-                height: 50px;
-            }
-            .projectile {
-                background-color: black  !important;
-                width: 5px;
-                height: 10px;
-            }
-            #score, #level, #lives, #high-score {
-                color: black;
-                font-family: sans-serif;
-                position: absolute;
-                font-size: calc(14px + 0.25vw); /* Reduced font size */
-            }
-            #score {
-                top: 10px;
-                left: 10px;
-            }
-            #lives {
-                top: 10px;
-                left: calc(7vw); /* Adjusted position */
-            }
-            #high-score {
-                top: 10px;
-                left: calc(14vw); /* Adjusted position */
-            }
-            #level {
-                top: 10px;
-                right: 10px;
-            }
-
-        </style>
+        <link rel="stylesheet" href="css/game.css">
     </dialog>
 </th:block>
 
diff --git a/src/main/resources/templates/fragments/errorBannerPerPage.html b/src/main/resources/templates/fragments/errorBannerPerPage.html
index c7d492a4..2516b929 100644
--- a/src/main/resources/templates/fragments/errorBannerPerPage.html
+++ b/src/main/resources/templates/fragments/errorBannerPerPage.html
@@ -1,23 +1,5 @@
 <th:block th:fragment="errorBannerPerPage">
 
-  <style scoped>
-    #github-button,
-    #discord-button {
-      display: inline-block;
-      padding: 1rem 2rem;
-      background-color: #008CBA;
-      color: #fff;
-      text-align: center;
-      text-decoration: none;
-      border-radius: 3rem;
-      transition: all 0.3s ease-in-out;
-    }
-
-    #github-button:hover,
-    #discord-button:hover {
-      background-color: #005b7f;
-    }
-  </style>
   
   <div id="errorContainer" class="alert alert-danger alert-dismissible fade show" role="alert" style="display: none;">
   <h4 class="alert-heading">Error</h4>
@@ -40,105 +22,7 @@
 </div>
 
 <!-- Help Modal -->
-   <style scoped>
-   #errorContainer {
-      margin: 20px; /* adjust this value as needed */
-    }
-    
-	#helpModalDialog {
-        width: 90%;
-        max-width: 800px;
-    }
-      #helpModal h1 {
-        text-align: center;
-        margin-top: 10%;
-      }
-
-      #helpModal p {
-
-        text-align: center;
-        margin-top: 2em;
-      }
-
-
-        #helpModal .button:hover {
-          background-color: #005b7f;
-        }
-  
-      #helpModal .features-container {
-        display: grid;
-        grid-template-columns: repeat(auto-fill, minmax(21rem, 3fr));
-        gap: 25px 30px;
-      }
-
-      #helpModal .feature-card {
-        border: 1px solid rgba(0, 0, 0, .125);
-        border-radius: 0.25rem;
-        padding: 1.25rem;
-        display: flex;
-        flex-direction: column;
-        align-items: flex-start;
-      }
-
-      #helpModal .feature-card .card-text {
-        flex: 1;
-      }
-      
-#support-section {
-background-color: #f9f9f9;
-padding: 4rem;
-  margin-top: 1rem;
-text-align: center;
-}
-
-#support-section h1 {
-margin-top: 0;
-}
-
-#support-section p {
-margin-top: 0;
-}
-
-#button-group {
-  display: flex;
-  justify-content: center;
-  flex-wrap: wrap;
-}
-
-#github-button, #discord-button {
-  display: inline-block;
-  padding: 1rem 2rem;
-  margin: 1rem;
-  background-color: #008CBA;
-  color: #fff;
-  font-size: 1.2rem;
-  text-align: center;
-  text-decoration: none;
-  border-radius: 3rem;
-  transition: all 0.3s ease-in-out;
-}
-
-#github-button:hover, #discord-button:hover, #home-button:hover {
-  background-color: #005b7f;
-}
-
-#home-button {
-  display: block;
-        width: 200px;
-        height: 50px;
-        margin: 2em auto;
-        background-color: #008CBA;
-        color: white;
-        text-align: center;
-        line-height: 50px;
-        text-decoration: none;
-        font-weight: bold;
-        border-radius: 25px;
-  transition: all 0.3s ease-in-out;
-}
-
-      
-    </style>
+<link rel="stylesheet" href="css/errorBanner.css">
     
 	<div class="modal fade" id="helpModal" tabindex="-1" role="dialog" aria-labelledby="helpModalLabel" aria-hidden="true">
 	  <div class="modal-dialog modal-dialog-centered" role="document" id="helpModalDialog">
diff --git a/src/main/resources/templates/fragments/footer.html b/src/main/resources/templates/fragments/footer.html
index a7b45200..0bff58e6 100644
--- a/src/main/resources/templates/fragments/footer.html
+++ b/src/main/resources/templates/fragments/footer.html
@@ -1,9 +1,9 @@
 <div th:fragment="footer">	
 	<footer id="footer" class="text-center py-3">
-        <a href="https://github.com/Frooodle/Stirling-PDF" target="_blank" class="mx-1"><img src="images/github.svg"></img></a>
-        <a href="https://hub.docker.com/r/frooodle/s-pdf" target="_blank" class="mx-1"><img src="images/docker.svg"></img></a>
-        <a href="https://discord.gg/Cn8pWhQRxZ" target="_blank" class="mx-1"><img src="images/discord.svg"></img></a>
-        <a href="https://github.com/sponsors/Frooodle" target="_blank" class="mx-1"><img src="images/heart-fill.svg"></img></a>
+        <a href="https://github.com/Frooodle/Stirling-PDF" target="_blank" class="mx-1" title="Visit Github Repository"><img src="images/github.svg"></img></a>
+		<a href="https://hub.docker.com/r/frooodle/s-pdf" target="_blank" class="mx-1" title="See Docker Hub"><img src="images/docker.svg"></img></a>
+		<a href="https://discord.gg/Cn8pWhQRxZ" target="_blank" class="mx-1" title="Join Discord Channel"><img src="images/discord.svg"></img></a>
+		<a href="https://github.com/sponsors/Frooodle" target="_blank" class="mx-1" title="Donate"><img src="images/suit-heart-fill.svg"></img></a>
         <div th:if="${@appName} != 'Stirling PDF'" class="mt-2" style="color: grey;">Powered by Stirling PDF</div>
     </footer>
 </div>
\ No newline at end of file
diff --git a/src/main/resources/templates/fragments/navbar.html b/src/main/resources/templates/fragments/navbar.html
index 8dbb3a45..c2f88dff 100644
--- a/src/main/resources/templates/fragments/navbar.html
+++ b/src/main/resources/templates/fragments/navbar.html
@@ -74,51 +74,7 @@ function compareVersions(version1, version2) {
   checkForUpdate();
 </script>
 
-<style>
-
-    .main-icon {
-        width: 36px;
-        height: 36px;
-        vertical-align: middle;
-        transform: translateY(-2px);
-    }
-    .icon {
-        width: 16px;
-        height: 16px;
-        vertical-align: middle;
-        transform: translateY(-2px);
-    }
-
-    .icon + .icon {
-        margin-left: -4px;
-    }
-
-    .icon-text {
-        margin-left: 4px;
-    }
-
-.nav-item-separator {
-    position: relative;
-    margin: 0 4px; /* Adjust the margin as needed */
-}
-
-.nav-item-separator::before {
-    content: '';
-    position: absolute;
-    left: 0;
-    top: 10%; /* Adjust the top and bottom margins as needed */
-    bottom: 10%;
-    width: 1px;
-    background-color: #ccc; /* Adjust the color as needed */
-}
-.navbar-icon {
-  width: 20px;
-  height: 20px;
-   transform: translateY(-2px);
-}
-
-
-</style>
+<link rel="stylesheet" href="css/navbar.css">
 
     <nav class="navbar navbar-expand-lg navbar-light bg-light">
         <div class="container ">
diff --git a/src/main/resources/templates/home.html b/src/main/resources/templates/home.html
index 659220bf..001bce45 100644
--- a/src/main/resources/templates/home.html
+++ b/src/main/resources/templates/home.html
@@ -4,79 +4,7 @@
 
 <th:block th:insert="~{fragments/common :: head(title='')}"></th:block>
 
-<style>
-.features-container {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(21rem, 3fr));
-    gap: 25px 30px;
-}
-
-.feature-card {
-    border: 2px solid rgba(0, 0, 0, .25);
-    border-radius: 0.25rem;
-    padding: 1.25rem;
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    background: rgba(13, 110, 253, 0.05); 
-    transition: transform 0.3s, border 0.3s;
-}
-
-.feature-card a {
-    text-decoration: none;
-    color: inherit;
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    height: 100%;
-}
-
-.feature-card .card-text {
-    flex: 1;
-}
-
-.feature-card:hover {
-    border: 1px solid rgba(0, 0, 0, .5);
-    cursor: pointer;
-    transform: scale(1.1);
-}
-
-.feature-card:hover .card-title {
-    text-decoration: underline;
-}
-.card-title.text-primary {
-  color: #000; /* Replace with your desired shade of blue */
-}
-
-.home-card-icon {
-  width: 30px;
-  height: 30px;
-   transform: translateY(-5px);
-}
-.home-card-icon-colour {
-filter: invert(0.2) sepia(2) saturate(50) hue-rotate(190deg);
-}
-
-.favorite-icon {
-    display: none;
-    position: absolute;
-    top: 10px;
-    right: 10px;
-}
-
-/* Only show the favorite icons when the parent card is being hovered over */
-.feature-card:hover .favorite-icon {
-    display: block;
-}
-.favorite-icon img {
-    filter: brightness(0);
-}
-
-.jumbotron {
-    padding: 3rem 3rem;  /* Reduce vertical padding */
-}
-
-</style>
+<link rel="stylesheet" href="css/home.css">
 
 <body>
 
diff --git a/src/main/resources/templates/merge-pdfs.html b/src/main/resources/templates/merge-pdfs.html
index 179194c1..e10952d5 100644
--- a/src/main/resources/templates/merge-pdfs.html
+++ b/src/main/resources/templates/merge-pdfs.html
@@ -26,38 +26,7 @@
                                 <button type="submit" id="submitBtn" class="btn btn-primary" th:text="#{merge.submit}"></button>
                             </div>
                         </form>
-                        <style>
-                         
-              .list-group-item {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.filename {
-  flex-grow: 1;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  margin-right: 10px;
-}
-
-.arrows {
-  flex-shrink: 0;
-  display: flex;
-  justify-content: flex-end;
-}
-
-.move-up span,
-.move-down span {
-  font-weight: bold;
-  font-size: 1.2em;
-}
-
-
-
-
-                        </style>
+                        <link rel="stylesheet" href="css/merge.css">
                         <script>
                         document.getElementById("fileInput-input").addEventListener("change", function() {
                         	  var files = this.files;