-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.njk
91 lines (62 loc) · 3.76 KB
/
index.njk
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<!DOCTYPE html>
<html lang="en">
<title>{{ renderData.title or title or metadata.title }}</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/css/tachyons.min.css">
<link rel="stylesheet" href="/css/pfw.css">
<body class="w-100 sans-serif bg-white">
{% include "partials/header.njk" %}
<section class="bt bb bg-green pv3 pl5 pr5">
<h1 class="f-headline lh-title measure white mt3 mb3">Make the web green.</h1>
</section>
<section class="pv3 pl5 pr5">
<h2 class="f3 lh-title measure">The internet is a great thing. It is also the biggest machine on earth, and it runs mostly on coal, which is bad news for our climate.</h2>
<h2 class="f3 lh-title measure ph">While we might not be able to stop using the web, we can change how we build and power it, to make it planet friendly as well as user friendly.</h2>
</section>
<section class="bt pv2 pl5 pr5 bg-washed-green">
<h2 class="normal measure-wide lh-title">The <em>planet friendly web guide</em> is an open source, freely available guide, combining an <a href="/mental-model">easy-to-understand mental model</a> to help you think through <em>what</em> you can do and why, with focussed guides showing <em>how</em> you can make these changes, drawing on techniques from fields ranging from service design, user experience, web performance optimisation, and technical architecture.</h2>
<p><a href="/why-it-matters/">You can start at the beginning</a>,
or jump straight to the main sections below,
or <a href="/toc/">see the full table of contents</a>.
</p>
</section>
<section class="pv1 pl5 pr5 cf bg-washed-green">
<section class="fl pr2 w-100 w-third-ns pb5">
<h3 class="f2 measure mt0">Your Packets</h3>
<p class="min-h2">Energy used to get data from your servers to your users.</p>
<a class="f6 link dim br2 ba bw1 ph3 pv2 mb2 dib black" href="/packets/">Learn More</a>
</section>
<section class="fl w-third-ns w-100 pr2">
<h3 class="f2 measure mt0">Your Platform</h3>
<p class="min-h2">Energy you use powering servers you control, to build and run the digital products you make.</p>
<a class="f6 link dim br2 ba bw1 ph3 pv2 mb2 dib black" href="/platform/">Learn More</a>
</section>
<section class="fl w-third-ns w-100 pr2">
<h3 class="f2 measure mt0">Your Process</h3>
<p class="min-h2">Energy use built into the way your organisation is set up to deliver digital products to your users.</p>
<a class="f6 link dim br2 ba bw1 ph3 pv2 mb2 dib black" href="/process/">Learn More</a>
</section>
</section>
<section class="pv4 pl5 pr5 cf bt background-light-gray cf">
<div class="fl w-100 w-50-ns pr4">
<h3>An open project, built for you, by me.</h3>
All the content in the <em>Planet Friendly Web Guide</em> is available under the Creative Commons Attribution Share Alike 4.0 license, and the source code for this site, and all the text is freely avaiable on Github.
</div>
<div class="fl w-100 w-25-ns github">
<a href="https://github.com/productscience/planet-friendly-web"
class="black-70 no-underline grow br5 b inline-flex items-center mr3 mb3 pv2 mt4">
<img src="/img/github--128x128.png" style="height:4em;" class="mr2" alt="">
Visit the project on github
</a>
</div>
<div class="fl w-100 w-25-ns">
<a href="/contributing/"class="black-70 no-underline grow br5 b inline-flex items-center mr3 mb3 pv2 mt4">
<img src="/img/volunteer--128x128.png" style="width:4em;" class="mr2" alt="">
See how you can contribute to the guide
</a>
</div>
</section>
{%- include "partials/mailing-list-form.njk" -%}
{%- include "partials/footer.njk" -%}
</body>
</html>