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 (2091)
1,991 additional commits have been omitted to prevent performance issues.
Hide whitespace changes
Inline Side-by-side
Showing
with 2812 additions and 858 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 @ 8bff6435
{/*<!-- 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.json
View file @ 3fd292fd
...@@ -19,31 +19,40 @@ ...@@ -19,31 +19,40 @@
"@mui/material": "^5.16.5", "@mui/material": "^5.16.5",
"@mui/x-charts": "^7.11.0", "@mui/x-charts": "^7.11.0",
"@popperjs/core": "^2.11.8", "@popperjs/core": "^2.11.8",
"@types/three": "^0.168.0",
"aos": "^2.3.4",
"beautiful-react-diagrams": "^0.5.1", "beautiful-react-diagrams": "^0.5.1",
"bibtex-parser-js": "^0.0.2",
"bootstrap": "^5.3.3", "bootstrap": "^5.3.3",
"chart.js": "^4.4.4",
"dangerously-set-html-content": "^1.1.0", "dangerously-set-html-content": "^1.1.0",
"dompurify": "^3.1.5", "dompurify": "^3.1.5",
"framer-motion": "^11.2.13", "framer-motion": "^11.2.13",
"gsap": "^3.12.5", "gsap": "^3.12.5",
"jarn": "^0.0.1",
"markmap": "^0.6.1", "markmap": "^0.6.1",
"markmap-common": "^0.17.0", "markmap-common": "^0.17.0",
"markmap-lib": "^0.17.0", "markmap-lib": "^0.16.1",
"markmap-toolbar": "^0.17.0", "markmap-toolbar": "^0.17.0",
"react": "^18.2.0", "react": "^18.2.0",
"react-bootstrap": "^2.10.2", "react-bootstrap": "^2.10.2",
"react-chartjs-2": "^5.2.0",
"react-collapsed": "^4.1.2", "react-collapsed": "^4.1.2",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"react-js-diagrams": "^3.1.3", "react-js-diagrams": "^2.3.2",
"react-photo-album": "^2.4.1", "react-photo-album": "^2.4.1",
"react-router-dom": "^6.26.0", "react-router-dom": "^6.26.0",
"react-select": "^5.8.0", "react-select": "^5.8.0",
"react-slick": "^0.30.2", "react-slick": "^0.30.2",
"sass": "^1.77.6", "sass": "^1.77.6",
"three": "^0.168.0",
"victory": "^37.0.2", "victory": "^37.0.2",
"yarn": "^1.22.22" "yarn": "^1.22.22"
}, },
"devDependencies": { "devDependencies": {
"@types/aos": "^3.0.7",
"@types/dompurify": "^3.0.5", "@types/dompurify": "^3.0.5",
"@types/faker": "^6.6.9",
"@types/jquery": "^3.5.30", "@types/jquery": "^3.5.30",
"@types/node": "^20.12.10", "@types/node": "^20.12.10",
"@types/react": "^18.2.66", "@types/react": "^18.2.66",
......
src/.DS_Store 0 → 100644
View file @ 3fd292fd
File added
src/App/App.css
View file @ 3fd292fd
...@@ -3,13 +3,20 @@ ...@@ -3,13 +3,20 @@
/* * * * * * * */ /* * * * * * * */
:root { :root {
/* our colours*/ /* our colours*/
--ourgradient: linear-gradient(90deg, rgba(147,94,184,1) 0%, rgba(160,167,243,1) 100%);
--text-primary: #850F78 ; --text-primary: #850F78 ;
--mediumpurple: #bc15aa; --mediumpurple: #bc15aa;
--lightpurple: #B85BD1;
--very-light-purple: #ce9fc9;
/*--purple: #B85BD1; */ /*--purple: #B85BD1; */
--accen-secondary: #F57D22; --accen-secondary: #F57D22;
--dark-secondary: #ac5818 ;
--light-secondary: #f7974e ;
--very-light-secondary: #fabb8c;
--accent-gradient-one-of-three: #F59121; --accent-gradient-one-of-three: #F59121;
--accent-gradient-two-of-three: #F5A520; --accent-gradient-two-of-three: #F5A520;
--accent-gradient-three-of-three: #F5B91F; --accent-gradient-three-of-three: #F5B91F;
--yellow-dark: #BB9909;
--accent-primary: #F4CC1E; --accent-primary: #F4CC1E;
--lightyellow: #fae99e; --lightyellow: #fae99e;
--lightblue: #A0A7F3 ; --lightblue: #A0A7F3 ;
...@@ -18,7 +25,6 @@ ...@@ -18,7 +25,6 @@
--verylightblue: #ebecfd; --verylightblue: #ebecfd;
--offblack: #32232C ; --offblack: #32232C ;
--cebitecgray: #8295A4; --cebitecgray: #8295A4;
/*--offwhite: #e9dff1; */
--ourbeige: #FFF6F2; --ourbeige: #FFF6F2;
--darkerbeige: #e2dad7; --darkerbeige: #e2dad7;
--background: #FFF6F2; --background: #FFF6F2;
...@@ -27,32 +33,55 @@ ...@@ -27,32 +33,55 @@
--igemmediumgreen: #019968; --igemmediumgreen: #019968;
--igemlightgreen: #99cb9a; --igemlightgreen: #99cb9a;
--info-border-color: var(--mediumpurple);
--vp-ct: var(--text-primary); --vp-ct: var(--text-primary);
--info-border-color: var(--accent-primary); --info-border-color: var(--accent-primary);
--info-bg-color: var(--lightyellow); --info-bg-color: var(--lightyellow);
--info-title-color: var(--text-primary); --info-title-color: var(--offblack);
--info-code-bg-color: var(--lightyellow); --info-code-bg-color: var(--lightyellow);
--note-border-color: var(--text-primary); --note-border-color: var(--text-primary);
--note-bg-color: var(--darkoffwhite); --note-bg-color: var(--very-light-purple);
--note-title-color: var(--text-primary); --note-title-color: var(--offblack);
--note-code-bg-color: var(--darkoffwhite); --note-code-bg-color: var(--very-light-purple);
--tip-border-color: var(--text-primary);
--tip-bg-color: var(--darkoffwhite); --tip-border-color: var(--offblack);
--tip-title-color: var(--text-primary); --tip-bg-color: var(--darkerbeige);
--tip-code-bg-color: var(--darkoffwhite); --tip-title-color: var(--offblack);
--tip-code-bg-color: var(--offblack);
--warning-border-color: var(--accen-secondary); --warning-border-color: var(--accen-secondary);
--warning-bg-color: var(--lightorange); --warning-bg-color: var(--very-light-secondary);
--warning-title-color: var(--text-primary); --warning-title-color: var(--offblack);
--warning-code-bg-color: var(--lightorange);
--danger-code-bg-color: var(--verylightblue);
--danger-border-color: var(--lightblue);
--danger-bg-color: var(--verylightblue);
--danger-title-color: var(--offblack);
--markmap-a-color: var(--text-primary) !important; --markmap-a-color: var(--text-primary) !important;
--node-size: 60px; --node-size: 60px;
--big-margin: 30px;
--simple-margin: 20px;
--small-margin: 10px;
--big-padding: 30px;
--simple-padding: 20px;
--small-padding: 10px;
--button-padding: 5px;
--border-radius: 10px;
--thin-border: 1px;
--thick-border: 5px;
} }
html{ html{
scroll-behavior: smooth; scroll-behavior: smooth;
} }
.container-fluid{
max-width: 1600px !important;
}
.max-1240{
max-width: 1240px !important;
}
.max400{ .max400{
max-height: 400px !important; max-height: 400px !important;
...@@ -61,6 +90,10 @@ html{ ...@@ -61,6 +90,10 @@ html{
display: none; display: none;
} }
nav .scrolllink span{
color: var(--ourbeige)!important;
}
.small-row{ .small-row{
--bs-gutter-x: 1.5rem; --bs-gutter-x: 1.5rem;
--bs-gutter-y: 0; --bs-gutter-y: 0;
...@@ -82,6 +115,10 @@ html{ ...@@ -82,6 +115,10 @@ html{
width:16.66666667% !important; width:16.66666667% !important;
} }
sup a{
font-weight: bolder !important;
font-size: small !important;
}
.col-1{ .col-1{
width: 8.33333333% !important; width: 8.33333333% !important;
...@@ -93,7 +130,15 @@ html{ ...@@ -93,7 +130,15 @@ html{
flex: 0 0 auto; flex: 0 0 auto;
max-width: 83.33333333% !important; max-width: 83.33333333% !important;
} }
.col {
padding-left: var(--simple-padding) !important;
padding-right: var(--simple-padding) !important;
}
/* h6 {
padding-left: var(--small-padding) !important;
padding-right: var(--small-padding) !important;
} */
.col{ .col{
max-width: 100% !important; max-width: 100% !important;
} }
...@@ -109,45 +154,66 @@ hr{ ...@@ -109,45 +154,66 @@ hr{
opacity: 1 !important; opacity: 1 !important;
height: 5px; height: 5px;
border-width: 3px !important; border-width: 3px !important;
margin-bottom: 10px !important; margin-bottom: var(--simple-margin) !important;
} }
/* * * * * * * */ /* * * * * * * */
/* * * BODY* * */ /* * * BODY* * */
/* * * * * * * */ /* * * * * * * */
@font-face { font-family: "AcuminPro"; src: url('https://static.igem.wiki/teams/5247/design/fonts/acumium-pro-book.ttf') format("truetype"); }
.progress-bar {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 5;
height: 4.5rem;
background: var(--darkerbeige) !important;
transform-origin: 0%;
}
body { body {
/* padding-top: 56px; */
background-color: var(--ourbeige); background-color: var(--ourbeige);
color: #493843; color: var(--offblack);
font-family: AcuminPro !important;
max-width: 100% !important;
} }
body.dark-mode { body.dark-mode {
background-color: var(--offblack); background-color: var(--offblack);
color: white; color: var(--ourbeige);
} }
p { p {
text-align: justify; text-align: justify;
} }
a { a {
color: var(--accent-gradient-one-of-three) !important; color: var(--lightblue) !important;
text-decoration: none !important; text-decoration: none !important;
} }
h3{ .our-h3{
margin-bottom: 2vw !important; margin-top: var(--simple-margin) !important;
margin-bottom: var(--simple-margin) !important;
}
.short-hr{
height: 1px !important;
border-width: 2px !important;
} }
code{ code{
color:black !important; color:var(--offblack) !important;
} }
.doi{ .doi{
color: var(--text-primary) !important; color: var(--lightblue) !important;
} }
.codesnippet{ .codesnippet{
padding-left: 30px; padding-left: 30px;
padding-top: 5px; padding-top: 5px;
padding-bottom: 5px; padding-bottom: 5px;
border-radius: 10px; border-radius: 10px;
margin-top: 10px; margin-top: var(--simple-margin);
margin-bottom: 15px !important; margin-bottom: var(--simple-margin) !important;
color: var(--text-primary) !important; color: var(--text-primary) !important;
background-color: rgb(217, 217, 217); background-color: rgb(217, 217, 217);
} }
...@@ -158,7 +224,7 @@ code{ ...@@ -158,7 +224,7 @@ code{
.sidebar{ .sidebar{
border-left: 6px solid; border-left: 6px solid;
border-left-color: var(--text-primary); border-left-color: var(--text-primary);
border-color: var(--accent-primary); border-color: var(--lightblue);
color: var(--text-primary); color: var(--text-primary);
list-style-type: none; list-style-type: none;
line-height: 280%; line-height: 280%;
...@@ -166,7 +232,7 @@ code{ ...@@ -166,7 +232,7 @@ code{
padding: 0px 0px; padding: 0px 0px;
} }
.sidebar>div>a>span:hover{ .sidebar>div>a>span:hover{
text-shadow: 5px 5px 15px black; text-shadow: 5px 5px 15px var(--offblack) var(--offblack);
transition: all 0.1s linear; transition: all 0.1s linear;
} }
.sideitem{ .sideitem{
...@@ -175,7 +241,7 @@ code{ ...@@ -175,7 +241,7 @@ code{
} }
.active-sideitem summary{ .active-sideitem summary{
color: white; color: var(--ourbeige);
} }
.sidesubtab ul{ .sidesubtab ul{
...@@ -184,27 +250,29 @@ code{ ...@@ -184,27 +250,29 @@ code{
.sidebar>div{ .sidebar>div{
overflow: hidden; overflow: hidden;
text-align: left; text-align: left;
margin-left: 10px; margin-left: var(--simple-margin);
cursor: pointer; cursor: pointer;
} }
/* .sidebar div a div div span ul li a span{
color: white ;
} */
.sidebar>div>a>span{ .sidebar>div>a>span{
padding: 0.5rem; padding: 0.5rem;
color: var(--text-primary); color: var(--text-primary);
} }
.active-scroll-spy{
background-color: yellowgreen !important;
}
/* * * * * * * */ /* * * * * * * */
/* * GENERAL * */ /* * GENERAL * */
/* * * * * * * */ /* * * * * * * */
section{
margin-bottom: var(--big-margin) !important;
margin-top: var(--big-margin) !important;
padding-top: var(--big-padding) !important;
}
.relative{position: relative;} .relative{position: relative;}
.absolute{position: absolute;} .absolute{position: absolute;}
.left-aligned {margin-left: auto;}
.align-items-center{align-items:center!important} .align-items-center{align-items:center!important}
.zweirem{padding-top: 2rem; padding-bottom: 3rem;} .zweirem{padding-top: 2rem; padding-bottom: 3rem;}
.left{float: left;} .left{float: left;}
...@@ -212,9 +280,8 @@ color: var(--text-primary); ...@@ -212,9 +280,8 @@ color: var(--text-primary);
.sticky-top { .sticky-top {
position: -webkit-sticky; position: -webkit-sticky;
position: sticky !important; position: sticky !important;
top: 0;
z-index: 1020; z-index: 1020;
top: 80px !important; top: 100px !important;
overflow-wrap: break-word; overflow-wrap: break-word;
} }
.small-only{ .small-only{
...@@ -225,8 +292,8 @@ color: var(--text-primary); ...@@ -225,8 +292,8 @@ color: var(--text-primary);
max-width: 100% !important; max-width: 100% !important;
} }
.header-container{ .header-container{
padding-top: 380px; padding-top: 0;
padding-bottom: 60px; padding-bottom: 10px;
background-color: var(--ourbeige); background-color: var(--ourbeige);
} }
.null{ .null{
...@@ -252,15 +319,16 @@ color: var(--text-primary); ...@@ -252,15 +319,16 @@ color: var(--text-primary);
/* * NAVBAR * */ /* * NAVBAR * */
/* * * * * * * */ /* * * * * * * */
.nav-link{ .nav-link{
color: var(--text-primary) !important; color: var(--offblack) !important;
} }
.nav-link:hover { .nav-link:hover {
color: white !important; color: var(--ourbeige) !important;
background-color: var(--text-primary) !important; background-color: var(--text-primary) !important;
border-radius: 7px; border-radius: 7px;
} }
.navbar{ .navbar{
backdrop-filter: blur(5px); backdrop-filter: blur(5px);
background-color: rgb(255,246,242, 0.8);
transition: visibility 0s, 0.6s, opacity 0.6s linear, transform 1s; transition: visibility 0s, 0.6s, opacity 0.6s linear, transform 1s;
} }
nav.navbar { nav.navbar {
...@@ -271,17 +339,17 @@ color: var(--text-primary); ...@@ -271,17 +339,17 @@ color: var(--text-primary);
color: var(--text-primary) !important; color: var(--text-primary) !important;
} }
.dropdown-item:hover{ .dropdown-item:hover{
color: white !important; color: var(--ourbeige) !important;
background-color: var(--text-primary) !important; background-color: var(--text-primary) !important;
} }
.nav-item.dropdown:hover .dropdown-menu { .nav-item.dropdown:hover .dropdown-menu {
display: block; display: block;
background-color: white; background-color: var(--ourbeige);
border-color: var(--text-primary); border-color: var(--text-primary);
border-radius: 7px; border-radius: 7px;
} }
.navbar-brand{ .navbar-brand{
color: var(--text-primary) !important; color: var(--offblack) !important;
} }
.dropdown-menu{ .dropdown-menu{
margin-top: 0 !important; margin-top: 0 !important;
...@@ -294,20 +362,40 @@ table { ...@@ -294,20 +362,40 @@ table {
} }
td, th { td, th {
border: 1px solid black; border: 1px solid var(--offblack);
text-align: left; text-align: left;
padding: 8px; padding: 8px;
} }
tr:nth-child(even) { .min-w-full{
min-width: 100% !important;
}
.parttable thead tr td:nth-child(4){ /* length */
max-width: 40px !important;
}
.parttable thead tr td:nth-child(5){ /* type */
max-width: 40px !important;
}
.parttable thead tr td:nth-child(2){ /* code */
max-width: 60px !important;
}
.parttable thead tr td:nth-child(1){ /* name */
max-width: 60px !important;
}
thead tr {
background-color: var(--text-primary) !important;
color: var(--background);
}
tbody tr:nth-child(even) {
background-color: #ededed; background-color: #ededed;
} }
tr:nth-child(odd) { tbody tr:nth-child(odd) {
background-color: #f3f3f3; background-color: #f3f3f3;
} }
tr:nth-child(1) {
background-color: var(--accent-gradient-one-of-three) !important;
}
/* * * * * * * */ /* * * * * * * */
...@@ -316,19 +404,37 @@ tr:nth-child(1) { ...@@ -316,19 +404,37 @@ tr:nth-child(1) {
.bg-video-container{ .bg-video-container{
margin-bottom: 10vw !important; margin-bottom: 10vw !important;
} }
.b-lg{
border-color: var(--igemlightgreen) !important;
}
.b-lo{
border-color: var(--light-secondary) !important;
}
.bg-lg{
background-color: var(--igemlightgreen) !important;
}
.bg-lp{
background-color: var(--lightpurple) !important;
}
.bg-lo{
background-color: var(--light-secondary) !important;
}
.bg-db{ .bg-db{
background-color: var(--darkerbeige) !important; background-color: var(--darkerbeige) !important;
} }
.bg-lb{ .bg-lb{
background-color: var(--lightblue) !important; background-color: var(--lightblue) !important;
} }
.bg-w{
background-color: white !important;
}
.bg-d{ .bg-d{
background-color: var(--text-primary) !important; background-color: var(--text-primary) !important;
color: var(--ourbeige);
} }
.bg-l{ .bg-l{
background-color: var(--text-primary) !important; background-color: var(--text-primary) !important;
color: white; color: var(--ourbeige);
} }
.bg-transp{ .bg-transp{
background:transparent; background:transparent;
...@@ -341,31 +447,26 @@ margin-bottom: 10vw !important; ...@@ -341,31 +447,26 @@ margin-bottom: 10vw !important;
.base { .base {
width: 100%; width: 100%;
background-color: var(--accent-primary); background-color: var(--lightblue);
padding: 120px 30px; padding: 120px 30px;
} }
.header-title{ .header-title{
color: var(--text-primary) !important; text-align: center;
text-align: left; align-items: center;
align-self: flex-start; margin: auto !important;
padding: 0 30px; padding: 0 30px;
font-size: 130px; font-size: 130px;
font-weight: 900; font-weight: 900;
line-height: 130px; line-height: 130px;
} }
/* p:first-child::first-letter{
color:var(--text-primary);
font-weight: bold;
font-size: x-large;
} */
.popart{ .popart{
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
font-size: 15vh; font-size: 5rem;
letter-spacing:0.1em; letter-spacing:0.1em;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
-webkit-text-stroke-width: 0.3vw; -webkit-text-stroke-width: 0.3vw;
...@@ -378,26 +479,26 @@ margin-bottom: 10vw !important; ...@@ -378,26 +479,26 @@ margin-bottom: 10vw !important;
min-height: 5vw; min-height: 5vw;
margin-bottom: 20px !important; margin-bottom: 20px !important;
} }
h2{
font-size: 3rem !important;
background-clip: text !important; h1, h2, h3, h4, h5{
margin-top: var(--simple-margin) !important;
margin-bottom: var(--simple-margin) !important;
color: var(--text-primary) !important; color: var(--text-primary) !important;
padding-top: 15px !important;
font-weight: bolder !important; font-weight: bolder !important;
/* background-image: repeating-linear-gradient(-45deg, var(--text-primary) 0, var(--text-primary) 2px, white 2px, white 4px) !important; }
*/}
.underline--magical { .underline--magical {
background-image: linear-gradient(120deg, var(--lightblue) 0%, var(--mediumpurple) 100%); background-image: linear-gradient(120deg, var(--lightblue) 0%, var(--mediumpurple) 100%);
background-repeat: no-repeat; background-repeat: no-repeat;
color: black; color: var(--offblack);
background-size: 100% 0.2em; background-size: 100% 0.2em;
background-position: 0 105%; background-position: 0 105%;
transition: background-size 0.25s ease-in; transition: background-size 0.25s ease-in;
} }
.underline--magical:hover { .underline--magical:hover {
background-size: 100% 100%; background-size: 100% 100%;
color: black !important; color: var(--offblack) !important;
text-decoration: none !important; text-decoration: none !important;
} }
...@@ -417,7 +518,7 @@ h2{ ...@@ -417,7 +518,7 @@ h2{
background-image: linear-gradient(#a0aec0, #a0aec0); background-image: linear-gradient(#a0aec0, #a0aec0);
} }
.v3:hover p { .v3:hover p {
color: #000; color: var(--offblack);
background-size: 0% 100%; background-size: 0% 100%;
} }
...@@ -463,7 +564,7 @@ h2{ ...@@ -463,7 +564,7 @@ h2{
} }
.bd-callout-danger { .bd-callout-danger {
border-left-color: #d9534f; border-left-color: var(--lightblue);
} }
/* * * * * * * */ /* * * * * * * */
...@@ -478,72 +579,13 @@ footer a { ...@@ -478,72 +579,13 @@ footer a {
text-decoration: none; text-decoration: none;
} }
footer a:hover { footer a:hover {
color: var(--accent-gradient-three-of-three) !important; color: var(--lightblue) !important;
text-decoration: underline; text-decoration: underline;
} }
/* * * * * * * * */
/* * *BUTTONS* * */
/* * * * * * * * */
.hp-more-button{
padding: 5px;
border-radius: 10px;
padding-left: 10px;
padding-right: 10px;
margin-left: 5px;
margin-right: 5px;
}
.hp-more-button:hover, .bfh-more-button:hover{
filter: brightness(0.5);
}
.bfh-more-button{
margin-top: 20px;
padding: 5px;
border-radius: 10px;
padding-left: 10px;
padding-right: 10px;
margin-left: 5px;
margin-right: 5px;
}
/* * * * * * * * */
/*VILLAGE BUTTONS*/
/* * * * * * * * */
.bottom-buttons{
margin-top: 50px !important;
margin-bottom: 20px;
padding-left: 30px;
}
.normal-buttons{
margin-top: 10px !important;
margin-bottom: 20px;
padding-left: 30px;
}
.village-style-button{
flex: 1 0 0%;
box-shadow: 5px 5px 15px gray !important;
border-radius: 2rem !important;
padding: 0 !important;
max-width: 12% !important;
aspect-ratio: 2 / 3 !important;
margin: auto;
}
.village-style-button:hover{
box-shadow: 5px 5px 15px black !important;
}
.village-style-button h3{
text-align: center !important;
font-size: 10px;
font-weight: bold;
color: #000;
}
.village-style-button img{
max-width: 70% !important;
max-height: 70% !important;
padding-top: 20px !important;
}
/* * * * * * * * * */ /* * * * * * * * * */
/* * * IMAGES * * */ /* * * IMAGES * * */
...@@ -551,6 +593,8 @@ footer a:hover { ...@@ -551,6 +593,8 @@ footer a:hover {
.teamcolzwei{ .teamcolzwei{
margin-top: 3rem !important; margin-top: 3rem !important;
} }
img, img,
picture, picture,
svg { svg {
...@@ -578,15 +622,21 @@ img .middle{ ...@@ -578,15 +622,21 @@ img .middle{
/* .sponsor-portrait{ /* .sponsor-portrait{
border: 5px solid var(--accent-primary); border: 5px solid var(--accent-primary);
} */ } */
.pronouns{
font-size: 1rem !important;
font-style: italic !important;
}
.team-name{ .team-name{
font-size: large; font-size: 1.6rem !important;
font-weight: bold; font-weight: bold;
text-align: left !important; text-align: left !important;
width: min-content; width: fit-content !important;
}
.team-img{
border-radius: 50% !important;
} }
.socials{ .socials{
height: 1.5rem; height: 2rem;
width: auto; width: auto;
margin: 0.5rem; margin: 0.5rem;
} }
...@@ -598,6 +648,34 @@ img .middle{ ...@@ -598,6 +648,34 @@ img .middle{
.steckbrief{ .steckbrief{
margin-top: 2rem !important; margin-top: 2rem !important;
} }
.steckbrief-box{
height: fit-content;
padding: 10px;
border-radius: 30px;
box-shadow: 3px 3px 5px gray !important;
}
.steckbody{
height: 190px !important;
overflow-y: scroll;
overflow-x: hidden;
}
.brieffacts{
overflow-y: scroll;
overflow-x: hidden;
height: 270px !important;
}
.frontbutton, .backbutton{
background-color: var(--mediumpurple) !important;
color: var(--background) !important;
padding: 5px;
border-radius: 10px;
margin: auto;
}
.parent-button{
display: flex;
align-items: center !important;
}
.spin { .spin {
transition: transform 1s ease-in-out; transition: transform 1s ease-in-out;
...@@ -605,17 +683,18 @@ img .middle{ ...@@ -605,17 +683,18 @@ img .middle{
.spin:hover{ .spin:hover{
transform: rotate(360deg); transform: rotate(360deg);
} }
.side-margins-auto {
margin-left: auto !important;
margin-right: auto !important;
}
.img-sponsor{ .img-sponsor{
max-width: 70%; max-width: 70%;
max-height: 150px; max-height: 150px;
margin-left: auto;
margin-right: auto;
} }
.img-sponsor-partner-page{ .img-sponsor-partner-page{
max-width: 70%; max-width: 70%;
max-height: 100px; max-height: 100px;
margin-left: auto;
margin-right: auto;
padding-bottom: 10px; padding-bottom: 10px;
padding-top: 10px; padding-top: 10px;
} }
...@@ -638,9 +717,23 @@ img .middle{ ...@@ -638,9 +717,23 @@ img .middle{
max-height: 70% !important; max-height: 70% !important;
} }
.img-round{ .img-round{
border-radius: 50%; border-radius: 50%;
max-width: 80%; width: 120px;
height: 120px;
max-height: 13vh;
max-width: 13vh;
object-fit: cover !important;
}
.img-round-panel{
border-radius: 50%;
width: 100px;
height: 100px;
max-height: 10vh;
max-width: 10vh;
object-fit: cover !important;
} }
.img-cube{ .img-cube{
max-width: 80%; max-width: 80%;
...@@ -653,12 +746,13 @@ img .middle{ ...@@ -653,12 +746,13 @@ img .middle{
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
} }
.sponsor-portrait{ .sponsor-portrait{
border-radius: 10px !important;
border: 5px solid var(--accent-primary); border: 5px solid var(--accent-primary);
background-color: white; background-color: var(--ourbeige);
} }
.sponsor-text-right{ .sponsor-text-right{
margin-left: 20px; margin-left: var(--simple-margin);
} }
.sponsor-text-left{ .sponsor-text-left{
margin-right: 20px; margin-right: 20px;
...@@ -694,7 +788,7 @@ img .middle{ ...@@ -694,7 +788,7 @@ img .middle{
background-image: url(https://static.igem.wiki/teams/5247/sponsors/integra-foto.jpg); background-image: url(https://static.igem.wiki/teams/5247/sponsors/integra-foto.jpg);
background-size: auto 100%; background-size: auto 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
background-color: white; background-color: var(--ourbeige);
} }
#integra-portrait-logo{ #integra-portrait-logo{
padding-top: 10px; padding-top: 10px;
...@@ -755,7 +849,7 @@ svg{ ...@@ -755,7 +849,7 @@ svg{
} }
.spacer { .spacer {
height: 50vh; height: 50vh;
background-color: #000; background-color: var(--offblack);
} }
.hello:hover { .hello:hover {
...@@ -768,14 +862,14 @@ svg{ ...@@ -768,14 +862,14 @@ svg{
animation-iteration-count: infinite; animation-iteration-count: infinite;
animation-timing-function: ease-in-out; animation-timing-function: ease-in-out;
-webkit-text-stroke-width: 3px; -webkit-text-stroke-width: 3px;
-webkit-text-stroke-color: black; -webkit-text-stroke-color: var(--offblack);
} }
.terminal-box{ .terminal-box{
margin-top: 10px; margin-top: 10px;
margin-bottom: 10px; margin-bottom: 10px;
background-color: black; background-color: var(--offblack);
border-radius: 10px; border-radius: 10px;
color: white; color: var(--ourbeige);
padding-left: 30px; padding-left: 30px;
padding-right: 20px; padding-right: 20px;
padding-top: 10px; padding-top: 10px;
...@@ -800,9 +894,9 @@ svg{ ...@@ -800,9 +894,9 @@ svg{
display: inline-flex; display: inline-flex;
margin-top: 10px; margin-top: 10px;
margin-bottom: 10px; margin-bottom: 10px;
background-color: black; background-color: var(--offblack);
border-radius: 10px; border-radius: 10px;
color: white; color: var(--ourbeige);
padding-left: 30px; padding-left: 30px;
padding-right: 20px; padding-right: 20px;
padding-top: 10px; padding-top: 10px;
...@@ -885,8 +979,14 @@ svg{ ...@@ -885,8 +979,14 @@ svg{
.container_document{ .container_document{
max-width: 40%; max-width: 40%;
} }
.download-butt{
color: var(--ourbeige) !important;
display: inline-block;
height: 50px !important;
}
.download-butt{ /* @media unnötig */ .download-butt{ /* @media unnötig */
background-color: var(--text-primary); background: var(--ourgradient);
padding: 0.5vh !important; padding: 0.5vh !important;
border-radius: 5px; border-radius: 5px;
margin: auto !important; margin: auto !important;
...@@ -897,8 +997,9 @@ svg{ ...@@ -897,8 +997,9 @@ svg{
min-height: 2vh !important; min-height: 2vh !important;
} }
.download-col{ .download-col{
height: 5vh !important;
display: flex; display: flex;
margin-top: var(--simple-margin) !important;
margin-bottom: var(--simple-margin) !important;
align-items: center !important; align-items: center !important;
} }
.small-i{ /* @media unnötig */ .small-i{ /* @media unnötig */
...@@ -906,22 +1007,23 @@ svg{ ...@@ -906,22 +1007,23 @@ svg{
max-width: 1100px !important; max-width: 1100px !important;
} }
.one-pdf-line{ /* @media fertig */ .one-pdf-line{ /* @media fertig */
height: 1450px !important; max-height: 650px !important;
height: 100vh !important;
max-width: 40% !important;
} }
.two-pdf-line{ /* @media fertig */ .two-pdf-line{ /* @media fertig */
max-height: 650px !important; min-height: 650px !important;
height: 35vh !important; height: 100vh !important;
max-width: 50%;
} }
/* SHAPES */ /* SHAPES */
.circle { .circle {
display: flex; display: flex;
width: 10vw; width: 10vw;
color: white; color: var(--ourbeige);
height: 10vw; height: 10vw;
background-color: var(--text-primary) !important; background-color: var(--text-primary) !important;
box-shadow: 3px 3px 10px black !important; box-shadow: 3px 3px 10px var(--offblack) !important;
border-radius: 50%; border-radius: 50%;
margin: 1vw; margin: 1vw;
} }
...@@ -934,7 +1036,7 @@ svg{ ...@@ -934,7 +1036,7 @@ svg{
/*collapsible*/ /*collapsible*/
.collapse-card { .collapse-card {
margin-bottom: 20px; margin-bottom: var(--big-padding) !important;
border-radius: 4px; border-radius: 4px;
margin-top: 20px; margin-top: 20px;
color: #333; color: #333;
...@@ -943,7 +1045,13 @@ svg{ ...@@ -943,7 +1045,13 @@ svg{
width: 100%; width: 100%;
} }
.collapse-card .btn {
margin-right: var(--simple-margin);
}
.collapse-card h6 {
margin-top: auto !important;
margin-bottom: auto !important;
}
/*boxes*/ /*boxes*/
.hint-container { .hint-container {
...@@ -1055,7 +1163,60 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before { ...@@ -1055,7 +1163,60 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before {
.hint-container.info code { .hint-container.info code {
background:var(--info-code-bg-color) background:var(--info-code-bg-color)
} }
.hint-container.danger {
border-color:var(--danger-border-color);
background:var(--danger-bg-color)
}
.hint-container.danger>.hint-container-title {
color:var(--danger-title-color)
}
.hint-container.danger>.hint-container-title:before {
background-image:url("")
}
.hint-container.danger code {
background:var(--danger-code-bg-color)
}
.hint-container.tip {
border-color:var(--tip-border-color);
background:var(--tip-bg-color) !important;
}
.hint-container.tip>.hint-container-title {
color:var(--tip-title-color)
}
.hint-container.tip>.hint-container-title:before {
background-image:url("")
}
.hint-container.tip code {
background:var(--tip-code-bg-color)
}
.hint-container.warning {
border-color:var(--warning-border-color);
background:var(--warning-bg-color) !important;
}
.hint-container.warning>.hint-container-title {
color:var(--warning-title-color);
}
.hint-container.warning>.hint-container-title:before {
background-image:url("")
}
.hint-container.warning code {
background:var(--warning-code-bg-color)
}
.hint-container.note {
border-color:var(--note-border-color);
background:var(--note-bg-color) !important;
}
.hint-container.note>.hint-container-title {
color:var(--note-title-color);
}
.hint-container.note>.hint-container-title:before {
background-image:url("")
}
.hint-container.note code {
background:var(--note-code-bg-color)
}
/*POPUP*/ /*POPUP*/
.popup { .popup {
...@@ -1075,7 +1236,7 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before { ...@@ -1075,7 +1236,7 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before {
min-width: 50vw; min-width: 50vw;
min-height: 20vw; min-height: 20vw;
background-color: #555; background-color: #555;
color: #fff; color: var(--ourbeige);
text-align: center; text-align: center;
border-radius: 6px; border-radius: 6px;
z-index: 1; z-index: 1;
...@@ -1094,7 +1255,7 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before { ...@@ -1094,7 +1255,7 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before {
} }
.tl-butt img:hover{ .tl-butt img:hover{
cursor: pointer; cursor: pointer;
box-shadow: 3px 3px 10px black; box-shadow: 3px 3px 10px var(--offblack);
} }
/* Add animation (fade in the popup) */ /* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn { @-webkit-keyframes fadeIn {
...@@ -1150,7 +1311,7 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before { ...@@ -1150,7 +1311,7 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before {
.wrapper{ .wrapper{
width: 500px; width: 500px;
height: 100%; height: 100%;
background: #fff; background: var(--ourbeige);
margin: 15px auto 0; margin: 15px auto 0;
} }
.wrapper .tabs_wrap{ .wrapper .tabs_wrap{
...@@ -1192,7 +1353,7 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before { ...@@ -1192,7 +1353,7 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before {
.wrapper .tabs_wrap ul li:hover, .wrapper .tabs_wrap ul li:hover,
.wrapper .tabs_wrap ul li.active{ .wrapper .tabs_wrap ul li.active{
background: #7fc469; background: #7fc469;
color: #fff; color: var(--ourbeige);
} }
...@@ -1290,12 +1451,11 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before { ...@@ -1290,12 +1451,11 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before {
} }
.lnp > img{ .lnp > img{
display: block; display: block;
margin-left: auto;
margin-right: auto;
width: 8rem !important; width: 8rem !important;
max-width: 66% !important; max-width: 66% !important;
transition: all 1s ease; transition: all 1s ease;
border: 5px solid var(--text-primary); border: 5px solid var(--text-primary);
margin: auto;
} }
.lnp:hover > img{ .lnp:hover > img{
display: block; display: block;
...@@ -1401,7 +1561,7 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before { ...@@ -1401,7 +1561,7 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before {
} }
.chart.vis-d3-maps-choropleth .map-key.mobile { .chart.vis-d3-maps-choropleth .map-key.mobile {
background: #0000; background: var(--offblack)0;
position: static!important position: static!important
} }
...@@ -1421,7 +1581,7 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before { ...@@ -1421,7 +1581,7 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before {
.chart.vis-d3-maps-choropleth .map-key.map-key-mb, .chart.vis-d3-maps-choropleth .map-key.map-key-mb,
.chart.vis-d3-maps-choropleth .map-key.map-key-mt, .chart.vis-d3-maps-choropleth .map-key.map-key-mt,
.chart.vis-d3-maps-choropleth .map-key.mobile { .chart.vis-d3-maps-choropleth .map-key.mobile {
background: #0000; background: var(--offblack)0;
padding: 0; padding: 0;
position: static!important position: static!important
} }
...@@ -1452,9 +1612,9 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before { ...@@ -1452,9 +1612,9 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before {
} }
.chart.vis-d3-maps-choropleth .dw-tooltip { .chart.vis-d3-maps-choropleth .dw-tooltip {
background: #fff; background: var(--ourbeige);
border: 1px solid #f5f5f5; border: 1px solid #f5f5f5;
box-shadow: 3px 3px 3px #0000001a; box-shadow: 3px 3px 3px var(--offblack)0001a;
font-size: 11px; font-size: 11px;
max-width: 200px; max-width: 200px;
padding: 10px; padding: 10px;
...@@ -1518,11 +1678,11 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before { ...@@ -1518,11 +1678,11 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before {
font-weight: 700; font-weight: 700;
padding: 8px 35px 8px 14px; padding: 8px 35px 8px 14px;
position: relative; position: relative;
text-shadow: 0 1px 0 #ffffff80 text-shadow: 0 1px 0 var(--cebitecgray)
} }
.chart.vis-d3-maps-choropleth .dw-tooltip .tooltip-warning table { .chart.vis-d3-maps-choropleth .dw-tooltip .tooltip-warning table {
background: #fff; background: var(--ourbeige);
border-radius: 1px; border-radius: 1px;
display: block; display: block;
font-weight: 400; font-weight: 400;
...@@ -1756,9 +1916,9 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before { ...@@ -1756,9 +1916,9 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before {
} }
/* Additional bc missing? */ /* Additional bc missing? */
.datawrapper-llngz-1tjke6r.horizontal g.labels text, .datawrapper-llngz-1tjke6r.horizontal g.labels text tspan { /* .datawrapper-llngz-1tjke6r.horizontal g.labels text, .datawrapper-llngz-1tjke6r.horizontal g.labels text tspan {
dominant-baseline: hanging; dominant-baseline: hanging;
} } */
.datawrapper-llngz-zuu2r2.horizontal:not(.dir-rtl) g.labels text.min, .datawrapper-llngz-zuu2r2.horizontal:not(.dir-rtl) g.labels text tspan.min { .datawrapper-llngz-zuu2r2.horizontal:not(.dir-rtl) g.labels text.min, .datawrapper-llngz-zuu2r2.horizontal:not(.dir-rtl) g.labels text tspan.min {
text-anchor: start; text-anchor: start;
} }
...@@ -1770,10 +1930,10 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before { ...@@ -1770,10 +1930,10 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before {
font-family: Roboto, sans-serif; font-family: Roboto, sans-serif;
font-size: 12px; font-size: 12px;
} }
.datawrapper-llngz-1tjke6r.horizontal g.labels text, .datawrapper-llngz-1tjke6r.horizontal g.labels text tspan { /* .datawrapper-llngz-1tjke6r.horizontal g.labels text, .datawrapper-llngz-1tjke6r.horizontal g.labels text tspan {
dominant-baseline: hanging; dominant-baseline: hanging;
} }
.datawrapper-llngz-zuu2r2.horizontal:not(.dir-rtl) g.labels text.max, .datawrapper-llngz-zuu2r2.horizontal:not(.dir-rtl) g.labels text tspan.max { .data */wrapper-llngz-zuu2r2.horizontal:not(.dir-rtl) g.labels text.max, .datawrapper-llngz-zuu2r2.horizontal:not(.dir-rtl) g.labels text tspan.max {
text-anchor: end; text-anchor: end;
} }
.chart.vis-d3-maps-choropleth .map-outer { .chart.vis-d3-maps-choropleth .map-outer {
...@@ -1867,7 +2027,6 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before { ...@@ -1867,7 +2027,6 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before {
} }
.slick-slider .slick-track,
.slick-slider .slick-list .slick-slider .slick-list
...@@ -1886,53 +2045,8 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before { ...@@ -1886,53 +2045,8 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before {
} }
.slick-track
{
position: relative;
top: 0;
left: 0;
display: block;
margin-left: auto;
margin-right: auto;
}
.slick-track:before,
.slick-track:after
{
display: table;
content: '';
}
.slick-track:after
{
clear: both;
}
.slick-loading .slick-track
{
visibility: hidden;
}
.slick-slide .slick-slide
...@@ -2123,7 +2237,7 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before { ...@@ -2123,7 +2237,7 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before {
opacity: .75; opacity: .75;
color: white; color: var(--ourbeige);
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
...@@ -2345,7 +2459,7 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before { ...@@ -2345,7 +2459,7 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before {
opacity: .25; opacity: .25;
color: black; color: var(--offblack);
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
...@@ -2360,7 +2474,7 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before { ...@@ -2360,7 +2474,7 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before {
opacity: .75; opacity: .75;
color: black; color: var(--offblack);
} }
...@@ -2376,16 +2490,14 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before { ...@@ -2376,16 +2490,14 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before {
.meditabs, .meditabs, .timelinecardtabs, .timelinepersontabs{ .meditabs, .meditabs, .timelinecardtabs, .timelinepersontabs{
display: none; display: none;
} }
.timelinepersontabs{
.tabbutton{ margin-bottom: var(--big-margin);
padding: 5px; }
border-radius: 10px; .timelinecardtabs{
padding-left: 10px; max-width: 100% !important;
padding-right: 10px;
margin-left: 5px;
margin-right: 5px;
} }
.blockquote-wrapper { .blockquote-wrapper {
display: flex; display: flex;
height: fit-content; height: fit-content;
...@@ -2401,11 +2513,11 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before { ...@@ -2401,11 +2513,11 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before {
} }
/* Blockquote header */ /* Blockquote header */
.blockquote h2 { .blockquote .block-h2 {
font-style: italic; font-style: italic;
position: relative; /* for pseudos */ position: relative; /* for pseudos */
color: black; color: var(--offblack);
font-size: 2.8rem; font-size: 2.8rem !important;
font-weight: normal; font-weight: normal;
line-height: 1; line-height: 1;
font-size: larger; font-size: larger;
...@@ -2416,7 +2528,7 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before { ...@@ -2416,7 +2528,7 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before {
} }
/* Blockquote right double quotes */ /* Blockquote right double quotes */
.blockquote h2:after { .blockquote .block-h2:after {
content:""; content:"";
position: absolute; position: absolute;
border: 5px solid var(--text-primary); border: 5px solid var(--text-primary);
...@@ -2430,7 +2542,7 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before { ...@@ -2430,7 +2542,7 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before {
z-index: 3; z-index: 3;
} }
.blockquote h2:before { .blockquote .block-h2:before {
content:""; content:"";
position: absolute; position: absolute;
width: 80px; width: 80px;
...@@ -2450,10 +2562,10 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before { ...@@ -2450,10 +2562,10 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before {
} }
/* Blockquote subheader */ /* Blockquote subheader */
.blockquote h4 { .blockquote .block-h4{
position: relative; position: relative;
color: black; color: var(--offblack);
font-size: 1.3rem; font-size: 1.3rem !important;
font-weight: 400; font-weight: 400;
line-height: 1.2; line-height: 1.2;
font-size: medium; font-size: medium;
...@@ -2469,7 +2581,7 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before { ...@@ -2469,7 +2581,7 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before {
margin-left:-12px; margin-left:-12px;
} }
/* #ct{height:150px; width:370px;border:4px solid var(--accent-dark);margin: 100px auto;text-align:center;position:relative;color:#fff;padding:15px;} /* #ct{height:150px; width:370px;border:4px solid var(--accent-dark);margin: 100px auto;text-align:center;position:relative;color:var(--ourbeige);padding:15px;}
span{ span{
background:var(--background); background:var(--background);
color:var(--accent-dark); color:var(--accent-dark);
...@@ -2482,7 +2594,7 @@ span{ ...@@ -2482,7 +2594,7 @@ span{
height:36px; height:36px;
width:36px; width:36px;
border-radius:50%; border-radius:50%;
border:4px solid #fff; border:4px solid var(--ourbeige);
transform:rotate(-45deg); transform:rotate(-45deg);
position:absolute; position:absolute;
background:var(--ourbeige); background:var(--ourbeige);
...@@ -2521,7 +2633,7 @@ span{ ...@@ -2521,7 +2633,7 @@ span{
position: relative; position: relative;
font-style: sans-serif; font-style: sans-serif;
font-weight: 800; font-weight: 800;
color: black; color: var(--offblack);
padding: 30px 0; padding: 30px 0;
width: 100%; width: 100%;
max-width: 80%; max-width: 80%;
...@@ -2535,7 +2647,7 @@ span{ ...@@ -2535,7 +2647,7 @@ span{
/* Blockquote header */ /* Blockquote header */
.blockquotex h1 { .blockquotex h1 {
position: relative; position: relative;
color: black; color: var(--offblack);
font-size: 20px !important; font-size: 20px !important;
font-weight: 800; font-weight: 800;
line-height: 1; line-height: 1;
...@@ -2593,7 +2705,7 @@ span{ ...@@ -2593,7 +2705,7 @@ span{
} }
.react-flow__node-mindmap { .react-flow__node-mindmap {
background: white; background: var(--ourbeige);
border-radius: 2px; border-radius: 2px;
border: 1px solid transparent; border: 1px solid transparent;
padding: 2px 5px; padding: 2px 5px;
...@@ -2811,26 +2923,6 @@ span{ ...@@ -2811,26 +2923,6 @@ span{
} }
/* .children .node{
background: --webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.15)), to(rgba(0, 0, 0, 0.15))) var(--background);
background: linear-gradient(to top, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15)) var(--accent-primary);
}
.children .children .node{
background: --webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.30)), to(rgba(0, 0, 0, 0.30))) var(--background);
background: linear-gradient(to top, rgba(0, 0, 0, 0.30), rgba(0, 0, 0, 0.30)) var(--accent-primary);
}
.children .children .children .node{
background: --webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.45)), to(rgba(0, 0, 0, 0.45))) var(--background);
background: linear-gradient(to top, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)) var(--accent-primary);
}
.children .children .children .children .node{
background: --webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.60)), to(rgba(0, 0, 0, 0.60))) var(--background);
background: linear-gradient(to top, rgba(0, 0, 0, 0.60), rgba(0, 0, 0, 0.60)) var(--accent-primary);
}
*/
#L1, #R1{ #L1, #R1{
line-height: calc(var(--node-size) / 4); line-height: calc(var(--node-size) / 4);
...@@ -2851,144 +2943,46 @@ span{ ...@@ -2851,144 +2943,46 @@ span{
} }
/* ========================
BUTTON TWO
======================== */
.btn-two {
color: #fff;
transition: all 0.5s;
position: relative;
}
.btn-two span {
z-index: 2;
display: block;
position: absolute;
width: 100%;
height: 100%;
}
.btn-two::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
transition: all 0.5s;
border: 1px solid rgba(255, 255, 255, 0.2);
background-color: rgba(255, 255, 255, 0.1);
}
.btn-two::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
transition: all 0.5s;
border: 1px solid rgba(255, 255, 255, 0.2);
background-color: rgba(255, 255, 255, 0.1);
}
.btn-two:hover::before {
transform: rotate(-45deg);
background-color: rgba(255, 255, 255, 0);
}
.btn-two:hover::after {
transform: rotate(45deg);
background-color: rgba(255, 255, 255, 0);
}
/* /*
======================== ========================
BUTTON THREE BUTTONS
======================== */ ========================
*/
.btn-three { button span {
color: #fff;
transition: all 0.5s;
position: relative;
}
.btn-three::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
background-color: rgba(255, 255, 255, 0.1);
transition: all 0.3s;
}
.btn-three:hover::before {
opacity: 0;
transform: scale(0.5, 0.5);
}
.btn-three::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
opacity: 0;
transition: all 0.3s;
border: 1px solid rgba(255, 255, 255, 0.5);
transform: scale(1.2, 1.2);
}
.btn-three:hover::after {
opacity: 1;
transform: scale(1, 1);
}
div[class*="boxy"] {
height: 33.33%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
margin: auto; margin: auto;
} }
button {
.boxy-1 { margin-top: var(--simple-margin) !important;
background-color: var(--text-primary); margin-bottom: var(--simple-margin) !important;
max-width: fit-content; border-radius: var(--border-radius) !important;
} cursor: pointer;
.boxy-2 { text-align: center;
background-color: var(--text-primary);
max-width: fit-content;
} }
.boxy-3 { .btn1{
background-color: var(--text-primary); padding: var(--button-padding) var(--small-padding) !important;
max-width: fit-content; }
.btn1:hover{
filter: brightness(0.7);
} }
.boxy-1{
.btn-new { border-radius: 10px;
line-height: 50px;
height: 50px;
text-align: center;
width: 250px;
cursor: pointer;
} }
/*
========================
BUTTON ONE
========================
*/
.btn-one { .btn-one {
color: #fff; border-style: none;
height: 100px;
width: 200px;
padding: var(--small-padding) var(--simple-padding) !important;
background: var(--ourgradient);
color: var(--ourbeige);
transition: all 0.3s; transition: all 0.3s;
position: relative; position: relative;
display: grid;
margin-left: auto !important;
margin-right: auto !important;
} }
.btn-one span {
transition: all 0.3s;
}
.btn-one::before { .btn-one::before {
content: ""; content: "";
position: absolute; position: absolute;
...@@ -3007,13 +3001,7 @@ div[class*="boxy"] { ...@@ -3007,13 +3001,7 @@ div[class*="boxy"] {
border-bottom-color: rgba(255, 255, 255, 0.5); border-bottom-color: rgba(255, 255, 255, 0.5);
transform: scale(0.1, 1); transform: scale(0.1, 1);
} }
.btn-one:hover span {
letter-spacing: 2px;
}
.btn-one:hover::before {
opacity: 1;
transform: scale(1, 1);
}
.btn-one::after { .btn-one::after {
content: ""; content: "";
position: absolute; position: absolute;
...@@ -3030,14 +3018,18 @@ div[class*="boxy"] { ...@@ -3030,14 +3018,18 @@ div[class*="boxy"] {
transform: scale(0.1, 1); transform: scale(0.1, 1);
} }
.tabbutton{
margin-left: 5px;
margin-right: 5px;
}
.backtotop { .backtotop {
place-self: end; place-self: end;
/* visual styling */ /* visual styling */
text-decoration: none; text-decoration: none;
padding: 10px; padding: 10px;
color:white !important; color:var(--ourbeige) !important;
background: var(--text-primary); background: var(--ourgradient);
border-radius: 100px; border-radius: 100px;
white-space: nowrap; white-space: nowrap;
margin-left: 40px; margin-left: 40px;
...@@ -3045,12 +3037,54 @@ div[class*="boxy"] { ...@@ -3045,12 +3037,54 @@ div[class*="boxy"] {
text-align: right; text-align: right;
} }
.backtotop:hover{ .backtotop:hover{
box-shadow: 5px 5px 15px black; box-shadow: 5px 5px 15px var(--offblack);
color: white !important; color: var(--ourbeige) !important;
transition: all 0.1s linear; transition: all 0.1s linear;
} }
.svg-button:hover{
cursor: pointer;
}
/* * * * * * * * */
/*VILLAGE BUTTONS*/
/* * * * * * * * */
.bottom-buttons{
margin-top: 50px !important;
margin-bottom: 20px;
padding-left: 30px;
}
.normal-buttons{
margin-top: 10px !important;
margin-bottom: 20px;
padding-left: 30px;
}
.village-style-button{
flex: 1 0 0%;
box-shadow: 5px 5px 15px gray !important;
border-radius: 2rem !important;
padding: 0 !important;
max-width: 12% !important;
aspect-ratio: 2 / 3 !important;
margin: auto;
}
.village-style-button:hover{
box-shadow: 5px 5px 15px var(--offblack) !important;
}
.village-style-button h3{
text-align: center !important;
font-size: 10px;
font-weight: bold;
color: var(--offblack);
}
.village-style-button img{
max-width: 70% !important;
max-height: 70% !important;
padding-top: 20px !important;
}
/*
=======================================================
*/
.cls-1{fill:#c8d5ea;} .cls-1{fill:#c8d5ea;}
.cls-2{fill:#e8f1f9;opacity:0.43;} .cls-2{fill:#e8f1f9;opacity:0.43;}
...@@ -3067,10 +3101,6 @@ div[class*="boxy"] { ...@@ -3067,10 +3101,6 @@ div[class*="boxy"] {
.cls-12{stroke:#7913e5;}.cls-13{fill:#7913e5;} .cls-12{stroke:#7913e5;}.cls-13{fill:#7913e5;}
.svg-button:hover{
cursor: pointer;
}
.rotate-linear-infinite{ .rotate-linear-infinite{
animation: rotation 20s; animation: rotation 20s;
...@@ -3176,6 +3206,13 @@ div[class*="boxy"] { ...@@ -3176,6 +3206,13 @@ div[class*="boxy"] {
a{ a{
cursor: pointer; cursor: pointer;
} }
svg a text{
fill: var(--lightblue) !important;
}
svg a:hover text{
fill: var(--accen-secondary) !important;
}
.bfh-menu svg a:hover > g circle{ .bfh-menu svg a:hover > g circle{
fill: var(--accent-gradient-three-of-three) !important; fill: var(--accent-gradient-three-of-three) !important;
} }
...@@ -3260,14 +3297,14 @@ a{ ...@@ -3260,14 +3297,14 @@ a{
} }
.active-sideitem { .active-sideitem {
background-color: var(--text-primary) !important; background: var(--ourgradient);
color: white !important; color: var(--ourbeige) !important;
border-radius: 10px; border-radius: 5px;
display: block; display: block;
border-width: 10px; border-width: 5px;
border-color: #850F78; border-color: var(--lightblue);
padding-right: 10px; padding-right: 5px;
padding-left: 10px; padding-left: 5px;
} }
...@@ -3278,8 +3315,9 @@ a{ ...@@ -3278,8 +3315,9 @@ a{
} }
.sp-a{ .sp-a{
border: 5px solid var(--accent-primary); border: 5px solid var(--accent-primary);
background-color: white; background-color: var(--ourbeige);
height: 250px !important; height: 250px !important;
border-radius: 10px;
} }
.qabox .question-bubble:nth-child(2){ .qabox .question-bubble:nth-child(2){
...@@ -3411,12 +3449,526 @@ a{ ...@@ -3411,12 +3449,526 @@ a{
.subtitle-active .sideitem a summary{ .subtitle-active .sideitem a summary{
color: white !important; color: var(--ourbeige) !important;
} }
.sideitem a summary{ .sideitem a summary{
color: var(--text-primary) !important; color: var(--offblack) !important;
} }
.active-sideitem a summary{ .active-sideitem a summary{
color: white !important; color: var(--ourbeige) !important;
} }
\ No newline at end of file
.flexbox{
display: flex;
align-items: stretch;
margin-bottom: 20px;
}
.hp-timeline-p{
flex: 1;
margin-bottom: 0 !important;
margin-top: 0 !important;
}
.flexbox p{
margin-top: auto !important;
margin-bottom: auto !important;
}
.hp-timeline-p p{
margin-top: auto !important;
}
.hp-timeline-img{
margin-top: 0 !important;
height: 100%; /* Das Bild wird in der Höhe an den Container angepasst */
width: 100%; /* Bild füllt den Image-Container aus */
object-fit: contain; /* Optional: Skaliert das Bild so, dass es den Container proportional füllt */
margin: auto;
}
.hti-right{
padding-right: var(--simple-padding) !important;
}
.hti-left{
padding-left: var(--simple-padding) !important;
}
.hti-box{
width: min-content;
flex: 0 0.2 40%; /* Bild nimmt maximal 40% der Breite ein */
}
.hti-abstand{
width: 20px;
}
.header-title svg{
max-width: 100% !important;
margin: auto;
}
.detail-sideitem .sideitem .sidesubtab .sideitem{
color: white ;
}
.grid{
display: grid;
}
.flex{
display: flex;
}
#impressum{
font-size: x-large ;
}
.precyse{
padding: 1px ;
padding-left: 2px !important;
}
.sideitem ul{
margin-left: 0 !important;
padding-left: 10px !important;
}
.symptom-img-wrapper img{
max-width: 100%;
}
.feedbackbfh div{
padding: 20px;
margin: 10px ;
border-radius: 10px;
border-width: 5px;
border-style: dashed;
}
.feedbackbfh div div{
padding: 20px;
margin: 10px ;
border-radius: 10px;
border-width: 0;
}
.bfh-motto{
padding: 10px;
background-color: var(--accent-primary);
width: fit-content;
border-radius: 10px;
margin: auto;
margin-bottom: 10px;
}
.bfh-haken{
position: relative;
font-size: x-large !important;
font-weight: 900 !important;
color: var(--accent-primary) !important;
margin-right: 5px;
top: 5px;
}
#eng-sidebar a{
color: var(--text-primary) !important;
}
.quiz-wrapper{
height: 95% !important;
display: flex;
align-items: center !important;
margin-bottom: 15px !important;
border-radius: 10px;
border-width: 3px;
border-style: dotted;
border-color: var(--text-primary);
padding: 10px;
}
.quiz-front, .quiz-back{
align-self: center;
height: 100% !important;
align-items: center;
text-align: center;
}
.quiz-text col{
align-content: stretch;
align-items: stretch;
}
.quiz-text{
align-content: stretch;
align-items: stretch;
margin: auto !important;
padding: 15px;
display: flex !important;
min-height: 40% !important;
}
.quiz-button-box{
justify-content: center;
height: min-content !important;
}
.quiz-button{
position: relative;
bottom: 0;
margin-top: auto !important;
align-self: baseline;
width: fit-content !important;
border-radius: 10px;
padding: 5px;
background-color: var(--very-light-purple);
border-color: var(--lightpurple);
}
.quiz-heading{
padding-top: 10px;
font-size: 2rem;
font-weight: bold;
letter-spacing:0.1em;
-webkit-text-fill-color: var(--very-light-purple);
-webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: var(--text-primary);
}
.gif{
align-self: center;
display: inline;
}
.gif-wrapper{
display: flex;
align-items: center;
justify-content: center;
}
.eng-box{
border-radius: 3px;
border-style: solid;
border-color: var(--text-primary);
border-radius: 10px;
}
.eng-box p {
padding-left: 30px;
padding-right: 30px;
}
.always-row > * {
flex-shrink: 0;
width: 100%;
max-width: 100%;
padding-right: calc(var(--bs-gutter-x) * .5);
padding-left: calc(var(--bs-gutter-x) * .5);
margin-top: var(--bs-gutter-y);
}
.always-row {
--bs-gutter-x: 1.5rem;
--bs-gutter-y: 0;
display: flex;
flex-wrap: wrap;
margin-top: calc(-1 * var(--bs-gutter-y));
margin-right: calc(-.5 * var(--bs-gutter-x));
margin-left: calc(-.5 * var(--bs-gutter-x));
width: 100% !important;
}
.steckbrief .col-2, .steckbriefbuttonrow .col-2{
margin: 10px 15px ;
}
.ask-p{
border-left: solid 5px var(--text-primary);
padding-left: 15px;
margin-left: 15px;
}
.hp-collaps .collapse-card{
background-color: var(--background) !important;
}
figcaption{
display: table-caption;
caption-side: bottom;
padding: 0.5em;
background-color: var(--darkerbeige)
}
figure img{
margin-bottom: var(--simple-margin) !important;
}
figure .row div{
padding-top: 20px;
display: grid;
justify-content: center;
}
figure img{
object-fit: cover !important;
}
.lorem{
background-color: red !important;
}
.navbar .scroll-progress {
position: absolute;
bottom: 0;
left: 0;
height: 5px;
width: 100%;
background: linear-gradient(90deg,var(--lightblue),var(--text-primary));
z-index: 10;
overflow: visible;
}
.navbar .scroll-progress img {
position: absolute;
top: -20px;
height: 25px;
width: 30px;
z-index: 11;
transition: transform .5s ease-in-out;
}
.navbar-brand .col {
padding-left: 0 !important;
padding-right: 0 !important;
margin-top: auto;
margin-bottom: auto;
}
.boxy-1{
border-radius: 10px;
}
.nav-item, .nav-dropdown, .dropdown-toggle{
border-radius: 10px !important;
}
.sponsor-text-left h4{
text-align: right;
}
#hphead{
background: linear-gradient(rgba(255,255,255,0.2), rgba(0, 0, 0, 0.8)), url("https://static.igem.wiki/teams/5247/photos/header/hp.webp");
}
#conhead{
background: linear-gradient(rgba(255,255,255,0.2), rgba(0, 0, 0,0.2)), url("https://static.igem.wiki/teams/5247/photos/header/contribution.webp");
}
#deschead{
background: linear-gradient(rgba(255,255,255,0.2), rgba(0, 0, 0,0.2)), url("https://static.igem.wiki/teams/5247/photos/header/project-description.webp");
}
#enghead{
background: linear-gradient(rgba(255,255,255,0.2), rgba(0, 0, 0,0.2)), url("https://static.igem.wiki/teams/5247/photos/header/engineering.webp");
}
#safehead{
background: linear-gradient(rgba(255,255,255,0.2), rgba(0, 0, 0,0.2)), url("https://static.igem.wiki/teams/5247/photos/header/biosafety2.webp");
}
#atthead{
background: linear-gradient(rgba(255,255,255,0.2), rgba(0, 0, 0,0.2)), url("https://static.igem.wiki/teams/5247/photos/header/attribution-2-neu.webp");
}
#dochead{
background: linear-gradient(rgba(255,255,255,0.2), rgba(0, 0, 0,0.2)), url("https://static.igem.wiki/teams/5247/photos/header/documentation.webp");
}
#exhead{
background: linear-gradient(rgba(255,255,255,0.2), rgba(0, 0, 0,0.2)), url("https://static.igem.wiki/teams/5247/photos/header/experiments.webp");
}
#ibhead{
background: linear-gradient(rgba(255,255,255,0.2), rgba(0, 0, 0,0.2)), url("https://static.igem.wiki/teams/5247/photos/header/bielefeld-neu.webp");
}
#jughead{
background: linear-gradient(rgba(255,255,255,0.2), rgba(0, 0, 0,0.2)), url("https://static.igem.wiki/teams/5247/photos/header/judging.webp");
}
#mmhead{
background: linear-gradient(rgba(255,255,255,0.2), rgba(0, 0, 0,0.2)), url("https://static.igem.wiki/teams/5247/photos/header/materials-methods.webp");
}
#nothead{
background: linear-gradient(rgba(255,255,255,0.2), rgba(0, 0, 0,0.2)), url("https://static.igem.wiki/teams/5247/photos/header/notebook.webp");
}
#parhead{
background: linear-gradient(rgba(255,255,255,0.2), rgba(0, 0, 0,0.2)), url("https://static.igem.wiki/teams/5247/photos/header/parts.webp");
}
#reshead{
background: linear-gradient(rgba(255,255,255,0.2), rgba(0, 0, 0,0.2)), url("https://static.igem.wiki/teams/5247/photos/header/results.webp");
}
#teamhead{
background: linear-gradient(rgba(255,255,255,0.2), rgba(0, 0, 0,0.2)), url("https://static.igem.wiki/teams/5247/photos/header/rooster.webp");
}
#sphead{
background: linear-gradient(rgba(255,255,255,0.2), rgba(0, 0, 0,0.2)), url("https://static.igem.wiki/teams/5247/photos/header/sponsors-partners.webp");
}
#suphead{
background: linear-gradient(rgba(255,255,255,0.2), rgba(0, 0, 0,0.2)), url("https://static.igem.wiki/teams/5247/photos/header/supplement.webp");
}
#hphead, #conhead, #deschead, #enghead, #safehead, #atthead, #dochead,
#exhead, #ibhead, #jughead, #mmhead, #nothead, #parhead, #reshead, #teamhead
, #sphead, #suphead
{
background-size: 100vw auto;
background-repeat: no-repeat;
}
.header-title{
min-height: 900px;
}
.download-butt span {
display: inline-block;
padding: 10px;
min-height: 50px !important;
}
.download-butt-image{
display: inline-block;
margin-bottom: 20px;
}
/* Philip's area (sorry Lili) */
.casettecontainer {
display: flex;
justify-content: center; /* Align boxes in the center horizontally */
align-items: flex-start; /* Align items at the top (start) vertically */
flex-wrap: wrap; /* Ensure the boxes wrap on smaller screens */
gap: 20px; /* Add space between the boxes */
}
.casettebox {
display: flex;
flex-direction: column; /* Stack image and any content vertically */
justify-content: flex-start; /* Align images at the top */
align-items: center; /* Center images horizontally */
width: auto; /* Set a width for the boxes */
height: auto; /* Allow height to adapt based on content */
padding: 10px;
}
.casettebox img {
width: 100%; /* Image takes up full width of its container */
height: auto; /* Maintain aspect ratio of the image */
max-height: 150px; /* Set a maximum height to ensure consistency */
object-fit: cover; /* Ensure the image covers the available space */
}
.pegrnabox {
display: flex;
flex-direction: column; /* Stack image and any content vertically */
justify-content: flex-start; /* Align images at the top */
align-items: center; /* Center images horizontally */
width: auto; /* Set a width for the boxes */
height: auto; /* Allow height to adapt based on content */
padding: 10px;
}
.pegrnabox img {
width: 100%; /* Image takes up full width of its container */
height: auto; /* Maintain aspect ratio of the image */
object-fit: cover; /* Ensure the image covers the available space */
}
.timelinetab{
border-radius: 20px;
padding: 20px;
}
.iframe-container {
display: flex;
justify-content: center;
align-items: center;
}
/* .figure-wrapper-philip{
border-color: var(--darkerbeige);
border-width: 5px;
border-style: solid;
width: 100%;
display: flex;
justify-content: center;
margin-top: var(--big-margin) !important;
margin-bottom: var(--big-margin) !important;
padding: 0 !important;
} */
.figure-wrapper {
border-color: var(--darkerbeige);
border-width: 5px;
border-style: solid;
width: 100%;
display: flex;
justify-content: center;
margin-top: var(--big-margin) !important;
margin-bottom: var(--big-margin) !important;
padding: 0 !important;
}
figure {
align-self: center;
text-align: center;
font-style: italic;
font-size: medium;
text-indent: 0;
display: grid !important;
width: 100%;
text-align: center;
margin: 0 !important;
}
.responsive-image {
margin: auto;
padding-left: var(--simple-margin);
padding-right: var(--simple-margin);
margin-top: var(--simple-margin);
margin-bottom: var(--simple-margin);
align-self: center !important;
max-height: 40vh; /* Set the maximum height for tall images */
width: auto; /* Keeps the image's aspect ratio */
max-width: 100%; /* Limits the width to container's width */
object-fit: contain !important; /* Adds space around the image if it's narrower than the container */
}
/* Galerie Container */
.bfhgal {
display: grid;
gap: 10px; /* Abstand zwischen den Bildern */
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); /* Reaktionsfähige Spalten */
padding: 10px;
}
/* Galerie-Elemente (Bilder) */
.bfhgal-item {
position: relative;
width: 100%;
padding-top: 100%; /* Macht die Bilder quadratisch */
overflow: hidden;
}
/* Bild Styling */
.bfhgal-item img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover; /* Bild wird zugeschnitten, um das Quadrat zu füllen */
}
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,34 @@ $shadow: #bc15aa; ...@@ -553,14 +553,34 @@ $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);
}
.cert-frame {
top: 0;
bottom: 0;
left: 0;
right: 0;
min-width: 180px;
max-width: 200px;
width: 70%;
margin: auto;
background: var(--ourbeige);
padding: 10px;
border-style: solid;
border-width: 20px;
border-top-color:#850F78;
border-right-color: #bc15aa;
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);
} }
...@@ -571,7 +591,7 @@ figure.snip1113 { ...@@ -571,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;
} }
...@@ -603,8 +623,8 @@ figure.snip1113 figcaption { ...@@ -603,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 "./mediarules.css" import "./mediarules.css"
import "./Timelines.css"; import "./Timelines.css";
import '../App/Graph.css'; import '../App/Graph.css';
import '../components/test.css' import '../components/test.css'
import "./LandingPage.css"
import "../contents/example.css" import "../contents/example.css"
import "./App.scss"; import "./App.scss";
import 'beautiful-react-diagrams/styles.css'; import 'beautiful-react-diagrams/styles.css';
...@@ -17,12 +19,19 @@ import { Navbar } from "../components/Navbar.tsx"; ...@@ -17,12 +19,19 @@ import { Navbar } from "../components/Navbar.tsx";
import { getPathMapping } from "../utils/getPathMapping.ts"; import { getPathMapping } from "../utils/getPathMapping.ts";
import { stringToSlug } from "../utils/stringToSlug.ts"; import { stringToSlug } from "../utils/stringToSlug.ts";
import { Villbuttonrow } from "../components/Buttons.tsx"; import { Villbuttonrow } from "../components/Buttons.tsx";
import "../utils/highlight.js"; import "../utils/Highlight-functions.js";
import "./LoadingScreen.css"; import "./LoadingScreen.css";
import "./calendar.css"
import { useLoading } from "../utils/LoadingContext.tsx";
const App = () => { const App = () => {
const [isLoading, setIsLoading] = useState(true); const { isLoading, setIsLoading } = useLoading(); // 2. Ladezustand hier verwenden
window.scrollTo(0, 0);
// const [isLoading, setIsLoading] = useState(true);
const pathMapping = getPathMapping(); const pathMapping = getPathMapping();
const currentPath = const currentPath =
...@@ -43,7 +52,7 @@ const App = () => { ...@@ -43,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");
...@@ -58,6 +67,7 @@ const App = () => { ...@@ -58,6 +67,7 @@ const App = () => {
) : ( ) : (
<> <>
{/* Navigation */} {/* Navigation */}
<Navbar /> <Navbar />
...@@ -71,14 +81,14 @@ const App = () => { ...@@ -71,14 +81,14 @@ const App = () => {
<> <>
<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>
...@@ -99,7 +109,7 @@ const App = () => { ...@@ -99,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/Graph.css
View file @ 3fd292fd
/* Specific styles for the pie chart container */ /* Specific styles for the pie chart container */
.pie-chart-container { .pie-chart-container {
display: block; display: block;
width: 100%; width: 400px;
height: auto; height: 400px;
padding: 20px; padding: 10px;
margin: auto;
} }
.pie-chart-container canvas { .pie-chart-container canvas {
width: 100% !important; width: 100% !important;
height: auto !important; height: 100% !important;
} }
src/App/HP.css 0 → 100644
View file @ 3fd292fd
#under-reflection{
background-color: var(--lightblue) !important;
}
#under-responsibility{
background-color: var(--lightpurple) !important;
}
#under-responsive{
background-color: var(--text-primary) !important;
}
#under-responsive, #under-responsibility, #under-reflection{
border-radius: 10px;
color: var(--ourbeige) ;
}
#under-reflection div, #under-responsibility div, #under-responsive div{
padding: 15px;
}
.framecycletab{
box-shadow: 1px 2px 5px gray;
background-color: var(--background);
padding: 30px 20px;
border-radius: 20px;
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 0 → 100644
View file @ 3fd292fd
.content-block {
width:100vw;
height:100vh;
opacity: 0;
visibility: hidden;
transition: opacity 1200ms ease-out, transform 600ms ease-out,
visibility 1200ms ease-out;
will-change: opacity, visibility;
background-color: var(--offblack);
}
.content-block.is-visible {
opacity: 1;
transform: none;
visibility: visible;
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/LoadingScreen.css
View file @ 3fd292fd
...@@ -9,6 +9,7 @@ ...@@ -9,6 +9,7 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
z-index: 9999; z-index: 9999;
animation: fadeInOut 5s forwards;
} }
.custom-animation { .custom-animation {
...@@ -24,4 +25,17 @@ ...@@ -24,4 +25,17 @@
50% { 50% {
transform: scale(1.2); transform: scale(1.2);
} }
} }
\ No newline at end of file
@keyframes fadeInOut {
0% {
opacity: 1;
}
80% {
opacity: 1;
}
100% {
opacity: 0;
}
}
\ 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: 500px; min-height: 700px;
width: 83vw; 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,42 +51,42 @@ ...@@ -50,42 +51,42 @@
.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;
display: inline-block; display: inline-block;
list-style-type: none; list-style-type: none;
width: 190px; width: 250px;
height: 20px; 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,186 +96,189 @@ border-color: transparent transparent transparent white; ...@@ -95,186 +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 {
min-height: 310%; height: 250px;
position: absolute; min-height: 310%;
left: calc(100% + 7px); position: absolute;
width: 280px; left: calc(100% + 7px);
padding: 15px; width: 350px;
font-size: 0.9rem; padding: 15px;
white-space: normal; font-size: 0.9rem;
color: black; white-space: normal;
background: white; color: var(--offblack);
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;
position: relative; flex-direction: column;
margin: 40px 0; position: relative;
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;
...@@ -284,7 +288,7 @@ margin-top: 8vw; ...@@ -284,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;
...@@ -294,16 +298,16 @@ margin-bottom: 8vw; ...@@ -294,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;
...@@ -314,80 +318,65 @@ height: 20px; ...@@ -314,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
...@@ -22,9 +22,23 @@ ...@@ -22,9 +22,23 @@
.boxy-1{ .boxy-1{
margin-top: 10px !important; margin-top: 10px !important;
} }
.navbar {
flex-direction: column;
align-items: center;
}
.col-6 {
width: 100%; /* Full width on tablets */
}
.progress-bar{
display: none !important;
}
} }
/*For Smartphones*/ /*For Smartphones*/
@media screen and (max-width: 768px){ /*12pro*/
@media screen and (max-width: 600px){
.lnp:hover > img{ .lnp:hover > img{
display: block; display: block;
margin-left: none; margin-left: none;
...@@ -32,6 +46,184 @@ ...@@ -32,6 +46,184 @@
width: 8rem !important; width: 8rem !important;
max-width: 100% !important; max-width: 100% !important;
} }
.col-6 {
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;
...@@ -65,7 +257,8 @@ ...@@ -65,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;
} }
...@@ -80,9 +273,6 @@ ...@@ -80,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;
} }
...@@ -100,16 +290,18 @@ ...@@ -100,16 +290,18 @@
margin: auto; margin: auto;
} }
svg text{ svg text{
font-size: 9vw; font-size: 5vw !important;
stroke-width:1px; stroke-width:1px !important;
} }
.village-style-button h3{ .village-style-button h3{
display: none !important; display: none !important;
} }
.village-style-button{ .village-style-button{
box-shadow: 1px 1px 1px gray; box-shadow: 1px 1px 1px gray;
border-radius: 20px !important; border-radius: 10px;
border-color: black; border-color: var(--offblack);
padding: 10px;
} }
.village-style-button:hover{ .village-style-button:hover{
box-shadow: none; box-shadow: none;
...@@ -120,16 +312,60 @@ svg text{ ...@@ -120,16 +312,60 @@ svg text{
padding-top: 10px; padding-top: 10px;
padding-bottom: 5px; padding-bottom: 5px;
} }
.bigtitle {
width: 450px !important;
height: 200px !important;
word-wrap: break-word;
}
.framecycletab{
margin-left: 0 !important;
}
body {
/* padding: 10px !important; */
width: 202% !important;
overflow-x: hidden ; /* Prevents horizontal scrolling */
margin: 0;
padding: 0;
background-size: cover !important; /* Ensures the background scales to cover the entire screen */
background-position: center !important; /* Keeps the background centered */
background-repeat: no-repeat;
}
.img-half{ .img-half{
max-width: 100% !important; max-width: 100% !important;
height: auto !important;
} }
/*.container {
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 */
...@@ -157,6 +393,13 @@ svg text{ ...@@ -157,6 +393,13 @@ svg text{
} }
/***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/AOSs.tsx
View file @ 3fd292fd
import { useEffect } from "react"; import { useEffect } from "react";
import AOS from "aos";
export function AOStry(){ export function AOStry(){
useEffect(() => { useEffect(() => {
/* AOS.init({ AOS.init({
disable: "phone", disable: "phone",
duration: 700, duration: 700,
easing: "ease-out-cubic", easing: "ease-out-cubic",
}); */ });
}, []); }, []);
return( return(
<h1 data-aos="zoom-y-out">Sample heading</h1> <h1 data-aos="zoom-y-out">Sample heading</h1>
) )
} }
\ No newline at end of file
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/My-Timeline.tsx → src/components/BFH-Timeline.tsx
View file @ 3fd292fd
import { BFHMoreButton } from "./Buttons"; import { NoButtTimelineItem, PanelTimelineItem, TimelineItemPic, TimelineItemTwoPic } from "./VerticalTimeline";
import SimpleSlider from "./slider"; import SimpleSlider from "./Slider";
import { ScrollLink, SupScrollLink } from "./ScrollLink";
import { useNavigation } from "../utils";
export function BFHTimeline () {
const {goToPagesAndOpenTab} = useNavigation();
interface ItemProps {
text?: string;
heading?: string;
vorname?: string,
vorname2?: string,
nachname?: string,
nachname2?: string,
date: string ,
children: React.ReactNode;
tag: string,
color: string,
csstag: string,
url: string,
url2?: string
}
/* import ImageEvent from './ImageEvent.tsx';
import UrlButton from './UrlButton.tsx'; */
export const TimelineItemPic = ({ heading, text, vorname, nachname, date, tag, color, children, csstag, url }:ItemProps) => (
<div className="timeline-item">
<div className="timeline-item-content">
<span className="tag" style={{ background: color }}>
{tag}
</span>
<time>{date}</time>
<hr/>
<div className="row">
<div className="col">
<figure className="snip1113 red">
<img src={url} alt={nachname} />
<figcaption>
<h3>{vorname} <br/> <span>{nachname}</span></h3>
</figcaption>
</figure>
</div>
<div className="col text-1-bfh">
<h5>{heading}</h5>
<span className="">{text}</span>
</div>
{children}
</div>
<BFHMoreButton it={csstag}></BFHMoreButton>
<span className="circle" />
</div>
</div>
);
export const TimelineItemTwoPic = ({ url, url2, heading, text, vorname, nachname, vorname2, nachname2, date, tag, color, children, csstag }:ItemProps) => (
<div className="timeline-item">
<div className="timeline-item-content">
<span className="tag" style={{ background: color }}>
{tag}
</span>
<time>{date}</time>
<hr/>
<div className="row">
<div className="col">
<figure className="snip1113 red">
<img src={url} alt={nachname} />
<figcaption>
<h3>{vorname} <br/> <span>{nachname}</span></h3>
</figcaption>
</figure>
</div>
<div className="col">
<figure className="snip1113 red">
<img src={url2} alt={nachname2} />
<figcaption>
<h3>{vorname2} <br/> <span>{nachname2}</span></h3>
</figcaption>
</figure>
</div>
<div className="col text-1-bfh">
<h5>{heading}</h5>
<span className="">{text}</span>
</div>
{children}
</div>
<BFHMoreButton it={csstag}></BFHMoreButton>
<span className="circle" />
</div>
</div>
);
export const TimelineItem = ({ date, tag, color, children, csstag }:ItemProps) => (
<div className="timeline-item">
<div className="timeline-item-content">
<span className="tag" style={{ background: color }}>
{tag}
</span>
<time>{date}</time>
<hr/>
{children}
<BFHMoreButton it={csstag}></BFHMoreButton>
<span className="circle" />
</div>
</div>
);
export const PanelTimelineItem = () => (
<div className="timeline-item">
<div className="timeline-item-content">
<span className="tag" style={{ background: "var(--lightblue)" }}>
Talks
</span>
<time>Panel Discussion</time>
<div className="row align-items-center panel-talk-gallery">
<div className="col">
<img className="img-round" src="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg" alt="pr-sample1" />
<div className="small middle">Taci <br/> Haddock</div>
</div>
<div className="col">
<img className="img-round" src="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg" alt="pr-sample1" />
<div className="small middle">Ana <br/> Sifuentes</div>
</div>
<div className="col">
<img className="img-round" src="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg" alt="pr-sample1" />
<div className="small middle">Olivia <br/> Mozolewska</div>
</div>
<div className="col">
<img className="img-round" src="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg" alt="pr-sample1" />
<div className="small middle">Lasse <br/> Middendorf</div>
</div>
<div className="col">
<img className="img-round" src="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg" alt="pr-sample1" />
<div className="small middle">Nemanja <br/> Stijepovic</div>
</div>
</div>
<hr/>
<span>Panel Discussion</span>
<div id="panel" style={{display: "none"}}>
So much more
</div>
<BFHMoreButton it="panel"></BFHMoreButton>
<span className="circle" />
</div>
</div>
);
export function MyTimeline () {
return( return(
<> <>
<div className="timeline-container"> <div className="timeline-container">
<div className='timeline-begin'> <div className='timeline-begin' id="timelineH">
Begin & Opening Begin & Opening
</div> </div>
<TimelineItemTwoPic <TimelineItemPic
url="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg" url="https://static.igem.wiki/teams/5247/photos/meetup/speakers/ram.jpg"
url2="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg"
date='Scientific Talk I.' date='Scientific Talk I.'
tag= 'Talks' tag= 'Talks'
color='var(--lightblue)' color='var(--lightblue)'
csstag="talkone" csstag="talkone"
vorname="Ram"
nachname="Shakar"
heading="AI-Driven Breakthroughs in Plasmid DNA Production"
text="Ram Shankar from Plasmid Factory delves into the integration of AI in advancing plasmid DNA technology for gene therapy. Highlighting real-world applications, he demonstrates how AI optimizes plasmid purification, enhances gene vector stability, and accelerates mRNA production, offering a glimpse into the future of biotech innovations."
>
<div id="talkone" style={{display: "none"}}>
<p>Ram Shankar, from Plasmid Factory, gave an insightful talk about the integration of AI and advanced biotechnology, with a focus on plasmid DNA production. His presentation highlighted how AI-driven innovations have transformed research methodologies in gene therapy, plasmid manufacturing, and DNA purification. His speech showcased the practical applications of AI in streamlining workflows, making biotech processes more efficient and scalable.</p>
<p>Shankar began by illustrating how scientific advancements, such as powered flight and DNA research, have rapidly progressed within a single human lifetime. He connected this concept to breakthroughs in plasmid DNA technology, where Plasmid Factory’s work has been pivotal in advancing gene therapy products. A key takeaway was the integration of AI in optimizing plasmid purification processes, enabling the production of high-quality plasmids and mini circles for clinical applications.
Shankar also introduced real-world examples, such as the use of AI in enhancing the stability and quality of gene vectors and mRNA production. His discussion of collaborations between academia and industry underscored the importance of networking and shared innovation, comparing it to the historic partnership between Stanley Cohen and Herbert Boyer that revolutionized recombinant DNA technology.
</p>
<p>
The talk provided attendees with a deeper understanding of how AI can revolutionize lab work, particularly in scaling up DNA production for gene therapies. By applying these insights, participants left with ideas on how to leverage AI to enhance their own research projects, particularly in biotechnology and gene editing.
</p>
</div>
</TimelineItemPic>
<TimelineItemPic
url="https://static.igem.wiki/teams/5247/photos/hp/kristian.jpeg"
url2="https://static.igem.wiki/teams/5247/photos/meetup/speakers/ram.jpg"
date='Scientific Talk I.'
tag= 'Talks'
color='var(--lightblue)'
csstag="talkonek"
vorname="Kristian" vorname="Kristian"
vorname2="Ram"
nachname="Müller" nachname="Müller"
nachname2="Shakar" heading="Gene Therapy, AAVs and Innovations in Synthetic Biology"
heading="placeholder" text="Prof. Dr. Kristian Müller from Bielefeld University reflects on his long-term involvement with the iGEM competition, emphasizing advancements in gene therapy, particularly using adeno-associated viruses (AAVs) as viral vectors for gene delivery. He discusses innovations in virus production and targeting, while acknowledging ongoing challenges such as product purity, production efficiency, and side effects. Additionally, he addresses recent developments in nanopore sequencing for quality control and the use of non-natural nucleotides and methylation to improve therapeutic outcomes."
text="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et" >
> <div id="talkonek" style={{display: "none"}}>
<div id="talkone" style={{display: "none"}}> <p>Prof. Dr. Kristian Müller from Research Group Cellular and Molecular Biotechnology at the Technical Faculty of Bielefeld University, delivered an insightful presentation on the integration of AI and advanced biotechnology, focusing on the production and refinement of AAV vectors. The presentation highlighted how AI-driven innovations are transforming research methodologies, especially in areas such as AAV production, genetic targeting, and quality control. Prof. Dr. Müller showcased practical applications of AI in optimizing these biotechnological processes, making them more efficient, scalable, and precise, particularly in therapeutic applications.</p>
So much more <p>The speaker began by drawing parallels between technological advancements in fields like space exploration and breakthroughs in genetic research, emphasizing the rapid progression within a short span of time. This context set the stage for discussing recent developments in AAV technology, where the application of AI has been pivotal. A key takeaway was how AI is being used to enhance the stability of viral vectors and optimize gene delivery, allowing for the production of high-quality AAV vectors with improved precision. Real-world examples, such as the use of AI to monitor genetic purity during nanopore sequencing and to streamline plasmid engineering processes, showcased the tangible impact of these technologies on therapeutic research. The discussion also highlighted the importance of collaborations between academia and industry, drawing parallels to the historic partnership that sparked the recombinant DNA revolution.</p>
<p>The presentation provided attendees with a deeper understanding of how AI can significantly enhance lab work, particularly in scaling up AAV production and ensuring the quality of therapeutic vectors. Participants left with valuable insights on leveraging AI and advanced technologies to drive their own research projects forward, especially in fields like gene therapy, plasmid engineering, and synthetic biology.</p>
</div> </div>
</TimelineItemPic>
</TimelineItemTwoPic>
<TimelineItemPic <TimelineItemPic
url="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg" url="https://static.igem.wiki/teams/5247/photos/meetup/speakers/christian-kolland.png"
date='How to Wiki' date='How to Wiki'
tag='Workshop Session I.' tag='Workshop Session I.'
color='var(--text-primary)' color='var(--text-primary)'
csstag="wikiworkshop" csstag="wikiworkshop"
vorname="Christian" vorname="Christian"
nachname="Kolland" nachname="Kolland"
heading="placeholder" heading="Building Professional Websites: A Workshop on HTML and CSS Essentials"
text="Learning the basics of Wiki coding and design. In this workshop, the participants geined expertise to elevate their teams wiki." text="Learning the basics of Wiki coding and design. In this workshop, the participants geined expertise to elevate their teams wiki."
> >
<div id="wikiworkshop" style={{display: "none"}}> <div id="wikiworkshop" style={{display: "none"}}>
so much more <br/>
<p>We participated in an intensive workshop on HTML and CSS made by a former iGEM participant of team GU-Frankfurt 2023 and head of wiki,
Christian Kolland. All participants gain an overview of the essentials for building websites. </p>
<p>The session began with an introduction to color theory tools such as Realtime Colors and AI Colors, emphasizing their role in creating visually
appealing designs. Typography was a key focus, clarifying the difference between typeface (e.g., Futura) and font variations (e.g., Futura Condensed),
and how font weights and sizes impact readability and design hierarchy. Practical guidelines, including the usage of different types of units such as
PX or REM for font sizing and understanding spacing for an effective layout, were given. </p>
<p>
We delved into HTML's structure for web content, learning semantic tags for effectively organizing information. CSS principles were explored next,
demonstrating how styles cascade from parent to child elements, which are crucial for consistent design across a webpage.
A significant part of the workshop involved hands-on coding in Visual Studio Code, where we replicated a pre-designed webpage using the HTML and CSS
techniques learned. This exercise equipped the attending iGEM teams with practical skills to create and style their own project websites and emphasized
the importance of component-based design and effective content organization.
</p>
<p>
By the end of the workshop, the attendees were inspired to pursue creating their own wikis, leveraging AI-based tools like for initial designs and imagery.
Overall, we left with a solid foundation in web development and were prepared to build professional and functional websites for their iGEM projects.
</p>
</div> </div>
</TimelineItemPic> </TimelineItemPic>
<TimelineItemPic <TimelineItemPic
url="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg" url="https://static.igem.wiki/teams/5247/photos/meetup/speakers/traci.jpg"
date='How to SynBio' date='How to SynBio'
tag='Workshop Session I.' tag='Workshop Session I.'
color='var(--text-primary)' color='var(--text-primary)'
csstag="synworkshop" csstag="synworkshop"
vorname="Traci" vorname="Traci"
nachname="Haddock" nachname="Haddock"
text="Design genetic constructs and re-write the genomic code, and plan experiments using AI. Learn how to effectively build genetic circuit systems for implementation in your iGEM project. text="Design genetic constructs and re-write the genomic code, and plan experiments using AI. Learn how to effectively build genetic circuit systems for implementation in your iGEM project."
" heading="How to Synthetic Biology? - Introducing Kernel Software. "
heading="placeholder"
> >
<div id="synworkshop" style={{display: "none"}}> <div id="synworkshop" style={{display: "none"}}>
So much more <h6>Setting</h6>
<p>
The kernel workshop was given by Traci Haddock, Director of Community at <a href="https://www.asimov.com/">ASIMOV Boston</a>. She introduced the Kernel software and showed us how to
implement AI-based tools in our synthetic biology project. The program can be used to graphically display plasmids. By uploading parts in an
iGEM-related database, safety considerations and registry entries can be checked automatically.
</p>
<div className="row">
<div className="col">
<img src="https://static.igem.wiki/teams/5247/photos/meetup/tracy-at-kernel-seminar/kernel-1.webp"/>
</div>
<div className="col">
<img src="https://static.igem.wiki/teams/5247/photos/meetup/tracy-at-kernel-seminar/kernel-2.webp"/>
</div>
<p><b>Tracy explains the “marshmallow madness” to us. </b></p>
</div>
<h6>What did we learn?</h6>
<p>
We learned the basics of kernels in order to design plasmids by understanding general plasmid construction and problem solving through different
cloning strategies. </p>
<p>
Furthermore, Kernel has an AI-assisted search function that can be used for plasmid representation, e.g. to find a specific
promoter based on certain requirements. Traci showed us practical exercises for firsthand application. First, we were asked to
recreate a plasmid followed by a slightly trickier task: We should clean the world of major marshmallow contamination by developing
a plasmid. In small groups we discussed which components the plasmid needed. Tracy gave us some information with which we quickly
identified crucial components of the plasmid and then designed it.
</p>
<p>In the end, each group presented their solution. The funniest and most creative approaches were celebrated. </p>
</div> </div>
</TimelineItemPic> </TimelineItemPic>
<TimelineItemTwoPic <TimelineItemTwoPic
url="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg" url="https://static.igem.wiki/teams/5247/photos/meetup/speakers/julian-gip.jpg"
url2="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg" url2="https://static.igem.wiki/teams/5247/photos/meetup/speakers/viktoria.jpg"
vorname2="Wiktoria"
vorname="Julian"
nachname="Borbeck"
nachname2="Palka"
date='How to use AI as a scientist' date='How to use AI as a scientist'
tag='Workshop Session I.' tag='Workshop Session I.'
color='var(--text-primary)' color='var(--text-primary)'
csstag="aiworkshop" csstag="aiworkshop"
heading="Modern problems require modern solutions"
text="Computational technologies are getting more in the focus of scientific research. Integration of generative KI like GenAI bypass limitations and offers potential risks - learn how to implement Artificial Intelligence."
> >
<h5>Modern problems require modern solutions</h5>
<span>Computational technologies are getting more in the focus of scientific research. Integration of generative KI like GenAI bypass limitations and offers potential risks - learn how to implement Artificial Intelligence.
</span>
<div id="aiworkshop" style={{display: "none"}}> <div id="aiworkshop" style={{display: "none"}}>
So much more <p>
This workshop hosted by xyna.bio was designed to introduce researchers to the integration of AI into scientific workflows. Wiktoria Palak and
Julian Borbeck, both experts in Molecular Biology, Biochemistry, and Bioinformatics, led the workshop, focusing on practical applications of AI
in biosciences. The session provided attendees with hands-on experience and a platform for exploring how AI can address research inefficiencies
and open new opportunities for innovation.
</p>
<p>
The workshop was structured around two main components: theoretical insights and a practical group exercise. In the theory portion, we gained a deeper
understanding of AI applications, including neuro-symbolic AI and its role in enhancing research methodologies. The instructors shared their experiences
developing AI tools like those at xyna.bio, offering participants valuable knowledge on the AI development process.
</p>
<p>During the group work, we brainstormed ideas for AI tools that could simplify lab work for scientists. This activity not only fostered creative
thinking but also encouraged collaboration, as we discussed potential AI solutions that could streamline tasks like data analysis and experimental
design.
</p>
<p>
By the end of the workshop, participants walked away with practical insights and actionable skills. We felt equipped to start implementing AI
solutions in our own research projects, identifying specific areas where AI could improve efficiency and productivity in the lab.
</p>
</div> </div>
</TimelineItemTwoPic> </TimelineItemTwoPic>
<TimelineItemPic <TimelineItemPic
url="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg" url="https://static.igem.wiki/teams/5247/photos/meetup/speakers/karla-wagner.jpg"
date='Scientific Talk II.' date='Scientific Talk II.'
tag= 'Talks' tag= 'Talks'
color='var(--lightblue)' color='var(--lightblue)'
csstag="talktwo" csstag="talktwo"
vorname="Karla" vorname="Karla"
nachname="Wagner" nachname="Wagner"
heading="placeholder" heading="Optimization of a DKR of a Tertiary Alcohol through Protein Engineering"
text="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et" text="Karla Wagner shares groundbreaking strategies in optimizing dynamic kinetic resolution (DKR) of tertiary alcohols using protein engineering. Discover how enzyme catalysis drives sustainable advancements in the synthesis of chiral compounds for pharmaceuticals and other industries."
> >
<div id="talktwo" style={{display: "none"}}> <div id="talktwo" style={{display: "none"}}>
So much more <p>
Karla Wagner, a PhD researcher at the <b>IOCB of the University of Bielefeld</b> with a background in organic chemistry and biotechnology. During the workshop, Karla discussed her research on optimizing the dynamic kinetic resolution (DKR) of tertiary alcohols using protein engineering. Her work focuses on sustainable chemistry practices, particularly by using enzymes in biocatalysis, aligning with the principles of sustainable chemistry.
</p>
<p>
Her presentation centered around her research on the synthesis of chiral tertiary alcohols, which are valuable in the production of pharmaceuticals, fragrances, and flavouring agents. She emphasized the importance of chirality in pharmaceuticals, noting how different enantiomers of a molecule can have drastically different effects, such as the case of Thalidomide.
</p>
</div> </div>
</TimelineItemPic> </TimelineItemPic>
<TimelineItem <NoButtTimelineItem
url="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg" url="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg"
date='Team project presentations' date='Team project presentations'
tag= 'Team presentations' tag= 'Team presentations'
color='var(--accent-primary' color='var(--accent-primary'
csstag="teampres"
> >
<h5>Team project presentations</h5> <h5>Team project presentations</h5>
<div className="col bfh-slider"> <div className="col bfh-slider">
<SimpleSlider> <SimpleSlider>
<img className="" src="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg"/> <img className="" src="https://static.igem.wiki/teams/5247/photos/meetup/team-presentations/anyconv-com-dscf7428-enhanced-nr.webp"/>
<img className="" src="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg"/> <img className="" src="https://static.igem.wiki/teams/5247/photos/meetup/team-presentations/anyconv-com-dscf7430-enhanced-nr.webp"/>
<img className="" src="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg"/> <img className="" src="https://static.igem.wiki/teams/5247/photos/meetup/team-presentations/anyconv-com-dscf7485-enhanced-nr.webp"/>
<img className="" src="https://static.igem.wiki/teams/5247/photos/meetup/team-presentations/anyconv-com-dscf7498-enhanced-nr.webp"/>
<img className="" src="https://static.igem.wiki/teams/5247/photos/meetup/team-presentations/anyconv-com-dscf7506-enhanced-nr.webp"/>
<img className="" src="https://static.igem.wiki/teams/5247/photos/meetup/team-presentations/anyconv-com-dscf7524-enhanced-nr.webp"/>
<img className="" src="https://static.igem.wiki/teams/5247/photos/meetup/team-presentations/anyconv-com-dscf7532-enhanced-nr.webp"/>
<img className="" src="https://static.igem.wiki/teams/5247/photos/meetup/team-presentations/anyconv-com-dscf7548-enhanced-nr.webp"/>
</SimpleSlider> </SimpleSlider>
</div> </div>
<span> <span>
</span> </span>
<div id="teampres" style={{display: "none"}}> </NoButtTimelineItem>
So much more <NoButtTimelineItem
</div>
</TimelineItem>
<TimelineItem
url="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg" url="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg"
date='Poster Exhibition Booth' date='Poster Exhibition Booth'
tag= 'Team presentations' tag= 'Team presentations'
color='var(--accent-primary)' color='var(--accent-primary)'
csstag="teambooth"
> >
<h5>Poster Exhibition Booth </h5> <h5>Poster Exhibition Booth</h5>
[Link virtual exhibition] <p> Visit the <ScrollLink label="Virtual Poster Exhibition" targetId="BFH European MeetUp4H" />!</p>
<div className="col bfh-slider"> <div className="col bfh-slider">
<SimpleSlider> <SimpleSlider>
<img className="" src="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg"/> <img className="" src="https://static.igem.wiki/teams/5247/photos/meetup/exhibition/posterexhibition-plasmid-factory.webp"/>
<img className="" src="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg"/> <img className="" src="https://static.igem.wiki/teams/5247/photos/meetup/exhibition/posterexhibition-frankfurt.webp"/>
<img className="" src="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg"/> <img className="" src="https://static.igem.wiki/teams/5247/photos/meetup/exhibition/posterexhibition-zymo.webp"/>
<img className="" src="https://static.igem.wiki/teams/5247/photos/meetup/exhibition/posterexhibition-air-view.webp"/>
<img className="" src="https://static.igem.wiki/teams/5247/photos/meetup/exhibition/posterexhibition-bioglimmer.webp"/>
<img className="" src="https://static.igem.wiki/teams/5247/photos/meetup/exhibition/posterexhibition-eindhoven.webp"/>
<img className="" src="https://static.igem.wiki/teams/5247/photos/meetup/exhibition/posterexhibition-endosense-judge.webp"/>
<img className="" src="https://static.igem.wiki/teams/5247/photos/meetup/exhibition/posterexhibition-isabell-erkl-rt.webp"/>
<img className="" src="https://static.igem.wiki/teams/5247/photos/meetup/exhibition/posterexhibition-joern.webp"/>
<img className="" src="https://static.igem.wiki/teams/5247/photos/meetup/exhibition/posterexhibition-marbirg.webp"/>
<img className="" src="https://static.igem.wiki/teams/5247/photos/meetup/exhibition/posterexhibition-onco-biotica.webp"/>
<img className="" src="https://static.igem.wiki/teams/5247/photos/meetup/exhibition/posterexhibition-refiba.webp"/>
<img className="" src="https://static.igem.wiki/teams/5247/photos/meetup/exhibition/posterexhibition-teddy.webp"/>
<img className="" src="https://static.igem.wiki/teams/5247/photos/meetup/exhibition/posterexhibition-zymo-gruppe.webp"/>
</SimpleSlider> </SimpleSlider>
</div> </div>
<span> <span>
</span> </span>
<div id="teambooth" style={{display: "none"}}> </NoButtTimelineItem>
So much more
</div>
</TimelineItem>
<TimelineItemPic <TimelineItemPic
url="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg" url="https://static.igem.wiki/teams/5247/photos/meetup/speakers/svanja-vinke.jpg"
date='How to work safe' date='How to work safe'
tag='Workshop Session II.' tag='Workshop Session II.'
color='var(--text-primary)' color='var(--text-primary)'
...@@ -299,45 +250,65 @@ export function MyTimeline () { ...@@ -299,45 +250,65 @@ export function MyTimeline () {
text="Novel technologies opened possibilities and risks. Learn how you implement Safety and Security Strategies within your project and think more responsible in terms of Dual Use." text="Novel technologies opened possibilities and risks. Learn how you implement Safety and Security Strategies within your project and think more responsible in terms of Dual Use."
> >
<div id="safeworkshop" style={{display: "none"}}> <div id="safeworkshop" style={{display: "none"}}>
<p>The biosafety workshop was held by Svenja Vinke. Svenja is a postdoctoral researcher specializing in <p>
synthetic biology at the Church Lab, Harvard Medical School, and serves on the Safety and Security The biosafety workshop was held by Svenja Vinke. As a postdoctoral researcher specializing in synthetic biology at the Church Lab, Harvard Medical School. Svenja works on the iGEM Safety and Security Committee. Additionally, she was part of the Biosafety and Security Award Team of Bielefeld University in 2016.
Committee of iGEM. She started by outlining the key concepts of biosafety and biosecurity and emphasized </p>
how important laboratory safety is first and foremost. </p> <p>
First and foremost, she started the workshop by outlining the key concepts of biosafety and biosecurity, emphasizing how important laboratory safety is.
</p>
<div className="row">
<div className="col">
<img src="https://static.igem.wiki/teams/5247/photos/meetup/s-s-workshop/biosafety-seminar-bfh.webp"/>
</div>
<div className="col">
<img src="https://static.igem.wiki/teams/5247/photos/meetup/s-s-workshop/teil-2-bfh-biosafety.webp"/>
</div>
</div>
<br/>
<p>She also explained which safety aspects we should consider for our project: </p> <p>She also explained which safety aspects we should consider for our project: </p>
<ul> <ul>
<li> possible misuse (dual use) </li> <li> <b>Dual use:</b> Refers to technology or research that can be used for both beneficial and harmful purposes. For example, AI designed for medical diagnosis could also be misused for harmful surveillance. Managing dual-use risks involves careful consideration of both the positive applications and the potential for misuse. </li>
<li> built-in safety levels </li> <li> <b>Built-In Safety Levels:</b> This concept involves designing systems with multiple layers of safety to prevent failure or minimize harm. In technology and engineering, built-in safety levels ensure that even if one layer fails, others remain intact to maintain safe operation. </li>
<li> if possible, several built in security mechanisms or at least recognizable that safety strategies that have been worked </li> <li> <b>Safe-by-Design: </b> Safe-by-Design emphasizes integrating safety considerations into the earliest stages of product or system development. By anticipating risks and hazards from the start, this approach proactively minimizes dangers before they become issues, leading to safer outcomes. </li>
</ul> </ul>
<p>This particularly applies to any delivery systems that can address their target particularly efficiently, <p>
as these systems could be the center of potential misuse. </p> Finally, each team gave brief presentations of their projects and engaged in a group discussion on potential security risks and general security considerations. Together, we brainstormed and identified specific aspects of each project that could present potential risks.
<p>Finally, each team gave brief presentations of their projects and engaged in a group discussion on potential </p>
security risks and general security considerations. Together, we brainstormed and identified specific <p>
aspects of each project that could present potential risks. </p> From Svenja’s seminar, we learned which safety-relevant aspects are particularly important, as well as the importance of examining a project from different perspectives to identify and minimize potential risks related to lab work and the environment.
<p>From Svenja’s seminar, we learned which safety-relevant aspects are particularly important, as well as </p>
the importance of examining a project from different perspectives to identify and minimize potential
risks related to lab work and the environment. </p>
</div> </div>
</TimelineItemPic> </TimelineItemPic>
<TimelineItemPic <TimelineItemTwoPic
url="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg" url="https://static.igem.wiki/teams/5247/photos/meetup/speakers/julia-j-lainowski.jpg"
date='How to Communicate Science' date='How to Communicate Science'
url2="https://static.igem.wiki/teams/5247/photos/meetup/speakers/malmendier.png"
tag='Workshop Session II.' tag='Workshop Session II.'
vorname2="Carolin"
vorname="Julia"
nachname="Kalinowski"
nachname2="Malmendier"
color='var(--text-primary)' color='var(--text-primary)'
csstag="commworkshop" csstag="commworkshop"
heading="Effective Science Communication: Strategies for Success"
text="Experience how science communication could be. Learn creative and funny ways to communicate difficult topics. Think outside the box and train your skills. " text="Experience how science communication could be. Learn creative and funny ways to communicate difficult topics. Think outside the box and train your skills. "
> >
<br></br> <br></br>
<div id="commworkshop" style={{display: "none"}}> <div id="commworkshop" style={{display: "none"}}>
<br></br> <br></br>
<h6>Setting</h6> <h6>Setting</h6>
<p> <p>
This workshop was offered to us by <a href="https://www.stud-scicom.de/">StudSciCom</a>. This workshop was offered to us by StudSciCom as part of the BFH Meet-up program at Bielefeld University.
StudSciCom is an initiative for science communication by students for students in Germany. <a href="https://www.stud-scicom.de/"> StudSciCom</a> is an initiative for science communication by students for students in Germany.
They held this workshop for us for the very first time and we are glad that we were able to offer the They held this workshop for us for the very
uprising StudSciCom team a platform to try out this kind of outreach. In addition, we were able to gain first time and we are glad that we were able to offer the uprising StudSciCom team a platform to try out this kind of outreach. In addition,
knowledge about proper science communication – a clear win-win situation for all of us! we were able to gain knowledge about proper science communication – a clear win-win situation for all of us!
</p>
<p>
Science communication is defined as the practice of informing, educating, and raising awareness about science-related topics among the general public
or specific audiences. It involves various methods such as writing articles, giving presentations, using social media, and engaging in public discussions
to make scientific knowledge accessible and understandable<SupScrollLink label="1"/>.
</p> </p>
<h6>What did we learn?</h6> <h6>What did we learn?</h6>
<p> <p>
...@@ -355,12 +326,27 @@ export function MyTimeline () { ...@@ -355,12 +326,27 @@ export function MyTimeline () {
<p> <p>
Afterwards, the attending iGEM teams talked about their science communication plans and how they could improve them Afterwards, the attending iGEM teams talked about their science communication plans and how they could improve them
using the skills learned in this workshop. Our team revised their plans for explaining gene editing to using the skills learned in this workshop. Our team revised their plans for explaining gene editing to
children and started developing experiments to help them better understand cystic fibrosis, which we children and started developing experiments to help them better understand Cystic Fibrosis, which we
presented later onto the public at “Der Teuto ruft!” [Link], an event in Bielefeld to connect the local presented later onto the public at <a onClick={() => goToPagesAndOpenTab("teutoruft", "human-practices")}>“Der Teuto ruft!”</a>, an event in Bielefeld to connect the local
population with regional companies and institutes to inform them about their work - including our iGEM team! population with regional companies and institutes to inform them about their work - including our iGEM team!
</p> </p>
<h6>References</h6>
<ol>
{/*<!-- 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"> Fischhoff, B.</span>
</span>
<span property="schema:name">&nbsp;The sciences of science communication. </span>
<i property="schema:publisher" typeof="schema:Organization"> Proceedings of the National Academy of Sciences</i>
<b property="issueNumber" typeof="PublicationIssue"> 110</b>,&nbsp;
<span property="schema:pageBegin"> 14033</span>-<span property="schema:pageEnd">14039</span>
(<time property="schema:datePublished" datatype="xsd:gYear" dateTime=" 2013">2013</time>).
<a className="doi" href="https://doi.org/10.1073/pnas.1213273110"> doi: 10.1073/pnas.1213273110</a>
</li>
</ol>
</div> </div>
</TimelineItemPic> </TimelineItemTwoPic>
<TimelineItemPic <TimelineItemPic
date='How to Pitch Your Project' date='How to Pitch Your Project'
tag='Workshop Session II.' tag='Workshop Session II.'
...@@ -375,33 +361,57 @@ export function MyTimeline () { ...@@ -375,33 +361,57 @@ export function MyTimeline () {
" "
> >
<div id="pitch" style={{display: "none"}}> <div id="pitch" style={{display: "none"}}>
So much more <p>The "Perfect Project Pitch" workshop was part of the second phase of workshops during the inaugural BFH meet-up, hosted at Bielefeld University. It was led by Madeleine Mussgnug, a startup consultant at the Goethe University's entrepreneurship center in Frankfurt, Germany. Madeleine studied International Management and Tourism and has extensive experience, including several years at the scale-up company Limehome. Currently, she also works as a freelance consultant specializing in online marketing, social media, and supporting individuals in becoming self-employed. </p>
</div> <p>The workshop focused on the essential skills and strategies for delivering an effective project pitch, covering the following key areas: </p>
<ol>
<li> Crafting compelling narratives to present complex ideas clearly and engagingly, ensuring they remain memorable for the audience. </li>
<li> Structuring and organizing pitches to highlight critical elements such as innovation, market potential, and team strengths, thus communicating your message effectively. </li>
<li> Tailoring pitches to resonate with different target audiences, including investors and collaborators, making them adaptable and impactful. </li>
<li> Building confidence and mastering persuasive techniques to convincingly communicate the value of your project. </li>
<li> Utilizing creative and visually appealing pitch materials, with a focus on integrating visuals and data effectively to enhance the presentation. </li>
</ol>
<p>Madeleine Mussgnug delivered these insights through a balanced mix of presentation and interactive discussions. She provided real-world examples and engaged the audience by prompting them to reflect on specific techniques, images, and stylistic choices. For instance, she demonstrated the strategic use of numbers and icons on slides, discussing how their size and placement can influence the viewer’s perception. By showing different slide constellations, she encouraged the audience to discuss their visual impact. The workshop concluded with a focus on the importance of networking. According to Mussgnug, knowing whom to approach and how to engage with them is key—this, she emphasized, is the essence of successful pitching. </p>
<p>We immediately put what we learned into practice in various areas, such as: </p>
<ul>
<li><b>Meet-up Münster Presentation:</b> We adopted a fresh, innovative approach when preparing for the Münster meet-up, integrating many of the techniques from the workshop. </li>
<li><b>Correspondence with Potential Partners and Sponsors: </b> Our communication became more targeted and effective, allowing us to build stronger connections with potential partners and sponsors. </li>
<li><b>Improved Steering Committee Communication:</b> We also saw a noticeable improvement in our interactions with the steering committee, using clearer and more persuasive messaging. </li>
</ul>
<p>In essence, the workshop not only enhanced our pitching skills but also significantly improved our overall communication strategies, enabling us to present our ideas with greater confidence and impact. </p>
</div>
</TimelineItemPic> </TimelineItemPic>
<TimelineItemPic <TimelineItemPic
url="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg" url="https://static.igem.wiki/teams/5247/photos/meetup/speakers/michael.jpg"
date='How to Multi Media' date='How to Multi Media'
tag='Workshop Session II.' tag='Workshop Session II.'
color='var(--text-primary)' color='var(--text-primary)'
csstag="multimedia" csstag="multimedia"
vorname="Michael" vorname="Michael"
nachname="Gröning" nachname="Gröning"
heading="placeholder" heading="Mastering Filmmaking: From Basics to iGEM Video Production"
text="Learn the basics of filmmaking and video production. text="Learn the basics of filmmaking and video production.
Look behind the scenes and get in touch with professionals. Look behind the scenes and get in touch with professionals.
Train your skills to direct iGEM-related videos and movies." Train your skills to direct iGEM-related videos and movies."
> >
<div id="multimedia" style={{display: "none"}}> <div id="multimedia" style={{display: "none"}}>
So much more <p>Michael Gröning, who has many years of experience in a range of multimedia disciplines, including 3D animation, video and cinematography, film and audio production, post-production, voiceover and media design, held the practical workshop on multimedia. Firstly, the significance of the Promotion Video was elucidated, and the paramount importance of the general external representation was clarified. Questions and tricks provided the participants a basis for finding ideas for their videos, which were combined with story and mood boards and the reasonable use of AI.</p>
</div> <div className="col">
<img src="https://static.igem.wiki/teams/5247/photos/meetup/workshop-multimedia-exposure-triangle.webp"/>
</div>
<p>A wide-ranging overview of various camera shots, lighting techniques and transitions was presented to the participants, equipping them with a useful toolkit for the production of cinematographic videos. Illustrative graphics, such as the Exposure Triangle, helped them to experiment with professional camera settings on their mobile phones. Through the implementation of voice warm-up exercises, the workshop participants were able to gain insights into the preparation of voice-overs. An introduction to various microphones and audio editing software enabled them to learn how voice recording is converted to studio quality.</p>
<p>The participants were able to gain valuable practical insights into the world of multimedia and thus prepare themselves to produce breathtaking videos. </p>
<div className="col">
<img src="https://static.igem.wiki/teams/5247/photos/meetup/workshop-multimedia2.webp" />
</div>
</div>
</TimelineItemPic> </TimelineItemPic>
<PanelTimelineItem></PanelTimelineItem> <PanelTimelineItem></PanelTimelineItem>
<TimelineItemPic <TimelineItemPic
url="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg" url="https://static.igem.wiki/teams/5247/photos/meetup/speakers/middendorf.jpeg"
date='iGEMer Ted Talks' date='iGEMer Ted Talks'
tag= 'Talks' tag= 'Talks'
color='var(--lightblue)' color='var(--lightblue)'
heading="Secrets to award-winning bioinformatics tools" heading="Secrets to award-winning bioinformatics tools"
text="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et" text="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et"
...@@ -436,22 +446,44 @@ export function MyTimeline () { ...@@ -436,22 +446,44 @@ export function MyTimeline () {
</div> </div>
</TimelineItemPic> </TimelineItemPic>
<TimelineItemPic <TimelineItemPic
url="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg" url="https://static.igem.wiki/teams/5247/photos/meetup/speakers/merelvandenbosch.jpg"
date='iGEMer Ted Talks' date='iGEMer Ted Talks'
tag= 'Talks' tag= 'Talks'
color='var(--lightblue)' color='var(--lightblue)'
csstag="tedtalk2" csstag="tedtalk2"
vorname="place" vorname="Merel"
nachname="holder" nachname="van der Bosch"
heading="placeholder" heading="How to Create the Perfect Part Characterization"
text="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et" text="Discover the secrets to winning iGEM's Composite and New Basic Part awards with insights from Merel van den Bosch. Learn how to design simple yet impactful experiments, emphasize innovation, and effectively showcase your part's potential."
> >
<div id="tedtalk2" style={{display: "none"}}> <div id="tedtalk2" style={{display: "none"}}>
So much more <p>Merel provided us with strategies based on her cELPro project at TU Eindhoven on how to approach winning the special awards
for Composite Part and New Basic Part. Her team won the <a href="https://2023.igem.wiki/tu-eindhoven/awards">Composite Part Prize and the Therapeutic Prize</a> at the 2023 iGEM
competition.
</p>
<p>
After presenting her team's project, Merel inspired us with ways we could also achieve this award. We learned different considerations to make, when it comes to part characterization:
</p>
<ul>
<li>How to emphasize the innovativeness of the project</li>
<li>How to highlight the parts potential benefits </li>
<li>How to discuss whether these parts could be applied to other projects</li>
</ul>
<p>
Many projects fail because the experiments conducted are too complex. Therefore, Merel encouraged us to initially carry out simpler experiments for our projects, like pH sensitivity and temperature response. Opening the mindset for other maybe more pragmatic experiments could change the focus of the project and drive the engineering cycle.
</p>
<img src="https://static.igem.wiki/teams/5247/photos/meetup/ted-talk-cp/ted-talk-cp.webp"/>
<br/>
<p>
Additionally, she showed us what a perfect submission for New Basic Part or Composite Part looks like. The Best Part Registry demonstrates great significance and should be filled with different results and representative analyses to characterize the parts. Conducting experiments for characterization and good documentation are just two aspects. The most crucial part is the demonstration of the part’s functions as intended.
</p>
<p>
We learned what effective strategies for the special awards Composite Part and New Basic Part might look like, and were provided with many helpful tips and tricks on how simple experiments for characterization could be designed.
</p>
</div> </div>
</TimelineItemPic> </TimelineItemPic>
<TimelineItemPic <TimelineItemPic
url="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg" url="https://static.igem.wiki/teams/5247/photos/meetup/speakers/vasquet.jpg"
date='First Science Slam' date='First Science Slam'
tag= 'Talks' tag= 'Talks'
color='var(--lightblue)' color='var(--lightblue)'
...@@ -459,12 +491,12 @@ export function MyTimeline () { ...@@ -459,12 +491,12 @@ export function MyTimeline () {
heading="ChatGPT and Large Language Models" heading="ChatGPT and Large Language Models"
nachname="Vaquet" nachname="Vaquet"
vorname="Jonas" vorname="Jonas"
text="At this year's BFH Meetup, experienced slammers and FameLab [Link] participants were once again able to take text="At this year's BFH Meetup, experienced slammers and FameLab participants were once again able to take
to the stage and present their scientific topic as simply as possible in 5 minutes. " to the stage and present their scientific topic as simply as possible in 5 minutes. "
> >
<div id="slam1" style={{display: "none"}}> <div id="slam1" style={{display: "none"}}>
<p>With Jonas Vaquet, a <p>With Jonas Vaquet, a
research associate of the EU project ERC Waterfutures [Link], the audience explored Large Language Models research associate of the EU project <a href="https://waterfutures.eu/project/">ERC Waterfutures</a>, the audience explored Large Language Models
(LLMs) such as ChatGPT. The speaker humorously engaged the crowd, asking who had used such models, and (LLMs) such as ChatGPT. The speaker humorously engaged the crowd, asking who had used such models, and
nearly all hands were raised in response. </p> nearly all hands were raised in response. </p>
<p>The speaker introduced ChatGPT, a "Generative Pre-trained Transformer," using an interactive experiment where <p>The speaker introduced ChatGPT, a "Generative Pre-trained Transformer," using an interactive experiment where
...@@ -493,7 +525,7 @@ export function MyTimeline () { ...@@ -493,7 +525,7 @@ export function MyTimeline () {
</div> </div>
</TimelineItemPic> </TimelineItemPic>
<TimelineItemPic <TimelineItemPic
url="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg" url="https://static.igem.wiki/teams/5247/photos/meetup/speakers/niklas-bloebaum.jpeg"
date='Second Science Slam' date='Second Science Slam'
tag= 'Talks' tag= 'Talks'
color='var(--lightblue)' color='var(--lightblue)'
...@@ -547,4 +579,4 @@ export function MyTimeline () { ...@@ -547,4 +579,4 @@ export function MyTimeline () {
</> </>
) )
} }
\ No newline at end of file