New branding for ESPHome (#3926)

_static/browserconfig.xml

@@ -3,7 +3,7 @@
     <msapplication>
         <tile>
             <square150x150logo src="/_static/mstile-150x150.png"/>
-            <TileColor>#dfdfdf</TileColor>
+            <TileColor>#18bcf2</TileColor>
         </tile>
     </msapplication>
 </browserconfig>

_static/custom.css

@@ -282,6 +282,27 @@ div.body p, div.body dd, div.body li, div.body blockquote {
     display: none;
 }
 
+/* New branding changes */
+
+div.body h1, div.body h2, div.body h3, div.body h4, div.body h5, div.body h6, div.sphinxsidebar h3, div.sphinxsidebar h4, div.admonition p.admonition-title {
+  font-family: Figtree, system, -apple-system, ".SFNSText-Regular", "San Francisco", "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", sans-serif;
+  font-weight: 600;
+}
+
+div.body h1 {
+  font-size: 2.5rem;
+}
+
+body {
+  font-family: "Instrument Sans", system, -apple-system, ".SFNSText-Regular", "San Francisco", "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", sans-serif;
+  line-height: 1.5;
+  letter-spacing: 0.01rem;
+}
+
+div.body p, div.body dd, div.body li {
+  line-height: 1.6;
+}
+
 @media screen and (max-width: 875px) {
   /* hide search result thumbnails on mobile */
   .pagefind-modular-list-thumb {

_static/safari-pinned-tab.svg

@@ -1 +1,10 @@
-<svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="1066.667" height="1066.667" viewBox="0 0 800 800"><path d="M266.5 149.6c-12.4 3.1-19.4 8.1-24.5 17.5l-3.5 6.4-.3 17.6-.4 17.6-4.3.6c-6.1.9-11.1 4.2-14.3 9.6l-2.7 4.6-.3 160.2L216 544H94v-15h49c34.4 0 49.6-.3 51.4-1.1 5-2.3 5.7-6.1 5.4-27.4l-.3-19.5-2.8-2.7-2.7-2.8-50-.3-50-.3V460h99l3.2-2.9 3.3-2.9V412l-2.8-2.7-2.7-2.8-50-.3-50-.3v-14.8l50-.3 50-.3 2.7-2.8 2.8-2.7v-42.2l-3.3-2.9-3.2-2.9H94v-99.8l-2.6-3.1c-3.6-4.3-9.3-4.4-13.5-.2l-2.9 2.9v113.4l2.9 2.9 2.9 2.9H180v16H80.8l-2.9 2.9-2.9 2.9v41.4l2.9 2.9 2.9 2.9H180v16H80.8l-2.9 2.9-2.9 2.9v41l2.6 3.1 2.6 3.1H180v16H81.1l-2.8 2.4-2.8 2.4-.3 21-.3 21 3 3.4 2.9 3.3 67.5.3 67.5.2.7 4.3c.4 2.3 1.3 5.3 2 6.7 2.8 5.4 10.1 10 15.9 10h3.5l.3 19.7c.3 19 .4 20 3 25.5 5.4 11.6 15.2 18.1 28.3 18.6 9.8.5 17.1-1.9 23.7-7.7 9.3-8.2 11.8-17 11.8-41.4V585h12v15.3c0 8.4.5 18 1.1 21.3 2.2 11.9 9.9 21.4 20.8 25.5 7.8 2.9 19.4 2.4 26.6-1.3 6.4-3.4 12.8-10 15.7-16.3 2.1-4.6 2.3-6.7 2.6-24.8l.4-19.7h12.6l.4 19.7c.3 17.7.6 20.3 2.5 24.5 2.9 6.3 9.7 13.4 15.8 16.6 7.2 3.7 18.8 4.2 26.6 1.3 7.9-3 14.1-8.8 18.1-16.9l3.3-6.7.3-19.3.4-19.3 6.1.3 6.2.3.5 20c.5 19.5.6 20.1 3.3 25.3 3.5 6.7 9 12.2 15.3 15.3 4.1 2 6.4 2.4 14.4 2.4 8.1 0 10.3-.4 14.5-2.4 6.3-3.2 12.4-9.3 15.6-15.6 2.2-4.7 2.4-6.3 2.9-25l.5-20 6.1-.3 6.2-.3.3 19.3.4 19.3 3.3 6.7c4 8.1 10.2 13.9 18.1 16.9 7.8 2.9 19.4 2.4 26.6-1.3 6.1-3.2 12.9-10.3 15.8-16.6 2-4.2 2.2-6.7 2.5-24.5l.4-19.7h12.6l.4 19.7c.3 22.6 1.3 26.1 9.1 34.1 6.4 6.7 12.7 9.5 22.2 10 9.8.5 17-1.9 23.7-7.7 9.2-8.2 11.8-17 11.8-41.2v-14.6l4.5-.5c5.4-.7 10.2-3.7 13.6-8.7l2.4-3.6.3-173c.2-121 0-174.1-.8-176.7-2.1-7.2-10.2-13.7-17.1-13.8h-2.6l-.5-16.9c-.4-16.6-.5-17-3.6-23.4-5.9-12-16.9-19-29.6-19-13.6 0-24.8 7-30.4 19.1-2.5 5.4-2.7 6.7-3 22.9l-.4 17.3H623v-15.3c0-17.2-1.1-22.4-6.1-30.1-6.5-9.7-20.5-15.8-31.9-13.8-11.9 2.1-20.7 8.9-25.7 19.7-2.6 5.6-2.7 7-3.1 22.7l-.4 16.8H543v-16.5c0-14.1-.3-17.2-2-21.9-2.9-7.6-8.8-13.9-16.6-17.7-5.7-2.8-7.6-3.3-14.4-3.3-6.8 0-8.7.5-14.4 3.3-7.1 3.5-12.2 8.6-15.8 16-2.1 4.2-2.3 6.3-2.6 22.3l-.4 17.8h-12.6l-.4-16.8c-.6-19.7-1.7-23.7-8.8-31.5-8.6-9.5-20.5-13.2-32.1-10.2-10.5 2.6-18.2 9-22.8 18.5-2.4 5.1-2.6 6.6-2.9 22.7l-.4 17.3H384v-15.3c0-17.2-1.1-22.4-6.1-30.1-6.5-9.7-20.5-15.8-31.9-13.8-11.9 2.1-20.7 9-25.8 20.1-2.4 5.1-2.6 7-3 22.3l-.5 16.8H305v-12.3c0-21.3-2.8-30.7-11.3-38.4-7-6.2-20-10.4-27.2-8.7zm11.5 20.9c1.5.8 3.8 3 4.9 4.8 1.9 3.1 2.1 4.9 2.1 18.6V209h-28v-13.9c0-7.7.5-15.2 1.1-16.8 1.3-3.4 4.7-7.2 7.4-8.3 3.2-1.4 9.4-1.1 12.5.5zm81.6 1.6c4.6 4.2 5.4 7.6 5.4 22.9v14h-28v-15c0-16.9.8-19.6 6.3-23.1 4.5-2.8 12.7-2.2 16.3 1.2zm77.5-1.6c6 3.1 6.9 6.3 6.9 23.2V209h-28.2l.4-15.3c.2-12.7.6-15.8 2.1-18 4-6.1 12.4-8.4 18.8-5.2zm80.4.5c5.5 3.4 6.5 6.9 6.5 23.4V209h-28v-14.6c0-13 .2-15 2.1-18.3 1.1-2.1 3.3-4.5 4.7-5.4 3.7-2.3 10.7-2.2 14.7.3zm81.5 1.5c4.1 4 5 7.9 5 23.2V209h-28v-15c0-16.9.8-19.6 6.3-23.1 4.8-3 12.7-2.2 16.7 1.6zm77.1-2c6 3.1 6.9 6.3 6.9 23.2V209h-28v-13.9c0-7.7.5-15.2 1.1-16.8 1.3-3.4 4.7-7.2 7.4-8.3 3.3-1.4 9.4-1.1 12.6.5zm26.7 226.7l-.3 166.3-232.2.3-232.3.2V231h465l-.2 166.2zM285 602.3c0 14.8-.3 17.7-1.8 20.6-3.7 6.8-12.9 9.1-19.3 4.8-6.1-4-6.9-7.1-6.9-26V585h28v17.3zm79.5.7c0 19.5-.5 21.2-6.8 25-6.4 3.9-15.4 1.5-18.9-5.1-1.5-2.9-1.8-5.8-1.8-20.7v-17.3l13.8.3 13.7.3V603zm79.5-.3c0 15.7-.2 18.2-1.9 20.9-3.7 6.1-13.4 8.1-19.6 4-5-3.3-6-6.8-6.3-23.9-.2-8.7-.1-16.4.2-17.2.4-1.2 3.2-1.5 14.1-1.5H444v17.7zm80-.5c0 15.5-.2 17.6-2 20.6-4.3 7-12.8 9.2-19.1 4.9-6.1-4-6.9-7.1-6.9-26V585h28v17.2zm79.5.8c0 19.5-.5 21.2-6.8 25-6.1 3.8-14.9 1.7-18.7-4.5-1.8-2.9-2-4.9-2-20.9v-17.7l13.8.3 13.7.3V603zm79.5-.7c0 14.8-.3 17.7-1.8 20.6-3.7 6.8-12.9 9.1-19.3 4.8-6-4-6.9-7.1-6.9-25.3 0-8.8.3-16.4.7-16.7.3-.4 6.6-.7 14-.7H683v17.3z"/><path d="M413.7 359.8c-39.5 39.5-53.7 54.3-53.7 56 0 3.5 2.8 8.1 5.3 8.7 1.2.3 6.3.6 11.2.8l9 .2.5 32.3.5 32.4 2.4 1.9c2.2 1.8 5.1 1.9 82.1 1.9s79.9-.1 82.1-1.9l2.4-1.9.5-32.4.5-32.3 9-.2c11.8-.4 13.2-.8 15-4.3 2.8-5.4 2.1-6.6-11.5-20.5l-13-13.2v-22.4c-.1-16-.4-22.9-1.3-24-2.4-3.1-5.6-3.9-15.7-3.9-9.9 0-10.2.1-13.1 2.9-2.4 2.5-2.9 3.7-2.9 8 0 2.8-.3 5.1-.8 5.1-.4 0-11.3-10.6-24.2-23.5-21.8-21.8-23.7-23.5-27-23.5-3.3 0-6.6 3.1-57.3 53.8z"/></svg>
+<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2_408)">
+<path d="M372.68 238.9L267.32 133.52C261.1 127.3 250.92 127.3 244.7 133.52L139.32 238.9C133.1 245.12 128 257.42 128 266.22V362.22C128 371.02 135.2 378.22 144 378.22H206.94V218.92C206.94 215.38 209.8 212.52 213.34 212.52H298.68C302.22 212.52 305.08 215.38 305.08 218.92V244.52C305.08 248.06 302.22 250.92 298.68 250.92H245.34V263.72H298.68C302.22 263.72 305.08 266.58 305.08 270.12V295.72C305.08 299.26 302.22 302.12 298.68 302.12H245.34V314.92H298.68C302.22 314.92 305.08 317.78 305.08 321.32V346.92C305.08 350.46 302.22 353.32 298.68 353.32H238.94C235.4 353.32 232.54 350.46 232.54 346.92C232.54 343.38 235.4 340.52 238.94 340.52H292.28V327.72H238.94C235.4 327.72 232.54 324.86 232.54 321.32V295.72C232.54 292.18 235.4 289.32 238.94 289.32H292.28V276.52H238.94C235.4 276.52 232.54 273.66 232.54 270.12V244.52C232.54 240.98 235.4 238.12 238.94 238.12H292.28V225.32H219.74V378.22H368C376.8 378.22 384 371.02 384 362.22V266.22C384 257.42 378.9 245.12 372.68 238.9Z" fill="#F2F4F9"/>
+</g>
+<defs>
+<clipPath id="clip0_2_408">
+<rect width="256" height="256" fill="white" transform="translate(128 128.62)"/>
+</clipPath>
+</defs>
+</svg>

_static/site.webmanifest

@@ -33,8 +33,8 @@
             "type": "image/png"
         }
     ],
-    "theme_color": "#dfdfdf",
-    "background_color": "#dfdfdf",
+    "theme_color": "#18bcf2",
+    "background_color": "#18bcf2",
     "start_url": "https://esphome.io/",
     "display": "standalone"
 }

_templates/layout.html

@@ -16,13 +16,13 @@
   <link rel="icon" type="image/png" sizes="32x32" href="/_static/favicon-32x32.png">
   <link rel="icon" type="image/png" sizes="16x16" href="/_static/favicon-16x16.png">
   <link rel="manifest" href="/_static/site.webmanifest">
-  <link rel="mask-icon" href="/_static/safari-pinned-tab.svg" color="#646464">
+  <link rel="mask-icon" href="/_static/safari-pinned-tab.svg" color="#18bcf2">
   <link rel="me" href="https://fosstodon.org/@esphome">
   <meta name="apple-mobile-web-app-title" content="ESPHome">
   <meta name="application-name" content="ESPHome">
-  <meta name="msapplication-TileColor" content="#dfdfdf">
+  <meta name="msapplication-TileColor" content="#18bcf2">
   <meta name="msapplication-config" content="/_static/browserconfig.xml">
-  <meta name="theme-color" content="#dfdfdf">
+  <meta name="theme-color" content="#18bcf2">
   <meta name="HandheldFriendly" content="True">
   <meta name="MobileOptimized" content="320">
   <meta property="og:site_name" content="ESPHome">