website: add /download/ page

5 files changed, 244 insertions, 44 deletions

diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html
index 71212d1db..74d99177b 100644
--- a/docs/_layouts/default.html
+++ b/docs/_layouts/default.html
@@ -10,10 +10,6 @@ assign url_root = "/inter/" %}{% endif %}{%
 
 assign release_version = site.data.fontinfo[0].version %}{%
 
-capture download_url
-  %}https://github.com/rsms/inter/releases/download/v{{ release_version }}/Inter-{{ release_version }}.zip{%
-endcapture %}{%
-
 for file in site.static_files %}{%
   assign _path = file.path | remove_first: "/inter" %}{%
   if _path == "/res/base.css" %}{%
@@ -88,7 +84,7 @@ endfor
         <li class="nav-dynmetrics"><a href="{{url_root}}dynmetrics/" {% if page.url contains "/dynmetrics/" %}class="active"{% endif %}>Metrics</a></li>
         <li class="nav-lab"><a href="{{url_root}}lab/" {% if page.url contains "/lab/" %}class="active"{% endif %}>Lab</a></li>
         <!-- <li class="nav-source"><a href="https://github.com/rsms/inter/">Source</a></li> -->
-        <li class="nav-download"><a href="{{ download_url }}">Download &darr;</a></li>
+        <li class="nav-download"><a href="{{url_root}}download/" {% if page.url contains "/download/" %}class="active"{% endif %}>Download &darr;</a></li>
       </ul>
     </div>
 
diff --git a/docs/download/index.html b/docs/download/index.html
new file mode 100644
index 000000000..c7bf655ac
--- /dev/null
+++ b/docs/download/index.html
@@ -0,0 +1,211 @@
+---
+layout: default
+title: Download Inter
+---
+{%
+
+assign release_version = site.data.fontinfo[0].version %}{%
+
+capture download_filename
+  %}Inter-{{ release_version }}.zip{%
+endcapture %}{%
+
+capture download_url
+  %}https://github.com/rsms/inter/releases/download/v{{ release_version }}/{{ download_filename }}{%
+endcapture %}{%
+
+if site.safe == false %}{%
+assign url_root = "/" %}{% else %}{%
+assign url_root = "/inter/" %}{% endif %}{%
+
+for file in site.static_files %}{%
+  assign _path = file.path | remove_first: "/inter" %}{%
+  if _path == "/samples/index.css" %}{%
+    assign index_css_v = file.modified_time | date: "%Y%m%d%H%M%S" %}{%
+  elsif _path == "/res/bindings.js" %}{%
+    assign bindings_js_v = file.modified_time | date: "%Y%m%d%H%M%S" %}{%
+  elsif _path == "/res/graphplot.js" %}{%
+    assign graphplot_js_v = file.modified_time | date: "%Y%m%d%H%M%S" %}{%
+  endif %}{%
+endfor
+
+%}
+<meta http-equiv="refresh" content="0;url={{ download_url }}" />
+<style type="text/css">
+body {
+  background: white;
+}
+div.row.download {
+  font-weight: 460;
+}
+.dim { opacity:0.4; text-decoration: none }
+.dim:hover { opacity:1 }
+.large {
+  font-size: 1.2rem;
+  line-height: 1.4;
+}
+form.large { zoom: 1.2 }
+.download ol {
+  padding-left: 1.5em;
+  margin-bottom: 1.5em;
+}
+.install-instructions {
+  max-width: 40em;
+  display: none;
+}
+.install-instructions.active {
+  display: block;
+}
+
+</style>
+<div class="row download"><div>
+  <p class="large">
+    Downloading Inter version {{ release_version }} ...<br>
+    <a href="{{ download_url }}" class="dim">If the download is not starting automatically, click here</a>
+  </p>
+
+  <!-- <h2>Support Inter</h2> -->
+  <p class="large">
+    Inter is <a href="https://github.com/rsms/inter">open source</a>.<br>
+    Please consider giving us a small donation to keep this project alive!
+  </p>
+  <p class="large">
+    <a id="sponsor-button"
+       title="Help Inter by becoming a sponsor and donating a coffee or two"
+       href="https://github.com/sponsors/rsms">
+       <span>Support Inter...</span>
+    </a>
+  </p>
+
+  <form class="large" action="https://www.paypal.com/donate" method="post" target="_top">
+     <input type="hidden" name="business" value="rsms@notion.se">
+     <input type="hidden" name="no_recurring" value="0">
+     <input type="hidden" name="item_name" value="Inter typeface">
+     <!-- <input type="hidden" name="item_number" value="Fall Cleanup Campaign"> -->
+     <input type="hidden" name="currency_code" value="USD">
+     <input type="submit" name="submit" value="One-time donation via PayPal...">
+  </form>
+
+  <h2>How to install</h2>
+  <p>
+    Show instructions for
+    <select id="install-menu">
+      <option value="mac">macOS</option>
+      <option value="windows">Windows</option>
+      <option value="linux">Linux (Ubuntu-like)</option>
+    </select>
+  </p>
+
+  <div id="install-mac" class="install-instructions active">
+    <h3>Using Font Book</h3>
+    <ol>
+      <li>Open the "Font Book" application</li>
+      <li>In the main menu, select File, then "Add Fonts..."</li>
+      <li>Find the "Inter Desktop" folder, select the folder and press the Open button</li>
+    </ol>
+    <h3>Using Finder</h3>
+    <ol>
+      <li>Copy the "Inter Desktop" folder</li>
+      <li>Press ⇧⌘G in Finder and go to:  ~/Library/Fonts</li>
+      <li>Delete any existing "Inter" files and folders</li>
+      <li>Paste the "Inter Desktop" folder</li>
+    </ol>
+  </div>
+
+  <div id="install-windows" class="install-instructions">
+    <ol>
+      <li>Copy the "Inter Desktop" folder in the zip file to your Desktop</li>
+      <li>Open the "Inter Desktop" folder on your Desktop</li>
+      <li>Select all font files</li>
+      <li>Right-click the selected files and choose "Install for all users"</li>
+    </ol>
+    <p>
+      If you have a previous installation of Inter, you should make sure
+      to remove those fonts files before installing new ones. You need to
+      install the font for all users, as some software requires fonts to be
+      global.
+    </p>
+    <h3>ClearType-hinted fonts</h3>
+    <p>
+    Inter also comes with a version that has TrueType hints used by ClearType
+    on Windows. This changes the appearance of the fonts when rendered on a
+    system with ClearType enabled and can in some cases increase the legibility
+    of text. However, the hints for Inter are automatically generated and are
+    not always a good thing.
+    </p>
+    <p>
+    If you do prefer to use the version with hints, use the font files in the
+    "Inter Hinted for Windows/Desktop" folder instead of "Inter Desktop".
+    </p>
+  </div>
+
+  <div id="install-linux" class="install-instructions">
+    <p>
+      There are many different Linux distributions and some handle font management
+      differently. These instructions are for the most common Linux distributions.
+    </p>
+    <ol>
+      <li>
+        Create a folder called ".fonts" in your home directory.<br>
+        Example: <tt>mkdir -p ~/.fonts</tt>
+      </li>
+      <li>
+        Copy the otf files in the "Inter Desktop" folder into your
+        <tt>.fonts</tt> directory.<br>
+        Example: <tt>cp "Inter Desktop"/*.otf ~/.fonts/</tt>
+      </li>
+    </ol>
+    <p>
+      You may have to restart apps and/or your window server session.
+    </p>
+    <p>
+      Again, these instructions are for the most common Linux distributuons like
+      Ubuntu and might not apply to you. Refer to the documentation for your
+      distribution for more details on how to manage fonts in your OS.
+    </p>
+    <h3>Linux Q&amp;A</h3>
+    <p>
+      Q: I installed the fonts but they don't show up<br>
+      A: Try rebuilding the font database:<br>
+      <tt>sudo fc-cache -f -v</tt><br>
+      Then restart your program(s).
+    </p>
+    <p>
+      Q: Is there a way to tell if Inter was actually installed?<br>
+      A: Try running: <tt>fc-list | grep "Inter"</tt>
+    </p>
+    <p>
+      Q: <tt>~/.fonts</tt> is an old thing.
+      The new thing is <tt>~/.local/share/fonts</tt><br>
+      A: Yes, that is true for recent distributions.
+      These distros usually support
+      <tt>~/.fonts</tt> as well making these instructions work for everyone.
+    </p>
+  </div>
+
+
+</div></div>
+<script type="text/javascript">(function(){
+
+let activeInstructions = document.querySelector('.install-instructions.active')
+
+function activateInstructions(id) {
+  activeInstructions.classList.remove("active")
+  activeInstructions = document.querySelector('#install-' + id)
+  activeInstructions.classList.add("active")
+}
+
+let installMenu = document.querySelector('#install-menu')
+installMenu.onchange = ev => {
+  activateInstructions(installMenu.value)
+}
+
+if (/linux/i.test(navigator.userAgent)) {
+  activateInstructions('linux')
+} else if (/windows/i.test(navigator.userAgent)) {
+  activateInstructions('windows')
+} else if (/mac os/i.test(navigator.userAgent)) {
+  activateInstructions('mac')
+}
+
+})();</script>
diff --git a/docs/index.css b/docs/index.css
index 594f0e308..e78af2305 100644
--- a/docs/index.css
+++ b/docs/index.css
@@ -269,38 +269,6 @@ grid.faq {
 }
 
 
-
-#sponsor-button {
-  display: inline-block;
-  min-width: 1%;
-  max-width: 100%;
-  height: 2em;
-  line-height: 2em;
-  border-radius: 0.25em;
-  border: 1px solid rgba(0,0,0,0.2);
-  font-weight: 500; font-weight: 480;
-  text-decoration: none;
-  padding: 0 0.6em;
-  user-select: none; -webkit-user-select: none;
-}
-#sponsor-button:hover {
-  border-color: rgba(0,0,0,0.6);
-  color: inherit;
-}
-#sponsor-button span {
-  display: flex;
-  align-items: center;
-  white-space: nowrap;
-}
-#sponsor-button span::before {
-  content: "♥";
-  color: var(--red);
-  margin-right: 0.3em;
-  font-size: 1.1em;
-  line-height: 1em;
-}
-
-
 blockquote {
   display:inline-block;
   border-radius:4px;
diff --git a/docs/index.html b/docs/index.html
index 4a28bd8e4..86efa5c58 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -3,12 +3,6 @@ layout: default
 ---
 {%
 
-assign release_version = site.data.fontinfo[0].version %}{%
-
-capture download_url
-  %}https://github.com/rsms/inter/releases/download/v{{ release_version }}/Inter-{{ release_version }}.zip{%
-endcapture %}{%
-
 for file in site.static_files %}{%
   assign _path = file.path | remove_first: "/inter" %}{%
   if _path == "/index.css" %}{%
@@ -89,7 +83,7 @@ endfor
     <c span=3.. span-s=row>
       <p>
         Using Inter is as easy as
-        <a class="download-link" href="{{download_url}}">downloading &amp; installing</a>
+        <a class="download-link" href="download/">downloading &amp; installing</a>
         the font files. If you're making a web thing, you can use the following CSS.
         <!-- or get it from <a href="https://fonts.google.com/specimen/Inter">Google Fonts</a>. -->
       </p>
diff --git a/docs/res/base.css b/docs/res/base.css
index 94d76a2ca..4ddd681f8 100644
--- a/docs/res/base.css
+++ b/docs/res/base.css
@@ -833,3 +833,34 @@ instead.
 @media only screen and (max-width: 565px) {
   .charset-table { --columns: var(--columnsXS); }
 }
+
+
+#sponsor-button {
+  display: inline-block;
+  min-width: 1%;
+  max-width: 100%;
+  height: 2em;
+  line-height: 2em;
+  border-radius: 0.25em;
+  border: 1px solid rgba(0,0,0,0.2);
+  font-weight: 500; font-weight: 480;
+  text-decoration: none;
+  padding: 0 0.6em;
+  user-select: none; -webkit-user-select: none;
+}
+#sponsor-button:hover {
+  border-color: rgba(0,0,0,0.6);
+  color: inherit;
+}
+#sponsor-button span {
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+}
+#sponsor-button span::before {
+  content: "♥";
+  color: var(--red);
+  margin-right: 0.3em;
+  font-size: 1.1em;
+  line-height: 1em;
+}