diff options
author | Rasmus Andersson <rasmus@notion.se> | 2017-08-28 12:36:29 +0300 |
---|---|---|
committer | Rasmus Andersson <rasmus@notion.se> | 2017-08-28 12:36:29 +0300 |
commit | 4f790d0ae83d490e5b06563bc42f9bc5d633c8a9 (patch) | |
tree | ea579516603323d56630622696f72ef1328abccd /docs/index.css | |
parent | f582d7205955af3e3bdd04d37797eca1f29e613a (diff) | |
download | inter-4f790d0ae83d490e5b06563bc42f9bc5d633c8a9.tar.xz |
website
Diffstat (limited to 'docs/index.css')
-rw-r--r-- | docs/index.css | 393 |
1 files changed, 393 insertions, 0 deletions
diff --git a/docs/index.css b/docs/index.css new file mode 100644 index 000000000..a10c306ae --- /dev/null +++ b/docs/index.css @@ -0,0 +1,393 @@ +* { margin:0; padding:0; } +html { } +body { + background-color: #f4f4f4; + color: #414141; + font: 16px/22px Interface, sans-serif; + letter-spacing: -0.1px; + font-weight: 400; + padding-bottom: 30px; + + font-kerning: normal; + -moz-font-feature-settings: "kern" 1; + -webkit-font-feature-settings: "kern" 1; + font-feature-settings: "kern" 1; +} + +a { + color: inherit; + text-decoration: underline; + word-break: break-word; + word-wrap: break-word; +} +a:hover { + color: rgb(48, 112, 232); +} +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, pre, q { + font-family: "SFMono-Regular", Menlo, Consolas, Inconsolata, monospace; + font-size:0.96em; +} +code { + display: block; + border-radius:1px; + padding: 0.5em 0; + overflow: auto; +} +pre, q { + display: inline; + white-space: pre-wrap; +} +q { + display: inline; +} +q:before { + content: ""; +} +q:after { + content: ""; +} +kbd { + font-feature-settings: 'kern' 1, 'case' 1; + border: 1px solid rgba(0,0,0,0.18); + border-radius: 3px; + padding:0.1em 0.2em; + margin:0 0.1em; +} +dem { /* de-emphasize */ + font-weight: 400; + opacity: 0.7; +} + +h1, h2, h3 { + font-weight: 500; +} +h1 { + color: #333; + font-size: 38px; + letter-spacing: -1.3px; + line-height: 40px; + text-indent: -2px; + margin-bottom: 30px; + margin-top: 10px; +} +h2 { + font-size: 24px; + letter-spacing: -0.4px; + line-height: 30px; + margin-bottom: 25px; + margin-top: 10px; +} +h2.back { + color:rgba(0,0,0,0.2); + font-size: inherit; + font-weight:400; + margin:0; + margin-top:-1.9em; +} +h2.back a:hover { + color: black; + margin-left:-1.6em; +} +h2.back a:hover::before { + content: "<- "; +} +h3 { + font-size: inherit; +} + +h1 > a, h2 > a, h3 > a { + color: inherit; + text-decoration: none; + text-shadow: none; + background: none !important; +} + +.row { + padding: 50px; + /*background: salmon;*/ + display: flex; + justify-content: center; + /*background: white;*/ +} +.row > * { + width:100%; + max-width: 888px; + flex: 1 0 100%; + /*background: white;*/ +} + +.row-divider { + margin:0 auto; + max-width: 888px; + height: 1px; + border-bottom: 1px dashed rgba(0,0,0,0.09); +} + +/* small screens */ +@media only screen and (max-device-width: 736px) { + .row { + padding-left: 20px; + padding-right: 20px; + } +} + +.row.white { + background: white; +} + +.row.dark { + background: #2b2b2b; + color: #99999b; +} +.row.dark a:hover { + color: rgb(164, 188, 255); +} +.row.dark h2, .row.dark h2 > a { + color: #ccc; + background: none; +} + +.row.color1 { + background: #C0CDE2; + color: #3B414A; +} + +/* + 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; + background-image: + linear-gradient(to bottom, + rgba(0,0,0,.6) 50%, + rgba(0,0,0,0) 50%); + background-repeat: repeat-x; + background-size: 2px .1em; + background-position: 0 1.15em; + text-shadow: + /* creates "openings" for descenders in the underline */ + -1px -1px 0 #f4f4f4, + 1px -1px 0 #f4f4f4, + -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, + rgba(48, 112, 232, 1) 50%, + rgba(48, 112, 232, 0) 50%); + } + .row.white a { + text-shadow: + -1px -1px 0 white, + 1px -1px 0 white, + -1px 1px 0 white, + 1px 1px 0 white; + } + .row.dark a { + background-image: + linear-gradient(to bottom, + rgba(255,255,255,.3) 50%, + rgba(255,255,255,0) 50%); + text-shadow: + -1px -1px 0 #2b2b2b, + 1px -1px 0 #2b2b2b, + -1px 1px 0 #2b2b2b, + 1px 1px 0 #2b2b2b; + } + .row.dark a:hover { + background-image: + linear-gradient(to bottom, + rgba(164, 188, 255, 1) 50%, + rgba(164, 188, 255, 0) 50%); + } +} + +::selection { + background: rgb(48, 112, 232); + color: white; + text-shadow: none; +} +::-moz-selection { + background: rgb(48, 112, 232); + color: white; + text-shadow: none; +} + +.row.dark ::selection { + background: rgb(218, 228, 255); + color: black; +} +.row.dark ::-moz-selection { + background: rgb(164, 188, 255); + color: black; +} + +ul { + margin-left:1.1em; +} + +a > img { + display: block; +} + +#repertoire-image { + display:block; + width:100%; + height:40vw; + background-image: url(res/repertoire.png); + background-repeat: no-repeat; + background-size: cover; + background-blend-mode: multiply; + background-color: #f4f4f4; +} + + +/* FAQ */ +ul.faq { + list-style:none; + display: flex; + flex-direction: column; + margin-left:0; +} +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.q:after { + content: ""; +} +li.a:before { + content: "A "; /* contains NO-BREAK SPACE */ + opacity: 0.6; +} + +tablex { + display: flex; +} + tablex > t { + display: table; + } + tablex > t > h { + display: table-row; + opacity:0.4; + } + tablex > t > h > * { + padding-bottom:1em; + } + tablex > t > h to { + visibility: hidden; + } + tablex > t > r { + text-decoration: none; + display: table-row; + } + tablex in, tablex to, tablex out { + display: table-cell; + width: 5%; + white-space: pre; + padding-bottom:0.5em; + } + /*tablex to { + width:0; + }*/ + tablex to::after { + font-feature-settings: 'calt' 1, 'case' 1; + content: " → "; + color: rgba(0,0,0,0.2); + } + tablex in, tablex out { + /*background: #E3E6F1;*/ + color: rgba(0,0,0,0.8); + border-radius: 1px; + } + tablex in { + font-feature-settings: 'calt' 0; + } + tablex out { + font-feature-settings: 'calt' 1; + } + tablex out.zero { font-feature-settings: 'calt' 1, 'zero' 1; } + tablex out.tnum { font-feature-settings: 'calt' 1, 'tnum' 1; } + tablex out.case { font-feature-settings: 'calt' 1, 'case' 1; } + tablex out.frac { font-feature-settings: 'calt' 1, 'frac' 1; } + tablex out.ss01 { font-feature-settings: 'calt' 1, 'ss01' 1; } + tablex em { + font-style: inherit; + background: #FBE9A3; + color: rgba(0,0,0,1); + } + + +boxes { + display: flex; + flex-wrap: wrap; + justify-content: stretch; + margin-right:-1em; +} +box { + display: flex; + flex-direction: column; + background: white; + padding:2em; + border-radius: 1px; + margin-right:1em; + margin-bottom:1em; + flex: 1 1 10%; + /*width:220px;*/ +} +box:first-child { + margin-left:0; +} +box h3 { + margin-bottom:0.8em; +} + +#glyph-repertoire-iframe { + pointer-events: none; +} +/*#glyph-repertoire-p { + cursor: pointer; +}*/ +a.glyph-repertoire { + display:block; +}
\ No newline at end of file |