Use shared sass fluid function for About page (#209)

* Use shared sass fluid function for About page

* Remove usage of custom properties for fluid defaults

source/wp-content/themes/wporg-main-2022/src/style/_fluid.scss

@@ -0,0 +1,26 @@
+// See https://www.smashingmagazine.com/2022/10/fluid-typography-clamp-sass-functions/
+
+@use "sass:math";
+@import "utilities";
+
+// Default breakpoints based on parent theme `layout` widths
+/* stylelint-disable-next-line max-line-length */
+// https://github.com/WordPress/wporg-parent-2021/blob/trunk/source/wp-content/themes/wporg-parent-2021/theme.json#L364
+$default-min-bp: 600px;
+$default-max-bp: 1320px; // wide size + edge space * 2
+
+@function fluid(
+	$min-size,
+	$max-size,
+	$min-breakpoint: $default-min-bp,
+	$max-breakpoint: $default-max-bp,
+	$unit: vw
+) {
+	$slope: math.div($max-size - $min-size, $max-breakpoint - $min-breakpoint);
+	$slope-to-unit: round_to_decimals($slope * 100, 2);
+	$intercept-rem: round_to_decimals(px_to_rem($min-size - $slope * $min-breakpoint), 2);
+	$min-size-rem: round_to_decimals(px_to_rem($min-size), 2);
+	$max-size-rem: round_to_decimals(px_to_rem($max-size), 2);
+
+	@return clamp(#{$min-size-rem}, #{$slope-to-unit}#{$unit} + #{$intercept-rem}, #{$max-size-rem});
+}

source/wp-content/themes/wporg-main-2022/src/style/_utilities.scss

@@ -0,0 +1,20 @@
+@use "sass:math";
+
+@function round_to_decimals($number, $decimals: 0) {
+	$n: 1;
+
+	@if $decimals > 0 {
+
+		@for $i from 1 through $decimals {
+			$n: $n * 10;
+		}
+	}
+
+	@return math.div(math.round($number * $n), $n);
+}
+
+@function px_to_rem($px) {
+	$rems: math.div($px, 16px) * 1rem;
+
+	@return $rems;
+}

source/wp-content/themes/wporg-main-2022/src/style/style.scss

@@ -3,6 +3,8 @@
  * templates or theme.json settings.
  */
 
+@import "fluid";
+
 /*
  * Override inline paddings with the spacing preset.
  */
@@ -111,6 +113,9 @@ body.home .wp-block-wporg-link-wrapper {
  * About page
  */
 
+$wporg-about-breakpoint-min: 600px;
+$wporg-about-breakpoint-max: 1920px;
+
 [class*="wporg-about-section-"][style*="padding-top"] {
 	--wp--preset--spacing--60: clamp(60px, calc(100vw / 18), 80px);
 
@@ -121,8 +126,7 @@ body.home .wp-block-wporg-link-wrapper {
 
 .wporg-about-cover-title > span,
 .wporg-about-section-heading {
-	// fluid font-size based on screen width: clamp(52px below 600px, preferred value, 125px above 1920px)
-	font-size: clamp(3.25rem, 5.53vw + 1.18rem, 7.813rem) !important;
+	font-size: #{fluid(52px, 125px, $wporg-about-breakpoint-min, $wporg-about-breakpoint-max)} !important;
 	display: inline-block;
 }
 
@@ -192,9 +196,7 @@ body.home .wp-block-wporg-link-wrapper {
 }
 
 .wporg-about-cover-title {
-	// fluid height based on screen width:
-	// clamp(122px high below 600px wide, preferred value, 242px high above 1920px wide)
-	$arrow-height: clamp(7.625rem, 9.09vw + 4.22rem, 15.125rem);
+	$arrow-height: #{fluid(122px, 242px, $wporg-about-breakpoint-min, $wporg-about-breakpoint-max)};
 
 	display: grid;
 	grid-template-rows: auto $arrow-height auto;
@@ -289,9 +291,8 @@ body.home .wp-block-wporg-link-wrapper {
 @media (min-width: 782px) {
 	.wporg-about-section-heading {
 		// move the section heading up to align with the top of the right column
-		// fluid margin-block-start based on screen width, margin reduces as screen gets wider:
-		// clamp(-10px above 1920px wide, preferred value, 4px below 600px wide)
-		margin-block-start: clamp(-0.625rem, -1.06vw + 0.65rem, 0.25rem) !important;
+		// breakpoint arguments reversed, as the value changes inversely proportional to screen width
+		margin-block-start: #{fluid(-10px, 4px, $wporg-about-breakpoint-max, $wporg-about-breakpoint-min)} !important;
 	}
 
 	[class*="wporg-about-section-freedom-"] {