fixed css

mklemmingen · Jan 19, 2025 · 519f86b · 519f86b
1 parent ed63255
commit 519f86b
Show file tree

Hide file tree

Showing 10 changed files with 31 additions and 20 deletions.
diff --git a/public/knitting.png b/public/knitting.png
diff --git a/src/app/_components/CustomDot.js b/src/app/_components/CustomDot.js
@@ -0,0 +1,18 @@
+import React from 'react';
+import { PiYarnFill } from 'react-icons/pi';
+
+const CustomDot = (props) => {
+    const { cx, cy } = props;
+    return (
+        <PiYarnFill
+            style={{
+                position: 'absolute',
+                transform: `translate(${cx - 10}px, ${cy - 10}px)`,
+                fontSize: 20,
+                color: 'rgba(129, 104, 142, 1)',
+            }}
+        />
+    );
+};
+
+export default CustomDot;
diff --git a/src/app/_sections/stat/StatCatGermany.js b/src/app/_sections/stat/StatCatGermany.js
@@ -2,6 +2,7 @@ import React, {useEffect, useState} from 'react';
 import {CartesianGrid, Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis} from 'recharts';
 import '../../globals.css';
 import Image from "next/image";
+import CustomDot from "@/app/_components/CustomDot";
 import CustomizedDot from "../../_components/CustomizedDot";
 
 function StatCatGermany() {
@@ -20,7 +21,7 @@ function StatCatGermany() {
         const primaryColor = getComputedStyle(document.documentElement)
             .getPropertyValue("--primary-color")
             .trim();
-        setPrimaryColor(primaryColor || "#8884d8"); // Default color if --primary-color is not set
+        setPrimaryColor(primaryColor);
     }, []);
 
     const chartData = years.map((year, index) => ({
@@ -29,17 +30,18 @@ function StatCatGermany() {
     }));
 
     return (
-        <>
+        <div>
             <div>
                 <div className="full-container-headline">
                     <Image src='assets/svg/berlin-brandenburg-gate-svgrepo-com.svg' alt="Icon" width={50} height={50} />
                     <h2>Hauskatzen in Deutschland</h2>
-                    <p className="author"> Michael </p>
+                    <h2 className="author"> Michael </h2>
                 </div>
                 <p> Die Zahl der Katzen in deutschen Haushalten stieg von <b>7 Millionen</b> im Jahr 2000 auf über <b>15 Millionen</b> im Jahr 2023. Dank ihres unabhängigen Charakters und geringen Pflegeaufwands sind sie beliebte Haustiere. Katzen regulieren Nagetiere, stellen jedoch eine Gefahr für Vögel und andere Tiere dar, insbesondere Streunerkatzen, die eine Gefahr für die <b>Biodiversität</b> bedeuten.</p>
                 <br />
                 <h2>Entwicklung 2000 - 2023</h2>
 
+                {/* Recharts Line Chart */}
                 <ResponsiveContainer width="100%" height={400}>
                     <LineChart data={chartData}>
                         <CartesianGrid strokeDasharray="2 2" />
@@ -58,7 +60,7 @@ function StatCatGermany() {
                             dataKey="cats"
                             stroke={primaryColor}
                             strokeWidth={3}
-                            dot={{ r: 8, fill: "rgba(129, 104, 142, 1)", stroke: primaryColor, strokeWidth: 2 }}
+                            dot={<CustomDot />} // custom dot component
                             activeDot={<CustomizedDot radius={45}/>}
                         />
 
@@ -70,7 +72,7 @@ function StatCatGermany() {
                 </p>
                 <br />
             </div>
-        </>
+        </div>
     );
 }
 

diff --git a/src/app/_styles/Introduction.css b/src/app/_styles/Introduction.css
@@ -17,7 +17,6 @@
     text-align: center;
     flex: 1;
     pointer-events: none;
-    margin-top: 15%;
 }
 
 .introduction .content {

diff --git a/src/app/comments/_styles/comments.css b/src/app/comments/_styles/comments.css
@@ -1,10 +1,6 @@
 .aufgabe4-container {
     padding: 20px;
     font-family: var(--font-family), serif;
-    margin-top: 3%;
-    margin-left: auto;
-    margin-right: auto;
-    margin-bottom: 3%
 }
 
 .standard{

diff --git a/src/app/credits/_styles/Credits.css b/src/app/credits/_styles/Credits.css
@@ -1,6 +1,4 @@
 .credits-container {
-    margin-top: 10%;
-    margin-bottom: 10%;
     display: flex;
     flex-direction: column;
     min-height: 100vh;

diff --git a/src/app/credits/page.js b/src/app/credits/page.js
@@ -32,6 +32,12 @@ function Page() {
                             Jonny McLaughlin
                         </span>
                     </li>
+                    <li>
+                        <span className="playful-keyword">Yarn ball at the german diagram <br/></span>
+                        <span className="link-class" onClick={() => handleLinkClick("https://pixabay.com/users/clker-free-vector-images-3736/")}>
+                            By clker-free-vector-images from Pixabay
+                        </span>
+                    </li>
                 </ul>
             </div>
             <h1 className="playful-header">Bildnachweise</h1>

diff --git a/src/app/datenschutz/_styles/datenschutz.css b/src/app/datenschutz/_styles/datenschutz.css
@@ -5,10 +5,6 @@
 }
 
 .datenschutzWrapper {
-    margin-top: 5%;
-    margin-bottom: 5%;
-    margin-left: auto;
-    margin-right: auto;
     display: flex;
     align-items: center;
     justify-content: center;

diff --git a/src/app/impressum/_styles/Impressum.css b/src/app/impressum/_styles/Impressum.css
@@ -1,8 +1,6 @@
 .impressum-container {
-    margin-top: 8%;
     margin-left: auto;
     margin-right: auto;
-    margin-bottom: 8%;
     position: relative;
     text-align: left;
     max-width: 800px;

diff --git a/src/app/support/_styles/Support.css b/src/app/support/_styles/Support.css
@@ -1,5 +1,4 @@
 .support-container {
-    margin-top: 5%;
     display: flex;
     justify-content: space-between;
     max-width: 75%;
@@ -8,7 +7,6 @@
     color: var(--text-color);
     position: relative;
     z-index: 10;
-    margin-bottom: 13%;
 }
 
 .support-container::before {