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 (1847)
1,747 additional commits have been omitted to prevent performance issues.
Hide whitespace changes
Inline Side-by-side
Showing
with 2298 additions and 7205 deletions
.gitignore
View file @ 3fd292fd
......@@ -15,3 +15,8 @@ other
dist
src/components/resources
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
import bibtexparser
# Voraussetzungen
#- Python 3.x
#- bibtexparser (Installieren Sie es mit `pip install bibtexparser`)
# use like: python3 cit.py -i bibtex.bib -s 1
import re
problemlist = []
def main():
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:
#reading command line input and parsing it
parser = argparse.ArgumentParser(
prog='HTML Citations',
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()
print("Source: " + args.input)
except argparse.ArgumentError as e:
......@@ -21,40 +41,52 @@ def main():
print(f"An unexpected error occurred: {e}")
print("Reading file...")
#reading and parsing the file
try:
with open(args.input, 'r') as file:
file_content = file.read()
print("Parsing file...")
try:
library = bibtexparser.parse_string(file_content)
library = bibtexparser.loads(file_content)
#opening output file
try:
with open('output.txt', 'w') as out:
length = len(library.entries)
print("found " + str(length) + " entries")
ran = range(length)
startnum = int(args.startnumber);
count = 0;
#processing every entry and writing the dictionary for it
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 = {}
en_x = library.entries[x]
print("Filling dictionary for entry "+ str(x+1) + "")
for y in en_x.fields:
key = y.key
print("Filling dictionary for entry "+ str(startnum+count) + "")
for key, value in en_x.items():
key_low = key.lower()
dictio[key_low] = y.value
dictio[key_low] = value
if en_x.entry_type == "article":
articleHTML(dictio, x, out)
elif en_x.entry_type =="misc":
miscHTML(dictio, x, out)
print("Checking Entry type of "+ str(startnum+count) + "")
if en_x['ENTRYTYPE'] == "article":
articleHTML(dictio, (startnum+count), 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:
print(f"An unexpected error occurred: {e}")
print(f"An unexpected error occurred: {e} in line 85")
except Exception as e:
print(f"An unexpected error occurred: {e}")
print(f"An unexpected error occurred: {e} in line 87")
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:
print("- - - - - - - - - - - - - - - - - ")
print("REMAINING ERRORS:")
......@@ -64,86 +96,88 @@ def main():
else:
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):
print("Writing html code for entry "+ str(x+1) + "...")
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")
# Maximale Anzahl der anzuzeigenden Autoren
max_authors = 7
print("Just a sec, seperating authors...")
authors = dictio['author']
authors = authors.replace(" and ", "|")
liste = authors.split("|")
for a in liste:
try:
#print("processing " + a)
first = None
last = None
name = None
out.write("\t<span property=\"schema:author\" typeof=\"schema:Person\">\n") # Tag für Autoren öffnen
#print(autlist)
for i, a in enumerate(autlist):
try:
a = a.strip() # Whitespace entfernen
# Nachnamen und Vornamen aufteilen
if ',' in a:
s = a.split(", ")
first = s[1]
first_sh = first[0]
last = s[0]
name = last + ", " + first_sh + "."
last = s[0].strip() # Nachname
first_names = s[1].strip() if len(s) > 1 else ''
# 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:
s = a.split()
if len(s) == 2:
first = s[0]
first_sh = first[0]
last = s[1]
name = last + ", " + first_sh + "."
else:
leng = len(s)
last = s[leng-1]
first = ''
for n in s:
if n != s[-1]:
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")
last = s[-1].strip() # Nachname
first = '. '.join([n[0] for n in s[:-1]]) + '.' # Initialen der Vornamen
name = f"{last}, {first}"
# Schreibe den Namen in die Ausgabedatei
if i < max_authors:
out.write(f"\t\t<span property=\"schema:Name\"> {name}</span>\n")
# Wenn wir den 6. Autor erreicht haben, schreibe "et al." nach dem 6. Autor
if i == max_authors:
out.write("\t\t<span property=\"schema:Name\"> et al.</span>\n")
break # Stoppe die Schleife, nachdem "et al." hinzugefügt wurde
except Exception as e:
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" +"<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...")
try:
pages = dictio['pages']
if pages is not None:
if len(pages) > 0:
if '--' in pages:
pag = pages.split("--")
if pages is not None and len(pages) > 0:
# Überprüfen, ob die Seitenangabe nur aus Zahlen und Bindestrichen besteht
if '-' in pages or '–' in pages or '--' in pages or '–' in pages:
pag = re.split('--|-|–|–', pages)
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 '-' in pages:
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")
print("- in pages")
out.write("\t" + ",&nbsp;<span property=\"schema:pageBegin\"> "+ begin +"</span>-<span property=\"schema:pageEnd\">"+ end + "</span>&nbsp;"+ "\n")
else:
print("Sorry, no readable page information")
problemlist.append("Check for missing page info at " + str (x+1))
else:
print("Sorry, no page information")
problemlist.append("Check for missing page info at " + str (x+1))
if re.match(r'^\d+(-\d+)?$', pages): # Check for typical numeric page ranges
out.write("\t" + "<span property=\"schema:pageBegin\">"+ pages +"</span>&nbsp;"+ "\n")
else:
# Seitenangabe ist nicht numerisch, als fehlend behandeln
print(f"Non-numeric page information detected ('{pages}'). Treating as missing.")
problemlist.append(f"Non-numeric page info at entry {x}")
else:
print("Sorry, no page information")
problemlist.append("Check for missing page info at " + str (x+1))
except KeyError as e:
problemlist.append("Check for missing page info at " + str(x))
except KeyError:
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']
out.write("\t" +"(<time property=\"schema:datePublished\" datatype=\"xsd:gYear\" dateTime=\" " + year + "\">"+year+"</time>)."+ "\n")
......@@ -153,24 +187,54 @@ def articleHTML(dictio, x, out):
out.write("\t" +"<a className=\"doi\" href=\"https://doi.org/"+doi+"\"> doi: "+doi+"</a>"+ "\n")
except KeyError as e:
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")
def miscHTML(dictio, x, out):
print("Writing html code for entry "+ str(x+1) + "...")
out.write("#<!-- Citation num " + str(x+1) + "-->" + "\n")
out.write("<li typeof=\"schema:WebPage\" role=\"doc-biblioentry\" property=\"schema:citation\" id=\"desc-" + str(x+1) + "\">"+ "\n")
print("Writing html code for entry "+ str(x) + "...")
out.write("{/*<!-- Citation num " + str(x) + "--> */}" + "\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")
aut = dictio['author'].strip("\{\}")
out.write("\t" + "\t" +"<span property=\"schema:Name\">" +aut + "</span>."+ "\n")
aut = dictio['author']
out.write("\t" + "\t" +"<span property=\"schema:Name\"> " + aut + "</span>."+ "\n")
out.write("\t" +"</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")
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")
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 @ 0125e853
{/*<!-- 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 @@
<head>
<meta charset="UTF-8" />
<link
rel="shortcut icon"
href="https://static.igem.wiki/teams/5247/logos-team/precyse-no-slogan.png"
type="image/x-icon"
rel="icon" type="image/png" sizes="32x32"
href="https://static.igem.wiki/teams/5247/logos-team/precyse-no-slogan.ico"
/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
......
package-lock.json deleted 100644 → 0
View file @ 0125e853
Source diff could not be displayed: it is too large. Options to address this: view the blob.
src/.DS_Store 0 → 100644
View file @ 3fd292fd
File added
src/App/App.css
View file @ 3fd292fd
......@@ -3,6 +3,7 @@
/* * * * * * * */
:root {
/* our colours*/
--ourgradient: linear-gradient(90deg, rgba(147,94,184,1) 0%, rgba(160,167,243,1) 100%);
--text-primary: #850F78 ;
--mediumpurple: #bc15aa;
--lightpurple: #B85BD1;
......@@ -24,7 +25,6 @@
--verylightblue: #ebecfd;
--offblack: #32232C ;
--cebitecgray: #8295A4;
/*--offwhite: #e9dff1; */
--ourbeige: #FFF6F2;
--darkerbeige: #e2dad7;
--background: #FFF6F2;
......@@ -62,10 +62,26 @@
--markmap-a-color: var(--text-primary) !important;
--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{
scroll-behavior: smooth;
}
.container-fluid{
max-width: 1600px !important;
}
.max-1240{
max-width: 1240px !important;
}
.max400{
max-height: 400px !important;
......@@ -74,6 +90,10 @@ html{
display: none;
}
nav .scrolllink span{
color: var(--ourbeige)!important;
}
.small-row{
--bs-gutter-x: 1.5rem;
--bs-gutter-y: 0;
......@@ -95,6 +115,10 @@ html{
width:16.66666667% !important;
}
sup a{
font-weight: bolder !important;
font-size: small !important;
}
.col-1{
width: 8.33333333% !important;
......@@ -106,7 +130,15 @@ html{
flex: 0 0 auto;
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{
max-width: 100% !important;
}
......@@ -122,45 +154,66 @@ hr{
opacity: 1 !important;
height: 5px;
border-width: 3px !important;
margin-bottom: 10px !important;
margin-bottom: var(--simple-margin) !important;
}
/* * * * * * * */
/* * * 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 {
/* padding-top: 56px; */
background-color: var(--ourbeige);
color: #493843;
color: var(--offblack);
font-family: AcuminPro !important;
max-width: 100% !important;
}
body.dark-mode {
background-color: var(--offblack);
color: white;
color: var(--ourbeige);
}
p {
text-align: justify;
}
a {
color: var(--accent-gradient-one-of-three) !important;
color: var(--lightblue) !important;
text-decoration: none !important;
}
h3{
margin-bottom: 2vw !important;
.our-h3{
margin-top: var(--simple-margin) !important;
margin-bottom: var(--simple-margin) !important;
}
.short-hr{
height: 1px !important;
border-width: 2px !important;
}
code{
color:black !important;
color:var(--offblack) !important;
}
.doi{
color: var(--text-primary) !important;
color: var(--lightblue) !important;
}
.codesnippet{
padding-left: 30px;
padding-top: 5px;
padding-bottom: 5px;
border-radius: 10px;
margin-top: 10px;
margin-bottom: 15px !important;
margin-top: var(--simple-margin);
margin-bottom: var(--simple-margin) !important;
color: var(--text-primary) !important;
background-color: rgb(217, 217, 217);
}
......@@ -171,7 +224,7 @@ code{
.sidebar{
border-left: 6px solid;
border-left-color: var(--text-primary);
border-color: var(--accent-primary);
border-color: var(--lightblue);
color: var(--text-primary);
list-style-type: none;
line-height: 280%;
......@@ -179,7 +232,7 @@ code{
padding: 0px 0px;
}
.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;
}
.sideitem{
......@@ -188,7 +241,7 @@ code{
}
.active-sideitem summary{
color: white;
color: var(--ourbeige);
}
.sidesubtab ul{
......@@ -197,27 +250,29 @@ code{
.sidebar>div{
overflow: hidden;
text-align: left;
margin-left: 10px;
margin-left: var(--simple-margin);
cursor: pointer;
}
/* .sidebar div a div div span ul li a span{
color: white ;
} */
.sidebar>div>a>span{
padding: 0.5rem;
color: var(--text-primary);
}
.active-scroll-spy{
background-color: yellowgreen !important;
}
/* * * * * * * */
/* * GENERAL * */
/* * * * * * * */
section{
margin-bottom: var(--big-margin) !important;
margin-top: var(--big-margin) !important;
padding-top: var(--big-padding) !important;
}
.relative{position: relative;}
.absolute{position: absolute;}
.left-aligned {margin-left: auto;}
.align-items-center{align-items:center!important}
.zweirem{padding-top: 2rem; padding-bottom: 3rem;}
.left{float: left;}
......@@ -225,9 +280,8 @@ color: var(--text-primary);
.sticky-top {
position: -webkit-sticky;
position: sticky !important;
top: 0;
z-index: 1020;
top: 80px !important;
top: 100px !important;
overflow-wrap: break-word;
}
.small-only{
......@@ -238,8 +292,8 @@ color: var(--text-primary);
max-width: 100% !important;
}
.header-container{
padding-top: 380px;
padding-bottom: 60px;
padding-top: 0;
padding-bottom: 10px;
background-color: var(--ourbeige);
}
.null{
......@@ -265,15 +319,16 @@ color: var(--text-primary);
/* * NAVBAR * */
/* * * * * * * */
.nav-link{
color: var(--text-primary) !important;
color: var(--offblack) !important;
}
.nav-link:hover {
color: white !important;
color: var(--ourbeige) !important;
background-color: var(--text-primary) !important;
border-radius: 7px;
}
.navbar{
backdrop-filter: blur(5px);
background-color: rgb(255,246,242, 0.8);
transition: visibility 0s, 0.6s, opacity 0.6s linear, transform 1s;
}
nav.navbar {
......@@ -284,17 +339,17 @@ color: var(--text-primary);
color: var(--text-primary) !important;
}
.dropdown-item:hover{
color: white !important;
color: var(--ourbeige) !important;
background-color: var(--text-primary) !important;
}
.nav-item.dropdown:hover .dropdown-menu {
display: block;
background-color: white;
background-color: var(--ourbeige);
border-color: var(--text-primary);
border-radius: 7px;
}
.navbar-brand{
color: var(--text-primary) !important;
color: var(--offblack) !important;
}
.dropdown-menu{
margin-top: 0 !important;
......@@ -307,20 +362,40 @@ table {
}
td, th {
border: 1px solid black;
border: 1px solid var(--offblack);
text-align: left;
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;
}
tr:nth-child(odd) {
tbody tr:nth-child(odd) {
background-color: #f3f3f3;
}
tr:nth-child(1) {
background-color: var(--accent-gradient-one-of-three) !important;
}
/* * * * * * * */
......@@ -329,19 +404,37 @@ tr:nth-child(1) {
.bg-video-container{
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{
background-color: var(--darkerbeige) !important;
}
.bg-lb{
background-color: var(--lightblue) !important;
}
.bg-w{
background-color: white !important;
}
.bg-d{
background-color: var(--text-primary) !important;
color: var(--ourbeige);
}
.bg-l{
background-color: var(--text-primary) !important;
color: white;
color: var(--ourbeige);
}
.bg-transp{
background:transparent;
......@@ -354,12 +447,11 @@ margin-bottom: 10vw !important;
.base {
width: 100%;
background-color: var(--accent-primary);
background-color: var(--lightblue);
padding: 120px 30px;
}
.header-title{
color: var(--text-primary) !important;
text-align: center;
align-items: center;
margin: auto !important;
......@@ -369,17 +461,12 @@ margin-bottom: 10vw !important;
line-height: 130px;
}
/* p:first-child::first-letter{
color:var(--text-primary);
font-weight: bold;
font-size: x-large;
} */
.popart{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 15vh;
font-size: 5rem;
letter-spacing:0.1em;
-webkit-text-fill-color: transparent;
-webkit-text-stroke-width: 0.3vw;
......@@ -392,34 +479,26 @@ margin-bottom: 10vw !important;
min-height: 5vw;
margin-bottom: 20px !important;
}
h2{
font-size: 3rem !important;
background-clip: text !important;
color: var(--text-primary) !important;
padding-top: 15px !important;
font-weight: bolder !important;
/* background-image: repeating-linear-gradient(-45deg, var(--text-primary) 0, var(--text-primary) 2px, white 2px, white 4px) !important;
*/}
h1{
font-size: 4rem !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;
padding-top: 15px !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 {
background-image: linear-gradient(120deg, var(--lightblue) 0%, var(--mediumpurple) 100%);
background-repeat: no-repeat;
color: black;
color: var(--offblack);
background-size: 100% 0.2em;
background-position: 0 105%;
transition: background-size 0.25s ease-in;
}
.underline--magical:hover {
background-size: 100% 100%;
color: black !important;
color: var(--offblack) !important;
text-decoration: none !important;
}
......@@ -439,7 +518,7 @@ h2{
background-image: linear-gradient(#a0aec0, #a0aec0);
}
.v3:hover p {
color: #000;
color: var(--offblack);
background-size: 0% 100%;
}
......@@ -500,72 +579,13 @@ footer a {
text-decoration: none;
}
footer a:hover {
color: var(--accent-gradient-three-of-three) !important;
color: var(--lightblue) !important;
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 * * */
......@@ -573,6 +593,8 @@ footer a:hover {
.teamcolzwei{
margin-top: 3rem !important;
}
img,
picture,
svg {
......@@ -600,12 +622,18 @@ img .middle{
/* .sponsor-portrait{
border: 5px solid var(--accent-primary);
} */
.pronouns{
font-size: 1rem !important;
font-style: italic !important;
}
.team-name{
font-size: large;
font-size: 1.6rem !important;
font-weight: bold;
text-align: left !important;
width: min-content;
width: fit-content !important;
}
.team-img{
border-radius: 50% !important;
}
.socials{
height: 2rem;
......@@ -620,6 +648,34 @@ img .middle{
.steckbrief{
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 {
transition: transform 1s ease-in-out;
......@@ -627,17 +683,18 @@ img .middle{
.spin:hover{
transform: rotate(360deg);
}
.side-margins-auto {
margin-left: auto !important;
margin-right: auto !important;
}
.img-sponsor{
max-width: 70%;
max-height: 150px;
margin-left: auto;
margin-right: auto;
}
.img-sponsor-partner-page{
max-width: 70%;
max-height: 100px;
margin-left: auto;
margin-right: auto;
padding-bottom: 10px;
padding-top: 10px;
}
......@@ -660,9 +717,23 @@ img .middle{
max-height: 70% !important;
}
.img-round{
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{
max-width: 80%;
......@@ -675,12 +746,13 @@ img .middle{
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
.sponsor-portrait{
border-radius: 10px !important;
border: 5px solid var(--accent-primary);
background-color: white;
background-color: var(--ourbeige);
}
.sponsor-text-right{
margin-left: 20px;
margin-left: var(--simple-margin);
}
.sponsor-text-left{
margin-right: 20px;
......@@ -716,7 +788,7 @@ img .middle{
background-image: url(https://static.igem.wiki/teams/5247/sponsors/integra-foto.jpg);
background-size: auto 100%;
background-repeat: no-repeat;
background-color: white;
background-color: var(--ourbeige);
}
#integra-portrait-logo{
padding-top: 10px;
......@@ -777,7 +849,7 @@ svg{
}
.spacer {
height: 50vh;
background-color: #000;
background-color: var(--offblack);
}
.hello:hover {
......@@ -790,14 +862,14 @@ svg{
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
-webkit-text-stroke-width: 3px;
-webkit-text-stroke-color: black;
-webkit-text-stroke-color: var(--offblack);
}
.terminal-box{
margin-top: 10px;
margin-bottom: 10px;
background-color: black;
background-color: var(--offblack);
border-radius: 10px;
color: white;
color: var(--ourbeige);
padding-left: 30px;
padding-right: 20px;
padding-top: 10px;
......@@ -822,9 +894,9 @@ svg{
display: inline-flex;
margin-top: 10px;
margin-bottom: 10px;
background-color: black;
background-color: var(--offblack);
border-radius: 10px;
color: white;
color: var(--ourbeige);
padding-left: 30px;
padding-right: 20px;
padding-top: 10px;
......@@ -907,8 +979,14 @@ svg{
.container_document{
max-width: 40%;
}
.download-butt{
color: var(--ourbeige) !important;
display: inline-block;
height: 50px !important;
}
.download-butt{ /* @media unnötig */
background-color: var(--text-primary);
background: var(--ourgradient);
padding: 0.5vh !important;
border-radius: 5px;
margin: auto !important;
......@@ -919,8 +997,9 @@ svg{
min-height: 2vh !important;
}
.download-col{
height: 5vh !important;
display: flex;
margin-top: var(--simple-margin) !important;
margin-bottom: var(--simple-margin) !important;
align-items: center !important;
}
.small-i{ /* @media unnötig */
......@@ -928,22 +1007,23 @@ svg{
max-width: 1100px !important;
}
.one-pdf-line{ /* @media fertig */
height: 1450px !important;
max-height: 650px !important;
height: 100vh !important;
max-width: 40% !important;
}
.two-pdf-line{ /* @media fertig */
max-height: 650px !important;
height: 35vh !important;
max-width: 50%;
min-height: 650px !important;
height: 100vh !important;
}
/* SHAPES */
.circle {
display: flex;
width: 10vw;
color: white;
color: var(--ourbeige);
height: 10vw;
background-color: var(--text-primary) !important;
box-shadow: 3px 3px 10px black !important;
box-shadow: 3px 3px 10px var(--offblack) !important;
border-radius: 50%;
margin: 1vw;
}
......@@ -956,7 +1036,7 @@ svg{
/*collapsible*/
.collapse-card {
margin-bottom: 20px;
margin-bottom: var(--big-padding) !important;
border-radius: 4px;
margin-top: 20px;
color: #333;
......@@ -965,7 +1045,13 @@ svg{
width: 100%;
}
.collapse-card .btn {
margin-right: var(--simple-margin);
}
.collapse-card h6 {
margin-top: auto !important;
margin-bottom: auto !important;
}
/*boxes*/
.hint-container {
......@@ -1150,7 +1236,7 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before {
min-width: 50vw;
min-height: 20vw;
background-color: #555;
color: #fff;
color: var(--ourbeige);
text-align: center;
border-radius: 6px;
z-index: 1;
......@@ -1169,7 +1255,7 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before {
}
.tl-butt img:hover{
cursor: pointer;
box-shadow: 3px 3px 10px black;
box-shadow: 3px 3px 10px var(--offblack);
}
/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
......@@ -1225,7 +1311,7 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before {
.wrapper{
width: 500px;
height: 100%;
background: #fff;
background: var(--ourbeige);
margin: 15px auto 0;
}
.wrapper .tabs_wrap{
......@@ -1267,7 +1353,7 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before {
.wrapper .tabs_wrap ul li:hover,
.wrapper .tabs_wrap ul li.active{
background: #7fc469;
color: #fff;
color: var(--ourbeige);
}
......@@ -1365,12 +1451,11 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before {
}
.lnp > img{
display: block;
margin-left: auto;
margin-right: auto;
width: 8rem !important;
max-width: 66% !important;
transition: all 1s ease;
border: 5px solid var(--text-primary);
margin: auto;
}
.lnp:hover > img{
display: block;
......@@ -1476,7 +1561,7 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before {
}
.chart.vis-d3-maps-choropleth .map-key.mobile {
background: #0000;
background: var(--offblack)0;
position: static!important
}
......@@ -1496,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-mt,
.chart.vis-d3-maps-choropleth .map-key.mobile {
background: #0000;
background: var(--offblack)0;
padding: 0;
position: static!important
}
......@@ -1527,9 +1612,9 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before {
}
.chart.vis-d3-maps-choropleth .dw-tooltip {
background: #fff;
background: var(--ourbeige);
border: 1px solid #f5f5f5;
box-shadow: 3px 3px 3px #0000001a;
box-shadow: 3px 3px 3px var(--offblack)0001a;
font-size: 11px;
max-width: 200px;
padding: 10px;
......@@ -1593,11 +1678,11 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before {
font-weight: 700;
padding: 8px 35px 8px 14px;
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 {
background: #fff;
background: var(--ourbeige);
border-radius: 1px;
display: block;
font-weight: 400;
......@@ -1831,9 +1916,9 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before {
}
/* 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;
}
} */
.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;
}
......@@ -1845,10 +1930,10 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before {
font-family: Roboto, sans-serif;
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;
}
.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;
}
.chart.vis-d3-maps-choropleth .map-outer {
......@@ -1942,7 +2027,6 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before {
}
.slick-slider .slick-track,
.slick-slider .slick-list
......@@ -1961,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
......@@ -2198,7 +2237,7 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before {
opacity: .75;
color: white;
color: var(--ourbeige);
-webkit-font-smoothing: antialiased;
......@@ -2420,7 +2459,7 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before {
opacity: .25;
color: black;
color: var(--offblack);
-webkit-font-smoothing: antialiased;
......@@ -2435,7 +2474,7 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before {
opacity: .75;
color: black;
color: var(--offblack);
}
......@@ -2451,16 +2490,14 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before {
.meditabs, .meditabs, .timelinecardtabs, .timelinepersontabs{
display: none;
}
.tabbutton{
padding: 5px;
border-radius: 10px;
padding-left: 10px;
padding-right: 10px;
margin-left: 5px;
margin-right: 5px;
.timelinepersontabs{
margin-bottom: var(--big-margin);
}
.timelinecardtabs{
max-width: 100% !important;
}
.blockquote-wrapper {
display: flex;
height: fit-content;
......@@ -2476,11 +2513,11 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before {
}
/* Blockquote header */
.blockquote h2 {
.blockquote .block-h2 {
font-style: italic;
position: relative; /* for pseudos */
color: black;
font-size: 2.8rem;
color: var(--offblack);
font-size: 2.8rem !important;
font-weight: normal;
line-height: 1;
font-size: larger;
......@@ -2491,7 +2528,7 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before {
}
/* Blockquote right double quotes */
.blockquote h2:after {
.blockquote .block-h2:after {
content:"";
position: absolute;
border: 5px solid var(--text-primary);
......@@ -2505,7 +2542,7 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before {
z-index: 3;
}
.blockquote h2:before {
.blockquote .block-h2:before {
content:"";
position: absolute;
width: 80px;
......@@ -2525,10 +2562,10 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before {
}
/* Blockquote subheader */
.blockquote h4 {
.blockquote .block-h4{
position: relative;
color: black;
font-size: 1.3rem;
color: var(--offblack);
font-size: 1.3rem !important;
font-weight: 400;
line-height: 1.2;
font-size: medium;
......@@ -2544,7 +2581,7 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before {
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{
background:var(--background);
color:var(--accent-dark);
......@@ -2557,7 +2594,7 @@ span{
height:36px;
width:36px;
border-radius:50%;
border:4px solid #fff;
border:4px solid var(--ourbeige);
transform:rotate(-45deg);
position:absolute;
background:var(--ourbeige);
......@@ -2596,7 +2633,7 @@ span{
position: relative;
font-style: sans-serif;
font-weight: 800;
color: black;
color: var(--offblack);
padding: 30px 0;
width: 100%;
max-width: 80%;
......@@ -2610,7 +2647,7 @@ span{
/* Blockquote header */
.blockquotex h1 {
position: relative;
color: black;
color: var(--offblack);
font-size: 20px !important;
font-weight: 800;
line-height: 1;
......@@ -2668,7 +2705,7 @@ span{
}
.react-flow__node-mindmap {
background: white;
background: var(--ourbeige);
border-radius: 2px;
border: 1px solid transparent;
padding: 2px 5px;
......@@ -2886,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{
line-height: calc(var(--node-size) / 4);
......@@ -2926,149 +2943,51 @@ span{
}
/* ========================
BUTTON TWO
======================== */
.btn-two {
color: #fff;
transition: all 0.5s;
/*
========================
BUTTONS
========================
*/
button span {
margin: auto;
}
button {
margin-top: var(--simple-margin) !important;
margin-bottom: var(--simple-margin) !important;
border-radius: var(--border-radius) !important;
cursor: pointer;
text-align: center;
}
.btn1{
padding: var(--button-padding) var(--small-padding) !important;
}
.btn1:hover{
filter: brightness(0.7);
}
.boxy-1{
border-radius: 10px;
}
.btn-one {
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;
position: relative;
display: grid;
margin-left: auto !important;
margin-right: auto !important;
}
.btn-two span {
z-index: 2;
display: block;
.btn-one::before {
content: "";
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
======================== */
.btn-three {
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;
}
.boxy-1 {
background-color: var(--text-primary);
max-width: fit-content;
}
.boxy-2 {
background-color: var(--text-primary);
max-width: fit-content;
}
.boxy-3 {
background-color: var(--text-primary);
max-width: fit-content;
}
.btn-new {
line-height: 50px;
height: 50px;
text-align: center;
width: 250px;
cursor: pointer;
}
/*
========================
BUTTON ONE
========================
*/
.btn-one {
color: #fff;
transition: all 0.3s;
position: relative;
}
.btn-one span {
transition: all 0.3s;
}
.btn-one::before {
content: "";
position: absolute;
bottom: 0;
left: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
......@@ -3082,13 +3001,7 @@ div[class*="boxy"] {
border-bottom-color: rgba(255, 255, 255, 0.5);
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 {
content: "";
position: absolute;
......@@ -3105,14 +3018,18 @@ div[class*="boxy"] {
transform: scale(0.1, 1);
}
.tabbutton{
margin-left: 5px;
margin-right: 5px;
}
.backtotop {
place-self: end;
/* visual styling */
text-decoration: none;
padding: 10px;
color:white !important;
background: var(--text-primary);
color:var(--ourbeige) !important;
background: var(--ourgradient);
border-radius: 100px;
white-space: nowrap;
margin-left: 40px;
......@@ -3120,12 +3037,54 @@ div[class*="boxy"] {
text-align: right;
}
.backtotop:hover{
box-shadow: 5px 5px 15px black;
color: white !important;
box-shadow: 5px 5px 15px var(--offblack);
color: var(--ourbeige) !important;
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-2{fill:#e8f1f9;opacity:0.43;}
......@@ -3142,10 +3101,6 @@ div[class*="boxy"] {
.cls-12{stroke:#7913e5;}.cls-13{fill:#7913e5;}
.svg-button:hover{
cursor: pointer;
}
.rotate-linear-infinite{
animation: rotation 20s;
......@@ -3251,6 +3206,13 @@ div[class*="boxy"] {
a{
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{
fill: var(--accent-gradient-three-of-three) !important;
}
......@@ -3335,14 +3297,14 @@ a{
}
.active-sideitem {
background-color: var(--text-primary) !important;
color: white !important;
border-radius: 10px;
background: var(--ourgradient);
color: var(--ourbeige) !important;
border-radius: 5px;
display: block;
border-width: 10px;
border-color: #850F78;
padding-right: 10px;
padding-left: 10px;
border-width: 5px;
border-color: var(--lightblue);
padding-right: 5px;
padding-left: 5px;
}
......@@ -3353,8 +3315,9 @@ a{
}
.sp-a{
border: 5px solid var(--accent-primary);
background-color: white;
background-color: var(--ourbeige);
height: 250px !important;
border-radius: 10px;
}
.qabox .question-bubble:nth-child(2){
......@@ -3486,14 +3449,14 @@ a{
.subtitle-active .sideitem a summary{
color: white !important;
color: var(--ourbeige) !important;
}
.sideitem a summary{
color: var(--text-primary) !important;
color: var(--offblack) !important;
}
.active-sideitem a summary{
color: white !important;
color: var(--ourbeige) !important;
}
.flexbox{
......@@ -3517,9 +3480,16 @@ a{
.hp-timeline-img{
margin-top: 0 !important;
height: 100%; /* Das Bild wird in der Höhe an den Container angepasst */
max-height: 100%;
width: 100%; /* Bild füllt den Image-Container aus */
object-fit: cover; /* Optional: Skaliert das Bild so, dass es den Container proportional füllt */
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{
......@@ -3531,9 +3501,7 @@ a{
width: 20px;
}
.footer-slider .slider-container .slick-slider .slick-initialized .slick-list .slick-track{
width: 900px !important;
}
.header-title svg{
max-width: 100% !important;
......@@ -3560,4 +3528,447 @@ a{
.precyse{
padding: 1px ;
padding-left: 2px !important;
}
\ No newline at end of file
}
.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;
& > a {
opacity: 0;
position: absolute;
color: #000;
background-color: #000;
color: var(--offblack);
background-color: var(--offblack);
font: bold 4em "Helvetica";
$shadow: 5px #fff;
$shadow: 5px var(--ourbeige);
text-shadow: 0 -1px $shadow, -1px 0px $shadow, 0 1px $shadow,
1px 0px $shadow;
padding: 2rem;
......@@ -165,7 +165,7 @@ $size: 6;
& > div {
overflow: hidden;
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,
a {
......@@ -201,7 +201,7 @@ $size: 6;
.content {
max-width: 90%;
position: relative;
color: #fff;
color: var(--ourbeige);
&:hover > a.close {
opacity: 1;
transform: scale(1, 1);
......@@ -262,7 +262,7 @@ $size: 6;
opacity: 0;
transform-origin: right top;
text-decoration:none;
color:#fff;
color:var(--ourbeige);
&::after {
content: "X";
}
......@@ -332,7 +332,7 @@ $shadow: #bc15aa;
height: 100px;
line-height: 100px;
margin: auto;
color: #fff;
color: var(--ourbeige);
position: absolute;
top: 0;
bottom: 0;
......@@ -459,7 +459,7 @@ $shadow: #bc15aa;
}
i{
position: relative;
color: white;
color: var(--ourbeige);
font-size: 60px/2;
margin-top: 60px/4;
transition: all 0.25s ease;
......@@ -553,14 +553,34 @@ $shadow: #bc15aa;
max-width: 400px;
width: 90%;
margin: auto;
background: #fff;
background: var(--ourbeige);
padding: 30px;
border-style: solid;
border-width: 30px;
border-top-color: darken(#850F78, 0%);
border-right-color: darken(#850F78, 10%);
border-bottom-color: darken(#850F78, 0%);
border-left-color: darken(#850F78, 10%);
$color: "#850F78";
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);
}
.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);
}
......@@ -571,7 +591,7 @@ figure.snip1113 {
min-width: 220px;
max-width: 310px;
width: 80%;
background: #ffffff;
background: var(--ourbeige);
text-align: center;
}
......@@ -603,8 +623,8 @@ figure.snip1113 figcaption {
}
figure.snip1113 h3 {
background-color: #ffffff;
color: #000000;
background-color: var(--ourbeige);
color: var(--offblack);
font-size: 1.7em;
width: 100%;
padding: 5px 12px;
......
src/App/App.tsx
View file @ 3fd292fd
import { useEffect, useState } from "react";
import { useEffect } from "react";
import "./App.css";
import "./HP.css"
import "./mediarules.css"
import "./Timelines.css";
import '../App/Graph.css';
......@@ -20,12 +21,17 @@ import { stringToSlug } from "../utils/stringToSlug.ts";
import { Villbuttonrow } from "../components/Buttons.tsx";
import "../utils/Highlight-functions.js";
import "./LoadingScreen.css";
import "./calendar.css"
import { useLoading } from "../utils/LoadingContext.tsx";
const App = () => {
const { isLoading, setIsLoading } = useLoading(); // 2. Ladezustand hier verwenden
window.scrollTo(0, 0);
const [isLoading, setIsLoading] = useState(true);
// const [isLoading, setIsLoading] = useState(true);
const pathMapping = getPathMapping();
const currentPath =
......@@ -46,7 +52,7 @@ const App = () => {
const timer = setTimeout(() => {
console.log("Hiding loading screen");
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 () => {
console.log("Cleaning up timer");
......@@ -61,10 +67,9 @@ const App = () => {
) : (
<>
{/* Navigation */}
<Navbar />
{/* Embed the viewer */}
{/* Header and PageContent */}
<Routes>
......@@ -76,14 +81,14 @@ const App = () => {
<>
<Header />
{/* Page content */}
<div className="container-fluid">
<div className="container-fluid" >
<div className="row">
<Sidebar />
<div className="col">
<Sidebar/>
<div className="full-col-phone col-9 max-1240">
<Component />
<Villbuttonrow />
</div>
<div className="col-1 d-none d-lg-block">
<div className="col-1 none d-lg-block">
{/* <!-- empty!--> */}
</div>
</div>
......@@ -104,7 +109,7 @@ const App = () => {
<div className="col">
<Villbuttonrow />
</div>
<div className="col-1 d-none d-lg-block">
<div className="col-1 d-lg-block">
{/* <!-- empty!--> */}
</div>
</div>
......
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
View file @ 3fd292fd
......@@ -6,12 +6,67 @@
transition: opacity 1200ms ease-out, transform 600ms ease-out,
visibility 1200ms ease-out;
will-change: opacity, visibility;
background-color: black;
background-color: var(--offblack);
}
.content-block.is-visible {
opacity: 1;
transform: none;
visibility: visible;
background-color: black;
background-color: var(--offblack);
}
.landing-page-header .row .col{
padding: 30px;
margin: auto;
justify-content: center;
}
.landing-page-header .col{
justify-content: center;
display: grid ;
}
.landing-page-header button{
background-color: var(--accent-primary);
border-radius: 10px;
padding: 10px;
width: 30vw;
}
.landing-page-header{
padding-top: 200px !important;
}
.header-button-row{
min-height: 450px;
}
/* .header-button-row .h5 {
} */
#landing-page-header-2{
margin-top: 5rem;
background-image: url("https://static.igem.wiki/teams/5247/landing-page/lp-1new-lung-two.svg") !important;
background-size: 100% auto;
background-repeat: no-repeat;
padding: 0 !important;
}
.button-x{
align-items: center;
display: flex;
align-self: center;
}
.button-x button{
margin: auto;
padding: 10px;
border-radius: 10px;
background-color: var(--text-primary);
color: var(--ourbeige)
}
\ No newline at end of file
src/App/Timelines.css
View file @ 3fd292fd
......@@ -4,45 +4,46 @@
/* This is the timeline container */
.timeline {
white-space: nowrap;
min-height: 500px;
width: 83vw;
overflow-x: auto;
overflow-y: hidden;
background-color: inherit;
font-size: 1rem;
/* align items center */
align-items: center !important;
/* 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));
white-space: nowrap;
min-height: 700px;
width: 75vw;
overflow-x: auto !important;
max-width: inherit !important;
overflow-y: hidden !important;
width: 100%;
background-color: inherit;
/* align items center */
align-items: center !important;
/* 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));
}
/* This is the timeline list container */
.timelineol {
font-size: 0;
width: 100vw;
padding: 250px 0;
transition: all 1s;
.timelineol {
font-size: 0;
width: 100vw;
padding: 250px 0;
transition: all 1s;
}
/* Positioning of the upper timeline cards */
.timeline ol li:nth-child(2n+1) .time-meta::before{
top: 100%;
left: 8px !important;
border-color: #f6faf6 transparent transparent transparent !important;
top: 100%;
left: 8px !important;
border-color: white transparent transparent transparent !important;
}
.timeline ol li:nth-child(2n+1) .moretop{
top: -40px !important;
top: -40px !important;
}
.timeline ol li:nth-child(odd) .timeline-item {
top: -16px;
transform: translateY(-100%);
box-shadow: 0 4px 6px 0 hsla(0, 0%, 0%, 0.2);
top: -16px;
transform: translateY(-100%);
box-shadow: 0 4px 6px 0 hsla(0, 0%, 0%, 0.2);
}
......@@ -50,42 +51,42 @@
.timeline ol li:nth-child(2n) .time-meta::before{
top: 100%;
left: 8px !important;
border-color: transparent transparent transparent #f6faf6 !important;
border-color: transparent transparent transparent white !important;
}
.timeline ol li:nth-child(2n) .moretop{
top: 30px !important;
top: 50px !important;
}
.timeline ol li:nth-child(even) .timeline-item {
box-shadow: 0 4px 6px 0 hsla(0, 0%, 0%, 0.2);
top: calc(100% + 16px);
box-shadow: 0 4px 6px 0 hsla(0, 0%, 0%, 0.2);
top: calc(100% + 16px);
}
/* The DNA Strang of the timeline */
.timelineolli {
position: relative;
display: inline-block;
list-style-type: none;
width: 190px;
width: 250px;
height: 20px;
background-image: url("https://static.igem.wiki/teams/5247/design/icons/dna-strang-schmal-fatter.svg");
background-size: 100% 120%;
}
/* Timeline Pointers outline and form */
.timeline ol li .timeline-item::before {
content: '';
position: absolute;
top: 100%;
left: 0;
width: 0;
height: 0;
border-style: solid;
content: '';
position: absolute;
top: 100%;
left: 0;
width: 0;
height: 0;
border-style: solid;
}
.timeline ol li:nth-child(odd) .timeline-item::before {
top: 100%;
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 {
top: -20px;
......@@ -95,186 +96,189 @@ border-color: transparent transparent transparent white;
/* To extend the line at the end */
.timelineolli:last-child{
background-size: 65% 120%;
background-size: 65% 120%;
}
.timeline ol li:last-child {
width: 300px;
width: 300px;
}
/* For the points */
.timeline ol li:not(:last-child)::after {
content: '';
position: absolute;
top: 50%;
left: calc(98%);
bottom: 0;
z-index: 4;
width: 40px;
height: 40px;
transform: translateY(-50%);
border-radius: 50%;
background: var(--text-primary);
content: '';
position: absolute;
top: 50%;
left: calc(98%);
bottom: 0;
z-index: 4;
width: 40px;
height: 40px;
transform: translateY(-50%);
border-radius: 50%;
background: var(--text-primary);
}
/* Card layout */
.timeline ol li .timeline-item {
min-height: 310%;
position: absolute;
left: calc(100% + 7px);
width: 280px;
padding: 15px;
font-size: 0.9rem;
white-space: normal;
color: black;
background: white;
height: 250px;
min-height: 310%;
position: absolute;
left: calc(100% + 7px);
width: 350px;
padding: 15px;
font-size: 0.9rem;
white-space: normal;
color: var(--offblack);
background: white; /* Soll white bleiben! */
}
/* Layout for meta timeline cards */
.time-meta{
background-color: #f6faf6 !important;
border-radius: 10px;
border-radius: 10px;
}
/* Tags */
.t-tag{
box-shadow: 0 4px 6px 0 hsla(0, 0%, 0%, 0.2);
color: #fff;
font-size: 12px;
font-weight: bold;
letter-spacing: 1px;
padding: 5px;
margin-bottom: 10px;
text-transform: uppercase;
width: fit-content !important;
}
button.tabbutton.Patient.active, button.tabbutton.All.active,
button.tabbutton.Industry.active, button.tabbutton.Academia.active,
button.tabbutton.Medical.active, .modulators.active, .inhalations.active{
border-color: black;
}
.colour-meta-tag{
background-color: var(--igemlightgreen);
box-shadow: 0 4px 6px 0 hsla(0, 0%, 0%, 0.2);
color: var(--ourbeige);
font-size: 12px;
font-weight: bold;
letter-spacing: 1px;
padding: 5px;
margin-bottom: 10px;
text-transform: uppercase;
width: fit-content !important;
}
button.tabbutton.Patient.active, button.tabbutton.All.active,
button.tabbutton.Industry.active, button.tabbutton.Academia.active,
button.tabbutton.Medical.active, .modulators.active, .inhalations.active{
border-color: var(--offblack);
}
/* and buttons */
button.tabbutton:nth-child(1){
background-color: white;
}
.Patient, button.tabbutton:nth-child(2){
background-color: var(--accen-secondary);
}
.Medical, button.tabbutton:nth-child(3){
background-color: var(--accent-primary);
}
.Academia, .Research, button.tabbutton:nth-child(4){
background-color: var(--lightblue);
}
.Industry, button.tabbutton:nth-child(5){
background-color: var(--mediumpurple);
}
.Activist, button.tabbutton:nth-child(6){
background-color: var(--igemlightgreen);
}
.Ethics{
background-color: var(--offblack);
}
button.tabbutton:nth-child(1), button.tabbutton:nth-child(6){
background-color: white; /* soll whit ebleiben! */
}
.Patient, button.tabbutton:nth-child(2), .button.tabbutton:nth-child(7), .skin{
background-color: var(--accen-secondary) !important;
}
.Medical, button.tabbutton:nth-child(3), .button.tabbutton:nth-child(8), .mucosa{
background-color: var(--accent-primary);
}
.Academia, .Research, button.tabbutton:nth-child(4), button.tabbutton:nth-child(9){
background-color: var(--lightblue);
}
.Industry, button.tabbutton:nth-child(5){
background-color: var(--mediumpurple);
}
.Activist, .Milestone{
background-color: var(--igemmediumgreen) !important;
}
.Education, .Outreach{
background-color: var(--igemlightgreen);
}
.Other{
background-color: var(--offblack);
}
/* * * * * * * */
/* TIMELINE BFH*/
/* * * * * * * */
/* Container */
.timeline-container {
display: flex;
flex-direction: column;
position: relative;
margin: 40px 0;
display: flex;
flex-direction: column;
position: relative;
margin: 40px 0;
}
/* Line */
.timeline-container::after {
background-color: var(--text-primary);
position: absolute;
left: calc(50% - 2px);
content: "";
width: 4px;
height: 100%;
z-index: 0;
}
background-color: var(--text-primary);
position: absolute;
left: calc(50% - 2px);
content: "";
width: 4px;
height: 100%;
z-index: 0;
}
/* Cards */
.timeline-item {
min-width: 100px;
/* display: flex; */
justify-content: flex-end;
padding-right: 30px;
position: relative;
margin: 10px 0;
width: 50%;
}
.timeline-item-content {
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
border-radius: 5px;
background-color: #fff;
display: flex;
flex-direction: column;
align-items: flex-end;
padding: 15px;
position: relative;
text-align: right;
}
min-width: 100px;
/* display: flex; */
justify-content: flex-end;
padding-right: 30px;
position: relative;
margin: 10px 0;
width: 50%;
}
.timeline-item-content {
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
border-radius: 5px;
background-color: white; /* Soll white bleiben! */
display: flex;
flex-direction: column;
align-items: flex-end;
padding: 15px;
position: relative;
text-align: right;
}
/* Accomodate for alteration in card design */
.timeline-item:nth-child(odd) .timeline-item-content {
text-align: left;
align-items: flex-start;
}
text-align: left;
align-items: flex-start;
}
/* Tags */
.timeline-item-content .tag {
color: #fff;
font-size: 12px;
font-weight: bold;
top: 5px;
left: 5px;
letter-spacing: 1px;
padding: 5px;
margin-top: 5px;
margin-left: 5px;
position: absolute;
text-transform: uppercase;
}
.timeline-item:nth-child(odd) .timeline-item-content .tag {
left: auto;
right: 5px;
margin-right: 5px;
color: var(--ourbeige);
font-size: 12px;
font-weight: bold;
top: 5px;
left: 5px;
letter-spacing: 1px;
padding: 5px;
margin-top: 5px;
margin-left: 5px;
position: absolute;
text-transform: uppercase;
}
.timeline-item:nth-child(odd) .timeline-item-content .tag {
left: auto;
right: 5px;
margin-right: 5px;
}
/* Title design */
.timeline-item-content time {
color: black;
font-size: 16px;
font-weight: bold;
}
color: var(--offblack);
font-size: 16px;
font-weight: bold;
}
/* To create alternation */
.timeline-item:nth-child(odd) {
align-self: flex-end;
justify-content: flex-start;
padding-left: 30px;
padding-right: 0;
}
align-self: flex-end;
justify-content: flex-start;
padding-left: 30px;
padding-right: 0;
}
/* To create bigger first and final cards */
.timeline-end{
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
border-radius: 5px;
background-color: #fff;
background-color: white; /* soll white bleiben */
padding: 15px;
position: relative;
text-align: center;
......@@ -284,7 +288,7 @@ margin-top: 8vw;
.timeline-begin{
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
border-radius: 5px;
background-color: #fff;
background-color: white; /* soll white bleiben */
padding: 15px;
position: relative;
text-align: center;
......@@ -294,16 +298,16 @@ margin-bottom: 8vw;
/* Make short description on card bigger */
.timeline-item-content span{
font-size: 18px;
}
font-size: 18px;
}
/* Make links on Cards fat */
.timeline-item-content a {
font-weight: bold;
}
.timeline-item-content a {
font-weight: bold;
}
/* Circle */
.timeline-item-content .circle {
background-color: #fff !important;
background-color: var(--ourbeige) !important;
border: 3px solid var(--text-primary);
border-radius: 50%;
position: absolute;
......@@ -314,80 +318,65 @@ height: 20px;
z-index: 100;
}
.timeline-item:nth-child(odd) .timeline-item-content .circle {
right: auto;
left: -53px;
right: auto;
left: -53px;
}
/* Checken ob wir das echt brauchen */
/* .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;
*/
.hpbuttonrow {
display: flex; /* Flex-Layout für die untere Reihe */
margin-top: auto; /* Schiebt diese Reihe nach unten */
align-items: center; /* Vertikale Zentrierung */
}
.date {
background-color: var(--text-primary) !important;
padding: 4px !important;
color: #fff !important;
border-radius: 4px !important;
font-weight: 500;
font-size: .85rem;
.fillup {
flex: 1;
display: flex; /* Flex-Layout aktivieren */
align-items: center; /* Vertikale Zentrierung */
justify-content: center; /* Horizontale Zentrierung */
}
.date-col{
position: relative;
background-color: #fff ;
padding: 10px;
width: 10%;
border-right: #000;
border-right-width: 2px;
}
.imageAtom{
object-fit: cover;
overflow: hidden;
width: 100%;
max-height: 400px;
}
*/
\ No newline at end of file
.timeline-item .row:first-child {
flex: 1; /* Füllt den verbleibenden Raum aus */
display: flex; /* Flex-Layout aktivieren */
align-items: center; /* Vertikale Zentrierung */
}
/* Untere Reihe */
.timeline-item .row:last-child {
margin-top: auto; /* Schiebt die letzte Reihe nach unten */
}
.fillup-wrapper{
display: flex;
}
.timeline-item figcaption{
background-color: var(--ourbeige) !important;
}
.timeline-item figcaption, .timeline-item figure, .timeline-item figcaption h3 {
background-color: white !important;
}
.timeline-item .img-cube{
height: 120px;
max-height: 13vh;
object-fit: cover !important;
}
\ No newline at end of file
src/App/calendar.css 0 → 100644
View file @ 3fd292fd
.month {
padding: 70px 25px;
width: 100%;
margin-top: 40px;
background: var(--mediumpurple);
text-align: center;
border-radius: 10px;
}
.cal-entry{
border-color: var(--text-primary);
border-radius: 10px;
border-width: 2px;
border-style: dotted;
}
.entry-body{
padding: 2vw 4vw;
}
.entry-header{
background-color: var(--darkerbeige);
padding: 15px;
border-bottom-color: var(--text-primary);
border-bottom-width: 1px;
border-bottom-style: solid;
}
.month ul {
margin: 0;
padding: 0;
}
.month ul li {
color: var(--ourbeige) !important;
font-size: 20px;
text-transform: uppercase;
letter-spacing: 3px;
list-style: none;
}
.prev a, .next a{
color: var(--ourbeige) !important;
}
.month .prev {
float: left;
padding-top: 10px;
}
.month .next {
float: right;
padding-top: 10px;
}
.weekdays {
border-radius: 10px;
margin: 0;
padding: 10px 0;
background-color: #ddd;
}
.weekdays li {
display: inline-block;
width: 13.6%;
color: #666;
text-align: center;
}
.days {
border-radius: 10px;
padding: 10px 0;
background: #eee;
margin: 0;
}
.days li {
list-style-type: none;
display: inline-block;
width: 13.6%;
text-align: center;
margin-bottom: 5px;
font-size:12px;
color: #777;
}
.days li .active {
padding: 5px;
background: #1abc9c;
color: var(--ourbeige) !important
}
/* Add media queries for smaller screens */
@media screen and (max-width:720px) {
.weekdays li, .days li {width: 13.1%;}
}
@media screen and (max-width: 420px) {
.weekdays li, .days li {width: 12.5%;}
.days li .active {padding: 2px;}
}
@media screen and (max-width: 290px) {
.weekdays li, .days li {width: 12.2%;}
}
\ No newline at end of file
src/App/mediarules.css
View file @ 3fd292fd
......@@ -27,13 +27,13 @@
align-items: center;
}
h1 {
font-size: 2rem;
}
.col-6 {
width: 100%; /* Full width on tablets */
}
.progress-bar{
display: none !important;
}
}
/*For Smartphones*/
......@@ -47,9 +47,183 @@
max-width: 100% !important;
}
.col-6 {
width: 100%; /* Full width for smartphone */
width: 100% ;
}
.container-fluid {
min-height: 100vh;
}
/***heading***/
.header-title{
min-height: 400px;
text-align: center;
align-items: center;
margin: auto !important;
padding: 0 30px;
font-size: 130px;
font-weight: 900;
line-height: 130px;
}
.header-container{
padding-top: 170px !important;
padding-bottom: 0px !important;
background-color: var(--ourbeige);
}
.base {
width: 100%;
background-color: var(--lightblue);
padding: 0px;
}
/***footer***/
footer {
width: 100% !important;
box-sizing: border-box !important;
padding: 15px !important;
}
.col {
width: 100% !important;
margin-bottom: 20px;
}
.col-sm-4, .col-sm-8, .col-6 {
width: 100%;
}
footer a, footer p {
font-size: 14px;
line-height: 1.4;
}
footer .socials {
display: flex;
justify-content: center !important;
margin-bottom: 10px;
}
.contact-info {
font-size: 14px;
text-align: center;
}
.img-sponsor {
width: 100px;
height: auto;
margin: 0 auto;
}
.footer-slider {
width: 100%;
margin-top: 20px;
}
footer a {
word-wrap: break-word;
overflow-wrap: break-word;
}
hr {
margin: 20px 0;
}
/***gif***/
.CFTR-gif {
width: 1000px !important;
max-width: 100%;
height: auto;
}
/***home***/
#breatht {
font-size: 1.5em !important; /* Adjust font size for smaller screens */
text-align: left; /* Optional: center text for mobile */
}
#breathf {
left: 48vw !important;
width: 65vw !important;
}
/*#breatht1 {
left: 0 !important;
position:initial!important;
font-size: 0.5em !important;
}*/
img[src*="200k-anim-transparent-bg.gif"] {
width: 100%;
height: auto;
}
/***Biosafty***/
#safehead {
background-size: contain; /* Adjust the image to fit within the container */
background-position: center 25%; /* Push the image down for better visibility */
height: 10px; /* Adjust the height for mobile screens */
}
/***contribution***/
.timeline-item{
padding-right: 0px !important;
padding-left: 5%;
width: 50% !important;
box-sizing: content-box;
text-align: left !important;
}
.timeline-item:nth-child(odd) {
align-self: flex-end !important;
justify-content: flex-start;
padding-left: 30px;
padding-right: 0;
}
figure.snipp1113{
min-width: 0px !important ;
max-width: 120px ;
width: 100% ;
margin-left: 80px;
}
.timeline-item-content{
text-align:initial !important;
align-items: flex-end ;
padding-left: 30px;
font-display: initial !important;
display: flex;
position: inherit;
}
.timeline-item-content .tag{
padding: 0px !important;
}
/***engineering***/
.col-2{
width: 50% !important;
}
/***Description***/
.pie-chart-container-small {
width: 300px !important; /* Make smaller for mobile */
height: 300px !important; /* Adjust height accordingly */
}
.quiz-wrapper {
flex-direction: column;
padding: 10px;
width: 100% !important; /* Set width to 100% for mobile screens */
}
.quiz-front, .quiz-back {
padding: 10px !important;
}
.quiz-heading {
font-size: 1.2em;
}
.quiz-text {
font-size: 1em;
margin-bottom: 10px !important;
word-wrap: break-word; /* Keep word breaking for mobile */
}
.quiz-button-box {
margin-top: 5px !important;
justify-content: space-evenly;
}
.row-if-small{
--bs-gutter-x: 1.5rem;
--bs-gutter-y: 0;
......@@ -83,7 +257,8 @@
.bfh-slider{
width: 100em !important;
max-width: 250px !important;
}
}
.tag{
width: min-content !important;
}
......@@ -98,9 +273,6 @@
.winner{
font-size: x-large;
}
/*h3{
margin-bottom: 4vw !important;
}*/
.small-only{
display: block !important;
}
......@@ -127,7 +299,7 @@ svg text{
.village-style-button{
box-shadow: 1px 1px 1px gray;
border-radius: 10px;
border-color: black;
border-color: var(--offblack);
padding: 10px;
}
......@@ -140,27 +312,24 @@ svg text{
padding-top: 10px;
padding-bottom: 5px;
}
h1 {
font-size: 1vw !important;
line-height: 1.0 !important;
}
h2, h3 {
font-size: 24px !important;
}
.bigtitle {
width: 450px !important;
height: 200px !important;
word-wrap: break-word;
}
.framecycletab{
margin-left: 0 !important;
}
body {
padding: 10px !important;
width: 202% ;
overflow-x: hidden; /* Prevents horizontal scrolling */
/* padding: 10px !important; */
width: 202% !important;
overflow-x: hidden ; /* Prevents horizontal scrolling */
margin: 0;
padding: 0;
background-size: cover; /* Ensures the background scales to cover the entire screen */
background-position: center; /* Keeps the background centered */
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;
}
......@@ -169,17 +338,34 @@ body {
max-width: 100% !important;
height: auto !important;
}
.container {
/*.container {
padding: 10px;
}
}*/
.row{
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 */
......@@ -207,6 +393,13 @@ body {
}
/***description***/
.pie-chart-container {
width: 600px; /* Set the width of the container */
height: 600px; /* Set the height of the container */
position: relative;
margin: 0 auto; /* Center the chart */
}
@media screen and (max-width: 1300px){
.one-pdf-line{
......
src/components/.DS_Store 0 → 100644
View file @ 3fd292fd
File added
src/components/AirbuddyAnim.tsx 0 → 100644
View file @ 3fd292fd
import { useEffect, useRef, useState } from "react";
export function AirbuddyAnim(){
const [isVisible, setVisible] = useState(false);
const domRef = useRef(null)!;
useEffect(() => {
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => setVisible(entry.isIntersecting));
});
observer.observe(domRef.current!);
}, []);
const [isVisible2, setVisible2] = useState(false);
const domRef2 = useRef(null)!;
useEffect(() => {
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => setVisible2(entry.isIntersecting));
});
observer.observe(domRef2.current!);
}, []);
const [isVisible3, setVisible3] = useState(false);
const domRef3 = useRef(null)!;
useEffect(() => {
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => setVisible3(entry.isIntersecting));
});
observer.observe(domRef3.current!);
}, []);
const [isVisible4, setVisible4] = useState(false);
const domRef4 = useRef(null)!;
useEffect(() => {
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => setVisible4(entry.isIntersecting));
});
observer.observe(domRef4.current!);
}, []);
const [isVisible5, setVisible5] = useState(false);
const domRef5 = useRef(null)!;
useEffect(() => {
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => setVisible5(entry.isIntersecting));
});
observer.observe(domRef5.current!);
}, []);
const [isVisible6, setVisible6] = useState(false);
const domRef6 = useRef(null)!;
useEffect(() => {
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => setVisible6(entry.isIntersecting));
});
observer.observe(domRef6.current!);
}, []);
const [isVisible7, setVisible7] = useState(false);
const domRef7 = useRef(null)!;
useEffect(() => {
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => setVisible7(entry.isIntersecting));
});
observer.observe(domRef7.current!);
}, []);
const [isVisible8, setVisible8] = useState(false);
const domRef8 = useRef(null)!;
useEffect(() => {
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => setVisible8(entry.isIntersecting));
});
observer.observe(domRef8.current!);
}, []);
return (
<>
{/* One */}
<div
className='col'
style={{
'height': '100vh',
'transition': 'opacity 0.6s ease-out',
'opacity': `${isVisible ? '1' : '0'}`,
'visibility': `${isVisible ? 'visible' : 'hidden'}`}}
ref={domRef}>
<img
style={{
'position': 'fixed',
'top': '20vh',
'left': '20vw',
'width': '60vw',
'height': '60vh',
}}
src="https://static.igem.wiki/teams/5247/landing/airbuddy/airbuddy-0.webp">
</img>
</div>
{/* Two */}
<div
className='col'
style={{
'height': '100vh',
'transition': 'opacity 0.6s ease-out',
'opacity': `${isVisible2 ? '1' : '0'}`,
'visibility': `${isVisible2 ? 'visible' : 'hidden'}`}}
ref={domRef2}>
<img
style={{
'position': 'fixed',
'top': '20vh',
'left': '20vw',
'width': '60vw',
'height': '60vh',
}}
src="https://static.igem.wiki/teams/5247/landing/airbuddy/airbuddy-1.webp">
</img>
</div>
{/* Three */}
<div
className='col'
style={{
'height': '100vh',
'transition': 'opacity 0.6s ease-out',
'opacity': `${isVisible3 ? '1' : '0'}`,
'visibility': `${isVisible3 ? 'visible' : 'hidden'}`}}
ref={domRef3}>
<img
style={{
'position': 'fixed',
'top': '20vh',
'left': '20vw',
'width': '60vw',
'height': '60vh',
}}
src="https://static.igem.wiki/teams/5247/landing/airbuddy/airbuddy-2.webp">
</img>
</div>
{/* Four */}
<div
className='col'
style={{
'height': '100vh',
'transition': 'opacity 0.6s ease-out',
'opacity': `${isVisible4 ? '1' : '0'}`,
'visibility': `${isVisible4 ? 'visible' : 'hidden'}`}}
ref={domRef4}>
<img
style={{
'position': 'fixed',
'top': '20vh',
'left': '20vw',
'width': '60vw',
'height': '60vh',
}}
src="https://static.igem.wiki/teams/5247/landing/airbuddy/airbuddy-3.webp">
</img>
</div>
{/* Five */}
<div
className='col'
style={{
'height': '100vh',
'transition': 'opacity 0.6s ease-out',
'opacity': `${isVisible5 ? '1' : '0'}`,
'visibility': `${isVisible5 ? 'visible' : 'hidden'}`}}
ref={domRef5}>
<img
style={{
'position': 'fixed',
'top': '20vh',
'left': '20vw',
'width': '60vw',
'height': '60vh',
}}
src="https://static.igem.wiki/teams/5247/landing/airbuddy/airbuddy-4.webp">
</img>
</div>
{/* Six */}
<div
className='col'
style={{
'height': '100vh',
'transition': 'opacity 0.6s ease-out',
'opacity': `${isVisible6 ? '1' : '0'}`,
'visibility': `${isVisible6 ? 'visible' : 'hidden'}`}}
ref={domRef6}>
<img
style={{
'position': 'fixed',
'top': '20vh',
'left': '20vw',
'width': '60vw',
'height': '60vh',
}}
src="https://static.igem.wiki/teams/5247/landing/airbuddy/airbuddy-5.webp">
</img>
</div>
{/* Seven */}
<div
className='col'
style={{
'height': '100vh',
'transition': 'opacity 0.6s ease-out',
'opacity': `${isVisible7 ? '1' : '0'}`,
'visibility': `${isVisible7 ? 'visible' : 'hidden'}`}}
ref={domRef7}>
<img
style={{
'position': 'fixed',
'top': '20vh',
'left': '20vw',
'width': '60vw',
'height': '60vh',
}}
src="https://static.igem.wiki/teams/5247/landing/airbuddy/airbuddy-6.webp">
</img>
</div>
{/* Eight */}
<div
className='col'
style={{
'height': '100vh',
'transition': 'opacity 0.6s ease-out',
'opacity': `${isVisible8 ? '1' : '0'}`,
'visibility': `${isVisible8 ? 'visible' : 'hidden'}`}}
ref={domRef8}>
<img
style={{
'position': 'fixed',
'top': '20vh',
'left': '20vw',
'width': '60vw',
'height': '60vh',
}}
src="https://static.igem.wiki/teams/5247/landing/airbuddy/airbuddy-7.webp">
</img>
</div>
</>
);
}
\ No newline at end of file
src/components/BFH-Timeline.tsx
View file @ 3fd292fd
import { PanelTimelineItem, TimelineItem, TimelineItemPic, TimelineItemTwoPic } from "./VerticalTimeline";
import { NoButtTimelineItem, PanelTimelineItem, TimelineItemPic, TimelineItemTwoPic } from "./VerticalTimeline";
import SimpleSlider from "./Slider";
import { ScrollLink, SupScrollLink } from "./ScrollLink";
import { useNavigation } from "../utils";
export function BFHTimeline () {
const {goToPagesAndOpenTab} = useNavigation();
return(
<>
<div className="timeline-container">
<div className='timeline-begin'>
<div className='timeline-begin' id="timelineH">
Begin & Opening
</div>
<TimelineItemTwoPic
<TimelineItemPic
url="https://static.igem.wiki/teams/5247/photos/meetup/speakers/ram.jpg"
date='Scientific Talk I.'
tag= 'Talks'
color='var(--lightblue)'
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="talkone"
csstag="talkonek"
vorname="Kristian"
vorname2="Ram"
nachname="Müller"
nachname2="Shakar"
heading="placeholder"
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="talkone" style={{display: "none"}}>
So much more
heading="Gene Therapy, AAVs and Innovations in Synthetic Biology"
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."
>
<div id="talkonek" 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>
<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>
</TimelineItemPic>
</TimelineItemTwoPic>
<TimelineItemPic
url="https://static.igem.wiki/teams/5247/photos/meetup/speakers/christian-kolland.png"
date='How to Wiki'
......@@ -36,11 +61,28 @@ export function BFHTimeline () {
csstag="wikiworkshop"
vorname="Christian"
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."
>
<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>
</TimelineItemPic>
<TimelineItemPic
......@@ -51,12 +93,39 @@ export function BFHTimeline () {
csstag="synworkshop"
vorname="Traci"
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.
"
heading="placeholder"
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. "
>
<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>
</TimelineItemPic>
<TimelineItemTwoPic
......@@ -70,12 +139,29 @@ export function BFHTimeline () {
tag='Workshop Session I.'
color='var(--text-primary)'
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"}}>
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>
</TimelineItemTwoPic>
<TimelineItemPic
......@@ -86,44 +172,50 @@ export function BFHTimeline () {
csstag="talktwo"
vorname="Karla"
nachname="Wagner"
heading="placeholder"
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"
>
heading="Optimization of a DKR of a Tertiary Alcohol through Protein Engineering"
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"}}>
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>
</TimelineItemPic>
<TimelineItem
<NoButtTimelineItem
url="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg"
date='Team project presentations'
tag= 'Team presentations'
color='var(--accent-primary'
csstag="teampres"
>
<h5>Team project presentations</h5>
<div className="col bfh-slider">
<SimpleSlider>
<img className="" src="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg"/>
<img className="" src="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg"/>
<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/photos/meetup/team-presentations/anyconv-com-dscf7430-enhanced-nr.webp"/>
<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>
</div>
<span>
</span>
<div id="teampres" style={{display: "none"}}>
So much more
</div>
</TimelineItem>
<TimelineItem
</span>
</NoButtTimelineItem>
<NoButtTimelineItem
url="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg"
date='Poster Exhibition Booth'
tag= 'Team presentations'
color='var(--accent-primary)'
csstag="teambooth"
>
<h5>Poster Exhibition Booth </h5>
[Link virtual exhibition]
<h5>Poster Exhibition Booth</h5>
<p> Visit the <ScrollLink label="Virtual Poster Exhibition" targetId="BFH European MeetUp4H" />!</p>
<div className="col bfh-slider">
<SimpleSlider>
<img className="" src="https://static.igem.wiki/teams/5247/photos/meetup/exhibition/posterexhibition-plasmid-factory.webp"/>
......@@ -144,11 +236,8 @@ export function BFHTimeline () {
</div>
<span>
</span>
<div id="teambooth" style={{display: "none"}}>
So much more
</div>
</TimelineItem>
</span>
</NoButtTimelineItem>
<TimelineItemPic
url="https://static.igem.wiki/teams/5247/photos/meetup/speakers/svanja-vinke.jpg"
date='How to work safe'
......@@ -161,24 +250,33 @@ export function BFHTimeline () {
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"}}>
<p>The biosafety workshop was held by Svenja Vinke. Svenja is a postdoctoral researcher specializing in
synthetic biology at the Church Lab, Harvard Medical School, and serves on the Safety and Security
Committee of iGEM. She started by outlining the key concepts of biosafety and biosecurity and emphasized
how important laboratory safety is first and foremost. </p>
<p>
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.
</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>
<ul>
<li> possible misuse (dual use) </li>
<li> built-in safety levels </li>
<li> if possible, several built in security mechanisms or at least recognizable that safety strategies that have been worked </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> <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> <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>
<p>This particularly applies to any delivery systems that can address their target particularly efficiently,
as these systems could be the center of potential misuse. </p>
<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>
<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>
<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>
<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>
</div>
</TimelineItemPic>
<TimelineItemTwoPic
......@@ -192,19 +290,25 @@ export function BFHTimeline () {
nachname2="Malmendier"
color='var(--text-primary)'
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. "
>
<br></br>
<div id="commworkshop" style={{display: "none"}}>
<br></br>
<h6>Setting</h6>
<p>
This workshop was offered to us by <a href="https://www.stud-scicom.de/">StudSciCom</a>.
StudSciCom 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
uprising StudSciCom team a platform to try out this kind of outreach. In addition, we were able to gain
knowledge about proper science communication – a clear win-win situation for all of us!
This workshop was offered to us by StudSciCom as part of the BFH Meet-up program at Bielefeld University.
<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 uprising StudSciCom team a platform to try out this kind of outreach. In addition,
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>
<h6>What did we learn?</h6>
<p>
......@@ -222,10 +326,25 @@ export function BFHTimeline () {
<p>
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
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
children and started developing experiments to help them better understand Cystic Fibrosis, which we
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!
</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>
</TimelineItemTwoPic>
<TimelineItemPic
......@@ -242,8 +361,24 @@ export function BFHTimeline () {
"
>
<div id="pitch" style={{display: "none"}}>
So much more
</div>
<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>
<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
url="https://static.igem.wiki/teams/5247/photos/meetup/speakers/michael.jpg"
......@@ -253,22 +388,30 @@ export function BFHTimeline () {
csstag="multimedia"
vorname="Michael"
nachname="Gröning"
heading="placeholder"
heading="Mastering Filmmaking: From Basics to iGEM Video Production"
text="Learn the basics of filmmaking and video production.
Look behind the scenes and get in touch with professionals.
Train your skills to direct iGEM-related videos and movies."
>
<div id="multimedia" style={{display: "none"}}>
So much more
</div>
<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 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>
<PanelTimelineItem></PanelTimelineItem>
<TimelineItemPic
url="https://static.igem.wiki/teams/5247/photos/meetup/speakers/middendorf.jpeg"
date='iGEMer Ted Talks'
tag= 'Talks'
tag= 'Talks'
color='var(--lightblue)'
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"
......@@ -310,11 +453,33 @@ export function BFHTimeline () {
csstag="tedtalk2"
vorname="Merel"
nachname="van der Bosch"
heading="placeholder"
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"
>
heading="How to Create the Perfect Part Characterization"
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"}}>
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>
</TimelineItemPic>
<TimelineItemPic
......@@ -326,12 +491,12 @@ export function BFHTimeline () {
heading="ChatGPT and Large Language Models"
nachname="Vaquet"
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. "
>
<div id="slam1" style={{display: "none"}}>
<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
nearly all hands were raised in response. </p>
<p>The speaker introduced ChatGPT, a "Generative Pre-trained Transformer," using an interactive experiment where
......
src/components/Boxes.tsx
View file @ 3fd292fd
......@@ -57,9 +57,9 @@ export function InfoBox({title, children, id}:{title: string, children: React.Re
{title}
</p>
<div className="v-card-text">
<p>
<div>
{children}
</p>
</div>
</div>
</aside>
)
......
src/components/Breathe.tsx
View file @ 3fd292fd
......@@ -87,114 +87,122 @@ export function Breathe(){
'zIndex': '1',
'position': 'fixed',
'top': '20vh',
'left': '20vw',
'left': '30vw',
'width': '60vw',
'height': '60vh',
'transition': 'opacity 0.6s ease-out',
'opacity': `${isVisible ? '1' : '0'}`,
'visibility': `${isVisible ? 'visible' : 'hidden'}`
}}
src="https://static.igem.wiki/teams/5247/landing/breath/textless/breath-only-1.webp">
id="breathf" src="https://static.igem.wiki/teams/5247/landing/breath/textless/breath-only-1.webp">
</img>
{/* Spacing Block */}
<div className='col' style={{ 'height': '100vh' }}></div>
<div style={{ 'height': '100vh'}} ref={domRef2}>
<p>Take a moment to deeply breathe in...</p>
<p id="breatht" style={{'fontSize' : '2.5em'}}>Take a moment to</p>
<p id="breatht" style={{'fontSize' : '2.5em'}}>deeply breathe in...</p>
<img style={{
'position': 'fixed',
'top': '20vh',
'left': '20vw',
'left': '30vw',
'width': '60vw',
'height': '60vh',
'transition': 'scale 2.0s ease-out',
'scale': `${isVisible2 ? '1' : '0'}`,
'visibility': `${isVisible2 ? 'visible' : 'hidden'}`
}}
src="https://static.igem.wiki/teams/5247/landing/breath/circles/purplecircle.webp"></img>
id="breathf" src="https://static.igem.wiki/teams/5247/landing/breath/circles/purplecircle.webp"></img>
</div>
{/* Spacing Block */}
<div className='col' style={{ 'height': '95vh' }}></div>
<div style={{ 'height': '100vh'}} ref={domRef3}>
<p>and deeply breathe out...</p>
<p id="breatht" style={{'fontSize' : '2.5em'}}>and deeply.</p>
<p id="breatht" style={{'fontSize' : '2.5em'}}>breathe out...</p>
<img style={{
'position': 'fixed',
'top': '20vh',
'left': '20vw',
'left': '30vw',
'width': '60vw',
'height': '60vh',
'transition': 'scale 2.0s ease-out',
'scale': `${isVisible3 ? '0' : '1'}`,
'visibility': `${isVisible3 ? 'visible' : 'hidden'}`
}}
src="https://static.igem.wiki/teams/5247/landing/breath/circles/purplecircle.webp"></img>
id="breathf"src="https://static.igem.wiki/teams/5247/landing/breath/circles/purplecircle.webp"></img>
</div>
{/* Spacing Block */}
<div className='col' style={{ 'height': '100vh' }}></div>
<p>Your feel <strong>revitalized</strong> - Your body and mind become <strong>grounded</strong>.</p>
<p id="breatht" style={{'fontSize' : '2.5em'}}>You feel <strong>revitalized</strong></p>
<p id="breatht" style={{'fontSize' : '2.5em'}}>Your body and mind</p>
<p id="breatht" style={{'fontSize' : '2.5em'}}>become <strong>grounded</strong>.</p>
{/* Spacing Block */}
<div className='col' style={{ 'height': '100vh' }}></div>
<p>Now deeply breathe in and hold your breath.</p>
<p id="breatht"style={{'fontSize' : '2.5em'}}>Now deeply breathe in</p>
<p id="breatht"style={{'fontSize' : '2.5em'}}>and hold your breath.</p>
<div style={{ 'height': '100vh'}} ref={domRef4}>
<img style={{
'position': 'fixed',
'top': '20vh',
'left': '20vw',
'left': '30vw',
'width': '60vw',
'height': '60vh',
'transition': 'scale 2.0s ease-out',
'scale': `${isVisible4 ? '1' : '0'}`,
'visibility': `${isVisible4 ? 'visible' : 'hidden'}`
}}
src="https://static.igem.wiki/teams/5247/landing/breath/circles/purplecircle.webp"></img>
id="breathf"src="https://static.igem.wiki/teams/5247/landing/breath/circles/purplecircle.webp"></img>
</div>
</div>
{/* black */}
<div
style={{ 'height': '400vh'}} ref={domRef5}>
style={{ 'height': '300vh'}} ref={domRef5}>
<img
style={{
'zIndex': '1',
'position': 'fixed',
'top': '20vh',
'left': '20vw',
'left': '30vw',
'width': '60vw',
'height': '60vh',
'transition': 'opacity 0.6s ease-out',
'opacity': `${isVisible5 ? '1' : '0'}`,
'visibility': `${isVisible5 ? 'visible' : 'hidden'}`
}}
src="https://static.igem.wiki/teams/5247/landing/breath/textless/breath-only-2.webp">
id="breathf"src="https://static.igem.wiki/teams/5247/landing/breath/textless/breath-only-2.webp">
</img>
<div style={{ 'height': '100vh'}} ref={domRef6}>
<img style={{
'position': 'fixed',
'top': '20vh',
'left': '20vw',
'left': '30vw',
'width': '60vw',
'height': '60vh',
'visibility': `${isVisible6 ? 'visible' : 'hidden'}`
}}
src="https://static.igem.wiki/teams/5247/landing/breath/circles/darkerpurplecircle.webp"></img>
id="breathf"src="https://static.igem.wiki/teams/5247/landing/breath/circles/darkerpurplecircle.webp"></img>
</div>
{/* Spacing Block */}
<div className='col' style={{ 'height': '100vh' }}></div>
<p>With every second, you feel more stressed.</p>
<p>Your body fights against it, and your mind begins to panic...</p>
<p id="breatht"style={{'fontSize' : '2.5em'}}>Breathing is </p>
<p id="breatht"style={{'fontSize' : '2.5em'}}>essential.</p>
{/* <p style={{'fontSize' : '2.5em'}}>Breathing is essential, </p>
<p style={{'fontSize' : '2.5em'}}>but many people </p>
<p style={{'fontSize' : '2.5em'}}>struggle with it.</p> */}
<div style={{ 'height': '100vh'}} ref={domRef7}>
<img style={{
'position': 'fixed',
'top': '20vh',
'left': '20vw',
'left': '30vw',
'width': '60vw',
'height': '60vh',
'scale': `${isVisible7 ? '1' : '0'}`,
'visibility': `${isVisible7 ? 'visible' : 'hidden'}`
}}
src="https://static.igem.wiki/teams/5247/landing/breath/circles/fullblackcircle.webp"></img>
id="breathf"src="https://static.igem.wiki/teams/5247/landing/breath/circles/fullblackcircle.webp"></img>
</div>
{/* Spacing Block */}
<div className='col' style={{ 'height': '100vh' }}></div>
<p>Breathe out! Feel the relief!</p>
<p id="breatht"style={{'fontSize' : '2.5em'}}>That is why we </p>
<p id="breatht"style={{'fontSize' : '2.5em'}}>persue gene therapy for </p>
<p id="breatht"style={{'fontSize' : '2.5em'}}><b>Cystic Fibrosis.</b></p>
</div>
{/* grey */}
<div
......@@ -204,20 +212,23 @@ export function Breathe(){
'zIndex': '1',
'position': 'fixed',
'top': '20vh',
'left': '20vw',
'left': '30vw',
'width': '60vw',
'height': '60vh',
'transition': 'opacity 0.6s ease-out',
'opacity': `${isVisible8 ? '1' : '0'}`,
'visibility': `${isVisible8 ? 'visible' : 'hidden'}`
}}
src="https://static.igem.wiki/teams/5247/landing/breath/textless/breath-only-3.webp">
id="breathf" src="https://static.igem.wiki/teams/5247/landing/breath/textless/breath-only-3.webp">
</img>
</div>
<p>Imagine yourself living in constant fear of suffocation, because breathing deeply is a <strong>privilage not everyone can enjoy</strong>.</p>
<p id="breatht"style={{'fontSize' : '2.5em'}}>To help restore the ability </p>
<p id="breatht"style={{'fontSize' : '2.5em'}}>to breathe freely, offering</p>
<p id="breatht"style={{'fontSize' : '2.5em'}}><b>hope</b> to those whose lungs</p>
<p id="breatht"style={{'fontSize' : '2.5em'}}>can not properly function</p> {/* on their own. */}
<p id="breatht"style={{'fontSize' : '2.5em'}}>on their own.</p>
{/* Spacing Block */}
<div className='col' style={{ 'height': '100vh' }}></div>
</>
);
}
\ No newline at end of file
}