refactor(blockquote): fix responsive margins and sizes rems

eea · Feb 18, 2022 · 209f94f · 209f94f
1 parent 7a24d9c
commit 209f94f
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 16 deletions.
diff --git a/theme/themes/eea/extras/blockquote.less b/theme/themes/eea/extras/blockquote.less
@@ -8,24 +8,47 @@
 *******************************/
 
 .eea.blockquote {
-  border-left: @blockquoteBorderLeft;
+  border-left: @mobileBlockquoteBorderLeft;
 
   .quote {
     display: flex;
     flex-direction: column;
-    margin: @quoteMargin;
+    margin: @mobileQuoteMargin;
     gap: @quoteGap;
     color: @quoteColor;
-    font-size: @quoteFontSize;
+    font-size: @mobileQuoteFontSize;
     font-weight: @quoteFontWeight;
 
     .meta {
       margin: @metaMargin;
-      font-size: @metaFontSize;
+      font-size: @mobileMetaFontSize;
       font-weight: @metaWeight;
       align-self: @metaAlignSelf;
     }
   }
 }
 
+@media only screen and (min-width: @tabletBreakpoint) {
+  .eea.blockquote {
+    border-left: @tabletBlockquoteBorderLeft;
+    .quote {
+      margin: @tabletQuoteMargin;
+      font-size: @tabletQuoteFontSize;
+      .meta {
+        font-size: @tabletMetaFontSize;
+      }
+    }
+  }
+}
+
+@media only screen and (min-width: @computerBreakpoint) {
+  .eea.blockquote .quote {
+    margin: @computerQuoteMargin;
+    font-size: @computerQuoteFontSize;
+    .meta {
+      font-size: @computerMetaFontSize;
+    }
+  }
+}
+
 .loadUIOverrides();
diff --git a/theme/themes/eea/extras/blockquote.variables b/theme/themes/eea/extras/blockquote.variables
@@ -2,19 +2,26 @@
             Blockquote
 *******************************/
 /* Body */
-@blockquoteBorderLeft : 10px solid @secondaryColor;
-@childrenBorderLeft   : none;
+@mobileBlockquoteBorderLeft : @5px solid @secondaryColor;
+@tabletBlockquoteBorderLeft : @10px solid @secondaryColor;
+@childrenBorderLeft         : none;
 
 /* Quote */
-@quoteColor      : @secondaryColor;
-@quoteMargin     : @relative12px @relative30px;
-@quoteGap        : @relative12px;
-@quoteColor      : @japaneseIndigo;
-@quoteFontSize   : @h5;
-@quoteFontWeight : 700; 
+@quoteColor            : @secondaryColor;
+@mobileQuoteMargin     : 0.75rem 0.625rem;
+@tabletQuoteMargin     : 0.75rem 1rem;
+@computerQuoteMargin   : 0.75rem 1.25rem;
+@quoteGap              : 0.75rem;
+@quoteColor            : @japaneseIndigo;
+@mobileQuoteFontSize   : 0.688rem;
+@tabletQuoteFontSize   : @h6;
+@computerQuoteFontSize : @h5;
+@quoteFontWeight       : 700; 
 
 /* Meta */
-@metaMargin    : 0;
-@metaWeight    : 400;
-@metaFontSize  : @h5;
-@metaAlignSelf : start;
+@metaMargin           : 0;
+@metaWeight           : 400;
+@mobileMetaFontSize   : 0.688rem;
+@tabletMetaFontSize   : @h6;
+@computerMetaFontSize : @h5;
+@metaAlignSelf        : start;