Edu Outrach Timeline als EIN Data Button

src/App/Timelines.css

@@ -155,9 +155,7 @@ button.tabbutton.Medical.active, .modulators.active, .inhalations.active{
   border-color: var(--offblack);
 }
 
-.colour-meta-tag{
-background-color: var(--igemlightgreen);
-}
+
 /* and buttons */
 button.tabbutton:nth-child(1), button.tabbutton:nth-child(6){
   background-color: white; /* soll whit ebleiben! */
@@ -178,8 +176,12 @@ button.tabbutton:nth-child(1), button.tabbutton:nth-child(6){
 .Industry, button.tabbutton:nth-child(5){
   background-color: var(--mediumpurple);
 }
-.Activist, .Milestone, .Education, .Outreach{
-  background-color: var(--igemlightgreen) !important;
+.Activist, .Milestone{
+  background-color: var(--igemmediumgreen) !important;
+}
+
+.Education, .Outreach{
+  background-color: var(--igemlightgreen);
 }
 
 .Ethics{

src/components/HP-timeline.tsx

 import { TabButtonRow } from "./Buttons";
-import TimeHori from "./HorizontalTimeline";
+import TimeHori, { CombiTimeHori } from "./HorizontalTimeline";
 import { BFHStyleTabs, ButtonRowTabs } from "./Tabs";
 import { timelinedata } from "../data/hptimelinedata";
 export function HPTimeline(){
@@ -47,11 +47,12 @@ export function HPTimeline(){
       buttonname: "Milestones", 
       cssname: "Milestone"
     },
- /*    { 
-      node: <TimeHori tab="Education" ></TimeHori>,
-      buttonname: "Education", 
+   { 
+      node: <CombiTimeHori tab1="Education" tab2="Outreach" ></CombiTimeHori>,
+      buttonname: "Education & Outreach", 
       cssname: "Education"
     },
+    /*
     { 
       node: <TimeHori tab="Outreach" ></TimeHori>,
       buttonname: "Outreach", 

src/components/HorizontalTimeline.tsx

@@ -47,12 +47,13 @@ function TimeItem({tag, title, pic, author, tabid, month}: ItemProps){
   }
   
   function TimeItemMeta({ tag, title, pic, author, tabid, month}: ItemProps){
+    let cl = "t-tag " + tag;
     return(
     <li className="timelineolli">
       <div className="timeline-item time-meta moretop">
         <div className="">
             <div className="row" style={{paddingLeft: "10px", paddingRight: "15px"}}>
-              <div className="col-6 t-tag colour-meta-tag">
+              <div className={`${cl} col-6 t-tag `}>
                   {tag}
               </div>
               <div className="col">
@@ -92,7 +93,52 @@ function TimeItem({tag, title, pic, author, tabid, month}: ItemProps){
     )
   }
   
- 
+  export function CombiTimeHori({tab1, tab2}:{tab1: string, tab2: string}){
+    let nod; 
+
+    
+      /* console.log("Tab") */
+      nod = getItemsByTypes(tab1, tab2);
+    
+    return(
+    <div>
+  <section className="timeline">
+  <ol className="timelineol">
+      {nod}
+    <li className="timelineolli"></li>
+  </ol>
+  
+  
+  </section>
+  </div>
+    )
+  
+  }
+ export function getItemsByTypes(tabid1: string, tabid2: string) {
+        let rows: JSX.Element[]  = []
+        for (let i = 0; i < timelinedata.length; i++) {
+            if (tabid1 === timelinedata[i].tag || tabid2 === timelinedata[i].tag) {
+              var name: string; 
+              if (timelinedata[i].title) {
+                name = timelinedata[i].title! + " " + timelinedata[i].vorname + " " +  timelinedata[i].nachnname;
+              }
+              else{
+                name =  timelinedata[i].vorname + " " +  timelinedata[i].nachnname;
+              }
+                rows.push(<TimeItem
+                  key={i}
+                  title={timelinedata[i].heading}
+                  pic={timelinedata[i].pictureurl}
+                  tag={timelinedata[i].tag}
+                  author={name}
+                  tabid={timelinedata[i].interviewtabid} 
+                  month={timelinedata[i].months}  >
+                    {timelinedata[i].cardtext}
+                </TimeItem>)
+            }
+        }
+        return rows; 
+    }
   
   export default function TimeHori({tab}:{tab: string}){
     let nod;