nationalarchives · jrrichardbrown · Sep 18, 2024 · Sep 18, 2024 · Sep 18, 2024 · Sep 18, 2024
diff --git a/app/frontend/advanced.html b/app/frontend/advanced.html
@@ -5,6 +5,7 @@
   <include src="./partials/head-content.html"></include>
   <link rel="stylesheet" href="styles/table.css" />
   <link rel="stylesheet" href="styles/advanced.css" />
+  <link rel="stylesheet" href="styles/model-diagram.css" />
   <script src="scripts/advanced-default.js"></script>
   <script src="scripts/api.js"></script>
   <script src="scripts/questions-object.js"></script>

diff --git a/app/frontend/content/definitions.html b/app/frontend/content/definitions.html
@@ -6,7 +6,7 @@ <h2>Learn about DiAGRAM</h2>
     <p>DiAGRAM tells you how well you are managing your digital preservation risks. It does this by calculating two probabilities:</p>
 
     <ol>
-      <li>intellectual control defined as the probability that you have full knowledge of the file’s content, provenance and conditions of use</li>
+      <li>intellectual control defined as the probability that you have full knowledge of the file's content, provenance and conditions of use</li>
       <li>renderability defined as the probability that you can provide a sufficiently useful representation of the original file</li>
     </ol>
 

diff --git a/app/frontend/content/home.html b/app/frontend/content/home.html
@@ -1,12 +1,12 @@
 <main id="main" tabindex="-1">
     <div class="box-body">
-      <h2 align="center" class="main-title">
+      <h2 class="main-title text-center">
         DiAGRAM - The <b>Di</b>gital <b>A</b>rchiving <b>G</b>raphical <b>R</b>isk <b>A</b>ssessment <b>M</b>odel
       </h2>
-      <div style="text-align:center">
+      <div class="text-center">
         <img src="www/diagram_logo_transparent.png" srcset="www/diagram_logo_transparent.png 1x, www/[email protected] 2x, www/[email protected] 3x" width="400px" alt="" class="block">
       </div>
-      <h3 align="center">Version 1.0.0</h3>
+      <h3 class="text-center">Version 1.0.0</h3>
       <p>DiAGRAM is an online tool designed to help archivists manage the risks to their digital collections. By answering a <a href="www/final_questions.pdf" target="_blank" download="">set of questions</a> relating to archives such as storage media, system security and technical skills, the tool will use statistical methods to calculate the probability that your digital material is preserved.</p>
 
       <h4>Who created it?</h4>

diff --git a/app/frontend/definitions.html b/app/frontend/definitions.html
@@ -1,8 +1,9 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <title>Learn about DiAGRAM - DiAGRAM</title>
-  <include src="./partials/head-content.html"></include>
+    <title>Learn about DiAGRAM - DiAGRAM</title>
+    <include src="./partials/head-content.html"></include>
+    <link rel="stylesheet" href="styles/model-diagram.css" />
 </head>
 <body data-page="definitions">
     <div class="outer-wrapper">

diff --git a/app/frontend/index.html b/app/frontend/index.html
@@ -1,8 +1,9 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <title>Home page - DiAGRAM</title>
-  <include src="./partials/head-content.html"></include>
+    <title>Home page - DiAGRAM</title>
+    <include src="./partials/head-content.html"></include>
+    <link rel="stylesheet" href="styles/model-diagram.css" />
 </head>
 <body data-page="index">
     <div class="outer-wrapper">

diff --git a/app/frontend/styles/model-diagram.css b/app/frontend/styles/model-diagram.css
@@ -0,0 +1,107 @@
+figure > svg#diagram-network .st1 {
+    fill: #f9f6e2;
+    stroke: none;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    stroke-width: 0.75
+}
+
+figure > svg#diagram-network .st2 {
+    fill: #48cd00;
+    marker-end: url(#mrkr13-6);
+    stroke: #000000;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    stroke-width: 0.75
+}
+
+figure > svg#diagram-network .st3 {
+    fill: #000000;
+    fill-opacity: 1;
+    stroke: #000000;
+    stroke-opacity: 1;
+    stroke-width: 0.22935779816514
+}
+
+figure > svg#diagram-network .st4 {
+    fill: #000000;
+    font-family: Roboto Mono;
+    font-size: 1.25em
+}
+
+figure > svg#diagram-network .st5 {
+    font-size: 1em
+}
+
+figure > svg#diagram-network .st6 {
+    fill: #48cd00;
+    stroke: #000000;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    stroke-width: 0.75
+}
+
+figure > svg#diagram-network .st7 {
+    fill: #ffffff;
+    stroke: #000000;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    stroke-width: 0.75
+}
+
+figure > svg#diagram-network .st8 {
+    marker-end: url(#mrkr13-6);
+    stroke: #000000;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    stroke-width: 0.75
+}
+
+figure > svg#diagram-network .st9 {
+    fill: #ffffff;
+    marker-end: url(#mrkr13-6);
+    stroke: #000000;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    stroke-width: 0.75
+}
+
+figure > svg#diagram-network .st10 {
+    fill: #5400cd;
+    marker-end: url(#mrkr13-6);
+    stroke: #000000;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    stroke-width: 0.75
+}
+
+figure > svg#diagram-network .st11 {
+    fill: #ffffff;
+    font-family: Roboto Mono;
+    font-size: 1.25em
+}
+
+figure > svg#diagram-network .st12 {
+    fill: #ff6e3a;
+    stroke: #000000;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    stroke-width: 0.75
+}
+
+figure > svg#diagram-network .st13 {
+    fill: none;
+    fill-rule: evenodd;
+    font-size: 12px;
+    overflow: visible;
+    stroke-linecap: square;
+    stroke-miterlimit: 3
+}
+
+figure > svg#diagram-network text {
+    user-select: none
+}
+
+figure > svg#diagram-network .noStroke {
+    stroke: none;
+}
diff --git a/app/frontend/styles/styles.css b/app/frontend/styles/styles.css
@@ -23,6 +23,9 @@ h1, h2, h3, h4, h5, h6 {
     font-weight: bold;
 }
 
+.text-center {
+    text-align: center;
+}
 
 .box-body h1,
 .box-body h2,
@@ -49,6 +52,7 @@ h1, h2, h3, h4, h5, h6 {
 
 h2.main-title {
     font-family: 'supria-sans-condensed', sans-serif;
+    font-weight: normal;
 }
 
 .outer-wrapper, .main-and-foot {

diff --git a/app/frontend/www/diagram.svg b/app/frontend/www/diagram.svg