Update strategy presentation for consistency with design system

open-innovations · Oct 18, 2024 · 8d5798f · 8d5798f
1 parent 02a51b9
commit 8d5798f
Show file tree

Hide file tree

Showing 16 changed files with 109 additions and 155 deletions.
diff --git a/src/_components/Quote.vto b/src/_components/Quote.vto
diff --git a/src/_components/Stakeholder.vto b/src/_components/Stakeholder.vto
diff --git a/src/_includes/css/colour.css b/src/_includes/css/colour.css
@@ -11,7 +11,7 @@
     --color-darkpink: #C9AFBB;
     --color-green: #45D108;
     --color-lightgreen: #ACE892;
-    --color-darkgreen: hsl(102, 50%, 33%);
+    --color-darkgreen: #437e2a;
     --color-yellow: #E0B942;
     --color-lightyellow: #EAD79F;
     --color-grey: #c7c7c7;
@@ -27,6 +27,8 @@
 
     --block-fg: var(--color-white);
     --block-bg: var(--color-offblack);
+
+    --post-it-bg: var(--color-lightgrey);
 }
 
 ::selection {

diff --git a/src/_includes/css/utils.css b/src/_includes/css/utils.css
@@ -21,4 +21,24 @@
 
 .centred {
   text-align: center;
+}
+
+.post-it {
+  position: relative;
+  outline: none;
+  flex-basis: 5em;
+  flex-grow: 0;
+  flex-shrink: 0;
+  height: 4em;
+  background: #e4ae00;
+  padding: 0.5em;
+  &:before {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    /* width: 0; */
+    border-right: 0.5em solid var(--post-it-bg);
+    border-top: 0.5em solid hsl(46, 100%, 35%);
+  }
 }
diff --git a/src/_includes/templates/presentation.vto b/src/_includes/templates/presentation.vto
@@ -4,12 +4,6 @@ stylesheets:
   - /assets/vendor/reveal/dist/reveal.css
   - /assets/css/reveal-bd25.css
 ---
-<!-- TODO sort this out! -->
-<style>
-body {
-max-width: unset;
-}
-</style>
 <div class="reveal">
   <div class="slides">
     {{ content }}

diff --git a/src/assets/css/reveal-bd25.scss b/src/assets/css/reveal-bd25.scss
@@ -20,13 +20,13 @@
 $mainFont: var(--fontstack-main);
 $mainColor: var(--color-black);
 $headingFont: var(--fontstack-main);
-$headingColor: #000;
+$headingColor: var(--color-offblack);
 $headingTextShadow: none;
 $headingTextTransform: none;
 $backgroundColor: var(--color-lightgrey);
 $linkColorHover: #45d10a;
-$linkColor: darken($linkColorHover, 20%);
-$selectionBackgroundColor: rgba(228, 174, 0, 0.99);
+$linkColor: #437e2a;
+$selectionBackgroundColor: var(--color-pink);
 
 $headingFontWeight: lighter;
 
@@ -40,152 +40,89 @@ $overlayElementFgColor: 240, 240, 240;
 @import 'scss/theme.scss';
 // ---------------------------------------------
 
-:root {
-  --post-it-bg: var(--color-lightgrey);
-}
-
-body {
-  padding: 0;
-}
 // Reveal overrides
 .reveal {
-  // & .scroll-page-content, & .slide-background-content {
-  //   overflow: hidden;
-  //   &::after {
-  //     content: "For review";
-  //     display: block;
-  //     text-align: center;
-  //     font-size: 2rem;
-  //     padding: 0.5rem;
-  //     background: #e4ae00;
-  //     position: absolute;
-  //     top: 0;
-  //     right: 0;
-  //     width: 10em;
-  //     transform: translate(50%, -50%) rotate(45deg) translate(0, 6rem);
-  //   }
-  // }
-
-  & dl.grid {
-    display: grid;
-    grid-template-columns: 1fr 2fr;
-    gap: 1rem;
-    & dt, & dd { margin: 0; }
+  & a {
+    &:hover {
+      text-decoration: underline;
+    }
   }
-
-  & *[data-background-color="#1c1b1f"] {
+  & [data-background-color="var(--color-offblack)"] {
     & a {
       color: var(--color-yellow);
       &:hover {
-        color: var(--color-green);
-        text-decoration: underline;
+        color: var(--color-lightyellow);
       }
     }
   }
 
-  .impact-list {
-    list-style: none;
+  & .grid {
+    display: flex;
     padding: 0;
     margin: 0;
-    display: flex;
+    gap: 0.5em;
     justify-content: stretch;
-    & li {
-      flex-basis: 10em;
-      flex-grow: 0;
-      flex-shrink: 1;
-      background: var(--impact-bg, var(--color-grey));
-      padding: 0.5em;
-      display: flex;
-      flex-direction: column;
-      justify-content: space-between;
-      gap: 1em;
+    &.regular {
+      & > * {
+        flex-basis: 10em;
+      }
+    }
+    &.compact {
+      gap: 0;
+      flex-wrap: nowrap;
+      & > * {
+        flex-grow: 0;
+        flex-shrink: 1;
+      }
+    }
+    &.auto-colour > * {
       &:nth-child(3n+1) {
-        --impact-bg: var(--color-yellow);
+        background: var(--color-yellow);
       }
       &:nth-child(3n+2) {
-        --impact-bg: var(--color-green);
+        background: var(--color-green);
       }
       &:nth-child(3n) {
-        --impact-bg: var(--color-pink);
+        background: var(--color-pink);
       }
     }
-    & a {
-      color: inherit;
-      text-decoration: underline;
-    }
-    & .tag {
-      font-size: 0.7em;
-    }
-  }
-
-  .grid-block {
-    background: var(--bg-col);
-    padding: 0.6rem;
-    & :is(*, h4, p) {
-      margin: 0;
-      & + * {
-        margin-top: 0.5em;
+    &.auto-layout > * {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      gap: 1em;
+      & * {
+        margin: 0;
+        padding: 0;
       }
     }
-  }
-  ul.no-bullets {
-    list-style: none;
-    margin-inline: 0;
-    padding-inline: 0;
-  }
-  ul.flex-grid {
-    display: flex;
-    gap: 0.5em;
-    flex-wrap: wrap;
-    justify-content: stretch;
     & > * {
       flex-grow: 1;
       flex-shrink: 0;
       flex-basis: 10rem;
+      padding: 0.5em;
+    }
+    & .tag {
+      font-size: 0.7em;
     }
   }
 
-  .post-it {
-    position: relative;
-    outline: none;
-    flex-basis: 5em;
-    flex-grow: 0;
-    flex-shrink: 0;
-    height: 4em;
-    background: #e4ae00;
-    padding: 0.5em;
-    &:before {
-      content: '';
-      position: absolute;
-      bottom: 0;
-      right: 0;
-      /* width: 0; */
-      border-right: 0.5em solid var(--post-it-bg);
-      border-top: 0.5em solid hsl(46, 100%, 35%);
-    }
+  & dl.table {
+    display: grid;
+    grid-template-columns: 1fr 2fr;
+    gap: 1rem;
+    & dt, & dd { margin: 0; }
   }
 
-  .oi-map {
+  & .oi-map {
     flex-basis: 20vw;
     background: var(--color-midgrey);
     .skip-link { display: none; }
     svg {
-      /* max-height: 40vh !important; */
       .background .area path {
         stroke: var(--color-darkgrey);
         stroke-width: 1;
       }
     }
   }
-  .flexy {
-    display:flex;
-    gap:1rem;
-    justify-content:center;
-    & > * {
-      flex-shrink: 0;
-      flex-grow: 1;
-      flex-basis: 10vw;
-    }
-  }
-
 }
diff --git a/src/strategy/_components/Quote.vto b/src/strategy/_components/Quote.vto
@@ -0,0 +1,8 @@
+---
+css: |
+  q::before,
+  q::after {
+    color: var(--color-grey);
+  }
+---
+<q>{{ content }}</q>
diff --git a/src/strategy/_components/Stakeholder.vto b/src/strategy/_components/Stakeholder.vto
@@ -0,0 +1,3 @@
+<p style="font-weight: bold;flex-grow:0;">{{ name }}</p>
+{{ if examples }}<p style="font-style:italic;font-size:0.8em;margin:0;flex-grow:0;">{{ examples |> join(', ') }}</p>{{ /if }}
+<p style="font-size:0.8em;"><em>Aim:</em> {{ aim }}</p>
diff --git a/src/strategy/_partials/0-title.vto b/src/strategy/_partials/0-title.vto
@@ -1,4 +1,4 @@
-<section data-background-color="#1c1b1f">
+<section data-background-color="var(--color-offblack)">
   <div style="font-size:2em;display:flex;flex-direction:row;justify-content:center;align-items:center;">
   <img style="max-height:20vh;max-width:30vh;" src="/assets/images/logo.svg" alt="Bradford 2025 logo">
   <strong>Bradford 2025</strong>

diff --git a/src/strategy/_partials/1-summary.vto b/src/strategy/_partials/1-summary.vto
@@ -1,4 +1,4 @@
-<section data-background-color="#1c1b1f">
+<section data-background-color="var(--color-offblack)">
   <h2>Introduction</h2>
   <p>
     This short presentation outlines the
@@ -15,7 +15,7 @@
 <section>
   <h3>Open data workstream</h3>
 
-  <ul class="impact-list">
+  <ul class="grid compact regular auto-colour auto-layout">
   <li>
     <div>Publish <strong>output indicators</strong> openly&hellip;</div>
     <div class="tag">Available for anyone to find and use</div>

diff --git a/src/strategy/_partials/2-principles.vto b/src/strategy/_partials/2-principles.vto
@@ -1,4 +1,4 @@
-<section data-background-color="#1c1b1f" id="principles">
+<section data-background-color="var(--color-offblack)" id="principles">
   <h2>Principles</h2>
   <p>
     A clear set of principles will help justify the organisational change.
@@ -7,7 +7,7 @@
 
 <section>
   <h3>Principles</h3>
-  <dl class="grid" style="font-size: 0.8em;">
+  <dl class="table" style="font-size: 0.8em;">
     <dt>
       Data-literate organisation 
     </dt>
@@ -32,11 +32,11 @@
   </dl>
 
   <aside class="notes">
-    <ul class="no-bullets flex-grid">
-      <li class="post-it">Bold & transparent</li>
-      <li class="post-it">Own the discussion</li>
-      <li class="post-it">Automate updates</li>
-      <li class="post-it">&hellip;</li>
+    <ul>
+      <li>Bold & transparent</li>
+      <li>Own the discussion</li>
+      <li>Automate updates</li>
+      <li>&hellip;</li>
     </ul>
   </aside>
 </section>