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 (1433)
1,333 additional commits have been omitted to prevent performance issues.
Hide whitespace changes
Inline Side-by-side
Showing
with 1383 additions and 7390 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/bibtex.bib deleted 100644 → 0
View file @ f16b822c
@article{Cloarec-Ung_Beaulieu_Suthananthan_Lehnertz_Sauvageau_Sheppard_Knapp_2024,
title = {Near-perfect precise on-target editing of human hematopoietic stem and progenitor cells},
author = {Cloarec-Ung, Fanny-Mei and Beaulieu, Jamie and Suthananthan, Arunan and Lehnertz, Bernhard and Sauvageau, Guy and Sheppard, Hilary M. and Knapp, David J. H. F.},
year = 2024,
month = jun,
journal = {eLife},
volume = 12,
pages = {RP91288},
doi = {10.7554/eLife.91288},
issn = {2050-084X},
abstractnote = {Precision gene editing in primary hematopoietic stem and progenitor cells (HSPCs) would facilitate both curative treatments for monogenic disorders as well as disease modelling. Precise efficiencies even with the CRISPR/Cas system, however, remain limited. Through an optimization of guide RNA delivery, donor design, and additives, we have now obtained mean precise editing efficiencies >90% on primary cord blood HSCPs with minimal toxicity and without observed off-target editing. The main protocol modifications needed to achieve such high efficiencies were the addition of the DNA-PK inhibitor AZD7648, and the inclusion of spacer-breaking silent mutations in the donor in addition to mutations disrupting the PAM sequence. Critically, editing was even across the progenitor hierarchy, did not substantially distort the hierarchy or affect lineage outputs in colony-forming cell assays or the frequency of high self-renewal potential long-term culture initiating cells. As modelling of many diseases requires heterozygosity, we also demonstrated that the overall editing and zygosity can be tuned by adding in defined mixtures of mutant and wild-type donors. With these optimizations, editing at near-perfect efficiency can now be accomplished directly in human HSPCs. This will open new avenues in both therapeutic strategies and disease modelling.},
language = {eng}
}
@article{EngineeredpegRNAs,
doi = {10.1038/s41587-021-01039-7},
url = {https://www.nature.com/articles/s41587-021-01039-7}
}
@article{Doench_Fusi_Sullender_Hegde_Vaimberg_Donovan_Smith_Tothova_Wilen_Orchard_et,
title = {Optimized sgRNA design to maximize activity and minimize off-target effects of CRISPR-Cas9},
author = {Doench, John G. and Fusi, Nicolo and Sullender, Meagan and Hegde, Mudra and Vaimberg, Emma W. and Donovan, Katherine F. and Smith, Ian and Tothova, Zuzana and Wilen, Craig and Orchard, Robert and Virgin, Herbert W. and Listgarten, Jennifer and Root, David E.},
year = 2016,
month = feb,
journal = {Nature Biotechnology},
publisher = {Nature Publishing Group},
volume = 34,
number = 2,
pages = {184–191},
doi = {10.1038/nbt.3437},
issn = {1546-1696},
rights = {2015 Springer Nature America, Inc.},
abstractnote = {Genome-wide sgRNA libraries based on rules for on-target activity improve results of Cas9-based screens and facilitate a further refinement of on- and off-target prediction algorithms.},
language = {en}
}
@article{White_Sadeeshkumar_Sun_Sudarsan_Breaker_2022,
title = {Na+ riboswitches regulate genes for diverse physiological processes in bacteria},
author = {White, Neil and Sadeeshkumar, Harini and Sun, Anna and Sudarsan, Narasimhan and Breaker, Ronald R.},
year = 2022,
month = aug,
journal = {Nature Chemical Biology},
publisher = {Nature Publishing Group},
volume = 18,
number = 88,
pages = {878–885},
doi = {10.1038/s41589-022-01086-4},
issn = {1552-4469},
rights = {2022 The Author(s)},
abstractnote = {Only one protein factor is known that senses Na+ and controls gene expression. The Breaker Laboratory describes a bacterial riboswitch class selective for Na+ that regulates genes important for Na+ homeostasis, pH maintenance, osmotic stress response and ATP synthesis.},
language = {en}
}
@article{Iwawaki_Akai_2006,
title = {Analysis of the XBP1 splicing mechanism using endoplasmic reticulum stress-indicators},
author = {Iwawaki, Takao and Akai, Ryoko},
year = 2006,
month = nov,
journal = {Biochemical and Biophysical Research Communications},
volume = 350,
number = 3,
pages = {709–715},
doi = {10.1016/j.bbrc.2006.09.100},
issn = {0006-291X},
abstractnote = {Under endoplasmic reticulum (ER) stress conditions, XBP1 mRNA is processed by unconventional splicing and translated into a functional transcription factor. ER stress-specific XBP1 splicing is also known to be activated by IRE1. However, many aspects of the molecular mechanism of XBP1 splicing remain to be elucidated. We previously developed an indicator system that enabled detection of XBP1 splicing using fluorescent proteins as the reporter signals. Here, we use a modification of this method that employs modified ER stress-indicators and mutant IRE1 in vivo and in vitro to analyze XBP1 splicing mechanisms. Our analyses suggest that the 506–579nt region of the XBP1 mRNA is necessary and sufficient for XBP1 splicing, that XBP1 splicing can occur in the cytoplasm, and that cleavage and ligation of XBP1 mRNA during splicing may occur as a coupled reaction.}
}
@article{Zhang_Lin_Yao_Cai_Chen_Aierken_Wang_Song_2023,
title = {XBP1 splicing contributes to endoplasmic reticulum stress-induced human islet amyloid polypeptide up-regulation},
author = {Zhang, Yun and Lin, Susan and Yao, Jing and Cai, Wantong and Chen, Huaqiu and Aierken, Ailikemu and Wang, Zhe and Song, Weihong},
year = 2023,
month = oct,
journal = {Genes & Diseases},
volume = 11,
number = 5,
pages = 101148,
doi = {10.1016/j.gendis.2023.101148},
issn = {2352-4820},
abstractnote = {As a pathological hallmark of type 2 diabetes mellitus (T2DM), islet amyloid is formed by the aggregation of islet amyloid polypeptide (IAPP). Endoplasmic reticulum (ER) stress interacts with IAPP aggregates and has been implicated in the pathogenesis of T2DM. To examine the role of ER stress in T2DM, we cloned the hIAPP promoter and analyzed its promoter activity in human β-cells. We found that ER stress significantly enhanced hIAPP promoter activity and expression in human β-cells via triggering X-box binding protein 1 (XBP1) splicing. We identified a binding site of XBP1 in the hIAPP promoter. Disruption of this binding site by substitution or deletion mutagenesis significantly diminished the effects of ER stress on hIAPP promoter activity. Blockade of XBP splicing by MKC3946 treatment inhibited ER stress-induced hIAPP up-regulation and improved human β-cell survival and function. Our study uncovers a link between ER stress and IAPP at the transcriptional level and may provide novel insights into the role of ER stress in IAPP cytotoxicity and the pathogenesis of T2DM.}
}
@article{wei_lung_2023,
title = {Lung {SORT} {LNPs} enable precise homology-directed repair mediated {CRISPR}/{Cas} genome correction in cystic fibrosis models},
author = {Wei, Tuo and Sun, Yehui and Cheng, Qiang and Chatterjee, Sumanta and Traylor, Zachary and Johnson, Lindsay T. and Coquelin, Melissa L. and Wang, Jialu and Torres, Michael J. and Lian, Xizhen and Wang, Xu and Xiao, Yufen and Hodges, Craig A. and Siegwart, Daniel J.},
year = 2023,
month = nov,
journal = {Nature Communications},
volume = 14,
number = 1,
pages = 7322,
doi = {10.1038/s41467-023-42948-2},
issn = {2041-1723},
url = {https://www.nature.com/articles/s41467-023-42948-2},
urldate = {2024-04-16},
copyright = {2023 The Author(s)},
note = {Publisher: Nature Publishing Group},
abstract = {Approximately 10\% of Cystic Fibrosis (CF) patients, particularly those with CF transmembrane conductance regulator (CFTR) gene nonsense mutations, lack effective treatments. The potential of gene correction therapy through delivery of the CRISPR/Cas system to CF-relevant organs/cells is hindered by the lack of efficient genome editor delivery carriers. Herein, we report improved Lung Selective Organ Targeting Lipid Nanoparticles (SORT LNPs) for efficient delivery of Cas9 mRNA, sgRNA, and donor ssDNA templates, enabling precise homology-directed repair-mediated gene correction in CF models. Optimized Lung SORT LNPs deliver mRNA to lung basal cells in Ai9 reporter mice. SORT LNP treatment successfully corrected the CFTR mutations in homozygous G542X mice and in patient-derived human bronchial epithelial cells with homozygous F508del mutations, leading to the restoration of CFTR protein expression and chloride transport function. This proof-of-concept study will contribute to accelerating the clinical development of mRNA LNPs for CF treatment through CRISPR/Cas gene correction.},
language = {en},
keywords = {Biomedical engineering, CRISPR-Cas9 genome editing, Gene delivery}
}
@article{IBRAHIM2022215,
title = {Polyethylene glycol (PEG): The nature, immunogenicity, and role in the hypersensitivity of PEGylated products},
author = {Mohamed Ibrahim and Eslam Ramadan and Nehal E. Elsadek and Sherif E. Emam and Taro Shimizu and Hidenori Ando and Yu Ishima and Omar Helmy Elgarhy and Hatem A. Sarhan and Amal K. Hussein and Tatsuhiro Ishida},
year = 2022,
journal = {Journal of Controlled Release},
volume = 351,
pages = {215--230},
doi = {https://doi.org/10.1016/j.jconrel.2022.09.031},
issn = {0168-3659},
url = {https://www.sciencedirect.com/science/article/pii/S0168365922006265},
keywords = {Polyethylene glycol (PEG), anti-PEG antibodies, Hypersensitivity, COVID-19 mRNA vaccines, complement activation-related pseudoallergy (CARPA)},
abstract = {Polyethylene glycol (PEG) is a versatile polymer that is widely used as an additive in foods and cosmetics, and as a carrier in PEGylated therapeutics. Even though PEG is thought to be less immunogenic, or perhaps even non-immunogenic, with a variety of physicochemical properties, there is mounting evidence that PEG causes immunogenic responses when conjugated with other materials such as proteins and nanocarriers. Under these conditions, PEG with other materials can result in the production of anti-PEG antibodies after administration. The antibodies that are induced seem to have a deleterious impact on the therapeutic efficacy of subsequently administered PEGylated formulations. In addition, hypersensitivity to PEGylated formulations could be a significant barrier to the utility of PEGylated products. Several reports have linked the presence of anti-PEG antibodies to incidences of complement activation-related pseudoallergy (CARPA) following the administration of PEGylated formulations. The use of COVID-19 mRNA vaccines, which are composed mainly of PEGylated lipid nanoparticles (LNPs), has recently gained wide acceptance, although many cases of post-vaccination hypersensitivity have been documented. Therefore, our review focuses not only on the importance of PEGs and its great role in improving the therapeutic efficacy of various medications, but also on the hypersensitivity reactions attributed to the use of PEGylated products that include PEG-based mRNA COVID-19 vaccines.}
}
@article{jiang_combinatorial_2024,
title = {Combinatorial development of nebulized {mRNA} delivery formulations for the lungs},
author = {Jiang, Allen Y. and Witten, Jacob and Raji, Idris O. and Eweje, Feyisayo and MacIsaac, Corina and Meng, Sabrina and Oladimeji, Favour A. and Hu, Yizong and Manan, Rajith S. and Langer, Robert and Anderson, Daniel G.},
year = 2024,
month = mar,
journal = {Nature Nanotechnology},
volume = 19,
number = 3,
pages = {364--375},
doi = {10.1038/s41565-023-01548-3},
issn = {1748-3387, 1748-3395},
url = {https://www.nature.com/articles/s41565-023-01548-3},
urldate = {2024-09-10},
language = {en}
}
@article{vila-gonzalez_vitro_2024,
title = {In vitro platform to model the function of ionocytes in the human airway epithelium},
author = {Vilà-González, Marta and Pinte, Laetitia and Fradique, Ricardo and Causa, Erika and Kool, Heleen and Rodrat, Mayuree and Morell, Carola Maria and Al-Thani, Maha and Porter, Linsey and Guo, Wenrui and Maeshima, Ruhina and Hart, Stephen L. and McCaughan, Frank and Granata, Alessandra and Sheppard, David N. and Floto, R. Andres and Rawlins, Emma L. and Cicuta, Pietro and Vallier, Ludovic},
year = 2024,
month = apr,
journal = {Respiratory Research},
volume = 25,
number = 1,
pages = 180,
doi = {10.1186/s12931-024-02800-7},
issn = {1465-993X},
url = {https://respiratory-research.biomedcentral.com/articles/10.1186/s12931-024-02800-7},
urldate = {2024-09-10},
abstract = {
Background Pulmonary ionocytes have been identified in the airway epithelium as a small population of ion transporting cells expressing high levels of CFTR (cystic fibrosis transmembrane conductance regulator), the gene mutated in cystic fibrosis. By providing an infinite source of airway epithelial cells (AECs), the use of human induced pluripotent stem cells (hiPSCs) could overcome some challenges of studying ionocytes. However, the production of AEC epithelia containing ionocytes from hiPSCs has proven difficult. Here, we present a platform to produce hiPSCderived AECs (hiPSC-AECs) including ionocytes and investigate their role in the airway epithelium.
Methods hiPSCs were differentiated into lung progenitors, which were expanded as 3D organoids and matured by air-liquid interface culture as polarised hiPSC-AEC epithelia. Using CRISPR/Cas9 technology, we generated a hiPSCs knockout (KO) for FOXI1, a transcription factor that is essential for ionocyte specification. Differences between FOXI1 KO hiPSC-AECs and their wild-type (WT) isogenic controls were investigated by assessing gene and protein expression, epithelial composition, cilia coverage and motility, pH and transepithelial barrier properties.
Results Mature hiPSC-AEC epithelia contained basal cells, secretory cells, ciliated cells with motile cilia, pulmonary neuroendocrine cells (PNECs) and ionocytes. There was no difference between FOXI1 WT and KO hiPSCs in terms of their capacity to differentiate into airway progenitors. However, FOXI1 KO led to mature hiPSC-AEC epithelia without ionocytes with reduced capacity to produce ciliated cells.
Conclusion Our results suggest that ionocytes could have role beyond transepithelial ion transport by regulating epithelial properties and homeostasis in the airway epithelium.
},
language = {en}
}
@book{book,
title = {Genome Editing and Biological Weapons: Assessing the Risk of Misuse},
author = {Paris, Katherine},
year = 2023,
month = {01},
pages = {},
doi = {10.1007/978-3-031-21820-0},
isbn = {978-3-031-21819-4}
}
@article{wickiser2020biosecurity,
title = {The democratization of biology: how CRISPR and synthetic biology usher in new biosecurity threats},
author = {Wickiser, Jason K., et al.},
year = 2020,
journal = {Defense Horizons},
volume = 85,
pages = {1--16},
url = {https://ndupress.ndu.edu/Media/News/News-Article-View/Article/2386026/democratization-of-biology-crispr-synthetic-biology-new-biosecurity-threats/}
}
@article{cohen2019security,
title = {Security implications of CRISPR-enabled genome editing: New weapons of mass disruption?},
author = {Cohen, Jon and Desai, Tej},
year = 2019,
journal = {Journal of Bioethical Inquiry},
publisher = {Springer},
volume = 16,
number = 2,
pages = {219--228},
doi = {10.1007/s11673-019-09914-5},
url = {https://doi.org/10.1007/s11673-019-09914-5}
}
@article{doudna2020synthetic,
title = {The rise of synthetic biology: New biosecurity risks and regulatory challenges},
author = {Doudna, Jennifer A. and Charpentier, Emmanuelle},
year = 2020,
journal = {Nature Reviews Genetics},
publisher = {Nature},
volume = 21,
number = 3,
pages = {144--156},
doi = {10.1038/s41576-019-0182-7},
url = {https://www.nature.com/articles/s41576-019-0182-7}
}
@article{shwartz2019public,
title = {Public perception of CRISPR and genome editing: Misconceptions and media portrayal},
author = {Shwartz, Mark and Conklin, Brian},
year = 2019,
journal = {Journal of Science Communication},
volume = 18,
number = 4,
pages = {A02},
doi = {10.22323/2.18040202},
url = {https://jcom.sissa.it/archive/18/04/JCOM_1804_2019_A02}
}
code/cit.py
View file @ 3fd292fd
......@@ -2,7 +2,7 @@
#- 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():
......@@ -64,27 +64,29 @@ def main():
en_x = library.entries[x]
print("Filling dictionary for entry "+ str(startnum+count) + "")
# Direkt auf die Einträge zugreifen, da es sich um ein Dictionary handelt
for key, value in en_x.items():
key_low = key.lower()
dictio[key_low] = value
# Überprüfung auf den Typ des Eintrags über 'ENTRYTYPE'
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:")
......@@ -94,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) + "...")
out.write("{/*<!-- Citation num " + str(x) + "--> */}" + "\n")
out.write("<li typeof=\"schema:ScolarlyArticle\" role=\"doc-biblioentry\" property=\"schema:citation\" id=\"desc-" + str(x) + "\">"+ "\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("--")
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("-")
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 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))
else:
print("Sorry, no page information")
problemlist.append("Check for missing page info at " + str (x))
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))
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))
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")
......@@ -188,6 +192,9 @@ def articleHTML(dictio, x, out):
out.write("</li>" + "\n"+ "\n")
def miscHTML(dictio, x, out):
print("Writing html code for entry "+ str(x) + "...")
out.write("{/*<!-- Citation num " + str(x) + "--> */}" + "\n")
......@@ -205,16 +212,29 @@ def miscHTML(dictio, x, out):
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: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']
out.write("\t" + "\t" +"<span property=\"schema:Name\"> " + aut + "</span>."+ "\n")
out.write("\t" +"</span>"+ "\n")
out.write("\t" + "<span property=\"schema:name\">&nbsp;"+dictio['title']+ ".</span>"+ "\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()
\ No newline at end of file
main()
code/output.txt deleted 100644 → 0
View file @ f16b822c
{/*<!-- 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"> Cloarec-Ung, F.</span>;
<span property="schema:Name"> Beaulieu, J.</span>;
<span property="schema:Name"> Suthananthan, A.</span>;
<span property="schema:Name"> Lehnertz, B.</span>;
<span property="schema:Name"> Sauvageau, G.</span>;
<span property="schema:Name"> Sheppard, H.</span>;
<span property="schema:Name"> Knapp, D.</span>
</span>
<span property="schema:name">&nbsp;Near-perfect precise on-target editing of human hematopoietic stem and progenitor cells. </span>
<i property="schema:publisher" typeof="schema:Organization"> eLife</i>
<b property="issueNumber" typeof="PublicationIssue"> 12</b>,&nbsp;
<span property="schema:pageBegin">RP91288</span>
(<time property="schema:datePublished" datatype="xsd:gYear" dateTime=" 2024">2024</time>).
<a className="doi" href="https://doi.org/10.7554/eLife.91288"> doi: 10.7554/eLife.91288</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">
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 @ f16b822c
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;
......@@ -75,7 +91,7 @@ html{
}
nav .scrolllink span{
color: white!important;
color: var(--ourbeige)!important;
}
.small-row{
......@@ -99,6 +115,10 @@ nav .scrolllink span{
width:16.66666667% !important;
}
sup a{
font-weight: bolder !important;
font-size: small !important;
}
.col-1{
width: 8.33333333% !important;
......@@ -110,7 +130,15 @@ nav .scrolllink span{
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;
}
......@@ -126,7 +154,7 @@ hr{
opacity: 1 !important;
height: 5px;
border-width: 3px !important;
margin-bottom: 10px !important;
margin-bottom: var(--simple-margin) !important;
}
/* * * * * * * */
......@@ -146,25 +174,25 @@ hr{
transform-origin: 0%;
}
body {
/* padding-top: 56px; */
background-color: var(--ourbeige);
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;
}
.our-h3{
margin-top: 20px !important;
margin-bottom: 5px !important;
margin-top: var(--simple-margin) !important;
margin-bottom: var(--simple-margin) !important;
}
.short-hr{
height: 1px !important;
......@@ -173,19 +201,19 @@ a {
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);
}
......@@ -196,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%;
......@@ -204,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{
......@@ -213,7 +241,7 @@ code{
}
.active-sideitem summary{
color: white;
color: var(--ourbeige);
}
.sidesubtab ul{
......@@ -222,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;}
......@@ -262,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{
......@@ -289,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 {
......@@ -308,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;
......@@ -331,7 +362,7 @@ table {
}
td, th {
border: 1px solid black;
border: 1px solid var(--offblack);
text-align: left;
padding: 8px;
}
......@@ -353,15 +384,18 @@ td, th {
max-width: 60px !important;
}
thead tr {
background-color: var(--text-primary) !important;
color: var(--background);
}
tbody tr:nth-child(even) {
background-color: #ededed;
}
tbody tr:nth-child(odd) {
background-color: #f3f3f3;
}
tbody tr:nth-child(1) {
background-color: var(--darkerbeige) ;
}
/* * * * * * * */
......@@ -391,13 +425,16 @@ margin-bottom: 10vw !important;
.bg-lb{
background-color: var(--lightblue) !important;
}
.bg-w{
background-color: white !important;
}
.bg-d{
background-color: var(--text-primary) !important;
color: white;
color: var(--ourbeige);
}
.bg-l{
background-color: var(--text-primary) !important;
color: white;
color: var(--ourbeige);
}
.bg-transp{
background:transparent;
......@@ -410,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;
......@@ -425,11 +461,6 @@ 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%;
......@@ -448,116 +479,26 @@ margin-bottom: 10vw !important;
min-height: 5vw;
margin-bottom: 20px !important;
}
.h2{
text-align:center;
text-transform:uppercase;
color: var(--text-primary) !important;
font-size: 3rem !important ;
letter-spacing: 1px;
display: grid;
grid-template-columns: 1fr auto 1fr;
grid-template-rows: 16px 0;
grid-gap: 22px;
height: auto;
}
.h2-box{
margin-top: 8vh !important;
margin-bottom: 8vh !important;
height: auto;
}
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;
*/}
.h3{
margin-bottom: 40px !important;
text-align: center;
font-size: 2.5rem !important ;
text-transform: uppercase;
padding-bottom: 5px;
color: var(--text-primary) !important;
margin-top: 5vh !important;
}
.h3:after {
width: 28px;
height: 7px;
display: block;
content: "";
position: relative;
bottom: -12px;
left: 50%;
margin-left: -14px;
background-color: var(--mediumpurple);
}
.h3:before {
width: 150px;
height: 1px;
display: block;
content: "";
position: relative;
margin-top: 25px;
left: 50%;
bottom: -65px;
margin-left: -75px;
background-color: var(--text-primary);
}
h2{
color: var(--text-primary) !important
}
.h2:after, .h2:before {
content: " ";
display: block;
border-bottom: 5px solid var(--text-primary);
background-color: var(--background);
bottom: -1rem !important;
position: relative;
}
.h4:after, .h4:before {
content: " ";
display: block;
border-bottom: 1px solid var(--mediumpurple);
border-top: 1px solid var(--mediumpurple);
height: 5px;
background-color:var(--background);
}
.h4{
margin-top: 5px;
color: var(--text-primary) !important;
margin-top: 30px !important ;
font-size:15px; color:#444;
word-spacing:1px;
font-weight:normal;
letter-spacing:2px;
text-transform: uppercase;
font-weight:500;
display: grid;
grid-template-columns: 1fr max-content 1fr;
grid-template-rows: 27px 0;
grid-gap: 20px;
align-items: center;
}
.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;
}
......@@ -577,7 +518,7 @@ h2{
background-image: linear-gradient(#a0aec0, #a0aec0);
}
.v3:hover p {
color: #000;
color: var(--offblack);
background-size: 0% 100%;
}
......@@ -638,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 * * */
......@@ -801,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;
}
......@@ -834,12 +717,22 @@ img .middle{
max-height: 70% !important;
}
.img-round{
border-radius: 50%;
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: 12vh;
max-width: 12vh;
max-height: 10vh;
max-width: 10vh;
object-fit: cover !important;
}
.img-cube{
......@@ -853,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;
......@@ -894,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;
......@@ -955,7 +849,7 @@ svg{
}
.spacer {
height: 50vh;
background-color: #000;
background-color: var(--offblack);
}
.hello:hover {
......@@ -968,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;
......@@ -1000,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;
......@@ -1085,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;
......@@ -1097,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 */
......@@ -1106,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;
}
......@@ -1134,7 +1036,7 @@ svg{
/*collapsible*/
.collapse-card {
margin-bottom: 20px;
margin-bottom: var(--big-padding) !important;
border-radius: 4px;
margin-top: 20px;
color: #333;
......@@ -1143,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 {
......@@ -1328,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;
......@@ -1347,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 {
......@@ -1403,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{
......@@ -1445,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);
}
......@@ -1543,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;
......@@ -1654,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
}
......@@ -1674,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
}
......@@ -1705,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;
......@@ -1771,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;
......@@ -2009,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;
}
......@@ -2023,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 {
......@@ -2120,7 +2027,6 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before {
}
.slick-slider .slick-track,
.slick-slider .slick-list
......@@ -2139,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
......@@ -2376,7 +2237,7 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before {
opacity: .75;
color: white;
color: var(--ourbeige);
-webkit-font-smoothing: antialiased;
......@@ -2598,7 +2459,7 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before {
opacity: .25;
color: black;
color: var(--offblack);
-webkit-font-smoothing: antialiased;
......@@ -2613,7 +2474,7 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before {
opacity: .75;
color: black;
color: var(--offblack);
}
......@@ -2629,19 +2490,13 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before {
.meditabs, .meditabs, .timelinecardtabs, .timelinepersontabs{
display: none;
}
.timelinepersontabs{
margin-bottom: var(--big-margin);
}
.timelinecardtabs{
max-width: 100% !important;
}
.tabbutton{
padding: 5px;
border-radius: 10px;
padding-left: 10px;
padding-right: 10px;
margin-left: 5px;
margin-right: 5px;
}
.blockquote-wrapper {
display: flex;
......@@ -2661,7 +2516,7 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before {
.blockquote .block-h2 {
font-style: italic;
position: relative; /* for pseudos */
color: black;
color: var(--offblack);
font-size: 2.8rem !important;
font-weight: normal;
line-height: 1;
......@@ -2709,7 +2564,7 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before {
/* Blockquote subheader */
.blockquote .block-h4{
position: relative;
color: black;
color: var(--offblack);
font-size: 1.3rem !important;
font-weight: 400;
line-height: 1.2;
......@@ -2726,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);
......@@ -2739,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);
......@@ -2778,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%;
......@@ -2792,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;
......@@ -2850,7 +2705,7 @@ span{
}
.react-flow__node-mindmap {
background: white;
background: var(--ourbeige);
border-radius: 2px;
border: 1px solid transparent;
padding: 2px 5px;
......@@ -3068,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);
......@@ -3108,148 +2943,50 @@ span{
}
/* ========================
BUTTON TWO
======================== */
.btn-two {
color: #fff;
transition: all 0.5s;
position: relative;
/*
========================
BUTTONS
========================
*/
button span {
margin: auto;
}
.btn-two span {
z-index: 2;
display: block;
position: absolute;
width: 100%;
height: 100%;
button {
margin-top: var(--simple-margin) !important;
margin-bottom: var(--simple-margin) !important;
border-radius: var(--border-radius) !important;
cursor: pointer;
text-align: center;
}
.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);
.btn1{
padding: var(--button-padding) var(--small-padding) !important;
}
.btn1:hover{
filter: brightness(0.7);
}
.btn-two::after {
.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-one::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: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;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
......@@ -3264,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;
......@@ -3287,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;
......@@ -3302,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;}
......@@ -3324,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;
......@@ -3433,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;
}
......@@ -3517,12 +3297,12 @@ a{
}
.active-sideitem {
background-color: var(--text-primary) !important;
color: white !important;
background: var(--ourgradient);
color: var(--ourbeige) !important;
border-radius: 5px;
display: block;
border-width: 5px;
border-color: #850F78;
border-color: var(--lightblue);
padding-right: 5px;
padding-left: 5px;
}
......@@ -3535,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){
......@@ -3668,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{
......@@ -3699,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{
......@@ -3713,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;
......@@ -3850,21 +3636,339 @@ height: min-content !important;
-webkit-text-stroke-color: var(--text-primary);
}
.h5-box{
display: grid;
.gif{
align-self: center;
display: inline;
}
.gif-wrapper{
display: flex;
align-items: center;
justify-content: center;
}
.h5{
color: var(--text-primary) !important;
font-size: 1.3rem !important;
line-height: 1.0;
word-spacing: 1px !important;
display: grid;
grid-template-rows: 27px 0;
grid-gap: 20px;
.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;
letter-spacing: 1px;
text-transform: uppercase;
}
/* .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;
}
\ No newline at end of file
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,15 @@ $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 {
......@@ -572,14 +573,14 @@ $shadow: #bc15aa;
max-width: 200px;
width: 70%;
margin: auto;
background: #fff;
background: var(--ourbeige);
padding: 10px;
border-style: solid;
border-width: 20px;
border-top-color: darken(#850F78, 0%);
border-right-color: darken(#850F78, 10%);
border-bottom-color: darken(#850F78, 0%);
border-left-color: darken(#850F78, 10%);
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);
}
......@@ -590,7 +591,7 @@ figure.snip1113 {
min-width: 220px;
max-width: 310px;
width: 80%;
background: #ffffff;
background: var(--ourbeige);
text-align: center;
}
......@@ -622,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"
......@@ -21,17 +21,17 @@ import { stringToSlug } from "../utils/stringToSlug.ts";
import { Villbuttonrow } from "../components/Buttons.tsx";
import "../utils/Highlight-functions.js";
import "./LoadingScreen.css";
import { useScroll, motion } from "framer-motion";
import "./calendar.css"
import { useLoading } from "../utils/LoadingContext.tsx";
const App = () => {
const { scrollYProgress } = useScroll({
offset: ["start start", "end end"],
});
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 =
......@@ -52,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");
......@@ -70,10 +70,6 @@ const App = () => {
{/* Navigation */}
<Navbar />
<motion.div
className="progress-bar"
style={{ scaleX: scrollYProgress }}
/>
{/* Header and PageContent */}
<Routes>
......@@ -83,17 +79,16 @@ const App = () => {
path={path}
element={
<>
<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>
......@@ -114,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
View file @ 3fd292fd
......@@ -10,7 +10,7 @@
#under-responsive, #under-responsibility, #under-reflection{
border-radius: 10px;
color: white;
color: var(--ourbeige) ;
}
#under-reflection div, #under-responsibility div, #under-responsive div{
......@@ -23,4 +23,62 @@
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: 700px;
width: 75vw;
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,17 +51,17 @@
.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;
......@@ -71,21 +72,21 @@ 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,188 +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 {
height: 250px;
min-height: 310%;
position: absolute;
left: calc(100% + 7px);
width: 350px;
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;
display: flex;
flex-direction: column;
position: relative;
margin: 40px 0;
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;
......@@ -286,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;
......@@ -296,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;
......@@ -316,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
View file @ 3fd292fd
......@@ -34,7 +34,7 @@
}
.month ul li {
color: white !important;
color: var(--ourbeige) !important;
font-size: 20px;
text-transform: uppercase;
letter-spacing: 3px;
......@@ -42,7 +42,7 @@
}
.prev a, .next a{
color: white !important;
color: var(--ourbeige) !important;
}
.month .prev {
float: left;
......@@ -88,7 +88,7 @@
.days li .active {
padding: 5px;
background: #1abc9c;
color: white !important
color: var(--ourbeige) !important
}
/* Add media queries for smaller screens */
......
src/App/mediarules.css
View file @ 3fd292fd
......@@ -27,14 +27,13 @@
align-items: center;
}
h1 {
font-size: 2rem;
}
.col-6 {
width: 100%; /* Full width on tablets */
}
.progress-bar{
display: none !important;
}
}
/*For Smartphones*/
......@@ -48,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;
......@@ -84,7 +257,8 @@
.bfh-slider{
width: 100em !important;
max-width: 250px !important;
}
}
.tag{
width: min-content !important;
}
......@@ -99,9 +273,6 @@
.winner{
font-size: x-large;
}
/*h3{
margin-bottom: 4vw !important;
}*/
.small-only{
display: block !important;
}
......@@ -128,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;
}
......@@ -141,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;
}
......@@ -170,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 */
......@@ -208,6 +393,13 @@ body {
}
/***description***/
.pie-chart-container {
width: 600px; /* Set the width of the container */
height: 600px; /* Set the height of the container */
position: relative;
margin: 0 auto; /* Center the chart */
}
@media screen and (max-width: 1300px){
.one-pdf-line{
......
src/components/.DS_Store 0 → 100644
View file @ 3fd292fd
File added
src/components/BFH-Timeline.tsx
View file @ 3fd292fd
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">
......@@ -41,11 +43,13 @@ export function BFHTimeline () {
csstag="talkonek"
vorname="Kristian"
nachname="Müller"
heading=""
text=""
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"}}>
Ask Sinan
<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>
......@@ -189,9 +193,14 @@ export function BFHTimeline () {
<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>
......@@ -317,8 +326,8 @@ 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>
......@@ -387,8 +396,14 @@ export function BFHTimeline () {
<div id="multimedia" style={{display: "none"}}>
<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>
......@@ -476,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
......@@ -94,13 +94,13 @@ export function Breathe(){
'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 style={{'fontSize' : '2.5em'}}>Take a moment to</p>
<p style={{'fontSize' : '2.5em'}}>deeply breathe in...</p>
<p id="breatht" style={{'fontSize' : '2.5em'}}>Take a moment to</p>
<p id="breatht" style={{'fontSize' : '2.5em'}}>deeply breathe in...</p>
<img style={{
'position': 'fixed',
'top': '20vh',
......@@ -111,13 +111,13 @@ export function Breathe(){
'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 style={{'fontSize' : '2.5em'}}>and deeply.</p>
<p style={{'fontSize' : '2.5em'}}>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',
......@@ -128,17 +128,17 @@ export function Breathe(){
'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 style={{'fontSize' : '2.5em'}}>You feel <strong>revitalized</strong></p>
<p style={{'fontSize' : '2.5em'}}>Your body and mind</p>
<p style={{'fontSize' : '2.5em'}}>become <strong>grounded</strong>.</p>
<p id="breatht" style={{'fontSize' : '2.5em'}}>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 style={{'fontSize' : '2.5em'}}>Now deeply breathe in</p>
<p style={{'fontSize' : '2.5em'}}>and hold your breath.</p>
<p id="breatht"style={{'fontSize' : '2.5em'}}>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',
......@@ -150,7 +150,7 @@ export function Breathe(){
'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 */}
......@@ -168,7 +168,7 @@ export function Breathe(){
'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={{
......@@ -179,10 +179,10 @@ export function Breathe(){
'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>
<p style={{'fontSize' : '2.5em'}}>Not everyone </p>
<p style={{'fontSize' : '2.5em'}}>can breathe freely.</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> */}
......@@ -196,13 +196,13 @@ export function Breathe(){
'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 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>
<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
......@@ -219,14 +219,14 @@ export function Breathe(){
'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 style={{'fontSize' : '2.5em'}}>texttexttext</p>
<p style={{'fontSize' : '2.5em'}}>texttexttext,</p>
<p style={{'fontSize' : '2.5em'}}>because breathing deeply is a</p>
<p style={{'fontSize' : '2.5em'}}><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>
</>
......