Skip to content
GitLab
Explore
Sign in
Primary navigation
Search or go to…
Project
B
Bielefeld-CeBiTec
Manage
Activity
Members
Labels
Plan
Issues
Issue boards
Milestones
Code
Merge requests
Repository
Branches
Commits
Tags
Repository graph
Compare revisions
Build
Pipelines
Jobs
Pipeline schedules
Artifacts
Deploy
Model registry
Analyze
Model experiments
Help
Help
Support
GitLab documentation
Compare GitLab plans
Community forum
Contribute to GitLab
Provide feedback
Keyboard shortcuts
?
Snippets
Groups
Projects
Show more breadcrumbs
2024 Competition
Bielefeld-CeBiTec
Commits
44faf609
Commit
44faf609
authored
6 months ago
by
Maximilian Leo Huber
Browse files
Options
Downloads
Patches
Plain Diff
better aligned 'breathe' text
parent
aa2f926a
No related branches found
Branches containing commit
No related tags found
No related merge requests found
Pipeline
#426702
passed
6 months ago
Stage: build
Stage: deploy
Changes
1
Pipelines
1
Hide whitespace changes
Inline
Side-by-side
Showing
1 changed file
src/components/Breathe.tsx
+23
-13
23 additions, 13 deletions
src/components/Breathe.tsx
with
23 additions
and
13 deletions
src/components/Breathe.tsx
+
23
−
13
View file @
44faf609
...
...
@@ -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/dark
er
purplecircle.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/
full
blackcircle.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
>
</>
...
...
This diff is collapsed.
Click to expand it.
Preview
0%
Loading
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Save comment
Cancel
Please
register
or
sign in
to comment