crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-07-23 04:36:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

🎨 styles: banner home

Browse Source 
:%s
This commit is contained in:
lytrankieio123
2021-08-26 13:59:05 +07:00
parent d345020e6e
commit e1088bfb88
9 changed files with 93 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/styles/_base.scss
View File

@@ -39,8 +39,7 @@
--font-size: 16px;
--line-height: 24px;
--font-sans: "Nunito", cursive, -apple-system, system-ui, BlinkMacSystemFont, "Helvetica Neue", "Helvetica",
sans-serif;
--font-sans: "Nunito", -apple-system, system-ui, BlinkMacSystemFont, "Helvetica Neue", "Helvetica", sans-serif;
--font-heading: "Righteous", -apple-system, system-ui, BlinkMacSystemFont, "Helvetica Neue", "Helvetica", sans-serif;
--font-logo: "Poppins", -apple-system, system-ui, BlinkMacSystemFont, "Helvetica Neue", "Helvetica", sans-serif;
}

85
src/styles/_utilities.scss
View File

@@ -1,78 +1,78 @@
@layer utilities {
.heading-1 {
font-size: 4.8rem;
line-height: 5.6rem;
letter-spacing: -0.03em;
font-weight: bold;
text-transform: uppercase;
@screen md {
font-size: 6.4rem;
line-height: 8rem;
letter-spacing: -0.03em;
}
}
.heading-2 {
font-size: 4rem;
line-height: 4.8rem;
letter-spacing: -0.02em;
font-weight: bold;
text-transform: uppercase;
@screen md {
font-size: 4.8rem;
line-height: 5.6rem;
letter-spacing: -0.02em;
}
}
.heading-3 {
font-size: 2.4rem;
line-height: 3.2rem;
font-size: 24px;
line-height: 28px;
letter-spacing: -0.01em;
font-weight: bold;
text-transform: uppercase;
@screen md {
font-size: 3.2rem;
line-height: 4rem;
font-size: 64px;
line-height: 80px;
letter-spacing: -0.03em;
}
}
.heading-2 {
font-size: 32px;
line-height: 40px;
letter-spacing: -0.02em;
font-weight: bold;
text-transform: uppercase;
@screen md {
font-size: 48px;
line-height: 56px;
letter-spacing: -0.02em;
}
}
.heading-3 {
font-size: 24px;
line-height: 32px;
letter-spacing: -0.01em;
font-weight: bold;
text-transform: uppercase;
@screen md {
font-size: 32px;
line-height: 40px;
letter-spacing: -0.01em;
}
}
.sm-headline {
font-size: 1.8rem;
line-height: 2.8rem;
font-size: 18px;
line-height: 28px;
letter-spacing: -0.01em;
font-weight: bold;
@screen md {
font-size: 2rem;
line-height: 2.8rem;
font-size: 20px;
line-height: 28px;
letter-spacing: -0.01em;
}
}
.sub-headline {
font-size: 2rem;
line-height: 2.8rem;
font-size: 20px;
line-height: 28px;
letter-spacing: -0.01em;
@screen md {
font-size: 2.4rem;
line-height: 3.2rem;
font-size: 24px;
line-height: 32px;
letter-spacing: -0.01em;
}
}
.topline {
font-size: 1.8rem;
line-height: 2.8rem;
font-size: 18px;
line-height: 28px;
letter-spacing: 0.01em;
@screen md {
font-size: 2rem;
line-height: 2.8rem;
font-size: 20px;
line-height: 28px;
letter-spacing: 0.01em;
}
}
.caption {
font-size: 1.2rem;
line-height: 2rem;
font-size: 12px;
line-height: 20px;
letter-spacing: 0.01em;
}
@@ -80,6 +80,7 @@
font-size: 10px;
line-height: 16px;
}
.spacing-horizontal {
padding-left: 2rem;
padding-right: 2rem;