diff options
Diffstat (limited to 'src/sass/_theme_rst.sass')
| -rw-r--r-- | src/sass/_theme_rst.sass | 207 |
1 files changed, 129 insertions, 78 deletions
diff --git a/src/sass/_theme_rst.sass b/src/sass/_theme_rst.sass index b0cb0a7..b355bf8 100644 --- a/src/sass/_theme_rst.sass +++ b/src/sass/_theme_rst.sass @@ -5,7 +5,7 @@ // 1. Lots of this @extends from wyrm_core/_type.sass (http://www.github.com/snide/wyrm/. // * Try not to replace any @extends code. It's pretty generic stuff meant to work together. // * That said, know that I'm very unlikely to accept PRs from wyrm just to change style here. -// 2. I plan to remove the !importants in here. Part of it is due to lazyness, part to sphinx's fondness for nesting. +// 2. I plan to remove the !importants in here. Part of it is due to laziness, part to sphinx's fondness for nesting. // 3. Try to use variables from wyrm_core/wy_variables.sass. Notable are... // * $base-line-height // All margins, padding and line-height should use this in .25 increments. // * $text-color, $text-light, $text-dark...etc @@ -14,24 +14,28 @@ // -------------------------------------------------------------------------------------------------------------------- .rst-content + // Some browsers like to give arbitrary margins :( make them all consistent. + h1, h2, h3, h4, h5, h6 + margin-bottom: $base-line-height + // Sphinx by default applies HxW style attributes to images. This fixes that oversite. img max-width: 100% height: auto - div.figure + div.figure, figure margin-bottom: $base-line-height - p.caption + .caption-text font-style: italic p:last-child.caption margin-bottom: 0px - - div.figure.align-center - text-align: center + &.align-center + text-align: center // Usually it's a good idea to give images some space. - .section > img, .section > a > img - margin-bottom: $base-line-height + .section >, section > + img, a > img + margin-bottom: $base-line-height // normalize browser styling abbr[title] @@ -56,7 +60,7 @@ pre.literal-block white-space: pre margin: 0 - padding: $base-line-height / 2 $base-line-height / 2 + padding: ($base-line-height / 2) ($base-line-height / 2) font-family: $code-font-family display: block overflow: auto @@ -75,30 +79,38 @@ .linenodiv pre border-right: solid 1px lighten($table-border-color, 2%) margin: 0 - padding: $base-line-height / 2 $base-line-height / 2 + padding: ($base-line-height / 2) ($base-line-height / 2) font-family: $code-font-family user-select: none pointer-events: none div[class^='highlight'] pre white-space: pre margin: 0 - padding: $base-line-height / 2 $base-line-height / 2 + padding: ($base-line-height / 2) ($base-line-height / 2) display: block overflow: auto & .hll // Line emphasis spans full width display: block - margin: 0 -1 * $base-line-height / 2 - padding: 0 $base-line-height / 2 + margin: 0 (-1 * $base-line-height / 2) + padding: 0 ($base-line-height / 2) pre.literal-block, div[class^='highlight'] pre, .linenodiv pre font-family: $code-font-family font-size: 12px line-height: 1.4 - - // Do not allow selection of code block prompts - div.highlight .gp - user-select: none - pointer-events: none + + // Do not allow selection of code block prompts and line numbers + div.highlight + span.linenos, .gp + user-select: none + pointer-events: none + + span.linenos + display: inline-block + padding-left: 0px + padding-right: ($base-line-height / 2) + margin-right: ($base-line-height / 2) + border-right: 1px solid lighten($table-border-color, 2%) .code-block-caption font-style: italic @@ -135,40 +147,43 @@ @extend .wy-alert.wy-alert-warning // Some people put tables in notes. Let's give them very basic support. .admonition table - border-color: rgba(0,0,0,.1) + border-color: rgba(0, 0, 0, 0.1) td, th background: transparent !important - border-color: rgba(0,0,0,.1) !important - .section ul, .toctree-wrapper ul - @extend .wy-plain-list-disc - .section ol.loweralpha, .section ol.loweralpha > li - list-style: lower-alpha - .section ol.upperalpha, .section ol.upperalpha > li - list-style: upper-alpha - .section ol, ol.arabic - @extend .wy-plain-list-decimal - // Complex bullet lists, they have more item margins than simple lists - .section ol li, .section ul li - > * - margin-top: $base-line-height / 2 - margin-bottom: $base-line-height / 2 - &:first-child - margin-top: 0rem - > p - &, &:last-child + border-color: rgba(0, 0, 0, 0.1) !important + + .section, section, .toctree-wrapper + ul + @extend .wy-plain-list-disc + ol.loweralpha, ol.loweralpha > li + list-style: lower-alpha + ol.upperalpha, ol.upperalpha > li + list-style: upper-alpha + ol, ol.arabic + @extend .wy-plain-list-decimal + // Complex bullet lists, they have more item margins than simple lists + ol li, ul li + > * + margin-top: $base-line-height / 2 margin-bottom: $base-line-height / 2 - &:only-child, &:only-child:last-child + &:first-child + margin-top: 0rem + > p + &, &:last-child + margin-bottom: $base-line-height / 2 + &:only-child, &:only-child:last-child + margin-bottom: 0rem + > ul, > ol + margin-bottom: $base-line-height / 2 + // Simple lists, no item margins + ol.simple li, ul.simple li + > * + margin-top: 0rem margin-bottom: 0rem - > ul, > ol - margin-bottom: $base-line-height / 2 - // Simple lists, no item margins - .section ol.simple li, .section ul.simple li - > * - margin-top: 0rem - margin-bottom: 0rem - ul, ol - margin-top: 0rem - margin-bottom: 0rem + ul, ol + margin-top: 0rem + margin-bottom: 0rem + .line-block margin-left: 0px margin-bottom: $base-line-height @@ -198,16 +213,27 @@ @extend h2 // This is the #href that shows up on hover. Sphinx's is terrible so I hack it away. - h1, h2, h3, h4, h5, h6, dl dt, p.caption, table > caption, .code-block-caption + h1, h2, h3, h4, h5, h6, dl dt, p, p.caption, table > caption, .code-block-caption, .eqno .headerlink - visibility: hidden + opacity: 0 font-size: 14px + font-family: FontAwesome + margin-left: 0.5em @extend .fa - &:after - content: "\f0c1" - font-family: FontAwesome - &:hover .headerlink:after - visibility: visible + &:focus + opacity: 1 + &:hover .headerlink + opacity: 1 + + // Consistent font sizing for table typography + .wy-table + th, td + p, ul + font-size: inherit + + // override the Wyrm accessibility anti-pattern of hiding button focus + .btn:focus + outline: 2px solid table > caption .headerlink:after font-size: 12px @@ -234,14 +260,14 @@ font-family: $custom-font-family font-weight: bold background: $table-border-color - padding: $base-line-height / 4 $base-line-height / 2 + padding: ($base-line-height / 4) ($base-line-height / 2) margin: -$base-line-height margin-bottom: $base-line-height font-size: 100% // Sphinx can highlight searched text with ?highlighted=searchterm .highlighted background: $highlight-color - box-shadow: 0 0 0 $base-line-height / 12 $highlight-color + box-shadow: 0 0 0 ($base-line-height / 12) $highlight-color display: inline font-weight: bold @@ -257,6 +283,15 @@ .hlist width: 100% + // Definition lists term/classifier separator + // Adds a separator for Sphinx > 1.x as a pseudo-element + // and hides the hardcoded separator from Sphinx 1.x + dl dt span.classifier + &:before + content: " : " + dl dt span.classifier-delimiter + display: none !important + // The html4 writer outputs the citation and footnotes as a table, and the // html5 writer outputs these as a definition list. We will use the fairly // well supported css `grid` attribute to make these back into a table @@ -275,11 +310,7 @@ vertical-align: top // HTML5 writer html.writer-html5 & - dl dt span.classifier - &:before - content: " : " - dl.footnote, - dl.field-list + dl.footnote, dl.citation, dl.field-list display: grid grid-template-columns: max-content auto > dt @@ -288,15 +319,15 @@ content: ":" > dt, > dd margin-bottom: 0rem - dl.footnote + dl.footnote, dl.citation font-size: .9rem > dt - margin: 0rem .5rem .5rem 0rem + margin: 0rem 0.5rem 0.5rem 0rem line-height: 1.2rem word-break: break-all font-weight: normal > span.brackets - margin-right: .5rem + margin-right: 0.5rem &:before content: "[" &:after @@ -304,16 +335,16 @@ > span.fn-backref font-style: italic > dd - margin: 0rem 0rem .5rem 0rem + margin: 0rem 0rem 0.5rem 0rem line-height: 1.2rem p - font-size: .9rem + font-size: 0.9rem dl.option-list kbd - font-size: .9rem + font-size: 0.9rem // Both html.writer-html4 & table.docutils.citation, table.docutils.footnote, - html.writer-html5 & dl.footnote + html.writer-html5 & dl.footnote, dl.citation color: $text-medium code color: $gray @@ -340,7 +371,7 @@ th > p, td > p line-height: 1rem margin-bottom: 0rem - font-size: .9rem + font-size: 0.9rem &:not(.field-list) @extend .wy-table-striped // Remove bottom margin for the last element (and it's last child) @@ -353,7 +384,6 @@ td border: none p - font-size: inherit line-height: inherit td > strong display: inline-block @@ -395,14 +425,19 @@ margin-bottom: $base-line-height / 2 // rST seems to want dds to be treated as the browser would, indented. dd - margin: 0 0 $base-line-height / 2 $base-line-height + margin: 0 0 ($base-line-height / 2) $base-line-height line-height: $base-line-height + > p:last-child, + > ol:last-child, + > ul:last-child, + > table:last-child + margin-bottom: 0 html.writer-html4 & dl:not(.docutils), - html.writer-html5 & dl[class]:not(.option-list):not(.field-list):not(.footnote):not(.glossary):not(.simple) + html.writer-html5 & dl[class]:not(.option-list):not(.field-list):not(.footnote):not(.citation):not(.glossary):not(.simple) margin-bottom: $base-line-height > dt display: table - margin: $base-line-height / 4 0 + margin: ($base-line-height / 4) 0 font-size: 90% line-height: normal background: lighten($class-color, 50%) @@ -420,8 +455,8 @@ dl:not(.field-list) > dt margin-bottom: $base-line-height / 4 border: none - border-left: solid 3px hsl(0,0%,80%) - background: hsl(0,0%,94%) + border-left: solid 3px hsl(0, 0%, 80%) + background: hsl(0, 0%, 94%) color: $method-color .headerlink color: $headerlink-color @@ -430,7 +465,6 @@ margin-top: 0 // Since dts get the callout style, we treat this less as callouts. tt, code - font-weight: bold &.descname, &.descclassname background-color: transparent border: none @@ -447,6 +481,13 @@ .property display: inline-block padding-right: 8px + max-width: 100% + // This is keywords such as "const" + .k + font-style: italic + .sig-name, .descname, .descclassname + font-family: $code-font-family + color: $black // Doc links to sourcecode .viewcode-link, .viewcode-back display: inline-block @@ -481,8 +522,18 @@ font-size: 80% font-weight: 700 border-radius: $base-line-height / 6 + padding: ($base-line-height / 10) ($base-line-height / 4) + margin: auto ($base-line-height / 12) + *:not(dl.option-list) > :not(dt):not(kbd):not(.kbd) > kbd, + *:not(dl.option-list) > :not(dt):not(kbd):not(.kbd) > .kbd + color: inherit + font-size: 80% + background-color: lighten($text-light, 30%) + border: 1px solid darken($text-light, 5%) + border-radius: $base-line-height / 6 + box-shadow: grey 0px $base-line-height / 12 padding: $base-line-height / 10 $base-line-height / 4 - margin: auto $base-line-height / 12 + margin: auto 0 .versionmodified font-style: italic |