diff --git a/src/_sass/base/_layout.scss b/src/_sass/base/_layout.scss index 2bb3b5ae5d..7356107998 100644 --- a/src/_sass/base/_layout.scss +++ b/src/_sass/base/_layout.scss @@ -5,14 +5,15 @@ } #page-content { + display: flex; min-height: calc(100vh - $site-header-height); min-width: 0; width: 100%; + flex-direction: row; + justify-content: center; - &:not(.focused) { - display: flex; - flex-direction: row; - justify-content: center; + &.focused { + flex-direction: column; } body.obsolete & { diff --git a/src/_sass/components/_header.scss b/src/_sass/components/_header.scss index e6ec11063d..defbfbaa6e 100644 --- a/src/_sass/components/_header.scss +++ b/src/_sass/components/_header.scss @@ -40,49 +40,32 @@ align-items: center; } } - } - } - .brand { - display: flex; - width: 5.5rem; - overflow: hidden; - margin-left: 1.25rem; - align-items: center; - } -} - -// TODO(parlough): Reverse and simplify these media queries. -@media(max-width: 960px) { - #mainnav { - ul { - li { + // TODO(parlough): Reverse and simplify these media queries. + @media(max-width: 960px) { display: none; &.searchfield { display: block; } } - } - } -} - -@media(max-width: 479px) { - #menu-toggle { - order: 2; - } - #mainnav { - ul { - li { + @media(max-width: 479px) { &.searchfield { display: none; } } } } -} + .brand { + display: flex; + width: 5.5rem; + overflow: hidden; + margin-left: 1.25rem; + align-items: center; + } +} .site-header { background-color: $site-color-white; diff --git a/src/_sass/components/_sidenav.scss b/src/_sass/components/_sidenav.scss index 910a551103..61890fd698 100644 --- a/src/_sass/components/_sidenav.scss +++ b/src/_sass/components/_sidenav.scss @@ -2,11 +2,11 @@ @use '../base/mixins'; $sidenav-divider-color: #e7e8ed; +$sidenav-wide-layout: 1024px; #sidenav { margin: 0; overflow-y: auto; - width: 16rem; min-width: 16rem; height: calc(100vh - $site-header-height); padding: 0.75rem 0.75rem 2.25rem; @@ -14,43 +14,32 @@ $sidenav-divider-color: #e7e8ed; top: 0; scrollbar-width: thin; - border-right: 0.1rem solid $sidenav-divider-color; + display: none; + width: 100%; + background: #fff; + z-index: 100; - // TODO(parlough): Reverse and simplify these media queries. - @media (max-width: 1024px) { - width: 100%; - background: #fff; - z-index: 100; + @at-root body.open_menu { + #sidenav { + display: block; + } - .site-header__search { - display: flex; + // Only hide page content if menu is open and in narrow layout. + #page-content { + display: none; } } - @media (max-width: 1024px) { + @media (min-width: $sidenav-wide-layout) { display: block; + width: 16rem; - @at-root body.open_menu { - &:before { - content: ''; - display: block; - position: fixed; - top: 0; - bottom: 0; - left: 0; - right: 0; - height: 100%; - z-index: 5; - background-color: rgba($gray-base, 0.4); - cursor: pointer; - pointer-events: none; - @include mixins.transition(0.5s); - } + border-right: 0.1rem solid $sidenav-divider-color; + background: none; - // Hide the body content and only show the sidenav. - #page-content { - display: none; - } + + @at-root body.open_menu #page-content { + display: flex; } } @@ -178,7 +167,7 @@ $sidenav-divider-color: #e7e8ed; } .navbar-nav { - display: none; + display: block; a.nav-link { font-size: 1.125rem; @@ -186,16 +175,19 @@ $sidenav-divider-color: #e7e8ed; margin-bottom: 0.5rem; padding: 0.375rem 0.6rem; } + + // Hide items from top navbar in wide layout to avoid duplication. + @media (min-width: $sidenav-wide-layout) { + display: none; + } } -} -@media(max-width: 1024px) { - #sidenav { - display: none; + .site-header__search { + display: flex; - // The top-level navigation items in the mobile sidenav. - .navbar-nav { - display: block; + // Hide search from top navbar in wide layout. + @media (min-width: $sidenav-wide-layout) { + display: none; } } } diff --git a/src/_sass/pages/_dash.scss b/src/_sass/pages/_dash.scss index 6538337ef7..409ccca101 100644 --- a/src/_sass/pages/_dash.scss +++ b/src/_sass/pages/_dash.scss @@ -6,8 +6,10 @@ $dash-max-width: 1330px; body.homepage { - #sidenav { - display: none; + &:not(.open_menu) { + #sidenav { + display: none; + } } .dash-header-callout { diff --git a/src/_sass/pages/_error.scss b/src/_sass/pages/_error.scss index 97ec9fc391..23258c4d5f 100644 --- a/src/_sass/pages/_error.scss +++ b/src/_sass/pages/_error.scss @@ -1,8 +1,10 @@ @use '../base/variables' as *; body.error { - #sidenav { - display: none; + &:not(.open_menu) { + #sidenav { + display: none; + } } .banner { @@ -20,18 +22,28 @@ body.error { h1 { color: white; font-family: $site-font-family-gsans-display; - font-size: 100px; + font-size: 8rem; margin: 0 auto; } h2 { color: white; font-family: $site-font-family-gsans; - font-size: 24px; - margin: 8px auto 16px; + font-size: 2rem; + margin: 0 auto 16px; + } + + #page-content { + padding: 1rem; + + a { + color: $site-color-card-link; + } } #in-content-search { + max-width: 100%; + input[type="search"] { display: inline-block; background: #35404d; @@ -41,15 +53,11 @@ body.error { border-radius: 30px; height: 70px; line-height: 70px; - width: 100%; - max-width: 880px; - margin: 0 auto 88px; - } - } + width: 40rem; + max-width: 90%; + margin: 2rem 1rem; - .content { - a { - color: $site-color-card-link; + outline-offset: 2px; } } } diff --git a/src/content/404.html b/src/content/404.html index 2cce34f090..a1344529e9 100644 --- a/src/content/404.html +++ b/src/content/404.html @@ -11,7 +11,7 @@

404

Page not found

-
+