alternating background color on small screens

varianter · Sep 1, 2023 · 9b96c77 · 9b96c77
1 parent 6df446b
commit 9b96c77
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 2 deletions.
diff --git a/src/varianttur/guildford23/bliKjent/bliKjent.module.css b/src/varianttur/guildford23/bliKjent/bliKjent.module.css
@@ -44,7 +44,13 @@ h4 {
 }
 
 .variantContainer {
-  margin-bottom: 5rem;
+  padding-top: 2rem;
+  padding-bottom: 2rem;
+}
+
+.reverseVariantContainer {
+  composes: variantContainer;
+  background-color: var(--color-primary__shade2);
 }
 
 .personContainer,
@@ -95,6 +101,10 @@ h4 {
     margin-bottom: 8rem;
   }
 
+  .reverseVariantContainer {
+    background-color: var(--color-primary__shade1);
+  }
+
   .personContainer,
   .reversePersonContainer {
     margin-bottom: 3rem;

diff --git a/src/varianttur/guildford23/bliKjent/variantPlusOne.tsx b/src/varianttur/guildford23/bliKjent/variantPlusOne.tsx
@@ -4,7 +4,7 @@ import { VariantPlusOneModel } from './getToKnow';
 
 const VariantPlusOne = ({variant, variantIndex}: {variant: VariantPlusOneModel, variantIndex: number}) => {
   return (
-    <div className={style.variantContainer}>
+    <div className={variantIndex % 2 !== 0 ? style.variantContainer : style.reverseVariantContainer}>
       {variant.people.map((person, index) => <div key={index}><Person person={person} variantIndex={variantIndex} /></div>)}
     </div>
   );