From 44faf6093e675882e12001837f274e206cd60f51 Mon Sep 17 00:00:00 2001
From: Maximilian Leo Huber <maximilian.huber@uni-bielefeld.de>
Date: Wed, 18 Sep 2024 17:05:58 +0000
Subject: [PATCH] better aligned 'breathe' text
---
src/components/Breathe.tsx | 36 +++++++++++++++++++++++-------------
1 file changed, 23 insertions(+), 13 deletions(-)
diff --git a/src/components/Breathe.tsx b/src/components/Breathe.tsx
index b7089112..4084ad73 100644
--- a/src/components/Breathe.tsx
+++ b/src/components/Breathe.tsx
@@ -99,7 +99,8 @@ export function Breathe(){
{/* Spacing Block */}
<div className='col' style={{ 'height': '100vh' }}></div>
<div style={{ 'height': '100vh'}} ref={domRef2}>
- <p>Take a moment to deeply breathe in...</p>
+ <p>Take a moment to</p>
+ <p>deeply breathe in...</p>
<img style={{
'position': 'fixed',
'top': '20vh',
@@ -115,7 +116,8 @@ export function Breathe(){
{/* Spacing Block */}
<div className='col' style={{ 'height': '95vh' }}></div>
<div style={{ 'height': '100vh'}} ref={domRef3}>
- <p>and deeply breathe out...</p>
+ <p>and deeply.</p>
+ <p>breathe out...</p>
<img style={{
'position': 'fixed',
'top': '20vh',
@@ -130,10 +132,13 @@ export function Breathe(){
</div>
{/* Spacing Block */}
<div className='col' style={{ 'height': '100vh' }}></div>
- <p>Your feel <strong>revitalized</strong> - Your body and mind become <strong>grounded</strong>.</p>
+ <p>Your feel <strong>revitalized</strong></p>
+ <p>Your body and mind</p>
+ <p>become <strong>grounded</strong>.</p>
{/* Spacing Block */}
<div className='col' style={{ 'height': '100vh' }}></div>
- <p>Now deeply breathe in and hold your breath.</p>
+ <p>Now deeply breathe in</p>
+ <p>and hold your breath.</p>
<div style={{ 'height': '100vh'}} ref={domRef4}>
<img style={{
'position': 'fixed',
@@ -174,13 +179,15 @@ export function Breathe(){
'height': '60vh',
'visibility': `${isVisible6 ? 'visible' : 'hidden'}`
}}
- src="https://static.igem.wiki/teams/5247/landing/breath/circles/darkerpurplecircle.webp"></img>
+ 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, you feel more stressed.</p>
- <p>Your body fights against it, and</p>
- <p>your mind begins to panic...</p>
+ <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>
<div style={{ 'height': '100vh'}} ref={domRef7}>
<img style={{
'position': 'fixed',
@@ -191,11 +198,12 @@ export function Breathe(){
'scale': `${isVisible7 ? '1' : '0'}`,
'visibility': `${isVisible7 ? 'visible' : 'hidden'}`
}}
- src="https://static.igem.wiki/teams/5247/landing/breath/circles/fullblackcircle.webp"></img>
+ src="https://static.igem.wiki/teams/5247/landing/breath/circles/blackcircle.webp"></img>
</div>
{/* Spacing Block */}
<div className='col' style={{ 'height': '100vh' }}></div>
- <p>Breathe out! Feel the relief!</p>
+ <p>Breathe out!</p>
+ <p>Feel the relief!</p>
</div>
{/* grey */}
<div
@@ -215,9 +223,11 @@ export function Breathe(){
src="https://static.igem.wiki/teams/5247/landing/breath/textless/breath-only-3.webp">
</img>
</div>
- <p>Imagine yourself living in constant fear of</p>
- <p>suffocation, because breathing deeply is a</p>
- <p><strong>privilage not everyone can enjoy</strong>.</p>
+ <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>
+
{/* Spacing Block */}
<div className='col' style={{ 'height': '100vh' }}></div>
</>
--
GitLab