Updated anouncement bar

docs/plugins/search.md

@@ -9,7 +9,7 @@ and is implemented using [lunr.js][2] which includes stemmers for the English
 language by default, while stemmers for other languages are included with 
 [lunr-languages][3], both of which are integrated with this theme.
 
-!!! tip "Add the [localsearch][4] plugin to support search from `file://`"
+!!! tip "Make search work offline"
 
     While search will not work for the `file://` protocol, as web workers and
     the use of `XMLHTTPRequest` are both blocked by modern browsers for security

material/overrides/home.html

@@ -4,7 +4,7 @@
 {% extends "overrides/main.html" %}
 {% block tabs %}
   {{ super() }}
-  <style>.md-header{position:initial}.md-main__inner{margin:0}.md-content{display:none}.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: white' /></svg>") no-repeat bottom,linear-gradient(to bottom,var(--md-primary-fg-color),hsla(160deg,47%,55%,1) 99%,#fff 99%)}.tx-hero{margin:0 .8rem;color:var(--md-primary-bg-color)}.tx-hero h1{margin-bottom:1rem;color:currentColor;font-weight:700}.tx-hero__content{padding-bottom:6rem}.tx-hero .md-button{margin-top:.5rem;margin-right:.5rem;color:var(--md-primary-bg-color)}.tx-hero .md-button--primary{background-color:var(--md-primary-bg-color);color:hsla(193deg,37%,48%,1);border-color:var(--md-primary-bg-color)}.tx-hero .md-button:focus,.tx-hero .md-button:hover{background-color:var(--md-accent-fg-color);color:var(--md-default-bg-color);border-color:var(--md-accent-fg-color)}@media screen and (min-width:60em){.md-sidebar--secondary{display:none}.tx-hero{display:flex;align-items:stretch;justify-items:space-between}.tx-hero__content{max-width:19rem;margin-top:3.5rem;padding-bottom:14vw}.tx-hero__image{width:38rem;order:1;transform:translateX(4rem)}}@media screen and (min-width:76.25em){.md-sidebar--primary{display:none}.tx-hero__image{transform:translateX(8rem)}}</style>
+  <style>.md-header{position:initial}.md-main__inner{margin:0}.md-content{display:none}.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: white' /></svg>") no-repeat bottom,linear-gradient(to bottom,var(--md-primary-fg-color),hsla(160deg,47%,55%,1) 99%,#fff 99%)}.tx-hero{margin:0 .8rem;color:var(--md-primary-bg-color)}.tx-hero h1{margin-bottom:1rem;color:currentColor;font-weight:700}.tx-hero__content{padding-bottom:6rem}.tx-hero .md-button{margin-top:.5rem;margin-right:.5rem;color:var(--md-primary-bg-color)}.tx-hero .md-button--primary{background-color:var(--md-primary-bg-color);color:hsla(193deg,37%,48%,1);border-color:var(--md-primary-bg-color)}.tx-hero .md-button:focus,.tx-hero .md-button:hover{background-color:var(--md-accent-fg-color);color:var(--md-default-bg-color);border-color:var(--md-accent-fg-color)}@media screen and (max-width:30em){.tx-hero h1{font-size:1.4rem}}@media screen and (min-width:60em){.md-sidebar--secondary{display:none}.tx-hero{display:flex;align-items:stretch;justify-items:space-between}.tx-hero__content{max-width:19rem;margin-top:3.5rem;padding-bottom:14vw}.tx-hero__image{width:38rem;order:1;transform:translateX(4rem)}}@media screen and (min-width:76.25em){.md-sidebar--primary{display:none}.tx-hero__image{transform:translateX(8rem)}}</style>
   <section class="tx-container">
     <div class="md-grid md-typeset">
       <div class="tx-hero">

material/overrides/main.html

@@ -24,5 +24,11 @@
   <meta name="twitter:image" content="{{ image }}">
 {% endblock %}
 {% block announce %}
-  Material for MkDocs 5.0.0rc4
+  <style>.md-announce a{color:currentColor}.md-announce a:hover{color:#40bf79}.md-announce strong{display:inline-block}</style>
+  <a href="https://ginseng.ai/blog/the-cognitive-complexity-of-css/">
+    Check out <strong>squidfunk</strong>'s latest blog post –
+    <strong>
+      The Cognitive Complexity of CSS
+    </strong>
+  </a>
 {% endblock %}

src/overrides/home.html

@@ -96,6 +96,15 @@
       border-color: var(--md-accent-fg-color);
     }
 
+    /* [mobile portrait -]: Adjust headline */
+    @media screen and (max-width: 30em) {
+
+      /* Make main headline smaller */
+      .tx-hero h1 {
+        font-size: 1.4rem;
+      }
+    }
+
     /* [tablet landscape +]: Display content and image next to each other */
     @media screen and (min-width: 60em) {
 

src/overrides/main.html

@@ -55,5 +55,21 @@
 
 <!-- Announcement bar -->
 {% block announce %}
-  Material for MkDocs 5.0.0rc4
+  <style>
+    .md-announce a {
+      color: currentColor;
+    }
+    .md-announce a:hover {
+      color: #40bf79;
+    }
+    .md-announce strong {
+      display: inline-block;
+    }
+  </style>
+  <a href="https://ginseng.ai/blog/the-cognitive-complexity-of-css/">
+    Check out <strong>squidfunk</strong>'s latest blog post –
+    <strong>
+      The Cognitive Complexity of CSS
+    </strong>
+  </a>
 {% endblock %}