Adjustable logo height using variables

web/themes/iucn_frontend/less/jumbotron.less

@@ -35,7 +35,7 @@
 
   .path-frontpage & {
     // background-position: center bottom;
-    height: calc(100vh - 182px);
+    height: calc(100vh - 182px - @navbar-increase);
     margin-bottom: 0;
     min-height: 231px;
 
@@ -139,19 +139,20 @@
 @media (max-width: 767px) {
   .jumbotron {
     .path-frontpage & {
-      height: calc(100vh - 239px);
+      height: calc(100vh - 239px - @navbar-increase);
+      min-height: 340px;
     }
 
     .path-frontpage #sliding-popup ~ & {
-      height: calc(100vh - 286px);
+      height: calc(100vh - 286px - @navbar-increase);
     }
 
     .path-frontpage.toolbar-fixed & {
-      height: calc(100vh - 278px);
+      height: calc(100vh - 278px - @navbar-increase);
     }
 
     .path-frontpage.toolbar-fixed.toolbar-tray-open & {
-      height: calc(100vh - 318px);
+      height: calc(100vh - 318px - @navbar-increase);
     }
   }
 }

web/themes/iucn_frontend/less/navbar.less

@@ -6,7 +6,10 @@
     margin-right: 20px;
     margin-top: 12px;
     padding-right: 0;
-    height: 64px;
+    height: @navbar-logo-height--mobile;
+    @media (min-width: 1200px) {
+      height: @navbar-logo-height;
+    }
     img {
       height: 100%;
       width: auto;
@@ -31,3 +34,15 @@
     }
   }
 }
+
+@media (min-width: 1200px) {
+  .navbar-nav>li>a {
+    padding-top: (33px + (@navbar-increase / 2));
+    padding-bottom: (33px + (@navbar-increase / 2));
+  }
+}
+
+.navbar-toggle {
+  margin-top: (27px + (@navbar-increase--mobile / 2));
+  margin-bottom: (27px + (@navbar-increase--mobile / 2));
+}

web/themes/iucn_frontend/less/variables.less

@@ -1 +1,7 @@
 @node-modules: "../node_modules";
+
+@navbar-logo-height: 90px;
+@navbar-logo-height--mobile: 80px;
+// Variable used to increase the site logo height across page components (e.g. jumbotron height, main menu item paddings)
+@navbar-increase: (@navbar-logo-height - 64px);
+@navbar-increase--mobile: (@navbar-logo-height--mobile - 64px);

web/themes/iucn_frontend/templates/block/block--system-branding-block.html.twig

@@ -0,0 +1,30 @@
+{% extends "block--bare.html.twig" %}
+{#
+/**
+ * @file
+ * Default theme implementation for a branding block.
+ *
+ * Each branding element variable (logo, name, slogan) is only available if
+ * enabled in the block configuration.
+ *
+ * Available variables:
+ * - site_logo: Logo for site as defined in Appearance or theme settings.
+ * - site_name: Name for site as defined in Site information settings.
+ * - site_slogan: Slogan for site as defined in Site information settings.
+ *
+ * @ingroup templates
+ */
+#}
+{% block content %}
+  {% if site_logo %}
+    <a class="logo navbar-btn pull-left" href="{{ path('<front>') }}" title="{{ 'Home'|t }}" rel="home">
+      <img src="{{ site_logo }}" alt="{{ 'Home'|t }}" />
+    </a>
+  {% endif %}
+  {% if site_name %}
+    <a class="name navbar-brand sr-only" href="{{ path('<front>') }}" title="{{ 'Home'|t }}" rel="home">{{ site_name }}</a>
+  {% endif %}
+  {% if site_slogan %}
+    <p class="navbar-text">{{ site_slogan }}</p>
+  {% endif %}
+{% endblock %}