feat: WIP footer component

ADOFAI-gg · May 2, 2024 · 5ae5958 · 5ae5958
1 parent 9cdf4ec
commit 5ae5958
Show file tree

Hide file tree

Showing 13 changed files with 251 additions and 230 deletions.
diff --git a/src/lib/components/Button.svelte b/src/lib/components/Button.svelte
@@ -28,147 +28,3 @@
 		<Icon alt="icon" icon={rightIcon} size={24} />
 	{/if}
 </button>
-
-<style lang="scss">
-	.button {
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		border-radius: 8px;
-		font-weight: 600;
-		display: flex;
-	}
-
-	/* Styles */
-
-	.button-style-primary,
-	.button-style-danger {
-		transition: background-color ease 0.2s;
-
-		&:disabled {
-			background-color: rgba(255, 255, 255, 0.1);
-			color: rgba(255, 255, 255, 0.4);
-		}
-	}
-
-	.button-style-primary:not(:disabled) {
-		background-color: #3b84f1;
-
-		&:hover,
-		&:focus {
-			background-color: #337ae3;
-		}
-
-		&:active {
-			background-color: #276bcf;
-		}
-	}
-
-	.button-style-danger:not(:disabled) {
-		background-color: #f54f51;
-
-		&:hover,
-		&:focus {
-			background-color: #de4446;
-		}
-
-		&:active {
-			background-color: #cb393b;
-		}
-	}
-
-	.button-style-ghost-light,
-	.button-style-ghost-dark {
-		transition: background-color ease 0.2s;
-
-		&:disabled {
-			color: rgba(255, 255, 255, 0.4);
-		}
-	}
-
-	.button-style-ghost-light:not(:disabled) {
-		background-color: rgba(255, 255, 255, 0);
-
-		&:hover,
-		&:focus {
-			background-color: rgba(255, 255, 255, 0.1);
-		}
-
-		&:active {
-			background-color: rgba(255, 255, 255, 0.2);
-		}
-	}
-
-	.button-style-ghost-dark:not(:disabled) {
-		background-color: rgba(0, 2, 15, 0);
-
-		&:hover,
-		&:focus {
-			background-color: rgba(0, 2, 15, 0.1);
-		}
-
-		&:active {
-			background-color: rgba(0, 2, 15, 0.2);
-		}
-	}
-
-	.button-style-outlined {
-		transition:
-			border ease 0.2s,
-			background-color ease 0.2s,
-			color ease 0.2s;
-
-		box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2) inset;
-
-		&:disabled {
-			background-color: rgba(255, 255, 255, 0);
-			color: rgba(255, 255, 255, 0.4);
-		}
-
-		&:not(:disabled) {
-			color: white;
-
-			&:hover,
-			&:focus {
-				background-color: rgba(255, 255, 255, 0.1);
-			}
-
-			&:active {
-				background-color: white;
-				color: black;
-			}
-		}
-	}
-
-	/* Sizes */
-
-	.button-size-lg {
-		padding: 12px 24px;
-		font-size: 16px;
-		gap: 16px;
-
-		&.icon-only {
-			padding: 12px;
-		}
-	}
-
-	.button-size-md {
-		padding: 8px 16px;
-		font-size: 14px;
-		gap: 8px;
-
-		&.icon-only {
-			padding: 8px;
-		}
-	}
-
-	.button-size-sm {
-		padding: 6px 12px;
-		font-size: 12px;
-		gap: 6px;
-
-		&.icon-only {
-			padding: 6px;
-		}
-	}
-</style>
diff --git a/src/lib/components/Container.svelte b/src/lib/components/Container.svelte
@@ -0,0 +1 @@
+<div class="container">Container</div>
diff --git a/src/lib/components/footer/Footer.svelte b/src/lib/components/footer/Footer.svelte
@@ -1,60 +1,51 @@
 <script lang="ts">
 	import { FooterLink, FooterSection } from '$lib/index.js'
 	import Translation from '$lib/utils/Translation.svelte'
-
-	export let minimal = false
+	import Container from '../Container.svelte'
 </script>
 
 <footer class="footer">
-	<div class="footer-content">
-		<h2 class="footer-title">
-			<Translation key="footer:title" />
-		</h2>
-		{#if !minimal}
-			<section class="footer-details">
-				<div class="footer-description">
-					<Translation key="footer:description" />
-				</div>
-
-				<FooterSection title="footer:section-contact">
+	<Container>
+		<div class="footer-content">
+			<h2 class="footer-title">
+				<Translation key="footer:title" />
+			</h2>
+			<section class="footer-links">
+				<FooterSection title="footer:contact">
 					<FooterLink href="mailto:[email protected]" target="_blank" rel="noreferrer">
-						<Translation key="footer:link-email" />
+						<Translation key="footer:contact-email" />
 					</FooterLink>
 					<FooterLink href="https://adofai.gg/discord" target="_blank" rel="noreferrer">
-						<Translation key="footer:link-discord" />
+						<Translation key="footer:contact-discord" />
 					</FooterLink>
 				</FooterSection>
-
-				<FooterSection title="footer:section-legal">
+				<FooterSection title="footer:legal">
 					<FooterLink href="https://adofai.gg/docs/legal-notice" target="_blank" rel="noreferrer">
-						<Translation key="footer:link-legal-notice" />
+						<Translation key="footer:legal-notice" />
 					</FooterLink>
 					<FooterLink href="https://adofai.gg/docs/terms" target="_blank" rel="noreferrer">
-						<Translation key="footer:link-terms" />
+						<Translation key="footer:legal-terms" />
 					</FooterLink>
 					<FooterLink href="https://adofai.gg/docs/privacy" target="_blank" rel="noreferrer">
-						<Translation key="footer:link-privacy" />
+						<Translation key="footer:legal-privacy" />
 					</FooterLink>
 				</FooterSection>
 			</section>
-		{/if}
-		<p class="footer-copyright">
-			&copy; <Translation key="footer:copyright" />
-		</p>
-	</div>
+			<p class="footer-copyright">
+				&copy; <Translation key="footer:copyright" />
+			</p>
+		</div>
+	</Container>
 </footer>
 
 <style lang="scss">
 	.footer {
 		background-color: rgba(0, 0, 0, 0.2);
 		padding: 24px;
-		display: flex;
-		justify-content: center;
 	}
 
 	.footer-content {
 		width: 100%;
-		max-width: 1100px;
 		display: flex;
 		flex-direction: column;
 		gap: 12px;
@@ -70,23 +61,8 @@
 		opacity: 0.6;
 	}
 
-	.footer-details {
+	.footer-links {
 		display: grid;
-		grid-template-columns: repeat(var(--footer-columns), 1fr);
-		gap: 24px;
-
-		--footer-columns: 1;
-
-		@media screen and (min-width: 768px) {
-			--footer-columns: 2;
-		}
-
-		@media screen and (min-width: 1100px) {
-			--footer-columns: 3;
-		}
-	}
-
-	.footer-description {
-		font-size: 14px;
+		gap: 4px;
 	}
 </style>
diff --git a/src/lib/components/footer/FooterLink.svelte b/src/lib/components/footer/FooterLink.svelte
@@ -6,17 +6,15 @@
 	<a {href} {...$$restProps} class="footer-link"><slot /></a>
 </div>
 
-<style lang="ts">
+<style lang="scss">
 	.footer-link {
 		font-size: 14px;
-		&::before {
-			content: '›';
-			padding-right: 4px;
-			transition: padding-right ease 0.2s;
-		}
+		opacity: 0.8;
+
+		transition: opacity ease 0.2s;
 
-		&:hover::before {
-			padding-right: 8px;
+		&:hover {
+			opacity: 1;
 		}
 	}
 </style>
diff --git a/src/lib/components/footer/FooterSection.svelte b/src/lib/components/footer/FooterSection.svelte
@@ -14,14 +14,20 @@
 	</div>
 </section>
 
-<style lang="ts">
+<style lang="scss">
 	.footer-section {
 		display: flex;
-		flex-direction: column;
+		width: 100%;
+		gap: 8px;
+		align-items: center;
 	}
 
 	.title {
-		font-size: 16px;
-		opacity: 0.6;
+		font-size: 14px;
+	}
+
+	.content {
+		display: flex;
+		gap: 12px;
 	}
 </style>
diff --git a/src/lib/localization/translations/en/footer.ftl b/src/lib/localization/translations/en/footer.ftl
@@ -1,17 +1 @@
-title = ADOFAI.gg
-description = ADOFAI.gg is based on the ADOFAI Unofficial Forum, and is not created nor approved by 7th Beat Games.
 
-# Sections
-section-contact = Contact
-section-legal = Legal Constraints and Policies
-
-# Links
-link-email = Send Inquiry Mail
-link-discord = Join Discord Server
-
-link-legal-notice = Legal Notice
-link-terms = Terms of Service
-link-privacy = Privacy Policy
-
-# rest
-copyright = All rights reserved to the designs (excluding third-party images and fonts), icons, and source code (excluding libraries) on this site.
diff --git a/src/lib/localization/translations/ko/footer.ftl b/src/lib/localization/translations/ko/footer.ftl
@@ -1,11 +1,12 @@
 title = ADOFAI.gg
-description = ADOFAI.gg는 ADOFAI 비공식 포럼을 바탕으로 하며, 7th Beat Games에서 제작되거나 승인받지 않았습니다.
-# Sections
-section-contact = 문의
-section-legal = 법적 계약 및 정책
-# Links
-link-email = 문의 메일 전송
-link-discord = Discord 서버 가입
-link-legal-notice = 법적 고지
-# rest
-copyright = 이 사이트에 대한 디자인(타사 제공 이미지, 폰트 제외)과 아이콘, 소스 코드(라이브러리 제외)에 대한 모든 권리 보유.
+
+contact = 연락
+contact-email = 문의 메일 전송
+contact-discord = Discord 커뮤니티 가입
+
+legal = 법적 문서
+legal-notice = 법적 고지
+legal-terms = 서비스 이용 약관
+legal-privacy = 개인정보 처리방침
+
+copyright = 2024 ADOFAI.gg.   ADOFAI.gg는 7th Beat Games가 제작하거나 승인한 서비스가 아닙니다.