education

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 {

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

src/contents/education.tsx

+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>
       </>
     );

src/contents/engineering.tsx

 
-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(

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';