diff --git a/src/_components/grid/autogrid.njk b/src/_components/grid/autogrid.njk
new file mode 100644
index 0000000..397aff8
--- /dev/null
+++ b/src/_components/grid/autogrid.njk
@@ -0,0 +1,22 @@
+---
+# https://css-tricks.com/a-responsive-grid-layout-with-no-media-queries/
+css: |
+ .auto-grid {
+ --auto-grid-min-size: 16rem;
+ --auto-grid-gap: 0.5rem;
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--auto-grid-min-size)), 1fr));
+ grid-gap: var(--auto-grid-gap);
+
+ .auto-grid h2 {
+ padding-top: 1em;
+ }
+ }
+---
+
+ {{- content | safe -}}
+
\ No newline at end of file
diff --git a/src/_data.yml b/src/_data.yml
index 46714a4..e6a863c 100644
--- a/src/_data.yml
+++ b/src/_data.yml
@@ -2,17 +2,17 @@ layout: template/page.njk
date: Git Last Modified
# Override the site logo colour here. Any CSS colour will work.
-logo_colour: black
+logo_colour: white
# Override the header class here. See https://open-innovations.org/brand for colour classes
-header_class: c5-bg
+header_class: b1-bg
# Automatically adds meta and social tags
# See https://lume.land/plugins/metas/
metas:
- site: Open Innovations Lume Template Site
- description: A template site for Open Innovations
- image: https://open-innovations.org/resources/images/logos/oi-square.png
- twitter: openinnovates
+ site: LCC Culture Dashboard
+ description: Visualising data on arts & culture for Leeds.
+ # image: https://open-innovations.org/resources/images/logos/oi-square.png
+ # twitter: openinnovates
lang: en
- keywords: [open, data, leeds, innovation]
\ No newline at end of file
+ keywords: [open, data, leeds, innovation, culture]
\ No newline at end of file
diff --git a/src/_data/dummy_headline.csv b/src/_data/dummy_headline.csv
new file mode 100644
index 0000000..7e6f79e
--- /dev/null
+++ b/src/_data/dummy_headline.csv
@@ -0,0 +1,5 @@
+Headline,Value,
+This,1,
+Is,2,
+A,3,
+Dashboard,4,
\ No newline at end of file
diff --git a/src/_data/dummy_linechart.csv b/src/_data/dummy_linechart.csv
new file mode 100644
index 0000000..444a54c
--- /dev/null
+++ b/src/_data/dummy_linechart.csv
@@ -0,0 +1,13 @@
+date,value,
+2001,1,
+2002,2,
+2003,3,
+2004,4,
+2005,5,
+2006,6,
+2007,7,
+2008,8,
+2009,9,
+2010,10,
+2011,11,
+2012,12,
diff --git a/src/_includes/css/nav.css b/src/_includes/css/nav.css
new file mode 100644
index 0000000..32ecea9
--- /dev/null
+++ b/src/_includes/css/nav.css
@@ -0,0 +1,70 @@
+.menu-items {
+ list-style: none;
+ position: absolute;
+ top: var(--header-height);
+ margin: 0;
+ display: flex;
+ line-height: 1.2em;
+ flex-direction: column;
+ left: 0;
+ right: 0;
+}
+.menu-items > li > a, .menu-toggle {
+ display: block;
+ padding: 0.8em;
+ font-size: 1.25em;
+ color: inherit;
+}
+.menu-toggle[aria-expanded=false] ~ .menu-items {
+ height: 0;
+ overflow: hidden;
+}
+.menu-toggle[aria-expanded=true] ~ .menu-items {
+ height: auto;
+ z-index: 10;
+}
+
+@media screen and (min-width: 800px) {
+
+ .menu-toggle[aria-expanded=false] ~ .menu-items {
+ height: auto;
+ overflow: unset;
+ }
+ .menu-items > li + li {
+ margin-top: 0;
+ }
+}
+
+.menu-toggle {
+ color: inherit;
+ background: unset!important;
+ border: none;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+}
+.menu-toggle:hover span {
+ text-decoration: underline;
+}
+.menu-toggle .indicator {
+ height: 0.7rem;
+ transition: var(--transition-timing);
+ transition-property: transform;
+}
+.menu-toggle[aria-expanded=true] .indicator {
+ transform: rotate(-90deg);
+}
+@media screen and (min-width: 800px) {
+ .menu-toggle {
+ display: none;
+ }
+}
+@media screen and (min-width: 800px) {
+ .menu-items {
+ flex-direction: row;
+ gap: 1em;
+ position: unset;
+ padding: unset;
+ border: unset;
+ }
+}
\ No newline at end of file
diff --git a/src/_includes/css/oi.css b/src/_includes/css/oi.css
index 23df20a..c397562 100644
--- a/src/_includes/css/oi.css
+++ b/src/_includes/css/oi.css
@@ -132,13 +132,14 @@ section { padding: 2em 0; }
header h1 { margin-top: 0; }
header nav ul {
- width: min-content;
+ width: max-content;
text-align: center;
margin: 0 auto;
font-size: 1.2em;
position: relative;
font-family: Poppins;
display: flex;
+ padding-top:2em;
}
header nav ul li { display: inline-block; }
header nav ul > li > a { padding: 0.5em 1em; display: inline-block; width: 100%; color: inherit; }
diff --git a/src/_includes/macros.njk b/src/_includes/macros.njk
new file mode 100644
index 0000000..7b006a0
--- /dev/null
+++ b/src/_includes/macros.njk
@@ -0,0 +1,5 @@
+{%- macro dateFormatter(x) %}{{ x | date('do MMM yyyy') }}{%- endmacro -%}
+{%- macro dateFormatterNoYear(x) %}{{ x | date('do MMM') }}{%- endmacro -%}
+{%- macro dateFormatterNoDay(x) %}{{ x | date('MMM yyyy') }}{%- endmacro -%}
+
+{%- macro numberFormatter(x) %}{{ x | localize }}{%- endmacro -%}
diff --git a/src/_includes/partials/header.njk b/src/_includes/partials/header.njk
index 36452e6..29189b1 100644
--- a/src/_includes/partials/header.njk
+++ b/src/_includes/partials/header.njk
@@ -2,9 +2,16 @@
diff --git a/src/assets/css/style.css b/src/assets/css/style.css
index 29c3776..18e07e3 100644
--- a/src/assets/css/style.css
+++ b/src/assets/css/style.css
@@ -7,4 +7,48 @@
All the standard OI stuff is included here.
Could be modularised, given PostCSS could enable much smaller css packages to be created.
*/
-@import 'css/oi.css';
\ No newline at end of file
+@import 'css/oi.css';
+
+.dashboard-item {
+ text-align: center;
+}
+.dashboard-number {
+ text-align: center;
+ font-family: var(--fontstack-heading);
+ font-size: 5em;
+ font-weight: 500;
+}
+
+.dashboard-note {
+ text-align: center;
+}
+
+.dashboard-viz {
+ & svg {
+ height: min(40em, 30vh);
+ }
+}
+
+* {
+ --background-colour: #d41d73;
+ --header-height: 112px;
+ }
+
+/* .auto-grid .oi-dashboard .panel h3 { font-size: 1.2em; } */
+
+
+/* OI dashboard component */
+.oi-dashboard .oi-dashboard-inner { --auto-dashboard-min-size: 200px; width: 100%; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--auto-dashboard-min-size)), 1fr)); grid-gap: 1em; padding: 2em;}
+.oi-dashboard .panel h3 { font-weight: normal; font-size: 1.5em; text-align: center; }
+.oi-dashboard .panel { padding: 2em; background: #d41d73; border-style: solid; border-width: thin; }
+.oi-dashboard .bignum { font-size: 4em; line-height: 1.25em; font-weight: bold; text-align: center; display: block; margin-top: 0; }
+.oi-dashboard .footnote { font-size: 0.8em; text-align: center; display: block; }
+
+
+
+
+@media screen and (max-width: 1200px) {
+ .oi-dashboard { grid-gap: 1.5vw; }
+ /* .oi-dashboard .panel { font-size: max(10px, 1.5vw); } */
+ .oi-dashboard .footnote { font-size: max(10px, 0.7em); }
+}
diff --git a/src/index.njk b/src/index.njk
index c357119..cb15ec6 100644
--- a/src/index.njk
+++ b/src/index.njk
@@ -1,4 +1,25 @@
---
title: Leeds Culture Dashboard
---
+{% from 'macros.njk' import dateFormatterNoYear as dateFormatter %}
+
+{{
+ comp.oi.dashboard({
+ config: {
+ data: "dummy_headline",
+ title: "Headline",
+ value: "Value",
+ width: "200px",
+ panels: [{
+ name: "This"
+ },{
+ name: "Is"
+ },{
+ name: "A"
+ },{
+ name: "Dashboard"
+ }]
+ }
+ }) | safe
+}}
\ No newline at end of file