mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-11-27 18:52:14 +03:00
Markup for 404 page
This needs Javascript to vertically center the page.
This commit is contained in:
Matthew Harrison-Jones
parent
06aed8786a
commit
431fdc70b1
BIN
core/client/assets/img/404-ghost.png
Normal file
BIN
core/client/assets/img/404-ghost.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.6 KiB |
BIN
core/client/assets/img/404-ghost@2x.png
Normal file
BIN
core/client/assets/img/404-ghost@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.8 KiB |
80
core/client/assets/sass/layouts/errors.scss
Normal file
80
core/client/assets/sass/layouts/errors.scss
Normal file
@ -0,0 +1,80 @@
|
||||
/*
|
||||
* These styles control elements specific to the error screens
|
||||
*
|
||||
* Table of Contents:
|
||||
*
|
||||
* General
|
||||
* 404
|
||||
*/
|
||||
|
||||
/* =============================================================================
|
||||
General
|
||||
============================================================================= */
|
||||
|
||||
.error-content {
|
||||
max-width: 530px;
|
||||
margin: 0 auto;
|
||||
padding: 0;
|
||||
|
||||
@include breakpoint(630px) {
|
||||
max-width: 264px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.error-image {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
width: 96px;
|
||||
height: 150px;
|
||||
|
||||
@include breakpoint(630px) {
|
||||
width: 72px;
|
||||
height: 112px;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.error-message {
|
||||
position: relative;
|
||||
top: -5px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.error-code {
|
||||
margin: 0;
|
||||
font-size: 7.8em;
|
||||
line-height: 0.9em;
|
||||
color: #979797;
|
||||
|
||||
@include breakpoint(630px) {
|
||||
font-size: 5.8em;
|
||||
}
|
||||
}
|
||||
|
||||
.error-description {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-weight: 300;
|
||||
font-size: 1.9em;
|
||||
color: #979797;
|
||||
border: none;
|
||||
|
||||
@include breakpoint(630px) {
|
||||
font-size: 1.4em;
|
||||
}
|
||||
}
|
||||
|
||||
/* =============================================================================
|
||||
404
|
||||
============================================================================= */
|
||||
|
||||
.error-404 {
|
||||
width: 300px;
|
||||
}
|
||||
@ -47,4 +47,7 @@
|
||||
/* The settings screen. */
|
||||
|
||||
@import "layouts/login";
|
||||
/* The settings screen. */
|
||||
/* The settings screen. */
|
||||
|
||||
@import "layouts/errors";
|
||||
/* The errors screens. */
|
||||
78
core/test/html/404.html
Normal file
78
core/test/html/404.html
Normal file
@ -0,0 +1,78 @@
|
||||
<!doctype html>
|
||||
|
||||
<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
|
||||
<!--[if (IE 7)&!(IEMobile)]><html class="no-js lt-ie9 lt-ie8" lang="en"><![endif]-->
|
||||
<!--[if (IE 8)&!(IEMobile)]><html class="no-js lt-ie9" lang="en"><![endif]-->
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<title>Ghost</title>
|
||||
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="">
|
||||
|
||||
<meta name="HandheldFriendly" content="True">
|
||||
<meta name="MobileOptimized" content="320">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
<!-- For all browsers -->
|
||||
<link rel="stylesheet" href="../../../core/client/assets/css/screen.css">
|
||||
|
||||
<link rel="shortcut icon" href="/favicon.ico">
|
||||
<link rel="logo" type="image/svg" href="assets/images/logo.svg"/>
|
||||
<meta http-equiv="cleartype" content="on">
|
||||
|
||||
</head>
|
||||
|
||||
<body class="dashboard">
|
||||
|
||||
<header id="global-header" class="navbar">
|
||||
<a id="ghost" href="http://vip.tryghost.org" data-off-canvas="left"><span class="hidden">Ghost</span></a>
|
||||
<nav id="global-nav" role="navigation">
|
||||
<ul id="main-menu" >
|
||||
|
||||
<li class="dashboard active"><a href="/ghost/">Dashboard</a></li>
|
||||
|
||||
<li class="content"><a href="/ghost/content/">Content</a></li>
|
||||
|
||||
<li class="editor"><a href="/ghost/editor/">New Post</a></li>
|
||||
|
||||
<li class="settings"><a href="/ghost/settings/">Settings</a></li>
|
||||
|
||||
|
||||
<li id="usermenu" class="subnav">
|
||||
<a href="#" data-toggle="ul" class="dropdown">
|
||||
<img class="avatar" src="/shared/img/default-user-profile-picture.jpg" alt="Avatar" />
|
||||
<span class="name">Matthew Harrison-Jones v0.2.1</span>
|
||||
</a>
|
||||
<ul class="overlay">
|
||||
<li class="usermenu-profile"><a href="/ghost/settings/user">Your Profile</a></li>
|
||||
<li class="divider"></li>
|
||||
<li class="usermenu-help"><a href="#">Help / Support</a></li>
|
||||
<li class="usermenu-shortcuts"><a href="#">Keyboard Shortcuts</a></li>
|
||||
<li class="divider"></li>
|
||||
<li class="usermenu-signout"><a href="/logout/">Sign Out</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main role="main">
|
||||
<section class="error-content error-404 js-error-container">
|
||||
<figure class="error-image">
|
||||
<img class="error-ghost" src="../../../core/client/assets/img/404-ghost@2x.png" srcset="../../../core/client/assets/img/404-ghost.png 1x, ../../../core/client/assets/img/404-ghost@2x.png 2x"/>
|
||||
</figure>
|
||||
<section class="error-message">
|
||||
<h1 class="error-code">404</h1>
|
||||
<h2 class="error-description">No Ghost Found</h2>
|
||||
</section>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<script type="text/javascript" src="assets/js/jquery.js"></script>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user