From 8d5798f34a82f65fc5fdeddb3113f2c5f843053a Mon Sep 17 00:00:00 2001 From: Giles Dring Date: Fri, 18 Oct 2024 12:40:26 +0100 Subject: [PATCH] Update strategy presentation for consistency with design system --- src/_components/Quote.vto | 7 - src/_components/Stakeholder.vto | 3 - src/_includes/css/colour.css | 4 +- src/_includes/css/utils.css | 20 +++ src/_includes/templates/presentation.vto | 6 - src/assets/css/reveal-bd25.scss | 157 ++++++------------ src/strategy/_components/Quote.vto | 8 + src/strategy/_components/Stakeholder.vto | 3 + src/strategy/_partials/0-title.vto | 2 +- src/strategy/_partials/1-summary.vto | 4 +- src/strategy/_partials/2-principles.vto | 14 +- src/strategy/_partials/3-stakeholders.vto | 18 +- src/strategy/_partials/4-data-sources.vto | 2 +- .../_partials/5-technical-platform.vto | 8 +- src/strategy/_partials/6-outline-plan.vto | 2 +- src/strategy/_partials/7-references.vto | 6 +- 16 files changed, 109 insertions(+), 155 deletions(-) delete mode 100644 src/_components/Quote.vto delete mode 100644 src/_components/Stakeholder.vto create mode 100644 src/strategy/_components/Quote.vto create mode 100644 src/strategy/_components/Stakeholder.vto diff --git a/src/_components/Quote.vto b/src/_components/Quote.vto deleted file mode 100644 index 4b00927..0000000 --- a/src/_components/Quote.vto +++ /dev/null @@ -1,7 +0,0 @@ ---- -css: | - .quote-mark { - color: var(--color-darkgrey); - } ---- -“{{ content }}” \ No newline at end of file diff --git a/src/_components/Stakeholder.vto b/src/_components/Stakeholder.vto deleted file mode 100644 index 56fed6c..0000000 --- a/src/_components/Stakeholder.vto +++ /dev/null @@ -1,3 +0,0 @@ -

{{ name }}

-{{ if examples }}

{{ examples |> join(', ') }}

{{ /if }} -

Aim: {{ aim }}

diff --git a/src/_includes/css/colour.css b/src/_includes/css/colour.css index f52a5a0..3eaf259 100644 --- 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 index c115da6..2204560 100644 --- 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%); + } } \ No newline at end of file diff --git a/src/_includes/templates/presentation.vto b/src/_includes/templates/presentation.vto index aca8226..fe02a8f 100644 --- 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 --- - -
{{ content }} diff --git a/src/assets/css/reveal-bd25.scss b/src/assets/css/reveal-bd25.scss index c9704cc..316bc41 100644 --- 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 new file mode 100644 index 0000000..523bda4 --- /dev/null +++ b/src/strategy/_components/Quote.vto @@ -0,0 +1,8 @@ +--- +css: | + q::before, + q::after { + color: var(--color-grey); + } +--- +{{ content }} \ No newline at end of file diff --git a/src/strategy/_components/Stakeholder.vto b/src/strategy/_components/Stakeholder.vto new file mode 100644 index 0000000..be91f5c --- /dev/null +++ b/src/strategy/_components/Stakeholder.vto @@ -0,0 +1,3 @@ +

{{ name }}

+{{ if examples }}

{{ examples |> join(', ') }}

{{ /if }} +

Aim: {{ aim }}

diff --git a/src/strategy/_partials/0-title.vto b/src/strategy/_partials/0-title.vto index 503c62c..e1a949b 100644 --- a/src/strategy/_partials/0-title.vto +++ b/src/strategy/_partials/0-title.vto @@ -1,4 +1,4 @@ -
+
Bradford 2025 logo Bradford 2025 diff --git a/src/strategy/_partials/1-summary.vto b/src/strategy/_partials/1-summary.vto index 4145a69..af990e2 100644 --- a/src/strategy/_partials/1-summary.vto +++ b/src/strategy/_partials/1-summary.vto @@ -1,4 +1,4 @@ -
+

Introduction

This short presentation outlines the @@ -15,7 +15,7 @@

Open data workstream

-
    +
    • Publish output indicators openly…
      Available for anyone to find and use
      diff --git a/src/strategy/_partials/2-principles.vto b/src/strategy/_partials/2-principles.vto index c84ed1b..d6452ee 100644 --- a/src/strategy/_partials/2-principles.vto +++ b/src/strategy/_partials/2-principles.vto @@ -1,4 +1,4 @@ -
      +

      Principles

      A clear set of principles will help justify the organisational change. @@ -7,7 +7,7 @@

      Principles

      -
      +
      Data-literate organisation
      @@ -32,11 +32,11 @@
      \ No newline at end of file diff --git a/src/strategy/_partials/3-stakeholders.vto b/src/strategy/_partials/3-stakeholders.vto index a105e17..23f9b4d 100644 --- a/src/strategy/_partials/3-stakeholders.vto +++ b/src/strategy/_partials/3-stakeholders.vto @@ -1,4 +1,4 @@ -
      +

      Stakeholders

      We need to know who will use the data so we can ensure we meet their needs. @@ -22,7 +22,7 @@

      The following pages summarise stakeholder needs using this format →

      -
      {{ comp.Stakeholder({ @@ -36,9 +36,9 @@

      Internal stakeholders

      -
        +
          {{ for s of stakeholders |> filter(s => s.type === 'internal') }} -
        • +
        • {{ comp.Stakeholder({ name: s.name, examples: s.examples, aim: s.aim }) }}
          • {{ /for }} @@ -50,7 +50,7 @@

          There are some overriding internal aims

          -
            +
            • Information is easily at hand and reliable
            • Feedback loops are in place, allowing early course corrections
            • Time spent writing reports (e.g. for funders) is reduced
              • @@ -59,9 +59,9 @@

              Direct stakeholders

              -
                +
                  {{ for s of stakeholders |> filter(s => s.type === 'direct') }} -
                • +
                • {{ comp.Stakeholder({ name: s.name, examples: s.examples, aim: s.aim }) }}
                  • {{ /for }} @@ -73,9 +73,9 @@

                  Indirect stakeholders

                  -
                    +
                      {{ for s of stakeholders |> filter(s => s.type === 'indirect') }} -
                    • +
                    • {{ comp.Stakeholder({ name: s.name, examples: s.examples, aim: s.aim }) }}
                      • {{ /for }} diff --git a/src/strategy/_partials/4-data-sources.vto b/src/strategy/_partials/4-data-sources.vto index e1f5923..366c24a 100644 --- a/src/strategy/_partials/4-data-sources.vto +++ b/src/strategy/_partials/4-data-sources.vto @@ -1,4 +1,4 @@ -
                      +

                      Data Sources

                      We need to catalogue what data will be published and where it will be sourced. diff --git a/src/strategy/_partials/5-technical-platform.vto b/src/strategy/_partials/5-technical-platform.vto index 08467cb..60c8e6a 100644 --- a/src/strategy/_partials/5-technical-platform.vto +++ b/src/strategy/_partials/5-technical-platform.vto @@ -1,4 +1,4 @@ -

                      +

                      Technical Platform

                      We need to document how the data is processed, stored and presented. @@ -34,7 +34,7 @@

                      Pipelines are responsible for extracting data from source systems and getting ready for publication:

                      -
                        +
                        • Cleansing
                          …validating, fixing and converting varying data formats.
                        • Anonymising
                          …removing personally identifiable data so it is safe to publish.
                        • Summarising
                          …by event, date, geography, etc.
                          • @@ -84,7 +84,7 @@

                          Geographies are difficult

                          -
                          +
                          Bradford district
                          “Official” boundary of Bradford 2025 UK City of Culture;
                          @@ -140,7 +140,7 @@ {{ set labels = geojson.bd_wards.features |> map(x => x.properties) |> map(x => ({ name: x.WD24NM, latitude: x.LAT, longitude: x.LONG, "font-size": 16 })) }} -
                          +
                          {{ comp.oi.map.svg({ config: { geojson: { key: "WD24CD", data: geojson.bd_wards }, bounds: { diff --git a/src/strategy/_partials/6-outline-plan.vto b/src/strategy/_partials/6-outline-plan.vto index 85384e7..5f91131 100644 --- a/src/strategy/_partials/6-outline-plan.vto +++ b/src/strategy/_partials/6-outline-plan.vto @@ -1,4 +1,4 @@ -
                          +

                          Outline plan

                          Understanding critical dependencies will help ensure appropriate planning of milestones. diff --git a/src/strategy/_partials/7-references.vto b/src/strategy/_partials/7-references.vto index c61a266..711777d 100644 --- a/src/strategy/_partials/7-references.vto +++ b/src/strategy/_partials/7-references.vto @@ -1,12 +1,12 @@ -

                          +

                          References

                          Links

                          -
                          \ No newline at end of file