From 34c3374d8446141522fcb1249d05d8c3862d0974 Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <balloob@gmail.com>
Date: Sun, 9 Jan 2022 21:20:15 -0800
Subject: [PATCH] Small UI tweaks to design website (#11135)

---
 gallery/src/components/demo-cards.ts       |  4 --
 gallery/src/components/page-description.ts | 20 +++---
 gallery/src/ha-gallery.ts                  | 72 ++++++++++++++--------
 src/components/ha-markdown.ts              |  8 +++
 4 files changed, 62 insertions(+), 42 deletions(-)

diff --git a/gallery/src/components/demo-cards.ts b/gallery/src/components/demo-cards.ts
index 609577e7f1..fa91ca2097 100644
--- a/gallery/src/components/demo-cards.ts
+++ b/gallery/src/components/demo-cards.ts
@@ -61,10 +61,6 @@ class DemoCards extends LitElement {
   }
 
   static styles = css`
-    #container {
-      min-height: calc(100vh - 128px);
-      background: var(--primary-background-color);
-    }
     .cards {
       display: flex;
       flex-wrap: wrap;
diff --git a/gallery/src/components/page-description.ts b/gallery/src/components/page-description.ts
index abcdcc5820..8e449195a6 100644
--- a/gallery/src/components/page-description.ts
+++ b/gallery/src/components/page-description.ts
@@ -14,13 +14,9 @@ class PageDescription extends HaMarkdown {
     }
     return html`
       ${until(
-        PAGES[this.page].description().then(
-          (content) => html`
-            <ha-card>
-              <div class="card-content">${content}</div>
-            </ha-card>
-          `
-        ),
+        PAGES[this.page]
+          .description()
+          .then((content) => html`<div class="root">${content}</div>`),
         ""
       )}
     `;
@@ -29,14 +25,14 @@ class PageDescription extends HaMarkdown {
   static styles = [
     HaMarkdown.styles,
     css`
-      ha-card {
-        max-width: 600px;
-        margin: 16px auto;
+      .root {
+        max-width: 800px;
+        margin: 0 auto;
       }
-      .card-content > *:first-child {
+      .root > *:first-child {
         margin-top: 0;
       }
-      .card-content > *:last-child {
+      .root > *:last-child {
         margin-bottom: 0;
       }
     `,
diff --git a/gallery/src/ha-gallery.ts b/gallery/src/ha-gallery.ts
index 11f0a8f288..67dcaa73b0 100644
--- a/gallery/src/ha-gallery.ts
+++ b/gallery/src/ha-gallery.ts
@@ -3,7 +3,6 @@ import "@material/mwc-drawer";
 import "@material/mwc-top-app-bar-fixed";
 import { html, css, LitElement, PropertyValues } from "lit";
 import { customElement, property, query } from "lit/decorators";
-import "../../src/components/ha-card";
 import "../../src/components/ha-icon-button";
 import "../../src/managers/notification-manager";
 import { haStyle } from "../../src/resources/styles";
@@ -84,32 +83,36 @@ class HaGallery extends LitElement {
               ${PAGES[this._page].metadata.title || this._page.split("/")[1]}
             </div>
           </mwc-top-app-bar-fixed>
-          <div>
-            <page-description .page=${this._page}></page-description>
+          <div class="content">
+            ${PAGES[this._page].description
+              ? html`
+                  <page-description .page=${this._page}></page-description>
+                `
+              : ""}
             ${dynamicElement(`demo-${this._page.replace("/", "-")}`)}
-            <div class="page-footer">
-              ${PAGES[this._page].description ||
-              Object.keys(PAGES[this._page].metadata).length > 0
-                ? html`
-                    <a
-                      href=${`${GITHUB_DEMO_URL}${this._page}.markdown`}
-                      target="_blank"
-                    >
-                      Edit text
-                    </a>
-                  `
-                : ""}
-              ${PAGES[this._page].demo
-                ? html`
-                    <a
-                      href=${`${GITHUB_DEMO_URL}${this._page}.ts`}
-                      target="_blank"
-                    >
-                      Edit demo
-                    </a>
-                  `
-                : ""}
-            </div>
+          </div>
+          <div class="page-footer">
+            ${PAGES[this._page].description ||
+            Object.keys(PAGES[this._page].metadata).length > 0
+              ? html`
+                  <a
+                    href=${`${GITHUB_DEMO_URL}${this._page}.markdown`}
+                    target="_blank"
+                  >
+                    Edit text
+                  </a>
+                `
+              : ""}
+            ${PAGES[this._page].demo
+              ? html`
+                  <a
+                    href=${`${GITHUB_DEMO_URL}${this._page}.ts`}
+                    target="_blank"
+                  >
+                    Edit demo
+                  </a>
+                `
+              : ""}
           </div>
         </div>
       </mwc-drawer>
@@ -216,9 +219,26 @@ class HaGallery extends LitElement {
         opacity: 0.12;
       }
 
+      div[slot="appContent"] {
+        display: flex;
+        flex-direction: column;
+        min-height: 100vh;
+        background: var(--primary-background-color);
+      }
+
+      .content {
+        flex: 1;
+      }
+
+      page-description {
+        margin: 16px;
+      }
+
       .page-footer {
         text-align: center;
         margin: 16px 0;
+        padding-top: 16px;
+        border-top: 1px solid rgba(0, 0, 0, 0.12);
       }
 
       .page-footer a {
diff --git a/src/components/ha-markdown.ts b/src/components/ha-markdown.ts
index 28f4b8e841..2b628c1e04 100644
--- a/src/components/ha-markdown.ts
+++ b/src/components/ha-markdown.ts
@@ -66,6 +66,14 @@ export class HaMarkdown extends LitElement {
         line-height: 1.45;
         font-family: var(--code-font-family, monospace);
       }
+      h1,
+      h2,
+      h3,
+      h4,
+      h5,
+      h6 {
+        line-height: initial;
+      }
       h2 {
         font-size: 1.5em;
         font-weight: bold;