Rationalise intro styles and ensure intro has its own custom font-size

helenb · helenb · commit ddd8fca9e10f · 2024-07-30T15:28:23.000+01:00
diff --git a/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/intro_block.html b/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/intro_block.html
@@ -1,4 +1,4 @@
 {% load wagtailcore_tags %}
-<div class="grid__intro streamfield__intro heading heading--four rich-text">
+<div class="grid__intro streamfield__intro rich-text">
     {{ value|richtext }}
 </div>
diff --git a/tbx/project_styleguide/templates/patterns/pages/service/service_page.html b/tbx/project_styleguide/templates/patterns/pages/service/service_page.html
@@ -8,8 +8,8 @@
         </div>
 
         {% if page.intro %}
-            <div class="grid__intro streamfield__intro">
-                <div class="heading heading--four">{{page.intro|richtext}}</div>
+            <div class="grid__intro streamfield__intro rich-text">
+                {{ page.intro|richtext }}
             </div>
         {% endif %}
 
diff --git a/tbx/project_styleguide/templates/patterns/pages/team/team_detail.html b/tbx/project_styleguide/templates/patterns/pages/team/team_detail.html
@@ -21,8 +21,8 @@
         </div>
 
         {% if page.intro %}
-            <div class="grid__intro streamfield__intro">
-                <div class="heading heading--four">{{page.intro|richtext}}</div>
+            <div class="grid__intro streamfield__intro rich-text">
+                {{ page.intro|richtext }}
             </div>
         {% endif %}
 
diff --git a/tbx/project_styleguide/templates/patterns/pages/work/work_page.html b/tbx/project_styleguide/templates/patterns/pages/work/work_page.html
@@ -3,7 +3,7 @@
 
 {% block intro %}
     {% if page.intro %}
-        <div class="streamfield__intro heading heading--four">
+        <div class="streamfield__intro rich-text">
             {{ page.intro|richtext }}
         </div>
     {% endif %}
diff --git a/tbx/static_src/sass/components/_streamfield.scss b/tbx/static_src/sass/components/_streamfield.scss
@@ -12,11 +12,11 @@
             &:last-child {
                 margin-bottom: 0;
             }
+        }
 
-            .template-standard-page &,
-            .template-blog-page & {
-                font-weight: $weight--medium;
-            }
+        // override the rich-text font-size
+        &.rich-text {
+            @include font-size(intro);
         }
     }
 
@@ -71,10 +71,12 @@
     .template-work-page &,
     .template-historical-work-page & {
         &__intro {
-            margin-bottom: $spacer-small;
+            margin-top: $spacer-small;
+            margin-bottom: $spacer-medium;
 
             @include media-query(large) {
                 margin-bottom: 0;
+                margin-top: 0;
             }
         }
     }
diff --git a/tbx/static_src/sass/config/_variables.scss b/tbx/static_src/sass/config/_variables.scss
@@ -373,6 +373,10 @@ $large-font-sizes: (
         32px,
         1.4,
     ),
+    intro: (
+        24px,
+        1.6,
+    ),
 );
 
 $small-font-sizes: (
@@ -448,6 +452,10 @@ $small-font-sizes: (
         32px,
         1.4,
     ),
+    intro: (
+        20px,
+        1.6,
+    ),
 );
 
 // --------------------------------- Sizing ------------------------------------

Original file line number	Diff line number	Diff line change
`@@ -12,11 +12,11 @@`
`12`	`12`	`&:last-child {`
`13`	`13`	`margin-bottom: 0;`
`14`	`14`	`}`
	`15`	`+ }`
`15`	`16`
`16`		`- .template-standard-page &,`
`17`		`- .template-blog-page & {`
`18`		`- font-weight: $weight--medium;`
`19`		`- }`
	`17`	`+ // override the rich-text font-size`
	`18`	`+ &.rich-text {`
	`19`	`+ @include font-size(intro);`
`20`	`20`	`}`
`21`	`21`	`}`
`22`	`22`
`@@ -71,10 +71,12 @@`
`71`	`71`	`.template-work-page &,`
`72`	`72`	`.template-historical-work-page & {`
`73`	`73`	`&__intro {`
`74`		`- margin-bottom: $spacer-small;`
	`74`	`+ margin-top: $spacer-small;`
	`75`	`+ margin-bottom: $spacer-medium;`
`75`	`76`
`76`	`77`	`@include media-query(large) {`
`77`	`78`	`margin-bottom: 0;`
	`79`	`+ margin-top: 0;`
`78`	`80`	`}`
`79`	`81`	`}`
`80`	`82`	`}`