From c1e108a33764362cb3e2c75555dafb49a6bd4039 Mon Sep 17 00:00:00 2001 From: Maike Date: Sun, 28 Oct 2018 19:48:15 -0300 Subject: [PATCH 1/2] [UX] Improve user experience by making possible to click the the entire box (menu item), not only the text --- docs/scss/style.scss | 3 +- docs/style.css | 908 ++++++++++++++++++++++++++++++++++++++++++- 2 files changed, 909 insertions(+), 2 deletions(-) diff --git a/docs/scss/style.scss b/docs/scss/style.scss index 85c94873b..306f11e37 100644 --- a/docs/scss/style.scss +++ b/docs/scss/style.scss @@ -799,7 +799,6 @@ nav { margin: calc(0.5 * var(#{$universal-margin-var})); margin-left: var(#{$universal-margin-var}); margin-bottom: 0; - padding: calc(2 * var(#{$universal-padding-var})) calc(1.5 * var(#{$universal-padding-var})); border-left: $__1px solid var(#{$nav-link-border-color-var}); &:hover { text-decoration: none; @@ -810,6 +809,8 @@ nav { } } a { + display: block; + padding: calc(2 * var(#{$universal-padding-var})) calc(1.5 * var(#{$universal-padding-var})); &:link, &:visited { color: var(#{$nav-link-fore-color-var}); } diff --git a/docs/style.css b/docs/style.css index 35909ef78..e063c6372 100644 --- a/docs/style.css +++ b/docs/style.css @@ -1 +1,907 @@ -@font-face{font-family:'Roboto';font-style:normal;font-weight:300;src:local("Roboto Light"),local("Roboto-Light"),url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmSU5fBBc4.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;font-display:swap}@font-face{font-family:'Roboto';font-style:italic;font-weight:300;src:local("Roboto Light Italic"),local("Roboto-LightItalic"),url(https://fonts.gstatic.com/s/roboto/v18/KFOjCnqEu92Fr1Mu51TjASc6CsQ.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;font-display:swap}@font-face{font-family:'Roboto';font-style:normal;font-weight:500;src:local("Roboto Medium"),local("Roboto-Medium"),url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmEU9fBBc4.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;font-display:swap}@font-face{font-family:'Roboto Mono';font-style:normal;font-weight:300;src:local("Roboto Mono Light"),local("RobotoMono-Light"),url(https://fonts.gstatic.com/s/robotomono/v5/L0xkDF4xlVMF-BfR8bXMIjDgiWqxf78.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;font-display:swap}@font-face{font-family:'Roboto Mono';font-style:italic;font-weight:300;src:local("Roboto Mono Light Italic"),local("RobotoMono-LightItalic"),url(https://fonts.gstatic.com/s/robotomono/v5/L0xmDF4xlVMF-BfR8bXMIjhOk9a0T72jBg.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;font-display:swap}@font-face{font-family:'Roboto Mono';font-style:normal;font-weight:500;src:local("Roboto Mono Medium"),local("RobotoMono-Medium"),url(https://fonts.gstatic.com/s/robotomono/v5/L0xkDF4xlVMF-BfR8bXMIjC4iGqxf78.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;font-display:swap}:root{--fore-color:#212121;--back-color:#fff;--card-page-back-color:#eee;--border-color:#eee;--universal-margin:.5rem;--universal-padding:.5rem;--universal-border-radius:.125rem;--a-link-color:#0277bd;--a-visited-color:#01579b;--code-fore-color:#8e24aa;--code-back-color:#f0f0f0;--code-selected-color:#37474f;--pre-fore-color:#e57373;--pre-back-color:#263238;--token-color-a:#7f99a5;--token-color-b:#bdbdbd;--token-color-c:#64b5f6;--token-color-d:#ff8f00;--token-color-e:#c5e1a5;--token-color-f:#ce93d8;--token-color-g:#26c6da;--token-color-h:#e57373;--collapse-color:#607d8b;--copy-button-color:#1e88e5;--copy-button-hover-color:#2196f3;--scrolltop-button-color:#26a69a;--scrolltop-button-hover-color:#4db6ac;--beginner-color:#7cb342;--intermediate-color:#ffb300;--advanced-color:#e53935;--header-fore-color:#fff;--header-back-color:#202124;--nav-fore-color:#f0f0f0;--nav-back-color:#202124;--footer-fore-color:#616161;--footer-back-color:#e0e0e0;--nav-link-fore-color:#e0e0e0;--nav-link-border-color:#455a64;--nav-link-hover-color:#2b2c30;--search-fore-color:#fafafa;--search-back-color:#111;--search-border-color:#9e9e9e;--search-hover-border-color:#26a69a}html{font-size:16px;scroll-behavior:smooth}html,*{font-family:Roboto, Helvetica, sans-serif;line-height:1.5;-webkit-text-size-adjust:100%}*{font-size:1rem;font-weight:300}a,b,del,em,i,ins,q,span,strong,u{font-size:1em}body{margin:0;color:var(--fore-color);background:var(--back-color);overflow-x:hidden}body.card-page{background:var(--card-page-back-color)}details{display:block}summary{display:list-item}abbr[title]{border-bottom:none;text-decoration:underline dotted}input{overflow:visible}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-cancel-button,[type="search"]::-webkit-search-decoration{-webkit-appearance:none}img{max-width:100%;height:auto}h1,h2,h3,h4,h5,h6{line-height:1.2;margin:calc(1.5 * var(--universal-margin)) var(--universal-margin)}h1{font-size:6rem}h2{font-size:3.75rem}h3{font-size:3rem}h4{font-size:2.125rem}h5{font-size:1.5rem}h6{font-size:1.25rem}p{margin:var(--universal-margin)}ol,ul{margin:var(--universal-margin);padding-left:calc(2 * var(--universal-margin))}b,strong{font-weight:500}hr{box-sizing:content-box;border:0;line-height:1.25em;margin:var(--universal-margin);height:.0625rem;background:linear-gradient(to right, transparent, var(--border-color) 20%, var(--border-color) 80%, transparent)}code,kbd,pre{font-size:.875em}code,kbd,pre,code *,pre *,kbd *,code[class*="language-"],pre[class*="language-"]{font-family:Roboto Mono, Menlo, Consolas, monospace}sup,sub,code,kbd{line-height:0;position:relative;vertical-align:baseline}code{background:var(--code-back-color);color:var(--code-fore-color);padding:calc(var(--universal-padding) / 4) calc(var(--universal-padding) / 2);border-radius:var(--universal-border-radius)}pre{overflow:auto;background:var(--pre-back-color);color:var(--pre-fore-color);padding:calc(1.5 * var(--universal-padding));margin:var(--universal-margin);border:0}code[class*="language-"],pre[class*="language-"]{color:var(--pre-fore-color);text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.8;-moz-tab-size:2;-o-tab-size:2;tab-size:2;-webkit-hypens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*="language-"]{padding:calc(2 * var(--universal-padding));overflow:auto;margin:var(--universal-margin) 0;white-space:pre-wrap}pre[class*="language-"]::-moz-selection,pre[class*="language-"] ::-moz-selection,code[class*="language-"]::-moz-selection,code[class*="language-"] ::-moz-selection{background:var(--code-selected-color)}pre[class*="language-"]::selection,pre[class*="language-"] ::selection,code[class*="language-"]::selection,code[class*="language-"] ::selection{background:var(--code-selected-color)}:not(pre)>code[class*="language-"]{padding:.1em;border-radius:.3em;white-space:normal}.namespace{opacity:.7}.token.comment,.token.prolog,.token.doctype,.token.cdata{color:var(--token-color-a)}.token.punctuation{color:var(--token-color-b)}.token.property,.token.tag,.token.boolean,.token.constant,.token.symbol,.token.deleted,.token.function{color:var(--token-color-c)}.token.number,.token.class-name{color:var(--token-color-d)}.token.selector,.token.attr-name,.token.string,.token.char,.token.builtin,.token.inserted{color:var(--token-color-e)}.token.operator,.token.entity,.token.url,.token.atrule,.token.attr-value,.token.keyword,.token.interpolation-punctuation{color:var(--token-color-f)}.token.regex{color:var(--token-color-g)}.token.important,.token.variable{color:var(--token-color-h)}.token.italic,.token.comment{font-style:italic}.token.important,.token.bold{font-weight:500}.token.entity{cursor:help}.language-css .token.string,.style .token.string{color:var(--token-color-f)}a{text-decoration:none}a:link{color:var(--a-link-color)}a:visited{color:var(--a-visited-color)}a:hover,a:focus{text-decoration:underline}.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width: 500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}.container{display:grid;grid-template-columns:repeat(12, 1fr);grid-column-gap:calc(0.5 * var(--universal-margin))}.container.card-container{position:absolute;padding-top:3.5rem;height:calc(100vh - 3.5rem)}.col-centered{grid-column:span 12;max-width:100%}@media screen and (min-width: 768px){.col-centered{grid-column:2/12}}@media screen and (min-width: 1280px){.col-centered{grid-column:3/11}}.col-quarter{grid-column:span 3}.col-full-width{grid-column:span 12}.flex-row{display:flex;flex:0 1 auto;flex-flow:row wrap}.flex-row .flex-item{flex:0 0 auto;max-width:50%;flex-basis:50%}@media screen and (min-width: 768px){.flex-row .flex-item{max-width:25%;flex-basis:25%}}@media screen and (min-width: 1280px){.flex-row .flex-item{max-width:100%;flex-grow:1;flex-basis:0}}h2.category-name{text-align:center}.card{overflow:hidden;position:relative;margin:var(--universal-margin);border-radius:calc(4 * var(--universal-border-radius));box-shadow:0 2px 2px 0 rgba(0,0,0,0.14),0 3px 1px -2px rgba(0,0,0,0.12),0 1px 5px 0 rgba(0,0,0,0.2)}.card h4{text-align:center;padding-bottom:calc(0.75 * var(--universal-padding));margin-bottom:calc(2 * var(--universal-margin));border-bottom:.0625rem solid var(--border-color);padding-top:5rem;margin-top:-4.25rem}.card.code-card{margin-top:calc(5 * var(--universal-margin));background:var(--pre-back-color)}.card.code-card .section.card-content{background:var(--back-color);padding:calc(1.5 * var(--universal-padding))}.card.code-card .collapse{display:block;font-size:0.75rem;font-family:Roboto Mono, Menlo, Consolas, monospace;text-transform:uppercase;background:var(--pre-back-color);color:var(--collapse-color);padding:calc(1.5 * var(--universal-padding)) calc(1.5 * var(--universal-padding)) calc(2 * var(--universal-padding)) calc(2.25 * var(--universal-padding));margin-left:calc(1.5 * var(--universal-margin));cursor:pointer;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23607D8B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-plus-square'%3E%3Crect x='3' y='3' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='12' y1='8' x2='12' y2='16'%3E%3C/line%3E%3Cline x1='8' y1='12' x2='16' y2='12'%3E%3C/line%3E%3C/svg%3E");background-position:0.25rem 0.9375rem;background-repeat:no-repeat}.card.code-card .collapse+pre.card-examples{margin-left:calc(1.5 * var(--universal-margin));position:absolute;transform:scaleY(0);transform-origin:top;transition:transform 0.3s ease}.card.code-card .collapse.toggled{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23607D8B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-minus-square'%3E%3Crect x='3' y='3' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='8' y1='12' x2='16' y2='12'%3E%3C/line%3E%3C/svg%3E");padding-bottom:calc(0.125 * var(--universal-padding))}.card.code-card .collapse.toggled+pre.card-examples{position:relative;transform:scaleY(1)}.card.code-card pre.section.card-code{position:relative;margin-bottom:0;padding-bottom:0;padding-top:calc(3 * var(--universal-padding))}.card.code-card pre.section.card-examples{margin-top:0;margin-bottom:0;border-radius:0 0 calc(4 * var(--universal-border-radius)) calc(4 * var(--universal-border-radius));padding-top:0}.card.code-card pre.section.card-examples:before{content:'';display:block;position:absolute;top:0;left:0.5625rem;border-left:.0625rem solid var(--collapse-color);height:calc(100% - 18px)}.card.code-card .copy-button-container{position:relative;z-index:2}.card.code-card .copy-button-container .copy-button{background:var(--copy-button-color);box-sizing:border-box;position:absolute;top:-1.75rem;right:0;margin:calc(2 * var(--universal-margin));padding:calc(2.5 * var(--universal-padding));border-radius:50%;border:0;box-shadow:0 2px 2px 0 rgba(0,0,0,0.14),0 3px 1px -2px rgba(0,0,0,0.12),0 1px 5px 0 rgba(0,0,0,0.2);transition:all 0.3s ease;cursor:pointer;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23f0f0f0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-clipboard'%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'%3E%3C/path%3E%3Crect x='8' y='2' width='8' height='4' rx='1' ry='1'%3E%3C/rect%3E%3C/svg%3E");background-position:center center;background-repeat:no-repeat}.card.code-card .copy-button-container .copy-button:hover,.card.code-card .copy-button-container .copy-button:focus{background-color:var(--copy-button-hover-color);box-shadow:0 3px 3px 0 rgba(0,0,0,0.14),0 1px 7px 0 rgba(0,0,0,0.12),0 3px 1px -1px rgba(0,0,0,0.2)}.card.code-card .copy-button-container .copy-button:before{background:var(--back-color);position:absolute;top:-0.25rem;right:-0.25rem;content:'';display:block;box-sizing:border-box;padding:calc(2.5 * var(--universal-padding));border-radius:50%;border:0.25rem solid var(--back-color);z-index:-1}.card.code-card .corner{box-sizing:border-box;position:absolute;top:-0.5rem;right:-2.125rem;width:4rem;height:2rem;padding-top:2rem;transform:rotate(45deg);text-align:center;font-size:0.75rem;font-weight:500;color:var(--back-color);box-shadow:0 2px 2px 0 rgba(0,0,0,0.07),0 3px 1px -2px rgba(0,0,0,0.06),0 1px 5px 0 rgba(0,0,0,0.1)}.card.code-card .corner.beginner{background:var(--beginner-color)}.card.code-card .corner.intermediate{background:var(--intermediate-color)}.card.code-card .corner.advanced{background:var(--advanced-color)}.toast{position:fixed;bottom:calc(var(--universal-margin) * 2);margin-bottom:0;font-size:0.8125rem;left:50%;transform:translate(-50%, -50%);z-index:1111;color:var(--back-color);background:var(--fore-color);border-radius:calc(var(--universal-border-radius) * 16);padding:var(--universal-padding) calc(var(--universal-padding) * 2);box-shadow:0 2px 2px 0 rgba(0,0,0,0.14),0 3px 1px -2px rgba(0,0,0,0.12),0 1px 5px 0 rgba(0,0,0,0.2);transition:all 0.3s ease}header{box-sizing:border-box;overflow:hidden;height:3.5rem;position:fixed;width:110%;top:0;left:-5%;box-shadow:0 2px 4px rgba(0,0,0,0.5);z-index:5;background:var(--header-back-color);transition:top 0.3s ease}header h1.logo{position:relative;top:0;margin-top:0;font-size:1.625rem;text-align:center}header h1 a,header h1 a:link,header h1 a:visited{color:var(--header-fore-color)}header h1 a:hover,header h1 a:focus,header h1 a:link:hover,header h1 a:link:focus,header h1 a:visited:hover,header h1 a:visited:focus{text-decoration:none}header h1 small{display:block;font-size:0.875rem;color:var(--header-back-color);margin-top:0.75rem}header img{height:3.5rem;padding:0.375rem;box-sizing:border-box}header #title{position:relative;top:-1.125rem}@media screen and (max-width: 768px){header #title{display:none}}nav{position:fixed;top:6.5rem;left:-320px;width:320px;transition:left 0.3s ease;z-index:1100;height:calc(100vh - 6.5rem);box-sizing:border-box;display:block;background:var(--nav-back-color);border:0;overflow-y:auto}@media screen and (max-width: 320px){nav{width:100%}}@media screen and (min-width: 768px){nav{width:33vw;left:-33vw}}@media screen and (min-width: 1280px){nav{width:25vw;left:-25vw}}nav.col-nav{box-shadow:0 8px 17px 2px rgba(0,0,0,0.14),0 3px 14px 2px rgba(0,0,0,0.12),0 5px 5px -3px rgba(0,0,0,0.2);left:0}@media screen and (min-width: 768px){nav.col-nav+main.col-centered,nav.col-nav+main.col-centered+footer.col-full-width{grid-column:5/13}}@media screen and (min-width: 1280px){nav.col-nav+main.col-centered{grid-column:4/12;padding-left:8vw}nav.col-nav+main.col-centered+footer.col-full-width{grid-column:4/13}}nav h4{margin:0;padding:calc(2.5 * var(--universal-padding)) calc(2 * var(--universal-padding)) calc(1 * var(--universal-padding)) calc(1 * var(--universal-padding));color:var(--nav-fore-color);font-size:1.5rem}nav h4.collapse{display:block;cursor:pointer;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23f0f0f0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevron-down'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-position:right 0.5rem top 1.5rem;background-repeat:no-repeat}nav h4.collapse+ul{position:absolute;transform:scaleY(0);transform-origin:top;transition:transform 0.3s ease}nav h4.collapse.toggled{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23f0f0f0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevron-up'%3E%3Cpolyline points='18 15 12 9 6 15'%3E%3C/polyline%3E%3C/svg%3E");padding-bottom:calc(0.125 * var(--universal-padding))}nav h4.collapse.toggled+ul{position:relative;transform:scaleY(1)}nav h4+h4{border-top:.0625rem solid var(--nav-link-border-color)}nav h4>a{display:block;line-height:1}nav h4>a:hover,nav h4>a:focus{text-decoration:none}nav ul{width:100%;margin-left:-0.75rem;background:var(--nav-back-color)}nav ul+h4{border-top:.0625rem solid var(--nav-link-border-color)}nav li{margin:calc(0.5 * var(--universal-margin));margin-left:var(--universal-margin);margin-bottom:0;padding:calc(2 * var(--universal-padding)) calc(1.5 * var(--universal-padding));border-left:.0625rem solid var(--nav-link-border-color)}nav li:hover{text-decoration:none;background:var(--nav-link-hover-color)}nav li+li{margin-top:0}nav a:link,nav a:visited{color:var(--nav-link-fore-color)}nav button.social{width:33.333%;margin:0;border:0;border-radius:0;box-sizing:border-box;height:4rem;background-position:center center;background-repeat:no-repeat;cursor:pointer}nav button.social.fb{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='%23f0f0f0' stroke='%23f0f0f0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-facebook'%3E%3Cpath d='M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z'%3E%3C/path%3E%3C/svg%3E");background-color:#1565c0}nav button.social.instagram{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23f0f0f0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-instagram'%3E%3Crect x='2' y='2' width='20' height='20' rx='5' ry='5'%3E%3C/rect%3E%3Cpath d='M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z'%3E%3C/path%3E%3Cline x1='17.5' y1='6.5' x2='17.5' y2='6.5'%3E%3C/line%3E%3C/svg%3E");background-color:#ec407a}nav button.social.twitter{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='%23f0f0f0' stroke='%23f0f0f0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-twitter'%3E%3Cpath d='M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z'%3E%3C/path%3E%3C/svg%3E");background-color:#03a9f4}[type="search"]{z-index:1000;position:fixed;top:3.5rem;height:3rem;left:-320px;width:320px;color:var(--search-fore-color);background:var(--search-back-color);outline:none;box-sizing:border-box;border:none;border-bottom:.0625rem solid var(--search-border-color);margin-bottom:var(--universal-margin);padding:calc(2 * var(--universal-padding)) calc(1.5 * var(--universal-padding)) var(--universal-padding) calc(1.5 * var(--universal-padding));transition:all 0.3s ease}@media screen and (max-width: 320px){[type="search"]{width:100%}}@media screen and (min-width: 768px){[type="search"]{width:33vw;left:-33vw}}@media screen and (min-width: 1280px){[type="search"]{width:25vw;left:-25vw}}[type="search"].col-nav{box-shadow:0 8px 17px 2px rgba(0,0,0,0.14),0 3px 14px 2px rgba(0,0,0,0.12),0 5px 5px -3px rgba(0,0,0,0.2);left:0}@media screen and (min-width: 768px){[type="search"].col-nav+main.col-centered,[type="search"].col-nav+main.col-centered+footer.col-full-width{grid-column:5/13}}@media screen and (min-width: 1280px){[type="search"].col-nav+main.col-centered{grid-column:4/12;padding-left:8vw}[type="search"].col-nav+main.col-centered+footer.col-full-width{grid-column:4/13}}[type="search"]:hover,[type="search"]:focus{border-bottom:.0625rem solid var(--search-hover-border-color)}[type="search"]:focus{box-shadow:0 8px 17px 2px rgba(0,0,0,0.14),0 3px 14px 2px rgba(0,0,0,0.12),0 5px 5px -3px rgba(0,0,0,0.2),inset 0 -.0625rem 0 0 var(--search-hover-border-color)}.menu-button{position:fixed;top:0;left:0;z-index:1000;box-sizing:border-box;outline:none;height:3.5rem;width:3.5rem;border:0;background:transparent;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fafafa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-more-horizontal'%3E%3Ccircle cx='12' cy='12' r='1'%3E%3C/circle%3E%3Ccircle cx='19' cy='12' r='1'%3E%3C/circle%3E%3Ccircle cx='5' cy='12' r='1'%3E%3C/circle%3E%3C/svg%3E");background-repeat:no-repeat;background-position:0.875rem 0.875rem;cursor:pointer;transition:all 0.3s ease}.menu-button:hover{background-color:rgba(255,255,255,0.08)}.menu-button.toggled{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fafafa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-more-vertical'%3E%3Ccircle cx='12' cy='12' r='1'%3E%3C/circle%3E%3Ccircle cx='12' cy='5' r='1'%3E%3C/circle%3E%3Ccircle cx='12' cy='19' r='1'%3E%3C/circle%3E%3C/svg%3E")}footer{color:var(--footer-fore-color);background:var(--footer-back-color);padding-top:calc(2 * var(--universal-padding));padding-bottom:calc(3 * var(--universal-padding));margin-top:calc(6 * var(--universal-margin))}footer *{font-size:0.875rem}footer a,footer a:link,footer a:visited{color:var(--fore-color)}.scroll-to-top{position:fixed;bottom:1rem;right:1.375rem;box-sizing:border-box;z-index:1100;height:2.75rem;width:2.75rem;border:0;border-radius:100%;background:var(--scrolltop-button-color);background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23f0f0f0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-arrow-up'%3E%3Cline x1='12' y1='19' x2='12' y2='5'%3E%3C/line%3E%3Cpolyline points='5 12 12 5 19 12'%3E%3C/polyline%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center center;cursor:pointer;box-shadow:0 2px 2px 0 rgba(0,0,0,0.14),0 3px 1px -2px rgba(0,0,0,0.12),0 1px 5px 0 rgba(0,0,0,0.2);transition:all 0.3s ease}.scroll-to-top:hover,.scroll-to-top:focus{background-color:var(--scrolltop-button-hover-color);box-shadow:0 3px 3px 0 rgba(0,0,0,0.14),0 1px 7px 0 rgba(0,0,0,0.12),0 3px 1px -1px rgba(0,0,0,0.2)}.card.contributor>.section.button{font-size:1rem;font-weight:500;text-align:center;display:block;transition:all 0.3s ease}.card.contributor>.section.button:link,.card.contributor>.section.button:visited{color:var(--fore-color)}.card.contributor>.section.button:link:hover,.card.contributor>.section.button:visited:hover{color:var(--a-link-color);text-decoration:none} +@font-face { + font-family: "Roboto"; + font-style: normal; + font-weight: 300; + src: local("Roboto Light"), local("Roboto-Light"), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmSU5fBBc4.woff2) format("woff2"); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; + font-display: swap; +} +@font-face { + font-family: "Roboto"; + font-style: italic; + font-weight: 300; + src: local("Roboto Light Italic"), local("Roboto-LightItalic"), url(https://fonts.gstatic.com/s/roboto/v18/KFOjCnqEu92Fr1Mu51TjASc6CsQ.woff2) format("woff2"); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; + font-display: swap; +} +@font-face { + font-family: "Roboto"; + font-style: normal; + font-weight: 500; + src: local("Roboto Medium"), local("Roboto-Medium"), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmEU9fBBc4.woff2) format("woff2"); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; + font-display: swap; +} +@font-face { + font-family: "Roboto Mono"; + font-style: normal; + font-weight: 300; + src: local("Roboto Mono Light"), local("RobotoMono-Light"), url(https://fonts.gstatic.com/s/robotomono/v5/L0xkDF4xlVMF-BfR8bXMIjDgiWqxf78.woff2) format("woff2"); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; + font-display: swap; +} +@font-face { + font-family: "Roboto Mono"; + font-style: italic; + font-weight: 300; + src: local("Roboto Mono Light Italic"), local("RobotoMono-LightItalic"), url(https://fonts.gstatic.com/s/robotomono/v5/L0xmDF4xlVMF-BfR8bXMIjhOk9a0T72jBg.woff2) format("woff2"); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; + font-display: swap; +} +@font-face { + font-family: "Roboto Mono"; + font-style: normal; + font-weight: 500; + src: local("Roboto Mono Medium"), local("RobotoMono-Medium"), url(https://fonts.gstatic.com/s/robotomono/v5/L0xkDF4xlVMF-BfR8bXMIjC4iGqxf78.woff2) format("woff2"); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; + font-display: swap; +} +:root { + --fore-color: #212121; + --back-color: #fff; + --card-page-back-color: #eee; + --border-color: #eee; + --universal-margin: 0.5rem; + --universal-padding: 0.5rem; + --universal-border-radius: 0.125rem; + --a-link-color: #0277bd; + --a-visited-color: #01579b; + --code-fore-color: #8e24aa; + --code-back-color: #f0f0f0; + --code-selected-color: #37474f; + --pre-fore-color: #e57373; + --pre-back-color: #263238; + --token-color-a: #7f99a5; + --token-color-b: #bdbdbd; + --token-color-c: #64b5f6; + --token-color-d: #ff8f00; + --token-color-e: #c5e1a5; + --token-color-f: #ce93d8; + --token-color-g: #26c6da; + --token-color-h: #e57373; + --collapse-color: #607d8b; + --copy-button-color: #1e88e5; + --copy-button-hover-color: #2196f3; + --scrolltop-button-color: #26a69a; + --scrolltop-button-hover-color: #4db6ac; + --beginner-color: #7cb342; + --intermediate-color: #ffb300; + --advanced-color: #e53935; + --header-fore-color: #fff; + --header-back-color: #202124; + --nav-fore-color: #f0f0f0; + --nav-back-color: #202124; + --footer-fore-color: #616161; + --footer-back-color: #e0e0e0; + --nav-link-fore-color: #e0e0e0; + --nav-link-border-color: #455a64; + --nav-link-hover-color: #2b2c30; + --search-fore-color: #fafafa; + --search-back-color: #111; + --search-border-color: #9e9e9e; + --search-hover-border-color: #26a69a; +} + +html { + font-size: 16px; + scroll-behavior: smooth; +} + +html, * { + font-family: Roboto, Helvetica, sans-serif; + line-height: 1.5; + -webkit-text-size-adjust: 100%; +} + +* { + font-size: 1rem; + font-weight: 300; +} + +a, b, del, em, i, ins, q, span, strong, u { + font-size: 1em; +} + +body { + margin: 0; + color: var(--fore-color); + background: var(--back-color); + overflow-x: hidden; +} +body.card-page { + background: var(--card-page-back-color); +} + +details { + display: block; +} + +summary { + display: list-item; +} + +abbr[title] { + border-bottom: none; + text-decoration: underline dotted; +} + +input { + overflow: visible; +} + +[type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button { + height: auto; +} + +[type=search] { + -webkit-appearance: textfield; + outline-offset: -2px; +} + +[type=search]::-webkit-search-cancel-button, [type=search]::-webkit-search-decoration { + -webkit-appearance: none; +} + +img { + max-width: 100%; + height: auto; +} + +h1, h2, h3, h4, h5, h6 { + line-height: 1.2; + margin: calc(1.5 * var(--universal-margin)) var(--universal-margin); +} + +h1 { + font-size: 6rem; +} + +h2 { + font-size: 3.75rem; +} + +h3 { + font-size: 3rem; +} + +h4 { + font-size: 2.125rem; +} + +h5 { + font-size: 1.5rem; +} + +h6 { + font-size: 1.25rem; +} + +p { + margin: var(--universal-margin); +} + +ol, ul { + margin: var(--universal-margin); + padding-left: calc(2 * var(--universal-margin)); +} + +b, strong { + font-weight: 500; +} + +hr { + box-sizing: content-box; + border: 0; + line-height: 1.25em; + margin: var(--universal-margin); + height: 0.0625rem; + background: linear-gradient(to right, transparent, var(--border-color) 20%, var(--border-color) 80%, transparent); +} + +code, kbd, pre { + font-size: 0.875em; +} + +code, kbd, pre, code *, pre *, kbd *, code[class*=language-], pre[class*=language-] { + font-family: Roboto Mono, Menlo, Consolas, monospace; +} + +sup, sub, code, kbd { + line-height: 0; + position: relative; + vertical-align: baseline; +} + +code { + background: var(--code-back-color); + color: var(--code-fore-color); + padding: calc(var(--universal-padding) / 4) calc(var(--universal-padding) / 2); + border-radius: var(--universal-border-radius); +} + +/* === Unused so far === +kbd { + background: var(--fore-color); + color: var(--back-color); + border-radius: var(--universal-border-radius); + padding: calc(var(--universal-padding) / 4) calc(var(--universal-padding) / 2); +} +*/ +pre { + overflow: auto; + background: var(--pre-back-color); + color: var(--pre-fore-color); + padding: calc(1.5 * var(--universal-padding)); + margin: var(--universal-margin); + border: 0; +} + +code[class*=language-], pre[class*=language-] { + color: var(--pre-fore-color); + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + word-wrap: normal; + line-height: 1.8; + -moz-tab-size: 2; + -o-tab-size: 2; + tab-size: 2; + -webkit-hypens: none; + -moz-hyphens: none; + -ms-hyphens: none; + hyphens: none; +} + +pre[class*=language-] { + padding: calc(2 * var(--universal-padding)); + overflow: auto; + margin: var(--universal-margin) 0; + white-space: pre-wrap; +} + +pre[class*=language-]::-moz-selection, pre[class*=language-] ::-moz-selection, +code[class*=language-]::-moz-selection, code[class*=language-] ::-moz-selection { + background: var(--code-selected-color); +} + +pre[class*=language-]::selection, pre[class*=language-] ::selection, +code[class*=language-]::selection, code[class*=language-] ::selection { + background: var(--code-selected-color); +} + +:not(pre) > code[class*=language-] { + padding: 0.1em; + border-radius: 0.3em; + white-space: normal; +} + +.namespace { + opacity: 0.7; +} + +.token.comment, .token.prolog, .token.doctype, .token.cdata { + color: var(--token-color-a); +} +.token.punctuation { + color: var(--token-color-b); +} +.token.property, .token.tag, .token.boolean, .token.constant, .token.symbol, .token.deleted, .token.function { + color: var(--token-color-c); +} +.token.number, .token.class-name { + color: var(--token-color-d); +} +.token.selector, .token.attr-name, .token.string, .token.char, .token.builtin, .token.inserted { + color: var(--token-color-e); +} +.token.operator, .token.entity, .token.url, .token.atrule, .token.attr-value, .token.keyword, .token.interpolation-punctuation { + color: var(--token-color-f); +} +.token.regex { + color: var(--token-color-g); +} +.token.important, .token.variable { + color: var(--token-color-h); +} +.token.italic, .token.comment { + font-style: italic; +} +.token.important, .token.bold { + font-weight: 500; +} +.token.entity { + cursor: help; +} + +.language-css .token.string, .style .token.string { + color: var(--token-color-f); +} + +a { + text-decoration: none; +} +a:link { + color: var(--a-link-color); +} +a:visited { + color: var(--a-visited-color); +} +a:hover, a:focus { + text-decoration: underline; +} + +.github-corner:hover .octo-arm { + animation: octocat-wave 560ms ease-in-out; +} + +@keyframes octocat-wave { + 0%, 100% { + transform: rotate(0); + } + 20%, 60% { + transform: rotate(-25deg); + } + 40%, 80% { + transform: rotate(10deg); + } +} +@media (max-width: 500px) { + .github-corner:hover .octo-arm { + animation: none; + } + + .github-corner .octo-arm { + animation: octocat-wave 560ms ease-in-out; + } +} +/* +blockquote {} +sup {} +sub {} +figure {} +figcaption {} +*/ +.container { + display: grid; + grid-template-columns: repeat(12, 1fr); + grid-column-gap: calc(0.5 * var(--universal-margin)); +} +.container.card-container { + position: absolute; + padding-top: 3.5rem; + height: calc(100vh - 3.5rem); +} + +.col-centered { + grid-column: span 12; + max-width: 100%; +} +@media screen and (min-width: 768px) { + .col-centered { + grid-column: 2/12; + } +} +@media screen and (min-width: 1280px) { + .col-centered { + grid-column: 3/11; + } +} + +.col-quarter { + grid-column: span 3; +} + +.col-full-width { + grid-column: span 12; +} + +.flex-row { + display: flex; + flex: 0 1 auto; + flex-flow: row wrap; +} +.flex-row .flex-item { + flex: 0 0 auto; + max-width: 50%; + flex-basis: 50%; +} +@media screen and (min-width: 768px) { + .flex-row .flex-item { + max-width: 25%; + flex-basis: 25%; + } +} +@media screen and (min-width: 1280px) { + .flex-row .flex-item { + max-width: 100%; + flex-grow: 1; + flex-basis: 0; + } +} + +h2.category-name { + text-align: center; +} + +.card { + overflow: hidden; + position: relative; + margin: var(--universal-margin); + border-radius: calc(4 * var(--universal-border-radius)); + box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2); +} +.card h4 { + text-align: center; + padding-bottom: calc(0.75 * var(--universal-padding)); + margin-bottom: calc(2 * var(--universal-margin)); + border-bottom: 0.0625rem solid var(--border-color); + padding-top: 5rem; + margin-top: -4.25rem; +} +.card.code-card { + margin-top: calc(5 * var(--universal-margin)); + background: var(--pre-back-color); +} +.card.code-card .section.card-content { + background: var(--back-color); + padding: calc(1.5 * var(--universal-padding)); +} +.card.code-card .collapse { + display: block; + font-size: 0.75rem; + font-family: Roboto Mono, Menlo, Consolas, monospace; + text-transform: uppercase; + background: var(--pre-back-color); + color: var(--collapse-color); + padding: calc(1.5 * var(--universal-padding)) calc(1.5 * var(--universal-padding)) calc(2 * var(--universal-padding)) calc(2.25 * var(--universal-padding)); + margin-left: calc(1.5 * var(--universal-margin)); + cursor: pointer; + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23607D8B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-plus-square'%3E%3Crect x='3' y='3' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='12' y1='8' x2='12' y2='16'%3E%3C/line%3E%3Cline x1='8' y1='12' x2='16' y2='12'%3E%3C/line%3E%3C/svg%3E"); + background-position: 0.25rem 0.9375rem; + background-repeat: no-repeat; +} +.card.code-card .collapse + pre.card-examples { + margin-left: calc(1.5 * var(--universal-margin)); + position: absolute; + transform: scaleY(0); + transform-origin: top; + transition: transform 0.3s ease; +} +.card.code-card .collapse.toggled { + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23607D8B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-minus-square'%3E%3Crect x='3' y='3' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='8' y1='12' x2='16' y2='12'%3E%3C/line%3E%3C/svg%3E"); + padding-bottom: calc(0.125 * var(--universal-padding)); +} +.card.code-card .collapse.toggled + pre.card-examples { + position: relative; + transform: scaleY(1); +} +.card.code-card pre.section.card-code { + position: relative; + margin-bottom: 0; + padding-bottom: 0; + padding-top: calc(3 * var(--universal-padding)); +} +.card.code-card pre.section.card-examples { + margin-top: 0; + margin-bottom: 0; + border-radius: 0 0 calc(4 * var(--universal-border-radius)) calc(4 * var(--universal-border-radius)); + padding-top: 0; +} +.card.code-card pre.section.card-examples:before { + content: ""; + display: block; + position: absolute; + top: 0; + left: 0.5625rem; + border-left: 0.0625rem solid var(--collapse-color); + height: calc(100% - 18px); +} +.card.code-card .copy-button-container { + position: relative; + z-index: 2; +} +.card.code-card .copy-button-container .copy-button { + background: var(--copy-button-color); + box-sizing: border-box; + position: absolute; + top: -1.75rem; + right: 0; + margin: calc(2 * var(--universal-margin)); + padding: calc(2.5 * var(--universal-padding)); + border-radius: 50%; + border: 0; + box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2); + transition: all 0.3s ease; + cursor: pointer; + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23f0f0f0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-clipboard'%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'%3E%3C/path%3E%3Crect x='8' y='2' width='8' height='4' rx='1' ry='1'%3E%3C/rect%3E%3C/svg%3E"); + background-position: center center; + background-repeat: no-repeat; +} +.card.code-card .copy-button-container .copy-button:hover, .card.code-card .copy-button-container .copy-button:focus { + background-color: var(--copy-button-hover-color); + box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 7px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -1px rgba(0, 0, 0, 0.2); +} +.card.code-card .copy-button-container .copy-button:before { + background: var(--back-color); + position: absolute; + top: -0.25rem; + right: -0.25rem; + content: ""; + display: block; + box-sizing: border-box; + padding: calc(2.5 * var(--universal-padding)); + border-radius: 50%; + border: 0.25rem solid var(--back-color); + z-index: -1; +} +.card.code-card .corner { + box-sizing: border-box; + position: absolute; + top: -0.5rem; + right: -2.125rem; + width: 4rem; + height: 2rem; + padding-top: 2rem; + transform: rotate(45deg); + text-align: center; + font-size: 0.75rem; + font-weight: 500; + color: var(--back-color); + box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.07), 0 3px 1px -2px rgba(0, 0, 0, 0.06), 0 1px 5px 0 rgba(0, 0, 0, 0.1); +} +.card.code-card .corner.beginner { + background: var(--beginner-color); +} +.card.code-card .corner.intermediate { + background: var(--intermediate-color); +} +.card.code-card .corner.advanced { + background: var(--advanced-color); +} + +.toast { + position: fixed; + bottom: calc(var(--universal-margin) * 2); + margin-bottom: 0; + font-size: 0.8125rem; + left: 50%; + transform: translate(-50%, -50%); + z-index: 1111; + color: var(--back-color); + background: var(--fore-color); + border-radius: calc(var(--universal-border-radius) * 16); + padding: var(--universal-padding) calc(var(--universal-padding) * 2); + box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2); + transition: all 0.3s ease; +} + +header { + box-sizing: border-box; + overflow: hidden; + height: 3.5rem; + position: fixed; + width: 110%; + top: 0; + left: -5%; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); + z-index: 5; + background: var(--header-back-color); + transition: top 0.3s ease; +} +header h1.logo { + position: relative; + top: 0; + margin-top: 0; + font-size: 1.625rem; + text-align: center; +} +header h1 a, header h1 a:link, header h1 a:visited { + color: var(--header-fore-color); +} +header h1 a:hover, header h1 a:focus, header h1 a:link:hover, header h1 a:link:focus, header h1 a:visited:hover, header h1 a:visited:focus { + text-decoration: none; +} +header h1 small { + display: block; + font-size: 0.875rem; + color: var(--header-back-color); + margin-top: 0.75rem; +} +header img { + height: 3.5rem; + padding: 0.375rem; + box-sizing: border-box; +} +header #title { + position: relative; + top: -1.125rem; +} +@media screen and (max-width: 768px) { + header #title { + display: none; + } +} + +nav { + position: fixed; + top: 6.5rem; + left: -320px; + width: 320px; + transition: left 0.3s ease; + z-index: 1100; + height: calc(100vh - 6.5rem); + box-sizing: border-box; + display: block; + background: var(--nav-back-color); + border: 0; + overflow-y: auto; +} +@media screen and (max-width: 320px) { + nav { + width: 100%; + } +} +@media screen and (min-width: 768px) { + nav { + width: 33vw; + left: -33vw; + } +} +@media screen and (min-width: 1280px) { + nav { + width: 25vw; + left: -25vw; + } +} +nav.col-nav { + box-shadow: 0 8px 17px 2px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2); + left: 0; +} +@media screen and (min-width: 768px) { + nav.col-nav + main.col-centered, nav.col-nav + main.col-centered + footer.col-full-width { + grid-column: 5/13; + } +} +@media screen and (min-width: 1280px) { + nav.col-nav + main.col-centered { + grid-column: 4/12; + padding-left: 8vw; + } + nav.col-nav + main.col-centered + footer.col-full-width { + grid-column: 4/13; + } +} +nav h4 { + margin: 0; + padding: calc(2.5 * var(--universal-padding)) calc(2 * var(--universal-padding)) calc(1 * var(--universal-padding)) calc(1 * var(--universal-padding)); + color: var(--nav-fore-color); + font-size: 1.5rem; +} +nav h4.collapse { + display: block; + cursor: pointer; + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23f0f0f0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevron-down'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); + background-position: right 0.5rem top 1.5rem; + background-repeat: no-repeat; +} +nav h4.collapse + ul { + position: absolute; + transform: scaleY(0); + transform-origin: top; + transition: transform 0.3s ease; +} +nav h4.collapse.toggled { + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23f0f0f0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevron-up'%3E%3Cpolyline points='18 15 12 9 6 15'%3E%3C/polyline%3E%3C/svg%3E"); + padding-bottom: calc(0.125 * var(--universal-padding)); +} +nav h4.collapse.toggled + ul { + position: relative; + transform: scaleY(1); +} +nav h4 + h4 { + border-top: 0.0625rem solid var(--nav-link-border-color); +} +nav h4 > a { + display: block; + line-height: 1; +} +nav h4 > a:hover, nav h4 > a:focus { + text-decoration: none; +} +nav ul { + width: 100%; + margin-left: -0.75rem; + background: var(--nav-back-color); +} +nav ul + h4 { + border-top: 0.0625rem solid var(--nav-link-border-color); +} +nav li { + margin: calc(0.5 * var(--universal-margin)); + margin-left: var(--universal-margin); + margin-bottom: 0; + border-left: 0.0625rem solid var(--nav-link-border-color); +} +nav li:hover { + text-decoration: none; + background: var(--nav-link-hover-color); +} +nav li + li { + margin-top: 0; +} +nav a { + display: block; + padding: calc(2 * var(--universal-padding)) calc(1.5 * var(--universal-padding)); +} +nav a:link, nav a:visited { + color: var(--nav-link-fore-color); +} +nav button.social { + width: 33.333%; + margin: 0; + border: 0; + border-radius: 0; + box-sizing: border-box; + height: 4rem; + background-position: center center; + background-repeat: no-repeat; + cursor: pointer; +} +nav button.social.fb { + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='%23f0f0f0' stroke='%23f0f0f0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-facebook'%3E%3Cpath d='M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z'%3E%3C/path%3E%3C/svg%3E"); + background-color: #1565c0; +} +nav button.social.instagram { + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23f0f0f0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-instagram'%3E%3Crect x='2' y='2' width='20' height='20' rx='5' ry='5'%3E%3C/rect%3E%3Cpath d='M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z'%3E%3C/path%3E%3Cline x1='17.5' y1='6.5' x2='17.5' y2='6.5'%3E%3C/line%3E%3C/svg%3E"); + background-color: #ec407a; +} +nav button.social.twitter { + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='%23f0f0f0' stroke='%23f0f0f0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-twitter'%3E%3Cpath d='M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z'%3E%3C/path%3E%3C/svg%3E"); + background-color: #03a9f4; +} + +[type=search] { + z-index: 1000; + position: fixed; + top: 3.5rem; + height: 3rem; + left: -320px; + width: 320px; + color: var(--search-fore-color); + background: var(--search-back-color); + outline: none; + box-sizing: border-box; + border: none; + border-bottom: 0.0625rem solid var(--search-border-color); + margin-bottom: var(--universal-margin); + padding: calc(2 * var(--universal-padding)) calc(1.5 * var(--universal-padding)) var(--universal-padding) calc(1.5 * var(--universal-padding)); + transition: all 0.3s ease; +} +@media screen and (max-width: 320px) { + [type=search] { + width: 100%; + } +} +@media screen and (min-width: 768px) { + [type=search] { + width: 33vw; + left: -33vw; + } +} +@media screen and (min-width: 1280px) { + [type=search] { + width: 25vw; + left: -25vw; + } +} +[type=search].col-nav { + box-shadow: 0 8px 17px 2px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2); + left: 0; +} +@media screen and (min-width: 768px) { + [type=search].col-nav + main.col-centered, [type=search].col-nav + main.col-centered + footer.col-full-width { + grid-column: 5/13; + } +} +@media screen and (min-width: 1280px) { + [type=search].col-nav + main.col-centered { + grid-column: 4/12; + padding-left: 8vw; + } + [type=search].col-nav + main.col-centered + footer.col-full-width { + grid-column: 4/13; + } +} +[type=search]:hover, [type=search]:focus { + border-bottom: 0.0625rem solid var(--search-hover-border-color); +} +[type=search]:focus { + box-shadow: 0 8px 17px 2px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2), inset 0 -0.0625rem 0 0 var(--search-hover-border-color); +} + +.menu-button { + position: fixed; + top: 0; + left: 0; + z-index: 1000; + box-sizing: border-box; + outline: none; + height: 3.5rem; + width: 3.5rem; + border: 0; + background: transparent; + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fafafa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-more-horizontal'%3E%3Ccircle cx='12' cy='12' r='1'%3E%3C/circle%3E%3Ccircle cx='19' cy='12' r='1'%3E%3C/circle%3E%3Ccircle cx='5' cy='12' r='1'%3E%3C/circle%3E%3C/svg%3E"); + background-repeat: no-repeat; + background-position: 0.875rem 0.875rem; + cursor: pointer; + transition: all 0.3s ease; +} +.menu-button:hover { + background-color: rgba(255, 255, 255, 0.08); +} +.menu-button.toggled { + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fafafa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-more-vertical'%3E%3Ccircle cx='12' cy='12' r='1'%3E%3C/circle%3E%3Ccircle cx='12' cy='5' r='1'%3E%3C/circle%3E%3Ccircle cx='12' cy='19' r='1'%3E%3C/circle%3E%3C/svg%3E"); +} + +footer { + color: var(--footer-fore-color); + background: var(--footer-back-color); + padding-top: calc(2 * var(--universal-padding)); + padding-bottom: calc(3 * var(--universal-padding)); + margin-top: calc(6 * var(--universal-margin)); +} +footer * { + font-size: 0.875rem; +} +footer a, footer a:link, footer a:visited { + color: var(--fore-color); +} + +.scroll-to-top { + position: fixed; + bottom: 1rem; + right: 1.375rem; + box-sizing: border-box; + z-index: 1100; + height: 2.75rem; + width: 2.75rem; + border: 0; + border-radius: 100%; + background: var(--scrolltop-button-color); + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23f0f0f0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-arrow-up'%3E%3Cline x1='12' y1='19' x2='12' y2='5'%3E%3C/line%3E%3Cpolyline points='5 12 12 5 19 12'%3E%3C/polyline%3E%3C/svg%3E"); + background-repeat: no-repeat; + background-position: center center; + cursor: pointer; + box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2); + transition: all 0.3s ease; +} +.scroll-to-top:hover, .scroll-to-top:focus { + background-color: var(--scrolltop-button-hover-color); + box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 7px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -1px rgba(0, 0, 0, 0.2); +} + +.card.contributor > .section.button { + font-size: 1rem; + font-weight: 500; + text-align: center; + display: block; + transition: all 0.3s ease; +} +.card.contributor > .section.button:link, .card.contributor > .section.button:visited { + color: var(--fore-color); +} +.card.contributor > .section.button:link:hover, .card.contributor > .section.button:visited:hover { + color: var(--a-link-color); + text-decoration: none; +} From a500e2211020f985c3a7c64c7dc1478159db181b Mon Sep 17 00:00:00 2001 From: Maike Date: Sun, 28 Oct 2018 23:16:14 -0300 Subject: [PATCH 2/2] compress code --- docs/style.css | 908 +------------------------------------------------ 1 file changed, 1 insertion(+), 907 deletions(-) diff --git a/docs/style.css b/docs/style.css index e063c6372..0bdc67b9b 100644 --- a/docs/style.css +++ b/docs/style.css @@ -1,907 +1 @@ -@font-face { - font-family: "Roboto"; - font-style: normal; - font-weight: 300; - src: local("Roboto Light"), local("Roboto-Light"), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmSU5fBBc4.woff2) format("woff2"); - unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; - font-display: swap; -} -@font-face { - font-family: "Roboto"; - font-style: italic; - font-weight: 300; - src: local("Roboto Light Italic"), local("Roboto-LightItalic"), url(https://fonts.gstatic.com/s/roboto/v18/KFOjCnqEu92Fr1Mu51TjASc6CsQ.woff2) format("woff2"); - unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; - font-display: swap; -} -@font-face { - font-family: "Roboto"; - font-style: normal; - font-weight: 500; - src: local("Roboto Medium"), local("Roboto-Medium"), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmEU9fBBc4.woff2) format("woff2"); - unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; - font-display: swap; -} -@font-face { - font-family: "Roboto Mono"; - font-style: normal; - font-weight: 300; - src: local("Roboto Mono Light"), local("RobotoMono-Light"), url(https://fonts.gstatic.com/s/robotomono/v5/L0xkDF4xlVMF-BfR8bXMIjDgiWqxf78.woff2) format("woff2"); - unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; - font-display: swap; -} -@font-face { - font-family: "Roboto Mono"; - font-style: italic; - font-weight: 300; - src: local("Roboto Mono Light Italic"), local("RobotoMono-LightItalic"), url(https://fonts.gstatic.com/s/robotomono/v5/L0xmDF4xlVMF-BfR8bXMIjhOk9a0T72jBg.woff2) format("woff2"); - unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; - font-display: swap; -} -@font-face { - font-family: "Roboto Mono"; - font-style: normal; - font-weight: 500; - src: local("Roboto Mono Medium"), local("RobotoMono-Medium"), url(https://fonts.gstatic.com/s/robotomono/v5/L0xkDF4xlVMF-BfR8bXMIjC4iGqxf78.woff2) format("woff2"); - unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; - font-display: swap; -} -:root { - --fore-color: #212121; - --back-color: #fff; - --card-page-back-color: #eee; - --border-color: #eee; - --universal-margin: 0.5rem; - --universal-padding: 0.5rem; - --universal-border-radius: 0.125rem; - --a-link-color: #0277bd; - --a-visited-color: #01579b; - --code-fore-color: #8e24aa; - --code-back-color: #f0f0f0; - --code-selected-color: #37474f; - --pre-fore-color: #e57373; - --pre-back-color: #263238; - --token-color-a: #7f99a5; - --token-color-b: #bdbdbd; - --token-color-c: #64b5f6; - --token-color-d: #ff8f00; - --token-color-e: #c5e1a5; - --token-color-f: #ce93d8; - --token-color-g: #26c6da; - --token-color-h: #e57373; - --collapse-color: #607d8b; - --copy-button-color: #1e88e5; - --copy-button-hover-color: #2196f3; - --scrolltop-button-color: #26a69a; - --scrolltop-button-hover-color: #4db6ac; - --beginner-color: #7cb342; - --intermediate-color: #ffb300; - --advanced-color: #e53935; - --header-fore-color: #fff; - --header-back-color: #202124; - --nav-fore-color: #f0f0f0; - --nav-back-color: #202124; - --footer-fore-color: #616161; - --footer-back-color: #e0e0e0; - --nav-link-fore-color: #e0e0e0; - --nav-link-border-color: #455a64; - --nav-link-hover-color: #2b2c30; - --search-fore-color: #fafafa; - --search-back-color: #111; - --search-border-color: #9e9e9e; - --search-hover-border-color: #26a69a; -} - -html { - font-size: 16px; - scroll-behavior: smooth; -} - -html, * { - font-family: Roboto, Helvetica, sans-serif; - line-height: 1.5; - -webkit-text-size-adjust: 100%; -} - -* { - font-size: 1rem; - font-weight: 300; -} - -a, b, del, em, i, ins, q, span, strong, u { - font-size: 1em; -} - -body { - margin: 0; - color: var(--fore-color); - background: var(--back-color); - overflow-x: hidden; -} -body.card-page { - background: var(--card-page-back-color); -} - -details { - display: block; -} - -summary { - display: list-item; -} - -abbr[title] { - border-bottom: none; - text-decoration: underline dotted; -} - -input { - overflow: visible; -} - -[type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button { - height: auto; -} - -[type=search] { - -webkit-appearance: textfield; - outline-offset: -2px; -} - -[type=search]::-webkit-search-cancel-button, [type=search]::-webkit-search-decoration { - -webkit-appearance: none; -} - -img { - max-width: 100%; - height: auto; -} - -h1, h2, h3, h4, h5, h6 { - line-height: 1.2; - margin: calc(1.5 * var(--universal-margin)) var(--universal-margin); -} - -h1 { - font-size: 6rem; -} - -h2 { - font-size: 3.75rem; -} - -h3 { - font-size: 3rem; -} - -h4 { - font-size: 2.125rem; -} - -h5 { - font-size: 1.5rem; -} - -h6 { - font-size: 1.25rem; -} - -p { - margin: var(--universal-margin); -} - -ol, ul { - margin: var(--universal-margin); - padding-left: calc(2 * var(--universal-margin)); -} - -b, strong { - font-weight: 500; -} - -hr { - box-sizing: content-box; - border: 0; - line-height: 1.25em; - margin: var(--universal-margin); - height: 0.0625rem; - background: linear-gradient(to right, transparent, var(--border-color) 20%, var(--border-color) 80%, transparent); -} - -code, kbd, pre { - font-size: 0.875em; -} - -code, kbd, pre, code *, pre *, kbd *, code[class*=language-], pre[class*=language-] { - font-family: Roboto Mono, Menlo, Consolas, monospace; -} - -sup, sub, code, kbd { - line-height: 0; - position: relative; - vertical-align: baseline; -} - -code { - background: var(--code-back-color); - color: var(--code-fore-color); - padding: calc(var(--universal-padding) / 4) calc(var(--universal-padding) / 2); - border-radius: var(--universal-border-radius); -} - -/* === Unused so far === -kbd { - background: var(--fore-color); - color: var(--back-color); - border-radius: var(--universal-border-radius); - padding: calc(var(--universal-padding) / 4) calc(var(--universal-padding) / 2); -} -*/ -pre { - overflow: auto; - background: var(--pre-back-color); - color: var(--pre-fore-color); - padding: calc(1.5 * var(--universal-padding)); - margin: var(--universal-margin); - border: 0; -} - -code[class*=language-], pre[class*=language-] { - color: var(--pre-fore-color); - text-align: left; - white-space: pre; - word-spacing: normal; - word-break: normal; - word-wrap: normal; - line-height: 1.8; - -moz-tab-size: 2; - -o-tab-size: 2; - tab-size: 2; - -webkit-hypens: none; - -moz-hyphens: none; - -ms-hyphens: none; - hyphens: none; -} - -pre[class*=language-] { - padding: calc(2 * var(--universal-padding)); - overflow: auto; - margin: var(--universal-margin) 0; - white-space: pre-wrap; -} - -pre[class*=language-]::-moz-selection, pre[class*=language-] ::-moz-selection, -code[class*=language-]::-moz-selection, code[class*=language-] ::-moz-selection { - background: var(--code-selected-color); -} - -pre[class*=language-]::selection, pre[class*=language-] ::selection, -code[class*=language-]::selection, code[class*=language-] ::selection { - background: var(--code-selected-color); -} - -:not(pre) > code[class*=language-] { - padding: 0.1em; - border-radius: 0.3em; - white-space: normal; -} - -.namespace { - opacity: 0.7; -} - -.token.comment, .token.prolog, .token.doctype, .token.cdata { - color: var(--token-color-a); -} -.token.punctuation { - color: var(--token-color-b); -} -.token.property, .token.tag, .token.boolean, .token.constant, .token.symbol, .token.deleted, .token.function { - color: var(--token-color-c); -} -.token.number, .token.class-name { - color: var(--token-color-d); -} -.token.selector, .token.attr-name, .token.string, .token.char, .token.builtin, .token.inserted { - color: var(--token-color-e); -} -.token.operator, .token.entity, .token.url, .token.atrule, .token.attr-value, .token.keyword, .token.interpolation-punctuation { - color: var(--token-color-f); -} -.token.regex { - color: var(--token-color-g); -} -.token.important, .token.variable { - color: var(--token-color-h); -} -.token.italic, .token.comment { - font-style: italic; -} -.token.important, .token.bold { - font-weight: 500; -} -.token.entity { - cursor: help; -} - -.language-css .token.string, .style .token.string { - color: var(--token-color-f); -} - -a { - text-decoration: none; -} -a:link { - color: var(--a-link-color); -} -a:visited { - color: var(--a-visited-color); -} -a:hover, a:focus { - text-decoration: underline; -} - -.github-corner:hover .octo-arm { - animation: octocat-wave 560ms ease-in-out; -} - -@keyframes octocat-wave { - 0%, 100% { - transform: rotate(0); - } - 20%, 60% { - transform: rotate(-25deg); - } - 40%, 80% { - transform: rotate(10deg); - } -} -@media (max-width: 500px) { - .github-corner:hover .octo-arm { - animation: none; - } - - .github-corner .octo-arm { - animation: octocat-wave 560ms ease-in-out; - } -} -/* -blockquote {} -sup {} -sub {} -figure {} -figcaption {} -*/ -.container { - display: grid; - grid-template-columns: repeat(12, 1fr); - grid-column-gap: calc(0.5 * var(--universal-margin)); -} -.container.card-container { - position: absolute; - padding-top: 3.5rem; - height: calc(100vh - 3.5rem); -} - -.col-centered { - grid-column: span 12; - max-width: 100%; -} -@media screen and (min-width: 768px) { - .col-centered { - grid-column: 2/12; - } -} -@media screen and (min-width: 1280px) { - .col-centered { - grid-column: 3/11; - } -} - -.col-quarter { - grid-column: span 3; -} - -.col-full-width { - grid-column: span 12; -} - -.flex-row { - display: flex; - flex: 0 1 auto; - flex-flow: row wrap; -} -.flex-row .flex-item { - flex: 0 0 auto; - max-width: 50%; - flex-basis: 50%; -} -@media screen and (min-width: 768px) { - .flex-row .flex-item { - max-width: 25%; - flex-basis: 25%; - } -} -@media screen and (min-width: 1280px) { - .flex-row .flex-item { - max-width: 100%; - flex-grow: 1; - flex-basis: 0; - } -} - -h2.category-name { - text-align: center; -} - -.card { - overflow: hidden; - position: relative; - margin: var(--universal-margin); - border-radius: calc(4 * var(--universal-border-radius)); - box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2); -} -.card h4 { - text-align: center; - padding-bottom: calc(0.75 * var(--universal-padding)); - margin-bottom: calc(2 * var(--universal-margin)); - border-bottom: 0.0625rem solid var(--border-color); - padding-top: 5rem; - margin-top: -4.25rem; -} -.card.code-card { - margin-top: calc(5 * var(--universal-margin)); - background: var(--pre-back-color); -} -.card.code-card .section.card-content { - background: var(--back-color); - padding: calc(1.5 * var(--universal-padding)); -} -.card.code-card .collapse { - display: block; - font-size: 0.75rem; - font-family: Roboto Mono, Menlo, Consolas, monospace; - text-transform: uppercase; - background: var(--pre-back-color); - color: var(--collapse-color); - padding: calc(1.5 * var(--universal-padding)) calc(1.5 * var(--universal-padding)) calc(2 * var(--universal-padding)) calc(2.25 * var(--universal-padding)); - margin-left: calc(1.5 * var(--universal-margin)); - cursor: pointer; - background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23607D8B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-plus-square'%3E%3Crect x='3' y='3' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='12' y1='8' x2='12' y2='16'%3E%3C/line%3E%3Cline x1='8' y1='12' x2='16' y2='12'%3E%3C/line%3E%3C/svg%3E"); - background-position: 0.25rem 0.9375rem; - background-repeat: no-repeat; -} -.card.code-card .collapse + pre.card-examples { - margin-left: calc(1.5 * var(--universal-margin)); - position: absolute; - transform: scaleY(0); - transform-origin: top; - transition: transform 0.3s ease; -} -.card.code-card .collapse.toggled { - background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23607D8B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-minus-square'%3E%3Crect x='3' y='3' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='8' y1='12' x2='16' y2='12'%3E%3C/line%3E%3C/svg%3E"); - padding-bottom: calc(0.125 * var(--universal-padding)); -} -.card.code-card .collapse.toggled + pre.card-examples { - position: relative; - transform: scaleY(1); -} -.card.code-card pre.section.card-code { - position: relative; - margin-bottom: 0; - padding-bottom: 0; - padding-top: calc(3 * var(--universal-padding)); -} -.card.code-card pre.section.card-examples { - margin-top: 0; - margin-bottom: 0; - border-radius: 0 0 calc(4 * var(--universal-border-radius)) calc(4 * var(--universal-border-radius)); - padding-top: 0; -} -.card.code-card pre.section.card-examples:before { - content: ""; - display: block; - position: absolute; - top: 0; - left: 0.5625rem; - border-left: 0.0625rem solid var(--collapse-color); - height: calc(100% - 18px); -} -.card.code-card .copy-button-container { - position: relative; - z-index: 2; -} -.card.code-card .copy-button-container .copy-button { - background: var(--copy-button-color); - box-sizing: border-box; - position: absolute; - top: -1.75rem; - right: 0; - margin: calc(2 * var(--universal-margin)); - padding: calc(2.5 * var(--universal-padding)); - border-radius: 50%; - border: 0; - box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2); - transition: all 0.3s ease; - cursor: pointer; - background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23f0f0f0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-clipboard'%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'%3E%3C/path%3E%3Crect x='8' y='2' width='8' height='4' rx='1' ry='1'%3E%3C/rect%3E%3C/svg%3E"); - background-position: center center; - background-repeat: no-repeat; -} -.card.code-card .copy-button-container .copy-button:hover, .card.code-card .copy-button-container .copy-button:focus { - background-color: var(--copy-button-hover-color); - box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 7px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -1px rgba(0, 0, 0, 0.2); -} -.card.code-card .copy-button-container .copy-button:before { - background: var(--back-color); - position: absolute; - top: -0.25rem; - right: -0.25rem; - content: ""; - display: block; - box-sizing: border-box; - padding: calc(2.5 * var(--universal-padding)); - border-radius: 50%; - border: 0.25rem solid var(--back-color); - z-index: -1; -} -.card.code-card .corner { - box-sizing: border-box; - position: absolute; - top: -0.5rem; - right: -2.125rem; - width: 4rem; - height: 2rem; - padding-top: 2rem; - transform: rotate(45deg); - text-align: center; - font-size: 0.75rem; - font-weight: 500; - color: var(--back-color); - box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.07), 0 3px 1px -2px rgba(0, 0, 0, 0.06), 0 1px 5px 0 rgba(0, 0, 0, 0.1); -} -.card.code-card .corner.beginner { - background: var(--beginner-color); -} -.card.code-card .corner.intermediate { - background: var(--intermediate-color); -} -.card.code-card .corner.advanced { - background: var(--advanced-color); -} - -.toast { - position: fixed; - bottom: calc(var(--universal-margin) * 2); - margin-bottom: 0; - font-size: 0.8125rem; - left: 50%; - transform: translate(-50%, -50%); - z-index: 1111; - color: var(--back-color); - background: var(--fore-color); - border-radius: calc(var(--universal-border-radius) * 16); - padding: var(--universal-padding) calc(var(--universal-padding) * 2); - box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2); - transition: all 0.3s ease; -} - -header { - box-sizing: border-box; - overflow: hidden; - height: 3.5rem; - position: fixed; - width: 110%; - top: 0; - left: -5%; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); - z-index: 5; - background: var(--header-back-color); - transition: top 0.3s ease; -} -header h1.logo { - position: relative; - top: 0; - margin-top: 0; - font-size: 1.625rem; - text-align: center; -} -header h1 a, header h1 a:link, header h1 a:visited { - color: var(--header-fore-color); -} -header h1 a:hover, header h1 a:focus, header h1 a:link:hover, header h1 a:link:focus, header h1 a:visited:hover, header h1 a:visited:focus { - text-decoration: none; -} -header h1 small { - display: block; - font-size: 0.875rem; - color: var(--header-back-color); - margin-top: 0.75rem; -} -header img { - height: 3.5rem; - padding: 0.375rem; - box-sizing: border-box; -} -header #title { - position: relative; - top: -1.125rem; -} -@media screen and (max-width: 768px) { - header #title { - display: none; - } -} - -nav { - position: fixed; - top: 6.5rem; - left: -320px; - width: 320px; - transition: left 0.3s ease; - z-index: 1100; - height: calc(100vh - 6.5rem); - box-sizing: border-box; - display: block; - background: var(--nav-back-color); - border: 0; - overflow-y: auto; -} -@media screen and (max-width: 320px) { - nav { - width: 100%; - } -} -@media screen and (min-width: 768px) { - nav { - width: 33vw; - left: -33vw; - } -} -@media screen and (min-width: 1280px) { - nav { - width: 25vw; - left: -25vw; - } -} -nav.col-nav { - box-shadow: 0 8px 17px 2px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2); - left: 0; -} -@media screen and (min-width: 768px) { - nav.col-nav + main.col-centered, nav.col-nav + main.col-centered + footer.col-full-width { - grid-column: 5/13; - } -} -@media screen and (min-width: 1280px) { - nav.col-nav + main.col-centered { - grid-column: 4/12; - padding-left: 8vw; - } - nav.col-nav + main.col-centered + footer.col-full-width { - grid-column: 4/13; - } -} -nav h4 { - margin: 0; - padding: calc(2.5 * var(--universal-padding)) calc(2 * var(--universal-padding)) calc(1 * var(--universal-padding)) calc(1 * var(--universal-padding)); - color: var(--nav-fore-color); - font-size: 1.5rem; -} -nav h4.collapse { - display: block; - cursor: pointer; - background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23f0f0f0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevron-down'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); - background-position: right 0.5rem top 1.5rem; - background-repeat: no-repeat; -} -nav h4.collapse + ul { - position: absolute; - transform: scaleY(0); - transform-origin: top; - transition: transform 0.3s ease; -} -nav h4.collapse.toggled { - background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23f0f0f0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevron-up'%3E%3Cpolyline points='18 15 12 9 6 15'%3E%3C/polyline%3E%3C/svg%3E"); - padding-bottom: calc(0.125 * var(--universal-padding)); -} -nav h4.collapse.toggled + ul { - position: relative; - transform: scaleY(1); -} -nav h4 + h4 { - border-top: 0.0625rem solid var(--nav-link-border-color); -} -nav h4 > a { - display: block; - line-height: 1; -} -nav h4 > a:hover, nav h4 > a:focus { - text-decoration: none; -} -nav ul { - width: 100%; - margin-left: -0.75rem; - background: var(--nav-back-color); -} -nav ul + h4 { - border-top: 0.0625rem solid var(--nav-link-border-color); -} -nav li { - margin: calc(0.5 * var(--universal-margin)); - margin-left: var(--universal-margin); - margin-bottom: 0; - border-left: 0.0625rem solid var(--nav-link-border-color); -} -nav li:hover { - text-decoration: none; - background: var(--nav-link-hover-color); -} -nav li + li { - margin-top: 0; -} -nav a { - display: block; - padding: calc(2 * var(--universal-padding)) calc(1.5 * var(--universal-padding)); -} -nav a:link, nav a:visited { - color: var(--nav-link-fore-color); -} -nav button.social { - width: 33.333%; - margin: 0; - border: 0; - border-radius: 0; - box-sizing: border-box; - height: 4rem; - background-position: center center; - background-repeat: no-repeat; - cursor: pointer; -} -nav button.social.fb { - background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='%23f0f0f0' stroke='%23f0f0f0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-facebook'%3E%3Cpath d='M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z'%3E%3C/path%3E%3C/svg%3E"); - background-color: #1565c0; -} -nav button.social.instagram { - background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23f0f0f0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-instagram'%3E%3Crect x='2' y='2' width='20' height='20' rx='5' ry='5'%3E%3C/rect%3E%3Cpath d='M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z'%3E%3C/path%3E%3Cline x1='17.5' y1='6.5' x2='17.5' y2='6.5'%3E%3C/line%3E%3C/svg%3E"); - background-color: #ec407a; -} -nav button.social.twitter { - background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='%23f0f0f0' stroke='%23f0f0f0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-twitter'%3E%3Cpath d='M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z'%3E%3C/path%3E%3C/svg%3E"); - background-color: #03a9f4; -} - -[type=search] { - z-index: 1000; - position: fixed; - top: 3.5rem; - height: 3rem; - left: -320px; - width: 320px; - color: var(--search-fore-color); - background: var(--search-back-color); - outline: none; - box-sizing: border-box; - border: none; - border-bottom: 0.0625rem solid var(--search-border-color); - margin-bottom: var(--universal-margin); - padding: calc(2 * var(--universal-padding)) calc(1.5 * var(--universal-padding)) var(--universal-padding) calc(1.5 * var(--universal-padding)); - transition: all 0.3s ease; -} -@media screen and (max-width: 320px) { - [type=search] { - width: 100%; - } -} -@media screen and (min-width: 768px) { - [type=search] { - width: 33vw; - left: -33vw; - } -} -@media screen and (min-width: 1280px) { - [type=search] { - width: 25vw; - left: -25vw; - } -} -[type=search].col-nav { - box-shadow: 0 8px 17px 2px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2); - left: 0; -} -@media screen and (min-width: 768px) { - [type=search].col-nav + main.col-centered, [type=search].col-nav + main.col-centered + footer.col-full-width { - grid-column: 5/13; - } -} -@media screen and (min-width: 1280px) { - [type=search].col-nav + main.col-centered { - grid-column: 4/12; - padding-left: 8vw; - } - [type=search].col-nav + main.col-centered + footer.col-full-width { - grid-column: 4/13; - } -} -[type=search]:hover, [type=search]:focus { - border-bottom: 0.0625rem solid var(--search-hover-border-color); -} -[type=search]:focus { - box-shadow: 0 8px 17px 2px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2), inset 0 -0.0625rem 0 0 var(--search-hover-border-color); -} - -.menu-button { - position: fixed; - top: 0; - left: 0; - z-index: 1000; - box-sizing: border-box; - outline: none; - height: 3.5rem; - width: 3.5rem; - border: 0; - background: transparent; - background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fafafa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-more-horizontal'%3E%3Ccircle cx='12' cy='12' r='1'%3E%3C/circle%3E%3Ccircle cx='19' cy='12' r='1'%3E%3C/circle%3E%3Ccircle cx='5' cy='12' r='1'%3E%3C/circle%3E%3C/svg%3E"); - background-repeat: no-repeat; - background-position: 0.875rem 0.875rem; - cursor: pointer; - transition: all 0.3s ease; -} -.menu-button:hover { - background-color: rgba(255, 255, 255, 0.08); -} -.menu-button.toggled { - background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fafafa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-more-vertical'%3E%3Ccircle cx='12' cy='12' r='1'%3E%3C/circle%3E%3Ccircle cx='12' cy='5' r='1'%3E%3C/circle%3E%3Ccircle cx='12' cy='19' r='1'%3E%3C/circle%3E%3C/svg%3E"); -} - -footer { - color: var(--footer-fore-color); - background: var(--footer-back-color); - padding-top: calc(2 * var(--universal-padding)); - padding-bottom: calc(3 * var(--universal-padding)); - margin-top: calc(6 * var(--universal-margin)); -} -footer * { - font-size: 0.875rem; -} -footer a, footer a:link, footer a:visited { - color: var(--fore-color); -} - -.scroll-to-top { - position: fixed; - bottom: 1rem; - right: 1.375rem; - box-sizing: border-box; - z-index: 1100; - height: 2.75rem; - width: 2.75rem; - border: 0; - border-radius: 100%; - background: var(--scrolltop-button-color); - background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23f0f0f0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-arrow-up'%3E%3Cline x1='12' y1='19' x2='12' y2='5'%3E%3C/line%3E%3Cpolyline points='5 12 12 5 19 12'%3E%3C/polyline%3E%3C/svg%3E"); - background-repeat: no-repeat; - background-position: center center; - cursor: pointer; - box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2); - transition: all 0.3s ease; -} -.scroll-to-top:hover, .scroll-to-top:focus { - background-color: var(--scrolltop-button-hover-color); - box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 7px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -1px rgba(0, 0, 0, 0.2); -} - -.card.contributor > .section.button { - font-size: 1rem; - font-weight: 500; - text-align: center; - display: block; - transition: all 0.3s ease; -} -.card.contributor > .section.button:link, .card.contributor > .section.button:visited { - color: var(--fore-color); -} -.card.contributor > .section.button:link:hover, .card.contributor > .section.button:visited:hover { - color: var(--a-link-color); - text-decoration: none; -} +@font-face{font-family:"Roboto";font-style:normal;font-weight:300;src:local("Roboto Light"),local("Roboto-Light"),url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmSU5fBBc4.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;font-display:swap}@font-face{font-family:"Roboto";font-style:italic;font-weight:300;src:local("Roboto Light Italic"),local("Roboto-LightItalic"),url(https://fonts.gstatic.com/s/roboto/v18/KFOjCnqEu92Fr1Mu51TjASc6CsQ.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;font-display:swap}@font-face{font-family:"Roboto";font-style:normal;font-weight:500;src:local("Roboto Medium"),local("Roboto-Medium"),url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmEU9fBBc4.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;font-display:swap}@font-face{font-family:"Roboto Mono";font-style:normal;font-weight:300;src:local("Roboto Mono Light"),local("RobotoMono-Light"),url(https://fonts.gstatic.com/s/robotomono/v5/L0xkDF4xlVMF-BfR8bXMIjDgiWqxf78.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;font-display:swap}@font-face{font-family:"Roboto Mono";font-style:italic;font-weight:300;src:local("Roboto Mono Light Italic"),local("RobotoMono-LightItalic"),url(https://fonts.gstatic.com/s/robotomono/v5/L0xmDF4xlVMF-BfR8bXMIjhOk9a0T72jBg.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;font-display:swap}@font-face{font-family:"Roboto Mono";font-style:normal;font-weight:500;src:local("Roboto Mono Medium"),local("RobotoMono-Medium"),url(https://fonts.gstatic.com/s/robotomono/v5/L0xkDF4xlVMF-BfR8bXMIjC4iGqxf78.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;font-display:swap}:root{--fore-color:#212121;--back-color:#fff;--card-page-back-color:#eee;--border-color:#eee;--universal-margin:.5rem;--universal-padding:.5rem;--universal-border-radius:.125rem;--a-link-color:#0277bd;--a-visited-color:#01579b;--code-fore-color:#8e24aa;--code-back-color:#f0f0f0;--code-selected-color:#37474f;--pre-fore-color:#e57373;--pre-back-color:#263238;--token-color-a:#7f99a5;--token-color-b:#bdbdbd;--token-color-c:#64b5f6;--token-color-d:#ff8f00;--token-color-e:#c5e1a5;--token-color-f:#ce93d8;--token-color-g:#26c6da;--token-color-h:#e57373;--collapse-color:#607d8b;--copy-button-color:#1e88e5;--copy-button-hover-color:#2196f3;--scrolltop-button-color:#26a69a;--scrolltop-button-hover-color:#4db6ac;--beginner-color:#7cb342;--intermediate-color:#ffb300;--advanced-color:#e53935;--header-fore-color:#fff;--header-back-color:#202124;--nav-fore-color:#f0f0f0;--nav-back-color:#202124;--footer-fore-color:#616161;--footer-back-color:#e0e0e0;--nav-link-fore-color:#e0e0e0;--nav-link-border-color:#455a64;--nav-link-hover-color:#2b2c30;--search-fore-color:#fafafa;--search-back-color:#111;--search-border-color:#9e9e9e;--search-hover-border-color:#26a69a}html{font-size:16px;scroll-behavior:smooth}html,*{font-family:Roboto, Helvetica, sans-serif;line-height:1.5;-webkit-text-size-adjust:100%}*{font-size:1rem;font-weight:300}a,b,del,em,i,ins,q,span,strong,u{font-size:1em}body{margin:0;color:var(--fore-color);background:var(--back-color);overflow-x:hidden}body.card-page{background:var(--card-page-back-color)}details{display:block}summary{display:list-item}abbr[title]{border-bottom:none;text-decoration:underline dotted}input{overflow:visible}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}img{max-width:100%;height:auto}h1,h2,h3,h4,h5,h6{line-height:1.2;margin:calc(1.5 * var(--universal-margin)) var(--universal-margin)}h1{font-size:6rem}h2{font-size:3.75rem}h3{font-size:3rem}h4{font-size:2.125rem}h5{font-size:1.5rem}h6{font-size:1.25rem}p{margin:var(--universal-margin)}ol,ul{margin:var(--universal-margin);padding-left:calc(2 * var(--universal-margin))}b,strong{font-weight:500}hr{box-sizing:content-box;border:0;line-height:1.25em;margin:var(--universal-margin);height:.0625rem;background:linear-gradient(to right, transparent, var(--border-color) 20%, var(--border-color) 80%, transparent)}code,kbd,pre{font-size:.875em}code,kbd,pre,code *,pre *,kbd *,code[class*=language-],pre[class*=language-]{font-family:Roboto Mono, Menlo, Consolas, monospace}sup,sub,code,kbd{line-height:0;position:relative;vertical-align:baseline}code{background:var(--code-back-color);color:var(--code-fore-color);padding:calc(var(--universal-padding) / 4) calc(var(--universal-padding) / 2);border-radius:var(--universal-border-radius)}pre{overflow:auto;background:var(--pre-back-color);color:var(--pre-fore-color);padding:calc(1.5 * var(--universal-padding));margin:var(--universal-margin);border:0}code[class*=language-],pre[class*=language-]{color:var(--pre-fore-color);text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.8;-moz-tab-size:2;-o-tab-size:2;tab-size:2;-webkit-hypens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=language-]{padding:calc(2 * var(--universal-padding));overflow:auto;margin:var(--universal-margin) 0;white-space:pre-wrap}pre[class*=language-]::-moz-selection,pre[class*=language-] ::-moz-selection,code[class*=language-]::-moz-selection,code[class*=language-] ::-moz-selection{background:var(--code-selected-color)}pre[class*=language-]::selection,pre[class*=language-] ::selection,code[class*=language-]::selection,code[class*=language-] ::selection{background:var(--code-selected-color)}:not(pre) > code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.namespace{opacity:.7}.token.comment,.token.prolog,.token.doctype,.token.cdata{color:var(--token-color-a)}.token.punctuation{color:var(--token-color-b)}.token.property,.token.tag,.token.boolean,.token.constant,.token.symbol,.token.deleted,.token.function{color:var(--token-color-c)}.token.number,.token.class-name{color:var(--token-color-d)}.token.selector,.token.attr-name,.token.string,.token.char,.token.builtin,.token.inserted{color:var(--token-color-e)}.token.operator,.token.entity,.token.url,.token.atrule,.token.attr-value,.token.keyword,.token.interpolation-punctuation{color:var(--token-color-f)}.token.regex{color:var(--token-color-g)}.token.important,.token.variable{color:var(--token-color-h)}.token.italic,.token.comment{font-style:italic}.token.important,.token.bold{font-weight:500}.token.entity{cursor:help}.language-css .token.string,.style .token.string{color:var(--token-color-f)}a{text-decoration:none}a:link{color:var(--a-link-color)}a:visited{color:var(--a-visited-color)}a:hover,a:focus{text-decoration:underline}.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media(max-width: 500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}.container{display:grid;grid-template-columns:repeat(12, 1fr);grid-column-gap:calc(0.5 * var(--universal-margin))}.container.card-container{position:absolute;padding-top:3.5rem;height:calc(100vh - 3.5rem)}.col-centered{grid-column:span 12;max-width:100%}@media screen and (min-width: 768px){.col-centered{grid-column:2/12}}@media screen and (min-width: 1280px){.col-centered{grid-column:3/11}}.col-quarter{grid-column:span 3}.col-full-width{grid-column:span 12}.flex-row{display:flex;flex:0 1 auto;flex-flow:row wrap}.flex-row .flex-item{flex:0 0 auto;max-width:50%;flex-basis:50%}@media screen and (min-width: 768px){.flex-row .flex-item{max-width:25%;flex-basis:25%}}@media screen and (min-width: 1280px){.flex-row .flex-item{max-width:100%;flex-grow:1;flex-basis:0}}h2.category-name{text-align:center}.card{overflow:hidden;position:relative;margin:var(--universal-margin);border-radius:calc(4 * var(--universal-border-radius));box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.12),0 1px 5px 0 rgba(0,0,0,.2)}.card h4{text-align:center;padding-bottom:calc(0.75 * var(--universal-padding));margin-bottom:calc(2 * var(--universal-margin));border-bottom:.0625rem solid var(--border-color);padding-top:5rem;margin-top:-4.25rem}.card.code-card{margin-top:calc(5 * var(--universal-margin));background:var(--pre-back-color)}.card.code-card .section.card-content{background:var(--back-color);padding:calc(1.5 * var(--universal-padding))}.card.code-card .collapse{display:block;font-size:.75rem;font-family:Roboto Mono, Menlo, Consolas, monospace;text-transform:uppercase;background:var(--pre-back-color);color:var(--collapse-color);padding:calc(1.5 * var(--universal-padding)) calc(1.5 * var(--universal-padding)) calc(2 * var(--universal-padding)) calc(2.25 * var(--universal-padding));margin-left:calc(1.5 * var(--universal-margin));cursor:pointer;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23607D8B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-plus-square'%3E%3Crect x='3' y='3' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='12' y1='8' x2='12' y2='16'%3E%3C/line%3E%3Cline x1='8' y1='12' x2='16' y2='12'%3E%3C/line%3E%3C/svg%3E");background-position:.25rem .9375rem;background-repeat:no-repeat}.card.code-card .collapse + pre.card-examples{margin-left:calc(1.5 * var(--universal-margin));position:absolute;transform:scaleY(0);transform-origin:top;transition:transform .3s ease}.card.code-card .collapse.toggled{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23607D8B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-minus-square'%3E%3Crect x='3' y='3' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='8' y1='12' x2='16' y2='12'%3E%3C/line%3E%3C/svg%3E");padding-bottom:calc(0.125 * var(--universal-padding))}.card.code-card .collapse.toggled + pre.card-examples{position:relative;transform:scaleY(1)}.card.code-card pre.section.card-code{position:relative;margin-bottom:0;padding-bottom:0;padding-top:calc(3 * var(--universal-padding))}.card.code-card pre.section.card-examples{margin-top:0;margin-bottom:0;border-radius:0 0 calc(4 * var(--universal-border-radius)) calc(4 * var(--universal-border-radius));padding-top:0}.card.code-card pre.section.card-examples:before{content:"";display:block;position:absolute;top:0;left:.5625rem;border-left:.0625rem solid var(--collapse-color);height:calc(100% - 18px)}.card.code-card .copy-button-container{position:relative;z-index:2}.card.code-card .copy-button-container .copy-button{background:var(--copy-button-color);box-sizing:border-box;position:absolute;top:-1.75rem;right:0;margin:calc(2 * var(--universal-margin));padding:calc(2.5 * var(--universal-padding));border-radius:50%;border:0;box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.12),0 1px 5px 0 rgba(0,0,0,.2);transition:all .3s ease;cursor:pointer;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23f0f0f0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-clipboard'%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'%3E%3C/path%3E%3Crect x='8' y='2' width='8' height='4' rx='1' ry='1'%3E%3C/rect%3E%3C/svg%3E");background-position:center center;background-repeat:no-repeat}.card.code-card .copy-button-container .copy-button:hover,.card.code-card .copy-button-container .copy-button:focus{background-color:var(--copy-button-hover-color);box-shadow:0 3px 3px 0 rgba(0,0,0,.14),0 1px 7px 0 rgba(0,0,0,.12),0 3px 1px -1px rgba(0,0,0,.2)}.card.code-card .copy-button-container .copy-button:before{background:var(--back-color);position:absolute;top:-0.25rem;right:-0.25rem;content:"";display:block;box-sizing:border-box;padding:calc(2.5 * var(--universal-padding));border-radius:50%;border:.25rem solid var(--back-color);z-index:-1}.card.code-card .corner{box-sizing:border-box;position:absolute;top:-0.5rem;right:-2.125rem;width:4rem;height:2rem;padding-top:2rem;transform:rotate(45deg);text-align:center;font-size:.75rem;font-weight:500;color:var(--back-color);box-shadow:0 2px 2px 0 rgba(0,0,0,.07),0 3px 1px -2px rgba(0,0,0,.06),0 1px 5px 0 rgba(0,0,0,.1)}.card.code-card .corner.beginner{background:var(--beginner-color)}.card.code-card .corner.intermediate{background:var(--intermediate-color)}.card.code-card .corner.advanced{background:var(--advanced-color)}.toast{position:fixed;bottom:calc(var(--universal-margin) * 2);margin-bottom:0;font-size:.8125rem;left:50%;transform:translate(-50%, -50%);z-index:1111;color:var(--back-color);background:var(--fore-color);border-radius:calc(var(--universal-border-radius) * 16);padding:var(--universal-padding) calc(var(--universal-padding) * 2);box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.12),0 1px 5px 0 rgba(0,0,0,.2);transition:all .3s ease}header{box-sizing:border-box;overflow:hidden;height:3.5rem;position:fixed;width:110%;top:0;left:-5%;box-shadow:0 2px 4px rgba(0,0,0,.5);z-index:5;background:var(--header-back-color);transition:top .3s ease}header h1.logo{position:relative;top:0;margin-top:0;font-size:1.625rem;text-align:center}header h1 a,header h1 a:link,header h1 a:visited{color:var(--header-fore-color)}header h1 a:hover,header h1 a:focus,header h1 a:link:hover,header h1 a:link:focus,header h1 a:visited:hover,header h1 a:visited:focus{text-decoration:none}header h1 small{display:block;font-size:.875rem;color:var(--header-back-color);margin-top:.75rem}header img{height:3.5rem;padding:.375rem;box-sizing:border-box}header #title{position:relative;top:-1.125rem}@media screen and (max-width: 768px){header #title{display:none}}nav{position:fixed;top:6.5rem;left:-320px;width:320px;transition:left .3s ease;z-index:1100;height:calc(100vh - 6.5rem);box-sizing:border-box;display:block;background:var(--nav-back-color);border:0;overflow-y:auto}@media screen and (max-width: 320px){nav{width:100%}}@media screen and (min-width: 768px){nav{width:33vw;left:-33vw}}@media screen and (min-width: 1280px){nav{width:25vw;left:-25vw}}nav.col-nav{box-shadow:0 8px 17px 2px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12),0 5px 5px -3px rgba(0,0,0,.2);left:0}@media screen and (min-width: 768px){nav.col-nav + main.col-centered,nav.col-nav + main.col-centered + footer.col-full-width{grid-column:5/13}}@media screen and (min-width: 1280px){nav.col-nav + main.col-centered{grid-column:4/12;padding-left:8vw}nav.col-nav + main.col-centered + footer.col-full-width{grid-column:4/13}}nav h4{margin:0;padding:calc(2.5 * var(--universal-padding)) calc(2 * var(--universal-padding)) calc(1 * var(--universal-padding)) calc(1 * var(--universal-padding));color:var(--nav-fore-color);font-size:1.5rem}nav h4.collapse{display:block;cursor:pointer;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23f0f0f0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevron-down'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-position:right .5rem top 1.5rem;background-repeat:no-repeat}nav h4.collapse + ul{position:absolute;transform:scaleY(0);transform-origin:top;transition:transform .3s ease}nav h4.collapse.toggled{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23f0f0f0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevron-up'%3E%3Cpolyline points='18 15 12 9 6 15'%3E%3C/polyline%3E%3C/svg%3E");padding-bottom:calc(0.125 * var(--universal-padding))}nav h4.collapse.toggled + ul{position:relative;transform:scaleY(1)}nav h4 + h4{border-top:.0625rem solid var(--nav-link-border-color)}nav h4 > a{display:block;line-height:1}nav h4 > a:hover,nav h4 > a:focus{text-decoration:none}nav ul{width:100%;margin-left:-0.75rem;background:var(--nav-back-color)}nav ul + h4{border-top:.0625rem solid var(--nav-link-border-color)}nav li{margin:calc(0.5 * var(--universal-margin));margin-left:var(--universal-margin);margin-bottom:0;border-left:.0625rem solid var(--nav-link-border-color)}nav li:hover{text-decoration:none;background:var(--nav-link-hover-color)}nav li + li{margin-top:0}nav a{display:block;padding:calc(2 * var(--universal-padding)) calc(1.5 * var(--universal-padding))}nav a:link,nav a:visited{color:var(--nav-link-fore-color)}nav button.social{width:33.333%;margin:0;border:0;border-radius:0;box-sizing:border-box;height:4rem;background-position:center center;background-repeat:no-repeat;cursor:pointer}nav button.social.fb{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='%23f0f0f0' stroke='%23f0f0f0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-facebook'%3E%3Cpath d='M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z'%3E%3C/path%3E%3C/svg%3E");background-color:#1565c0}nav button.social.instagram{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23f0f0f0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-instagram'%3E%3Crect x='2' y='2' width='20' height='20' rx='5' ry='5'%3E%3C/rect%3E%3Cpath d='M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z'%3E%3C/path%3E%3Cline x1='17.5' y1='6.5' x2='17.5' y2='6.5'%3E%3C/line%3E%3C/svg%3E");background-color:#ec407a}nav button.social.twitter{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='%23f0f0f0' stroke='%23f0f0f0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-twitter'%3E%3Cpath d='M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z'%3E%3C/path%3E%3C/svg%3E");background-color:#03a9f4}[type=search]{z-index:1000;position:fixed;top:3.5rem;height:3rem;left:-320px;width:320px;color:var(--search-fore-color);background:var(--search-back-color);outline:none;box-sizing:border-box;border:none;border-bottom:.0625rem solid var(--search-border-color);margin-bottom:var(--universal-margin);padding:calc(2 * var(--universal-padding)) calc(1.5 * var(--universal-padding)) var(--universal-padding) calc(1.5 * var(--universal-padding));transition:all .3s ease}@media screen and (max-width: 320px){[type=search]{width:100%}}@media screen and (min-width: 768px){[type=search]{width:33vw;left:-33vw}}@media screen and (min-width: 1280px){[type=search]{width:25vw;left:-25vw}}[type=search].col-nav{box-shadow:0 8px 17px 2px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12),0 5px 5px -3px rgba(0,0,0,.2);left:0}@media screen and (min-width: 768px){[type=search].col-nav + main.col-centered,[type=search].col-nav + main.col-centered + footer.col-full-width{grid-column:5/13}}@media screen and (min-width: 1280px){[type=search].col-nav + main.col-centered{grid-column:4/12;padding-left:8vw}[type=search].col-nav + main.col-centered + footer.col-full-width{grid-column:4/13}}[type=search]:hover,[type=search]:focus{border-bottom:.0625rem solid var(--search-hover-border-color)}[type=search]:focus{box-shadow:0 8px 17px 2px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12),0 5px 5px -3px rgba(0,0,0,.2),inset 0 -0.0625rem 0 0 var(--search-hover-border-color)}.menu-button{position:fixed;top:0;left:0;z-index:1000;box-sizing:border-box;outline:none;height:3.5rem;width:3.5rem;border:0;background:transparent;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fafafa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-more-horizontal'%3E%3Ccircle cx='12' cy='12' r='1'%3E%3C/circle%3E%3Ccircle cx='19' cy='12' r='1'%3E%3C/circle%3E%3Ccircle cx='5' cy='12' r='1'%3E%3C/circle%3E%3C/svg%3E");background-repeat:no-repeat;background-position:.875rem .875rem;cursor:pointer;transition:all .3s ease}.menu-button:hover{background-color:rgba(255,255,255,.08)}.menu-button.toggled{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fafafa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-more-vertical'%3E%3Ccircle cx='12' cy='12' r='1'%3E%3C/circle%3E%3Ccircle cx='12' cy='5' r='1'%3E%3C/circle%3E%3Ccircle cx='12' cy='19' r='1'%3E%3C/circle%3E%3C/svg%3E")}footer{color:var(--footer-fore-color);background:var(--footer-back-color);padding-top:calc(2 * var(--universal-padding));padding-bottom:calc(3 * var(--universal-padding));margin-top:calc(6 * var(--universal-margin))}footer *{font-size:.875rem}footer a,footer a:link,footer a:visited{color:var(--fore-color)}.scroll-to-top{position:fixed;bottom:1rem;right:1.375rem;box-sizing:border-box;z-index:1100;height:2.75rem;width:2.75rem;border:0;border-radius:100%;background:var(--scrolltop-button-color);background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23f0f0f0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-arrow-up'%3E%3Cline x1='12' y1='19' x2='12' y2='5'%3E%3C/line%3E%3Cpolyline points='5 12 12 5 19 12'%3E%3C/polyline%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center center;cursor:pointer;box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.12),0 1px 5px 0 rgba(0,0,0,.2);transition:all .3s ease}.scroll-to-top:hover,.scroll-to-top:focus{background-color:var(--scrolltop-button-hover-color);box-shadow:0 3px 3px 0 rgba(0,0,0,.14),0 1px 7px 0 rgba(0,0,0,.12),0 3px 1px -1px rgba(0,0,0,.2)}.card.contributor > .section.button{font-size:1rem;font-weight:500;text-align:center;display:block;transition:all .3s ease}.card.contributor > .section.button:link,.card.contributor > .section.button:visited{color:var(--fore-color)}.card.contributor > .section.button:link:hover,.card.contributor > .section.button:visited:hover{color:var(--a-link-color);text-decoration:none}