Restyle top and guide section (#1242)

* Restyle top and guide section

* Remove 1 of 3 ESPhome entries

* Remove "With"

* Add hero

* Update index.rst

Co-authored-by: Paulus Schoutsen <paulus@home-assistant.io>

* Update hero

* column-reverse for mobile

Co-authored-by: Paulus Schoutsen <paulus@home-assistant.io>
This commit is contained in:
Joakim Sørensen 2021-06-16 02:24:40 +02:00 committed by GitHub
parent 7a12488872
commit 9802264e97
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 141 additions and 35 deletions

View File

@ -90,6 +90,12 @@ img.index-shield {
margin-top: 10px;
}
div.index-shields {
display: flex;
justify-content: space-around;
margin: 0 64px;
}
.supporters-row {
display: flex;
}
@ -111,3 +117,54 @@ img.index-shield {
margin-left: auto;
margin-right: auto;
}
.guide-container {
margin: 32px 0;
display: flex;
justify-content: space-evenly;
}
.guide-card {
color: #004B6B;
display: block;
height: auto;
width: 300px;
background-color: #f3f6f6;
border-radius: 8px;
box-shadow: -10px 10px 32px -12px #000;
padding-bottom: 8px;
}
.guide-card:not(:first-child) {
margin-left: -40px;
}
.guide-card-title {
font-weight: 300;
margin: 16px !important;
}
.guide-code {
padding: 8px 16px;
margin: 8px;
color: black;
white-space: pre-line;
}
@media screen and (max-width: 870px) {
.guide-container {
flex-direction: column-reverse;
}
.guide-card {
width: 100%;
margin: 8px 0;
}
.guide-card:not(:first-child) {
margin-left: 0;
}
.guide-card ul {
margin-left: 32px;
}
}

7
_templates/contact.html Normal file
View File

@ -0,0 +1,7 @@
<hr />
<ul>
<li><a href="https://discord.gg/KhAMKrd" target="_blank">Join the community</a></li>
<li><a href="https://twitter.com/esphome_" target="_blank">Folow us on Twitter</a></li>
<li><a href="https://github.com/esphome/esphome" target="_blank">Source Code</a></li>
</ul>

View File

@ -147,6 +147,7 @@ html_sidebars = {
# 'about.html',
"searchbox.html",
"localtoc.html",
"contact.html"
]
}

BIN
images/hero.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 124 KiB

View File

@ -4,13 +4,9 @@ Images
This is a dummy file to include images in the sphinx output
that will only be used in raw HTML and thus not auto-included.
.. image:: shield-discord.svg
.. image:: shield-github.svg
.. image:: shield-donate.svg
.. image:: shield-twitter.svg
.. image:: hero.png
.. image:: logo.svg

View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 209 43"><g fill="none" fill-rule="evenodd"><path d="M10 0h189c5.54 0 10 4.46 10 10v23c0 5.54-4.46 10-10 10H10C4.46 43 0 38.54 0 33V10C0 4.46 4.46 0 10 0z" fill="#000"/><path d="M179.5 9.326c-8.162 0-13.887 3.244-13.887 3.244 3.137-2.596 8.618-4.09 8.618-4.09l-.517-.48c-5.147.085-9.807 3.385-9.807 3.385-5.238 10.126-4.903 18.87-4.903 18.87 4.264 5.106 10.598 4.74 10.598 4.74l2.163-2.54c-3.807-.761-6.213-3.892-6.213-3.892s5.725 3.61 13.948 3.61 13.948-3.61 13.948-3.61-2.406 3.131-6.213 3.893l2.163 2.538s6.334.367 10.598-4.739c0 0 .335-8.744-4.903-18.87 0 0-4.66-3.3-9.807-3.385l-.517.48s5.481 1.494 8.618 4.09c0 0-5.725-3.244-13.887-3.244z" fill="#fff" fill-rule="nonzero"/><path d="M173.485 20c1.952 0 3.545 1.57 3.515 3.5a3.52 3.52 0 0 1-3.515 3.5c-1.923 0-3.485-1.598-3.485-3.5 0-1.93 1.532-3.5 3.485-3.5zM185.485 20A3.503 3.503 0 0 1 189 23.5a3.52 3.52 0 0 1-3.515 3.5c-1.923 0-3.485-1.598-3.485-3.5 0-1.93 1.532-3.5 3.485-3.5z" fill="#000" fill-rule="nonzero"/><g aria-label="Discord" fill="#fff"><path d="M9.401 8.092h9.947q1.777 0 3.4.461 1.641.462 3.043 1.3 1.418.836 2.563 2.016 1.162 1.162 1.982 2.597.82 1.436 1.265 3.094.444 1.657.444 3.452 0 1.794-.444 3.452t-1.265 3.11q-.82 1.436-1.982 2.632-1.145 1.18-2.563 2.034-1.402.837-3.042 1.299-1.624.461-3.401.461H9.4v-4.683h2.068V12.792H9.401zm7.742 4.7v16.525h2.17q1.385 0 2.615-.649 1.23-.65 2.136-1.76.906-1.128 1.436-2.632.53-1.521.53-3.264 0-1.726-.53-3.23t-1.436-2.615q-.905-1.11-2.136-1.743-1.23-.632-2.615-.632zM34.455 16.295h7.947v13.022h2.46V34H34.456v-4.683h2.666v-8.34h-2.666zm2.393-5.708q0-.632.222-1.18.24-.563.65-.973.41-.41.956-.65.564-.24 1.214-.24.615 0 1.162.24.547.24.957.65.41.41.65.974.238.547.238 1.179t-.239 1.196q-.24.547-.65.957-.41.41-.956.65-.547.239-1.162.239-.65 0-1.214-.24-.547-.239-.957-.649-.41-.41-.65-.957-.221-.564-.221-1.196zM59.287 21.712q0-.41-.274-.786-.256-.376-.769-.65-.513-.29-1.265-.46-.734-.171-1.674-.171-.36 0-.77.068-.41.051-.768.205-.342.154-.581.427-.223.257-.223.667 0 .205.052.393.068.188.239.359.17.17.461.324.308.137.786.223l3.213.632q1.744.342 2.923.854 1.179.513 1.897 1.197.717.683 1.025 1.52.325.838.325 1.812 0 1.521-.718 2.666-.7 1.145-1.863 1.914-1.145.752-2.597 1.128-1.436.393-2.906.393-.957 0-1.743-.12-.769-.119-1.401-.324-.615-.205-1.111-.479-.479-.29-.889-.632h-3.093v-4.75h4.836v.102q.018.495.308.871.29.36.752.615.479.257 1.077.394.598.12 1.264.12 1.538 0 2.24-.394.7-.41.7-1.042 0-.496-.342-.838-.342-.359-1.213-.564l-3.282-.7q-3.093-.599-4.665-1.983-1.572-1.401-1.572-3.589 0-1.281.598-2.324.598-1.06 1.623-1.794 1.026-.752 2.393-1.163 1.384-.41 2.956-.41 1.077 0 1.914.137.838.12 1.504.325.667.205 1.162.495.513.274.906.581h2.974v4.751zM80.12 22.413q-.736-.923-1.641-1.384-.906-.479-2.137-.41-.99-.069-1.811.273-.803.342-1.402.957-.58.615-.905 1.47-.325.837-.325 1.897 0 .94.342 1.777.342.838.923 1.453.598.598 1.4.94.821.342 1.778.41.804-.068 1.453-.325.666-.273 1.18-.683.512-.428.87-.94.377-.53.582-.992l4.7 1.3q-.291 1.025-1.009 2.136-.7 1.11-1.846 2.033-1.127.906-2.7 1.504-1.555.598-3.554.598-2.034 0-3.743-.735-1.71-.752-2.94-2.033-1.23-1.282-1.93-3.008-.684-1.726-.684-3.709 0-1.965.7-3.64.718-1.692 1.966-2.94 1.247-1.264 2.956-1.965 1.726-.7 3.743-.632 1.435-.068 2.786.325 1.35.393 2.563 1.179h3.4v5.144zM86.887 25.08q0-1.932.7-3.624.701-1.692 1.949-2.956 1.247-1.265 2.973-2 1.726-.735 3.794-.735t3.794.735q1.743.735 2.99 2 1.248 1.264 1.932 2.956.7 1.692.7 3.623 0 1.931-.683 3.64-.666 1.692-1.914 2.974-1.23 1.265-2.974 2-1.726.734-3.845.734-2.136 0-3.88-.735-1.725-.734-2.956-2-1.23-1.264-1.914-2.956-.666-1.709-.666-3.657zm5.11 0q0 1.007.341 1.862.342.837.923 1.453.598.615 1.367.957.787.341 1.675.341.906 0 1.675-.324.786-.342 1.35-.957.581-.616.906-1.453.325-.855.325-1.88 0-1.06-.325-1.914-.325-.854-.906-1.453-.564-.598-1.35-.905-.769-.325-1.675-.308-.888-.017-1.675.308-.769.307-1.367.905-.58.599-.923 1.453-.341.855-.341 1.914zM124.348 22.738h-4.803v-1.829q-.7 0-1.281.103-.581.085-1.026.307-.427.223-.735.616-.29.393-.41.974v6.408h3.606V34h-11.553v-4.683h2.65v-8.34h-2.615v-4.682h7.878v1.247q.752-.598 1.692-.922.94-.325 2.05-.325 1.129 0 2.325.017 1.196.017 2.222.017zM137.763 7.408h7.742v21.91h3.452V34h-8.716v-.684q-.923.479-1.897.752-.957.274-1.948.274-2.034 0-3.743-.718-1.692-.735-2.922-2-1.213-1.264-1.897-2.956-.684-1.709-.684-3.657t.667-3.623q.683-1.692 1.88-2.94 1.213-1.247 2.888-1.965 1.692-.718 3.708-.718 1.111 0 2.085.222.975.205 1.863.598v-4.494h-2.478zm-1.076 22.217q1.127-.034 2.033-.581.923-.547 1.521-1.436v-5.212q-.598-.906-1.555-1.401-.94-.513-2-.496-.888-.017-1.674.308-.77.324-1.367.922-.582.599-.923 1.436-.342.837-.342 1.897 0 1.042.342 1.897.341.837.923 1.436.598.58 1.367.888.786.308 1.675.342z"/></g></g></svg>

Before

Width:  |  Height:  |  Size: 4.6 KiB

View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192 43"><g fill="none" fill-rule="evenodd"><path d="M10 0h172c5.54 0 10 4.46 10 10v23c0 5.54-4.46 10-10 10H10C4.46 43 0 38.54 0 33V10C0 4.46 4.46 0 10 0z" fill="#000"/><g aria-label="GitHub" fill="#fff"><path d="M26.713 35v-4.443q-1.06 1.862-2.068 2.734-1.008.872-2.29 1.401-1.265.53-3.4.513-1.06-.017-2.12-.24-1.06-.238-2.05-.649-.992-.427-1.95-1.008-.939-.598-1.708-1.367-1.897-1.914-2.957-4.426-1.042-2.53-1.042-5.503 0-1.829.444-3.538.445-1.709 1.248-3.196.803-1.486 1.931-2.7 1.145-1.23 2.53-2.102 1.4-.872 3.007-1.35 1.607-.479 3.367-.479 2.016 0 3.503.547 1.487.53 3.196 2h3.828v5.776h-5.28q-.787-1.213-1.487-1.76-.684-.547-1.504-.906-.804-.359-2.256-.359-1.436 0-2.666.65t-2.136 1.76q-.89 1.094-1.402 2.598-.513 1.486-.513 3.059 0 1.555.462 2.956.461 1.402 1.401 2.53.94 1.11 2.188 1.709 1.247.598 2.666.598 1.811 0 3.161-1.06t1.949-2.888h-4.94v-4.683h11.998V35zM35.326 17.295h7.947v13.022h2.46V35H35.327v-4.683h2.666v-8.34h-2.666zm2.393-5.708q0-.632.222-1.18.24-.563.65-.973.41-.41.956-.65.564-.24 1.214-.24.615 0 1.162.24.547.24.957.65.41.41.65.974.239.547.239 1.179t-.24 1.196q-.239.547-.65.957-.41.41-.956.65-.547.239-1.162.239-.65 0-1.214-.24-.547-.239-.957-.649-.41-.41-.65-.957-.221-.564-.221-1.196zM55.543 17.295h3.538v4.477H55.51l-.034 7.486q0 .65.103 1.06.102.392.29.632.205.239.479.324.273.086.632.086.65 0 1.145-.12.496-.136.991-.307l.735 3.298q-.871.547-1.948.872-1.06.324-2.53.324-1.042 0-1.999-.359-.94-.359-1.658-1.076-.717-.735-1.145-1.829-.427-1.094-.41-2.546l.051-7.845h-2.546v-4.477h2.564l.034-4.238 5.315-2.53zM80.443 9.092h11.109v4.7h-2.735v16.525h2.735V35H80.443v-4.683h2.7v-6.63H71.455v6.63h2.734V35h-11.09v-4.683h2.682V13.792h-2.683v-4.7h11.091v4.7h-2.734v5.383h11.69v-5.383h-2.7zM105.856 17.295h8.374v13.022h2.136V35h-7.502v-1.504q-.906.82-2.12 1.265-1.213.444-2.802.444-1.47 0-2.769-.461-1.298-.462-2.273-1.385-.957-.94-1.52-2.34-.547-1.402-.547-3.3v-5.741h-2.308v-4.683h7.828V27.72q0 1.777.905 2.666.906.871 2.359.871 1.025 0 1.862-.632.838-.632 1.214-1.709v-6.938h-2.837zM118.126 8.408h7.725v9.28q.923-.444 1.897-.684.974-.239 2-.239 1.965 0 3.64.735 1.674.735 2.888 2 1.213 1.264 1.897 2.956.7 1.692.7 3.589 0 1.914-.683 3.606-.667 1.692-1.88 2.956-1.213 1.248-2.888 1.983-1.675.718-3.674.718-1.077 0-2.051-.205-.974-.206-1.846-.582V35h-5.247V13.09h-2.478zm11.263 13.074q-1.128 0-2.034.513-.889.512-1.504 1.47v5.297q.547.82 1.453 1.333.923.496 2.05.496.872 0 1.658-.308.786-.325 1.367-.906.599-.598.94-1.418.342-.837.342-1.88 0-1.06-.342-1.914-.341-.854-.923-1.453-.58-.598-1.367-.905-.769-.325-1.64-.325z"/></g><path d="M165.5 4C155.283 4 147 11.8 147 21.422c0 7.7 5.31 14.234 12.654 16.551.925.14 1.221-.4 1.221-.871v-2.944c-5.125 1.045-6.216-2.335-6.216-2.335-.851-2.02-2.054-2.561-2.054-2.561-1.683-1.08.13-1.045.13-1.045 1.85.122 2.83 1.794 2.83 1.794 1.61 2.648 4.33 1.864 5.384 1.446.166-1.132.647-1.899 1.165-2.334-4.107-.436-8.417-1.934-8.417-8.572 0-1.934.703-3.484 1.905-4.721-.185-.436-.832-2.248.185-4.6 0 0 1.554-.47 5.088 1.777a18.446 18.446 0 0 1 4.625-.575c1.573 0 3.163.192 4.625.575 3.534-2.247 5.088-1.777 5.088-1.777 1.017 2.352.37 4.164.185 4.6 1.202 1.237 1.905 2.787 1.905 4.721 0 6.655-4.329 8.119-8.454 8.554.666.54 1.276 1.603 1.276 3.223v4.774c0 .47.296 1.028 1.24.871 7.344-2.335 12.635-8.85 12.635-16.55 0-4.622-1.95-9.053-5.419-12.32C175.112 5.836 170.407 4 165.5 4z" fill="#fff" fill-rule="nonzero"/></g></svg>

Before

Width:  |  Height:  |  Size: 3.4 KiB

View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 202 43"><g fill="none" fill-rule="evenodd"><path d="M10 0h182c5.54 0 10 4.46 10 10v23c0 5.54-4.46 10-10 10H10C4.46 43 0 38.54 0 33V10C0 4.46 4.46 0 10 0z" fill="#000"/><path d="M195 11.294a19.31 19.31 0 0 1-4.821 1.137c1.724-.873 3.057-2.257 3.684-3.92-1.626.823-3.43 1.4-5.33 1.729-1.549-1.416-3.724-2.24-6.194-2.24-4.605 0-8.368 3.162-8.368 7.066 0 .56.078 1.103.215 1.614-6.977-.296-13.19-3.113-17.325-7.379a6.163 6.163 0 0 0-1.136 3.541c0 2.454 1.47 4.629 3.743 5.864-1.392 0-2.685-.33-3.822-.824v.05c0 3.426 2.9 6.292 6.742 6.934a9.755 9.755 0 0 1-3.782.115c1.058 2.784 4.135 4.859 7.839 4.908-2.861 1.911-6.487 3.031-10.446 3.031-.666 0-1.333-.033-1.999-.099 3.724 2.01 8.153 3.179 12.896 3.179 15.443 0 23.93-10.772 23.93-20.11 0-.314 0-.61-.02-.923A15.58 15.58 0 0 0 195 11.294z" fill="#fff" fill-rule="nonzero"/><g aria-label="Twitter" fill="#fff"><path d="M14.375 29.317h2.683V12.621h-3.145v3.35H8.342V8.09h23.567v7.88h-5.606v-3.35h-3.572v16.696h2.735V34H14.375zM33.173 16.295h9.246v4.683h-2l1.88 6.306 3.64-10.99h5.008l3.674 11.554 2.256-6.87H54.98v-4.683h9.246v4.683H61.85l-4.734 13.09h-5.11l-3.708-11.296-3.777 11.296h-4.973l-4.392-13.09h-1.983zM66.31 16.295h7.947v13.022h2.461V34H66.311v-4.683h2.666v-8.34H66.31zm2.393-5.708q0-.632.222-1.18.24-.563.65-.973.41-.41.957-.65.564-.24 1.213-.24.615 0 1.162.24.547.24.957.65.41.41.65.974.239.547.239 1.179t-.24 1.196q-.239.547-.649.957-.41.41-.957.65-.547.239-1.162.239-.65 0-1.213-.24-.547-.239-.957-.649-.41-.41-.65-.957-.222-.564-.222-1.196zM86.528 16.295h3.537v4.477h-3.571l-.035 7.486q0 .65.103 1.06.103.392.29.632.206.239.48.324.272.086.631.086.65 0 1.145-.12.496-.136.992-.307l.734 3.298q-.871.547-1.948.872-1.06.324-2.53.324-1.042 0-1.999-.359-.94-.359-1.657-1.076-.718-.735-1.145-1.829-.428-1.094-.41-2.546l.05-7.845H78.65v-4.477h2.564l.034-4.238 5.315-2.53zM100.2 16.295h3.537v4.477h-3.571l-.035 7.486q0 .65.103 1.06.102.392.29.632.205.239.479.324.273.086.632.086.65 0 1.145-.12.496-.136.991-.307l.735 3.298q-.871.547-1.948.872-1.06.324-2.53.324-1.042 0-1.999-.359-.94-.359-1.657-1.076-.718-.735-1.145-1.829-.428-1.094-.41-2.546l.05-7.845h-2.546v-4.477h2.564l.034-4.238 5.315-2.53zM111.787 26.258l.05.53q.189.77.633 1.35.462.581 1.077.974t1.367.598q.752.188 1.521.188.77 0 1.453-.085.7-.103 1.35-.256.65-.171 1.264-.376.616-.223 1.248-.462l1.88 3.504q-.974.598-1.795 1.025-.803.41-1.623.684-.82.273-1.743.393-.923.136-2.154.136-2.307 0-4.101-.752-1.795-.769-3.025-2.067-1.213-1.3-1.863-3.042-.632-1.744-.632-3.692 0-1.948.666-3.657.684-1.709 1.914-2.974 1.23-1.281 2.94-2.016 1.709-.735 3.794-.735t3.691.7q1.624.684 2.735 1.915 1.11 1.213 1.709 2.87.598 1.641.649 3.538.051.428.051.855.017.41-.017.854zm4.084-6.46q-.957 0-1.64.24-.667.222-1.128.632-.462.393-.735.906-.274.512-.428 1.076h7.4q-.12-.58-.341-1.093-.223-.513-.616-.906t-1.008-.615q-.598-.24-1.504-.24zM143.557 22.738h-4.803v-1.829q-.7 0-1.281.103-.581.085-1.026.307-.427.223-.735.616-.29.393-.41.974v6.408h3.606V34h-11.553v-4.683h2.65v-8.34h-2.615v-4.682h7.878v1.247q.752-.598 1.692-.922.94-.325 2.05-.325 1.129 0 2.325.017 1.196.017 2.222.017z"/></g></g></svg>

Before

Width:  |  Height:  |  Size: 3.1 KiB

102
index.rst
View File

@ -1,6 +1,3 @@
ESPHome
=======
.. meta::
:google-site-verification: Q5q5TFbCofxA8-cSa1Frv5Hj4RopF5zwEZf_zaNHqf4
@ -14,32 +11,83 @@ ESPHome
ESPHome is a system to control your ESP8266/ESP32 by simple yet powerful configuration files and control them remotely through Home Automation systems.
.. image:: /images/hero.png
.. raw:: html
<a href="https://github.com/esphome/esphome"><img src="/_images/shield-github.svg" alt="GitHub" class="index-shield"></a>
<a href="https://discord.gg/KhAMKrd"><img src="/_images/shield-discord.svg" alt="Discord" class="index-shield"></a>
<a href="https://twitter.com/esphome_"><img src="/_images/shield-twitter.svg" alt="Twitter" class="index-shield"></a>
.. _guides:
Guides
------
.. imgtable::
Getting Started through Command Line, guides/getting_started_command_line, console.svg
Getting Started with Home Assistant Add-on, guides/getting_started_hassio, home-assistant.svg
FAQ and Tips, guides/faq, question_answer.svg
Migrating from Tasmota, guides/migrate_sonoff_tasmota, tasmota.svg
Automations, guides/automations, auto-fix.svg
Contributing, guides/contributing, github-circle.svg
Changelog, changelog/index, new-box.svg
Supporters, guides/supporters, heart.svg
DIY Examples, guides/diy, earth.svg
Configuration types, guides/configuration-types, puzzle.svg
<div class="guide-container">
<div class="guide-card">
<h3 class="guide-card-title">Keeping up</h3>
<ul>
<li>
<a class="reference" href="/changelog/index.html">
Changelog
</a>
</li>
<li>
<a class="reference" href="/guides/supporters.html">
Supporters
</a>
</li>
<li>
<a class="reference" href="/guides/contributing.html">
Contributing
</a>
</li>
</ul>
<pre class="guide-code">
esphome:
&nbsp;&nbsp;name: Awesome
&nbsp;&nbsp;platform: ESP32
&nbsp;&nbsp;board: nodemcu-32s
</pre>
</div>
<div class="guide-card">
<h3 class="guide-card-title">Next steps</h3>
<ul>
<li>
<a class="reference" href="/guides/faq.html">
FAQ and Tips
</a>
</li>
<li>
<a class="reference" href="/guides/automations.html">
Automations
</a>
</li>
<li>
<a class="reference" href="/guides/diy.html">
DIY Examples
</a>
</li>
<li>
<a class="reference" href="/guides/configuration-types.html">
Configuration types
</a>
</li>
</ul>
</div>
<div class="guide-card">
<h3 class="guide-card-title">Getting started</h3>
<ul>
<li>
<a class="reference" href="/guides/getting_started_hassio.html">
ESPHome Dashboard
</a>
</li>
<li>
<a class="reference" href="/guides/getting_started_command_line.html">
Command Line Interface
</a>
</li>
<li>
<a class="reference" href="/guides/migrate_sonoff_tasmota.html">
Migrating from Tasmota
</a>
</li>
</ul>
</div>
</div>
.. _devices: