From 5ae5958d2baea0ee573cc46cfd17ebfd705c1fc5 Mon Sep 17 00:00:00 2001 From: paring Date: Thu, 2 May 2024 16:28:53 +0900 Subject: [PATCH] feat: WIP footer component --- src/lib/components/Button.svelte | 144 ------------------ src/lib/components/Container.svelte | 1 + src/lib/components/footer/Footer.svelte | 66 +++----- src/lib/components/footer/FooterLink.svelte | 14 +- .../components/footer/FooterSection.svelte | 14 +- .../localization/translations/en/footer.ftl | 16 -- .../localization/translations/ko/footer.ftl | 21 +-- src/lib/stylesheets/components/_button.scss | 141 +++++++++++++++++ src/lib/stylesheets/fonts.scss | 6 + src/lib/stylesheets/globals.scss | 3 + src/lib/stylesheets/system/_breakpoints.scss | 35 +++++ src/lib/stylesheets/system/_container.scss | 13 ++ src/lib/utils/translation.ts | 7 +- 13 files changed, 251 insertions(+), 230 deletions(-) create mode 100644 src/lib/components/Container.svelte create mode 100644 src/lib/stylesheets/components/_button.scss create mode 100644 src/lib/stylesheets/system/_breakpoints.scss create mode 100644 src/lib/stylesheets/system/_container.scss diff --git a/src/lib/components/Button.svelte b/src/lib/components/Button.svelte index 8780e27..e77dec4 100644 --- a/src/lib/components/Button.svelte +++ b/src/lib/components/Button.svelte @@ -28,147 +28,3 @@ {/if} - - diff --git a/src/lib/components/Container.svelte b/src/lib/components/Container.svelte new file mode 100644 index 0000000..c76e6b4 --- /dev/null +++ b/src/lib/components/Container.svelte @@ -0,0 +1 @@ +
Container
diff --git a/src/lib/components/footer/Footer.svelte b/src/lib/components/footer/Footer.svelte index 300bb8e..8597547 100644 --- a/src/lib/components/footer/Footer.svelte +++ b/src/lib/components/footer/Footer.svelte @@ -1,60 +1,51 @@
-
-

- -

- {#if !minimal} -
-
- -
- - + +
+

+ +

+
+ - + - + - - + - + - + - +
- {/if} -

- © -

-
+

+ © +

+
+
diff --git a/src/lib/components/footer/FooterLink.svelte b/src/lib/components/footer/FooterLink.svelte index 2dee53c..db22346 100644 --- a/src/lib/components/footer/FooterLink.svelte +++ b/src/lib/components/footer/FooterLink.svelte @@ -6,17 +6,15 @@ - diff --git a/src/lib/components/footer/FooterSection.svelte b/src/lib/components/footer/FooterSection.svelte index 3fb68dc..563ef92 100644 --- a/src/lib/components/footer/FooterSection.svelte +++ b/src/lib/components/footer/FooterSection.svelte @@ -14,14 +14,20 @@ - diff --git a/src/lib/localization/translations/en/footer.ftl b/src/lib/localization/translations/en/footer.ftl index 8dd33d5..8b13789 100644 --- 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 index dc795e6..32d04ff 100644 --- 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가 제작하거나 승인한 서비스가 아닙니다. diff --git a/src/lib/stylesheets/components/_button.scss b/src/lib/stylesheets/components/_button.scss new file mode 100644 index 0000000..39ea983 --- /dev/null +++ b/src/lib/stylesheets/components/_button.scss @@ -0,0 +1,141 @@ +.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; + } +} diff --git a/src/lib/stylesheets/fonts.scss b/src/lib/stylesheets/fonts.scss index 6856172..882a9bb 100644 --- a/src/lib/stylesheets/fonts.scss +++ b/src/lib/stylesheets/fonts.scss @@ -3,3 +3,9 @@ @import '@fontsource/ibm-plex-sans-kr/500.css'; @import '@fontsource/ibm-plex-sans-kr/600.css'; @import '@fontsource/ibm-plex-sans-kr/700.css'; + +body { + font-feature-settings: + 'ss01' on, + 'ss02' on; +} diff --git a/src/lib/stylesheets/globals.scss b/src/lib/stylesheets/globals.scss index 22ccd73..87bff13 100644 --- a/src/lib/stylesheets/globals.scss +++ b/src/lib/stylesheets/globals.scss @@ -2,6 +2,9 @@ @import 'fonts.scss'; @import 'tippy.scss'; +@import 'components/button'; +@import 'system/container'; + :root { --color-yellow: 255, 231, 110; --color-red: 245, 79, 81; diff --git a/src/lib/stylesheets/system/_breakpoints.scss b/src/lib/stylesheets/system/_breakpoints.scss new file mode 100644 index 0000000..cdaadff --- /dev/null +++ b/src/lib/stylesheets/system/_breakpoints.scss @@ -0,0 +1,35 @@ +$breakpoints: ( + 'xs': ( + 'min-width': 360px, + 'col-spacing': 12px, + 'gutters': 24px + ), + 'sm': ( + 'min-width': 640px, + 'col-spacing': 20px, + 'gutters': 24px + ), + 'md': ( + 'min-width': 768px, + 'col-spacing': 24px, + 'gutters': 24px + ), + 'lg': ( + 'min-width': 1024px, + 'col-spacing': 20px, + 'gutters': 24px + ), + 'xl': ( + 'min-width': 1200px, + 'col-spacing': 24px, + 'gutters': 24px + ) +); + +@mixin breakpoint($name) { + $breakpoint: map-get($breakpoints, $name); + + @media screen and (min-width: #{inspect(map-get($breakpoint, 'min-width'))}) { + @content; + } +} diff --git a/src/lib/stylesheets/system/_container.scss b/src/lib/stylesheets/system/_container.scss new file mode 100644 index 0000000..b13b435 --- /dev/null +++ b/src/lib/stylesheets/system/_container.scss @@ -0,0 +1,13 @@ +@import '../system/breakpoints'; + +.container { + width: 100%; + background-color: black; + margin: 0 auto; + + @each $name, $data in $breakpoints { + @include breakpoint($name) { + max-width: map-get($data, 'min-width'); + } + } +} diff --git a/src/lib/utils/translation.ts b/src/lib/utils/translation.ts index 3db6b82..34eaa84 100644 --- a/src/lib/utils/translation.ts +++ b/src/lib/utils/translation.ts @@ -11,7 +11,7 @@ import { translationData } from '$lib/localization/translations/index.js' export const availableLanguages: LangResponse[] = langs -export const fallbackLang = 'en' +export const fallbackLang = 'ko' const registeredLangSections: string[] = [] @@ -69,7 +69,7 @@ const setupFunctions = (bundle: FluentBundle) => { export const getLangCode = (code: string) => { const lang = availableLanguages.find((x) => x.code === code || x.aliases.includes(code)) - return lang?.code || 'en' + return lang?.code || 'ko' } export const currentLang = writable( @@ -111,7 +111,8 @@ export const translate = ( if (!lang) return key const section = lang[sectionName] if (!section) return key - const message = section.getMessage(key) + let message = section.getMessage(key) + if (!message?.value) message = langData[fallbackLang][sectionName].getMessage(key) if (!message?.value) return key const result = section.formatPattern(message.value, args) if (escape) escapeHtmlTags(result)