Trim implementation test

by phloe

HTML

<h1 class="trim-1">Hello</h1>
<h1 class="trim-2">Hello</h1>
<h1 class="trim-3">Hello</h1>

<button><span>Click</span></button>

SCSS

@font-face {
	font-family: GeneralSans-Variable;
	font-style: normal;
	font-display: swap;
	font-weight: 100 900;
	src: url(https://phloe.co/fonts/GeneralSans-Variable.woff2) format("woff2");
}

:root {
	--ascender: 1.01;
	--cap-height: 0.718;
	--x-height: 0.523;
	--descender: 0.24;
	--line-height-normal: calc(var(--ascender) + var(--descender));
	font-family: "GeneralSans-Variable";
}

h1 {
  --line-height: 1;
  --font-size: 6rem;
  --char-height: var(--cap-height);
  line-height: var(--line-height);
  font-size: var(--font-size);
  text-transform: uppercase;
  background-color: goldenrod;
  margin: 0;
  float: left;
  margin: 1rem;
}

.trim-1 {
  	&::before,
		&::after {
			--half-leading: calc((var(--line-height) - var(--line-height-normal)) / 2);
			content: "";
			display: table;
		}
		&::before {
			margin-bottom: calc((var(--half-leading) + var(--ascender) - var(--char-height)) * -1em);
		}
		
		&::after {
			margin-top: calc((var(--half-leading) + var(--descender)) * -1em);
		}
}

.trim-2 {
			--half-leading: calc((var(--line-height) - var(--char-height)) / 2);
      --offset: calc(((var(--ascender) - var(--char-height)) - var(--descender)) / 2);
  	&::before,
		&::after {
			content: "";
			display: table;
		}
		&::before {
			margin-bottom: calc((var(--half-leading) + var(--offset)) * -1em);
		}
		
		&::after {
			margin-top: calc((var(--half-leading) - var(--offset)) * -1em);
		}
}

.trim-3 {
  	&::before,
		&::after {
			--half-leading: calc((var(--line-height) - var(--line-height-normal)) / 2);
			content: "";
			display: table;
		}
		&::before {
			margin-bottom: calc((var(--half-leading) + var(--ascender) - var(--char-height)) * -1em);
		}
		
		&::after {
			margin-top: calc((var(--half-leading) + var(--descender)) * -1em);
		}
}

button {
  line-height: 3rem;
  font-size: 1.5rem;
}

button span {
  vertical-align: middle;
}