diff --git a/src/components/Footer/ContactData/contactData.scss b/src/components/Footer/ContactData/contactData.scss index 02f03adb..5dd2eb18 100644 --- a/src/components/Footer/ContactData/contactData.scss +++ b/src/components/Footer/ContactData/contactData.scss @@ -16,9 +16,8 @@ } &__link { a { - color: $primary; font-weight: 600; - text-decoration: underline $primary; + text-decoration: underline; font-size: 18px; } } diff --git a/src/components/expandGrid/ExpandGrid.js b/src/components/expandGrid/ExpandGrid.js index 2ac12e3b..7a11e285 100644 --- a/src/components/expandGrid/ExpandGrid.js +++ b/src/components/expandGrid/ExpandGrid.js @@ -1,28 +1,47 @@ import { Link } from "gatsby" -import React, { useEffect, useState } from "react" +import React, { useEffect, useRef, useState } from "react" import { Flipper, Flipped } from "react-flip-toolkit" import MarkdownView from "react-showdown" +import { useTheme } from "../../context/themeContext" import "./expandGrid.scss" const ExpandGrid = ({ data }) => { + const { theme } = useTheme() + + const backgroundImage = data.backgroundImage?.url + const backgroundImageDark = data.backgroundImageDark?.url + return (
-
-
-

{data.title}

-
{data.subtitle}
- -
-
+
+
+
+

{data.title}

+
{data.subtitle}
+ +
+
+
) } const createCardFlipId = index => `listItem-${index}` +const scrollToRef = ref => window.scrollTo(0, ref.current.offsetTop - 40) + const shouldFlip = index => (prev, current) => index === prev || index === current @@ -55,17 +74,19 @@ const ListItem = ({ index, onClick, data }) => { } const ExpandedListItem = ({ index, data, isFirst }) => { + const scrollRef = useRef(null) return ( { + if (!isFirst) scrollToRef(scrollRef) setTimeout(() => { el.classList.add("animated-in") }, 400) }} > -
+
@@ -141,6 +162,7 @@ const AnimatedList = ({ items }) => { isFirst={isFirst} index={itemsArray.focused} data={item} + scrollToRef={scrollToRef} /> ) : (