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
Expand all Hide whitespace changes
Inline Side-by-side
Showing
with 6222 additions and 91 deletions
src/App/mediarules.css 0 → 100644
View file @ 3fd292fd
/* * * * * * * */
/* MEDIA RULES */
/* * * * * * * */
/*For tablet or bigger*/
@media screen and (min-width: 992px) {
/* navbar opens on hover*/
.dropdown:hover .dropdown-menu {
display: block;
}
}
/*For Tablet and smaller*/
@media screen and (max-width: 992px){
.two-pdf-line{
max-height: 650px !important;
height: 26vh !important;
max-width: 50vw !important;
}
.seperator-2{
width: 1px !important;
}
.boxy-1{
margin-top: 10px !important;
}
.navbar {
flex-direction: column;
align-items: center;
}
.col-6 {
width: 100%; /* Full width on tablets */
}
.progress-bar{
display: none !important;
}
}
/*For Smartphones*/
/*12pro*/
@media screen and (max-width: 600px){
.lnp:hover > img{
display: block;
margin-left: none;
margin-right: none;
width: 8rem !important;
max-width: 100% !important;
}
.col-6 {
width: 100% ;
}
.container-fluid {
min-height: 100vh;
}
/***heading***/
.header-title{
min-height: 400px;
text-align: center;
align-items: center;
margin: auto !important;
padding: 0 30px;
font-size: 130px;
font-weight: 900;
line-height: 130px;
}
.header-container{
padding-top: 170px !important;
padding-bottom: 0px !important;
background-color: var(--ourbeige);
}
.base {
width: 100%;
background-color: var(--lightblue);
padding: 0px;
}
/***footer***/
footer {
width: 100% !important;
box-sizing: border-box !important;
padding: 15px !important;
}
.col {
width: 100% !important;
margin-bottom: 20px;
}
.col-sm-4, .col-sm-8, .col-6 {
width: 100%;
}
footer a, footer p {
font-size: 14px;
line-height: 1.4;
}
footer .socials {
display: flex;
justify-content: center !important;
margin-bottom: 10px;
}
.contact-info {
font-size: 14px;
text-align: center;
}
.img-sponsor {
width: 100px;
height: auto;
margin: 0 auto;
}
.footer-slider {
width: 100%;
margin-top: 20px;
}
footer a {
word-wrap: break-word;
overflow-wrap: break-word;
}
hr {
margin: 20px 0;
}
/***gif***/
.CFTR-gif {
width: 1000px !important;
max-width: 100%;
height: auto;
}
/***home***/
#breatht {
font-size: 1.5em !important; /* Adjust font size for smaller screens */
text-align: left; /* Optional: center text for mobile */
}
#breathf {
left: 48vw !important;
width: 65vw !important;
}
/*#breatht1 {
left: 0 !important;
position:initial!important;
font-size: 0.5em !important;
}*/
img[src*="200k-anim-transparent-bg.gif"] {
width: 100%;
height: auto;
}
/***Biosafty***/
#safehead {
background-size: contain; /* Adjust the image to fit within the container */
background-position: center 25%; /* Push the image down for better visibility */
height: 10px; /* Adjust the height for mobile screens */
}
/***contribution***/
.timeline-item{
padding-right: 0px !important;
padding-left: 5%;
width: 50% !important;
box-sizing: content-box;
text-align: left !important;
}
.timeline-item:nth-child(odd) {
align-self: flex-end !important;
justify-content: flex-start;
padding-left: 30px;
padding-right: 0;
}
figure.snipp1113{
min-width: 0px !important ;
max-width: 120px ;
width: 100% ;
margin-left: 80px;
}
.timeline-item-content{
text-align:initial !important;
align-items: flex-end ;
padding-left: 30px;
font-display: initial !important;
display: flex;
position: inherit;
}
.timeline-item-content .tag{
padding: 0px !important;
}
/***engineering***/
.col-2{
width: 50% !important;
}
/***Description***/
.pie-chart-container-small {
width: 300px !important; /* Make smaller for mobile */
height: 300px !important; /* Adjust height accordingly */
}
.quiz-wrapper {
flex-direction: column;
padding: 10px;
width: 100% !important; /* Set width to 100% for mobile screens */
}
.quiz-front, .quiz-back {
padding: 10px !important;
}
.quiz-heading {
font-size: 1.2em;
}
.quiz-text {
font-size: 1em;
margin-bottom: 10px !important;
word-wrap: break-word; /* Keep word breaking for mobile */
}
.quiz-button-box {
margin-top: 5px !important;
justify-content: space-evenly;
}
.row-if-small{
--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;
}
.col-4, .col-3{
margin-top: 10px !important;
margin-bottom: 10px !important;
}
.full-small{
width: 100% !important;
max-height: 100% !important;
}
.max400{
max-width: 100% !important;
max-height: 100% !important;
}
.panel-talk-gallery div img{
max-width: 100% !important;
}
.panel-talk-gallery .col, .panel-talk-gallery .col:nth-child(5),
.panel-talk-gallery .col:nth-child(1), .panel-talk-gallery .col:nth-child(2),
.panel-talk-gallery .col:nth-child(3), .panel-talk-gallery .col:nth-child(4){
margin-top: 20px !important;
}
.bfh-slider{
width: 100em !important;
max-width: 250px !important;
}
.tag{
width: min-content !important;
}
.timeline-item-content time{
width: fit-content !important;
margin-top: 0 !important;
max-width: 10em !important;
}
.picture-frame{
margin-bottom: 20px !important;
}
.winner{
font-size: x-large;
}
.small-only{
display: block !important;
}
.small-none{
display: none !important;
}
.bfh-menu{
max-width: 50vw !important;
}
.two-pdf-line{
max-height: 650px !important;
height: 26vh !important;
width: 65vw !important;
max-width: 60vw !important;
margin: auto;
}
svg text{
font-size: 5vw !important;
stroke-width:1px !important;
}
.village-style-button h3{
display: none !important;
}
.village-style-button{
box-shadow: 1px 1px 1px gray;
border-radius: 10px;
border-color: var(--offblack);
padding: 10px;
}
.village-style-button:hover{
box-shadow: none;
}
.village-style-button img{
max-width: 90%;
max-height: 90%;
padding-top: 10px;
padding-bottom: 5px;
}
.bigtitle {
width: 450px !important;
height: 200px !important;
word-wrap: break-word;
}
.framecycletab{
margin-left: 0 !important;
}
body {
/* padding: 10px !important; */
width: 202% !important;
overflow-x: hidden ; /* Prevents horizontal scrolling */
margin: 0;
padding: 0;
background-size: cover !important; /* Ensures the background scales to cover the entire screen */
background-position: center !important; /* Keeps the background centered */
background-repeat: no-repeat;
}
.img-half{
max-width: 100% !important;
height: auto !important;
}
/*.container {
padding: 10px;
}*/
.row{
display: grid !important;
}
.full-col-phone{
width: 100vw !important;
}
}
/*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 */
@media only screen and (min-width: 1600px){
.two-pdf-line{
max-height: 50vw !important;
height: 50vh !important;
}
}
/*Bigger than smartphones*/
@media only screen and (min-width: 768px) {
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}
/***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{
height: 115vw !important;
}
}
\ No newline at end of file
src/Ideas.sx 0 → 100644
View file @ 3fd292fd
<div className="gall">
<img src="https://picsum.photos/id/1040/300/300" alt="a house on a mountain"/>
<img src="https://picsum.photos/id/106/300/300" alt="sime pink flowers"/>
<img src="https://picsum.photos/id/136/300/300" alt="big rocks with some trees"/>
<img src="https://picsum.photos/id/1039/300/300" alt="a waterfall, a lot of tree and a great view from the sky"/>
<img src="https://picsum.photos/id/110/300/300" alt="a cool landscape"/>
<img src="https://picsum.photos/id/1047/300/300" alt="inside a town between two big buildings"/>
<img src="https://picsum.photos/id/1057/300/300" alt="a great view of the sea above the mountain"/>
<img src="https://picsum.photos/id/1047/300/300" alt="inside a town between two big buildings"/>
</div>
<div> Icons made by <a href="https://www.freepik.com" title="Freepik"> Freepik </a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com'</a></div>
<div> Icons made by <a href="https://www.freepik.com" title="Freepik"> Freepik </a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com'</a></div>
<a href="https://www.flaticon.com/free-icons/download" title="download icons">Download icons created by Kiranshastry - Flaticon</a>
<div> Icons made by <a href="https://www.freepik.com" title="Freepik"> Freepik </a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com'</a></div>
componentDidMount() {
const script = document.createElement("script"); script.async = true; script.src = "https://some-scripturl.js"; this.div.appendChild(script); }
render() {
return (
<div className="App" ref={el => (this.div = el)}> <h1>Hello react</h1>
{/* Scr
<div style="min-height:374px"><script type="text/javascript" defer src="https://datawrapper.dwcdn.net/llngz/embed.js?v=1" charset="utf-8"></script><noscript><img src="https://datawrapper.dwcdn.net/llngz/full.png" alt="" /></noscript></div>
src/components/.DS_Store 0 → 100644
View file @ 3fd292fd
File added
src/components/AOSs.tsx 0 → 100644
View file @ 3fd292fd
import { useEffect } from "react";
import AOS from "aos";
export function AOStry(){
useEffect(() => {
AOS.init({
disable: "phone",
duration: 700,
easing: "ease-out-cubic",
});
}, []);
return(
<h1 data-aos="zoom-y-out">Sample heading</h1>
)
}
src/components/AirbuddyAnim.tsx 0 → 100644
View file @ 3fd292fd
import { useEffect, useRef, useState } from "react";
export function AirbuddyAnim(){
const [isVisible, setVisible] = useState(false);
const domRef = useRef(null)!;
useEffect(() => {
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => setVisible(entry.isIntersecting));
});
observer.observe(domRef.current!);
}, []);
const [isVisible2, setVisible2] = useState(false);
const domRef2 = useRef(null)!;
useEffect(() => {
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => setVisible2(entry.isIntersecting));
});
observer.observe(domRef2.current!);
}, []);
const [isVisible3, setVisible3] = useState(false);
const domRef3 = useRef(null)!;
useEffect(() => {
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => setVisible3(entry.isIntersecting));
});
observer.observe(domRef3.current!);
}, []);
const [isVisible4, setVisible4] = useState(false);
const domRef4 = useRef(null)!;
useEffect(() => {
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => setVisible4(entry.isIntersecting));
});
observer.observe(domRef4.current!);
}, []);
const [isVisible5, setVisible5] = useState(false);
const domRef5 = useRef(null)!;
useEffect(() => {
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => setVisible5(entry.isIntersecting));
});
observer.observe(domRef5.current!);
}, []);
const [isVisible6, setVisible6] = useState(false);
const domRef6 = useRef(null)!;
useEffect(() => {
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => setVisible6(entry.isIntersecting));
});
observer.observe(domRef6.current!);
}, []);
const [isVisible7, setVisible7] = useState(false);
const domRef7 = useRef(null)!;
useEffect(() => {
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => setVisible7(entry.isIntersecting));
});
observer.observe(domRef7.current!);
}, []);
const [isVisible8, setVisible8] = useState(false);
const domRef8 = useRef(null)!;
useEffect(() => {
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => setVisible8(entry.isIntersecting));
});
observer.observe(domRef8.current!);
}, []);
return (
<>
{/* One */}
<div
className='col'
style={{
'height': '100vh',
'transition': 'opacity 0.6s ease-out',
'opacity': `${isVisible ? '1' : '0'}`,
'visibility': `${isVisible ? 'visible' : 'hidden'}`}}
ref={domRef}>
<img
style={{
'position': 'fixed',
'top': '20vh',
'left': '20vw',
'width': '60vw',
'height': '60vh',
}}
src="https://static.igem.wiki/teams/5247/landing/airbuddy/airbuddy-0.webp">
</img>
</div>
{/* Two */}
<div
className='col'
style={{
'height': '100vh',
'transition': 'opacity 0.6s ease-out',
'opacity': `${isVisible2 ? '1' : '0'}`,
'visibility': `${isVisible2 ? 'visible' : 'hidden'}`}}
ref={domRef2}>
<img
style={{
'position': 'fixed',
'top': '20vh',
'left': '20vw',
'width': '60vw',
'height': '60vh',
}}
src="https://static.igem.wiki/teams/5247/landing/airbuddy/airbuddy-1.webp">
</img>
</div>
{/* Three */}
<div
className='col'
style={{
'height': '100vh',
'transition': 'opacity 0.6s ease-out',
'opacity': `${isVisible3 ? '1' : '0'}`,
'visibility': `${isVisible3 ? 'visible' : 'hidden'}`}}
ref={domRef3}>
<img
style={{
'position': 'fixed',
'top': '20vh',
'left': '20vw',
'width': '60vw',
'height': '60vh',
}}
src="https://static.igem.wiki/teams/5247/landing/airbuddy/airbuddy-2.webp">
</img>
</div>
{/* Four */}
<div
className='col'
style={{
'height': '100vh',
'transition': 'opacity 0.6s ease-out',
'opacity': `${isVisible4 ? '1' : '0'}`,
'visibility': `${isVisible4 ? 'visible' : 'hidden'}`}}
ref={domRef4}>
<img
style={{
'position': 'fixed',
'top': '20vh',
'left': '20vw',
'width': '60vw',
'height': '60vh',
}}
src="https://static.igem.wiki/teams/5247/landing/airbuddy/airbuddy-3.webp">
</img>
</div>
{/* Five */}
<div
className='col'
style={{
'height': '100vh',
'transition': 'opacity 0.6s ease-out',
'opacity': `${isVisible5 ? '1' : '0'}`,
'visibility': `${isVisible5 ? 'visible' : 'hidden'}`}}
ref={domRef5}>
<img
style={{
'position': 'fixed',
'top': '20vh',
'left': '20vw',
'width': '60vw',
'height': '60vh',
}}
src="https://static.igem.wiki/teams/5247/landing/airbuddy/airbuddy-4.webp">
</img>
</div>
{/* Six */}
<div
className='col'
style={{
'height': '100vh',
'transition': 'opacity 0.6s ease-out',
'opacity': `${isVisible6 ? '1' : '0'}`,
'visibility': `${isVisible6 ? 'visible' : 'hidden'}`}}
ref={domRef6}>
<img
style={{
'position': 'fixed',
'top': '20vh',
'left': '20vw',
'width': '60vw',
'height': '60vh',
}}
src="https://static.igem.wiki/teams/5247/landing/airbuddy/airbuddy-5.webp">
</img>
</div>
{/* Seven */}
<div
className='col'
style={{
'height': '100vh',
'transition': 'opacity 0.6s ease-out',
'opacity': `${isVisible7 ? '1' : '0'}`,
'visibility': `${isVisible7 ? 'visible' : 'hidden'}`}}
ref={domRef7}>
<img
style={{
'position': 'fixed',
'top': '20vh',
'left': '20vw',
'width': '60vw',
'height': '60vh',
}}
src="https://static.igem.wiki/teams/5247/landing/airbuddy/airbuddy-6.webp">
</img>
</div>
{/* Eight */}
<div
className='col'
style={{
'height': '100vh',
'transition': 'opacity 0.6s ease-out',
'opacity': `${isVisible8 ? '1' : '0'}`,
'visibility': `${isVisible8 ? 'visible' : 'hidden'}`}}
ref={domRef8}>
<img
style={{
'position': 'fixed',
'top': '20vh',
'left': '20vw',
'width': '60vw',
'height': '60vh',
}}
src="https://static.igem.wiki/teams/5247/landing/airbuddy/airbuddy-7.webp">
</img>
</div>
</>
);
}
\ No newline at end of file
src/components/BFH-Timeline.tsx 0 → 100644
View file @ 3fd292fd
This diff is collapsed.
src/components/Boxes.tsx 0 → 100644
View file @ 3fd292fd
This diff is collapsed.
src/components/Breathe.tsx 0 → 100644
View file @ 3fd292fd
This diff is collapsed.
src/components/Buttons.tsx 0 → 100644
View file @ 3fd292fd
This diff is collapsed.
src/components/Calendar/Calendar.tsx 0 → 100644
View file @ 3fd292fd
This diff is collapsed.
src/components/Calendar/cal-content.tsx 0 → 100644
View file @ 3fd292fd
This diff is collapsed.
src/components/Card.tsx deleted 100644 → 0
View file @ ea6fe661
This diff is collapsed.
src/components/Code.tsx 0 → 100644
View file @ 3fd292fd
This diff is collapsed.
src/components/Collapsible.tsx 0 → 100644
View file @ 3fd292fd
This diff is collapsed.
src/components/Complex-svg.tsx 0 → 100644
View file @ 3fd292fd
This diff is collapsed.
src/components/Diagram.tsx 0 → 100644
View file @ 3fd292fd
This diff is collapsed.
src/components/DownloadButton.tsx deleted 100644 → 0
View file @ ea6fe661
This diff is collapsed.
src/components/Event.tsx deleted 100644 → 0
View file @ ea6fe661
This diff is collapsed.
src/components/FadeIn.tsx 0 → 100644
View file @ 3fd292fd
This diff is collapsed.
src/components/Fanzorviewer.tsx 0 → 100644
View file @ 3fd292fd
This diff is collapsed.