- {{ components.navMain() }}
+ {{ components.navMain() }}
+ {% if headerImage is defined %}
+
+ 
+
+ {% else %}
- {{ title }}
+ {{ title }}
+ {% endif %}
- {{ content }}
+ {{ content }}
@@ -127,12 +146,12 @@
// - not in an "onload" function - because we need this code to
// run before anything is painted. Otherwise we get a flicker from
// light mode to dark mode on load.
- var brightness = localStorage.getItem('brightness');
- if (brightness === "light" || brightness === null) {
- goToLightMode();
- } else {
+ //var brightness = localStorage.getItem('brightness');
+ //if (brightness === "light" || brightness === null) {
+ // goToLightMode();
+ //} else {
goToDarkMode();
- }
+ //}
// Configure the global text search input.
//docsearch({
@@ -153,35 +172,23 @@
}
function goToLightMode() {
- localStorage.setItem('brightness', 'light');
-
var html = document.getElementsByTagName("html")[0];
html.setAttribute("data-bs-theme", "light");
// For Algolia Docsearch bar theme
html.setAttribute("data-theme", "light");
- var button = document.getElementById("brightness-button");
- button.classList.remove("fa-sun");
- button.classList.add("fa-moon");
-
- goToHighlightJsLightMode();
+ localStorage.setItem('brightness', 'light');
}
function goToDarkMode() {
- localStorage.setItem('brightness', 'dark');
-
var html = document.getElementsByTagName("html")[0];
html.setAttribute("data-bs-theme", "dark");
// For Algolia Docsearch bar theme
html.setAttribute("data-theme", "dark");
- var button = document.getElementById("brightness-button");
- button.classList.remove("fa-moon");
- button.classList.add("fa-sun");
-
- goToHighlightJsDarkMode();
+ localStorage.setItem('brightness', 'dark');
}
diff --git a/theme/styles/docs_page_layout.scss b/theme/styles/docs_page_layout.scss
index 8333b6c..94e67e5 100644
--- a/theme/styles/docs_page_layout.scss
+++ b/theme/styles/docs_page_layout.scss
@@ -1,5 +1,105 @@
-$contributorDiameter: 32px;
-$contributorRadius: 16px;
+@use 'theme-variables' as vars;
+
+html[data-bs-theme="dark"] {
+
+ .navbar {
+ border-bottom: vars.$standardDividerBorder;
+
+ .navbar-brand {
+ .name {
+ color: WHITE;
+ }
+ }
+
+ .nav-item {
+ a, .fa {
+ color: #CCCCCC;
+
+ &:hover {
+ color: WHITE;
+ }
+ }
+ }
+ }
+
+ nav.main {
+ ol.organization-links {
+ a {
+ background: rgba(255, 255, 255, 0.02);
+
+ &:hover {
+ background: rgba(255, 255, 255, 0.10);
+ }
+ }
+ }
+
+ .organization-nav-divider {
+ background: vars.$dividerColor;
+ }
+
+ a {
+ color: #AAAAAA;
+
+ &:hover {
+ color: WHITE;
+ }
+ }
+
+ .link-group {
+ ol {
+ border-left: 2px solid vars.$accentColor;
+ }
+ }
+
+ .contributors {
+ .remaining-count {
+ .bubble {
+ background: #333333;
+ }
+ }
+ }
+ }
+
+ body {
+ background: vars.$backgroundColor;
+ }
+
+ main {
+ header {
+ background: rgba(255, 255, 255, 0.02);
+
+ color: WHITE;
+ }
+ }
+
+ .table-of-contents {
+ ol {
+ border-left: vars.$standardDividerBorder;
+
+ li {
+ a {
+ color: #CCCCCC;
+
+ &:hover {
+ color: WHITE;
+ }
+ }
+ }
+ }
+ }
+
+ footer {
+ background: vars.$footerBackgroundColor;
+
+ color: #AAAAAA;
+
+ .built-with {
+ a {
+ color: #FFFF00;
+ }
+ }
+ }
+}
.navbar {
margin-bottom: 24px;
@@ -168,15 +268,16 @@ nav.main {
margin: 0;
margin-right: 8px;
+ margin-bottom: 48px;
- height: $contributorDiameter;
+ height: vars.$contributorDiameter;
padding: 0;
a {
display: block;
- width: $contributorDiameter;
- height: $contributorDiameter;
- border-radius: $contributorRadius;
+ width: vars.$contributorDiameter;
+ height: vars.$contributorDiameter;
+ border-radius: vars.$contributorRadius;
// Note: We show the contributor photo as a background image because
// displaying it as an
![]()
results in a few extra pixels above
@@ -192,7 +293,7 @@ nav.main {
margin: 0;
padding: 0;
- height: $contributorDiameter;
+ height: vars.$contributorDiameter;
.bubble {
display: block;
@@ -200,19 +301,19 @@ nav.main {
margin: 0;
padding: 0;
- width: $contributorDiameter;
- height: $contributorDiameter;
- border-radius: $contributorRadius;
+ width: vars.$contributorDiameter;
+ height: vars.$contributorDiameter;
+ border-radius: vars.$contributorRadius;
background: RED;
.count {
display: block;
- width: $contributorDiameter;
- height: $contributorDiameter;
+ width: vars.$contributorDiameter;
+ height: vars.$contributorDiameter;
text-align: center;
- line-height: $contributorDiameter;
+ line-height: vars.$contributorDiameter;
vertical-align: middle;
font-size: 10px;
@@ -239,16 +340,58 @@ main.page-content {
padding-bottom: 100px;
text-align: center;
+
+ &.image {
+ position: relative;
+ padding: 0;
+ width: 100%;
+ max-height: 500px;
+ overflow: clip;
+
+ & > img.background {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ object-position: 50% 0;
+ }
+ }
}
h2, h3, h4, h5, h6 {
- margin-top: 1em;
+ margin-top: 2em;
+ }
+
+ p {
+ margin-bottom: 1.5em;
+ }
+
+ p, li > {
+ code {
+ padding: 3px 6px;
+ background: #7f00a6;
+ border: 1px solid #a218cc;
+ border-radius: 4px;
+
+ color: WHITE;
+ }
+ }
+
+ li {
+ margin-bottom: 1.5em;
+ }
+
+ img {
+ display: block;
+ margin: auto;
}
pre code {
margin-top: 1em;
margin-bottom: 1em;
}
+
+ font-size: 18px;
+ line-height: 1.8em;
}
.table-of-contents {
diff --git a/theme/styles/docs_page_layout_dark.scss b/theme/styles/docs_page_layout_dark.scss
deleted file mode 100644
index 7b6d440..0000000
--- a/theme/styles/docs_page_layout_dark.scss
+++ /dev/null
@@ -1,99 +0,0 @@
-$dividerColor: rgba(255, 255, 255, 0.05);
-$standardDividerBorder: 1px solid $dividerColor;
-
-html[data-bs-theme="dark"] {
-
- .navbar {
- border-bottom: $standardDividerBorder;
-
- .navbar-brand {
- .name {
- color: WHITE;
- }
- }
-
- .nav-item {
- a, .fa {
- color: #CCCCCC;
-
- &:hover {
- color: WHITE;
- }
- }
- }
- }
-
- nav.main {
- ol.organization-links {
- a {
- background: rgba(255, 255, 255, 0.02);
-
- &:hover {
- background: rgba(255, 255, 255, 0.10);
- }
- }
- }
-
- .organization-nav-divider {
- background: $dividerColor;
- }
-
- a {
- color: #AAAAAA;
-
- &:hover {
- color: WHITE;
- }
- }
-
- .link-group {
- ol {
- border-left: 2px solid #FF8888;
- }
- }
-
- .contributors {
- .remaining-count {
- .bubble {
- background: #333333;
- }
- }
- }
- }
-
- main {
- header {
- background: rgba(255, 255, 255, 0.02);
-
- color: WHITE;
- }
- }
-
- .table-of-contents {
- ol {
- border-left: $standardDividerBorder;
-
- li {
- a {
- color: #CCCCCC;
-
- &:hover {
- color: WHITE;
- }
- }
- }
- }
- }
-
- footer {
- background: #202026;
-
- color: #AAAAAA;
-
- .built-with {
- a {
- color: #FFFF00;
- }
- }
- }
-}
diff --git a/theme/styles/docs_page_layout_light.scss b/theme/styles/docs_page_layout_light.scss
deleted file mode 100644
index 1764ce0..0000000
--- a/theme/styles/docs_page_layout_light.scss
+++ /dev/null
@@ -1,105 +0,0 @@
-$lightBackground: WHITE;
-$dividerColor: #EBEBEB;
-
-html[data-bs-theme="light"] {
- background: $lightBackground;
-
- .navbar {
- background: $lightBackground;
- border-bottom: 1px solid $dividerColor;
-
- .navbar-brand {
- .name {
- color: #333333;
- }
- }
-
- .nav-item {
- .nav-link.active {
- color: WHITE;
- }
-
- .fa {
- color: #444444;
-
- &:hover {
- color: BLACK;
- }
- }
- }
- }
-
- nav.main {
- ol.organization-links {
- a {
- background: rgba(0, 0, 0, 0.02);
-
- &:hover {
- background: rgba(0, 0, 0, 0.10);
- }
- }
- }
-
- .organization-nav-divider {
- background: $dividerColor;
- }
-
- a {
- color: #666666;
-
- &:hover {
- color: #222222;
- }
- }
-
- .link-group {
- ol {
- border-left: 2px solid #FF8888;
- }
- }
-
- .contributors {
- .remaining-count {
- .bubble {
- background: #F0F0F0;
- }
- }
- }
- }
-
- main {
- header {
- background: rgba(0, 0, 0, 0.02);
-
- color: #222222;
- }
- }
-
- .table-of-contents {
- ol {
- border-left: 1px solid #EBEBEB;
-
- li {
- a {
- color: #666666;
-
- &:hover {
- color: BLACK;
- }
- }
- }
- }
- }
-
- footer {
- background: #F8F8F8;
-
- color: #888888;
-
- .built-with {
- a {
- color: #CCCC00;
- }
- }
- }
-}
diff --git a/theme/styles/theme-overrides.scss b/theme/styles/theme-overrides.scss
new file mode 100644
index 0000000..b011ca5
--- /dev/null
+++ b/theme/styles/theme-overrides.scss
@@ -0,0 +1 @@
+// Intentionally left empty to be filled by projects.
\ No newline at end of file
diff --git a/theme/styles/theme-variables.scss b/theme/styles/theme-variables.scss
new file mode 100644
index 0000000..fd97f68
--- /dev/null
+++ b/theme/styles/theme-variables.scss
@@ -0,0 +1,11 @@
+@import "theme-overrides";
+
+$backgroundColor: #0a0e12 !default;
+$footerBackgroundColor: #05080a !default;
+
+$accentColor: #7f00a6 !default;
+$dividerColor: rgba(255, 255, 255, 0.05) !default;
+$standardDividerBorder: 1px solid $dividerColor !default;
+
+$contributorDiameter: 32px !default;
+$contributorRadius: 16px !default;
\ No newline at end of file