Add initial site structure

open-innovations · May 29, 2024 · accd3b2 · accd3b2
1 parent 2fb0c2e
commit accd3b2
Show file tree

Hide file tree

Showing 10 changed files with 199 additions and 11 deletions.
diff --git a/src/_components/grid/autogrid.njk 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;
+  }
+  }
+---
+<div class="auto-grid"
+  style="
+  {%- if min-width %}--auto-grid-min-size: {{ min-width }};{% endif -%}
+  {% if columns %}grid-template-columns: repeat( {{ columns }}, minmax(0, 1fr));{% endif %}
+  ">
+  {{- content | safe -}}
+</div>
diff --git 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]
+  keywords: [open, data, leeds, innovation, culture]
diff --git a/src/_data/dummy_headline.csv b/src/_data/dummy_headline.csv
@@ -0,0 +1,5 @@
+Headline,Value,
+This,1,
+Is,2,
+A,3,
+Dashboard,4,
diff --git a/src/_data/dummy_linechart.csv 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
@@ -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;
+	}
+}
diff --git 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
@@ -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
@@ -2,9 +2,16 @@
   <header>
     <div class="{{ header_class or 'b1-bg' }}">
       <div class="holder padded" style="text-align:center;">
-        <a href="https://open-innovations.org/"><svg width="80" height="80" overflow="auto" viewBox="-32 -32 64 64" xmlns="http://www.w3.org/2000/svg"><mask id="oi-person"><path d="m-32-32h64v64h-12v-24a4 4 0 0 0 -4 -4h-8a4 4 0 0 0 -4 4v24h-36zm44 27m-8 0a8 8 0 1 0 16 0 8 8 0 1 0-16 0" fill="#fff"></path></mask><g id="oi-logo" fill="{{ logo_colour or 'white' }}"><circle r="32" mask="url(#oi-person)"></circle></g></svg></a>
         <div class="title"><a href="/">{{ metas.site }}</a></div>
-      </div>
+          <nav>
+        		<ul class="menu-items">
+						<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>
+					  </ul>
+          </nav>
+        </div>
     </div>
   </header>
 </div>
diff --git 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';
+@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
@@ -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
+}}