Update styling with new Backbase brand (#49)

Author: robinsonzimmermann

.github/workflows/build.yml

@@ -17,10 +17,10 @@ jobs:
         key: ${{ runner.os }}-gems-${{ hashFiles('Gemfile') }}
         restore-keys: |
           ${{ runner.os }}-gems-
-    - name: Set up Ruby 2.6
+    - name: Set up Ruby 2.7
       uses: ruby/setup-ruby@v1
       with:
-        ruby-version: 2.6.10
+        ruby-version: 2.7
     - name: Bundle install
       run: |
         gem install bundler:2.2.12

Gemfile

@@ -34,6 +34,6 @@ gem "webrick", "~> 1.7"
 
 gem "minimal-mistakes-jekyll"
 
-gem 'bootstrap', '~> 5.0.0.beta3'
+gem 'bootstrap', '~> 5.2.3'
 
 gem 'jekyll_asset_pipeline', '~> 0.6.2'

Gemfile.lock

@@ -1,32 +1,31 @@
 GEM
   remote: https://rubygems.org/
   specs:
-    actionpack (6.1.4.1)
-      actionview (= 6.1.4.1)
-      activesupport (= 6.1.4.1)
-      rack (~> 2.0, >= 2.0.9)
+    actionpack (7.0.4.3)
+      actionview (= 7.0.4.3)
+      activesupport (= 7.0.4.3)
+      rack (~> 2.0, >= 2.2.0)
       rack-test (>= 0.6.3)
       rails-dom-testing (~> 2.0)
       rails-html-sanitizer (~> 1.0, >= 1.2.0)
-    actionview (6.1.4.1)
-      activesupport (= 6.1.4.1)
+    actionview (7.0.4.3)
+      activesupport (= 7.0.4.3)
       builder (~> 3.1)
       erubi (~> 1.4)
       rails-dom-testing (~> 2.0)
       rails-html-sanitizer (~> 1.1, >= 1.2.0)
-    activesupport (6.1.4.1)
+    activesupport (7.0.4.3)
       concurrent-ruby (~> 1.0, >= 1.0.2)
       i18n (>= 1.6, < 2)
       minitest (>= 5.1)
       tzinfo (~> 2.0)
-      zeitwerk (~> 2.3)
     addressable (2.8.0)
       public_suffix (>= 2.0.2, < 5.0)
-    autoprefixer-rails (10.2.5.0)
-      execjs (< 2.8.0)
-    bootstrap (5.0.0)
+    autoprefixer-rails (10.4.13.0)
+      execjs (~> 2)
+    bootstrap (5.2.3)
       autoprefixer-rails (>= 9.1.0)
-      popper_js (>= 2.9.2, < 3)
+      popper_js (>= 2.11.6, < 3)
       sassc-rails (>= 2.0.0)
     builder (3.2.4)
     colorator (1.1.0)
@@ -35,9 +34,9 @@ GEM
     em-websocket (0.5.2)
       eventmachine (>= 0.12.9)
       http_parser.rb (~> 0.6.0)
-    erubi (1.10.0)
+    erubi (1.12.0)
     eventmachine (1.2.7)
-    execjs (2.7.0)
+    execjs (2.8.1)
     faraday (1.3.0)
       faraday-net_http (~> 1.0)
       multipart-post (>= 1.2, < 3)
@@ -94,12 +93,12 @@ GEM
     listen (3.4.1)
       rb-fsevent (~> 0.10, >= 0.10.3)
       rb-inotify (~> 0.9, >= 0.9.10)
-    loofah (2.18.0)
+    loofah (2.20.0)
       crass (~> 1.0.2)
       nokogiri (>= 1.5.9)
     mercenary (0.4.0)
     method_source (1.0.0)
-    mini_portile2 (2.8.0)
+    mini_portile2 (2.8.1)
     minima (2.5.1)
       jekyll (>= 3.5, < 5.0)
       jekyll-feed (~> 0.9)
@@ -111,35 +110,36 @@ GEM
       jekyll-include-cache (~> 0.1)
       jekyll-paginate (~> 1.1)
       jekyll-sitemap (~> 1.3)
-    minitest (5.14.4)
+    minitest (5.18.0)
     multipart-post (2.1.1)
-    nokogiri (1.13.9)
+    nokogiri (1.14.3)
       mini_portile2 (~> 2.8.0)
       racc (~> 1.4)
-    nokogiri (1.13.9-x86_64-darwin)
+    nokogiri (1.14.3-x86_64-darwin)
       racc (~> 1.4)
     octokit (4.20.0)
       faraday (>= 0.9)
       sawyer (~> 0.8.0, >= 0.5.3)
     pathutil (0.16.2)
       forwardable-extended (~> 2.6)
-    popper_js (2.9.2)
+    popper_js (2.11.7)
     public_suffix (4.0.6)
-    racc (1.6.0)
-    rack (2.2.4)
-    rack-test (1.1.0)
-      rack (>= 1.0, < 3)
+    racc (1.6.2)
+    rack (2.2.6.4)
+    rack-test (2.1.0)
+      rack (>= 1.3)
     rails-dom-testing (2.0.3)
       activesupport (>= 4.2.0)
       nokogiri (>= 1.6)
-    rails-html-sanitizer (1.4.3)
-      loofah (~> 2.3)
-    railties (6.1.4.1)
-      actionpack (= 6.1.4.1)
-      activesupport (= 6.1.4.1)
+    rails-html-sanitizer (1.5.0)
+      loofah (~> 2.19, >= 2.19.1)
+    railties (7.0.4.3)
+      actionpack (= 7.0.4.3)
+      activesupport (= 7.0.4.3)
       method_source
-      rake (>= 0.13)
+      rake (>= 12.2)
       thor (~> 1.0)
+      zeitwerk (~> 2.5)
     rake (13.0.6)
     rb-fsevent (0.10.4)
     rb-inotify (0.10.1)
@@ -159,29 +159,29 @@ GEM
     sawyer (0.8.2)
       addressable (>= 2.3.5)
       faraday (> 0.8, < 2.0)
-    sprockets (4.0.2)
+    sprockets (4.2.0)
       concurrent-ruby (~> 1.0)
-      rack (> 1, < 3)
-    sprockets-rails (3.4.1)
+      rack (>= 2.2.4, < 4)
+    sprockets-rails (3.4.2)
       actionpack (>= 5.2)
       activesupport (>= 5.2)
       sprockets (>= 3.0.0)
     terminal-table (2.0.0)
       unicode-display_width (~> 1.1, >= 1.1.1)
-    thor (1.1.0)
-    tilt (2.0.10)
-    tzinfo (2.0.4)
+    thor (1.2.1)
+    tilt (2.1.0)
+    tzinfo (2.0.6)
       concurrent-ruby (~> 1.0)
     unicode-display_width (1.7.0)
     webrick (1.7.0)
-    zeitwerk (2.5.1)
+    zeitwerk (2.6.7)
 
 PLATFORMS
   ruby
   x86_64-darwin-19
 
 DEPENDENCIES
-  bootstrap (~> 5.0.0.beta3)
+  bootstrap (~> 5.2.3)
   jekyll (~> 4.2.0)
   jekyll-category-pages
   jekyll-paginate-v2

_includes/bb_engineering_logo.html

@@ -1,34 +1,28 @@
 <span class="bb-engineering-logo">
-  <svg class="d-lg-none" version="1.1" viewbox="0 0 28 20" xmlns="http://www.w3.org/2000/svg">
-    <g transform="matrix(.0038972 0 0 -.0038972 0 16.264)">
-    <path d="m5576.6 4164.3h-3622.5l519.86-907.23h208.92l30.38-0.81 2432.4-0.14c63.1 0 215.36-31.21 216.18-234.31v-1878.4c-0.82-203.53-153.08-234.29-216.18-234.29l-3066.9-7.391-1.63 769.72h2524.7v863.65l-2579.3-3.45-973.84 1639h-1048.8l1175.2-2047.1-1.19-2115.4h876.83v-0.82031h3582.3c403.34 0 638.04 351.4 638.04 1055.7v2190c0 604-234.7 911.2-694.58 911.2" fill="#c3222b" fill-rule="evenodd"/>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60.09 66.09">
+    <g>
+      <polygon
+        points="9.49 20.83 18.98 20.83 18.98 11.34 18.98 1.85 9.49 1.85 0 1.85 0 11.34 9.49 11.34 9.49 20.83" />
+      <path
+        d="M38.98,32.76v-1.49c9.3-1.3,11.72-7.45,11.72-13.5,0-7.48-5.12-15.59-17.78-15.89h-7.61V11.34h7.61c6.69,.11,8.11,4.45,8,7.87-.23,7.66-3.67,7.88-9.59,8.05H9.49v37.96h22.69c15.26,0,20.38-8.65,20.38-17.68,0-7.72-2.7-13.39-13.58-14.79Zm-6.52,22.9h-13.31v-19.17h13.31c8.04,0,10.63,1.52,10.63,9.74,0,6.91-2.59,9.42-10.63,9.42Z" />
     </g>
   </svg>
-  <svg class="d-none d-lg-block" version="1.1" viewbox="0 0 200 20" xmlns="http://www.w3.org/2000/svg">
-    <g transform="matrix(.0038972 0 0 -.0038972 0 16.264)">
-    <path d="m5576.6 4164.3h-3622.5l519.86-907.23h208.92l30.38-0.81 2432.4-0.14c63.1 0 215.36-31.21 216.18-234.31v-1878.4c-0.82-203.53-153.08-234.29-216.18-234.29l-3066.9-7.391-1.63 769.72h2524.7v863.65l-2579.3-3.45-973.84 1639h-1048.8l1175.2-2047.1-1.19-2115.4h876.83v-0.82031h3582.3c403.34 0 638.04 351.4 638.04 1055.7v2190c0 604-234.7 911.2-694.58 911.2" fill="#c3222b" fill-rule="evenodd"/>
-      <g transform="scale(1.1944)">
-      <path d="m15537 2154.1v376.21c4.3 161.13-147.5 204.32-185 204.32h-2038c-52.5 0-180.5-26.29-181.2-196.65v-383.88zm5.3-754.58h-2409.5v-1399.5h-755.2v2783.7c0 476.43 248.7 710.4 725.1 710.4h2555.3c430.5 0 641.9-257.06 641.9-763.09v-2731h-755.1l-2.5 1399.5" fill="#fff" fill-rule="evenodd"/>
-      </g>
-      <g transform="scale(1.8186)">
-      <path d="m14334 919.13v-915.07h-496.1v2288.7h496.1v-879.01h867.4l521.6 879.67h576.5l-646.6-1125.7 646.6-1166.2h-572.8l-530.8 917.59h-861.9" fill="#fff" fill-rule="evenodd"/>
-      </g>
-      <g transform="scale(3.1484)">
-      <path d="m14896 0v1325.5h1404v-289.81h-1119.6v-219.28h1119.6v-285.93h-1119.6v-242.45h1119.6v-288.02h-1404" fill="#fff" fill-rule="evenodd"/>
-      </g>
-      <g transform="scale(2.8247)">
-      <path d="m15879 323.8c22.1 0 76.2 11.098 76.4 83.063v103.8c-0.2 72.032-54.3 82.929-76.4 82.929l-1016.2 0.287c-150.4 0-215.9 110.05-215.9 333.64v226.42c0 214.05 76.9 322.61 226.8 322.61h1426.2l-188.7-321.31-1068.6 0.62c-22.1 0-76-11.03-76.7-83.08v-80.078c0.7-72.104 54.6-83.015 76.7-83.015l990.1 0.51c166 0 249.3-97.812 249.3-330.82v-201.65c0-252.18-83.3-376.73-249.3-376.73h-1446.1l194.9 322.32 1097.5 0.492" fill="#fff" fill-rule="evenodd"/>
-      </g>
-      <g transform="scale(1.5033)">
-      <path d="m16298 2167.2-2122-1.17c-41.9 0-143.3-20.76-144-155.87v-1249.5c0.7-135.39 102.1-155.85 144-155.85l2124.1 0.824v-600.74h-2410.7c-306.2 0-462.7 233.76-462.7 702.3v1456.9c0 401.79 156.5 606.15 462.7 606.15h2410.7v-603.51l-2.1 0.54" fill="#fff" fill-rule="evenodd"/>
-      </g>
-      <path d="m12890 2818c5.4-192.69-175.8-244.03-220.7-244.03l-2534.4 1.2v684.96l2534.4 0.62c44.9 0 226.1-51.38 220.7-243.69zm0-1666.3c5.4-192.89-175.8-244.52-220.7-244.52l-2534.4 1.25v763.11l2534.4 1.24c44.9 0 226.1-51.44 220.7-244.32zm923.9 2189.4c0 604.81-243.8 829.67-694.7 824.49h-3891.3v-4161.6h3891.3c450.9-1.1992 694.7 201.51 694.7 806.09v721.34c0 233.87-44.9 413.57-129.8 544.05 84.9 130.71 129.8 310.41 129.8 543.65v721.98" fill="#fff" fill-rule="evenodd"/>
-      <g transform="scale(2.1332)">
-      <path d="m15867 1321c2.3-90.33-82.7-114.4-103.7-114.4l-1188.1 0.57v321.08l1188.1 0.3c21 0 106-24.09 103.7-114.24zm0-781.12c2.3-90.422-82.7-114.62-103.7-114.62l-1188.1 0.586v357.72l1188.1 0.583c21 0 106-24.114 103.7-114.53zm432.9 1026.3c0 283.52-114.3 388.93-325.9 386.5h-1823.6v-1950.8h1823.6c211.6-0.56216 325.9 94.463 325.9 377.87v338.14c0 109.63-21 193.87-61 255.03 40 61.271 61 145.51 61 254.85v338.44" fill="#fff" fill-rule="evenodd"/>
-      </g>
-      <g transform="scale(2.4801)">
-      <path d="m15933 1037.4-0.2 181.17c2 77.6-70.8 98.39-89.2 98.39h-981.2c-25.6 0-87-12.66-87.3-94.7v-184.86zm2.2-363.39h-1160.1v-673.98h-363.8v1340.6c0 229.44 120 342.11 349.4 342.11h1230.6c207 0 308.9-123.79 308.9-367.48v-1315.2h-363.9l-1.1 673.98" fill="#fff" fill-rule="evenodd"/>
-      </g>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="60.09 0 330.12 66.09" class="d-none d-lg-block">
+    <g>
+      <path
+        d="M60.04,49.8c0-8.1,5.31-16.29,16.66-16.29,6.52,0,10.15,1.86,12.94,5.59v-12.1h-24.2v-8.38h33.51V55.85h5.59v9.31h-14.89v-4.65c-2.79,3.72-6.42,5.59-12.94,5.59-11.36,0-16.66-8.19-16.66-16.29Zm29.6,0c0-4.65-3.35-7.91-10.15-7.91s-10.15,3.26-10.15,7.91,3.35,7.91,10.15,7.91,10.15-3.26,10.15-7.91Z" />
+      <path
+        d="M108.72,41.89c0-14.61,7.17-24.2,20.85-24.2,12.19,0,19.36,7.54,19.36,18.62h-9.31c-.37-5.77-2.33-10.24-9.59-10.24-8.66,0-12.01,3.72-12.01,15.82s3.35,15.82,12.01,15.82c7.26,0,9.22-4.47,9.59-10.24h9.31c0,11.08-7.17,18.62-19.36,18.62-13.68,0-20.85-9.59-20.85-24.2Z" />
+      <path
+        d="M167.08,46.17v18.99h-9.31V0h9.31V37.79h7.26l13.03-19.18h11.26l-15.92,23.36,15.92,23.18h-11.26l-13.03-18.99h-7.26Z" />
+      <path
+        d="M249.18,41.89c0,13.68-5.31,24.2-20.39,24.2-6.52,0-11.08-2.51-13.87-6.52v5.59h-9.31V0h9.31V24.2c2.79-4,7.35-6.52,13.87-6.52,15.08,0,20.39,10.52,20.39,24.2Zm-9.31,0c0-11.17-3.35-15.82-12.47-15.82s-12.47,4.65-12.47,15.82,3.35,15.82,12.47,15.82,12.47-4.65,12.47-15.82Z" />
+      <path
+        d="M255.24,49.8c0-8.1,5.31-16.29,16.66-16.29,6.52,0,10.15,1.86,12.94,5.59v-12.1h-24.2v-8.38h33.51V55.85h5.59v9.31h-14.89v-4.65c-2.79,3.72-6.42,5.59-12.94,5.59-11.36,0-16.66-8.19-16.66-16.29Zm29.6,0c0-4.65-3.35-7.91-10.15-7.91s-10.15,3.26-10.15,7.91,3.35,7.91,10.15,7.91,10.15-3.26,10.15-7.91Z" />
+      <path
+        d="M306.71,60.13v-9.4c8.47,5.31,12.85,6.98,19.73,6.98,6.05,0,8.19-2.61,8.19-5.49,0-3.26-2.42-5.03-10.98-6.89-13.31-2.89-16.94-7.26-16.94-14.61,0-7.73,6.61-13.03,16.57-13.03,6.24,0,12.38,1.68,16.94,4.84v8.38c-6.8-3.35-12.75-4.84-17.87-4.84-4.75,0-6.33,2.05-6.33,4.37,0,2.61,1.21,4.37,9.12,6.52,13.78,3.72,18.8,6.61,18.8,15.17,0,7.91-6.61,13.96-17.5,13.96-7.26,0-12.94-1.4-19.73-5.96Z" />
+      <path
+        d="M350,41.89c0-14.61,5.77-24.2,20.11-24.2s20.11,8.66,20.11,23.27v5.12h-30.72c.65,6.52,3.26,11.64,14.15,11.64,3.72,0,7.35,0,13.4-1.68v8.19c-7.26,1.86-9.87,1.86-13.4,1.86-21.04,0-23.64-14.99-23.64-24.2Zm30.9-4.19c-.19-8.1-3.26-11.64-10.8-11.64s-10.33,4.1-10.8,11.64h21.6Z" />
     </g>
   </svg>
   <span class="visually-hidden">{{ site.title }}</span>

_includes/feature_row.html

@@ -14,17 +14,17 @@
     {% assign teaser = site.teaser %}
   {% endif %}
 
-  <div class="feature__item{% if include.type %}--{{ include.type }}{% endif %}">
+  <div class="feature__item{% if include.type %}--{{ include.type }}{% endif %} card">
     <div class="archive__item">
       {% if teaser %}
-        <div class="archive__item-teaser {{ post.header.teaser_class }}">
-          <div class="card overflow-hidden">
-            <img src="{{ teaser | relative_url }}" alt="{{ post.header.teaser_alt }}">
+        <div class="archive__item-teaser {{ post.header.teaser_class }} m-0">
+          <div class="overflow-hidden h-100">
+            <img class="h-100" src="{{ teaser | relative_url }}" alt="{{ post.header.teaser_alt }}">
           </div>
         </div>
       {% endif %}
 
-      <div class="archive__item-body">
+      <div class="archive__item-body card-body">
         {% if post.title %}
           <h2 class="archive__item-title">{{ post.title }}</h2>
         {% endif %}

_includes/head/custom.html

@@ -1,3 +1,3 @@
 <link rel="preconnect" href="https://fonts.gstatic.com">
-<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800&display=swap" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css2?family=Libre+Franklin:wght@300;700&display=swap" rel="stylesheet" data-optimized-fonts="true">
 <link href="https://fonts.googleapis.com/icon?family=Material+Icons+Round" rel="stylesheet">

_includes/masthead.html

@@ -1,6 +1,6 @@
 {% capture logo_path %}{{ site.logo }}{% endcapture %}
 
-<nav id="site-nav" class="navbar navbar-expand-lg navbar-dark bg-primary">
+<nav id="site-nav" class="navbar navbar-expand-lg navbar-dark">
   <div class="container">
     <div class="navbar-brand">
       {% if site.bb_engineering_logo == true %}

_sass/abstract/_bootstrap.scss

@@ -1,8 +1,8 @@
 $primary: map-get($bb-palette, "dark-blue");
-$secondary: map-get($bb-palette, "red");
-$info: map-get($bb-palette, "bright-blue");
+$secondary: map-get($bb-palette, "electric-blue");
+$info: map-get($bb-palette, "blue");
 $warning: map-get($bb-palette, "light-orange");
-$danger: map-get($bb-palette, "red");
+$danger: map-get($bb-palette, "blue");
 $light: map-get($bb-palette, "offwhite");
 $dark: map-get($bb-palette, "slate");
 
@@ -29,7 +29,7 @@ $figure-caption-color: $text-muted;
 
 $link-color: map-get($bb-palette, "dark-blue");
 
-$font-family-sans-serif: "Inter", sans-serif;
+$font-family-sans-serif: "Libre Franklin", sans-serif;
 
 $headings-font-weight: 200;
 
@@ -39,26 +39,28 @@ $btn-link-hover-color: $btn-link-color;
 $nav-link-color: $primary;
 $nav-link-hover-color: $nav-link-color;
 
-$border-radius: .5rem;
-$border-radius-sm: .2rem;
+$border-radius: 0;
+$border-radius-sm: 0;
 $card-border-radius: $border-radius;
 $card-border-width: 0;
 
 $enable-shadows: true;
 
+$card-box-shadow: 0px 2px 3px rgba(0,0,0,.25);
+
 $min-contrast-ratio: 2.8;
 
 $navbar-dark-color: map-get($bb-palette, "white");
 $navbar-dark-hover-color: $navbar-dark-color;
 $navbar-nav-link-padding-x: 1rem;
 
-$navbar-padding-y: 1.5rem;
+$navbar-padding-y: 2.3rem;
 $navbar-padding-x: 0;
 
 $pagination-color: map-get($bb-palette, "white");
-$pagination-bg: map-get($bb-palette, "red");
+$pagination-bg: map-get($bb-palette, "blue");
 $pagination-hover-color: map-get($bb-palette, "white");
-$pagination-hover-bg: mix(black, map-get($bb-palette, "red"), 10%);
+$pagination-hover-bg: mix(black, map-get($bb-palette, "blue"), 10%);
 $pagination-border-width: 0;
 
 $lead-font-size: 1.5em;

_sass/abstract/_variables.scss

@@ -1,10 +1,9 @@
 $bb-palette: (
-    "dark-blue": #181E41,
-    "bright-blue": #00A1E0,
+    "dark-blue": #091C35,
+    "electric-blue": #69FEFF,
     "white": #ffffff,
-    "red": #c22327,
-    "dark-orange": #E24B2C,
-    "mid-orange": #F2780C,
+    "blue": #3366FF,
+    "tangerine": #FF6047,
     "light-orange": #FFAC09,
     "slate": #302f2b,
     "grey": #737373,
@@ -13,7 +12,7 @@ $bb-palette: (
     "offwhite": #f3f3f3
 );
 
-$spacer: 1rem;
+$spacer: 1.5rem;
 $spacers: (
   0: 0,
   1: $spacer / 4,
@@ -23,7 +22,7 @@ $spacers: (
   5: $spacer * 3,
 );
 
-$family-sans-serif: 'Inter', sans-serif;
+$family-sans-serif: 'Libre Franklin', sans-serif;
 
 $footer-background-color: map-get($bb-palette, 'dark-blue');
 $footer-color: map-get($bb-palette, "white");
@@ -34,6 +33,8 @@ $button-text-color: map-get($bb-palette, 'dark-blue');
 $button-text-hover-color: map-get($bb-palette, 'dark-blue');
 $button-text-decoration: none;
 $button-text-hover-background-color: transparent;
+$btn-padding-y: map-get($spacers, 2);
+$btn-padding-x: map-get($spacers, 4);
 
 $navbar-padding-y: 1rem;
 $navbar-padding-x: 1rem;