css cleanup

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;
+}

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;
+}

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 */
+}

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;
+}

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);
+}