Turn guide cards around (#1252)

_static/custom.css

@@ -37,7 +37,7 @@ table.docutils {
   }
   100% {
     visibility: visible;
-}
+  }
 }
 @keyframes blink_effect {
   0% {
@@ -57,14 +57,14 @@ table.docutils {
   bottom: 0;
   right: 0;
   width: 100%;
-  background-color: rgba(20,20,20,0.8);
+  background-color: rgba(20, 20, 20, 0.8);
   min-height: 26px;
   font-size: 14px;
   color: #ccc;
   line-height: 26px;
   padding: 8px 0 8px 30px;
   z-index: 9999;
-  display: none
+  display: none;
 }
 .footer-button-container {
   margin: 0 60px 0 10px;
@@ -118,7 +118,6 @@ div.index-shields {
   margin-right: auto;
 }
 
-
 .guide-container {
   margin: 32px 0;
   display: flex;
@@ -126,18 +125,16 @@ div.index-shields {
 }
 
 .guide-card {
-  color: #004B6B;
+  color: #004b6b;
   display: block;
   height: auto;
   width: 300px;
   background-color: #f3f6f6;
   border-radius: 8px;
-  box-shadow: -10px 10px 32px -12px #000;
+  box-shadow: 4px 4px 8px -4px #00000075;
   padding-bottom: 8px;
-}
-
-.guide-card:not(:first-child) {
-    margin-left: -40px;
+  box-sizing: border-box;
+  transition: all 0.5s;
 }
 
 .guide-card-title {
@@ -152,14 +149,33 @@ div.index-shields {
   white-space: pre-line;
 }
 
+@media screen and (min-width: 870px) {
+  .guide-card:first-child {
+    z-index: 100;
+  }
+  .guide-card:nth-child(2) {
+    z-index: 50;
+  }
+
+  .guide-card:not(:first-child) {
+    margin-left: -40px;
+    padding-left: 40px;
+  }
+
+  .guide-card:not(:first-child):hover {
+    margin-left: -20px;
+    padding-left: 20px;
+  }
+}
 
 @media screen and (max-width: 870px) {
-  .guide-container  {
-    flex-direction: column-reverse;
+  .guide-container {
+    flex-direction: column;
   }
   .guide-card {
     width: 100%;
     margin: 8px 0;
+    padding: 0px;
   }
   .guide-card:not(:first-child) {
     margin-left: 0;
@@ -167,4 +183,4 @@ div.index-shields {
   .guide-card ul {
     margin-left: 32px;
   }
-}
+}

index.rst

@@ -17,27 +17,27 @@ ESPHome is a system to control your ESP8266/ESP32 by simple yet powerful configu
 
     <div class="guide-container">
         <div class="guide-card">
-            <h3 class="guide-card-title">Keeping up</h3>
+            <h3 class="guide-card-title">Getting started</h3>
             <ul>
                 <li>
-                    <a class="reference" href="/changelog/index.html">
-                        Changelog
+                    <a class="reference" href="/guides/getting_started_hassio.html">
+                        ESPHome Dashboard
                     </a>
                 </li>
                 <li>
-                    <a class="reference" href="/guides/supporters.html">
-                        Supporters
+                    <a class="reference" href="/guides/getting_started_command_line.html">
+                        Command Line Interface
                     </a>
                 </li>
                 <li>
-                    <a class="reference" href="/guides/contributing.html">
-                        Contributing
+                    <a class="reference" href="/guides/migrate_sonoff_tasmota.html">
+                        Migrating from Tasmota
                     </a>
                 </li>
             </ul>
             <pre class="guide-code">
                 esphome:
-                &nbsp;&nbsp;name: Awesome
+                &nbsp;&nbsp;name: awesome
                 &nbsp;&nbsp;platform: ESP32
                 &nbsp;&nbsp;board: nodemcu-32s
             </pre>
@@ -68,23 +68,23 @@ ESPHome is a system to control your ESP8266/ESP32 by simple yet powerful configu
             </ul>
         </div>
         <div class="guide-card">
-            <h3 class="guide-card-title">Getting started</h3>
+            <h3 class="guide-card-title">Keeping up</h3>
             <ul>
                 <li>
-                    <a class="reference" href="/guides/getting_started_hassio.html">
-                        ESPHome Dashboard
+                    <a class="reference" href="/changelog/index.html">
+                        Changelog
                     </a>
                 </li>
                 <li>
-                    <a class="reference" href="/guides/getting_started_command_line.html">
-                        Command Line Interface
+                    <a class="reference" href="/guides/supporters.html">
+                        Supporters
                     </a>
                 </li>
                 <li>
-                    <a class="reference" href="/guides/migrate_sonoff_tasmota.html">
-                        Migrating from Tasmota
+                    <a class="reference" href="/guides/contributing.html">
+                        Contributing
                     </a>
-                </li>              
+                </li>
             </ul>
         </div>
     </div>