Fixed 404 page

src/components/Layouts/MainLayout.tsx

@@ -7,12 +7,15 @@ import '../../styles/app.scss'
 type Props = {
   headerTitle?: string
   children: JSX.Element
+  isHeaderFixed?: boolean
 }
 
 export const MainLayout = (props: Props) => {
+  const isHeaderFixed = props.isHeaderFixed !== undefined ? props.isHeaderFixed : true
+
   return (
     <>
-      <Header title={props.headerTitle} />
+      <Header title={props.headerTitle} isHeaderFixed={isHeaderFixed} />
       <main class="main-content">{props.children}</main>
       <Footer />
     </>

src/components/Nav/Header.scss

@@ -1,8 +1,6 @@
 header {
   background: #fff;
   margin-bottom: 2.2rem;
-  position: fixed;
-  top: 0;
   width: 100%;
   z-index: 10;
 
@@ -15,8 +13,10 @@ header {
   }
 }
 
-.header--scrolled-bottom,
-.header--scrolled-top {
+.header--fixed {
+  position: fixed;
+  top: 0;
+
   .main-logo {
     height: 56px;
 

src/components/Nav/Header.tsx

@@ -27,6 +27,7 @@ const handleEnterClick = () => {
 
 type Props = {
   title?: string
+  isHeaderFixed?: boolean
 }
 
 export const Header = (props: Props) => {
@@ -83,7 +84,9 @@ export const Header = (props: Props) => {
 
   return (
     <header
+      class="main-header"
       classList={{
+        ['header--fixed']: props.isHeaderFixed,
         ['header--scrolled-top']: !getIsScrollingBottom() && getIsScrolled(),
         ['header--scrolled-bottom']: getIsScrollingBottom() && getIsScrolled()
       }}

src/components/Nav/Topics.scss

@@ -17,6 +17,7 @@
     justify-content: space-between;
     list-style: none;
     margin-right: 2.2rem;
+    margin-top: 0;
     padding: 0;
   }
 

src/components/Pages/FourOuFourPage.tsx

@@ -3,7 +3,7 @@ import { MainLayout } from '../Layouts/MainLayout'
 
 export const FourOuFourPage = () => {
   return (
-    <MainLayout>
+    <MainLayout isHeaderFixed={false}>
       <FourOuFourView />
     </MainLayout>
   )

src/components/Views/FourOuFour.tsx

@@ -1,40 +1,41 @@
 import { t } from '../../utils/intl'
 import { Icon } from '../Nav/Icon'
-import '../../styles/FourOuFour.scss'
+import styles from '../../styles/FourOuFour.module.scss'
+import clsx from 'clsx'
 
 export const FourOuFourView = (_props) => {
   return (
-    <div class="error-page-wrapper">
-      <div class="error-page">
+    <div class={styles.errorPageWrapper}>
+      <div class={styles.errorPage}>
         <div class="container">
           <div class="row">
-            <div class="col-sm-7 offset-sm-3">
+            <div class="col-md-7 offset-md-3">
               <a href="/" class="image-link">
-                <img class="error-image" src="/error.svg" alt="error" width="auto" height="auto" />
+                <img class={styles.errorImage} src="/error.svg" alt="error" width="auto" height="auto" />
               </a>
             </div>
           </div>
           <div class="row">
-            <div class="col-md-2 col-sm-3 offset-sm-2 error-text-container">
-              <div class="error-text">
+            <div class={clsx(styles.errorTextContainer, 'col-md-2 col-sm-3 offset-sm-1 offset-md-2')}>
+              <div class={styles.errorText}>
                 <div>{t('Error')}</div>
-                <div class="big">404</div>
+                <div class={styles.big}>404</div>
               </div>
             </div>
-            <div class="col-sm-4 search-form-container">
-              <div class="error-explain">
+            <div class={clsx(styles.searchFormContainer, 'col-sm-5 col-md-4')}>
+              <div class={styles.errorExplain}>
                 <p>{t(`You've reached a non-existed page`)}</p>
                 <p>{t('Try to find another way')}:</p>
-                <form class="errorform pretty-form" action="/search" method="get">
-                  <div class="pretty-form__item">
+                <form class={clsx(styles.prettyForm, 'pretty-form')} action="/search" method="get">
+                  <div class={clsx(styles.prettyFormItem, 'pretty-form__item')}>
                     <input type="text" name="q" placeholder={t('Search')} id="search-field" />
                     <label for="search-field">{t('Search')}</label>
-                    <button type="submit" class="search-submit">
+                    <button type="submit" class={styles.searchSubmit}>
                       <Icon name="search" />
                     </button>
                   </div>
                 </form>
-                <p class="text-center">
+                <p class={styles.textCenter}>
                   <a href="/">{t('Back to mainpage')}</a>
                 </p>
               </div>

src/styles/FourOuFour.module.scss

@@ -0,0 +1,96 @@
+header {
+  position: absolute;
+}
+
+footer {
+  display: none;
+}
+
+.main-logo {
+  height: 80px !important;
+}
+
+main {
+  padding-bottom: 0;
+  padding-top: 0 !important;
+}
+
+.errorPageWrapper {
+  height: 100vh;
+  padding-top: 100px;
+}
+
+.errorPage {
+  position: relative;
+  top: 35%;
+  transform: translateY(-43%);
+
+  .image-link:hover {
+    background: none;
+  }
+
+  .prettyForm {
+    margin-top: 0.5em;
+  }
+
+  .prettyFormItem input {
+    padding-right: 2.7em;
+  }
+
+  .textCenter {
+    text-align: center;
+  }
+}
+
+.searchSubmit {
+  height: 100%;
+  padding: 0 1em;
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+
+.errorImage {
+  display: block;
+  margin: auto;
+  width: 85%;
+}
+
+.errorText {
+  font-weight: 300;
+  left: 52px;
+  margin-bottom: 1em;
+  position: relative;
+  top: -2.25em;
+
+  @include font-size(3rem);
+
+  @include media-breakpoint-up(sm) {
+    left: 80px;
+    position: absolute;
+    text-align: center;
+  }
+
+  .big {
+    font-weight: 900;
+    letter-spacing: 4px;
+
+    @include font-size(7rem);
+  }
+}
+
+.errorExplain {
+  font-size: 16px;
+  position: absolute;
+  top: -3.4em;
+  left: 65px;
+
+  p {
+    margin: 0 0 0.3em;
+  }
+}
+
+.errorTextContainer,
+.searchFormContainer {
+  position: relative;
+}

src/styles/FourOuFour.scss

@@ -1,70 +0,0 @@
-.error-page-wrapper {
-  height: 100vh;
-}
-
-.error-page {
-  position: relative;
-  top: 35%;
-  transform: translateY(-40%);
-
-  .error-image {
-    display: block;
-    margin: auto;
-    width: 85%;
-  }
-
-  .error-text {
-    font-weight: 300;
-    font-size: 28px;
-    left: 80px;
-    position: absolute;
-    text-align: center;
-    top: -2.25em;
-
-    .big {
-      font-weight: 900;
-      letter-spacing: 4px;
-      font-size: 60px;
-    }
-  }
-
-  .error-explain {
-    font-size: 16px;
-    position: absolute;
-    top: -3.4em;
-    left: 65px;
-
-    p {
-      margin: 0 0 0.3em;
-    }
-  }
-
-  .image-link:hover {
-    background: none;
-  }
-
-  .search-submit {
-    height: 100%;
-    padding: 0 1em;
-    position: absolute;
-    right: 0;
-    top: 0;
-  }
-
-  .pretty-form {
-    margin-top: 0.5em;
-  }
-
-  .pretty-form__item input {
-    padding-right: 2.7em;
-  }
-
-  .text-center {
-    text-align: center;
-  }
-}
-
-.error-text-container,
-.search-form-container {
-  position: relative;
-}