refactor: update SCSS import paths and replace @include with @mixin f…

…or consistency
langx · Jan 9, 2025 · afc9abe · afc9abe
1 parent f2bb2d8
commit afc9abe
Show file tree

Hide file tree

Showing 22 changed files with 76 additions and 75 deletions.
diff --git a/src/lib/components/molecules/AnnouncementModal.svelte b/src/lib/components/molecules/AnnouncementModal.svelte
@@ -29,7 +29,7 @@
 {/if}
 
 <style lang="scss">
-	@use '$lib/scss/_themes.scss';
+	@use '../../../lib/scss/_mixins.scss'; // Adjust the path as needed
 
 	.modal {
 		position: fixed;

diff --git a/src/lib/components/organisms/About.svelte b/src/lib/components/organisms/About.svelte
@@ -38,7 +38,7 @@
 </section>
 
 <style lang="scss">
-	@use '$lib/scss/breakpoints.scss';
+	@use '../../../lib/scss/breakpoints.scss';
 
 	#about {
 		position: relative;
@@ -48,7 +48,7 @@
 		justify-content: space-between;
 		padding-bottom: 50px;
 
-		@include for-phone-only {
+		@mixin for-phone-only {
 			grid-template-columns: 1fr;
 			justify-items: center;
 			gap: 20px;
@@ -59,18 +59,18 @@
 			flex-direction: column;
 			gap: 10px;
 			h2 {
-				@include for-phone-only {
+				@mixin for-phone-only {
 					text-align: center;
 				}
 			}
 
 			p {
-				@include for-phone-only {
+				@mixin for-phone-only {
 					text-align: justify;
 				}
 			}
 
-			@include for-phone-only {
+			@mixin for-phone-only {
 				gap: 20px;
 			}
 		}
@@ -80,7 +80,7 @@
 			align-items: center;
 			gap: 15px;
 
-			@include for-phone-only {
+			@mixin for-phone-only {
 				justify-content: center;
 				margin-bottom: 10px;
 				span {
@@ -93,7 +93,7 @@
 			width: 100%;
 			height: 100%;
 
-			@include for-phone-only {
+			@mixin for-phone-only {
 				width: 80%;
 			}
 		}

diff --git a/src/lib/components/organisms/BCSponsors.svelte b/src/lib/components/organisms/BCSponsors.svelte
@@ -115,14 +115,14 @@
 </section>
 
 <style lang="scss">
-	@use '$lib/scss/breakpoints.scss';
+	@use '../../../lib/scss/breakpoints.scss';
 
 	$yellow: var(--color--primary);
 
 	#bcsponsors {
 		padding: 80px 0 80px 0;
 
-		@include for-phone-only {
+		@mixin for-phone-only {
 			padding: 40px 0 50px;
 		}
 
@@ -138,11 +138,11 @@
 			align-items: center;
 			margin-top: 2.5em;
 
-			@include for-tablet-portrait-down {
+			@mixin for-tablet-portrait-down {
 				grid-template-columns: repeat(6, minmax(0, 1fr));
 			}
 
-			@include for-phone-only {
+			@mixin for-phone-only {
 				grid-template-columns: repeat(4, minmax(0, 1fr));
 			}
 
@@ -152,7 +152,7 @@
 				display: flex;
 				justify-content: center;
 
-				@include for-tablet-portrait-down {
+				@mixin for-tablet-portrait-down {
 					grid-column: span 2 / span 2;
 
 					&:nth-child(4) {
@@ -163,7 +163,7 @@
 					}
 				}
 
-				@include for-phone-only {
+				@mixin for-phone-only {
 					&:nth-child(4) {
 						grid-column-start: auto;
 					}

diff --git a/src/lib/components/organisms/CSponsors.svelte b/src/lib/components/organisms/CSponsors.svelte
@@ -206,14 +206,14 @@
 </section>
 
 <style lang="scss">
-	@use '$lib/scss/breakpoints.scss';
+	@use '../../../lib/scss/breakpoints.scss';
 
 	$yellow: var(--color--primary);
 
 	#csponsors {
 		padding: 110px 0 0 0;
 
-		@include for-phone-only {
+		@mixin for-phone-only {
 			padding: 40px 0 50px;
 		}
 
@@ -233,11 +233,11 @@
 			align-items: center;
 			margin-top: 2.5em;
 
-			@include for-tablet-portrait-down {
+			@mixin for-tablet-portrait-down {
 				grid-template-columns: repeat(7, minmax(0, 1fr));
 			}
 
-			@include for-phone-only {
+			@mixin for-phone-only {
 				grid-template-columns: repeat(4, minmax(0, 1fr));
 			}
 
@@ -247,7 +247,7 @@
 				display: flex;
 				justify-content: center;
 
-				@include for-tablet-portrait-down {
+				@mixin for-tablet-portrait-down {
 					grid-column: span 2 / span 2;
 
 					&:nth-child(4) {
@@ -258,7 +258,7 @@
 					//}
 				}
 
-				@include for-phone-only {
+				@mixin for-phone-only {
 					&:nth-child(4) {
 						grid-column-start: auto;
 					}

diff --git a/src/lib/components/organisms/ContentSection.svelte b/src/lib/components/organisms/ContentSection.svelte
@@ -69,7 +69,7 @@
 			place-items: center;
 		}
 
-		@include for-tablet-landscape-up {
+		@mixin for-tablet-landscape-up {
 			&.left {
 				.title-area {
 					order: 1;
@@ -98,7 +98,7 @@
 				}
 			}
 		}
-		@include for-tablet-portrait-down {
+		@mixin for-tablet-portrait-down {
 			flex-direction: column;
 		}
 	}

diff --git a/src/lib/components/organisms/CookiePolicy.svelte b/src/lib/components/organisms/CookiePolicy.svelte
@@ -53,7 +53,7 @@
 </section>
 
 <style lang="scss">
-	@use '$lib/scss/breakpoints.scss';
+	@use '../../../lib/scss/breakpoints.scss';
 
 	#policy {
 		position: relative;
@@ -65,7 +65,7 @@
 		max-width: 800px; /* Limit the width of the text */
 		margin: 0 auto; /* Center the text block */
 
-		@include for-phone-only {
+		@mixin for-phone-only {
 			grid-template-columns: 1fr;
 			justify-items: center;
 			gap: 20px;

diff --git a/src/lib/components/organisms/DataDeletion.svelte b/src/lib/components/organisms/DataDeletion.svelte
@@ -60,7 +60,7 @@
 </section>
 
 <style lang="scss">
-	@use '$lib/scss/breakpoints.scss';
+	@use '../../../lib/scss/breakpoints.scss';
 
 	#policy {
 		position: relative;
@@ -72,7 +72,7 @@
 		max-width: 800px; /* Limit the width of the text */
 		margin: 0 auto; /* Center the text block */
 
-		@include for-phone-only {
+		@mixin for-phone-only {
 			grid-template-columns: 1fr;
 			justify-items: center;
 			gap: 20px;

diff --git a/src/lib/components/organisms/FAQ.svelte b/src/lib/components/organisms/FAQ.svelte
@@ -128,7 +128,7 @@
 </section>
 
 <style lang="scss">
-	@use '$lib/scss/breakpoints.scss';
+	@use '../../../lib/scss/breakpoints.scss';
 	
 	#faq {
 		display: flex;
@@ -139,7 +139,7 @@
 		position: relative;
 		padding: 80px 0;
 
-		@include for-phone-only {
+		@mixin for-phone-only {
 			padding: 40px 0 50px;
 		}
 
@@ -179,7 +179,7 @@
 				background: none;
 				outline: none;
 
-				@include for-phone-only {
+				@mixin for-phone-only {
 					font-size: 1rem;
 				}
 

diff --git a/src/lib/components/organisms/Features.svelte b/src/lib/components/organisms/Features.svelte
@@ -26,7 +26,7 @@
 </ContentSection>
 
 <style lang="scss">
-	@use '$lib/scss/breakpoints.scss';
+	@use '../../../lib/scss/breakpoints.scss';
 
 	.features-container {
 		width: 100%;
@@ -45,7 +45,7 @@
 			grid-template-columns: 1fr 1fr;
 		}
 
-		@include for-phone-only {
+		@mixin for-phone-only {
 			grid-template-columns: 1fr;
 		}
 
@@ -64,7 +64,7 @@
 				grid-column: span 2;
 			}
 
-			@include for-tablet-portrait-down {
+			@mixin for-tablet-portrait-down {
 				grid-template-columns: 1fr;
 				grid-column: unset;
 			}

diff --git a/src/lib/components/organisms/Footer.svelte b/src/lib/components/organisms/Footer.svelte
@@ -199,7 +199,7 @@
 </footer>
 
 <style lang="scss">
-	@use '$lib/scss/breakpoints.scss';
+	@use '../../../lib/scss/breakpoints.scss';
 
 	footer {
 		padding-top: 3.5vw;
@@ -227,7 +227,7 @@
 			max-width: 1080px;
 			margin: auto;
 
-			@include for-tablet-portrait-down {
+			@mixin for-tablet-portrait-down {
 				padding-left: 15px;
 				padding-right: 15px;
 			}
@@ -254,7 +254,7 @@
 					box-shadow: 10px 10px 3px rgba(0, 0, 0, 0.5), 0 0 8px rgba(0, 0, 0, 0.5);
 					max-width: 400px;
 
-					@include for-phone-only {
+					@mixin for-phone-only {
 						display: none;
 					}
 
@@ -283,7 +283,7 @@
 					grid-template-columns: repeat(3, minmax(0, 1fr));
 				}
 
-				@include for-tablet-portrait-down {
+				@mixin for-tablet-portrait-down {
 					column-gap: 2rem;
 					grid-template-columns: repeat(2, minmax(0, 1fr));
 				}
@@ -301,7 +301,7 @@
 						grid-row-start: 2;
 					}
 
-					@include for-tablet-portrait-down {
+					@mixin for-tablet-portrait-down {
 						grid-row-start: unset;
 					}
 
@@ -345,7 +345,7 @@
 				border-color: rgb(17 24 39 / 0.1);
 				border-top-width: 1px;
 
-				@include for-tablet-portrait-down {
+				@mixin for-tablet-portrait-down {
 					display: block;
 					justify-content: unset;
 					align-content: unset;
@@ -356,7 +356,7 @@
 					display: flex;
 					order: 2;
 
-					@include for-tablet-portrait-down {
+					@mixin for-tablet-portrait-down {
 						justify-content: center;
 					}
 				}
@@ -367,7 +367,7 @@
 					color: #000000;
 					font-size: 0.75rem;
 
-					@include for-tablet-portrait-down {
+					@mixin for-tablet-portrait-down {
 						margin-top: 2rem;
 					}
 				}
@@ -382,13 +382,13 @@
 			border-top-width: 1px;
 			margin: 2rem 0;
 
-			@include for-tablet-portrait-down {
+			@mixin for-tablet-portrait-down {
 				flex-direction: column;
 				text-align: center;
 			}
 
 			div {
-				@include for-tablet-portrait-down {
+				@mixin for-tablet-portrait-down {
 					margin-bottom: 1rem;
 				}
 			}

diff --git a/src/lib/components/organisms/Header.svelte b/src/lib/components/organisms/Header.svelte
@@ -30,13 +30,13 @@
 </header>
 
 <style lang="scss">
-	@use '$lib/scss/breakpoints.scss';
+	@use '../../scss/breakpoints.scss';
 
 	header {
 		position: relative;
 		padding: 30px 0;
 
-		@include for-phone-only {
+		@mixin for-phone-only {
 			padding: 20px 0;
 		}
 
@@ -53,7 +53,7 @@
 			align-items: center;
 			gap: 30px;
 
-			@include for-phone-only {
+			@mixin for-phone-only {
 				.links {
 					a {
 						display: none;