Add "No Match" text to interactive demo (#184)

* Add "No Match" text to interactive demo

* fix broken link

Author: Archmonger

README.md

@@ -107,7 +107,7 @@ Follow the links below to find out more about this project.
 -   [Documentation](https://reactive-python.github.io/reactpy-django)
 -   [GitHub Discussions](https://github.com/reactive-python/reactpy-django/discussions)
 -   [Discord](https://discord.gg/uNb5P4hA9X)
--   [Contributor Guide](https://reactive-python.github.io/reactpy-django/latest/contribute/code/)
+-   [Contributor Guide](https://reactive-python.github.io/reactpy-django/latest/about/code/)
 -   [Code of Conduct](https://github.com/reactive-python/reactpy-django/blob/main/CODE_OF_CONDUCT.md)
 
 <!--resources-end-->

docs/overrides/home-code-examples/add-interactivity-demo.html

@@ -134,6 +134,7 @@ <h3>Introducing Quantum Components</h3>
                     </svg>
                 </button>
             </div>
+            <p class="no-match"></p>
         </div>
 
         <script>
@@ -159,6 +160,12 @@ <h3>Introducing Quantum Components</h3>
                     }
                     document.querySelector(".browser-viewport h2").innerText =
                         numVids + " Videos";
+
+                    if (search && numVids == 0) {
+                        document.querySelector(".browser-viewport .no-match").innerText = `No matches for “${search}”`;
+                    } else {
+                        document.querySelector(".browser-viewport .no-match").innerText = "";
+                    }
                 });
         </script>
     </div>

docs/src/assets/css/navbar.css

@@ -31,6 +31,11 @@
 	margin: 0.2rem -0.8rem;
 }
 
+[dir="ltr"] .md-header__title.md-header__title--active {
+	margin: 0;
+	transition: margin 0.35s ease;
+}
+
 /* Mobile Styling */
 @media screen and (max-width: 60em) {
 	label.md-header__button.md-icon[for="__drawer"] {