From 586eaa230f0d88c3492533ced52cc586e13e4039 Mon Sep 17 00:00:00 2001 From: Rasmus Andersson Date: Wed, 23 Aug 2017 10:48:49 -0700 Subject: [PATCH] adds faq to website and adjusts underlines of links --- docs/index.html | 180 +++++++++++++++++++++++++++++++++++++++++++++--- 1 file changed, 169 insertions(+), 11 deletions(-) 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

+ + + +