From 4520565f614d457c5dccf97d8e2b0bd6700c5c10 Mon Sep 17 00:00:00 2001
From: Akis <mavrommatisakis@gmail.com>
Date: Sat, 27 Aug 2022 19:37:37 +0300
Subject: [PATCH] tweaks and fixes

---
 src/lib/Card/CardOuter.svelte    |  4 +--
 src/routes/+page.svelte          |  6 +++-
 src/routes/services/+page.svelte | 59 +++++++++++++++-----------------
 3 files changed, 35 insertions(+), 34 deletions(-)

diff --git a/src/lib/Card/CardOuter.svelte b/src/lib/Card/CardOuter.svelte
index 7cf2938..eb21ff1 100644
--- a/src/lib/Card/CardOuter.svelte
+++ b/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>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index e40da8f..67b5ce4 100644
--- a/src/routes/+page.svelte
+++ b/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>
diff --git a/src/routes/services/+page.svelte b/src/routes/services/+page.svelte
index 33d3786..78187ab 100644
--- a/src/routes/services/+page.svelte
+++ b/src/routes/services/+page.svelte
@@ -20,42 +20,39 @@
 
 <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}
-							<CardInner
-								title={item.name}
-								description={item.description}
-								icon={item.icon}
-							>
-								<LinksOuter>
-									<Link url={item.website} class="web">
-										<div class="projectWebsite">
-											<div class="i-fa6-solid:globe" />
-											<span>Instance link</span>
-										</div>
-									</Link>
-									<Link url={item.projectWebsite} class="link">
-										<div class="projectWebsite">
-											<div class="i-fa6-solid:circle-info" />
-											<span>Project website</span>
-										</div>
-									</Link>
-								</LinksOuter>
-							</CardInner>
-					{/each}
-				</div>
+			<h2>{group.category}</h2>
+			<div class="items">
+				{#each group.values as item}
+						<CardInner
+							title={item.name}
+							description={item.description}
+							icon={item.icon}
+						>
+							<LinksOuter>
+								<Link url={item.website} class="web">
+									<div class="withText">
+										<div class="i-fa6-solid:globe" />
+										<span>Instance link</span>
+									</div>
+								</Link>
+								<Link url={item.projectWebsite} class="link">
+									<div class="withText">
+										<div class="i-fa6-solid:circle-info" />
+										<span>Project website</span>
+									</div>
+								</Link>
+							</LinksOuter>
+						</CardInner>
+				{/each}
 			</div>
 		{/each}
 	</div>
 </CardOuter>
 
 <style>
-	.container-inner,
-	.container {
+	.wrapper {
 		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;