utopia

by phloe

HTML

<link rel="stylesheet" href="https://www.dr.dk/global/publik-variable.css">


<div class="grid">
  <div class="card">
    <div class="heading">
      <a class="title title--large" href="#">
        <span>Præsident Xi tog imod minister Blinken:</span> 'Fra kinesernes side er det her et dybt buk for USA'
      </a>
      <span>Politik</span>
    </div>
    <div class="media"></div>
  </div>
  <div class="card">
    <div class="heading">
      <a class="title title--small" href="#">
        Holger Rune leverer kæmpe comeback i dramatisk maratondyst
      </a>
      <span>Sport</span>
    </div>
  </div>
</div>

CSS

:root {
  --ascender: var(--dr-font-publik-ascender, 1);
	--cap-height: var(--dr-font-publik-cap-height, 0.69);
	--x-height: var(--dr-font-publik-x-height, 0.5);
	--descender: calc(var(--dr-font-publik-descender, 0.2) * -1);
}

body {
  margin: 5vw;
  font-family: Publik;
}

.grid {
  --size: 16;
  display: grid;
  gap: calc((var(--size) / 375) * 100cqi);
  container-type: inline-size;
}

.card {
  --size: 12;
  container-type: inline-size;
  display: grid;
  grid-template-areas: "media" "heading";
  gap: calc((var(--size) / 375) * 100cqi);
  
  @container (min-width: 700px) {
    grid-template-areas: "media heading";
    grid-template-columns: 1fr 1.618fr;
  }
}

.media {
  grid-area: media;
  aspect-ratio: 16/9;
  background-color: #0001;
}

.heading {
  container-type: inline-size;
  grid-area: heading;
  display: grid;
  align-self: start;
}

.heading > span {
  --char-height: var(--cap-height);
  --line-height: 1.1;
  --half-leading: calc((var(--line-height) - var(--char-height)) / 2);
	--offset: calc((var(--descender) + (var(--ascender) - var(--char-height))) / 2);
  font-size: calc(((8 / var(--char-height))/ 16) * 1rem);
  font-weight: 600;
  color: red;
  order: -1;
  
  &::before {
    content: "";
    display: table;
    margin-bottom: calc((var(--half-leading) + var(--offset))* -1em);
  }
  
  &::after {
    content: "";
    display: table;
    margin-top: calc((var(--half-leading) - var(--offset))* -1em);
  }
}

.title {
  --char-height: var(--cap-height);
  --line-height: 1.1;
  --half-leading: calc((var(--line-height) - var(--char-height)) / 2);
	--offset: calc((var(--descender) + (var(--ascender) - var(--char-height))) / 2);
  font-weight: 600;
  font-size: clamp(var(--size) * 1px, (var(--size) / 375) * 100cqi, 100px);
  line-height: var(--line-height);
  text-decoration: none;
  display: block;
  margin-top: calc((var(--line-height) - var(--char-height)) * 1em);
  
  &::before {
    content: "";
    display: table;
    margin-bottom:...