From f31b85350056b2cb48ff019e73c7768ba091ee9e Mon Sep 17 00:00:00 2001
From: neon443 <69979447+neon443@users.noreply.github.com>
Date: Thu, 3 Oct 2024 19:47:54 +0100
Subject: [PATCH] footer:   sticks to bottom of page   vertically centered
 links   links have hovr animation

fixed margin/padding issues
h5 now slightly bolder 100->200
contentpush smaller
apps gap smaller on mbile
padding smaller on mobile
news bold now
removed 3 footers
remove .nova
---
 .nova/Configuration.json |  3 --
 index.html               | 17 ++++++----
 style.css                | 71 ++++++++++++++++++++++++++++------------
 3 files changed, 61 insertions(+), 30 deletions(-)
 delete mode 100644 .nova/Configuration.json

diff --git a/.nova/Configuration.json b/.nova/Configuration.json
deleted file mode 100644
index 2c7a65d..0000000
--- a/.nova/Configuration.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "workspace.color" : 1
-}
diff --git a/index.html b/index.html
index 778a81c..9aaf3de 100644
--- a/index.html
+++ b/index.html
@@ -26,6 +26,7 @@
 			<div class="barItem"><a href="mailto:neons443@outlook.com">Contact</a></div>
 		</div>
 		<div class="contentPush"></div>
+		<div class="content">
 		<h2 class="center">
 			<b>
 				Welcome
@@ -74,16 +75,20 @@
 				<span class="label">Sandboxels</span>
 			</a>
 		</div>
-		<h3>News</h3>
+		<h3><b>News</b></h3>
 		<p>The redesign everyone has been waiting for is now here!</p>
-		<div class="footer">
+		</div>
+		<footer>
 			<h5 class="center">Made with &#60;&#47;&#62; by neon443</h5>
 			<a href="https://notbyai.fyi">
 				<img class="themednotByAI" src="./images/notByAI.svg" alt="">
 			</a>
-		</div>
-		<div class="footer"></div>
-		<div class="footer"></div>
-		<div class="footer"></div>
+			<a class="textLinks" href="https://github.com/neon443/">
+				GitHub Homepage
+			</a>
+			<a class="textLinks" href="https://github.com/neon443/neon443.github.io/issues/new/">
+				Create an Issue
+			</a>
+		</footer>
 	</body>
 </html>
diff --git a/style.css b/style.css
index dc6ecb7..a08986d 100644
--- a/style.css
+++ b/style.css
@@ -37,31 +37,62 @@ a {
 }
 body {
 	background-color: #ddd;
+	margin: 0;
+	display: flex;
+	flex-direction: column;
+	min-height: 100vh;
+}
+.content {
+	flex: 1;
+	padding: 0px 20px;
+}
+footer {
+	margin-top: 20px;
+	background-color: #ccc;
+	padding: 10px;
+	text-align: center;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	flex-direction: column;
+	text-align: center;
+}
+footer .textLinks {
+	text-decoration: none;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	flex-direction: column;
+	text-align: center;
+}
+footer .textLinks:hover {
+	color: #ff6200;
+	font-weight: 600;
+}
+footer * {
+	margin: 5px 0;
 }
 p {
-	margin: 10px 0px;
 	font-size: 20px;
-	padding: 0px 20px;
 }
 h1 {
 	font-size: 40px;
 	font-weight: 750;
-	padding: 0px 20px;
 }
 h2 {
+	margin-top: 10px;
 	font-size: 30px;
 	font-weight: 400;
-	padding: 0px 20px;
 }
 h3 {
+	margin-top: 10px;
 	font-size: 25px;
 	font-weight: 400;
-	padding: 0px 20px;
 }
 h5 {
+	margin-top: 10px;
 	font-size: 25px;
-	font-weight: 100;
-	padding: 0px 20px;
+	font-weight: 200;
 }
 .center {
 	text-align: center;
@@ -69,7 +100,7 @@ h5 {
 /* regular text (body, p, b, h*) styles*/
 
 .contentPush {
-	height: 65px;
+	height: 40px;
 	top: 0;
 }
 
@@ -131,7 +162,7 @@ h5 {
 	display: grid;
 	grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); /* Responsive grid */
 	gap: 20px;
-	margin: 20px;
+	margin: 0px;
 	justify-content: center;
 }
 
@@ -168,18 +199,6 @@ h5 {
 	margin-bottom: 5px;
 }
 
-.footer {
-	background-color: rgba(0, 0, 0, 0.2);
-	padding-top: 20px;
-}
-
-.footer img {
-	padding: 20px;
-}
-
-.themednotByAI {
-	content: url("./images/notByAI.svg");
-}
 
 @media (prefers-color-scheme: dark) {
 	* {
@@ -189,6 +208,9 @@ h5 {
 		background-color: #222;
 		color: #ddd;
 	}
+	footer {
+		background-color: #111;
+	}
 	.bar {
 		background-color: rgba(0, 0, 0, 0.5);
 	}
@@ -219,4 +241,11 @@ h5 {
 		height: 80px;
 		border-radius: 20px;
 	}
+	.content {
+		padding: 0 10px;
+	}
+	.homescreen {
+		gap: 10px;
+		margin: 10px;
+	}
 }