diff --git a/src/scss/_partial/code.scss b/src/scss/_partial/code.scss new file mode 100644 index 0000000..ea625b7 --- /dev/null +++ b/src/scss/_partial/code.scss @@ -0,0 +1,35 @@ +code { + font-size: .875rem; + font-weight: 600; + color: var(--xm-c-dark); + &::before, &::after { + content: '`'; + } +} +pre { + overflow-x: auto; + margin-top: 1.7143rem; + padding-top: .8571rem, 1.1429rem; + font-size: .875rem; + color: var(--xm-c-pre); + line-height: 1.7143; + margin-bottom: 1.7143rem; + border-radius: .375rem; + code { + padding: 0; + font-size: inherit; + font-family: inherit; + font-weight: 400; + color: inherit; + background: transparent; + border-width: 0; + border-radius: 0; + line-height: inherit; + &::before { + content: none; + } + &::after { + content: none; + } + } +} diff --git a/src/scss/_partial/container.scss b/src/scss/_partial/container.scss new file mode 100644 index 0000000..f05b439 --- /dev/null +++ b/src/scss/_partial/container.scss @@ -0,0 +1,13 @@ +.markdown-body, +.prose { + max-width: fit-content; + font-size: 1rem; + color: var(--xm-c-general); + line-height: 1.75; + > :first-child { + margin-top: 0; + } + > :last-child { + margin-bottom: 0; + } +} diff --git a/src/scss/_partial/figure.scss b/src/scss/_partial/figure.scss new file mode 100644 index 0000000..22acb23 --- /dev/null +++ b/src/scss/_partial/figure.scss @@ -0,0 +1,14 @@ +figure { + margin-top: 2rem; + margin-bottom: 2rem; + figcaption { + margin-top: .8571rem; + font-size: .875rem; + color: var(--xm-c-figcaption); + line-height: 1.4286; + } + > * { + margin-top: 0; + margin-bottom: 0; + } +} diff --git a/src/scss/_partial/link.scss b/src/scss/_partial/link.scss new file mode 100644 index 0000000..f26b604 --- /dev/null +++ b/src/scss/_partial/link.scss @@ -0,0 +1,8 @@ +a { + font-weight: 500; + text-decoration: none; + color: var(--xm-c-darker); + code { + color: var(--xm-c-code); + } +} diff --git a/src/scss/_partial/list.scss b/src/scss/_partial/list.scss new file mode 100644 index 0000000..63a2eab --- /dev/null +++ b/src/scss/_partial/list.scss @@ -0,0 +1,46 @@ +li { + margin-top: .5rem; + margin-bottom: .5rem; +} +ol { + margin-top: 1.25rem; + margin-bottom: 1.25rem; + list-style-type: none; + > li { + position: relative; + padding-left: 1.75rem; + &::before { + content: counter(list-item, decimal) '.'; + position: absolute; + left: 0; + font-weight: 400; + color: var(--xm-c-ol-counter); + } + } +} +ul { + margin-top: 1.25rem; + margin-bottom: 1.25rem; + list-style-type: none; + > li { + position: relative; + padding-left: 1.75rem; + &::before { + content: ''; + position: absolute; + top: calc(.875rem - .1875rem); + left: .25rem; + width: .375rem; + height: .375rem; + background-color: var(--xm-c-ul-counter); + border-radius: 50%; + } + } +} +ul ul, +ul ol, +ol ul, +ol ol { + margin-top: .75rem; + margin-bottom: .75rem; +} diff --git a/src/scss/_partial/media.scss b/src/scss/_partial/media.scss new file mode 100644 index 0000000..b50b56b --- /dev/null +++ b/src/scss/_partial/media.scss @@ -0,0 +1,8 @@ +img { + margin-top: 2rem; + margin-bottom: 2rem; +} +video { + margin-top: 2rem; + margin-bottom: 2rem; +} diff --git a/src/scss/_partial/quote.scss b/src/scss/_partial/quote.scss new file mode 100644 index 0000000..ba2fb5b --- /dev/null +++ b/src/scss/_partial/quote.scss @@ -0,0 +1,20 @@ +blockquote, +q { + margin-top: 1.6rem; + padding-left: 1rem; + font-weight: 500; + font-style: italic; + color: inherit; + border-color: var(--xm-c-blockquote-color); + border-left-width: .25rem; + quotes: '\201C''\201D''\2018''\2019'; + margin-bottom: 1.6rem; + p { + &:first-of-type::before { + content: open-quote; + } + &:last-of-type::after { + content: close-quote; + } + } +} diff --git a/src/scss/_partial/table.scss b/src/scss/_partial/table.scss new file mode 100644 index 0000000..80aad32 --- /dev/null +++ b/src/scss/_partial/table.scss @@ -0,0 +1,46 @@ +table { + margin-top: 2rem; + margin-bottom: 2rem; + width: 100%; + table-layout: auto; + font-size: .875rem; + text-align: left; + line-height: 1.7143; +} +thead { + font-weight: 600; + color: var(--xm-c-thead); + border-bottom-width: 1px; + border-bottom-color: var(--xm-c-thead-border); + th { + vertical-align: bottom; + padding-right: .5714rem; + padding-bottom: .5714rem; + padding-left: .5714rem; + &:first-child { + padding-left: 0; + } + &:last-child { + padding-right: 0; + } + } +} +tbody { + tr { + border-bottom-width: 1px; + border-bottom-color: var(--xm-c-tr-border); + &:last-child { + border-bottom-width: 0; + } + } + td { + vertical-align: top; + padding: .5714rem; + &:first-child { + padding-left: 0; + } + &:last-child { + padding-right: 0; + } + } +} diff --git a/src/scss/_partial/text.scss b/src/scss/_partial/text.scss new file mode 100644 index 0000000..165747b --- /dev/null +++ b/src/scss/_partial/text.scss @@ -0,0 +1,14 @@ +p { + margin-top: 1.25rem; + margin-bottom: 1.25rem; +} +strong { + font-weight: 600; + color: var(--xm-c-dark); +} +b { + color: var(--xm-c-dark); +} +em { + color: inherit; +} diff --git a/src/scss/_partial/title.scss b/src/scss/_partial/title.scss new file mode 100644 index 0000000..b56546c --- /dev/null +++ b/src/scss/_partial/title.scss @@ -0,0 +1,64 @@ +h1 { + margin-top: 0; + margin-bottom: .8889rem; + font-size: 2.25rem; + font-weight: 800; + color: var(--xm-c-darker); + line-height: 1.1111; +} +h2 { + margin-top: 2rem; + font-size: 1.5rem; + font-weight: 700; + color: var(--xm-c-dark); + margin-bottom: 1rem; + line-height: 1.3334; + code { + font-size: .875rem; + } + + * { + margin-top: 0; + } +} +h3 { + margin-top: 1.6rem; + font-size: 1.25rem; + font-weight: 600; + color: inherit; + margin-bottom: .6rem; + line-height: 1.6; + opacity: .7; + code { + font-size: .9rem; + } + + * { + margin-top: 0; + } +} +h4 { + margin-top: 1.5rem; + font-weight: 600; + color: inherit; + margin-bottom: .5rem; + line-height: 1.5; + + * { + margin-top: 0; + } +} +h5, +h6 { + text-transform: uppercase; + margin-top: 20px; + margin-bottom: 10px; + font-weight: 500; + opacity: .5; + letter-spacing: 2px; +} +hr { + margin-top: 3rem; + border-color: var(--xm-c-hr-border); + margin-bottom: 3rem; + + * { + margin-top: 0; + } +} diff --git a/src/scss/prose.scss b/src/scss/prose.scss index 8661713..0a605d7 100644 --- a/src/scss/prose.scss +++ b/src/scss/prose.scss @@ -1,267 +1,14 @@ +@use '_partial/container' as *; + .markdown-body, .prose { - max-width: fit-content; - font-size: 1rem; - color: var(--xm-c-general); - line-height: 1.75; - code { - font-size: .875rem; - font-weight: 600; - color: var(--xm-c-dark); - &::before, &::after { - content: '`'; - } - } - a { - font-weight: 500; - text-decoration: none; - color: var(--xm-c-darker); - code { - color: var(--xm-c-code); - } - } - strong { - font-weight: 600; - color: var(--xm-c-dark); - } - li { - margin-top: .5rem; - margin-bottom: .5rem; - } - ol { - margin-top: 1.25rem; - margin-bottom: 1.25rem; - list-style-type: none; - > li { - position: relative; - padding-left: 1.75rem; - &::before { - content: counter(list-item, decimal) '.'; - position: absolute; - left: 0; - font-weight: 400; - color: var(--xm-c-ol-counter); - } - } - } - ul { - margin-top: 1.25rem; - margin-bottom: 1.25rem; - list-style-type: none; - > li { - position: relative; - padding-left: 1.75rem; - &::before { - content: ''; - position: absolute; - top: calc(.875rem - .1875rem); - left: .25rem; - width: .375rem; - height: .375rem; - background-color: var(--xm-c-ul-counter); - border-radius: 50%; - } - } - } - hr { - margin-top: 3rem; - border-color: var(--xm-c-hr-border); - margin-bottom: 3rem; - + * { - margin-top: 0; - } - } - p { - margin-top: 1.25rem; - margin-bottom: 1.25rem; - } - blockquote, - q { - margin-top: 1.6rem; - padding-left: 1rem; - font-weight: 500; - font-style: italic; - color: inherit; - border-color: var(--xm-c-blockquote-color); - border-left-width: .25rem; - quotes: '\201C''\201D''\2018''\2019'; - margin-bottom: 1.6rem; - p { - &:first-of-type::before { - content: open-quote; - } - &:last-of-type::after { - content: close-quote; - } - } - } - h1 { - margin-top: 0; - margin-bottom: .8889rem; - font-size: 2.25rem; - font-weight: 800; - color: var(--xm-c-darker); - line-height: 1.1111; - } - h2 { - margin-top: 2rem; - font-size: 1.5rem; - font-weight: 700; - color: var(--xm-c-dark); - margin-bottom: 1rem; - line-height: 1.3334; - code { - font-size: .875rem; - } - + * { - margin-top: 0; - } - } - h3 { - margin-top: 1.6rem; - font-size: 1.25rem; - font-weight: 600; - color: inherit; - margin-bottom: .6rem; - line-height: 1.6; - opacity: .7; - code { - font-size: .9rem; - } - + * { - margin-top: 0; - } - } - h4 { - margin-top: 1.5rem; - font-weight: 600; - color: inherit; - margin-bottom: .5rem; - line-height: 1.5; - + * { - margin-top: 0; - } - } - figure { - margin-top: 2rem; - margin-bottom: 2rem; - figcaption { - margin-top: .8571rem; - font-size: .875rem; - color: var(--xm-c-figcaption); - line-height: 1.4286; - } - > * { - margin-top: 0; - margin-bottom: 0; - } - } - pre { - overflow-x: auto; - margin-top: 1.7143rem; - padding-top: .8571rem, 1.1429rem; - font-size: .875rem; - color: var(--xm-c-pre); - line-height: 1.7143; - margin-bottom: 1.7143rem; - border-radius: .375rem; - code { - padding: 0; - font-size: inherit; - font-family: inherit; - font-weight: 400; - color: inherit; - background: transparent; - border-width: 0; - border-radius: 0; - line-height: inherit; - &::before { - content: none; - } - &::after { - content: none; - } - } - } - table { - margin-top: 2rem; - margin-bottom: 2rem; - width: 100%; - table-layout: auto; - font-size: .875rem; - text-align: left; - line-height: 1.7143; - } - thead { - font-weight: 600; - color: var(--xm-c-thead); - border-bottom-width: 1px; - border-bottom-color: var(--xm-c-thead-border); - th { - vertical-align: bottom; - padding-right: .5714rem; - padding-bottom: .5714rem; - padding-left: .5714rem; - &:first-child { - padding-left: 0; - } - &:last-child { - padding-right: 0; - } - } - } - tbody { - tr { - border-bottom-width: 1px; - border-bottom-color: var(--xm-c-tr-border); - &:last-child { - border-bottom-width: 0; - } - } - td { - vertical-align: top; - padding: .5714rem; - &:first-child { - padding-left: 0; - } - &:last-child { - padding-right: 0; - } - } - } - img { - margin-top: 2rem; - margin-bottom: 2rem; - } - video { - margin-top: 2rem; - margin-bottom: 2rem; - } - h6 { - text-transform: uppercase; - margin-top: 20px; - margin-bottom: 10px; - font-weight: 500; - opacity: .5; - letter-spacing: 2px; - } - > :first-child { - margin-top: 0; - } - > :last-child { - margin-bottom: 0; - } - b { - color: var(--xm-c-dark); - } - em { - color: inherit; - } - ul ul, - ul ol, - ol ul, - ol ol { - margin-top: .75rem; - margin-bottom: .75rem; - } + @import '_partial/title'; + @import '_partial/text'; + @import '_partial/link'; + @import '_partial/code'; + @import '_partial/quote'; + @import '_partial/figure'; + @import '_partial/list'; + @import '_partial/table'; + @import '_partial/media'; }