Issue 2282 performance (#2287)

* switch components page to flexbox and mustachejs

* greatly improved website performance
* only load images when actually showing the box
* removed isotope JS

* Apply compression to HTML

sass/custom/_paulus.scss

@@ -306,147 +306,6 @@ p.note {
   }
 }
 
-#components-page {
-  .isotope-item {
-      z-index: 2;
-  }
-  .isotope-hidden.isotope-item {
-      pointer-events: none;
-      z-index: 1;
-  }
-  .isotope,
-  .isotope .isotope-item {
-      -webkit-transition-duration: 0.8s;
-      -moz-transition-duration: 0.8s;
-      transition-duration: 0.8s;
-  }
-  .isotope {
-      -webkit-transition-property: height, width;
-      -moz-transition-property: height, width;
-      transition-property: height, width;
-  }
-  .isotope .isotope-item {
-      -webkit-transition-property: -webkit-transform, opacity;
-      -moz-transition-property: -moz-transform, opacity;
-      transition-property: transform, opacity;
-  }
-  
-      
-  .component-search{
-    margin-bottom: 24px;
-  
-    input{
-      width: 100%;
-      padding: 10px;
-      
-      background-color: #fefefe;
-      border-radius: 2px;
-      border: 1px solid;
-      border-color: #7c7c7c #c3c3c3 #ddd;
-    }
-  }
-}
-
-@media only screen and (max-width: $lap-end) {
-  #components-page {
-    .filter-button-group {
-      margin-bottom: 16px;
-
-      .btn {
-        display: inline-block;
-        margin-right: 8px;
-        margin-bottom: 8px;
-
-        &.current {
-          background-color: #3A5561;
-          background-image: linear-gradient(to bottom, #3A5561,#3F6B7D);
-        }
-      }
-    }
-  }
-}
-
-@media only screen and (min-width: $desk-start) {
-  #components-page {
-    .filter-button-group {
-      .featured {
-        margin: 12px 0;
-      }
-
-      .added_in_current_version {
-        margin-top: 12px;
-      }
-
-      .added_two_versions_ago {
-        margin-bottom: 12px;
-      }
-
-      .btn {
-        display: block;
-        background: 0;
-        color: black;
-        box-shadow: none;
-        text-shadow: none;
-        padding: 2px;
-
-        &.current {
-          font-weight: bold;
-        }
-      }
-    }
-  }
-}
-
-.hass-option-cards {
-  .option-card {
-    display: inline-block;
-    width: 202px;
-    height: 142px;
-    background-color: #fefefe;
-    margin-right: 4px;
-    margin-bottom: 8px;
-    border-radius: 2px;
-    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
-    padding: 8px;
-    text-align: center;
-    text-decoration: none;
-
-    .img-container {
-      height: 50px;
-      margin: 8px 0;
-      font: 0/0 a;
-
-      &:before {    /* create a full-height inline block pseudo=element */
-          content: ' ';
-          display: inline-block;
-          vertical-align: middle;  /* vertical alignment of the inline element */
-          height: 100%;
-      }
-
-      img {
-        max-width: 100%;
-        max-height: 50px;
-        box-shadow: none;
-        border: none;
-        vertical-align: middle;
-      }
-    }
-
-    .title {
-      text-decoration: none;
-      font-size: 18px;
-      color: #000;
-      line-height: 1.3em;
-      height: 2.6em;
-    }
-
-    .category {
-      font-size: 14px;
-      color: #AAA;
-    }
-  }
-}
-
 .aside-module {
   .section {
     margin-bottom: 16px;