@include namespace('body') { @include store(( --colors: ( --meta: ( --fg: prop(--colors --fg-hi, $global: true), --bg: prop(--colors --bg-lo, $global: true), ), --code: ( --fg: prop(--colors --accent --strong, $global: true), --bg: prop(--colors --bg-hi, $global: true), ), --code-block: ( --fg: prop(--colors --fg, $global: true), --bg: prop(--colors --bg-lo, $global: true), ), --blockquote: ( --border: prop(--colors --obj-hi, $global: true), ) ), --dims: ( --meta: ( --pad-x: .6em, --pad-y: .2em ), --code: ( --pad-x: .3em, --pad-y: .1em ), --code-block: ( --pad-x: 1em, --pad-y: .7em ) ) )); @include store(( --colors: ( --meta: ( --bg: prop(--colors --bg-hi, $global: true), ), --code: ( --bg: prop(--colors --accent --faint, $global: true), ), --code-block: ( --bg: prop(--colors --bg-hi, $global: true), ), ) ), 'light'); @include scope(namespace()) { @include element('meta') { display: inline-block; padding: prop(--dims --meta --pad-y) prop(--dims --meta --pad-x); background-color: prop(--colors --meta --bg); color: prop(--colors --meta --fg); font-size: iro-px-to-rem(14px); + h1 { margin-top: $line-height * .5rem; } } img { max-width: 100%; } code { padding: prop(--dims --code --pad-y) prop(--dims --code --pad-x); border-radius: 3px; background-color: prop(--colors --code --bg); color: prop(--colors --code --fg); } blockquote { margin: ($line-height * 1rem) 0 0 1px; padding-left: calc(#{prop(--dims --indent, $global: true)} - 3px); border-left: 3px solid prop(--colors --blockquote --border); } pre { margin: ($line-height * 1rem) 0 0 0; padding: prop(--dims --code-block --pad-y) prop(--dims --code-block --pad-x); background-color: prop(--colors --code-block --bg); color: prop(--colors --code-block --fg); code { display: inline-block; margin-right: prop(--dims --code-block --pad-x); padding: 0; border-radius: 0; background-color: transparent; color: currentColor; } @media print { border: 2px solid currentColor; } } } }