Merge pull request #24 from torontojs/feat/siteFooterStyling

feat: changed tailwind styling to plain css

src/components/SiteFooter/index.astro

@@ -1,10 +1,14 @@
-<nav aria-label="Secondary navigation">
-	<ul class="flex gap-2 justify-center items-center p-3">
+---
+import './styles.css';
+---
+
+<nav aria-label="Secondary navigation" id="bottom-nav">
+	<ul>
 		<li>
 			<a
 				href="https://join.slack.com/t/torontojs/shared_invite/zt-zgi31snl-omO3tXSZ0Q7zqN9WBQSf8Q"
 				aria-label="Join Slack"
-				class="inline-flex items-center gap-4 break-words ml-3 flex-wrap"
+				class="footer-items"
 				target="_blank"
 			>
 				Join Slack
@@ -14,7 +18,7 @@
 		<a
 			href="https://guild.host/torontojs"
 			aria-label="Join us on Guild"
-			class="inline-flex items-center gap-4 break-words ml-3 flex-wrap"
+			class="footer-items"
 			target="_blank"
 		>
 			Join us on Guild
@@ -24,7 +28,7 @@
 		<a
 			href="https://github.com/torontojs"
 			aria-label="Github link to contribute"
-			class="inline-flex items-center gap-4 break-words ml-3 flex-wrap"
+			class="footer-items"
 			target="_blank"
 		>
 			Contribute
@@ -34,7 +38,7 @@
 		<a
 			href="https://docs.google.com/forms/d/e/1FAIpQLSc_ZA0ElHLsMedjdQjZechw5H1RJNhG1DZxtFTsqhkdut3eFg/viewform?usp=sf_link"
 			aria-label="Give a talk"
-			class="inline-flex items-center gap-4 break-words ml-3 flex-wrap"
+			class="footer-items"
 			target="_blank"
 		>
 			Give a Talk
@@ -44,7 +48,7 @@
 		<a
 			href="/codeofc"
 			aria-label="Code of Conduct"
-			class="inline-flex items-center gap-4 break-words ml-3 flex-wrap"
+			class="footer-items"
 			target="_blank"
 		>
 			Code of Conduct
@@ -54,7 +58,7 @@
 		<a
 			href="/report"
 			aria-label="Report Abuse"
-			class="inline-flex items-center gap-4 break-words ml-3"
+			class="footer-items"
 			target="_blank"
 		>
 			Report Abuse

src/components/SiteFooter/styles.css

@@ -0,0 +1,16 @@
+ul {
+	display: flex;
+	gap: 0.5rem;
+	justify-content: center;
+	align-items: center;
+	padding: 0.75rem;
+}
+
+#bottom-nav .footer-items{
+	display: inline-flex;
+	align-items: center;
+	gap: 1rem;
+	margin-left: 0.75rem;
+	flex-wrap: wrap;
+	overflow-wrap: break-word;
+}