diff --git a/src/scss/prose.scss b/src/_content.scss similarity index 87% rename from src/scss/prose.scss rename to src/_content.scss index 2d3e30f..b46bb43 100644 --- a/src/scss/prose.scss +++ b/src/_content.scss @@ -2,7 +2,7 @@ @use 'partials/container'; -.prose { +.markdown-body { @include container.container; @include meta.load-css('partials/all'); } diff --git a/src/scss/vars.scss b/src/_vars.scss similarity index 99% rename from src/scss/vars.scss rename to src/_vars.scss index a383e04..b1e20f5 100644 --- a/src/scss/vars.scss +++ b/src/_vars.scss @@ -14,6 +14,7 @@ --xm-c-#{$name}: #{$val}; } } + .markdown-body { @each $name, $val in meta.module-variables('light') { --xm-c-#{$name}: #{$val}; diff --git a/src/index.scss b/src/index.scss index 9a0d39c..f1ec1dd 100644 --- a/src/index.scss +++ b/src/index.scss @@ -1,4 +1,2 @@ -@use 'scss/vars'; - -@use 'scss/markdown'; -@use 'scss/prose'; +@use 'vars'; +@use 'content'; diff --git a/src/scss/partials/_all.scss b/src/partials/_all.scss similarity index 100% rename from src/scss/partials/_all.scss rename to src/partials/_all.scss diff --git a/src/scss/partials/_container.scss b/src/partials/_container.scss similarity index 55% rename from src/scss/partials/_container.scss rename to src/partials/_container.scss index cfe8442..13e5091 100644 --- a/src/scss/partials/_container.scss +++ b/src/partials/_container.scss @@ -2,5 +2,9 @@ max-width: fit-content; color: var(--xm-c-regular); font-size: 1rem; + font-family: var(--xm-font-display) !important; line-height: 1.75; + &:first-child { + margin-top: 1rem; + } } diff --git a/src/scss/partials/code.scss b/src/partials/code.scss similarity index 64% rename from src/scss/partials/code.scss rename to src/partials/code.scss index f578bbc..093b3a4 100644 --- a/src/scss/partials/code.scss +++ b/src/partials/code.scss @@ -32,4 +32,21 @@ pre { content: none; } } + &:not(.shiki) { + margin: 0; + padding: 0; + background: transparent; + } +} +.shiki { + margin: .5rem 0; + font-size: 1.05rem; + font-family: var(--xm-font-code) !important; + line-height: 1.4; + &.shiki-light { + background: var(--xm-c-shiki-light) !important; + } + &.shiki-dark { + background: var(--xm-c-shiki-dark) !important; + } } diff --git a/src/scss/partials/figure.scss b/src/partials/figure.scss similarity index 100% rename from src/scss/partials/figure.scss rename to src/partials/figure.scss diff --git a/src/partials/link.scss b/src/partials/link.scss new file mode 100644 index 0000000..f46f0a3 --- /dev/null +++ b/src/partials/link.scss @@ -0,0 +1,13 @@ +a { + border-bottom: 1px solid var(--xm-c-link-border); + color: var(--xm-c-deeper); + font-weight: 500; + text-decoration: none; + transition: border .3s ease-in-out; + code { + color: var(--xm-c-code); + } + &:hover { + border-bottom: 1px solid var(--xm-c-regular); + } +} diff --git a/src/scss/partials/list.scss b/src/partials/list.scss similarity index 100% rename from src/scss/partials/list.scss rename to src/partials/list.scss diff --git a/src/scss/partials/media.scss b/src/partials/media.scss similarity index 79% rename from src/scss/partials/media.scss rename to src/partials/media.scss index 2e968d0..491359f 100644 --- a/src/scss/partials/media.scss +++ b/src/partials/media.scss @@ -1,5 +1,6 @@ img, video { + width: 100%; margin-top: 2rem; margin-bottom: 2rem; } diff --git a/src/scss/partials/quote.scss b/src/partials/quote.scss similarity index 67% rename from src/scss/partials/quote.scss rename to src/partials/quote.scss index 7e54f31..f3cc711 100644 --- a/src/scss/partials/quote.scss +++ b/src/partials/quote.scss @@ -2,12 +2,14 @@ blockquote, q { margin-top: 1.65rem; margin-bottom: 1.65rem; - padding-left: 1rem; + padding: .6rem 1.2rem; border-left: .25rem solid var(--xm-c-quote-border); color: inherit; font-weight: 500; font-style: italic; + line-height: 1.5rem; quotes: '\201C''\201D''\2018''\2019'; + opacity: .8; p { &:first-of-type::before { content: open-quote; @@ -16,4 +18,12 @@ q { content: close-quote; } } + > * { + &:first-child { + margin-top: 0; + } + &:last-child { + margin-bottom: 0; + } + } } diff --git a/src/scss/partials/table.scss b/src/partials/table.scss similarity index 100% rename from src/scss/partials/table.scss rename to src/partials/table.scss diff --git a/src/scss/partials/text.scss b/src/partials/text.scss similarity index 100% rename from src/scss/partials/text.scss rename to src/partials/text.scss diff --git a/src/scss/partials/title.scss b/src/partials/title.scss similarity index 67% rename from src/scss/partials/title.scss rename to src/partials/title.scss index 5f0a692..9b594c1 100644 --- a/src/scss/partials/title.scss +++ b/src/partials/title.scss @@ -55,10 +55,35 @@ h6 { opacity: .5; } hr { - margin-top: 3rem; - margin-bottom: 3rem; + width: 50px; + margin-top: 2rem; + margin-bottom: 2rem; border-color: var(--xm-c-hr-border); + * { margin-top: 0; } } +.header-anchor { + float: left; + margin-top: .125rem; + margin-left: -1.25rem; + padding-right: .5rem; + border: 0 !important; + font-size: .875rem; + text-decoration: none; + opacity: 0; + &:hover, + &:focus { + text-decoration: none; + } +} +@for $i from 1 through 6 { + h#{$i} { + &:hover, + &:focus { + .header-anchor { + opacity: .35 + $i * .025; + } + } + } +} diff --git a/src/scss/markdown.scss b/src/scss/markdown.scss deleted file mode 100644 index 8cd1283..0000000 --- a/src/scss/markdown.scss +++ /dev/null @@ -1,102 +0,0 @@ -.markdown-body { - color: var(--xm-c-regular); - font-family: var(--xm-font-display) !important; - pre:not(.shiki) { - margin: 0; - padding: 0; - background: transparent; - } - .shiki { - margin: .5rem 0; - font-size: 1.05rem; - font-family: var(--xm-font-code) !important; - line-height: 1.4; - &.shiki-light { - background: var(--xm-c-shiki-light) !important; - } - &.shiki-dark { - background: var(--xm-c-shiki-dark) !important; - } - } - img { - width: 100%; - } - a { - border-bottom: 1px solid var(--xm-c-link-border); - font-weight: inherit; - text-decoration: none; - transition: border .3s ease-in-out; - &:hover { - border-bottom: 1px solid var(--xm-c-regular); - } - code { - color: inherit; - } - } - hr { - width: 50px; - margin-top: 2rem; - margin-bottom: 2rem; - } - blockquote, - q { - padding: .6rem 1.2rem; - font-weight: normal; - font-style: normal; - line-height: 1.5rem; - opacity: .8; - > * { - &:first-child { - margin-top: 0; - } - &:last-child { - margin-bottom: 0; - } - } - p:first-of-type { - &::before, - &::after { - content: none; - } - } - } - &:first-child { - margin-top: 1rem; - } -} -html:not(.dark) .shiki-dark, -.dark .shiki-light { - display: none; -} -.item { - text-decoration: none; - opacity: .6; - transition: .2s all ease-out; - &:hover { - opacity: 1; - } -} -.header-anchor { - float: left; - margin-top: .125rem; - margin-left: -1.25rem; - padding-right: .5rem; - border: 0 !important; - font-size: .875rem; - text-decoration: none; - opacity: 0; - &:hover, - &:focus { - text-decoration: none; - } -} -@for $i from 1 through 6 { - h#{$i} { - &:hover, - &:focus { - .header-anchor { - opacity: .35 + $i * .025; - } - } - } -} diff --git a/src/scss/partials/link.scss b/src/scss/partials/link.scss deleted file mode 100644 index 357c937..0000000 --- a/src/scss/partials/link.scss +++ /dev/null @@ -1,8 +0,0 @@ -a { - color: var(--xm-c-deeper); - font-weight: 500; - text-decoration: none; - code { - color: var(--xm-c-code); - } -} diff --git a/src/scss/variables/_colors.scss b/src/variables/_colors.scss similarity index 100% rename from src/scss/variables/_colors.scss rename to src/variables/_colors.scss diff --git a/src/scss/variables/_constants.scss b/src/variables/_constants.scss similarity index 100% rename from src/scss/variables/_constants.scss rename to src/variables/_constants.scss diff --git a/src/scss/variables/modes/_dark.scss b/src/variables/modes/_dark.scss similarity index 100% rename from src/scss/variables/modes/_dark.scss rename to src/variables/modes/_dark.scss diff --git a/src/scss/variables/modes/_light.scss b/src/variables/modes/_light.scss similarity index 100% rename from src/scss/variables/modes/_light.scss rename to src/variables/modes/_light.scss