{"version":3,"sources":["StarterCard.vue","starter-card/src/StarterCard.vue"],"names":[],"mappings":"AAAA;ECuFE,8BAAI;ADrFN;AAEA;ECuFE,WAAI;EACJ,aAAW;EACX,mBAAa;EACb,uBAAmB;ADrFrB;AACA;ECuFE,4BAAI;EDrFJ,eCsFe;EDrFf,yBCsFiB;EDrFjB,eCsFe;EDrFf,gBCsFgB;ADrFlB;ACwFA;EDrFE,cAAc;ECuFd,YAAW;EACX,aAAM;EDrFN,YCsFY;EDrFZ,gBCsFc;ADrFhB;AACA;EACE,cCsFc;ADrFhB;AAEA;EACE,WCsFW;EACX,kBAAA;EACF,mBAAA;ADrFA;ACuFA;EACE,cAAM;ADrFR;AACA;EACE,YCsFY;ADrFd;AAEA;EACE,kBCsFgB;EAChB,WAAA;EDrFA,SAAS;ECuFT,gBAAS;EDrFT,YCsFW;EACX,WAAA;EACF,iBAAA;ADrFA;AAEA;ECuFE,WAAW;EACX,kBAAS;EACT,iBAAgB;EAChB,wBAAY;EACZ,WAAW;EACX,cAAc;EAChB,gBAAA;EDrFE,iCAAiC;ECuFjC,kBAAe;EACf,UAAU;EACV,aAAa;EACb,mBAAiB;ADrFnB;AAEA;ECuFE,gBAAgB;EAChB,aAAY;EACZ,mBAAkB;ADrFpB;AAEA;ECuFA,kBAAA;EDrFE,YAAY;ECuFZ,aAAW;EACX,QAAQ;EACR,SAAS;EACT,aAAa;EACf,2DAAA;EDrFE,yBAAyB;ACuF3B;ADpFA;ECuFE,SAAS;ADrFX;AAEA;ECuFE,YAAY;EACZ,aAAa;EACf,gBAAA;EDrFE,eAAe;ECuFf,UAAA;EACA,cAAS;EACX,yBAAA;EDrFE,kBAAkB;ECuFlB,eAAW;ADrFb;AACA;AACE;ICuFE,gBAAA;ADrFF;AACF;AAEA;AACE;ICuFE,YAAU;ADrFZ;AACA;ICuFE,gBAAgB;IAChB,UAAU;AACZ;AACF;IDrFI,cAAc;ACuFhB;ADrFF;AACA;AACE;ICuFE,YAAA;ADrFF;AACA;IACE,gBCsFgB;IDrFhB,UCsFS;ADrFX;AACA;ICuFE,cAAM;ADrFR;AACF;AAEA;;EAEE,gBAAgB;AAClB;AACA;AACE;;ICwFA,gBAAA;ADrFA;AACF;AACA;;ECwFA,gBAAA;ADrFA;ACuFA;;EAEE,cAAc;ADrFhB;AACA;;ECwFE,6BAAA;EDrFA,aAAa;ECuFb,YAAW;EDrFX,qBCsFkB;EAClB,sBAAA;EDrFA,mBAAmB;ECuFnB,YAAK;EDrFL,kBCsFgB;ADrFlB;AACA;ACuFE;;IAEE,aAAa;IACb,YAAY;ADrFd;AACF;AAEA;EACE,oBCsFE;ADrFJ","sourcesContent":[".card {\n  justify-content: space-between;\n}\n\n.logo {\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.logo img {\n  max-height: min(100%, 150px);\n  max-width: 100%;\n  transition: all 0.4s ease;\n  padding: 0 10px;\n  padding-top: 1em;\n}\n\n.highlighted .logo {\n  flex-shrink: 1;\n  flex-grow: 1;\n  min-height: 0;\n  min-width: 0;\n  overflow: hidden;\n}\n.highlighted img {\n  padding-top: 0;\n}\n\n.not-highlighted .logo {\n  height: 8em;\n  margin-bottom: 1em;\n  align-items: normal;\n}\n.not-highlighted .logo img {\n  padding-top: 0;\n}\n.not-highlighted .details {\n  flex-grow: 1;\n}\n\n.wip-ribbon {\n  position: absolute;\n  right: -5px;\n  top: -5px;\n  overflow: hidden;\n  width: 7.5em;\n  height: 7em;\n  text-align: right;\n}\n\n.wip-ribbon span {\n  color: #000;\n  text-align: center;\n  line-height: 28px;\n  transform: rotate(40deg);\n  width: 10em;\n  display: block;\n  background: #fff;\n  box-shadow: 0 3px 10px -5px black;\n  position: absolute;\n  top: 1.8em;\n  right: -1.9em;\n  padding-left: 0.5em;\n}\n\n.description {\n  font-size: 0.9em;\n  display: flex;\n  align-items: center;\n}\n\n.framework-bg {\n  position: absolute;\n  width: 10rem;\n  height: 10rem;\n  right: 0;\n  bottom: 0;\n  opacity: 0.25;\n  transform: translateX(2rem) translateY(2rem) rotate(-12deg);\n  transition: all 0.4s ease;\n}\n\np {\n  margin: 0;\n}\n\n.highlighted .details {\n  flex-grow: 1;\n  display: flex;\n  overflow: hidden;\n  max-height: 0px;\n  opacity: 0;\n  flex-shrink: 0;\n  transition: all 0.4s ease;\n  margin-bottom: 1em;\n  margin-top: 1em;\n}\n@media (hover: none) {\n  .highlighted .details {\n    font-size: 0.9em;\n  }\n}\n\n@media (hover: hover) {\n  .card:hover .framework-bg {\n    opacity: 0.2;\n  }\n  .card:hover .details {\n    max-height: 15em;\n    opacity: 1;\n  }\n  .card:hover .logo img {\n    max-width: 85%;\n  }\n}\n@media (hover: none) {\n  .card .framework-bg {\n    opacity: 0.2;\n  }\n  .card .details {\n    max-height: 15em;\n    opacity: 1;\n  }\n  .card .logo img {\n    max-width: 85%;\n  }\n}\n\n.powered-by,\n.owner {\n  font-size: 0.9em;\n}\n@media (hover: none) {\n  .powered-by,\n.owner {\n    font-size: 0.8em;\n  }\n}\n.powered-by :first-child,\n.owner :first-child {\n  font-size: 0.8em;\n}\n.powered-by span,\n.owner span {\n  display: block;\n}\n.powered-by img,\n.owner img {\n  transition: opacity 0.4s ease;\n  height: 1.5em;\n  width: 1.5em;\n  display: inline-block;\n  vertical-align: middle;\n  margin-right: 0.2em;\n  top: -0.15em;\n  position: relative;\n}\n@media (hover: none) {\n  .powered-by img,\n.owner img {\n    height: 1.2em;\n    width: 1.2em;\n  }\n}\n\n.powered-by {\n  margin-bottom: 0.4em;\n}","<template>\n  <component\n    :is=\"Card\"\n    :url=\"url\"\n    @click=\"(event) => $emit('click', event)\"\n    :backgroundColor=\"backgroundColor\"\n    :highlighted=\"highlighted\"\n    :class=\"{\n      card: true,\n      highlighted: highlighted,\n      'not-highlighted': !highlighted,\n    }\"\n  >\n    <div v-if=\"wip\" class=\"wip-ribbon\"><span>in progress...</span></div>\n    <div :class=\"{ logo: true }\">\n      <img :src=\"versioned(heroImg)\" loading=\"lazy\" alt=\"Starter hero image\" />\n    </div>\n    <div class=\"details\">\n      <p class=\"description\">\n        <slot></slot>\n      </p>\n    </div>\n    <div class=\"powered-by\" v-if=\"frameworks.size > 0\">\n      <span>{{ highlighted ? 'powered by' : 'featuring' }}</span>\n      <span v-for=\"[name, logo] in frameworks\" :key=\"name\">\n        <img :src=\"versioned(logo)\" alt=\"Powered by technology\" />\n        {{ name }}\n      </span>\n    </div>\n    <div class=\"owner\" v-if=\"highlighted && owner\">\n      <span>made by</span>\n      <span>\n        <img\n          :src=\"versioned(ownerPhoto)\"\n          :style=\"`opacity: ${ownerPhoto ? '1' : '0'}`\"\n          alt=\"Made by owner photo\"\n        />\n        {{ owner }}\n      </span>\n    </div>\n    <img\n      v-if=\"highlighted\"\n      v-show=\"bgImg\"\n      class=\"framework-bg\"\n      :src=\"versioned(bgImg)\"\n      loading=\"lazy\"\n    />\n    <div\n      v-else\n      class=\"framework-bg\"\n      :style=\"`\n        -webkit-mask-image: url(${versioned(bgImg)});\n        -webkit-mask-position: center;\n        -webkit-mask-repeat: no-repeat;\n        mask-image: url(${versioned(bgImg)});\n        mask-position: center;\n        mask-repeat: no-repeat;\n        background-color: ${backgroundColor}`\"\n    />\n  </component>\n</template>\n<script>\nimport Card from '../../card/src/Card.vue';\n\nexport default {\n  props: {\n    url: { type: String },\n    href: { type: String },\n    heroImg: { type: String },\n    bgImg: { type: String },\n    backgroundColor: { type: String },\n    highlighted: { type: Boolean, default: false },\n    frameworks: { type: Map },\n    owner: { type: String },\n    ownerPhoto: { type: String },\n    wip: { type: Boolean },\n  },\n  data: () => ({ Card }),\n  methods: {\n    versioned: function (imgUrl) {\n      // append a version to be able to bust cached images when updating them\n      return `${imgUrl}?v1`;\n    },\n  },\n};\n</script>\n<style lang=\"scss\" scoped>\n.card {\n  justify-content: space-between;\n}\n\n.logo {\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  img {\n    max-height: min(100%, 150px);\n    max-width: 100%;\n    transition: all 0.4s ease;\n    padding: 0 10px;\n    padding-top: 1em;\n  }\n}\n\n.highlighted {\n  .logo {\n    flex-shrink: 1;\n    flex-grow: 1;\n    min-height: 0;\n    min-width: 0;\n    overflow: hidden;\n  }\n\n  img {\n    padding-top: 0;\n  }\n}\n\n.not-highlighted {\n  .logo {\n    height: 8em;\n    margin-bottom: 1em;\n    align-items: normal;\n  }\n\n  .logo img {\n    padding-top: 0;\n  }\n\n  .details {\n    flex-grow: 1;\n  }\n}\n\n.wip-ribbon {\n  position: absolute;\n  right: -5px;\n  top: -5px;\n  overflow: hidden;\n  width: 7.5em;\n  height: 7em;\n  text-align: right;\n}\n\n.wip-ribbon span {\n  color: #000;\n  text-align: center;\n  line-height: 28px;\n  transform: rotate(40deg);\n  width: 10em;\n  display: block;\n  background: #fff;\n  box-shadow: 0 3px 10px -5px black;\n  position: absolute;\n  top: 1.8em;\n  right: -1.9em;\n  padding-left: 0.5em;\n}\n\n.description {\n  font-size: 0.9em;\n  display: flex;\n  align-items: center;\n}\n\n.framework-bg {\n  position: absolute;\n  width: 10rem;\n  height: 10rem;\n  right: 0;\n  bottom: 0;\n  opacity: 0.25;\n  transform: translateX(2rem) translateY(2rem) rotate(-12deg);\n  transition: all 0.4s ease;\n}\n\np {\n  margin: 0;\n}\n\n.highlighted {\n  .details {\n    @media (hover: none) {\n      font-size: 0.9em;\n    }\n\n    flex-grow: 1;\n    display: flex;\n    overflow: hidden;\n    max-height: 0px;\n    opacity: 0;\n    flex-shrink: 0;\n    transition: all 0.4s ease;\n    margin-bottom: 1em;\n    margin-top: 1em;\n  }\n}\n\n.card {\n  @mixin detailed-card {\n    .framework-bg {\n      opacity: 0.2;\n    }\n\n    .details {\n      max-height: 15em;\n      opacity: 1;\n    }\n\n    .logo {\n      img {\n        max-width: 85%;\n      }\n    }\n  }\n\n  @media (hover: hover) {\n    &:hover {\n      @include detailed-card;\n    }\n  }\n\n  @media (hover: none) {\n    @include detailed-card;\n  }\n}\n\n.powered-by,\n.owner {\n  font-size: 0.9em;\n\n  @media (hover: none) {\n    font-size: 0.8em;\n  }\n\n  :first-child {\n    font-size: 0.8em;\n  }\n\n  span {\n    display: block;\n  }\n\n  img {\n    transition: opacity 0.4s ease;\n    height: 1.5em;\n    width: 1.5em;\n\n    @media (hover: none) {\n      height: 1.2em;\n      width: 1.2em;\n    }\n\n    display: inline-block;\n    vertical-align: middle;\n    margin-right: 0.2em;\n    top: -0.15em;\n    position: relative;\n  }\n}\n\n.powered-by {\n  margin-bottom: 0.4em;\n}\n</style>\n"],"sourceRoot":"/source_map/"}