From 282bed9e50e7c0dac535d5f06dfd860158f196ab Mon Sep 17 00:00:00 2001 From: Daniela Rus Morales Date: Fri, 6 Oct 2023 15:53:37 +0200 Subject: [PATCH 1/7] Extens styling based on sphinx-themes sample docs --- docs/source/_static/custom.css | 13 +------------ scss/_layout.scss | 8 ++++---- scss/components/_images.scss | 11 +++++++++++ sphinx_nefertiti/layout.html | 2 +- 4 files changed, 17 insertions(+), 17 deletions(-) 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/scss/_layout.scss b/scss/_layout.scss index a968340..957f730 100644 --- a/scss/_layout.scss +++ b/scss/_layout.scss @@ -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; +} \ No newline at end of file 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/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 }} From a3591b1cb39db170f1701181c6f21dec5b1bd1b9 Mon Sep 17 00:00:00 2001 From: Daniela Rus Morales Date: Fri, 6 Oct 2023 20:56:01 +0200 Subject: [PATCH 2/7] Add more type of admonition-like components --- .../users-guide/components/footnotes.rst | 1 + package-lock.json | 4 +- scss/components/_admonitions.scss | 107 +++++++++++++++++- 3 files changed, 107 insertions(+), 5 deletions(-) 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/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/components/_admonitions.scss b/scss/components/_admonitions.scss index 8d0edd1..ad7b541 100644 --- a/scss/components/_admonitions.scss +++ b/scss/components/_admonitions.scss @@ -1,4 +1,87 @@ -.admonition-title { +.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 +108,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; } From 1247c00f7c15de879fa07ca6293ed07fb5ca75ec Mon Sep 17 00:00:00 2001 From: Daniela Rus Morales Date: Fri, 6 Oct 2023 20:56:24 +0200 Subject: [PATCH 3/7] Remove border-top from footnotes --- scss/components/_docutils.scss | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/scss/components/_docutils.scss b/scss/components/_docutils.scss index b2b8323..2c6b2be 100644 --- a/scss/components/_docutils.scss +++ b/scss/components/_docutils.scss @@ -151,9 +151,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; From a82e251798fa3647c4f82d5d67ecc71ef17746f7 Mon Sep 17 00:00:00 2001 From: Daniela Rus Morales Date: Fri, 13 Oct 2023 06:01:46 +0200 Subject: [PATCH 4/7] Wrap tables to apply specific styling --- js/src/index.js | 9 +++++++++ 1 file changed, 9 insertions(+) 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); + } }); From 681c0adc1691399ecc74e22da69458f70d84abf8 Mon Sep 17 00:00:00 2001 From: Daniela Rus Morales Date: Fri, 13 Oct 2023 06:05:06 +0200 Subject: [PATCH 5/7] Extend styling to cover additional elements --- scss/_layout.scss | 2 +- scss/_root.scss | 4 ++ scss/_theme.scss | 63 +++++++++++++++++++++++++++++++ scss/_utilities.scss | 4 +- scss/_variables-blue.scss | 11 +++++- scss/_variables-green.scss | 10 ++++- scss/_variables-indigo.scss | 10 ++++- scss/_variables-orange.scss | 10 ++++- scss/_variables-pink.scss | 10 ++++- scss/_variables-purple.scss | 10 ++++- scss/_variables-red.scss | 10 ++++- scss/_variables-teal.scss | 10 ++++- scss/_variables-yellow.scss | 10 ++++- scss/_variables.scss | 10 ++++- scss/components/_code.scss | 41 ++++++++++++++++++++ scss/components/_docutils.scss | 45 ++++++++++++++++++++-- scss/sphinx-nefertiti-blue.scss | 1 + scss/sphinx-nefertiti-green.scss | 1 + scss/sphinx-nefertiti-indigo.scss | 1 + scss/sphinx-nefertiti-orange.scss | 1 + scss/sphinx-nefertiti-pink.scss | 1 + scss/sphinx-nefertiti-purple.scss | 1 + scss/sphinx-nefertiti-red.scss | 1 + scss/sphinx-nefertiti-teal.scss | 1 + scss/sphinx-nefertiti-yellow.scss | 1 + scss/sphinx-nefertiti.scss | 1 + 26 files changed, 243 insertions(+), 27 deletions(-) create mode 100644 scss/components/_code.scss diff --git a/scss/_layout.scss b/scss/_layout.scss index 957f730..d94f315 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; } } 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..041fcf4 100644 --- a/scss/_theme.scss +++ b/scss/_theme.scss @@ -241,3 +241,66 @@ samp *, color: black; background-color: $cyan; } + +blockquote { + margin: 2rem 1rem; + padding: 1rem 2rem .5rem 3rem; + background-color: var(--#{$prefix}tertiary-bg); + border-radius: 0.25rem; + font-size: 1.2em; + font-style: italic; + + .attribution { + padding-top: .8rem; + font-size: 0.9em; + font-weight: normal; + font-style: normal; + text-align: right; + } + + &.epigraph, + &.pull-quote, + &.highlights { + margin: 2rem 2rem 3rem; + padding: 0; + background-color: var(--#{$prefix}body-bg); + } +} + +.line-block { + margin-left: 0; + margin-bottom: 1rem; + + & & { + margin-left: 1rem; + } +} + +aside.sidebar { + float: right; + margin: 0 0 .4rem 1.8rem; + padding: .8rem .9rem; + width: 33%; + background-color: var(--#{$prefix}foot1-bg); + border: 2px solid var(--#{$prefix}secondary-bg); + border-radius: 0.25rem; + + .sidebar-title { + padding-bottom: .5rem; + border-bottom: 1px solid var(--#{$prefix}secondary-bg); + font-size: 1.2em; + } + + .sidebar-subtitle { + font-size: 1.1em; + } + + .rubric { + font-weight: 700; + font-size: 1em; + } + + p:last-child { + margin-bottom: .5rem; + } +} \ No newline at end of file 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/_code.scss b/scss/components/_code.scss new file mode 100644 index 0000000..56c5eed --- /dev/null +++ b/scss/components/_code.scss @@ -0,0 +1,41 @@ +.sig:not(.sig-inline) { + // display: inline-block; + background: var(--#{$prefix}secondary-bg); + font-family: var(--#{$prefix}font-monospace); + font-size: var(--#{$prefix}font-monospace-size); + color: var(--#{$prefix}docapi-kw-color); + margin-left: -0.25rem; + margin-right: -0.25rem; + border-radius: 0.25rem; + padding: .25rem .25rem .25rem 3rem; + text-indent: -2.5em; + transition: background 100ms ease-out; + + a.reference { + .viewcode-link { + font-weight: normal; + width: 3.5rem; + } + } + + em.property { + font-style: italic; + font-weight: normal; + } + + .sig-prename, + .sig-name { + font-weight: bold; + color: var(--#{$prefix}body-color); + } +} + +.viewcode-link { + padding-left: 8px; + float: right; +} + +.viewcode-back { + float: right; + font-size: .8rem; +} diff --git a/scss/components/_docutils.scss b/scss/components/_docutils.scss index 2c6b2be..bb3fb24 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 { @@ -168,12 +173,24 @@ div.math { } > .footnote.brackets { - display: flex; - gap: 1rem; - align-items: flex-start; - justify-content: flex-start; + margin-bottom: 1rem; + padding: 0 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); @@ -187,3 +204,23 @@ div.math { } } } + +.code-block-caption { + padding-bottom: .5rem; + text-align: center; +} + +.highlight pre .linenos { + padding-right: 1rem; + border-right: 1px solid #ddd; + margin-right: 1rem; +} + +.rubric { + font-size: 1.1em; + font-weight: 700; +} + +.centered { + text-align: center; +} 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"; From af14647f68bb396f404edd5dd6e0e1f99e03afd8 Mon Sep 17 00:00:00 2001 From: Daniela Rus Morales Date: Fri, 13 Oct 2023 06:05:44 +0200 Subject: [PATCH 6/7] pygments: apply bg to pre instead of .highlight --- sphinx_nefertiti/pygments.py | 7 +++++++ 1 file changed, 7 insertions(+) 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: From e484be8dfc2fa02ed40071288ff726afc69dee6f Mon Sep 17 00:00:00 2001 From: Daniela Rus Morales Date: Fri, 13 Oct 2023 06:17:33 +0200 Subject: [PATCH 7/7] Lint scss code --- scss/_layout.scss | 2 +- scss/_theme.scss | 27 ++++++++++++++------------- scss/components/_admonitions.scss | 7 ++++--- scss/components/_code.scss | 20 ++++++++++---------- scss/components/_docutils.scss | 4 ++-- 5 files changed, 31 insertions(+), 29 deletions(-) diff --git a/scss/_layout.scss b/scss/_layout.scss index d94f315..a5a6508 100644 --- a/scss/_layout.scss +++ b/scss/_layout.scss @@ -220,4 +220,4 @@ body { .project-logo { margin-right: 1rem; -} \ No newline at end of file +} diff --git a/scss/_theme.scss b/scss/_theme.scss index 041fcf4..94e734e 100644 --- a/scss/_theme.scss +++ b/scss/_theme.scss @@ -1,3 +1,4 @@ +/* stylelint-disable selector-no-qualifying-type */ @use "sass:color"; @@ -243,33 +244,33 @@ samp *, } blockquote { - margin: 2rem 1rem; padding: 1rem 2rem .5rem 3rem; - background-color: var(--#{$prefix}tertiary-bg); - border-radius: 0.25rem; + 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: 0.9em; - font-weight: normal; + font-size: .9em; font-style: normal; + font-weight: 400; text-align: right; } &.epigraph, &.pull-quote, &.highlights { - margin: 2rem 2rem 3rem; padding: 0; + margin: 2rem 2rem 3rem; background-color: var(--#{$prefix}body-bg); } } .line-block { - margin-left: 0; margin-bottom: 1rem; + margin-left: 0; & & { margin-left: 1rem; @@ -278,17 +279,17 @@ blockquote { aside.sidebar { float: right; - margin: 0 0 .4rem 1.8rem; - padding: .8rem .9rem; 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: 0.25rem; + border-radius: .25rem; .sidebar-title { padding-bottom: .5rem; - border-bottom: 1px solid var(--#{$prefix}secondary-bg); font-size: 1.2em; + border-bottom: 1px solid var(--#{$prefix}secondary-bg); } .sidebar-subtitle { @@ -296,11 +297,11 @@ aside.sidebar { } .rubric { - font-weight: 700; font-size: 1em; + font-weight: 700; } p:last-child { margin-bottom: .5rem; } -} \ No newline at end of file +} diff --git a/scss/components/_admonitions.scss b/scss/components/_admonitions.scss index ad7b541..b6f801a 100644 --- a/scss/components/_admonitions.scss +++ b/scss/components/_admonitions.scss @@ -1,3 +1,4 @@ +/* stylelint-disable selector-no-qualifying-type */ .versionadded { padding: .7rem 1.2rem 1rem; margin: 2.5rem 2rem 2rem; @@ -20,7 +21,7 @@ background-color: var(--#{$prefix}admon-tip-color-bg); } - & > p:first-child { + > p:first-child { padding-top: 1.5rem; } } @@ -47,7 +48,7 @@ background-color: var(--#{$prefix}admon-caution-color-bg); } - & > p:first-child { + > p:first-child { padding-top: 1.5rem; } } @@ -74,7 +75,7 @@ div.deprecated { background-color: var(--#{$prefix}admon-error-color-bg); } - & > p:first-child { + > p:first-child { padding-top: 1.5rem; } } diff --git a/scss/components/_code.scss b/scss/components/_code.scss index 56c5eed..845447c 100644 --- a/scss/components/_code.scss +++ b/scss/components/_code.scss @@ -1,38 +1,38 @@ +/* stylelint-disable selector-no-qualifying-type */ .sig:not(.sig-inline) { - // display: inline-block; - background: var(--#{$prefix}secondary-bg); + 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); - margin-left: -0.25rem; - margin-right: -0.25rem; - border-radius: 0.25rem; - padding: .25rem .25rem .25rem 3rem; text-indent: -2.5em; + background: var(--#{$prefix}secondary-bg); + border-radius: .25rem; transition: background 100ms ease-out; a.reference { .viewcode-link { - font-weight: normal; width: 3.5rem; + font-weight: 400; } } em.property { font-style: italic; - font-weight: normal; + font-weight: 400; } .sig-prename, .sig-name { - font-weight: bold; + font-weight: 700; color: var(--#{$prefix}body-color); } } .viewcode-link { - padding-left: 8px; float: right; + padding-left: 8px; } .viewcode-back { diff --git a/scss/components/_docutils.scss b/scss/components/_docutils.scss index bb3fb24..72de9f5 100644 --- a/scss/components/_docutils.scss +++ b/scss/components/_docutils.scss @@ -173,8 +173,8 @@ div.math { } > .footnote.brackets { - margin-bottom: 1rem; padding: 0 1rem; + margin-bottom: 1rem; color: var(--#{$prefix}tertiary-color); .label { @@ -212,8 +212,8 @@ div.math { .highlight pre .linenos { padding-right: 1rem; - border-right: 1px solid #ddd; margin-right: 1rem; + border-right: 1px solid #ddd; } .rubric {