Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Update Person Teaser HTML/CSS #809

Open
skoolbus39 opened this issue Aug 23, 2024 · 0 comments
Open

Update Person Teaser HTML/CSS #809

skoolbus39 opened this issue Aug 23, 2024 · 0 comments
Assignees
@sarongebre

Comments

@skoolbus39
Copy link
Collaborator

skoolbus39 commented Aug 23, 2024 •
edited
Loading

Some of the changes include:

  • Update the unlcms-teaser-person <div>s to use dcf-d-grid instead of dcf-grid. It should now be <div class="dcf-d-grid dcf-col-gap-5 dcf-row-gap-2 unlcms-teaser-person">
  • Add dcf-flex-shrink-0 to person images
  • Add dcf-word-wrap to person’s name

Update HTML for centered teasers lists
(uses similar markup for each teaser as the regular person teaser but without some of the fields)

<ul class="dcf-d-flex dcf-flex-wrap dcf-jc-center unlcms-centered-teaser-person-list dcf-col-gap-vw dcf-row-gap-8 dcf-mb-12" role="list">
  <li class="dcf-mb-0 dcf-card-as-link unlcms-img-zoom-hover" itemscope itemtype="https://schema.org/Person">
    <div class="dcf-d-grid dcf-col-gap-5 dcf-row-gap-2 unlcms-teaser-person">
      <div class="unlcms-teaser-person-img dcf-flex-shrink-0">
        <div class="dcf-ratio dcf-ratio-1x1 unl-bg-light-gray dcf-circle">
          <img class="dcf-ratio-child dcf-obj-fit-cover" src="https://ucomm.unl.edu/images/directory/lewis.jpg" itemprop="image" alt="">
        </div>
      </div>
      <div class="unlcms-teaser-person-text dcf-as-center">
        <div class="dcf-lh-2 dcf-mb-1"><a href="#" class="dcf-txt-h4 dcf-bold dcf-word-wrap dcf-card-link dcf-txt-decor-hover unl-ls-h" itemprop="name">Clay Lewis</a></div>
        <div class="dcf-lh-3 dcf-txt-sm dcf-italic" itemprop="jobTitle">Designer of Dungeons / Developer of Dragons</div>
        <address class="dcf-mt-4">
          <dl class="dcf-txt-sm dcf-mb-0">
            <dt class="dcf-sr-only">Address</dt>
            <dd class="dcf-d-flex dcf-col-gap-2">
              <div class="dcf-h-4 dcf-w-4 unl-gray dcf-mt-1">
                <svg class="dcf-h-100% dcf-w-100% dcf-fill-current" focusable="false" height="16" width="16" viewBox="0 0 24 24" aria-hidden="true">
                  <path d="M12 .006c-4.411 0-8 3.588-8 8 0 4.244 7.273 15.307 7.583 15.775a.501.501 0 0 0 .834 0C12.727 23.313 20 12.25 20 8.006c0-4.411-3.589-8-8-8zm0 11.5c-1.93 0-3.5-1.571-3.5-3.5s1.57-3.5 3.5-3.5 3.5 1.571 3.5 3.5-1.57 3.5-3.5 3.5z"/><path fill="none" d="M0 0h24v24H0z"/>
                </svg>
              </div>
              <a class="dcf-txt-decor-hover" href="https://maps.unl.edu/NU" itemprop="address" itemscope="" itemtype="http://schema.org/PostalAddress" translate="no">
                <span itemprop="streetAddress">1400 R Street</span><br>
                <span itemprop="addressLocality">Lincoln</span>, <abbr title="Nebraska" itemprop="addressRegion">NE</abbr> <span itemprop="postalCode">68588</span> <abbr class="dcf-d-none" itemprop="addressCountry">US</abbr>
              </a>
            </dd>
            <dt class="dcf-sr-only">Phone</dt>
            <dd class="dcf-d-flex dcf-col-gap-2 dcf-ai-center">
              <div class="dcf-h-4 dcf-w-4 unl-gray">
                <svg class="dcf-h-100% dcf-w-100% dcf-fill-current" focusable="false" height="16" width="16" viewBox="0 0 24 24" aria-hidden="true">
                  <path d="M5.001 5h14v14h-14zM5.001 20v1.5A2.501 2.501 0 0 0 7.5 24h9c1.378 0 2.5-1.121 2.5-2.5V20H5.001zM12 22.5a1.001 1.001 0 0 1 0-2 1.001 1.001 0 0 1 0 2zM19 4V2.5C19 1.121 17.878 0 16.5 0h-9a2.501 2.501 0 0 0-2.499 2.5V4H19zM9.5 2h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1 0-1z"/><path fill="none" d="M0 0h24v24H0z"/>
                </svg>
              </div>
              <a class="dcf-txt-decor-hover" href="tel:+14024727211" itemprop="telephone">
                <span class="dcf-txt-nowrap">402-472-7211</span>
              </a>
            </dd>
            <dt class="dcf-sr-only">Fax</dt>
            <dd class="dcf-d-flex dcf-col-gap-2 dcf-ai-center">
              <div class="dcf-h-4 dcf-w-4 unl-gray">
                <svg class="dcf-h-100% dcf-w-100% dcf-fill-current" focusable="false" height="16" width="16" viewBox="0 0 24 24" aria-hidden="true">
                  <circle cx="3.5" cy="10.5" r=".5"/><path d="M21.5 7h-19A2.503 2.503 0 0 0 0 9.5v6C0 16.878 1.121 18 2.5 18H5v4.5a.5.5 0 0 0 .5.5h13a.5.5 0 0 0 .5-.5V18h2.5c1.378 0 2.5-1.122 2.5-2.5v-6C24 8.122 22.878 7 21.5 7zm-18 5c-.827 0-1.5-.673-1.5-1.5S2.673 9 3.5 9c.826 0 1.5.673 1.5 1.5S4.326 12 3.5 12zM18 22H6v-7h12v7zM5.5 6h13a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.146-.353l-3-3A.5.5 0 0 0 15.5 1h-10a.5.5 0 0 0-.5.5v4a.5.5 0 0 0 .5.5zm10-4.5 3 3h-3v-3z"/><path d="M7.5 17h9a.5.5 0 0 0 0-1h-9a.5.5 0 0 0 0 1zM7.5 19h9a.5.5 0 0 0 0-1h-9a.5.5 0 0 0 0 1zM7.5 21h9a.5.5 0 0 0 0-1h-9a.5.5 0 0 0 0 1z"/><path fill="none" d="M0 0h24v24H0z"/>
                </svg>
              </div>
              <span class="dcf-txt-nowrap" itemprop="fax">402-472-1234</span>
            </dd>
            <dt class="dcf-sr-only">Email</dt>
            <dd class="dcf-d-flex dcf-col-gap-2 dcf-ai-center">
              <div class="dcf-h-4 dcf-w-4 unl-gray">
                <svg class="dcf-h-100% dcf-w-100% dcf-fill-current" focusable="false" height="16" width="16" viewBox="0 0 24 24" aria-hidden="true">
                  <path d="m12.002 12.36 10.095-8.03A1.99 1.99 0 0 0 21.001 4h-18c-.387 0-.746.115-1.053.307l10.054 8.053z"/><path d="m22.764 5.076-10.468 8.315a.488.488 0 0 1-.594-.001L1.26 5.036c-.16.287-.259.612-.26.964v11c.001 1.103.898 2 2.001 2h17.998c1.103 0 2-.897 2.001-2V6c0-.335-.09-.647-.236-.924z"/><path fill="none" d="M0 0h24v24H0z"/>
                </svg>
              </div>
              <a class="dcf-txt-decor-hover" href="mailto:[email protected]" itemprop="email">
                <span class="dcf-txt-nowrap">[email protected]</span>
              </a>
            </dd>
            <dd class="dcf-d-flex dcf-col-gap-2 dcf-ai-center">
              <div class="dcf-h-4 dcf-w-4 unl-gray">
                <svg class="dcf-h-100% dcf-w-100% dcf-fill-current" focusable="false" height="16" width="16" viewBox="0 0 24 24" aria-hidden="true">
                  <path d="m14.474 10.232-.706-.706a4.004 4.004 0 0 0-5.658-.001l-4.597 4.597a4.004 4.004 0 0 0 0 5.657l.707.706a3.97 3.97 0 0 0 2.829 1.173 3.973 3.973 0 0 0 2.827-1.172l2.173-2.171a.999.999 0 1 0-1.414-1.414l-2.173 2.17c-.755.756-2.071.757-2.828 0l-.707-.706a2.004 2.004 0 0 1 0-2.829l4.597-4.596c.756-.756 2.073-.756 2.828 0l.707.707a1.001 1.001 0 0 0 1.415-1.415z"/><path d="m20.486 4.221-.707-.706a3.97 3.97 0 0 0-2.829-1.173 3.977 3.977 0 0 0-2.827 1.172L12.135 5.5a.999.999 0 1 0 1.414 1.414l1.988-1.984c.755-.756 2.071-.757 2.828 0l.707.706c.779.78.779 2.049 0 2.829l-4.597 4.596c-.756.756-2.073.756-2.828 0a.999.999 0 0 0-1.414 0 .999.999 0 0 0-.001 1.414 4.001 4.001 0 0 0 5.657.001l4.597-4.597a4.005 4.005 0 0 0 0-5.658z"/><path fill="none" d="M0 0h24v24H0z"/>
                </svg>
              </div>
              <a class="dcf-txt-decor-hover" href="http://www.claylewis.com" itemprop="url">claylewis.com</a>
            </dd>
          </dl>
        </address>
      </div>
    </div>
  </li>
</ul>

Update HTML for VIP teasers

<div class="dcf-d-flex dcf-jc-center">
  <div class="unlcms-teaser-person-vip dcf-flex-grow-1 dcf-w-max-xl dcf-card-as-link dcf-grid dcf-col-gap-vw dcf-row-gap-3 unlcms-img-zoom-hover" itemscope itemtype="https://schema.org/Person">
    <div class="unlcms-teaser-person-vip-img">
      <div class="dcf-ratio dcf-ratio-1x1 unl-bg-light-gray unl-frame-quad">
        <img class="dcf-ratio-child dcf-obj-fit-cover" src="https://ucomm.unl.edu/images/directory/lewis.jpg" itemprop="image" alt="">
      </div>
    </div>
    <div class="dcf-as-center unlcms-teaser-person-vip-text">
      <div class="dcf-lh-2 dcf-mb-1"><a href="#" class="dcf-txt-h3 dcf-bold dcf-card-link dcf-txt-decor-hover unl-ls-h" itemprop="name">The Most Important Clay Lewis on This Page</a></div>
      <div class="dcf-lh-3 dcf-txt-sm dcf-italic" itemprop="jobTitle">Chief Dice Rolling Officer (<abbr>CDRO</abbr>)</div>
      <div class="dcf-mt-4">
        <p>Nulla vitae elit libero, a pharetra augue. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Donec sed odio dui.</p>
      </div>
    </div>
  </div>
</div>

Update HTML for teasers

<ol class="dcf-d-grid unlcms-teaser-person-list dcf-col-gap-vw dcf-row-gap-8 dcf-mb-9" role="list">
  <li class="dcf-mb-0 dcf-card-as-link unlcms-img-zoom-hover" itemscope itemtype="https://schema.org/Person">
    <div class="dcf-d-grid dcf-col-gap-5 dcf-row-gap-2 unlcms-teaser-person">
      <div class="unlcms-teaser-person-img dcf-flex-shrink-0">
        <div class="dcf-ratio dcf-ratio-1x1 unl-bg-light-gray unl-frame-quad">
          <img class="dcf-ratio-child dcf-obj-fit-cover" src="https://ucomm.unl.edu/images/directory/lewis.jpg" itemprop="image" alt="">
        </div>
      </div>
      <div class="unlcms-teaser-person-text dcf-as-center">
        <div class="dcf-lh-2 dcf-mb-1"><a href="#" class="dcf-txt-h4 dcf-bold dcf-word-wrap dcf-card-link dcf-txt-decor-hover unl-ls-h" itemprop="name">Clay Lorem Ipsum Dolor Lewis</a></div>
        <div class="dcf-lh-3 dcf-txt-sm dcf-italic" itemprop="jobTitle">Designer of Dungeons / Developer of Dragons</div>
        <address class="dcf-mt-4">
          <dl class="dcf-txt-sm dcf-mb-0">
            <dt class="dcf-sr-only">Address</dt>
            <dd class="dcf-d-flex dcf-col-gap-2">
              <div class="dcf-h-4 dcf-w-4 unl-gray dcf-mt-1">
                <svg class="dcf-h-100% dcf-w-100% dcf-fill-current" focusable="false" height="16" width="16" viewBox="0 0 24 24" aria-hidden="true">
                  <path d="M12 .006c-4.411 0-8 3.588-8 8 0 4.244 7.273 15.307 7.583 15.775a.501.501 0 0 0 .834 0C12.727 23.313 20 12.25 20 8.006c0-4.411-3.589-8-8-8zm0 11.5c-1.93 0-3.5-1.571-3.5-3.5s1.57-3.5 3.5-3.5 3.5 1.571 3.5 3.5-1.57 3.5-3.5 3.5z"/><path fill="none" d="M0 0h24v24H0z"/>
                </svg>
              </div>
              <a class="dcf-txt-decor-hover" href="https://maps.unl.edu/NU" itemprop="address" itemscope="" itemtype="http://schema.org/PostalAddress" translate="no">
                <span itemprop="streetAddress">1400 R Street</span><br>
                <span itemprop="addressLocality">Lincoln</span>, <abbr title="Nebraska" itemprop="addressRegion">NE</abbr> <span itemprop="postalCode">68588</span> <abbr class="dcf-d-none" itemprop="addressCountry">US</abbr>
              </a>
            </dd>
            <dt class="dcf-sr-only">Phone</dt>
            <dd class="dcf-d-flex dcf-col-gap-2 dcf-ai-center">
              <div class="dcf-h-4 dcf-w-4 unl-gray">
                <svg class="dcf-h-100% dcf-w-100% dcf-fill-current" focusable="false" height="16" width="16" viewBox="0 0 24 24" aria-hidden="true">
                  <path d="M5.001 5h14v14h-14zM5.001 20v1.5A2.501 2.501 0 0 0 7.5 24h9c1.378 0 2.5-1.121 2.5-2.5V20H5.001zM12 22.5a1.001 1.001 0 0 1 0-2 1.001 1.001 0 0 1 0 2zM19 4V2.5C19 1.121 17.878 0 16.5 0h-9a2.501 2.501 0 0 0-2.499 2.5V4H19zM9.5 2h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1 0-1z"/><path fill="none" d="M0 0h24v24H0z"/>
                </svg>
              </div>
              <a class="dcf-txt-decor-hover" href="tel:+14024727211" itemprop="telephone">
                <span class="dcf-txt-nowrap">402-472-7211</span>
              </a>
            </dd>
            <dt class="dcf-sr-only">Fax</dt>
            <dd class="dcf-d-flex dcf-col-gap-2 dcf-ai-center">
              <div class="dcf-h-4 dcf-w-4 unl-gray">
                <svg class="dcf-h-100% dcf-w-100% dcf-fill-current" focusable="false" height="16" width="16" viewBox="0 0 24 24" aria-hidden="true">
                  <circle cx="3.5" cy="10.5" r=".5"/><path d="M21.5 7h-19A2.503 2.503 0 0 0 0 9.5v6C0 16.878 1.121 18 2.5 18H5v4.5a.5.5 0 0 0 .5.5h13a.5.5 0 0 0 .5-.5V18h2.5c1.378 0 2.5-1.122 2.5-2.5v-6C24 8.122 22.878 7 21.5 7zm-18 5c-.827 0-1.5-.673-1.5-1.5S2.673 9 3.5 9c.826 0 1.5.673 1.5 1.5S4.326 12 3.5 12zM18 22H6v-7h12v7zM5.5 6h13a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.146-.353l-3-3A.5.5 0 0 0 15.5 1h-10a.5.5 0 0 0-.5.5v4a.5.5 0 0 0 .5.5zm10-4.5 3 3h-3v-3z"/><path d="M7.5 17h9a.5.5 0 0 0 0-1h-9a.5.5 0 0 0 0 1zM7.5 19h9a.5.5 0 0 0 0-1h-9a.5.5 0 0 0 0 1zM7.5 21h9a.5.5 0 0 0 0-1h-9a.5.5 0 0 0 0 1z"/><path fill="none" d="M0 0h24v24H0z"/>
                </svg>
              </div>
              <span class="dcf-txt-nowrap" itemprop="fax">402-472-1234</span>
            </dd>
            <dt class="dcf-sr-only">Email</dt>
            <dd class="dcf-d-flex dcf-col-gap-2 dcf-ai-center">
              <div class="dcf-h-4 dcf-w-4 unl-gray">
                <svg class="dcf-h-100% dcf-w-100% dcf-fill-current" focusable="false" height="16" width="16" viewBox="0 0 24 24" aria-hidden="true">
                  <path d="m12.002 12.36 10.095-8.03A1.99 1.99 0 0 0 21.001 4h-18c-.387 0-.746.115-1.053.307l10.054 8.053z"/><path d="m22.764 5.076-10.468 8.315a.488.488 0 0 1-.594-.001L1.26 5.036c-.16.287-.259.612-.26.964v11c.001 1.103.898 2 2.001 2h17.998c1.103 0 2-.897 2.001-2V6c0-.335-.09-.647-.236-.924z"/><path fill="none" d="M0 0h24v24H0z"/>
                </svg>
              </div>
              <a class="dcf-txt-decor-hover" href="mailto:[email protected]" itemprop="email">
                <span class="dcf-txt-nowrap">[email protected]</span>
              </a>
            </dd>
            <dd class="dcf-d-flex dcf-col-gap-2 dcf-ai-center">
              <div class="dcf-h-4 dcf-w-4 unl-gray">
                <svg class="dcf-h-100% dcf-w-100% dcf-fill-current" focusable="false" height="16" width="16" viewBox="0 0 24 24" aria-hidden="true">
                  <path d="m14.474 10.232-.706-.706a4.004 4.004 0 0 0-5.658-.001l-4.597 4.597a4.004 4.004 0 0 0 0 5.657l.707.706a3.97 3.97 0 0 0 2.829 1.173 3.973 3.973 0 0 0 2.827-1.172l2.173-2.171a.999.999 0 1 0-1.414-1.414l-2.173 2.17c-.755.756-2.071.757-2.828 0l-.707-.706a2.004 2.004 0 0 1 0-2.829l4.597-4.596c.756-.756 2.073-.756 2.828 0l.707.707a1.001 1.001 0 0 0 1.415-1.415z"/><path d="m20.486 4.221-.707-.706a3.97 3.97 0 0 0-2.829-1.173 3.977 3.977 0 0 0-2.827 1.172L12.135 5.5a.999.999 0 1 0 1.414 1.414l1.988-1.984c.755-.756 2.071-.757 2.828 0l.707.706c.779.78.779 2.049 0 2.829l-4.597 4.596c-.756.756-2.073.756-2.828 0a.999.999 0 0 0-1.414 0 .999.999 0 0 0-.001 1.414 4.001 4.001 0 0 0 5.657.001l4.597-4.597a4.005 4.005 0 0 0 0-5.658z"/><path fill="none" d="M0 0h24v24H0z"/>
                </svg>
              </div>
              <a class="dcf-txt-decor-hover" href="http://www.claylewis.com" itemprop="url">claylewis.com</a>
            </dd>
            <dt class="dcf-sr-only">Social Media</dt>
            <dd class="dcf-d-inline-block dcf-pt-4 dcf-pr-3">
              <a class="dcf-d-block dcf-h-6 dcf-w-6" href="https://www.facebook.com/UNLincoln" aria-label="Jane Doe on Facebook">
                <svg class="dcf-h-100% dcf-w-100% dcf-fill-current" focusable="false" height="16" width="16" viewBox="0 0 48 48">
                  <path d="M48 24.1c0-13.3-10.7-24-24-24S0 10.9 0 24.1c0 12 8.8 21.9 20.2 23.7V31.1h-6.1v-6.9h6.1v-5.3c0-6 3.6-9.3 9.1-9.3 2.6 0 5.4.5 5.4.5V16h-3c-3 0-3.9 1.9-3.9 3.7v4.5h6.7l-1.1 6.9h-5.6v16.8C39.2 46.1 48 36.1 48 24.1z"></path>
                </svg>
              </a>
            </dd>
            <dd class="dcf-d-inline-block dcf-pt-4 dcf-pr-3">
              <a class="dcf-d-block dcf-h-6 dcf-w-6" href="https://twitter.com/UNLincoln" aria-label="Jane Doe on X (formerly Twitter)">
                <svg class="dcf-h-100% dcf-w-100% dcf-fill-current" focusable="false" height="16" width="16" viewBox="0 0 48 48">
                  <path d="M28.5 20.3 46 0h-4.1L26.6 17.6 14.5 0H.5l18.3 26.7L.5 48h4.1l16-18.6L33.5 48h14l-19-27.7zm-5.7 6.6-1.9-2.7L6.2 3.1h6.4l11.9 17.1 1.9 2.7L41.8 45h-6.4L22.8 26.9z"></path>
                </svg>
              </a>
            </dd>
            <dd class="dcf-d-inline-block dcf-pt-4 dcf-pr-3">
              <a class="dcf-d-block dcf-h-6 dcf-w-6" href="https://www.youtube.com/user/unl" aria-label="Jane Doe on YouTube">
                <svg class="dcf-h-100% dcf-w-100% dcf-fill-current" focusable="false" height="16" width="16" viewBox="0 0 48 48">
                  <path d="M47 12.37a6 6 0 0 0-4.25-4.27C39 7.09 24 7.09 24 7.09s-15 0-18.75 1A6 6 0 0 0 1 12.37C0 16.14 0 24 0 24s0 7.86 1 11.63a6 6 0 0 0 4.25 4.27c3.74 1 18.75 1 18.75 1s15 0 18.75-1A6 6 0 0 0 47 35.63C48 31.86 48 24 48 24s0-7.86-1-11.63zM19.09 31.14V16.86L31.64 24z"></path>
                </svg>
              </a>
            </dd>
            <dd class="dcf-d-inline-block dcf-pt-4 dcf-pr-3">
              <a class="dcf-d-block dcf-h-6 dcf-w-6" href="https://www.instagram.com/unlincoln/" aria-label="Jane Doe on Instagram">
                <svg class="dcf-h-100% dcf-w-100% dcf-fill-current" focusable="false" height="16" width="16" viewBox="0 0 48 48">
                  <path d="M24 4.33c6.41 0 7.17 0 9.7.14a13.28 13.28 0 0 1 4.46.83 7.44 7.44 0 0 1 2.76 1.79 7.44 7.44 0 0 1 1.79 2.76 13.28 13.28 0 0 1 .83 4.46c.12 2.53.14 3.29.14 9.7s0 7.17-.14 9.7a13.28 13.28 0 0 1-.83 4.46 8 8 0 0 1-4.55 4.55 13.28 13.28 0 0 1-4.46.83c-2.53.12-3.29.14-9.7.14s-7.17 0-9.7-.14a13.28 13.28 0 0 1-4.46-.83 7.44 7.44 0 0 1-2.76-1.79 7.44 7.44 0 0 1-1.79-2.76 13.28 13.28 0 0 1-.83-4.46c-.12-2.53-.14-3.29-.14-9.7s0-7.17.14-9.7a13.28 13.28 0 0 1 .83-4.46 7.44 7.44 0 0 1 1.8-2.77 7.44 7.44 0 0 1 2.76-1.79 13.28 13.28 0 0 1 4.46-.83c2.53-.12 3.29-.14 9.7-.14M24 0c-6.52 0-7.34 0-9.9.14a17.61 17.61 0 0 0-5.82 1.12A11.76 11.76 0 0 0 4 4a11.76 11.76 0 0 0-2.74 4.28 17.6 17.6 0 0 0-1.12 5.83C0 16.66 0 17.48 0 24s0 7.34.14 9.9a17.6 17.6 0 0 0 1.11 5.82A11.76 11.76 0 0 0 4 44a11.76 11.76 0 0 0 4.25 2.77 17.59 17.59 0 0 0 5.83 1.12c2.55.12 3.38.14 9.9.14s7.34 0 9.9-.14a17.56 17.56 0 0 0 5.82-1.12 12.27 12.27 0 0 0 7-7 17.59 17.59 0 0 0 1.12-5.83c.18-2.6.18-3.42.18-9.94s0-7.34-.14-9.9a17.56 17.56 0 0 0-1.12-5.82A11.76 11.76 0 0 0 44 4a11.76 11.76 0 0 0-4.25-2.77A17.6 17.6 0 0 0 33.9.15C31.34 0 30.52 0 24 0zm0 11.68A12.32 12.32 0 1 0 36.32 24 12.32 12.32 0 0 0 24 11.67zM24 32a8 8 0 1 1 8-8 8 8 0 0 1-8 8zM36.81 8.31a2.88 2.88 0 1 0 2.88 2.88 2.88 2.88 0 0 0-2.88-2.88z"></path>
                </svg>
              </a>
            </dd>
            <dd class="dcf-d-inline-block dcf-pt-4 dcf-pr-3">
              <a class="dcf-d-block dcf-h-6 dcf-w-6" href="https://www.linkedin.com/edu/school?id=18836" aria-label="Jane Doe on LinkedIn">
                <svg class="dcf-h-100% dcf-w-100% dcf-fill-current" focusable="false" height="16" width="16" viewBox="0 0 48 48">
                  <path d="M44.45 0H3.54A3.5 3.5 0 0 0 0 3.46v41.08A3.5 3.5 0 0 0 3.54 48h40.91A3.51 3.51 0 0 0 48 44.54V3.46A3.51 3.51 0 0 0 44.45 0zM14.24 40.9H7.11V18h7.13zm-3.56-26a4.13 4.13 0 1 1 4.13-4.13 4.13 4.13 0 0 1-4.13 4.1zm30.23 26h-7.12V29.76c0-2.66 0-6.07-3.7-6.07s-4.27 2.9-4.27 5.88V40.9h-7.11V18h6.82v3.13h.1a7.48 7.48 0 0 1 6.74-3.7c7.21 0 8.54 4.74 8.54 10.91z"></path>
                </svg>
              </a>
            </dd>
            <dd class="dcf-d-inline-block dcf-pt-4 dcf-pr-3">
              <a class="dcf-d-block dcf-h-6 dcf-w-6" href="https://www.pinterest.com/unlincoln/boards/" aria-label="Jane Doe on Pinterest">
                <svg class="dcf-h-100% dcf-w-100% dcf-fill-current" focusable="false" height="16" width="16" viewBox="0 0 48 48">
                  <path d="M24 0a24 24 0 0 0-8.75 46.35 23 23 0 0 1 .08-6.88l2.81-11.93a8.66 8.66 0 0 1-.71-3.54c0-3.34 1.93-5.83 4.34-5.83 2 0 3 1.54 3 3.38 0 2.06-1.31 5.14-2 8a3.48 3.48 0 0 0 3.55 4.34c4.27 0 7.54-4.5 7.54-11 0-5.75-4.13-9.76-10-9.76a10.39 10.39 0 0 0-10.8 10.38A9.34 9.34 0 0 0 14.85 29a.72.72 0 0 1 .17.69c-.18.76-.59 2.39-.67 2.72s-.35.53-.8.32c-3-1.4-4.87-5.78-4.87-9.3 0-7.57 5.5-14.52 15.86-14.52 8.33 0 14.8 5.93 14.8 13.86 0 8.27-5.22 14.93-12.45 14.93-2.43 0-4.72-1.26-5.5-2.76l-1.5 5.71a26.83 26.83 0 0 1-3 6.29A24 24 0 1 0 24 0z"></path>
                </svg>
              </a>
            </dd>
            <dd class="dcf-d-inline-block dcf-pt-4 dcf-pr-3">
              <a class="dcf-d-block dcf-h-6 dcf-w-6" href="https://www.snapchat.com/add/unlincoln" aria-label="Jane Doe on Snapchat">
                <svg class="dcf-h-100% dcf-w-100% dcf-fill-current" focusable="false" height="16" width="16" viewBox="0 0 48 48">
                  <path d="M24.46 1.44h-.95A12.77 12.77 0 0 0 11.66 9.1c-1.06 2.39-.81 6.44-.6 9.7 0 .38 0 .78.07 1.17a1.91 1.91 0 0 1-.93.2 5.36 5.36 0 0 1-2.2-.58 1.78 1.78 0 0 0-.76-.16A2.38 2.38 0 0 0 4.89 21c-.13.69.18 1.7 2.4 2.58.2.08.44.16.7.24.92.29 2.31.73 2.68 1.62a2.13 2.13 0 0 1-.23 1.76c-.12.28-3.06 7-9.58 8.06a1 1 0 0 0-.83 1 1.34 1.34 0 0 0 .11.45c.49 1.14 2.56 2 6.32 2.57a4.67 4.67 0 0 1 .34 1.14c.08.36.16.73.28 1.13a1.11 1.11 0 0 0 1.16.85 6.05 6.05 0 0 0 1.08-.15 12.67 12.67 0 0 1 2.56-.29 11.27 11.27 0 0 1 1.83.15 8.7 8.7 0 0 1 3.4 1.89c1.71 1.21 3.65 2.58 6.59 2.58h.59c2.94 0 4.88-1.37 6.59-2.58a8.7 8.7 0 0 1 3.44-1.78 11.25 11.25 0 0 1 1.83-.15 12.75 12.75 0 0 1 2.56.27 6 6 0 0 0 1.08.13h.05a1.08 1.08 0 0 0 1.16-.85c.11-.38.19-.75.27-1.11a4.64 4.64 0 0 1 .34-1.13c3.76-.58 5.83-1.42 6.31-2.56a1.32 1.32 0 0 0 .11-.45 1 1 0 0 0-.83-1c-6.53-1.08-9.46-7.77-9.58-8.06a2.13 2.13 0 0 1-.23-1.76c.38-.89 1.76-1.33 2.68-1.62.26-.08.5-.16.7-.24 1.63-.64 2.44-1.43 2.43-2.35a2 2 0 0 0-1.46-1.68 2.67 2.67 0 0 0-1-.19 2.21 2.21 0 0 0-.92.19 5.6 5.6 0 0 1-2.07.59 1.84 1.84 0 0 1-.81-.2c0-.33 0-.67.06-1v-.14c.21-3.26.46-7.32-.6-9.71a12.79 12.79 0 0 0-11.94-7.76z"></path>
                </svg>
              </a>
            </dd>
            <dd class="dcf-d-inline-block dcf-pt-4 dcf-pr-3">
              <a class="dcf-d-block dcf-h-6 dcf-w-6" href="https://joinmastodon.org/" aria-label="Jane Doe on Mastodon">
                <svg class="dcf-h-100% dcf-w-100% dcf-fill-current" focusable="false" height="16" width="16" viewBox="0 0 48 48">
                  <path d="M46.4 15.8c0-10.4-6.8-13.5-6.8-13.5C36.1.7 30.2.1 24.1 0h-.2c-6.1.1-12 .7-15.5 2.3 0 0-6.8 3.1-6.8 13.5v8.3c.2 10.2 1.9 20.2 11.3 22.7C17.3 47.9 21 48.1 24 48c5.4-.3 8.5-1.9 8.5-1.9l-.2-3.9s-3.9 1.2-8.3 1.1c-4.3-.1-8.9-.5-9.6-5.8-.1-.5-.1-1-.1-1.5 0 0 4.2 1 9.6 1.3 3.3.2 6.4-.2 9.5-.6 6-.7 11.3-4.4 11.9-7.8 1.2-5.5 1.1-13.1 1.1-13.1zm-8.1 13.4h-5V16.9c0-2.6-1.1-3.9-3.3-3.9-2.4 0-3.6 1.6-3.6 4.6v6.7h-5v-6.7c0-3.1-1.2-4.6-3.6-4.6-2.2 0-3.3 1.3-3.3 3.9v12.2h-5V16.6c0-2.6.7-4.6 2-6.1C13 8.9 14.8 8.1 17 8.1c2.6 0 4.5 1 5.8 2.9l1.2 2.1 1.2-2.1c1.3-2 3.2-2.9 5.8-2.9 2.2 0 4 .8 5.3 2.3 1.3 1.5 2 3.6 2 6.1v12.7z"></path>
                </svg>
              </a>
            </dd>
          </dl>
        </address>
      </div>
    </div>
  </li>
</ol>

Update HTML for abbreviated teasers

<ol class="unlcms-abbr-teaser-person-list dcf-d-grid dcf-col-gap-vw dcf-row-gap-6" role="list">
  <li class="dcf-mb-0 dcf-card-as-link unlcms-img-zoom-hover" itemscope itemtype="https://schema.org/Person">
    <div class="unlcms-abbr-teaser-person dcf-d-grid dcf-col-gap-4 dcf-row-gap-2">
      <div class="unlcms-abbr-teaser-person-img dcf-flex-shrink-0">
        <div class="dcf-ratio dcf-ratio-1x1 unl-bg-light-gray unl-frame-quad">
          <img class="dcf-ratio-child dcf-obj-fit-cover" src="https://ucomm.unl.edu/images/directory/lewis.jpg" itemprop="image" alt="">
        </div>
      </div>
      <div class="unlcms-abbr-teaser-person-text dcf-flex-shrink-0 dcf-as-center">
        <div class="dcf-lh-2 dcf-mb-1"><a href="#" class="dcf-txt-h5 dcf-bold dcf-word-wrap dcf-card-link dcf-txt-decor-hover unl-ls-h" itemprop="name">Clay Lorem Ipsum Dolor Lewis</a></div>
        <div class="dcf-lh-3 dcf-txt-xs dcf-italic" itemprop="jobTitle">Designer of Dungeons / Developer of Dragons</div>
      </div>
    </div>
  </li>
</ol>

Updated CSS

.unlcms-img-zoom-hover:hover img {
  transform: scale(1.03);
}

.unlcms-img-zoom-hover img,
.unlcms-img-zoom-hover:hover img {
  transition: transform 250ms cubic-bezier(.25, .46, .45, .94) ;
}

.unlcms-teaser-person-vip,
.unlcms-teaser-person,
.unlcms-abbr-teaser-person {
  container-type: inline-size;
}

.unlcms-teaser-person-vip-img,
.unlcms-teaser-person-img,
.unlcms-abbr-teaser-person-img,
.unlcms-teaser-person-vip-text,
.unlcms-teaser-person-text,
.unlcms-abbr-teaser-person-text {
  grid-column: 1 / -1;
}

/* Centered Teaser */
.unlcms-centered-teaser-person-list > li { flex-basis: 31.57rem; }


/* VIP */
.unlcms-teaser-person-vip { grid-template-columns: repeat(12, minmax(10px, 1fr)); }

@container (min-width: 42.09em) {
  .unlcms-teaser-person-vip-img { grid-column: 1 / 7; }
  .unlcms-teaser-person-vip-text { grid-column: 7 / -1; }
}

@container (min-width: 56.12em) {
  .unlcms-teaser-person-vip-img { grid-column: 1 / 6; }
  .unlcms-teaser-person-vip-text { grid-column: 6 / -1; }
}

/* Teaser */
.unlcms-teaser-person { grid-template-columns: 2fr 3fr; }

@container (min-width: 23.68em) {
  .unlcms-teaser-person-img { grid-column: 1 / 2; }
  .unlcms-teaser-person-text { grid-column: 2 / -1; }
}

@media screen and (min-width: 23.68em) {
  .unlcms-teaser-person-list { grid-template-columns: repeat( auto-fit, minmax(15rem, 1fr) ); }
}

/* Abbreviated Teaser */
.unlcms-abbr-teaser-person { grid-template-columns: 1fr 2fr; }

@container (min-width: 20em) {
  .unlcms-abbr-teaser-person-img { grid-column: 1 / 2; }
  .unlcms-abbr-teaser-person-text { grid-column: 2 / -1; }
}

@media screen and (min-width: 23.68em) {
  .unlcms-abbr-teaser-person-list { grid-template-columns: repeat( auto-fit, minmax(13.32rem, 1fr) ); }
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@sarongebre sarongebre

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@skoolbus39 @sarongebre