Hide divider when no desc. Change abbr font size based on length

components/CruResource.vue

@@ -88,6 +88,12 @@ export default {
       showAsForm:    this.$route.query[AS] !== _YAML,
       resourceYaml:  yaml,
       initialYaml:   yaml,
+      abbrSizes:     {
+        3: '24px',
+        4: '18px',
+        5: '16px',
+        6: '14px'
+      }
     };
   },
 
@@ -233,7 +239,7 @@ export default {
                         class="banner-abbrv"
                       >
                         <span v-if="$store.getters['i18n/exists'](subtype.bannerAbbrv)">{{ t(subtype.bannerAbbrv) }}</span>
-                        <span v-else>{{ subtype.bannerAbbrv }}</span>
+                        <span v-bind:style="{fontSize: abbrSizes[subtype.bannerAbbrv.length]}" v-else>{{ subtype.bannerAbbrv }}</span>
                       </div>
                       <div v-else>
                         {{ subtype.id.slice(0, 1).toUpperCase() }}
@@ -249,7 +255,7 @@ export default {
                   </h5>
                   <a v-if="subtype.docLink" :href="subtype.docLink" target="_blank" rel="noopener nofollow" class="flex-right">More Info <i class="icon icon-external-link" /></a>
                 </div>
-                <hr />
+                <hr v-if="subtype.description" />
                 <div v-if="subtype.description" class="description">
                   <span
                     v-if="$store.getters['i18n/exists'](subtype.description)"