search

unlcms / project-herbie

Drupal 10 implementation at the University of Nebraska–Lincoln
https://cms.unl.edu
GNU General Public License v2.0
5 stars 6 forks source link

Component: Icon Links #401

Closed skoolbus39 closed 10 months ago

skoolbus39 commented 11 months ago

See section immediately below hero on homepage for example. The code is a little less elegant than I'd prefer, but it works. Lists with 2–8 items get styling specific to the number of items. More than 9 items will receive more general styling. This will need to be incorporated with whatever SVG icon solution we choose.

<style>

  .unlcms-ul-icon-links,
  .unlcms-ul-icon-links:has(> :last-child:nth-child(3)),
  .unlcms-ul-icon-links:has(> :last-child:nth-child(5)),
  .unlcms-ul-icon-links:has(> :last-child:nth-child(7)),
  .unlcms-ul-icon-links:has(:nth-child(n+9)) {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
  }

  .unlcms-ul-icon-links:has(> :last-child:nth-child(3)) li,
  .unlcms-ul-icon-links:has(> :last-child:nth-child(5)) li,
  .unlcms-ul-icon-links:has(> :last-child:nth-child(7)) li,
  .unlcms-ul-icon-links:has(:nth-child(n+9)) li {
    --item-size: 10em;
    flex: 1 0 var(--item-size);
  }

  .unlcms-ul-icon-links:has(> :last-child:nth-child(2)),
  .unlcms-ul-icon-links:has(> :last-child:nth-child(4)),
  .unlcms-ul-icon-links:has(> :last-child:nth-child(6)),
  .unlcms-ul-icon-links:has(> :last-child:nth-child(8)) {
    --item-size: 10em;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--item-size), 1fr));
  }

  @media screen and (min-width: 36.75em) and (max-width: 53em) {

    .unlcms-ul-icon-links:has(> :last-child:nth-child(4)) {
      --item-size: 15em;
    }

  }

  @media screen and (min-width: 52.5em) and (max-width: 65em) {

    .unlcms-ul-icon-links:has(> :last-child:nth-child(5)) li {
      --item-size: 15em;
    }

  }

  @media screen and (min-width: 52.5em) and (max-width: 84em) {

    .unlcms-ul-icon-links:has(> :last-child:nth-child(6)) {
      --item-size: 15em;
    }

  }

  @media screen and (min-width: 65em) and (max-width: 94em) {

    .unlcms-ul-icon-links:has(> :last-child:nth-child(5)) li {
      --item-size: 8.43em;
    }

  }

  @media screen and (min-width: 71.5em) and (max-width: 101em) {

    .unlcms-ul-icon-links:has(> :last-child:nth-child(7)) li {
      --item-size: 13.32em;
    }

  }

  @media screen and (min-width: 71.5em) and (max-width: 98em) {

    .unlcms-ul-icon-links:has(> :last-child:nth-child(8)) {
      --item-size: 13.32em;
    }

  }

  @media screen and (min-width: 84em) and (max-width: 94em) {

    .unlcms-ul-icon-links:has(> :last-child:nth-child(6)) {
      --item-size: 8.43em;
    }

  }

  @media screen and (min-width: 98em) {

    .unlcms-ul-icon-links:has(> :last-child:nth-child(8)) {
      --item-size: 15em;
    }

    .unlcms-ul-icon-links:has(:nth-child(n+9)) li {
      --item-size: 13.32em;
    }

  }

  @media screen and (min-width: 101em) {

    .unlcms-ul-icon-links:has(> :last-child:nth-child(7)) li {
      --item-size: 8.43em;
    }

  }
</style>

<div class="dcf-bleed dcf-wrapper dcf-pt-9 dcf-pb-9">
  <ul class="dcf-list-bare dcf-col-gap-vw dcf-row-gap-7 dcf-mb-0 dcf-lh-3 dcf-bold unlcms-ul-icon-links">
    <li class="dcf-mb-0 unlcms-li-icon-link">
      <a class="dcf-d-flex dcf-flex-col dcf-flex-nowrap dcf-ai-center dcf-txt-center dcf-txt-decor-hover" href="https://admissions.unl.edu/visit/">
        <svg class="dcf-flex-shrink-0 dcf-h-7 dcf-w-8 dcf-mb-3 dcf-fill-current" aria-hidden="true" focusable="false" height="24" width="32" viewBox="0 0 32 24"><path fill="none" d="M0 0h32v24H0z"></path><path d="M28.4 20.3c-1.1 0-2.3-.1-3.5-.1-.9-.1-1.8-.2-2.7-.2l-14.6-.2c-.1 0-.3-.1-.4-.2s-.1-.2-.1-.4l.3-3.8-6.4-.5c-.1 0-.3-.1-.3-.2-.1-.1-.1-.2-.1-.4L1.5 5c0-.3.3-.5.5-.5l18.4 1.3c.1 0 .2.1.3.1l.3.3s.1.1.2.1c.4.3.6.4.9.3.3 0 .6-.2.9-.4.6-.3 1.2-.7 2.1-.3.4.2.8.5 1.2.8.2.1.4.3.6.4.2.1.4.2.5.4.2.2.2.4.3.6l1.4 3.9c.2.4.3.9.4 1.4.1.6.2 1.2.1 1.8v.5c0 .1.1.3.3.4.2.3.5.6.5 1.1v.2c0 .1 0 .1.1.1.5.4 1.1 1.1 1.2 1.8 0 .3-.2.5-.4.5-1.1.4-2 .5-2.9.5zM8.2 18.8l14 .2c.9 0 1.9.1 2.8.1 1.8.1 3.6.2 5.3.1-.1-.2-.3-.4-.6-.6-.2-.1-.4-.3-.5-.6v-.5c0-.2-.1-.4-.2-.5-.2-.2-.4-.5-.5-.8-.1-.3 0-.6 0-.8.1-.6.1-1.1 0-1.5-.1-.4-.2-.8-.4-1.2l-1.4-3.9c0-.1-.1-.2-.1-.3-.1-.1-.2-.1-.3-.2-.3-.2-.5-.3-.6-.5-.4-.2-.7-.5-1.1-.7-.4-.2-.7-.1-1.2.2-.3.2-.7.4-1.2.5-.8.1-1.2-.2-1.7-.5l-.2-.2-.3-.2L2.3 5.6l-.8 8.3 6.5.5c.3 0 .5.3.5.5l-.3 3.9z"></path><path d="M26 14.4c0-.1-.1-.1-.1-.1h-1l-.6-1.1c0-.1-.1-.1-.1-.1-.1 0-.1 0-.1.1l-.6 1.1h-1c-.1 0-.1 0-.1.1v.2l.8.7-.4 1.3c0 .1 0 .1.1.2h.2l1.1-.8 1.1.8h.2c.1 0 .1-.1.1-.2l-.4-1.3.8-.7v-.2z"></path></svg>
        <span class="dcf-txt-sm">Visit Nebraska</span>
      </a>
    </li>
    <li class="dcf-mb-0 unlcms-li-icon-link">
      <a class="dcf-d-flex dcf-flex-col dcf-flex-nowrap dcf-ai-center dcf-txt-center dcf-txt-decor-hover" href="apply">
        <svg class="dcf-flex-shrink-0 dcf-h-7 dcf-w-8 dcf-mb-3 dcf-fill-current" aria-hidden="true" focusable="false" height="24" width="32" viewBox="0 0 32 24"><path fill="none" d="M0 0h32v24H0z"></path><path d="M25.5 22.5H19c-.2 0-.3-.1-.4-.2l-6.4-10.1v4.4h.9c.3 0 .5.2.5.5V22c0 .3-.2.5-.5.5H5.5c-.3 0-.5-.2-.5-.5v-4.9c0-.3.2-.5.5-.5h.9V7.4h-.9c-.3 0-.5-.2-.5-.5V2c0-.3.2-.5.5-.5H12c.2 0 .3.1.4.2l6.4 10.1V7.4h-.9c-.3 0-.5-.2-.5-.5V2c0-.3.2-.5.5-.5h7.6c.3 0 .5.2.5.5v4.9c0 .3-.2.5-.5.5h-.9v9.1h.9c.3 0 .5.2.5.5v5c0 .3-.2.5-.5.5zm-6.2-1H25v-3.9h-.9c-.3 0-.5-.2-.5-.5V6.9c0-.3.2-.5.5-.5h.9V2.5h-6.6v3.9h.9c.3 0 .5.2.5.5v6.6c0 .2-.1.4-.4.5-.2.1-.4 0-.6-.2L11.7 2.5H6v3.9h.9c.3 0 .5.2.5.5V17c0 .3-.2.5-.5.5H6v3.9h6.6v-3.9h-.9c-.3 0-.5-.2-.5-.5v-6.6c0-.2.1-.4.4-.5.2-.1.4 0 .6.2l7.1 11.4z"></path></svg>
        <span class="dcf-txt-sm">Become a Husker</span>
      </a>
    </li>
    <li class="dcf-mb-0 unlcms-li-icon-link">
      <a class="dcf-d-flex dcf-flex-col dcf-flex-nowrap dcf-ai-center dcf-txt-center dcf-txt-decor-hover" href="https://admissions.unl.edu/cost/">
        <svg class="dcf-flex-shrink-0 dcf-h-7 dcf-w-8 dcf-mb-3 dcf-fill-current" aria-hidden="true" focusable="false" height="24" width="32" viewBox="0 0 32 24"><path fill="none" d="M0 0h32v24H0z"></path><g><path d="M9.3 22.1H5.5c-.3 0-.5-.2-.5-.5v-7.7c0-.3.2-.5.5-.5h3.8c.3 0 .5.2.5.5v7.7c0 .3-.2.5-.5.5zm-3.3-1h2.8v-6.7H6v6.7z"></path><path d="M17.1 22.9c-1.3 0-2.7-.5-5.2-1.4-.8-.3-1.7-.6-2.8-1-.3-.1-.4-.4-.3-.6.1-.3.4-.4.6-.3 1.1.4 2 .7 2.8 1 5.2 1.8 5.2 1.8 10.3-.9 1.1-.6 2.4-1.3 4.1-2.1-.7-.5-1.2-.5-1.9-.4l-4.2 1.4c-.3.1-.5-.1-.6-.3-.1-.3.1-.5.3-.6l4.2-1.4c1.3-.4 2.3 0 3.4 1.1.1.1.2.3.1.4 0 .2-.1.3-.3.4-2 1-3.5 1.8-4.7 2.4-2.8 1.6-4.2 2.3-5.8 2.3z"></path><path d="M19.4 19.2h-5.3c-.3 0-.5-.2-.5-.5s.2-.5.5-.5h5.3c.5 0 .6-.2.6-.5s-.2-.5-.6-.5h-2.9c-.1 0-.3-.1-.4-.1-.5-.5-2-1.8-4-1.8H9.3c-.3 0-.5-.2-.5-.5s.2-.5.5-.5h2.9c2.2 0 3.8 1.2 4.5 1.9h2.7c1.1 0 1.6.7 1.6 1.5s-.5 1.5-1.6 1.5zm2.4-11.5c-1.9 0-3.4-1.5-3.4-3.4S19.9 1 21.8 1s3.4 1.5 3.4 3.4-1.6 3.3-3.4 3.3zm0-5.7c-1.3 0-2.4 1.1-2.4 2.4s1.1 2.4 2.4 2.4 2.4-1.1 2.4-2.4S23.1 2   21.8 2zM17 14.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.6 3.4-3.4 3.4zm0-5.7c-1.3 0-2.4 1.1-2.4 2.4s1.1 2.4 2.4 2.4c1.3 0 2.4-1.1 2.4-2.4S18.3 8.7 17 8.7z"></path><path d="M17 12.5c-.3 0-.5-.2-.5-.5v-1.9c0-.3.2-.5.5-.5s.5.2.5.5V12c0 .3-.2.5-.5.5zm4.8-6.7c-.3 0-.5-.2-.5-.5V3.4c0-.3.2-.5.5-.5s.5.2.5.5v1.9c0 .3-.3.5-.5.5z"></path></g></svg>
        <span class="dcf-txt-sm">Cost &amp; Aid</span>
      </a>
    </li>
    <li class="dcf-mb-0 unlcms-li-icon-link">
      <a class="dcf-d-flex dcf-flex-col dcf-flex-nowrap dcf-ai-center dcf-txt-center dcf-txt-decor-hover" href="https://maps.unl.edu">
        <svg class="dcf-flex-shrink-0 dcf-h-7 dcf-w-8 dcf-mb-3 dcf-fill-current" aria-hidden="true" focusable="false" height="24" width="32" viewBox="0 0 32 24"><path fill="none" d="M0 0h32v24H0z"></path><g><path d="M12.1 20.8c-.3 0-.5-.2-.5-.5v-14c0-.3.2-.5.5-.5s.5.2.5.5v13.9c0 .3-.2.6-.5.6zm6.1-9.6c-.3 0-.5-.2-.5-.5V2c0-.3.2-.5.5-.5s.5.2.5.5v8.7c0 .3-.3.5-.5.5z"></path><path d="M12.1 20.8c-.1 0-.2 0-.3-.1l-6.1-4.3c-.1-.1-.2-.2-.2-.4V2c0-.2.1-.4.3-.4.2-.1.4-.1.5 0l5.8 4.1 5.8-4.1c.2-.1.4-.1.6 0l6.1 4.3c.1.1.2.2.2.4v4.3c0 .3-.2.5-.5.5s-.5-.2-.5-.5v-4l-5.6-4-5.8 4.1c-.2.1-.4.1-.6 0L6.5 3v12.7l5.6 4 4.9-3.5c.2-.2.5-.1.7.1.2.2.1.5-.1.7l-5.2 3.7c-.1 0-.2.1-.3.1z"></path><path d="M22.5 22.5c-.1 0-.3-.1-.4-.2-.4-.4-3.6-4.4-3.6-6.4 0-2.2 1.8-4 4-4s4 1.8 4 4c0 2-3.2 6-3.6 6.4-.1.1-.2.2-.4.2zm0-9.6c-1.6 0-3 1.3-3 3 0 1.3 1.9 3.9 3 5.3 1.1-1.4 3-4 3-5.3 0-1.6-1.3-3-3-3z"></path><path d="M22.5 17.7c-1 0-1.8-.8-1.8-1.8s.8-1.8 1.8-1.8 1.8.8 1.8 1.8-.8 1.8-1.8 1.8zm0-2.6c-.4 0-.8.4-.8.8s.4.8.8.8.8-.4.8-.8-.3-.8-.8-.8z"></path></g></svg>
        <span class="dcf-txt-sm">Get Around Campus</span>
      </a>
    </li>
    <li class="dcf-mb-0">
      <a class="dcf-d-flex dcf-flex-col dcf-flex-nowrap dcf-ai-center dcf-txt-center dcf-txt-decor-hover" href="https://www.unl.edu/chancellor/university-messages">
        <svg class="dcf-flex-shrink-0 dcf-h-7 dcf-w-8 dcf-mb-3 dcf-fill-current" aria-hidden="true" focusable="false" height="24" width="32" viewBox="0 0 32 24"><path fill="none" d="M0 0h32v24H0z"></path><g><path d="M20.7 23h-9.1c-.3 0-.5-.2-.5-.5V12.4c0-.3.2-.5.5-.5h9.1c.3 0 .5.2.5.5v10.1c0 .3-.2.5-.5.5zm-8.6-1h8.1v-9.1h-8.1V22z"></path><path d="M20.7 12.9h-9.1c-.2 0-.3-.1-.4-.2-.1-.1-.1-.3 0-.5l.8-1.6c.3-.6.5-1.2.5-1.8.1-1.4 1.3-2.4 2.7-2.4h1.9c1.4 0 2.5 1 2.7 2.4.1.6.2 1.2.5 1.8l.8 1.6c.1.1.1.3 0 .5-.1.1-.2.2-.4.2zm-8.3-1h7.5l-.4-.8c-.3-.7-.6-1.4-.6-2.2-.1-.8-.8-1.5-1.7-1.5h-1.9c-.8 0-1.6.6-1.7 1.5-.1.8-.3 1.5-.6 2.2l-.6.8zm5.4 8.2h-3.2c-.3 0-.5-.2-.5-.5V15c0-.3.2-.5.5-.5h3.2c.3 0 .5.2.5.5v4.5c0 .4-.3.6-.5.6zm-2.8-1h2.2v-3.6H15v3.6z"></path><path d="M16.1 7.2c-.3 0-.5-.2-.5-.5V1.2c0-.3.2-.5.5-.5s.5.2.5.5v5.5c0 .3-.2.5-.5.5zm5.4 5.7H10.8c-.3 0-.5-.2-.5-.5s.2-.5.5-.5h10.7c.3 0 .5.2.5.5s-.2.5-.5.5z"></path></g></svg>
        <span class="dcf-txt-sm">Chancellor's Messages</span>
      </a>
    </li>
   <li class="dcf-mb-0">
      <a class="dcf-d-flex dcf-flex-col dcf-flex-nowrap dcf-ai-center dcf-txt-center dcf-txt-decor-hover" href="https://huskers.com/">
        <svg class="dcf-flex-shrink-0 dcf-h-7 dcf-w-8 dcf-mb-3 dcf-fill-current" aria-hidden="true" focusable="false" height="24" width="32" viewBox="0 0 32 24"><path fill="none" d="M0 0h32v24H0z"></path><g><path d="M5.4 20.8c-.1 0-.2 0-.3-.1-.1-.1-.2-.2-.2-.4V4c0-.2.1-.3.2-.4.1-.1.3-.1.5-.1l25 9.6c.2.1.3.3.3.5s-.2.4-.4.5l-25 6.6c0 .1 0 .1-.1.1zm.5-16.1v14.9l22.9-6.1L5.9 4.7z"></path><path d="M7.3 20.1c-.3 0-.5-.2-.5-.5V4.7c0-.3.2-.5.5-.5s.5.2.5.5v14.8c0 .3-.2.6-.5.6zM5.3 9h-.2L1.8 7.4c-.2-.1-.3-.3-.3-.5v-2c0-.2.1-.3.2-.4.1-.1.3-.1.5 0L5.5 6c.2.1.3.3.3.5v2c0 .2-.1.3-.2.4-.1.1-.2.1-.3.1zM2.5 6.6l2.3 1.1v-.9L2.5 5.7v.9z"></path><path d="M2 10.8c-.1 0-.2 0-.3-.1-.1-.1-.2-.3-.2-.4v-2c0-.2.1-.4.3-.4l1.3-.7c.2-.1.5 0 .7.2.1.2 0 .5-.2.7l-1.1.5v.9l2.6-1.2c.3-.1.5 0 .7.2.1.3 0 .5-.2.7l-3.3 1.5c-.2 0-.2.1-.3.1zm3.3 7.3h-.2l-3.3-1.5c-.2-.1-.3-.3-.3-.5v-2c0-.2.1-.3.2-.4.1-.1.3-.1.5 0l3.3 1.5c.2.1.3.3.3.5v2c0 .2-.1.3-.2.4-.1-.1-.2 0-.3 0zm-2.8-2.4l2.3 1.1v-.9l-2.3-1.1v.9z"></path><path d="M2 19.8c-.1 0-.2 0-.3-.1-.1-.1-.2-.3-.2-.4v-2c0-.2.1-.4.3-.4l1.3-.7c.2-.1.5 0 .7.2.1.2 0 .5-.2.7l-1.1.5v.9l2.6-1.2c.3-.1.5 0 .7.2.1.2 0 .5-.2.7l-3.3 1.5c-.2.1-.2.1-.3.1zm8.6-2.6c-.3 0-.5-.2-.5-.5V8.3c0-.3.2-.5.5-.5s.5.2.5.5v8.4c0 .3-.2.5-.5.5zm3.8-.9c-.3 0-.5-.2-.5-.5V10c0-.3.2-.5.5-.5s.5.2.5.5v5.8c0 .3-.2.5-.5.5z"></path><path d="M14.4 16.3c-.2 0-.4-.1-.4-.3l-3.8-7.5c-.1-.2 0-.5.2-.7.2-.1.5 0 .7.2l3.8 7.5c.1.2 0 .5-.2.7-.1.1-.2.1-.3.1zm3.9-.9c-.5 0-1.1-.2-1.5-.5-.6-.5-.9-1.1-.9-1.9v-2.5c0-.3.2-.5.5-.5s.5.2.5.5V13c0 .4.2.8.5 1.1.3.3.8.4 1.2.3.6-.1 1.1-.7 1.1-1.3v-1.4c0-.3.2-.5.5-.5s.5.2.5.5V13c0 1.1-.8 2.1-1.8 2.3-.2 0-.4.1-.6.1z"></path></g></svg>
        <span class="dcf-txt-sm">Husker Athletics</span>
      </a>
    </li>
    <li class="dcf-mb-0 unlcms-li-icon-link">
      <a class="dcf-d-flex dcf-flex-col dcf-flex-nowrap dcf-ai-center dcf-txt-center dcf-txt-decor-hover" href="https://admissions.unl.edu/visit/">
        <svg class="dcf-flex-shrink-0 dcf-h-7 dcf-w-8 dcf-mb-3 dcf-fill-current" aria-hidden="true" focusable="false" height="24" width="32" viewBox="0 0 32 24"><path fill="none" d="M0 0h32v24H0z"></path><path d="M28.4 20.3c-1.1 0-2.3-.1-3.5-.1-.9-.1-1.8-.2-2.7-.2l-14.6-.2c-.1 0-.3-.1-.4-.2s-.1-.2-.1-.4l.3-3.8-6.4-.5c-.1 0-.3-.1-.3-.2-.1-.1-.1-.2-.1-.4L1.5 5c0-.3.3-.5.5-.5l18.4 1.3c.1 0 .2.1.3.1l.3.3s.1.1.2.1c.4.3.6.4.9.3.3 0 .6-.2.9-.4.6-.3 1.2-.7 2.1-.3.4.2.8.5 1.2.8.2.1.4.3.6.4.2.1.4.2.5.4.2.2.2.4.3.6l1.4 3.9c.2.4.3.9.4 1.4.1.6.2 1.2.1 1.8v.5c0 .1.1.3.3.4.2.3.5.6.5 1.1v.2c0 .1 0 .1.1.1.5.4 1.1 1.1 1.2 1.8 0 .3-.2.5-.4.5-1.1.4-2 .5-2.9.5zM8.2 18.8l14 .2c.9 0 1.9.1 2.8.1 1.8.1 3.6.2 5.3.1-.1-.2-.3-.4-.6-.6-.2-.1-.4-.3-.5-.6v-.5c0-.2-.1-.4-.2-.5-.2-.2-.4-.5-.5-.8-.1-.3 0-.6 0-.8.1-.6.1-1.1 0-1.5-.1-.4-.2-.8-.4-1.2l-1.4-3.9c0-.1-.1-.2-.1-.3-.1-.1-.2-.1-.3-.2-.3-.2-.5-.3-.6-.5-.4-.2-.7-.5-1.1-.7-.4-.2-.7-.1-1.2.2-.3.2-.7.4-1.2.5-.8.1-1.2-.2-1.7-.5l-.2-.2-.3-.2L2.3 5.6l-.8 8.3 6.5.5c.3 0 .5.3.5.5l-.3 3.9z"></path><path d="M26 14.4c0-.1-.1-.1-.1-.1h-1l-.6-1.1c0-.1-.1-.1-.1-.1-.1 0-.1 0-.1.1l-.6 1.1h-1c-.1 0-.1 0-.1.1v.2l.8.7-.4 1.3c0 .1 0 .1.1.2h.2l1.1-.8 1.1.8h.2c.1 0 .1-.1.1-.2l-.4-1.3.8-.7v-.2z"></path></svg>
        <span class="dcf-txt-sm">Visit Nebraska</span>
      </a>
    </li>
    <li class="dcf-mb-0 unlcms-li-icon-link">
      <a class="dcf-d-flex dcf-flex-col dcf-flex-nowrap dcf-ai-center dcf-txt-center dcf-txt-decor-hover" href="apply">
        <svg class="dcf-flex-shrink-0 dcf-h-7 dcf-w-8 dcf-mb-3 dcf-fill-current" aria-hidden="true" focusable="false" height="24" width="32" viewBox="0 0 32 24"><path fill="none" d="M0 0h32v24H0z"></path><path d="M25.5 22.5H19c-.2 0-.3-.1-.4-.2l-6.4-10.1v4.4h.9c.3 0 .5.2.5.5V22c0 .3-.2.5-.5.5H5.5c-.3 0-.5-.2-.5-.5v-4.9c0-.3.2-.5.5-.5h.9V7.4h-.9c-.3 0-.5-.2-.5-.5V2c0-.3.2-.5.5-.5H12c.2 0 .3.1.4.2l6.4 10.1V7.4h-.9c-.3 0-.5-.2-.5-.5V2c0-.3.2-.5.5-.5h7.6c.3 0 .5.2.5.5v4.9c0 .3-.2.5-.5.5h-.9v9.1h.9c.3 0 .5.2.5.5v5c0 .3-.2.5-.5.5zm-6.2-1H25v-3.9h-.9c-.3 0-.5-.2-.5-.5V6.9c0-.3.2-.5.5-.5h.9V2.5h-6.6v3.9h.9c.3 0 .5.2.5.5v6.6c0 .2-.1.4-.4.5-.2.1-.4 0-.6-.2L11.7 2.5H6v3.9h.9c.3 0 .5.2.5.5V17c0 .3-.2.5-.5.5H6v3.9h6.6v-3.9h-.9c-.3 0-.5-.2-.5-.5v-6.6c0-.2.1-.4.4-.5.2-.1.4 0 .6.2l7.1 11.4z"></path></svg>
        <span class="dcf-txt-sm">Become a Husker</span>
      </a>
    </li>
    <li class="dcf-mb-0 unlcms-li-icon-link">
      <a class="dcf-d-flex dcf-flex-col dcf-flex-nowrap dcf-ai-center dcf-txt-center dcf-txt-decor-hover" href="https://admissions.unl.edu/cost/">
        <svg class="dcf-flex-shrink-0 dcf-h-7 dcf-w-8 dcf-mb-3 dcf-fill-current" aria-hidden="true" focusable="false" height="24" width="32" viewBox="0 0 32 24"><path fill="none" d="M0 0h32v24H0z"></path><g><path d="M9.3 22.1H5.5c-.3 0-.5-.2-.5-.5v-7.7c0-.3.2-.5.5-.5h3.8c.3 0 .5.2.5.5v7.7c0 .3-.2.5-.5.5zm-3.3-1h2.8v-6.7H6v6.7z"></path><path d="M17.1 22.9c-1.3 0-2.7-.5-5.2-1.4-.8-.3-1.7-.6-2.8-1-.3-.1-.4-.4-.3-.6.1-.3.4-.4.6-.3 1.1.4 2 .7 2.8 1 5.2 1.8 5.2 1.8 10.3-.9 1.1-.6 2.4-1.3 4.1-2.1-.7-.5-1.2-.5-1.9-.4l-4.2 1.4c-.3.1-.5-.1-.6-.3-.1-.3.1-.5.3-.6l4.2-1.4c1.3-.4 2.3 0 3.4 1.1.1.1.2.3.1.4 0 .2-.1.3-.3.4-2 1-3.5 1.8-4.7 2.4-2.8 1.6-4.2 2.3-5.8 2.3z"></path><path d="M19.4 19.2h-5.3c-.3 0-.5-.2-.5-.5s.2-.5.5-.5h5.3c.5 0 .6-.2.6-.5s-.2-.5-.6-.5h-2.9c-.1 0-.3-.1-.4-.1-.5-.5-2-1.8-4-1.8H9.3c-.3 0-.5-.2-.5-.5s.2-.5.5-.5h2.9c2.2 0 3.8 1.2 4.5 1.9h2.7c1.1 0 1.6.7 1.6 1.5s-.5 1.5-1.6 1.5zm2.4-11.5c-1.9 0-3.4-1.5-3.4-3.4S19.9 1 21.8 1s3.4 1.5 3.4 3.4-1.6 3.3-3.4 3.3zm0-5.7c-1.3 0-2.4 1.1-2.4 2.4s1.1 2.4 2.4 2.4 2.4-1.1 2.4-2.4S23.1 2   21.8 2zM17 14.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.6 3.4-3.4 3.4zm0-5.7c-1.3 0-2.4 1.1-2.4 2.4s1.1 2.4 2.4 2.4c1.3 0 2.4-1.1 2.4-2.4S18.3 8.7 17 8.7z"></path><path d="M17 12.5c-.3 0-.5-.2-.5-.5v-1.9c0-.3.2-.5.5-.5s.5.2.5.5V12c0 .3-.2.5-.5.5zm4.8-6.7c-.3 0-.5-.2-.5-.5V3.4c0-.3.2-.5.5-.5s.5.2.5.5v1.9c0 .3-.3.5-.5.5z"></path></g></svg>
        <span class="dcf-txt-sm">Cost &amp; Aid</span>
      </a>
    </li>
  </ul>
</div>
ericras commented 11 months ago

For the first rule, just doing

  .unlcms-ul-icon-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
  }

which is functionally the same thing gives better Firefox support