migrate docs changes from my other branch to this one

reactive-python · Sep 15, 2023 · 43d06c3 · 43d06c3
1 parent deb0365
commit 43d06c3
Show file tree

Hide file tree

Showing 6 changed files with 40 additions and 24 deletions.
diff --git a/docs/src/assets/css/admonition.css b/docs/src/assets/css/admonition.css
@@ -1,20 +1,20 @@
 [data-md-color-scheme="slate"] {
 	--admonition-border-color: transparent;
 	--admonition-expanded-border-color: rgba(255, 255, 255, 0.1);
-	--note-bg-color: rgb(43 110 98/ 0.2);
+	--note-bg-color: rgba(43, 110, 98, 0.2);
 	--terminal-bg-color: #0c0c0c;
 	--terminal-title-bg-color: #000;
-	--deep-dive-bg-color: rgb(43 52 145 / 0.2);
+	--deep-dive-bg-color: rgba(43, 52, 145, 0.2);
 	--you-will-learn-bg-color: #353a45;
-	--pitfall-bg-color: rgb(182 87 0 / 0.2);
+	--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);
+	--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);
 }
@@ -81,12 +81,12 @@ React Name: "Note"
 	font-size: 1rem;
 	background: transparent;
 	padding-bottom: 0;
-	color: rgb(68 172 153);
+	color: rgb(68, 172, 153);
 }
 
 .md-typeset .note .admonition-title:before {
 	font-size: 1.1rem;
-	background: rgb(68 172 153);
+	background: rgb(68, 172, 153);
 }
 
 .md-typeset .note > .admonition-title:before,
@@ -109,12 +109,12 @@ React Name: "Pitfall"
 	font-size: 1rem;
 	background: transparent;
 	padding-bottom: 0;
-	color: rgb(219 125 39);
+	color: rgb(219, 125, 39);
 }
 
 .md-typeset .warning .admonition-title:before {
 	font-size: 1.1rem;
-	background: rgb(219 125 39);
+	background: rgb(219, 125, 39);
 }
 
 /* 
@@ -131,12 +131,12 @@ React Name: "Deep Dive"
 	font-size: 1rem;
 	background: transparent;
 	padding-bottom: 0;
-	color: rgb(136 145 236);
+	color: rgb(136, 145, 236);
 }
 
 .md-typeset .info .admonition-title:before {
 	font-size: 1.1rem;
-	background: rgb(136 145 236);
+	background: rgb(136, 145, 236);
 }
 
 /* 
@@ -152,11 +152,11 @@ React Name: "Terminal"
 
 .md-typeset .example .admonition-title {
 	background: var(--terminal-title-bg-color);
-	color: rgb(246 247 249);
+	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 {

diff --git a/docs/src/assets/css/code.css b/docs/src/assets/css/code.css
@@ -9,7 +9,7 @@
 	--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);
+	--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%);

diff --git a/docs/src/assets/css/main.css b/docs/src/assets/css/main.css
@@ -3,7 +3,7 @@
 	--reactpy-color: #58b962;
 	--reactpy-color-dark: #42914a;
 	--reactpy-color-darker: #34743b;
-	--reactpy-color-opacity-10: rgb(88 185 98 / 10%);
+	--reactpy-color-opacity-10: rgba(88, 185, 98, 0.1);
 }
 
 [data-md-color-accent="red"] {
@@ -12,7 +12,7 @@
 }
 
 [data-md-color-scheme="slate"] {
-	--md-default-bg-color: rgb(35 39 47);
+	--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);

diff --git a/docs/src/assets/css/navbar.css b/docs/src/assets/css/navbar.css
@@ -1,9 +1,11 @@
 [data-md-color-scheme="slate"] {
 	--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 {
@@ -28,12 +30,20 @@
 }
 
 .md-version__list {
-	margin: 0.2rem -0.8rem;
+	margin: 0;
+	left: 0;
+	right: 0;
+	top: 2.5rem;
 }
 
-[dir="ltr"] .md-header__title.md-header__title--active {
-	margin: 0;
-	transition: margin 0.35s ease;
+.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;
 }
 
 /* Mobile Styling */
@@ -97,6 +107,12 @@
 	.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 {

diff --git a/docs/src/assets/css/sidebar.css b/docs/src/assets/css/sidebar.css
@@ -28,7 +28,7 @@
 	}
 
 	.md-nav--lifted > .md-nav__list > .md-nav__item--active > .md-nav__link {
-		color: rgb(133 142 159);
+		color: rgb(133, 142, 159);
 		margin: 0.5rem;
 	}
 

diff --git a/mkdocs.yml b/mkdocs.yml
@@ -112,7 +112,7 @@ watch:
 
 site_name: ReactPy-Django
 site_author: Archmonger
-site_description: It's React, but in Python. Now for Django developers.
+site_description: It's React, but in Python. Now with Django integration.
 copyright: Copyright &copy; 2023 Reactive Python.<div class="legal-footer-right">This project has no affiliation to ReactJS or Meta Platforms, Inc.</div>
 repo_url: https://github.com/reactive-python/reactpy-django
 site_url: https://reactive-python.github.io/reactpy-django