Skip to content

Commit 94603ff

Browse files
g105bg105b
committed
Add page styles
1 parent 8231d44 commit 94603ff

18 files changed

+174
-64
lines changed

‎log.txt

+2-1
Original file line numberDiff line numberDiff line change
@@ -16,4 +16,5 @@ Add pips to centre of concertina circles
1616
Style empty repo list
1717
Grid layout repo list
1818
Github repo loader
19-
Show more button on repo list
19+
Show more button on repo list
20+
Add page styles, extract section layout

‎page/404.html

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<section class="_error">
2+
<h1>
3+
<span>Page Not Found</span>
4+
</h1>
5+
6+
<p>
7+
<strong>This is a 404 error page.</strong> It has been served to your browser because the requested URI does not have a matching Page View within the project's <code>page/</code> directory.
8+
</p>
9+
10+
<p>
11+
In case it wasn't obvious, this website is a <a href="/docs/webengine">WebEngine application</a>. WebEngine allows the developer to create their own 404 pages by storing them at <code>page/404.html</code>. That's what you're looking at now.
12+
</p>
13+
14+
<p>
15+
When the <code>Lifecycle</code> class calls the <code>Dispatcher::handle</code> function, the Dispatcher attempts to create a <code>ViewAssembly</code>, which is a collection of streams that make up the whole response (such as the header, main page, and footer). If a matching main page can't be located to match the requested URI, the Assembly throws an exception which causes the <code>handle</code> function to be called again, but this time with a modified <code>Request</code> object - it's identical to the original request, apart from the URI is changed to <code>/404</code> (or whatever error code is being served).
16+
</p>
17+
18+
<p>
19+
<a href="/docs/webengine/error-handling">Read more about how errors are handled</a>.
20+
</p>
21+
</section>

‎page/500.html

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<section class="_error">
2+
<h1>
3+
<span>Error!</span>
4+
</h1>
5+
6+
<p>
7+
<strong>This is a 500 error page.</strong>
8+
</p>
9+
10+
<p>
11+
<a href="/docs/webengine/error-handling">Read more about how errors are handled</a>.
12+
</p>
13+
</section>

‎page/_footer.html

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<footer class="_global-footer">
2+
<nav class="_site-nav">
3+
<ul>
4+
<li>
5+
<a href="/">Home</a>
6+
</li>
7+
<li>
8+
<a href="/docs">Documentation</a>
9+
</li>
10+
<li>
11+
<a href="/contributing">Contributing</a>
12+
</li>
13+
<li>
14+
<a href="/help">Help</a>
15+
</li>
16+
<li>
17+
<a href="/privacy">Privacy</a>
18+
</li>
19+
</ul>
20+
</nav>
21+
</footer>
22+
23+
<script src="/script.js"></script>
24+
</body>
25+
</html>

‎page/_header.html

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>PHP.Gt</title>
7+
<link rel="manifest" href="/manifest.json" />
8+
<link rel="shortcut icon" href="/asset/image/icon.ico" />
9+
<link href="/style.css" rel="stylesheet" />
10+
</head>
11+
<body>
12+
13+
<header class="_global-header">
14+
<h1 class="_sticky-logo">
15+
<a href="/">
16+
<span>PHP.<span>Gt</span></span>
17+
</a>
18+
</h1>
19+
20+
<nav class="_site-nav">
21+
<input id="toggle-menu" type="checkbox" />
22+
<label for="toggle-menu" data-toggle-control-active="▴" data-toggle-control-inactive="▾">
23+
Menu
24+
</label>
25+
26+
<ul>
27+
<li>
28+
<a href="/docs">Documentation</a>
29+
</li>
30+
<li>
31+
<a href="/contributing">Contributing</a>
32+
</li>
33+
<li>
34+
<a href="/help">Help</a>
35+
</li>
36+
</ul>
37+
</nav>
38+
</header>

‎page/contributing.html

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<section>
2+
<h1>Contributing!</h1>
3+
</section>

‎page/docs/@repo/@doc.html

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<article class="_doc-content">
2+
Test!
3+
</article>

‎page/docs/@repo/@doc.php

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<?php
2+
namespace Gt\Website\Page\Docs\_Repo;
3+
4+
use Gt\WebEngine\Logic\Page;
5+
6+
class _DocPage extends Page {
7+
public function go() {
8+
die("this");
9+
}
10+
}

‎page/docs/@repo/index.html

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
index page of the repo thing

‎page/docs/index.php

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<?php
2+
namespace Gt\Website\Page\Docs;
3+
4+
use Gt\WebEngine\Logic\Page;
5+
6+
class IndexPage extends Page {
7+
public function go() {
8+
$this->redirect("/docs/webengine");
9+
}
10+
}

‎page/help.html

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<section>
2+
<h1>Help!</h1>
3+
</section>

‎page/index.html

+1-59
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,3 @@
1-
<!doctype html>
2-
<html lang="en">
3-
<head>
4-
<meta charset="utf-8" />
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<title>PHP.Gt</title>
7-
<link rel="manifest" href="/manifest.json" />
8-
<link rel="shortcut icon" href="/asset/image/icon.ico" />
9-
<link href="/style.css" rel="stylesheet" />
10-
</head>
11-
<body>
12-
13-
<header class="_global-header">
14-
<h1 class="_sticky-logo">
15-
<a href="/">
16-
<span>PHP.<span>Gt</span></span>
17-
</a>
18-
</h1>
19-
20-
<nav class="_site-nav">
21-
<input id="toggle-menu" type="checkbox" />
22-
<label for="toggle-menu" data-toggle-control-active="▴" data-toggle-control-inactive="▾">
23-
Menu
24-
</label>
25-
26-
<ul>
27-
<li>
28-
<a href="/docs">Documentation</a>
29-
</li>
30-
<li>
31-
<a href="/contributing">Contributing</a>
32-
</li>
33-
<li>
34-
<a href="/help">Help</a>
35-
</li>
36-
</ul>
37-
</nav>
38-
</header>
39-
401
<section class="_hero">
412
<div>
423
<h1>
@@ -157,23 +118,4 @@ <h1>Get involved!</h1>
157118
<p>
158119
PHP.Gt aims to be an inclusive community with low barrier to entry, but to achieve this requires your support. If you are finding it hard to understand where to begin, let us know and we'll get straight back to you.
159120
</p>
160-
</section>
161-
162-
<footer class="_global-footer">
163-
<nav class="_site-nav">
164-
<ul>
165-
<li>
166-
<a href="/docs">Documentation</a>
167-
</li>
168-
<li>
169-
<a href="/contributing">Contributing</a>
170-
</li>
171-
<li>
172-
<a href="/help">Help</a>
173-
</li>
174-
</ul>
175-
</nav>
176-
</footer>
177-
<script src="/script.js"></script>
178-
</body>
179-
</html>
121+
</section>

‎style/component/error.scss

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
._error {
2+
min-height: 85vh;
3+
4+
>h1 {
5+
background: $palette-3;
6+
color: $palette-text-alt;
7+
}
8+
}

‎style/main.scss

+10-4
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,13 @@
66
@import "var/palette";
77
@import "var/size";
88

9-
@import "pattern/toggle";
10-
@import "pattern/concertina";
11-
129
@import "global/normalize";
1310
@import "global/typography";
1411

12+
@import "pattern/toggle";
13+
@import "pattern/concertina";
14+
@import "pattern/section-layout";
15+
1516
@import "placeholder/margin";
1617
@import "placeholder/padding";
1718
@import "placeholder/gutter";
@@ -28,6 +29,7 @@
2829
@import "element/label";
2930
@import "element/iframe";
3031

32+
@import "component/error";
3133
@import "component/global-header";
3234
@import "component/global-footer";
3335
@import "component/sticky-logo";
@@ -36,4 +38,8 @@
3638
@import "component/intro";
3739
@import "component/intro-features";
3840
@import "component/repo-list";
39-
@import "component/contributing";
41+
@import "component/contributing";
42+
43+
@import "page/_error";
44+
@import "page/contributing";
45+
@import "page/help";

‎style/page/_error.scss

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
body.uri--404, body.uri--500 {
2+
@extend %section-layout;
3+
}

‎style/page/contributing.scss

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
body.uri--contributing {
2+
@extend %section-layout;
3+
}

‎style/page/help.scss

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
body.uri--help {
2+
@extend %section-layout;
3+
}

‎style/pattern/section-layout.scss

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
%section-layout {
2+
>section {
3+
@extend %padding-m;
4+
5+
>h1 {
6+
@extend %gutter;
7+
font-size: $font-size-l;
8+
margin-top: $size-xl;
9+
}
10+
11+
>p {
12+
@extend %reading-column, %gutter;
13+
}
14+
15+
@extend %padding-m;
16+
}
17+
}

0 commit comments

Comments
 (0)