lynnesbian/recipe-site
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

h1 now scrolls with the page on recipes

Browse source
This commit is contained in:
Lynne Megido 2020-03-03 21:53:14 +10:00
parent a92ecdb897
commit ff78543bb7
Signed by: lynnesbian
GPG key ID: F0A184B5213D9F90
2 changed files with 13 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
_layouts/recipe.html
View file

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

11
assets/style.css
View file

@ -20,6 +20,17 @@ h1 {
text-align: center; text-align: center;
background: linear-gradient(to right, turquoise, transparent 80%); 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 { h2 {
padding-left: 10px; padding-left: 10px;
background: linear-gradient(to right, turquoise 5px, transparent 5px 100%); background: linear-gradient(to right, turquoise 5px, transparent 5px 100%);