shrink lit-ts template

template-pro · Jan 9, 2023 · 5f764a4 · 5f764a4
1 parent 09dd945
commit 5f764a4
Show file tree

Hide file tree

Showing 6 changed files with 9 additions and 137 deletions.
diff --git a/template-lit-ts/index.html b/template-lit-ts/index.html
@@ -2,15 +2,14 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vite + Lit + TS</title>
     <link rel="stylesheet" href="./src/index.css" />
     <script type="module" src="/src/my-element.ts"></script>
   </head>
   <body>
     <my-element>
-      <h1>Vite + Lit</h1>
+      <h1>Vite + Lit + TS</h1>
     </my-element>
   </body>
 </html>
diff --git a/template-lit-ts/public/vite.svg b/template-lit-ts/public/vite.svg
diff --git a/template-lit-ts/src/assets/lit.svg b/template-lit-ts/src/assets/lit.svg
diff --git a/template-lit-ts/src/index.css b/template-lit-ts/src/index.css
@@ -1,40 +1,4 @@
-:root {
-  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
-  font-size: 16px;
-  line-height: 24px;
-  font-weight: 400;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-text-size-adjust: 100%;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
-body {
+* {
   margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-}
+  padding: 0;
+}
diff --git a/template-lit-ts/src/my-element.ts b/template-lit-ts/src/my-element.ts
@@ -10,12 +10,6 @@ import litLogo from './assets/lit.svg'
  */
 @customElement('my-element')
 export class MyElement extends LitElement {
-  /**
-   * Copy for the read the docs hint.
-   */
-  @property()
-  docsHint = 'Click on the Vite and Lit logos to learn more'
-
   /**
    * The number of times the button has been clicked.
    */
@@ -24,21 +18,10 @@ export class MyElement extends LitElement {
 
   render() {
     return html`
-      <div>
-        <a href="https://vitejs.dev" target="_blank">
-          <img src="/vite.svg" class="logo" alt="Vite logo" />
-        </a>
-        <a href="https://lit.dev" target="_blank">
-          <img src=${litLogo} class="logo lit" alt="Lit logo" />
-        </a>
-      </div>
       <slot></slot>
-      <div class="card">
-        <button @click=${this._onClick} part="button">
-          count is ${this.count}
-        </button>
-      </div>
-      <p class="read-the-docs">${this.docsHint}</p>
+      <button @click=${this._onClick} part="button">
+        count is ${this.count}
+      </button>
     `
   }
 
@@ -47,74 +30,8 @@ export class MyElement extends LitElement {
   }
 
   static styles = css`
-    :host {
-      max-width: 1280px;
-      margin: 0 auto;
-      padding: 2rem;
-      text-align: center;
-    }
-
-    .logo {
-      height: 6em;
-      padding: 1.5em;
-      will-change: filter;
-      transition: filter 300ms;
-    }
-    .logo:hover {
-      filter: drop-shadow(0 0 2em #646cffaa);
-    }
-    .logo.lit:hover {
-      filter: drop-shadow(0 0 2em #325cffaa);
-    }
-
-    .card {
-      padding: 2em;
-    }
-
-    .read-the-docs {
-      color: #888;
-    }
-
-    h1 {
-      font-size: 3.2em;
-      line-height: 1.1;
-    }
-
-    a {
-      font-weight: 500;
-      color: #646cff;
-      text-decoration: inherit;
-    }
-    a:hover {
-      color: #535bf2;
-    }
-
     button {
-      border-radius: 8px;
-      border: 1px solid transparent;
-      padding: 0.6em 1.2em;
-      font-size: 1em;
-      font-weight: 500;
-      font-family: inherit;
-      background-color: #1a1a1a;
-      cursor: pointer;
-      transition: border-color 0.25s;
-    }
-    button:hover {
-      border-color: #646cff;
-    }
-    button:focus,
-    button:focus-visible {
-      outline: 4px auto -webkit-focus-ring-color;
-    }
-
-    @media (prefers-color-scheme: light) {
-      a:hover {
-        color: #747bff;
-      }
-      button {
-        background-color: #f9f9f9;
-      }
+      box-sizing: inherit;
     }
   `
 }

diff --git a/template-lit/src/my-element.js b/template-lit/src/my-element.js
@@ -9,11 +9,6 @@ import { LitElement, css, html } from 'lit'
 export class MyElement extends LitElement {
   static get properties() {
     return {
-      /**
-       * Copy for the read the docs hint.
-       */
-      docsHint: { type: String },
-
       /**
        * The number of times the button has been clicked.
        */
@@ -42,8 +37,7 @@ export class MyElement extends LitElement {
   static get styles() {
     return css`
       button {
-        margin: 0;
-        padding: 0;
+        box-sizing: inherit;
       }
     `
   }