forked from LeaVerou/stretchy
-
Notifications
You must be signed in to change notification settings - Fork 0
/
style.css.map
1 lines (1 loc) · 14.4 KB
/
style.css.map
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}"],"sourceRoot":"/source/"}