Links öffnen nun in neuem Tab

src/components/Categories/Categories.tsx

@@ -3,7 +3,6 @@ import "./Categories.scss";
 import { url } from "../../variables";
 import { Link } from "react-router-dom";
 import ReactMarkdown from "react-markdown";
-import PartnerLink from "../PartnerLink/PartnerLink";
 import CategoryLink from "../CategoryLink/CategoryLink";
 
 function Categories() {

src/components/CategoryLink/CategoryLink.tsx

@@ -1,12 +1,12 @@
 import React from "react";
 import "./CategoryLink.scss";
-import { NavLink } from "react-router-dom";
 import Accordion from "@material-ui/core/Accordion";
 import AccordionSummary from "@material-ui/core/AccordionSummary";
 import AccordionDetails from "@material-ui/core/AccordionDetails";
 import Typography from "@material-ui/core/Typography";
 import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
 import ArrowForwardIcon from "@material-ui/icons/ArrowForward";
+import ReactMarkdown from "react-markdown";
 
 interface CategoryProps {
   title: string;
@@ -27,12 +27,14 @@ const CategoryLink: React.FC<CategoryProps> = (category) => {
           <Typography className="category-title">{category.title}</Typography>
         </AccordionSummary>
         <AccordionDetails className="acc-detail">
-          <Typography className="category-text">{category.content}</Typography>
+          <div className="category-text">
+            <ReactMarkdown>{category.content}</ReactMarkdown>
+          </div>
           <button
             className="category-button"
             onClick={(e) => {
               e.preventDefault();
-              window.location.href = category.url;
+              window.open(`${category.url}`, "_blank");
             }}
           >
             <span>Zur Datenquelle</span> <ArrowForwardIcon />

src/components/Main/Main.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from "react";
 import { url } from "../../variables";
 import "./Main.scss";
 import mainImage from "../../assets/img/AnordnungKarten.png";
-import { Link, NavLink } from "react-router-dom";
+import { Link } from "react-router-dom";
 import ReactMarkdown from "react-markdown";
 
 function Main() {

src/components/PartnerLink/PartnerLink.tsx

@@ -9,7 +9,9 @@ interface PartnerProps {
 const PartnerLink: React.FC<PartnerProps> = (partner) => {
   return (
     <div className="PartnerLink">
-      <a href={partner.url}>{partner.name}</a>
+      <a target="_blank" rel="noopener noreferrer" href={partner.url}>
+        {partner.name}
+      </a>
     </div>
   );
 };

src/components/Partners/Partners.tsx

@@ -1,7 +1,7 @@
 import React, { ReactElement, useEffect, useState } from "react";
 import "./Partners.scss";
 import { url } from "../../variables";
-import { Link, NavLink } from "react-router-dom";
+import { Link } from "react-router-dom";
 import ReactMarkdown from "react-markdown";
 import PartnerLink from "../PartnerLink/PartnerLink";
 

src/components/navigation/Navigation.scss

@@ -18,16 +18,24 @@
     flex-direction: row;
     align-items: center;
 
+
     .logo-container {
       height: 95%;
       .logo {
         height: 100%;
       }
     }
+
+    a{
+      text-decoration: none;
+    }
+
     span {
       margin-left: 1rem;
       color: white;
+      font-family: "bereit", sans-serif;
       font-size: 2rem;
+
       @media screen and (min-width: 750px) {
         margin-left: 2rem;
       }
@@ -37,7 +45,7 @@
   .link-container {
     font-family: "PT Sans", sans-serif;
     font-weight: bolder;
-    border-bottom: 2px solid #ffffff;
+    font-size: 1.2rem;
 
     @media screen and (max-width: 850px) {
       display: none;
@@ -49,7 +57,6 @@
     a {
       margin-left: 2rem;
       color: white;
-      font-size: 1.5rem;
       text-decoration: none;
 
       &:hover {

src/components/navigation/Navigation.tsx

@@ -26,7 +26,9 @@ function MobileNav() {
             <img className="logo" src={greenLogo} alt="green" />
           </NavLink>
         </div>
-        <span>Grünes Quartett</span>
+        <NavLink to={"/"}>
+          <span>Grünes Quartett</span>
+        </NavLink>
       </div>
       <div className="link-container">
         <NavLink exact to={"/"}>

src/index.scss

@@ -12,7 +12,7 @@
 
 body {
   margin: 0;
-  font-family: "bereit", sans-serif;
+  font-family: "PT Sans", sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }