diff options
author | Sarah German <sgerman@gitlab.com> | 2022-11-16 22:13:55 +0300 |
---|---|---|
committer | Suzanne Selhorn <sselhorn@gitlab.com> | 2022-11-16 22:13:55 +0300 |
commit | e2df3ea934a40975c980ae7ff79b309a9ca6d429 (patch) | |
tree | b998d90dbda4e7361bd3faef28106ef825080669 | |
parent | cf652ffead0f69d8b3e71ec42acb6334ad0f44c8 (diff) |
Update 404 page copy and styles
-rw-r--r-- | content/404.html | 26 | ||||
-rw-r--r-- | content/assets/stylesheets/404.scss | 41 | ||||
-rw-r--r-- | content/assets/stylesheets/stylesheet.scss | 11 | ||||
-rw-r--r-- | layouts/404.html | 6 |
4 files changed, 27 insertions, 57 deletions
diff --git a/content/404.html b/content/404.html index 9f6c251f..f400f826 100644 --- a/content/404.html +++ b/content/404.html @@ -3,25 +3,23 @@ title: Page Not Found | GitLab Documentation searchbar: false --- -<div class="four-oh-four d-flex justify-content-center"> +<div class="four-oh-four gl-text-center gl-display-flex gl-justify-content-center"> <div> - <img src="<%= @items['/assets/images/error-404.svg'].path %>" alt="404"/> - <div id="js-error-message"></div> - <br> + <img src="<%= @items['/assets/images/error-404.svg'].path %>" width="300" alt="" class="gl-m-auto" /> + <h1 class="gl-text-theme-indigo-900">We're sorry, no page exists at this address.</h1> + <p>To search an older version of the docs, <a href="https://docs.gitlab.com/archives">access an archive</a>.</p> + <% if @config[:algolia] == "true" %> - <div class="card search w-100 text-center"> - <div class="card-body"> - <h3 class="card-title mb-4">Search the docs</h3> - <div id="docsearch" class="mb-3 d-flex justify-content-center"></div> - </div> + <div class="search-card gl-w-70p gl-pt-6 gl-pb-7 gl-mt-7 gl-mx-auto gl-rounded-lg"> + <h3 class="gl-mb-5 gl-text-theme-indigo-900">Search the docs</h3> + <div id="docsearch" class="gl-display-flex gl-justify-content-center"></div> </div> <% end %> - <div class="d-flex justify-content-center my-4"> - <a href="javascript:history.back()" class="btn btn-outline-primary"> - <%= icon('arrow-left') %> - Go back + + <div class="gl-mt-8 gl-mb-11"> + <a href="javascript:history.back()" class="back-btn gl-py-3 gl-px-4 gl-text-purple-600 gl-rounded-small gl-border gl-border-purple-700 gl-transition-slow"> + <%= icon('arrow-left') %>Go back </a> </div> - <br> </div> </div> diff --git a/content/assets/stylesheets/404.scss b/content/assets/stylesheets/404.scss deleted file mode 100644 index 115c34f1..00000000 --- a/content/assets/stylesheets/404.scss +++ /dev/null @@ -1,41 +0,0 @@ -@import 'variables'; -@import 'docsearch'; - -.four-oh-four { - h2 { - color: $gds-purple-900; - } - - .btn-outline-primary { - transition: 0.3s all; - border-color: $landing-gl-purple-500; - color: $landing-gl-purple-500; - fill: $landing-gl-purple-500; - - &:hover { - color: $gds-white; - fill: $gds-white; - background-color: $landing-gl-purple-500; - } - } - - .search { - background: $gds-white; - box-shadow: 0 0 0.125rem $landing-gl-black-50, 0 0.5rem 1.5rem $landing-gl-blue-950; - border-radius: 0.25rem; - width: 65%; - - @media (max-width: $bp-md) { - width: 100%; - } - - .card-title { - font-size: 2rem; - color: $gds-purple-900; - - @media (max-width: $bp-xs) { - font-size: 2rem; - } - } - } -} diff --git a/content/assets/stylesheets/stylesheet.scss b/content/assets/stylesheets/stylesheet.scss index 767a7350..44a97ef1 100644 --- a/content/assets/stylesheets/stylesheet.scss +++ b/content/assets/stylesheets/stylesheet.scss @@ -572,3 +572,14 @@ a.gl-tab-nav-item:hover { z-index: auto; } } + +.four-oh-four { + a.back-btn:hover { + text-decoration: none; + color: $gds-white; + background-color: $purple-500; + } + .search-card { + box-shadow: 0 0 0.125rem $landing-gl-black-50, 0 0.25rem 1.5rem $landing-gl-blue-950; + } +} diff --git a/layouts/404.html b/layouts/404.html index eaf565d8..fc54df78 100644 --- a/layouts/404.html +++ b/layouts/404.html @@ -4,7 +4,6 @@ <%= render '/head.*' %> <meta name="robots" content="noindex"> <link rel="canonical" href="<%= @config[:base_url] %>/404.html"> - <link rel="stylesheet" href="<%= @items['/assets/stylesheets/404.*'].path %>"> </head> <body> <%= render '/header.*' %> @@ -17,8 +16,11 @@ </div> </section> <script src="<%= @items['/frontend/shared/global_imports.*'].path %>"></script> + + <% if @config[:algolia] == "true" %> <script src="<%= @items['/frontend/search/docsearch.*'].path %>"></script> - <script src="<%= @items['/frontend/404/404.*'].path %>"></script> + <% end %> + <% if production? %> <%# Add analytics only in production %> <%= render '/analytics.*' %> |