Refactored CSS overrides and added note in search docs

docs/setup/setting-up-site-search.md

@@ -15,8 +15,9 @@ made available [offline][1].
 
 ### Built-in search
 
-[:octicons-file-code-24: Source][2] · 
-[:octicons-cpu-24: Plugin][3]
+[:octicons-file-code-24: Source][2] ·
+[:octicons-cpu-24: Plugin][3] ·
+[:octicons-heart-fill-24:{: .tx-heart } Insiders: new search UI/UX](../insiders.md){: .tx-insiders }
 
 The [built-in search plugin][3] integrates seamlessly with Material for MkDocs,
 adding multilingual client-side search with [lunr][4] and [lunr-languages][5].

material/assets/manifest.json

@@ -5,10 +5,10 @@
   "assets/javascripts/vendor.js.map": "assets/javascripts/vendor.877163d5.min.js.map",
   "assets/javascripts/worker/search.js": "assets/javascripts/worker/search.1b3b2620.min.js",
   "assets/javascripts/worker/search.js.map": "assets/javascripts/worker/search.1b3b2620.min.js.map",
-  "assets/stylesheets/main.css": "assets/stylesheets/main.a0d075aa.min.css",
-  "assets/stylesheets/main.css.map": "assets/stylesheets/main.a0d075aa.min.css.map",
-  "assets/stylesheets/overrides.css": "assets/stylesheets/overrides.5036298b.min.css",
-  "assets/stylesheets/overrides.css.map": "assets/stylesheets/overrides.5036298b.min.css.map",
+  "assets/stylesheets/main.css": "assets/stylesheets/main.18dbb20c.min.css",
+  "assets/stylesheets/main.css.map": "assets/stylesheets/main.18dbb20c.min.css.map",
+  "assets/stylesheets/overrides.css": "assets/stylesheets/overrides.f63bc39a.min.css",
+  "assets/stylesheets/overrides.css.map": "assets/stylesheets/overrides.f63bc39a.min.css.map",
   "assets/stylesheets/palette.css": "assets/stylesheets/palette.0ec9b792.min.css",
   "assets/stylesheets/palette.css.map": "assets/stylesheets/palette.0ec9b792.min.css.map"
 }

material/assets/stylesheets/overrides.5036298b.min.css

@@ -1,3 +0,0 @@
-.md-typeset .tx-switch button{cursor:pointer;transition:opacity 250ms}.md-typeset .tx-switch button:hover{opacity:.75}.md-typeset .tx-switch button>code{display:block;color:var(--md-primary-bg-color);background-color:var(--md-primary-fg-color)}.md-typeset .tx-columns{-moz-columns:2;columns:2}.md-typeset .tx-columns>*{-moz-column-break-inside:avoid;break-inside:avoid}.md-announce a,.md-announce a:focus,.md-announce a:hover{color:currentColor}.md-announce strong{white-space:nowrap}.md-announce .twitter{margin-left:.2em;color:#00acee}.tx-container{padding-top:1rem;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1123 258'><path d='M1124,2c0,0 0,256 0,256l-1125,0l0,-48c0,0 16,5 55,5c116,0 197,-92 325,-92c121,0 114,46 254,46c140,0 214,-167 572,-166Z' style='fill: hsla(0, 0%, 100%, 1)' /></svg>") no-repeat bottom,linear-gradient(to bottom, var(--md-primary-fg-color), #a63fd9 99%, var(--md-default-bg-color) 99%)}[data-md-color-scheme=slate] .tx-container{background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1123 258'><path d='M1124,2c0,0 0,256 0,256l-1125,0l0,-48c0,0 16,5 55,5c116,0 197,-92 325,-92c121,0 114,46 254,46c140,0 214,-167 572,-166Z' style='fill: hsla(232, 15%, 21%, 1)' /></svg>") no-repeat bottom,linear-gradient(to bottom, var(--md-primary-fg-color), #a63fd9 99%, var(--md-default-bg-color) 99%)}.tx-hero{margin:0 .8rem;color:var(--md-primary-bg-color)}.tx-hero h1{margin-bottom:1rem;color:currentColor;font-weight:700}@media screen and (max-width: 29.9375em){.tx-hero h1{font-size:1.4rem}}.tx-hero__content{padding-bottom:6rem}@media screen and (min-width: 60em){.tx-hero{display:flex;align-items:stretch}.tx-hero__content{max-width:19rem;margin-top:3.5rem;padding-bottom:14vw}.tx-hero__image{order:1;width:38rem;transform:translateX(4rem)}}@media screen and (min-width: 76.25em){.tx-hero__image{transform:translateX(8rem)}}.tx-hero .md-button{margin-top:.5rem;margin-right:.5rem;color:var(--md-primary-bg-color)}.tx-hero .md-button:hover,.tx-hero .md-button:focus{color:var(--md-default-bg-color);background-color:var(--md-accent-fg-color);border-color:var(--md-accent-fg-color)}.tx-hero .md-button--primary{color:#894da8;background-color:var(--md-primary-bg-color);border-color:var(--md-primary-bg-color)}@-webkit-keyframes tx-heart{0%,40%,80%,100%{transform:scale(1)}20%,60%{transform:scale(1.15)}}@keyframes tx-heart{0%,40%,80%,100%{transform:scale(1)}20%,60%{transform:scale(1.15)}}.tx-sponsor{margin-top:1rem;text-align:center}.tx-sponsor a{display:inline-block;color:#e91e63;font-variant:all-petite-caps;transition:transform 250ms cubic-bezier(0.1, 0.7, 0.1, 1),color 125ms}.tx-sponsor a:focus,.tx-sponsor a:hover{transform:scale(1.2)}.tx-sponsor hr{display:inline-block;width:2rem;margin:1em;vertical-align:middle;background-color:currentColor;border:none}.tx-heart{-webkit-animation:tx-heart 1000ms infinite;animation:tx-heart 1000ms infinite}
-
-/*# sourceMappingURL=overrides.5036298b.min.css.map*/

material/assets/stylesheets/overrides.f63bc39a.min.css

@@ -0,0 +1,3 @@
+.md-typeset .tx-insiders{color:#e91e63}.md-typeset .tx-switch button{cursor:pointer;transition:opacity 250ms}.md-typeset .tx-switch button:hover{opacity:.75}.md-typeset .tx-switch button>code{display:block;color:var(--md-primary-bg-color);background-color:var(--md-primary-fg-color)}.md-typeset .tx-columns{-moz-columns:2;columns:2}.md-typeset .tx-columns>*{-moz-column-break-inside:avoid;break-inside:avoid}.md-announce a,.md-announce a:focus,.md-announce a:hover{color:currentColor}.md-announce strong{white-space:nowrap}.md-announce .twitter{margin-left:.2em;color:#00acee}.tx-container{padding-top:1rem;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1123 258'><path d='M1124,2c0,0 0,256 0,256l-1125,0l0,-48c0,0 16,5 55,5c116,0 197,-92 325,-92c121,0 114,46 254,46c140,0 214,-167 572,-166Z' style='fill: hsla(0, 0%, 100%, 1)' /></svg>") no-repeat bottom,linear-gradient(to bottom, var(--md-primary-fg-color), #a63fd9 99%, var(--md-default-bg-color) 99%)}[data-md-color-scheme=slate] .tx-container{background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1123 258'><path d='M1124,2c0,0 0,256 0,256l-1125,0l0,-48c0,0 16,5 55,5c116,0 197,-92 325,-92c121,0 114,46 254,46c140,0 214,-167 572,-166Z' style='fill: hsla(232, 15%, 21%, 1)' /></svg>") no-repeat bottom,linear-gradient(to bottom, var(--md-primary-fg-color), #a63fd9 99%, var(--md-default-bg-color) 99%)}@-webkit-keyframes tx-heart{0%,40%,80%,100%{transform:scale(1)}20%,60%{transform:scale(1.15)}}@keyframes tx-heart{0%,40%,80%,100%{transform:scale(1)}20%,60%{transform:scale(1.15)}}.tx-content__footer{margin-top:1rem;text-align:center}.tx-content__footer a{display:inline-block;color:#e91e63;transition:transform 250ms cubic-bezier(0.1, 0.7, 0.1, 1),color 125ms}.tx-content__footer a:focus,.tx-content__footer a:hover{transform:scale(1.2)}.tx-content__footer hr{display:inline-block;width:2rem;margin:1em;vertical-align:middle;background-color:currentColor;border:none}.tx-heart{-webkit-animation:tx-heart 1000ms infinite;animation:tx-heart 1000ms infinite}.tx-hero{margin:0 .8rem;color:var(--md-primary-bg-color)}.tx-hero h1{margin-bottom:1rem;color:currentColor;font-weight:700}@media screen and (max-width: 29.9375em){.tx-hero h1{font-size:1.4rem}}.tx-hero__content{padding-bottom:6rem}@media screen and (min-width: 60em){.tx-hero{display:flex;align-items:stretch}.tx-hero__content{max-width:19rem;margin-top:3.5rem;padding-bottom:14vw}.tx-hero__image{order:1;width:38rem;transform:translateX(4rem)}}@media screen and (min-width: 76.25em){.tx-hero__image{transform:translateX(8rem)}}.tx-hero .md-button{margin-top:.5rem;margin-right:.5rem;color:var(--md-primary-bg-color)}.tx-hero .md-button:hover,.tx-hero .md-button:focus{color:var(--md-default-bg-color);background-color:var(--md-accent-fg-color);border-color:var(--md-accent-fg-color)}.tx-hero .md-button--primary{color:#894da8;background-color:var(--md-primary-bg-color);border-color:var(--md-primary-bg-color)}
+
+/*# sourceMappingURL=overrides.f63bc39a.min.css.map*/

material/base.html

@@ -41,7 +41,7 @@
       {% endif %}
     {% endblock %}
     {% block styles %}
-      <link rel="stylesheet" href="{{ 'assets/stylesheets/main.a0d075aa.min.css' | url }}">
+      <link rel="stylesheet" href="{{ 'assets/stylesheets/main.18dbb20c.min.css' | url }}">
       {% if palette.scheme or palette.primary or palette.accent %}
         <link rel="stylesheet" href="{{ 'assets/stylesheets/palette.0ec9b792.min.css' | url }}">
       {% endif %}

material/overrides/main.html

@@ -22,7 +22,7 @@
   <meta name="twitter:title" content="{{ title }}">
   <meta name="twitter:description" content="{{ config.site_description }}">
   <meta name="twitter:image" content="{{ image }}">
-  <link rel="stylesheet" href="{{ 'assets/stylesheets/overrides.5036298b.min.css' | url }}">
+  <link rel="stylesheet" href="{{ 'assets/stylesheets/overrides.f63bc39a.min.css' | url }}">
 {% endblock %}
 {% block announce %}
   <a href="https://twitter.com/squidfunk">
@@ -35,7 +35,7 @@
 {% endblock %}
 {% block content %}
   {{ super() }}
-  <aside class="tx-sponsor md-typeset">
+  <footer class="tx-content__footer md-typeset">
     <a href="{{ 'insiders/' | url }}" title="Material for MkDocs Insiders">
       <hr>
       <span class="twemoji">
@@ -49,7 +49,7 @@
       </span>
       <hr>
     </a>
-  </aside>
+  </footer>
 {% endblock %}
 {% block analytics %}
   {{ super() }}

src/assets/stylesheets/main/extensions/markdown/_admonition.scss

@@ -174,12 +174,12 @@ $admonitions: (
   $name: nth($names, 1);
   $tint: nth($props, 2);
 
-  // Define base class
+  // Admonition base class
   .md-typeset .admonition.#{$name} {
     border-color: $tint;
   }
 
-  // Define base class
+  // Admonition title
   .md-typeset .#{$name} > .admonition-title {
     background-color: transparentize($tint, 0.9);
 

src/assets/stylesheets/overrides.scss

@@ -40,5 +40,5 @@
 
 @import "overrides/layout/announce";
 @import "overrides/layout/base";
+@import "overrides/layout/content";
 @import "overrides/layout/hero";
-@import "overrides/layout/sponsor";

src/assets/stylesheets/overrides/_typeset.scss

@@ -27,6 +27,11 @@
 // Typesetted content
 .md-typeset {
 
+  // Insiders color (for links, etc.)
+  .tx-insiders {
+    color: $clr-pink-500;
+  }
+
   // Extension: switch buttons
   .tx-switch button {
     cursor: pointer;

src/assets/stylesheets/overrides/layout/_content.scss

@@ -38,16 +38,15 @@
 // Rules
 // ----------------------------------------------------------------------------
 
-// Sponsor banner
-.tx-sponsor {
+// Content footer
+.tx-content__footer {
   margin-top: px2rem(20px);
   text-align: center;
 
-  // Sponsor link
+  // Link container
   a {
     display: inline-block;
     color: $clr-pink-500;
-    font-variant: all-petite-caps;
     transition:
       transform 250ms cubic-bezier(0.1, 0.7, 0.1, 1),
       color     125ms;

src/overrides/main.html

@@ -74,8 +74,8 @@
 {% block content %}
   {{ super() }}
 
-  <!-- Sponsor banner -->
-  <aside class="tx-sponsor md-typeset">
+  <!-- Content footer -->
+  <footer class="tx-content__footer md-typeset">
     <a href="{{ 'insiders/' | url }}" title="Material for MkDocs Insiders">
       <hr />
       <span class="twemoji">
@@ -89,7 +89,7 @@
       </span>
       <hr />
     </a>
-  </aside>
+  </footer>
 {% endblock %}
 
 <!-- Analytics -->