diff --git a/src/components/Breathe.tsx b/src/components/Breathe.tsx index 4084ad73cf2485779a28f3ae1887ccf20542fee1..2bed233c5092bc1f26ba849218778c79d301f650 100644 --- a/src/components/Breathe.tsx +++ b/src/components/Breathe.tsx @@ -87,7 +87,7 @@ export function Breathe(){ 'zIndex': '1', 'position': 'fixed', 'top': '20vh', - 'left': '20vw', + 'left': '30vw', 'width': '60vw', 'height': '60vh', 'transition': 'opacity 0.6s ease-out', @@ -99,12 +99,12 @@ export function Breathe(){ {/* Spacing Block */} <div className='col' style={{ 'height': '100vh' }}></div> <div style={{ 'height': '100vh'}} ref={domRef2}> - <p>Take a moment to</p> - <p>deeply breathe in...</p> + <p style={{'fontSize' : '2.5em'}}>Take a moment to</p> + <p style={{'fontSize' : '2.5em'}}>deeply breathe in...</p> <img style={{ 'position': 'fixed', 'top': '20vh', - 'left': '20vw', + 'left': '30vw', 'width': '60vw', 'height': '60vh', 'transition': 'scale 2.0s ease-out', @@ -116,12 +116,12 @@ export function Breathe(){ {/* Spacing Block */} <div className='col' style={{ 'height': '95vh' }}></div> <div style={{ 'height': '100vh'}} ref={domRef3}> - <p>and deeply.</p> - <p>breathe out...</p> + <p style={{'fontSize' : '2.5em'}}>and deeply.</p> + <p style={{'fontSize' : '2.5em'}}>breathe out...</p> <img style={{ 'position': 'fixed', 'top': '20vh', - 'left': '20vw', + 'left': '30vw', 'width': '60vw', 'height': '60vh', 'transition': 'scale 2.0s ease-out', @@ -132,18 +132,18 @@ export function Breathe(){ </div> {/* Spacing Block */} <div className='col' style={{ 'height': '100vh' }}></div> - <p>Your feel <strong>revitalized</strong></p> - <p>Your body and mind</p> - <p>become <strong>grounded</strong>.</p> + <p style={{'fontSize' : '2.5em'}}>Your feel <strong>revitalized</strong></p> + <p style={{'fontSize' : '2.5em'}}>Your body and mind</p> + <p style={{'fontSize' : '2.5em'}}>become <strong>grounded</strong>.</p> {/* Spacing Block */} <div className='col' style={{ 'height': '100vh' }}></div> - <p>Now deeply breathe in</p> - <p>and hold your breath.</p> + <p style={{'fontSize' : '2.5em'}}>Now deeply breathe in</p> + <p style={{'fontSize' : '2.5em'}}>and hold your breath.</p> <div style={{ 'height': '100vh'}} ref={domRef4}> <img style={{ 'position': 'fixed', 'top': '20vh', - 'left': '20vw', + 'left': '30vw', 'width': '60vw', 'height': '60vh', 'transition': 'scale 2.0s ease-out', @@ -155,13 +155,13 @@ export function Breathe(){ </div> {/* black */} <div - style={{ 'height': '400vh'}} ref={domRef5}> + style={{ 'height': '300vh'}} ref={domRef5}> <img style={{ 'zIndex': '1', 'position': 'fixed', 'top': '20vh', - 'left': '20vw', + 'left': '30vw', 'width': '60vw', 'height': '60vh', 'transition': 'opacity 0.6s ease-out', @@ -174,25 +174,23 @@ export function Breathe(){ <img style={{ 'position': 'fixed', 'top': '20vh', - 'left': '20vw', + 'left': '30vw', 'width': '60vw', 'height': '60vh', 'visibility': `${isVisible6 ? 'visible' : 'hidden'}` }} src="https://static.igem.wiki/teams/5247/landing/breath/circles/darkpurplecircle.webp"></img> </div> - {/* Spacing Block */} - <div className='col' style={{ 'height': '100vh' }}></div> - <p>With every second,</p> - <p>you feel more stressed.</p> - <p>Your body fights</p> - <p>against it, and your</p> - <p>mind begins to panic...</p> + <p style={{'fontSize' : '2.5em'}}>With every second,</p> + <p style={{'fontSize' : '2.5em'}}>you feel more stressed.</p> + <p style={{'fontSize' : '2.5em'}}>Your body fights</p> + <p style={{'fontSize' : '2.5em'}}>against it, and your</p> + <p style={{'fontSize' : '2.5em'}}>mind begins to panic...</p> <div style={{ 'height': '100vh'}} ref={domRef7}> <img style={{ 'position': 'fixed', 'top': '20vh', - 'left': '20vw', + 'left': '30vw', 'width': '60vw', 'height': '60vh', 'scale': `${isVisible7 ? '1' : '0'}`, @@ -202,8 +200,8 @@ export function Breathe(){ </div> {/* Spacing Block */} <div className='col' style={{ 'height': '100vh' }}></div> - <p>Breathe out!</p> - <p>Feel the relief!</p> + <p style={{'fontSize' : '2.5em'}}>Breathe out!</p> + <p style={{'fontSize' : '2.5em'}}>Feel the relief!</p> </div> {/* grey */} <div @@ -213,7 +211,7 @@ export function Breathe(){ 'zIndex': '1', 'position': 'fixed', 'top': '20vh', - 'left': '20vw', + 'left': '30vw', 'width': '60vw', 'height': '60vh', 'transition': 'opacity 0.6s ease-out', @@ -223,10 +221,10 @@ export function Breathe(){ src="https://static.igem.wiki/teams/5247/landing/breath/textless/breath-only-3.webp"> </img> </div> - <p>Imagine yourself living in</p> - <p>constant fear of suffocation,</p> - <p>because breathing deeply is a</p> - <p><strong>privilage not everyone can enjoy</strong></p> + <p style={{'fontSize' : '2.5em'}}>Imagine yourself living in</p> + <p style={{'fontSize' : '2.5em'}}>constant fear of suffocation,</p> + <p style={{'fontSize' : '2.5em'}}>because breathing deeply is a</p> + <p style={{'fontSize' : '2.5em'}}><strong>privilage not everyone can enjoy</strong></p> {/* Spacing Block */} <div className='col' style={{ 'height': '100vh' }}></div>