forked from Pomax/BezierInfo-2
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.template.html
145 lines (129 loc) · 6.13 KB
/
index.template.html
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
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>A Primer on Bézier Curves</title>
<link rel="shortcut icon" href="favicon.png" type="image/png">
<script>
(function() {
// force https except during local testing (e.g. not on port 80)
let loc = window.location.toString();
if (loc.indexOf(":8080") === -1 && loc.indexOf("http:") === 0) {
window.location = loc.replace("http:","https:");
}
// if we're still here, load google analytics
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-69475841-3', 'auto');
ga('send', 'pageview');
}());
</script>
<!-- optional <base> element to make sure localised content still uses the base location -->
<base href="..">
<!-- mobile optimize -->
<meta name="viewport" content="width=800, initial-scale=1.0">
<!-- opengraph information -->
<meta property="og:title" content="A Primer on Bézier Curves">
<meta property="og:type" content="text">
<meta property="og:url" content="http://pomax.github.io/bezierinfo">
<meta property="og:description" content="A detailed explanation of Bézier curves, and how to do the many things that we commonly want to do with them.">
<meta property="og:locale" content="en_GB">
<meta property="og:type" content="article">
<meta property="og:published_time" content="2013-06-13 12:00:00">
<meta property="og:author" content="Mike 'Pomax' Kamermans">
<meta property="og:section" content="Bézier Curves">
<meta property="og:tag" content="Bézier Curves">
<style>
html, body, article { height: 100%; margin: 0; }
body { width: 800px; margin: auto; font-size: 4.25mm!important; }
</style>
<link rel="stylesheet" href="stylesheets/style.css">
</head>
<body>
<!-- referral tracking, because I like knowing who's linking to my book -->
<script src="lib/site/referrer.js" async></script>
<div class="dev" style="display:none;">
<style>
div.dev {
background: rgb(43, 49, 95);
color: rgb(81, 181, 255);
position: fixed;
transform: rotate(-45deg);
width: 22em;
text-align: center;
top: 4em;
left: -6em;
font-variant: small-caps;
font-weight: bolder;
font-family: Helvetica;
box-shadow: 0px 5px 7px 2px rgba(0, 0, 0, 0.3);
}
</style>
DEV PREVIEW ONLY
<script>
(function() {
var loc = window.location.toString();
if(loc.indexOf('localhost')!==-1 || loc.indexOf('-2')!==-1) {
var e = document.querySelector('div.dev');
e.removeAttribute("style");
}
}());
</script>
</div>
<!-- Because people probably want to share this article -->
<div class="sharebuttons">
<style>
div.sharebuttons {
position: fixed;
top: 1rem;
left: 1rem;
padding: 0.1em;
background: white;
}
div.sharebuttons img {
min-width: 1.25rem;
min-height: 1.25rem;
max-height: 1.25rem;
}
}
</style>
<a class="social reddit" href="https://www.reddit.com/submit?url=https://pomax.github.io/bezierinfo&title=A Primer on Bézier Curves&text=A free, online book for when you really need to know how to do Bézier things.">
<img src="https://www.redditstatic.com/spreddit1.gif" alt="submit to reddit" title="submit to reddit">
</a>
<a class="social hn" href="https://news.ycombinator.com/submitlink?u=https://pomax.github.io/bezierinfo&t=A Primer on Bézier Curves">
<img src="https://news.ycombinator.com/y18.gif" alt="submit to hacker news" title="submit to hacker news">
</a>
<a class="social twitter" href="https://twitter.com/intent/tweet?hashtags=bezier,curves,maths&original_referer=https://pomax.github.io/bezierinfo&text=Reading%20%22A%20Primer%20on%20Bezier%20Curves%22%20by%20@TheRealPomax%20over%20on%20https://pomax.github.io/bezierinfo">
<img src="images/twitter.ico" alt="tweet your read" title="tweet your read">
</a>
</div>
<article>
<div id="article">
<!-- these rules will get overwritten by the style in the article.js React bundle -->
<style>
header h1, header h2 { text-align: center; }
header h1 { font-size: 300%; margin: 0.2em; }
p.jsnote { margin: 2em; text-align: justify; }
p.jsnote:first-child { width: 13em; margin: auto; }
</style>
<header>
<h1>A Primer on Bézier Curves</h1>
<h2>A free, online book for when you really need to know how to do Bézier things.</h2>
</header>
<!-- This content only shows for as long as JS/React hasn't loaded the page content -->
<section>
<p class="jsnote">Loading the article<span id="loader">...</span></p>
<p class="enabling jsnote">If you have JavaScript disabled, you'll have to enable it, as this book heavily relies on JS rendering, both for the base content (it's been written as a React application) and all the interactive graphics, which rely on JS not just for the user interaction but also for the live-drawing (none of the graphics in this book are flat images, they're all live-rendered).</p>
<script>var n=document.querySelector(".enabling");n.parentNode.removeChild(n);(function update(el,str){str=(str.length===3)?'':str+'.';el.textContent=str;setTimeout(function(){update(el,str);},333);}(document.querySelector("#loader"),"..."));</script>
</section>
<!-- this content is retrieved from the preface section -->
{{ PREFACE }}
</div>
</article>
<!-- the actual article is a JS bundle -->
<script src="{{ locale }}/article.js" async></script>
<script src="lib/site/social-updater.js" async></script>
</body>
</html>