diff --git a/src/App/App.css b/src/App/App.css
index a3fdd2d7a8917b379259d9b7adad75f43d8f97db..54fe708d193887a566c2916df2ac8837a139c664 100644
--- a/src/App/App.css
+++ b/src/App/App.css
@@ -422,6 +422,8 @@ img .middle{
.img-sponsor{
max-width: 70%;
max-height: 150px;
+ margin-left: auto;
+ margin-right: auto;
}
.img-right{
float: right !important;
@@ -1854,4 +1856,565 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before {
.noshow{
display: none;
}
-
\ No newline at end of file
+
+
+ /* SLICK */
+
+ /* .slider-container{
+ display: grid;
+ align-items: center;
+ } */
+ .slick-slider
+
+{
+
+ position: relative;
+
+
+ display: flex;
+
+ box-sizing: border-box;
+ align-items: center !important;
+
+}
+
+
+.slick-list
+
+{
+
+ position: relative;
+
+
+ display: block;
+
+ overflow: hidden;
+
+
+ margin: 0;
+
+ padding: 0;
+
+}
+
+.slick-list:focus
+
+{
+
+ outline: none;
+
+}
+
+.slick-list.dragging
+
+{
+
+ cursor: pointer;
+
+ cursor: hand;
+
+}
+
+
+.slick-slider .slick-track,
+
+.slick-slider .slick-list
+
+{
+
+ -webkit-transform: translate3d(0, 0, 0);
+
+ -moz-transform: translate3d(0, 0, 0);
+
+ -ms-transform: translate3d(0, 0, 0);
+
+ -o-transform: translate3d(0, 0, 0);
+
+ transform: translate3d(0, 0, 0);
+
+}
+
+
+.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
+
+{
+
+ display: none;
+
+ float: left;
+
+
+ height: 100%;
+
+ min-height: 1px;
+
+}
+
+[dir='rtl'] .slick-slide
+
+{
+
+ float: right;
+
+}
+
+.slick-slide img
+
+{
+
+ display: inline;
+
+}
+
+.slick-slide.slick-loading img
+
+{
+
+ display: none;
+
+}
+
+.slick-slide.dragging img
+
+{
+
+ pointer-events: none;
+
+}
+
+.slick-initialized .slick-slide
+
+{
+
+ display: block;
+
+}
+
+.slick-loading .slick-slide
+
+{
+
+ visibility: hidden;
+
+}
+
+.slick-vertical .slick-slide
+
+{
+
+ display: block;
+
+
+ height: auto;
+
+
+ border: 1px solid transparent;
+
+}
+
+.slick-arrow.slick-hidden {
+
+ display: none;
+
+}
+
+/* Arrows */
+
+.slick-prev,
+
+.slick-next
+
+{
+
+ font-size: 0;
+
+ line-height: 0;
+
+
+ position: absolute;
+
+ top: 50%;
+
+
+ display: block;
+
+
+ width: 20px;
+
+ height: 20px;
+
+ padding: 0;
+
+ -webkit-transform: translate(0, -50%);
+
+ -ms-transform: translate(0, -50%);
+
+ transform: translate(0, -50%);
+
+
+ cursor: pointer;
+
+
+ color: transparent;
+
+ border: none;
+
+ outline: none;
+
+ background: transparent;
+
+}
+
+.slick-prev:hover,
+
+.slick-prev:focus,
+
+.slick-next:hover,
+
+.slick-next:focus
+
+{
+
+ color: transparent;
+
+ outline: none;
+
+ background: transparent;
+
+}
+
+.slick-prev:hover:before,
+
+.slick-prev:focus:before,
+
+.slick-next:hover:before,
+
+.slick-next:focus:before
+
+{
+
+ opacity: 1;
+
+}
+
+.slick-prev.slick-disabled:before,
+
+.slick-next.slick-disabled:before
+
+{
+
+ opacity: .25;
+
+}
+
+
+.slick-prev:before,
+
+.slick-next:before
+
+{
+
+ font-family: 'slick';
+
+ font-size: 20px;
+
+ line-height: 1;
+
+
+ opacity: .75;
+
+ color: white;
+
+
+ -webkit-font-smoothing: antialiased;
+
+ -moz-osx-font-smoothing: grayscale;
+
+}
+
+
+.slick-prev
+
+{
+
+ left: -25px;
+
+}
+
+[dir='rtl'] .slick-prev
+
+{
+
+ right: -25px;
+
+ left: auto;
+
+}
+
+.slick-prev:before
+
+{
+
+ content: 'â†';
+
+}
+
+[dir='rtl'] .slick-prev:before
+
+{
+
+ content: '→';
+
+}
+
+
+.slick-next
+
+{
+
+ right: -25px;
+
+}
+
+[dir='rtl'] .slick-next
+
+{
+
+ right: auto;
+
+ left: -25px;
+
+}
+
+.slick-next:before
+
+{
+
+ content: '→';
+
+}
+
+[dir='rtl'] .slick-next:before
+
+{
+
+ content: 'â†';
+
+}
+
+
+/* Dots */
+
+.slick-dotted.slick-slider
+
+{
+
+ margin-bottom: 30px;
+
+}
+
+
+.slick-dots
+
+{
+
+ position: absolute;
+
+ bottom: -25px;
+
+
+ display: block;
+
+
+ width: 100%;
+
+ padding: 0;
+
+ margin: 0;
+
+
+ list-style: none;
+
+
+ text-align: center;
+
+}
+
+.slick-dots li
+
+{
+
+ position: relative;
+
+
+ display: inline-block;
+
+
+ width: 20px;
+
+ height: 20px;
+
+ margin: 0 5px;
+
+ padding: 0;
+
+
+ cursor: pointer;
+
+}
+
+.slick-dots li button
+
+{
+
+ font-size: 0;
+
+ line-height: 0;
+
+
+ display: block;
+
+
+ width: 20px;
+
+ height: 20px;
+
+ padding: 5px;
+
+
+ cursor: pointer;
+
+
+ color: transparent;
+
+ border: 0;
+
+ outline: none;
+
+ background: transparent;
+
+}
+
+.slick-dots li button:hover,
+
+.slick-dots li button:focus
+
+{
+
+ outline: none;
+
+}
+
+.slick-dots li button:hover:before,
+
+.slick-dots li button:focus:before
+
+{
+
+ opacity: 1;
+
+}
+
+.slick-dots li button:before
+
+{
+
+ font-family: 'slick';
+
+ font-size: 6px;
+
+ line-height: 20px;
+
+
+ position: absolute;
+
+ top: 0;
+
+ left: 0;
+
+
+ width: 20px;
+
+ height: 20px;
+
+
+ content: '•';
+
+ text-align: center;
+
+
+ opacity: .25;
+
+ color: black;
+
+
+ -webkit-font-smoothing: antialiased;
+
+ -moz-osx-font-smoothing: grayscale;
+
+}
+
+.slick-dots li.slick-active button:before
+
+{
+
+ opacity: .75;
+
+ color: black;
+
+}
+
+
+.sponsor-container{
+ align-items: center !important;
+ display: flex !important;
+}
\ No newline at end of file
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 94184a791fe2b7c9bcb03555088f96b7451de34d..d5e2fcedab6fc1231ab6ba96a9a93564c60976a5 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -1,5 +1,5 @@
import { stringToSlug } from "../utils";
-import Slider from "react-slick";
+import SimpleSlider from "./slider";
export function Footer() {
const teamYear = import.meta.env.VITE_TEAM_YEAR;
@@ -61,43 +61,41 @@ export function Footer() {
</div>
</div>
<div className="col-4">
- <Slider>
- <a href="https://www.plasmidfactory.com/">
+ <SimpleSlider>
+ <a className="sponsor-container" href="https://www.plasmidfactory.com/">
<img className="img-sponsor" src="https://static.igem.wiki/teams/5247/sponsors/plasmidfactory.png"/>
</a>
- <a href="http://www.zeiss.de/naturwissenschaften">
+ <a className="sponsor-container" href="http://www.zeiss.de/naturwissenschaften">
<img className="img-sponsor" src="https://static.igem.wiki/teams/5247/sponsors/zeiss.png" />
</a>
- <a href="https://www.jenabioscience.com/">
+ <a className="sponsor-container" href="https://www.jenabioscience.com/">
<img className="img-sponsor" src="https://static.igem.wiki/teams/5247/sponsors/jbs-dunkelgruen-text.png"/>
</a>
- <a href="https://www.gip.com/home/">
+ <a className="sponsor-container" href="https://www.gip.com/home/">
<img className="img-sponsor" src="https://static.igem.wiki/teams/5247/sponsors/gip.png" />
</a>
- <a href="https://www.integra-biosciences.com">
+ <a className="sponsor-container" href="https://www.integra-biosciences.com">
<img className="img-sponsor" src="https://static.igem.wiki/teams/5247/sponsors/integra-hinterlegt.jpeg" />
</a>
- <a href="https://www.uni-bielefeld.de/">
+ <a className="sponsor-container" href="https://www.uni-bielefeld.de/">
<img className="img-sponsor" src="https://static.igem.wiki/teams/5247/logos-team/uni-bielefeld-dunkel.png"/>
</a>
- <a href="www.snapgene.com">
+ <a className="sponsor-container" href="www.snapgene.com">
<img className="img-sponsor" src="https://static.igem.wiki/teams/5247/sponsors/snapgene.png"/>
</a>
- <a href="www.promega.com">
+ <a className="sponsor-container" href="www.promega.com">
<img className="img-sponsor" src="https://static.igem.wiki/teams/5247/sponsors/promega-gelb.png"/>
</a>
- <a href="https://www.carlroth.de/">
+ <a className="sponsor-container" href="https://www.carlroth.de/">
<img className="img-sponsor" src="https://static.igem.wiki/teams/5247/sponsors/roth.jpg"/>
- </a>
- <a href="https://bts-ev.de/">
- <img className="img-sponsor" src="https://static.igem.wiki/teams/5247/sponsors/bts.png"/>
- </a>
- <div>
- <a href="https://www.uni-bielefeld.de/fakultaeten/technische-fakultaet/arbeitsgruppen/multiscale-bioengineering/campusbrauerei/">
+ </a>
+ <a className="sponsor-container" href="https://bts-ev.de/">
+ <img className="img-sponsor" src="https://static.igem.wiki/teams/5247/sponsors/bts.png"/>
+ </a>
+ <a className="sponsor-container" href="https://www.uni-bielefeld.de/fakultaeten/technische-fakultaet/arbeitsgruppen/multiscale-bioengineering/campusbrauerei/">
<img className="img-sponsor" src="https://static.igem.wiki/teams/5247/sponsors/campus-brauerei-hinterlegt.jpeg"/>
</a>
- </div>
- </Slider>
+ </SimpleSlider>
</div>
<div className="col-4">
<div className="row align-items-center">
diff --git a/src/components/seclarations.ts b/src/components/seclarations.ts
index 5b16d0c14aaf87169005a7ea6d96b5470e4a0683..2da863ce50c2d2328a243db56da2a3b33e73c076 100644
--- a/src/components/seclarations.ts
+++ b/src/components/seclarations.ts
@@ -6,6 +6,7 @@ export * from './Sidebar.tsx';
export * from './AOSs.tsx'
export * from './My-Timeline.tsx'
export * from './data/mapscr.ts'
+export * from "./slider.tsx"
/* export * from './data/humanpractice.ts'; */
declare global{
diff --git a/src/components/slider.tsx b/src/components/slider.tsx
index bcb1f0ec9cc524b4fa6b13b41464a27edfdaf87e..a0c8ee39a61eb2e3979a3f7d1abd22d3b3fe6c9f 100644
--- a/src/components/slider.tsx
+++ b/src/components/slider.tsx
@@ -1,6 +1,10 @@
+import React from "react";
import Slider from "react-slick";
-export default function SimpleSlider(children: React.ReactNode) {
+interface SliderProps {
+ children: React.ReactNode;
+}
+export default function SimpleSlider({children}: SliderProps) {
var settings = {
dots: true,
infinite: true,
@@ -9,8 +13,11 @@ export default function SimpleSlider(children: React.ReactNode) {
slidesToScroll: 1,
};
return (
- <Slider {...settings}>
+ <div className="slider-container">
+ <Slider {...settings}>
{children}
- </Slider>
+ </Slider>
+ </div>
+
);
}
\ No newline at end of file