prehistoric-systems/itty-bitty
1
0
Fork 0
mirror of https://github.com/arfct/itty-bitty.git synced 2026-03-11 08:54:33 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Remove transition on image

Browse source
This commit is contained in:
Nicholas Jitkoff 2022-08-07 11:02:52 -07:00
parent 01391ed97e
commit 5635baba28
2 changed files with 18 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
docs/render/recipe.css
View file

@ -28,8 +28,8 @@ body {
background-position: center;
margin-bottom: 1.3em;
box-sizing: border-box;
transition: opacity 200ms ease-out;
opacity:0;
/* transition: opacity 200ms ease-out; */
/* opacity:0; */
/* margin: 0 -2em; */
}
@ -98,9 +98,11 @@ img.publisher {
max-width: 5em;
max-height: 2em;
/* margin-top: -0.1em; */
/* transform:scale(0.7); */
transform:
scale(0.7);
/* float:
right; */
transform-origin: left;
}
.recipe {
@ -115,7 +117,7 @@ img.publisher {
margin-bottom: 4em;
align-content: center;
justify-content: center;
flex-direction: row-reverse;
/* flex-direction: row-reverse; */
margin-top: 1em;
}
@ -321,7 +323,7 @@ li:hover .noun {
margin-bottom:0.2em;
}
.hanging .ingredient {
margin-left:-3em;
margin-left: -3rem;
padding-left: 3rem;
}
@ -415,11 +417,12 @@ hr {
height: 24px;
}
@media screen and (max-width: 520px) {
.instructions hr:nth-child(2) {
display:none;
}
.instructions hr:first-child {
display:block;
}
@media screen and (max-width: 520px) {
#thumbnail-container {
margin: 0 -8vw;
background-color: var(--image-placeholder-color);
@ -677,6 +680,7 @@ section.ingredients caption {
.instructions caption {
content: "Steps";
/* padding-right: 24px; */
margin-bottom: 1.3rem;
}
.ingredients caption, .instructions caption {
@ -689,7 +693,8 @@ section.ingredients caption {
text-transform: uppercase;
letter-spacing: 0.01rem;
user-select: none;
margin: 0;
/* margin: 0; */
color: var(--accent-color);
}
.listtoggle {

6
docs/render/recipe.js
View file

@ -529,8 +529,8 @@ function render() {
let thumbnailContainer = document.querySelector("#thumbnail-container");
thumbnail.style.backgroundImage = 'url("' + bgImg.src + '")';
thumbnail.style.filter = `blur(${thumbnailContainer.offsetHeight / bgImg.naturalHeight * 1}px)`;
thumbnail.style.transform = `scale(1.1)`;
setTimeout(() => thumbnail.style.opacity = 1.0, 100);
// thumbnail.style.transform = `scale(1.1)`;
setTimeout(() => thumbnail.style.opacity = 1.0, 0);
if (window.scrollY == 0) setTimeout(() => {
const yOffset = -10;
const element = document.querySelector('.recipe-content');
@ -546,7 +546,7 @@ function render() {
let originalURL = json.mainEntityOfPage?.["@id"] || json.mainEntityOfPage || json.url;
document.body.appendChild(
m(".recipe", {},
image ? m("#thumbnail-container", m("#thumbnail.thumbnail.print-hide", { style: "background-image:url(" + ");" })) : null,
image ? m("#thumbnail-container", m("#thumbnail.thumbnail.print-hide", { style: "background-image:url(" + image + ");" })) : null,
m(".recipe-content",
m("header",
m("a.publisherlink", {href:originalURL, target:"_blank"},