Skip to content

Commit

Permalink
Add initial LCC styling
Browse files Browse the repository at this point in the history
  • Loading branch information
@taz-chiles
taz-chiles committed Jul 10, 2024
1 parent 35e57dd commit e8ed20c
Show file tree
Hide file tree
Showing 8 changed files with 248 additions and 154 deletions.
12 changes: 5 additions & 7 deletions src/_data.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,13 @@ date: Git Last Modified
# Override the site logo colour here. Any CSS colour will work.
logo_colour: black

# Override the header class here. See https://open-innovations.org/brand for colour classes
header_class: c5-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
lang: en
keywords: [open, data, leeds, innovation]
site: Leeds City Council Vision for Leeds
description: A site to capture data on the Vision for Leeds programme.
image:
twitter:
lang: en
5 changes: 5 additions & 0 deletions src/_data/dummy_headline.csv
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
Headline,Value,Suffix
Data 1,153,
Data 2,478,£
Data 3,368000,£
Data 4,250000,£
97 changes: 97 additions & 0 deletions src/_includes/css/fonts.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,97 @@
/* cyrillic-ext */
@font-face {
font-family: 'Montserrat';
font-style: italic;
font-weight: 100 900;
font-display: swap;
src: url(https://fonts.gstatic.com/s/montserrat/v26/JTUQjIg1_i6t8kCHKm459WxRxC7mw9c.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Montserrat';
font-style: italic;
font-weight: 100 900;
font-display: swap;
src: url(https://fonts.gstatic.com/s/montserrat/v26/JTUQjIg1_i6t8kCHKm459WxRzS7mw9c.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
font-family: 'Montserrat';
font-style: italic;
font-weight: 100 900;
font-display: swap;
src: url(https://fonts.gstatic.com/s/montserrat/v26/JTUQjIg1_i6t8kCHKm459WxRxi7mw9c.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Montserrat';
font-style: italic;
font-weight: 100 900;
font-display: swap;
src: url(https://fonts.gstatic.com/s/montserrat/v26/JTUQjIg1_i6t8kCHKm459WxRxy7mw9c.woff2) format('woff2');
unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Montserrat';
font-style: italic;
font-weight: 100 900;
font-display: swap;
src: url(https://fonts.gstatic.com/s/montserrat/v26/JTUQjIg1_i6t8kCHKm459WxRyS7m.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url(https://fonts.gstatic.com/s/montserrat/v26/JTUSjIg1_i6t8kCHKm459WRhyzbi.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url(https://fonts.gstatic.com/s/montserrat/v26/JTUSjIg1_i6t8kCHKm459W1hyzbi.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url(https://fonts.gstatic.com/s/montserrat/v26/JTUSjIg1_i6t8kCHKm459WZhyzbi.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url(https://fonts.gstatic.com/s/montserrat/v26/JTUSjIg1_i6t8kCHKm459Wdhyzbi.woff2) format('woff2');
unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url(https://fonts.gstatic.com/s/montserrat/v26/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
--oi-main-fontstack: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;
--oi-title-fontstack: Montserrat,sans-serif;
}


167 changes: 70 additions & 97 deletions src/_includes/css/oi.css
View file
Original file line number Diff line number Diff line change
@@ -1,56 +1,8 @@
@font-face {
font-family: 'Poppins';
font-style: italic;
font-weight: 600;
font-display: swap;
src: url(https://open-innovations.org/resources/fonts/Poppins/pxiDyp8kv8JHgFVrJJLmr19VFteOcEg.woff2) format('woff2');
unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
}
@font-face {
font-family: 'Poppins';
font-style: italic;
font-weight: 600;
font-display: swap;
src: url(https://open-innovations.org/resources/fonts/Poppins/pxiDyp8kv8JHgFVrJJLmr19VGdeOcEg.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Poppins';
font-style: italic;
font-weight: 600;
font-display: swap;
src: url(https://open-innovations.org/resources/fonts/Poppins/pxiDyp8kv8JHgFVrJJLmr19VF9eO.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(https://open-innovations.org/resources/fonts/Poppins/pxiByp8kv8JHgFVrLEj6Z11lFc-K.woff2) format('woff2');
unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
}
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(https://open-innovations.org/resources/fonts/Poppins/pxiByp8kv8JHgFVrLEj6Z1JlFc-K.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(https://open-innovations.org/resources/fonts/Poppins/pxiByp8kv8JHgFVrLEj6Z1xlFQ.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@charset "utf-8";
@import 'css/reset.css';
@import 'css/building-blocks/stack.css';
@import 'css/fonts.css';

:root {
--oi-main-fontstack: "Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
--oi-title-fontstack: Poppins;
}
html, body {
padding: 0px;
margin: 0px;
Expand Down Expand Up @@ -78,10 +30,7 @@ p, iframe, h2, h3, figure, ul, ol, .block, .padded-bottom { margin-bottom: 1em;
button, .button { border: 0px; font-size: 1em; background-color: #efefef; color: black; text-decoration: none!important; display: inline-block; padding: 0.5em 1em; cursor: pointer; vertical-align: top; line-height: 1.25em; }
a:hover, a:focus { text-decoration: underline; }
a:visited { color: inherit; }
header a { text-decoration: none; line-height: 0; }
footer { width: 100%; padding-bottom: 3em; }
footer h2 + p { margin-top: 1em; }
footer a { color: #1DD3A7; }

code,pre { font-family: monospace; color: #444; background-color: #efefef; }
code { padding: 0.125em 0.25em; }
pre { max-width: 100%; overflow-x: auto; padding: 16px; margin-bottom: 16px; }
Expand All @@ -91,34 +40,18 @@ ol { list-style: decimal; }
ul { padding: 0; margin-left: 2em; }
.msg { text-align:center; padding: 0.5em; }

.holder { position: relative; width: 1080px; max-width: 100%; margin: auto; }
.holder.padded > *:last-child { margin-bottom: 0; }
button, .button { margin-top: 0.25em; border: 0px; font-size: 1em; background-color: #efefef; color: black; text-decoration: none!important; display: inline-block; padding: 0.5em 1em; cursor: pointer; }
a.button:hover, button:hover, button:focus, a.button:focus { background-color: #333333!important; color: #efefef!important; }


.b1-bg { background-color: #000000; color: white!important; }
.b2-bg { background-color: #333333; color: white!important; }
.bk-bg { background-color: #6D6D6D; color: white!important; }
.b3-bg, .github:hover { background-color: #999999; color: black!important; }
.b4-bg { background-color: #bbbbbb; color: black!important; }
.b5-bg, .off label { background-color: #dfdfdf; color: black!important; }
.b6-bg { background-color: #ffffff; color: black!important; }
.c1-bg, .elsewhere .facebook:hover, .c1-bg-hover:hover, .c1-bg:visited, .seasonal, .seasonal:visited, .seasonal:hover { background-color: #2254F4; color: white; }
.c2-bg, .c2-bg-hover:hover, .c2-bg:visited { background-color: #178CFF; color: black; }
.c3-bg, .elsewhere .twitter:hover, .c3-bg-hover:hover, .c3-bg:visited { background-color: #00B6FF; color: black; }
.c4-bg, .c4-bg-hover:hover, .c4-bg:visited, .seasonal-accent, .seasonal-accent:hover, .seasonal-accent:visited { background-color: #08DEF9; color: black; }
.c5-bg, .c5-bg-hover:hover, .c5-bg:visited { background-color: #1DD3A7; color: black; }
.c6-bg, .c6-bg-hover:hover, .c6-bg:visited { background-color: #0DBC37; color: black; }
.c7-bg, .c7-bg-hover:hover, .c7-bg:visited { background-color: #67E767; color: black; }
.c8-bg, .c8-bg-hover:hover, .c8-bg:visited { background-color: #722EA5; color: white; }
.c9-bg, .c9-bg-hover:hover, .c9-bg:visited, .instagram:hover { background-color: #E6007C; color: white; }
.c10-bg, .c10-bg-hover:hover, .c10-bg:visited, .flickr:hover { background-color: #EF3AAB; color: black; }
.c11-bg, .c11-bg-hover:hover, .c11-bg:visited { background-color: #D73058; color: white; }
.c12-bg, .c12-bg-hover:hover, .c12-bg:visited, .youtube:hover { background-color: #D60303; color: white; }
.c13-bg, .c13-bg-hover:hover, .c13-bg:visited { background-color: #FF6700; color: black; }
.c14-bg, .c14-bg-hover:hover, .c14-bg:visited { background-color: #F9BC26; color: black; }
.c12-bg, .on label { background-color: #D60303; color: white; }
.c12-bg:hover, .c12-bg:focus { background: #444; color: white; }
.warning { color: rgb(95, 82, 7); background-color: rgb(251, 245, 208); filter: drop-shadow(0px 0px 1px rgb(95, 82, 7)); }

.padded { padding: 1em; }
.padded-bottom { padding: 1em; margin-bottom: 1em; }
.doublepadded { padding: 2em; }
Expand All @@ -130,43 +63,83 @@ 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; }

header h1 { margin-top: 0; }
header nav ul {
width: min-content;
text-align: center;
margin: 0 auto;
font-size: 1.2em;
position: relative;
font-family: Poppins;
display: flex;
}
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; }
.holder { position: relative; width: 1080px; max-width: 100%; margin: auto; }
.holder.padded > *:last-child { margin-bottom: 0; }

.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%; }

@media only screen and (max-width: 1080px) {
.grid { grid-template-columns: 100%; }
.grid-list { grid-template-columns: repeat(2,1fr); grid-gap: 0.25em; }
}

.legend { margin-bottom: 1em; text-align: center; }
.legend .legend-item { display: inline-block; line-height: 1em; margin-right: 1em; cursor: pointer; }
.legend .legend-item svg { float: left; }

.elsewhere { float: right; margin-top: 0; }
.elsewhere li { display: inline-block; margin-left: 0.5em; }

/* Header */

header a { text-decoration: none; line-height: 0; }
header h1 { margin-top: 0; }
header nav ul {
width: max-content;
margin: 0 auto;
font-size: 1.2em;
position: relative;
font-family: var(--oi-title-fontstack);
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; }

.header-grid { grid-template-columns: repeat(2,1fr); grid-gap: 0.5em; list-style: none;}

.header-logo { margin:auto;}

/* Footer */

.elsewhere { float: left; margin-top: 1em; margin-bottom: 0;}
.elsewhere li { display: block; margin-left: 0em; }
.elsewhere li:first-child { margin-left: 0; }
.elsewhere li a { line-height: 0; display: block; }
footer .address { margin-top: 1em; }
footer a { color: inherit; }
footer hr.about { margin: 32px 0; border: 0; border-top:1px solid #444; }
.elsewhere li a { display: block; }
.elsewhere.grid { display: grid; grid-template-columns: repeat(2,1fr); grid-gap: 0em; list-style: none; }

@media only screen and (max-width: 1080px) {
.grid { grid-template-columns: 100%; }
.grid-list { grid-template-columns: repeat(2,1fr); grid-gap: 0.25em; }
footer { width: 100%; padding-bottom: 3em; }
footer h2 + p { margin-top: 1em; }
footer a { color: inherit; }
.footer { margin-bottom: 0;}
.footer-links { display: block; list-style: none; float: left; margin-left: 0;}
.footer-links li { padding-bottom: 1em; }
.footer-links li a { font-size: 1.1em; text-decoration: underline; }
.footer li h3 {
font-size: 1.2em;
color: #ffffff;
}

.footer-logos { display: block; list-style: none;}
.footer-logos li p { padding-top: 2em; }

.oi-credit { font-weight: 800px; font-size: 1.1em; padding:0;}

@media only screen and (max-width: 800px) {
.elsewhere { float:none; margin-left: 0; margin-bottom: 1em; }
}

/* 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; }
.oi-dashboard .panel h3 { font-weight: 500; font-size: 1.2em; text-align: center; }
.oi-dashboard .panel { padding: 2em; background: black; color: white; display: grid; }
.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; }
.oi-dashboard { grid-gap: 0.5rem!important;}

@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); }
}
Loading

0 comments on commit e8ed20c

Please sign in to comment.