render fractions using ruby code instead of the gross liquid thing i was using before

_config.yml

@@ -17,15 +17,3 @@ collections:
     permalink: "/:collection/:name"
 
 recipes_per_page: 15
-
-fractions:
-  "1": "&‌#8530;"
-  "125": "⅛"
-  "2": "⅕"
-  "25": "¼"
-  "3": "⅓"
-  "4": "⅖"
-  "5": "½"
-  "6": "⅗"
-  "75": "¾"
-  "8": "⅘"

_includes/fractionalise.html

@@ -1,14 +0,0 @@
-{%- assign decimal = input | split: "." | last -%}
-{%- assign output = input -%}
-{%- assign item_split = input | split: "" -%}
-
-{%- if item_split contains "." -%}
-	{%- if site.fractions contains decimal -%}
-		{%- assign prefix = input | split: "." | first -%}
-		{%- if prefix == "0" -%}
-			{%- assign output = site.fractions[decimal] -%}
-		{%- else -%}
-			{%- assign output = prefix | append: site.fractions[decimal] -%}
-		{%- endif -%}
-	{%- endif -%}
-{%- endif -%}

_includes/ingredients.html

@@ -10,24 +10,15 @@
 		{%- assign tag = tag | append: " class='optional'" -%}
 	{%- endif -%}
 
-	{%- assign input = item[0] -%}
-	{%- include fractionalise.html -%}
-
-	{%- assign amount = output | append: " " -%}
 	{%- assign end = "" -%}
 	{%- if item[0][0] -%}
-		{%- assign input = item[0][0] -%}
-		{%- include fractionalise.html -%}
-		{%- assign from = output -%}
-
-		{%- assign input = item[0][1] -%}
-		{%- include fractionalise.html -%}
-		{%- assign to = output -%}
-
-		{%- assign amount = from | append: " to " | append: to | append: " " -%}
+		{%- assign to = item[0][1] | fractionalise -%}
+		{%- assign amount = item[0][0] | fractionalise | append: " to " | append: to | append: " " -%}
 	{%- elsif item[0] == 0 -%}
 		{%- assign amount = "" -%}
 		{%- assign end = " to taste" -%}
+	{%- else -%}
+		{%- assign amount = item[0] | fractionalise | append: " " -%}
 	{%- endif -%}
 
 	<{{ tag }}>{{ amount }} {%- if item[2] %}{{ item[2] }} of {% endif -%} {{ item[1] }}{{ end }}</li>

_plugins/custom_stuff.rb

@@ -0,0 +1,38 @@
+require "liquid"
+require "jekyll"
+
+module Jekyll
+	module FractionaliseFilter
+		def fractionalise(input)
+			input  = input.to_s
+
+			if not input.include? "."
+				# if input is a whole number, just return it
+				return input
+			end
+
+			if input.split(".").length != 2
+				# generally when liquid filters fail they just print nothing, so we'll do that too
+				return ""
+			end
+
+			leading_integer, decimal = input.split(".")
+			decimal = "0.#{decimal}"
+
+			rational = case decimal
+			# handle common weird cases so that e.g. 0.3 returns "1/3" and not "3/10" or "5404319552844595/18014398509481984"
+			when "0.3", "0.33", "0.333"
+				Rational(1, 3)
+			when "0.6", "0.67", "0.666"
+				Rational(2, 3)
+			else
+				decimal.to_r
+			end
+
+			"<span title='#{input}'>#{leading_integer != "0" ? "#{leading_integer} " : ""}<span class='fraction'><span class='numerator'>#{rational.numerator}</span><span class='denominator'>#{rational.denominator}</span></span></span>"
+
+		end
+	end
+end
+
+Liquid::Template.register_filter(Jekyll::FractionaliseFilter)

assets/style.css

@@ -151,6 +151,19 @@ a.recipe-listing {
 	padding-left: 10px;
 }
 
+.fraction span {
+	font-size: 0.5em;
+}
+.fraction {
+	display: inline-flex;
+	flex-direction: column;
+	width: min-content;
+	vertical-align: top;
+}
+.fraction .denominator {
+	border-top: thin black solid;
+}
+
 .method li input[type=checkbox]:checked + label {
 	color: grey;
 	text-decoration: line-through;