Fix jump in right hand nav menu compared to parent site

Author: holly-cummins

src/components/headers/dark-mode-toggle.js

@@ -8,12 +8,13 @@ const ModeIcon = styled(({ ...props }) => <FontAwesomeIcon {...props} />)`
   padding-left: 0;
   display: inline-block;
   width: 1em;
+  transform: translateX(0.5px); // To ensure alignment with parent site
 `
 
 const Toggle = styled.li`
   display: block;
-  padding: 16px 15px;
-  padding-left: 10px; /* hacky override to match spacing (more or less) to parent site */
+  padding: 0 0;
+  padding-left: 4px; /* hacky override to match spacing (more or less) to parent site */
 `
 
 const modes = [{

src/components/headers/navigation.js

@@ -96,7 +96,10 @@ const Logo = styled.a`
   // The main site sets a height, but that inflates and crops the image, so we need to do it in a wrapper div
 `
 
-const LangIcon = styled(({ ...props }) => <FontAwesomeIcon {...props} />)``
+const LangIcon = styled(({ ...props }) => <FontAwesomeIcon {...props} />)`
+  transform: translateX(1px); // To ensure alignment with parent site
+  padding-right: 1px;
+`
 
 // This isn't needed on the main site, but we seem to need it here to properly pad the cta in the mobile menu, and also to get it to take the full width
 // noinspection CssUnknownProperty

src/components/headers/submenu.js

@@ -53,6 +53,8 @@ const MobileSubmenu = styled.ul`
 const FlippyIcon = styled(({ isOpen, ...props }) => (
   <FontAwesomeIcon {...props} />
 ))`
+  transform: translateX(-1px); // To ensure alignment with parent site
+
   ${({ isOpen }) =>
           isOpen &&
           ` 
@@ -64,7 +66,7 @@ const FlippyIcon = styled(({ isOpen, ...props }) => (
 const MenuTitle = styled.div`
   display: flex;
   flex-direction: row;
-  gap: 3.8px;
+  gap: 6px;
   justify-content: flex-end;
   align-items: center;
   padding: 0 14.4px; // Occult values to match the main site

src/style.css

@@ -169,7 +169,7 @@ html {
 }
 
 /** Adjustments for small screens  */
-@media screen and (max-width: 1366px) {
+@media screen and (max-width: 1024px) {
     html {
         --site-margins: 4rem;
         --navbar-padding: 1.5rem;