/* TODO in fact a lot of these can appear outside articles (comments, tag page, time, sitemap page etc) and should be styled the same */ article, section { header { time { color: #888; font-size: 24px; margin-right: .5rem } } } article { > header { background: $background-color; /* sub title */ h1 + p { font-weight: bold } } /* comments */ article > header { background: none; margin-top: 1rem } > footer, > .footnotes { font-size: smaller } h1 { /* sub title */ + p a:link { font-weight: lighter } } } p { a[href$=".pdf"]:not(.button)::after { color: $text-color; content: ' (PDF) '; font-size: smaller; font-weight: normal; text-decoration: none } a[href$=".zip"]:not(.button)::after { color: $text-color; content: ' (ZIP) '; font-size: smaller; font-weight: normal; text-decoration: none } } > p:last-of-type::after { content: "∎"; font-size: 1.5em; color: $primary-color; } article header + aside img { margin-left: 25%; margin-right: 25%; margin-top: 1rem; vertical-align: middle; /* prevent bottom padding/margin */ width: 50% } .article-tile header { margin-top: 1rem } .article-tile h3 { margin-top: .5rem } aside { background: $tertiary-color; margin-bottom: -1rem; padding: $article-gutter } header + aside { background: white } /* foot notes*/ .footnote-ref { a { text-decoration: none } } /* minimal articles (e.g. related) */ section { article { height: 125px; /* TODO 323px with content */ overflow: hidden; width: 282px; figure { height: 131px; overflow: hidden; width: 282px; } } } /* show progress */ .progressed { display: flex; .progress { display: flex; background: gray; text-align: right; flex-direction: column; justify-content: space-between; } } /* TODO print only? pre + figcaption::before { content: "code example - " } img + figcaption::before { content: "Figure - " count(figure) } */