Blue ESPHome logo (#3932)

Co-authored-by: H. Árkosi Róbert <robreg@zsurob.hu>

_static/custom.css

@@ -303,6 +303,10 @@ div.body p, div.body dd, div.body li {
   line-height: 1.6;
 }
 
+img.logo {
+  content: url("/_static/logo-text-on-light.svg");
+}
+
 @media screen and (max-width: 875px) {
   /* hide search result thumbnails on mobile */
   .pagefind-modular-list-thumb {
@@ -338,7 +342,11 @@ div.body p, div.body dd, div.body li {
     background-color: #212121;
   }
 
-  img.dark-invert, img.logo {
+  img.logo {
+    content: url("/_static/logo-text-on-dark.svg");
+  }
+
+  img.dark-invert {
     filter: invert(1);
   }
 

_templates/layout.html

@@ -5,6 +5,9 @@
 {% endblock %}
 
 {%- block extrahead %}
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&family=Instrument+Sans:ital,wght@0,400..700;1,400..700&display=swap" rel="stylesheet">
   <link href="/pagefind/pagefind-modular-ui.css" rel="stylesheet">
   <link rel="stylesheet" href="{{ pathto('_static/custom.css', 1) }}?hash={{ custom_css_hash }}" type="text/css" />
   <link rel="apple-touch-icon" sizes="180x180" href="/_static/apple-touch-icon.png">

index.rst

@@ -10,7 +10,7 @@
     :image: logo.svg
 
 .. image:: /images/logo-text.svg
-    :class: dark-invert
+    :class: logo
 
 ESPHome is a system to control your microcontrollers by simple yet powerful configuration files and control them remotely through Home Automation systems.