feat: ds updates (#197)

* update logo to add transparancy

* update css grid

* fix image spacing on card

* fix nav mobile font

* simpify css grid

* increase double card image size to fit new grid

* new nav items for templates

* increase mobile nav init becuse of mayor link

* make link text and button text bold

* fix page contents js

* seperate template js

* update mobile style

* fix css grid 2 col mobile width

* add fotter links to templates

* Restyled by prettier (#198)

Co-authored-by: Restyled.io <commits@restyled.io>

Co-authored-by: Nathan Rogan <nathan.rogan@wmca.org.uk>
Co-authored-by: restyled-io[bot] <32688539+restyled-io[bot]@users.noreply.github.com>
Co-authored-by: Restyled.io <commits@restyled.io>

gulp-tasks/paths.js

@@ -27,6 +27,11 @@ module.exports = {
         src: 'src/www/wmcads-website.js',
         minName: 'wmcads-website.min.js',
         lint: true
+      },
+      {
+        src: 'src/www/wmcads-templates.js',
+        minName: 'wmcads-templates.min.js',
+        lint: true
       }
     ],
     output: 'build/js/' // Output location of minified JS files

src/wmcads/assets/sass/_utilities.scss

@@ -165,13 +165,13 @@ body {
 // Show/hide on desktop devices only
 .wmcads-hide-mobile {
   @media screen and (max-width: $breakpoint-md) {
-    display: none !important;
+    display: none;
   }
 }
 
 .wmcads-hide-desktop {
   @media screen and (min-width: $breakpoint-md) {
-    display: none !important;
+    display: none;
   }
 }
 

src/wmcads/assets/sass/_vars.scss

@@ -44,7 +44,7 @@ $black: #000000;
 }
 
 @font-face {
-  font-family: "Noto Sans Display";
+  font-family: "Noto Sans Display Bold";
   font-style: normal;
   font-weight: bold;
   // sass-lint:disable-block indentation
@@ -56,6 +56,7 @@ $black: #000000;
 // TEXT
 $text-color: get-color($black);
 $x-font-family: "Noto Sans Display", sans-serif;
+$x-font-family-bold: "Noto Sans Display Bold", sans-serif;
 $x-heading-font-family: "DM Sans", sans-serif;
 
 // Base font size and line height

src/wmcads/assets/sass/wmcads-grid/_grid-css-grid.scss

@@ -0,0 +1,36 @@
+// Creates a css-grid layout for content cards
+.wmcads-css-grid {
+  display: inline;
+
+  &-4-col {
+    display: grid;
+    grid-gap: $size-lg;
+    grid-template-columns: repeat(auto-fit, minmax(208px, 1fr));
+  }
+
+  &-3-col {
+    display: grid;
+    grid-gap: $size-lg;
+    grid-template-columns: repeat(auto-fit, minmax(288px, 1fr));
+  }
+
+  &-2-col {
+    display: grid;
+    grid-gap: $size-lg;
+    grid-template-columns: repeat(auto-fit, minmax(448px, 1fr));
+
+    @media (max-width: $breakpoint-sm) {
+      grid-template-columns: repeat(auto-fit, minmax(288px, 1fr));
+    }
+  }
+
+  &-block {
+    &--double {
+      grid-column: auto / span 2;
+
+      @media (max-width: $breakpoint-sm) {
+        grid-column: auto / span 1;
+      }
+    }
+  }
+}

src/wmcads/assets/sass/wmcads-grid/_wmcads-grid.scss

@@ -34,5 +34,6 @@ textarea,
 }
 
 // Import grid components
+@import "grid-css-grid";
 @import "grid-cols";
 @import "grid-spacing";

src/wmcads/assets/sass/wmcads-grid/grid.scss

@@ -38,6 +38,7 @@
   }
 
   // Import grid components
+  @import "grid-css-grid";
   @import "grid-cols";
   @import "grid-spacing";
 

src/wmcads/components/button/_button.scss

@@ -13,6 +13,7 @@ $btn-transition: ease-in-out background-color 0.2s, ease-in-out border 0.2s;
   border-radius: $btn-border-radius;
   color: $white;
   background-color: get-color(primary);
+  font-family: $x-font-family-bold;
   font-size: 1rem;
   font-weight: bold;
   text-align: center;

src/wmcads/components/content-card/_content-card.njk

@@ -15,7 +15,7 @@
 <{{tag}}{{attributes | safe}} class="wmcads-content-card{{"--blue" if params.isCta else "" }} {{"wmcads-content-card--event" if params.isEvent else "" }} {{"wmcads-content-card--news" if params.isNews else "" }} {{"wmcads-css-grid-block--double" if params.isDoubleCard else "" }} ">
     {% if(params.src) %}
         <img 
-        src="https://www.wmca.org.uk/media/3415/wmca-bournville-131.jpg{{"?anchor=center&mode=crop&width=920&height=300&rnd=132122595620000000" if params.isNewsFirst else "" }}{{"?anchor=center&mode=crop&width=480&height=357&rnd=132122595620000000" if params.isNewsSub else "" }}{{"?anchor=center&mode=crop&width=896&height=334&rnd=132122595620000000" if params.isSrcDefault else "" }}{{"?anchor=center&mode=crop&width=1316&height=345&rnd=132122595620000000" if params.isDoubleCard else "" }}{{"?anchor=center&mode=crop&width=600&height=334&rnd=132122595620000000" if params.isThirdCard else "" }}{{"?anchor=center&mode=crop&width=700&height=334&rnd=132122595620000000" if params.isDefault else "" }}" alt="content image">
+        src="https://www.wmca.org.uk/media/3415/wmca-bournville-131.jpg{{"?anchor=center&mode=crop&width=920&height=300&rnd=132122595620000000" if params.isNewsFirst else "" }}{{"?anchor=center&mode=crop&width=480&height=357&rnd=132122595620000000" if params.isNewsSub else "" }}{{"?anchor=center&mode=crop&width=896&height=334&rnd=132122595620000000" if params.isSrcDefault else "" }}{{"?anchor=center&mode=crop&width=1500&height=393&rnd=132122595620000000" if params.isDoubleCard else "" }}{{"?anchor=center&mode=crop&width=600&height=334&rnd=132122595620000000" if params.isThirdCard else "" }}{{"?anchor=center&mode=crop&width=700&height=334&rnd=132122595620000000" if params.isDefault else "" }}" alt="content image">
     {% endif %}
     {% if(params.isCta) %}
         <div class="wmcads-p-sm">