ref: bring back 'Our Principles' page (#72)

* ref: change nav colors and add 'primarylink'
* chore: replace image assets
* ref: change layout of 'principles' page
* ref: place 'Our Principles' back in the navbar
* chore: adjustment based on PR review

Author: arthurpalves

_data/navigation.yml

@@ -4,10 +4,11 @@ main:
   # to be moved to the page body
   # - title: "Categories"
   #   id: categories
-  # - title: "Our Principles"
-  #   url: /principles
-  - title: "About"
-    url: /about
   - title: "Jobs"
     url: https://workatbackbase.com/
     external: true
+  - title: "About"
+    url: /about
+  - title: "Our Principles"
+    url: /principles
+    id: principles

_includes/masthead.html

@@ -19,10 +19,11 @@
         </a>
       {% endif %}
     </div>
+
     <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
       <span class="navbar-toggler-icon"></span>
     </button>
-    <div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
+    <div class="collapse navbar-collapse justify-content-end me-4" id="navbarSupportedContent">
       <ul class="navbar-nav">
         {%- for item in site.data.navigation.main -%}
           {% if item.id == 'categories' %}
@@ -39,7 +40,7 @@
                 {% endfor %}
               </ul>
             </li>
-          {% else %}
+          {% elsif item.id != 'principles' %}
             <li class="nav-item">
               <a class="nav-link" href="{{ item.url | relative_url }}"{% if item.description %} title="{{ item.description }}"{% endif %} {% if item.external %}target="_blank"{% endif %}>
                 <span>{{ item.title }}</span>
@@ -49,6 +50,17 @@
         {%- endfor -%}
       </ul>
     </div>
+    {%- for item in site.data.navigation.main -%}
+      {% if item.id == 'principles' %}
+        <ul class="navbar-nav" style="text-align:right;">
+          <li class="nav-item">
+            <a class="nav-primarylink" href="{{ item.url | relative_url }}"{% if item.description %} title="{{ item.description }}"{% endif %} {% if item.external %}target="_blank"{% endif %} style="text-decoration:none;">
+              <span>{{ item.title }}</span>
+            </a>
+          </li>
+        </ul>
+      {% endif %}
+    {%- endfor -%}
     {% if site.search == true %}
     <button class="search__toggle" type="button">
       <span class="visually-hidden">{{ site.data.ui-text[site.locale].search_label | default: "Toggle search" }}</span>

_layouts/principles.html

@@ -11,34 +11,18 @@
       {% if page.excerpt %}<meta itemprop="description" content="{{ page.excerpt | markdownify | strip_html | strip_newlines | escape_once }}">{% endif %}
       {% if page.date %}<meta itemprop="datePublished" content="{{ page.date | date: "%B %d, %Y" }}">{% endif %}
       {% if page.modified %}<meta itemprop="dateModified" content="{{ page.modified | date: "%B %d, %Y" }}">{% endif %}
-
-      <section class="page__content" itemprop="text">
-        {% if page.splash %}
-          {% include bb_splash.html %}
-        {% endif %}
-        {% if page.feature_row %}
-          {% include feature_row.html %}
-        {% endif %}
-        {{ content }}
-      </section>
     </article>
   </section>
 
   <section class="section__entries">
     <div class="container">
-
       {% assign posts = site.principles %}
+      {% assign entries_layout = page.entries_layout | default: 'list' %}
       <div class="row">
-        <div class="offset-md-4 col-md-8">
-          <div class="row">
-            {% for post in posts %}
-              {% include archive-single.html type='list' %}
-            {% endfor %}
-          </div>
-        </div>
+      {% for post in posts %}
+        {% include archive-single.html type=entries_layout class="col-md-6 col-lg-4" %}
+      {% endfor %}
       </div>
-
-      {% include paginator.html %}
     </div>
   </div>
 </div>

_pages/principles.md

@@ -1,7 +1,8 @@
 ---
 layout: principles
 permalink: /principles/
+entries_layout: grid
 lead: power the <span class="fw-bolder">digital banking revolution</span>
-splash: true
+splash: false
 ---
 

_sass/abstract/_bootstrap.scss

@@ -50,7 +50,7 @@ $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-color: map-get($bb-palette, "dark-blue");
 $navbar-dark-hover-color: $navbar-dark-color;
 $navbar-nav-link-padding-x: 1rem;
 

_sass/components/_logo.scss

@@ -5,12 +5,12 @@
   font-size: $logo-font-size;
   display: inline-flex;
   vertical-align: middle;
-  color: map-get($bb-palette, "white");
+  color: map-get($bb-palette, "dark-blue");
 
   svg {
     object-fit: contain;
     height: .85em;
-    fill: map-get($bb-palette, "white");
+    fill: map-get($bb-palette, "dark-blue");
   }
 
   &::before {

_sass/components/_nav.scss

@@ -1,10 +1,12 @@
 .nav {
   &bar {
-    margin-bottom: 2rem;
+    margin-bottom: 0rem;
   }
 
   &-link {
     span {
+      vertical-align: middle;
+      display: table-cell;
       padding: map-get($spacers, 1) 0;
       border-bottom: 3px solid transparent;
       transition: .25s border-color;
@@ -16,6 +18,23 @@
     }
   }
 
+  &-primarylink {
+    span {
+      vertical-align: middle;
+      display: table-cell;
+      background: map-get($bb-palette, "blue");
+      color: map-get($bb-palette, "white");
+      font-weight: bold;
+      padding: map-get($spacers, 2) map-get($spacers, 3);
+      transition: .25s background-color;
+    }
+    &.active span,
+    &:hover span {
+      background: map-get($bb-palette, "red");
+      transition: .25s background-color;
+    }
+  }
+
   &bar:before {
     @include media-breakpoint-up(md) {
       @at-root .layout--home & {
@@ -30,7 +49,7 @@
     right: 0;
     width: 100%;
     height: 100%;
-    background: map-get($bb-palette, 'blue');
+    background: map-get($bb-palette, 'white');
     z-index: -1;
   }
 }

_sass/layout/_footer.scss

@@ -2,6 +2,13 @@
   .bb-engineering-logo {
     color: map-get($bb-palette, "white");
     fill: map-get($bb-palette, "white");
+    svg {
+      fill: map-get($bb-palette, "white");
+    }
+    &::before {
+      content: "/";
+      color: map-get($bb-palette, "white");
+    }
   } 
   .social-icons {
     margin-top: map-get($spacers, 3);