mirror of https://github.com/sgoudham/carbon.git
Lint and fix issues, don't add linting yet though (#293)
* Lint and fix issue, don't add linting yet though * Clean up * Remove /about hrefmain
Michael Fix
7 years ago
committed by
GitHub
parent
083a0e8441
commit
5a4cdd7d7f
@ -1,91 +1,93 @@
|
|||||||
export default () => (
|
export default () => (
|
||||||
<style jsx global>{`
|
<style jsx global>
|
||||||
@font-face {
|
{`
|
||||||
font-family: 'Iosevka';
|
@font-face {
|
||||||
src: url('//cdn.jsdelivr.net/npm/@typopro/web-iosevka@3.7.5/TypoPRO-iosevka-term-bold.woff')
|
font-family: 'Iosevka';
|
||||||
format('woff');
|
src: url('//cdn.jsdelivr.net/npm/@typopro/web-iosevka@3.7.5/TypoPRO-iosevka-term-bold.woff')
|
||||||
font-weight: 400;
|
|
||||||
font-style: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: 'Hack';
|
|
||||||
src: url('//cdn.jsdelivr.net/font-hack/2.020/fonts/woff2/hack-regular-webfont.woff2?v=2.020')
|
|
||||||
format('woff2'),
|
|
||||||
url('//cdn.jsdelivr.net/font-hack/2.020/fonts/woff/hack-regular-webfont.woff?v=2.020')
|
|
||||||
format('woff');
|
format('woff');
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: 'Fira Code';
|
font-family: 'Hack';
|
||||||
src: url('//cdn.rawgit.com/tonsky/FiraCode/1.204/distr/woff2/FiraCode-Regular.woff2')
|
src: url('//cdn.jsdelivr.net/font-hack/2.020/fonts/woff2/hack-regular-webfont.woff2?v=2.020')
|
||||||
format('woff2'),
|
format('woff2'),
|
||||||
url('//cdn.rawgit.com/tonsky/FiraCode/1.204/distr/woff/FiraCode-Regular.woff')
|
url('//cdn.jsdelivr.net/font-hack/2.020/fonts/woff/hack-regular-webfont.woff?v=2.020')
|
||||||
format('woff');
|
format('woff');
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Fira Code';
|
||||||
|
src: url('//cdn.rawgit.com/tonsky/FiraCode/1.204/distr/woff2/FiraCode-Regular.woff2')
|
||||||
|
format('woff2'),
|
||||||
|
url('//cdn.rawgit.com/tonsky/FiraCode/1.204/distr/woff/FiraCode-Regular.woff')
|
||||||
|
format('woff');
|
||||||
|
font-weight: 400;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
/* latin */
|
/* latin */
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: 'Anonymous Pro';
|
font-family: 'Anonymous Pro';
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
src: local('Anonymous Pro Regular'), local('AnonymousPro-Regular'),
|
src: local('Anonymous Pro Regular'), local('AnonymousPro-Regular'),
|
||||||
url(//fonts.gstatic.com/s/anonymouspro/v11/Zhfjj_gat3waL4JSju74E3n3cbdKJftHIk87C9ihfO8.woff2)
|
url(//fonts.gstatic.com/s/anonymouspro/v11/Zhfjj_gat3waL4JSju74E3n3cbdKJftHIk87C9ihfO8.woff2)
|
||||||
format('woff2');
|
format('woff2');
|
||||||
unicode-range: U+0000-00ff, U+0131, U+0152-0153, U+02bb-02bc, U+02c6, U+02da, U+02dc,
|
unicode-range: U + 0000-00ff, U + 0131, U + 0152-0153, U + 02bb-02bc, U + 02c6, U + 02da,
|
||||||
U+2000-206f, U+2074, U+20ac, U+2122, U+2212, U+2215;
|
U + 02dc, U + 2000-206f, U + 2074, U + 20ac, U + 2122, U + 2212, U + 2215;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* latin */
|
/* latin */
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: 'Droid Sans Mono';
|
font-family: 'Droid Sans Mono';
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
src: local('Droid Sans Mono Regular'), local('DroidSansMono-Regular'),
|
src: local('Droid Sans Mono Regular'), local('DroidSansMono-Regular'),
|
||||||
url(//fonts.gstatic.com/s/droidsansmono/v9/ns-m2xQYezAtqh7ai59hJVlgUn8GogvcKKzoM9Dh-4E.woff2)
|
url(//fonts.gstatic.com/s/droidsansmono/v9/ns-m2xQYezAtqh7ai59hJVlgUn8GogvcKKzoM9Dh-4E.woff2)
|
||||||
format('woff2');
|
format('woff2');
|
||||||
unicode-range: U+0000-00ff, U+0131, U+0152-0153, U+02bb-02bc, U+02c6, U+02da, U+02dc,
|
unicode-range: U + 0000-00ff, U + 0131, U + 0152-0153, U + 02bb-02bc, U + 02c6, U + 02da,
|
||||||
U+2000-206f, U+2074, U+20ac, U+2122, U+2212, U+2215;
|
U + 02dc, U + 2000-206f, U + 2074, U + 20ac, U + 2122, U + 2212, U + 2215;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* latin */
|
/* latin */
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: 'Inconsolata';
|
font-family: 'Inconsolata';
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
src: local('Inconsolata Regular'), local('Inconsolata-Regular'),
|
src: local('Inconsolata Regular'), local('Inconsolata-Regular'),
|
||||||
url(//fonts.gstatic.com/s/inconsolata/v16/BjAYBlHtW3CJxDcjzrnZCIgp9Q8gbYrhqGlRav_IXfk.woff2)
|
url(//fonts.gstatic.com/s/inconsolata/v16/BjAYBlHtW3CJxDcjzrnZCIgp9Q8gbYrhqGlRav_IXfk.woff2)
|
||||||
format('woff2');
|
format('woff2');
|
||||||
unicode-range: U+0000-00ff, U+0131, U+0152-0153, U+02bb-02bc, U+02c6, U+02da, U+02dc,
|
unicode-range: U + 0000-00ff, U + 0131, U + 0152-0153, U + 02bb-02bc, U + 02c6, U + 02da,
|
||||||
U+2000-206f, U+2074, U+20ac, U+2122, U+2212, U+2215;
|
U + 02dc, U + 2000-206f, U + 2074, U + 20ac, U + 2122, U + 2212, U + 2215;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* latin */
|
/* latin */
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: 'Source Code Pro';
|
font-family: 'Source Code Pro';
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
src: local('Source Code Pro'), local('SourceCodePro-Regular'),
|
src: local('Source Code Pro'), local('SourceCodePro-Regular'),
|
||||||
url(//fonts.gstatic.com/s/sourcecodepro/v7/mrl8jkM18OlOQN8JLgasD5bPFduIYtoLzwST68uhz_Y.woff2)
|
url(//fonts.gstatic.com/s/sourcecodepro/v7/mrl8jkM18OlOQN8JLgasD5bPFduIYtoLzwST68uhz_Y.woff2)
|
||||||
format('woff2');
|
format('woff2');
|
||||||
unicode-range: U+0000-00ff, U+0131, U+0152-0153, U+02bb-02bc, U+02c6, U+02da, U+02dc,
|
unicode-range: U + 0000-00ff, U + 0131, U + 0152-0153, U + 02bb-02bc, U + 02c6, U + 02da,
|
||||||
U+2000-206f, U+2074, U+20ac, U+2122, U+2212, U+2215;
|
U + 02dc, U + 2000-206f, U + 2074, U + 20ac, U + 2122, U + 2212, U + 2215;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* latin */
|
/* latin */
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: 'Ubuntu Mono';
|
font-family: 'Ubuntu Mono';
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
src: local('Ubuntu Mono'), local('UbuntuMono-Regular'),
|
src: local('Ubuntu Mono'), local('UbuntuMono-Regular'),
|
||||||
url(//fonts.gstatic.com/s/ubuntumono/v7/ViZhet7Ak-LRXZMXzuAfkYgp9Q8gbYrhqGlRav_IXfk.woff2)
|
url(//fonts.gstatic.com/s/ubuntumono/v7/ViZhet7Ak-LRXZMXzuAfkYgp9Q8gbYrhqGlRav_IXfk.woff2)
|
||||||
format('woff2');
|
format('woff2');
|
||||||
unicode-range: U+0000-00ff, U+0131, U+0152-0153, U+02bb-02bc, U+02c6, U+02da, U+02dc,
|
unicode-range: U + 0000-00ff, U + 0131, U + 0152-0153, U + 02bb-02bc, U + 02c6, U + 02da,
|
||||||
U+2000-206f, U+2074, U+20ac, U+2122, U+2212, U+2215;
|
U + 02dc, U + 2000-206f, U + 2074, U + 20ac, U + 2122, U + 2212, U + 2215;
|
||||||
}
|
}
|
||||||
`}</style>
|
`}
|
||||||
|
</style>
|
||||||
)
|
)
|
||||||
|
|||||||
@ -1,195 +1,197 @@
|
|||||||
import { COLORS } from '../../lib/constants'
|
import { COLORS } from '../../lib/constants'
|
||||||
|
|
||||||
export default () => (
|
export default () => (
|
||||||
<style jsx global>{`
|
<style jsx global>
|
||||||
/* http://meyerweb.com/eric/tools/css/reset/
|
{`
|
||||||
|
/* http://meyerweb.com/eric/tools/css/reset/
|
||||||
v2.0 | 20110126
|
v2.0 | 20110126
|
||||||
License: none (public domain)
|
License: none (public domain)
|
||||||
*/
|
*/
|
||||||
|
|
||||||
html,
|
html,
|
||||||
body,
|
body,
|
||||||
div,
|
div,
|
||||||
span,
|
span,
|
||||||
applet,
|
applet,
|
||||||
object,
|
object,
|
||||||
iframe,
|
iframe,
|
||||||
h1,
|
h1,
|
||||||
h2,
|
h2,
|
||||||
h3,
|
h3,
|
||||||
h4,
|
h4,
|
||||||
h5,
|
h5,
|
||||||
h6,
|
h6,
|
||||||
p,
|
p,
|
||||||
blockquote,
|
blockquote,
|
||||||
pre,
|
pre,
|
||||||
a,
|
a,
|
||||||
abbr,
|
abbr,
|
||||||
acronym,
|
acronym,
|
||||||
address,
|
address,
|
||||||
big,
|
big,
|
||||||
cite,
|
cite,
|
||||||
code,
|
code,
|
||||||
del,
|
del,
|
||||||
dfn,
|
dfn,
|
||||||
em,
|
em,
|
||||||
img,
|
img,
|
||||||
ins,
|
ins,
|
||||||
kbd,
|
kbd,
|
||||||
q,
|
q,
|
||||||
s,
|
s,
|
||||||
samp,
|
samp,
|
||||||
small,
|
small,
|
||||||
strike,
|
strike,
|
||||||
strong,
|
strong,
|
||||||
sub,
|
sub,
|
||||||
sup,
|
sup,
|
||||||
tt,
|
tt,
|
||||||
var,
|
var,
|
||||||
b,
|
b,
|
||||||
u,
|
u,
|
||||||
i,
|
i,
|
||||||
center,
|
center,
|
||||||
dl,
|
dl,
|
||||||
dt,
|
dt,
|
||||||
dd,
|
dd,
|
||||||
ol,
|
ol,
|
||||||
ul,
|
ul,
|
||||||
li,
|
li,
|
||||||
fieldset,
|
fieldset,
|
||||||
form,
|
form,
|
||||||
label,
|
label,
|
||||||
legend,
|
legend,
|
||||||
table,
|
table,
|
||||||
caption,
|
caption,
|
||||||
tbody,
|
tbody,
|
||||||
tfoot,
|
tfoot,
|
||||||
thead,
|
thead,
|
||||||
tr,
|
tr,
|
||||||
th,
|
th,
|
||||||
td,
|
td,
|
||||||
article,
|
article,
|
||||||
aside,
|
aside,
|
||||||
canvas,
|
canvas,
|
||||||
details,
|
details,
|
||||||
embed,
|
embed,
|
||||||
figure,
|
figure,
|
||||||
figcaption,
|
figcaption,
|
||||||
footer,
|
footer,
|
||||||
header,
|
header,
|
||||||
hgroup,
|
hgroup,
|
||||||
menu,
|
menu,
|
||||||
nav,
|
nav,
|
||||||
output,
|
output,
|
||||||
ruby,
|
ruby,
|
||||||
section,
|
section,
|
||||||
summary,
|
summary,
|
||||||
time,
|
time,
|
||||||
mark,
|
mark,
|
||||||
audio,
|
audio,
|
||||||
video {
|
video {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
border: 0;
|
border: 0;
|
||||||
font-size: 100%;
|
font-size: 100%;
|
||||||
font-weight: inherit;
|
font-weight: inherit;
|
||||||
font-family: inherit;
|
font-family: inherit;
|
||||||
font-style: inherit;
|
font-style: inherit;
|
||||||
vertical-align: baseline;
|
vertical-align: baseline;
|
||||||
}
|
}
|
||||||
/* HTML5 display-role reset for older browsers */
|
/* HTML5 display-role reset for older browsers */
|
||||||
article,
|
article,
|
||||||
aside,
|
aside,
|
||||||
details,
|
details,
|
||||||
figcaption,
|
figcaption,
|
||||||
figure,
|
figure,
|
||||||
footer,
|
footer,
|
||||||
header,
|
header,
|
||||||
hgroup,
|
hgroup,
|
||||||
menu,
|
menu,
|
||||||
nav,
|
nav,
|
||||||
section {
|
section {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
ol,
|
ol,
|
||||||
ul {
|
ul {
|
||||||
list-style: none;
|
list-style: none;
|
||||||
}
|
}
|
||||||
blockquote,
|
blockquote,
|
||||||
q {
|
q {
|
||||||
quotes: none;
|
quotes: none;
|
||||||
}
|
}
|
||||||
blockquote:before,
|
blockquote:before,
|
||||||
blockquote:after,
|
blockquote:after,
|
||||||
q:before,
|
q:before,
|
||||||
q:after {
|
q:after {
|
||||||
content: '';
|
content: '';
|
||||||
content: none;
|
content: none;
|
||||||
}
|
}
|
||||||
table {
|
table {
|
||||||
border-collapse: collapse;
|
border-collapse: collapse;
|
||||||
border-spacing: 0;
|
border-spacing: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
html,
|
html,
|
||||||
body {
|
body {
|
||||||
-webkit-font-smoothing: antialiased;
|
-webkit-font-smoothing: antialiased;
|
||||||
-moz-osx-font-smoothing: grayscale;
|
-moz-osx-font-smoothing: grayscale;
|
||||||
text-rendering: optimizeLegibility;
|
text-rendering: optimizeLegibility;
|
||||||
background: ${COLORS.BLACK};
|
background: ${COLORS.BLACK};
|
||||||
color: white;
|
color: white;
|
||||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu, 'Helvetica Neue',
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu, 'Helvetica Neue',
|
||||||
sans-serif;
|
sans-serif;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
text-transform: initial;
|
text-transform: initial;
|
||||||
letter-spacing: initial;
|
letter-spacing: initial;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
min-width: 848px;
|
min-width: 848px;
|
||||||
min-height: 704px;
|
min-height: 704px;
|
||||||
}
|
}
|
||||||
|
|
||||||
* {
|
* {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1,
|
h1,
|
||||||
h2,
|
h2,
|
||||||
h3,
|
h3,
|
||||||
h4,
|
h4,
|
||||||
h5,
|
h5,
|
||||||
h6 {
|
h6 {
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: inherit;
|
color: inherit;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
*::selection {
|
*::selection {
|
||||||
background: rgba(255, 255, 255, 0.99);
|
background: rgba(255, 255, 255, 0.99);
|
||||||
color: #121212;
|
color: #121212;
|
||||||
}
|
}
|
||||||
|
|
||||||
.link {
|
.link {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
padding-bottom: 3px;
|
padding-bottom: 3px;
|
||||||
background: linear-gradient(
|
background: linear-gradient(
|
||||||
to right,
|
to right,
|
||||||
rgba(255, 255, 255, 0.7) 0%,
|
rgba(255, 255, 255, 0.7) 0%,
|
||||||
rgba(255, 255, 255, 0.7) 100%
|
rgba(255, 255, 255, 0.7) 100%
|
||||||
);
|
);
|
||||||
background-size: 1px 1px;
|
background-size: 1px 1px;
|
||||||
background-position: 0 100%;
|
background-position: 0 100%;
|
||||||
background-repeat: repeat-x;
|
background-repeat: repeat-x;
|
||||||
}
|
}
|
||||||
|
|
||||||
.link:hover {
|
.link:hover {
|
||||||
color: ${COLORS.PRIMARY};
|
color: ${COLORS.PRIMARY};
|
||||||
background: none;
|
background: none;
|
||||||
}
|
}
|
||||||
`}</style>
|
`}
|
||||||
|
</style>
|
||||||
)
|
)
|
||||||
|
|||||||
@ -1,178 +1,180 @@
|
|||||||
export default () => (
|
export default () => (
|
||||||
<style jsx global>{`
|
<style jsx global>
|
||||||
/* https://github.com/jxnblk/type-system
|
{`
|
||||||
|
/* https://github.com/jxnblk/type-system
|
||||||
Brent Jackson
|
Brent Jackson
|
||||||
License: MIT
|
License: MIT
|
||||||
*/
|
*/
|
||||||
:root {
|
:root {
|
||||||
--h0: 4.5rem;
|
--h0: 4.5rem;
|
||||||
--h1: 3rem;
|
--h1: 3rem;
|
||||||
--h2: 2.25rem;
|
--h2: 2.25rem;
|
||||||
--h3: 1.5rem;
|
--h3: 1.5rem;
|
||||||
--h4: 1.125rem;
|
--h4: 1.125rem;
|
||||||
--h5: 0.75rem;
|
--h5: 0.75rem;
|
||||||
|
|
||||||
--lh: calc(4/3);
|
--lh: calc(4 / 3);
|
||||||
--mx: 32em;
|
--mx: 32em;
|
||||||
|
|
||||||
--m1: calc(2/3 * 1em);
|
--m1: calc(2 / 3 * 1em);
|
||||||
--m2: calc(4/3 * 1em);
|
--m2: calc(4 / 3 * 1em);
|
||||||
--m3: calc(8/3 * 1em);
|
--m3: calc(8 / 3 * 1em);
|
||||||
--m4: calc(16/3 * 1em);
|
--m4: calc(16 / 3 * 1em);
|
||||||
--x1: 0.5rem;
|
--x1: 0.5rem;
|
||||||
--x2: 1rem;
|
--x2: 1rem;
|
||||||
--x3: 2rem;
|
--x3: 2rem;
|
||||||
--x4: 4rem;
|
--x4: 4rem;
|
||||||
--x5: 8rem;
|
--x5: 8rem;
|
||||||
--x6: 16rem;
|
--x6: 16rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
|
||||||
font-size: var(--h4);
|
|
||||||
line-height: var(--lh);
|
|
||||||
margin: 2rem 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1,
|
body {
|
||||||
h2,
|
font-size: var(--h4);
|
||||||
h3 {
|
line-height: var(--lh);
|
||||||
margin-top: var(--m1);
|
margin: 2rem 0;
|
||||||
margin-bottom: 0;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
h4,
|
h1,
|
||||||
h5,
|
h2,
|
||||||
h6,
|
h3 {
|
||||||
p,
|
margin-top: var(--m1);
|
||||||
dl,
|
margin-bottom: 0;
|
||||||
ol,
|
}
|
||||||
ul,
|
|
||||||
blockquote {
|
|
||||||
margin-top: var(--m2);
|
|
||||||
margin-bottom: var(--m2);
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
h4,
|
||||||
font-size: var(--h2);
|
h5,
|
||||||
}
|
h6,
|
||||||
h2,
|
p,
|
||||||
h3 {
|
dl,
|
||||||
font-size: var(--h3);
|
ol,
|
||||||
}
|
ul,
|
||||||
h4 {
|
blockquote {
|
||||||
font-size: var(--h4);
|
margin-top: var(--m2);
|
||||||
}
|
margin-bottom: var(--m2);
|
||||||
h5,
|
}
|
||||||
h6 {
|
|
||||||
font-size: var(--h5);
|
|
||||||
}
|
|
||||||
|
|
||||||
.h0 {
|
h1 {
|
||||||
font-size: var(--h0);
|
font-size: var(--h2);
|
||||||
}
|
}
|
||||||
.h1 {
|
h2,
|
||||||
font-size: var(--h1);
|
h3 {
|
||||||
}
|
font-size: var(--h3);
|
||||||
.h2 {
|
}
|
||||||
font-size: var(--h2);
|
h4 {
|
||||||
}
|
font-size: var(--h4);
|
||||||
.h3 {
|
}
|
||||||
font-size: var(--h3);
|
h5,
|
||||||
}
|
h6 {
|
||||||
.h4 {
|
font-size: var(--h5);
|
||||||
font-size: var(--h4);
|
}
|
||||||
}
|
|
||||||
.h5 {
|
|
||||||
font-size: var(--h5);
|
|
||||||
}
|
|
||||||
.h6 {
|
|
||||||
font-size: var(--h5);
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (min-width: 40em) {
|
.h0 {
|
||||||
.xh0 {
|
|
||||||
font-size: var(--h0);
|
font-size: var(--h0);
|
||||||
}
|
}
|
||||||
.xh1 {
|
.h1 {
|
||||||
font-size: var(--h1);
|
font-size: var(--h1);
|
||||||
}
|
}
|
||||||
.xh2 {
|
.h2 {
|
||||||
font-size: var(--h2);
|
font-size: var(--h2);
|
||||||
}
|
}
|
||||||
.xh3 {
|
.h3 {
|
||||||
font-size: var(--h3);
|
font-size: var(--h3);
|
||||||
}
|
}
|
||||||
.xh4 {
|
.h4 {
|
||||||
font-size: var(--h4);
|
font-size: var(--h4);
|
||||||
}
|
}
|
||||||
.xh5 {
|
.h5 {
|
||||||
font-size: var(--h5);
|
font-size: var(--h5);
|
||||||
}
|
}
|
||||||
.xh6 {
|
.h6 {
|
||||||
font-size: var(--h5);
|
font-size: var(--h5);
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.lh1 {
|
@media screen and (min-width: 40em) {
|
||||||
line-height: 1;
|
.xh0 {
|
||||||
}
|
font-size: var(--h0);
|
||||||
/* h0, h1, h3 */
|
}
|
||||||
.lh2 {
|
.xh1 {
|
||||||
line-height: calc(7/6 * 1em);
|
font-size: var(--h1);
|
||||||
}
|
}
|
||||||
/* For body copy */
|
.xh2 {
|
||||||
.lh3 {
|
font-size: var(--h2);
|
||||||
line-height: calc(16/9 * 1em);
|
}
|
||||||
}
|
.xh3 {
|
||||||
|
font-size: var(--h3);
|
||||||
|
}
|
||||||
|
.xh4 {
|
||||||
|
font-size: var(--h4);
|
||||||
|
}
|
||||||
|
.xh5 {
|
||||||
|
font-size: var(--h5);
|
||||||
|
}
|
||||||
|
.xh6 {
|
||||||
|
font-size: var(--h5);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.mt0 {
|
.lh1 {
|
||||||
margin-top: 0;
|
line-height: 1;
|
||||||
}
|
}
|
||||||
.mb0 {
|
/* h0, h1, h3 */
|
||||||
margin-bottom: 0;
|
.lh2 {
|
||||||
}
|
line-height: calc(7 / 6 * 1em);
|
||||||
.mt1 {
|
}
|
||||||
margin-top: var(--x1);
|
/* For body copy */
|
||||||
}
|
.lh3 {
|
||||||
.mb1 {
|
line-height: calc(16 / 9 * 1em);
|
||||||
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 {
|
.mt0 {
|
||||||
max-width: var(--mx);
|
margin-top: 0;
|
||||||
}
|
}
|
||||||
.bold {
|
.mb0 {
|
||||||
font-weight: bold;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
`}</style>
|
.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>
|
||||||
)
|
)
|
||||||
|
|||||||
@ -1,2 +1,3 @@
|
|||||||
import Editor from './editor'
|
import Editor from './editor'
|
||||||
|
|
||||||
export default Editor
|
export default Editor
|
||||||
|
|||||||
Loading…
Reference in New Issue