mirror of https://github.com/sgoudham/carbon.git
Clean up styles
- Move globals out of Meta component - Create style components for Reset and TypeSystemmain
Jake Dexheimer
7 years ago
parent
7a2ce44278
commit
bf374f1728
@ -0,0 +1,106 @@
|
||||
import { COLORS } from '../../lib/constants'
|
||||
|
||||
export default () =>
|
||||
<style jsx global>{`
|
||||
/* http://meyerweb.com/eric/tools/css/reset/
|
||||
v2.0 | 20110126
|
||||
License: none (public domain)
|
||||
*/
|
||||
|
||||
html, body, div, span, applet, object, iframe,
|
||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||||
a, abbr, acronym, address, big, cite, code,
|
||||
del, dfn, em, img, ins, kbd, q, s, samp,
|
||||
small, strike, strong, sub, sup, tt, var,
|
||||
b, u, i, center,
|
||||
dl, dt, dd, ol, ul, li,
|
||||
fieldset, form, label, legend,
|
||||
table, caption, tbody, tfoot, thead, tr, th, td,
|
||||
article, aside, canvas, details, embed,
|
||||
figure, figcaption, footer, header, hgroup,
|
||||
menu, nav, output, ruby, section, summary,
|
||||
time, mark, audio, video {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font-size: 100%;
|
||||
font-weight: inherit;
|
||||
font-family: inherit;
|
||||
font-style: inherit;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
/* HTML5 display-role reset for older browsers */
|
||||
article, aside, details, figcaption, figure,
|
||||
footer, header, hgroup, menu, nav, section {
|
||||
display: block;
|
||||
}
|
||||
ol, ul {
|
||||
list-style: none;
|
||||
}
|
||||
blockquote, q {
|
||||
quotes: none;
|
||||
}
|
||||
blockquote:before, blockquote:after,
|
||||
q:before, q:after {
|
||||
content: '';
|
||||
content: none;
|
||||
}
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-rendering: optimizeLegibility;
|
||||
background: ${COLORS.BLACK};
|
||||
color: white;
|
||||
font-family: -apple-system,
|
||||
BlinkMacSystemFont,
|
||||
"Segoe UI",
|
||||
Roboto,
|
||||
Ubuntu,
|
||||
"Helvetica Neue",
|
||||
sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
text-transform: initial;
|
||||
letter-spacing: initial;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; }
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
*::selection {
|
||||
background: rgba(255,255,255,.99);
|
||||
color: #121212;
|
||||
}
|
||||
|
||||
.link {
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
padding-bottom: 2px;
|
||||
background: linear-gradient(to right, rgba(255,255,255, 0.7) 0%, rgba(255,255,255, 0.7) 100%);
|
||||
background-size: 1px 1px;
|
||||
background-position: 0 100%;
|
||||
background-repeat: repeat-x;
|
||||
}
|
||||
|
||||
.link:hover {
|
||||
color: ${COLORS.PRIMARY};
|
||||
background: none;
|
||||
}
|
||||
`}</style>
|
||||
@ -0,0 +1,93 @@
|
||||
export default () =>
|
||||
<style jsx global>{`
|
||||
/* https://github.com/jxnblk/type-system
|
||||
Brent Jackson
|
||||
License: MIT
|
||||
*/
|
||||
: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 }
|
||||
`}</style>
|
||||
Loading…
Reference in New Issue