diff --git a/src/App/App.css b/src/App/App.css
index fae8b5aac734fc5b229e32fd445bb24c9c60c692..232aec5dcfc7bc7aab69d4c4a43487eeed323241 100644
--- a/src/App/App.css
+++ b/src/App/App.css
@@ -1337,7 +1337,7 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before {
min-width: 50vw;
min-height: 20vw;
background-color: #555;
- color: #fff;
+ color: var(--ourbeige);
text-align: center;
border-radius: 6px;
z-index: 1;
@@ -1412,7 +1412,7 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before {
.wrapper{
width: 500px;
height: 100%;
- background: #fff;
+ background: var(--ourbeige);
margin: 15px auto 0;
}
.wrapper .tabs_wrap{
@@ -1454,7 +1454,7 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before {
.wrapper .tabs_wrap ul li:hover,
.wrapper .tabs_wrap ul li.active{
background: #7fc469;
- color: #fff;
+ color: var(--ourbeige);
}
@@ -1714,7 +1714,7 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before {
}
.chart.vis-d3-maps-choropleth .dw-tooltip {
- background: #fff;
+ background: var(--ourbeige);
border: 1px solid #f5f5f5;
box-shadow: 3px 3px 3px var(--offblack)0001a;
font-size: 11px;
@@ -1780,11 +1780,11 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before {
font-weight: 700;
padding: 8px 35px 8px 14px;
position: relative;
- text-shadow: 0 1px 0 #ffffff80
+ text-shadow: 0 1px 0 var(--cebitecgray)
}
.chart.vis-d3-maps-choropleth .dw-tooltip .tooltip-warning table {
- background: #fff;
+ background: var(--ourbeige);
border-radius: 1px;
display: block;
font-weight: 400;
@@ -2735,7 +2735,7 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before {
margin-left:-12px;
}
-/* #ct{height:150px; width:370px;border:4px solid var(--accent-dark);margin: 100px auto;text-align:center;position:relative;color:#fff;padding:15px;}
+/* #ct{height:150px; width:370px;border:4px solid var(--accent-dark);margin: 100px auto;text-align:center;position:relative;color:var(--ourbeige);padding:15px;}
span{
background:var(--background);
color:var(--accent-dark);
@@ -2748,7 +2748,7 @@ span{
height:36px;
width:36px;
border-radius:50%;
- border:4px solid #fff;
+ border:4px solid var(--ourbeige);
transform:rotate(-45deg);
position:absolute;
background:var(--ourbeige);
@@ -3122,7 +3122,7 @@ span{
======================== */
.btn-two {
- color: #fff;
+ color: var(--ourbeige);
transition: all 0.5s;
position: relative;
}
@@ -3173,7 +3173,7 @@ span{
======================== */
.btn-three {
- color: #fff;
+ color: var(--ourbeige);
transition: all 0.5s;
position: relative;
}
@@ -3251,7 +3251,7 @@ div[class*="boxy"] {
border-radius: 10px;
}
.btn-one {
- color: #fff;
+ color: var(--ourbeige);
transition: all 0.3s;
position: relative;
}
diff --git a/src/App/App.scss b/src/App/App.scss
index 9b88352a19e0569f69d409354f19fc5d5b563fec..415ea251a246ef8b5daa616d6d89ae049c43a494 100644
--- a/src/App/App.scss
+++ b/src/App/App.scss
@@ -145,7 +145,7 @@ $size: 6;
color: var(--offblack);
background-color: var(--offblack);
font: bold 4em "Helvetica";
- $shadow: 5px #fff;
+ $shadow: 5px var(--ourbeige);
text-shadow: 0 -1px $shadow, -1px 0px $shadow, 0 1px $shadow,
1px 0px $shadow;
padding: 2rem;
@@ -201,7 +201,7 @@ $size: 6;
.content {
max-width: 90%;
position: relative;
- color: #fff;
+ color: var(--ourbeige);
&:hover > a.close {
opacity: 1;
transform: scale(1, 1);
@@ -262,7 +262,7 @@ $size: 6;
opacity: 0;
transform-origin: right top;
text-decoration:none;
- color:#fff;
+ color:var(--ourbeige);
&::after {
content: "X";
}
@@ -332,7 +332,7 @@ $shadow: #bc15aa;
height: 100px;
line-height: 100px;
margin: auto;
- color: #fff;
+ color: var(--ourbeige);
position: absolute;
top: 0;
bottom: 0;
@@ -553,7 +553,7 @@ $shadow: #bc15aa;
max-width: 400px;
width: 90%;
margin: auto;
- background: #fff;
+ background: var(--ourbeige);
padding: 30px;
border-style: solid;
border-width: 30px;
@@ -572,7 +572,7 @@ $shadow: #bc15aa;
max-width: 200px;
width: 70%;
margin: auto;
- background: #fff;
+ background: var(--ourbeige);
padding: 10px;
border-style: solid;
border-width: 20px;
@@ -590,7 +590,7 @@ figure.snip1113 {
min-width: 220px;
max-width: 310px;
width: 80%;
- background: #ffffff;
+ background: var(--ourbeige);
text-align: center;
}
@@ -622,7 +622,7 @@ figure.snip1113 figcaption {
}
figure.snip1113 h3 {
- background-color: #ffffff;
+ background-color: var(--ourbeige);
color: var(--offblack);
font-size: 1.7em;
width: 100%;
diff --git a/src/App/Timelines.css b/src/App/Timelines.css
index 7cc898c634283bfa78b75ecc214b9044f5e42ae0..ba3f6cf3270d20ad62269684eedb0d723dd2d03b 100644
--- a/src/App/Timelines.css
+++ b/src/App/Timelines.css
@@ -139,7 +139,7 @@ background-size: 65% 120%;
/* Tags */
.t-tag{
box-shadow: 0 4px 6px 0 hsla(0, 0%, 0%, 0.2);
- color: #fff;
+ color: var(--ourbeige);
font-size: 12px;
font-weight: bold;
letter-spacing: 1px;
@@ -223,7 +223,7 @@ button.tabbutton:nth-child(1), button.tabbutton:nth-child(6){
.timeline-item-content {
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
border-radius: 5px;
- background-color: #fff;
+ background-color: var(--ourbeige);
display: flex;
flex-direction: column;
align-items: flex-end;
@@ -239,7 +239,7 @@ button.tabbutton:nth-child(1), button.tabbutton:nth-child(6){
/* Tags */
.timeline-item-content .tag {
- color: #fff;
+ color: var(--ourbeige);
font-size: 12px;
font-weight: bold;
top: 5px;
@@ -275,7 +275,7 @@ button.tabbutton:nth-child(1), button.tabbutton:nth-child(6){
.timeline-end{
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
border-radius: 5px;
-background-color: #fff;
+background-color: var(--ourbeige);
padding: 15px;
position: relative;
text-align: center;
@@ -285,7 +285,7 @@ margin-top: 8vw;
.timeline-begin{
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
border-radius: 5px;
-background-color: #fff;
+background-color: var(--ourbeige);
padding: 15px;
position: relative;
text-align: center;
@@ -304,7 +304,7 @@ margin-bottom: 8vw;
/* Circle */
.timeline-item-content .circle {
-background-color: #fff !important;
+background-color: var(--ourbeige) !important;
border: 3px solid var(--text-primary);
border-radius: 50%;
position: absolute;
@@ -327,70 +327,6 @@ z-index: 100;
-
-
-
-
-/* Checken ob wir das echt brauchen */
-/* .timeline ol li:not(:first-child) {
- margin-left: 14px;
-}
-.timeline-item-content::after {
- background-color: #fff;
- box-shadow: 1px -1px 1px rgba(0, 0, 0, 0.2);
- position: absolute;
- right: -7.5px;
- top: calc(50% - 7.5px);
- transform: rotate(45deg);
- width: 15px;
- height: 15px;
-}
-.timeline-item:nth-child(odd) .timeline-item-content::after {
- right: auto;
- left: -7.5px;
- box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.2);
-}
-.timeline-item-content p {
- font-size: 16px;
- line-height: 24px;
- margin: 15px 0;
-}
-.timeline-item-content a::after {
- font-size: 12px;
-}
-.card {
-border-radius: 4px;
-background-color: #fff;
-color: #333;
-padding: 10px;
-box-shadow: 0 4px 6px 0 hsla(0, 0%, 0%, 0.2);
-width: 100%;
-max-width: 560px;
-
-}
-
-.date {
-background-color: var(--text-primary) !important;
-padding: 4px !important;
-color: #fff !important;
-border-radius: 4px !important;
-font-weight: 500;
-font-size: .85rem;
-}
-.date-col{
-position: relative;
- background-color: #fff ;
- padding: 10px;
- width: 10%;
- border-right: var(--offblack);
- border-right-width: 2px;
-}
- .imageAtom{
-object-fit: cover;
-overflow: hidden;
-width: 100%;
-max-height: 400px;
-}
*/
.hpbuttonrow {
display: flex; /* Flex-Layout für die untere Reihe */
diff --git a/src/contents/Human Practices/HP svgs/hp3.tsx b/src/contents/Human Practices/HP svgs/hp3.tsx
index 6d634b4ddbf334dcf219a96d9dbf7c39b09711c8..1be5f147e1ce9a3b4dd506725ccaf776abb5dd2e 100644
--- a/src/contents/Human Practices/HP svgs/hp3.tsx
+++ b/src/contents/Human Practices/HP svgs/hp3.tsx
@@ -1176,7 +1176,7 @@ export const HP3new = () => (
id="path34"
style={{
display: "inline",
- fill: "#FFF6F2",
+ fill: "var(--ourbeige)",
fillOpacity: 1,
fillRule: "evenodd",
stroke: "none",
@@ -1296,7 +1296,7 @@ export const HP3new = () => (
<path
id="path46"
style={{
- fill: "#FFF6F2",
+ fill: "var(--ourbeige)",
fillOpacity: 1,
fillRule: "evenodd",
stroke: "none",
@@ -1307,7 +1307,7 @@ export const HP3new = () => (
id="path50"
style={{
display: "inline",
- fill: "#FFF6F2",
+ fill: "var(--ourbeige)",
fillOpacity: 1,
fillRule: "evenodd",
stroke: "none",
@@ -1319,7 +1319,7 @@ export const HP3new = () => (
style={{
display: "inline",
fill: "none",
- stroke: "#FFF6F2",
+ stroke: "var(--ourbeige)",
strokeWidth: 2.04,
strokeLinecap: "butt",
strokeLinejoin: "round",
@@ -1384,7 +1384,7 @@ export const HP3new = () => (
<path
id="path62"
style={{
- fill: "#FFF6F2",
+ fill: "var(--ourbeige)",
fillOpacity: 1,
fillRule: "evenodd",
stroke: "none",
@@ -1734,7 +1734,7 @@ export const HP3new = () => (
<path
id="path740"
style={{
- fill: "#FFF6F2",
+ fill: "var(--ourbeige)",
fillOpacity: 1,
fillRule: "evenodd",
stroke: "none",
@@ -1745,7 +1745,7 @@ export const HP3new = () => (
id="path742"
style={{
fill: "none",
- stroke: "#FFF6F2",
+ stroke: "var(--ourbeige)",
strokeWidth: 2.04,
strokeLinecap: "butt",
strokeLinejoin: "round",
@@ -3650,7 +3650,7 @@ export const HP3new = () => (
id="path62-8"
style={{
- fill: "#FFF6F2",
+ fill: "var(--ourbeige)",
fillOpacity: 1,
fillRule: "evenodd",
stroke: "none",
@@ -3997,7 +3997,7 @@ export const HP3new = () => (
id="path742-2"
style={{
fill: "none",
- stroke: "#FFF6F2",
+ stroke: "var(--ourbeige)",
strokeWidth: 2.04,
strokeLinecap: "butt",
strokeLinejoin: "round",
diff --git a/src/contents/Human Practices/HP svgs/hp4.tsx b/src/contents/Human Practices/HP svgs/hp4.tsx
index 1d238bc856e68f40e9a6a7543cdf9656d7e00b9e..c27a009a1339c4b37e15050fcb7739150cb95636 100644
--- a/src/contents/Human Practices/HP svgs/hp4.tsx
+++ b/src/contents/Human Practices/HP svgs/hp4.tsx
@@ -90,7 +90,7 @@ const HP4 = () => (
offset={0.29}
style={{
stopOpacity: 1,
- stopColor: "#fff6f3",
+ stopColor: "var(--ourbeige)",
}}
/>
<stop
@@ -98,7 +98,7 @@ const HP4 = () => (
offset={0.5}
style={{
stopOpacity: 1,
- stopColor: "#fff6f3",
+ stopColor: "var(--ourbeige)",
}}
/>
<stop
@@ -106,7 +106,7 @@ const HP4 = () => (
offset={0.71}
style={{
stopOpacity: 1,
- stopColor: "#fff6f3",
+ stopColor: "var(--ourbeige)",
}}
/>
<stop
@@ -341,7 +341,7 @@ const HP4 = () => (
offset={0}
style={{
stopOpacity: 1,
- stopColor: "#fff6f3",
+ stopColor: "var(--ourbeige)",
}}
/>
<stop
@@ -349,7 +349,7 @@ const HP4 = () => (
offset={0.055}
style={{
stopOpacity: 1,
- stopColor: "#fff6f3",
+ stopColor: "var(--ourbeige)",
}}
/>
<stop
@@ -381,7 +381,7 @@ const HP4 = () => (
offset={0.945}
style={{
stopOpacity: 1,
- stopColor: "#fff6f3",
+ stopColor: "var(--ourbeige)",
}}
/>
<stop
@@ -389,7 +389,7 @@ const HP4 = () => (
offset={1}
style={{
stopOpacity: 1,
- stopColor: "#fff6f3",
+ stopColor: "var(--ourbeige)",
}}
/>
</linearGradient>
@@ -543,7 +543,7 @@ const HP4 = () => (
<path
id="path82"
style={{
- fill: "#fff6f2",
+ fill: "var(--ourbeige)",
fillOpacity: 1,
fillRule: "evenodd",
stroke: "none",
@@ -553,7 +553,7 @@ const HP4 = () => (
<path
id="path84"
style={{
- fill: "#fff6f2",
+ fill: "var(--ourbeige)",
fillOpacity: 1,
fillRule: "evenodd",
stroke: "none",
@@ -563,7 +563,7 @@ const HP4 = () => (
<path
id="path86"
style={{
- fill: "#fff6f2",
+ fill: "var(--ourbeige)",
fillOpacity: 1,
fillRule: "evenodd",
stroke: "none",
@@ -573,7 +573,7 @@ const HP4 = () => (
<path
id="path88"
style={{
- fill: "#fff6f2",
+ fill: "var(--ourbeige)",
fillOpacity: 1,
fillRule: "evenodd",
stroke: "none",
@@ -583,7 +583,7 @@ const HP4 = () => (
<path
id="path88-6"
style={{
- fill: "#fff6f2",
+ fill: "var(--ourbeige)",
fillOpacity: 1,
fillRule: "evenodd",
stroke: "none",
@@ -779,7 +779,7 @@ const HP4 = () => (
<path
id="path202"
style={{
- fill: "#fff6f2",
+ fill: "var(--ourbeige)",
fillOpacity: 1,
fillRule: "evenodd",
stroke: "none",
diff --git a/src/contents/Human Practices/HP svgs/understanding.tsx b/src/contents/Human Practices/HP svgs/understanding.tsx
index 58ac1b759168996e0e81ebdb52e5c776e8af716e..a92f487e215904f4d8f61eca6dc7df3a9744d999 100644
--- a/src/contents/Human Practices/HP svgs/understanding.tsx
+++ b/src/contents/Human Practices/HP svgs/understanding.tsx
@@ -517,7 +517,7 @@ export const HPUnderstanding = () => (
fontSize: "21.96px",
fontFamily: "Arial",
/* writingMode: "lr-tb",*/
- fill: "#ffffff",
+ fill: "var(--ourbeige)",
fillOpacity: 1,
fillRule: "nonzero",
stroke: "none",
@@ -568,7 +568,7 @@ export const HPUnderstanding = () => (
fontSize: "21.96px",
fontFamily: "Arial",
/* writingMode: "lr-tb",*/
- fill: "#fff6f3",
+ fill: "var(--ourbeige)",
fillOpacity: 1,
fillRule: "nonzero",
stroke: "none",
@@ -639,7 +639,7 @@ export const HPUnderstanding = () => (
fontSize: "21.96px",
fontFamily: "Arial",
/* writingMode: "lr-tb",*/
- fill: "#ffffff",
+ fill: "var(--ourbeige)",
fillOpacity: 1,
fillRule: "nonzero",
stroke: "none",
@@ -681,7 +681,7 @@ export const HPUnderstanding = () => (
<path
id="path76"
style={{
- fill: "#fff6f3",
+ fill: "var(--ourbeige)",
fillOpacity: 1,
fillRule: "evenodd",
stroke: "none",
@@ -703,7 +703,7 @@ export const HPUnderstanding = () => (
<path
id="path80"
style={{
- fill: "#fff6f3",
+ fill: "var(--ourbeige)",
fillOpacity: 1,
fillRule: "evenodd",
stroke: "none",