h1 now scrolls with the page on recipes

_layouts/recipe.html

@@ -13,7 +13,8 @@ layout: default
 	{%- endif -%}
 {%- endfor -%}
 
-<h1>{{ page.name }}</h1>
+<h1 class='scrolling'>{{ page.name }}</h1>
+<h1 class='invisible'>{{ page.name }}</h1>
 {%- if page.time -%}
 	{%- if page.time > 59 %}
 		{%- assign hours = page.time | divided_by: 60 -%}

assets/style.css

@@ -20,6 +20,17 @@ h1 {
 	text-align: center;
 	background: linear-gradient(to right, turquoise, transparent 80%);
 }
+h1.scrolling {
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	/* backdrop-filter: blur(5px); */ /* disabled because firefox (73) renders it weirdly */
+}
+h1.invisible {
+	position: relative;
+	visibility: hidden;
+}
 h2 {
 	padding-left: 10px;
 	background: linear-gradient(to right, turquoise 5px, transparent 5px 100%);