summaryrefslogtreecommitdiff
path: root/docs/index.html
diff options
context:
space:
mode:
Diffstat (limited to 'docs/index.html')
-rw-r--r--docs/index.html92
1 files changed, 59 insertions, 33 deletions
diff --git a/docs/index.html b/docs/index.html
index a8fbd7930..e14492cb6 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -25,6 +25,8 @@ endfor
<link rel="stylesheet" href="index-var.css?v={{ index_var_css_v }}">
<input type="text" id="hidden-text-input">
+<div class="noise-layer"></div>
+
<div class="row white"><div>
<!-- <h1>The Inter<br>typeface family</h1> -->
<grid columns=8>
@@ -91,7 +93,8 @@ endfor
<p>
Using Inter is as easy as
<a class="download-link" href="{{download_url}}">downloading &amp; installing</a>
- the font files. If you're making a web thing, you can simply use this CSS:
+ 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>
<pre>@import url('https://rsms.me/inter/inter.css');
html { font-family: 'Inter', sans-serif; }
@@ -253,15 +256,13 @@ html { font-family: 'Inter', sans-serif; }
%}
{% if has_feature_col %}
- <grid columns=8>
+ <grid columns=7>
<c span=1 class="low-contrast ">Feature</c>
<c span=3 class="low-contrast">Disabled</c>
- <c span=1 class="low-contrast center-text">→</c>
<c span=3 class="low-contrast">Enabled</c>
{% else %}
- <grid columns=9>
+ <grid columns=8>
<c span=4 class="low-contrast">Disabled</c>
- <c span=1 class="low-contrast center-text">→</c>
<c span=4 class="low-contrast">Enabled</c>
{% endif %}
{% for s in f.samples %}
@@ -280,18 +281,19 @@ html { font-family: 'Inter', sans-serif; }
%} {% if has_feature_col %}
<c span=1 class="">{{feat_tag}}</c>
<c span=3 class="sample ff-none">{{sample_in}}</c>
- <c span=1 class="low-contrast center-text">→</c>
<c span=3 class="sample ff-{{feat_tag}}">{{sample_out}}</c>
{% else %}
<c span=4 class="sample ff-none">{{sample_in}}</c>
- <c span=1 class="low-contrast center-text">→</c>
<c span=4 class="sample ff-{{feat_tag}}">{{sample_out}}</c>
{% endif %}
{% endfor %}
</grid>
- <p class="example" title="CSS code">
+
+ <br>
+ <!-- <p class="example" title="CSS code">
<tt>font-feature-settings: '{{feat_tag}}' 1</tt>
- </p>
+ </p> -->
+
{% if f.footer %}
<p>{{f.footer}}</p>
{% endif %}
@@ -313,31 +315,44 @@ html { font-family: 'Inter', sans-serif; }
</div></div>
-<div id="charset" class="row white charset-title">
- <h2><a href="#charset">Character set</a></h2>
-</div>
-<div class="row white charset">
- <div class="charset-table">
- {% for g in site.data.glyphinfo.glyphs %}
- {% comment %}
-
- Ignore empty glyphs and glyphs without unicode mapping.
-
- {% endcomment %}
- {% if g[1] == 0 and g[2] %}
- {% if g[3] %}
- <c title="/{{g[0]}} U+{{g[2]}} ({{g[3]}})">&#x{{g[2]}}</c>
- {% else %}
- <c title="/{{g[0]}} U+{{g[2]}}">&#x{{g[2]}}</c>
- {% endif %}
- {% endif %}
+<div id="languages" class="row white"><div>
+ <h2><a href="#languages">Language support</a></h2>
+ <br>
+ <div class="language-list">
+ {% for c in site.data.languages %}
+ <h4>{{c.category}}</h4>
+ {% for language in c.languages %}
+ <p>{{language}}</p>
+ {% endfor %}
{% endfor %}
</div>
+</div></div>
+
+<div id="charset" class="row green charset-title">
+ <div>
+ <h2><a href="#charset">Character set</a></h2>
+ <p>
+ All {{ site.data.glyphinfo.glyphs | size }} characters provided with Inter.
+ Tap a glyph to copy it to your clipboard.<br>
+ Use the <a href="glyphs/">Glyphs Browser</a> to inspect details like kerning and style variation.
+ </p>
+ </div>
+</div>
+<div class="row green charset">
+{% include charset-table.html %}
</div>
<script>
;(function(){
+ function shouldHandleEvent(ev) {
+ if (!ev.metaKey && !ev.shiftKey && !ev.ctrlKey) {
+ ev.stopPropagation()
+ ev.preventDefault()
+ return true
+ }
+ return false
+ }
function onClickChar(ev) {
// Copy to clipboard.
@@ -345,8 +360,11 @@ html { font-family: 'Inter', sans-serif; }
// This is an elaborate and ugly workaround to make it not suck
// on various browsers.
- ev.preventDefault()
- ev.stopPropagation()
+ // document.location.href = "/glyphs/?g=" + encodeURI(ev.target.dataset.glyphname)
+
+ if (!shouldHandleEvent(ev)) {
+ return false
+ }
var origel = ev.target
var el = origel.cloneNode(true)
@@ -361,7 +379,7 @@ html { font-family: 'Inter', sans-serif; }
el.style.userSelect = 'text'
document.body.appendChild(el)
- el.innerText = el.innerText + " " + el.title
+ el.innerText = el.innerText // + " " + el.title
el.contentEditable = true
el.readOnly = false
@@ -401,11 +419,15 @@ html { font-family: 'Inter', sans-serif; }
var activeListener = { capture: true }
- let cv = document.querySelector('.charset-table').querySelectorAll('c')
+ let cv = document.querySelector('.charset-table').querySelectorAll('a')
for (let i = 0; i < cv.length; i++) {
let c = cv[i]
- c.addEventListener('pointerdown', onClickChar, activeListener)
- c.addEventListener('mousedown', onClickChar, activeListener)
+ if (typeof PointerEvent == "undefined") {
+ c.addEventListener('mousedown', onClickChar, activeListener)
+ } else {
+ c.addEventListener('pointerdown', onClickChar, activeListener)
+ }
+ c.onclick = ev => !shouldHandleEvent(ev)
}
})();
</script>
@@ -680,3 +702,7 @@ trackingEl.addEventListener('mousedown', onPointerdownTracking, activeListener)
updateTracking()
})();</script>
+<script>(function(){
+ let el = document.querySelector(".noise-layer")
+ el.style.height = document.body.clientHeight + "px"
+})()</script> \ No newline at end of file