Skip to content

Instantly share code, notes, and snippets.

@jonleopard
Created May 29, 2020 12:58
Show Gist options
  • Save jonleopard/9a246af528c56850ffc2e7b918162291 to your computer and use it in GitHub Desktop.
Save jonleopard/9a246af528c56850ffc2e7b918162291 to your computer and use it in GitHub Desktop.
import { createGlobalStyle } from 'styled-components';
// from the console: Unknown property name
// .markdown h1 {
// @apply text-4xl font-bold my-2: ;
// }
//
const GlobalMarkdownStyles = createGlobalStyle`
.markdown {
a {
@apply text-blue-700 underline;
}
p {
@apply my-4;
}
blockquote,
figure {
@apply my-4 mx-10;
}
hr {
@apply border;
}
h1 {
@apply text-4xl font-bold my-2;
}
h2 {
@apply text-2xl font-bold my-3;
}
h3 {
@apply text-lg font-bold my-4;
}
h4 {
@apply text-base font-bold my-5;
}
h5 {
@apply text-sm font-bold my-6;
}
h6 {
@apply text-xs font-bold my-10;
}
article,
aside,
nav,
section {
h1 {
@apply text-2xl font-bold my-3;
}
article,
aside,
nav,
section {
h1 {
@apply text-lg font-bold my-4;
}
article,
aside,
nav,
section {
h1 {
@apply text-base font-bold my-5;
}
article,
aside,
nav,
section {
h1 {
@apply text-sm font-bold my-6;
}
article,
aside,
nav,
section {
h1 {
@apply text-xs font-bold my-10;
}
}
}
}
}
}
ul,
menu {
// should be my-4 for proper reset, but thats ugly af
@apply list-disc my-1 pl-10;
}
ol {
@apply list-decimal my-4 pl-10;
}
ul,
ol {
ul {
list-style-type: circle;
}
ul,
ol {
ul {
list-style-type: square;
}
}
}
dd {
@apply pl-10;
}
dl {
@apply my-4;
}
ul,
ol,
menu,
dl {
ul,
ol,
menu,
dl {
margin: 0;
}
}
legend {
@apply py-0 px-1;
}
fieldset {
@apply my-0 mx-1 pt-0 px-1 pb-2;
}
b,
strong {
font-weight: bold;
}
pre {
@apply my-4;
}
}
`;
export default GlobalMarkdownStyles;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment