mirror of
https://github.com/Pomax/BezierInfo-2.git
synced 2025-08-31 03:59:58 +02:00
changed over locales to actual locale dirs
This commit is contained in:
Pomax
125
index.template.html
Normal file
125
index.template.html
Normal file
@@ -0,0 +1,125 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>A Primer on Bézier Curves</title>
|
||||
|
||||
<!-- 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 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 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 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>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user