Merge pull request #5 from thegreenwebfoundation/hs-impact-dimensions-concept

Hs impact dimensions concept

Author: hanopcan

Gemfile

@@ -17,6 +17,7 @@ gem "github-pages", "~> 232", group: :jekyll_plugins
 group :jekyll_plugins do
   gem "jekyll-feed", "~> 0.12"
   gem "jekyll-tailwind"
+  gem "jekyll-tabs"
 end
 
 # Windows and JRuby does not include zoneinfo files, so bundle the tzinfo-data gem

Gemfile.lock

@@ -179,6 +179,8 @@ GEM
     jekyll-sitemap (1.4.0)
       jekyll (>= 3.7, < 5.0)
     jekyll-swiss (1.0.0)
+    jekyll-tabs (1.2.1)
+      jekyll (>= 3.0, < 5.0)
     jekyll-tailwind (2.1)
       jekyll (>= 3.0, < 5.0)
       tailwindcss-ruby
@@ -338,6 +340,7 @@ DEPENDENCIES
   github-pages (~> 232)
   http_parser.rb (~> 0.6.0)
   jekyll-feed (~> 0.12)
+  jekyll-tabs
   jekyll-tailwind
   tzinfo (>= 1, < 3)
   tzinfo-data

_config.yml

@@ -17,6 +17,7 @@ theme: minima
 plugins:
 - jekyll-feed
 - jekyll-tailwind
+- jekyll-tabs
 tailwind:
   input: assets/app.css
   minify: true

_data/categoryLabels.yml

@@ -4,29 +4,41 @@
 # The Category Items are mapped and accessible using thier item name.
 # - category: is actually a css class that is passed through to set the colour of the item (background to the icon).
 # - title: used as the label text for the item.
-# - GHGScope: is the GHG protocol scope that the category aligns to.
+# - impactDimensions: a nested structure to hold customisations relevant to each impact dimension.
+#   - carbon: customisations relevant to the carbon impact dimension.
+#     - GHGScope: expected to be a number, what scope of the GHG Protocol does a category map to.
 
 CatU:
   category: cat-u
   title: Category U
-  GHGScope: 3
+  impactDimensions:
+    carbon:
+      GHGScope: 3
 
 CatO:
   category: cat-o
   title: Category O
-  GHGScope: 2
+  impactDimensions:
+    carbon:
+      GHGScope: 2 
 
 CatG:
   category: cat-g
   title: Category G
-  GHGScope: 1
+  impactDimensions:
+    carbon:
+      GHGScope: 1  
 
 CatC:
   category: cat-c
   title: Category C
-  GHGScope: 3
+  impactDimensions:
+    carbon:
+      GHGScope: 3
 
 CatD:
   category: cat-d
   title: Category D
-  GHGScope: 3
+  impactDimensions:
+    carbon:
+      GHGScope: 3

_data/taxonomy.yml

@@ -17,8 +17,9 @@
 # - icon: used as the icon of the item (required and default). Maps to the assets/images/icons.svg.
 # - selected: when true, this highlights the item. Used for the contextual overlay views (false by default).
 # - description: adds additional text under the title providing som context. Used for the contextual overlay views (optional).
-# - link: Creates a link to another page (further details). These are setup by default to the relevant pages, but may be overridden for specific use cases, typically in the overlay views (optional, but defaults to a page).
-# - noLink: Provides an overide to prevent any navigation to a page. Renders the component in a <div> instead of an <a>.
+# - link: creates a link to another page (further details). These are setup by default to the relevant pages, but may be overridden for specific use cases, typically in the overlay views (optional, but defaults to a page).
+# - noLink: provides an overide to prevent any navigation to a page. Renders the component in a <div> instead of an <a>.
+
 
 CatU:
   description: The embodied impacts of hardware, the development of software, content & data.

_includes/DIST/categoryLabel.html

@@ -1,13 +1,17 @@
 {% assign label = include.label %}
+{% assign dimension = include.dimension %}
 {% assign title = site.data.categoryLabels[label].title %}
-{% assign scope = site.data.categoryLabels[label].GHGScope %}
 {% assign colour = site.data.categoryLabels[label].category %}
 
+{% if dimension == "carbon" %}
+  {% assign scope = site.data.categoryLabels[label].impactDimensions.carbon.GHGScope %}
+{% endif %}
+
 <div class="inline-flex items-baseline {{ colour }} border border-white rounded text-sm">
   <div class="px-3 py-1 text-white">
     {{ title }}
   </div>
-  {% if scope %}
+  {% if dimension == "carbon" and scope %}
     <div class="flex justify-center w-6 py-1 font-medium bg-charcoal-100 text-charcoal">
       {{ scope }}
     </div>

_includes/DIST/taxonomy-overview.html

@@ -1,12 +1,21 @@
-<div class="prose">
+{% assign title = include.title | false %}
 
-  <h2>Impact Categories</h2>
+{% if title == true %}  
+  <h2 class="text-2xl">Impact Categories</h2>
+{% endif %}
 
-    <p>DIST categorises impacts into three key sections:</p>
+<div class="prose mt-4">
+  <p class="">DIST's taxonomy groups impacts into three key categories:</p>
+</div>
 
-    <ol>
-        <li>Upstream Impacts - {{ site.data.taxonomy.CatU.description }} <a href="/taxonomy/upstream/">Read more.</a></li>
-        <li>Operational Impacts - {{ site.data.taxonomy.OperationalEmissions.description }} <a href="/taxonomy/operational/">Read more.</a></li>
-        <li>Downstream Impacts - {{ site.data.taxonomy.CatD.description }} <a href="/taxonomy/downstream/">Read more.</a></li>
-    </ol>
+<div class="grid gap-x-10 gap-y-6 sm:grid-cols-3 sm:grid-rows-[repeat(3,minmax(0,auto))] sm:grid-flow-col sm:auto-rows-auto mt-10 mb-16">
+  <div class=""><h3 class="text-xl mb-0 border-blue border-b-2">1. Upstream Impacts</h3></div>
+  <div class="">{{ site.data.taxonomy.CatU.description }}</div>
+  <div class=""><a href="/taxonomy/upstream/">Read more.</a></div>
+  <div class=""><h3 class="text-xl mb-0 border-purple border-b-2">2. Operational Impacts</h3></div>
+  <div class="">{{ site.data.taxonomy.OperationalEmissions.description }}</div>
+  <div class=""><a href="/taxonomy/operational/">Read more.</a></div>
+  <div class=""><h3 class="text-xl mb-0 border-orange border-b-2">3. Downstream Impacts</h3></div>
+  <div class="">{{ site.data.taxonomy.CatD.description }}</div>
+  <div class=""><a href="/taxonomy/downstream/">Read more.</a></div>
 </div>

_includes/DIST/taxonomy-title.html

@@ -0,0 +1,12 @@
+  <h3 class="text-2xl lg:text-3xl font-medium border-none">
+    Impact dimension:
+
+  <span class="px-4 py-2 bg-black text-white font-bold">
+  {% if include.dimension == "carbon" %}
+    Carbon
+  {% else %}
+    Default
+  {% endif %}
+  </span>
+
+  </h3>

_includes/DIST/taxonomy-visual.html

@@ -1,6 +1,10 @@
+{% assign dimension = include.dimension | "default" %}
+
 <!-- DIST taxonomy visual overview -->
 <header class="flex flex-col lg:flex-row justify-between leading-tight lg:items-center py-4 px-4 gap-2 lg:gap-0 bg-white dark:bg-black/30">
-  <h2 class="text-2xl lg:text-3xl font-medium">Digital Impacts Taxonomy</h2>
+  
+  {% include DIST/taxonomy-title.html dimension=dimension %}
+  
   <div class="flex flex-col gap-1">
     <div class="flex h-8 gap-2 items-center">
       <div class="relative h-full w-24 flex border border-white rounded overflow-hidden">
@@ -13,10 +17,13 @@ <h2 class="text-2xl lg:text-3xl font-medium">Digital Impacts Taxonomy</h2>
       </div>
       <div class="h-8 flex items-center"><span>DIST Category</span></div>
     </div>
-    <div class="flex h-8 gap-2">
-      <div class="flex items-center justify-center w-24 h-full bg-charcoal-100 rounded border border-white font-medium text-sm dark:text-charcoal">1/2/3</div>
-      <div class="flex items-center"><span>GHG Protocol Scope</span></div>
-    </div>
+    
+    {% if dimension == "carbon" %}  
+      <div class="flex h-8 gap-2">
+        <div class="flex items-center justify-center w-24 h-full bg-charcoal-100 rounded border border-white font-medium text-sm dark:text-charcoal">1/2/3</div>
+        <div class="flex items-center"><span>GHG Protocol Scope</span></div>
+      </div>
+    {% endif %}
   </div>
 </header>
 
@@ -29,7 +36,7 @@ <h2 class="text-2xl lg:text-3xl font-medium">Digital Impacts Taxonomy</h2>
         <div class="relative">
           <h3 class="pl-2 pb-0 mb-0 text-xl font-medium text-white border-none"><a class="text-inherit hover:text-inherit hover:opacity-80" href="/taxonomy/upstream">Upstream Impacts</a></h3>
           <div class="absolute right-0 top-8">
-            {% include DIST/categoryLabel.html label="CatU" %}
+            {% include DIST/categoryLabel.html label="CatU" dimension=dimension %}
           </div>
         </div>
       </div>
@@ -40,7 +47,7 @@ <h3 class="pl-2 pb-0 mb-0 text-xl font-medium text-white border-none"><a class="
       <p class="my-4">{{ site.data.taxonomy.CatU.description }}</p>
 
       <h4 class="mt-8 mb-2 text-lg font-medium">Software</h4>
-      {% include DIST/categoryItem.html item="CatUSoftware" %}
+      {% include DIST/categoryItem.html item="CatUSoftware" dimension=dimension %}
 
       <h4 class="mt-8 mb-2 text-lg font-medium">Hardware Manufacture, Transport and Installation</h4>
       {% include DIST/categoryItem.html item="CatUEmployeeHardware" %}
@@ -75,19 +82,19 @@ <h3 class="lg:pl-[3rem] pb-0 mb-0 text-xl font-medium border-none"><a class="tex
         <div class="relative px-2 py-2 border-2 border-white rounded-md">
           <h4 class="mb-2 text-lg font-medium">Direct</h4>
           <div class="absolute right-2 -top-2">
-            {% include DIST/categoryLabel.html label="CatO" %}
+            {% include DIST/categoryLabel.html label="CatO" dimension=dimension %}
           </div>
           <p class="my-4">{{ site.data.taxonomy.CatO.description }}</p>
 
           {% include DIST/categoryItem.html item="CatOEmployeeDevices" %}
-          {% include DIST/categoryItem.html item="CatONetworkDevices" %}
+          {% include DIST/categoryItem.html item="CatONetworkDevices"%}
           {% include DIST/categoryItem.html item="CatOServers" %}
 
           <!-- DIRECT (Category G) -->
           <div class="relative">
             <hr class="border-white mb-2">
             <div class="absolute right-2 -top-2">
-              {% include DIST/categoryLabel.html label="CatG" %}
+              {% include DIST/categoryLabel.html label="CatG" dimension=dimension %}
             </div>
             {% include DIST/categoryItem.html item="CatGGenerators" %}
           </div>
@@ -97,7 +104,7 @@ <h4 class="mb-2 text-lg font-medium">Direct</h4>
         <div class="relative px-2 py-2 border-2 border-white rounded-md">
           <h4 class="mb-2 text-lg font-medium">Indirect</h4>
           <div class="absolute right-2 -top-2">
-            {% include DIST/categoryLabel.html label="CatC" %}
+            {% include DIST/categoryLabel.html label="CatC" dimension=dimension %}
           </div>
           <p class="mb-2">{{ site.data.taxonomy.CatC.description }}</p>
 
@@ -119,7 +126,7 @@ <h4 class="mb-2 text-lg font-medium">Indirect</h4>
         <div class="relative">
           <h3 class="lg:pl-[3rem] pb-0 mb-0 text-xl font-medium border-none"><a class="text-inherit hover:text-inherit hover:opacity-80" href="/taxonomy/downstream">Downstream Impacts</a></h3>
           <div class="absolute right-0 top-8">
-            {% include DIST/categoryLabel.html label="CatD" %}
+            {% include DIST/categoryLabel.html label="CatD" dimension=dimension %}
           </div>
         </div>
       </div>

_layouts/base-tabs.html

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="{{ page.lang | default: site.lang | default: 'en' }}">
+
+  {%- include head.html -%}
+
+  <body class="min-h-[100vh] flex flex-col">
+
+    {%- include header.html -%}
+
+    <div class="relative flex-auto">
+      <div class="hidden lg:block fixed -z-50 w-11/12 -top-24" style="background: radial-gradient(circle, rgba(187,247,187,1) 0%, rgba(255,255,255,1) 71%); height: calc(100% + 100px); right: -50vw;"></div>
+      <main class="page-content container mx-auto pt-6 md:pt-8 px-2 sm:px-4" aria-label="Content">
+        <div class="wrapper">
+          {{ content }}
+        </div>
+      </main>
+    </div>
+    {%- include footer.html -%}
+
+    {%- include sub-footer.html -%}
+
+    <script src="/assets/js/tabs.js"></script>
+
+  </body>
+
+</html>