From 1f66ab43f9947be9ca9be384fc87a1a56bc4b685 Mon Sep 17 00:00:00 2001
From: squidfunk <martin.donath@squidfunk.com>
Date: Sun, 5 Apr 2020 14:55:26 +0200
Subject: [PATCH] Fixed announcement bar styles

---
 material/overrides/main.html |  6 +++---
 src/overrides/main.html      | 19 ++++++++++++-------
 2 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/material/overrides/main.html b/material/overrides/main.html
index 8ab169333..a6d2b3293 100644
--- a/material/overrides/main.html
+++ b/material/overrides/main.html
@@ -14,8 +14,8 @@
   <meta property="og:url" content="{{ page.canonical_url }}">
   <meta property="og:image" content="{{ image }}">
   <meta property="og:image:type" content="image/png">
-  <meta property="og:image:width" content="1080">
-  <meta property="og:image:height" content="568">
+  <meta property="og:image:width" content="1200">
+  <meta property="og:image:height" content="630">
   <meta name="twitter:card" content="summary_large_image">
   <meta name="twitter:site" content="@squidfunk">
   <meta name="twitter:creator" content="@squidfunk">
@@ -24,7 +24,7 @@
   <meta name="twitter:image" content="{{ image }}">
 {% endblock %}
 {% block announce %}
-  <style>.md-announce a{color:currentColor}.md-announce a:hover{color:#40bf79}.md-announce strong{display:inline-block}</style>
+  <style>.md-announce{transition:background-color 125ms}.md-announce:focus-within{background-color:var(--md-accent-fg-color)}.md-announce a,.md-announce a:focus,.md-announce a:hover{color:currentColor}.md-announce strong{white-space:nowrap}</style>
   <a href="https://ginseng.ai/blog/the-cognitive-complexity-of-css/">
     Check out <strong>squidfunk</strong>'s latest blog post –
     <strong>
diff --git a/src/overrides/main.html b/src/overrides/main.html
index e16c227f0..914cba171 100644
--- a/src/overrides/main.html
+++ b/src/overrides/main.html
@@ -41,8 +41,8 @@
   <meta property="og:url" content="{{ page.canonical_url }}" />
   <meta property="og:image" content="{{ image }}" />
   <meta property="og:image:type" content="image/png" />
-  <meta property="og:image:width" content="1080" />
-  <meta property="og:image:height" content="568" />
+  <meta property="og:image:width" content="1200" />
+  <meta property="og:image:height" content="630" />
 
   <!-- Twitter meta tags -->
   <meta name="twitter:card" content="summary_large_image" />
@@ -56,14 +56,19 @@
 <!-- Announcement bar -->
 {% block announce %}
   <style>
-    .md-announce a {
+    .md-announce {
+      transition: background-color 125ms;
+    }
+    .md-announce:focus-within {
+      background-color: var(--md-accent-fg-color);
+    }
+    .md-announce a,
+    .md-announce a:focus,
+    .md-announce a:hover {
       color: currentColor;
     }
-    .md-announce a:hover {
-      color: #40bf79;
-    }
     .md-announce strong {
-      display: inline-block;
+      white-space: nowrap;
     }
   </style>
   <a href="https://ginseng.ai/blog/the-cognitive-complexity-of-css/">