Welcome to little lamb

Code » qmdoc » master » tree

[master] / src / extra / css / struct.css

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p,
blockquote, pre, a, abbr, acronym, address, big, cite, code, del, em, img,
ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i,
center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption,
tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed,
figure, figcaption, footer, header, menu, nav, output, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  text-decoration: none;
}
*, *::before, *::after {
    box-sizing:border-box;
}
html, body {
    height: 100%;
}
header.toc {
    width: 300px;
    float: left;
}
main section.content {
    margin-left: 300px;
}
main section.content header.manpage {
    width: 100%;
}
main section.content header.manpage div,
main section.content footer.manpage div {
    width: 33%;
    float: left;
}
main section.content header.manpage div.middle,
main section.content footer.manpage div.middle {
    text-align: center;
}
main section.content header.manpage div.right,
main section.content footer.manpage div.right {
    text-align: right;
}
main section.content header.manpage {
    margin-bottom: 23px;
}
main section.content footer.manpage {
    margin-top: 23px;
}
@supports (display: grid) {
    main {
        display: grid;
        grid-template-areas: "toc page";
        grid-template-columns: 300px 1fr;
        height: 100%;
    }
    header.toc {
        grid-area: toc;
        overflow: scroll;
        width: inherit;
        float: inherit;
    }
    section.content {
        grid-area: page;
        position: relative;
    }
    main section.content {
        margin-left: inherit;
    }
    main section.content header.manpage, main section.content footer.manpage {
        display: grid;
        grid-template-areas: "left middle right";
        grid-template-columns: 1fr 2fr 1fr;
    }
    main section.content header.manpage div,
    main section.content footer.manpage div {
        width: inherit;
        float: inherit;
    }
}
header.toc section {
    position: sticky;
    top: 0;
    z-index: 1;
    height: 88px;
}
header.toc section h1 {
    text-align: center;
    font-size: 1.42em;
    font-weight: 800;
}
header.toc section h2 {
    margin-top: 8px;
    text-align: center;
    font-weight: 700;
}
header.toc nav {
    position: relative;
    padding: 8px;
    padding-bottom: 42px; /* 23 (section h1 margin-top) + 19 */
    min-height: calc(100% - 88px);
    overflow: hidden;
    overscroll-behavior-y: contain;
}
header.toc nav li a {
    line-height: 1.1em;
    padding: 4px 6px;
    white-space: nowrap;
}
header.toc nav li a {
    display: inline-block;
    width: 100%;
}
main section.content ul.toc {
    padding-left: 8px;
}
main section.content ul.toc li {
    display: block;
}
main section.content ul.toc li a {
    text-decoration: none;
}
main section.content ul.toc.page > li {
    margin-top: 23px;
}
ul.toc.page > li > a {
    margin-top: 8px;
    font-weight: 600;
    text-transform: uppercase;
}
main section ul.toc > li > a {
    font-size: 110%;
}
ul.toc.page ul.h1 > li > a {
    text-transform: uppercase;
    font-weight: 600;
    padding-left: 12px;
}
ul.toc.page ul.h2 > li > a {
    font-weight: 400;
    padding-left: 24px;
}
ul.toc.page ul.h3 > li > a {
    padding-left: 36px;
}
ul.toc.page ul.h4 > li > a {
    padding-left: 48px;
}
ul.toc.page ul.h5 > li > a {
    padding-left: 60px;
}
ul.toc.page ul.h6 > li > a {
    padding-left: 72px;
}
section.content {
    display: block;
    padding: 23px 42px 0 42px;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
}
main p {
    text-align: justify;
    padding: 8px 0;
}
main strong {
    font-weight: 800;
}
main em {
    font-style: italic;
}
main u {
    text-decoration: underline;
}
main s {
    text-decoration: line-through;
}
main section.content li.taskOff::marker {
    content: "☐ ";
}
main section.content li.taskOn::marker {
    content: "☒ ";
}
main section.content pre, main section.content code, main section.content kbd {
    font-family: Monaco,Consolas,Liberation Mono,Courier,monospace;
    white-space: pre;
}
main section.content pre {
    line-height: 20px;
    overflow: auto;
}
main section.content pre.lineno {
    display: block;
    padding: 0 4px;
    margin-top: 12px;
    margin-bottom: 0;
    opacity: 0.4;
    text-align: right;
    float: left;
    clear: both;
    overflow: hidden;
}
main section.content pre.lineno + pre {
    padding: 0;
    border: none;
    background: none;
}
main section.content pre.lineno + pre > span {
    position: absolute;
    margin-left: -8px;
    margin-top: -2px;
    padding: 0 23px;
    font-weight: 600;
    font-size: 90%;
}
main section.content pre code {
    display: block;
    padding: 0;
    margin: 12px 12px 0px 2px;
    overflow: hidden;
}
main section.content div.box pre {
    width: 90%;
    margin: auto;
}
main header.toc > section h1 {
    padding-top: 23px;
}
main section.content h1 {
    text-transform: uppercase;
    padding-top: 23px;
    padding-bottom: 15px;
    font-weight: 800;
    font-size: 175%;
}
main section.content h2 {
    padding-top: 15px;
    padding-bottom: 8px;
    font-weight: 700;
    font-size: 150%;
}
main section.content h3, main section.content h4,
main section.content h5, main section.content h6 {
    font-weight: 600;
}
main section.content h3 {
    padding-top: 15px;
    padding-bottom: 8px;
    font-size: 130%;
}
main section.content h4 {
    padding-top: 15px;
    padding-bottom: 8px;
    font-size: 110%;
}
main section.content h5 {
    padding-top: 15px;
    padding-bottom: 8px;
    font-size: 95%;
}
main section.content h6 {
    padding-top: 15px;
    padding-bottom: 8px;
    font-size: 80%;
}
main section.content blockquote {
    margin: 4px 23px 23px 42px;
}
main section.content div.indent {
    margin: -8px 23px 4px 42px;
}
main section.content ul, main section.content ol {
    padding-left: 42px;
}
main section.content div.box {
    margin: 8px 0 15px 0;
    padding: 0 0 5px 0;
    line-height: 15px;
}
main section.content div.box > :first-child {
    display: block;
    margin: 0px;
    padding: 4px;
}
main section.content div.box p {
    margin: 4px 11px;
}
main section.content div.box div.box {
    width: 90%;
    margin: auto;
}
main section.content #navbuttons {
    height: 23px;
}
main section.content #navbuttons a {
    border-radius: 4px;
    padding: 4px 12px 8px;
    text-align: center;
    font-size: 100%;
    cursor: pointer;
    text-decoration: none;
    user-select: none;
}
main section.content #navbuttons a.prev::before {
    content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAMAAABhEH5lAAAANlBMVEUAAABAQEBAQEBAQEBAQEBAQEBAQEBBQUFAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEAWW5SEAAAAEnRSTlMA/fC9r2kXAjMN34F3ZlUu6B40Y5wGAAAAVElEQVQY08XPSw6AIAwEUIbS8lFE739Zq6luGtbM8iXTTMOCZGECiCX/MhIQTyCNz+SRrUc1MWKVvR5KYCN6pUFDRtqq4Sql9IYJ+aI/70f4qdOHblOhAuUcC5KnAAAAAElFTkSuQmCC);
}
main section.content #navbuttons a.next {
    float: right;
    margin-top: -4px;
}
main section.content #navbuttons a.next::after {
    content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASBAMAAACk4JNkAAAAJFBMVEUAAABAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEC4lvDfAAAAC3RSTlMAx711ZjlFPh3zLASjkrYAAABDSURBVAjXY6AUsGhvcgAzOKR3797YAGIx7t5mvVsAxPLevZ159xYQS3v3zgLrTSDW7tTQBcy7ESyELEIHwhSEyQjbAAH1HsMY8tCHAAAAAElFTkSuQmCC);
}
main section.content footer.page {
    display: inherit;
}
main section.content footer.page {
    padding: 8px 23px;
    margin: 0 -23px;
}