Add initial site structure

_config.ts

@@ -40,7 +40,7 @@ site.use(oiViz(oiVizConfig));
 site.use(base_path());
 site.use(metas({
   defaultPageData: {
-    title: 'LCC Culture Dashboard', // Use the `date` value as fallback.
+    title: 'Culture Dashboard', // Use the `date` value as fallback.
   },
 }));
 site.use(date());

src/_components/dashboard/pane.njk

@@ -0,0 +1,24 @@
+---
+
+css: |
+  .dashboard .pane {
+    --background: 'black';
+    --foreground: 'white';
+    color: var(--foreground);
+    background: var(--background);
+    padding-top: 0em;
+    padding: 3em;
+    --border: groove;
+    border-style: var(--border);
+    border-width: 1.5px;
+  }
+---
+
+<div class="dashboard pane"
+  style="
+    {%- if fg %}--foreground: {{ fg }};{% endif -%}
+    {%- if bg %}--background: {{ bg }};{% endif -%}
+    {%- if border %}--border-style: {{ border }};{% endif -%}
+  ">
+  {{ content | safe }}
+</div>

src/_data.yml

@@ -10,7 +10,7 @@ header_class: b1-bg
 # Automatically adds meta and social tags 
 # See https://lume.land/plugins/metas/
 metas:
-  site: LCC Culture Dashboard
+  site: Culture Dashboard
   description: Visualising data on arts & culture for Leeds. 
   # image: https://open-innovations.org/resources/images/logos/oi-square.png
   # twitter: openinnovates

src/_data/dummy_headline.csv

@@ -1,5 +1,5 @@
-Headline,Value,
-This,1,
-Is,2,
-A,3,
-Dashboard,4,
+Headline,Value,Suffix
+Number of surgeries,153,
+Funding requested,478,£
+Funding from Leeds City Council,368000,£
+Funding from Arts Council,250000,£

src/_includes/css/nav.css

@@ -43,9 +43,6 @@
 	align-items: center;
 	gap: 0.5rem;
 }
-.menu-toggle:hover span {
-	text-decoration: underline;
-}
 .menu-toggle .indicator {
 	height: 0.7rem;
 	transition: var(--transition-timing);

src/_includes/css/oi.css

@@ -71,7 +71,6 @@ h1:first-child, h2:first-child, h3:first-child, .title { margin-top: 0; }
 h1 + *, h2 + *, h3 + * { margin-top: 1em; }
 strong { font-weight: 700; }
 em { font-style: italic; }
-a { color: #18AD87; text-decoration: underline; }
 .bold { color: #18AD87; }
 p, time, li, td, th, footer, div { font-weight: 300; }
 p, iframe, h2, h3, figure, ul, ol, .block, .padded-bottom { margin-bottom: 1em; }
@@ -130,10 +129,18 @@ section { padding: 2em 0; }
 .skip-to-content-link { position: absolute; top: -3rem; right: 0.5rem; z-index: 2000; transition: top 0.3s; padding: 0.5rem 1rem; }
 .skip-to-content-link:focus { top: 0.25rem; }
 
+.center {
+	display: block;
+	margin-left: auto;
+	margin-right: auto;
+	width: 50%;
+  }
+
+
+
 header h1 { margin-top: 0; }
 header nav ul {
 	width: max-content;
-	text-align: center;
 	margin: 0 auto;
 	font-size: 1.2em;
 	position: relative;
@@ -143,10 +150,20 @@ header nav ul {
 }
 header nav ul li { display: inline-block; }
 header nav ul > li > a { padding: 0.5em 1em; display: inline-block; width: 100%; color: inherit; }
-header nav ul > li > a:hover, header nav ul > li > a:focus { background: white; color: black; }
+/* header nav ul > li > a:hover, header nav ul > li > a:focus { background: white; color: black; } */
+
+.grid { display: grid; grid-template-columns: 50% 50%; grid-gap: 0.5em; }
+ul.grid { list-style: none; margin-left: 0em; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
+ul.grid > li > a { display: block; text-decoration: none!important;}
+ul.grid > li > a > *:last-child { margin-bottom: 0; }
+.grid .pane { background: #0a2f45; color: #ffffff; height: 300px;}
+
+.dashboard { padding: 2em; }
+
+.oi-dashboard { grid-gap: 0.5rem!important;}
+.oi-dashboard .panel h3 { font-size: 1.5em!important; font-weight: normal!important; text-align: center; }
+.oi-dashboard .panel { display: grid; }
 
-.grid { display: grid; grid-template-columns: repeat(2,1fr); grid-gap: 1em; }
-.grid .pane { background: #f9f9f9; }
 
 .grid-list { display: grid; grid-template-columns: repeat(3,1fr); grid-gap: 0.5em; list-style: none; margin: 0; margin-bottom: 2em; }
 .grid-list > li > a { padding: 1em; background: #dfdfdf; text-decoration: none; display: block; text-align: center; height: 100%; }

src/_includes/partials/header.njk

@@ -1,17 +1,17 @@
 <div class="b6-bg">
-  <header>
-    <div class="{{ header_class or 'b1-bg' }}">
-      <div class="holder padded" style="text-align:center;">
-        <div class="title"><a href="/">{{ metas.site }}</a></div>
-          <nav>
-        		<ul class="menu-items">
+	<header>
+		<div class="{{ header_class or 'b1-bg' }}">
+			<div class="holder padded">
+      <img src="/assets/images/lcc-logo-white-transparent.png" inline width='400' class='center padded'>
+				<nav>
+        		<ul class="menu-items" hidden="">
 						<li><a href="/about">About</a></li>
 						<li><a href="/data">Data</a></li>
-						<li><a href="/survey/">Cultural Investment Fund</a></li>
-						<li><a href="/reports/schools">Cultural Impact Survey</a></li>
+						<li><a href="/investment-fund">Cultural Investment Fund</a></li>
+						<li><a href="/impact-survey">Cultural Impact Survey</a></li>
 					  </ul>
-          </nav>
-        </div>
-    </div>
-  </header>
-</div>
+				</nav>
+			</div>
+		</div>
+	</header>
+</div>

src/about/index.njk

@@ -0,0 +1,4 @@
+---
+title: About
+
+---

src/assets/css/style.css

@@ -30,7 +30,7 @@
 }
 
 * {
-  --background-colour: #d41d73;
+  --background-colour: #0a2f45;
   --header-height: 112px;
   }
 
@@ -40,7 +40,7 @@
 /* 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 .panel { padding: 2em; background: #0a2f45; color: #ffff; 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; }
 

src/data/index.njk

@@ -0,0 +1,30 @@
+---
+title: Data
+---
+
+<p>
+	Lorem ipsum dolor sit amet. Qui voluptates sint non nobis amet et officiis officia est voluptate libero id ipsam totam rem expedita nihil in dolores voluptatum. Ab illo incidunt cum omnis maxime aut distinctio quos sed perferendis rerum eum quia molestiae. Qui repudiandae rerum est dolorum voluptas vel maiores nihil est perspiciatis quod.
+</p>
+
+<ul class="grid dashboard" style ="grid-template-columns: repeat( 2, minmax(0, 1fr));">
+
+	{% comp "dashboard.pane", { bg: "#0a2f45", fg: 'white' }%}
+	<li><a href="">
+		<h2>Leeds Cultural Investment Fund</h2>
+	    </a></li>
+	{% endcomp %}
+
+    {% comp "dashboard.pane", { bg: "#0a2f45", fg: 'white' }%}
+	    <li><a href="">
+		<h2>Leeds Cultural Impact Survey</h2>
+	    </a></li>
+	{% endcomp %}
+
+    {% comp "dashboard.pane", { bg: "#0a2f45", fg: 'white' }%}
+	    <li><a href="">
+		<h2>LEEDS 2023 Legacy</h2>
+	    </a></li>
+	{% endcomp %}
+
+</ul>
+

src/impact-survey/index.njk

@@ -0,0 +1,26 @@
+---
+title: Leeds Cultural Impact Survey
+---
+{% from 'macros.njk' import dateFormatterNoYear as dateFormatter %}
+
+
+{{
+	comp.oi.dashboard({
+		config: {
+			data: "dummy_headline",
+			title: "Headline",
+			value: "Value",
+			width: "200px",
+            postfix: "Suffix",
+			panels: [{
+				name: "Number of surgeries"
+			},{
+				name: "Funding requested"
+			},{
+				name: "Funding from Leeds City Council"
+			},{
+				name: "Funding from Arts Council"
+			}]
+		}
+	}) | safe
+}}

src/index.njk

@@ -1,25 +1,7 @@
 ---
-title: Leeds Culture Dashboard
+title: About the 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
-}}
+<p>
+	Lorem ipsum dolor sit amet. Qui voluptates sint non nobis amet et officiis officia est voluptate libero id ipsam totam rem expedita nihil in dolores voluptatum? Ab illo incidunt cum omnis maxime aut distinctio quos sed perferendis rerum eum quia molestiae. Qui repudiandae rerum est dolorum voluptas vel maiores nihil est perspiciatis quod.
+</p>

src/investment-fund/index.njk

@@ -0,0 +1,26 @@
+---
+title: Leeds Cultural Investment Fund
+---
+{% from 'macros.njk' import dateFormatterNoYear as dateFormatter %}
+
+
+{{
+	comp.oi.dashboard({
+		config: {
+			data: "dummy_headline",
+			title: "Headline",
+			value: "Value",
+			width: "200px",
+            postfix: "Suffix",
+			panels: [{
+				name: "Number of surgeries"
+			},{
+				name: "Funding requested"
+			},{
+				name: "Funding from Leeds City Council"
+			},{
+				name: "Funding from Arts Council"
+			}]
+		}
+	}) | safe
+}}