From 74b2d012de784fbd1d711e7334f0de699cf73473 Mon Sep 17 00:00:00 2001
From: Tymur Biedukhin <tymur.biedukhin@bigcommerce.com>
Date: Thu, 9 Jul 2020 18:42:28 +0300
Subject: [PATCH 1/2] fix(bctheme): BCTHEME-18 Cornerstone - Text logos
 truncated when viewed on mobile devices and smaller browser sizes

---
 assets/scss/layouts/header/_header.scss         | 17 +++++++++--------
 .../settings/global/typography/_typography.scss |  4 ++--
 2 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/assets/scss/layouts/header/_header.scss b/assets/scss/layouts/header/_header.scss
index 2eda835d52..1ae4394068 100644
--- a/assets/scss/layouts/header/_header.scss
+++ b/assets/scss/layouts/header/_header.scss
@@ -22,11 +22,13 @@
     top: 0;
     width: 100%;
     z-index: zIndex("higher");
+    height: $header-height;
 
     @include breakpoint("medium") {
         border-bottom: container("border");
         overflow: visible;
         position: relative;
+        height: auto;
     }
 
     &.is-open {
@@ -42,6 +44,7 @@
     font-size: 0;   // 1
     margin: 0 remCalc($header-toggle-width); // 2
     text-align: center;
+    height: inherit;
 
     @include breakpoint("small") { // 4
         margin-left: remCalc($header-toggle-width * 1.5);
@@ -65,11 +68,14 @@
     > a {
         @include clearfix;
         color: $storeName-color;
-        display: inline-block;
-        padding: $header-logo-paddingVertical 0;
+        height: inherit;
+        display: flex;
+        align-items: center;
+        margin-right: auto;
+        margin-left: auto;
         position: relative;
         text-decoration: none;
-        width: 60%;
+        width: 70%;
         z-index: zIndex("low");
 
         // scss-lint:disable NestingDepth
@@ -124,22 +130,17 @@
     margin-left: auto;
     margin-right: auto;
     overflow: hidden;
-    padding: remCalc(3px) 0;
     text-overflow: ellipsis;
     text-transform: uppercase;
     white-space: nowrap;
 
     @include breakpoint("small") {
         font-size: $fontSize-logo-medium;
-        padding-bottom: 0;
-        padding-top: 0;
     }
 
     @include breakpoint("medium") {
         display: inline;
         font-size: $fontSize-logo-large;
-        margin-left: 0;
-        margin-right: -(remCalc(2px)); // 3
         max-width: none;
         overflow: auto;
         white-space: normal;
diff --git a/assets/scss/settings/global/typography/_typography.scss b/assets/scss/settings/global/typography/_typography.scss
index 2147a41bb7..75cb1edb91 100644
--- a/assets/scss/settings/global/typography/_typography.scss
+++ b/assets/scss/settings/global/typography/_typography.scss
@@ -43,8 +43,8 @@ $fontSize-smaller:              stencilNumber("fontSize-h5");
 $fontSize-smallest:             stencilNumber("fontSize-h6");
 $fontSize-tiny:                 12px;
 $fontSize-logo-large:           stencilNumber("logo_fontSize");
-$fontSize-logo-medium:          $fontSize-logo-large - 6px;
-$fontSize-logo-small:           $fontSize-logo-medium - 2px;
+$fontSize-logo-medium:          2.5vw;
+$fontSize-logo-small:           $fontSize-logo-medium - 0.25vw;
 
 
 // Line heights

From d203a4c649f7c78de8cc896434ff7bad37c1b2db Mon Sep 17 00:00:00 2001
From: Tymur Biedukhin <tymur.biedukhin@bigcommerce.com>
Date: Fri, 10 Jul 2020 11:10:22 +0300
Subject: [PATCH 2/2] header-logo > a selector changed to header-logo__link css
 class

---
 assets/scss/layouts/header/_header.scss     | 5 ++---
 templates/components/common/store-logo.html | 2 +-
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/assets/scss/layouts/header/_header.scss b/assets/scss/layouts/header/_header.scss
index 1ae4394068..bc17701cca 100644
--- a/assets/scss/layouts/header/_header.scss
+++ b/assets/scss/layouts/header/_header.scss
@@ -65,14 +65,13 @@
         }
     }
 
-    > a {
+    &__link {
         @include clearfix;
         color: $storeName-color;
         height: inherit;
         display: flex;
         align-items: center;
-        margin-right: auto;
-        margin-left: auto;
+        margin: 0 auto;
         position: relative;
         text-decoration: none;
         width: 70%;
diff --git a/templates/components/common/store-logo.html b/templates/components/common/store-logo.html
index 737fd43ce6..44cf987821 100644
--- a/templates/components/common/store-logo.html
+++ b/templates/components/common/store-logo.html
@@ -1,4 +1,4 @@
-<a href="{{urls.home}}">
+<a href="{{urls.home}}" class="header-logo__link">
     {{#if settings.store_logo.image}}
         {{#if theme_settings.logo_size '===' 'original'}}
             <img class="header-logo-image-unknown-size" src="{{getImage settings.store_logo.image 'logo_size'}}" alt="{{settings.store_logo.title}}" title="{{settings.store_logo.title}}">