Skip to content

feat(): Introduce 404 page #118

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Oct 11, 2019
Merged

feat(): Introduce 404 page #118

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
198051b
wip()
bart-tonik Oct 11, 2019
72d594f
feeat(): Introduce 404 page
bart-tonik Oct 11, 2019
2c4e164
fix(): Change top margin
bart-tonik Oct 11, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
66 changes: 45 additions & 21 deletions src/404.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,32 +3,56 @@
permalink: /404.html
---

<style type="text/css" media="screen">
.container {
margin: 10px auto;
max-width: 600px;
text-align: center;
}
h1 {
margin: 30px 0;
font-size: 4em;
line-height: 1;
letter-spacing: -1px;
}
</style>
<div class="docs">
<div class="stage">
<div class="docs__aside stage__aside">
{% include navbar/logo.html %}
{% include menu/menu.html %}
</div>

<main class="docs__body stage__body">
<div>
{% include navbar/navbar-mobile.html %}
</div>

<div class="stage__content">
<div class="page-404">
<div class="flex">
<div class="flex__column--12 flex__column--9@xlarge">
<h1>The page you were looking for doesn’t exist.</h1>
<div class="flex">
<div class="flex__column--10 markdown">
<p>You may have mistyped the address or the page may have moved. Double-check the URL and try again or search the term.</p>

<div class="search">
{% include navbar/search.html placeholder="Enter a search term" %}
</div>
</div>
</div>
</div>

<div class="page-404__numeric-heading__wrapper markdown flex__column--3 flex--middle">
<span class="page-404__numeric-heading">404</span>
</div>
</div>
</div>
</div>
</main>

<div class="container">
<h1>404</h1>
<div class="docs__sidebar stage__sidebar">
{% include navbar/nav.html %}
</div>
</div>

<p><strong>Page not found :(</strong></p>
<p>The requested page could not be found.</p>
<footer>
{% include components/footer.html %}
</footer>
</div>

<script>
!function(){
window.analytics.track('Docs 404', {
docs_page_404_context: document.referrer
window.analytics.track('Docs 404', {
docs_page_404_context: document.referrer
})
}
)
}
</script>
2 changes: 1 addition & 1 deletion src/_includes/navbar/navbar-mobile.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
</div>

<div class="navbar-mobile__search">
{% include navbar/search.html %}
{% include navbar/search.html placeholder="Search documentation, ex. protocolos..." %}
</div>

<div class="navbar-mobile__panel">
Expand Down
2 changes: 1 addition & 1 deletion src/_includes/navbar/search.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
{% include icons/symbols/search.svg %}
</div>

<input class="field__input input DocsNav-search-input" type="text" placeholder="Search documentation, ex. protocolos..."/>
<input class="field__input input DocsNav-search-input" type="text" placeholder="{{ include.placeholder }}"/>

<div class="field__icon field__icon--right flex flex--middle flex--center">
<button class="field__button" data-ref="search-navbar[trigger]">
Expand Down
2 changes: 1 addition & 1 deletion src/_layouts/destinations.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
<main class="docs__body stage__body">
<div>
<div class="search">
{% include navbar/search.html %}
{% include navbar/search.html placeholder="Search documentation, ex. protocolos..." %}
</div>

{% include navbar/navbar-mobile.html %}
Expand Down
2 changes: 1 addition & 1 deletion src/_layouts/main.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
<main class="docs__body stage__body">
<div>
<div class="search">
{% include navbar/search.html %}
{% include navbar/search.html placeholder="Search documentation, ex. protocolos..." %}
</div>

{% include navbar/navbar-mobile.html %}
Expand Down
19 changes: 19 additions & 0 deletions src/_sass/pages/_page-404.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
.page-404 {
@include breakpoint(large up) {
margin-top: 90px;
}

&__numeric-heading {
color: rgba(color(gray), 0.1);
font-size: 195px;
font-weight: 900;
}

&__numeric-heading__wrapper {
display: none;

@include breakpoint(large up) {
display: flex;
}
}
}
1 change: 1 addition & 0 deletions src/_sass/segment.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,6 +89,7 @@
@import "pages/page";
@import "pages/destinations";
@import "pages/home";
@import "pages/page-404";

// Vendors
// =================================================
Expand Down