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;
+}
+
+
@@ -301,6 +365,100 @@ a > img {
Please refer to the glyph repertoire
for an overview of currently–available glyphs and their quality.
+
+
+
+
+
+
+ -
+ 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