diff --git a/website/src/js/displacy/displacy.js b/website/src/js/displacy/displacy.js deleted file mode 100644 index 4748beba0..000000000 --- a/website/src/js/displacy/displacy.js +++ /dev/null @@ -1,246 +0,0 @@ -var container = document.getElementById("displacy"); -var dp = []; - -var displaCy = function(mode, api, query, call) { - if(mode == "manual" && !call) call = query + "/"; - var request = call || query; - if(mode == "steps") call = 0; - - dp.loadingIndicator(); - - var xhr = new XMLHttpRequest(); - xhr.open( "POST", api, true); - xhr.setRequestHeader("Content-type", "text/plain"); - xhr.onreadystatechange = function(data) { - if (xhr.readyState === 4) { - if (xhr.status === 200) { - var result = JSON.parse(xhr.responseText); - dp.setDisplay(mode, api, query, call, result); - dp.loadingIndicator(false); - } - } - } - xhr.send(JSON.stringify({ text: request})); -} - -dp.setDisplay = function(mode, api, query, call, result) { - var state = (typeof call === "number") ? call : 0; - var wordlist = result.words; - var arrowlist = result.states[state].arrows; - var stacklist = result.states[state].stack; - var focus = result.states[state].focus; - var is_final = result.states[state].is_final; - var actionlist = result.actions; - - var classnames = { - words: { "NO_TAG" : "w-notag", "ADJ" : "w-adj", "ADV" : "w-adv", "ADP" : "w-adp", "DET" : "w-det", "NOUN" : "w-noun", "PRON" : "w-pron", "PRT" : "w-prt", "VERB" : "w-verb", "X" : "w-x", "PUNCT" : "w-punct", "EOL" : "w-eol", "SPACE" : "w-space", "on_stack" : "stack", "is_entity" : "w-ent", "low_prob" : "w-low", "in_focus" : "in-focus" - }, - arrows : { "correct_arc" : "correct", "incorrect_arc" : "incorrect" } - } - - container.scrollLeft = 0; - dp.clearDisplay(); - dp.addCss(arrowlist, wordlist); - dp.addArrows(arrowlist); - dp.addWords(wordlist, classnames.words, focus, stacklist); - dp.setFocus(focus, arrowlist, wordlist, stacklist); - - if(mode == "steps") dp.addActions(actionlist, is_final, mode, api, query, call, result); - if(mode == "manual") dp.addActions(actionlist, is_final, mode, api, query, call); -} - -dp.clearDisplay = function() { - document.getElementById("displacy").innerHTML = ""; -} - -dp.clearActions = function() { - var actions = document.getElementById("actions"); - if(actions != null) actions.innerHTML = ""; -} - -dp.loadingIndicator = function(loading) { - var spinner = dp.element("div", "spinner", "spinner", false); - container.appendChild(spinner); - - if(!loading) { - document.getElementById("spinner").style.visibility = "hidden"; - } -} - -dp.calcSize = function(arrowlist) { - var size = { height: "350", width: "175", spacing: "10", unit: "px" } - if(arrowlist.length <= 3) size.height /= 2.75; - if(arrowlist.length > 12) { - size.width *= 1.15; - size.height *=1.25; - } - if(arrowlist.length > 20) { - size.width *=1.25; - size.height *=1.5; - } - return size; -} - -dp.addCss = function(arrowlist, wordlist) { - var size = dp.calcSize(arrowlist); - - var css = { - height: size.height + size.unit, - width: size.width + size.unit, - spacing: size.spacing + size.unit - } - - var stylesheet = dp.element("style", false, false, ["scoped", "true"]); - var styles = ["#displacy *,#displacy *:before,#displacy *:after{box-sizing:border-box}#displacy{position:relative;overflow:scroll}#displacy .focus{position:absolute;top:0;height:100%;z-index:-1;background:rgba(0,0,0,.25)}#displacy .current-stack{margin:6em 1.5em;font-size:.75em;opacity:.25}#displacy .actions{position:fixed;}#displacy .words{display:flex;display:-webkit-flex;display:-ms-flexbox;display:-webkit-box;flex-flow:row nowrap;overflow:hidden;text-align:center}#displacy .words .word:after{content:attr(title);display:block}#displacy .arrows{width:100%;position:relative}.level{position:absolute;bottom:0;width:100%}#displacy .arrow{height:100%;position:absolute;overflow:hidden}#displacy .arrow:before{content:attr(title);text-align:center;display:block;height:200%;border-radius:50%;border:2px solid;margin:0 auto}#displacy .arrow:after{content:'';width:0;height:0;position:absolute;bottom:-1px;border-top:12px solid;border-left:6px solid transparent;border-right:6px solid transparent}#displacy .arrow.null{display:none}"]; - - for(var i = 1; i <= arrowlist.length; i++) { - var level = ".level" + i; - - styles.push("#displacy " + level + "{height:" + parseInt(100/arrowlist.length * i) + "%}#displacy " + level + " .arrow{width:calc(" + css.width + " * " + i + ")}#displacy " + level + " .arrow:before{width:calc(100% - " + css.spacing + " * " + parseInt(arrowlist.length - i) + " - 10px)}#displacy " + level + " .arrow.left:after{left:calc(" + css.spacing + " * " + (arrowlist.length - i)/2 + ")}#displacy " + level + " .arrow.right:after{right:calc(" + css.spacing + " * " + (arrowlist.length - i)/2 + ")}"); - } - - for(i = 1; i < wordlist.length; i++) { - styles.push("#displacy .level .arrow:nth-child(" + i + "){left:calc(" + css.width + " * " + parseInt(i - 1) + ")}#displacy .arrows{height:" + css.height + "}#displacy .level{left:calc(" + css.width + "/2)}"); - } - - styles.push("#displacy .words{min-width:calc(" + css.width + " * " + wordlist.length + ")}.words .word{width:" + css.width + "}") - - stylesheet.appendChild(document.createTextNode(styles.join(' '))); - container.appendChild(stylesheet); -} - -dp.addArrows = function(arrowlist) { - var arrowContainer = dp.element("div", "arrows"); - - for(var i = 0; i < arrowlist.length; i++) { - var level = dp.element("div", "level level" + (i + 1)); - - for(var j = 0; j < arrowlist[i].length; j++) { - var arrow = dp.element("span"); - - if(arrowlist[i][j] !== null) { - arrow.setAttribute("title", arrowlist[i][j].label); - arrow.className = "arrow " + arrowlist[i][j].dir; - } - else { - arrow.className = "arrow null"; - } - level.appendChild(arrow); - } - arrowContainer.appendChild(level); - } - container.appendChild(arrowContainer); -} - -dp.addWords = function(wordlist, classnames, focus, stacklist) { - var wordContainer = dp.element("div", "words"); - - for(i = 0; i < wordlist.length; i++) { - var classes = [ "word" ]; - var current = wordlist[i]; - var tag = current.tag; - - var word = dp.element("div", false, false, ["title", tag]); - classes.push(classnames[tag]); - - if(i === focus) classes.push(classnames["in_focus"]); - if(stacklist[i]) classes.push(classnames["on_stack"]); - if(current.is_entity) classes.push(classnames["is_entity"]); - if(!current.is_entity && current.prob <= -17) classes.push(classnames["low_prob"]); - - word.className = classes.join(" "); - var wordtext = dp.element("span", false, false, false, wordlist[i].word); - word.appendChild(wordtext); - wordContainer.appendChild(word); - } - container.appendChild(wordContainer); -} - -dp.setFocus = function(focus, arrowlist, wordlist, stacklist) { - var size = dp.calcSize(arrowlist); - - var focusContainer = dp.element("div", "focus", "focus"); - focusContainer.style.width = size.width + size.unit; - focusContainer.style.left = size.width * focus + size.unit; - - focusContainer.appendChild(dp.compileStack(wordlist, stacklist)); - container.appendChild(focusContainer); - - if(size.width * focus - container.scrollLeft > container.clientWidth/2) container.scrollLeft = size.width * focus - container.clientWidth/2 + size.width/2; -} - -dp.compileStack = function(wordlist, stacklist) { - var stack = dp.element("div", "current-stack", false, ["title", "Stack"]); - - for(var i in wordlist) { - if(stacklist[i]) { - var word = dp.element("div", false, false, false, wordlist[i].word); - stack.appendChild(word); - } - } - return stack; -} - -dp.addActions = function(actionlist, is_final, mode, api, query, call, result) { - dp.clearActions(); - var bindings = []; - var actionContainer = dp.element("div", "actions", "actions"); - - for(var i in actionlist) { - var button = dp.element("button", actionlist[i].label, false, false, actionlist[i].label); - button.onclick = dp.performAction(mode, api, query, call, actionlist[i].key, result); - - if(actionlist[i].is_valid && !is_final) bindings.push({ - key: actionlist[i].key, - code: actionlist[i].binding, - action: button.onclick - }); - else button.disabled = true; - - actionContainer.appendChild(button); - } - container.appendChild(actionContainer); - - document.onkeydown = function(event) { - if ('input' != event.target.tagName.toLowerCase()) { - var codes = []; - for(i in bindings) { - if(event.keyCode == bindings[i].code) { - bindings[i].action(); - } - codes.push(bindings[i].code); - } - - if(codes.indexOf(event.keyCode)!=-1) return false; - } - } - - if(is_final) container.scrollLeft = 0; -} - -dp.performAction = function(mode, api, query, call, action, result) { - if(mode == "parse" || mode == "manual") { - return function() { - call += action + ","; - displaCy(mode, api, query, call); - } - } - - if(mode == "steps") { - return function() { - if(action == "N") call++; - else if(action == "P" && call > 0) call--; - else call = 0; - dp.setDisplay(mode, api, query, call, result); - } - } -} - -dp.element = function(tag, classname, id, attribute, content) { - var element = document.createElement(tag); - element.className = classname || ""; - if(id) element.id = id; - if(attribute) element.setAttribute(attribute[0], attribute[1]); - if(content) element.appendChild(document.createTextNode(content)); - return element; -} diff --git a/website/src/sass/_colors.sass b/website/src/sass/_colors.sass deleted file mode 100644 index 8c436fc65..000000000 --- a/website/src/sass/_colors.sass +++ /dev/null @@ -1,34 +0,0 @@ -// Page -$c-text: black -$c-bg: white -$c-medium: #a7aaa2 -$c-light: lighten($c-medium, 32.5%) -$c-bad: #e80037 -$c-good: #00cc3a -$c-highlight: #ffa400 -$c-lowlight: $c-medium - -// Sections -$c-page: #009acc -$c-blog: #f25f5c - -// Social -$c-twitter: #5ea9dd -$c-reddit: #ff4500 -$c-hn: #ff6600 - -// Prism -$prism-bg: #272822 -$prism-text: #f8f8f2 -$prism-punct: #999999 -$prism-comment: slategray -$prism-number: #ae81ff -$prism-selector: #a6e22e -$prism-operator: #f92672 -$prism-keyword: #66d9ef -$prism-regex: #e6db74 -$prism-tag: #f92672 -$prism-value: #fd971f - -//$prism-punct: #f8f8f2 -//$prism-operator: #f8f8f2 \ No newline at end of file diff --git a/website/src/sass/_fonts.sass b/website/src/sass/_fonts.sass deleted file mode 100644 index 9e06e45be..000000000 --- a/website/src/sass/_fonts.sass +++ /dev/null @@ -1,101 +0,0 @@ -// Font import -@font-face - font-family: 'Karla' - src: url('../fonts/karla-regular.eot') - src: url('../fonts/karla-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/karla-regular.woff2') format('woff2'), url('../fonts/karla-regular.woff') format('woff'), url('../fonts/karla-regular.ttf') format('truetype'), url('../fonts/karla-regular.svg#karlaregular') format('svg') - font-weight: 400 - font-style: normal - unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF - -@font-face - font-family: 'Karla' - src: url('../fonts/karla-regular.eot') - src: url('../fonts/karla-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/karla-regular.woff2') format('woff2'), url('../fonts/karla-regular.woff') format('woff'), url('../fonts/karla-regular.ttf') format('truetype'), url('../fonts/karla-regular.svg#karlaregular') format('svg') - font-weight: 400 - font-style: normal - unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000 - -@font-face - font-family: 'Karla' - src: url('../fonts/karla-italic.eot') - src: url('../fonts/karla-italic.eot?#iefix') format('embedded-opentype'), url('../fonts/karla-italic.woff2') format('woff2'), url('../fonts/karla-italic.woff') format('woff'), url('../fonts/karla-italic.ttf') format('truetype'), url('../fonts/karla-italic.svg#karlaitalic') format('svg') - font-weight: 400 - font-style: italic - unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF - -@font-face - font-family: 'Karla' - src: url('../fonts/karla-italic.eot') - src: url('../fonts/karla-italic.eot?#iefix') format('embedded-opentype'), url('../fonts/karla-italic.woff2') format('woff2'), url('../fonts/karla-italic.woff') format('woff'), url('../fonts/karla-italic.ttf') format('truetype'), url('../fonts/karla-italic.svg#karlaitalic') format('svg') - font-weight: 400 - font-style: italic - unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000 - -@font-face - font-family: 'Karla' - src: url('../fonts/karla-bold.eot') - src: url('../fonts/karla-bold.eot?#iefix') format('embedded-opentype'), url('../fonts/karla-bold.woff2') format('woff2'), url('../fonts/karla-bold.woff') format('woff'), url('../fonts/karla-bold.ttf') format('truetype'), url('../fonts/karla-bold.svg#karlabold') format('svg') - font-weight: 700 - font-style: normal - unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF - -@font-face - font-family: 'Karla' - src: url('../fonts/karla-bold.eot') - src: url('../fonts/karla-bold.eot?#iefix') format('embedded-opentype'), url('../fonts/karla-bold.woff2') format('woff2'), url('../fonts/karla-bold.woff') format('woff'), url('../fonts/karla-bold.ttf') format('truetype'), url('../fonts/karla-bold.svg#karlabold') format('svg') - font-weight: 700 - font-style: normal - unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000 - -@font-face - font-family: 'Karla' - src: url('../fonts/karla-bolditalic.eot') - src: url('../fonts/karla-bolditalic.eot?#iefix') format('embedded-opentype'), url('../fonts/karla-bolditalic.woff2') format('woff2'), url('../fonts/karla-bolditalic.woff') format('woff'), url('../fonts/karla-bolditalic.ttf') format('truetype'), url('../fonts/karla-bolditalic.svg#karlabolditalic') format('svg') - font-weight: 700 - font-style: italic - unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF - -@font-face - font-family: 'Karla' - src: url('../fonts/karla-bolditalic.eot') - src: url('../fonts/karla-bolditalic.eot?#iefix') format('embedded-opentype'), url('../fonts/karla-bolditalic.woff2') format('woff2'), url('../fonts/karla-bolditalic.woff') format('woff'), url('../fonts/karla-bolditalic.ttf') format('truetype'), url('../fonts/karla-bolditalic.svg#karlabolditalic') format('svg') - font-weight: 700 - font-style: italic - unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000 - -@font-face - font-family: 'Inconsolata' - src: url('../fonts/inconsolata-regular.eot') - src: url('../fonts/inconsolata-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/inconsolata-regular.woff2') format('woff2'), url('../fonts/inconsolata-regular.woff') format('woff'), url('../fonts/inconsolata-regular.ttf') format('truetype'), url('../fonts/inconsolata-regular.svg#inconsolataregular') format('svg') - font-weight: 400 - font-style: normal - unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF - -@font-face - font-family: 'Inconsolata' - src: url('../fonts/inconsolata-regular.eot') - src: url('../fonts/inconsolata-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/inconsolata-regular.woff2') format('woff2'), url('../fonts/inconsolata-regular.woff') format('woff'), url('../fonts/inconsolata-regular.ttf') format('truetype'), url('../fonts/inconsolata-regular.svg#inconsolataregular') format('svg') - font-weight: 400 - font-style: normal - unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000 - -@font-face - font-family: 'Inconsolata' - src: url('../fonts/inconsolata-bold.eot') - src: url('../fonts/inconsolata-bold.eot?#iefix') format('embedded-opentype'), url('../fonts/inconsolata-bold.woff2') format('woff2'), url('../fonts/inconsolata-bold.woff') format('woff'), url('../fonts/inconsolata-bold.ttf') format('truetype'), url('../fonts/inconsolata-bold.svg#inconsolatabold') format('svg') - font-weight: 700 - font-style: normal - unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF - -@font-face - font-family: 'Inconsolata' - src: url('../fonts/inconsolata-bold.eot') - src: url('../fonts/inconsolata-bold.eot?#iefix') format('embedded-opentype'), url('../fonts/inconsolata-bold.woff2') format('woff2'), url('../fonts/inconsolata-bold.woff') format('woff'), url('../fonts/inconsolata-bold.ttf') format('truetype'), url('../fonts/inconsolata-bold.svg#inconsolatabold') format('svg') - font-weight: 700 - font-style: normal - unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000 - -// Font families -$ff-regular: Georgia, 'Times New Roman', serif -$ff-display: 'Karla', Arial, sans-serif -$ff-code: 'Inconsolata', monospace \ No newline at end of file diff --git a/website/src/sass/_mixins.sass b/website/src/sass/_mixins.sass deleted file mode 100644 index b4f5ea8cd..000000000 --- a/website/src/sass/_mixins.sass +++ /dev/null @@ -1,45 +0,0 @@ -@mixin colors($background, $foreground) - @if $background != "inherit" - background-color: #{$background} - @if $foreground != "inherit" - color: #{$foreground} - -@mixin vendor($name, $argument) - -webkit-#{$name}: #{$argument} - -ms-#{$name}: #{$argument} - -moz-#{$name}: #{$argument} - -o-#{$name}: #{$argument} - #{$name}: #{$argument} - -@mixin position($type, $position, $direction, $positionval, $directionval) - position: #{$type} - #{$position}: #{$positionval} - #{$direction}: #{$directionval} - -@mixin spacing($margin, $padding) - @if $margin != "inherit" - margin: #{$margin} - @if $padding != "inherit" - padding: #{$padding} - -@mixin font-size($font-size, $line-height) - @if $font-size != "inherit" - font-size: #{$font-size} - - @if $line-height != "inherit" - line-height: #{$line-height} - -@mixin size($width, $height: $width) - @if $width != "auto" - width: $width - - @if $height != "auto" - height: $height - -@mixin font($font, $text-transform, $text-align) - font: $font - - @if $text-align != "inherit" - text-align: $text-align - @if $text-transform != "inherit" - text-transform: $text-transform \ No newline at end of file diff --git a/website/src/sass/_prism.sass b/website/src/sass/_prism.sass deleted file mode 100644 index 11c6d8fec..000000000 --- a/website/src/sass/_prism.sass +++ /dev/null @@ -1,94 +0,0 @@ -code, -pre - @include font(bold 1rem/1.5em $ff-code, inherit, inherit) - @include vendor(tab-size, 4) - @include vendor(hyphens, none) - direction: ltr - white-space: pre - border: none - word: - spacing: normal - break: normal - -pre - @include spacing(0 0 2em 0, 2em) - @include colors($prism-bg, $prism-text) - overflow: auto - text-shadow: 0 1px rgba(0, 0, 0, 0.3) - -*:not(pre) - > code - @include spacing(0 .25em, 0 .5em) - display: inline-block - border-radius: .2em - - &[class*="language-"] - @include colors($prism-bg, $prism-text) - - &:not([class*="language-"]) - border: 1px solid lighten($c-medium, 10%) - -.declaration code - background: transparent - border: none !important - -.token.comment, -.token.prolog, -.token.doctype, -.token.cdata - color: $prism-comment - -.token.punctuation - color: $prism-punct - -.namespace - opacity: .7 - -.token.property, -.token.tag, -.token.constant, -.token.symbol, -.token.deleted - color: $prism-tag - -.token.boolean, -.token.number - color: $prism-number - -.token.selector, -.token.attr-name, -.token.string, -.token.char, -.token.builtin, -.token.inserted - color: $prism-selector - -.token.operator, -.token.entity, -.token.url, -.language-css .token.string, -.style .token.string, -.token.variable - color: $prism-operator - -.token.atrule, -.token.attr-value, -.token.function - color: $prism-value - -.token.keyword - color: $prism-keyword - -.token.regex, -.token.important - color: $prism-regex - -.token.important, -.token.bold - font-weight: bold - -.token.italic - font-style: italic - -.token.entity - cursor: help \ No newline at end of file diff --git a/website/src/sass/style.sass b/website/src/sass/style.sass deleted file mode 100644 index 1482b08d3..000000000 --- a/website/src/sass/style.sass +++ /dev/null @@ -1,781 +0,0 @@ -// --> ../../site/resources/css/style.css - -// ___ _ -// ___ _ __ __ _ / __|_ _ (_) ___ -// (_-<| '_ \/ _` || (__| || | _ | |/ _ \ -// /__/| .__/\__,_| \___|\_, |(_)|_|\___/ -// |_| |__/ - - -@import "mixins" -@import "fonts" -@import "colors" -@import "prism" - -// Variables and placeholders -$content: 950px -$border: 2px -$transition: all .4s ease-in-out - -%hide-text - text-indent: 100% - white-space: nowrap - overflow: hidden - -%flex - display: -webkit-box-flex - display: -webkit-flex - display: flex - -%clearfix - zoom: 1 - - &:before, - &:after - content: "" - display: table - - &:after - clear: both - -%divider - &:before - @include size(50%, auto) - @include spacing(1.5em 25% 3em 25%, inherit) - content: "" - display: block - border-top: $border solid - -// Reset - -* - @include spacing(0, 0) - @include vendor(box-sizing, border-box) - outline: 0 - -webkit-font-smoothing: antialiased - -html - @include size(100%) - //overflow: hidden - -header, -main, -section, -article, -footer, -nav, -aside, -details, -summary - display: block - -body - @include size(100%) - @include font(normal 22px/1.6em $ff-regular, inherit, inherit) - overflow: auto - -// Header - -body > header - @include size(100%, 10em) - @include spacing(inherit, 3em 0 0 0) - text-align: center - -h1 - @extend %hide-text - @include size(5em, 1.59em) - @include spacing(0 auto, inherit) - display: block - position: relative - background: - image: url(data:image/png;base64,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) - image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0ibG9nby5zdmdfMV8iIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMjIwIDcwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAyMjAgNzAiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxnIGlkPSJsb2dvLnN2ZyI+PGc+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGZpbGw9IiNGRkZGRkYiIGQ9Ik0zMC4yLDMzYy0xLjgtMS00LjItMS44LTcuMS0yLjVjLTIuNC0wLjYtNC4zLTEuMS01LjctMS41Yy0xLjQtMC40LTIuNS0wLjktMy4zLTEuNmMtMC44LTAuNi0xLjItMS40LTEuMi0yLjRjMC0xLjEsMC42LTIsMS43LTIuN2MxLjEtMC43LDIuNS0xLjEsNC4yLTEuMWMxLjYsMCwyLjksMC4zLDMuOSwwLjhzMS44LDEuMywyLjUsMi4yYzAuOSwxLjEsMS42LDEuOSwyLjMsMi41YzAuNywwLjUsMS41LDAuOCwyLjQsMC44YzEuMywwLDIuMy0wLjMsMy4xLTFjMC43LTAuNywxLjEtMS42LDEuMS0yLjZjMC0xLTAuMy0yLTEtM2MtMC43LTEtMS42LTItMi45LTIuOGMtMS4zLTAuOC0yLjktMS41LTQuOC0yYy0xLjktMC41LTQuMS0wLjgtNi41LTAuOGMtMy4xLDAtNS43LDAuNS03LjksMS41Yy0yLjIsMS0zLjgsMi4zLTQuOSw0Yy0xLjEsMS43LTEuNywzLjQtMS43LDUuM2MwLDIuMSwwLjYsMy45LDEuOCw1LjNjMS4yLDEuNCwyLjgsMi42LDQuOCwzLjVjMiwwLjksNC42LDEuNyw3LjgsMi41YzIuOCwwLjcsNC45LDEuNCw2LjEsMi4xYzEuMiwwLjgsMS45LDEuOSwxLjksMy42YzAsMS4xLTAuNiwyLTEuOCwyLjhjLTEuMiwwLjgtMi43LDEuMi00LjYsMS4yYy0yLjMsMC00LjEtMC40LTUuNC0xLjJjLTEuMy0wLjgtMi41LTIuMS0zLjQtMy43Yy0wLjUtMC45LTEtMS41LTEuNS0yYy0wLjUtMC41LTEuMy0wLjctMi4zLTAuN2MtMS4xLDAtMiwwLjQtMi44LDEuMWMtMC43LDAuNy0xLjEsMS42LTEuMSwyLjZjMCwxLjUsMC42LDMuMSwxLjcsNC42YzEuMSwxLjUsMi45LDIuOCw1LjMsMy44czUuMywxLjUsOC42LDEuNWMzLjUsMCw2LjUtMC41LDguOS0xLjRjMi40LTAuOSw0LjMtMi4zLDUuNS00LjJjMS4zLTEuOCwxLjktNCwxLjktNi42YzAtMS43LTAuNS0zLjItMS40LTQuNkMzMy40LDM1LjIsMzIuMSwzNCwzMC4yLDMzeiBNNzIuMSwxNy42Yy0yLjQtMS41LTUuMS0yLjItNy45LTIuMmMtMi40LDAtNC41LDAuNS02LjQsMS41Yy0xLjksMS0zLjcsMi42LTUuNSw0Ljh2LTEuMWMwLTEuNy0wLjQtMy0xLjItMy45Yy0wLjgtMC45LTEuOS0xLjMtMy4yLTEuM2MtMS4zLDAtMi40LDAuNC0zLjIsMS4zYy0wLjgsMC45LTEuMiwyLjItMS4yLDR2NDAuMmMwLDIsMC4zLDMuNiwwLjksNC42YzAuNiwxLjEsMS43LDEuNiwzLjUsMS42YzMsMCw0LjUtMiw0LjUtNi4xdi0xNGMxLjYsMi4xLDMuNCwzLjYsNS4yLDQuN2MxLjgsMS4xLDQsMS42LDYuNywxLjZjMi4yLDAsNC4zLTAuNCw2LjItMS4zYzEuOS0wLjksMy42LTIuMSw1LTMuOGMxLjQtMS42LDIuNS0zLjYsMy4zLTZjMC44LTIuNCwxLjItNSwxLjItNy45YzAtMy45LTAuNy03LjMtMi4xLTEwLjFDNzYuNCwyMS4zLDc0LjUsMTkuMSw3Mi4xLDE3LjZ6IE02OS4zLDQwLjZjLTAuOCwxLjgtMS45LDMuMS0zLjIsNGMtMS4zLDAuOS0yLjgsMS4zLTQuMywxLjNjLTIuNiwwLTQuOC0xLTYuNS0zLjFjLTEuOC0yLjEtMi42LTQuOS0yLjYtOC42YzAtMy45LDAuOS02LjksMi42LTguOWMxLjgtMiwzLjktMyw2LjUtM2MxLjYsMCwzLjEsMC41LDQuNCwxLjRjMS4zLDAuOSwyLjQsMi4zLDMuMSw0LjFjMC44LDEuOCwxLjEsMy45LDEuMSw2LjNDNzAuNSwzNi43LDcwLjEsMzguOCw2OS4zLDQwLjZ6IE0xMTkuNCw0MC4zYzAtMS45LDAtMy42LDAuMS01LjFjMC0xLjUsMC0zLjQsMC01LjZjMC0zLjUtMC41LTYuMi0xLjUtOC4zYy0xLTIuMS0yLjYtMy42LTUtNC42Yy0yLjMtMS01LjYtMS40LTkuNy0xLjRjLTMuNywwLTYuNywwLjUtOS4yLDEuNWMtMi41LDEtNC4zLDIuMy01LjQsMy44Yy0xLjIsMS41LTEuNywzLjEtMS43LDQuOGMwLDEsMC40LDEuOSwxLjEsMi42YzAuOCwwLjcsMS43LDEsMi43LDFjMS4yLDAsMS45LTAuMiwyLjMtMC42YzAuNC0wLjQsMS0xLjMsMS44LTIuNmMwLjktMS4zLDEuOS0yLjMsMy4xLTNjMS4yLTAuNywzLTEsNS4zLTFjMi44LDAsNC42LDAuNiw1LjQsMS43YzAuOSwxLjEsMS40LDMsMS41LDUuNGMtMiwwLjYtMy44LDEuMS01LjQsMS40Yy0xLjcsMC40LTMuNywwLjgtNiwxLjNjLTIuMywwLjUtMy44LDAuOC00LjQsMC45Yy0yLjgsMC42LTUsMS44LTYuNywzLjZjLTEuNiwxLjgtMi40LDQtMi40LDYuNWMwLDEuOSwwLjUsMy42LDEuNSw1LjNjMSwxLjYsMi40LDIuOSw0LjIsMy44YzEuOCwwLjksMy45LDEuNCw2LjMsMS40YzIuNiwwLDUtMC40LDcuMS0xLjNjMi4xLTAuOSw0LjMtMi4yLDYuNS0zLjljMSwxLjcsMiwzLDMsMy45YzAuOSwwLjksMS45LDEuMywyLjgsMS4zYzEuMSwwLDIuMi0wLjQsMy4xLTEuMmMwLjktMC44LDEuMy0xLjcsMS4zLTIuNmMwLTAuNS0wLjMtMS44LTAuOS0zLjdDMTE5LjcsNDMuOSwxMTkuNCw0MiwxMTkuNCw0MC4zeiBNMTEwLjMsMzUuOGMwLDMuMi0wLjQsNS41LTEuMyw3Yy0wLjcsMS4zLTEuOSwyLjMtMy40LDMuMWMtMS42LDAuOC0zLjMsMS4yLTUuMSwxLjJjLTEuNywwLTMuMS0wLjUtNC4yLTEuNWMtMS4xLTEtMS42LTIuMi0xLjYtMy42YzAtMS40LDAuNS0yLjQsMS40LTMuMmMwLjktMC44LDEuOS0xLjMsMi45LTEuNWMxLTAuMywyLjgtMC43LDUuNC0xLjJjMi42LTAuNiw0LjYtMS4xLDYtMS42VjM1Ljh6IE0xNjcuOCwzMi4yYy0xLjQsMC0yLjQsMC40LTMuMSwxLjJjLTAuNiwwLjgtMS4yLDEuOS0xLjYsMy4yYy0xLDIuOC0yLjUsNC45LTQuNiw2LjRjLTIsMS40LTQuNSwyLjItNy40LDIuMmMtMi43LDAtNS0wLjYtNy0xLjljLTItMS4zLTMuNS0zLjItNC42LTUuOGMtMS4xLTIuNi0xLjYtNS44LTEuNi05LjdjMC01LjgsMS4yLTEwLjMsMy43LTEzLjVjMi41LTMuMiw1LjgtNC43LDkuOS00LjdjMi42LDAsNC44LDAuNiw2LjYsMS44YzEuOCwxLjIsMy4zLDMuMSw0LjcsNS42YzAuOCwxLjUsMS41LDIuNiwyLjIsMy4yYzAuNiwwLjYsMS42LDAuOSwyLjksMC45YzEuMiwwLDIuMS0wLjQsMy0xLjNzMS4yLTEuOSwxLjItMy4xYzAtMi4xLTAuOC00LjQtMi41LTYuN2MtMS43LTIuNC00LjEtNC40LTcuMy02Yy0zLjItMS42LTYuOC0yLjQtMTAuOC0yLjRjLTMuMywwLTYuNCwwLjYtOS40LDEuOGMtMi45LDEuMi01LjUsMi45LTcuNyw1LjJjLTIuMiwyLjMtMy45LDUtNSw4LjJjLTEuMiwzLjItMS44LDYuOC0xLjgsMTAuOGMwLDIuNSwwLjIsNC44LDAuNyw3YzAuNSwyLjIsMS4yLDQuMywyLjEsNi4yYzAuOSwxLjksMi4xLDMuNywzLjQsNS4zYzEuNSwxLjcsMy4xLDMuMSw0LjksNC4yYzEuOCwxLjEsMy43LDEuOCw1LjksMi4zYzIuMiwwLjUsNC42LDAuOCw3LjIsMC44YzMuNSwwLDYuNS0wLjYsOS4xLTEuN2MyLjYtMS4xLDQuOC0yLjYsNi40LTQuM2MxLjctMS44LDIuOS0zLjYsMy43LTUuNWMwLjgtMS45LDEuMi0zLjYsMS4yLTUuMmMwLTEuMy0wLjQtMi4zLTEuMy0zLjFDMTcwLDMyLjYsMTY5LDMyLjIsMTY3LjgsMzIuMnogTTIxMS4yLDE3LjRjLTAuNC0wLjYtMC45LTEuMS0xLjUtMS41Yy0wLjYtMC40LTEuMy0wLjYtMi0wLjZjLTEsMC0xLjcsMC4yLTIuMywwLjVjLTAuNSwwLjMtMSwxLTEuNSwyYy0wLjUsMS0xLDIuMy0xLjYsNC4xbC03LjUsMjEuM2wtNy45LTIyLjljLTAuNS0xLjYtMS4xLTIuOC0xLjgtMy43cy0xLjctMS4zLTMtMS4zYy0wLjgsMC0xLjUsMC4yLTIuMiwwLjZzLTEuMywxLTEuNywxLjZjLTAuNCwwLjctMC42LDEuNC0wLjYsMi4yYzAsMC44LDAuNCwyLDEuMSwzLjZsMTEuNSwyOC45bC0wLjksMi4xYy0wLjYsMS41LTEuMiwyLjctMS43LDMuNWMtMC41LDAuOC0xLDEuMy0xLjcsMS43Yy0wLjYsMC4zLTEuNSwwLjUtMi41LDAuNWMtMC40LDAtMC45LTAuMS0xLjUtMC4yYy0wLjUtMC4xLTEtMC4yLTEuNS0wLjJjLTEuMywwLTIuMiwwLjMtMi45LDAuOXMtMSwxLjQtMSwyLjVjMCwxLjYsMC43LDIuNiwyLDMuMmMxLjQsMC42LDMuNCwwLjksNi4xLDAuOWMyLjgsMCw1LTAuNCw2LjctMS4zYzEuNi0wLjksMy0yLjEsNC0zLjdjMS0xLjYsMi0zLjgsMy4xLTYuNmwxMi4xLTMxLjhjMC4zLTAuOCwwLjUtMS42LDAuOC0yLjRjMC4yLTAuOCwwLjQtMS40LDAuNC0xLjhDMjExLjcsMTguNywyMTEuNiwxOC4xLDIxMS4yLDE3LjR6Ii8+PC9nPjwvZz48L3N2Zz4=), none - color: transparent - position: top left - repeat: no-repeat - size: 100% 100% - z-index: 2 - -.slogan - @include font(normal 1em/1em $ff-display, uppercase, center) - @include spacing(0, .5em 0 0 0) - @include colors(inherit, $c-bg) - display: inline-block - position: relative - z-index: 2 - -.copyright - @include font-size(.75em, inherit) - -// Footer - -body > footer - @include spacing(3em 0 0 0, 2em 5em) - text-align: center - - a .call-to-action - @include spacing(inherit, 0 0 .1em 0) - border-bottom: $border solid $c-bg - -// Main - -main - @include size($content, auto) - @include spacing(3.4em auto, inherit) - overflow: - x: hidden - y: auto - -article > header - @include spacing(0 0 1.8em 0, inherit) - -p - @include spacing(0 0 1.25em 0, 0) - - summary & - clear: both - margin-top: 1em - -// Details & Summary - -%details-icon - @include font(bold 1.25em/1.15em $ff-display, inherit, center) - @include size(1.15em) - @include spacing(0 .5em 0 0, inherit) - @include colors(inherit, $c-bg) - display: block - float: left - -details - @include spacing(2em 0 1em 0, 0 0 0 2em) - - &[data-open="false"] > :not(summary) - position: fixed - visibility: hidden - - &[data-open="true"] - position: static - visibility: visible - - &[open] > summary:before, - &[data-open="true"] > summary:before - @extend %details-icon - content: "-" - - & > summary:before, - &[data-open="false"] > summary:before - @extend %details-icon - content: "+" - - & > summary - @include spacing(0 0 .5em -2em, inherit) - cursor: pointer - - &::-webkit-details-marker - display: none - -article > details > summary, -section > details > summary - @include font-size(1.25rem, inherit) - -article > details, -section > details - @include font-size(1.1rem, 1.7rem) - @include spacing(.75em 0 1em 2.5em, 0) - -article > details > pre[class*="language-"] - @include spacing(1em 0 2em 0, inherit) - -// Headlines - -h2 - @include font(bold 2.09em/1.2em $ff-display, inherit, inherit) - @include spacing(0 0 .35em, inherit) - letter-spacing: -1px - -h3 - @include font(bold 1.36em/1em $ff-display, inherit, inherit) - @include spacing(0 0 1.1em 0, .8em 0 0 0) - letter-spacing: -1px - - .landing-page & - @include spacing(inherit, 1.8em 0 0 0) - -h4 - @include font(bold 1.18em/1em $ff-display, inherit, inherit) - @include spacing(0 0 1.3em 0, .9em 0 0 0) - letter-spacing: -1px - - details & - @include font-size(1.18rem, inherit) - @include spacing(0 1em .25em 0, 1.25em 0 0 0) - - details summary & - display: inline - -h5 - @include font(bold .9em/1em $ff-display, uppercase, inherit) - @include spacing(0, 1em 0 .5em 0) - -// Links - -a - color: inherit - text-decoration: none - - article p &:not(.button), - article ul &, - .box &:not(.button), - .intro p & - border-bottom: $border solid - - article p &:hover:not(.button), - article ul &:hover, - .box &:not(.button):hover, - .intro p &:hover - border-bottom-color: $c-text !important - - .subhead & - @include colors(inherit, $c-text) - font-weight: bold - text-decoration: none - - article h2 &, - article h3 &, - article h4 &, - &.permalink - @include spacing(inherit, 3.25rem 0 0 0) - display: inline-block - color: inherit - - &:after - @include spacing(inherit, 0 0 0 .5em) - content: "\260D" - opacity: 0 - - &:hover:after - @include vendor(transition, $transition) - opacity: 1 - - &.reference - border: none - -// Navigation - -body > nav - @include position(fixed, top, left, 0, 0) - @include font(normal .7em/1em $ff-display, inherit, right) - @include spacing(inherit, .75em 2em .75em 0) - @include size(100%, auto) - z-index: 1 - - li - @include spacing(inherit, 0 .4em) - display: inline - - &.active - font-weight: bold - - a - @include colors(inherit, $c-bg) - text: - transform: uppercase - decoration: none - -.intro nav ul - list-style-type: none - text-align: center - - li - display: inline - -// Content elements - -.intro - @include spacing(0 0 1.5em 0, inherit) - - p - @include font(normal 1.3em/1.5em $ff-display, inherit, inherit) - @include spacing(0 0 1.7em 0, inherit) - -article - - .subhead - @include font(normal .825em/1em $ff-display, uppercase, inherit) - - img - @include size(100%, auto) - border: $border solid $c-light - - &.title - border: none - - iframe - @include size(100%, auto) - border: none - - ol - @include spacing(inherit, .7em 0 1.5em 1em) - counter-reset: counter - list-style-type: none - - li - @include spacing(0 0 1.2em 0, 0) - - &:before - @include font(bold 1.2em/1em $ff-display, inherit, inherit) - @include colors(inherit, $c-text) - @include spacing(inherit, 0 .5em 0 0) - content: counter(counter) "." - counter-increment: counter - - ul - @include spacing(0 0 1.5em .7em, inherit) - list-style-type: none - - li - @include spacing(0 0 .5em 1em, 0) - - &:before - @include font-size(2.5em, 0) - @include spacing(0 0 0 -.6em, 0 .25em 0 0) - @include colors(inherit, $c-text) - content: "\25aa" - vertical-align: middle - - &.pro:before - color: $c-good !important - - &.con:before - color: $c-bad !important - - &.neutral:before - color: $c-lowlight !important - - details ul li, - details ol li - @include font-size(inherit, 1.75em) - - table - @include spacing(0 0 1.7em 0, 1.2em) - @include colors($c-light, inherit) - @include size(100%, auto) - table-layout: fixed - border-spacing: 0 - - thead - @include font(normal .9em/1em $ff-display, uppercase, left) - - th - @include spacing(inherit, 0 0 1em 0) - border-bottom: $border solid $c-medium - - td - @include font-size(.85em, 0) - @include spacing(0, 1.35em 0) - - &.center th, - &.center td - text-align: center - - .caption - @include font(.75em $ff-display, inherit, inherit) - @include spacing(0 0 1.5em 0, 0 0 1.5em 0) - @include colors(inherit, darken($c-medium, 20%)) - - .example - @include font(italic normal 1.25em/1.5em $ff-display, inherit, inherit) - text-indent: 2.5em - - blockquote - &:not(.pull-quote) - @include spacing(0, 1em 10% 2.5em 5%) - - p - border-left: $border * 2 solid - - &:before, - &:after - @include font(bold 1.25em/1.2em $ff-display, inherit, inherit) - - &:before - @include spacing(inherit, 0 .25em 0 0) - content: "\201c" - - &:after - @include spacing(inherit, 0 0 0 .25em) - content: "\201d" - - p - @include font-size(.8em, inherit) - @include spacing(0 0 1em 0, 0 0 0 5%) - - cite - @include font(normal bold 1rem/1.5rem $ff-display, uppercase, right) - display: block - - &.pull-quote - @include font(bold 2em/1.2em $ff-display, inherit, inherit) - @include spacing(1.5em 5% 1em 5%, inherit) - - p - @extend %flex - flex-flow: row nowrap - -webkit-flex-flow: row nowrap - -webkit-box-flow: row nowrap - - &:before - @include font-size(2.5em, inherit) - @include spacing(0, .1em .1em 0 0) - content: "\201c" - - .share - @include font(bold .5em $ff-display, uppercase, inherit) - @include spacing(inherit, 0 0 0 1em) - @include vendor(transition, $transition) - border: none - opacity: .25 - - &:hover .share - @include vendor(transition, $transition) - opacity: 1 - - sup a - @include font-size(.8em, inherit) - @include colors(inherit, $c-text) - text-decoration: none - border: none !important - - .bib-item - @include font(normal .9em/1.25em $ff-display, inherit, inherit) - @include spacing(inherit, .5em 0 .5em 1.75em) - text-indent: -1.75em - display: block - - &.inline - display: inline - - .meta - @include spacing(inherit, 1.5em 0) - - .discuss - float: right - text-align: right - - .twitter-tweet + p - margin-top: 2em - -// Declarations - -.declaration - @include spacing(inherit, .1em .5em) - display: inline - - article > details > summary > & - border-bottom: #{$border * 2} solid - - .label, - .parameters - @include font(italic bold .9em/1em $ff-display, inherit, inherit) - @include spacing(inherit, 0 .75em 0 0) - - .parameters - @include colors(inherit, $c-text) - -// Comparisons - -.columnar - @extend %flex - - .col - @include size(50%, auto) - @include spacing(0 .5em, 0) - - &:first-child - margin-left: 0 - -// Boxes - -.box - @extend %clearfix - @include spacing(0 0 1em 0, inherit) - font-family: $ff-display - - &.infobox - @include font-size(.8em, 1.75em) - @include spacing(2em 0, 1.25em) - border: #{$border * 2} solid - - &.license - $licenses: 3 - $spacing: .5em - @extend %flex - flex-flow: row wrap - -webkit-flex-flow: row wrap - -webkit-box-flow: row wrap - - .item - @include size(100%/$licenses, auto) - @include font-size(.9em, inherit) - @include spacing($spacing/2 $spacing, 2 * $spacing) - text-align: center - flex: 1 1 275px - -webkit-flex: 1 1 275px - -webkit-box-flex: 1 1 275px - border: - width: $border - style: solid - radius: $spacing - - &:first-child - margin-left: 0 - - h5 - @include spacing(1.75em 0 0 0, 0) - text-transform: none - - span - display: block - - .focus - @include font-size(1.5em, inherit) - - .button - @include spacing(2em 10% .1em 10%, inherit) - display: block - clear: both - - & + span - @include font-size(.75em, inherit) - -// Blog - -.blogs - $spacing: 3em - - @extend %flex - @include spacing(2em 0 0 0, 0) - flex-flow: row wrap - -webkit-flex-flow: row wrap - -webkit-box-flow: row wrap - - article - @include font-size(.75em, 1.75em) - @include spacing(0 $spacing $spacing 0, 0) - flex: 1 0 calc(50% - #{$spacing/2}) - -webkit-flex: 1 0 calc(50% - #{$spacing/2}) - -webkit-box-flex: 1 0 calc(50% - #{$spacing/2}) - min-width: 300px - max-width: 100% - - &:nth-child(2n+2) - margin-right: 0 - - .readmore - border: none - - h2 - @include font-size(1.75em, 1.15em) - max-width: 90% - - a - @include spacing(0, 0) - - .readmore - flex: 0 0 100% - -webkit-flex: 0 0 100% - -webkit-box-flex: 0 0 100% - text-align: center - -.profile - @extend %clearfix - - img - @include size(6.5em) - @include spacing(0 1em 1em 0, inherit) - shape-outside: circle() - border-radius: 50% - float: left - - .social - @include font-size(.75em, inherit) - display: block - - a - @include spacing(0 .3em 0 .2em, inherit) - - article & - @include spacing(3.5em 0 0 0, inherit) - - img - border: none - - p - font-size: .9em - - .social - display: inline - -// Buttons - -.button - @include font(normal .77em/1em $ff-display, uppercase, inherit) - @include colors($c-text, $c-bg) - @include spacing(0 0 .35em 0, .9em) - display: inline-block - text-decoration: none - - &:hover - @include vendor(transition, $transition) - opacity: .8 !important - - .button-caption - @include font-size(.75em, .75em) - text-transform: none - -@each $button, $color in (twitter, $c-twitter), (hn, $c-hn), (reddit, $c-reddit) - .button-#{$button} - @include colors($color !important, inherit) - -// Colour scheme - -@each $page, $color in (home, $c-page), (docs, $c-page), (license, $c-page), (blog, $c-blog) - ##{$page} - & > header, - & > footer, - & > nav, - .button, - %details-icon - background: $color - - .subhead a, - blockquote a, - a:after, - .reference, - article ol li:before, - article ul li:before, - .declaration .label, - .license h4, - .note, - .readmore, - blockquote p:before, - blockquote p:after - color: $color - - .declaration, - article p a, - article li a, - .intro p a, - .infobox, - .license .item, - .license .item a, - %divider:after, - blockquote p - border-color: $color - - .declaration - background: rgba($color, .1) - -// Displacy - -.displacy - @include spacing(0 0 1em 0, inherit) - position: relative - overflow: scroll - -webkit-overflow-scrolling: touch - - &:after - content: "" - @include size(3em, .75em) - @include position(absolute, top, left, .5em, .5em) - @include vendor(transition, $transition) - display: inline-block - background: - image: url(data:image/png;base64,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) - position: top left - repeat: no-repeat - size: 100% - opacity: .25 - - iframe - @include spacing(0, 1.5em 0 0 0) - border: $border solid $c-light - - &.column - @include size(44%, auto) - - &:first-child - margin-right: 2% - - & + a.view-displacy - @extend .button - @include position(absolute, top, right, .5em, .5em) - @include font-size(.6em, inherit) - @include vendor(transition, $transition) - font-weight: bold - opacity: .25 - - &:hover iframe + a.view-displacy, - &:hover:after - @include vendor(transition, $transition) - opacity: 1 - -#displacy - overflow: visible !important - - .words .word:after, - .arrows .arrow:before - @include font(bold .6em/1em $ff-display, uppercase, inherit) - @include spacing(inherit, .25em 0 0 0) - - .words .word span - @include font-size(inherit, 1.25em) - @include spacing(0, 1em 0 0 0) - display: inline-block - - @each $class, $color in (bad, $c-bad), (good, $c-good), (highlight, $c-highlight), (lowlight, $c-lowlight) - .arrows .arrow.#{$class} - &:before - border-color: $color - - &:after - border-top-color: $color - - .words .word.#{$class} span - @include colors(inherit, $color) - - .arrows .arrow.light:before - border-style: dashed !important - -// Media queries - -@media screen and (max-width: 950px) - main - @include size(95%, auto) - -@media screen and (max-width: 700px) - body - @include font-size(1.2em, inherit) - - .discuss - display: inline - float: none - text-align: left !important - -@media screen and (max-width: 480px) - .intro p - @include font-size(1em, 1.5em) - - .content - @include font-size(1.25em, 2em) - - article table - @include font-size(.65em, 1.25em) - table-layout: auto - - td - white-space: wrap - - h1, - .slogan - z-index: 1 \ No newline at end of file