above-the-fold + sticky section titles

docs/zh-CN/index.html

@@ -33,7 +33,7 @@
 		<meta property="og:locale" content="zh-CN" />
 		<meta property="og:type" content="article" />
 		<meta property="og:published_time" content="2013-06-13T12:00:00+00:00" />
-		<meta property="og:updated_time" content="2020-09-26T22:53:06+00:00" />
+		<meta property="og:updated_time" content="2020-09-27T17:04:48+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" />
@@ -123,13 +123,35 @@
 				贝塞尔曲线底漆<a class="rss-link" href="news/rss.xml"><img src="images/rss.png" /></a>
 			</h1>
 			<h2>A free, online book for when you really need to know how to do Bézier things.</h2>
-			<span>Read this in your own language:</span>
-			<ul class="lang-switcher">
-				<li><a href="./index.html">English</a></li>
-				<li><a href="./ja-JP/index.html">日本語</a></li>
-				<li><a href="./zh-CN/index.html">中文</a></li>
-			</ul>
-			<p>Don't see your language listed? <a href="https://github.com/Pomax/BezierInfo-2/wiki/localize">Help translate this content!</a></p>
+			<div>
+				<span>Read this in your own language:</span>
+				<ul class="lang-switcher">
+					<li><a href="./index.html">English</a></li>
+					<li><a href="./ja-JP/index.html">日本語</a></li>
+					<li><a href="./zh-CN/index.html">中文</a></li>
+				</ul>
+				<p>(Don't see your language listed? <a href="https://github.com/Pomax/BezierInfo-2/wiki/localize">Help translate this content!</a>)</p>
+			</div>
+
+			<p>
+				Welcome to the Primer on Bezier Curves. This is a free website/ebook dealing with both the maths and programming aspects of Bezier Curves,
+				covering a wide range of topics relating to drawing and working with that curve that seems to pop up everywhere, from Photoshop paths to CSS
+				easing functions to Font outline descriptions.
+			</p>
+			<p>
+				If this is your first time here: welcome! Let me know if you were looking for anything in particular that the primer doesn't cover over on the
+				<a href="https://github.com/Pomax/BezierInfo-2/issues">issue tracker</a>!
+			</p>
+
+			<p>
+				If this is a resource that you're using for research, or writing your own software, please consider
+				<a href="https://www.paypal.com/donate/?cmd=_s-xclick&hosted_button_id=3BNHGHZAS3DP6&locale.x=en_CA">donating</a> (any amount helps) or
+				signing up as <a href="https://www.patreon.com/bezierinfo">a patron on Patreon</a>. I don't get paid to work on this, so if you find this site
+				valuable, and you'd like it to stick around for a long time to come, a lot of coffee went into writing this over the years, and a lot more
+				coffee will need to go into it yet: if you can spare a coffee, you'd be helping keep a resource alive and well!
+			</p>
+
+			<p>— <a href="https://twitter.com/TheRealPomax">Pomax</a></p>
 			<noscript>
 				<div class="note">
 					<header>
@@ -231,7 +253,6 @@
 				<p>
 					那么，要是你自己想编程实现它们呢？有哪些陷阱？你怎么画它们？包围盒是怎么样的，怎么确定交点，怎么拉伸曲线，简单来说：你怎么对曲线做一切你想做的事？这就是这篇文章想说的。准备好学习一些数学吧!
 				</p>
-				<p>—Pomax (推特账号, <a href="https://twitter.com/TheRealPomax">@TheRealPomax</a>)</p>
 				<div class="note">
 					<h2>注意：几乎所有的贝塞尔图形都是可交互的。</h2>
 					<p>这个页面使用了基于<a href="https://pomax.github.io/bezierjs/">Bezier.js</a> 的可交互例子。</p>