@charset “UTF-8”;
// // Styles for rendered markdown in the .main-content container // // stylelint-disable selector-no-type, max-nesting-depth, selector-max-compound-selectors, selector-max-type
.main-content {
flex: 1 0 auto; line-height: $content-line-height; counter-reset: sidenote-counter; ol, ul, dl, pre, address, blockquote, .table-wrapper { margin-top: 0.5em; } a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; &:not(.wiki-link):not(.wiki-link-embed-link):not(.sem-tag):not(.stat-tag):not(.anchor-heading):not(.footnote):not(.reversefootnote):after { @include fs-3; font-family: $mono-font-family; position: relative; top: -0.5em; // sass variable not working here content: "↗"; color: #aaaaaa; } } ul, ol { padding-left: 1.5em; } li { .highlight { margin-top: $sp-1; } } ol { list-style-type: none; counter-reset: step-counter; > li { position: relative; &::before { position: absolute; top: 0.2em; left: -1.6em; color: $grey-dk-000; content: counter(step-counter); counter-increment: step-counter; @include fs-3; @include mq(sm) { top: 0.11em; } } ol { counter-reset: sub-counter; li { &::before { content: counter(sub-counter, lower-alpha); counter-increment: sub-counter; } } } } } ul { list-style: none; > li { &::before { position: absolute; margin-left: -1.4em; color: $grey-dk-000; content: "•"; } } } .task-list { padding-left: 0; } .task-list-item { display: flex; align-items: center; &::before { content: ""; } } .task-list-item-checkbox { margin-right: 0.6em; } hr { background-color: $separator-color; + * { margin-top: 0; } } dl { display: grid; grid-template: auto / 10em 1fr; } dt, dd { margin: 0.25em 0; } dt { grid-column: 1; font-weight: 500; text-align: right; &::after { content: ":"; } } dd { grid-column: 2; margin-bottom: 0; margin-left: 1em; blockquote, div, dl, dt, h1, h2, h3, h4, h5, h6, li, ol, p, pre, table, ul, .table-wrapper { &:first-child { margin-top: 0; } } } dd, ol, ul { dl:first-child { dt:first-child, dd:nth-child(2) { margin-top: 0; } } } .anchor-heading { position: absolute; right: -$sp-4; width: $sp-5; height: 100%; padding-right: $sp-1; padding-left: $sp-1; overflow: visible; @include mq(md) { right: auto; left: -$sp-5; } .anchor-tag { @include fs-3; display: flex; opacity: 0; &:hover { filter: drop-shadow(0 0 0.7mm $drop-shadow-yellow); } } } .anchor-heading:hover, h1:hover > .anchor-heading, h2:hover > .anchor-heading, h3:hover > .anchor-heading, h4:hover > .anchor-heading, h5:hover > .anchor-heading, h6:hover > .anchor-heading { .anchor-tag { opacity: 1; } } summary { cursor: pointer; } h1, h2, h3, h4, h5, h6 { position: relative; margin-top: 0.25em; margin-bottom: 0.25em; &:first-child { margin-top: $sp-2; } + table, + .table-wrapper, + .code-example, + .highlighter-rouge { margin-top: 1em; } + p { margin-top: 0; } } // from: // - https://codepen.io/jimmycow/pen/LmjVaz // - https://codepen.io/JoeHastings/pen/MOdRVm blockquote { @include fs-3; font-family: 'Special Elite', cursive; max-width: $content-width; // line-height: 1.4; position: relative; margin: 0; padding: $sp-2; border-left: $sp-1 solid $blockquote-border-color; & p { padding-left: $sp-6; } &:before { @include fs-10; font-family: 'Special Elite', cursive; position: absolute; color: $blockquote-quote-color; width: 4rem; height: 4rem; font-family: 'Special Elite', cursive; content: '“'; } } .footnotes { border-top: double $separator-color; } .footnote, .reversefootnote { color: $wiki-link-color; } // Sidenotes // more on sidenote implementation: https://www.gwern.net/Sidenotes // right-sidenote .rsn { @include sidenote-container; display: none; word-wrap: break-word; @include mq(lg) { display: block; float: right; clear: right; margin-right: -$content-sidenote-width; width: $content-sidenote-width; margin-top: $sp-1; margin-bottom: 0; font-size: $font-size-2; // line-height: 1.3; vertical-align: baseline; position: relative; } } // left-sidenote .lsn { @include sidenote-container; display: none; word-wrap: break-word; @include mq(lg) { display: block; float: left; clear: left; margin-left: -$content-sidenote-width; width: $content-sidenote-width; margin-top: $sp-1; margin-bottom: 0; font-size: $font-size-2; // line-height: 1.3; vertical-align: baseline; position: relative; } } // all sidenotes .sidenote-toggle:checked + .rsn, .sidenote-toggle:checked + .lsn { display: block; float: left; left: 1rem; clear: both; width: 95%; margin: 1rem 2.5%; vertical-align: baseline; position: relative; } label.sidenote-toggle:not(.sidenote-number) { display: inline; } .sidenote-number { counter-increment: sidenote-counter; } input.sidenote-toggle { display: none; } label.sidenote-number { display: inline; } label.sidenote-toggle:not(.sidenote-number) { display: none; } .sidenote-number:after, .rsn:before, .lsn:before { position: relative; vertical-align: baseline; } .sidenote-number:after { content: counter(sidenote-counter); color: $wiki-link-color; cursor: pointer; font-size: $font-size-2; top: -$sp-1-75; left: $sp-0-75; padding-right: $sp-0-75; } .rsn:before, .lsn:before { content: counter(sidenote-counter) " "; font-size: $font-size-2; top: -$sp-2; } // blockquote .rsn, // blockquote .lsn { // margin-right: -82%; // min-width: 59%; // text-align: left; // } .rsn > code, .lsn > code { font-size: $font-size-2; }
}