💄 Some progres #2014

equinor · Feb 13, 2024 · 2562bac · 2562bac
1 parent 3a41414
commit 2562bac
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 5 deletions.
diff --git a/web/components/src/Backgrounds/ImageBackgroundContainer.tsx b/web/components/src/Backgrounds/ImageBackgroundContainer.tsx
@@ -14,6 +14,7 @@ type ImageContainerProps = {
 
 const ImageContainer = styled.div<ImageContainerProps>`
   position: relative;
+  min-height: 100vh;
   background-attachment: fixed;
   background-position: center;
   background-repeat: no-repeat;
@@ -26,11 +27,15 @@ const DEFAULT_MAX_WIDTH = 1920
 
 const AnimationWrapper = styled.div`
   /* Create View Timeline */
-  background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(255, 255, 255, 1) 70%);
+  background-image: linear-gradient(to right, rgba(0, 0, 0, 0), var(--color-inverse) 70%);
+  padding-top: 50vh;
+  padding-bottom: 50vh;
   section {
-    width: 40vw;
-    margin-right: 0;
-    padding: var(--space-3xLarge) var(--space-3xLarge);
+    @media (min-width: 1200px) {
+      width: 40vw;
+      margin-right: 0;
+      padding: var(--space-3xLarge) var(--space-3xLarge);
+    }
   }
   display: flex;
   view-timeline-name: --revealing-image;
@@ -64,7 +69,7 @@ export const ImageBackgroundContainer = forwardRef<HTMLDivElement, ImageBackgrou
     const src = props?.src
     const ChildrenWrapper = imageBackground?.useAnimation
       ? ({ children }: { children: React.ReactNode }) => <AnimationWrapper>{children}</AnimationWrapper>
-      : ({ children }: { children: React.ReactNode }) => <>{children}</>
+      : ({ children }: { children: React.ReactNode }) => <AnimationWrapper>{children}</AnimationWrapper>
 
     return (
       <ImageContainer

diff --git a/web/styles/themes.ts b/web/styles/themes.ts
@@ -41,6 +41,8 @@ export const normal = css`
 
   /**@ Title Highlight  */
   --title-highlight-color: var(--energy-red-100);
+
+  --color-inverse: var(--inverted-text);
 `
 
 export const inverted = css`
@@ -63,4 +65,5 @@ export const inverted = css`
   --accordion-icon-color: var(--white-100);
   --breadcrumbs-inactive-color: var(--grey-30);
   --title-highlight-color: var(--spruce-wood-100);
+  --color-inverse: var(--default-text);
 `