primer/css
1
1
Fork 0
mirror of https://github.com/primer/css.git synced 2024-09-20 13:17:29 +03:00
Code Issues Projects Releases Wiki Activity

Re-structure header sizes

Browse Source
This commit is contained in:
Tobias Ahlin 2021-05-03 11:23:47 +02:00
parent 69fa3ebfc3
commit 9c15f07afc
2 changed files with 88 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

111
src/marketing/support/variables.scss
View File

@ -5,54 +5,81 @@ $font-mktg: $body-font !default;
$mktg-header-spacing-large: -3% !default;
$mktg-header-spacing-default: -1% !default;
$mktg-h0-size: 96px !default;
$mktg-h0-lh: 100px !default;
$mktg-h0-size-md: 72px !default;
$mktg-h0-lh-md: 76px !default;
$mktg-h0-size-sm: 48px !default;
$mktg-h0-lh-sm: 52px !default;
// Size steps
$mktg-h-size-0: 96px !default;
$mktg-h-size-1: 72px !default;
$mktg-h-size-2: 64px !default;
$mktg-h-size-3: 56px !default;
$mktg-h-size-4: 48px !default;
$mktg-h-size-5: 40px !default;
$mktg-h-size-6: 32px !default;
$mktg-h-size-7: 28px !default;
$mktg-h-size-8: 24px !default;
$mktg-h-size-9: 20px !default;
$mktg-h-size-10: 16px !default;
$mktg-h1-size: 72px !default;
$mktg-h1-lh: 76px !default;
$mktg-h1-size-md: 56px !default;
$mktg-h1-lh-md: 60px !default;
$mktg-h1-size-sm: 40px !default;
$mktg-h1-lh-sm: 44px !default;
// Line-height steps
$mktg-h-lh-0: 100px !default;
$mktg-h-lh-1: 76px !default;
$mktg-h-lh-2: 64px !default;
$mktg-h-lh-3: 60px !default;
$mktg-h-lh-4: 52px !default;
$mktg-h-lh-5: 44px !default;
$mktg-h-lh-6: 36px !default;
$mktg-h-lh-7: 32px !default;
$mktg-h-lh-8: 28px !default;
$mktg-h-lh-9: 24px !default;
$mktg-h-lh-10: 20px !default;
$mktg-h2-size: 64px !default;
$mktg-h2-lh: 68px !default;
$mktg-h2-size-md: 48px !default;
$mktg-h2-lh-md: 52px !default;
$mktg-h2-size-sm: 32px !default;
$mktg-h2-lh-sm: 36px !default;
// Variables for responsive utility classes
$mktg-h0-size: $mktg-h-size-0 !default;
$mktg-h0-lh: $mktg-h-lh-0 !default;
$mktg-h0-size-md: $mktg-h-size-1 !default;
$mktg-h0-lh-md: $mktg-h-lh-1 !default;
$mktg-h0-size-sm: $mktg-h-size-4 !default;
$mktg-h0-lh-sm: $mktg-h-lh-4 !default;
$mktg-h3-size: 48px !default;
$mktg-h3-lh: 52px !default;
$mktg-h3-size-md: 40px !default;
$mktg-h3-lh-md: 44px !default;
$mktg-h3-size-sm: 28px !default;
$mktg-h3-lh-sm: 32px !default;
$mktg-h1-size: $mktg-h-size-1 !default;
$mktg-h1-lh: $mktg-h-lh-1 !default;
$mktg-h1-size-md: $mktg-h-size-3 !default;
$mktg-h1-lh-md: $mktg-h-lh-3 !default;
$mktg-h1-size-sm: $mktg-h-size-5 !default;
$mktg-h1-lh-sm: $mktg-h-lh-5 !default;
$mktg-h4-size: 32px !default;
$mktg-h4-lh: 36px !default;
$mktg-h4-size-md: 28px !default;
$mktg-h4-lh-md: 32px !default;
$mktg-h4-size-sm: 24px !default;
$mktg-h4-lh-sm: 28px !default;
$mktg-h2-size: $mktg-h-size-2 !default;
$mktg-h2-lh: $mktg-h-lh-2 !default;
$mktg-h2-size-md: $mktg-h-size-4 !default;
$mktg-h2-lh-md: $mktg-h-lh-4 !default;
$mktg-h2-size-sm: $mktg-h-size-6 !default;
$mktg-h2-lh-sm: $mktg-h-lh-6 !default;
$mktg-h5-size: 24px !default;
$mktg-h5-lh: 28px !default;
$mktg-h5-size-md: 24px !default;
$mktg-h5-lh-md: 28px !default;
$mktg-h5-size-sm: 20px !default;
$mktg-h5-lh-sm: 24px !default;
$mktg-h3-size: $mktg-h-size-4 !default;
$mktg-h3-lh: $mktg-h-lh-4 !default;
$mktg-h3-size-md: $mktg-h-size-5 !default;
$mktg-h3-lh-md: $mktg-h-lh-5 !default;
$mktg-h3-size-sm: $mktg-h-size-7 !default;
$mktg-h3-lh-sm: $mktg-h-lh-7 !default;
$mktg-h6-size: 20px !default;
$mktg-h6-lh: 24px !default;
$mktg-h6-size-md: 20px !default;
$mktg-h6-lh-md: 24px !default;
$mktg-h6-size-sm: 16px !default;
$mktg-h6-lh-sm: 20px !default;
$mktg-h4-size: $mktg-h-size-6 !default;
$mktg-h4-lh: $mktg-h-lh-6 !default;
$mktg-h4-size-md: $mktg-h-size-7 !default;
$mktg-h4-lh-md: $mktg-h-lh-7 !default;
$mktg-h4-size-sm: $mktg-h-size-8 !default;
$mktg-h4-lh-sm: $mktg-h-lh-8 !default;
$mktg-h5-size: $mktg-h-size-8 !default;
$mktg-h5-lh: $mktg-h-lh-8 !default;
$mktg-h5-size-md: $mktg-h-size-8 !default;
$mktg-h5-lh-md: $mktg-h-lh-8 !default;
$mktg-h5-size-sm: $mktg-h-size-9 !default;
$mktg-h5-lh-sm: $mktg-h-lh-9 !default;
$mktg-h6-size: $mktg-h-size-9 !default;
$mktg-h6-lh: $mktg-h-lh-9 !default;
$mktg-h6-size-md: $mktg-h-size-9 !default;
$mktg-h6-lh-md: $mktg-h-lh-9 !default;
$mktg-h6-size-sm: $mktg-h-size-10 !default;
$mktg-h6-lh-sm: $mktg-h-lh-10 !default;
// Animations
$transition-time: 0.4s !default;

54
src/marketing/type/typography.scss
View File

@ -1,47 +1,39 @@
// Headings
.h000-mktg,
.h00-mktg,
.h0-mktg,
.h1-mktg,
.h2-mktg,
.h3-mktg,
.h4-mktg,
.h5-mktg,
.h6-mktg,
.lead-mktg {
.h6-mktg {
font-family: $font-mktg;
font-weight: $font-weight-semibold;
font-feature-settings: "salt" 2;
}
@mixin h000-mktg {
font-size: $h000-size-mobile !important;
@include breakpoint(md) { font-size: $h000-size !important; }
.h0-mktg {
font-size: $mktg-h0-size-sm !important;
line-height: $mktg-h0-lh-sm !important;
@include breakpoint(md) {
font-size: $mktg-h0-size-md !important;
line-height: $mktg-h0-lh-md !important;
}
@include breakpoint(lg) {
font-size: $mktg-h0-size !important;
line-height: $mktg-h0-lh !important;
}
}
.h000-mktg { @include h000-mktg; }
@mixin h00-mktg {
font-size: $h00-size-mobile !important;
@include breakpoint(md) { font-size: $h00-size !important; }
}
.h00-mktg { @include h00-mktg; }
@mixin h0-mktg {
font-size: $h0-size-mobile !important;
@include breakpoint(md) { font-size: $h0-size !important; }
}
.h0-mktg { @include h0-mktg; }
@mixin h1-mktg {
.h1-mktg {
font-size: $h1-size-mobile !important;
@include breakpoint(md) { font-size: $h1-size !important; }
@include breakpoint(md) {
font-size: $h1-size !important;
}
}
.h1-mktg { @include h1-mktg; }
@mixin h2-mktg {
font-size: $h2-size-mobile !important;
@include breakpoint(md) { font-size: $h2-size !important; }
@ -68,14 +60,6 @@
font-size: $h6-size !important;
}
// Big opening paragraphs
@mixin lead-mktg {
font-size: $h3-size;
font-weight: $font-weight-normal;
}
.lead-mktg { @include lead-mktg; }
// Pullquote
@mixin pullquote {