Add support for a darkened background so that text is more visible ag…

…ainst chaotic photographic backgrounds.
topos-protocol · May 2, 2024 · dfdddfa · dfdddfa
1 parent 65bc21b
commit dfdddfa
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 4 deletions.
diff --git a/src/blocks/Hero/Hero.jsx b/src/blocks/Hero/Hero.jsx
@@ -18,6 +18,12 @@ const HeroWrapper = styled.div`
   @media (max-width: 480px) {
     padding: 7.5rem 0px 4.5rem 0px;
   }
+
+  span.darkenBackground div {
+    background-color: rgba(0, 0, 0, 0.5);
+    padding: 0.375rem;
+    border-radius: 0.5em;
+  }
 `;
 
 const Supertitle = styled.div`
@@ -89,21 +95,24 @@ export default function BlockHero({ block, section }) {
     opacity: [-1.5, 10],
   });
 
+  // const klass = block.darkenBackground ? 'darkenBackground' : block.darkenBackground;;
+  const klass = true ? 'darkenBackground' : block.darkenBackground;;
+
   return (
     <HeroWrapper>
       <span ref={heroSupertitleRef.ref}>
         {block.supertitle && <Supertitle>{block.supertitle}</Supertitle>}
       </span>
 
-      <span ref={heroTitleRef.ref}>
+      <span ref={heroTitleRef.ref} class={klass}>
         {block.heroTitle && (
           <HeroTitle>
             <RichText element={block.heroTitle} />
           </HeroTitle>
         )}
       </span>
 
-      <span ref={heroTextRef.ref}>
+      <span ref={heroTextRef.ref} class={klass}>
         {block.heroText && (
           <HeroText>
             <RichText element={block.heroText} />

diff --git a/src/blocks/Text/Text.jsx b/src/blocks/Text/Text.jsx
@@ -26,6 +26,15 @@ const Wrapper = styled.div`
   p {
     margin-bottom: 1rem;
   }
+
+  div {
+    border-radius: 0.5rem;
+    padding: 0.5rem;
+  }
+
+  .darkenBackground {
+    background-color: rgba(0, 0, 0, 0.5);
+  }
 `;
 
 // it can edit in
@@ -40,12 +49,14 @@ export default function BlockText({ block, section }) {
     opacity: [0, 4],
   });
 
+  const klass = block.darkenBackground ? 'darkenBackground' : block.darkenBackground;;
+
   return (
     <Wrapper>
-      <div ref={firstColumnRef.ref}>
+      <div ref={firstColumnRef.ref} class={klass}>
         <RichText element={block.firstColumn} />
       </div>
-      <div ref={secondColumnRef.ref}>
+      <div ref={secondColumnRef.ref} class={klass}>
         <RichText element={block.secondColumn} />
       </div>
     </Wrapper>