diff --git a/docs/source/_static/custom.css b/docs/source/_static/custom.css index 3a7a912..aed7942 100644 --- a/docs/source/_static/custom.css +++ b/docs/source/_static/custom.css @@ -1,4 +1,4 @@ -.nefertiti-bg { +.project-logo { margin-right: 1rem; background: white; border: 0; @@ -6,14 +6,3 @@ height: 36px; width: 36px; } - -/* :root { - --nftt-primary-rgb: 23,122,240 !important; -} - -.navbar-dark { - --nftt-navbar-color: rgba(255, 255, 255, 0.85) !important; - --nftt-navbar-active-color: rgba(215, 255, 255, 0.95) !important; - --nftt-navbar-hover-color: white !important; - --nftt-navbar-brand-color: white !important; -} */ diff --git a/docs/source/users-guide/components/footnotes.rst b/docs/source/users-guide/components/footnotes.rst index 1de08d5..ba0233c 100644 --- a/docs/source/users-guide/components/footnotes.rst +++ b/docs/source/users-guide/components/footnotes.rst @@ -123,6 +123,7 @@ This is the result Another efficient way, very popular nowadays, is to let black [3]_ do the formatting of your code. Most of the times it does not require customization as the default settings are good enough for most of the projects. +----- .. [1] The `Human Rights `_ declaration of the UN refers to the rights inherent to all human beings, regardless of race, sex, nationality, ethnicity, language, religion, or any other status. diff --git a/js/src/index.js b/js/src/index.js index c8408bc..7432cc8 100644 --- a/js/src/index.js +++ b/js/src/index.js @@ -103,4 +103,13 @@ window.addEventListener('DOMContentLoaded', (_) => { // Add a title to each input element. element.setAttribute('title', `Is task done? ${element.checked}`); } + + // Wrap tables with responsive container. + const tables = document.querySelectorAll('table.docutils'); + for (const table of tables) { + const wrapper = document.createElement("div"); + wrapper.classList.add("nftt-table"); + table.before(wrapper); + wrapper.append(table); + } }); diff --git a/package-lock.json b/package-lock.json index 13d6588..ed6cbc2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "sphinx-nefertiti", - "version": "0.1.1", + "version": "0.1.13", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "sphinx-nefertiti", - "version": "0.1.1", + "version": "0.1.13", "license": "MIT", "dependencies": { "@octokit/rest": "^19.0.5", diff --git a/scss/_layout.scss b/scss/_layout.scss index a968340..a5a6508 100644 --- a/scss/_layout.scss +++ b/scss/_layout.scss @@ -89,7 +89,7 @@ body { code, code * { - font-family: var(--#{$prefix}font-family-monospace); + font-family: var(--#{$prefix}font-monospace); font-size: .7rem; } } @@ -109,10 +109,6 @@ body { h6 { font-family: var(--#{$prefix}doc-headers-font); } - - img { - max-width: 100%; - } } .nftt-footer { @@ -221,3 +217,7 @@ body { } } } + +.project-logo { + margin-right: 1rem; +} diff --git a/scss/_root.scss b/scss/_root.scss index fecc99f..34f05b2 100644 --- a/scss/_root.scss +++ b/scss/_root.scss @@ -54,6 +54,8 @@ } } + --#{$prefix}docapi-kw-color: #{$docapi-light-kw-color}; + @include color-scheme(light); color-scheme: light; } @@ -107,6 +109,8 @@ --#{$prefix}admon-note-color-bg: #{$scheme-dark-admon-note-color-bg}; --#{$prefix}admon-tip-color-bg: #{$scheme-dark-admon-tip-color-bg}; + --#{$prefix}docapi-kw-color: #{$docapi-dark-kw-color}; + .docutils { &:not(.field-list) { --#{$prefix}table-bg: #{$scheme-dark-table-bg}; diff --git a/scss/_theme.scss b/scss/_theme.scss index 10516a2..94e734e 100644 --- a/scss/_theme.scss +++ b/scss/_theme.scss @@ -1,3 +1,4 @@ +/* stylelint-disable selector-no-qualifying-type */ @use "sass:color"; @@ -241,3 +242,66 @@ samp *, color: black; background-color: $cyan; } + +blockquote { + padding: 1rem 2rem .5rem 3rem; + margin: 2rem 1rem; + font-size: 1.2em; + font-style: italic; + background-color: var(--#{$prefix}tertiary-bg); + border-radius: .25rem; + + .attribution { + padding-top: .8rem; + font-size: .9em; + font-style: normal; + font-weight: 400; + text-align: right; + } + + &.epigraph, + &.pull-quote, + &.highlights { + padding: 0; + margin: 2rem 2rem 3rem; + background-color: var(--#{$prefix}body-bg); + } +} + +.line-block { + margin-bottom: 1rem; + margin-left: 0; + + & & { + margin-left: 1rem; + } +} + +aside.sidebar { + float: right; + width: 33%; + padding: .8rem .9rem; + margin: 0 0 .4rem 1.8rem; + background-color: var(--#{$prefix}foot1-bg); + border: 2px solid var(--#{$prefix}secondary-bg); + border-radius: .25rem; + + .sidebar-title { + padding-bottom: .5rem; + font-size: 1.2em; + border-bottom: 1px solid var(--#{$prefix}secondary-bg); + } + + .sidebar-subtitle { + font-size: 1.1em; + } + + .rubric { + font-size: 1em; + font-weight: 700; + } + + p:last-child { + margin-bottom: .5rem; + } +} diff --git a/scss/_utilities.scss b/scss/_utilities.scss index 57bbcd6..f0415bf 100644 --- a/scss/_utilities.scss +++ b/scss/_utilities.scss @@ -1,4 +1,4 @@ -section::after { +section::before { display: table; clear: both; content: ""; @@ -19,7 +19,7 @@ dd { dt { padding-right: 16px; padding-left: .5rem; - font-family: var(--#{$prefix}font-family-monospace); + font-family: var(--#{$prefix}font-monospace); font-size: .95rem; word-break: break-word; } diff --git a/scss/_variables-blue.scss b/scss/_variables-blue.scss index 9faea98..1e08a24 100644 --- a/scss/_variables-blue.scss +++ b/scss/_variables-blue.scss @@ -99,14 +99,14 @@ $scheme-light-table-striped-bg: tint-color($blue, 90%); // scheme-color dark. $scheme-dark-body-color: $gray-100; $scheme-dark-body-hc-color: $white; -$scheme-dark-body-bg: $gray-800; +$scheme-dark-body-bg: $gray-900; $scheme-dark-body-secondary-color: rgba($scheme-dark-body-color, .75) !default; $scheme-dark-body-secondary-bg: $gray-800 !default; $scheme-dark-body-tertiary-color: rgba($scheme-dark-body-color, .5) !default; $scheme-dark-body-tertiary-bg: mix($gray-800, $gray-900, 50%) !default; $scheme-dark-body-emphasis-color: $white !default; $scheme-dark-pre-border-color: $gray-700; -$scheme-dark-foot1-bg: $gray-900; +$scheme-dark-foot1-bg: $gray-800; $scheme-dark-foot2-bg: $blue-800; $scheme-dark-foot2-link1: get-color-contrast($scheme-dark-foot2-bg, 15%); $scheme-dark-foot2-link2: get-color-contrast($scheme-dark-foot2-bg, 30%); @@ -144,3 +144,10 @@ $navbar-dark-disabled-color: $gray-500; $navbar-dark-active-color: $blue-100; $navbar-dark-brand-color: $white; $navbar-dark-brand-hover-color: $white; + + +// ------------------------- +// API docs + +$docapi-dark-kw-color: $blue-200; +$docapi-light-kw-color: $blue-600; diff --git a/scss/_variables-green.scss b/scss/_variables-green.scss index deecef5..259e4b0 100644 --- a/scss/_variables-green.scss +++ b/scss/_variables-green.scss @@ -102,14 +102,14 @@ $scheme-light-table-striped-bg: tint-color($green, 90%); // scheme-color dark. $scheme-dark-body-color: $gray-100; $scheme-dark-body-hc-color: $white; -$scheme-dark-body-bg: $gray-800; +$scheme-dark-body-bg: $gray-900; $scheme-dark-body-secondary-color: rgba($scheme-dark-body-color, .75) !default; $scheme-dark-body-secondary-bg: $gray-800 !default; $scheme-dark-body-tertiary-color: rgba($scheme-dark-body-color, .5) !default; $scheme-dark-body-tertiary-bg: mix($gray-800, $gray-900, 50%) !default; $scheme-dark-body-emphasis-color: $white !default; $scheme-dark-pre-border-color: $gray-700; -$scheme-dark-foot1-bg: $gray-900; +$scheme-dark-foot1-bg: $gray-800; $scheme-dark-foot2-bg: $green-800; $scheme-dark-foot2-link1: get-color-contrast($scheme-dark-foot2-bg, 15%); $scheme-dark-foot2-link2: get-color-contrast($scheme-dark-foot2-bg, 30%); @@ -147,3 +147,9 @@ $navbar-dark-disabled-color: $gray-500; $navbar-dark-active-color: $green-100; $navbar-dark-brand-color: $white; $navbar-dark-brand-hover-color: $white; + +// ------------------------- +// API docs + +$docapi-dark-kw-color: $blue-200; +$docapi-light-kw-color: $blue-600; diff --git a/scss/_variables-indigo.scss b/scss/_variables-indigo.scss index 9d757c0..85f1721 100644 --- a/scss/_variables-indigo.scss +++ b/scss/_variables-indigo.scss @@ -104,14 +104,14 @@ $scheme-light-table-striped-bg: tint-color($indigo, 90%); // scheme-color dark. $scheme-dark-body-color: $gray-100; $scheme-dark-body-hc-color: $white; -$scheme-dark-body-bg: $gray-800; +$scheme-dark-body-bg: $gray-900; $scheme-dark-body-secondary-color: rgba($scheme-dark-body-color, .75) !default; $scheme-dark-body-secondary-bg: $gray-800 !default; $scheme-dark-body-tertiary-color: rgba($scheme-dark-body-color, .5) !default; $scheme-dark-body-tertiary-bg: mix($gray-800, $gray-900, 50%) !default; $scheme-dark-body-emphasis-color: $white !default; $scheme-dark-pre-border-color: $gray-700; -$scheme-dark-foot1-bg: $gray-900; +$scheme-dark-foot1-bg: $gray-800; $scheme-dark-foot2-bg: $indigo-800; $scheme-dark-foot2-link1: get-color-contrast($scheme-dark-foot2-bg, 15%); $scheme-dark-foot2-link2: get-color-contrast($scheme-dark-foot2-bg, 30%); @@ -149,3 +149,9 @@ $navbar-dark-disabled-color: $gray-500; $navbar-dark-active-color: $indigo-100; $navbar-dark-brand-color: $white; $navbar-dark-brand-hover-color: $white; + +// ------------------------- +// API docs + +$docapi-dark-kw-color: $blue-200; +$docapi-light-kw-color: $blue-600; diff --git a/scss/_variables-orange.scss b/scss/_variables-orange.scss index 20c6527..95e16c8 100644 --- a/scss/_variables-orange.scss +++ b/scss/_variables-orange.scss @@ -105,14 +105,14 @@ $scheme-light-table-striped-bg: tint-color($orange, 90%); // scheme-color dark. $scheme-dark-body-color: $gray-100; $scheme-dark-body-hc-color: $white; -$scheme-dark-body-bg: $gray-800; +$scheme-dark-body-bg: $gray-900; $scheme-dark-body-secondary-color: rgba($scheme-dark-body-color, .75) !default; $scheme-dark-body-secondary-bg: $gray-800 !default; $scheme-dark-body-tertiary-color: rgba($scheme-dark-body-color, .5) !default; $scheme-dark-body-tertiary-bg: mix($gray-800, $gray-900, 50%) !default; $scheme-dark-body-emphasis-color: $white !default; $scheme-dark-pre-border-color: $gray-700; -$scheme-dark-foot1-bg: $gray-900; +$scheme-dark-foot1-bg: $gray-800; $scheme-dark-foot2-bg: $orange-800; $scheme-dark-foot2-link1: get-color-contrast($scheme-dark-foot2-bg, 15%); $scheme-dark-foot2-link2: get-color-contrast($scheme-dark-foot2-bg, 30%); @@ -150,3 +150,9 @@ $navbar-dark-disabled-color: $gray-500; $navbar-dark-active-color: $orange-900; $navbar-dark-brand-color: $black; $navbar-dark-brand-hover-color: $black; + +// ------------------------- +// API docs + +$docapi-dark-kw-color: $blue-200; +$docapi-light-kw-color: $blue-600; diff --git a/scss/_variables-pink.scss b/scss/_variables-pink.scss index 3519871..286eea2 100644 --- a/scss/_variables-pink.scss +++ b/scss/_variables-pink.scss @@ -105,14 +105,14 @@ $scheme-light-table-striped-bg: tint-color($pink, 90%); // scheme-color dark. $scheme-dark-body-color: $gray-100; $scheme-dark-body-hc-color: $white; -$scheme-dark-body-bg: $gray-800; +$scheme-dark-body-bg: $gray-900; $scheme-dark-body-secondary-color: rgba($scheme-dark-body-color, .75) !default; $scheme-dark-body-secondary-bg: $gray-800 !default; $scheme-dark-body-tertiary-color: rgba($scheme-dark-body-color, .5) !default; $scheme-dark-body-tertiary-bg: mix($gray-800, $gray-900, 50%) !default; $scheme-dark-body-emphasis-color: $white !default; $scheme-dark-pre-border-color: $gray-700; -$scheme-dark-foot1-bg: $gray-900; +$scheme-dark-foot1-bg: $gray-800; $scheme-dark-foot2-bg: $pink-800; $scheme-dark-foot2-link1: get-color-contrast($scheme-dark-foot2-bg, 15%); $scheme-dark-foot2-link2: get-color-contrast($scheme-dark-foot2-bg, 30%); @@ -150,3 +150,9 @@ $navbar-dark-disabled-color: $gray-500; $navbar-dark-active-color: $pink-100; $navbar-dark-brand-color: $white; $navbar-dark-brand-hover-color: $white; + +// ------------------------- +// API docs + +$docapi-dark-kw-color: $blue-200; +$docapi-light-kw-color: $blue-600; diff --git a/scss/_variables-purple.scss b/scss/_variables-purple.scss index d8cd6b2..0a12407 100644 --- a/scss/_variables-purple.scss +++ b/scss/_variables-purple.scss @@ -104,14 +104,14 @@ $scheme-light-table-striped-bg: tint-color($purple, 90%); // scheme-color dark. $scheme-dark-body-color: $gray-100; $scheme-dark-body-hc-color: $white; -$scheme-dark-body-bg: $gray-800; +$scheme-dark-body-bg: $gray-900; $scheme-dark-body-secondary-color: rgba($scheme-dark-body-color, .75) !default; $scheme-dark-body-secondary-bg: $gray-800 !default; $scheme-dark-body-tertiary-color: rgba($scheme-dark-body-color, .5) !default; $scheme-dark-body-tertiary-bg: mix($gray-800, $gray-900, 50%) !default; $scheme-dark-body-emphasis-color: $white !default; $scheme-dark-pre-border-color: $gray-700; -$scheme-dark-foot1-bg: $gray-900; +$scheme-dark-foot1-bg: $gray-800; $scheme-dark-foot2-bg: $purple-800; $scheme-dark-foot2-link1: get-color-contrast($scheme-dark-foot2-bg, 15%); $scheme-dark-foot2-link2: get-color-contrast($scheme-dark-foot2-bg, 30%); @@ -149,3 +149,9 @@ $navbar-dark-disabled-color: $gray-500; $navbar-dark-active-color: $purple-100; $navbar-dark-brand-color: $white; $navbar-dark-brand-hover-color: $white; + +// ------------------------- +// API docs + +$docapi-dark-kw-color: $blue-200; +$docapi-light-kw-color: $blue-600; diff --git a/scss/_variables-red.scss b/scss/_variables-red.scss index 6bd26a1..5119370 100644 --- a/scss/_variables-red.scss +++ b/scss/_variables-red.scss @@ -103,14 +103,14 @@ $scheme-light-table-striped-bg: tint-color($red, 90%); // scheme-color dark. $scheme-dark-body-color: $gray-100; $scheme-dark-body-hc-color: $white; -$scheme-dark-body-bg: $gray-800; +$scheme-dark-body-bg: $gray-900; $scheme-dark-body-secondary-color: rgba($scheme-dark-body-color, .75) !default; $scheme-dark-body-secondary-bg: $gray-800 !default; $scheme-dark-body-tertiary-color: rgba($scheme-dark-body-color, .5) !default; $scheme-dark-body-tertiary-bg: mix($gray-800, $gray-900, 50%) !default; $scheme-dark-body-emphasis-color: $white !default; $scheme-dark-pre-border-color: $gray-700; -$scheme-dark-foot1-bg: $gray-900; +$scheme-dark-foot1-bg: $gray-800; $scheme-dark-foot2-bg: $red-800; $scheme-dark-foot2-link1: get-color-contrast($scheme-dark-foot2-bg, 15%); $scheme-dark-foot2-link2: get-color-contrast($scheme-dark-foot2-bg, 30%); @@ -148,3 +148,9 @@ $navbar-dark-disabled-color: $gray-500; $navbar-dark-active-color: $red-100; $navbar-dark-brand-color: $white; $navbar-dark-brand-hover-color: $white; + +// ------------------------- +// API docs + +$docapi-dark-kw-color: $blue-200; +$docapi-light-kw-color: $blue-600; diff --git a/scss/_variables-teal.scss b/scss/_variables-teal.scss index 82385ee..30cdbe7 100644 --- a/scss/_variables-teal.scss +++ b/scss/_variables-teal.scss @@ -103,14 +103,14 @@ $scheme-light-table-striped-bg: tint-color($teal, 90%); // scheme-color dark. $scheme-dark-body-color: $gray-100; $scheme-dark-body-hc-color: $white; -$scheme-dark-body-bg: $gray-800; +$scheme-dark-body-bg: $gray-900; $scheme-dark-body-secondary-color: rgba($scheme-dark-body-color, .75) !default; $scheme-dark-body-secondary-bg: $gray-800 !default; $scheme-dark-body-tertiary-color: rgba($scheme-dark-body-color, .5) !default; $scheme-dark-body-tertiary-bg: mix($gray-800, $gray-900, 50%) !default; $scheme-dark-body-emphasis-color: $white !default; $scheme-dark-pre-border-color: $gray-700; -$scheme-dark-foot1-bg: $gray-900; +$scheme-dark-foot1-bg: $gray-800; $scheme-dark-foot2-bg: $teal-800; $scheme-dark-foot2-link1: get-color-contrast($scheme-dark-foot2-bg, 15%); $scheme-dark-foot2-link2: get-color-contrast($scheme-dark-foot2-bg, 26%); @@ -148,3 +148,9 @@ $navbar-dark-disabled-color: $gray-500; $navbar-dark-active-color: $teal-900; $navbar-dark-brand-color: $black; $navbar-dark-brand-hover-color: $black; + +// ------------------------- +// API docs + +$docapi-dark-kw-color: $blue-200; +$docapi-light-kw-color: $blue-600; diff --git a/scss/_variables-yellow.scss b/scss/_variables-yellow.scss index 1b12d5d..196df91 100644 --- a/scss/_variables-yellow.scss +++ b/scss/_variables-yellow.scss @@ -103,14 +103,14 @@ $scheme-light-table-striped-bg: tint-color($yellow, 90%); // scheme-color dark. $scheme-dark-body-color: $gray-100; $scheme-dark-body-hc-color: $white; -$scheme-dark-body-bg: $gray-800; +$scheme-dark-body-bg: $gray-900; $scheme-dark-body-secondary-color: rgba($scheme-dark-body-color, .75) !default; $scheme-dark-body-secondary-bg: $gray-800 !default; $scheme-dark-body-tertiary-color: rgba($scheme-dark-body-color, .5) !default; $scheme-dark-body-tertiary-bg: mix($gray-800, $gray-900, 50%) !default; $scheme-dark-body-emphasis-color: $white !default; $scheme-dark-pre-border-color: $gray-700; -$scheme-dark-foot1-bg: $gray-900; +$scheme-dark-foot1-bg: $gray-800; $scheme-dark-foot2-bg: $yellow-800; $scheme-dark-foot2-link1: get-color-contrast($scheme-dark-foot2-bg, 15%); $scheme-dark-foot2-link2: get-color-contrast($scheme-dark-foot2-bg, 23%); @@ -148,3 +148,9 @@ $navbar-dark-disabled-color: $gray-500; $navbar-dark-active-color: $yellow-900; $navbar-dark-brand-color: $black; $navbar-dark-brand-hover-color: $black; + +// ------------------------- +// API docs + +$docapi-dark-kw-color: $blue-200; +$docapi-light-kw-color: $blue-600; diff --git a/scss/_variables.scss b/scss/_variables.scss index 7582c17..c53b23b 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -101,14 +101,14 @@ $scheme-light-table-striped-bg: tint-color($cyan, 90%); // scheme-color dark. $scheme-dark-body-color: $gray-100; $scheme-dark-body-hc-color: $white; -$scheme-dark-body-bg: $gray-800; +$scheme-dark-body-bg: $gray-900; $scheme-dark-body-secondary-color: rgba($scheme-dark-body-color, .75) !default; $scheme-dark-body-secondary-bg: $gray-800 !default; $scheme-dark-body-tertiary-color: rgba($scheme-dark-body-color, .5) !default; $scheme-dark-body-tertiary-bg: mix($gray-800, $gray-900, 50%) !default; $scheme-dark-body-emphasis-color: $white !default; $scheme-dark-pre-border-color: $gray-700; -$scheme-dark-foot1-bg: $gray-900; +$scheme-dark-foot1-bg: $gray-800; $scheme-dark-foot2-bg: $cyan-800; $scheme-dark-foot2-link1: get-color-contrast($scheme-dark-foot2-bg, 15%); $scheme-dark-foot2-link2: get-color-contrast($scheme-dark-foot2-bg, 26%); @@ -146,3 +146,9 @@ $navbar-dark-disabled-color: $gray-500; $navbar-dark-active-color: $cyan-900; $navbar-dark-brand-color: $black; $navbar-dark-brand-hover-color: $black; + +// ------------------------- +// API docs + +$docapi-dark-kw-color: $blue-200; +$docapi-light-kw-color: $blue-600; diff --git a/scss/components/_admonitions.scss b/scss/components/_admonitions.scss index 8d0edd1..b6f801a 100644 --- a/scss/components/_admonitions.scss +++ b/scss/components/_admonitions.scss @@ -1,4 +1,88 @@ -.admonition-title { +/* stylelint-disable selector-no-qualifying-type */ +.versionadded { + padding: .7rem 1.2rem 1rem; + margin: 2.5rem 2rem 2rem; + background-color: var(--#{$prefix}foot1-bg); + border: 2px solid var(--#{$prefix}admon-tip-color-bg); + border-radius: $border-radius; + + .added, + .versionmodified { + position: relative; + top: -34px; + left: 16px; + display: block; + min-width: 100px; + max-width: 318px; + padding: .3rem 1rem; + margin: -1rem; + font-weight: $font-weight-bold; + color: var(--#{$prefix}body-hc-color); + background-color: var(--#{$prefix}admon-tip-color-bg); + } + + > p:first-child { + padding-top: 1.5rem; + } +} + +.versionchanged { + padding: .7rem 1.2rem 1rem; + margin: 2.5rem 2rem 2rem; + background-color: var(--#{$prefix}foot1-bg); + border: 2px solid var(--#{$prefix}admon-caution-color-bg); + border-radius: $border-radius; + + .changeded, + .versionmodified { + position: relative; + top: -34px; + left: 16px; + display: block; + min-width: 100px; + max-width: 318px; + padding: .3rem 1rem; + margin: -1rem; + font-weight: $font-weight-bold; + color: var(--#{$prefix}body-hc-color); + background-color: var(--#{$prefix}admon-caution-color-bg); + } + + > p:first-child { + padding-top: 1.5rem; + } +} + +div.deprecated { + padding: .7rem 1.2rem 1rem; + margin: 2.5rem 2rem 2rem; + background-color: var(--#{$prefix}foot1-bg); + border: 2px solid var(--#{$prefix}admon-error-color-bg); + border-radius: $border-radius; + + span.deprecated, + span.versionmodified { + position: relative; + top: -34px; + left: 16px; + display: block; + min-width: 100px; + max-width: 318px; + padding: .3rem 1rem; + margin: -1rem; + font-weight: $font-weight-bold; + color: var(--#{$prefix}body-hc-color); + background-color: var(--#{$prefix}admon-error-color-bg); + } + + > p:first-child { + padding-top: 1.5rem; + } +} + + +.admonition-title, +aside.topic > .topic-title { position: relative; top: -20px; left: 16px; @@ -25,12 +109,30 @@ } } -.admonition { +.admonition, +aside.topic { padding: .7rem 1.2rem 1rem; margin: 2.5rem 2rem 2rem; - background-color: theme-color-level("info", -11); + background-color: var(--#{$prefix}foot1-bg); + border: 2px solid var(--#{$prefix}admon-note-color-bg); border-radius: $border-radius; + .admonition-title, + .topic-title { + color: var(--#{$prefix}body-hc-color); + background-color: var(--#{$prefix}admon-note-color-bg); + + .light &::before { + // BS https://icons.getbootstrap.com/icons/clipboard2/ + background-image: url("data:image/svg+xml,"); + } + + .dark &::before { + // BS https://icons.getbootstrap.com/icons/clipboard2/ + background-image: url("data:image/svg+xml,"); + } + } + &:last-child { margin-bottom: 0; } diff --git a/scss/components/_code.scss b/scss/components/_code.scss new file mode 100644 index 0000000..845447c --- /dev/null +++ b/scss/components/_code.scss @@ -0,0 +1,41 @@ +/* stylelint-disable selector-no-qualifying-type */ +.sig:not(.sig-inline) { + padding: .25rem .25rem .25rem 3rem; + margin-right: -.25rem; + margin-left: -.25rem; + font-family: var(--#{$prefix}font-monospace); + font-size: var(--#{$prefix}font-monospace-size); + color: var(--#{$prefix}docapi-kw-color); + text-indent: -2.5em; + background: var(--#{$prefix}secondary-bg); + border-radius: .25rem; + transition: background 100ms ease-out; + + a.reference { + .viewcode-link { + width: 3.5rem; + font-weight: 400; + } + } + + em.property { + font-style: italic; + font-weight: 400; + } + + .sig-prename, + .sig-name { + font-weight: 700; + color: var(--#{$prefix}body-color); + } +} + +.viewcode-link { + float: right; + padding-left: 8px; +} + +.viewcode-back { + float: right; + font-size: .8rem; +} diff --git a/scss/components/_docutils.scss b/scss/components/_docutils.scss index b2b8323..72de9f5 100644 --- a/scss/components/_docutils.scss +++ b/scss/components/_docutils.scss @@ -24,6 +24,11 @@ * Tables. */ +.nftt-table { + width: 100%; + overflow-x: auto; +} + /* stylelint-disable-next-line */ table th p:last-child, table td p:last-child { @@ -151,9 +156,8 @@ div.math { .footnote-list { padding: 1rem .5rem .5rem; - margin-top: 3rem; + margin-top: 1rem; font-size: .9rem; - border-top: 1px solid var(--#{$prefix}border-color); .pre { font-size: 1rem; @@ -169,12 +173,24 @@ div.math { } > .footnote.brackets { - display: flex; - gap: 1rem; - align-items: flex-start; - justify-content: flex-start; + padding: 0 1rem; + margin-bottom: 1rem; color: var(--#{$prefix}tertiary-color); + .label { + float: left; + padding-right: 1.2rem; + } + + .backrefs { + float: left; + padding-right: .5rem; + } + + p { + margin-bottom: .2rem; + } + &:target { color: var(--#{$prefix}body-color); @@ -188,3 +204,23 @@ div.math { } } } + +.code-block-caption { + padding-bottom: .5rem; + text-align: center; +} + +.highlight pre .linenos { + padding-right: 1rem; + margin-right: 1rem; + border-right: 1px solid #ddd; +} + +.rubric { + font-size: 1.1em; + font-weight: 700; +} + +.centered { + text-align: center; +} diff --git a/scss/components/_images.scss b/scss/components/_images.scss index 1a1f80b..cef8843 100644 --- a/scss/components/_images.scss +++ b/scss/components/_images.scss @@ -1,5 +1,12 @@ /* stylelint-disable selector-no-qualifying-type */ +.navbar img { + margin-bottom: 0; +} + img { + max-width: 100%; + margin-bottom: 1rem; + &.align-center { display: block; margin-right: auto; @@ -18,6 +25,10 @@ img { } figure { + img { + margin-bottom: 0; + } + figcaption { margin: 1rem .35rem .5rem; font-size: .85rem; diff --git a/scss/sphinx-nefertiti-blue.scss b/scss/sphinx-nefertiti-blue.scss index 77e5f8a..68689c3 100644 --- a/scss/sphinx-nefertiti-blue.scss +++ b/scss/sphinx-nefertiti-blue.scss @@ -55,6 +55,7 @@ @import "./utilities"; @import "./components/images"; @import "./components/admonitions"; +@import "./components/code"; @import "./components/navbar"; @import "./components/docutils"; @import "./components/link"; diff --git a/scss/sphinx-nefertiti-green.scss b/scss/sphinx-nefertiti-green.scss index 65ee0c1..ffe835c 100644 --- a/scss/sphinx-nefertiti-green.scss +++ b/scss/sphinx-nefertiti-green.scss @@ -55,6 +55,7 @@ @import "./utilities"; @import "./components/images"; @import "./components/admonitions"; +@import "./components/code"; @import "./components/navbar"; @import "./components/docutils"; @import "./components/link"; diff --git a/scss/sphinx-nefertiti-indigo.scss b/scss/sphinx-nefertiti-indigo.scss index e2d2b04..f5214e8 100644 --- a/scss/sphinx-nefertiti-indigo.scss +++ b/scss/sphinx-nefertiti-indigo.scss @@ -55,6 +55,7 @@ @import "./utilities"; @import "./components/images"; @import "./components/admonitions"; +@import "./components/code"; @import "./components/navbar"; @import "./components/docutils"; @import "./components/link"; diff --git a/scss/sphinx-nefertiti-orange.scss b/scss/sphinx-nefertiti-orange.scss index 59cb4b3..b5efd86 100644 --- a/scss/sphinx-nefertiti-orange.scss +++ b/scss/sphinx-nefertiti-orange.scss @@ -55,6 +55,7 @@ @import "./utilities"; @import "./components/images"; @import "./components/admonitions"; +@import "./components/code"; @import "./components/navbar"; @import "./components/docutils"; @import "./components/link"; diff --git a/scss/sphinx-nefertiti-pink.scss b/scss/sphinx-nefertiti-pink.scss index 66637de..1c2e81f 100644 --- a/scss/sphinx-nefertiti-pink.scss +++ b/scss/sphinx-nefertiti-pink.scss @@ -55,6 +55,7 @@ @import "./utilities"; @import "./components/images"; @import "./components/admonitions"; +@import "./components/code"; @import "./components/navbar"; @import "./components/docutils"; @import "./components/link"; diff --git a/scss/sphinx-nefertiti-purple.scss b/scss/sphinx-nefertiti-purple.scss index b29df0f..f3ac244 100644 --- a/scss/sphinx-nefertiti-purple.scss +++ b/scss/sphinx-nefertiti-purple.scss @@ -55,6 +55,7 @@ @import "./utilities"; @import "./components/images"; @import "./components/admonitions"; +@import "./components/code"; @import "./components/navbar"; @import "./components/docutils"; @import "./components/link"; diff --git a/scss/sphinx-nefertiti-red.scss b/scss/sphinx-nefertiti-red.scss index 04ff252..ebc7d64 100644 --- a/scss/sphinx-nefertiti-red.scss +++ b/scss/sphinx-nefertiti-red.scss @@ -55,6 +55,7 @@ @import "./utilities"; @import "./components/images"; @import "./components/admonitions"; +@import "./components/code"; @import "./components/navbar"; @import "./components/docutils"; @import "./components/link"; diff --git a/scss/sphinx-nefertiti-teal.scss b/scss/sphinx-nefertiti-teal.scss index 41b809d..a4e0da7 100644 --- a/scss/sphinx-nefertiti-teal.scss +++ b/scss/sphinx-nefertiti-teal.scss @@ -55,6 +55,7 @@ @import "./utilities"; @import "./components/images"; @import "./components/admonitions"; +@import "./components/code"; @import "./components/navbar"; @import "./components/docutils"; @import "./components/link"; diff --git a/scss/sphinx-nefertiti-yellow.scss b/scss/sphinx-nefertiti-yellow.scss index 4f3223a..5a5d817 100644 --- a/scss/sphinx-nefertiti-yellow.scss +++ b/scss/sphinx-nefertiti-yellow.scss @@ -55,6 +55,7 @@ @import "./utilities"; @import "./components/images"; @import "./components/admonitions"; +@import "./components/code"; @import "./components/navbar"; @import "./components/docutils"; @import "./components/link"; diff --git a/scss/sphinx-nefertiti.scss b/scss/sphinx-nefertiti.scss index 65b6cc8..c29363f 100644 --- a/scss/sphinx-nefertiti.scss +++ b/scss/sphinx-nefertiti.scss @@ -55,6 +55,7 @@ @import "./utilities"; @import "./components/images"; @import "./components/admonitions"; +@import "./components/code"; @import "./components/navbar"; @import "./components/docutils"; @import "./components/link"; diff --git a/sphinx_nefertiti/layout.html b/sphinx_nefertiti/layout.html index eedfd65..c194582 100644 --- a/sphinx_nefertiti/layout.html +++ b/sphinx_nefertiti/layout.html @@ -119,7 +119,7 @@ {%- if theme_logo_height %} height="{{ theme_logo_height|e }}"{% endif %} {%- if theme_logo_alt %} alt="{{ theme_logo_alt|e }}"{% endif %} {%- if theme_logo_title %} title="{{ theme_logo_title|e }}"{% endif %} - class="nefertiti-bg" + class="project-logo" /> {{ project }} diff --git a/sphinx_nefertiti/pygments.py b/sphinx_nefertiti/pygments.py index aad50bd..70eb439 100644 --- a/sphinx_nefertiti/pygments.py +++ b/sphinx_nefertiti/pygments.py @@ -32,6 +32,13 @@ def get_stylesheet(self): try: pos = line.index("{") sel, rest = (line[0:pos]).strip(), line[pos:] + # Fix: background applied to pre, instead of only .highlight. + # This is due to possibly having right aligned sidebars + # floating next to code blocks. In such case we want the + # background applied to the pre element instead of the + # .highlight. See: https://sphinx-themes.org/sample-sites/sphinx-nefertiti/kitchen-sink/generic/#code-with-sidebar + if sel == ".highlight": + sel = ".highlight pre" new_line = f"{self.prepend_selector} {sel} {rest}" new_content.append(new_line) except ValueError: