learner v2 with other markup and bleading

by Maxim_Wolf

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<div class="demo">
  <div class="lane">
    <button type="button" class="lane-card__outer-button">
      <article class="lane-card__item">
        <img class="lane-card__image" alt="demo card" src="https://picsum.photos/182/96">
        <svg class="lane-card__has-badges" xmlns="http://www.w3.org/2000/svg">
          <use href="#badge-icon"/>
        </svg>
        <progress class="lane-card__progress-line" max="100" value="80">80</progress>
        <h1 class="lane-card__caption">
        Understanding Modern Physics I: Relativity and Cosmology
        </h1>
        <p>
         
        </p>
      </article>
    </button>
  </div>
</div>


<div style="display:none">

<svg id="badge-icon" xmlns="http://www.w3.org/2000/svg" width="21" height="27" viewBox="0 0 21 27" fill="none">
<path d="M9.87262 14.2952L9.87264 14.2952L9.87661 14.2921L10.7601 13.6044L11.6323 14.2813L11.6323 14.2813L11.6357 14.2839C12.4878 14.9335 13.5537 14.0724 13.2786 13.1253L13.2786 13.1253L13.2772 13.1206L12.9111 11.9051L13.9695 11.046C14.7567 10.4285 14.2961 9.16056 13.3054 9.16056H12.13L11.7658 7.99718L11.7651 7.99498C11.4521 7.01081 10.0788 7.01064 9.76541 7.99448C9.76536 7.99465 9.7653 7.99481 9.76525 7.99498L9.39195 9.16056H8.20295C7.19304 9.16056 6.78935 10.4432 7.54606 11.0542L8.59771 11.915L8.23114 13.1319L8.23112 13.1319L8.22975 13.1366C7.95461 14.0837 9.0206 14.9448 9.87262 14.2952ZM5.75935 25.4562L5.75936 25.4563L5.76383 25.4547L10.7597 23.7474L15.7533 25.454C15.7537 25.4541 15.7541 25.4542 15.7544 25.4544C16.8131 25.8209 17.8719 25.0121 17.8719 23.9082V16.9384C19.2416 15.2779 20.076 13.1403 20.076 10.7904C20.076 5.53209 15.9185 1.25146 10.7597 1.25146C5.60084 1.25146 1.44336 5.53209 1.44336 10.7904C1.44336 13.1403 2.27782 15.2779 3.64744 16.9384V23.9082C3.64744 25.0066 4.70921 25.8041 5.75935 25.4562ZM10.7597 4.51121C14.1196 4.51121 16.8719 7.31487 16.8719 10.7904C16.8719 14.266...

CSS

:root {
  --litmos-lane-card: rgba(255, 250, 240, 1);
  --litmos-border-color: rgba(0, 0, 0, 0.3);
  --litmos-lane-card-radius: 1rem;
  --limtos-lane-card-min-width: 11.5rem;
  --litmos-accent4: #761EF3;
  --litmos-lane-card-font: 1em;
  --litmos-caption-size: 1.1;
  --litmos-type-size: 0.7857;
  --litmos-footer-size: 0.7142;
  --litmos-accent2: #761EF3;
}

html {
  font-family: sans-serif;
}

.demo {
  display: grid;
  height: 100vh;
  width: 100%;
  align-items: center;
  justify-items: center;
  background-color: rgba(0, 0, 0, 0.3);
}


.lane {
  height: calc(var(--limtos-lane-card-min-width) + 2rem);
  width: 100%;
  background-color: rgba(0, 0, 0, 0.3);
}

.lane-card__outer-button {
  height: calc(var(--limtos-lane-card-min-width) + 1rem);
  width: var(--limtos-lane-card-min-width);
  margin: 0.5rem;
  padding: 0;
  border: none;
  background: transparent;

}

.lane-card__item {
  min-height: calc(var(--limtos-lane-card-min-width) + 1rem);
  height: 100%;
  width: var(--limtos-lane-card-min-width);
  margin: 0;
  padding: 0;
  border: none;
  background-color: rgba(255, 255, 255, 0.8);
  border-width: 1px;
  border-color: var(--litmos-border-color);
  border-radius: var(--litmos-lane-card-radius);
  border-style: solid;
  overflow: hidden;
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: 90px repeate(auto);
}

.lane-card__item:hover {
  min-height: calc(var(--limtos-lane-card-min-width) + 1rem);
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.3)
}

.lane-card__image {
  width: var(--limtos-lane-card-min-width);
  height: calc(var(--limtos-lane-card-min-width) / 2);
  display: inline;
  grid-column-start: 1;
  grid-column-end: -1;
  grid-row-start: 1;
  grid-row-end: -1;
}

.lane-card__has-badges {
  justify-self: end;
  width: 21px;
  height: 27px;
  padding-top: 0.5rem;
  padding-right: 0.5rem;
  grid-column-start: 1;
  grid-column-end: -1;
  grid-row-start: 1;
  grid-row-end: -1;
}

.lane-card__progress-line {
  width: 100%;
  height: 0.25rem;
 ...

JavaScript

const button = document.querySelector('.lane-card__outer-button');
button.addEventListener('click',()=>{window.console.log(new Date().valueOf())})