diff --git a/src/App/App.css b/src/App/App.css
index bd3124b5dcaf4753eb1bc1c096531de9ab7208c1..dacaeb0241e20fed709b00505b9cddb55f176040 100644
--- a/src/App/App.css
+++ b/src/App/App.css
@@ -291,8 +291,8 @@ h2{
background-clip: text !important;
color: transparent !important;
padding-top: 15px !important;
- background-image: repeating-linear-gradient(-45deg, var(--text-primary) 0, var(--text-primary) 2px, white 2px, white 4px) !important;
-}
+ /* background-image: repeating-linear-gradient(-45deg, var(--text-primary) 0, var(--text-primary) 2px, white 2px, white 4px) !important;
+ */}
.underline--magical {
background-image: linear-gradient(120deg, var(--lightblue) 0%, var(--mediumpurple) 100%);
@@ -3197,13 +3197,16 @@ div[class*="boxy"] {
}
.boxy-1 {
- background-color: #ff6766;
+ background-color: var(--text-primary);
+ max-width: fit-content;
}
.boxy-2 {
- background-color: #3c3c3c;
+ background-color: var(--text-primary);
+ max-width: fit-content;
}
.boxy-3 {
- background-color: #66a182;
+ background-color: var(--text-primary);
+ max-width: fit-content;
}
.btn-new {
diff --git a/src/components/Buttons.tsx b/src/components/Buttons.tsx
index a59b517946efbebad646e2177d2243e00828f1f9..cea387c4619cba6369ce89853c26e726811d31ca 100644
--- a/src/components/Buttons.tsx
+++ b/src/components/Buttons.tsx
@@ -175,19 +175,20 @@ export function ButtonThree(){
export function ButtonTwo(){
return(
<div className="boxy-2">
- <div className="btn-new btn-three">
+ <div className="btn-new btn-two">
<span typeof="button" onClick={openCity({cityName: "about"})}>HOVER ME</span>
</div>
</div>
)
}
-export function ButtonOne(){
+export function ButtonOne({text, open}: {text:string, open:string}){
return(
<div className="boxy-1">
- <div className="btn-new btn-three">
- <span typeof="button" onClick={openCity({cityName: "about"})}>HOVER ME</span>
- </div>
+ <span typeof="button" onClick={openIt({it: open})}>
+ <div className="btn-new btn-one">
+ {text}
+ </div></span>
</div>
)
}
@@ -221,3 +222,36 @@ export function ButtonFourRotate(){
}
+
+
+export function openIt({it}: {it: string}){
+ const openit = (event : React.MouseEvent<HTMLElement, MouseEvent>) => {
+ /* console.log(document.getElementById(it)) */
+ console.log(document.getElementById(it)?.className)
+ let tabcontent = document.getElementsByClassName("cycletab");
+ for (let i = 0; i < tabcontent.length; i++) {
+ (tabcontent[i] as HTMLElement).style.display = "none";
+ }
+ /* console.log(document.getElementById(it)!.style.display) */
+ document.getElementById(it)!.style.display = "block";
+
+ event.currentTarget.className += " active";
+ }
+ return openit;
+}
+
+export function openItTwo({it}: {it: string}){
+ const openit = (event : React.MouseEvent<HTMLElement, MouseEvent>) => {
+ /* console.log(document.getElementById(it)) */
+ console.log(document.getElementById(it)?.className)
+ let tabcontent = document.getElementsByClassName("col outreach");
+ for (let i = 0; i < tabcontent.length; i++) {
+ (tabcontent[i] as HTMLElement).style.display = "none";
+ }
+ /* console.log(document.getElementById(it)!.style.display) */
+ document.getElementById(it)!.style.display = "block";
+
+ event.currentTarget.className += " active";
+ }
+ return openit;
+}
\ No newline at end of file
diff --git a/src/contents/education.tsx b/src/contents/education.tsx
index 4c36fa311f12a67d0fd2adccff080a2bfaebd53b..f4c4f8f05658dc408779107871c429aa2b5512c5 100644
--- a/src/contents/education.tsx
+++ b/src/contents/education.tsx
@@ -1,17 +1,40 @@
+import { ButtonOne} from "../components/Buttons";
export function Education() {
return (
<>
- <div className="row">
+ <div className="row align-items-center" style={{marginTop: "5vh", marginBottom: "5vh"}}>
+ <div className="col">
+ <ButtonOne text="Overview" open="overview"></ButtonOne>
+ </div>
+ <div className="col">
+ <ButtonOne text="MukoMove" open="mukomove"></ButtonOne>
+ </div>
+ <div className="col">
+ <ButtonOne text="Teuto ruft!" open="teutoruft"></ButtonOne>
+ </div>
<div className="col">
- <h2>Wiki under construction!</h2>
- <hr/>
+ <ButtonOne text="Schüler*innen Akademie" open="akademie"></ButtonOne>
</div>
</div>
+ <div id="overview" className="cycletab" style={{display: "block"}}>
+ <h2>Our education and outreach</h2>
+
+ <h2>If not as a special prize - then why?</h2>
+ </div>
+ <div id="akademie" className="cycletab" style={{display: "none"}}>
+ <h2>Student academy on the topic of synthetic biology</h2>
+ </div>
+ <div id="teutoruft" className="cycletab" style={{display: "none"}}>
+ <h2>Educational city tour for young and old</h2>
+ </div>
+ <div id="mukomove" className="cycletab" style={{display: "none"}}>
+ <h2>Cystic fibrosis awareness month</h2>
+ </div>
<div className="row">
-
+
</div>
</>
);
diff --git a/src/contents/engineering.tsx b/src/contents/engineering.tsx
index d62958599a7984c8d537d57b82315aeae4ebe845..4945fc03e30d129f27d89ec4d038203ca0a17337 100644
--- a/src/contents/engineering.tsx
+++ b/src/contents/engineering.tsx
@@ -1,5 +1,5 @@
-import React from "react";
+import { openIt } from "../components/Buttons";
export function Engineering() {
@@ -57,21 +57,7 @@ export function Engineering() {
);
}
- function openIt({it}: {it: string}){
- const openit = (event : React.MouseEvent<HTMLElement, MouseEvent>) => {
- /* console.log(document.getElementById(it)) */
- console.log(document.getElementById(it)?.className)
- let tabcontent = document.getElementsByClassName("cycletab");
- for (let i = 0; i < tabcontent.length; i++) {
- (tabcontent[i] as HTMLElement).style.display = "none";
- }
- /* console.log(document.getElementById(it)!.style.display) */
- document.getElementById(it)!.style.display = "block";
-
- event.currentTarget.className += " active";
- }
- return openit;
- }
+
function EngineeringCycleTab(){
return(
diff --git a/src/contents/human-practices.tsx b/src/contents/human-practices.tsx
index 899ab0bf8f21d5b70f719e0b4867b11c55e6097c..c8113db6c8923c0b7b1e9daed78f2f729f6eca42 100644
--- a/src/contents/human-practices.tsx
+++ b/src/contents/human-practices.tsx
@@ -11,7 +11,7 @@
import { TimeHori } from "../components/HorizontalTimeline";
import { AllPopus } from "../components/HorizontalTimeline";
import { BFHStyleTabs, ButtonRowTabs } from "../components/Tabs";
-import { ButtonFourFill, TabButtonRow, openTab } from "../components/Buttons";
+import { TabButtonRow, openTab } from "../components/Buttons";
import { BlockQuoteB } from "../components/Quotes";
import { Box, Tab } from "@mui/material";
import {TabContext, TabList, TabPanel} from '@mui/lab';