Skip to content
Snippets Groups Projects

Compare revisions

Changes are shown as if the source revision was being merged into the target revision. Learn more about comparing revisions.

Source

Select target project
No results found

Target

Select target project
  • 2024/bielefeld-cebitec
  • l-sanfilippo/bielefeld-ce-bi-tec-temp
2 results
Show changes
Commits on Source (1741)
1,641 additional commits have been omitted to prevent performance issues.
Expand all Hide whitespace changes
Inline Side-by-side
Showing
with 2100 additions and 7283 deletions
.gitignore
View file @ 3fd292fd
...@@ -15,3 +15,8 @@ other ...@@ -15,3 +15,8 @@ other
dist dist
src/components/resources src/components/resources
code/test.bib code/test.bib
.DS_Store
code/test file gitignore.txt
src/.DS_Store
vite.config.js.timestamp-1732367750130-6d00136194c2.mjs
vite.config.js.timestamp-1733161862061-488217339257e.mjs
code/cit.py
View file @ 3fd292fd
import argparse # Voraussetzungen
import bibtexparser #- Python 3.x
#- bibtexparser (Installieren Sie es mit `pip install bibtexparser`)
# use like: python3 cit.py -i bibtex.bib -s 1
import re import re
problemlist = [] problemlist = []
def main(): def main():
print("Starting program...") print("Starting program...")
try:
import bibtexparser
except ImportError:
print("The package 'bibtexparser' is not installed. Install with: pip install bibtexparser")
exit(1)
try:
import argparse
except ImportError:
print("The package 'argparse' is not installed.")
exit(1)
try:
import re
except ImportError:
print("The package 're' is not installed.")
exit(1)
try: try:
#reading command line input and parsing it #reading command line input and parsing it
parser = argparse.ArgumentParser( parser = argparse.ArgumentParser(
prog='HTML Citations', prog='HTML Citations',
description='create acessible HTML Citations from bib files') description='create acessible HTML Citations from bib files')
parser.add_argument('-i','--input') parser.add_argument('-i','--input', required=True, help="path to source bib")
parser.add_argument('-s','--startnumber', required=True, help="number from which to start numbering")
args = parser.parse_args() args = parser.parse_args()
print("Source: " + args.input) print("Source: " + args.input)
except argparse.ArgumentError as e: except argparse.ArgumentError as e:
...@@ -21,40 +41,52 @@ def main(): ...@@ -21,40 +41,52 @@ def main():
print(f"An unexpected error occurred: {e}") print(f"An unexpected error occurred: {e}")
print("Reading file...") print("Reading file...")
#reading and parsing the file #reading and parsing the file
try: try:
with open(args.input, 'r') as file: with open(args.input, 'r') as file:
file_content = file.read() file_content = file.read()
print("Parsing file...") print("Parsing file...")
try: try:
library = bibtexparser.parse_string(file_content) library = bibtexparser.loads(file_content)
#opening output file #opening output file
try: try:
with open('output.txt', 'w') as out: with open('output.txt', 'w') as out:
length = len(library.entries) length = len(library.entries)
print("found " + str(length) + " entries") print("found " + str(length) + " entries")
ran = range(length) ran = range(length)
startnum = int(args.startnumber);
count = 0;
#processing every entry and writing the dictionary for it #processing every entry and writing the dictionary for it
for x in ran: for x in ran:
print("\n Initializing empty dictionary for entry "+ str(x+1) + "...")
print("\n Initializing empty dictionary for entry "+ str(startnum+count) + "...")
dictio = {} dictio = {}
en_x = library.entries[x] en_x = library.entries[x]
print("Filling dictionary for entry "+ str(x+1) + "") print("Filling dictionary for entry "+ str(startnum+count) + "")
for y in en_x.fields:
key = y.key
for key, value in en_x.items():
key_low = key.lower() key_low = key.lower()
dictio[key_low] = y.value dictio[key_low] = value
if en_x.entry_type == "article": print("Checking Entry type of "+ str(startnum+count) + "")
articleHTML(dictio, x, out) if en_x['ENTRYTYPE'] == "article":
elif en_x.entry_type =="misc": articleHTML(dictio, (startnum+count), out)
miscHTML(dictio, x, out) elif en_x['ENTRYTYPE'] == "misc":
miscHTML(dictio, (startnum+count), out)
elif en_x['ENTRYTYPE'] == "book":
bookHTML(dictio, (startnum+count), out)
elif en_x['ENTRYTYPE'] == "inbook":
bookHTML(dictio, (startnum+count), out)
count += 1;
except Exception as e: except Exception as e:
print(f"An unexpected error occurred: {e}") print(f"An unexpected error occurred: {e} in line 85")
except Exception as e: except Exception as e:
print(f"An unexpected error occurred: {e}") print(f"An unexpected error occurred: {e} in line 87")
except FileNotFoundError: except FileNotFoundError:
print(f"Error: The file '{args.input}' was not found.") print(f"Error: The file '{args.input}' was not found. line 89")
if len(problemlist)>0: if len(problemlist)>0:
print("- - - - - - - - - - - - - - - - - ") print("- - - - - - - - - - - - - - - - - ")
print("REMAINING ERRORS:") print("REMAINING ERRORS:")
...@@ -64,86 +96,88 @@ def main(): ...@@ -64,86 +96,88 @@ def main():
else: else:
print("DONE") print("DONE")
def makeauthors(authors, out):
print("Starting on authors...")
authors = authors.replace("\n", " ").replace(" and ", "|").strip() # "and" durch "|" ersetzen und Whitespace entfernen
autlist = authors.split("|")
def articleHTML(dictio, x, out): # Maximale Anzahl der anzuzeigenden Autoren
print("Writing html code for entry "+ str(x+1) + "...") max_authors = 7
out.write("{/*<!-- Citation num " + str(x+1) + "--> */}" + "\n")
out.write("<li typeof=\"schema:ScolarlyArticle\" role=\"doc-biblioentry\" property=\"schema:citation\" id=\"desc-" + str(x+1) + "\">"+ "\n")
out.write("\t" + "<span property=\"schema:author\" typeof=\"schema:Person\">"+ "\n")
print("Just a sec, seperating authors...") out.write("\t<span property=\"schema:author\" typeof=\"schema:Person\">\n") # Tag für Autoren öffnen
authors = dictio['author'] #print(autlist)
authors = authors.replace(" and ", "|") for i, a in enumerate(autlist):
liste = authors.split("|") try:
for a in liste: a = a.strip() # Whitespace entfernen
try:
#print("processing " + a) # Nachnamen und Vornamen aufteilen
first = None
last = None
name = None
if ',' in a: if ',' in a:
s = a.split(", ") s = a.split(", ")
first = s[1] last = s[0].strip() # Nachname
first_sh = first[0] first_names = s[1].strip() if len(s) > 1 else ''
last = s[0]
name = last + ", " + first_sh + "." # Initialen für Vornamen erstellen
initials = '. '.join([n[0] for n in first_names.split()]) + '.' if first_names else ''
name = f"{last}, {initials}" if initials else f"{last}, "
else: else:
s = a.split() s = a.split()
if len(s) == 2: last = s[-1].strip() # Nachname
first = s[0] first = '. '.join([n[0] for n in s[:-1]]) + '.' # Initialen der Vornamen
first_sh = first[0] name = f"{last}, {first}"
last = s[1]
name = last + ", " + first_sh + "." # Schreibe den Namen in die Ausgabedatei
else: if i < max_authors:
leng = len(s) out.write(f"\t\t<span property=\"schema:Name\"> {name}</span>\n")
last = s[leng-1] # Wenn wir den 6. Autor erreicht haben, schreibe "et al." nach dem 6. Autor
first = '' if i == max_authors:
for n in s: out.write("\t\t<span property=\"schema:Name\"> et al.</span>\n")
if n != s[-1]: break # Stoppe die Schleife, nachdem "et al." hinzugefügt wurde
first = first + n[0] + '.'
name = last + ", " + first
if a == liste[-1]:
out.write("\t" + "\t" +"<span property=\"schema:Name\"> " +name + "</span>"+ "\n")
else:
out.write("\t" +"\t" +"<span property=\"schema:Name\"> " +name + "</span>;"+ "\n")
except Exception as e: except Exception as e:
print(f"An unexpected error occurred: {e} see " + a) print(f"An unexpected error occurred: {e} see " + a)
out.write("\t" +"</span>"+ "\n")
out.write("\t" + "<span property=\"schema:name\">&nbsp;"+dictio['title']+ ". </span>"+ "\n") out.write("\t</span>\n") # Tag für Autoren schließen
def articleHTML(dictio, x, out):
print("Writing html code for article "+ str(x) + "...")
out.write("{/*<!-- Citation num " + str(x) + "--> */}" + "\n")
out.write("<li typeof=\"schema:ScolarlyArticle\" role=\"doc-biblioentry\" property=\"schema:citation\" id=\"desc-" + str(x) + "\">"+ "\n")
print("Just a sec, separating authors...")
authors = dictio['author']
print("giving authors...")
makeauthors(authors, out)
# out.write("\t" +"</span>"+ "\n")
title = dictio['title'].replace('{', '').replace('}', '')
out.write("\t" + "<span property=\"schema:name\">&nbsp;"+ title + "</span>. "+ "\n")
out.write("\t" +"<i property=\"schema:publisher\" typeof=\"schema:Organization\"> "+ dictio['journal'] +"</i>"+ "\n") out.write("\t" +"<i property=\"schema:publisher\" typeof=\"schema:Organization\"> "+ dictio['journal'] +"</i>"+ "\n")
out.write("\t" +"<b property=\"issueNumber\" typeof=\"PublicationIssue\"> "+dictio['volume']+"</b>,&nbsp;"+ "\n") out.write("\t" +"<b property=\"issueNumber\" typeof=\"PublicationIssue\"> "+dictio['volume']+"</b>"+ "\n")
print("Getting pages...") print("Getting pages...")
try: try:
pages = dictio['pages'] pages = dictio['pages']
if pages is not None: if pages is not None and len(pages) > 0:
if len(pages) > 0: # Überprüfen, ob die Seitenangabe nur aus Zahlen und Bindestrichen besteht
if '--' in pages: if '-' in pages or '–' in pages or '--' in pages or '–' in pages:
pag = pages.split("--") pag = re.split('--|-|–|–', pages)
begin = pag[0].strip() begin = pag[0].strip()
end = pag[1].strip() end = pag[1].strip()
out.write("\t" + "<span property=\"schema:pageBegin\"> "+ begin +"</span>-<span property=\"schema:pageEnd\">"+ end + "</span>"+ "\n") print("- in pages")
elif '-' in pages: out.write("\t" + ",&nbsp;<span property=\"schema:pageBegin\"> "+ begin +"</span>-<span property=\"schema:pageEnd\">"+ end + "</span>&nbsp;"+ "\n")
pag = pages.split("-")
begin = pag[0].strip()
end = pag[1].strip()
out.write("\t" + "<span property=\"schema:pageBegin\"> "+ begin +"</span>-<span property=\"schema:pageEnd\">"+ end + "</span>"+ "\n")
elif len(pages) > 0:
out.write("\t" + "<span property=\"schema:pageBegin\">"+ pages +"</span>"+ "\n")
else: else:
print("Sorry, no readable page information") if re.match(r'^\d+(-\d+)?$', pages): # Check for typical numeric page ranges
problemlist.append("Check for missing page info at " + str (x+1)) out.write("\t" + "<span property=\"schema:pageBegin\">"+ pages +"</span>&nbsp;"+ "\n")
else: else:
print("Sorry, no page information") # Seitenangabe ist nicht numerisch, als fehlend behandeln
problemlist.append("Check for missing page info at " + str (x+1)) print(f"Non-numeric page information detected ('{pages}'). Treating as missing.")
problemlist.append(f"Non-numeric page info at entry {x}")
else: else:
print("Sorry, no page information") print("Sorry, no page information")
problemlist.append("Check for missing page info at " + str (x+1)) problemlist.append("Check for missing page info at " + str(x))
except KeyError as e: except KeyError:
print("Sorry, no page information") print("Sorry, no page information")
problemlist.append("Check for missing page info at " + str (x+1)) problemlist.append("Check for missing page info at " + str(x))
year = dictio['year'] year = dictio['year']
out.write("\t" +"(<time property=\"schema:datePublished\" datatype=\"xsd:gYear\" dateTime=\" " + year + "\">"+year+"</time>)."+ "\n") out.write("\t" +"(<time property=\"schema:datePublished\" datatype=\"xsd:gYear\" dateTime=\" " + year + "\">"+year+"</time>)."+ "\n")
...@@ -153,24 +187,54 @@ def articleHTML(dictio, x, out): ...@@ -153,24 +187,54 @@ def articleHTML(dictio, x, out):
out.write("\t" +"<a className=\"doi\" href=\"https://doi.org/"+doi+"\"> doi: "+doi+"</a>"+ "\n") out.write("\t" +"<a className=\"doi\" href=\"https://doi.org/"+doi+"\"> doi: "+doi+"</a>"+ "\n")
except KeyError as e: except KeyError as e:
print("Sorry, no doi information") print("Sorry, no doi information")
problemlist.append("Check for missing doi info at " + str (x+1)) problemlist.append("Check for missing doi info at " + str (x))
out.write("</li>" + "\n"+ "\n") out.write("</li>" + "\n"+ "\n")
def miscHTML(dictio, x, out): def miscHTML(dictio, x, out):
print("Writing html code for entry "+ str(x+1) + "...") print("Writing html code for entry "+ str(x) + "...")
out.write("#<!-- Citation num " + str(x+1) + "-->" + "\n") out.write("{/*<!-- Citation num " + str(x) + "--> */}" + "\n")
out.write("<li typeof=\"schema:WebPage\" role=\"doc-biblioentry\" property=\"schema:citation\" id=\"desc-" + str(x+1) + "\">"+ "\n") out.write("<li typeof=\"schema:WebPage\" role=\"doc-biblioentry\" property=\"schema:citation\" id=\"desc-" + str(x) + "\">"+ "\n")
out.write("\t" + "<span property=\"schema:author\" typeof=\"schema:Organisation\">"+ "\n") out.write("\t" + "<span property=\"schema:author\" typeof=\"schema:Organisation\">"+ "\n")
aut = dictio['author'].strip("\{\}") aut = dictio['author']
out.write("\t" + "\t" +"<span property=\"schema:Name\">" +aut + "</span>."+ "\n") out.write("\t" + "\t" +"<span property=\"schema:Name\"> " + aut + "</span>."+ "\n")
out.write("\t" +"</span>"+ "\n") out.write("\t" +"</span>"+ "\n")
out.write("\t" + "<span property=\"schema:name\">"+dictio['title']+ ".</span>"+ "\n") out.write("\t" + "<span property=\"schema:name\">"+dictio['title']+ ".</span>"+ "\n")
out.write("\t" +"<i property=\"schema:publisher\" typeof=\"schema:Organization\">"+ dictio['howpublished'] +"</i>"+ "\n") out.write("\t" +"<i property=\"schema:publisher\" typeof=\"schema:Organization\">"+ dictio['howpublished'] +"</i>"+ "\n")
year = dictio['year'] year = dictio['year']
out.write("\t" +"(<time property=\"schema:datePublished\" datatype=\"xsd:gYear\" datetime=\"" + year + "\">"+year+"</time>)."+ "\n") out.write("\t" +"&nbsp;(<time property=\"schema:datePublished\" datatype=\"xsd:gYear\" dateTime=\"" + year + "\">"+year+"</time>)."+ "\n")
out.write("</li>" + "\n"+ "\n") out.write("</li>" + "\n"+ "\n")
def bookHTML(dictio, x, out):
print("Writing html code for entry "+ str(x) + "...")
out.write("{/*<!-- Citation num " + str(x) + "--> */}" + "\n")
out.write("<li typeof=\"schema:Book\" role=\"doc-biblioentry\" property=\"schema:citation\" id=\"desc-" + str(x) + "\">"+ "\n")
# out.write("\t" + "<span property=\"schema:author\" typeof=\"schema:Organisation\">"+ "\n")
print("Just a sec, separating authors...")
if 'author' in dictio:
authors = dictio['author']
elif 'editor' in dictio:
authors = dictio['editor']
makeauthors(authors, out)
# out.write("\t" + "\t" +"<span property=\"schema:Name\"> " + aut + "</span>."+ "\n")
# out.write("\t" +"</span>"+ "\n")
if 'title' in dictio:
out.write("\t" + "<span property=\"schema:name\">&nbsp;"+dictio['title']+ ".</span>"+ "\n")
elif 'booktitle' in dictio:
out.write("\t" + "<span property=\"schema:name\">&nbsp;"+dictio['booktitle']+ ".</span>"+ "\n")
else:
print(f"No title or booktitle found for entry {x}")
problemlist.append(f"Check for missing title or booktitle at entry {x}")
out.write("\t" +"<i property=\"schema:publisher\" typeof=\"schema:Organization\">&nbsp;"+ dictio['publisher'] +"</i>"+ "\n")
year = dictio['year']
out.write("\t" + "&nbsp;(<time property=\"schema:datePublished\" datatype=\"xsd:gYear\" dateTime=\"" + year + "\">"+year+"</time>)."+ "\n")
out.write("</li>" + "\n"+ "\n")
main()
main()
\ No newline at end of file
code/output.txt deleted 100644 → 0
View file @ 57b8adf2
{/*<!-- Citation num 1--> */}
<li typeof="schema:ScolarlyArticle" role="doc-biblioentry" property="schema:citation" id="desc-1">
<span property="schema:author" typeof="schema:Person">
<span property="schema:Name"> Roth, F.</span>;
<span property="schema:Name"> Draguhn, A.</span>
</span>
<span property="schema:name">&nbsp;Die Entwicklung der Patch-Clamp-Technik. </span>
<i property="schema:publisher" typeof="schema:Organization"> Springer eBooks</i>
<b property="issueNumber" typeof="PublicationIssue"> </b>,&nbsp;
<span property="schema:pageBegin"> 1</span>-<span property="schema:pageEnd">14</span>
(<time property="schema:datePublished" datatype="xsd:gYear" dateTime=" 2023">2023</time>).
<a className="doi" href="https://doi.org/10.1007/978-3-662-66053-9_1"> doi: 10.1007/978-3-662-66053-9_1</a>
</li>
{/*<!-- Citation num 2--> */}
<li typeof="schema:ScolarlyArticle" role="doc-biblioentry" property="schema:citation" id="desc-2">
<span property="schema:author" typeof="schema:Person">
<span property="schema:Name"> Mete, V.</span>
</span>
<span property="schema:name">&nbsp;Entwicklung und Validierung neuer nicht-invasiver Diagnosesysteme für Mucociliary Clearance Disorders (MCCD). </span>
<i property="schema:publisher" typeof="schema:Organization"> Dissertation, Westfälische Wilhelms-Universität Münster</i>
<b property="issueNumber" typeof="PublicationIssue"> </b>,&nbsp;
<span property="schema:pageBegin"> </span>
(<time property="schema:datePublished" datatype="xsd:gYear" dateTime=" 2023">2023</time>).
<a className="doi" href="https://doi.org/10.17879/98958441905"> doi: 10.17879/98958441905</a>
</li>
{/*<!-- Citation num 3--> */}
<li typeof="schema:ScolarlyArticle" role="doc-biblioentry" property="schema:citation" id="desc-3">
<span property="schema:author" typeof="schema:Person">
<span property="schema:Name"> Giaever, I.</span>;
<span property="schema:Name"> Keese, C.</span>
</span>
<span property="schema:name">&nbsp;A morphological biosensor for mammalian cells. </span>
<i property="schema:publisher" typeof="schema:Organization"> Nature</i>
<b property="issueNumber" typeof="PublicationIssue"> 366</b>,&nbsp;
<span property="schema:pageBegin"> 591</span>-<span property="schema:pageEnd">592</span>
(<time property="schema:datePublished" datatype="xsd:gYear" dateTime=" 1993">1993</time>).
<a className="doi" href="https://doi.org/10.1038/366591a0"> doi: 10.1038/366591a0</a>
</li>
index.html
View file @ 3fd292fd
...@@ -3,9 +3,8 @@ ...@@ -3,9 +3,8 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link <link
rel="shortcut icon" rel="icon" type="image/png" sizes="32x32"
href="https://static.igem.wiki/teams/5247/logos-team/precyse-no-slogan.png" href="https://static.igem.wiki/teams/5247/logos-team/precyse-no-slogan.ico"
type="image/x-icon"
/> />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
......
package-lock.json deleted 100644 → 0
View file @ 57b8adf2
This diff is collapsed.
src/.DS_Store 0 → 100644
View file @ 3fd292fd
File added
src/App/App.css
View file @ 3fd292fd
This diff is collapsed.
src/App/App.scss
View file @ 3fd292fd
...@@ -142,10 +142,10 @@ $size: 6; ...@@ -142,10 +142,10 @@ $size: 6;
& > a { & > a {
opacity: 0; opacity: 0;
position: absolute; position: absolute;
color: #000; color: var(--offblack);
background-color: #000; background-color: var(--offblack);
font: bold 4em "Helvetica"; font: bold 4em "Helvetica";
$shadow: 5px #fff; $shadow: 5px var(--ourbeige);
text-shadow: 0 -1px $shadow, -1px 0px $shadow, 0 1px $shadow, text-shadow: 0 -1px $shadow, -1px 0px $shadow, 0 1px $shadow,
1px 0px $shadow; 1px 0px $shadow;
padding: 2rem; padding: 2rem;
...@@ -165,7 +165,7 @@ $size: 6; ...@@ -165,7 +165,7 @@ $size: 6;
& > div { & > div {
overflow: hidden; overflow: hidden;
position: relative; position: relative;
box-shadow: 0 2px 8px 0 rgba(#000, 0.2), 0 3px 20px 0 rgba(#000, 0.19); box-shadow: 0 2px 8px 0 rgba(var(--offblack), 0.2), 0 3px 20px 0 rgba(var(--offblack), 0.19);
} }
div, div,
a { a {
...@@ -201,7 +201,7 @@ $size: 6; ...@@ -201,7 +201,7 @@ $size: 6;
.content { .content {
max-width: 90%; max-width: 90%;
position: relative; position: relative;
color: #fff; color: var(--ourbeige);
&:hover > a.close { &:hover > a.close {
opacity: 1; opacity: 1;
transform: scale(1, 1); transform: scale(1, 1);
...@@ -262,7 +262,7 @@ $size: 6; ...@@ -262,7 +262,7 @@ $size: 6;
opacity: 0; opacity: 0;
transform-origin: right top; transform-origin: right top;
text-decoration:none; text-decoration:none;
color:#fff; color:var(--ourbeige);
&::after { &::after {
content: "X"; content: "X";
} }
...@@ -332,7 +332,7 @@ $shadow: #bc15aa; ...@@ -332,7 +332,7 @@ $shadow: #bc15aa;
height: 100px; height: 100px;
line-height: 100px; line-height: 100px;
margin: auto; margin: auto;
color: #fff; color: var(--ourbeige);
position: absolute; position: absolute;
top: 0; top: 0;
bottom: 0; bottom: 0;
...@@ -459,7 +459,7 @@ $shadow: #bc15aa; ...@@ -459,7 +459,7 @@ $shadow: #bc15aa;
} }
i{ i{
position: relative; position: relative;
color: white; color: var(--ourbeige);
font-size: 60px/2; font-size: 60px/2;
margin-top: 60px/4; margin-top: 60px/4;
transition: all 0.25s ease; transition: all 0.25s ease;
...@@ -553,14 +553,15 @@ $shadow: #bc15aa; ...@@ -553,14 +553,15 @@ $shadow: #bc15aa;
max-width: 400px; max-width: 400px;
width: 90%; width: 90%;
margin: auto; margin: auto;
background: #fff; background: var(--ourbeige);
padding: 30px; padding: 30px;
border-style: solid; border-style: solid;
border-width: 30px; border-width: 30px;
border-top-color: darken(#850F78, 0%); $color: "#850F78";
border-right-color: darken(#850F78, 10%); border-top-color: #850F78;
border-bottom-color: darken(#850F78, 0%); border-right-color: #bc15aa;
border-left-color: darken(#850F78, 10%); border-bottom-color: #850F78;
border-left-color: #bc15aa;
box-shadow: 2px 2px 4px rgba(0,0,0,.6); box-shadow: 2px 2px 4px rgba(0,0,0,.6);
} }
.cert-frame { .cert-frame {
...@@ -572,14 +573,14 @@ $shadow: #bc15aa; ...@@ -572,14 +573,14 @@ $shadow: #bc15aa;
max-width: 200px; max-width: 200px;
width: 70%; width: 70%;
margin: auto; margin: auto;
background: #fff; background: var(--ourbeige);
padding: 10px; padding: 10px;
border-style: solid; border-style: solid;
border-width: 20px; border-width: 20px;
border-top-color: darken(#850F78, 0%); border-top-color:#850F78;
border-right-color: darken(#850F78, 10%); border-right-color: #bc15aa;
border-bottom-color: darken(#850F78, 0%); border-bottom-color: #850F78;
border-left-color: darken(#850F78, 10%); border-left-color: #bc15aa;
box-shadow: 2px 2px 4px rgba(0,0,0,.6); box-shadow: 2px 2px 4px rgba(0,0,0,.6);
} }
...@@ -590,7 +591,7 @@ figure.snip1113 { ...@@ -590,7 +591,7 @@ figure.snip1113 {
min-width: 220px; min-width: 220px;
max-width: 310px; max-width: 310px;
width: 80%; width: 80%;
background: #ffffff; background: var(--ourbeige);
text-align: center; text-align: center;
} }
...@@ -622,8 +623,8 @@ figure.snip1113 figcaption { ...@@ -622,8 +623,8 @@ figure.snip1113 figcaption {
} }
figure.snip1113 h3 { figure.snip1113 h3 {
background-color: #ffffff; background-color: var(--ourbeige);
color: #000000; color: var(--offblack);
font-size: 1.7em; font-size: 1.7em;
width: 100%; width: 100%;
padding: 5px 12px; padding: 5px 12px;
......
src/App/App.tsx
View file @ 3fd292fd
import { useEffect, useState } from "react"; import { useEffect } from "react";
import "./App.css"; import "./App.css";
import "./HP.css" import "./HP.css"
import "./mediarules.css" import "./mediarules.css"
...@@ -21,16 +21,17 @@ import { stringToSlug } from "../utils/stringToSlug.ts"; ...@@ -21,16 +21,17 @@ import { stringToSlug } from "../utils/stringToSlug.ts";
import { Villbuttonrow } from "../components/Buttons.tsx"; import { Villbuttonrow } from "../components/Buttons.tsx";
import "../utils/Highlight-functions.js"; import "../utils/Highlight-functions.js";
import "./LoadingScreen.css"; import "./LoadingScreen.css";
import { useScroll, motion } from "framer-motion"; import "./calendar.css"
import { useLoading } from "../utils/LoadingContext.tsx";
const App = () => { const App = () => {
const { scrollYProgress } = useScroll({ const { isLoading, setIsLoading } = useLoading(); // 2. Ladezustand hier verwenden
offset: ["start start", "end end"],
});
window.scrollTo(0, 0); window.scrollTo(0, 0);
const [isLoading, setIsLoading] = useState(true); // const [isLoading, setIsLoading] = useState(true);
const pathMapping = getPathMapping(); const pathMapping = getPathMapping();
const currentPath = const currentPath =
...@@ -51,7 +52,7 @@ const App = () => { ...@@ -51,7 +52,7 @@ const App = () => {
const timer = setTimeout(() => { const timer = setTimeout(() => {
console.log("Hiding loading screen"); console.log("Hiding loading screen");
setIsLoading(false); setIsLoading(false);
}, 0); // Adjust the delay as needed, Update the loading state after 3 seconds }, 1000); // Adjust the delay as needed, Update the loading state after 3 seconds
return () => { return () => {
console.log("Cleaning up timer"); console.log("Cleaning up timer");
...@@ -69,10 +70,6 @@ const App = () => { ...@@ -69,10 +70,6 @@ const App = () => {
{/* Navigation */} {/* Navigation */}
<Navbar /> <Navbar />
<motion.div
className="progress-bar"
style={{ scaleX: scrollYProgress }}
/>
{/* Header and PageContent */} {/* Header and PageContent */}
<Routes> <Routes>
...@@ -82,17 +79,16 @@ const App = () => { ...@@ -82,17 +79,16 @@ const App = () => {
path={path} path={path}
element={ element={
<> <>
<Header /> <Header />
{/* Page content */} {/* Page content */}
<div className="container-fluid"> <div className="container-fluid" >
<div className="row"> <div className="row">
<Sidebar /> <Sidebar/>
<div className="col"> <div className="full-col-phone col-9 max-1240">
<Component /> <Component />
<Villbuttonrow /> <Villbuttonrow />
</div> </div>
<div className="col-1 d-none d-lg-block"> <div className="col-1 none d-lg-block">
{/* <!-- empty!--> */} {/* <!-- empty!--> */}
</div> </div>
</div> </div>
...@@ -113,7 +109,7 @@ const App = () => { ...@@ -113,7 +109,7 @@ const App = () => {
<div className="col"> <div className="col">
<Villbuttonrow /> <Villbuttonrow />
</div> </div>
<div className="col-1 d-none d-lg-block"> <div className="col-1 d-lg-block">
{/* <!-- empty!--> */} {/* <!-- empty!--> */}
</div> </div>
</div> </div>
......
src/App/HP.css
View file @ 3fd292fd
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
#under-responsive, #under-responsibility, #under-reflection{ #under-responsive, #under-responsibility, #under-reflection{
border-radius: 10px; border-radius: 10px;
color: white; color: var(--ourbeige) ;
} }
#under-reflection div, #under-responsibility div, #under-responsive div{ #under-reflection div, #under-responsibility div, #under-responsive div{
...@@ -23,4 +23,62 @@ ...@@ -23,4 +23,62 @@
padding: 30px 20px; padding: 30px 20px;
border-radius: 20px; border-radius: 20px;
margin-left: 60px; margin-left: 60px;
}
.act-version, .reflect-version, .engage-version /*, .anticipate-version */{
display: none !important;
}
#g744{
display: block !important;
}
#hp3-wrapper{
display: inline-flex;
justify-content: center;
max-width: 70%;
max-height: 60%;
}
#left-col {
display: flex;
flex-direction: column;
}
#ref-img {
width: 100%;
height: auto;
}
.mitte {
flex-grow: 1; /* Nimmt den gesamten restlichen Platz ein */
}
.unten {
padding-bottom: 50px;
padding-left: 10px;
}
.mitte-parent{
display: grid;
}
.graphs{
max-height: 50% !important;
}
.pie-chart-container-small{
height: auto;
}
.pie-chart-container-other{
height: 250px !important;
}
.pie-chart-container-small, .pie-chart-container, .pie-chart-container-other, .bar-chart-container {
margin-bottom: 10px;
} }
\ No newline at end of file
src/App/LandingPage.css
View file @ 3fd292fd
...@@ -6,12 +6,67 @@ ...@@ -6,12 +6,67 @@
transition: opacity 1200ms ease-out, transform 600ms ease-out, transition: opacity 1200ms ease-out, transform 600ms ease-out,
visibility 1200ms ease-out; visibility 1200ms ease-out;
will-change: opacity, visibility; will-change: opacity, visibility;
background-color: black; background-color: var(--offblack);
} }
.content-block.is-visible { .content-block.is-visible {
opacity: 1; opacity: 1;
transform: none; transform: none;
visibility: visible; visibility: visible;
background-color: black; background-color: var(--offblack);
}
.landing-page-header .row .col{
padding: 30px;
margin: auto;
justify-content: center;
}
.landing-page-header .col{
justify-content: center;
display: grid ;
}
.landing-page-header button{
background-color: var(--accent-primary);
border-radius: 10px;
padding: 10px;
width: 30vw;
}
.landing-page-header{
padding-top: 200px !important;
}
.header-button-row{
min-height: 450px;
}
/* .header-button-row .h5 {
} */
#landing-page-header-2{
margin-top: 5rem;
background-image: url("https://static.igem.wiki/teams/5247/landing-page/lp-1new-lung-two.svg") !important;
background-size: 100% auto;
background-repeat: no-repeat;
padding: 0 !important;
}
.button-x{
align-items: center;
display: flex;
align-self: center;
}
.button-x button{
margin: auto;
padding: 10px;
border-radius: 10px;
background-color: var(--text-primary);
color: var(--ourbeige)
} }
\ No newline at end of file
src/App/Timelines.css
View file @ 3fd292fd
...@@ -4,45 +4,46 @@ ...@@ -4,45 +4,46 @@
/* This is the timeline container */ /* This is the timeline container */
.timeline { .timeline {
white-space: nowrap; white-space: nowrap;
min-height: 700px; min-height: 700px;
width: 75vw; width: 75vw;
overflow-x: auto; overflow-x: auto !important;
overflow-y: hidden; max-width: inherit !important;
background-color: inherit; overflow-y: hidden !important;
font-size: 1rem; width: 100%;
/* align items center */ background-color: inherit;
align-items: center !important; /* align items center */
/* row */ align-items: center !important;
--bs-gutter-x: 1.5rem; /* row */
--bs-gutter-y: 0; --bs-gutter-x: 1.5rem;
display: flex; --bs-gutter-y: 0;
flex-wrap: wrap; display: flex;
margin-top: calc(-1 * var(--bs-gutter-y)); flex-wrap: wrap;
margin-right: calc(-.5 * var(--bs-gutter-x)); margin-top: calc(-1 * var(--bs-gutter-y));
margin-left: calc(-.5 * var(--bs-gutter-x)); margin-right: calc(-.5 * var(--bs-gutter-x));
margin-left: calc(-.5 * var(--bs-gutter-x));
} }
/* This is the timeline list container */ /* This is the timeline list container */
.timelineol { .timelineol {
font-size: 0; font-size: 0;
width: 100vw; width: 100vw;
padding: 250px 0; padding: 250px 0;
transition: all 1s; transition: all 1s;
} }
/* Positioning of the upper timeline cards */ /* Positioning of the upper timeline cards */
.timeline ol li:nth-child(2n+1) .time-meta::before{ .timeline ol li:nth-child(2n+1) .time-meta::before{
top: 100%; top: 100%;
left: 8px !important; left: 8px !important;
border-color: #f6faf6 transparent transparent transparent !important; border-color: white transparent transparent transparent !important;
} }
.timeline ol li:nth-child(2n+1) .moretop{ .timeline ol li:nth-child(2n+1) .moretop{
top: -40px !important; top: -40px !important;
} }
.timeline ol li:nth-child(odd) .timeline-item { .timeline ol li:nth-child(odd) .timeline-item {
top: -16px; top: -16px;
transform: translateY(-100%); transform: translateY(-100%);
box-shadow: 0 4px 6px 0 hsla(0, 0%, 0%, 0.2); box-shadow: 0 4px 6px 0 hsla(0, 0%, 0%, 0.2);
} }
...@@ -50,17 +51,17 @@ ...@@ -50,17 +51,17 @@
.timeline ol li:nth-child(2n) .time-meta::before{ .timeline ol li:nth-child(2n) .time-meta::before{
top: 100%; top: 100%;
left: 8px !important; left: 8px !important;
border-color: transparent transparent transparent #f6faf6 !important; border-color: transparent transparent transparent white !important;
} }
.timeline ol li:nth-child(2n) .moretop{ .timeline ol li:nth-child(2n) .moretop{
top: 30px !important; top: 50px !important;
} }
.timeline ol li:nth-child(even) .timeline-item { .timeline ol li:nth-child(even) .timeline-item {
box-shadow: 0 4px 6px 0 hsla(0, 0%, 0%, 0.2); box-shadow: 0 4px 6px 0 hsla(0, 0%, 0%, 0.2);
top: calc(100% + 16px); top: calc(100% + 16px);
} }
/* The DNA Strang of the timeline */ /* The DNA Strang of the timeline */
.timelineolli { .timelineolli {
position: relative; position: relative;
...@@ -71,21 +72,21 @@ height: 20px; ...@@ -71,21 +72,21 @@ height: 20px;
background-image: url("https://static.igem.wiki/teams/5247/design/icons/dna-strang-schmal-fatter.svg"); background-image: url("https://static.igem.wiki/teams/5247/design/icons/dna-strang-schmal-fatter.svg");
background-size: 100% 120%; background-size: 100% 120%;
} }
/* Timeline Pointers outline and form */ /* Timeline Pointers outline and form */
.timeline ol li .timeline-item::before { .timeline ol li .timeline-item::before {
content: ''; content: '';
position: absolute; position: absolute;
top: 100%; top: 100%;
left: 0; left: 0;
width: 0; width: 0;
height: 0; height: 0;
border-style: solid; border-style: solid;
} }
.timeline ol li:nth-child(odd) .timeline-item::before { .timeline ol li:nth-child(odd) .timeline-item::before {
top: 100%; top: 100%;
border-width: 20px 8px 0 0; border-width: 20px 8px 0 0;
border-color: white transparent transparent transparent; border-color: var(--ourbeige) transparent transparent transparent;
} }
.timeline ol li:nth-child(even) .timeline-item::before { .timeline ol li:nth-child(even) .timeline-item::before {
top: -20px; top: -20px;
...@@ -95,188 +96,189 @@ border-color: transparent transparent transparent white; ...@@ -95,188 +96,189 @@ border-color: transparent transparent transparent white;
/* To extend the line at the end */ /* To extend the line at the end */
.timelineolli:last-child{ .timelineolli:last-child{
background-size: 65% 120%; background-size: 65% 120%;
} }
.timeline ol li:last-child { .timeline ol li:last-child {
width: 300px; width: 300px;
} }
/* For the points */ /* For the points */
.timeline ol li:not(:last-child)::after { .timeline ol li:not(:last-child)::after {
content: ''; content: '';
position: absolute; position: absolute;
top: 50%; top: 50%;
left: calc(98%); left: calc(98%);
bottom: 0; bottom: 0;
z-index: 4; z-index: 4;
width: 40px; width: 40px;
height: 40px; height: 40px;
transform: translateY(-50%); transform: translateY(-50%);
border-radius: 50%; border-radius: 50%;
background: var(--text-primary); background: var(--text-primary);
} }
/* Card layout */ /* Card layout */
.timeline ol li .timeline-item { .timeline ol li .timeline-item {
height: 250px; height: 250px;
min-height: 310%; min-height: 310%;
position: absolute; position: absolute;
left: calc(100% + 7px); left: calc(100% + 7px);
width: 350px; width: 350px;
padding: 15px; padding: 15px;
font-size: 0.9rem; font-size: 0.9rem;
white-space: normal; white-space: normal;
color: black; color: var(--offblack);
background: white; background: white; /* Soll white bleiben! */
} }
/* Layout for meta timeline cards */ /* Layout for meta timeline cards */
.time-meta{ .time-meta{
background-color: #f6faf6 !important; border-radius: 10px;
border-radius: 10px;
} }
/* Tags */ /* Tags */
.t-tag{ .t-tag{
box-shadow: 0 4px 6px 0 hsla(0, 0%, 0%, 0.2); box-shadow: 0 4px 6px 0 hsla(0, 0%, 0%, 0.2);
color: #fff; color: var(--ourbeige);
font-size: 12px; font-size: 12px;
font-weight: bold; font-weight: bold;
letter-spacing: 1px; letter-spacing: 1px;
padding: 5px; padding: 5px;
margin-bottom: 10px; margin-bottom: 10px;
text-transform: uppercase; text-transform: uppercase;
width: fit-content !important; width: fit-content !important;
} }
button.tabbutton.Patient.active, button.tabbutton.All.active, button.tabbutton.Patient.active, button.tabbutton.All.active,
button.tabbutton.Industry.active, button.tabbutton.Academia.active, button.tabbutton.Industry.active, button.tabbutton.Academia.active,
button.tabbutton.Medical.active, .modulators.active, .inhalations.active{ button.tabbutton.Medical.active, .modulators.active, .inhalations.active{
border-color: black; border-color: var(--offblack);
}
.colour-meta-tag{
background-color: var(--igemlightgreen);
} }
/* and buttons */ /* and buttons */
button.tabbutton:nth-child(1){ button.tabbutton:nth-child(1), button.tabbutton:nth-child(6){
background-color: white; background-color: white; /* soll whit ebleiben! */
} }
.Patient, button.tabbutton:nth-child(2){ .Patient, button.tabbutton:nth-child(2), .button.tabbutton:nth-child(7), .skin{
background-color: var(--accen-secondary); background-color: var(--accen-secondary) !important;
} }
.Medical, button.tabbutton:nth-child(3){ .Medical, button.tabbutton:nth-child(3), .button.tabbutton:nth-child(8), .mucosa{
background-color: var(--accent-primary); background-color: var(--accent-primary);
} }
.Academia, .Research, button.tabbutton:nth-child(4){ .Academia, .Research, button.tabbutton:nth-child(4), button.tabbutton:nth-child(9){
background-color: var(--lightblue); background-color: var(--lightblue);
} }
.Industry, button.tabbutton:nth-child(5){ .Industry, button.tabbutton:nth-child(5){
background-color: var(--mediumpurple); background-color: var(--mediumpurple);
} }
.Activist, button.tabbutton:nth-child(6){ .Activist, .Milestone{
background-color: var(--igemlightgreen); background-color: var(--igemmediumgreen) !important;
} }
.Ethics{ .Education, .Outreach{
background-color: var(--offblack); background-color: var(--igemlightgreen);
} }
.Other{
background-color: var(--offblack);
}
/* * * * * * * */ /* * * * * * * */
/* TIMELINE BFH*/ /* TIMELINE BFH*/
/* * * * * * * */ /* * * * * * * */
/* Container */ /* Container */
.timeline-container { .timeline-container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
position: relative; position: relative;
margin: 40px 0; margin: 40px 0;
} }
/* Line */ /* Line */
.timeline-container::after { .timeline-container::after {
background-color: var(--text-primary); background-color: var(--text-primary);
position: absolute; position: absolute;
left: calc(50% - 2px); left: calc(50% - 2px);
content: ""; content: "";
width: 4px; width: 4px;
height: 100%; height: 100%;
z-index: 0; z-index: 0;
} }
/* Cards */ /* Cards */
.timeline-item { .timeline-item {
min-width: 100px; min-width: 100px;
/* display: flex; */ /* display: flex; */
justify-content: flex-end; justify-content: flex-end;
padding-right: 30px; padding-right: 30px;
position: relative; position: relative;
margin: 10px 0; margin: 10px 0;
width: 50%; width: 50%;
} }
.timeline-item-content { .timeline-item-content {
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
border-radius: 5px; border-radius: 5px;
background-color: #fff; background-color: white; /* Soll white bleiben! */
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: flex-end; align-items: flex-end;
padding: 15px; padding: 15px;
position: relative; position: relative;
text-align: right; text-align: right;
} }
/* Accomodate for alteration in card design */ /* Accomodate for alteration in card design */
.timeline-item:nth-child(odd) .timeline-item-content { .timeline-item:nth-child(odd) .timeline-item-content {
text-align: left; text-align: left;
align-items: flex-start; align-items: flex-start;
} }
/* Tags */ /* Tags */
.timeline-item-content .tag { .timeline-item-content .tag {
color: #fff; color: var(--ourbeige);
font-size: 12px; font-size: 12px;
font-weight: bold; font-weight: bold;
top: 5px; top: 5px;
left: 5px; left: 5px;
letter-spacing: 1px; letter-spacing: 1px;
padding: 5px; padding: 5px;
margin-top: 5px; margin-top: 5px;
margin-left: 5px; margin-left: 5px;
position: absolute; position: absolute;
text-transform: uppercase; text-transform: uppercase;
} }
.timeline-item:nth-child(odd) .timeline-item-content .tag { .timeline-item:nth-child(odd) .timeline-item-content .tag {
left: auto; left: auto;
right: 5px; right: 5px;
margin-right: 5px; margin-right: 5px;
} }
/* Title design */ /* Title design */
.timeline-item-content time { .timeline-item-content time {
color: black; color: var(--offblack);
font-size: 16px; font-size: 16px;
font-weight: bold; font-weight: bold;
} }
/* To create alternation */ /* To create alternation */
.timeline-item:nth-child(odd) { .timeline-item:nth-child(odd) {
align-self: flex-end; align-self: flex-end;
justify-content: flex-start; justify-content: flex-start;
padding-left: 30px; padding-left: 30px;
padding-right: 0; padding-right: 0;
} }
/* To create bigger first and final cards */ /* To create bigger first and final cards */
.timeline-end{ .timeline-end{
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
border-radius: 5px; border-radius: 5px;
background-color: #fff; background-color: white; /* soll white bleiben */
padding: 15px; padding: 15px;
position: relative; position: relative;
text-align: center; text-align: center;
...@@ -286,7 +288,7 @@ margin-top: 8vw; ...@@ -286,7 +288,7 @@ margin-top: 8vw;
.timeline-begin{ .timeline-begin{
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
border-radius: 5px; border-radius: 5px;
background-color: #fff; background-color: white; /* soll white bleiben */
padding: 15px; padding: 15px;
position: relative; position: relative;
text-align: center; text-align: center;
...@@ -296,16 +298,16 @@ margin-bottom: 8vw; ...@@ -296,16 +298,16 @@ margin-bottom: 8vw;
/* Make short description on card bigger */ /* Make short description on card bigger */
.timeline-item-content span{ .timeline-item-content span{
font-size: 18px; font-size: 18px;
} }
/* Make links on Cards fat */ /* Make links on Cards fat */
.timeline-item-content a { .timeline-item-content a {
font-weight: bold; font-weight: bold;
} }
/* Circle */ /* Circle */
.timeline-item-content .circle { .timeline-item-content .circle {
background-color: #fff !important; background-color: var(--ourbeige) !important;
border: 3px solid var(--text-primary); border: 3px solid var(--text-primary);
border-radius: 50%; border-radius: 50%;
position: absolute; position: absolute;
...@@ -316,80 +318,65 @@ height: 20px; ...@@ -316,80 +318,65 @@ height: 20px;
z-index: 100; z-index: 100;
} }
.timeline-item:nth-child(odd) .timeline-item-content .circle { .timeline-item:nth-child(odd) .timeline-item-content .circle {
right: auto; right: auto;
left: -53px; left: -53px;
} }
*/
.hpbuttonrow {
display: flex; /* Flex-Layout für die untere Reihe */
margin-top: auto; /* Schiebt diese Reihe nach unten */
/* Checken ob wir das echt brauchen */ align-items: center; /* Vertikale Zentrierung */
/* .timeline ol li:not(:first-child) {
margin-left: 14px;
}
.timeline-item-content::after {
background-color: #fff;
box-shadow: 1px -1px 1px rgba(0, 0, 0, 0.2);
position: absolute;
right: -7.5px;
top: calc(50% - 7.5px);
transform: rotate(45deg);
width: 15px;
height: 15px;
}
.timeline-item:nth-child(odd) .timeline-item-content::after {
right: auto;
left: -7.5px;
box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.2);
}
.timeline-item-content p {
font-size: 16px;
line-height: 24px;
margin: 15px 0;
}
.timeline-item-content a::after {
font-size: 12px;
}
.card {
border-radius: 4px;
background-color: #fff;
color: #333;
padding: 10px;
box-shadow: 0 4px 6px 0 hsla(0, 0%, 0%, 0.2);
width: 100%;
max-width: 560px;
} }
.date { .fillup {
background-color: var(--text-primary) !important; flex: 1;
padding: 4px !important; display: flex; /* Flex-Layout aktivieren */
color: #fff !important; align-items: center; /* Vertikale Zentrierung */
border-radius: 4px !important; justify-content: center; /* Horizontale Zentrierung */
font-weight: 500;
font-size: .85rem;
} }
.date-col{
position: relative; .timeline-item .row:first-child {
background-color: #fff ; flex: 1; /* Füllt den verbleibenden Raum aus */
padding: 10px; display: flex; /* Flex-Layout aktivieren */
width: 10%; align-items: center; /* Vertikale Zentrierung */
border-right: #000; }
border-right-width: 2px;
} /* Untere Reihe */
.imageAtom{ .timeline-item .row:last-child {
object-fit: cover; margin-top: auto; /* Schiebt die letzte Reihe nach unten */
overflow: hidden; }
width: 100%;
max-height: 400px;
}
*/
\ No newline at end of file .fillup-wrapper{
display: flex;
}
.timeline-item figcaption{
background-color: var(--ourbeige) !important;
}
.timeline-item figcaption, .timeline-item figure, .timeline-item figcaption h3 {
background-color: white !important;
}
.timeline-item .img-cube{
height: 120px;
max-height: 13vh;
object-fit: cover !important;
}
\ No newline at end of file
src/App/calendar.css 0 → 100644
View file @ 3fd292fd
.month {
padding: 70px 25px;
width: 100%;
margin-top: 40px;
background: var(--mediumpurple);
text-align: center;
border-radius: 10px;
}
.cal-entry{
border-color: var(--text-primary);
border-radius: 10px;
border-width: 2px;
border-style: dotted;
}
.entry-body{
padding: 2vw 4vw;
}
.entry-header{
background-color: var(--darkerbeige);
padding: 15px;
border-bottom-color: var(--text-primary);
border-bottom-width: 1px;
border-bottom-style: solid;
}
.month ul {
margin: 0;
padding: 0;
}
.month ul li {
color: var(--ourbeige) !important;
font-size: 20px;
text-transform: uppercase;
letter-spacing: 3px;
list-style: none;
}
.prev a, .next a{
color: var(--ourbeige) !important;
}
.month .prev {
float: left;
padding-top: 10px;
}
.month .next {
float: right;
padding-top: 10px;
}
.weekdays {
border-radius: 10px;
margin: 0;
padding: 10px 0;
background-color: #ddd;
}
.weekdays li {
display: inline-block;
width: 13.6%;
color: #666;
text-align: center;
}
.days {
border-radius: 10px;
padding: 10px 0;
background: #eee;
margin: 0;
}
.days li {
list-style-type: none;
display: inline-block;
width: 13.6%;
text-align: center;
margin-bottom: 5px;
font-size:12px;
color: #777;
}
.days li .active {
padding: 5px;
background: #1abc9c;
color: var(--ourbeige) !important
}
/* Add media queries for smaller screens */
@media screen and (max-width:720px) {
.weekdays li, .days li {width: 13.1%;}
}
@media screen and (max-width: 420px) {
.weekdays li, .days li {width: 12.5%;}
.days li .active {padding: 2px;}
}
@media screen and (max-width: 290px) {
.weekdays li, .days li {width: 12.2%;}
}
\ No newline at end of file
src/App/mediarules.css
View file @ 3fd292fd
...@@ -27,14 +27,13 @@ ...@@ -27,14 +27,13 @@
align-items: center; align-items: center;
} }
h1 {
font-size: 2rem;
}
.col-6 { .col-6 {
width: 100%; /* Full width on tablets */ width: 100%; /* Full width on tablets */
} }
.progress-bar{
display: none !important;
}
} }
/*For Smartphones*/ /*For Smartphones*/
...@@ -48,9 +47,183 @@ ...@@ -48,9 +47,183 @@
max-width: 100% !important; max-width: 100% !important;
} }
.col-6 { .col-6 {
width: 100%; /* Full width for smartphone */ width: 100% ;
}
.container-fluid {
min-height: 100vh;
}
/***heading***/
.header-title{
min-height: 400px;
text-align: center;
align-items: center;
margin: auto !important;
padding: 0 30px;
font-size: 130px;
font-weight: 900;
line-height: 130px;
}
.header-container{
padding-top: 170px !important;
padding-bottom: 0px !important;
background-color: var(--ourbeige);
}
.base {
width: 100%;
background-color: var(--lightblue);
padding: 0px;
}
/***footer***/
footer {
width: 100% !important;
box-sizing: border-box !important;
padding: 15px !important;
}
.col {
width: 100% !important;
margin-bottom: 20px;
}
.col-sm-4, .col-sm-8, .col-6 {
width: 100%;
}
footer a, footer p {
font-size: 14px;
line-height: 1.4;
}
footer .socials {
display: flex;
justify-content: center !important;
margin-bottom: 10px;
}
.contact-info {
font-size: 14px;
text-align: center;
}
.img-sponsor {
width: 100px;
height: auto;
margin: 0 auto;
}
.footer-slider {
width: 100%;
margin-top: 20px;
}
footer a {
word-wrap: break-word;
overflow-wrap: break-word;
}
hr {
margin: 20px 0;
}
/***gif***/
.CFTR-gif {
width: 1000px !important;
max-width: 100%;
height: auto;
}
/***home***/
#breatht {
font-size: 1.5em !important; /* Adjust font size for smaller screens */
text-align: left; /* Optional: center text for mobile */
}
#breathf {
left: 48vw !important;
width: 65vw !important;
}
/*#breatht1 {
left: 0 !important;
position:initial!important;
font-size: 0.5em !important;
}*/
img[src*="200k-anim-transparent-bg.gif"] {
width: 100%;
height: auto;
}
/***Biosafty***/
#safehead {
background-size: contain; /* Adjust the image to fit within the container */
background-position: center 25%; /* Push the image down for better visibility */
height: 10px; /* Adjust the height for mobile screens */
}
/***contribution***/
.timeline-item{
padding-right: 0px !important;
padding-left: 5%;
width: 50% !important;
box-sizing: content-box;
text-align: left !important;
}
.timeline-item:nth-child(odd) {
align-self: flex-end !important;
justify-content: flex-start;
padding-left: 30px;
padding-right: 0;
}
figure.snipp1113{
min-width: 0px !important ;
max-width: 120px ;
width: 100% ;
margin-left: 80px;
}
.timeline-item-content{
text-align:initial !important;
align-items: flex-end ;
padding-left: 30px;
font-display: initial !important;
display: flex;
position: inherit;
}
.timeline-item-content .tag{
padding: 0px !important;
}
/***engineering***/
.col-2{
width: 50% !important;
}
/***Description***/
.pie-chart-container-small {
width: 300px !important; /* Make smaller for mobile */
height: 300px !important; /* Adjust height accordingly */
}
.quiz-wrapper {
flex-direction: column;
padding: 10px;
width: 100% !important; /* Set width to 100% for mobile screens */
}
.quiz-front, .quiz-back {
padding: 10px !important;
}
.quiz-heading {
font-size: 1.2em;
} }
.quiz-text {
font-size: 1em;
margin-bottom: 10px !important;
word-wrap: break-word; /* Keep word breaking for mobile */
}
.quiz-button-box {
margin-top: 5px !important;
justify-content: space-evenly;
}
.row-if-small{ .row-if-small{
--bs-gutter-x: 1.5rem; --bs-gutter-x: 1.5rem;
--bs-gutter-y: 0; --bs-gutter-y: 0;
...@@ -84,7 +257,8 @@ ...@@ -84,7 +257,8 @@
.bfh-slider{ .bfh-slider{
width: 100em !important; width: 100em !important;
max-width: 250px !important; max-width: 250px !important;
} }
.tag{ .tag{
width: min-content !important; width: min-content !important;
} }
...@@ -99,9 +273,6 @@ ...@@ -99,9 +273,6 @@
.winner{ .winner{
font-size: x-large; font-size: x-large;
} }
/*h3{
margin-bottom: 4vw !important;
}*/
.small-only{ .small-only{
display: block !important; display: block !important;
} }
...@@ -128,7 +299,7 @@ svg text{ ...@@ -128,7 +299,7 @@ svg text{
.village-style-button{ .village-style-button{
box-shadow: 1px 1px 1px gray; box-shadow: 1px 1px 1px gray;
border-radius: 10px; border-radius: 10px;
border-color: black; border-color: var(--offblack);
padding: 10px; padding: 10px;
} }
...@@ -141,27 +312,24 @@ svg text{ ...@@ -141,27 +312,24 @@ svg text{
padding-top: 10px; padding-top: 10px;
padding-bottom: 5px; padding-bottom: 5px;
} }
h1 {
font-size: 1vw !important;
line-height: 1.0 !important;
}
h2, h3 {
font-size: 24px !important;
}
.bigtitle { .bigtitle {
width: 450px !important; width: 450px !important;
height: 200px !important; height: 200px !important;
word-wrap: break-word; word-wrap: break-word;
} }
.framecycletab{
margin-left: 0 !important;
}
body { body {
padding: 10px !important; /* padding: 10px !important; */
width: 202% ; width: 202% !important;
overflow-x: hidden; /* Prevents horizontal scrolling */ overflow-x: hidden ; /* Prevents horizontal scrolling */
margin: 0; margin: 0;
padding: 0; padding: 0;
background-size: cover; /* Ensures the background scales to cover the entire screen */ background-size: cover !important; /* Ensures the background scales to cover the entire screen */
background-position: center; /* Keeps the background centered */ background-position: center !important; /* Keeps the background centered */
background-repeat: no-repeat; background-repeat: no-repeat;
} }
...@@ -170,17 +338,34 @@ body { ...@@ -170,17 +338,34 @@ body {
max-width: 100% !important; max-width: 100% !important;
height: auto !important; height: auto !important;
} }
.container { /*.container {
padding: 10px; padding: 10px;
} }*/
.row{ .row{
display: grid !important; display: grid !important;
} }
.full-col-phone{
width: 100vw !important;
}
} }
/*For small Smartphones*/
@media screen and (max-width: 750px){ /*For small Smartphones (iphone 13 or similars)*/
@media screen and (max-width: 400px){
.figure-wrapper:first-of-type img {
width: 100% !important; /* Full width on small screens */
height: 10% !important; /* Maintain aspect ratio */
max-width: 100% !important; /* Limit the image width to fit the screen */
margin: 0 auto; /* Center the image horizontally */
overflow: visible !important;
}
.figure-wrapper:first-of-type img{
text-align: center; /* Ensure the figure caption is centered */
}
} }
/* Big computer screens */ /* Big computer screens */
...@@ -208,6 +393,13 @@ body { ...@@ -208,6 +393,13 @@ body {
} }
/***description***/
.pie-chart-container {
width: 600px; /* Set the width of the container */
height: 600px; /* Set the height of the container */
position: relative;
margin: 0 auto; /* Center the chart */
}
@media screen and (max-width: 1300px){ @media screen and (max-width: 1300px){
.one-pdf-line{ .one-pdf-line{
......
src/components/.DS_Store 0 → 100644
View file @ 3fd292fd
File added
src/components/AirbuddyAnim.tsx 0 → 100644
View file @ 3fd292fd
import { useEffect, useRef, useState } from "react";
export function AirbuddyAnim(){
const [isVisible, setVisible] = useState(false);
const domRef = useRef(null)!;
useEffect(() => {
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => setVisible(entry.isIntersecting));
});
observer.observe(domRef.current!);
}, []);
const [isVisible2, setVisible2] = useState(false);
const domRef2 = useRef(null)!;
useEffect(() => {
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => setVisible2(entry.isIntersecting));
});
observer.observe(domRef2.current!);
}, []);
const [isVisible3, setVisible3] = useState(false);
const domRef3 = useRef(null)!;
useEffect(() => {
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => setVisible3(entry.isIntersecting));
});
observer.observe(domRef3.current!);
}, []);
const [isVisible4, setVisible4] = useState(false);
const domRef4 = useRef(null)!;
useEffect(() => {
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => setVisible4(entry.isIntersecting));
});
observer.observe(domRef4.current!);
}, []);
const [isVisible5, setVisible5] = useState(false);
const domRef5 = useRef(null)!;
useEffect(() => {
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => setVisible5(entry.isIntersecting));
});
observer.observe(domRef5.current!);
}, []);
const [isVisible6, setVisible6] = useState(false);
const domRef6 = useRef(null)!;
useEffect(() => {
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => setVisible6(entry.isIntersecting));
});
observer.observe(domRef6.current!);
}, []);
const [isVisible7, setVisible7] = useState(false);
const domRef7 = useRef(null)!;
useEffect(() => {
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => setVisible7(entry.isIntersecting));
});
observer.observe(domRef7.current!);
}, []);
const [isVisible8, setVisible8] = useState(false);
const domRef8 = useRef(null)!;
useEffect(() => {
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => setVisible8(entry.isIntersecting));
});
observer.observe(domRef8.current!);
}, []);
return (
<>
{/* One */}
<div
className='col'
style={{
'height': '100vh',
'transition': 'opacity 0.6s ease-out',
'opacity': `${isVisible ? '1' : '0'}`,
'visibility': `${isVisible ? 'visible' : 'hidden'}`}}
ref={domRef}>
<img
style={{
'position': 'fixed',
'top': '20vh',
'left': '20vw',
'width': '60vw',
'height': '60vh',
}}
src="https://static.igem.wiki/teams/5247/landing/airbuddy/airbuddy-0.webp">
</img>
</div>
{/* Two */}
<div
className='col'
style={{
'height': '100vh',
'transition': 'opacity 0.6s ease-out',
'opacity': `${isVisible2 ? '1' : '0'}`,
'visibility': `${isVisible2 ? 'visible' : 'hidden'}`}}
ref={domRef2}>
<img
style={{
'position': 'fixed',
'top': '20vh',
'left': '20vw',
'width': '60vw',
'height': '60vh',
}}
src="https://static.igem.wiki/teams/5247/landing/airbuddy/airbuddy-1.webp">
</img>
</div>
{/* Three */}
<div
className='col'
style={{
'height': '100vh',
'transition': 'opacity 0.6s ease-out',
'opacity': `${isVisible3 ? '1' : '0'}`,
'visibility': `${isVisible3 ? 'visible' : 'hidden'}`}}
ref={domRef3}>
<img
style={{
'position': 'fixed',
'top': '20vh',
'left': '20vw',
'width': '60vw',
'height': '60vh',
}}
src="https://static.igem.wiki/teams/5247/landing/airbuddy/airbuddy-2.webp">
</img>
</div>
{/* Four */}
<div
className='col'
style={{
'height': '100vh',
'transition': 'opacity 0.6s ease-out',
'opacity': `${isVisible4 ? '1' : '0'}`,
'visibility': `${isVisible4 ? 'visible' : 'hidden'}`}}
ref={domRef4}>
<img
style={{
'position': 'fixed',
'top': '20vh',
'left': '20vw',
'width': '60vw',
'height': '60vh',
}}
src="https://static.igem.wiki/teams/5247/landing/airbuddy/airbuddy-3.webp">
</img>
</div>
{/* Five */}
<div
className='col'
style={{
'height': '100vh',
'transition': 'opacity 0.6s ease-out',
'opacity': `${isVisible5 ? '1' : '0'}`,
'visibility': `${isVisible5 ? 'visible' : 'hidden'}`}}
ref={domRef5}>
<img
style={{
'position': 'fixed',
'top': '20vh',
'left': '20vw',
'width': '60vw',
'height': '60vh',
}}
src="https://static.igem.wiki/teams/5247/landing/airbuddy/airbuddy-4.webp">
</img>
</div>
{/* Six */}
<div
className='col'
style={{
'height': '100vh',
'transition': 'opacity 0.6s ease-out',
'opacity': `${isVisible6 ? '1' : '0'}`,
'visibility': `${isVisible6 ? 'visible' : 'hidden'}`}}
ref={domRef6}>
<img
style={{
'position': 'fixed',
'top': '20vh',
'left': '20vw',
'width': '60vw',
'height': '60vh',
}}
src="https://static.igem.wiki/teams/5247/landing/airbuddy/airbuddy-5.webp">
</img>
</div>
{/* Seven */}
<div
className='col'
style={{
'height': '100vh',
'transition': 'opacity 0.6s ease-out',
'opacity': `${isVisible7 ? '1' : '0'}`,
'visibility': `${isVisible7 ? 'visible' : 'hidden'}`}}
ref={domRef7}>
<img
style={{
'position': 'fixed',
'top': '20vh',
'left': '20vw',
'width': '60vw',
'height': '60vh',
}}
src="https://static.igem.wiki/teams/5247/landing/airbuddy/airbuddy-6.webp">
</img>
</div>
{/* Eight */}
<div
className='col'
style={{
'height': '100vh',
'transition': 'opacity 0.6s ease-out',
'opacity': `${isVisible8 ? '1' : '0'}`,
'visibility': `${isVisible8 ? 'visible' : 'hidden'}`}}
ref={domRef8}>
<img
style={{
'position': 'fixed',
'top': '20vh',
'left': '20vw',
'width': '60vw',
'height': '60vh',
}}
src="https://static.igem.wiki/teams/5247/landing/airbuddy/airbuddy-7.webp">
</img>
</div>
</>
);
}
\ No newline at end of file
src/components/BFH-Timeline.tsx
View file @ 3fd292fd
This diff is collapsed.
src/components/Boxes.tsx
View file @ 3fd292fd
...@@ -57,9 +57,9 @@ export function InfoBox({title, children, id}:{title: string, children: React.Re ...@@ -57,9 +57,9 @@ export function InfoBox({title, children, id}:{title: string, children: React.Re
{title} {title}
</p> </p>
<div className="v-card-text"> <div className="v-card-text">
<p> <div>
{children} {children}
</p> </div>
</div> </div>
</aside> </aside>
) )
......
src/components/Breathe.tsx
View file @ 3fd292fd
...@@ -94,13 +94,13 @@ export function Breathe(){ ...@@ -94,13 +94,13 @@ export function Breathe(){
'opacity': `${isVisible ? '1' : '0'}`, 'opacity': `${isVisible ? '1' : '0'}`,
'visibility': `${isVisible ? 'visible' : 'hidden'}` 'visibility': `${isVisible ? 'visible' : 'hidden'}`
}} }}
src="https://static.igem.wiki/teams/5247/landing/breath/textless/breath-only-1.webp"> id="breathf" src="https://static.igem.wiki/teams/5247/landing/breath/textless/breath-only-1.webp">
</img> </img>
{/* Spacing Block */} {/* Spacing Block */}
<div className='col' style={{ 'height': '100vh' }}></div> <div className='col' style={{ 'height': '100vh' }}></div>
<div style={{ 'height': '100vh'}} ref={domRef2}> <div style={{ 'height': '100vh'}} ref={domRef2}>
<p style={{'fontSize' : '2.5em'}}>Take a moment to</p> <p id="breatht" style={{'fontSize' : '2.5em'}}>Take a moment to</p>
<p style={{'fontSize' : '2.5em'}}>deeply breathe in...</p> <p id="breatht" style={{'fontSize' : '2.5em'}}>deeply breathe in...</p>
<img style={{ <img style={{
'position': 'fixed', 'position': 'fixed',
'top': '20vh', 'top': '20vh',
...@@ -111,13 +111,13 @@ export function Breathe(){ ...@@ -111,13 +111,13 @@ export function Breathe(){
'scale': `${isVisible2 ? '1' : '0'}`, 'scale': `${isVisible2 ? '1' : '0'}`,
'visibility': `${isVisible2 ? 'visible' : 'hidden'}` 'visibility': `${isVisible2 ? 'visible' : 'hidden'}`
}} }}
src="https://static.igem.wiki/teams/5247/landing/breath/circles/purplecircle.webp"></img> id="breathf" src="https://static.igem.wiki/teams/5247/landing/breath/circles/purplecircle.webp"></img>
</div> </div>
{/* Spacing Block */} {/* Spacing Block */}
<div className='col' style={{ 'height': '95vh' }}></div> <div className='col' style={{ 'height': '95vh' }}></div>
<div style={{ 'height': '100vh'}} ref={domRef3}> <div style={{ 'height': '100vh'}} ref={domRef3}>
<p style={{'fontSize' : '2.5em'}}>and deeply.</p> <p id="breatht" style={{'fontSize' : '2.5em'}}>and deeply.</p>
<p style={{'fontSize' : '2.5em'}}>breathe out...</p> <p id="breatht" style={{'fontSize' : '2.5em'}}>breathe out...</p>
<img style={{ <img style={{
'position': 'fixed', 'position': 'fixed',
'top': '20vh', 'top': '20vh',
...@@ -128,17 +128,17 @@ export function Breathe(){ ...@@ -128,17 +128,17 @@ export function Breathe(){
'scale': `${isVisible3 ? '0' : '1'}`, 'scale': `${isVisible3 ? '0' : '1'}`,
'visibility': `${isVisible3 ? 'visible' : 'hidden'}` 'visibility': `${isVisible3 ? 'visible' : 'hidden'}`
}} }}
src="https://static.igem.wiki/teams/5247/landing/breath/circles/purplecircle.webp"></img> id="breathf"src="https://static.igem.wiki/teams/5247/landing/breath/circles/purplecircle.webp"></img>
</div> </div>
{/* Spacing Block */} {/* Spacing Block */}
<div className='col' style={{ 'height': '100vh' }}></div> <div className='col' style={{ 'height': '100vh' }}></div>
<p style={{'fontSize' : '2.5em'}}>Your feel <strong>revitalized</strong></p> <p id="breatht" style={{'fontSize' : '2.5em'}}>You feel <strong>revitalized</strong></p>
<p style={{'fontSize' : '2.5em'}}>Your body and mind</p> <p id="breatht" style={{'fontSize' : '2.5em'}}>Your body and mind</p>
<p style={{'fontSize' : '2.5em'}}>become <strong>grounded</strong>.</p> <p id="breatht" style={{'fontSize' : '2.5em'}}>become <strong>grounded</strong>.</p>
{/* Spacing Block */} {/* Spacing Block */}
<div className='col' style={{ 'height': '100vh' }}></div> <div className='col' style={{ 'height': '100vh' }}></div>
<p style={{'fontSize' : '2.5em'}}>Now deeply breathe in</p> <p id="breatht"style={{'fontSize' : '2.5em'}}>Now deeply breathe in</p>
<p style={{'fontSize' : '2.5em'}}>and hold your breath.</p> <p id="breatht"style={{'fontSize' : '2.5em'}}>and hold your breath.</p>
<div style={{ 'height': '100vh'}} ref={domRef4}> <div style={{ 'height': '100vh'}} ref={domRef4}>
<img style={{ <img style={{
'position': 'fixed', 'position': 'fixed',
...@@ -150,7 +150,7 @@ export function Breathe(){ ...@@ -150,7 +150,7 @@ export function Breathe(){
'scale': `${isVisible4 ? '1' : '0'}`, 'scale': `${isVisible4 ? '1' : '0'}`,
'visibility': `${isVisible4 ? 'visible' : 'hidden'}` 'visibility': `${isVisible4 ? 'visible' : 'hidden'}`
}} }}
src="https://static.igem.wiki/teams/5247/landing/breath/circles/purplecircle.webp"></img> id="breathf"src="https://static.igem.wiki/teams/5247/landing/breath/circles/purplecircle.webp"></img>
</div> </div>
</div> </div>
{/* black */} {/* black */}
...@@ -168,7 +168,7 @@ export function Breathe(){ ...@@ -168,7 +168,7 @@ export function Breathe(){
'opacity': `${isVisible5 ? '1' : '0'}`, 'opacity': `${isVisible5 ? '1' : '0'}`,
'visibility': `${isVisible5 ? 'visible' : 'hidden'}` 'visibility': `${isVisible5 ? 'visible' : 'hidden'}`
}} }}
src="https://static.igem.wiki/teams/5247/landing/breath/textless/breath-only-2.webp"> id="breathf"src="https://static.igem.wiki/teams/5247/landing/breath/textless/breath-only-2.webp">
</img> </img>
<div style={{ 'height': '100vh'}} ref={domRef6}> <div style={{ 'height': '100vh'}} ref={domRef6}>
<img style={{ <img style={{
...@@ -179,13 +179,13 @@ export function Breathe(){ ...@@ -179,13 +179,13 @@ export function Breathe(){
'height': '60vh', 'height': '60vh',
'visibility': `${isVisible6 ? 'visible' : 'hidden'}` 'visibility': `${isVisible6 ? 'visible' : 'hidden'}`
}} }}
src="https://static.igem.wiki/teams/5247/landing/breath/circles/darkpurplecircle.webp"></img> id="breathf"src="https://static.igem.wiki/teams/5247/landing/breath/circles/darkerpurplecircle.webp"></img>
</div> </div>
<p style={{'fontSize' : '2.5em'}}>With every second,</p> <p id="breatht"style={{'fontSize' : '2.5em'}}>Breathing is </p>
<p style={{'fontSize' : '2.5em'}}>you feel more stressed.</p> <p id="breatht"style={{'fontSize' : '2.5em'}}>essential.</p>
<p style={{'fontSize' : '2.5em'}}>Your body fights</p> {/* <p style={{'fontSize' : '2.5em'}}>Breathing is essential, </p>
<p style={{'fontSize' : '2.5em'}}>against it, and your</p> <p style={{'fontSize' : '2.5em'}}>but many people </p>
<p style={{'fontSize' : '2.5em'}}>mind begins to panic...</p> <p style={{'fontSize' : '2.5em'}}>struggle with it.</p> */}
<div style={{ 'height': '100vh'}} ref={domRef7}> <div style={{ 'height': '100vh'}} ref={domRef7}>
<img style={{ <img style={{
'position': 'fixed', 'position': 'fixed',
...@@ -196,12 +196,13 @@ export function Breathe(){ ...@@ -196,12 +196,13 @@ export function Breathe(){
'scale': `${isVisible7 ? '1' : '0'}`, 'scale': `${isVisible7 ? '1' : '0'}`,
'visibility': `${isVisible7 ? 'visible' : 'hidden'}` 'visibility': `${isVisible7 ? 'visible' : 'hidden'}`
}} }}
src="https://static.igem.wiki/teams/5247/landing/breath/circles/blackcircle.webp"></img> id="breathf"src="https://static.igem.wiki/teams/5247/landing/breath/circles/fullblackcircle.webp"></img>
</div> </div>
{/* Spacing Block */} {/* Spacing Block */}
<div className='col' style={{ 'height': '100vh' }}></div> <div className='col' style={{ 'height': '100vh' }}></div>
<p style={{'fontSize' : '2.5em'}}>Breathe out!</p> <p id="breatht"style={{'fontSize' : '2.5em'}}>That is why we </p>
<p style={{'fontSize' : '2.5em'}}>Feel the relief!</p> <p id="breatht"style={{'fontSize' : '2.5em'}}>persue gene therapy for </p>
<p id="breatht"style={{'fontSize' : '2.5em'}}><b>Cystic Fibrosis.</b></p>
</div> </div>
{/* grey */} {/* grey */}
<div <div
...@@ -218,16 +219,16 @@ export function Breathe(){ ...@@ -218,16 +219,16 @@ export function Breathe(){
'opacity': `${isVisible8 ? '1' : '0'}`, 'opacity': `${isVisible8 ? '1' : '0'}`,
'visibility': `${isVisible8 ? 'visible' : 'hidden'}` 'visibility': `${isVisible8 ? 'visible' : 'hidden'}`
}} }}
src="https://static.igem.wiki/teams/5247/landing/breath/textless/breath-only-3.webp"> id="breathf" src="https://static.igem.wiki/teams/5247/landing/breath/textless/breath-only-3.webp">
</img> </img>
</div> </div>
<p style={{'fontSize' : '2.5em'}}>Imagine yourself living in</p> <p id="breatht"style={{'fontSize' : '2.5em'}}>To help restore the ability </p>
<p style={{'fontSize' : '2.5em'}}>constant fear of suffocation,</p> <p id="breatht"style={{'fontSize' : '2.5em'}}>to breathe freely, offering</p>
<p style={{'fontSize' : '2.5em'}}>because breathing deeply is a</p> <p id="breatht"style={{'fontSize' : '2.5em'}}><b>hope</b> to those whose lungs</p>
<p style={{'fontSize' : '2.5em'}}><strong>privilage not everyone can enjoy</strong></p> <p id="breatht"style={{'fontSize' : '2.5em'}}>can not properly function</p> {/* on their own. */}
<p id="breatht"style={{'fontSize' : '2.5em'}}>on their own.</p>
{/* Spacing Block */} {/* Spacing Block */}
<div className='col' style={{ 'height': '100vh' }}></div> <div className='col' style={{ 'height': '100vh' }}></div>
</> </>
); );
} }
\ No newline at end of file