feat(404): Adds html oops, it slipped!

This commit is contained in:
sovanna 2019-07-24 17:21:55 +02:00
parent 4e296bf061
commit 1a301765da
3 changed files with 178 additions and 0 deletions

View File

@ -89,6 +89,15 @@ p ~ h5 {
background-size: contain; background-size: contain;
} }
.hero4 {
height: 750px;
background: url("../images/404@2x-min.png") repeat-x top center;
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size: contain;
}
.hero + main { .hero + main {
margin-top: -150px; margin-top: -150px;
} }

Binary file not shown.

After

Width:  |  Height:  |  Size: 360 KiB

169
templates/404.html Normal file
View File

@ -0,0 +1,169 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>{% if page and page.title %}{{ page.title }} |{% endif %} {% block title%}{{ config.title }}{% endblock %}</title>
<meta name="description" content="{% block description%}{{ config.description }}{% endblock %}">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="robots" content="noindex">
<meta property="og:type" content="website">
{% block ogtitle %}
<meta property="og:title" content="{% block og_title%}{{ config.title }}{% endblock %}">
{% endblock %}
{% block ogdescription %}
<meta property="og:description" content="{% block og_description%}{{ config.description }}{% endblock %}">
{% endblock %}
<meta property="og:site_name" content="{{ config.extra.author }}">
<meta property="og:url" content="{{ config.base_url }}">
<meta property="og:image" content={{ get_url(path='images/logo@2x.png', cachebust=true) }}>
{% block meta %}{% endblock meta %}
<link rel="manifest" href="/manifest.json" />
<link rel="apple-touch-icon" href="{{ get_url(path='/apple-icon-114x114.png') }}" sizes="114x114">
<link rel="apple-touch-icon" href="{{ get_url(path='/apple-icon-120x120.png') }}" sizes="120x120">
<link rel="apple-touch-icon" href="{{ get_url(path='/apple-icon-144x144.png') }}" sizes="144x144">
<link rel="apple-touch-icon" href="{{ get_url(path='/apple-icon-152x152.png') }}" sizes="152x152">
<link rel="apple-touch-icon" href="{{ get_url(path='/apple-icon-180x180.png') }}" sizes="180x180">
<link rel="apple-touch-icon" href="{{ get_url(path='/apple-icon-57x57.png') }}" sizes="57x57">
<link rel="apple-touch-icon" href="{{ get_url(path='/apple-icon-60x60.png') }}" sizes="60x60">
<link rel="apple-touch-icon" href="{{ get_url(path='/apple-icon-72x72.png') }}" sizes="72x72">
<link rel="apple-touch-icon" href="{{ get_url(path='/apple-icon-76x76.png') }}" sizes="76x76">
<link rel="apple-touch-icon" href="{{ get_url(path='/apple-icon.png') }}">
<link rel="icon" href="{{ get_url(path='/favicon-16x16.png') }}" sizes="16x16">
<link rel="icon" href="{{ get_url(path='/favicon-32x32.png') }}" sizes="32x32">
<link rel="icon" href="{{ get_url(path='/favicon-96x96.png') }}" sizes="96x96">
<link href="{{ get_url(path='favicon.ico', cachebust=true) }}" rel="shortcut icon" type="image/x-icon">
<link href="{{ get_url(path='favicon.ico', cachebust=true) }}" rel="icon" type="image/x-icon">
<link rel="stylesheet" href="{{ get_url(path='css/bootstrap-4.3.1.min.css', cachebust=true) }}">
<link rel="stylesheet" href="{{ get_url(path='css/styles.css', cachebust=true) }}">
{% block styles %}{% endblock %}
</head>
<body>
<!-- HEADER -->
<div class="container-fluid shadow th sticky-top">
<header class="container">
<nav class="navbar navbar-expand-lg navbar-light bg-th-1 justify-content-center justify-content-between pt-3 pb-3" role="navigation">
<a class="navbar-brand logo mr-0" href="/">
<img src="{{ get_url(path='images/logo@2x.png') }}" height="25" alt="logo">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-0 ml-md-auto text-right text-lg-left pt-2 pb-2 pt-md-0 pb-md-0">
{% set section = get_section(path='_index.md') %}
{% for section in section.subsections %}
{% set subsection = get_section(path=section) %}
{% set root_section_path = subsection.path | split(pat='/') | first %}
{% if subsection.pages|length > 0 and subsection.title != 'Other' %}
<li class="nav-item ml-0 ml-md-4 dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
{{ subsection.title }}
</a>
<div class="dropdown-menu shadow-none shadow-lg text-right text-lg-left" aria-labelledby="navbarDropdown">
{% for page in subsection.pages %}
<a class="dropdown-item pt-2 pb-2 pt-sm-3 pb-sm-3" href="{{ page.permalink }}">{{ page.title }}</a>
{% endfor %}
</div>
</li>
{% elif subsection.title != 'Other' %}
<li class="nav-item ml-0 ml-md-4">
<a class="nav-link" href="{{ subsection.permalink }}">{{ subsection.title }}</a>
</li>
{% endif %}
{% endfor %}
</ul>
</div>
</nav>
</header>
</div>
<!-- ./HEADER -->
<!-- HERO -->
<div class="container-fluid hero4 d-flex flex-column justify-content-center">
<div class="container">
<div class="row mt-4 mb-4">
<div class="col-12 text-center mt-n0">
<h1>Oops, it slipped!</h1>
<img src="{{ get_url(path='images/ion@2x.png', cachebust=true) }}" width="100" align="ion">
</div>
</div>
</div>
</div>
<!-- ./HERO -->
<!-- MAIN CONTENT -->
{% block main %}
{% endblock %}
<!-- ./MAIN CONTENT -->
<!-- FOOTER -->
<footer class="container text-center text-md-left">
<p class="pt-5 pb-2 text-center">
<small>Copyright &copy; <span id="copyright_year"></span>, M-Labs. All Rights Reserved.</small>
</p>
</footer>
<!-- ./FOOTER -->
<script src="{{ get_url(path='js/jquery-3.3.1.slim.min.js', cachebust=true) }}"></script>
<script src="{{ get_url(path='js/popper-1.14.7.min.js', cachebust=true) }}"></script>
<script src="{{ get_url(path='js/bootstrap-4.3.1.min.js', cachebust=true) }}"></script>
<script>
(function () {
document.getElementById('copyright_year').textContent = (new Date()).getFullYear();
})();
</script>
</body>
</html>