phloe.co

by phloe

HTML

<link rel="stylesheet" href="https://www.dr.dk/global/publik.css">
<style>
:root {
  --ascender: var(--dr-font-publik-ascender);
	--cap-height: var(--dr-font-publik-cap-height);
	--descender: var(--dr-font-publik-descender);
	--line-height-normal: calc(var(--ascender) + var(--descender));
  
  --scale: 1.618;
  --medium: 1;
  --small:calc(var(--medium) / var(--scale));
  --x-small:calc(var(--small) / var(--scale));
  --large: calc(var(--medium) * var(--scale));
  --x-large: calc(var(--large) * var(--scale));
  --xx-large: calc(var(--x-large) * var(--scale));
  
  --bullet-fg-color: currentColor;
  --bullet-bg-color: transparent;
  --bullet-bg: 0% 0% / var(--block) var(--block) transparent linear-gradient(135deg, var(--bullet-fg-color) 50%, var(--bullet-bg-color) 50%) round round;
}

body {
  margin: 0;
  font-family: Publik;
  background: #EEE;
  color: #333;
}

header {
  margin: 0 auto;
  padding: 0 1rem;
  max-width: 60ch;
}

header::before {
  content: "";
  display: block;
  height: calc(var(--medium) * 1rem);
  background-color: currentColor;
}

header h3 {
  margin: calc(var(--size) * 1rem) 0;
}

header .meta {
  margin-top: 0;
}

article {
  margin: 2rem auto;
  padding: 0 1rem;
  max-width: 60ch;
}

h1, h3 {
  text-transform: uppercase;
}

h1 {
  --size: var(--xx-large);
  margin: calc(var(--size) * 1rem) 0;
  --text-size: var(--size);
  --font-size: calc(var(--text-size) / var(--cap-height));
  --line-height: calc((var(--text-size) + 0.25) / var(--font-size));
  font-size: calc(var(--font-size) * 1rem);
  line-height: calc((var(--text-size) + 0.25) * 1rem);
  letter-spacing: -0.25rem;
  font-weight: 900;
}

h3 {
  --size: var(--medium);
  --line-height: var(--scale);
  margin: calc((var(--size) * var(--scale) * var(--scale) * var(--scale)) * 1rem) 0 calc(var(--size) * 1rem);
  font-size: calc((var(--size) / var(--cap-height)) * 1rem);
  line-height: var(--line-height);
  border-right: 0.0625rem solid currentColor;
}

p {
  --size: var(--small);
 ...