Add concept of 'page header content' to make responsive work easier

- Cleanup code duplication between page render and home page render
- Add a separate page header content for each page, so we can sttyle
  title as part of hero correctly without hacks that break responsiveness
- Make a properly responsive navbar
- Responsive height for logo

Ref 2i2c-org#82

comptest/comptest/settings.py

@@ -225,6 +225,7 @@
     <p>Change this to your custom footer</p>
 </div>
 """
+SITE_PAGE_HEADER_IMAGE_URL = ""
 
 django_yamlconf.load()
 django_yamlconf.list_attrs()

comptest/web/context_processors.py

@@ -13,4 +13,5 @@ def site_display_settings(request):
         "site_name": settings.SITE_NAME,
         "site_logo_url": settings.SITE_LOGO_URL,
         "site_footer_html": settings.SITE_FOOTER_HTML,
+        "site_page_header_image_url": settings.SITE_PAGE_HEADER_IMAGE_URL
     }

comptest/web/migrations/0018_page_header_content.py

@@ -0,0 +1,20 @@
+# Generated by Django 5.0.7 on 2024-09-27 09:03
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("web", "0017_alter_contentfile_slug"),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name="page",
+            name="header_content",
+            field=models.TextField(
+                blank=True, help_text="Content to use as page header", null=True
+            ),
+        ),
+    ]

comptest/web/models.py

@@ -99,6 +99,12 @@ class MimeType(models.TextChoices):
 
     content = models.TextField(help_text="Markdown specifying the page's content")
 
+    header_content = models.TextField(
+        help_text="Content to use as page header",
+        null=True,
+        blank=True
+    )
+
     def save(self, *args, **kwargs):
         if not self.is_home:
             return super().save(*args, **kwargs)

comptest/web/static/web/index.scss

@@ -12,3 +12,33 @@ h5,
 h6 {
   font-family: Merriweather, serif;
 }
+
+/* Site logo */
+.navbar-brand img {
+  @include rfs(50px, height);
+}
+
+.page-header {
+  @include rfs(2rem, padding-bottom);
+}
+
+.page-header {
+  @include rfs(2rem, padding-bottom);
+}
+
+nav.navbar {
+    background-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, #000000 100%);
+}
+
+nav.navbar a {
+    color: white
+}
+
+nav.navbar a:hover {
+    color: #aaa;
+}
+
+.page-header-with-image {
+  background-size: cover;
+  background-position: center;
+}