Browse Source

Fixed Desktop and Mobile Layout

main
Philipp Lohner 10 months ago
parent
commit
4547d0e652
  1. BIN
      src/assets/img/greenClaim.png
  2. 104
      src/assets/img/greenClaim.svg
  3. 33
      src/components/Categories/Categories.scss
  4. 10
      src/components/Categories/Categories.tsx
  5. 28
      src/components/CategoryLink/CategoryLink.scss
  6. 13
      src/components/CategoryLink/CategoryLink.tsx
  7. 38
      src/components/Main/Main.scss
  8. 14
      src/components/Main/Main.tsx
  9. 29
      src/components/Partners/Partners.scss
  10. 11
      src/components/Partners/Partners.tsx
  11. 19
      src/components/footer/Footer.scss
  12. 2
      src/components/footer/Footer.tsx
  13. 3
      src/components/header/Header.scss
  14. 33
      src/components/navigation/Navigation.scss
  15. 17
      src/components/navigation/Navigation.tsx

BIN
src/assets/img/greenClaim.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 59 KiB

104
src/assets/img/greenClaim.svg

@ -0,0 +1,104 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 25.2.3, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
<!ENTITY ns_extend "http://ns.adobe.com/Extensibility/1.0/">
<!ENTITY ns_ai "http://ns.adobe.com/AdobeIllustrator/10.0/">
<!ENTITY ns_graphs "http://ns.adobe.com/Graphs/1.0/">
<!ENTITY ns_vars "http://ns.adobe.com/Variables/1.0/">
<!ENTITY ns_imrep "http://ns.adobe.com/ImageReplacement/1.0/">
<!ENTITY ns_sfw "http://ns.adobe.com/SaveForWeb/1.0/">
<!ENTITY ns_custom "http://ns.adobe.com/GenericCustomNamespace/1.0/">
<!ENTITY ns_adobe_xpath "http://ns.adobe.com/XPath/1.0/">
]>
<svg version="1.1" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 443.5 67.1"
style="enable-background:new 0 0 443.5 67.1;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FFE100;}
.st1{fill:#145F32;}
.st2{display:none;}
.st3{display:inline;}
.st4{fill:none;stroke:#E5007E;stroke-width:0.25;}
.st5{display:inline;fill:#E5007E;}
.st6{font-family:'BereitBold-Oblique';}
.st7{font-size:43.935px;}
.st8{display:inline;fill:#1D1D1B;}
.st9{display:inline;fill:#9EC764;}
</style>
<metadata>
<sfw xmlns="&ns_sfw;">
<slices></slices>
<sliceSourceBounds bottomLeftOrigin="true" height="16383" width="485" x="19" y="-8613"></sliceSourceBounds>
</sfw>
</metadata>
<g id="Ebene_1">
<polygon class="st0" points="11.7,1.8 440.7,1.8 430.6,65.6 1.6,65.6 "/>
<g>
<path class="st1" d="M35.6,12.5c6.9,0,10.2,3.2,9.3,9.3l-0.7,4.7c-0.4,2.9-1.6,4.8-4.5,6c2.7,1.3,3.5,3.4,3.1,6.5l-1,6.4
c-0.9,6.1-4.9,9.3-11.3,9.3H19.3l6.7-42.2H35.6z M34.4,38c0.3-1.5-0.4-2.2-1.5-2.2h-1.9L29,48H31c1.2,0,1.9-0.7,2.2-2.4L34.4,38z
M33.5,30.3c1.3,0,1.8-0.4,2.1-2.2l1-6.3c0.3-1.6-0.2-2.4-1.4-2.4h-1.7l-1.7,10.9H33.5z"/>
<path class="st1" d="M64.8,32.2l-1.4,9.1H52.6l-1,6.3c-0.2,1.5,0.3,2.2,1.4,2.2c1,0,1.5-0.6,1.7-1.8l0.6-3.8H63l-0.4,2.8
c-0.9,6-5,8.3-10.3,8.3c-5.4,0-9-2.5-7.9-9.4l2.4-14.6c1-6.1,4.8-8.4,10.2-8.4C62.3,22.8,65.8,25.3,64.8,32.2z M53.1,38.1h3.2
l1.2-7.6c0.2-1.5-0.3-2.2-1.4-2.2c-0.9,0-1.5,0.6-1.7,1.8L53.1,38.1z"/>
<path class="st1" d="M76.1,27.5c1.5-3.2,3.9-4.8,6.9-4.5l-1.2,7.2c-4.2-0.5-6.3,1-7,5.2l-3,19.2h-7.6l5-31.3h7.6L76.1,27.5z"/>
<path class="st1" d="M101.6,32.2l-1.4,9.1H89.4l-1,6.3c-0.2,1.5,0.3,2.2,1.4,2.2c1,0,1.5-0.6,1.7-1.8l0.6-3.8h7.6l-0.4,2.8
c-0.9,6-5,8.3-10.3,8.3c-5.4,0-9-2.5-7.9-9.4l2.4-14.6c1-6.1,4.8-8.4,10.2-8.4C99.1,22.8,102.7,25.3,101.6,32.2z M89.9,38.1h3.2
l1.2-7.6c0.2-1.5-0.3-2.2-1.4-2.2c-0.9,0-1.5,0.6-1.7,1.8L89.9,38.1z"/>
<path class="st1" d="M101.2,54.7l5-31.3h7.6l-5,31.3H101.2z M107,21.1l1.1-6.6h6.7l-1.1,6.6H107z"/>
<path class="st1" d="M125,28.8l-2.3,14.6c-0.6,4-0.7,6,2.1,6c0.4,0,0.8-0.1,1.3-0.2l-0.8,5.4c-0.9,0.4-2.3,0.6-3.6,0.6
c-5.2,0-8-2.5-7.1-8.3l2.9-18.2h-2.2l0.8-5.4h2.2l1.2-7.6h7.6l-1.2,7.6h3.7l-0.9,5.4H125z"/>
<path class="st1" d="M126.5,60.3l2.8-5.6h-1.9l1.2-7.7h7.7l-1.2,7.7l-6.1,5.6H126.5z"/>
<path class="st1" d="M170.7,23.3h7.6l-10.2,31.3h-7.6l0.1-12.6l-4,12.6H149l-0.3-31.3h7.6l-0.6,18.4l5.2-18.4h5.3l-0.6,18.4
L170.7,23.3z"/>
<path class="st1" d="M197.4,32.2l-1.4,9.1h-10.8l-1,6.3c-0.2,1.5,0.3,2.2,1.4,2.2c1,0,1.5-0.6,1.7-1.8l0.6-3.8h7.6l-0.4,2.8
c-0.9,6-5,8.3-10.3,8.3c-5.4,0-9-2.5-7.9-9.4l2.4-14.6c1-6.1,4.8-8.4,10.2-8.4C194.9,22.8,198.5,25.3,197.4,32.2z M185.7,38.1h3.2
l1.2-7.6c0.2-1.5-0.3-2.2-1.4-2.2c-0.9,0-1.5,0.6-1.7,1.8L185.7,38.1z"/>
<path class="st1" d="M197,54.7l5-31.3h7.6l-5,31.3H197z M202.8,21.1l1.1-6.6h6.7l-1.1,6.6H202.8z"/>
<path class="st1" d="M214.8,12.5h7.6l-6.7,42.2h-7.6L214.8,12.5z"/>
<path class="st1" d="M228.5,54.7l6.7-42.2h8.5l-6.7,42.2H228.5z"/>
<path class="st1" d="M262.9,29.6l-4,25h-7.6l3.7-23.9c0.2-1.3-0.2-1.9-1.2-1.9c-0.7,0-1.3,0.3-1.7,0.9l-4,24.9h-7.6l6.7-42.2h7.6
l-2.1,13c1.1-1.4,3-2.7,5.5-2.7C261.9,22.8,263.7,25,262.9,29.6z"/>
<path class="st1" d="M274,27.5c1.5-3.2,3.9-4.8,6.9-4.5l-1.2,7.2c-4.2-0.5-6.3,1-7,5.2l-3,19.2h-7.6l5-31.3h7.6L274,27.5z"/>
<path class="st1" d="M308.8,32.2l-1.4,9.1h-10.8l-1,6.3c-0.2,1.5,0.3,2.2,1.4,2.2c1,0,1.5-0.6,1.7-1.8l0.6-3.8h7.6l-0.4,2.8
c-0.9,6-5,8.3-10.3,8.3s-9-2.5-7.9-9.4l2.4-14.6c1-6.1,4.8-8.4,10.2-8.4C306.2,22.8,309.8,25.3,308.8,32.2z M297.1,38.1h3.2
l1.2-7.6c0.2-1.5-0.3-2.2-1.4-2.2c-0.9,0-1.5,0.6-1.7,1.8L297.1,38.1z"/>
<path class="st1" d="M309.2,45.7l0.2-1.4h7.6l-0.5,3.2c-0.3,1.6,0.3,2.3,1.5,2.3c0.9,0,1.6-0.6,1.8-2.1l0.4-2.4
c0.4-2.5-0.8-2.7-4.5-4.4c-2.5-1.2-5.1-3.5-4.3-8.6l0.2-1.1c0.9-6.1,4.8-8.4,10.2-8.4s9.1,2.6,8.1,9.5l-0.2,1.2h-7.6l0.4-2.8
c0.3-1.7-0.3-2.4-1.5-2.4c-1,0-1.6,0.6-1.8,1.8l-0.4,2.4c-0.4,2.4,0.6,3,3.8,4.4c4.1,1.9,5.8,4.1,5.2,8l-0.3,1.9
c-0.9,6-5,8.3-10.5,8.3C311.8,55.2,308.1,52.6,309.2,45.7z"/>
<path class="st1" d="M339.3,45.7l0.2-1.4h7.6l-0.5,3.2c-0.3,1.6,0.3,2.3,1.5,2.3c0.9,0,1.6-0.6,1.8-2.1l0.4-2.4
c0.4-2.5-0.8-2.7-4.5-4.4c-2.5-1.2-5.1-3.5-4.3-8.6l0.2-1.1c0.9-6.1,4.8-8.4,10.2-8.4s9.1,2.6,8.1,9.5l-0.2,1.2h-7.6l0.4-2.8
c0.3-1.7-0.3-2.4-1.5-2.4c-1,0-1.6,0.6-1.8,1.8l-0.4,2.4c-0.4,2.4,0.6,3,3.8,4.4c4.1,1.9,5.8,4.1,5.2,8l-0.3,1.9
c-0.9,6-5,8.3-10.5,8.3C341.9,55.2,338.2,52.6,339.3,45.7z"/>
<path class="st1" d="M380.7,32.2l-1.4,9.1h-10.8l-1,6.3c-0.2,1.5,0.3,2.2,1.4,2.2c1,0,1.5-0.6,1.7-1.8l0.6-3.8h7.6l-0.4,2.8
c-0.9,6-5,8.3-10.3,8.3s-9-2.5-7.9-9.4l2.4-14.6c1-6.1,4.8-8.4,10.2-8.4C378.2,22.8,381.8,25.3,380.7,32.2z M369,38.1h3.2l1.2-7.6
c0.2-1.5-0.3-2.2-1.4-2.2c-0.9,0-1.5,0.6-1.7,1.8L369,38.1z"/>
<path class="st1" d="M380.3,54.7l5-31.3h7.6l-5,31.3H380.3z M386.2,21.1l1.1-6.6h6.7l-1.1,6.6H386.2z"/>
<path class="st1" d="M408.5,12.5h7.6l-6.7,42.2h-7.1l0.5-3.1c-1.5,2.3-3.6,3.6-6,3.6c-3.4,0-5.6-2-4.9-6.6l3-18.2
c0.8-5.1,3.6-7.6,7.7-7.6c1.6,0,2.9,0.4,4.1,1.2L408.5,12.5z M402.9,48.4l3.1-19.5c-0.3-0.5-0.8-0.7-1.4-0.7
c-1.1,0-1.7,0.5-1.9,2.1l-2.7,17.2c-0.2,1.4,0.2,2,1.2,2C401.8,49.4,402.3,49,402.9,48.4z"/>
<path class="st1" d="M412.6,54.7l1.2-7.7h7.7l-1.2,7.7H412.6z"/>
</g>
</g>
<g id="Hilfslinien" class="st2">
<g class="st3">
<rect x="-18.9" y="44.2" class="st4" width="484.7" height="10.4"/>
<rect x="-18.9" y="33.8" class="st4" width="484.7" height="10.4"/>
<rect x="-18.9" y="23.3" class="st4" width="484.7" height="10.4"/>
<rect x="-18.9" y="28.7" class="st4" width="484.7" height="5.1"/>
<rect x="-18.9" y="31.4" class="st4" width="484.7" height="2.4"/>
</g>
</g>
<g id="Abstände" class="st2">
<text transform="matrix(1 0 0 1 5.1815 54.6733)" class="st5 st6 st7">x</text>
<polygon class="st8" points="2.7,31.2 1.3,34.6 1,31.2 -2.4,31.2 -1,37.5 -4.6,44.4 -1.2,44.4 0.3,40.8 0.5,44.4 4,44.4 2.5,38
6.2,31.2 "/>
<polygon class="st9" points="-7.8,33.7 -9,36.4 -9.2,33.7 -12,33.7 -10.9,38.8 -13.9,44.4 -11.1,44.4 -9.8,41.5 -9.6,44.4
-6.8,44.4 -8,39.2 -5,33.7 "/>
<polygon class="st9" points="31,1.8 29.9,4.6 29.6,1.8 26.8,1.8 28,7 25,12.5 27.8,12.5 29,9.6 29.2,12.5 32,12.5 30.9,7.4
33.8,1.8 "/>
<polygon class="st9" points="31,54.9 29.9,57.6 29.6,54.9 26.8,54.9 28,60 25,65.6 27.8,65.6 29,62.7 29.2,65.6 32,65.6 30.9,60.4
33.8,54.9 "/>
<text transform="matrix(1 0 0 1 418.2047 54.5796)" class="st5 st6 st7">x</text>
</g>
</svg>

After

Width:  |  Height:  |  Size: 7.1 KiB

33
src/components/Categories/Categories.scss

@ -1,24 +1,39 @@
.Categories {
max-width: 1000px;
margin: 0 auto;
font-family: "PT Sans", sans-serif;
padding: 1rem;
.categories-title {
font-family: "bereit", sans-serif;
color: var(--green-color);
font-weight: bold;
font-size: 1.3rem;
font-size: 1.5rem;
padding-bottom: 2rem;
@media screen and (min-width: 750px) {
font-size: 2rem;
}
}
.categories-content {
padding-bottom: 2rem;
@media screen and (min-width: 750px) {
font-size: 1.3rem;
}
}
.categories-list {
margin-bottom: 2rem;
}
.categories-button {
padding: 1rem;
background: var(--salmon-color);
border-radius: 1rem;
box-shadow: var(--box-shadow);
a {
max-width: 800px;
margin: 1rem auto;
.categories-button {
margin: 2rem 0;
padding: 1rem;
background: var(--salmon-color);
border-radius: .3rem;
border: none;
color: var(--text-light-color);
font-size: 1.1rem;
font-weight: bold;
text-decoration: none;
}

10
src/components/Categories/Categories.tsx

@ -1,7 +1,7 @@
import React, { ReactElement, useEffect, useState } from "react";
import "./Categories.scss";
import { url } from "../../variables";
import { NavLink } from "react-router-dom";
import { Link } from "react-router-dom";
import ReactMarkdown from "react-markdown";
import PartnerLink from "../PartnerLink/PartnerLink";
import CategoryLink from "../CategoryLink/CategoryLink";
@ -59,9 +59,11 @@ function Categories() {
/>
);
})}
</div>
<div className="categories-button">
<NavLink to={"/partner"}>Hier geht es zu unseren Partner*innen</NavLink>
<Link to="/partner">
<button type="button" className="categories-button">
Zu den Beteiligten
</button>
</Link>
</div>
</div>
);

28
src/components/CategoryLink/CategoryLink.scss

@ -5,6 +5,13 @@
.acc-sum {
margin-top: .5rem;
color: white;
.MuiIconButton-label {
color: white;
.MuiSvgIcon-root {
width: 2rem;
height: 2rem;
}
}
p {
font-family: "bereit", sans-serif;
font-weight: bold;
@ -15,21 +22,28 @@
display: flex;
flex-direction: column;
color: white;
box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.5);
p {
padding-bottom: 1rem;
}
}
}
.category-button {
display: flex;
flex-direction: row;
margin: 1rem auto;
padding: 1rem;
background: var(--salmon-color);
border-radius: 1rem;
box-shadow: var(--box-shadow);
a {
color: var(--text-light-color);
font-weight: bold;
text-decoration: none;
border-radius: .3rem;
border: none;
color: var(--text-light-color);
font-size: 1.1rem;
font-weight: bold;
text-decoration: none;
svg {
margin-left: 1rem;
height: 1.1rem;
width: 1.1rem;
}
}
}

13
src/components/CategoryLink/CategoryLink.tsx

@ -6,6 +6,7 @@ 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";
interface CategoryProps {
title: string;
@ -27,9 +28,15 @@ const CategoryLink: React.FC<CategoryProps> = (category) => {
</AccordionSummary>
<AccordionDetails className="acc-detail">
<Typography className="category-text">{category.content}</Typography>
<div className="category-button">
<a href={category.url}>Zur Datenquelle</a>
</div>
<button
className="category-button"
onClick={(e) => {
e.preventDefault();
window.location.href = category.url;
}}
>
<span>Zur Datenquelle</span> <ArrowForwardIcon />
</button>
</AccordionDetails>
</Accordion>
</div>

38
src/components/Main/Main.scss

@ -1,23 +1,43 @@
.Main {
max-width: 1000px;
margin: 0 auto;
font-family: "PT Sans", sans-serif;
padding: 1rem;
.main-title {
font-family: "bereit", sans-serif;
color: var(--green-color);
font-weight: bold;
font-size: 1.3rem;
font-size: 1.5rem;
padding-bottom: 2rem;
@media screen and (min-width: 750px) {
font-size: 2rem;
}
}
.main-content {
padding-bottom: 2rem;
padding-bottom: 1rem;
@media screen and (min-width: 750px) {
font-size: 1.3rem;
}
}
.main-image {
width: 90%;
max-width: 400px;
margin: 0 auto;
padding-bottom: 1rem;
img {
width: 100%;
}
}
.main-button {
margin: 2rem 0;
padding: 1rem;
background: var(--salmon-color);
border-radius: 1rem;
box-shadow: var(--box-shadow);
a {
color: var(--text-light-color);
font-weight: bold;
text-decoration: none;
}
border-radius: .3rem;
border: none;
color: var(--text-light-color);
font-size: 1.1rem;
font-weight: bold;
text-decoration: none;
}
}

14
src/components/Main/Main.tsx

@ -1,7 +1,8 @@
import React, { useEffect, useState } from "react";
import { url } from "../../variables";
import "./Main.scss";
import { NavLink } from "react-router-dom";
import mainImage from "../../assets/img/AnordnungKarten.png";
import { Link, NavLink } from "react-router-dom";
import ReactMarkdown from "react-markdown";
function Main() {
@ -31,11 +32,14 @@ function Main() {
<div className="main-content">
<ReactMarkdown>{content}</ReactMarkdown>
</div>
<div className="main-button">
<NavLink to={"/kategorien"}>
Hier geht es zu den Kategoriebeschreibungen
</NavLink>
<div className="main-image">
<img src={mainImage} alt="Quartett Karten" />
</div>
<Link to="/kategorien">
<button type="button" className="main-button">
Zu den Kategoriebeschreibungen
</button>
</Link>
</div>
);
}

29
src/components/Partners/Partners.scss

@ -1,26 +1,39 @@
.Partners {
max-width: 1000px;
margin: 0 auto;
font-family: "PT Sans", sans-serif;
padding: 1rem;
.partners-title {
font-family: "bereit", sans-serif;
color: var(--green-color);
font-weight: bold;
font-size: 1.3rem;
font-size: 1.5rem;
padding-bottom: 2rem;
@media screen and (min-width: 750px) {
font-size: 2rem;
}
}
.partners-content {
padding-bottom: 2rem;
@media screen and (min-width: 750px) {
font-size: 1.3rem;
}
}
.partner-links {
margin-bottom: 2rem;
}
.partners-button {
margin: 2rem 0;
padding: 1rem;
background: var(--salmon-color);
border-radius: 1rem;
box-shadow: var(--box-shadow);
a {
color: var(--text-light-color);
font-weight: bold;
text-decoration: none;
}
border-radius: .3rem;
border: none;
color: var(--text-light-color);
font-size: 1.1rem;
font-weight: bold;
text-decoration: none;
}
}

11
src/components/Partners/Partners.tsx

@ -1,7 +1,7 @@
import React, { ReactElement, useEffect, useState } from "react";
import "./Partners.scss";
import { url } from "../../variables";
import { NavLink } from "react-router-dom";
import { Link, NavLink } from "react-router-dom";
import ReactMarkdown from "react-markdown";
import PartnerLink from "../PartnerLink/PartnerLink";
@ -50,9 +50,12 @@ function Partners() {
{partners.map((t: PartnersProps): ReactElement => {
return <PartnerLink key={t.id} url={t.url} name={t.name} />;
})}
</div>
<div className="partners-button">
<NavLink to={"/"}>Hier geht es zurück zur Startseite</NavLink>
<Link to="/">
<button type="button" className="partners-button">
Zurück zur Startseite
</button>
</Link>
</div>
</div>
);

19
src/components/footer/Footer.scss

@ -4,6 +4,7 @@
color: var(--yellow-color);
.claim-container {
max-width: 800px;
padding: 1rem;
width: 85%;
margin: 0 auto;
@ -12,6 +13,7 @@
}
}
.info-container {
max-width: 800px;
width: 85%;
margin: 0 auto;
padding-bottom: 1rem;
@ -27,6 +29,9 @@
justify-content: space-between;
align-items: flex-end;
margin-bottom: .5rem;
@media screen and (min-width: 750px) {
justify-content: left;
}
a {
margin-right: .5rem;
@ -34,6 +39,11 @@
font-size: .8rem;
text-decoration: none;
@media screen and (min-width: 750px) {
margin-right: 2rem;
font-size: 1.2rem;
}
&:hover {
color: var(--text-light-color);
font-weight: bold;
@ -43,8 +53,17 @@
.logo-container {
width: 25%;
margin-left: 1rem;
@media screen and (min-width: 750px) {
position: relative;
align-content: flex-end;
padding-right: 2rem;
}
.logo {
position: relative;
float: right;
max-width: 50px;
align-self: flex-end;
}
}
}

2
src/components/footer/Footer.tsx

@ -2,7 +2,7 @@ import React from "react";
import "./Footer.scss";
import { NavLink } from "react-router-dom";
import greenLogo from "../../assets/img/greenLogo.svg";
import greenClaim from "../../assets/img/greenClaim.png";
import greenClaim from "../../assets/img/greenClaim.svg";
function Footer() {
return (

3
src/components/header/Header.scss

@ -1,3 +1,6 @@
.header-container {
background-color: var(--campaign-color);
@media screen and (min-width: 750px) {
padding: 0 3rem;
}
}

33
src/components/navigation/Navigation.scss

@ -1,13 +1,36 @@
.navbar {
padding: 2rem 1rem;
padding: 1rem;
height: 15vh;
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1280px;
margin: 0 auto;
.logo-container {
.logo {
width: 75px;
@media screen and (min-width: 750px) {
padding: 1rem 0;
max-height: 100px;
}
.left-container {
height: 100%;
display: flex;
flex-direction: row;
align-items: center;
.logo-container {
height: 95%;
.logo {
height: 100%;
}
}
span {
margin-left: 1rem;
color: white;
font-size: 2rem;
@media screen and (min-width: 750px) {
margin-left: 2rem;
}
}
}
@ -20,7 +43,7 @@
display: none;
}
.active {
color: #f8dc6d;
color: var(--yellow-color);
cursor: default;
}
a {

17
src/components/navigation/Navigation.tsx

@ -20,13 +20,20 @@ function MobileNav() {
return (
<div className="navbar">
<div className="logo-container">
<NavLink to={"/"}>
<img className="logo" src={greenLogo} alt="green" />
</NavLink>
<div className="left-container">
<div className="logo-container">
<NavLink to={"/"}>
<img className="logo" src={greenLogo} alt="green" />
</NavLink>
</div>
<span>Grünes Quartett</span>
</div>
<div className="link-container">
<h1>LINK</h1>
<NavLink exact to={"/"}>
Startseite
</NavLink>
<NavLink to={"/kategorien"}>Kategorien</NavLink>
<NavLink to={"/partner"}>Partner</NavLink>
</div>
<div className="mobile-container">
<Button

Loading…
Cancel
Save