mirror of https://github.com/sgoudham/carbon.git
You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
88 lines
1.8 KiB
CSS
88 lines
1.8 KiB
CSS
7 years ago
|
|
||
|
|
:root {
|
||
|
|
--h0: 4.5rem;
|
||
|
|
--h1: 3rem;
|
||
|
|
--h2: 2.25rem;
|
||
|
|
--h3: 1.5rem;
|
||
|
|
--h4: 1.125rem;
|
||
|
|
--h5: .75rem;
|
||
|
|
|
||
|
|
--lh: calc(4/3);
|
||
|
|
--mx: 32em;
|
||
|
|
|
||
|
|
--m1: calc(2/3 * 1em);
|
||
|
|
--m2: calc(4/3 * 1em);
|
||
|
|
--m3: calc(8/3 * 1em);
|
||
|
|
--m4: calc(16/3 * 1em);
|
||
|
|
--x1: .5rem;
|
||
|
|
--x2: 1rem;
|
||
|
|
--x3: 2rem;
|
||
|
|
--x4: 4rem;
|
||
|
|
--x5: 8rem;
|
||
|
|
--x6: 16rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
body {
|
||
|
|
font-size: var(--h4);
|
||
|
|
line-height: var(--lh);
|
||
|
|
margin: 2rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
h1, h2, h3 {
|
||
|
|
margin-top: var(--m1);
|
||
|
|
margin-bottom: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
h4, h5, h6,
|
||
|
|
p, dl, ol, ul, blockquote {
|
||
|
|
margin-top: var(--m2);
|
||
|
|
margin-bottom: var(--m2);
|
||
|
|
}
|
||
|
|
|
||
|
|
h1 { font-size: var(--h2) }
|
||
|
|
h2, h3 { font-size: var(--h3) }
|
||
|
|
h4 { font-size: var(--h4) }
|
||
|
|
h5, h6 { font-size: var(--h5) }
|
||
|
|
|
||
|
|
.h0 { font-size: var(--h0) }
|
||
|
|
.h1 { font-size: var(--h1) }
|
||
|
|
.h2 { font-size: var(--h2) }
|
||
|
|
.h3 { font-size: var(--h3) }
|
||
|
|
.h4 { font-size: var(--h4) }
|
||
|
|
.h5 { font-size: var(--h5) }
|
||
|
|
.h6 { font-size: var(--h5) }
|
||
|
|
|
||
|
|
@media screen and (min-width: 40em) {
|
||
|
|
.xh0 { font-size: var(--h0) }
|
||
|
|
.xh1 { font-size: var(--h1) }
|
||
|
|
.xh2 { font-size: var(--h2) }
|
||
|
|
.xh3 { font-size: var(--h3) }
|
||
|
|
.xh4 { font-size: var(--h4) }
|
||
|
|
.xh5 { font-size: var(--h5) }
|
||
|
|
.xh6 { font-size: var(--h5) }
|
||
|
|
}
|
||
|
|
|
||
|
|
.lh1 { line-height: 1 }
|
||
|
|
/* h0, h1, h3 */
|
||
|
|
.lh2 { line-height: calc(7/6 * 1em) }
|
||
|
|
/* For body copy */
|
||
|
|
.lh3 { line-height: calc(16/9 * 1em) }
|
||
|
|
|
||
|
|
.mt0 { margin-top: 0 }
|
||
|
|
.mb0 { margin-bottom: 0 }
|
||
|
|
.mt1 { margin-top: var(--x1) }
|
||
|
|
.mb1 { margin-bottom: var(--x1) }
|
||
|
|
.mt2 { margin-top: var(--x2) }
|
||
|
|
.mb2 { margin-bottom: var(--x2) }
|
||
|
|
.mt3 { margin-top: var(--x3) }
|
||
|
|
.mb3 { margin-bottom: var(--x3) }
|
||
|
|
.mt4 { margin-top: var(--x4) }
|
||
|
|
.mb4 { margin-bottom: var(--x4) }
|
||
|
|
.mt5 { margin-top: var(--x5) }
|
||
|
|
.mb5 { margin-bottom: var(--x5) }
|
||
|
|
.mt6 { margin-top: var(--x6) }
|
||
|
|
.mb6 { margin-bottom: var(--x6) }
|
||
|
|
|
||
|
|
.mx { max-width: var(--mx) }
|
||
|
|
.bold { font-weight: bold }
|