Compare commits

..

No commits in common. "5486459863679f0018ccfa97eaac35e12be6b319" and "db14cfa6176f32f40fa5e28c81cf99a7af62f610" have entirely different histories.

2 changed files with 4 additions and 68 deletions

View file

@ -42,53 +42,6 @@ describe('homepage hero', () => {
.and('have.attr', 'alt')
.and('match', /Rabbi Yehoshua Gerzi/i)
})
it('lets the rabbi portrait rise above the circular frame', () => {
cy.get<HTMLImageElement>('[data-cy="hero-portrait"]').then(
(portraitElements) => {
const portraitImage = portraitElements[0]
const frameElement = portraitImage.parentElement
if (frameElement === null) {
throw new Error('Portrait frame is missing')
}
const frameStyle = getComputedStyle(frameElement)
expect(frameStyle.overflowX).to.equal('visible')
expect(frameStyle.overflowY).to.equal('visible')
expect(portraitImage.getBoundingClientRect().top).to.be.lessThan(
frameElement.getBoundingClientRect().top,
)
},
)
})
it('extends the circular background to the portrait base edges', () => {
cy.get<HTMLImageElement>('[data-cy="hero-portrait"]').then(
(portraitElements) => {
const portraitImage = portraitElements[0]
const frameElement = portraitImage.parentElement
if (frameElement === null) {
throw new Error('Portrait frame is missing')
}
const portraitBounds = portraitImage.getBoundingClientRect()
const frameBounds = frameElement.getBoundingClientRect()
const backgroundStyle = getComputedStyle(frameElement, '::before')
const backgroundWidth = Number.parseFloat(backgroundStyle.width)
const backgroundLeft =
frameBounds.left + (frameBounds.width - backgroundWidth) / 2
const backgroundRight = backgroundLeft + backgroundWidth
expect(backgroundStyle.content).to.not.equal('none')
expect(backgroundWidth).to.be.closeTo(portraitBounds.width, 1)
expect(backgroundLeft).to.be.closeTo(portraitBounds.left, 1)
expect(backgroundRight).to.be.closeTo(portraitBounds.right, 1)
},
)
})
})
describe('homepage discover path section', () => {

View file

@ -468,34 +468,17 @@ const projects: Project[] = [
}
.hero__portrait-frame {
--portrait-frame-size: clamp(180px, 22vw, 320px);
width: var(--portrait-frame-size);
height: var(--portrait-frame-size);
position: relative;
width: clamp(180px, 22vw, 320px);
aspect-ratio: 1;
border-radius: 50%;
overflow: visible;
background: var(--color-slate);
overflow: hidden;
display: flex;
align-items: flex-end;
justify-content: center;
}
.hero__portrait-frame::before {
content: '';
position: absolute;
left: 50%;
bottom: 0;
z-index: 0;
width: 110%;
aspect-ratio: 1;
border-radius: 50%;
background: var(--color-slate);
transform: translateX(-50%);
}
.hero__portrait {
position: relative;
z-index: 1;
width: 110%;
height: auto;
display: block;