Merge pull request #28 from guerreror58/footer-fixes

Fixed footer issues.

Author: tomatrow

app/components/Footer.tsx

@@ -1,12 +1,19 @@
 const Footer = () => {
 	return (
-		<footer className="footer bg-neutral text-neutral-content items-center p-4">
-			<aside className="grid-flow-col items-center">
-				<img src="/images/logo.jpeg" className="w-8 rounded" />
-				<p>© Copyright {new Date().getFullYear()}. All rights reserved</p>
+		<footer className="footer flex justify-between bg-neutral text-neutral-content p-4">
+			<aside className="flex devx-logo-copyright">
+				<img src="/images/logo.jpeg" className="w-8 rounded mr-2" />
+				<p className="flex items-center">
+					© Copyright {new Date().getFullYear()}. All rights reserved
+				</p>
 			</aside>
-			<nav className="grid-flow-col gap-4 md:place-self-center md:justify-self-end">
-				<a href="https://www.youtube.com/@sddevx" aria-label="Youtube">
+			<nav className="flex">
+				<a
+					href="https://www.youtube.com/@sddevx"
+					aria-label="Youtube"
+					className="mr-4"
+					target="_blank"
+				>
 					<svg
 						xmlns="http://www.w3.org/2000/svg"
 						width="24"
@@ -18,7 +25,7 @@ const Footer = () => {
 					</svg>
 				</a>
 
-				<a href="https://lu.ma/DEVxSD" aria-label="Luma">
+				<a href="https://lu.ma/DEVxSD" aria-label="Luma" className="mr-4" target="_blank">
 					<svg
 						xmlns="http://www.w3.org/2000/svg"
 						fill="none"
@@ -34,7 +41,12 @@ const Footer = () => {
 					</svg>
 				</a>
 
-				<a href="https://www.meetup.com/san-diego-devx/" aria-label="Meetup">
+				<a
+					href="https://www.meetup.com/san-diego-devx/"
+					aria-label="Meetup"
+					className="mr-4"
+					target="_blank"
+				>
 					<svg
 						xmlns="http://www.w3.org/2000/svg"
 						width="24"
@@ -49,7 +61,12 @@ const Footer = () => {
 					</svg>
 				</a>
 
-				<a href="https://discord.gg/J3YrrErwjc" aria-label="Discord" className="mt-[-3px]">
+				<a
+					href="https://discord.gg/J3YrrErwjc"
+					aria-label="Discord"
+					className="mr-4"
+					target="_blank"
+				>
 					<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24">
 						<path
 							fill="currentColor"
@@ -58,7 +75,7 @@ const Footer = () => {
 					</svg>
 				</a>
 
-				<a href="https://github.com/sddevx" aria-label="Github" className="mt-[-1px]">
+				<a href="https://github.com/sddevx" aria-label="Github" target="_blank">
 					<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24">
 						<path
 							fill="currentColor"

app/globals.css

@@ -23,6 +23,32 @@ main {
 	flex: 1;
 }
 
-footer {
+.footer {
+	column-gap: unset;
+	row-gap: unset;
+	line-height: unset;
+	flex-direction: column-reverse;
+	place-items: unset;
 	position: relative;
+	grid-auto-flow: unset;
+	width: unset;
 }
+
+.devx-logo-copyright {
+	margin-top: 2.313rem;
+}
+
+.footer > * {
+	place-items: center;
+	gap: unset;
+}
+
+@media (min-width: 768px) {
+	.footer {
+		flex-direction: row;
+	}
+
+	.devx-logo-copyright {
+		margin-top: 0;
+	}
+}