diff options
Diffstat (limited to 'docs/res/base.css')
| -rw-r--r-- | docs/res/base.css | 550 |
1 files changed, 550 insertions, 0 deletions
diff --git a/docs/res/base.css b/docs/res/base.css new file mode 100644 index 000000000..5cc6cc39d --- /dev/null +++ b/docs/res/base.css @@ -0,0 +1,550 @@ +* { margin:0; padding:0; } +html { } +body { + background-color: #f4f4f4; + color: #414141; + font: 15px/22px 'Inter UI', system-ui, sans-serif; + + font-size: 15px; + line-height: 1.5; + letter-spacing: -0.002em; + + font-weight: 400; + padding-bottom: 30px; + + -webkit-text-size-adjust: 100%; + -ms-text-size-adjust: 100%; + -webkit-overflow-scrolling: touch; + scroll-behavior: smooth; + + font-kerning: normal; + -moz-font-feature-settings:"kern" 1, "liga" 1; + -ms-font-feature-settings:"kern" 1, "liga" 1; + -o-font-feature-settings:"kern" 1, "liga" 1; + -webkit-font-feature-settings:"kern" 1, "liga" 1; + font-feature-settings:"kern" 1, "liga" 1; +} + +:target:before { + content:""; + display: block; + height: 20px; /* fixed header height*/ + margin: -20px 0 0; /* negative fixed header height */ +} + +a { + text-decoration: underline rgba(0, 0, 0, 0.3); + color: black; + word-break: break-word; + word-wrap: break-word; +} +a.fat { + font-weight:500; + color: #333; +} +a:hover { + color: rgb(3, 102, 214); + text-decoration: underline rgba(3, 102, 214, 0.6); +} +a.plain, a.fat { + background: none; + text-shadow: none; + text-decoration: none; + cursor: pointer; +} +a[href^="#"]:hover { + text-decoration-style: dashed; +} + +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 { + -moz-font-feature-settings: 'kern' 1, 'case' 1; + -ms-font-feature-settings: 'kern' 1, 'case' 1; + -o-font-feature-settings: 'kern' 1, 'case' 1; + -webkit-font-feature-settings: 'kern' 1, 'case' 1; + 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; +} +num { /* number */ + /*-moz-font-feature-settings: 'calt' 1, 'ss01' 1; + -ms-font-feature-settings: 'calt' 1, 'ss01' 1; + -o-font-feature-settings: 'calt' 1, 'ss01' 1; + -webkit-font-feature-settings: 'calt' 1, 'ss01' 1; + font-feature-settings: 'calt' 1, 'ss01' 1;*/ + letter-spacing:0.02em; + white-space: pre; +} + +small { + font-size: 11px; + letter-spacing: 0.013em; +} + +h1, h2, h3 { + font-weight: 500; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} +h1 { + color: #222; + font-size: 55px; + letter-spacing: -0.03em; + line-height: 1.1em; + text-indent: -2px; + margin-bottom: 30px; + margin-top: 10px; + font-weight: 700; +} +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; + letter-spacing: inherit; + font-weight:400; + margin:0; + margin-top:-1.9em; +} +h2.back a:hover { + color: black; + margin-left:-1.3em; +} +h2.back a:hover::before { + content: "<- "; +} +h2.banner { + text-align: center; + display: flex; + justify-content: center; +} + h2.banner > * { + flex: 0 1 auto; + padding: 0.8em 1.2em; + border-radius: 4em; + display: block; + background: white; + } + h2.banner > a:hover { + color: black; + background: rgba(0,0,0,0.1); + } + +h3 { + font-size: inherit; +} + +h1 > a, h2 > a, h3 > a { + color: inherit; + text-decoration: none !important; + text-shadow: none; + background: none; +} + +.row { + padding: 50px; + display: flex; + justify-content: center; +} + .row > * { + width:100%; + max-width: 888px; + flex: 1 0 100%; + } + .row .learn-more { + margin-top: 2em; + text-align: center; + font-size: 11px; + letter-spacing: 0.007em; + } + .row .learn-more a { + color: rgba(0,0,0,0.4); + text-decoration-color: rgba(0, 0, 0, 0); + } + .row .learn-more a:hover { + color: inherit; + } + +.row.full-width { + padding: 50px 0; + justify-content: flex-start; +} + .row.full-width > * { + max-width: initial; + } + +.row-divider { + margin:0 auto; + max-width: 888px; + height: 1px; + border-bottom: 1px dashed rgba(0,0,0,0.09); +} + +.row.menu { + padding: 0; + border-bottom:1px solid rgba(0,0,0,0.1); +} + .row.menu ul { + width: auto; + max-width: 888px; + flex: 1 1 auto; + list-style: none; + padding: 0; + margin: 0 50px; + display: flex; + flex-wrap: wrap; + white-space: nowrap; + } + .row.menu ul li { + margin-right: 30px; + margin-bottom: -1px; + } + .row.menu ul li > a { + color: inherit; + opacity: 0.6; + text-decoration:none; + display: inline-block; + padding: 15px 0 13px 0; + transition: 300ms opacity cubic-bezier(0.25, 0.47, 0.44, 0.93); + border-bottom: 3px solid transparent; + } + .row.menu ul li > a:hover, .row.menu ul li > a.active { + color: black; + border-bottom-color: black; + opacity: 1; + } + .row.menu ul li.home > a { + font-weight: 500; + color: black; + opacity: 1; + } + + +.row.white { + background: white; +} + +.row.dark { + background: #2b2b2b; + color: #99999b; +} +.row.dark a { + text-decoration-color: rgba(255, 255, 255, 0.2); + color: #aaa; +} +.row.dark a:hover { + color: rgba(160, 190, 255, 1); + text-decoration: underline rgba(164, 188, 255, 0.6); +} +.row.dark h2, .row.dark h2 > a { + color: #ccc; + background: none; +} + +.row.color1 { + background: #C0CDE2; + color: #3B414A; +} + +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; +} + +.sample-images {} + .sample-images img, .sample-images svg { + display: block; + width: 100%; + } + + +/* 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:target { + background: #fafa88; + margin-left: -1.5em; +} +ul.faq > li > a.anchor { + visibility: hidden; + height:0; + position:relative; +} + +li.q { + font-weight: 500; + margin-top:1.5em; +} +ul > li.q:first-child, ul > li.q:not([id]) { + margin-top:0; +} + +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 { + -moz-font-feature-settings: 'calt' 1, 'case' 1; + -ms-font-feature-settings: 'calt' 1, 'case' 1; + -o-font-feature-settings: 'calt' 1, 'case' 1; + -webkit-font-feature-settings: 'calt' 1, 'case' 1; + font-feature-settings: 'calt' 1, 'case' 1; + content: " → "; + color: rgba(0,0,0,0.2); + } + tablex in, tablex out { + color: rgba(0,0,0,0.8); + } + tablex in { + -moz-font-feature-settings: 'calt' 0; + -ms-font-feature-settings: 'calt' 0; + -o-font-feature-settings: 'calt' 0; + -webkit-font-feature-settings: 'calt' 0; + font-feature-settings: 'calt' 0; + } + tablex out { + -moz-font-feature-settings: 'calt' 1; + -ms-font-feature-settings: 'calt' 1; + -o-font-feature-settings: 'calt' 1; + -webkit-font-feature-settings: 'calt' 1; + font-feature-settings: 'calt' 1; + } + tablex out.zero { + -moz-font-feature-settings: 'calt' 1, 'zero' 1; + -ms-font-feature-settings: 'calt' 1, 'zero' 1; + -o-font-feature-settings: 'calt' 1, 'zero' 1; + -webkit-font-feature-settings: 'calt' 1, 'zero' 1; + font-feature-settings: 'calt' 1, 'zero' 1; + } + tablex out.tnum { + -moz-font-feature-settings: 'calt' 1, 'tnum' 1; + -ms-font-feature-settings: 'calt' 1, 'tnum' 1; + -o-font-feature-settings: 'calt' 1, 'tnum' 1; + -webkit-font-feature-settings: 'calt' 1, 'tnum' 1; + font-feature-settings: 'calt' 1, 'tnum' 1; + } + tablex out.case { + -moz-font-feature-settings: 'calt' 1, 'case' 1; + -ms-font-feature-settings: 'calt' 1, 'case' 1; + -o-font-feature-settings: 'calt' 1, 'case' 1; + -webkit-font-feature-settings: 'calt' 1, 'case' 1; + font-feature-settings: 'calt' 1, 'case' 1; + } + tablex out.frac { + -moz-font-feature-settings: 'calt' 1, 'frac' 1; + -ms-font-feature-settings: 'calt' 1, 'frac' 1; + -o-font-feature-settings: 'calt' 1, 'frac' 1; + -webkit-font-feature-settings: 'calt' 1, 'frac' 1; + font-feature-settings: 'calt' 1, 'frac' 1; + } + tablex out.ss01 { + -moz-font-feature-settings: 'calt' 1, 'ss01' 1; + -ms-font-feature-settings: 'calt' 1, 'ss01' 1; + -o-font-feature-settings: 'calt' 1, 'ss01' 1; + -webkit-font-feature-settings: 'calt' 1, 'ss01' 1; + 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 { + overflow: auto; + flex: 1 1 0; + min-width: 280px; + max-width: 100%; + display: flex; + flex-direction: column; + background: white; + padding: 2em; + border-radius: 3px; + margin-right:1em; + margin-bottom:1em; +} +body.safari box { + /* Fix for broken flex wrap in safari */ + flex-basis: 40%; +} +box:first-child { + margin-left:0; +} +box h3 { + margin-bottom:0.8em; +} + + +/* ------------------------------------------------------ */ + +/* narrow windows */ +@media only screen and (max-width: 565px) { + .row.menu ul { + justify-content: space-between; + } + .row.menu ul li { + margin-right: 15px; + } + .row.menu ul li:last-child { + margin-right: 0; + } + .row.menu ul li.home { + /*color: red; + clear: both;*/ + /*display: block;*/ + text-align:center; + margin:0 0 -12px 0; + width: 100%; + } + .row.menu ul li.home > a { + border-bottom: none; + padding: 0 1em; + margin: 0.5em 0; + line-height:34px; + border-radius: 90px; + + /*color: white; + background-color: rgba(3, 102, 214, 1);*/ + } + .row.menu ul li.home > a:hover { + color: white; + background-color: #222; + } +} + +/* small devices (<= iPhone 6+) */ +@media only screen and (max-device-width: 414px) { + box { padding: 1em; } + box tablex r { font-size: 0.9em; } + body { + font-size: 14px; + line-height: 20px; + } + .row { + padding-left: 20px; + padding-right: 20px; + } + .row.menu ul { + margin-left: 20px; + margin-right: 20px; + } +} + +/* small devices (<= iPhone 5) */ +@media only screen and (max-device-width: 320px) { + box { + font-size: 0.8em; + min-width: 240px; + } + /*.row.menu { + font-size:13px; + } + .row.menu ul { + margin-left: 0; + margin-right: 0; + } + .row.menu ul li { + flex: 1 0 auto; + text-align: center; + border-right: 1px solid rgba(0,0,0,0.1); + margin-left:0; + margin-right:0; + } + .row.menu ul li:last-child { + border-right: none; + }*/ +} + |