murb_design_system 0.1.0 → 0.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/.ruby-version +1 -0
- data/CHANGELOG.md +23 -1
- data/Gemfile +1 -0
- data/Gemfile.lock +61 -20
- data/README.md +16 -6
- data/_navigation.html.erb +15 -0
- data/basis.html.erb +340 -0
- data/bin/build +41 -0
- data/bin/watch +25 -0
- data/blocks.html.erb +161 -0
- data/dist/.gitkeep +0 -0
- data/dist/GLOBE---1850-2024-MO.png +0 -0
- data/doc/calculations.ods +0 -0
- data/html2canvas.min.js +20 -0
- data/index.html.erb +127 -0
- data/layout.html.erb +84 -0
- data/lib/murb_design_system/version.rb +1 -1
- data/navigation.html.erb +80 -0
- data/print.html.erb +76 -0
- data/promo.html.erb +247 -0
- data/vendor/assets/stylesheets/article.scss +115 -0
- data/vendor/assets/stylesheets/buttons.scss +64 -35
- data/vendor/assets/stylesheets/cards.scss +4 -8
- data/vendor/assets/stylesheets/devise.scss +1 -0
- data/vendor/assets/stylesheets/forms.scss +93 -15
- data/vendor/assets/stylesheets/grid.scss +78 -0
- data/vendor/assets/stylesheets/html.scss +325 -13
- data/vendor/assets/stylesheets/invoice.scss +10 -2
- data/vendor/assets/stylesheets/list-variants.scss +83 -0
- data/vendor/assets/stylesheets/meta.scss +30 -0
- data/vendor/assets/stylesheets/microformats.scss +39 -0
- data/vendor/assets/stylesheets/navigation.scss +75 -7
- data/vendor/assets/stylesheets/notice.scss +63 -5
- data/vendor/assets/stylesheets/print.scss +53 -5
- data/vendor/assets/stylesheets/tables.scss +39 -1
- data/vendor/assets/stylesheets/utils.scss +54 -5
- data/vendor/assets/stylesheets/variables.scss +55 -13
- data/vendor/assets/stylesheets/works.scss +3 -3
- metadata +52 -8
- data/vendor/assets/stylesheets/customers.scss +0 -3
data/index.html.erb
ADDED
|
@@ -0,0 +1,127 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
|
|
4
|
+
<head>
|
|
5
|
+
<meta charset="utf-8">
|
|
6
|
+
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
|
7
|
+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
8
|
+
<link rel="stylesheet" href="dist/murb_design_system.css">
|
|
9
|
+
|
|
10
|
+
<title>murb design system</title>
|
|
11
|
+
<% if ENV['REFRESH'] %>
|
|
12
|
+
<meta http-equiv="refresh" content="<%=ENV['REFRESH'] %>">
|
|
13
|
+
<% end %>
|
|
14
|
+
|
|
15
|
+
</head>
|
|
16
|
+
|
|
17
|
+
<body>
|
|
18
|
+
<%= File.read("_navigation.html.erb") %>
|
|
19
|
+
|
|
20
|
+
<main>
|
|
21
|
+
<h1 id="intro">murb design system</h1>
|
|
22
|
+
<p>Really, this is not a design system yet. Filler text where lengthier explicitly copied from <a href="https://en.wikipedia.org/wiki/Climate_change">Wikipedia: ClimateChange</a>.</p>
|
|
23
|
+
<section id="principles" class="visual-comparison-block">
|
|
24
|
+
<h2>Principles</h2>
|
|
25
|
+
<ul>
|
|
26
|
+
<li>Use semantic HTML and rely on it <em>without using additional classes</em></li>
|
|
27
|
+
<li>Do not reset the browser stylesheets (there might be a reason for it)</li>
|
|
28
|
+
<li>Accessible</li>
|
|
29
|
+
<li>Simple & human readable</li>
|
|
30
|
+
<li>Cascading</li>
|
|
31
|
+
<li>Use floats and grids where appropriate, but rather nothing</li>
|
|
32
|
+
<li>Make it automagic; an aside next to a main in column mode has different priorities, also in width, etc.</li>
|
|
33
|
+
</ul>
|
|
34
|
+
</section>
|
|
35
|
+
<section id="variables" class="visual-comparison-block">
|
|
36
|
+
<h2>Variables</h2>
|
|
37
|
+
<table>
|
|
38
|
+
<%
|
|
39
|
+
variables_file=File.read("vendor/assets/stylesheets/variables.scss")
|
|
40
|
+
variables = variables_file.split(/;/).map(&:strip).delete_if(&:empty?).collect{|line| line.split(":").map(&:strip)}.to_h
|
|
41
|
+
variables.collect do |key, value|
|
|
42
|
+
if value.match(/\A\#[\dA-Za-z]{3,6}\z/)
|
|
43
|
+
value="<span style=\" background:#{value}; width: 1.5em; display: inline-block\"> </span> #{value}"
|
|
44
|
+
end
|
|
45
|
+
variables[key] = value
|
|
46
|
+
end
|
|
47
|
+
|
|
48
|
+
variables.collect do |key, value|
|
|
49
|
+
if value.match(/\A\$\w/)
|
|
50
|
+
value = value.sub(";","")
|
|
51
|
+
value = "#{variables[value]} (#{value})"
|
|
52
|
+
end
|
|
53
|
+
variables[key] = value
|
|
54
|
+
end
|
|
55
|
+
|
|
56
|
+
variables.each do |key, value|
|
|
57
|
+
%>
|
|
58
|
+
<tr>
|
|
59
|
+
<th>
|
|
60
|
+
<%= key%>
|
|
61
|
+
</th>
|
|
62
|
+
<td>
|
|
63
|
+
<%= value%>
|
|
64
|
+
</td>
|
|
65
|
+
</tr>
|
|
66
|
+
<% end %>
|
|
67
|
+
</table>
|
|
68
|
+
</section>
|
|
69
|
+
|
|
70
|
+
<section id="navigation" class="visual-comparison-block">
|
|
71
|
+
<h2 id="navigation">Navigation</h2>
|
|
72
|
+
<p>You have already seen the main navigation in the top, wrap an unordered list in a <code>nav</code>-element. Make it sitcky by adding the <code>.sticky</code> class (see this page's main nav)</p>
|
|
73
|
+
<p>You can also have navigation in main; as a sub-navigation. Make sure you give your navigation a unique `aria-label` (leave out 'navigation, it will otherwise be double read').</p>
|
|
74
|
+
<nav aria-label="demo">
|
|
75
|
+
<ul>
|
|
76
|
+
<li><a href="#principles" class="active">Active principles</a></li>
|
|
77
|
+
<li><a href="#principles">Principles</a></li>
|
|
78
|
+
</ul>
|
|
79
|
+
|
|
80
|
+
<ul>
|
|
81
|
+
<li><a href="#" class="button secondary">Other button</a></li>
|
|
82
|
+
<li><a href="#" class="button secondary">Other button</a></li>
|
|
83
|
+
<li><a href="#" class="button alert">Fake sign out button</a></li>
|
|
84
|
+
</ul>
|
|
85
|
+
</nav>
|
|
86
|
+
|
|
87
|
+
</section>
|
|
88
|
+
|
|
89
|
+
|
|
90
|
+
<h2>Visual comparison</h2>
|
|
91
|
+
|
|
92
|
+
<div id="outputCanvas"></canvas>
|
|
93
|
+
|
|
94
|
+
<script src="html2canvas.min.js"></script>
|
|
95
|
+
|
|
96
|
+
<script>
|
|
97
|
+
container = document.getElementById("outputCanvas")
|
|
98
|
+
document.querySelectorAll(".visual-comparison-block").forEach(element => {
|
|
99
|
+
const header = document.createElement("h3");
|
|
100
|
+
|
|
101
|
+
const headerText = document.createTextNode(element.id);
|
|
102
|
+
header.appendChild(headerText);
|
|
103
|
+
|
|
104
|
+
html2canvas(element).then(canvas => {
|
|
105
|
+
|
|
106
|
+
container.appendChild(header);
|
|
107
|
+
container.appendChild(canvas);
|
|
108
|
+
const link = document.createElement("a");
|
|
109
|
+
const linkText = document.createTextNode("Download " + element.id);
|
|
110
|
+
setTimeout(() => {
|
|
111
|
+
const linkTarget = canvas.toDataURL();
|
|
112
|
+
link.href = linkTarget;
|
|
113
|
+
link.appendChild(linkText);
|
|
114
|
+
link.setAttribute("download", element.id + ".png");
|
|
115
|
+
container.appendChild(link);
|
|
116
|
+
}, 100);
|
|
117
|
+
|
|
118
|
+
});
|
|
119
|
+
});
|
|
120
|
+
|
|
121
|
+
|
|
122
|
+
|
|
123
|
+
</script>
|
|
124
|
+
|
|
125
|
+
</body>
|
|
126
|
+
|
|
127
|
+
</html>
|
data/layout.html.erb
ADDED
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
|
|
4
|
+
<head>
|
|
5
|
+
<meta charset="utf-8">
|
|
6
|
+
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
|
7
|
+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
8
|
+
<link rel="stylesheet" href="dist/murb_design_system.css">
|
|
9
|
+
|
|
10
|
+
<title>murb design system</title>
|
|
11
|
+
<% if ENV['REFRESH'] %>
|
|
12
|
+
<meta http-equiv="refresh" content="<%= ENV['REFRESH'] %>">
|
|
13
|
+
<% end %>
|
|
14
|
+
|
|
15
|
+
</head>
|
|
16
|
+
|
|
17
|
+
<body>
|
|
18
|
+
<%= File.read("_navigation.html.erb") %>
|
|
19
|
+
<main>
|
|
20
|
+
<h1 id="intro">Layout</h1>
|
|
21
|
+
<section id="columns" class="visual-comparison-block">
|
|
22
|
+
<h2>Columns</h2>
|
|
23
|
+
<p>To make columns, wrap child elements in an element with a .u-columns class. The columns are equally spaced using CSS flex.</p>
|
|
24
|
+
<div class="u-columns">
|
|
25
|
+
<mark>
|
|
26
|
+
Column 1
|
|
27
|
+
</mark>
|
|
28
|
+
<mark>
|
|
29
|
+
Column 2
|
|
30
|
+
</mark>
|
|
31
|
+
</div>
|
|
32
|
+
<p>It just will try to make things fit:</p>
|
|
33
|
+
<div class="u-columns">
|
|
34
|
+
<mark>
|
|
35
|
+
Column 1
|
|
36
|
+
</mark>
|
|
37
|
+
<mark>
|
|
38
|
+
Column 2
|
|
39
|
+
</mark>
|
|
40
|
+
<mark>
|
|
41
|
+
Column 3
|
|
42
|
+
</mark>
|
|
43
|
+
<mark>
|
|
44
|
+
Column 4
|
|
45
|
+
</mark>
|
|
46
|
+
<mark>
|
|
47
|
+
Column 5
|
|
48
|
+
</mark>
|
|
49
|
+
</div>
|
|
50
|
+
<p>A single column will just center at max 50%</p>
|
|
51
|
+
<div class="u-columns">
|
|
52
|
+
<mark>
|
|
53
|
+
Centered column
|
|
54
|
+
</mark>
|
|
55
|
+
</div>
|
|
56
|
+
</section>
|
|
57
|
+
<footer>
|
|
58
|
+
A footer closing main
|
|
59
|
+
</footer>
|
|
60
|
+
|
|
61
|
+
</main>
|
|
62
|
+
<section id="columns-aside" class="visual-comparison-block">
|
|
63
|
+
|
|
64
|
+
<div class="u-columns">
|
|
65
|
+
<main>
|
|
66
|
+
<article>
|
|
67
|
+
<h1>Main demo <small>As one has got to demo</small></h1>
|
|
68
|
+
<p>when you wrap both a main and an aside in .u-columns; columns will be slightly different</p>
|
|
69
|
+
<p>this is a main element</p>
|
|
70
|
+
<p>this is a main element</p>
|
|
71
|
+
<p>this is a main element</p>
|
|
72
|
+
<p>this is a main element</p>
|
|
73
|
+
</article>
|
|
74
|
+
</main>
|
|
75
|
+
<aside>
|
|
76
|
+
<p>This is an aside</p>
|
|
77
|
+
<p>
|
|
78
|
+
<input type="submit" class="button"><input type="submit" class="button">
|
|
79
|
+
</p>
|
|
80
|
+
</aside>
|
|
81
|
+
</div>
|
|
82
|
+
</section>
|
|
83
|
+
</body>
|
|
84
|
+
</html>
|
data/navigation.html.erb
ADDED
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
|
|
4
|
+
<head>
|
|
5
|
+
<meta charset="utf-8">
|
|
6
|
+
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
|
7
|
+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
8
|
+
<link rel="stylesheet" href="dist/murb_design_system.css">
|
|
9
|
+
|
|
10
|
+
<title>murb design system</title>
|
|
11
|
+
<% if ENV['REFRESH'] %>
|
|
12
|
+
<meta http-equiv="refresh" content="<%= ENV['REFRESH'] %>">
|
|
13
|
+
<% end %>
|
|
14
|
+
|
|
15
|
+
</head>
|
|
16
|
+
|
|
17
|
+
<body>
|
|
18
|
+
<%= File.read("_navigation.html.erb") %>
|
|
19
|
+
|
|
20
|
+
<main>
|
|
21
|
+
<h1 id="intro">navigatation</h1>
|
|
22
|
+
<p>Really, this is not a design system yet. Filler text where lengthier explicitly copied from <a href="https://en.wikipedia.org/wiki/Climate_change">Wikipedia: ClimateChange</a>.</p>
|
|
23
|
+
|
|
24
|
+
<section id="navigation" class="visual-comparison-block">
|
|
25
|
+
<h2 id="navigation">Navigation</h2>
|
|
26
|
+
<p>You have already seen the main navigation in the top, wrap an unordered list in a <code>nav</code>-element. Make it sitcky by adding the <code>.sticky</code> class (see this page's main nav)</p>
|
|
27
|
+
<p>You can also have navigation in main; as a sub-navigation. Make sure you give your navigation a unique `aria-label` (leave out 'navigation, it will otherwise be double read').</p>
|
|
28
|
+
<nav aria-label="demo">
|
|
29
|
+
<ul>
|
|
30
|
+
<li><a href="#principles" class="active">Active principles</a></li>
|
|
31
|
+
<li><a href="#principles">Principles</a></li>
|
|
32
|
+
</ul>
|
|
33
|
+
|
|
34
|
+
<ul>
|
|
35
|
+
<li><a href="#" class="button secondary">Other button</a></li>
|
|
36
|
+
<li><a href="#" class="button secondary">Other button</a></li>
|
|
37
|
+
<li><a href="#" class="button alert">Fake sign out button</a></li>
|
|
38
|
+
</ul>
|
|
39
|
+
</nav>
|
|
40
|
+
|
|
41
|
+
</section>
|
|
42
|
+
</main>
|
|
43
|
+
|
|
44
|
+
<h2>Visual comparison</h2>
|
|
45
|
+
|
|
46
|
+
<div id="outputCanvas"></div>
|
|
47
|
+
|
|
48
|
+
<script src="html2canvas.min.js"></script>
|
|
49
|
+
|
|
50
|
+
<script>
|
|
51
|
+
container = document.getElementById("outputCanvas")
|
|
52
|
+
document.querySelectorAll(".visual-comparison-block").forEach(element => {
|
|
53
|
+
const header = document.createElement("h3");
|
|
54
|
+
|
|
55
|
+
const headerText = document.createTextNode(element.id);
|
|
56
|
+
header.appendChild(headerText);
|
|
57
|
+
|
|
58
|
+
html2canvas(element).then(canvas => {
|
|
59
|
+
|
|
60
|
+
container.appendChild(header);
|
|
61
|
+
container.appendChild(canvas);
|
|
62
|
+
const link = document.createElement("a");
|
|
63
|
+
const linkText = document.createTextNode("Download " + element.id);
|
|
64
|
+
setTimeout(() => {
|
|
65
|
+
const linkTarget = canvas.toDataURL();
|
|
66
|
+
link.href = linkTarget;
|
|
67
|
+
link.appendChild(linkText);
|
|
68
|
+
link.setAttribute("download", element.id + ".png");
|
|
69
|
+
container.appendChild(link);
|
|
70
|
+
}, 100);
|
|
71
|
+
|
|
72
|
+
});
|
|
73
|
+
});
|
|
74
|
+
|
|
75
|
+
|
|
76
|
+
</script>
|
|
77
|
+
|
|
78
|
+
</body>
|
|
79
|
+
|
|
80
|
+
</html>
|
data/print.html.erb
ADDED
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
|
|
4
|
+
<head>
|
|
5
|
+
<meta charset="utf-8">
|
|
6
|
+
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
|
7
|
+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
8
|
+
<link rel="stylesheet" href="dist/murb_design_system.css">
|
|
9
|
+
|
|
10
|
+
<title>murb design system</title>
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
</head>
|
|
14
|
+
|
|
15
|
+
<body>
|
|
16
|
+
<%= File.read("_navigation.html.erb") %>
|
|
17
|
+
|
|
18
|
+
<main>
|
|
19
|
+
<h1 id="intro">murb design system</h1>
|
|
20
|
+
|
|
21
|
+
<h3>Back to a single main</h3>
|
|
22
|
+
<p><strong>Note:</strong> you should really have just a single main section in your page.</p>
|
|
23
|
+
<section id="printing" class="visual-comparison-block">
|
|
24
|
+
|
|
25
|
+
<h2>Printing</h2>
|
|
26
|
+
<p>A few tools for printing have been added.</p>
|
|
27
|
+
<p>To make a page break, add a <code>.page</code> class to a hr-element.</p>
|
|
28
|
+
<hr class="page"/>
|
|
29
|
+
<p>This will be on a single page</p>
|
|
30
|
+
<hr class="page"/>
|
|
31
|
+
<div class="print-preview">
|
|
32
|
+
<h1>This is supposed to be an A4 print preview</h1>
|
|
33
|
+
<p class="u-not-for-print">.u-not-for-print is not visible here</p>
|
|
34
|
+
</div>
|
|
35
|
+
<p>You can hide things for print using a .u-not-for-print class, see below.</p>
|
|
36
|
+
<p class="u-not-for-print">.u-not-for-print is not visible here</p>
|
|
37
|
+
</section>
|
|
38
|
+
|
|
39
|
+
<h2>Visual comparison</h2>
|
|
40
|
+
|
|
41
|
+
<div id="outputCanvas"></canvas>
|
|
42
|
+
|
|
43
|
+
<script src="html2canvas.min.js"></script>
|
|
44
|
+
|
|
45
|
+
<script>
|
|
46
|
+
container = document.getElementById("outputCanvas")
|
|
47
|
+
document.querySelectorAll(".visual-comparison-block").forEach(element => {
|
|
48
|
+
const header = document.createElement("h3");
|
|
49
|
+
|
|
50
|
+
const headerText = document.createTextNode(element.id);
|
|
51
|
+
header.appendChild(headerText);
|
|
52
|
+
|
|
53
|
+
html2canvas(element).then(canvas => {
|
|
54
|
+
|
|
55
|
+
container.appendChild(header);
|
|
56
|
+
container.appendChild(canvas);
|
|
57
|
+
const link = document.createElement("a");
|
|
58
|
+
const linkText = document.createTextNode("Download " + element.id);
|
|
59
|
+
setTimeout(() => {
|
|
60
|
+
const linkTarget = canvas.toDataURL();
|
|
61
|
+
link.href = linkTarget;
|
|
62
|
+
link.appendChild(linkText);
|
|
63
|
+
link.setAttribute("download", element.id + ".png");
|
|
64
|
+
container.appendChild(link);
|
|
65
|
+
}, 100);
|
|
66
|
+
|
|
67
|
+
});
|
|
68
|
+
});
|
|
69
|
+
|
|
70
|
+
|
|
71
|
+
|
|
72
|
+
</script>
|
|
73
|
+
|
|
74
|
+
</body>
|
|
75
|
+
|
|
76
|
+
</html>
|
data/promo.html.erb
ADDED
|
@@ -0,0 +1,247 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
|
|
4
|
+
<head>
|
|
5
|
+
<meta charset="utf-8">
|
|
6
|
+
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
|
7
|
+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
8
|
+
<link rel="stylesheet" href="dist/murb_design_system.css">
|
|
9
|
+
|
|
10
|
+
<title>murb design system</title>
|
|
11
|
+
<% if ENV['REFRESH'] %>
|
|
12
|
+
<meta http-equiv="refresh" content="<%=ENV['REFRESH'] %>">
|
|
13
|
+
<% end %>
|
|
14
|
+
|
|
15
|
+
</head>
|
|
16
|
+
|
|
17
|
+
<body>
|
|
18
|
+
<%= File.read("_navigation.html.erb") %>
|
|
19
|
+
<section id="columns-aside" class="visual-comparison-block">
|
|
20
|
+
|
|
21
|
+
<div class="u-columns">
|
|
22
|
+
<main>
|
|
23
|
+
<article>
|
|
24
|
+
<h1>Main demo <small>As one has got to demo</small></h1>
|
|
25
|
+
<figure class="standout">
|
|
26
|
+
<img
|
|
27
|
+
src="dist/GLOBE---1850-2024-MO.png"
|
|
28
|
+
alt="stripes showing temperature rise from 1850 till 2024; blue is cooler; red is warmer, dark red is warmest; rising temperature is made absolutely clear from left to right"
|
|
29
|
+
title="Warming Strips 1850-2024 for the globe provided by #ShowYourStripes, data by UK MetOffice"
|
|
30
|
+
/>
|
|
31
|
+
<figcaption>
|
|
32
|
+
<code>figure.standout</code>
|
|
33
|
+
Warming Strips 1850-2024 for the globe provided by #ShowYourStripes, data by
|
|
34
|
+
UK MetOffice
|
|
35
|
+
</figcaption>
|
|
36
|
+
</figure>
|
|
37
|
+
|
|
38
|
+
<p>when you wrap both a main and an aside in .u-columns; columns will be slightly different</p>
|
|
39
|
+
<p>this is a main element</p>
|
|
40
|
+
<p>this is a main element</p>
|
|
41
|
+
<p>this is a main element</p>
|
|
42
|
+
<p>this is a main element</p>
|
|
43
|
+
</article>
|
|
44
|
+
</main>
|
|
45
|
+
<aside>
|
|
46
|
+
<p>This is an aside</p>
|
|
47
|
+
<p><input type="submit" class="button" /><input type="submit" class="button" /></p>
|
|
48
|
+
</aside>
|
|
49
|
+
</div>
|
|
50
|
+
</section>
|
|
51
|
+
<main>
|
|
52
|
+
<h3>Back to a single main</h3>
|
|
53
|
+
<p><strong>Note:</strong> you should really have just a single main section in your page.</p>
|
|
54
|
+
|
|
55
|
+
<section id="articles" class="visual-comparison-block">
|
|
56
|
+
<h2>Articles</h2>
|
|
57
|
+
<article>
|
|
58
|
+
<h1>An article with a H1 gets special treatment</h1>
|
|
59
|
+
<h2>I am level 2</h2>
|
|
60
|
+
<h3>Styling the third level</h3>
|
|
61
|
+
<h4>And since this is a perfect four</h4>
|
|
62
|
+
<h5>Still, we do five</h5>
|
|
63
|
+
<h6>And we won't forget about 6</h6>
|
|
64
|
+
<p>Present-day climate change includes both global warming—the ongoing increase in global average temperature—and its wider effects on Earth’s climate system. Climate change in a broader sense also includes previous long-term changes to Earth's climate. The current rise in global temperatures is driven by human activities, especially fossil fuel burning since the Industrial Revolution.[3][4] </p>
|
|
65
|
+
</article>
|
|
66
|
+
<article>
|
|
67
|
+
<h1>A demo with columns</h1>
|
|
68
|
+
<div class="u-columns">
|
|
69
|
+
<div><p><strong>Present-day climate change includes both global warming—the ongoing increase in global average temperature—and its wider effects on Earth’s climate system. Climate change in a broader sense also includes previous long-term changes to Earth's climate. The current rise in global temperatures is driven by human activities, especially fossil fuel burning since the Industrial Revolution.</strong></p></div>
|
|
70
|
+
<div>
|
|
71
|
+
<p>Fossil fuel use, deforestation, and some agricultural and industrial practices release greenhouse gases.[5] These gases absorb some of the heat that the Earth radiates after it warms from sunlight, warming the lower atmosphere. Carbon dioxide, the primary gas driving global warming, has increased in concentration by about 50% since the pre-industrial era to levels not seen for millions of years.</p>
|
|
72
|
+
<p>
|
|
73
|
+
<figure>
|
|
74
|
+
<img src="dist/GLOBE---1850-2024-MO.png" alt="stripes showing temperature rise from 1850 till 2024; blue is cooler; red is warmer, dark red is warmest; rising temperature is made absolutely clear from left to right" title="Warming Strips 1850-2024 for the globe provided by #ShowYourStripes, data by UK MetOffice" />
|
|
75
|
+
<figcaption>Warming Strips 1850-2024 for the globe provided by #ShowYourStripes, data by UK MetOffice</figcaption>
|
|
76
|
+
</figure>
|
|
77
|
+
</p>
|
|
78
|
+
<p>Climate change has an increasingly large impact on the environment. Deserts are expanding, while heat waves and wildfires are becoming more common.[7] Amplified warming in the Arctic has contributed to thawing permafrost, retreat of glaciers and sea ice decline.[8] Higher temperatures are also causing more intense storms, droughts, and other weather extremes.[9] Rapid environmental change in mountains, coral reefs, and the Arctic is forcing many species to relocate or become extinct.[10] Even if efforts to minimize future warming are successful, some effects will continue for centuries. These include ocean heating, ocean acidification and sea level rise.[11]</p>
|
|
79
|
+
</div>
|
|
80
|
+
</div>
|
|
81
|
+
<h2>Impact</h2>
|
|
82
|
+
<div class="u-column-offset--fourth"><h2>.u-column-offset--fourth</h2></div>
|
|
83
|
+
<div class="u-columns"><div class="u-column--reduced"></div><h2>.u-column-offset--fourth</h2><div class="u-column--reduced"></div></div>
|
|
84
|
+
<div class="u-columns">
|
|
85
|
+
|
|
86
|
+
<div class="u-column--reduced"><h3>Environmental effects</h3></div>
|
|
87
|
+
<div>
|
|
88
|
+
<p>This is a demo of a column width <code>.u-column--reduced</code>-class applied.</p>
|
|
89
|
+
<p>The environmental effects of climate change are broad and far-reaching, affecting oceans, ice, and weather. Changes may occur gradually or rapidly. Evidence for these effects comes from studying climate change in the past, from modelling, and from modern observations.[189] Since the 1950s, droughts and heat waves have appeared simultaneously with increasing frequency.[190] Extremely wet or dry events within the monsoon period have increased in India and East Asia.[191] Monsoonal precipitation over the Northern Hemisphere has increased since 1980.[192] The rainfall rate and intensity of hurricanes and typhoons is likely increasing,[193] and the geographic range likely expanding poleward in response to climate warming.[194] Frequency of tropical cyclones has not increased as a result of climate change.[195]</p>
|
|
90
|
+
<pre><code># My favourite language is ruby
|
|
91
|
+
|
|
92
|
+
10.times { puts "Hello!" } # prints Hello! 10 times :)</code></pre>
|
|
93
|
+
<p>Global sea level is rising as a consequence of thermal expansion and the melting of glaciers and ice sheets. Sea level rise has increased over time, reaching 4.8 cm per decade between 2014 and 2023.[197] Over the 21st century, the IPCC projects 32–62 cm of sea level rise under a low emission scenario, 44–76 cm under an intermediate one and 65–101 cm under a very high emission scenario.[198] Marine ice sheet instability processes in Antarctica may add substantially to these values,[199] including the possibility of a 2-meter sea level rise by 2100 under high emissions.[200]</p>
|
|
94
|
+
</div>
|
|
95
|
+
<aside>
|
|
96
|
+
<p>Further information: Effects of climate change on oceans and Effects of climate change on the water cycle</p>
|
|
97
|
+
<p>Tags:</p>
|
|
98
|
+
<ul>
|
|
99
|
+
<li>#ClimateChange</li>
|
|
100
|
+
<li>#IPCC</li>
|
|
101
|
+
</ul>
|
|
102
|
+
</aside>
|
|
103
|
+
</div>
|
|
104
|
+
</article>
|
|
105
|
+
</section>
|
|
106
|
+
</main>
|
|
107
|
+
|
|
108
|
+
<section id="articles--main-article" class="visual-comparison-block">
|
|
109
|
+
<main>
|
|
110
|
+
|
|
111
|
+
<article>
|
|
112
|
+
<h1>Reducing and recapturing emissions</h1>
|
|
113
|
+
<p>The following main block is a demo of an main, immediately followed with a first-child article, making a text stand out more, to focus on the text.</p>
|
|
114
|
+
<p>Climate change can be mitigated by reducing the rate at which greenhouse gases are emitted into the atmosphere, and by increasing the rate at which carbon dioxide is removed from the atmosphere.[274] To limit global warming to less than 1.5 °C global greenhouse gas emissions needs to be net-zero by 2050, or by 2070 with a 2 °C target.[275] This requires far-reaching, systemic changes on an unprecedented scale in energy, land, cities, transport, buildings, and industry.[276]</p>
|
|
115
|
+
<p>The United Nations Environment Programme estimates that countries need to triple their pledges under the Paris Agreement within the next decade to limit global warming to 2 °C. An even greater level of reduction is required to meet the 1.5 °C goal.[277] With pledges made under the Paris Agreement as of 2024, there would be a 66% chance that global warming is kept under 2.8 °C by the end of the century (range: 1.9–3.7 °C, depending on exact implementation and technological progress). When only considering current policies, this raises to 3.1 °C.[278] Globally, limiting warming to 2 °C may result in higher economic benefits than economic costs.[279]</p>
|
|
116
|
+
</article>
|
|
117
|
+
|
|
118
|
+
</main>
|
|
119
|
+
<main class="expand">
|
|
120
|
+
|
|
121
|
+
<article>
|
|
122
|
+
<h1>Reducing and recapturing emissions</h1>
|
|
123
|
+
<p>If the main has a <code>.expand</code> class we don't do the smaller main</p>
|
|
124
|
+
</article>
|
|
125
|
+
|
|
126
|
+
</main>
|
|
127
|
+
<main>
|
|
128
|
+
|
|
129
|
+
<article class="promo">
|
|
130
|
+
<h2>Reducing and recapturing emissions</h2>
|
|
131
|
+
<p>When a <code>article</code> element has a <code>.promo</code> class, we also apply the same focus effect</p>
|
|
132
|
+
</article>
|
|
133
|
+
|
|
134
|
+
</main>
|
|
135
|
+
<main>
|
|
136
|
+
<p>A full width grid demo</p>
|
|
137
|
+
|
|
138
|
+
<article class="grid">
|
|
139
|
+
<header>
|
|
140
|
+
<h1>This is a grid</h1>
|
|
141
|
+
</header>
|
|
142
|
+
<section>
|
|
143
|
+
<h2>Subtitle (<code>h2</code>)</h2>
|
|
144
|
+
<div> <p>The following main block is a demo of an main, immediately followed with a first-child article, making a text stand out more, to focus on the text.</p>
|
|
145
|
+
<p>Climate change can be mitigated by reducing the rate at which greenhouse gases are emitted into the atmosphere, and by increasing the rate at which carbon dioxide is removed from the atmosphere.[274] To limit global warming to less than 1.5 °C global greenhouse gas emissions needs to be net-zero by 2050, or by 2070 with a 2 °C target.[275] This requires far-reaching, systemic changes on an unprecedented scale in energy, land, cities, transport, buildings, and industry.[276]</p>
|
|
146
|
+
<p>The United Nations Environment Programme estimates that countries need to triple their pledges under the Paris Agreement within the next decade to limit global warming to 2 °C. An even greater level of reduction is required to meet the 1.5 °C goal.[277] With pledges made under the Paris Agreement as of 2024, there would be a 66% chance that global warming is kept under 2.8 °C by the end of the century (range: 1.9–3.7 °C, depending on exact implementation and technological progress). When only considering current policies, this raises to 3.1 °C.[278] Globally, limiting warming to 2 °C may result in higher economic benefits than economic costs.[279]</p></div>
|
|
147
|
+
|
|
148
|
+
<div class="grid--full-width">
|
|
149
|
+
This is a block spanning from left to right using <code>.grid--full-width</code>, you can even add u-columns again (not using grid)
|
|
150
|
+
<div class="u-columns">
|
|
151
|
+
<div class="callout">column 1</div>
|
|
152
|
+
<div class="callout">column 2</div>
|
|
153
|
+
<div class="callout">column 3</div>
|
|
154
|
+
</div>
|
|
155
|
+
</div>
|
|
156
|
+
|
|
157
|
+
<div class="grid--full-width callout">
|
|
158
|
+
Spice the full-width up with <code>&.callout</code>, <code>&.alert</code>, <code>&.notice</code> OR <code>&.expand</code>
|
|
159
|
+
|
|
160
|
+
<div class="u-columns">
|
|
161
|
+
<div class="alert">alert column 1</div>
|
|
162
|
+
|
|
163
|
+
<div class="notice">notice column 2</div>
|
|
164
|
+
|
|
165
|
+
<div class="callout">callout column 3</div>
|
|
166
|
+
<figure class="standout">
|
|
167
|
+
<img src="dist/GLOBE---1850-2024-MO.png" alt="stripes showing temperature rise from 1850 till 2024; blue is cooler; red is warmer, dark red is warmest; rising temperature is made absolutely clear from left to right" title="Warming Strips 1850-2024 for the globe provided by #ShowYourStripes, data by UK MetOffice" />
|
|
168
|
+
<figcaption><code>.figure.standout</code>Warming Strips 1850-2024 for the globe provided by #ShowYourStripes, data by UK MetOffice</figcaption>
|
|
169
|
+
</figure>
|
|
170
|
+
|
|
171
|
+
</div>
|
|
172
|
+
</div>
|
|
173
|
+
|
|
174
|
+
<div class="grid--full-width expand">
|
|
175
|
+
Spice the full-width up with
|
|
176
|
+
<code>&.callout</code>
|
|
177
|
+
,
|
|
178
|
+
<code>&.alert</code>
|
|
179
|
+
,
|
|
180
|
+
<code>&.notice</code>
|
|
181
|
+
OR
|
|
182
|
+
<code>&.expand</code>
|
|
183
|
+
|
|
184
|
+
<div class="u-columns">
|
|
185
|
+
<div class="alert">alert column 1</div>
|
|
186
|
+
|
|
187
|
+
<div class="notice">notice column 2</div>
|
|
188
|
+
|
|
189
|
+
<div class="callout">callout column 3</div>
|
|
190
|
+
</div>
|
|
191
|
+
</div>
|
|
192
|
+
|
|
193
|
+
<aside class="grid--full-width">
|
|
194
|
+
This is an aside spanning from left to right using <code>.grid--full-width</code> applied to a <code>aside</code>
|
|
195
|
+
|
|
196
|
+
</aside>
|
|
197
|
+
|
|
198
|
+
|
|
199
|
+
|
|
200
|
+
</section>
|
|
201
|
+
</article>
|
|
202
|
+
|
|
203
|
+
</main>
|
|
204
|
+
</section>
|
|
205
|
+
<footer>
|
|
206
|
+
Any page can have a footer, right?
|
|
207
|
+
</footer>
|
|
208
|
+
|
|
209
|
+
|
|
210
|
+
<h2>Visual comparison</h2>
|
|
211
|
+
|
|
212
|
+
<div id="outputCanvas"></canvas>
|
|
213
|
+
|
|
214
|
+
<script src="html2canvas.min.js"></script>
|
|
215
|
+
|
|
216
|
+
<script>
|
|
217
|
+
container = document.getElementById("outputCanvas")
|
|
218
|
+
document.querySelectorAll(".visual-comparison-block").forEach(element => {
|
|
219
|
+
const header = document.createElement("h3");
|
|
220
|
+
|
|
221
|
+
const headerText = document.createTextNode(element.id);
|
|
222
|
+
header.appendChild(headerText);
|
|
223
|
+
|
|
224
|
+
html2canvas(element).then(canvas => {
|
|
225
|
+
|
|
226
|
+
container.appendChild(header);
|
|
227
|
+
container.appendChild(canvas);
|
|
228
|
+
const link = document.createElement("a");
|
|
229
|
+
const linkText = document.createTextNode("Download " + element.id);
|
|
230
|
+
setTimeout(() => {
|
|
231
|
+
const linkTarget = canvas.toDataURL();
|
|
232
|
+
link.href = linkTarget;
|
|
233
|
+
link.appendChild(linkText);
|
|
234
|
+
link.setAttribute("download", element.id + ".png");
|
|
235
|
+
container.appendChild(link);
|
|
236
|
+
}, 100);
|
|
237
|
+
|
|
238
|
+
});
|
|
239
|
+
});
|
|
240
|
+
|
|
241
|
+
|
|
242
|
+
|
|
243
|
+
</script>
|
|
244
|
+
|
|
245
|
+
</body>
|
|
246
|
+
|
|
247
|
+
</html>
|