diff --git a/README.md b/README.md
index 24ad465..ee494ba 100644
--- a/README.md
+++ b/README.md
@@ -1,8 +1,8 @@
# 
ReactPy Router
-
- 
+
+ 
diff --git a/docs/src/about/contributing.md b/docs/src/about/contributing.md
index fc4a234..fa1816d 100644
--- a/docs/src/about/contributing.md
+++ b/docs/src/about/contributing.md
@@ -3,7 +3,7 @@
If you plan to make code changes to this repository, you will need to install the following dependencies first:
- [Git](https://git-scm.com/downloads)
-- [Python 3.9+](https://www.python.org/downloads/)
+- [Python 3.11+](https://www.python.org/downloads/)
- [Hatch](https://hatch.pypa.io/latest/)
- [Bun](https://bun.sh/)
@@ -41,6 +41,7 @@ By utilizing `hatch`, the following commands are available to manage the develop
| `hatch fmt --check` | Run all linters and formatters, but do not save fixes to the disk |
| `hatch fmt --linter` | Run only linters |
| `hatch fmt --formatter` | Run only formatters |
+| `hatch run javascript:build` | Manually re-build the JavaScript bundle |
| `hatch run javascript:check` | Run the JavaScript linter/formatter |
| `hatch run javascript:fix` | Run the JavaScript linter/formatter and write fixes to disk |
| `hatch run python:type_check` | Run the Python type checker |
diff --git a/docs/src/assets/css/admonition.css b/docs/src/assets/css/admonition.css
index 8b3f06e..24b33a3 100644
--- a/docs/src/assets/css/admonition.css
+++ b/docs/src/assets/css/admonition.css
@@ -1,160 +1,160 @@
[data-md-color-scheme="slate"] {
- --admonition-border-color: transparent;
- --admonition-expanded-border-color: rgba(255, 255, 255, 0.1);
- --note-bg-color: rgba(43, 110, 98, 0.2);
- --terminal-bg-color: #0c0c0c;
- --terminal-title-bg-color: #000;
- --deep-dive-bg-color: rgba(43, 52, 145, 0.2);
- --you-will-learn-bg-color: #353a45;
- --pitfall-bg-color: rgba(182, 87, 0, 0.2);
+ --admonition-border-color: transparent;
+ --admonition-expanded-border-color: rgba(255, 255, 255, 0.1);
+ --note-bg-color: rgba(43, 110, 98, 0.2);
+ --terminal-bg-color: #0c0c0c;
+ --terminal-title-bg-color: #000;
+ --deep-dive-bg-color: rgba(43, 52, 145, 0.2);
+ --you-will-learn-bg-color: #353a45;
+ --pitfall-bg-color: rgba(182, 87, 0, 0.2);
}
[data-md-color-scheme="default"] {
- --admonition-border-color: rgba(0, 0, 0, 0.08);
- --admonition-expanded-border-color: var(--admonition-border-color);
- --note-bg-color: rgb(244, 251, 249);
- --terminal-bg-color: rgb(64, 71, 86);
- --terminal-title-bg-color: rgb(35, 39, 47);
- --deep-dive-bg-color: rgb(243, 244, 253);
- --you-will-learn-bg-color: rgb(246, 247, 249);
- --pitfall-bg-color: rgb(254, 245, 231);
+ --admonition-border-color: rgba(0, 0, 0, 0.08);
+ --admonition-expanded-border-color: var(--admonition-border-color);
+ --note-bg-color: rgb(244, 251, 249);
+ --terminal-bg-color: rgb(64, 71, 86);
+ --terminal-title-bg-color: rgb(35, 39, 47);
+ --deep-dive-bg-color: rgb(243, 244, 253);
+ --you-will-learn-bg-color: rgb(246, 247, 249);
+ --pitfall-bg-color: rgb(254, 245, 231);
}
.md-typeset details,
.md-typeset .admonition {
- border-color: var(--admonition-border-color) !important;
- box-shadow: none;
+ border-color: var(--admonition-border-color) !important;
+ box-shadow: none;
}
.md-typeset :is(.admonition, details) {
- margin: 0.55em 0;
+ margin: 0.55em 0;
}
.md-typeset .admonition {
- font-size: 0.7rem;
+ font-size: 0.7rem;
}
.md-typeset .admonition:focus-within,
.md-typeset details:focus-within {
- box-shadow: none !important;
+ box-shadow: none !important;
}
.md-typeset details[open] {
- border-color: var(--admonition-expanded-border-color) !important;
+ border-color: var(--admonition-expanded-border-color) !important;
}
-/*
-Admonition: "summary"
+/*
+Admonition: "summary"
React Name: "You will learn"
*/
.md-typeset .admonition.summary {
- background: var(--you-will-learn-bg-color);
- padding: 0.8rem 1.4rem;
- border-radius: 0.8rem;
+ background: var(--you-will-learn-bg-color);
+ padding: 0.8rem 1.4rem;
+ border-radius: 0.8rem;
}
.md-typeset .summary .admonition-title {
- font-size: 1rem;
- background: transparent;
- padding-left: 0.6rem;
- padding-bottom: 0;
+ font-size: 1rem;
+ background: transparent;
+ padding-left: 0.6rem;
+ padding-bottom: 0;
}
.md-typeset .summary .admonition-title:before {
- display: none;
+ display: none;
}
.md-typeset .admonition.summary {
- border-color: #ffffff17 !important;
+ border-color: #ffffff17 !important;
}
-/*
-Admonition: "abstract"
+/*
+Admonition: "abstract"
React Name: "Note"
*/
.md-typeset .admonition.abstract {
- background: var(--note-bg-color);
- padding: 0.8rem 1.4rem;
- border-radius: 0.8rem;
+ background: var(--note-bg-color);
+ padding: 0.8rem 1.4rem;
+ border-radius: 0.8rem;
}
.md-typeset .abstract .admonition-title {
- font-size: 1rem;
- background: transparent;
- padding-bottom: 0;
- color: rgb(68, 172, 153);
+ font-size: 1rem;
+ background: transparent;
+ padding-bottom: 0;
+ color: rgb(68, 172, 153);
}
.md-typeset .abstract .admonition-title:before {
- font-size: 1.1rem;
- background: rgb(68, 172, 153);
+ font-size: 1.1rem;
+ background: rgb(68, 172, 153);
}
-/*
-Admonition: "warning"
+/*
+Admonition: "warning"
React Name: "Pitfall"
*/
.md-typeset .admonition.warning {
- background: var(--pitfall-bg-color);
- padding: 0.8rem 1.4rem;
- border-radius: 0.8rem;
+ background: var(--pitfall-bg-color);
+ padding: 0.8rem 1.4rem;
+ border-radius: 0.8rem;
}
.md-typeset .warning .admonition-title {
- font-size: 1rem;
- background: transparent;
- padding-bottom: 0;
- color: rgb(219, 125, 39);
+ font-size: 1rem;
+ background: transparent;
+ padding-bottom: 0;
+ color: rgb(219, 125, 39);
}
.md-typeset .warning .admonition-title:before {
- font-size: 1.1rem;
- background: rgb(219, 125, 39);
+ font-size: 1.1rem;
+ background: rgb(219, 125, 39);
}
-/*
-Admonition: "info"
+/*
+Admonition: "info"
React Name: "Deep Dive"
*/
.md-typeset .admonition.info {
- background: var(--deep-dive-bg-color);
- padding: 0.8rem 1.4rem;
- border-radius: 0.8rem;
+ background: var(--deep-dive-bg-color);
+ padding: 0.8rem 1.4rem;
+ border-radius: 0.8rem;
}
.md-typeset .info .admonition-title {
- font-size: 1rem;
- background: transparent;
- padding-bottom: 0;
- color: rgb(136, 145, 236);
+ font-size: 1rem;
+ background: transparent;
+ padding-bottom: 0;
+ color: rgb(136, 145, 236);
}
.md-typeset .info .admonition-title:before {
- font-size: 1.1rem;
- background: rgb(136, 145, 236);
+ font-size: 1.1rem;
+ background: rgb(136, 145, 236);
}
-/*
-Admonition: "example"
+/*
+Admonition: "example"
React Name: "Terminal"
*/
.md-typeset .admonition.example {
- background: var(--terminal-bg-color);
- border-radius: 0.4rem;
- overflow: hidden;
- border: none;
+ background: var(--terminal-bg-color);
+ border-radius: 0.4rem;
+ overflow: hidden;
+ border: none;
}
.md-typeset .example .admonition-title {
- background: var(--terminal-title-bg-color);
- color: rgb(246, 247, 249);
+ background: var(--terminal-title-bg-color);
+ color: rgb(246, 247, 249);
}
.md-typeset .example .admonition-title:before {
- background: rgb(246, 247, 249);
+ background: rgb(246, 247, 249);
}
.md-typeset .admonition.example code {
- background: transparent;
- color: #fff;
- box-shadow: none;
+ background: transparent;
+ color: #fff;
+ box-shadow: none;
}
diff --git a/docs/src/assets/css/banner.css b/docs/src/assets/css/banner.css
index 3739a73..b6d5a90 100644
--- a/docs/src/assets/css/banner.css
+++ b/docs/src/assets/css/banner.css
@@ -1,15 +1,15 @@
body[data-md-color-scheme="slate"] {
- --md-banner-bg-color: rgb(55, 81, 78);
- --md-banner-font-color: #fff;
+ --md-banner-bg-color: rgb(55, 81, 78);
+ --md-banner-font-color: #fff;
}
body[data-md-color-scheme="default"] {
- --md-banner-bg-color: #ff9;
- --md-banner-font-color: #000;
+ --md-banner-bg-color: #ff9;
+ --md-banner-font-color: #000;
}
.md-banner--warning {
- background-color: var(--md-banner-bg-color);
- color: var(--md-banner-font-color);
- text-align: center;
+ background-color: var(--md-banner-bg-color);
+ color: var(--md-banner-font-color);
+ text-align: center;
}
diff --git a/docs/src/assets/css/button.css b/docs/src/assets/css/button.css
index 8f71391..2563f6b 100644
--- a/docs/src/assets/css/button.css
+++ b/docs/src/assets/css/button.css
@@ -1,41 +1,44 @@
[data-md-color-scheme="slate"] {
- --md-button-font-color: #fff;
- --md-button-border-color: #404756;
+ --md-button-font-color: #fff;
+ --md-button-border-color: #404756;
}
[data-md-color-scheme="default"] {
- --md-button-font-color: #000;
- --md-button-border-color: #8d8d8d;
+ --md-button-font-color: #000;
+ --md-button-border-color: #8d8d8d;
}
.md-typeset .md-button {
- border-width: 1px;
- border-color: var(--md-button-border-color);
- border-radius: 9999px;
- color: var(--md-button-font-color);
- transition: color 125ms, background 125ms, border-color 125ms,
- transform 125ms;
+ border-width: 1px;
+ border-color: var(--md-button-border-color);
+ border-radius: 9999px;
+ color: var(--md-button-font-color);
+ transition:
+ color 125ms,
+ background 125ms,
+ border-color 125ms,
+ transform 125ms;
}
.md-typeset .md-button:focus,
.md-typeset .md-button:hover {
- border-color: var(--md-button-border-color);
- color: var(--md-button-font-color);
- background: rgba(78, 87, 105, 0.05);
+ border-color: var(--md-button-border-color);
+ color: var(--md-button-font-color);
+ background: rgba(78, 87, 105, 0.05);
}
.md-typeset .md-button.md-button--primary {
- color: #fff;
- border-color: transparent;
- background: var(--reactpy-color-dark);
+ color: #fff;
+ border-color: transparent;
+ background: var(--reactpy-color-dark);
}
.md-typeset .md-button.md-button--primary:focus,
.md-typeset .md-button.md-button--primary:hover {
- border-color: transparent;
- background: var(--reactpy-color-darker);
+ border-color: transparent;
+ background: var(--reactpy-color-darker);
}
.md-typeset .md-button:focus {
- transform: scale(0.98);
+ transform: scale(0.98);
}
diff --git a/docs/src/assets/css/code.css b/docs/src/assets/css/code.css
index c546549..706344e 100644
--- a/docs/src/assets/css/code.css
+++ b/docs/src/assets/css/code.css
@@ -1,82 +1,79 @@
:root {
- --code-max-height: 17.25rem;
- --md-code-backdrop: rgba(0, 0, 0, 0) 0px 0px 0px 0px,
- rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.03) 0px 0.8px 2px 0px,
- rgba(0, 0, 0, 0.047) 0px 2.7px 6.7px 0px,
- rgba(0, 0, 0, 0.08) 0px 12px 30px 0px;
+ --code-max-height: 17.25rem;
+ --md-code-backdrop: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.03) 0px 0.8px 2px 0px, rgba(0, 0, 0, 0.047) 0px 2.7px 6.7px 0px, rgba(0, 0, 0, 0.08) 0px 12px 30px 0px;
}
[data-md-color-scheme="slate"] {
- --md-code-hl-color: #ffffcf1c;
- --md-code-bg-color: #16181d;
- --md-code-hl-comment-color: hsla(var(--md-hue), 75%, 90%, 0.43);
- --code-tab-color: rgb(52, 58, 70);
- --md-code-hl-name-color: #aadafc;
- --md-code-hl-string-color: hsl(21 49% 63% / 1);
- --md-code-hl-keyword-color: hsl(289.67deg 35% 60%);
- --md-code-hl-constant-color: hsl(213.91deg 68% 61%);
- --md-code-hl-number-color: #bfd9ab;
- --func-and-decorator-color: #dcdcae;
- --module-import-color: #60c4ac;
+ --md-code-hl-color: #ffffcf1c;
+ --md-code-bg-color: #16181d;
+ --md-code-hl-comment-color: hsla(var(--md-hue), 75%, 90%, 0.43);
+ --code-tab-color: rgb(52, 58, 70);
+ --md-code-hl-name-color: #aadafc;
+ --md-code-hl-string-color: hsl(21 49% 63% / 1);
+ --md-code-hl-keyword-color: hsl(289.67deg 35% 60%);
+ --md-code-hl-constant-color: hsl(213.91deg 68% 61%);
+ --md-code-hl-number-color: #bfd9ab;
+ --func-and-decorator-color: #dcdcae;
+ --module-import-color: #60c4ac;
}
[data-md-color-scheme="default"] {
- --md-code-hl-color: #ffffcf1c;
- --md-code-bg-color: rgba(208, 211, 220, 0.4);
- --md-code-fg-color: rgb(64, 71, 86);
- --code-tab-color: #fff;
- --func-and-decorator-color: var(--md-code-hl-function-color);
- --module-import-color: #e153e5;
+ --md-code-hl-color: #ffffcf1c;
+ --md-code-bg-color: rgba(208, 211, 220, 0.4);
+ --md-code-fg-color: rgb(64, 71, 86);
+ --code-tab-color: #fff;
+ --func-and-decorator-color: var(--md-code-hl-function-color);
+ --module-import-color: #e153e5;
}
[data-md-color-scheme="default"] .md-typeset .highlight > pre > code,
[data-md-color-scheme="default"] .md-typeset .highlight > table.highlighttable {
- --md-code-bg-color: #fff;
+ --md-code-bg-color: #fff;
}
/* All code blocks */
.md-typeset pre > code {
- max-height: var(--code-max-height);
+ max-height: var(--code-max-height);
}
/* Code blocks with no line number */
.md-typeset .highlight > pre > code {
- border-radius: 16px;
- max-height: var(--code-max-height);
- box-shadow: var(--md-code-backdrop);
+ border-radius: 16px;
+ max-height: var(--code-max-height);
+ box-shadow: var(--md-code-backdrop);
}
/* Code blocks with line numbers */
.md-typeset .highlighttable .linenos {
- max-height: var(--code-max-height);
- overflow: hidden;
+ max-height: var(--code-max-height);
+ overflow: hidden;
}
.md-typeset .highlighttable {
- box-shadow: var(--md-code-backdrop);
- border-radius: 8px;
- overflow: hidden;
+ box-shadow: var(--md-code-backdrop);
+ border-radius: 8px;
+ overflow: hidden;
}
/* Tabbed code blocks */
.md-typeset .tabbed-set {
- box-shadow: var(--md-code-backdrop);
- border-radius: 8px;
- overflow: hidden;
- border: 1px solid var(--md-default-fg-color--lightest);
+ box-shadow: var(--md-code-backdrop);
+ border-radius: 8px;
+ overflow: hidden;
+ border: 1px solid var(--md-default-fg-color--lightest);
}
.md-typeset .tabbed-set .tabbed-block {
- overflow: hidden;
+ overflow: hidden;
}
.js .md-typeset .tabbed-set .tabbed-labels {
- background: var(--code-tab-color);
- margin: 0;
- padding-left: 0.8rem;
+ background: var(--code-tab-color);
+ margin: 0;
+ padding-left: 0.8rem;
}
.md-typeset .tabbed-set .tabbed-labels > label {
- font-weight: 400;
- font-size: 0.7rem;
- padding-top: 0.55em;
- padding-bottom: 0.35em;
+ font-weight: 400;
+ font-size: 0.7rem;
+ padding-top: 0.55em;
+ padding-bottom: 0.35em;
}
.md-typeset .tabbed-set .highlighttable {
- border-radius: 0;
+ border-radius: 0;
}
/* Code hightlighting colors */
@@ -86,26 +83,31 @@
.highlight .ne,
.highlight .nn,
.highlight .nv {
- color: var(--module-import-color);
+ color: var(--module-import-color);
}
/* Function def name and decorator */
.highlight .nd,
.highlight .nf {
- color: var(--func-and-decorator-color);
+ color: var(--func-and-decorator-color);
}
/* None type */
.highlight .kc {
- color: var(--md-code-hl-constant-color);
+ color: var(--md-code-hl-constant-color);
}
/* Keywords such as def and return */
.highlight .k {
- color: var(--md-code-hl-constant-color);
+ color: var(--md-code-hl-constant-color);
}
/* HTML tags */
.highlight .nt {
- color: var(--md-code-hl-constant-color);
+ color: var(--md-code-hl-constant-color);
+}
+
+/* Copy text button */
+.md-code__nav {
+ background: transparent;
}
diff --git a/docs/src/assets/css/footer.css b/docs/src/assets/css/footer.css
index b340828..2f9e268 100644
--- a/docs/src/assets/css/footer.css
+++ b/docs/src/assets/css/footer.css
@@ -1,33 +1,33 @@
[data-md-color-scheme="slate"] {
- --md-footer-bg-color: var(--md-default-bg-color);
- --md-footer-bg-color--dark: var(--md-default-bg-color);
- --md-footer-border-color: var(--md-header-border-color);
+ --md-footer-bg-color: var(--md-default-bg-color);
+ --md-footer-bg-color--dark: var(--md-default-bg-color);
+ --md-footer-border-color: var(--md-header-border-color);
}
[data-md-color-scheme="default"] {
- --md-footer-fg-color: var(--md-typeset-color);
- --md-footer-fg-color--light: var(--md-typeset-color);
- --md-footer-bg-color: var(--md-default-bg-color);
- --md-footer-bg-color--dark: var(--md-default-bg-color);
- --md-footer-border-color: var(--md-header-border-color);
+ --md-footer-fg-color: var(--md-typeset-color);
+ --md-footer-fg-color--light: var(--md-typeset-color);
+ --md-footer-bg-color: var(--md-default-bg-color);
+ --md-footer-bg-color--dark: var(--md-default-bg-color);
+ --md-footer-border-color: var(--md-header-border-color);
}
.md-footer {
- border-top: 1px solid var(--md-footer-border-color);
+ border-top: 1px solid var(--md-footer-border-color);
}
.md-copyright {
- width: 100%;
+ width: 100%;
}
.md-copyright__highlight {
- width: 100%;
+ width: 100%;
}
.legal-footer-right {
- float: right;
+ float: right;
}
.md-copyright__highlight div {
- display: inline;
+ display: inline;
}
diff --git a/docs/src/assets/css/home.css b/docs/src/assets/css/home.css
index c72e709..b13eec8 100644
--- a/docs/src/assets/css/home.css
+++ b/docs/src/assets/css/home.css
@@ -1,335 +1,297 @@
img.home-logo {
- height: 120px;
+ height: 120px;
}
.home .row {
- display: flex;
- justify-content: center;
- align-items: center;
- flex-direction: column;
- padding: 6rem 0.8rem;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
+ padding: 6rem 0.8rem;
}
.home .row:not(.first, .stripe) {
- background: var(--row-bg-color);
+ background: var(--row-bg-color);
}
.home .row.stripe {
- background: var(--row-stripe-bg-color);
- border: 0 solid var(--stripe-border-color);
- border-top-width: 1px;
- border-bottom-width: 1px;
+ background: var(--row-stripe-bg-color);
+ border: 0 solid var(--stripe-border-color);
+ border-top-width: 1px;
+ border-bottom-width: 1px;
}
.home .row.first {
- text-align: center;
+ text-align: center;
}
.home .row h1 {
- max-width: 28rem;
- line-height: 1.15;
- font-weight: 500;
- margin-bottom: 0.55rem;
- margin-top: -1rem;
+ max-width: 28rem;
+ line-height: 1.15;
+ font-weight: 500;
+ margin-bottom: 0.55rem;
+ margin-top: -1rem;
}
.home .row.first h1 {
- margin-top: 0.55rem;
- margin-bottom: -0.75rem;
+ margin-top: 0.55rem;
+ margin-bottom: -0.75rem;
}
.home .row > p {
- max-width: 35rem;
- line-height: 1.5;
- font-weight: 400;
+ max-width: 35rem;
+ line-height: 1.5;
+ font-weight: 400;
}
.home .row.first > p {
- font-size: 32px;
- font-weight: 500;
+ font-size: 32px;
+ font-weight: 500;
}
/* Code blocks */
.home .row .tabbed-set {
- background: var(--home-tabbed-set-bg-color);
- margin: 0;
+ background: var(--home-tabbed-set-bg-color);
+ margin: 0;
}
.home .row .tabbed-content {
- padding: 20px 18px;
- overflow-x: auto;
+ padding: 20px 18px;
+ overflow-x: auto;
}
.home .row .tabbed-content img {
- user-select: none;
- -moz-user-select: none;
- -webkit-user-drag: none;
- -webkit-user-select: none;
- -ms-user-select: none;
- max-width: 580px;
+ user-select: none;
+ -moz-user-select: none;
+ -webkit-user-drag: none;
+ -webkit-user-select: none;
+ -ms-user-select: none;
+ max-width: 580px;
}
.home .row .tabbed-content {
- -webkit-filter: var(--code-block-filter);
- filter: var(--code-block-filter);
+ -webkit-filter: var(--code-block-filter);
+ filter: var(--code-block-filter);
}
/* Code examples */
.home .example-container {
- background: radial-gradient(
- circle at 0% 100%,
- rgb(41 84 147 / 11%) 0%,
- rgb(22 89 189 / 4%) 70%,
- rgb(48 99 175 / 0%) 80%
- ),
- radial-gradient(
- circle at 100% 100%,
- rgb(24 87 45 / 55%) 0%,
- rgb(29 61 12 / 4%) 70%,
- rgb(94 116 93 / 0%) 80%
- ),
- radial-gradient(
- circle at 100% 0%,
- rgba(54, 66, 84, 0.55) 0%,
- rgb(102 111 125 / 4%) 70%,
- rgba(54, 66, 84, 0) 80%
- ),
- radial-gradient(
- circle at 0% 0%,
- rgba(91, 114, 135, 0.55) 0%,
- rgb(45 111 171 / 4%) 70%,
- rgb(5 82 153 / 0%) 80%
- ),
- rgb(0, 0, 0) center center/cover no-repeat fixed;
- display: grid;
- grid-template-columns: repeat(2, minmax(0, 1fr));
- align-items: center;
- border-radius: 16px;
- margin: 30px 0;
- max-width: 100%;
- grid-column-gap: 20px;
- padding-left: 20px;
- padding-right: 20px;
+ background:
+ radial-gradient(circle at 0% 100%, rgb(41 84 147 / 11%) 0%, rgb(22 89 189 / 4%) 70%, rgb(48 99 175 / 0%) 80%),
+ radial-gradient(circle at 100% 100%, rgb(24 87 45 / 55%) 0%, rgb(29 61 12 / 4%) 70%, rgb(94 116 93 / 0%) 80%),
+ radial-gradient(circle at 100% 0%, rgba(54, 66, 84, 0.55) 0%, rgb(102 111 125 / 4%) 70%, rgba(54, 66, 84, 0) 80%),
+ radial-gradient(circle at 0% 0%, rgba(91, 114, 135, 0.55) 0%, rgb(45 111 171 / 4%) 70%, rgb(5 82 153 / 0%) 80%),
+ rgb(0, 0, 0) center center/cover no-repeat fixed;
+ display: grid;
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ align-items: center;
+ border-radius: 16px;
+ margin: 30px 0;
+ max-width: 100%;
+ grid-column-gap: 20px;
+ padding-left: 20px;
+ padding-right: 20px;
}
.home .demo .white-bg {
- background: #fff;
- border-radius: 16px;
- display: flex;
- flex-direction: column;
- max-width: 590px;
- min-width: -webkit-min-content;
- min-width: -moz-min-content;
- min-width: min-content;
- row-gap: 1rem;
- padding: 1rem;
+ background: #fff;
+ border-radius: 16px;
+ display: flex;
+ flex-direction: column;
+ max-width: 590px;
+ min-width: -webkit-min-content;
+ min-width: -moz-min-content;
+ min-width: min-content;
+ row-gap: 1rem;
+ padding: 1rem;
}
.home .demo .vid-row {
- display: flex;
- flex-direction: row;
- -moz-column-gap: 12px;
- column-gap: 12px;
+ display: flex;
+ flex-direction: row;
+ -moz-column-gap: 12px;
+ column-gap: 12px;
}
.home .demo {
- color: #000;
+ color: #000;
}
.home .demo .vid-thumbnail {
- background: radial-gradient(
- circle at 0% 100%,
- rgb(41 84 147 / 55%) 0%,
- rgb(22 89 189 / 4%) 70%,
- rgb(48 99 175 / 0%) 80%
- ),
- radial-gradient(
- circle at 100% 100%,
- rgb(24 63 87 / 55%) 0%,
- rgb(29 61 12 / 4%) 70%,
- rgb(94 116 93 / 0%) 80%
- ),
- radial-gradient(
- circle at 100% 0%,
- rgba(54, 66, 84, 0.55) 0%,
- rgb(102 111 125 / 4%) 70%,
- rgba(54, 66, 84, 0) 80%
- ),
- radial-gradient(
- circle at 0% 0%,
- rgba(91, 114, 135, 0.55) 0%,
- rgb(45 111 171 / 4%) 70%,
- rgb(5 82 153 / 0%) 80%
- ),
- rgb(0, 0, 0) center center/cover no-repeat fixed;
- width: 9rem;
- aspect-ratio: 16 / 9;
- border-radius: 8px;
- display: flex;
- justify-content: center;
- align-items: center;
+ background:
+ radial-gradient(circle at 0% 100%, rgb(41 84 147 / 55%) 0%, rgb(22 89 189 / 4%) 70%, rgb(48 99 175 / 0%) 80%),
+ radial-gradient(circle at 100% 100%, rgb(24 63 87 / 55%) 0%, rgb(29 61 12 / 4%) 70%, rgb(94 116 93 / 0%) 80%),
+ radial-gradient(circle at 100% 0%, rgba(54, 66, 84, 0.55) 0%, rgb(102 111 125 / 4%) 70%, rgba(54, 66, 84, 0) 80%),
+ radial-gradient(circle at 0% 0%, rgba(91, 114, 135, 0.55) 0%, rgb(45 111 171 / 4%) 70%, rgb(5 82 153 / 0%) 80%),
+ rgb(0, 0, 0) center center/cover no-repeat fixed;
+ width: 9rem;
+ aspect-ratio: 16 / 9;
+ border-radius: 8px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
}
.home .demo .vid-text {
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: flex-start;
- width: 100%;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: flex-start;
+ width: 100%;
}
.home .demo h2 {
- font-size: 18px;
- line-height: 1.375;
- margin: 0;
- text-align: left;
- font-weight: 700;
+ font-size: 18px;
+ line-height: 1.375;
+ margin: 0;
+ text-align: left;
+ font-weight: 700;
}
.home .demo h3 {
- font-size: 16px;
- line-height: 1.25;
- margin: 0;
+ font-size: 16px;
+ line-height: 1.25;
+ margin: 0;
}
.home .demo p {
- font-size: 14px;
- line-height: 1.375;
- margin: 0;
+ font-size: 14px;
+ line-height: 1.375;
+ margin: 0;
}
.home .demo .browser-nav-url {
- background: rgba(153, 161, 179, 0.2);
- border-radius: 9999px;
- font-size: 14px;
- color: grey;
- display: flex;
- align-items: center;
- justify-content: center;
- -moz-column-gap: 5px;
- column-gap: 5px;
+ background: rgba(153, 161, 179, 0.2);
+ border-radius: 9999px;
+ font-size: 14px;
+ color: grey;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ -moz-column-gap: 5px;
+ column-gap: 5px;
}
.home .demo .browser-navbar {
- margin: -1rem;
- margin-bottom: 0;
- padding: 0.75rem 1rem;
- border-bottom: 1px solid darkgrey;
+ margin: -1rem;
+ margin-bottom: 0;
+ padding: 0.75rem 1rem;
+ border-bottom: 1px solid darkgrey;
}
.home .demo .browser-viewport {
- background: #fff;
- border-radius: 16px;
- display: flex;
- flex-direction: column;
- row-gap: 1rem;
- height: 400px;
- overflow-y: scroll;
- margin: -1rem;
- padding: 1rem;
+ background: #fff;
+ border-radius: 16px;
+ display: flex;
+ flex-direction: column;
+ row-gap: 1rem;
+ height: 400px;
+ overflow-y: scroll;
+ margin: -1rem;
+ padding: 1rem;
}
.home .demo .browser-viewport .search-header > h1 {
- color: #000;
- text-align: left;
- font-size: 24px;
- margin: 0;
+ color: #000;
+ text-align: left;
+ font-size: 24px;
+ margin: 0;
}
.home .demo .browser-viewport .search-header > p {
- text-align: left;
- font-size: 16px;
- margin: 10px 0;
+ text-align: left;
+ font-size: 16px;
+ margin: 10px 0;
}
.home .demo .search-bar input {
- width: 100%;
- background: rgba(153, 161, 179, 0.2);
- border-radius: 9999px;
- padding-left: 40px;
- padding-right: 40px;
- height: 40px;
- color: #000;
+ width: 100%;
+ background: rgba(153, 161, 179, 0.2);
+ border-radius: 9999px;
+ padding-left: 40px;
+ padding-right: 40px;
+ height: 40px;
+ color: #000;
}
.home .demo .search-bar svg {
- height: 40px;
- position: absolute;
- transform: translateX(75%);
+ height: 40px;
+ position: absolute;
+ transform: translateX(75%);
}
.home .demo .search-bar {
- position: relative;
+ position: relative;
}
/* Desktop Styling */
@media screen and (min-width: 60em) {
- .home .row {
- text-align: center;
- }
- .home .row > p {
- font-size: 21px;
- }
- .home .row > h1 {
- font-size: 52px;
- }
- .home .row .pop-left {
- margin-left: -20px;
- margin-right: 0;
- margin-top: -20px;
- margin-bottom: -20px;
- }
- .home .row .pop-right {
- margin-left: 0px;
- margin-right: 0px;
- margin-top: -20px;
- margin-bottom: -20px;
- }
+ .home .row {
+ text-align: center;
+ }
+ .home .row > p {
+ font-size: 21px;
+ }
+ .home .row > h1 {
+ font-size: 52px;
+ }
+ .home .row .pop-left {
+ margin-left: -20px;
+ margin-right: 0;
+ margin-top: -20px;
+ margin-bottom: -20px;
+ }
+ .home .row .pop-right {
+ margin-left: 0px;
+ margin-right: 0px;
+ margin-top: -20px;
+ margin-bottom: -20px;
+ }
}
/* Mobile Styling */
@media screen and (max-width: 60em) {
- .home .row {
- padding: 4rem 0.8rem;
- }
- .home .row > h1,
- .home .row > p {
- padding-left: 1rem;
- padding-right: 1rem;
- }
- .home .row.first {
- padding-top: 2rem;
- }
- .home-btns {
- width: 100%;
- display: grid;
- grid-gap: 0.5rem;
- gap: 0.5rem;
- }
- .home .example-container {
- display: flex;
- flex-direction: column;
- row-gap: 20px;
- width: 100%;
- justify-content: center;
- border-radius: 0;
- padding: 1rem 0;
- }
- .home .row {
- padding-left: 0;
- padding-right: 0;
- }
- .home .tabbed-set {
- width: 100%;
- border-radius: 0;
- }
- .home .demo {
- width: 100%;
- display: flex;
- justify-content: center;
- }
- .home .demo > .white-bg {
- width: 80%;
- max-width: 80%;
- }
+ .home .row {
+ padding: 4rem 0.8rem;
+ }
+ .home .row > h1,
+ .home .row > p {
+ padding-left: 1rem;
+ padding-right: 1rem;
+ }
+ .home .row.first {
+ padding-top: 2rem;
+ }
+ .home-btns {
+ width: 100%;
+ display: grid;
+ grid-gap: 0.5rem;
+ gap: 0.5rem;
+ }
+ .home .example-container {
+ display: flex;
+ flex-direction: column;
+ row-gap: 20px;
+ width: 100%;
+ justify-content: center;
+ border-radius: 0;
+ padding: 1rem 0;
+ }
+ .home .row {
+ padding-left: 0;
+ padding-right: 0;
+ }
+ .home .tabbed-set {
+ width: 100%;
+ border-radius: 0;
+ }
+ .home .demo {
+ width: 100%;
+ display: flex;
+ justify-content: center;
+ }
+ .home .demo > .white-bg {
+ width: 80%;
+ max-width: 80%;
+ }
}
diff --git a/docs/src/assets/css/main.css b/docs/src/assets/css/main.css
index 6eefdf2..6ca94b1 100644
--- a/docs/src/assets/css/main.css
+++ b/docs/src/assets/css/main.css
@@ -1,85 +1,85 @@
/* Variable overrides */
:root {
- --reactpy-color: #58b962;
- --reactpy-color-dark: #42914a;
- --reactpy-color-darker: #34743b;
- --reactpy-color-opacity-10: rgba(88, 185, 98, 0.1);
+ --reactpy-color: #58b962;
+ --reactpy-color-dark: #42914a;
+ --reactpy-color-darker: #34743b;
+ --reactpy-color-opacity-10: rgba(88, 185, 98, 0.1);
}
[data-md-color-accent="red"] {
- --md-primary-fg-color--light: var(--reactpy-color);
- --md-primary-fg-color--dark: var(--reactpy-color-dark);
+ --md-primary-fg-color--light: var(--reactpy-color);
+ --md-primary-fg-color--dark: var(--reactpy-color-dark);
}
[data-md-color-scheme="slate"] {
- --md-default-bg-color: rgb(35, 39, 47);
- --md-default-bg-color--light: hsla(var(--md-hue), 15%, 16%, 0.54);
- --md-default-bg-color--lighter: hsla(var(--md-hue), 15%, 16%, 0.26);
- --md-default-bg-color--lightest: hsla(var(--md-hue), 15%, 16%, 0.07);
- --md-primary-fg-color: var(--md-default-bg-color);
- --md-default-fg-color: hsla(var(--md-hue), 75%, 95%, 1);
- --md-default-fg-color--light: #fff;
- --md-typeset-a-color: var(--reactpy-color);
- --md-accent-fg-color: var(--reactpy-color-dark);
+ --md-default-bg-color: rgb(35, 39, 47);
+ --md-default-bg-color--light: hsla(var(--md-hue), 15%, 16%, 0.54);
+ --md-default-bg-color--lighter: hsla(var(--md-hue), 15%, 16%, 0.26);
+ --md-default-bg-color--lightest: hsla(var(--md-hue), 15%, 16%, 0.07);
+ --md-primary-fg-color: var(--md-default-bg-color);
+ --md-default-fg-color: hsla(var(--md-hue), 75%, 95%, 1);
+ --md-default-fg-color--light: #fff;
+ --md-typeset-a-color: var(--reactpy-color);
+ --md-accent-fg-color: var(--reactpy-color-dark);
}
[data-md-color-scheme="default"] {
- --md-primary-fg-color: var(--md-default-bg-color);
- --md-default-fg-color--light: #000;
- --md-default-fg-color--lighter: #0000007e;
- --md-default-fg-color--lightest: #00000029;
- --md-typeset-color: rgb(35, 39, 47);
- --md-typeset-a-color: var(--reactpy-color);
- --md-accent-fg-color: var(--reactpy-color-dark);
+ --md-primary-fg-color: var(--md-default-bg-color);
+ --md-default-fg-color--light: #000;
+ --md-default-fg-color--lighter: #0000007e;
+ --md-default-fg-color--lightest: #00000029;
+ --md-typeset-color: rgb(35, 39, 47);
+ --md-typeset-a-color: var(--reactpy-color);
+ --md-accent-fg-color: var(--reactpy-color-dark);
}
/* Font changes */
.md-typeset {
- font-weight: 300;
+ font-weight: 300;
}
.md-typeset h1 {
- font-weight: 600;
- margin: 0;
- font-size: 2.5em;
+ font-weight: 600;
+ margin: 0;
+ font-size: 2.5em;
}
.md-typeset h2 {
- font-weight: 500;
+ font-weight: 500;
}
.md-typeset h3 {
- font-weight: 400;
+ font-weight: 400;
}
/* Intro section styling */
p.intro {
- font-size: 0.9rem;
- font-weight: 500;
+ font-size: 0.9rem;
+ font-weight: 500;
}
/* Hide "Overview" jump selector */
h2#overview {
- visibility: hidden;
- height: 0;
- margin: 0;
- padding: 0;
+ visibility: hidden;
+ height: 0;
+ margin: 0;
+ padding: 0;
}
/* Reduce size of the outdated banner */
.md-banner__inner {
- margin: 0.45rem auto;
+ margin: 0.45rem auto;
}
/* Desktop Styles */
@media screen and (min-width: 60em) {
- /* Remove max width on desktop */
- .md-grid {
- max-width: none;
- }
+ /* Remove max width on desktop */
+ .md-grid {
+ max-width: none;
+ }
}
/* Max size of page content */
.md-content {
- max-width: 56rem;
+ max-width: 56rem;
}
diff --git a/docs/src/assets/css/navbar.css b/docs/src/assets/css/navbar.css
index 33e8b14..8d47684 100644
--- a/docs/src/assets/css/navbar.css
+++ b/docs/src/assets/css/navbar.css
@@ -1,185 +1,185 @@
[data-md-color-scheme="slate"] {
- --md-header-border-color: rgb(255 255 255 / 5%);
- --md-version-bg-color: #ffffff0d;
+ --md-header-border-color: rgb(255 255 255 / 5%);
+ --md-version-bg-color: #ffffff0d;
}
[data-md-color-scheme="default"] {
- --md-header-border-color: rgb(0 0 0 / 7%);
- --md-version-bg-color: #ae58ee2e;
+ --md-header-border-color: rgb(0 0 0 / 7%);
+ --md-version-bg-color: #ae58ee2e;
}
.md-header {
- border: 0 solid transparent;
- border-bottom-width: 1px;
+ border: 0 solid transparent;
+ border-bottom-width: 1px;
}
.md-header--shadow {
- box-shadow: none;
- border-color: var(--md-header-border-color);
- transition: border-color 0.35s cubic-bezier(0.1, 0.7, 0.1, 1);
+ box-shadow: none;
+ border-color: var(--md-header-border-color);
+ transition: border-color 0.35s cubic-bezier(0.1, 0.7, 0.1, 1);
}
/* Version selector */
.md-header__topic .md-ellipsis,
.md-header__title [data-md-component="header-topic"] {
- display: none;
+ display: none;
}
[dir="ltr"] .md-version__current {
- margin: 0;
+ margin: 0;
}
.md-version__list {
- margin: 0;
- left: 0;
- right: 0;
- top: 2.5rem;
+ margin: 0;
+ left: 0;
+ right: 0;
+ top: 2.5rem;
}
.md-version {
- background: var(--md-version-bg-color);
- border-radius: 999px;
- padding: 0 0.8rem;
- margin: 0.3rem 0;
- height: 1.8rem;
- display: flex;
- font-size: 0.7rem;
+ background: var(--md-version-bg-color);
+ border-radius: 999px;
+ padding: 0 0.8rem;
+ margin: 0.3rem 0;
+ height: 1.8rem;
+ display: flex;
+ font-size: 0.7rem;
}
/* Mobile Styling */
@media screen and (max-width: 60em) {
- label.md-header__button.md-icon[for="__drawer"] {
- order: 1;
- }
- .md-header__button.md-logo {
- display: initial;
- order: 2;
- margin-right: auto;
- }
- .md-header__title {
- order: 3;
- }
- .md-header__button[for="__search"] {
- order: 4;
- }
- .md-header__option[data-md-component="palette"] {
- order: 5;
- }
- .md-header__source {
- display: initial;
- order: 6;
- }
- .md-header__source .md-source__repository {
- display: none;
- }
+ label.md-header__button.md-icon[for="__drawer"] {
+ order: 1;
+ }
+ .md-header__button.md-logo {
+ display: initial;
+ order: 2;
+ margin-right: auto;
+ }
+ .md-header__title {
+ order: 3;
+ }
+ .md-header__button[for="__search"] {
+ order: 4;
+ }
+ .md-header__option[data-md-component="palette"] {
+ order: 5;
+ }
+ .md-header__source {
+ display: initial;
+ order: 6;
+ }
+ .md-header__source .md-source__repository {
+ display: none;
+ }
}
/* Desktop Styling */
@media screen and (min-width: 60em) {
- /* Nav container */
- nav.md-header__inner {
- display: contents;
- }
- header.md-header {
- display: flex;
- align-items: center;
- }
-
- /* Logo */
- .md-header__button.md-logo {
- order: 1;
- padding-right: 0.4rem;
- padding-top: 0;
- padding-bottom: 0;
- }
- .md-header__button.md-logo img {
- height: 2rem;
- }
-
- /* Version selector */
- [dir="ltr"] .md-header__title {
- order: 2;
- margin: 0;
- margin-right: 0.8rem;
- margin-left: 0.2rem;
- flex-grow: 0;
- }
- .md-header__topic {
- position: relative;
- }
- .md-header__title--active .md-header__topic {
- transform: none;
- opacity: 1;
- pointer-events: auto;
- z-index: 4;
- }
-
- /* Search */
- .md-search {
- order: 3;
- width: 100%;
- margin-right: 0.6rem;
- }
- .md-search__inner {
- width: 100%;
- float: unset !important;
- }
- .md-search__form {
- border-radius: 9999px;
- }
- [data-md-toggle="search"]:checked ~ .md-header .md-header__option {
- max-width: unset;
- opacity: unset;
- transition: unset;
- }
-
- /* Tabs */
- .md-tabs {
- order: 4;
- min-width: -webkit-fit-content;
- min-width: -moz-fit-content;
- min-width: fit-content;
- width: -webkit-fit-content;
- width: -moz-fit-content;
- width: fit-content;
- z-index: -1;
- overflow: visible;
- border: none !important;
- }
- li.md-tabs__item.md-tabs__item--active {
- background: var(--reactpy-color-opacity-10);
- border-radius: 9999px;
- color: var(--md-typeset-a-color);
- }
- .md-tabs__link {
- margin: 0;
- }
- .md-tabs__item {
- height: 1.8rem;
- display: flex;
- justify-content: center;
- align-items: center;
- flex-direction: column;
- }
-
- /* Dark/Light Selector */
- .md-header__option[data-md-component="palette"] {
- order: 5;
- }
-
- /* GitHub info */
- .md-header__source {
- order: 6;
- margin-left: 0 !important;
- }
+ /* Nav container */
+ nav.md-header__inner {
+ display: contents;
+ }
+ header.md-header {
+ display: flex;
+ align-items: center;
+ }
+
+ /* Logo */
+ .md-header__button.md-logo {
+ order: 1;
+ padding-right: 0.4rem;
+ padding-top: 0;
+ padding-bottom: 0;
+ }
+ .md-header__button.md-logo img {
+ height: 2rem;
+ }
+
+ /* Version selector */
+ [dir="ltr"] .md-header__title {
+ order: 2;
+ margin: 0;
+ margin-right: 0.8rem;
+ margin-left: 0.2rem;
+ flex-grow: 0;
+ }
+ .md-header__topic {
+ position: relative;
+ }
+ .md-header__title--active .md-header__topic {
+ transform: none;
+ opacity: 1;
+ pointer-events: auto;
+ z-index: 4;
+ }
+
+ /* Search */
+ .md-search {
+ order: 3;
+ width: 100%;
+ margin-right: 0.6rem;
+ }
+ .md-search__inner {
+ width: 100%;
+ float: unset !important;
+ }
+ .md-search__form {
+ border-radius: 9999px;
+ }
+ [data-md-toggle="search"]:checked ~ .md-header .md-header__option {
+ max-width: unset;
+ opacity: unset;
+ transition: unset;
+ }
+
+ /* Tabs */
+ .md-tabs {
+ order: 4;
+ min-width: -webkit-fit-content;
+ min-width: -moz-fit-content;
+ min-width: fit-content;
+ width: -webkit-fit-content;
+ width: -moz-fit-content;
+ width: fit-content;
+ z-index: -1;
+ overflow: visible;
+ border: none !important;
+ }
+ li.md-tabs__item.md-tabs__item--active {
+ background: var(--reactpy-color-opacity-10);
+ border-radius: 9999px;
+ color: var(--md-typeset-a-color);
+ }
+ .md-tabs__link {
+ margin: 0;
+ }
+ .md-tabs__item {
+ height: 1.8rem;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
+ }
+
+ /* Dark/Light Selector */
+ .md-header__option[data-md-component="palette"] {
+ order: 5;
+ }
+
+ /* GitHub info */
+ .md-header__source {
+ order: 6;
+ margin-left: 0 !important;
+ }
}
/* Ultrawide Desktop Styles */
@media screen and (min-width: 1919px) {
- .md-search {
- order: 2;
- width: 100%;
- max-width: 34.4rem;
- margin: 0 auto;
- }
+ .md-search {
+ order: 2;
+ width: 100%;
+ max-width: 34.4rem;
+ margin: 0 auto;
+ }
}
diff --git a/docs/src/assets/css/sidebar.css b/docs/src/assets/css/sidebar.css
index b6507d9..094ac43 100644
--- a/docs/src/assets/css/sidebar.css
+++ b/docs/src/assets/css/sidebar.css
@@ -1,104 +1,103 @@
:root {
- --sizebar-font-size: 0.62rem;
+ --sizebar-font-size: 0.62rem;
+ --sizebar-font-size-2: 0.56rem;
}
.md-nav__link {
- word-break: break-word;
+ word-break: break-word;
+}
+
+/* Center the docs content */
+.md-content {
+ justify-self: center;
+ width: 100%;
+ margin: 0 auto;
}
/* Desktop Styling */
@media screen and (min-width: 76.1875em) {
- /* Move the sidebar and TOC to the edge of the page */
- .md-main__inner.md-grid {
- margin-left: 0;
- margin-right: 0;
- max-width: unset;
- display: grid;
- grid-template-columns: auto 1fr auto;
- }
-
- .md-content {
- justify-self: center;
- width: 100%;
- }
- /* Made the sidebar buttons look React-like */
- .md-nav--lifted > .md-nav__list > .md-nav__item--active > .md-nav__link {
- text-transform: uppercase;
- }
-
- .md-nav__title[for="__toc"] {
- text-transform: uppercase;
- margin: 0.5rem;
- }
-
- .md-nav--lifted > .md-nav__list > .md-nav__item--active > .md-nav__link {
- color: rgb(133, 142, 159);
- margin: 0.5rem;
- }
-
- .md-nav__item .md-nav__link {
- position: relative;
- }
-
- .md-nav__link:is(:focus, :hover):not(.md-nav__link--active) {
- color: unset;
- }
-
- .md-nav__item
- .md-nav__link:is(:focus, :hover):not(.md-nav__link--active):before {
- content: "";
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- opacity: 0.2;
- z-index: -1;
- background: grey;
- }
-
- .md-nav__item .md-nav__link--active:before {
- content: "";
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- z-index: -1;
- background: var(--reactpy-color-opacity-10);
- }
-
- .md-nav__link {
- padding: 0.5rem 0.5rem 0.5rem 1rem;
- margin: 0;
- border-radius: 0 10px 10px 0;
- font-weight: 500;
- overflow: hidden;
- font-size: var(--sizebar-font-size);
- }
+ /* Move the sidebar and TOC to the edge of the page */
+ .md-main__inner.md-grid {
+ margin-left: 0;
+ margin-right: 0;
+ max-width: unset;
+ display: grid;
+ grid-template-columns: auto 1fr auto;
+ }
+ [dir="ltr"] .md-nav--primary > .md-nav__list {
+ padding-left: 0;
+ }
- .md-sidebar__scrollwrap {
- margin: 0;
- }
+ /* Btn section (title) */
+ .md-nav--lifted > .md-nav__list > .md-nav__item--active > .md-nav__link {
+ text-transform: uppercase;
+ color: rgb(133, 142, 159);
+ background: transparent;
+ box-shadow: none;
+ }
- [dir="ltr"]
- .md-nav--lifted
- .md-nav[data-md-level="1"]
- > .md-nav__list
- > .md-nav__item {
- padding: 0;
- }
+ /* Btn hover styling */
+ .md-nav__item .md-nav__link {
+ position: relative;
+ }
+ .md-nav__link:is(:focus, :hover):not(.md-nav__link--active) {
+ color: unset;
+ }
+ .md-nav__item .md-nav__link:is(:focus, :hover):not(.md-nav__link--active):before {
+ content: "";
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ opacity: 0.2;
+ z-index: -1;
+ background: grey;
+ }
- .md-nav__item--nested .md-nav__item .md-nav__item {
- padding: 0;
- }
+ /* Btn currently selected */
+ .md-nav__item .md-nav__link--active:before {
+ content: "";
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ z-index: -1;
+ background: var(--reactpy-color-opacity-10);
+ }
- .md-nav__item--nested .md-nav__item .md-nav__item .md-nav__link {
- font-weight: 300;
- }
+ /* Btn shape & font */
+ .md-nav__link {
+ padding: 0.5rem 0.5rem 0.5rem 1rem;
+ margin: 0;
+ border-radius: 0 10px 10px 0;
+ font-weight: 500;
+ overflow: hidden;
+ font-size: var(--sizebar-font-size);
+ }
+ .md-sidebar__scrollwrap {
+ margin: 0;
+ }
+ .md-nav__item--nested .md-nav__item .md-nav__item .md-nav__link {
+ font-weight: 300;
+ font-size: var(--sizebar-font-size-2);
+ }
+ [dir="ltr"] .md-nav--primary .md-nav__list {
+ padding: 0;
+ }
+ [dir="ltr"] .md-nav--lifted > .md-nav__list > .md-nav__item > .md-nav:not(.md-nav--secondary) {
+ margin-left: 0;
+ }
+ .md-nav {
+ margin: 0;
+ }
+ .md-nav__toggle ~ .md-nav {
+ grid-template-rows: minmax(0rem, 0fr);
+ }
- .md-nav__item--nested .md-nav__item .md-nav__item .md-nav__link {
- font-weight: 400;
- padding-left: 1.25rem;
- }
+ /* Collapse icon */
+ .md-nav__icon:hover {
+ background: transparent;
+ }
}
diff --git a/docs/src/assets/css/table-of-contents.css b/docs/src/assets/css/table-of-contents.css
index 6c94f06..b524a19 100644
--- a/docs/src/assets/css/table-of-contents.css
+++ b/docs/src/assets/css/table-of-contents.css
@@ -1,48 +1,61 @@
/* Table of Contents styling */
@media screen and (min-width: 60em) {
- [data-md-component="sidebar"] .md-nav__title[for="__toc"] {
- text-transform: uppercase;
- margin: 0.5rem;
- margin-left: 0;
- font-size: var(--sizebar-font-size);
- }
-
- [data-md-component="toc"] .md-nav__item .md-nav__link--active {
- position: relative;
- }
-
- [data-md-component="toc"] .md-nav__item .md-nav__link--active:before {
- content: "";
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- opacity: 0.15;
- z-index: -1;
- background: var(--md-typeset-a-color);
- }
-
- [data-md-component="toc"] .md-nav__link {
- padding: 0.5rem 0.5rem;
- margin: 0;
- border-radius: 10px 0 0 10px;
- font-weight: 400;
- }
-
- [data-md-component="toc"]
- .md-nav__item
- .md-nav__list
- .md-nav__item
- .md-nav__link {
- padding-left: 1.25rem;
- }
-
- [dir="ltr"] .md-sidebar__inner {
- padding: 0;
- }
-
- .md-nav__item {
- padding: 0;
- }
+ .md-nav__title[for="__toc"] {
+ text-transform: uppercase;
+ color: rgb(133, 142, 159);
+ }
+ [data-md-component="sidebar"] .md-nav__title[for="__toc"] {
+ text-transform: uppercase;
+ margin: 0.5rem;
+ margin-left: 0;
+ font-size: var(--sizebar-font-size);
+ }
+
+ [data-md-component="toc"] .md-nav__item .md-nav__link--active {
+ position: relative;
+ }
+
+ [data-md-component="toc"] .md-nav__item .md-nav__link--active:before {
+ content: "";
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ opacity: 0.15;
+ z-index: -1;
+ background: var(--md-typeset-a-color);
+ }
+
+ [data-md-component="toc"] .md-nav__link {
+ padding: 0.5rem 0.5rem;
+ padding-right: 0;
+ margin: 0;
+ border-radius: 10px 0 0 10px;
+ font-weight: 400;
+ }
+
+ [dir="ltr"] .md-nav--secondary .md-nav__item > .md-nav__link {
+ margin-right: 0;
+ padding-right: 0.4rem;
+ }
+
+ [data-md-component="toc"] .md-nav__item .md-nav__list .md-nav__item .md-nav__link {
+ padding-left: 1.25rem;
+ }
+
+ [dir="ltr"] .md-sidebar__inner {
+ padding: 0;
+ }
+
+ .md-nav__item {
+ padding: 0;
+ }
+}
+
+/* Hide the toc as soon as the left sidebar is collapsed into the hamburger menu */
+@media screen and (max-width: 76.1875em) {
+ .md-sidebar--secondary:not([hidden]) {
+ display: none;
+ }
}
diff --git a/src/reactpy_router/__init__.py b/src/reactpy_router/__init__.py
index add1e5d..5736183 100644
--- a/src/reactpy_router/__init__.py
+++ b/src/reactpy_router/__init__.py
@@ -1,4 +1,4 @@
-__version__ = "2.0.0"
+__version__ = "3.0.0b1"
from reactpy_router.components import link, navigate, route