Upstream/esphome-docs
1
0
Fork 0
mirror of https://github.com/esphome/esphome-docs.git synced 2025-02-03 23:41:36 +01:00
Code Issues Projects Releases Wiki Activity

Turn guide cards around (#1252)

Browse Source
This commit is contained in:
Bram Kragten 2021-06-16 12:51:32 +02:00 committed by GitHub
parent ea49078810
commit 6694ce4d86
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 45 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
_static/custom.css
View File

@ -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;
}
}
}

32
index.rst
View File

@ -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>