From 7504e48a1a6eaabf7303ee523283565e77eb4496 Mon Sep 17 00:00:00 2001
From: Caleb Eby <caleb.eby01@gmail.com>
Date: Tue, 31 Aug 2021 08:51:50 -0700
Subject: [PATCH 1/5] Scale down logo more for small screens

---
 src/components/sky-nav/sky-nav.scss | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/components/sky-nav/sky-nav.scss b/src/components/sky-nav/sky-nav.scss
index 6a8126dfb..e6a5b830f 100644
--- a/src/components/sky-nav/sky-nav.scss
+++ b/src/components/sky-nav/sky-nav.scss
@@ -182,8 +182,14 @@ $_masthead-height-sm: ms.step(7);
   margin: (ms.step(-6) * -1); /* 2 */
   transition: opacity transition.$slow ease.$out,
     transform transition.$quick ease.$out;
-  width: ms.step(8);
-
+  width: fluid.fluid-calc(breakpoint.$s, breakpoint.$l, ms.step(7), ms.step(9));
+  @media (min-width: breakpoint.$l) {
+    width: ms.step(8);
+  }
+  @media (max-width: breakpoint.$s) {
+    width: ms.step(7);
+  }
+  
   /**
    * When the containing logo is hovered, scale up this element. Scaling this
    * element instead of the parent helps avoid any accidental overflow or

From 6bbe1ce59de27e5fa93b3861d99af169f5c7312d Mon Sep 17 00:00:00 2001
From: Caleb Eby <caleb.eby01@gmail.com>
Date: Tue, 31 Aug 2021 09:18:42 -0700
Subject: [PATCH 2/5] Prettier

---
 src/components/sky-nav/sky-nav.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/sky-nav/sky-nav.scss b/src/components/sky-nav/sky-nav.scss
index e6a5b830f..4a063ec17 100644
--- a/src/components/sky-nav/sky-nav.scss
+++ b/src/components/sky-nav/sky-nav.scss
@@ -189,7 +189,7 @@ $_masthead-height-sm: ms.step(7);
   @media (max-width: breakpoint.$s) {
     width: ms.step(7);
   }
-  
+
   /**
    * When the containing logo is hovered, scale up this element. Scaling this
    * element instead of the parent helps avoid any accidental overflow or

From b9190e59b844bf233e2a7b7b9b51247a8a5bc638 Mon Sep 17 00:00:00 2001
From: Caleb Eby <caleb.eby01@gmail.com>
Date: Tue, 31 Aug 2021 09:19:12 -0700
Subject: [PATCH 3/5] Add changeset

---
 .changeset/ten-parrots-battle.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/ten-parrots-battle.md

diff --git a/.changeset/ten-parrots-battle.md b/.changeset/ten-parrots-battle.md
new file mode 100644
index 000000000..c68df524c
--- /dev/null
+++ b/.changeset/ten-parrots-battle.md
@@ -0,0 +1,5 @@
+---
+'@cloudfour/patterns': minor
+---
+
+Adjust sizing of logo in sky nav

From 53e6d2f3d5d3ac604529f92c698b16111483eb91 Mon Sep 17 00:00:00 2001
From: Caleb Eby <caleb.eby01@gmail.com>
Date: Tue, 31 Aug 2021 09:45:23 -0700
Subject: [PATCH 4/5] Add explanation comment

---
 src/components/sky-nav/sky-nav.scss | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/sky-nav/sky-nav.scss b/src/components/sky-nav/sky-nav.scss
index 4a063ec17..0fbd1715b 100644
--- a/src/components/sky-nav/sky-nav.scss
+++ b/src/components/sky-nav/sky-nav.scss
@@ -174,6 +174,7 @@ $_masthead-height-sm: ms.step(7);
  *    around for visual balance. We could subtract this value from the container
  *    padding, but it felt easier to understand the scope of the change to me
  *    from this element. (Though now I'm second-guessing myself...)
+ * 3. ms.step(9) is used instead of ms.step(8) because ms.step(8) leads to a big jump at the large breakpoint
  */
 .c-sky-nav__logo-object {
   display: block; /* 1 */
@@ -182,7 +183,7 @@ $_masthead-height-sm: ms.step(7);
   margin: (ms.step(-6) * -1); /* 2 */
   transition: opacity transition.$slow ease.$out,
     transform transition.$quick ease.$out;
-  width: fluid.fluid-calc(breakpoint.$s, breakpoint.$l, ms.step(7), ms.step(9));
+  width: fluid.fluid-calc(breakpoint.$s, breakpoint.$l, ms.step(7), ms.step(9)); /* 3 */
   @media (min-width: breakpoint.$l) {
     width: ms.step(8);
   }

From 6918af2269c563060464a672998fa02803557a7f Mon Sep 17 00:00:00 2001
From: Caleb Eby <caleb.eby01@gmail.com>
Date: Tue, 31 Aug 2021 09:49:14 -0700
Subject: [PATCH 5/5] Prettier

---
 src/components/sky-nav/sky-nav.scss | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/sky-nav/sky-nav.scss b/src/components/sky-nav/sky-nav.scss
index 0fbd1715b..b9523f87d 100644
--- a/src/components/sky-nav/sky-nav.scss
+++ b/src/components/sky-nav/sky-nav.scss
@@ -183,7 +183,12 @@ $_masthead-height-sm: ms.step(7);
   margin: (ms.step(-6) * -1); /* 2 */
   transition: opacity transition.$slow ease.$out,
     transform transition.$quick ease.$out;
-  width: fluid.fluid-calc(breakpoint.$s, breakpoint.$l, ms.step(7), ms.step(9)); /* 3 */
+  width: fluid.fluid-calc(
+    breakpoint.$s,
+    breakpoint.$l,
+    ms.step(7),
+    ms.step(9) /* 3 */
+  );
   @media (min-width: breakpoint.$l) {
     width: ms.step(8);
   }