jekyll-scouts_uk_2018 1.0.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 8e4e1e2faf95ba31dce2ef5a42a921b6da0a07fca3f5c4bc23b0087e5fa22407
+  data.tar.gz: 6366e3ccef39ad1f775ff0e0753a57f6a19643d85d8fe845b1b0e00ee4932880
+SHA512:
+  metadata.gz: edcffa3effe4c9b1ed8f6a6191e0354b452a5a1ac7c8ae29a8b9311cd84bfb2c67f0f47b3815ad72e316a9080a2c2be12822fb78cb17b1240313e2cfbdd5d201
+  data.tar.gz: 89a0c683dd5a70759bfa96e30bbee5e7eb29eb08eecec2f7e63444f1942eb0ec41007c85c44369a94b7abd263abeb47c1968d97271a42cab146ee8bda7c2c21f

data/LICENSE.txt

@@ -0,0 +1,28 @@
+## License
+This code can be used under the BSD License (reproduced below).
+Commiters to the project give 27th Aberdeen Scout Group the right to
+redistribute their commits under the BSD license.
+
+
+### BSD License
+Redistribution and use in source and binary forms, with or without modification,
+are permitted provided that the following conditions are met:
+
+- Redistributions of source code must retain the above copyright notice,
+  this list of conditions and the following disclaimer.
+- Redistributions in binary form must reproduce the above copyright notice,
+  this list of conditions and the following disclaimer in the documentation and/or
+  other materials provided with the distribution.
+- Neither the name of the project nor the names of its contributors
+  may be used to endorse or promote products derived from this software
+  without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY
+EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES
+OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT
+SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT
+OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION)
+HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
+OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
+SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

data/README.md

@@ -0,0 +1,108 @@
+# jekyll-scouts_uk_2018
+
+A [Jekyll](https://jekyllrb.com/) template for the UK Scouts brand (2018). You can see it in use at [27thaberdeen.org.uk](https://www.27thaberdeen.org.uk/)
+
+
+## Installation
+
+Add this line to your Jekyll site's Gemfile:
+
+```ruby
+gem 'jekyll-scouts_uk_2018', '~> 1.0'
+```
+
+And add this line to your Jekyll site's _config.yml:
+
+```yaml
+theme: jekyll-scouts_uk_2018
+```
+
+And then execute:
+
+    $ bundle
+
+Or install it yourself as:
+
+    $ gem install jekyll-scouts_uk_2018
+
+
+## Usage
+
+Firstly set a few keys in your _config.yml file:
+* name: Your group's name (will appear in the footer and title, unless title: is set), e.g. "1st Someplace Scout Group"
+* charity_number: (required if you have one) displays in the footer.
+* country_colour: (optional) Set to blue for Scotland, red for Wales, or Green for Northern Ireland.
+
+
+### Customise the site header
+
+To display a link to [Online Scout Manager](https://www.onlinescoutmanager.co.uk)'s Parents Portal in the navigation add the following to your _config.yml
+```
+header_osm: true
+```
+
+To add your own logo, first visit the [Scouts Brand Centre](https://scoutsbrand.org.uk/) and generate a white one (if you haven't already). Add it into your assets folder and create the file _includes/header-logo.html to display it.
+```
+<img src="WHERE EVER YOU PUT THE LOGO FILE" alt="{{ site.name | escape }}" loading="eager" role="presentation">
+```
+
+The text in the header can also be customised by creating _includes/header-text.html
+
+
+### Customise the site footer
+
+Links to contact your group / your groups social media can be added by adding any of the following keys to your _config.yml
+```
+social_links:
+  email:
+  twitter:
+  facebook:
+  flickr:
+  instagram:
+  pinterest:
+  youtube:
+  github:
+```
+
+### Add your sections
+
+You'll need to add some stuff to your _config.yml
+```
+collections:
+  sections:
+    output: true
+
+defaults:
+  - scope:
+      type: sections
+    values:
+      layout: section
+```
+
+Then create your files in the _sections directory. A number of front matter settings are available:
+* title:
+* type: squirrels / beavers / cubs / scouts / explorers / network / activesupport - causes the correct logo to be shown
+* logo_type: (only for squirrels) primary / symbol
+* logo_colour: black / white / (others that vary by section e.g. blue / colourful for beavers, green for cubs / scouts)
+* youth_approved: foundation / bronze (causes the relevant seal to be displayed)
+* social_links.email
+* social_links.twitter
+* social_links.facebook
+* social_links.flickr
+* social_links.instagram
+* social_links.pinterest
+* social_links.youtube
+* social_links.github
+
+
+### Other things you get
+
+#### Ability to display twitter content (provided by [jekyll-twitter-plugin](https://github.com/rob-murray/jekyll-twitter-plugin))
+
+If a section has a social_links.twitter value and the screen is wide enough then their last five tweets will be displayed at the side of the page.
+#### Basic search engine optimisation (provided by [jekyll-seo-tag](https://github.com/jekyll/jekyll-seo-tag))
+
+#### Selection of images
+* Look in assets/images/logos
+* [Tabler icons](https://tablericons.com/): assets/images/tabler-icons-sprite.svg
+* Scouts Scotland's Youth Approved seals: assets/images

data/_includes/footer.html

@@ -0,0 +1,17 @@
+<footer class="layout-{{ page.layout }}">
+  <div id="footer-social">
+    {%- assign social_links = site.social_links -%}
+    {%- include social-links.html -%}
+  </div>
+
+  <div id="footer-legal">
+    <p>&copy;{{ 'now' | date: "%Y" }} {{ site.name }}.</p>
+    {%- if site.charity_number -%}
+      {%- if site.charity_number contains 'SC' -%}
+        <p>Registered charity <a href="https://www.oscr.org.uk/about-charities/search-the-register/charity-details?number={{ site.charity_number }}" rel="nofollow noreferrer noopener" target="_blank">{{ site.charity_number }}</a>.</p>
+      {%- else -%}
+        <p>Registered charity <a href="https://register-of-charities.charitycommission.gov.uk/charity-search/-/charity-details/{{ site.charity_number }}" rel="nofollow noreferrer noopener" target="_blank">{{ site.charity_number }}</a>.</p>
+      {%- endif -%}
+    {%- endif -%}
+  </div>
+</footer>

data/_includes/head.html

@@ -0,0 +1,7 @@
+<head>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  {%- seo -%}
+  <link rel="stylesheet" href="{{ "/assets/css/main.css" | relative_url }}">
+  <link rel="icon" type="image/x-icon" href="{{ "/assets/favicon.ico" | relative_url }}">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Nunito+Sans:400,700,900">
+</head>

data/_includes/header-logo.html

@@ -0,0 +1,2 @@
+{%- assign path = "assets/images/logos/LogoLinearWhite" | relative_url -%}
+<img src="{{ path }}.png" srcset="{{ path }}-100.png 100w, {{ path }}-320.png 320w, {{ path }}-480.png 480w, {{ path }}-640.png 640w, {{ path }}-800.png 800w" alt="{{ site.name | escape }}" loading="eager" role="presentation" style="margin: 2rem;">

data/_includes/header-navigation.html

@@ -0,0 +1,31 @@
+{%- assign default_paths = site.pages | map: "path" -%}
+{%- assign page_paths = site.header_pages | default: default_paths -%}
+{%- if page_paths -%}
+  <input type="checkbox" id="navigation-trigger">
+  <label for="navigation-trigger">
+    <span>
+      <svg role="" style="transform: invert(100%); max-width: 1.75rem; max-height: 1.75rem;">
+        <use xlink:href="{{ '/assets/images/tabler-icons-sprite.svg#tabler-menu-2' | relative_url }}"></use>
+      </svg>
+    </span>
+  </label>
+
+  <nav>
+    <ul>
+      {%- for section in site.sections -%}
+        <li><a href="{{ section.url | relative_url }}">{{ section.title | escape }}</a></li>
+      {%- endfor -%}
+
+      {%- for path in page_paths -%}
+        {%- assign my_page = site.pages | where: "path", path | first -%}
+        {%- if my_page.title -%}
+          <li><a href="{{ my_page.url | relative_url }}">{{ my_page.title | escape }}</a></li>
+        {%- endif -%}
+      {%- endfor -%}
+
+      {%- if site.header_osm -%}
+        <li><a href="https://www.onlinescoutmanager.co.uk/login.php" target="_blank">OSM Parent&apos;s Portal</a></li>
+      {%- endif -%}
+    </ul>
+  </nav>
+{%- endif -%}

data/_includes/header-text.html

@@ -0,0 +1,3 @@
+<p>Scouting offers challenge and adventure to young people and adults.</p>
+<p>We believe in helping our Members fulfil their potential by working in teams, learning by doing, and thinking for themselves.</p>
+<p>We give people of every background the chance to stretch themselves, learn <a href="https://twitter.com/search?q=%23SkillsForLife" rel="noreferrer noopener" target="_blank">#SkillsForLife</a> and make life long friedship.

data/_includes/header.html

@@ -0,0 +1,15 @@
+<header class="layout-{{ page.layout }}">
+  <div id="header-logo">
+    <a href="{{ "/" | relative_url }}">
+      {%- include header-logo.html -%}
+    </a>
+  </div>
+
+  <div id="header-text">
+    {%- include header-text.html -%}
+  </div>
+
+  <div id="header-navigation">
+    {%- include header-navigation.html -%}
+  </div>
+</header>

data/_includes/social-links.html

@@ -0,0 +1,10 @@
+<ul class="social-links">
+  {%- if social_links.email -%}<li><a title="Email {{ social_links.email }}" href="mailto:{{ social_links.email }}"><svg role="presentation"><use xlink:href="{{ '/assets/images/tabler-icons-sprite.svg#tabler-mail' | relative_url }}"></use></svg><span>{{ social_links.email }}</span></a></li>{%- endif -%}
+  {%- if social_links.twitter -%}<li><a title="@{{ social_links.twitter | cgi_escape | escape }} on twitter" href="https://www.twitter.com/{{ social_links.twitter| cgi_escape | escape }}" rel="noreferrer noopener" target="_blank"><svg role="presentation"><use xlink:href="{{ '/assets/images/tabler-icons-sprite.svg#tabler-brand-twitter' | relative_url }}"></use></svg><span>{{ social_links.twitter| escape }}</span></a></li>{%- endif -%}
+  {%- if social_links.facebook -%}<li><a title="{{ social_links.facebook | cgi_escape | escape }} on facebook" href="https://www.facebook.com/{{ social_links.facebook| cgi_escape | escape }}" rel="noreferrer noopener" target="_blank"><svg role="presentation"><use xlink:href="{{ '/assets/images/tabler-icons-sprite.svg#tabler-brand-facebook' | relative_url }}"></use></svg><span>{{ social_links.facebook| escape }}</span></a></li>{%- endif -%}
+  {%- if social_links.flickr -%}<li><a title="{{ social_links.flickr | cgi_escape | escape }} on flickr" href="https://www.flickr.com/photos/{{ social_links.flickr| cgi_escape | escape }}" rel="noreferrer noopener" target="_blank"><svg role="presentation"><use xlink:href="{{ '/assets/images/tabler-icons-sprite.svg#tabler-brand-flickr' | relative_url }}"></use></svg><span>{{ social_links.flickr| escape }}</span></a></li>{%- endif -%}
+  {%- if social_links.instagram -%}<li><a title="{{ social_links.instagram | cgi_escape | escape }} on instagram" href="https://instagram.com/{{ social_links.instagram| cgi_escape | escape }}" rel="noreferrer noopener" target="_blank"><svg role="presentation"><use xlink:href="{{ '/assets/images/tabler-icons-sprite.svg#tabler-brand-instagram' | relative_url }}"></use></svg><span>{{ social_links.instagram| escape }}</span></a></li>{%- endif -%}
+  {%- if social_links.pinterest -%}<li><a title="{{ social_links.pinterest | cgi_escape | escape }} on pinterest" href="https://www.pinterest.com/{{ social_links.pinterest| cgi_escape | escape }}" rel="noreferrer noopener" target="_blank"><svg role="presentation"><use xlink:href="{{ '/assets/images/tabler-icons-sprite.svg#tabler-brand-pinterest' | relative_url }}"></use></svg><span>{{ social_links.pinterest| escape }}</span></a></li>{%- endif -%}
+  {%- if social_links.youtube -%}<li><a title="{{ social_links.youtube | cgi_escape | escape }} on youtube" href="https://youtube.com/{{ social_links.youtube| cgi_escape | escape }}" rel="noreferrer noopener" target="_blank"><svg role="presentation"><use xlink:href="{{ '/assets/images/tabler-icons-sprite.svg#tabler-brand-youtube' | relative_url }}"></use></svg><span>{{ social_links.youtube| escape }}</span></a></li>{%- endif -%}
+  {%- if social_links.github -%}<li><a title="{{ social_links.github | cgi_escape | escape }} on github" href="https://github.com/{{ social_links.github| cgi_escape | escape }}" rel="noreferrer noopener" target="_blank"><svg role="presentation"><use xlink:href="{{ '/assets/images/tabler-icons-sprite.svg#tabler-brand-github' | relative_url }}"></use></svg><span>{{ social_links.github| escape }}</span></a></li>{%- endif -%}
+</ul>

data/_layouts/default.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="{{ page.lang | default: site.lang | default: "en-gb" }}">
+
+  {%- include head.html -%}
+
+  <body class="layout-{{ page.layout }}">
+
+    {%- include header.html -%}
+
+    <main class="layout-{{ page.layout }}">
+      {{ content }}
+    </main>
+
+    {%- include footer.html -%}
+
+  </body>
+</html>

data/_layouts/page.html

@@ -0,0 +1,11 @@
+---
+layout: default
+---
+
+{%- if page.title -%}
+  <h1>{{ page.title | escape }}</h1>
+{%- endif -%}
+
+<div>
+  {{ content }}
+</div>

data/_layouts/section.html

@@ -0,0 +1,71 @@
+---
+layout: default
+main_class: section
+---
+
+<div id="content">
+  <div id="content-header">
+    <h1>
+      {%- assign logo = page.type | capitalize -%}
+      {%- case page.type | downcase -%}
+        {%- when "squirrels" -%}
+          {%- assign type =  page.logo_type | default: "primary" | capitalize -%}
+          {%- assign colour = page.logo_colour | default: "red" | capitalize -%}
+          {%- if type == "Symbol" -%}
+            {%- assign widths = "100" -%}
+          {%- endif -%}
+        {%- when "beavers" -%}
+          {%- assign colour = page.logo_colour | default: "blue" | capitalize -%}
+        {%- when "cubs" -%}
+          {%- assign colour = page.logo_colour | default: "green" | capitalize -%}
+          {%- assign widths = "100,320,480,640" -%}
+        {%- when "scouts" -%}
+          {%- assign colour = page.logo_colour | default: "green" | capitalize -%}
+        {%- when "explorers" -%}
+          {%- assign colour = page.logo_colour | default: "blue" | capitalize -%}
+        {%- when "network" -%}
+          {%- assign widths = "100,320,480" -%}
+        {%- when "activesupport" -%}
+          {%- if logo == "Activesupport" -%}
+            {%- assign logo = "ActiveSupport" -%}
+          {%- endif -%}
+        {%- else -%}
+          {%- assign colour = page.logo_colour | default: "black" | capitalize -%}
+      {%- endcase -%}
+      {%- assign path = "assets/images/logos/" | append: logo | append: type | append: colour | relative_url -%}
+      {%- assign widths = widths | default: "100,320,480,640,800" | split: "," -%}
+      {%- capture srcset -%}
+        {%- for i in widths -%}
+          {{ path }}-{{ i }}.png {{ i }}w,
+        {%- endfor -%}
+      {%- endcapture -%}
+      <img src="{{ path }}.png" srcset="{{ srcset }}" alt="{{ page.type }}" loading="eager">
+    </h1>
+
+    {%- if page.youth_approved -%}
+      <a href="https://www.scouts.scot/members/youth-involvement/youth-approved-award/" rel="nofollow noopener" target="_blank" class="youth-approved">
+        {%- assign logo = page.youth_approved | capitalize -%}
+        {%- assign logo = "assets/images/YouthApproved" | append: logo | relative_url -%}
+        {%- assign alt = "We've got the " | append: page.youth_approved | append: " Youth Approved award from Scouts Scotland." -%}
+        <img src="{{ logo }}.png" srcset="{{ logo }}-100.png 100w, {{ logo }}-320.png 320w, {{ logo }}-480.png 480w, {{ logo }}-640.png 640w" alt="{{ alt }}">
+      </a>
+    {%- endif -%}
+  </div>
+
+
+  <div id="content-body">
+    {{ content }}
+  </div>
+
+  <div id="content-footer">
+    {%- assign social_links = page.social_links -%}
+    {%- include social-links.html -%}
+  </div>
+</div>
+
+{%- if page.social_links.twitter -%}
+  <div id="tweets">
+    {% assign twitter_url = 'https://twitter.com/' | append: page.social_links.twitter %}
+    {% twitternocache twitter_url limit=3 %}
+  </div>
+{%- endif -%}

data/_sass/footer.scss

@@ -0,0 +1,54 @@
+footer {
+  background-color: var(--footer-background);
+  --text-color: var(--footer-foreground);
+  display: grid;
+  grid-gap: 1rem;
+  align-items: flex-start;
+  padding: 0.75rem;
+
+  grid-template-areas:
+    "social      legal"
+  ;
+
+  p {
+    margin-top: 0.25rem;
+    margin-bottom: 0.25rem;
+  }
+
+  #footer-social {
+    grid-area: social;
+  }
+
+  #footer-legal {
+    grid-area: legal;
+    text-align: right;
+    --text-color: var(--scout-light-grey);
+    font-size: 0.875rem;
+
+    a {
+      text-decoration: none;
+    }
+
+    a:hover {
+      text-decoration: underline;
+    }
+  }
+}
+
+@media screen and (max-width: 32rem) {
+  footer {
+    grid-template-areas:
+      "social"
+      "legal"
+    ;
+
+    grid-gap: 0.5rem;
+  }
+}
+
+@media screen and (max-width: 40rem) {
+  footer {
+    padding: 0.25rem;
+    grid-gap: 0.5rem;
+  }
+}

data/_sass/header.scss

@@ -0,0 +1,136 @@
+header {
+  background-color: var(--header-background);
+  --text-color: var(--header-foreground);
+  margin: 0;
+  display: grid;
+  grid-gap: 0;
+
+  grid-template-areas:
+    "logo        text"
+    "navigation  navigation"
+  ;
+
+  #header-logo {
+    grid-area: logo;
+    align-self: center;
+    width: 20rem;
+  }
+
+  #header-text {
+    grid-area: text;
+    padding-left: 1rem;
+    padding-right: 2rem;
+    max-width: 55rem;
+    align-self: center;
+    font-size: 1.2rem;
+
+    p {
+      margin: 0.1rem;
+
+      a {
+        text-decoration: none;
+      }
+
+      a:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+
+  @media screen and (max-width: 64rem) {
+    grid-template-areas:
+      "logo"
+      "navigation"
+    ;
+
+    #header-logo {
+      justify-self: center;
+    }
+
+    #header-text {
+      display: none;
+    }
+  }
+
+  #header-navigation {
+    grid-area: navigation;
+
+    a {
+      text-decoration: none;
+    }
+
+    a:hover {
+      text-decoration: underline;
+    }
+
+    nav {
+      margin: 0.25rem 1rem;
+
+      ul {
+        list-style-type: none;
+        padding: 0;
+        display: grid;
+        grid-template-columns: repeat(auto-fill, 7.5rem);
+        gap: 0.75rem;
+        align-items: center;
+
+        li {
+          width: 7.5rem;
+          text-align: center;
+        }
+      }
+    }
+
+    #navigation-trigger {
+      display: none;
+    }
+
+    label[for="navigation-trigger"] {
+      display: none;
+      cursor: pointer;
+      text-align: center;
+      color: var(--text-color);
+    }
+
+    @media screen and (max-width: 32rem) {
+      label[for="navigation-trigger"] {
+        display: block;
+      }
+
+      #navigation-trigger ~ nav {
+        display: none;
+      }
+
+      nav {
+        padding: 0.25rem 1rem;
+
+        ul {
+          display: block;
+
+          li {
+            display: block;
+            width: 100%;
+            margin: 1rem 0;
+            text-align: center;
+          }
+        }
+      }
+
+      #navigation-trigger:checked ~ nav {
+        display: block;
+        //padding-bottom: 0.4rem;
+
+        ul {
+          display: block;
+          text-align: center;
+          padding: 0;
+          grid-template-columns: 1fr;
+
+          li {
+            padding: 0.75rem 0;
+          }
+        }
+      }
+    }
+  }
+}

data/_sass/print.scss

@@ -0,0 +1,34 @@
+@media print {
+  blockquote {
+    border: none;
+  }
+
+  header {
+    background: var(--scout-light-grey);
+    --text-color: black;
+
+    #header-logo {
+      img {
+        filter: invert(100%);
+        max-width: 125rem;
+      }
+    }
+
+    #header-text {
+      font-size: 0.75rem;
+    }
+
+    #header-navigation {
+      display: none;
+    }
+  }
+
+  footer {
+    background: var(--scout-light-grey);
+    --text-color: black;
+
+    #footer-legal {
+      --text-color: black;
+    }
+  }
+}

data/_sass/sections.scss

@@ -0,0 +1,67 @@
+main.layout-section {
+  display: flex;
+  flex-direction: row;
+
+  #content {
+    #content-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      h1 {
+        margin: 0;
+      }
+
+      img {
+        max-width: 20rem;
+        max-height: 10rem;
+      }
+    }
+
+    #content-body {
+      max-width: 45rem;
+    }
+
+    #content-footer {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+  }
+
+  #tweets {
+    justify-self: end;
+    margin-left: 5rem;
+    width: 30%;
+  }
+}
+
+@media screen and (max-width: 60rem) {
+  main.layout-section #tweets {
+    display: none;
+  }
+}
+
+@media screen and (max-width: 40rem) {
+  main.layout-section {
+    #content {
+      #content-header {
+        img {
+          max-width: 15rem;
+        }
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 30rem) {
+  main.layout-section {
+    #content {
+      #content-header {
+        img {
+          max-width: 10rem;
+        }
+      }
+    }
+  }
+}