Small UI tweaks to design website (#11135)

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;

gallery/src/components/page-description.ts

@@ -14,13 +14,9 @@ class PageDescription extends HaMarkdown {
     }
     return html`
       ${until(
-        PAGES[this.page].description().then(
+        PAGES[this.page]
-          (content) => html`
+          .description()
-            <ha-card>
+          .then((content) => html`<div class="root">${content}</div>`),
-              <div class="card-content">${content}</div>
-            </ha-card>
-          `
-        ),
         ""
       )}
     `;
@@ -29,14 +25,14 @@ class PageDescription extends HaMarkdown {
   static styles = [
     HaMarkdown.styles,
     css`
-      ha-card {
+      .root {
-        max-width: 600px;
+        max-width: 800px;
-        margin: 16px auto;
+        margin: 0 auto;
       }
-      .card-content > *:first-child {
+      .root > *:first-child {
         margin-top: 0;
       }
-      .card-content > *:last-child {
+      .root > *:last-child {
         margin-bottom: 0;
       }
     `,

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,9 +83,14 @@ class HaGallery extends LitElement {
               ${PAGES[this._page].metadata.title || this._page.split("/")[1]}
             </div>
           </mwc-top-app-bar-fixed>
-          <div>
+          <div class="content">
+            ${PAGES[this._page].description
+              ? html`
                   <page-description .page=${this._page}></page-description>
+                `
+              : ""}
             ${dynamicElement(`demo-${this._page.replace("/", "-")}`)}
+          </div>
           <div class="page-footer">
             ${PAGES[this._page].description ||
             Object.keys(PAGES[this._page].metadata).length > 0
@@ -111,7 +115,6 @@ class HaGallery extends LitElement {
               : ""}
           </div>
         </div>
-        </div>
       </mwc-drawer>
       <notification-manager
         .hass=${FAKE_HASS}
@@ -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 {

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;