commit eb4d4dcc449faf0a6e79af02b74a458952893b03
parent fd5785417466fb270d5231fc6649d05d4f0cabd1
Author: Yongbin Kim <iam@yongbin.kim>
Date: Thu, 19 Jan 2023 12:46:50 +0900
fix: 전체적인 레이아웃 사이즈 및 여백 수정
- 모바일 레이아웃 최대 넓이 수정
- Navbar 여백으로 인해 가로 스크롤 생기던 문제 수정
- box-sizing border-box로 변경
Signed-off-by: Yongbin Kim <iam@yongbin.kim>
Diffstat:
16 files changed, 33 insertions(+), 27 deletions(-)
diff --git a/components/layout/Container.module.css b/components/layout/Container.module.css
@@ -1 +1 @@
-.container{width:100%;padding:0 1rem;margin:0 auto;max-width:100%}@media(min-width: 30rem){.container{max-width:30rem}}@media(min-width: 50rem){.container{max-width:50rem}}.container.is-fluid{max-width:none}/*# sourceMappingURL=Container.module.css.map */
+.container{width:100%;margin:0 auto;max-width:100%}@media(min-width: 40rem){.container{max-width:40rem}}@media(min-width: 50rem){.container{max-width:50rem}}.container.is-fluid{max-width:none}/*# sourceMappingURL=Container.module.css.map */
diff --git a/components/layout/Container.module.css.map b/components/layout/Container.module.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["Container.module.scss","../../styles/core/_responsive.scss"],"names":[],"mappings":"AAMA,WACE,WACA,QAJQ,OAKR,cAGE,UCUO,KAET,yBDlBF,WAMI,UCZY,OA4Bd,yBDtBF,WAMI,UCXY,ODcd,oBACE","file":"Container.module.css"}
-\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["Container.module.scss","../../styles/core/_responsive.scss"],"names":[],"mappings":"AAIA,WACE,WACA,cAGE,UCaO,KAET,yBDpBF,WAKI,UCTY,OA4Bd,yBDxBF,WAKI,UCRY,ODWd,oBACE","file":"Container.module.css"}
+\ No newline at end of file
diff --git a/components/layout/Container.module.scss b/components/layout/Container.module.scss
@@ -2,11 +2,8 @@
@use 'core/vars';
@use 'core/responsive';
-$padding: 0 vars.$gap;
-
.container {
width: 100%;
- padding: $padding;
margin: 0 auto;
@include responsive.apply using ($max-width) {
diff --git a/components/layout/Hero.module.css b/components/layout/Hero.module.css
@@ -1 +1 @@
-.hero{display:flex;flex-direction:column;position:relative;padding:4rem 0;overflow:hidden;justify-content:center;background-color:#fafdfa;color:#191c1b}.hero.is-small{min-height:10rem}.hero.is-medium{min-height:15rem}.hero.is-large{min-height:20rem}@media(min-width: 30rem){.hero.is-small{min-height:15rem}.hero.is-medium{min-height:20rem}.hero.is-large{min-height:25rem}}.hero.is-primary{background-color:#58fbda;color:#00201a}.hero.is-secondary{background-color:#f5d9ff;color:#30004a}.hero.is-tertiary{background-color:#c7e7ff;color:#001e2e}.hero.is-error{background-color:#ffdad6;color:#410002}@media(prefers-color-scheme: dark){.hero{background-color:#191c1b;color:#e1e3e0}.hero.is-primary{background-color:#005143;color:#58fbda}.hero.is-secondary{background-color:#61317e;color:#f5d9ff}.hero.is-tertiary{background-color:#2a4a5f;color:#c7e7ff}.hero.is-error{background-color:#93000a;color:#ffdad6}}.hero .hero-body :last-child{margin-bottom:0}.hero .hero-body a[href]{color:inherit;text-decoration:underline}/*# sourceMappingURL=Hero.module.css.map */
+.hero{display:flex;flex-direction:column;position:relative;padding:4rem 0;overflow:hidden;justify-content:center;background-color:#fafdfa;color:#191c1b}.hero.is-small{min-height:10rem}.hero.is-medium{min-height:15rem}.hero.is-large{min-height:20rem}@media(min-width: 40rem){.hero.is-small{min-height:15rem}.hero.is-medium{min-height:20rem}.hero.is-large{min-height:25rem}}.hero.is-primary{background-color:#58fbda;color:#00201a}.hero.is-secondary{background-color:#f5d9ff;color:#30004a}.hero.is-tertiary{background-color:#c7e7ff;color:#001e2e}.hero.is-error{background-color:#ffdad6;color:#410002}@media(prefers-color-scheme: dark){.hero{background-color:#191c1b;color:#e1e3e0}.hero.is-primary{background-color:#005143;color:#58fbda}.hero.is-secondary{background-color:#61317e;color:#f5d9ff}.hero.is-tertiary{background-color:#2a4a5f;color:#c7e7ff}.hero.is-error{background-color:#93000a;color:#ffdad6}}.hero .hero-body :last-child{margin-bottom:0}.hero .hero-body a[href]{color:inherit;text-decoration:underline}/*# sourceMappingURL=Hero.module.css.map */
diff --git a/components/layout/Navbar.module.css b/components/layout/Navbar.module.css
@@ -1 +1 @@
-.navbar{padding:.5rem 0;z-index:10;background-color:#fafdfa;color:#191c1b}.navbar .item:hover{background-color:rgba(25,28,27,.1)}.navbar.is-primary{background-color:#58fbda;color:#00201a}.navbar.is-primary .item:hover{background-color:rgba(0,32,26,.1)}.navbar.is-secondary{background-color:#f5d9ff;color:#30004a}.navbar.is-secondary .item:hover{background-color:rgba(48,0,74,.1)}.navbar.is-tertiary{background-color:#c7e7ff;color:#001e2e}.navbar.is-tertiary .item:hover{background-color:rgba(0,30,46,.1)}.navbar.is-error{background-color:#ffdad6;color:#410002}.navbar.is-error .item:hover{background-color:rgba(65,0,2,.1)}@media(prefers-color-scheme: dark){.navbar{background-color:#191c1b;color:#e1e3e0}.navbar .item:hover{background-color:rgba(225,227,224,.1)}.navbar.is-primary{background-color:#005143;color:#58fbda}.navbar.is-primary .item:hover{background-color:rgba(88,251,218,.1)}.navbar.is-secondary{background-color:#61317e;color:#f5d9ff}.navbar.is-secondary .item:hover{background-color:rgba(245,217,255,.1)}.navbar.is-tertiary{background-color:#2a4a5f;color:#c7e7ff}.navbar.is-tertiary .item:hover{background-color:rgba(199,231,255,.1)}.navbar.is-error{background-color:#93000a;color:#ffdad6}.navbar.is-error .item:hover{background-color:rgba(255,218,214,.1)}}.navbar>.container{display:flex;align-items:stretch;min-height:2.5rem}.navbar .brand,.navbar .menu{display:flex;align-items:stretch}.navbar .brand{flex-shrink:0;margin-left:-1rem;line-height:1.5rem;font-size:1rem;letter-spacing:.009375rem;font-weight:500}.navbar .brand .navbar-item{font-weight:bold}.navbar .menu{flex:1;justify-content:flex-end;margin-right:-1rem}.navbar .menu.is-centered{justify-content:center;margin-right:0}.navbar .item{display:flex;align-items:center;padding:0 1rem;line-height:2.5rem;border-radius:9999px}.navbar a.item{color:inherit}.navbar a.item,.navbar a.item:hover{text-decoration:none}/*# sourceMappingURL=Navbar.module.css.map */
+.navbar{padding:.5rem 0;z-index:10;background-color:#fafdfa;color:#191c1b}.navbar .item:hover{background-color:rgba(25,28,27,.1)}.navbar.is-primary{background-color:#58fbda;color:#00201a}.navbar.is-primary .item:hover{background-color:rgba(0,32,26,.1)}.navbar.is-secondary{background-color:#f5d9ff;color:#30004a}.navbar.is-secondary .item:hover{background-color:rgba(48,0,74,.1)}.navbar.is-tertiary{background-color:#c7e7ff;color:#001e2e}.navbar.is-tertiary .item:hover{background-color:rgba(0,30,46,.1)}.navbar.is-error{background-color:#ffdad6;color:#410002}.navbar.is-error .item:hover{background-color:rgba(65,0,2,.1)}@media(prefers-color-scheme: dark){.navbar{background-color:#191c1b;color:#e1e3e0}.navbar .item:hover{background-color:rgba(225,227,224,.1)}.navbar.is-primary{background-color:#005143;color:#58fbda}.navbar.is-primary .item:hover{background-color:rgba(88,251,218,.1)}.navbar.is-secondary{background-color:#61317e;color:#f5d9ff}.navbar.is-secondary .item:hover{background-color:rgba(245,217,255,.1)}.navbar.is-tertiary{background-color:#2a4a5f;color:#c7e7ff}.navbar.is-tertiary .item:hover{background-color:rgba(199,231,255,.1)}.navbar.is-error{background-color:#93000a;color:#ffdad6}.navbar.is-error .item:hover{background-color:rgba(255,218,214,.1)}}.navbar>.container{display:flex;padding:0 1rem;align-items:stretch;min-height:2.5rem}.navbar .brand,.navbar .menu{display:flex;align-items:stretch}.navbar .brand{flex-shrink:0;line-height:1.5rem;font-size:1rem;letter-spacing:.009375rem;font-weight:500}.navbar .brand .navbar-item{font-weight:bold}.navbar .menu{flex:1;justify-content:flex-end}.navbar .menu.is-centered{justify-content:center;margin-right:0}.navbar .item{display:flex;align-items:center;padding:0 1rem;line-height:2.5rem;border-radius:9999px}.navbar a.item{color:inherit}.navbar a.item,.navbar a.item:hover{text-decoration:none}/*# sourceMappingURL=Navbar.module.css.map */
diff --git a/components/layout/Navbar.module.css.map b/components/layout/Navbar.module.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["Navbar.module.scss","../../styles/core/_colors.scss","../../styles/core/_typography.scss"],"names":[],"mappings":"AAqBA,QACE,gBACA,WAVA,yBACA,cAEA,oBACE,mCAYE,mBAhBJ,yBACA,cAEA,+BACE,kCAYE,qBAhBJ,yBACA,cAEA,iCACE,kCAYE,oBAhBJ,yBACA,cAEA,gCACE,kCAYE,iBAhBJ,yBACA,cAEA,6BACE,iCC+GF,mCD3GF,QARE,yBACA,cAEA,oBACE,sCAYE,mBAhBJ,yBACA,cAEA,+BACE,qCAYE,qBAhBJ,yBACA,cAEA,iCACE,sCAYE,oBAhBJ,yBACA,cAEA,gCACE,sCAYE,iBAhBJ,yBACA,cAEA,6BACE,uCAkBF,mBACE,aACA,oBACA,WA/BU,OAkCZ,6BAEE,aACA,oBAGF,eACE,cACA,kBEqEA,mBACA,eACA,0BACA,gBFrEA,4BACE,iBAIJ,cACE,OACA,yBACA,mBAEA,0BACE,uBACA,eAIJ,cACE,aACA,mBACA,eACA,YAjEU,OAkEV,cAhEU,OAmEZ,eACE,cAEA,oCACE","file":"Navbar.module.css"}
-\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["Navbar.module.scss","../../styles/core/_colors.scss","../../styles/core/_typography.scss"],"names":[],"mappings":"AAsBA,QACE,gBACA,WAVA,yBACA,cAEA,oBACE,mCAYE,mBAhBJ,yBACA,cAEA,+BACE,kCAYE,qBAhBJ,yBACA,cAEA,iCACE,kCAYE,oBAhBJ,yBACA,cAEA,gCACE,kCAYE,iBAhBJ,yBACA,cAEA,6BACE,iCC8GF,mCD1GF,QARE,yBACA,cAEA,oBACE,sCAYE,mBAhBJ,yBACA,cAEA,+BACE,qCAYE,qBAhBJ,yBACA,cAEA,iCACE,sCAYE,oBAhBJ,yBACA,cAEA,gCACE,sCAYE,iBAhBJ,yBACA,cAEA,6BACE,uCAkBF,mBACE,aACA,eACA,oBACA,WAhCU,OAmCZ,6BAEE,aACA,oBAGF,eACE,cEoEA,mBACA,eACA,0BACA,gBFpEA,4BACE,iBAIJ,cACE,OACA,yBAEA,0BACE,uBACA,eAIJ,cACE,aACA,mBACA,QA9DW,OA+DX,YAhEU,OAiEV,cA/DU,OAkEZ,eACE,cAEA,oCACE","file":"Navbar.module.css"}
+\ No newline at end of file
diff --git a/components/layout/Navbar.module.scss b/components/layout/Navbar.module.scss
@@ -5,8 +5,9 @@
$height: 3.5rem;
$shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
+$padding-horizontal: vars.$gap;
$item-height: 2.5rem;
-$item-padding-x: 1rem;
+$item-padding: 0 vars.$gap;
$item-radius: 9999px;
$item-hover-background-opacity: 10%;
@@ -35,6 +36,7 @@ $item-hover-background-opacity: 10%;
& > .container {
display: flex;
+ padding: 0 $padding-horizontal;
align-items: stretch;
min-height: $item-height;
}
@@ -47,7 +49,6 @@ $item-hover-background-opacity: 10%;
.brand {
flex-shrink: 0;
- margin-left: -$item-padding-x;
@include typography.apply('title-medium');
.navbar-item {
@@ -58,7 +59,6 @@ $item-hover-background-opacity: 10%;
.menu {
flex: 1;
justify-content: flex-end;
- margin-right: -$item-padding-x;
&.is-centered {
justify-content: center;
@@ -69,7 +69,7 @@ $item-hover-background-opacity: 10%;
.item {
display: flex;
align-items: center;
- padding: 0 $item-padding-x;
+ padding: $item-padding;
line-height: $item-height;
border-radius: $item-radius;
}
diff --git a/components/layout/Navbar.tsx b/components/layout/Navbar.tsx
@@ -10,7 +10,7 @@ interface NavbarProps {
export default function Navbar (props: NavbarProps) {
return (
- <header className={styles.navbar}>
+ <div className={styles.navbar}>
<Container className={styles.container}>
<nav className={styles.brand}>
{/* TODO: Show current wiki name here */}
@@ -22,6 +22,6 @@ export default function Navbar (props: NavbarProps) {
{props.children}
</nav>
</Container>
- </header>
+ </div>
)
}
diff --git a/components/layout/Section.module.css b/components/layout/Section.module.css
@@ -1 +1 @@
-.section{margin-bottom:4rem}.section.has-margin-top{margin-top:4rem}/*# sourceMappingURL=Section.module.css.map */
+.section{margin-bottom:4rem;padding:0 2rem}.section.has-margin-top{margin-top:4rem}/*# sourceMappingURL=Section.module.css.map */
diff --git a/components/layout/Section.module.css.map b/components/layout/Section.module.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["Section.module.scss"],"names":[],"mappings":"AAIA,SACE,cAHe,KAKf,wBACE,WANa","file":"Section.module.css"}
-\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["Section.module.scss"],"names":[],"mappings":"AAKA,SACE,cAJO,KAKP,QAJQ,OAMR,wBACE,WARK","file":"Section.module.css"}
+\ No newline at end of file
diff --git a/components/layout/Section.module.scss b/components/layout/Section.module.scss
@@ -1,11 +1,13 @@
@use 'core/vars';
-$section-margin: 4 * vars.$gap;
+$margin: 4 * vars.$gap;
+$padding: 0 (vars.$gap * 2); // Navbar 아이템에 맞추기 위해
.section {
- margin-bottom: $section-margin;
+ margin-bottom: $margin;
+ padding: $padding;
&.has-margin-top {
- margin-top: $section-margin;
+ margin-top: $margin;
}
}
diff --git a/pages/index.tsx b/pages/index.tsx
@@ -1,9 +1,12 @@
import Container from '@/components/layout/Container'
+import Section from '@/components/layout/Section'
export default function Home () {
return (
<Container>
- <p>Hello, World!</p>
+ <Section>
+ <p>Hello, World!</p>
+ </Section>
</Container>
)
}
diff --git a/styles/core/_responsive.scss b/styles/core/_responsive.scss
@@ -1,4 +1,4 @@
-$screen-mobile: 30rem;
+$screen-mobile: 40rem;
$screen-tablet: 50rem;
@mixin tablet($with-desktop: false) {
diff --git a/styles/globals.css b/styles/globals.css
@@ -1 +1 @@
-/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:rgba(0,0,0,0)}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}body{font-family:-apple-system,sans-serif;background-color:#fafdfa;color:#191c1b}@media(prefers-color-scheme: dark){body{background-color:#191c1b;color:#e1e3e0}}h1,h2,h3,h4,h5,h6,p{margin-top:0;margin-bottom:1rem}/*# sourceMappingURL=globals.css.map */
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:rgba(0,0,0,0)}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}*{box-sizing:border-box}body{font-family:-apple-system,sans-serif;background-color:#fafdfa;color:#191c1b}@media(prefers-color-scheme: dark){body{background-color:#191c1b;color:#e1e3e0}}h1,h2,h3,h4,h5,h6,p{margin-top:0;margin-bottom:1rem}/*# sourceMappingURL=globals.css.map */
diff --git a/styles/globals.css.map b/styles/globals.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["vendors/_normalize.scss","globals.scss","core/_colors.scss"],"names":[],"mappings":"AAAA,4EAUA,KACI,iBACA,8BAUJ,KACI,SAOJ,KACI,cAQJ,GACI,cACA,eAWJ,GACI,uBACA,SACA,iBAQJ,IACI,gCACA,cAUJ,EACI,+BAQJ,YACI,mBACA,0BACA,iCAOJ,SAEI,mBAQJ,cAGI,gCACA,cAOJ,MACI,cAQJ,QAEI,cACA,cACA,kBACA,wBAGJ,IACI,eAGJ,IACI,WAUJ,IACI,kBAWJ,sCAKI,oBACA,eACA,iBACA,SAQJ,aAEI,iBAQJ,cAEI,oBAOJ,gDAII,0BAOJ,wHAII,kBACA,UAOJ,4GAII,8BAOJ,SACI,2BAUJ,OACI,sBACA,cACA,cACA,eACA,UACA,mBAOJ,SACI,wBAOJ,SACI,cAQJ,6BAEI,sBACA,UAOJ,kFAEI,YAQJ,cACI,6BACA,oBAOJ,yCACI,wBAQJ,6BACI,0BACA,aAUJ,QACI,cAOJ,QACI,kBAUJ,SACI,aAOJ,SACI,aCxVJ,KACE,qCAEE,yBACA,cCyHF,mCD7HF,KAGI,yBACA,eAIJ,oBAEE,aACA","file":"globals.css"}
-\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["vendors/_normalize.scss","globals.scss","core/_colors.scss"],"names":[],"mappings":"AAAA,4EAUA,KACI,iBACA,8BAUJ,KACI,SAOJ,KACI,cAQJ,GACI,cACA,eAWJ,GACI,uBACA,SACA,iBAQJ,IACI,gCACA,cAUJ,EACI,+BAQJ,YACI,mBACA,0BACA,iCAOJ,SAEI,mBAQJ,cAGI,gCACA,cAOJ,MACI,cAQJ,QAEI,cACA,cACA,kBACA,wBAGJ,IACI,eAGJ,IACI,WAUJ,IACI,kBAWJ,sCAKI,oBACA,eACA,iBACA,SAQJ,aAEI,iBAQJ,cAEI,oBAOJ,gDAII,0BAOJ,wHAII,kBACA,UAOJ,4GAII,8BAOJ,SACI,2BAUJ,OACI,sBACA,cACA,cACA,eACA,UACA,mBAOJ,SACI,wBAOJ,SACI,cAQJ,6BAEI,sBACA,UAOJ,kFAEI,YAQJ,cACI,6BACA,oBAOJ,yCACI,wBAQJ,6BACI,0BACA,aAUJ,QACI,cAOJ,QACI,kBAUJ,SACI,aAOJ,SACI,aCxVJ,EACE,sBAGF,KACE,qCAEE,yBACA,cCqHF,mCDzHF,KAGI,yBACA,eAIJ,oBAEE,aACA","file":"globals.css"}
+\ No newline at end of file
diff --git a/styles/globals.scss b/styles/globals.scss
@@ -1,6 +1,10 @@
@use 'core/colors';
@import 'vendors/normalize';
+* {
+ box-sizing: border-box;
+}
+
body {
font-family: -apple-system, sans-serif;
@include colors.apply-themes using ($theme) {
