From 0251aaf2bc5831397e216e305d979ac9a26415f4 Mon Sep 17 00:00:00 2001
From: xue <behicsakar@gmail.com>
Date: Thu, 9 Jan 2025 11:31:34 +0300
Subject: [PATCH] refactor: comment out unused styles and add aria-labels for
 accessibility

---
 src/lib/components/organisms/About.svelte     | 30 ++++-----
 .../components/organisms/BCSponsors.svelte    | 30 +++++++--
 src/lib/components/organisms/CSponsors.svelte | 19 +++---
 src/lib/components/organisms/FAQ.svelte       | 18 +++---
 src/lib/components/organisms/Footer.svelte    | 62 ++++++++++---------
 .../components/organisms/Testimonials.svelte  |  6 +-
 src/routes/(blog-article)/+layout.svelte      | 12 ++--
 7 files changed, 102 insertions(+), 75 deletions(-)

diff --git a/src/lib/components/organisms/About.svelte b/src/lib/components/organisms/About.svelte
index a741994..3632f1b 100644
--- a/src/lib/components/organisms/About.svelte
+++ b/src/lib/components/organisms/About.svelte
@@ -75,19 +75,19 @@
 			}
 		}
 
-		.socials {
-			display: flex;
-			align-items: center;
-			gap: 15px;
+		// .socials {
+		// 	display: flex;
+		// 	align-items: center;
+		// 	gap: 15px;
 
-			@mixin for-phone-only {
-				justify-content: center;
-				margin-bottom: 10px;
-				span {
-					display: none;
-				}
-			}
-		}
+		// 	@mixin for-phone-only {
+		// 		justify-content: center;
+		// 		margin-bottom: 10px;
+		// 		span {
+		// 			display: none;
+		// 		}
+		// 	}
+		// }
 
 		.image {
 			width: 100%;
@@ -103,9 +103,9 @@
 		font-size: 1.2em;
 	}
 
-	.github {
-		margin-left: 5px;
-	}
+	// .github {
+	// 	margin-left: 5px;
+	// }
 
 	a {
 		transition: all 0.2s ease-in-out;
diff --git a/src/lib/components/organisms/BCSponsors.svelte b/src/lib/components/organisms/BCSponsors.svelte
index 9af2b91..dc295f7 100644
--- a/src/lib/components/organisms/BCSponsors.svelte
+++ b/src/lib/components/organisms/BCSponsors.svelte
@@ -3,7 +3,12 @@
 		<h2>Powered by Growing Companies Worldwide</h2>
 		<div class="sponsor-container">
 			<div>
-				<a href="https://www.cloudflare.com" target="_blank" rel="noopener noreferrer">
+				<a
+					href="https://www.cloudflare.com"
+					target="_blank"
+					rel="noopener noreferrer"
+					aria-label="Cloudflare"
+				>
 					<svg
 						fill="var(--color--text)"
 						width="58px"
@@ -26,7 +31,12 @@
 				</a>
 			</div>
 			<div>
-				<a href="https://www.digitalocean.com" target="_blank" rel="noopener noreferrer">
+				<a
+					href="https://www.digitalocean.com"
+					target="_blank"
+					rel="noopener noreferrer"
+					aria-label="DigitalOcean"
+				>
 					<svg
 						width="52px"
 						height="52px"
@@ -50,7 +60,12 @@
 				</a>
 			</div>
 			<div>
-				<a href="https://www.backblaze.com" target="_blank" rel="noopener noreferrer">
+				<a
+					href="https://www.backblaze.com"
+					target="_blank"
+					rel="noopener noreferrer"
+					aria-label="Backblaze"
+				>
 					<svg
 						width="50px"
 						height="50px"
@@ -71,7 +86,7 @@
 				</a>
 			</div>
 			<div>
-				<a href="https://nodejs.org" target="_blank" rel="noopener noreferrer">
+				<a href="https://nodejs.org" target="_blank" rel="noopener noreferrer" aria-label="Node.js">
 					<svg
 						width="50px"
 						height="50px"
@@ -93,7 +108,12 @@
 				</a>
 			</div>
 			<div>
-				<a href="https://appwrite.io" target="_blank" rel="noopener noreferrer">
+				<a
+					href="https://appwrite.io"
+					target="_blank"
+					rel="noopener noreferrer"
+					aria-label="Appwrite"
+				>
 					<svg
 						xmlns="http://www.w3.org/2000/svg"
 						width="45"
diff --git a/src/lib/components/organisms/CSponsors.svelte b/src/lib/components/organisms/CSponsors.svelte
index f3a515c..d8ee83c 100644
--- a/src/lib/components/organisms/CSponsors.svelte
+++ b/src/lib/components/organisms/CSponsors.svelte
@@ -36,7 +36,12 @@
 				</a>
 			</div>
 			<div>
-				<a href="https://facebook.com" target="_blank" rel="noopener noreferrer">
+				<a
+					href="https://facebook.com"
+					target="_blank"
+					rel="noopener noreferrer"
+					aria-label="Facebook"
+				>
 					<svg
 						width="68px"
 						height="68px"
@@ -56,7 +61,7 @@
 				</a>
 			</div>
 			<div>
-				<a href="https://tiktok.com" target="_blank" rel="noopener noreferrer">
+				<a href="https://tiktok.com" target="_blank" rel="noopener noreferrer" aria-label="TikTok">
 					<svg
 						fill="var(--color--text)"
 						width="50px"
@@ -75,7 +80,7 @@
 				</a>
 			</div>
 			<div>
-				<a href="https://google.com" target="_blank" rel="noopener noreferrer">
+				<a href="https://google.com" target="_blank" rel="noopener noreferrer" aria-label="Google">
 					<svg
 						width="45px"
 						height="45px"
@@ -188,7 +193,7 @@
 				</a>
 			</div>
 			<div>
-				<a href="https://huawei.com" target="_blank" rel="noopener noreferrer">
+				<a href="https://huawei.com" target="_blank" rel="noopener noreferrer" aria-label="Huawei">
 					<svg
 						xmlns="http://www.w3.org/2000/svg"
 						width="50"
@@ -221,9 +226,9 @@
 			text-align: center;
 		}
 
-		.second-sponsor {
-			margin-top: 80px;
-		}
+		// .second-sponsor {
+		// 	margin-top: 80px;
+		// }
 
 		.sponsor-container {
 			display: grid;
diff --git a/src/lib/components/organisms/FAQ.svelte b/src/lib/components/organisms/FAQ.svelte
index 8573e13..952cc97 100644
--- a/src/lib/components/organisms/FAQ.svelte
+++ b/src/lib/components/organisms/FAQ.svelte
@@ -113,10 +113,8 @@
 						}}
 						id="accordion-button-5"
 						aria-expanded={item?.isOpen}
-						><span class="accordion-title">{item?.title}</span><span
-							class="icon"
-							aria-hidden="true"
-						/></button
+						><span class="accordion-title">{item?.title}</span><span class="icon" aria-hidden="true"
+						></span></button
 					>
 					<div class="accordion-content">
 						<p>{@html item?.content}</p>
@@ -129,7 +127,7 @@
 
 <style lang="scss">
 	@use '../../../lib/scss/breakpoints.scss';
-	
+
 	#faq {
 		display: flex;
 		flex-direction: column;
@@ -143,9 +141,9 @@
 			padding: 40px 0 50px;
 		}
 
-		.hello {
-			text-align: center;
-		}
+		// .hello {
+		// 	text-align: center;
+		// }
 	}
 
 	$yellow: var(--color--primary);
@@ -254,7 +252,9 @@
 				opacity: 0;
 				max-height: 0;
 				overflow: hidden;
-				transition: opacity 200ms linear, max-height 200ms linear;
+				transition:
+					opacity 200ms linear,
+					max-height 200ms linear;
 				will-change: opacity, max-height;
 
 				p {
diff --git a/src/lib/components/organisms/Footer.svelte b/src/lib/components/organisms/Footer.svelte
index 49e3ac6..818253a 100644
--- a/src/lib/components/organisms/Footer.svelte
+++ b/src/lib/components/organisms/Footer.svelte
@@ -164,7 +164,7 @@
 				</div>
 			</div>
 			<div class="footer-logo">
-				<a href="/">
+				<a href="/" aria-label="LangX">
 					<svg xmlns="http://www.w3.org/2000/svg" width="100.852" height="21.544">
 						<path
 							fill="#000"
@@ -242,35 +242,37 @@
 					grid-row-start: 1;
 				}
 
-				.credits {
-					position: relative;
-					background-color: var(--color--yellow);
-					border-radius: 5px;
-					padding: 15px 10px;
-					font-weight: 400;
-					font-size: 80%;
-					color: var(--color--text);
-					margin-top: 1rem;
-					box-shadow: 10px 10px 3px rgba(0, 0, 0, 0.5), 0 0 8px rgba(0, 0, 0, 0.5);
-					max-width: 400px;
-
-					@mixin for-phone-only {
-						display: none;
-					}
-
-					a {
-						color: var(--color--text);
-						text-decoration: none;
-						transition: all 0.2s ease-in-out;
-						font-weight: bold;
-
-						&:hover {
-							color: var(--color--text);
-							filter: drop-shadow(0px 0px 3px var(--color--text-shade));
-							transition: color 0.5s ease-in-out;
-						}
-					}
-				}
+				// .credits {
+				// 	position: relative;
+				// 	background-color: var(--color--yellow);
+				// 	border-radius: 5px;
+				// 	padding: 15px 10px;
+				// 	font-weight: 400;
+				// 	font-size: 80%;
+				// 	color: var(--color--text);
+				// 	margin-top: 1rem;
+				// 	box-shadow:
+				// 		10px 10px 3px rgba(0, 0, 0, 0.5),
+				// 		0 0 8px rgba(0, 0, 0, 0.5);
+				// 	max-width: 400px;
+
+				// 	@mixin for-phone-only {
+				// 		display: none;
+				// 	}
+
+				// 	a {
+				// 		color: var(--color--text);
+				// 		text-decoration: none;
+				// 		transition: all 0.2s ease-in-out;
+				// 		font-weight: bold;
+
+				// 		&:hover {
+				// 			color: var(--color--text);
+				// 			filter: drop-shadow(0px 0px 3px var(--color--text-shade));
+				// 			transition: color 0.5s ease-in-out;
+				// 		}
+				// 	}
+				// }
 			}
 
 			.links-wrapper {
diff --git a/src/lib/components/organisms/Testimonials.svelte b/src/lib/components/organisms/Testimonials.svelte
index 4c1c98d..2d2cb93 100644
--- a/src/lib/components/organisms/Testimonials.svelte
+++ b/src/lib/components/organisms/Testimonials.svelte
@@ -180,7 +180,7 @@
 				</div>
 			</div>
 		{/each}
-		<button id="next" on:click={handleNext}>
+		<button id="next" on:click={handleNext} aria-label="Next">
 			<svg
 				xmlns="http://www.w3.org/2000/svg"
 				fill="none"
@@ -191,7 +191,7 @@
 				<path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
 			</svg>
 		</button>
-		<button id="prev" on:click={handlePrev}>
+		<button id="prev" on:click={handlePrev} aria-label="Previous">
 			<svg
 				xmlns="http://www.w3.org/2000/svg"
 				fill="none"
@@ -214,7 +214,7 @@
 					active = index;
 					loadShow();
 				}}
-			/>
+			></span>
 		{/each}
 	</div>
 </section>
diff --git a/src/routes/(blog-article)/+layout.svelte b/src/routes/(blog-article)/+layout.svelte
index 46176b5..81d6854 100644
--- a/src/routes/(blog-article)/+layout.svelte
+++ b/src/routes/(blog-article)/+layout.svelte
@@ -153,12 +153,12 @@
 			box-shadow: var(--image-shadow);
 			border-radius: 6px;
 
-			img {
-				width: 100%;
-				height: 100%;
-				max-height: 400px;
-				object-fit: cover;
-			}
+			// img {
+			// 	width: 100%;
+			// 	height: 100%;
+			// 	max-height: 400px;
+			// 	object-fit: cover;
+			// }
 		}
 
 		:global(.cover-image img) {