impact areas page with placeholders, css changes

=> font sizes are more accurate to the mockups (adobe XD font sizes aren't true to other programs for some reason?)

app/impact_areas/migrations/0004_impactareaspage_impact_area_blocks.py

@@ -0,0 +1,21 @@
+# Generated by Django 4.2.7 on 2024-05-06 23:47
+
+from django.db import migrations
+import wagtail.blocks
+import wagtail.fields
+import wagtail.images.blocks
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('impact_areas', '0003_impactareaspage_image'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='impactareaspage',
+            name='impact_area_blocks',
+            field=wagtail.fields.StreamField([('image', wagtail.images.blocks.ImageChooserBlock()), ('title', wagtail.blocks.CharBlock(form_classname='title')), ('description', wagtail.blocks.RichTextBlock()), ('link', wagtail.blocks.URLBlock())], blank=True, use_json_field=True),
+        ),
+    ]

app/impact_areas/migrations/0005_alter_impactareaspage_impact_area_blocks.py

@@ -0,0 +1,21 @@
+# Generated by Django 4.2.7 on 2024-05-06 23:48
+
+from django.db import migrations
+import wagtail.blocks
+import wagtail.fields
+import wagtail.images.blocks
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('impact_areas', '0004_impactareaspage_impact_area_blocks'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='impactareaspage',
+            name='impact_area_blocks',
+            field=wagtail.fields.StreamField([('image', wagtail.images.blocks.ImageChooserBlock()), ('title', wagtail.blocks.CharBlock(form_classname='title')), ('description', wagtail.blocks.RichTextBlock()), ('link', wagtail.blocks.URLBlock())], null=True, use_json_field=True),
+        ),
+    ]

app/impact_areas/migrations/0006_alter_impactareaspage_impact_area_blocks.py

@@ -0,0 +1,21 @@
+# Generated by Django 4.2.7 on 2024-05-06 23:50
+
+from django.db import migrations
+import wagtail.blocks
+import wagtail.fields
+import wagtail.images.blocks
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('impact_areas', '0005_alter_impactareaspage_impact_area_blocks'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='impactareaspage',
+            name='impact_area_blocks',
+            field=wagtail.fields.StreamField([('image', wagtail.images.blocks.ImageChooserBlock()), ('title', wagtail.blocks.CharBlock(form_classname='title')), ('description', wagtail.blocks.CharBlock()), ('link', wagtail.blocks.URLBlock())], null=True, use_json_field=True),
+        ),
+    ]

app/impact_areas/migrations/0007_alter_impactareaspage_impact_area_blocks.py

@@ -0,0 +1,21 @@
+# Generated by Django 4.2.7 on 2024-05-06 23:54
+
+from django.db import migrations
+import wagtail.blocks
+import wagtail.fields
+import wagtail.images.blocks
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('impact_areas', '0006_alter_impactareaspage_impact_area_blocks'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='impactareaspage',
+            name='impact_area_blocks',
+            field=wagtail.fields.StreamField([('image', wagtail.images.blocks.ImageChooserBlock()), ('title', wagtail.blocks.CharBlock()), ('description', wagtail.blocks.RichTextBlock()), ('link', wagtail.blocks.URLBlock())], null=True, use_json_field=True),
+        ),
+    ]

app/impact_areas/migrations/0008_alter_impactareaspage_impact_area_blocks.py

@@ -0,0 +1,21 @@
+# Generated by Django 4.2.7 on 2024-05-06 23:58
+
+from django.db import migrations
+import wagtail.blocks
+import wagtail.fields
+import wagtail.images.blocks
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('impact_areas', '0007_alter_impactareaspage_impact_area_blocks'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='impactareaspage',
+            name='impact_area_blocks',
+            field=wagtail.fields.StreamField([('impact_area_block', wagtail.blocks.StructBlock([('image', wagtail.images.blocks.ImageChooserBlock()), ('title', wagtail.blocks.CharBlock()), ('description', wagtail.blocks.RichTextBlock()), ('link', wagtail.blocks.URLBlock())]))], null=True, use_json_field=True),
+        ),
+    ]

app/impact_areas/migrations/0009_alter_impactareaspage_impact_area_blocks.py

@@ -0,0 +1,21 @@
+# Generated by Django 4.2.7 on 2024-05-07 16:12
+
+from django.db import migrations
+import wagtail.blocks
+import wagtail.fields
+import wagtail.images.blocks
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('impact_areas', '0008_alter_impactareaspage_impact_area_blocks'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='impactareaspage',
+            name='impact_area_blocks',
+            field=wagtail.fields.StreamField([('impact_area_block', wagtail.blocks.StructBlock([('image', wagtail.images.blocks.ImageChooserBlock()), ('title', wagtail.blocks.CharBlock()), ('description', wagtail.blocks.RichTextBlock()), ('link', wagtail.blocks.URLBlock(null=True))]))], null=True, use_json_field=True),
+        ),
+    ]

app/impact_areas/migrations/0010_alter_impactareaspage_impact_area_blocks.py

@@ -0,0 +1,21 @@
+# Generated by Django 4.2.7 on 2024-05-07 16:13
+
+from django.db import migrations
+import wagtail.blocks
+import wagtail.fields
+import wagtail.images.blocks
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('impact_areas', '0009_alter_impactareaspage_impact_area_blocks'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='impactareaspage',
+            name='impact_area_blocks',
+            field=wagtail.fields.StreamField([('impact_area_block', wagtail.blocks.StructBlock([('image', wagtail.images.blocks.ImageChooserBlock()), ('title', wagtail.blocks.CharBlock()), ('description', wagtail.blocks.RichTextBlock()), ('link', wagtail.blocks.URLBlock(required=False))]))], null=True, use_json_field=True),
+        ),
+    ]

app/impact_areas/models.py

@@ -1,10 +1,23 @@
 from django.db import models
 
 from wagtail.models import Page
-from wagtail.fields import RichTextField
+from wagtail.fields import RichTextField, StreamField
+from wagtail.blocks import StreamBlock, CharBlock, URLBlock, RichTextBlock, StructBlock
+from wagtail.images.blocks import ImageChooserBlock
 from wagtail.admin.panels import FieldPanel, MultiFieldPanel
 
-# Create your models here.
+
+class IndividualBlock(StructBlock):
+    image = ImageChooserBlock()
+    title = CharBlock()
+    description = RichTextBlock()
+    link = URLBlock(required=False)
+
+
+class ImpactAreaBlock(StreamBlock):
+    impact_area_block = IndividualBlock()
+
+
 class ImpactAreasPage(Page):
     intro = RichTextField(blank=True)
 
@@ -17,9 +30,12 @@ class ImpactAreasPage(Page):
         help_text="Header image"
     )
 
+    impact_area_blocks = StreamField(ImpactAreaBlock(), use_json_field=True, null=True)
+
     content_panels = Page.content_panels + [
         MultiFieldPanel([
             FieldPanel('image'),
             FieldPanel('intro')
-        ], heading="Header section")
+        ], heading="Header section"),
+        FieldPanel('impact_area_blocks')
     ]

app/impact_areas/templates/impact_areas/impact_areas_page.html

@@ -11,10 +11,10 @@
 
 {% block content %}
     {% include "ui/components/BasePageHeader.html" with title=page.title intro=page.intro image=page.image %}
-    <div class="max-w-7xl mx-auto">
-        <p>
-            hi
-        </p>
+
+    <div class="max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-2 lg:gap-4 px-6 mt-6">
+        {% for block in page.impact_area_blocks %}
+            {% include "ui/components/LearnMoreAboutBlurbWithImage.html" with title=block.value.title description=block.value.description image=block.value.image link=block.value.link %}
+        {% endfor %}
     </div>
-
 {% endblock %}

app/ui/templates/ui/components/LearnMoreAboutBlurbWithImage.html

@@ -0,0 +1,26 @@
+{% load wagtailimages_tags %}
+{% image image original as image_p %}
+
+<div class="mx-4 my-8 lg:my-4">
+    <div class="bg-gradient-to-t from-black/70 to-transparent to-30%">
+        <img class="w-full h-72 object-cover -z-10 relative" src="{{ image_p.url }}" />
+    </div>
+
+    <h2 class="text-h3 font-bold py-1">
+        {{ title }}
+    </h2>
+
+    <div class="text-base py-1">
+        {{ description }}
+    </div>
+
+    <p class="text-h5 py-1">
+        <a href="{{ link }}">
+            <span class="border-b-hot-red border-b-2 pb-1">Learn More about {{ title }}</span>
+
+            <svg class="inline ml-4" xmlns="http://www.w3.org/2000/svg" width="10.808" height="16.817" viewBox="0 0 10.808 16.817">
+                <path id="Path_13007" data-name="Path 13007" d="M0,8.4,7,0l7,8.4" transform="translate(9.808 1.408) rotate(90)" fill="none" stroke="#d43f3f" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+            </svg>
+        </a>
+    </p>
+</div>

frontend/tailwind.config.js

@@ -37,8 +37,7 @@ module.exports = {
         h4: "var(--font-size-h4)", // 32pt
         h5: "var(--font-size-h5)", // 28pt
         intro: "var(--font-size-intro)", // 22pt
-        "base-lg": "var(--font-size-base-20)", // 20pt
-        "base-md": "var(--font-size-base-18)", // 18pt
+        base: "var(--font-size-base)", // 20pt
       },
       colors: {
         "hot-red": "var(--hot-red)",

hot_osm/static/css/hot_osm.css

@@ -16,26 +16,16 @@
     /* Font Family */
     --font-barlow: "Barlow Condensed", sans-serif;
     --font-archivo: "Archivo", sans-serif;
+    font-family: var(--font-archivo);
 
     /* Font Size */
-    --font-size-h1: 3.5rem;
-    /* 56pt */
-    --font-size-h2: 3rem;
-    /* 48pt */
-    --font-size-h3: 2.375rem;
-    /* 38pt */
-    --font-size-h4: 2rem;
-    /* 32pt */
-    --font-size-h5: 1.75rem;
-    /* 28pt */
-    --font-size-intro: 1.375rem;
-    /* 22pt */
-    --font-size-base-20: 1.25rem;
-    /* 20pt */
-    --font-size-base-18: 1.125rem;
-    /* 18pt */
-    --font-size-base-16: 1rem;
-    /* 16pt */
+    --font-size-h1: 2.55rem;
+    --font-size-h2: 2.11rem;
+    --font-size-h3: 1.77rem;
+    --font-size-h4: 1.66rem;
+    --font-size-h5: 1.33rem;
+    --font-size-intro: 1.11rem;
+    --font-size-base: 1rem;
 }
 
 /* Custom styling for the language select element */