move watercolor width and height to css. #59

services/ucd-lib-client/client/public/elements/components/graphics/dams-watercolor-overlay.tpl.js

@@ -20,6 +20,10 @@ return html`
   iron-icon {
     position: absolute;
   }
+  dams-watercolor {
+    height: 100%;
+    width: 100%;
+  }
 </style>
 <dams-watercolor
   rotate="${this.wcRotation}"

services/ucd-lib-client/client/public/elements/components/graphics/dams-watercolor.js

@@ -9,8 +9,6 @@ import render from "./dams-watercolor.tpl.js";
  * @prop {String} srcExt - The watercolor image extension type
  * @prop {String} color - The watercolor image. See CSS custom variables for accepted values
  * @prop {Number} rotate - Degree to rotate watercolor
- * @prop {String} width - Watercolor width
- * @prop {String} height - Watercolor height
  * @prop {String} element - Type of element to use: img or div
  */
 export default class DamsWatercolor extends LitElement {
@@ -22,8 +20,6 @@ export default class DamsWatercolor extends LitElement {
       srcExt: {type: String, attribute: 'src-ext'},
       color: {type: String},
       rotate: {type: Number},
-      width: {type: String},
-      height: {type: String},
       element: {type: String}
     };
   }
@@ -99,8 +95,6 @@ export default class DamsWatercolor extends LitElement {
       "background-image": `url(${this.getImgSrc()})`
     };
     if (this.rotate) styles.transform = `rotate(${this.rotate}deg)`;
-    //if (this.width) styles.width = this.width;
-    //if (this.height) styles.height = this.height;
     return styles;
   }
 

services/ucd-lib-client/client/public/elements/components/graphics/dams-watercolor.tpl.js

@@ -23,8 +23,8 @@ ${this.element === 'img' ? html`
   <img 
     src="${this.getImgSrc()}" 
     srcset="${this.getImgSrcSet()}"
-    height="${this.height}"
-    width="${this.width}"
+    height="100%"
+    width="100%"
     alt="" 
     style="${styleMap(this.getImgStyles())}">
 ` : html`

services/ucd-lib-client/client/public/elements/pages/home/app-home.tpl.js

@@ -139,11 +139,6 @@ return html`
     height: 8rem;
     margin-left:0px;
   }
-  .featured{
-    margin: 0;
-    text-align: center;
-    background-color: var(--color-aggie-blue-20);
-  }
   .about{
     text-align: center;
     background-color: var(--color-aggie-blue-40);
@@ -288,6 +283,14 @@ return html`
     margin-left: 0;
     margin-right: 0;
   }
+  .featured {
+    background-color: var(--color-aggie-blue-20);
+  }
+  .featured h2 {
+    margin-bottom: 0;
+    text-align: center;
+    margin-top: 0;
+  }
   @media (min-width: 767px) {
     .hero-top {
       margin-bottom: 60px;
@@ -423,7 +426,13 @@ return html`
       )}
     
   </div>
+</section>
 
+<section class="featured site-frame">
+  <h2>Featured Collections</h2>
+  <dams-watercolor-overlay 
+      icon="star">
+  </dams-watercolor-overlay>
 </section>
 
 <!--