Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Extend styling #13

Merged
merged 7 commits into from
Oct 13, 2023
Merged

Extend styling #13

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
282bed9
Extens styling based on sphinx-themes sample docs
danirus Oct 6, 2023
a3591b1
Add more type of admonition-like components
danirus Oct 6, 2023
1247c00
Remove border-top from footnotes
danirus Oct 6, 2023
a82e251
Wrap tables to apply specific styling
danirus Oct 13, 2023
681c0ad
Extend styling to cover additional elements
danirus Oct 13, 2023
af14647
pygments: apply bg to pre instead of .highlight
danirus Oct 13, 2023
e484be8
Lint scss code
danirus Oct 13, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 1 addition & 12 deletions docs/source/_static/custom.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,8 @@
.nefertiti-bg {
.project-logo {
margin-right: 1rem;
background: white;
border: 0;
border-radius: 50%;
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;
} */
1 change: 1 addition & 0 deletions docs/source/users-guide/components/footnotes.rst
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 <https://www.un.org/en/global-issues/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.
Expand Down
9 changes: 9 additions & 0 deletions js/src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
});
4 changes: 2 additions & 2 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

10 changes: 5 additions & 5 deletions scss/_layout.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,7 +89,7 @@ body {

code,
code * {
font-family: var(--#{$prefix}font-family-monospace);
font-family: var(--#{$prefix}font-monospace);
font-size: .7rem;
}
}
Expand All @@ -109,10 +109,6 @@ body {
h6 {
font-family: var(--#{$prefix}doc-headers-font);
}

img {
max-width: 100%;
}
}

.nftt-footer {
Expand Down Expand Up @@ -221,3 +217,7 @@ body {
}
}
}

.project-logo {
margin-right: 1rem;
}
4 changes: 4 additions & 0 deletions scss/_root.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,8 @@
}
}

--#{$prefix}docapi-kw-color: #{$docapi-light-kw-color};

@include color-scheme(light);
color-scheme: light;
}
Expand Down Expand Up @@ -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};
Expand Down
64 changes: 64 additions & 0 deletions scss/_theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
/* stylelint-disable selector-no-qualifying-type */
@use "sass:color";


Expand Down Expand Up @@ -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;
}
}
4 changes: 2 additions & 2 deletions scss/_utilities.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
section::after {
section::before {
display: table;
clear: both;
content: "";
Expand All @@ -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;
}
Expand Down
11 changes: 9 additions & 2 deletions scss/_variables-blue.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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%);
Expand Down Expand Up @@ -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;
10 changes: 8 additions & 2 deletions scss/_variables-green.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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%);
Expand Down Expand Up @@ -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;
10 changes: 8 additions & 2 deletions scss/_variables-indigo.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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%);
Expand Down Expand Up @@ -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;
10 changes: 8 additions & 2 deletions scss/_variables-orange.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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%);
Expand Down Expand Up @@ -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;
10 changes: 8 additions & 2 deletions scss/_variables-pink.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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%);
Expand Down Expand Up @@ -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;
10 changes: 8 additions & 2 deletions scss/_variables-purple.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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%);
Expand Down Expand Up @@ -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;
10 changes: 8 additions & 2 deletions scss/_variables-red.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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%);
Expand Down Expand Up @@ -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;
Loading
Loading