Breaking: Quote styling rework (fixes adaptlearning#351) (adaptlearni…

…ng#370)
redwoodperforms · Dec 7, 2022 · 499412e · 499412e
1 parent 45ae4fd
commit 499412e
Show file tree

Hide file tree

Showing 5 changed files with 98 additions and 26 deletions.
diff --git a/less/_defaults/_colors.less b/less/_defaults/_colors.less
@@ -4,6 +4,7 @@
 @blueDark: #263944;
 @grey: #9096A0;
 @greyDark: #4D4D4D;
+@greyLight: #f9f9f9;
 
 // These variables are used to change the colour of text
 // Primary use is for altering the text colour over a background image
@@ -173,6 +174,12 @@
 @drawer-progress-inverted-hover: @drawer-item-hover;
 @drawer-progress-border-hover: @drawer-progress-border;
 
+// Pull quote
+// --------------------------------------------------
+@pull-quote: @greyLight;
+@pull-quote-inverted: @font-color;
+@pull-quote-border: @blue;
+
 // Background
 // --------------------------------------------------
 @background: @black;

diff --git a/less/_defaults/_font-config.less b/less/_defaults/_font-config.less
@@ -151,25 +151,39 @@
 @notify-title-mobile-percentage: .75;
 @notify-title-letter-spacing: normal;
 
+// Components
+// --------------------------------------------------
 @item-title-size: 1.25rem;
 @item-title-family: @title-family;
 @item-title-weight: @font-weight-regular;
 @item-title-line-height: @title-line-height;
 @item-title-letter-spacing: normal;
 
+// Quote
+// --------------------------------------------------
+@quote-body-size: @body-size * 1.25;
+@quote-body-family: @body-family;
+@quote-body-weight: @font-weight-regular;
+@quote-body-line-height: @body-line-height;
+@quote-body-font-style: normal;
+@quote-body-letter-spacing: normal;
+
+@quote-attribution-size: @body-size;
+@quote-attribution-family: @body-family;
+@quote-attribution-weight: @font-weight-regular;
+@quote-attribution-line-height: @body-line-height;
+@quote-attribution-font-style: normal;
+@quote-attribution-letter-spacing: normal;
+
 // Pull quote
 // --------------------------------------------------
-@pull-quote-title-size: 1.25rem;
-@pull-quote-title-family: @title-family;
-@pull-quote-title-weight: @font-weight-regular;
-@pull-quote-title-line-height: @title-line-height;
-@pull-quote-font-style: italic;
-@pull-quote-letter-spacing: normal;
-
-@pull-quote-body-size: 1rem;
+@pull-quote-body-size: @body-size * 2;
 @pull-quote-body-family: @body-family;
 @pull-quote-body-weight: @font-weight-bold;
 @pull-quote-body-line-height: @body-line-height;
+@pull-quote-body-font-style: normal;
+@pull-quote-body-letter-spacing: normal;
+@pull-quote-body-mobile-percentage: .75;
 
 // Drawer
 // --------------------------------------------------

diff --git a/less/_defaults/_font-mixins.less b/less/_defaults/_font-mixins.less
@@ -243,21 +243,39 @@ strong {
   letter-spacing: @item-title-letter-spacing;
 }
 
-.pull-quote-title() {
-  font-size: @pull-quote-title-size;
-  font-family: @pull-quote-title-family;
-  font-weight: @pull-quote-title-weight;
-  line-height: @pull-quote-title-line-height;
-  font-style: @pull-quote-font-style;
-  letter-spacing: @pull-quote-letter-spacing;
-  color: inherit;
+// Quote
+// --------------------------------------------------
+.quote-body() {
+  font-size: @quote-body-size;
+  font-family: @quote-body-family;
+  font-weight: @quote-body-weight;
+  line-height: @quote-body-line-height;
+  font-style: @quote-body-font-style;
+  letter-spacing: @quote-body-letter-spacing;
+}
+
+.quote-attribution() {
+  font-size: @quote-attribution-size;
+  font-family: @quote-attribution-family;
+  font-weight: @quote-attribution-weight;
+  line-height: @quote-attribution-line-height;
+  font-style: @quote-attribution-font-style;
+  letter-spacing: @quote-attribution-letter-spacing;
 }
 
+// Pull quote
+// --------------------------------------------------
 .pull-quote-body() {
-  font-size: @pull-quote-body-size;
+  font-size: @pull-quote-body-size * @pull-quote-body-mobile-percentage;
   font-family: @pull-quote-body-family;
   font-weight: @pull-quote-body-weight;
   line-height: @pull-quote-body-line-height;
+  font-style: @pull-quote-body-font-style;
+  letter-spacing: @pull-quote-body-letter-spacing;
+
+  @media (min-width: @device-width-medium) {
+    font-size: @pull-quote-body-size;
+  }
 }
 
 // Left over - to sort

diff --git a/less/core/global.less b/less/core/global.less
@@ -43,3 +43,45 @@ body {
 }
 
 }
+
+// Quote related styling
+// override browser defined margins with rem unit
+blockquote,
+figure {
+  margin: @item-margin * 2;
+}
+
+// styled quote with attribution
+.figure-quote {
+  margin: 0;
+  .quote-body;
+}
+
+.figure-quote figcaption {
+  margin: @item-margin * 2;
+  .quote-attribution;
+}
+
+// styled pull quote
+.aside-pull-quote {
+  margin: @item-margin * 2;
+  padding: @item-padding;
+  border-bottom: 2px solid @pull-quote-border;
+  background-color: @pull-quote;
+  color: @pull-quote-inverted;
+ .pull-quote-body;
+
+  @media (min-width: @device-width-medium) {
+    margin: @item-margin * 4;
+    padding: @item-padding * 2;
+  }
+}
+
+// non-semantic visual font styles
+.is-bold {
+  font-weight: @font-weight-bold;
+}
+
+.is-italic {
+  font-style: italic;
+}
diff --git a/less/plugins/adapt-contrib-text/text.less b/less/plugins/adapt-contrib-text/text.less