Update manifest JSON

app/static/manifest.json

@@ -1,24 +1,30 @@
 {
-  "name": "National Archives",
-  "short_name": "TNA",
+  "short_name": "National Archives",
+  "name": "The National Archives",
   "theme_color": "#000",
   "_icons": [
     {
       "src": "/static/assets/images/apple-touch-icon-152x152.png",
       "type": "image/png",
-      "sizes": "152x152"
+      "sizes": "152x152",
+      "purpose": "maskable"
     },
     {
       "src": "/static/assets/images/apple-touch-icon-167x167.png",
       "type": "image/png",
-      "sizes": "167x167"
+      "sizes": "167x167",
+      "purpose": "maskable"
     },
     {
       "src": "/static/assets/images/apple-touch-icon-180x180.png",
       "type": "image/png",
-      "sizes": "180x180"
+      "sizes": "180x180",
+      "purpose": "maskable"
     }
   ],
+  "start_url": "/explore-the-collection/?source=pwa",
+  "scope": "/explore-the-collection/",
+  "display": "minimal-ui",
   "background_color": "#000",
   "dir": "ltr",
   "lang": "en-GB"

app/templates/base.html

@@ -21,7 +21,7 @@
 {% endblock %}
 
 {% block head %}
-<link rel=manifest href={{ url_for('static', filename='manifest.json') }}>
+<link rel="manifest" href="{{ url_for('static', filename='manifest.json') }}">
 {% endblock %}
 
 {% block stylesheets %}

app/templates/catalogue/archive.html

@@ -2,6 +2,11 @@
 
 {%- from 'components/button/macro.html' import tnaButton -%}
 
+{% block stylesheets %}
+{{ super() }}
+<link rel="stylesheet" href="{{ url_for('static', filename='catalogue.min.css') }}">
+{% endblock %}
+
 {% block beforeContent %}
 {% if request.referrer %}
 <!-- <div class="tna-container">

app/templates/catalogue/creator.html

@@ -3,6 +3,11 @@
 {%- from 'components/button/macro.html' import tnaButton -%}
 {%- from 'catalogue/elements/discovery.html' import discovery_info -%}
 
+{% block stylesheets %}
+{{ super() }}
+<link rel="stylesheet" href="{{ url_for('static', filename='catalogue.min.css') }}">
+{% endblock %}
+
 {% block beforeContent %}
 {% if request.referrer %}
 <!-- <div class="tna-container">

app/templates/catalogue/person.html

@@ -3,6 +3,11 @@
 {%- from 'components/button/macro.html' import tnaButton -%}
 {%- from 'catalogue/elements/discovery.html' import discovery_info -%}
 
+{% block stylesheets %}
+{{ super() }}
+<link rel="stylesheet" href="{{ url_for('static', filename='catalogue.min.css') }}">
+{% endblock %}
+
 {% block beforeContent %}
 {% if request.referrer %}
 <!-- <div class="tna-container">

app/templates/catalogue/record.html

@@ -3,6 +3,11 @@
 {%- from 'components/button/macro.html' import tnaButton -%}
 {%- from 'catalogue/elements/discovery.html' import discovery_info -%}
 
+{% block stylesheets %}
+{{ super() }}
+<link rel="stylesheet" href="{{ url_for('static', filename='catalogue.min.css') }}">
+{% endblock %}
+
 {% block beforeContent %}
 {% if request.referrer %}
 <!-- <div class="tna-container">

app/templates/explore/base.html

@@ -4,7 +4,13 @@
 
 {% block pageTitle %}{{ page_data['title'] }} - {{ super() }}{% endblock %}
 
+{% block stylesheets %}
+{{ super() }}
+<link rel="stylesheet" href="{{ url_for('static', filename='articles.min.css') }}">
+{% endblock %}
+
 {% block head %}
+{{ super() }}
 {{ meta({
   'title': page_data['meta']['seo_title'] or page_data['title'],
   'description': page_data['meta']['search_description'],

app/templates/search/base.html

@@ -7,7 +7,13 @@
 
 {% block pageTitle %}Search - {{ super() }}{% endblock %}
 
+{% block stylesheets %}
+{{ super() }}
+<link rel="stylesheet" href="{{ url_for('static', filename='search.min.css') }}">
+{% endblock %}
+
 {% block head %}
+{{ super() }}
 {{ meta({
   'title': 'Search for ' + request.args['q'] if 'q' in request.args else 'Search',
   'description': 'Search results for ' + request.args['q'] if 'q' in request.args else ''

package.json

@@ -1,9 +1,9 @@
 {
   "scripts": {
-    "build:css": "sass --style=compressed --load-path=node_modules --embed-sources src/styles/app.scss app/static/app.min.css",
+    "build:css": "sass --style=compressed --load-path=node_modules --embed-sources src/styles/app.scss:app/static/app.min.css src/styles/search.scss:app/static/search.min.css src/styles/articles.scss:app/static/articles.min.css src/styles/catalogue.scss:app/static/catalogue.min.css",
     "build:js": "webpack",
     "build": "npm run build:css && npm run build:js",
-    "dev:css": "sass --load-path=node_modules --watch src/styles/app.scss app/static/app.min.css",
+    "dev:css": "sass --load-path=node_modules --watch src/styles/app.scss:app/static/app.min.css src/styles/search.scss:app/static/search.min.css src/styles/articles.scss:app/static/articles.min.css src/styles/catalogue.scss:app/static/catalogue.min.css",
     "dev:js": "webpack --config webpack.config.js --mode=development --watch",
     "dev": "npm run dev:css & npm run dev:js &",
     "lint": "prettier --check src && stylelint 'src/styles/**/*.scss' && eslint 'src/scripts/**/*.js'",

src/styles/app.scss

@@ -15,11 +15,8 @@
 
 @use "modules/frontend-overrides";
 @use "modules/generics";
-@use "modules/articles";
 @use "modules/authors";
-@use "modules/catalogue";
 @use "modules/feedback";
-@use "modules/search";
 
 .tna-template--yellow-accent {
   .tna-ul li::marker,