stretchy/style.css.map at gh-pages · Rise-Vision/stretchy · GitHub

1
{"version":3,"sources":["style.css","style.scss","_svg.scss"],"names":[],"mappings":"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","file":"style.css","sourcesContent":["@charset \"UTF-8\";\n@import url(https://fonts.googleapis.com/css?family=Arvo:400,700|Damion);\n/*\n * Cascading Graphics Sheets: Generate SVG data URIs in SCSS!\n * By Lea Verou — http://lea.verou.me\n * Do not use yet, API *will* change.\n */\n/* Helper functions */\nbody {\n  font: 100%/1.5 Rockwell, Arvo, Helvetica Neue, sans-serif;\n  margin: 0; }\n\ncode, pre {\n  font-family: Consolas, Monaco, Ubuntu Mono, monospace; }\n\ninput, textarea, select {\n  border: 2px solid;\n  padding: .1em .3em;\n  font: inherit;\n  background: transparent;\n  color: inherit;\n  box-sizing: border-box; }\n\n::-webkit-input-placeholder {\n  color: rgba(255, 255, 255, 0.5); }\n\n::-moz-placeholder {\n  color: rgba(255, 255, 255, 0.5); }\n\nh1 {\n  margin: 0;\n  font: 300% Damion, cursive; }\n\na {\n  color: inherit; }\n\nheader, section, footer {\n  max-width: 900px;\n  padding: 1.5em calc(50% - 450px);\n  background: #4daab3;\n  color: #f5ebd6; }\n\n@media (max-width: 950px) {\n  header, section, footer {\n    padding: 1.5em 2em; } }\n\nheader {\n  display: -webkit-flex;\n  display: flex; }\n  header > h1 {\n    display: inline-block;\n    width: 350px;\n    margin-bottom: -.66em;\n    margin-left: -2em; }\n  header iframe {\n    display: block;\n    width: 100%;\n    border: 0; }\n  header > div {\n    display: -webkit-flex;\n    display: flex;\n    -webkit-flex-flow: column;\n    flex-flow: column;\n    -webkit-flex: 1;\n    flex: 1;\n    text-align: right;\n    margin: 0; }\n  header p {\n    -webkit-flex: 1;\n    flex: 1;\n    margin: 0;\n    font-size: 150%;\n    line-height: 1.2;\n    font-weight: bold;\n    letter-spacing: -.03em; }\n  header nav {\n    font: 160% Damion, cursive; }\n    header nav ul {\n      margin: 0; }\n    header nav li {\n      display: inline;\n      list-style: none; }\n    header nav a {\n      display: inline-block;\n      padding: .15em .4em .15em .3em;\n      border-radius: .3em;\n      text-decoration: none;\n      border: .12em solid transparent;\n      line-height: 1; }\n    header nav a[href=\"stretchy.js\"],\n    header nav a:hover {\n      border-color: #f5ebd6; }\n    header nav a:hover {\n      background: #f5ebd6;\n      color: #4daab3; }\n\nsection:nth-of-type(odd) {\n  background: #f5ebd6;\n  color: black; }\n  section:nth-of-type(odd) h1 {\n    color: #994433; }\n\nsection:nth-of-type(even) {\n  padding-top: 2em;\n  padding-bottom: 2em;\n  background: url('data:image/svg+xml,<svg viewBox=\"0 0 200 100\" xmlns=\"http://www.w3.org/2000/svg\"><polygon points=\"0,0 100,100 200,0\" fill=\"%23f5ebd6\" /></svg>') top/1em auto repeat-x, url('data:image/svg+xml,<svg viewBox=\"0 0 200 100\" xmlns=\"http://www.w3.org/2000/svg\"><polygon points=\"0,100 100,0 200,100\" fill=\"%23f5ebd6\" /></svg>') bottom/1em auto repeat-x;\n  background-color: #994433; }\n  section:nth-of-type(even) h1 {\n    color: #f5ebd6; }\n  section:nth-of-type(even):last-of-type {\n    background-image: url('data:image/svg+xml,<svg viewBox=\"0 0 200 100\" xmlns=\"http://www.w3.org/2000/svg\"><polygon points=\"0,0 100,100 200,0\" fill=\"%23f5ebd6\" /></svg>'), url('data:image/svg+xml,<svg viewBox=\"0 0 200 100\" xmlns=\"http://www.w3.org/2000/svg\"><polygon points=\"0,100 100,0 200,100\" fill=\"%234daab3\" /></svg>'); }\n\n#features ul {\n  padding: 0;\n  list-style: none; }\n\n@media (min-width: 600px) {\n  #features ul {\n    -webkit-columns: 2;\n    -moz-columns: 2;\n    columns: 2; } }\n\n#features li {\n  position: relative;\n  break-inside: avoid;\n  -webkit-column-break-inside: avoid;\n  font-size: 70%;\n  margin: 0 0 1em 2.5em; }\n\n#features li::before {\n  content: \"✓\";\n  position: absolute;\n  top: .05em;\n  right: 100%;\n  margin-right: .1em;\n  font-size: 320%;\n  line-height: 1;\n  color: #4daab3; }\n\n#features li strong {\n  display: block;\n  font-size: 150%; }\n  #features li strong a:not(:hover) {\n    text-decoration: none; }\n\n#examples {\n  overflow: hidden; }\n  #examples label,\n  #examples textarea {\n    display: block; }\n  #examples label:first-of-type {\n    float: right;\n    margin-top: -.6em; }\n  #examples label {\n    margin: 1em 0; }\n\n#api dt {\n  font-weight: bold; }\n\n#api dd + dt {\n  margin-top: 1em; }\n\nfooter {\n  background: #4daab3 url(logo.svg) right/auto 100% no-repeat;\n  background-origin: content-box; }\n\n.github-ribbon {\n  position: absolute;\n  top: 0;\n  left: 0;\n  transform: rotate(90deg) translateX(70.71068%) rotate(-90deg) rotate(-45deg) translateY(-100%);\n  transform-origin: 0 0;\n  padding: .4em 3em;\n  background: #994433;\n  text-decoration: none;\n  color: #f5ebd6;\n  box-shadow: 0 0.1em 0 0.1em rgba(0, 0, 0, 0.15); }\n  .github-ribbon:hover {\n    background: black;\n    color: white; }\n\n@media (min-width: 1150px) {\n  .social-media {\n    position: absolute;\n    top: 1em;\n    right: 1em;\n    width: -webkit-min-content;\n    width: -moz-min-content;\n    width: min-content; } }\n\n#carbonads {\n  position: absolute;\n  top: 75vh;\n  right: 1em;\n  max-width: 130px;\n  padding: 1em;\n  border: 1px solid silver;\n  font-size: 50%;\n  line-height: 1.5;\n  background: rgba(255, 255, 255, 0.9); }\n\n@media (max-width: 950px) {\n  #carbonads {\n    display: none; } }\n\n.carbon-text {\n  display: block;\n  text-decoration: none; }\n","// Colors\n$accent1: hsl(185, 40%, 50%); // turquoise\n$accent2: hsl(10, 50%, 40%); // dark red\n$base: hsl(40, 60%, 90%); // beige\n\n@import url(https://fonts.googleapis.com/css?family=Arvo:400,700|Damion);\n@import \"_svg\";\n\nbody {\n\tfont: 100%/1.5 Rockwell, Arvo, Helvetica Neue, sans-serif;\n\tmargin: 0;\n}\n\ncode, pre {\n\tfont-family: Consolas, Monaco, Ubuntu Mono, monospace;\n}\n\ninput, textarea, select {\n\tborder: 2px solid;\n\tpadding: .1em .3em;\n\tfont: inherit;\n\tbackground: transparent;\n\tcolor: inherit;\n\tbox-sizing: border-box;\n}\n\n::-webkit-input-placeholder { color: hsla(0,0%,100%,.5); }\n::-moz-placeholder { color: hsla(0,0%,100%,.5); }\n\nh1 {\n\tmargin: 0;\n\tfont: 300% Damion, cursive;\n}\n\na {\n\tcolor: inherit;\n}\n\nheader, section, footer {\n\tmax-width: 900px;\n\tpadding: 1.5em calc(50% - 450px);\n\tbackground: $accent1;\n\tcolor: $base;\n}\n\n@media (max-width: 950px) {\n\theader, section, footer {\n\t\tpadding: 1.5em 2em;\n\t}\n}\n\nheader {\n\tdisplay: -webkit-flex;\n\tdisplay: flex;\n\n\t& > h1 {\n\t\tdisplay: inline-block;\n\t\twidth: 350px;\n\t\tmargin-bottom: -.66em;\n\t\tmargin-left: -2em;\n\t}\n\n\tiframe {\n\t\tdisplay: block;\n\t\twidth: 100%;\n\t\tborder: 0;\n\t}\n\n\t& > div {\n\t\tdisplay: -webkit-flex;\n\t\tdisplay: flex;\n\t\t-webkit-flex-flow: column;\n\t\tflex-flow: column;\n\t\t-webkit-flex: 1;\n\t\tflex: 1;\n\t\ttext-align: right;\n\t\tmargin: 0;\n\t}\n\n\t\tp {\n\t\t\t-webkit-flex: 1;\n\t\t\tflex: 1;\n\t\t\tmargin: 0;\n\t\t\tfont-size: 150%;\n\t\t\tline-height: 1.2;\n\t\t\tfont-weight: bold;\n\t\t\tletter-spacing: -.03em;\n\t\t}\n\n\t\tnav {\n\t\t\tfont: 160% Damion, cursive;\n\n\t\t\tul {\n\t\t\t\tmargin: 0;\n\t\t\t}\n\n\t\t\tli {\n\t\t\t\tdisplay: inline;\n\t\t\t\tlist-style: none;\n\t\t\t}\n\n\t\t\ta {\n\t\t\t\tdisplay: inline-block;\n\t\t\t\tpadding: .15em .4em .15em .3em;\n\t\t\t\tborder-radius: .3em;\n\t\t\t\ttext-decoration: none;\n\t\t\t\tborder: .12em solid transparent;\n\t\t\t\tline-height: 1;\n\t\t\t}\n\n\t\t\ta[href=\"stretchy.js\"],\n\t\t\ta:hover {\n\t\t\t\tborder-color: $base;\n\t\t\t}\n\n\t\t\ta:hover {\n\t\t\t\tbackground: $base;\n\t\t\t\tcolor: $accent1;\n\t\t\t}\n\t\t}\n}\n\nsection:nth-of-type(odd) {\n\tbackground: $base;\n\tcolor: black;\n\n\th1 {\n\t\tcolor: $accent2;\n\t}\n}\n\nsection:nth-of-type(even) {\n\tpadding-top: 2em;\n\tpadding-bottom: 2em;\n\tbackground: svg(svg-polygon($base, \"0,0 100,100 200,0\"), \"0 0 200 100\") top / 1em auto repeat-x,\n\t            svg(svg-polygon($base, \"0,100 100,0 200,100\"), \"0 0 200 100\") bottom / 1em auto repeat-x;\n\tbackground-color: $accent2;\n\n\th1 {\n\t\tcolor: $base;\n\t}\n\n\t&:last-of-type {\n\t\tbackground-image: svg(svg-polygon($base, \"0,0 100,100 200,0\"), \"0 0 200 100\"),\n\t\t                  svg(svg-polygon($accent1, \"0,100 100,0 200,100\"), \"0 0 200 100\");\n\t}\n}\n\n#features {\n\tul {\n\t\tpadding: 0;\n\t\tlist-style: none;\n\t}\n\n\t@media (min-width: 600px) {\n\t\tul {\n\t\t\t-webkit-columns: 2;\n\t\t\t-moz-columns: 2;\n\t\t\tcolumns: 2;\n\t\t}\n\t}\n\n\t\tli {\n\t\t\tposition: relative;\n\t\t\tbreak-inside: avoid;\n\t\t\t-webkit-column-break-inside: avoid;\n\t\t\tfont-size: 70%;\n\t\t\tmargin: 0 0 1em 2.5em;\n\t\t}\n\t\t\tli::before {\n\t\t\t\tcontent: \"✓\";\n\t\t\t\tposition: absolute;\n\t\t\t\ttop: .05em;\n\t\t\t\tright: 100%;\n\t\t\t\tmargin-right: .1em;\n\t\t\t\tfont-size: 320%;\n\t\t\t\tline-height: 1;\n\t\t\t\tcolor: $accent1;\n\t\t\t}\n\n\t\t\tli strong {\n\t\t\t\tdisplay: block;\n\t\t\t\tfont-size: 150%;\n\n\t\t\t\ta:not(:hover) {\n\t\t\t\t\ttext-decoration: none;\n\t\t\t\t}\n\t\t\t}\n}\n\n#examples {\n\toverflow: hidden;\n\n\tlabel,\n\ttextarea {\n\t\tdisplay: block;\n\t}\n\n\ttextarea {\n\n\t}\n\n\tlabel:first-of-type {\n\t\tfloat: right;\n\t\tmargin-top: -.6em;\n\t}\n\n\tlabel {\n\t\tmargin: 1em 0;\n\t}\n}\n\n#api {\n\tdt {\n\t\tfont-weight: bold;\n\t}\n\n\tdd + dt {\n\t\tmargin-top: 1em;\n\t}\n}\n\nfooter {\n\tbackground: $accent1 url(logo.svg) right / auto 100% no-repeat;\n\tbackground-origin: content-box;\n}\n\n.github-ribbon {\n\tposition: absolute;\n\ttop: 0;\n\tleft: 0;\n\ttransform: rotate(90deg) translateX(70.71067814%) rotate(-90deg) rotate(-45deg) translateY(-100%);\n\ttransform-origin: 0 0;\n\tpadding: .4em 3em;\n\tbackground: $accent2;\n\ttext-decoration: none;\n\tcolor: $base;\n\tbox-shadow: 0 .1em 0 .1em rgba(0,0,0,.15);\n\n\t&:hover {\n\t\tbackground: black;\n\t\tcolor: white;\n\t}\n}\n\n.social-media {\n\n\n\t@media (min-width: 1150px) {\n\t\t& {\n\t\t\tposition: absolute;\n\t\t\ttop: 1em;\n\t\t\tright: 1em;\n\t\t\twidth: -webkit-min-content;\n\t\t\twidth: -moz-min-content;\n\t\t\twidth: min-content;\n\t\t}\n\t}\n}\n\n#carbonads {\n    position: absolute;\n    top: 75vh;\n    right: 1em;\n    max-width: 130px;\n    padding: 1em;\n    border: 1px solid silver;\n    font-size: 50%;\n    line-height: 1.5;\n    background: hsla(0,0%,100%,.9);\n}\n\n@media (max-width: 950px) {\n    #carbonads {\n        display: none;\n    }\n}\n\n.carbon-text {\n    display: block;\n    text-decoration: none;\n}","/*\n * Cascading Graphics Sheets: Generate SVG data URIs in SCSS!\n * By Lea Verou — http://lea.verou.me\n * Do not use yet, API *will* change.\n */\n\n /* Helper functions */\n\n // Replace all instances of $search in $string with $replace\n @function str-replace($string, $search, $replace) {\n \t$length: str-length($search);\n \t$index: str-index($string, $search);\n \t$slice: $string;\n\n \t@while $index != null {\n \t  $start: if($index > 1, str-slice($slice, 1, $index - 1), '');\n \t\t$slice: $start + $replace + str-slice($slice, $index + $length);\n\n \t\t$index: str-index($slice, $search);\n \t}\n\n \t@return $slice;\n }\n\n// Create an inline SVG data URI\n@function svg($content, $viewBox: \"0 0 100 100\") {\n\t$content: str-replace($content, '#', '%23'); // Firefox needs this\n\n\t@return url('data:image/svg+xml,<svg viewBox=\"#{$viewBox}\" xmlns=\"http://www.w3.org/2000/svg\">#{$content}</svg>');\n}\n\n@function svg-polygon($fill, $points) {\n\t@return unquote('<polygon points=\"#{$points}\" fill=\"#{$fill}\" />');\n}\n\n@function svg-path($fill, $d) {\n\t@return unquote('<path d=\"#{$d}\" fill=\"#{$fill}\" />');\n}\n\n@function svg-rect($fill, $width: '100%', $height: '100%', $x: '0', $y: '0', $attr:'') {\n\t@return unquote('<rect x=\"#{$x}\" y=\"#{$y}\" width=\"#{$width}\" height=\"#{$height}\" fill=\"#{$fill}\" #{$attr}/>');\n}\n\n@function svg-square($fill, $width: '100%', $x: '0', $y: '0') {\n\t@return svg-rect($fill, $width, $width, $x, $y);\n}\n\n@function svg-circle($fill, $r: '50%', $cx: '50%', $cy: '50%') {\n\t@return unquote('<circle cx=\"#{$cx}\" cy=\"#{$cy}\" r=\"#{$r}\" fill=\"#{$fill}\"/>');\n}\n\n@function svg-line($stroke, $x1: 0, $y1: 0, $x2: 100, $y2: 100, $width: '1pt') {\n\t@return unquote('<line x1=\"#{$x1}\" y1=\"#{$y1}\" x2=\"#{$x2}\" y2=\"#{$y2}\" stroke=\"#{$stroke}\" stroke-width=\"#{$width}\"/>');\n}\n\n@function svg-text($text, $y: 1.2em, $style:'', $x:0) {\n\t@return unquote('<text y=\"#{$y}\" x=\"#{$x}\" style=\"#{$style}\">#{$text}</text>');\n}"]}