Merge pull request #67 from ProjectSegfault/fixes

tweaks and fixes

src/lib/Card/CardOuter.svelte

@@ -5,8 +5,8 @@
 <style>
 	div {
 		display: flex;
-		flex-direction: column;
 		gap: 2rem;
-		flex-flow: row wrap;
+		flex-direction: row;
+		flex-wrap: wrap;
 	}
 </style>

src/routes/+page.svelte

@@ -71,7 +71,7 @@
 </div>
 
 <noscript>
-	<div class="flex justify-center text-center text-red">
+	<div class="no-js">
 		<Note content="Announcements do not work without JavaScript enabled." />
 	</div>
 	<style>
@@ -147,4 +147,8 @@
 		align-items: center;
 		gap: 8px;
 	}
+
+	.no-js {
+		@apply flex justify-center text-center text-red;
+	}
 </style>

src/routes/services/+page.svelte

@@ -20,9 +20,8 @@
 
 <h1>Our services</h1>
 <CardOuter>
-	<div class="container">
+	<div class="wrapper">
 		{#each groups as group}
-			<div class="container-inner">
 			<h2>{group.category}</h2>
 			<div class="items">
 				{#each group.values as item}
@@ -33,13 +32,13 @@
 						>
 							<LinksOuter>
 								<Link url={item.website} class="web">
-										<div class="projectWebsite">
+									<div class="withText">
 										<div class="i-fa6-solid:globe" />
 										<span>Instance link</span>
 									</div>
 								</Link>
 								<Link url={item.projectWebsite} class="link">
-										<div class="projectWebsite">
+									<div class="withText">
 										<div class="i-fa6-solid:circle-info" />
 										<span>Project website</span>
 									</div>
@@ -48,14 +47,12 @@
 						</CardInner>
 				{/each}
 			</div>
-			</div>
 		{/each}
 	</div>
 </CardOuter>
 
 <style>
-	.container-inner,
+	.wrapper {
-	.container {
 		display: flex;
 		flex-direction: column;
 	}
@@ -63,11 +60,11 @@
 	.items {
 		display: flex;
 		flex-direction: row;
-		flex-flow: row wrap;
+		flex-wrap: wrap;
 		gap: 2rem;
 	}
 
-	.projectWebsite {
+	.withText {
 		display: flex;
 		align-items: center;
 		gap: 4px;