Adjust blog components

Use headings text for dates, improve clock icon sizing.

packages/web/src/components/molecules/ClockIcon/index.tsx

@@ -21,8 +21,8 @@ export const ClockIcon = React.forwardRef<ClockIconDerivedElement, ClockIconProp
 		viewBox="0 0 24 24"
 		className={`w-[1.5em] h-[1.5em] linejoin-round linecap-round stroke-2 stroke-current fill-none ${className ?? ''}`.trim()}
 	>
-		<circle r="40%" cx="50%" cy="50%" />
-		<line x1="50%" x2="50%" y1="50%" y2="30%" transform={`rotate(${(hour + (minute / 60)) / 12 * 360}, 12, 12)`} />
-		<line x1="50%" x2="50%" y1="50%" y2="20%" transform={`rotate(${minute / 60 * 360}, 12, 12)`} />
+		<circle r="35%" cx="50%" cy="50%" />
+		<line x1="50%" x2="50%" y1="50%" y2="35%" transform={`rotate(${(hour + (minute / 60)) / 12 * 360}, 12, 12)`} />
+		<line x1="50%" x2="50%" y1="50%" y2="30%" transform={`rotate(${minute / 60 * 360}, 12, 12)`} />
 	</ClockIconDerivedElementComponent>
 ));

packages/web/src/components/molecules/IconText/index.tsx

@@ -12,7 +12,7 @@ export const IconText: React.FC<IconTextProps> = ({
 	bottomText,
 }) => (
 	<span className="font-sans align-middle inline-flex flex-col items-center justify-center leading-none w-[1em] h-[1em]">
-		<span className="order-2 text-[0.5em] font-light">
+		<span className="font-headings order-2 text-[0.5em] font-light">
 			{icon}
 		</span>
 		{' '}

packages/web/src/hooks/effects.ts

@@ -59,7 +59,7 @@ export const useHuePulsate = (options: UseHuePulsateOptions) => {
 	React.useEffect(() => {
 		window.document.documentElement.style.setProperty(
 			propertyName,
-			`${hue} ${colorSaturationPercentage}% ${colorLightnessPercentage}%`
+			`${hue.toFixed(3)} ${colorSaturationPercentage}% ${colorLightnessPercentage}%`
 		);
 	}, [hue, propertyName, colorSaturationPercentage, colorLightnessPercentage]);