From 586eaa230f0d88c3492533ced52cc586e13e4039 Mon Sep 17 00:00:00 2001 From: Rasmus Andersson Date: Wed, 23 Aug 2017 10:48:49 -0700 Subject: adds faq to website and adjusts underlines of links --- docs/index.html | 180 ++++++++++++++++++++++++++++++++++++++++++++++++++++---- 1 file changed, 169 insertions(+), 11 deletions(-) (limited to 'docs') diff --git a/docs/index.html b/docs/index.html index af911d12b..a37278d6c 100644 --- a/docs/index.html +++ b/docs/index.html @@ -49,21 +49,35 @@ a { a:hover { color: rgb(48, 112, 232); } -a.plain { - background:none; - text-shadow:none; - text-decoration:none; +a.plain, a.fat { + /* !important needed for qualification over @media further down */ + background: none !important; + text-shadow: none !important; + text-decoration: none; +} +a.fat { + font-weight:500; } p { margin: 20px 0; } -code { - display: block; +code, pre { font-family: "SFMono-Regular", Menlo, Consolas, Inconsolata, monospace; font-size:0.96em; +} +code { + display: block; border-radius:1px; padding: 0.5em 0; - overflow: scroll; + overflow: auto; +} +pre { + display: inline; + white-space: pre-wrap; +} +dem { /* de-emphasize */ + font-weight: 400; + opacity: 0.7; } h1, h2, h3 { @@ -131,7 +145,11 @@ h1 > a, h2 > a, h3 > a { background: none; } -/* Medium.com-style link underline for high-density displays */ +/* + Medium.com-style link underline for high-density displays. + Currently only enabled on Mac as the lines don't render correctly on + Windows (even in Chrome) for some reason. +*/ @media (-webkit-min-device-pixel-ratio: 1.5) { a { text-decoration: none; @@ -141,7 +159,7 @@ h1 > a, h2 > a, h3 > a { rgba(0,0,0,0) 50%); background-repeat: repeat-x; background-size: 2px .1em; - background-position: 0 1.07em; + background-position: 0 1.15em; text-shadow: /* creates "openings" for descenders in the underline */ -1px -1px 0 #f4f4f4, @@ -149,6 +167,10 @@ h1 > a, h2 > a, h3 > a { -1px 1px 0 #f4f4f4, 1px 1px 0 #f4f4f4; } + body.mac_or_ios a { + /* line height calculated differently on mac c/t windows */ + background-position: 0 1.045em; + } a:hover { background-image: linear-gradient(to bottom, @@ -216,16 +238,58 @@ a > img { background-color: #f4f4f4; } + +/* FAQ */ +ul.faq { + list-style:none; + display: flex; + flex-direction: column; +} +ul.faq > li { + padding-right: 6px; + margin-bottom: 6px; + padding-left: 1.5em; + text-indent: -1.5em; +} +ul.faq > li > a { + display: inline; +} +ul.faq > li:target { + background: #fafa88; +} +li.q { + font-weight: 500; + margin-top:1.5em; +} +ul > li.q:first-child, ul > li.q:not([id]) { + margin-top:0; +} +li.q:before { + content: "Q "; /* contains NO-BREAK SPACE */ + opacity: 0.6; +} +li.a:before { + content: "A "; /* contains NO-BREAK SPACE */ + opacity: 0.6; +} + +

The Interface font family

Interface is a font for highly legible text on computer screens.
- Download the latest release - or try it out in the playground + Download the latest release + or try it out in the playground

@@ -301,6 +365,100 @@ a > img { Please refer to the glyph repertoire for an overview of currently–available glyphs and their quality.

+ +

FAQ

+ Some glyphs looks just like Roboto, is this typeface based on Roboto? +
+ Since this font is very similar to Roboto, glyph + outlines from Roboto are indeed being used, mainly as "placeholders" + while the glyph set is expanded. The Roboto license can be found in the + source directory. +
+ There's another font family with a similar name (InterFace). + How do I make sure I'm talking about the right font? +
+ The world is a small place and just like all the + Eric Ericksons, + name alone somtimes does not suffice for unambiguous identity. + The best way to be clear about what font you are talking about is to + use the URL of this page (
```
rsms.me/interface
```
) when telling + people about it. + Design tools and other software uses + a set of information embedded into every font for identity, so names are only + important for humans, not computers, and so you need not to worry about + "conflicts." At least not with well-behaved software. +
+ Can I help with improving Interface? +
+ Yes you can! Interface is an open–source project, meaning the source + code—or "source design" if you will—that is used to build the font files + are freely available to improve upon. + Font making requires a fair bit of technical work and + depending on what you'd like to do, some things might be more fun + depending on your technical skills. + The "Contributing" document is a great place to start. The document outlines where + you can have the biggest impact, how things are setup and how to get + started. +
+ This website claims work started in 2016, but the git repository's log says it started later? +
+ Interface was developed in an a private, internal git repository + starting in November 2016, prior to being published on August 22, 2017. + Between November 2016 and August 2017, there were 2 990 150 line edits made across 247 versions. + The reason the public github repository does not reflect this is the + fact that the project was initially only internal at the company where + the author works and had some sensitive information "checked in", + like AWS server details and internal author identity in + all commit messages. Maybe one day we can write an elaborate git + filter-branch program and convert the filter the old repository to make + it public, but what would be the point of that? :—) +
+ I've made a cool thing that uses Interface, can I share it with you? + or +
+ I have a different question +
+ Reach out on Twitter (@rsms) or over email +

+ + + -- cgit v1.2.3