diff --git a/src/font/DMSerifDisplay/DMSerifDisplay-Italic-latin-ext.woff2 b/src/font/DMSerifDisplay/DMSerifDisplay-Italic-latin-ext.woff2 new file mode 100644 index 0000000..dcc61a6 Binary files /dev/null and b/src/font/DMSerifDisplay/DMSerifDisplay-Italic-latin-ext.woff2 differ diff --git a/src/font/DMSerifDisplay/DMSerifDisplay-Italic-latin.woff2 b/src/font/DMSerifDisplay/DMSerifDisplay-Italic-latin.woff2 new file mode 100644 index 0000000..f03a1bd Binary files /dev/null and b/src/font/DMSerifDisplay/DMSerifDisplay-Italic-latin.woff2 differ diff --git a/src/font/SUIT/SUIT-Variable.woff2 b/src/font/SUIT/SUIT-Variable.woff2 new file mode 100644 index 0000000..89d7e4c Binary files /dev/null and b/src/font/SUIT/SUIT-Variable.woff2 differ diff --git a/src/index.html b/src/index.html index fb27c67..73c2fab 100644 --- a/src/index.html +++ b/src/index.html @@ -269,6 +269,7 @@
+

BODA Lab Co., Ltd.

accurately identifies customer needs to
@@ -276,8 +277,10 @@ We are working on a project with talented
people with high technology.

- +
+ +
diff --git a/src/scss/base/_font.scss b/src/scss/base/_font.scss index 0fe511f..349a1ad 100644 --- a/src/scss/base/_font.scss +++ b/src/scss/base/_font.scss @@ -1,2 +1,27 @@ -@import url("https://cdn.jsdelivr.net/gh/sunn-us/SUIT/fonts/variable/woff2/SUIT-Variable.css"); -@import url("https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@1&display=swap"); +@font-face { + font-family: "SUIT Variable"; + src: url("/font/SUIT/SUIT-Variable.woff2") format("woff2-variations"); + font-weight: 100 900; + font-style: normal; + font-display: swap; +} + +/* latin-ext */ +@font-face { + font-family: "DM Serif Display"; + font-style: italic; + font-weight: 400; + font-display: swap; + src: url("/font/DMSerifDisplay/DMSerifDisplay-Italic-latin-ext.woff2") format("woff2"); + unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; +} + +/* latin */ +@font-face { + font-family: "DM Serif Display"; + font-style: italic; + font-weight: 400; + font-display: swap; + src: url("/font/DMSerifDisplay/DMSerifDisplay-Italic-latin.woff2") format("woff2"); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} diff --git a/src/scss/base/_reset.scss b/src/scss/base/_reset.scss index 4f3aae8..1909ed9 100644 --- a/src/scss/base/_reset.scss +++ b/src/scss/base/_reset.scss @@ -15,7 +15,7 @@ html { } body { - font-family: $font-sans; + font-family: $기본글꼴; background-color: $color-bg; color: $color-white; overflow-x: hidden; @@ -45,55 +45,3 @@ address { section { position: relative; } - -.sectionTitle { - font-family: $font-sans; - font-size: clamp(28px, 3vw, 40px); - font-weight: 600; - letter-spacing: 0.02em; - color: $color-white; - line-height: 1; -} - -.sectionTitleDark { - color: $color-dark; -} - -.scrollDown { - position: absolute; - bottom: 40px; - left: 50%; - transform: translateX(-50%); - width: 72px; - height: 72px; - display: flex; - align-items: center; - justify-content: center; - transition: opacity 0.3s; - - &:hover { - opacity: 0.6; - } - - img { - width: 100%; - height: 100%; - object-fit: unset; - } -} - -.scrollDownSm { - position: relative; - bottom: auto; - left: auto; - transform: none; - margin-top: 40px; -} - -@include mo { - .scrollDown { - width: 52px; - height: 52px; - bottom: 24px; - } -} diff --git a/src/scss/base/_variable.scss b/src/scss/base/_variable.scss index 0f91ad5..20aaa21 100644 --- a/src/scss/base/_variable.scss +++ b/src/scss/base/_variable.scss @@ -7,7 +7,7 @@ $color-white: #ffffff; $color-dark: #0d0d0d; $color-gray: #999; -$font-sans: "SUIT Variable", "SUIT", sans-serif; +$기본글꼴: "SUIT Variable", "SUIT", sans-serif; $font-serif: "DM Serif Display", serif; $gnb-height: 80px; diff --git a/src/scss/index.scss b/src/scss/index.scss index 103802a..d0012bf 100644 --- a/src/scss/index.scss +++ b/src/scss/index.scss @@ -1,3 +1,6 @@ +@use "base/variable" as *; +@use "base/mixin" as *; + // Base @use "base/font"; @use "base/reset"; @@ -8,3 +11,55 @@ @use "page/about"; @use "page/projects"; @use "page/contact"; + +.sectionTitle { + font-family: $기본글꼴; + font-size: clamp(28px, 3vw, 40px); + font-weight: 600; + letter-spacing: 0.02em; + color: $color-white; + line-height: 1; +} + +.sectionTitleDark { + color: $color-dark; +} + +.scrollDown { + position: absolute; + bottom: 40px; + left: 50%; + transform: translateX(-50%); + width: 72px; + height: 72px; + display: flex; + align-items: center; + justify-content: center; + transition: opacity 0.3s; + + &:hover { + opacity: 0.6; + } + + img { + width: 100%; + height: 100%; + object-fit: unset; + } +} + +.scrollDownSm { + position: relative; + bottom: auto; + left: auto; + transform: none; + margin-top: 40px; +} + +@include mo { + .scrollDown { + width: 52px; + height: 52px; + bottom: 24px; + } +} diff --git a/src/scss/page/_about.scss b/src/scss/page/_about.scss index 48b6d66..f7eb3de 100644 --- a/src/scss/page/_about.scss +++ b/src/scss/page/_about.scss @@ -172,33 +172,35 @@ // Boda Intro .bodaIntro { - height: 100vh; + position: relative; + padding: 120px 0 210px; background: $color-bg; display: flex; align-items: center; justify-content: center; text-align: center; + + .scrollDown { + position: absolute; + left: 50%; + bottom: 0; + transform: translateX(-50%); + } } .bodaIntro__content { display: flex; flex-direction: column; align-items: center; -} + text-align: center; -.bodaIntro__title { - font-size: clamp(20px, 2vw, 28px); + font-size: clamp(20px, 3vw, 56px); + line-height: 1.5; font-weight: 600; - letter-spacing: 0.02em; - margin-bottom: 32px; } .bodaIntro__desc { - font-size: clamp(14px, 1.3vw, 18px); - font-weight: 300; - line-height: 1.8; - color: rgba($color-white, 0.8); - text-align: center; + color: rgba($color-white, 0.3); } // Vision diff --git a/src/scss/page/_contact.scss b/src/scss/page/_contact.scss index ced8684..a518524 100644 --- a/src/scss/page/_contact.scss +++ b/src/scss/page/_contact.scss @@ -97,7 +97,7 @@ .contact__greetingBrand { display: block; font-size: clamp(16px, 1.5vw, 22px); - font-family: $font-sans; + font-family: $기본글꼴; font-style: normal; font-weight: 900; letter-spacing: 0.15em; @@ -188,7 +188,7 @@ color: $color-white; font-size: clamp(16px, 1.4vw, 20px); font-weight: 400; - font-family: $font-sans; + font-family: $기본글꼴; text-align: left; transition: opacity 0.2s; @@ -244,7 +244,7 @@ background: rgba($color-white, 0.04); border: 1px solid rgba($color-white, 0.1); color: $color-white; - font-family: $font-sans; + font-family: $기본글꼴; font-size: 14px; font-weight: 300; padding: 14px 16px; @@ -322,7 +322,7 @@ border: none; border-radius: 100px; color: $color-dark; - font-family: $font-sans; + font-family: $기본글꼴; font-size: 14px; font-weight: 700; letter-spacing: 0.1em;