fix: css variables and layout of header and banner (#4966)

Some css variables such as banner were defined, but header css variables
were not, and layout margins were written solidly without css variables.
The layout was broken (to the extent that it was not visible), so it was
corrected.

src/components/Layout/Layout.js

@@ -48,12 +48,15 @@ class Template extends Component<Props> {
           valign="stretch"
           css={{
             flex: '1 0 auto',
-            marginTop: 60,
-            [media.between('medium', 'large')]: {
-              marginTop: 50,
+            marginTop:
+              'calc(var(--header-height-large) + var(--survey-banner-height-normal) + var(--social-banner-height-normal))',
+            [media.size('medium')]: {
+              marginTop:
+                'calc(var(--header-height-normal) + var(--survey-banner-height-normal) + var(--social-banner-height-normal))',
             },
-            [media.lessThan('medium')]: {
-              marginTop: 40,
+            [media.lessThan('small')]: {
+              marginTop:
+                'calc(var(--header-height-small) + var(--survey-banner-height-small) + var(--social-banner-height-small))',
             },
           }}>
           {children}

src/components/LayoutHeader/Header.js

@@ -58,12 +58,12 @@ const Header = ({location}: {location: Location}) => (
           display: 'flex',
           flexDirection: 'row',
           alignItems: 'center',
-          height: 60,
-          [media.between('small', 'large')]: {
-            height: 50,
+          height: 'var(--header-height-large)',
+          [media.size('medium')]: {
+            height: 'var(--header-height-normal)',
           },
           [media.lessThan('small')]: {
-            height: 40,
+            height: 'var(--header-height-small)',
           },
         }}>
         <Link

src/components/MarkdownHeader/MarkdownHeader.js

@@ -17,23 +17,15 @@ const MarkdownHeader = ({title}: {title: string}) => {
         css={{
           color: colors.dark,
           marginBottom: 0,
-          marginTop:
-            'calc(40px + var(--survey-banner-height-normal) + var(--social-banner-height-normal))',
+          marginTop: 80,
           ...fonts.header,
 
-          [media.lessThan('small')]: {
-            marginTop:
-              'calc(40px + var(--survey-banner-height-small) + var(--social-banner-height-small))',
-          },
-
           [media.size('medium')]: {
-            marginTop:
-              'calc(60px + var(--survey-banner-height-normal) + var(--social-banner-height-normal))',
+            marginTop: 60,
           },
 
-          [media.greaterThan('large')]: {
-            marginTop:
-              'calc(80px + var(--survey-banner-height-normal) + var(--social-banner-height-normal))',
+          [media.lessThan('small')]: {
+            marginTop: 40,
           },
         }}>
         {title}

src/components/MarkdownPage/MarkdownPage.js

@@ -16,9 +16,8 @@ import TitleAndMetaTags from 'components/TitleAndMetaTags';
 import FeedbackForm from 'components/FeedbackForm';
 import findSectionForPath from 'utils/findSectionForPath';
 import toCommaSeparatedList from 'utils/toCommaSeparatedList';
-import {sharedStyles} from 'theme';
 import createCanonicalUrl from 'utils/createCanonicalUrl';
-import {colors, media} from 'theme';
+import {sharedStyles, colors, media, fonts} from 'theme';
 
 import type {Node} from 'types';
 
@@ -75,11 +74,10 @@ const MarkdownPage = ({
         position: 'relative',
         zIndex: 0,
         '& h1, & h2, & h3, & h4, & h5, & h6': {
-          scrollMarginTop:
-            'calc(var(--survey-banner-height-normal) + var(--social-banner-height-normal))',
-          [media.lessThan('small')]: {
-            scrollMarginTop:
-              'calc(var(--survey-banner-height-small) + var(--social-banner-height-small))',
+          scrollMarginTop: fonts.header.fontSize,
+
+          [media.lessThan('medium')]: {
+            scrollMarginTop: fonts.header[media.lessThan('medium')].fontSize,
           },
         },
       }}>

src/components/StickyResponsiveSidebar/StickyResponsiveSidebar.js

@@ -118,21 +118,18 @@ class StickyResponsiveSidebar extends Component<Props, State> {
               transition: 'transform 0.5s ease',
             }}
             css={{
-              marginTop:
-                'calc(60px + var(--survey-banner-height-normal) + var(--social-banner-height-normal))',
+              marginTop: 60,
 
               [media.size('xsmall')]: {
                 marginTop: 40,
               },
 
               [media.between('small', 'medium')]: {
-                marginTop:
-                  'calc(20px + var(--survey-banner-height-normal) + var(--social-banner-height-normal))',
+                marginTop: 20,
               },
 
               [media.between('medium', 'large')]: {
-                marginTop:
-                  'calc(50px + var(--survey-banner-height-normal) + var(--social-banner-height-normal))',
+                marginTop: 50,
               },
 
               [media.greaterThan('small')]: {

src/html.js

@@ -107,6 +107,9 @@ export default class HTML extends React.Component<Props> {
                   };
 
                   function updateStyles() {
+                    document.documentElement.style.setProperty('--header-height-large', '60px');
+                    document.documentElement.style.setProperty('--header-height-normal', '50px');
+                    document.documentElement.style.setProperty('--header-height-small', '40px');
                     if (activeSurveyBanner) {
                       document.documentElement.style.setProperty('--survey-banner-display', 'block');
                       document.documentElement.style.setProperty('--survey-banner-height-normal', activeSurveyBanner.normalHeight + 'px');

src/pages/index.js

@@ -56,11 +56,6 @@ class Home extends Component {
         <div
           css={{
             width: '100%',
-            marginTop: 'var(--banner-height-normal)',
-
-            [media.lessThan('small')]: {
-              marginTop: 'var(--banner-height-small)',
-            },
           }}>
           <header
             css={{