├── .gitignore ├── Gruntfile.js ├── README.md ├── clip.min.js ├── dev ├── clip.js ├── flickity.pkgd.min.js ├── index.html ├── jquery.browser.min.js ├── style.css ├── style.css.map └── style.scss ├── draggabilly.min.js ├── favicon.ico ├── fonts ├── browsers.eot ├── browsers.svg ├── browsers.ttf └── browsers.woff ├── gulpfile.js ├── index.html ├── jquery.min.js ├── package-lock.json ├── package.json ├── pics ├── colorado.jpg ├── favicon.png ├── fierenze.JPG ├── golf.jpg ├── homescreen-196x196.png ├── isaac.jpg ├── miami.JPG ├── pittsburgh-night.jpg ├── pittsburgh.jpg └── sparkler.jpg └── style.min.css /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | .sass-cache 3 | .sass-cache/* 4 | .Trashes 5 | node_modules 6 | npm-debug.log -------------------------------------------------------------------------------- /Gruntfile.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | module.exports = function (grunt) { 3 | grunt.initConfig({ 4 | 5 | pkg: grunt.file.readJSON('package.json'), 6 | 7 | htmlmin: { 8 | dist: { 9 | options: { 10 | removeComments: true, 11 | collapseWhitespace: true, 12 | minifyJS: true 13 | }, 14 | files: { 15 | 'index.html' : 'dev/index.html' 16 | } 17 | } 18 | }, 19 | uglify: { 20 | my_target: { 21 | options : { 22 | compress: { 23 | drop_console: true 24 | } 25 | }, 26 | files: { 27 | 'clip.min.js': ['dev/clip.js'] 28 | } 29 | } 30 | }, 31 | sass: { 32 | dist: { 33 | files: { 34 | 'dev/style.css' : 'dev/style.scss' 35 | } 36 | } 37 | }, 38 | autoprefixer: { 39 | options: { 40 | browsers: ['last 3 version'] 41 | }, 42 | dist: { 43 | files: { 44 | 'dev/style.css' : 'dev/style.css' 45 | } 46 | } 47 | }, 48 | remfallback: { 49 | options: { 50 | log: false, 51 | replace: false 52 | }, 53 | your_target: { 54 | files: { 55 | // 'Sites/dev/style.ie8.css': ['sites/dev/style.css'] 56 | } 57 | } 58 | }, 59 | cssmin: { 60 | add_banner: { 61 | options: { 62 | report: true, 63 | banner: '/* \nBennett Feely\nhttp://bennettfeely.com \n*/' 64 | }, 65 | files: { 66 | 'style.min.css' : ['dev/style.css'] 67 | } 68 | } 69 | }, 70 | watch: { 71 | options: { 72 | livereload: false 73 | }, 74 | html : { 75 | files: ['dev/index.html'], 76 | tasks: ['htmlmin'] 77 | }, 78 | scripts : { 79 | files: ['dev/clip.js'], 80 | tasks: ['uglify'] 81 | }, 82 | sass: { 83 | files: ['dev/style.scss'], 84 | tasks: ['sass','autoprefixer','cssmin'], 85 | options: { 86 | livereload: false 87 | }, 88 | }, 89 | } 90 | }); 91 | 92 | grunt.loadNpmTasks('grunt-contrib-htmlmin'); 93 | grunt.loadNpmTasks('grunt-contrib-uglify'); 94 | 95 | grunt.loadNpmTasks('grunt-contrib-sass'); 96 | grunt.loadNpmTasks('grunt-autoprefixer'); 97 | grunt.loadNpmTasks('grunt-remfallback'); 98 | grunt.loadNpmTasks('grunt-contrib-cssmin'); 99 | 100 | grunt.loadNpmTasks('grunt-contrib-watch'); 101 | grunt.registerTask('default', ["watch"]); 102 | }; 103 | 104 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Clippy 2 | 3 | Live: https://bennettfeely.com/clippy 4 | 5 | Shape up your website with CSS clip-paths! 6 | 7 | Clippy is a tool for generating values for shape functions for the new and cool CSS clip-path property. 8 | 9 | ## Browser Support for CSS clip-path 10 | 11 | [caniuse.com](http://caniuse.com/#search=clip-path) 12 | -------------------------------------------------------------------------------- /dev/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Clippy — CSS clip-path maker 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 |
17 | CSS clip-path maker 18 | 19 | 20 |
21 | 22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
to add points
to custom polygon.
31 |
32 |
33 |
34 | 35 |
36 |

Custom shape

37 | 38 |
39 | 40 |
41 |
42 |

Round edges

43 | 44 |
45 |

The inset() shape optionally allows values similar to border-radius for rounded edges. This new feature may be buggy in your browser.

46 |
47 | 48 | 51 | 52 |
53 |
54 | 55 | -webkit-clip-path: ; 56 | clip-path: ; 57 |
58 | 59 | 60 |
61 |
62 | 63 |
64 |
65 |
66 |

Round edges

67 | 68 |
69 |

The inset() shape optionally allows values similar to border-radius for rounded edges. This new feature may be buggy in your browser.

70 |
71 | 72 |
73 |

Custom shape

74 | 75 |
76 | 77 |
78 | 79 |
80 | 81 |
82 |
83 |

Prefix

84 | 85 | 86 | 87 |
88 | 89 | 105 | 106 |
107 |

Demo Size

108 | 109 |

×

110 | 111 |
112 | 113 |
114 |

Demo Background

115 | 116 |
117 | 118 | 119 | 120 | 121 |
122 | 123 | 124 | 125 | 126 |
127 |

Show outside clip-path

128 | 129 | 130 |
131 |
132 | 133 |
134 |

About Clip Paths

135 | 136 |

The clip-path property allows you to make complex shapes in CSS by clipping an element to a basic shape (circle, ellipse, polygon, or inset), or to an SVG source.

137 |

CSS Animations and transitions are possible with two or more clip-path shapes with the same number of points.

138 |
139 | 140 | 141 |

Browser Support caniuse.com

142 | 143 |
144 | 145 | 146 | 147 | 148 | 149 |
150 | 151 | 152 |
153 |

Brought to you by Bennett Feely

154 | 155 | 159 | 160 |

Find this project on Github.
This demo uses Draggabilly by Dave Desandro.

161 |
162 |
163 |
164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | -------------------------------------------------------------------------------- /dev/jquery.browser.min.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * jQuery Browser Plugin 0.0.6 3 | * https://github.com/gabceb/jquery-browser-plugin 4 | * 5 | * Original jquery-browser code Copyright 2005, 2013 jQuery Foundation, Inc. and other contributors 6 | * http://jquery.org/license 7 | * 8 | * Modifications Copyright 2014 Gabriel Cebrian 9 | * https://github.com/gabceb 10 | * 11 | * Released under the MIT license 12 | * 13 | * Date: 30-03-2014 14 | */!function(a,b){"use strict";var c,d;if(a.uaMatch=function(a){a=a.toLowerCase();var b=/(opr)[\/]([\w.]+)/.exec(a)||/(chrome)[ \/]([\w.]+)/.exec(a)||/(version)[ \/]([\w.]+).*(safari)[ \/]([\w.]+)/.exec(a)||/(webkit)[ \/]([\w.]+)/.exec(a)||/(opera)(?:.*version|)[ \/]([\w.]+)/.exec(a)||/(msie) ([\w.]+)/.exec(a)||a.indexOf("trident")>=0&&/(rv)(?::| )([\w.]+)/.exec(a)||a.indexOf("compatible")<0&&/(mozilla)(?:.*? rv:([\w.]+)|)/.exec(a)||[],c=/(ipad)/.exec(a)||/(iphone)/.exec(a)||/(android)/.exec(a)||/(windows phone)/.exec(a)||/(win)/.exec(a)||/(mac)/.exec(a)||/(linux)/.exec(a)||/(cros)/i.exec(a)||[];return{browser:b[3]||b[1]||"",version:b[2]||"0",platform:c[0]||""}},c=a.uaMatch(b.navigator.userAgent),d={},c.browser&&(d[c.browser]=!0,d.version=c.version,d.versionNumber=parseInt(c.version)),c.platform&&(d[c.platform]=!0),(d.android||d.ipad||d.iphone||d["windows phone"])&&(d.mobile=!0),(d.cros||d.mac||d.linux||d.win)&&(d.desktop=!0),(d.chrome||d.opr||d.safari)&&(d.webkit=!0),d.rv){var e="msie";c.browser=e,d[e]=!0}if(d.opr){var f="opera";c.browser=f,d[f]=!0}if(d.safari&&d.android){var g="android";c.browser=g,d[g]=!0}d.name=c.browser,d.platform=c.platform,a.browser=d}(jQuery,window); -------------------------------------------------------------------------------- /dev/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | -moz-box-sizing: border-box; 3 | box-sizing: border-box; 4 | line-height: 1; 5 | vertical-align: middle; 6 | margin: 0; 7 | padding: 0; 8 | border: 0; 9 | } 10 | 11 | header, 12 | section, 13 | main, 14 | figure { 15 | display: block; 16 | } 17 | 18 | html, 19 | body { 20 | position: relative; 21 | height: 100%; 22 | } 23 | 24 | body { 25 | font: 100%/1.5 "Alegreya Sans", sans-serif; 26 | background: #d3d0c9; 27 | color: #100a09; 28 | } 29 | 30 | @media (min-width: 800px) { 31 | body { 32 | padding: 0 0.5rem 0; 33 | padding-left: -webkit-calc(100% - 23.625rem); 34 | padding-left: calc(100% - 23.625rem); 35 | } 36 | } 37 | 38 | .main { 39 | display: -webkit-box; 40 | display: -webkit-flex; 41 | display: -ms-flexbox; 42 | display: flex; 43 | -webkit-box-orient: vertical; 44 | -webkit-box-direction: normal; 45 | -webkit-flex-direction: column; 46 | -ms-flex-direction: column; 47 | flex-direction: column; 48 | } 49 | 50 | @media (min-width: 800px) { 51 | .main { 52 | position: fixed; 53 | top: 0; 54 | left: 0; 55 | height: 100%; 56 | right: 23.625rem; 57 | padding: 0.25rem 0.25rem 0.25rem 0.75rem; 58 | -ms-touch-action: none; 59 | touch-action: none; 60 | } 61 | } 62 | 63 | header { 64 | display: -webkit-box; 65 | display: -webkit-flex; 66 | display: -ms-flexbox; 67 | display: flex; 68 | -webkit-box-align: center; 69 | -webkit-align-items: center; 70 | -ms-flex-align: center; 71 | align-items: center; 72 | -webkit-box-pack: justify; 73 | -webkit-justify-content: space-between; 74 | -ms-flex-pack: justify; 75 | justify-content: space-between; 76 | background: rgba(251, 252, 247, 0.75); 77 | box-shadow: inset 0 -1px rgba(211, 208, 201, 0.25); 78 | padding: 0.75rem 1rem 0.75rem; 79 | } 80 | 81 | @media (min-width: 800px) { 82 | header { 83 | font-size: larger; 84 | margin-top: 0.5rem; 85 | padding: 0.75rem 1rem; 86 | border-radius: 2px 2px 0 0; 87 | } 88 | } 89 | 90 | header a { 91 | display: inline-block; 92 | text-decoration: none; 93 | color: inherit; 94 | padding: 0.25rem; 95 | -ms-user-select: none; 96 | -webkit-user-select: none; 97 | -moz-user-select: none; 98 | user-select: none; 99 | } 100 | 101 | header a:hover { 102 | text-decoration: underline; 103 | } 104 | 105 | header iframe { 106 | max-width: 95px; 107 | -webkit-animation: load 1s both; 108 | animation: load 1s both; 109 | } 110 | 111 | @-webkit-keyframes load { 112 | from { 113 | opacity: 0; 114 | } 115 | } 116 | 117 | @keyframes load { 118 | from { 119 | opacity: 0; 120 | } 121 | } 122 | 123 | .demo-container { 124 | display: -webkit-box; 125 | display: -webkit-flex; 126 | display: -ms-flexbox; 127 | display: flex; 128 | -webkit-box-pack: center; 129 | -webkit-justify-content: center; 130 | -ms-flex-pack: center; 131 | justify-content: center; 132 | -webkit-box-align: center; 133 | -webkit-align-items: center; 134 | -ms-flex-align: center; 135 | align-items: center; 136 | -webkit-box-flex: 1; 137 | -webkit-flex: 1; 138 | -ms-flex: 1; 139 | flex: 1; 140 | background: #fbfcf7; 141 | box-shadow: 0 1px 2px rgba(16, 10, 9, 0.15); 142 | position: relative; 143 | z-index: 100; 144 | padding-top: 0.5rem; 145 | -ms-user-select: none; 146 | -webkit-user-select: none; 147 | -moz-user-select: none; 148 | user-select: none; 149 | -webkit-tap-highlight-color: transparent; 150 | -webkit-touch-callout: none; 151 | tap-highlight-color: transparent; 152 | touch-callout: none; 153 | } 154 | 155 | @media (min-width: 800px) { 156 | .demo-container { 157 | border-radius: 0 0 2px 2px; 158 | } 159 | } 160 | 161 | .demo { 162 | position: relative; 163 | padding: 0 0 1rem; 164 | } 165 | 166 | .customizing .demo { 167 | cursor: crosshair; 168 | } 169 | 170 | .box { 171 | position: relative; 172 | box-shadow: inset 0 0 0 10px #fbfcf7, inset 0 0 0 11px #d3d0c9; 173 | -ms-touch-action: none; 174 | touch-action: none; 175 | } 176 | 177 | .shadowboard, 178 | .clipboard { 179 | position: absolute; 180 | top: 10px; 181 | left: 10px; 182 | right: 10px; 183 | bottom: 10px; 184 | background-color: #d3d0c9; 185 | background-image: url(pics/pittsburgh.jpg); 186 | background-size: cover; 187 | background-position: center center; 188 | } 189 | 190 | .shadowboard { 191 | pointer-events: none; 192 | opacity: 0; 193 | -webkit-transition: opacity 0.375s; 194 | transition: opacity 0.375s; 195 | } 196 | 197 | .handles { 198 | position: absolute; 199 | top: 0; 200 | left: 0; 201 | right: 0; 202 | bottom: 0; 203 | } 204 | 205 | .handle, 206 | .delete-point { 207 | position: absolute; 208 | width: 20px; 209 | height: 20px; 210 | } 211 | 212 | .handle { 213 | border-radius: 50%; 214 | box-shadow: inset 0 0 0 10px; 215 | opacity: 0.8; 216 | -webkit-transition: opacity 0.25s; 217 | transition: opacity 0.25s; 218 | cursor: -webkit-grab; 219 | cursor: -moz-grab; 220 | cursor: grab; 221 | } 222 | 223 | .customizing .handle { 224 | cursor: crosshair; 225 | } 226 | 227 | .customizing:not(.customizing-no-poly) .handle[data-handle="1"] { 228 | cursor: pointer; 229 | } 230 | 231 | .customizing:not(.customizing-no-poly) .handle[data-handle="1"]:hover { 232 | border-radius: 2px; 233 | color: black; 234 | } 235 | 236 | .customizing:not(.customizing-no-poly) .handle[data-handle="1"]:hover:before { 237 | display: block; 238 | position: absolute; 239 | top: 0; 240 | left: 0; 241 | right: 0; 242 | bottom: 0; 243 | content: ""; 244 | -webkit-clip-path: polygon( 245 | 67% 30%, 246 | 43% 54%, 247 | 33% 42%, 248 | 24% 51%, 249 | 44% 72%, 250 | 76% 39% 251 | ); 252 | clip-path: polygon(67% 30%, 43% 54%, 33% 42%, 24% 51%, 44% 72%, 76% 39%); 253 | background: #d3d0c9; 254 | } 255 | 256 | .customizing:not(.customizing-no-poly) .handle[data-handle="1"]:active { 257 | color: #555; 258 | } 259 | 260 | .customizing:not(.customizing-no-poly) .handle[data-handle="1"]:active:before { 261 | background: white; 262 | } 263 | 264 | .handle:after { 265 | display: block; 266 | content: ""; 267 | position: absolute; 268 | top: -8px; 269 | left: -8px; 270 | right: -8px; 271 | bottom: -8px; 272 | } 273 | 274 | .demo:hover .handle { 275 | opacity: 1; 276 | } 277 | 278 | .handle.is-dragging { 279 | z-index: 100; 280 | box-shadow: inset 0 0 0 3px; 281 | cursor: none; 282 | -webkit-transition: box-shadow 0; 283 | transition: box-shadow 0; 284 | } 285 | 286 | .handle.bar { 287 | border-radius: 20px; 288 | } 289 | 290 | .handle.bar:after { 291 | top: -5px; 292 | left: -5px; 293 | right: -5px; 294 | bottom: -5px; 295 | } 296 | 297 | .delete-point { 298 | position: absolute; 299 | left: 22px; 300 | top: 0; 301 | width: 25px; 302 | padding-left: 5px; 303 | border-radius: 3px; 304 | background: #d3d0c9; 305 | -webkit-transform: scale3d(0, 0, 0); 306 | -ms-transform: scale3d(0, 0, 0); 307 | transform: scale3d(0, 0, 0); 308 | -webkit-transform-origin: left center; 309 | -ms-transform-origin: left center; 310 | transform-origin: left center; 311 | cursor: pointer; 312 | opacity: 0.75; 313 | -webkit-clip-path: polygon(25% 0%, 100% 1%, 100% 100%, 25% 100%, 0% 50%); 314 | clip-path: polygon(25% 0%, 100% 1%, 100% 100%, 25% 100%, 0% 50%); 315 | -webkit-transition: -webkit-transform 0.25s, opacity 0.25s; 316 | transition: transform 0.25s, opacity 0.25s; 317 | } 318 | 319 | .show-delete .delete-point { 320 | -webkit-transform: scale3d(0.9, 0.9, 0.9); 321 | -ms-transform: scale3d(0.9, 0.9, 0.9); 322 | transform: scale3d(0.9, 0.9, 0.9); 323 | -webkit-transition: -webkit-transform 0.25s cubic-bezier(0.15, 1, 0.3, 1.1), 324 | opacity 0.25s; 325 | transition: transform 0.25s cubic-bezier(0.15, 1, 0.3, 1.1), opacity 0.25s; 326 | opacity: 1; 327 | } 328 | 329 | .delete-point:hover { 330 | -webkit-transform: scale3d(1, 1, 1); 331 | -ms-transform: scale3d(1, 1, 1); 332 | transform: scale3d(1, 1, 1); 333 | -webkit-transition: -webkit-transform 0.25s cubic-bezier(0.15, 1, 0.3, 1.1); 334 | transition: transform 0.25s cubic-bezier(0.15, 1, 0.3, 1.1); 335 | opacity: 1; 336 | } 337 | 338 | .delete-point:active { 339 | background: #100a09; 340 | } 341 | 342 | .delete-point:active:after { 343 | background: #d3d0c9; 344 | } 345 | 346 | .delete-point:after { 347 | display: block; 348 | content: ""; 349 | position: absolute; 350 | top: 4px; 351 | left: 9px; 352 | right: 4px; 353 | bottom: 4px; 354 | background: #100a09; 355 | -webkit-clip-path: polygon( 356 | 20% 10%, 357 | 10% 20%, 358 | 40% 50%, 359 | 10% 80%, 360 | 20% 90%, 361 | 50% 60%, 362 | 80% 90%, 363 | 90% 80%, 364 | 60% 50%, 365 | 90% 20%, 366 | 80% 10%, 367 | 50% 40% 368 | ); 369 | clip-path: polygon( 370 | 20% 10%, 371 | 10% 20%, 372 | 40% 50%, 373 | 10% 80%, 374 | 20% 90%, 375 | 50% 60%, 376 | 80% 90%, 377 | 90% 80%, 378 | 60% 50%, 379 | 90% 20%, 380 | 80% 10%, 381 | 50% 40% 382 | ); 383 | } 384 | 385 | .custom-notice { 386 | display: -webkit-box; 387 | display: -webkit-flex; 388 | display: -ms-flexbox; 389 | display: flex; 390 | -webkit-box-pack: center; 391 | -webkit-justify-content: center; 392 | -ms-flex-pack: center; 393 | justify-content: center; 394 | -webkit-box-align: center; 395 | -webkit-align-items: center; 396 | -ms-flex-align: center; 397 | align-items: center; 398 | position: absolute; 399 | top: 0; 400 | left: 0; 401 | right: 0; 402 | bottom: 1rem; 403 | pointer-events: none; 404 | opacity: 0; 405 | -webkit-transition: background 0.25s; 406 | transition: background 0.25s; 407 | background: rgba(255, 255, 255, 0); 408 | } 409 | 410 | .customizing .custom-notice { 411 | opacity: 1; 412 | } 413 | 414 | .custom-notice div { 415 | width: 100%; 416 | text-align: center; 417 | background: rgba(255, 255, 255, 0.9); 418 | padding: 1rem; 419 | margin: 0 2rem; 420 | -webkit-transition: opacity 0.25s; 421 | transition: opacity 0.25s; 422 | border-radius: 2px; 423 | box-shadow: 0 1px 2px rgba(16, 10, 9, 0.15); 424 | opacity: 0; 425 | } 426 | 427 | .start-customizing .custom-notice div { 428 | opacity: 1; 429 | -webkit-animation: pulse 1.5s ease-in-out infinite; 430 | animation: pulse 1.5s ease-in-out infinite; 431 | } 432 | 433 | .touchy:after { 434 | content: "Tap"; 435 | } 436 | 437 | @media (min-width: 800px) { 438 | .touchy:after { 439 | content: "Click"; 440 | } 441 | } 442 | 443 | .dark-panel { 444 | display: none; 445 | background: #100a09; 446 | padding: 0.75rem; 447 | color: white; 448 | -webkit-box-align: center; 449 | -webkit-align-items: center; 450 | -ms-flex-align: center; 451 | align-items: center; 452 | } 453 | 454 | .dark-panel p { 455 | color: #d3d0c9; 456 | margin: 0.5rem 0; 457 | } 458 | 459 | .dark-panel h2:first-child { 460 | color: #d3d0c9; 461 | } 462 | 463 | @media (max-width: 800px) { 464 | .insetting .main .inset { 465 | display: block; 466 | } 467 | } 468 | 469 | @media (min-width: 800px) { 470 | .insetting .side .inset { 471 | display: block; 472 | box-shadow: 0 1px 2px rgba(16, 10, 9, 0.15); 473 | border-radius: 2px; 474 | margin: 0.25rem; 475 | } 476 | } 477 | 478 | @media (max-width: 800px) { 479 | .customizing .main .custom { 480 | display: -webkit-box; 481 | display: -webkit-flex; 482 | display: -ms-flexbox; 483 | display: flex; 484 | } 485 | } 486 | 487 | @media (min-width: 800px) { 488 | .customizing .side .custom { 489 | display: -webkit-box; 490 | display: -webkit-flex; 491 | display: -ms-flexbox; 492 | display: flex; 493 | box-shadow: 0 1px 2px rgba(16, 10, 9, 0.15); 494 | border-radius: 2px; 495 | margin: 0.25rem; 496 | } 497 | } 498 | 499 | .finish, 500 | .inset-round { 501 | font: inherit; 502 | padding: 0.5rem; 503 | border-radius: 5rem; 504 | cursor: pointer; 505 | -webkit-box-flex: 1; 506 | -webkit-flex: 1; 507 | -ms-flex: 1; 508 | flex: 1; 509 | background: rgba(255, 255, 255, 0.35); 510 | color: rgba(255, 255, 255, 0.9); 511 | } 512 | 513 | .finish:hover, 514 | .inset-round:hover { 515 | color: white; 516 | background: rgba(255, 255, 255, 0.4); 517 | } 518 | 519 | .finish:active, 520 | .inset-round:active { 521 | -webkit-animation: none; 522 | animation: none; 523 | background: rgba(255, 255, 255, 0.2); 524 | color: rgba(255, 255, 255, 0.4); 525 | } 526 | 527 | .finish:after, 528 | .inset-round:after { 529 | content: "Finish " attr(data-shape); 530 | } 531 | 532 | .customizing-no-poly .finish, 533 | .customizing-no-poly .inset-round { 534 | -webkit-animation: none; 535 | animation: none; 536 | } 537 | 538 | .customizing-no-poly .finish:after, 539 | .customizing-no-poly .inset-round:after { 540 | content: "Close editor"; 541 | } 542 | 543 | .finish:focus, 544 | .inset-round:focus { 545 | outline: 0; 546 | } 547 | 548 | .inset-round { 549 | font-family: monospace; 550 | text-align: center; 551 | cursor: text; 552 | color: #d3d0c9; 553 | background: black; 554 | box-shadow: inset 0 0 0 0.125rem rgba(211, 208, 201, 0.5); 555 | -webkit-animation: glow 1.5s ease-in-out infinite; 556 | animation: glow 1.5s ease-in-out infinite; 557 | opacity: 0.5; 558 | } 559 | 560 | .inset-round:hover { 561 | background: transparent; 562 | color: #d3d0c9; 563 | -webkit-animation: none; 564 | animation: none; 565 | opacity: 0.75; 566 | } 567 | 568 | .inset-round:focus { 569 | color: #d3d0c9; 570 | box-shadow: inset 0 0 0 0.125rem rgba(211, 208, 201, 0.5); 571 | -webkit-animation: none; 572 | animation: none; 573 | opacity: 1; 574 | } 575 | 576 | @-webkit-keyframes glow { 577 | 50% { 578 | opacity: 0.75; 579 | } 580 | } 581 | 582 | @keyframes glow { 583 | 50% { 584 | opacity: 0.75; 585 | } 586 | } 587 | 588 | .shapes { 589 | position: relative; 590 | max-width: 100%; 591 | background: #d3d0c9; 592 | white-space: nowrap; 593 | overflow-x: hidden; 594 | } 595 | 596 | .shapes:focus { 597 | outline: 0; 598 | } 599 | 600 | .shapes.horizontal { 601 | display: block; 602 | overflow-x: scroll; 603 | } 604 | 605 | .shapes.vertical { 606 | display: none; 607 | } 608 | 609 | @media (min-width: 800px) { 610 | .shapes.horizontal { 611 | display: none; 612 | } 613 | 614 | .shapes.vertical { 615 | display: block; 616 | white-space: normal; 617 | } 618 | } 619 | 620 | @media (max-width: 800px) { 621 | .shapes:after { 622 | display: block; 623 | position: absolute; 624 | content: ""; 625 | pointer-events: none; 626 | bottom: 0; 627 | right: 0; 628 | top: 0; 629 | background: -webkit-linear-gradient(0deg, rgba(211, 208, 201, 0), #d3d0c9); 630 | background: linear-gradient(90deg, rgba(211, 208, 201, 0), #d3d0c9); 631 | width: 1.5rem; 632 | } 633 | } 634 | 635 | ul { 636 | width: 100%; 637 | padding: 0.25rem; 638 | } 639 | 640 | @media (max-width: 800px) { 641 | ul { 642 | white-space: nowrap; 643 | } 644 | } 645 | 646 | @media (min-width: 800px) { 647 | ul { 648 | display: -webkit-box; 649 | display: -webkit-flex; 650 | display: -ms-flexbox; 651 | display: flex; 652 | -webkit-flex-wrap: wrap; 653 | -ms-flex-wrap: wrap; 654 | flex-wrap: wrap; 655 | padding: 0; 656 | -webkit-perspective: 400px; 657 | -ms-perspective: 400px; 658 | perspective: 400px; 659 | overflow-x: hidden; 660 | } 661 | } 662 | 663 | .flickity-viewport { 664 | overflow: hidden; 665 | position: relative; 666 | } 667 | 668 | figure { 669 | display: inline-block; 670 | text-align: center; 671 | padding: 0.625rem 0.25rem; 672 | margin: 0.25rem; 673 | background: white; 674 | width: 4.125rem; 675 | box-shadow: 0 1px 2px rgba(16, 10, 9, 0.15); 676 | border-radius: 2px; 677 | -webkit-transition: background 0.25s, -webkit-transform 0.5s; 678 | transition: background 0.25s, transform 0.5s; 679 | -ms-user-select: none; 680 | -webkit-user-select: none; 681 | -moz-user-select: none; 682 | user-select: none; 683 | -webkit-tap-highlight-color: transparent; 684 | -webkit-touch-callout: none; 685 | tap-highlight-color: transparent; 686 | touch-callout: none; 687 | } 688 | 689 | @media (min-width: 800px) { 690 | figure { 691 | -webkit-box-flex: 4.625rem; 692 | -webkit-flex: 4.625rem; 693 | -ms-flex: 4.625rem; 694 | flex: 4.625rem; 695 | -webkit-transform-origin: top center; 696 | -ms-transform-origin: top center; 697 | transform-origin: top center; 698 | } 699 | 700 | figure:nth-child(n + 9) { 701 | -webkit-transform: translateZ(0) rotateX(-18deg); 702 | -ms-transform: translateZ(0) rotateX(-18deg); 703 | transform: translateZ(0) rotateX(-18deg); 704 | } 705 | 706 | figure:nth-child(n + 13) { 707 | -webkit-transform: translateZ(-1.85rem) rotateX(-36deg); 708 | -ms-transform: translateZ(-1.85rem) rotateX(-36deg); 709 | transform: translateZ(-1.85rem) rotateX(-36deg); 710 | } 711 | 712 | figure:nth-child(n + 17) { 713 | -webkit-transform: translateZ(-6.0125rem) rotateX(-54deg); 714 | -ms-transform: translateZ(-6.0125rem) rotateX(-54deg); 715 | transform: translateZ(-6.0125rem) rotateX(-54deg); 716 | } 717 | 718 | figure:nth-child(n + 21) { 719 | -webkit-transform: translateZ(-9.25rem) rotateX(-72deg); 720 | -ms-transform: translateZ(-9.25rem) rotateX(-72deg); 721 | transform: translateZ(-9.25rem) rotateX(-72deg); 722 | } 723 | 724 | figure:nth-child(n + 25) { 725 | -webkit-transform: translateZ(-11.5625rem) rotateX(-85deg); 726 | -ms-transform: translateZ(-11.5625rem) rotateX(-85deg); 727 | transform: translateZ(-11.5625rem) rotateX(-85deg); 728 | } 729 | 730 | .shapes:hover figure, 731 | .shapes:focus figure { 732 | -webkit-transform: translateZ(0) rotateX(0); 733 | -ms-transform: translateZ(0) rotateX(0); 734 | transform: translateZ(0) rotateX(0); 735 | -webkit-transition: background 0.25s, 736 | -webkit-transform 0.375s cubic-bezier(0.15, 1, 0.3, 1.1); 737 | transition: background 0.25s, 738 | transform 0.375s cubic-bezier(0.15, 1, 0.3, 1.1); 739 | } 740 | 741 | .shapes:hover figure:nth-child(n + 9), 742 | .shapes:focus figure:nth-child(n + 9) { 743 | -webkit-transition-delay: 0.025s; 744 | transition-delay: 0.025s; 745 | } 746 | 747 | .shapes:hover figure:nth-child(n + 13), 748 | .shapes:focus figure:nth-child(n + 13) { 749 | -webkit-transition-delay: 0.05s; 750 | transition-delay: 0.05s; 751 | } 752 | 753 | .shapes:hover figure:nth-child(n + 17), 754 | .shapes:focus figure:nth-child(n + 17) { 755 | -webkit-transition-delay: 0.075s; 756 | transition-delay: 0.075s; 757 | } 758 | 759 | .shapes:hover figure:nth-child(n + 21), 760 | .shapes:focus figure:nth-child(n + 21) { 761 | -webkit-transition-delay: 0.1s; 762 | transition-delay: 0.1s; 763 | } 764 | 765 | .shapes:hover figure:nth-child(n + 25), 766 | .shapes:focus figure:nth-child(n + 25) { 767 | -webkit-transition-delay: 0.125s; 768 | transition-delay: 0.125s; 769 | } 770 | } 771 | 772 | figure:hover { 773 | cursor: pointer; 774 | border-color: transparent; 775 | box-shadow: 0 2px 3px rgba(16, 10, 9, 0.3); 776 | } 777 | 778 | figure.on, 779 | figure:active { 780 | background: #100a09; 781 | } 782 | 783 | figure.on figcaption, 784 | figure:active figcaption { 785 | color: #d3d0c9; 786 | } 787 | 788 | @media (max-width: 800px) { 789 | figure[data-type="custom"] { 790 | width: 5.78125rem; 791 | } 792 | } 793 | 794 | figure.disabled { 795 | pointer-events: none; 796 | opacity: 0.35; 797 | } 798 | 799 | figure:nth-last-of-type(-n + 2) { 800 | -webkit-box-flex: 0.75; 801 | -webkit-flex: 0.75; 802 | -ms-flex: 0.75; 803 | flex: 0.75; 804 | } 805 | 806 | figure .shape { 807 | display: inline-block; 808 | width: 1.5rem; 809 | height: 1.5rem; 810 | background: currentColor; 811 | } 812 | 813 | figure figcaption { 814 | display: block; 815 | font-size: 0.75rem; 816 | color: #100a09; 817 | overflow: hidden; 818 | text-overflow: ellipsis; 819 | white-space: nowrap; 820 | margin-top: 0.5rem; 821 | padding: 0 0.25rem; 822 | } 823 | 824 | .clip-path { 825 | display: -webkit-box; 826 | display: -webkit-flex; 827 | display: -ms-flexbox; 828 | display: flex; 829 | position: relative; 830 | font-size: 1.1em; 831 | overflow-x: hidden; 832 | font-family: monospace; 833 | overflow-y: hidden; 834 | } 835 | 836 | @media (min-width: 800px) { 837 | .clip-path { 838 | margin: 0.5rem 0 0.25rem; 839 | border-radius: 2px; 840 | } 841 | 842 | .clip-path:focus { 843 | outline: 0; 844 | box-shadow: 0 0 0.5rem gold; 845 | background: rgba(255, 215, 0, 0.3); 846 | } 847 | } 848 | 849 | .code { 850 | background: #100a09; 851 | color: #9a8297; 852 | padding: 0.75rem; 853 | box-shadow: 0 1px 2px rgba(16, 10, 9, 0.15); 854 | } 855 | 856 | @media (min-width: 800px) { 857 | .code { 858 | border-radius: 2px; 859 | } 860 | } 861 | 862 | .css-code { 863 | -webkit-box-flex: 1; 864 | -webkit-flex: 1; 865 | -ms-flex: 1; 866 | flex: 1; 867 | } 868 | 869 | @media (min-width: 800px) { 870 | .css-code { 871 | margin-right: 0.5vw; 872 | max-height: 160px; 873 | overflow-y: auto; 874 | } 875 | } 876 | 877 | .edit-in-codepen { 878 | width: 4rem; 879 | background-image: url(http://blog.codepen.io/wp-content/uploads/2012/06/Button-White-Large.png); 880 | background-size: 60%; 881 | background-position: center center; 882 | background-repeat: no-repeat; 883 | -webkit-transition: opacity 0.25s, -webkit-transform 0.25s, 884 | background-size 0.25s; 885 | transition: opacity 0.25s, transform 0.25s, background-size 0.25s; 886 | cursor: pointer; 887 | -ms-user-select: none; 888 | -webkit-user-select: none; 889 | -moz-user-select: none; 890 | user-select: none; 891 | } 892 | 893 | .edit-in-codepen:hover { 894 | opacity: 0.8; 895 | -webkit-transition-duration: 0.125s; 896 | transition-duration: 0.125s; 897 | } 898 | 899 | .edit-in-codepen:active { 900 | -webkit-transform: scale(0.95); 901 | -ms-transform: scale(0.95); 902 | transform: scale(0.95); 903 | opacity: 0.5; 904 | -webkit-transition-duration: 0; 905 | transition-duration: 0; 906 | } 907 | 908 | .edit-in-codepen:focus { 909 | outline: 0; 910 | } 911 | 912 | .block { 913 | display: none; 914 | padding: 0.25rem; 915 | line-height: 1.3; 916 | } 917 | 918 | .show { 919 | display: block; 920 | } 921 | 922 | .show:nth-last-of-type(1) .point.changing { 923 | -webkit-animation-delay: 0.125s; 924 | animation-delay: 0.125s; 925 | } 926 | 927 | .show:nth-last-of-type(2) .point.changing { 928 | -webkit-animation-delay: 0.25s; 929 | animation-delay: 0.25s; 930 | } 931 | 932 | .show:nth-last-of-type(3) .point.changing { 933 | -webkit-animation-delay: 0.375s; 934 | animation-delay: 0.375s; 935 | } 936 | 937 | .show:nth-last-of-type(4) .point.changing { 938 | -webkit-animation-delay: 0.5s; 939 | animation-delay: 0.5s; 940 | } 941 | 942 | .point { 943 | display: inline-block; 944 | position: relative; 945 | vertical-align: baseline; 946 | } 947 | 948 | .customizing-no-poly .point { 949 | opacity: 0.5; 950 | } 951 | 952 | .point:after { 953 | display: block; 954 | position: absolute; 955 | content: ""; 956 | width: 80px; 957 | height: 80px; 958 | border-radius: 50%; 959 | background: currentColor; 960 | top: -webkit-calc(50% - 40px); 961 | top: calc(50% - 40px); 962 | left: -webkit-calc(50% - 40px); 963 | left: calc(50% - 40px); 964 | -webkit-transform: scale(0); 965 | -ms-transform: scale(0); 966 | transform: scale(0); 967 | will-change: transform, opacity; 968 | opacity: 0; 969 | } 970 | 971 | .point.changing { 972 | font-weight: bold; 973 | } 974 | 975 | .point.changing:after { 976 | -webkit-animation: emph 1.25s; 977 | animation: emph 1.25s; 978 | -webkit-animation-delay: inherit; 979 | animation-delay: inherit; 980 | } 981 | 982 | @-webkit-keyframes emph { 983 | 20% { 984 | -webkit-transform: none; 985 | transform: none; 986 | opacity: 0.5; 987 | } 988 | 989 | to { 990 | opacity: 0; 991 | -webkit-transform: scale(1.2); 992 | transform: scale(1.2); 993 | } 994 | } 995 | 996 | @keyframes emph { 997 | 20% { 998 | -webkit-transform: none; 999 | -ms-transform: none; 1000 | transform: none; 1001 | opacity: 0.5; 1002 | } 1003 | 1004 | to { 1005 | opacity: 0; 1006 | -webkit-transform: scale(1.2); 1007 | -ms-transform: scale(1.2); 1008 | transform: scale(1.2); 1009 | } 1010 | } 1011 | 1012 | .handle:nth-of-type(1), 1013 | .point:nth-of-type(1), 1014 | figure:nth-of-type(1) { 1015 | color: tomato; 1016 | } 1017 | 1018 | .handle:nth-of-type(2), 1019 | .point:nth-of-type(2), 1020 | figure:nth-of-type(2) { 1021 | color: mediumseagreen; 1022 | } 1023 | 1024 | .handle:nth-of-type(3), 1025 | .point:nth-of-type(3), 1026 | figure:nth-of-type(3) { 1027 | color: orange; 1028 | } 1029 | 1030 | .handle:nth-of-type(4), 1031 | .point:nth-of-type(4), 1032 | figure:nth-of-type(4) { 1033 | color: dodgerblue; 1034 | } 1035 | 1036 | .handle:nth-of-type(5), 1037 | .point:nth-of-type(5), 1038 | figure:nth-of-type(5) { 1039 | color: orchid; 1040 | } 1041 | 1042 | .handle:nth-of-type(6), 1043 | .point:nth-of-type(6), 1044 | figure:nth-of-type(6) { 1045 | color: lightgray; 1046 | } 1047 | 1048 | .handle:nth-of-type(7), 1049 | .point:nth-of-type(7), 1050 | figure:nth-of-type(7) { 1051 | color: darkturquoise; 1052 | } 1053 | 1054 | .handle:nth-of-type(8), 1055 | .point:nth-of-type(8), 1056 | figure:nth-of-type(8) { 1057 | color: palevioletred; 1058 | } 1059 | 1060 | .handle:nth-of-type(9), 1061 | .point:nth-of-type(9), 1062 | figure:nth-of-type(9) { 1063 | color: khaki; 1064 | } 1065 | 1066 | .handle:nth-of-type(10), 1067 | .point:nth-of-type(10), 1068 | figure:nth-of-type(10) { 1069 | color: limegreen; 1070 | } 1071 | 1072 | .handle:nth-of-type(11), 1073 | .point:nth-of-type(11), 1074 | figure:nth-of-type(11) { 1075 | color: coral; 1076 | } 1077 | 1078 | .handle:nth-of-type(12), 1079 | .point:nth-of-type(12), 1080 | figure:nth-of-type(12) { 1081 | color: slateblue; 1082 | } 1083 | 1084 | .handle:nth-of-type(13), 1085 | .point:nth-of-type(13), 1086 | figure:nth-of-type(13) { 1087 | color: indianred; 1088 | } 1089 | 1090 | .handle:nth-of-type(14), 1091 | .point:nth-of-type(14), 1092 | figure:nth-of-type(14) { 1093 | color: gray; 1094 | } 1095 | 1096 | .handle:nth-of-type(15), 1097 | .point:nth-of-type(15), 1098 | figure:nth-of-type(15) { 1099 | color: plum; 1100 | } 1101 | 1102 | .handle:nth-of-type(16), 1103 | .point:nth-of-type(16), 1104 | figure:nth-of-type(16) { 1105 | color: olivedrab; 1106 | } 1107 | 1108 | .handle:nth-of-type(17), 1109 | .point:nth-of-type(17), 1110 | figure:nth-of-type(17) { 1111 | color: lightgreen; 1112 | } 1113 | 1114 | .handle:nth-of-type(18), 1115 | .point:nth-of-type(18), 1116 | figure:nth-of-type(18) { 1117 | color: lightsalmon; 1118 | } 1119 | 1120 | .handle:nth-of-type(19), 1121 | .point:nth-of-type(19), 1122 | figure:nth-of-type(19) { 1123 | color: gold; 1124 | } 1125 | 1126 | .handle:nth-of-type(20), 1127 | .point:nth-of-type(20), 1128 | figure:nth-of-type(20) { 1129 | color: peru; 1130 | } 1131 | 1132 | .handle:nth-of-type(21), 1133 | .point:nth-of-type(21), 1134 | figure:nth-of-type(21) { 1135 | color: royalblue; 1136 | } 1137 | 1138 | .handle:nth-of-type(22), 1139 | .point:nth-of-type(22), 1140 | figure:nth-of-type(22) { 1141 | color: sandybrown; 1142 | } 1143 | 1144 | .handle:nth-of-type(23), 1145 | .point:nth-of-type(23), 1146 | figure:nth-of-type(23) { 1147 | color: lightseagreen; 1148 | } 1149 | 1150 | .handle:nth-of-type(24), 1151 | .point:nth-of-type(24), 1152 | figure:nth-of-type(24) { 1153 | color: blueviolet; 1154 | } 1155 | 1156 | .handle:nth-of-type(25), 1157 | .point:nth-of-type(25), 1158 | figure:nth-of-type(25) { 1159 | color: tomato; 1160 | } 1161 | 1162 | .handle:nth-of-type(26), 1163 | .point:nth-of-type(26), 1164 | figure:nth-of-type(26) { 1165 | color: goldenrod; 1166 | } 1167 | 1168 | .handle:nth-of-type(27), 1169 | .point:nth-of-type(27), 1170 | figure:nth-of-type(27) { 1171 | color: limegreen; 1172 | } 1173 | 1174 | .side { 1175 | padding: 0.25rem 0.25rem 1.25rem; 1176 | } 1177 | 1178 | @media (min-width: 800px) { 1179 | .side { 1180 | max-height: 100%; 1181 | padding: 0.5rem 0 0 0.125rem; 1182 | } 1183 | } 1184 | 1185 | .panel { 1186 | -webkit-box-flex: auto; 1187 | -webkit-flex: auto; 1188 | -ms-flex: auto; 1189 | flex: auto; 1190 | display: block; 1191 | padding: 1rem 1rem 1rem 0.5rem; 1192 | background: white; 1193 | border-radius: 2px; 1194 | box-shadow: 0 1px 2px rgba(16, 10, 9, 0.15); 1195 | margin: 0.5rem 0.25rem; 1196 | } 1197 | 1198 | .panel[href]:hover { 1199 | box-shadow: 0 2px 3px rgba(16, 10, 9, 0.3); 1200 | } 1201 | 1202 | .panel:first-of-type { 1203 | margin-top: 0.25rem; 1204 | } 1205 | 1206 | .flex { 1207 | display: -webkit-box; 1208 | display: -webkit-flex; 1209 | display: -ms-flexbox; 1210 | display: flex; 1211 | -webkit-box-align: center; 1212 | -webkit-align-items: center; 1213 | -ms-flex-align: center; 1214 | align-items: center; 1215 | } 1216 | 1217 | @media (min-width: 800px) { 1218 | .options { 1219 | position: relative; 1220 | background: #d3d0c9; 1221 | -webkit-transform: translate3d(0, -18.375rem, 0); 1222 | -ms-transform: translate3d(0, -18.375rem, 0); 1223 | transform: translate3d(0, -18.375rem, 0); 1224 | -webkit-transition: -webkit-transform 0.25s 0.125s 1225 | cubic-bezier(0.15, 1, 0.3, 1.1); 1226 | transition: transform 0.25s 0.125s cubic-bezier(0.15, 1, 0.3, 1.1); 1227 | } 1228 | 1229 | .options:before { 1230 | display: block; 1231 | position: absolute; 1232 | content: ""; 1233 | pointer-events: none; 1234 | left: 0; 1235 | right: 0; 1236 | bottom: 100%; 1237 | height: 4rem; 1238 | background: -webkit-linear-gradient(rgba(211, 208, 201, 0), #d3d0c9 90%); 1239 | background: linear-gradient(rgba(211, 208, 201, 0), #d3d0c9 90%); 1240 | -webkit-transition: inherit; 1241 | transition: inherit; 1242 | -webkit-transition-timing-function: ease; 1243 | transition-timing-function: ease; 1244 | -webkit-transform-origin: center bottom; 1245 | -ms-transform-origin: center bottom; 1246 | transform-origin: center bottom; 1247 | } 1248 | 1249 | .shapes:hover + .options, 1250 | .shapes:focus + .options { 1251 | -webkit-transform: none; 1252 | -ms-transform: none; 1253 | transform: none; 1254 | } 1255 | 1256 | .shapes:hover + .options:before, 1257 | .shapes:focus + .options:before { 1258 | -webkit-transform: scale3d(1, 0, 1); 1259 | -ms-transform: scale3d(1, 0, 1); 1260 | transform: scale3d(1, 0, 1); 1261 | } 1262 | } 1263 | 1264 | h2 { 1265 | display: inline-block; 1266 | -webkit-box-flex: 4rem; 1267 | -webkit-flex: 4rem auto; 1268 | -ms-flex: 4rem auto; 1269 | flex: 4rem auto; 1270 | font-size: 1.2rem; 1271 | font-weight: 500; 1272 | pointer-events: none; 1273 | min-width: 1em; 1274 | text-align: center; 1275 | color: #bcb8ad; 1276 | -ms-user-select: none; 1277 | -webkit-user-select: none; 1278 | -moz-user-select: none; 1279 | user-select: none; 1280 | } 1281 | 1282 | h2.block { 1283 | display: block; 1284 | } 1285 | 1286 | h2:first-child { 1287 | text-align: left; 1288 | color: #100a09; 1289 | font-weight: 300; 1290 | padding: 0 1.25rem 0 0.5rem; 1291 | } 1292 | 1293 | .side > h2 { 1294 | padding: 0.75rem 1rem 0.25rem 1rem; 1295 | } 1296 | 1297 | input[type="radio"], 1298 | input[type="checkbox"] { 1299 | display: none; 1300 | } 1301 | 1302 | label, 1303 | input[type="number"], 1304 | input[type="url"] { 1305 | display: inline-block; 1306 | font: inherit; 1307 | position: relative; 1308 | text-align: center; 1309 | background: white; 1310 | -webkit-box-flex: 1; 1311 | -webkit-flex: 1; 1312 | -ms-flex: 1; 1313 | flex: 1; 1314 | min-width: 2rem; 1315 | padding: 0.5rem 0.25rem; 1316 | border-radius: 2rem; 1317 | box-shadow: inset 0 0.125rem #d3d0c9, inset -0.125rem 0 #d3d0c9, 1318 | inset 0 -0.125rem #d3d0c9; 1319 | cursor: pointer; 1320 | -webkit-transition: background 0.25s; 1321 | transition: background 0.25s; 1322 | -webkit-tap-highlight-color: transparent; 1323 | -webkit-touch-callout: none; 1324 | tap-highlight-color: transparent; 1325 | touch-callout: none; 1326 | -ms-user-select: none; 1327 | -webkit-user-select: none; 1328 | -moz-user-select: none; 1329 | user-select: none; 1330 | } 1331 | 1332 | label:hover, 1333 | input[type="number"]:hover, 1334 | input[type="url"]:hover { 1335 | background: #d3d0c9; 1336 | -webkit-transition: background 0; 1337 | transition: background 0; 1338 | } 1339 | 1340 | label[for="shadowboard-toggle"]:before, 1341 | input[type="number"][for="shadowboard-toggle"]:before, 1342 | input[type="url"][for="shadowboard-toggle"]:before { 1343 | content: "Off"; 1344 | } 1345 | 1346 | input:checked + label[for="shadowboard-toggle"]:before, 1347 | input:checked + input[type="number"][for="shadowboard-toggle"]:before, 1348 | input:checked + input[type="url"][for="shadowboard-toggle"]:before { 1349 | content: "On"; 1350 | } 1351 | 1352 | label[for="webkit"]:before, 1353 | input[type="number"][for="webkit"]:before, 1354 | input[type="url"][for="webkit"]:before { 1355 | content: "-"; 1356 | font-family: monospace; 1357 | vertical-align: top; 1358 | } 1359 | 1360 | label:first-of-type, 1361 | input[type="number"]:first-of-type, 1362 | input[type="url"]:first-of-type { 1363 | box-shadow: inset 0 0.125rem #d3d0c9, inset 0.125rem 0 #d3d0c9, 1364 | inset -0.125rem 0 #d3d0c9, inset 0 -0.125rem #d3d0c9; 1365 | } 1366 | 1367 | label.joined, 1368 | input[type="number"].joined, 1369 | input[type="url"].joined { 1370 | border-radius: 0; 1371 | } 1372 | 1373 | label.joined:first-of-type, 1374 | input[type="number"].joined:first-of-type, 1375 | input[type="url"].joined:first-of-type { 1376 | border-top-left-radius: 2rem; 1377 | border-bottom-left-radius: 2rem; 1378 | } 1379 | 1380 | label.joined:last-of-type, 1381 | input[type="number"].joined:last-of-type, 1382 | input[type="url"].joined:last-of-type { 1383 | border-top-right-radius: 2rem; 1384 | border-bottom-right-radius: 2rem; 1385 | } 1386 | 1387 | input:checked + label, 1388 | label[type="number"]:focus, 1389 | label[type="url"]:focus, 1390 | input:checked + input[type="number"], 1391 | input[type="number"][type="number"]:focus, 1392 | input[type="number"][type="url"]:focus, 1393 | input:checked + input[type="url"], 1394 | input[type="url"][type="number"]:focus, 1395 | input[type="url"][type="url"]:focus { 1396 | background: #100a09; 1397 | z-index: 100; 1398 | color: #d3d0c9; 1399 | outline: 0; 1400 | box-shadow: inset 0 0 0 0.125rem #100a09, 0 0 0 0.125rem #100a09; 1401 | } 1402 | 1403 | input:checked + label:hover, 1404 | label[type="number"]:focus:hover, 1405 | label[type="url"]:focus:hover, 1406 | input:checked + input[type="number"]:hover, 1407 | input[type="number"][type="number"]:focus:hover, 1408 | input[type="number"][type="url"]:focus:hover, 1409 | input:checked + input[type="url"]:hover, 1410 | input[type="url"][type="number"]:focus:hover, 1411 | input[type="url"][type="url"]:focus:hover { 1412 | opacity: 0.8; 1413 | } 1414 | 1415 | input:checked + label:active, 1416 | label[type="number"]:focus:active, 1417 | label[type="url"]:focus:active, 1418 | input:checked + input[type="number"]:active, 1419 | input[type="number"][type="number"]:focus:active, 1420 | input[type="number"][type="url"]:focus:active, 1421 | input:checked + input[type="url"]:active, 1422 | input[type="url"][type="number"]:focus:active, 1423 | input[type="url"][type="url"]:focus:active { 1424 | opacity: 1; 1425 | } 1426 | 1427 | input[type="url"] { 1428 | display: block; 1429 | line-height: 40px; 1430 | height: 40px; 1431 | box-shadow: inset 0 0.125rem #d3d0c9, inset 0.125rem 0 #d3d0c9, 1432 | inset -0.125rem 0 #d3d0c9, inset 0 -0.125rem #d3d0c9; 1433 | } 1434 | 1435 | input[type="number"] { 1436 | font-family: inherit; 1437 | font-size: 1.1rem; 1438 | border-radius: 2rem; 1439 | box-shadow: inset 0 0 0 0.125rem #d3d0c9; 1440 | appearance: textfield; 1441 | -moz-appearance: textfield; 1442 | } 1443 | 1444 | input[type="number"]::-webkit-inner-spin-button, 1445 | input[type="number"]::-webkit-outer-spin-button { 1446 | -webkit-appearance: none; 1447 | appearance: none; 1448 | margin: 0; 1449 | } 1450 | 1451 | .shadowboard-toggle { 1452 | margin-top: 1rem; 1453 | } 1454 | 1455 | .backgrounds { 1456 | overflow: hidden; 1457 | position: relative; 1458 | padding: 0.5rem 0 0.75rem 0.375rem; 1459 | } 1460 | 1461 | .backgrounds img { 1462 | cursor: pointer; 1463 | border-radius: 0.25rem; 1464 | float: left; 1465 | width: -webkit-calc(25% - 0.25rem); 1466 | width: calc(25% - 0.25rem); 1467 | height: auto; 1468 | outline: 0.25rem solid white; 1469 | margin: 0.125rem; 1470 | -webkit-transition: 0.5s; 1471 | transition: 0.5s; 1472 | -ms-interpolation-mode: bicubic; 1473 | -webkit-user-drag: none; 1474 | -moz-user-drag: none; 1475 | -ms-user-drag: none; 1476 | user-drag: none; 1477 | } 1478 | 1479 | .backgrounds img:hover { 1480 | opacity: 0.9; 1481 | } 1482 | 1483 | .backgrounds img:active { 1484 | opacity: 0.5; 1485 | -webkit-transition: 0; 1486 | transition: 0; 1487 | } 1488 | 1489 | .backgrounds + input { 1490 | font: inherit; 1491 | font-size: 1rem; 1492 | line-height: 2; 1493 | width: -webkit-calc(100% - 0.375rem); 1494 | width: calc(100% - 0.375rem); 1495 | margin-left: 0.375rem; 1496 | text-align: left; 1497 | padding: 0.25rem 1rem; 1498 | } 1499 | 1500 | @-webkit-keyframes selected { 1501 | 10% { 1502 | opacity: 0.5; 1503 | } 1504 | } 1505 | 1506 | @keyframes selected { 1507 | 10% { 1508 | opacity: 0.5; 1509 | } 1510 | } 1511 | 1512 | .no-support-message { 1513 | display: none; 1514 | } 1515 | 1516 | .no-support .no-support-message { 1517 | display: block; 1518 | } 1519 | 1520 | .cite.panel { 1521 | -ms-user-select: none; 1522 | -webkit-user-select: none; 1523 | -moz-user-select: none; 1524 | user-select: none; 1525 | } 1526 | 1527 | .cite.panel .twitter { 1528 | margin: 0.75rem 0 0.5rem 0.5rem; 1529 | } 1530 | 1531 | .cite.panel p { 1532 | font-size: 0.95rem; 1533 | } 1534 | 1535 | .cite.panel a { 1536 | text-decoration: none; 1537 | font-weight: 500; 1538 | color: inherit; 1539 | -webkit-transition: 0.25s; 1540 | transition: 0.25s; 1541 | } 1542 | 1543 | .cite.panel:hover a { 1544 | color: #0b7fda; 1545 | } 1546 | 1547 | .cite.panel:hover a:hover { 1548 | text-decoration: underline; 1549 | } 1550 | 1551 | .warning.panel { 1552 | background: #ff6347; 1553 | } 1554 | 1555 | .warning.panel:active { 1556 | background: #ff6347; 1557 | } 1558 | 1559 | .warning.panel h1 { 1560 | font-weight: 300; 1561 | font-size: 2.5rem; 1562 | padding: 0 0.5rem; 1563 | } 1564 | 1565 | .warning.panel h1:before { 1566 | font: 0.7em Browsers; 1567 | content: "\e609"; 1568 | padding-right: 0.5em; 1569 | } 1570 | 1571 | .browser-support { 1572 | color: inherit; 1573 | text-decoration: none; 1574 | } 1575 | 1576 | .no-support .browser-support.permanent { 1577 | display: none; 1578 | } 1579 | 1580 | .browser-support h2 { 1581 | display: -webkit-box; 1582 | display: -webkit-flex; 1583 | display: -ms-flexbox; 1584 | display: flex; 1585 | padding-right: 0; 1586 | } 1587 | 1588 | .browser-support small { 1589 | -webkit-box-flex: 1; 1590 | -webkit-flex: 1; 1591 | -ms-flex: 1; 1592 | flex: 1; 1593 | text-align: right; 1594 | padding-left: 1em; 1595 | } 1596 | 1597 | .browser-support small:before { 1598 | content: "("; 1599 | } 1600 | 1601 | .browser-support small:after { 1602 | content: ")"; 1603 | } 1604 | 1605 | .browser-support:hover small { 1606 | color: #0b7fda; 1607 | text-decoration: underline; 1608 | } 1609 | 1610 | .browser-support:hover small:before { 1611 | content: "www."; 1612 | } 1613 | 1614 | .browser-support:hover small:after { 1615 | content: ""; 1616 | } 1617 | 1618 | .browser-support:active { 1619 | background: rgba(255, 255, 255, 0.5); 1620 | } 1621 | 1622 | .browser-support .table { 1623 | display: -webkit-box; 1624 | display: -webkit-flex; 1625 | display: -ms-flexbox; 1626 | display: flex; 1627 | -webkit-box-pack: justify; 1628 | -webkit-justify-content: space-between; 1629 | -ms-flex-pack: justify; 1630 | justify-content: space-between; 1631 | -webkit-flex-wrap: wrap; 1632 | -ms-flex-wrap: wrap; 1633 | flex-wrap: wrap; 1634 | margin-top: 0.5rem; 1635 | padding: 0.25rem; 1636 | } 1637 | 1638 | .icon { 1639 | display: inline-block; 1640 | text-align: center; 1641 | padding: 0.25rem; 1642 | color: #100a09; 1643 | -webkit-transition: color 0.25s, -webkit-transform 0.25s, text-shadow 0.25s; 1644 | transition: color 0.25s, transform 0.25s, text-shadow 0.25s; 1645 | -ms-user-select: none; 1646 | -webkit-user-select: none; 1647 | -moz-user-select: none; 1648 | user-select: none; 1649 | } 1650 | 1651 | .panel:hover .icon.unsupported { 1652 | -webkit-transform: scale(0.9); 1653 | -ms-transform: scale(0.9); 1654 | transform: scale(0.9); 1655 | opacity: 0.15; 1656 | } 1657 | 1658 | .icon:before { 1659 | display: block; 1660 | font-family: Browsers; 1661 | font-size: 2.5em; 1662 | } 1663 | 1664 | .icon.chrome:before { 1665 | content: "\e603"; 1666 | } 1667 | 1668 | .icon.safari:before { 1669 | content: "\e607"; 1670 | } 1671 | 1672 | .icon.opera:before { 1673 | content: "\e606"; 1674 | } 1675 | 1676 | .icon.firefox:before { 1677 | content: "\e604"; 1678 | } 1679 | 1680 | .icon.ie:before { 1681 | content: "\e605"; 1682 | } 1683 | 1684 | .icon:after { 1685 | display: block; 1686 | font-size: 1.25em; 1687 | content: attr(data-version); 1688 | padding-top: 0.25rem; 1689 | } 1690 | 1691 | .icon.unsupported { 1692 | opacity: 0.3; 1693 | } 1694 | 1695 | .icon [data-version=""]:after { 1696 | content: "/u00D7"; 1697 | } 1698 | 1699 | p { 1700 | font-size: 1.1rem; 1701 | line-height: 1.2; 1702 | padding: 0.5rem 0 0 0.5rem; 1703 | } 1704 | 1705 | @font-face { 1706 | font-family: "Alegreya Sans"; 1707 | font-style: normal; 1708 | font-weight: 300; 1709 | src: local("Alegreya Sans Light"), local("AlegreyaSans-Light"), 1710 | url(http://fonts.gstatic.com/s/alegreyasans/v2/11EDm-lum6tskJMBbdy9aanUXp5W4FLE8OnWB9t-aHo.woff) 1711 | format("woff"); 1712 | } 1713 | 1714 | @font-face { 1715 | font-family: "Alegreya Sans"; 1716 | font-style: italic; 1717 | font-weight: 300; 1718 | src: local("Alegreya Sans Light Italic"), local("AlegreyaSans-LightItalic"), 1719 | url(http://fonts.gstatic.com/s/alegreyasans/v3/WfiXipsmjqRqsDBQ1bA9CjlgAWjU5_zqYf1mnuZ7Lrf3rGVtsTkPsbDajuO5ueQw.woff2) 1720 | format("woff2"); 1721 | unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, 1722 | U+A720-A7FF; 1723 | } 1724 | 1725 | @font-face { 1726 | font-family: "Alegreya Sans"; 1727 | font-style: normal; 1728 | font-weight: 400; 1729 | src: local("Alegreya Sans"), local("AlegreyaSans-Regular"), 1730 | url(http://fonts.gstatic.com/s/alegreyasans/v2/KYNzioYhDai7mTMnx_gDgnt9r5m2YmP5sw3cUAQwL0E.woff) 1731 | format("woff"); 1732 | } 1733 | 1734 | @font-face { 1735 | font-family: "Browsers"; 1736 | src: url(fonts/browsers.eot); 1737 | src: url(fonts/browsers.eot) format("embedded-opentype"), 1738 | url(fonts/browsers.woff) format("woff"), 1739 | url(fonts/browsers.ttf) format("truetype"), 1740 | url(fonts/browsers.svg) format("svg"); 1741 | font-weight: normal; 1742 | font-style: normal; 1743 | } 1744 | 1745 | /*# sourceMappingURL=style.css.map */ 1746 | -------------------------------------------------------------------------------- /dev/style.css.map: -------------------------------------------------------------------------------- 1 | { 2 | "version": 3, 3 | "mappings": "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", 4 | "sources": ["style.scss"], 5 | "names": [], 6 | "file": "style.css" 7 | } 8 | -------------------------------------------------------------------------------- /dev/style.scss: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | line-height: 1; 4 | vertical-align: middle; 5 | margin: 0; 6 | padding: 0; 7 | border: 0; 8 | } 9 | 10 | header, section, main, figure { display: block; } 11 | 12 | $red : #ff6347; 13 | $blue : #1e90ff; 14 | $linkblue : #0B7FDA; 15 | $gold : #ffa500; 16 | $green : #3cb371; 17 | 18 | $black : #100a09; 19 | $white : #fbfcf7; 20 | $lightgray : #d3d0c9; 21 | 22 | $radius : 2px; 23 | $shadow : 0 1px 2px rgba($black, .15); 24 | $shadow-hover : 0 2px 3px rgba($black, .3); 25 | 26 | $transition : .25s; 27 | $bounce : cubic-bezier(.15,1,.3,1.1); 28 | 29 | $figure-height : 4.625rem; 30 | $sidebar-width : ($figure-height * 5) + .5rem; 31 | $tablet : 800px; 32 | 33 | 34 | @mixin overflow-shadow { 35 | display: block; 36 | position: absolute; 37 | content: ""; 38 | pointer-events: none; 39 | } 40 | 41 | @mixin user-select { 42 | -ms-user-select: none; 43 | -webkit-user-select: none; 44 | -moz-user-select: none; 45 | user-select: none; 46 | } 47 | 48 | @mixin user-drag { 49 | -webkit-user-drag: none; 50 | -moz-user-drag: none; 51 | -ms-user-drag: none; 52 | user-drag: none; 53 | } 54 | 55 | @mixin no-tap { 56 | -webkit-tap-highlight-color: rgba(0,0,0,0); 57 | -webkit-touch-callout: none; 58 | tap-highlight-color: rgba(0,0,0,0); 59 | touch-callout: none; 60 | } 61 | 62 | 63 | html, body { 64 | position: relative; 65 | height: 100%; 66 | } 67 | body { 68 | font: 100%/1.5 "Alegreya Sans", sans-serif; 69 | background: $lightgray; 70 | color: $black; 71 | 72 | @media (min-width: $tablet) { 73 | padding: 0 .5rem 0; 74 | padding-left: calc(100% - #{$sidebar-width}); 75 | } 76 | } 77 | 78 | .main { 79 | display: flex; 80 | flex-direction: column; 81 | 82 | @media (min-width: $tablet) { 83 | position: fixed; 84 | top: 0; 85 | left: 0; 86 | height: 100%; 87 | right: $sidebar-width; 88 | padding: .25rem .25rem .25rem .75rem; 89 | -ms-touch-action: none; 90 | touch-action: none; 91 | } 92 | } 93 | 94 | 95 | header { 96 | display: flex; 97 | align-items: center; 98 | justify-content: space-between; 99 | background: rgba($white, .75); 100 | box-shadow: inset 0 -1px rgba($lightgray, .25); 101 | padding: .75rem 1rem .75rem; 102 | 103 | @media (min-width: $tablet) { 104 | font-size: larger; 105 | margin-top: .5rem; 106 | padding: .75rem 1rem; 107 | border-radius: $radius $radius 0 0; 108 | } 109 | 110 | a { 111 | display: inline-block; 112 | text-decoration: none; 113 | color: inherit; 114 | padding: .25rem; 115 | @include user-select; 116 | 117 | &:hover { text-decoration: underline; } 118 | } 119 | 120 | iframe { 121 | max-width: 95px; 122 | animation: load 1s both; 123 | } 124 | } 125 | @keyframes load { from { opacity: 0; } } 126 | 127 | 128 | .demo-container { 129 | display: flex; 130 | justify-content: center; 131 | align-items: center; 132 | flex: 1; 133 | background: $white; 134 | box-shadow: $shadow; 135 | position: relative; 136 | z-index: 100; 137 | padding-top: .5rem; 138 | @include user-select; 139 | @include no-tap; 140 | 141 | @media (min-width: $tablet) { 142 | border-radius: 0 0 $radius $radius; 143 | } 144 | } 145 | 146 | .demo { 147 | position: relative; 148 | padding: 0 0 1rem; 149 | // overflow: hidden; 150 | 151 | .customizing & { 152 | cursor: crosshair; 153 | } 154 | } 155 | 156 | .box { 157 | position: relative; 158 | box-shadow: 159 | inset 0 0 0 10px $white, 160 | inset 0 0 0 11px $lightgray; 161 | -ms-touch-action: none; 162 | touch-action: none; 163 | } 164 | 165 | .shadowboard, 166 | .clipboard { 167 | position: absolute; 168 | top: 10px; 169 | left: 10px; 170 | right: 10px; 171 | bottom: 10px; 172 | background-color: $lightgray; 173 | background-image: url(pics/pittsburgh.jpg); 174 | background-size: cover; 175 | background-position: center center; 176 | } 177 | 178 | .shadowboard { 179 | pointer-events: none; 180 | opacity: 0; 181 | transition: opacity $transition*1.5; 182 | } 183 | 184 | .handles { // container for .handle 185 | position: absolute; 186 | top: 0; 187 | left: 0; 188 | right: 0; 189 | bottom: 0; 190 | } 191 | 192 | .handle, 193 | .delete-point { 194 | position: absolute; 195 | width: 20px; 196 | height: 20px; 197 | } 198 | 199 | .handle { 200 | border-radius: 50%; 201 | box-shadow: inset 0 0 0 10px; 202 | opacity: .8; 203 | transition: 204 | opacity $transition; 205 | cursor: grab; 206 | 207 | .customizing & { cursor: crosshair; } 208 | .customizing:not(.customizing-no-poly) & { 209 | &[data-handle="1"] { 210 | cursor: pointer; 211 | 212 | &:hover { 213 | border-radius: $radius; 214 | color: black; 215 | 216 | &:before { 217 | display: block; 218 | position: absolute; 219 | top: 0; 220 | left: 0; 221 | right: 0; 222 | bottom: 0; 223 | content: ""; 224 | -webkit-clip-path: polygon(67% 30%, 43% 54%, 33% 42%, 24% 51%, 44% 72%, 76% 39%); 225 | clip-path: polygon(67% 30%, 43% 54%, 33% 42%, 24% 51%, 44% 72%, 76% 39%); 226 | background: $lightgray; 227 | } 228 | } 229 | 230 | &:active { 231 | color: #555; 232 | 233 | &:before { 234 | background: white; 235 | } 236 | } 237 | } 238 | } 239 | 240 | &:after { // expand target area of handle 241 | display: block; 242 | content: ""; 243 | position: absolute; 244 | top: -8px; 245 | left: -8px; 246 | right: -8px; 247 | bottom: -8px; 248 | } 249 | 250 | .demo:hover & { opacity: 1; } 251 | 252 | &.is-dragging { // better than using :hover/:active for touch 253 | z-index: 100; 254 | box-shadow: inset 0 0 0 3px; 255 | cursor: none; 256 | transition: 257 | box-shadow 0; 258 | } 259 | 260 | &.bar { 261 | border-radius: 20px; 262 | 263 | &:after { 264 | top: -5px; 265 | left: -5px; 266 | right: -5px; 267 | bottom: -5px; 268 | } 269 | } 270 | } 271 | 272 | 273 | .delete-point { 274 | position: absolute; 275 | left: 22px; 276 | top: 0; 277 | width: 25px; 278 | padding-left: 5px; 279 | border-radius: 3px; 280 | background: $lightgray; 281 | transform: scale3d(0,0,0); 282 | transform-origin: left center; 283 | cursor: pointer; 284 | opacity: .75; 285 | -webkit-clip-path: polygon(25% 0%, 100% 1%, 100% 100%, 25% 100%, 0% 50%); 286 | clip-path: polygon(25% 0%, 100% 1%, 100% 100%, 25% 100%, 0% 50%); 287 | transition: 288 | transform $transition, 289 | opacity $transition; 290 | 291 | .show-delete & { 292 | transform: scale3d(.9,.9,.9); 293 | transition: 294 | transform $transition $bounce, 295 | opacity $transition; 296 | opacity: 1; 297 | } 298 | 299 | &:hover { 300 | transform: scale3d(1,1,1); 301 | transition: transform $transition $bounce; 302 | opacity: 1; 303 | } 304 | 305 | &:active { 306 | background: $black; 307 | 308 | &:after { background: $lightgray; } 309 | } 310 | 311 | &:after { 312 | display: block; 313 | content: ""; 314 | position: absolute; 315 | top: 4px; 316 | left: 9px; 317 | right: 4px; 318 | bottom: 4px; 319 | background: $black; 320 | -webkit-clip-path: polygon(20% 10%, 10% 20%, 40% 50%, 10% 80%, 20% 90%, 50% 60%, 80% 90%, 90% 80%, 60% 50%, 90% 20%, 80% 10%, 50% 40%); 321 | clip-path: polygon(20% 10%, 10% 20%, 40% 50%, 10% 80%, 20% 90%, 50% 60%, 80% 90%, 90% 80%, 60% 50%, 90% 20%, 80% 10%, 50% 40%); 322 | } 323 | } 324 | 325 | .custom-notice { 326 | display: flex; 327 | justify-content: center; 328 | align-items: center; 329 | position: absolute; 330 | top: 0; 331 | left: 0; 332 | right: 0; 333 | bottom: 1rem; 334 | pointer-events: none; 335 | opacity: 0; 336 | transition: 337 | background $transition; 338 | background: rgba(white, 0); 339 | 340 | // .customizing-no-poly & { background: rgba(white, .5); } 341 | .customizing & { opacity: 1; } 342 | 343 | div { 344 | width: 100%; 345 | text-align: center; 346 | background: rgba(255,255,255,.9); 347 | padding: 1rem; 348 | margin: 0 2rem; 349 | transition: opacity $transition; 350 | border-radius: $radius; 351 | box-shadow: $shadow; 352 | opacity: 0; 353 | } 354 | 355 | .start-customizing & div { 356 | opacity: 1; 357 | animation: pulse 1.5s ease-in-out infinite; 358 | } 359 | } 360 | 361 | .touchy { 362 | &:after { 363 | content: "Tap"; 364 | 365 | @media (min-width: $tablet) { content: "Click"; } 366 | } 367 | } 368 | 369 | .dark-panel { 370 | display: none; 371 | background: $black; 372 | padding: .75rem; 373 | color: white; 374 | align-items: center; 375 | 376 | p { 377 | color: $lightgray; 378 | margin: .5rem 0; 379 | } 380 | 381 | h2:first-child { color: $lightgray; } 382 | } 383 | 384 | 385 | .insetting { 386 | @media (max-width: $tablet) { 387 | .main .inset { 388 | display: block; 389 | } 390 | } 391 | 392 | @media (min-width: $tablet) { 393 | .side .inset { 394 | display: block; 395 | box-shadow: $shadow; 396 | border-radius: $radius; 397 | margin: .25rem; 398 | } 399 | } 400 | } 401 | 402 | 403 | .customizing { 404 | @media (max-width: $tablet) { 405 | .main .custom { 406 | display: flex; 407 | } 408 | } 409 | 410 | @media (min-width: $tablet) { 411 | .side .custom { 412 | display: flex; 413 | box-shadow: $shadow; 414 | border-radius: $radius; 415 | margin: .25rem; 416 | } 417 | } 418 | } 419 | 420 | .finish, .inset-round { 421 | font: inherit; 422 | padding: .5rem; 423 | border-radius: 5rem; 424 | cursor: pointer; 425 | flex: 1; 426 | background: rgba(white, .35); 427 | color: rgba(white, .9); 428 | 429 | &:hover { 430 | color: white; 431 | background: rgba(white, .4); 432 | } 433 | 434 | &:active { 435 | animation: none; 436 | background: rgba(white, .2); 437 | color: rgba(white, .4); 438 | } 439 | 440 | &:after { content: "Finish " attr(data-shape); } 441 | 442 | .customizing-no-poly & { 443 | animation: none; 444 | 445 | &:after { content: "Close editor"; } 446 | } 447 | 448 | &:focus { outline: 0; } 449 | } 450 | 451 | .inset-round { 452 | font-family: monospace; 453 | text-align: center; 454 | cursor: text; 455 | color: $lightgray; 456 | background: black; 457 | box-shadow: inset 0 0 0 .125rem rgba($lightgray, .5); 458 | animation: glow 1.5s ease-in-out infinite; 459 | opacity: .5; 460 | 461 | &:hover { 462 | background: transparent; 463 | color: $lightgray; 464 | animation: none; 465 | opacity: .75; 466 | } 467 | 468 | &:focus { 469 | color: $lightgray; 470 | box-shadow: inset 0 0 0 .125rem rgba($lightgray, .5); 471 | animation: none; 472 | opacity: 1; 473 | } 474 | } 475 | @keyframes glow { 50% { opacity: .75; } } 476 | 477 | 478 | .shapes { 479 | position: relative; 480 | max-width: 100%; 481 | background: $lightgray; 482 | white-space: nowrap; 483 | overflow-x: hidden; 484 | 485 | &:focus { outline: 0; } 486 | 487 | &.horizontal { display: block; } 488 | &.vertical { display: none; } 489 | 490 | @media (min-width: $tablet) { 491 | &.horizontal { display: none; } 492 | &.vertical { 493 | display: block; 494 | white-space: normal; 495 | } 496 | } 497 | 498 | @media (max-width: $tablet) { 499 | &:after { 500 | @include overflow-shadow; 501 | 502 | bottom: 0; 503 | right: 0; 504 | top: 0; 505 | background: linear-gradient(90deg, rgba($lightgray, 0), $lightgray); 506 | width: 1.5rem; 507 | } 508 | } 509 | } 510 | 511 | 512 | ul { 513 | width: 100%; 514 | padding: .25rem; 515 | 516 | @media (max-width: $tablet) { 517 | white-space: nowrap; 518 | } 519 | 520 | @media (min-width: $tablet) { 521 | display: flex; 522 | flex-wrap: wrap; 523 | padding: 0; 524 | perspective: 400px; 525 | overflow-x: hidden; 526 | } 527 | } 528 | 529 | .flickity-viewport { overflow: hidden; position: relative; } 530 | 531 | figure { 532 | display: inline-block; 533 | text-align: center; 534 | padding: .625rem .25rem; 535 | margin: .25rem; 536 | background: white; 537 | width: $figure-height - .5rem; 538 | box-shadow: $shadow; 539 | border-radius: $radius; 540 | transition: 541 | background $transition, 542 | transform $transition*2; 543 | @include user-select; 544 | @include no-tap; 545 | 546 | @media (min-width: $tablet) { 547 | flex: $figure-height; 548 | transform-origin: top center; 549 | 550 | &:nth-child(n+9) { transform: translateZ(0) rotateX(-18deg); } 551 | &:nth-child(n+13) { transform: translateZ(-$figure-height*0.4) rotateX(-36deg); } 552 | &:nth-child(n+17) { transform: translateZ(-$figure-height*1.3) rotateX(-54deg); } 553 | &:nth-child(n+21) { transform: translateZ(-$figure-height*2) rotateX(-72deg); } 554 | &:nth-child(n+25) { transform: translateZ(-$figure-height*2.5) rotateX(-85deg); } 555 | 556 | .shapes:hover &, 557 | .shapes:focus & { 558 | transform: translateZ(0) rotateX(0); 559 | transition: 560 | background $transition, 561 | transform $transition*1.5 $bounce; 562 | 563 | &:nth-child(n+9) { transition-delay: $transition * .1; } 564 | &:nth-child(n+13) { transition-delay: $transition * .2; } 565 | &:nth-child(n+17) { transition-delay: $transition * .3; } 566 | &:nth-child(n+21) { transition-delay: $transition * .4; } 567 | &:nth-child(n+25) { transition-delay: $transition * .5; } 568 | } 569 | } 570 | 571 | &:hover { 572 | cursor: pointer; 573 | border-color: transparent; 574 | box-shadow: $shadow-hover; 575 | } 576 | 577 | &.on, &:active { 578 | background: $black; 579 | 580 | figcaption { 581 | color: $lightgray; 582 | } 583 | } 584 | 585 | @media (max-width: $tablet) { 586 | &[data-type="custom"] { width: $figure-height * 1.25; } 587 | } 588 | 589 | &.disabled { 590 | pointer-events: none; 591 | opacity: .35; 592 | } 593 | 594 | &:nth-last-of-type(-n+2) { flex: .75; } 595 | 596 | .shape { 597 | display: inline-block; 598 | width: 1.5rem; 599 | height: 1.5rem; 600 | background: currentColor; 601 | } 602 | 603 | figcaption { 604 | display: block; 605 | font-size: .75rem; 606 | color: $black; 607 | overflow: hidden; 608 | text-overflow: ellipsis; 609 | white-space: nowrap; 610 | margin-top: .5rem; 611 | padding: 0 .25rem; 612 | } 613 | } 614 | 615 | 616 | .clip-path { 617 | display: flex; 618 | position: relative; 619 | font-size: 1.1em; 620 | overflow-x: hidden; 621 | font-family: monospace; 622 | overflow-y: hidden; 623 | 624 | @media (min-width: $tablet) { 625 | margin: .5rem 0 .25rem; 626 | border-radius: $radius; 627 | 628 | &:focus { 629 | outline: 0; 630 | box-shadow: 0 0 .5rem gold; 631 | background: rgba(gold, .3); 632 | } 633 | } 634 | } 635 | 636 | .code { 637 | background: $black; 638 | color: #9a8297; 639 | padding: .75rem; 640 | box-shadow: $shadow; 641 | 642 | @media (min-width: $tablet) { 643 | border-radius: $radius; 644 | } 645 | } 646 | 647 | .css-code { 648 | flex: 1; 649 | 650 | @media (min-width: $tablet) { 651 | margin-right: .5vw; 652 | max-height: 160px; 653 | overflow-y: auto; 654 | } 655 | } 656 | 657 | .edit-in-codepen { 658 | width: 4rem; 659 | background-image: url(http://blog.codepen.io/wp-content/uploads/2012/06/Button-White-Large.png); 660 | background-size: 60%; 661 | background-position: center center; 662 | background-repeat: no-repeat; 663 | transition: 664 | opacity $transition, 665 | transform $transition, 666 | background-size $transition; 667 | cursor: pointer; 668 | @include user-select; 669 | 670 | &:hover { 671 | opacity: .8; 672 | transition-duration: $transition/2; 673 | } 674 | 675 | &:active { 676 | transform: scale(.95); 677 | opacity: .5; 678 | transition-duration: 0; 679 | } 680 | 681 | &:focus { outline: 0; } 682 | } 683 | 684 | .block { 685 | display: none; 686 | padding: .25rem; 687 | line-height: 1.3; 688 | } 689 | 690 | .show { 691 | display: block; 692 | 693 | @for $i from 1 through 4 { 694 | &:nth-last-of-type(#{$i}) .point.changing { 695 | animation-delay: $i * $transition/2; 696 | } 697 | } 698 | } 699 | 700 | 701 | .point { 702 | display: inline-block; 703 | position: relative; 704 | vertical-align: baseline; 705 | 706 | .customizing-no-poly & { opacity: .5; } 707 | 708 | &:after { 709 | $size : 80px; 710 | 711 | display: block; 712 | position: absolute; 713 | content: ""; 714 | width: $size; 715 | height: $size; 716 | border-radius: 50%; 717 | background: currentColor; 718 | top: calc(50% - #{($size/2)}); 719 | left: calc(50% - #{($size/2)}); 720 | transform: scale(0); 721 | will-change: transform, opacity; 722 | opacity: 0; 723 | } 724 | 725 | &.changing { 726 | font-weight: bold; 727 | 728 | &:after { 729 | animation: emph $transition*5; 730 | animation-delay: inherit; 731 | } 732 | } 733 | } 734 | 735 | @keyframes emph { 736 | 20% { 737 | transform: none; 738 | opacity: .5; 739 | } 740 | to { 741 | opacity: 0; 742 | transform: scale(1.2); 743 | } 744 | } 745 | 746 | $colors : tomato, mediumseagreen, orange, dodgerblue, orchid, lightgray, darkturquoise, palevioletred, khaki, limegreen, coral, slateblue, indianred, gray, plum, olivedrab, lightgreen, lightsalmon, gold, peru, royalblue, sandybrown, lightseagreen, blueviolet, tomato, goldenrod, limegreen; 747 | 748 | .handle, .point, figure { 749 | @for $i from 1 through 27 { 750 | &:nth-of-type(#{$i}) { 751 | color: nth($colors, $i); 752 | } 753 | } 754 | } 755 | 756 | .side { 757 | padding: .25rem .25rem 1.25rem; 758 | 759 | @media (min-width: $tablet) { 760 | max-height: 100%; 761 | padding: .5rem 0 0 .125rem; 762 | } 763 | } 764 | 765 | .panel { 766 | flex: auto; 767 | display: block; 768 | padding: 1rem 1rem 1rem .5rem; 769 | background: white; 770 | border-radius: $radius; 771 | box-shadow: $shadow; 772 | margin: .5rem .25rem; 773 | 774 | &[href]:hover { 775 | box-shadow: $shadow-hover; 776 | } 777 | 778 | &:first-of-type { 779 | margin-top: .25rem; 780 | } 781 | } 782 | 783 | .flex { 784 | display: flex; 785 | align-items: center; 786 | } 787 | 788 | 789 | @media (min-width: $tablet) { 790 | $hide : $figure-height * 4 - .125rem; 791 | 792 | .options { 793 | position: relative; 794 | background: $lightgray; 795 | transform: translate3d(0, -$hide, 0); 796 | transition: 797 | transform $transition $transition/2 $bounce; 798 | 799 | &:before { 800 | @include overflow-shadow; 801 | 802 | left: 0; 803 | right: 0; 804 | bottom: 100%; 805 | height: 4rem; 806 | background: 807 | linear-gradient(rgba($lightgray,0), $lightgray 90%); 808 | transition: inherit; 809 | transition-timing-function: ease; 810 | transform-origin: center bottom; 811 | } 812 | 813 | .shapes:hover + &, 814 | .shapes:focus + & { 815 | transform: none; 816 | 817 | &:before { 818 | transform: scale3d(1, 0, 1); 819 | } 820 | } 821 | } 822 | } 823 | 824 | h2 { 825 | display: inline-block; 826 | flex: 4rem auto; 827 | font-size: 1.2rem; 828 | font-weight: 500; 829 | pointer-events: none; 830 | min-width: 1em; 831 | text-align: center; 832 | color: darken($lightgray, 10%); 833 | @include user-select; 834 | 835 | &.block { display: block; } 836 | 837 | &:first-child { 838 | text-align: left; 839 | color: $black; 840 | font-weight: 300; 841 | padding: 0 1.25rem 0 .5rem; 842 | } 843 | 844 | .side > & { 845 | // font-size: 1.4rem; 846 | padding: .75rem 1rem .25rem 1rem; 847 | 848 | } 849 | } 850 | 851 | input[type="radio"], 852 | input[type="checkbox"] { 853 | display: none; 854 | } 855 | 856 | label, input[type="number"], input[type="url"] { 857 | display: inline-block; 858 | font: inherit; 859 | position: relative; 860 | text-align: center; 861 | background: white; 862 | flex: 1; 863 | min-width: 2rem; 864 | padding: .5rem .25rem; 865 | border-radius: 2rem; 866 | box-shadow: 867 | inset 0 .125rem $lightgray, 868 | inset -.125rem 0 $lightgray, 869 | inset 0 -.125rem $lightgray; 870 | cursor: pointer; 871 | transition: background $transition; 872 | @include no-tap; 873 | @include user-select; 874 | 875 | &:hover { 876 | background: $lightgray; 877 | transition: background 0; 878 | } 879 | 880 | &[for="shadowboard-toggle"] { 881 | &:before { content: "Off"; } 882 | input:checked + &:before { content: "On"; } 883 | } 884 | 885 | &[for="webkit"] { 886 | &:before { 887 | content: "-"; 888 | font-family: monospace; 889 | vertical-align: top; 890 | } 891 | } 892 | 893 | &:first-of-type { 894 | box-shadow: 895 | inset 0 .125rem $lightgray, 896 | inset .125rem 0 $lightgray, 897 | inset -.125rem 0 $lightgray, 898 | inset 0 -.125rem $lightgray; 899 | } 900 | 901 | &.joined { 902 | border-radius: 0; 903 | 904 | &:first-of-type { 905 | border-top-left-radius: 2rem; 906 | border-bottom-left-radius: 2rem; 907 | } 908 | &:last-of-type { 909 | border-top-right-radius: 2rem; 910 | border-bottom-right-radius: 2rem; 911 | } 912 | } 913 | 914 | input:checked + &, 915 | &[type="number"]:focus, 916 | &[type="url"]:focus { 917 | background: $black; 918 | z-index: 100; 919 | color: $lightgray; 920 | outline: 0; 921 | box-shadow: 922 | inset 0 0 0 .125rem $black, 923 | 0 0 0 .125rem $black; 924 | 925 | &:hover { opacity: .8; } 926 | &:active { opacity: 1; } 927 | } 928 | } 929 | 930 | input[type="url"] { 931 | display: block; 932 | line-height: 40px; 933 | height: 40px; 934 | box-shadow: 935 | inset 0 .125rem $lightgray, 936 | inset .125rem 0 $lightgray, 937 | inset -.125rem 0 $lightgray, 938 | inset 0 -.125rem $lightgray; 939 | } 940 | 941 | input[type="number"] { 942 | font-family: inherit; 943 | font-size: 1.1rem; 944 | border-radius: 2rem; 945 | box-shadow: 946 | inset 0 0 0 .125rem $lightgray; 947 | 948 | appearance: textfield; 949 | -moz-appearance: textfield; 950 | &::-webkit-inner-spin-button, 951 | &::-webkit-outer-spin-button { 952 | -webkit-appearance: none; 953 | appearance: none; 954 | margin: 0; 955 | } 956 | } 957 | 958 | .shadowboard-toggle { 959 | margin-top: 1rem; 960 | } 961 | 962 | .backgrounds { 963 | overflow: hidden; 964 | position: relative; 965 | padding: .5rem 0 .75rem .375rem; 966 | 967 | img { 968 | cursor: pointer; 969 | border-radius: .25rem; 970 | float: left; 971 | width: calc(25% - .25rem); 972 | height: auto; 973 | outline: .25rem solid white; 974 | margin: .125rem; 975 | transition: $transition*2; 976 | -ms-interpolation-mode: bicubic; 977 | @include user-drag; 978 | 979 | &:hover { 980 | opacity: .9; 981 | } 982 | 983 | &:active { 984 | opacity: .5; 985 | transition: 0; 986 | } 987 | } 988 | 989 | & + input { 990 | font: inherit; 991 | font-size: 1rem; 992 | line-height: 2; 993 | width: calc(100% - .375rem); 994 | margin-left: .375rem; 995 | text-align: left; 996 | padding: .25rem 1rem; 997 | } 998 | } 999 | @keyframes selected { 10% { opacity: .5; } } 1000 | 1001 | .no-support-message { 1002 | display: none; 1003 | 1004 | .no-support & { 1005 | display: block; 1006 | } 1007 | } 1008 | 1009 | 1010 | .cite.panel { 1011 | @include user-select; 1012 | 1013 | .twitter { margin: .75rem 0 .5rem .5rem; } 1014 | 1015 | p { font-size: .95rem; } 1016 | a { 1017 | text-decoration: none; 1018 | font-weight: 500; 1019 | color: inherit; 1020 | transition: $transition; 1021 | } 1022 | 1023 | &:hover a { 1024 | color: $linkblue; 1025 | 1026 | &:hover { text-decoration: underline; } 1027 | } 1028 | } 1029 | 1030 | .warning.panel { 1031 | background: $red; 1032 | 1033 | &:active { background: $red; } 1034 | 1035 | h1 { 1036 | font-weight: 300; 1037 | font-size: 2.5rem; 1038 | padding: 0 .5rem; 1039 | 1040 | &:before { 1041 | font: .7em Browsers; 1042 | content: "\e609"; 1043 | padding-right: .5em; 1044 | } 1045 | } 1046 | } 1047 | 1048 | .browser-support { 1049 | color: inherit; 1050 | text-decoration: none; 1051 | 1052 | .no-support &.permanent { 1053 | display: none; 1054 | } 1055 | 1056 | h2 { 1057 | display: flex; 1058 | padding-right: 0; 1059 | } 1060 | 1061 | small { 1062 | flex: 1; 1063 | text-align: right; 1064 | padding-left: 1em; 1065 | 1066 | &:before { content: "("; } 1067 | &:after { content: ")"; } 1068 | } 1069 | 1070 | &:hover small { 1071 | color: $linkblue; 1072 | text-decoration: underline; 1073 | 1074 | &:before { content: "www."; } 1075 | &:after { content: ""; } 1076 | } 1077 | 1078 | &:active { background: rgba(white, .5); } 1079 | 1080 | .table { 1081 | display: flex; 1082 | justify-content: space-between; 1083 | flex-wrap: wrap; 1084 | margin-top: .5rem; 1085 | padding: .25rem; 1086 | } 1087 | } 1088 | 1089 | 1090 | .icon { 1091 | display: inline-block; 1092 | text-align: center; 1093 | padding: .25rem; 1094 | color: $black; 1095 | transition: 1096 | color $transition, 1097 | transform $transition, 1098 | text-shadow $transition; 1099 | @include user-select; 1100 | 1101 | .panel:hover & { 1102 | &.unsupported { 1103 | transform: scale(.9); 1104 | opacity: .15; 1105 | } 1106 | } 1107 | 1108 | &:before { 1109 | display: block; 1110 | font-family: Browsers; 1111 | font-size: 2.5em; 1112 | } 1113 | &.chrome:before { content: "\e603"; } 1114 | &.safari:before { content: "\e607"; } 1115 | &.opera:before { content: "\e606"; } 1116 | &.firefox:before { content: "\e604"; } 1117 | &.ie:before { content: "\e605"; } 1118 | 1119 | &:after { 1120 | display: block; 1121 | font-size: 1.25em; 1122 | content: attr(data-version); 1123 | padding-top: .25rem; 1124 | } 1125 | 1126 | &.unsupported { 1127 | opacity: .3; 1128 | } 1129 | 1130 | [data-version=""]:after { 1131 | content: "/u00D7"; 1132 | } 1133 | } 1134 | 1135 | 1136 | p { 1137 | font-size: 1.1rem; 1138 | line-height: 1.2; 1139 | padding: .5rem 0 0 .5rem; 1140 | } 1141 | 1142 | 1143 | 1144 | @font-face { 1145 | font-family: "Alegreya Sans"; 1146 | font-style: normal; 1147 | font-weight: 300; 1148 | src: local('Alegreya Sans Light'), local('AlegreyaSans-Light'), url(http://fonts.gstatic.com/s/alegreyasans/v2/11EDm-lum6tskJMBbdy9aanUXp5W4FLE8OnWB9t-aHo.woff) format('woff'); 1149 | } 1150 | @font-face { 1151 | font-family: 'Alegreya Sans'; 1152 | font-style: italic; 1153 | font-weight: 300; 1154 | src: local('Alegreya Sans Light Italic'), local('AlegreyaSans-LightItalic'), url(http://fonts.gstatic.com/s/alegreyasans/v3/WfiXipsmjqRqsDBQ1bA9CjlgAWjU5_zqYf1mnuZ7Lrf3rGVtsTkPsbDajuO5ueQw.woff2) format('woff2'); 1155 | unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; 1156 | } 1157 | @font-face { 1158 | font-family: "Alegreya Sans"; 1159 | font-style: normal; 1160 | font-weight: 400; 1161 | src: local('Alegreya Sans'), local('AlegreyaSans-Regular'), url(http://fonts.gstatic.com/s/alegreyasans/v2/KYNzioYhDai7mTMnx_gDgnt9r5m2YmP5sw3cUAQwL0E.woff) format('woff'); 1162 | } 1163 | @font-face { 1164 | font-family: "Browsers"; 1165 | src: url(fonts/browsers.eot); 1166 | src: url(fonts/browsers.eot) format('embedded-opentype'), 1167 | url(fonts/browsers.woff) format('woff'), 1168 | url(fonts/browsers.ttf) format('truetype'), 1169 | url(fonts/browsers.svg) format('svg'); 1170 | font-weight: normal; 1171 | font-style: normal; 1172 | } -------------------------------------------------------------------------------- /draggabilly.min.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * Draggabilly PACKAGED v1.1.0 3 | * Make that shiz draggable 4 | * http://draggabilly.desandro.com 5 | * MIT license 6 | */ 7 | 8 | (function(t){function e(t){return RegExp("(^|\\s+)"+t+"(\\s+|$)")}function n(t,e){var n=i(t,e)?r:o;n(t,e)}var i,o,r;"classList"in document.documentElement?(i=function(t,e){return t.classList.contains(e)},o=function(t,e){t.classList.add(e)},r=function(t,e){t.classList.remove(e)}):(i=function(t,n){return e(n).test(t.className)},o=function(t,e){i(t,e)||(t.className=t.className+" "+e)},r=function(t,n){t.className=t.className.replace(e(n)," ")});var s={hasClass:i,addClass:o,removeClass:r,toggleClass:n,has:i,add:o,remove:r,toggle:n};"function"==typeof define&&define.amd?define("classie/classie",s):t.classie=s})(window),function(){function t(){}function e(t,e){for(var n=t.length;n--;)if(t[n].listener===e)return n;return-1}function n(t){return function(){return this[t].apply(this,arguments)}}var i=t.prototype,o=this,r=o.EventEmitter;i.getListeners=function(t){var e,n,i=this._getEvents();if(t instanceof RegExp){e={};for(n in i)i.hasOwnProperty(n)&&t.test(n)&&(e[n]=i[n])}else e=i[t]||(i[t]=[]);return e},i.flattenListeners=function(t){var e,n=[];for(e=0;t.length>e;e+=1)n.push(t[e].listener);return n},i.getListenersAsObject=function(t){var e,n=this.getListeners(t);return n instanceof Array&&(e={},e[t]=n),e||n},i.addListener=function(t,n){var i,o=this.getListenersAsObject(t),r="object"==typeof n;for(i in o)o.hasOwnProperty(i)&&-1===e(o[i],n)&&o[i].push(r?n:{listener:n,once:!1});return this},i.on=n("addListener"),i.addOnceListener=function(t,e){return this.addListener(t,{listener:e,once:!0})},i.once=n("addOnceListener"),i.defineEvent=function(t){return this.getListeners(t),this},i.defineEvents=function(t){for(var e=0;t.length>e;e+=1)this.defineEvent(t[e]);return this},i.removeListener=function(t,n){var i,o,r=this.getListenersAsObject(t);for(o in r)r.hasOwnProperty(o)&&(i=e(r[o],n),-1!==i&&r[o].splice(i,1));return this},i.off=n("removeListener"),i.addListeners=function(t,e){return this.manipulateListeners(!1,t,e)},i.removeListeners=function(t,e){return this.manipulateListeners(!0,t,e)},i.manipulateListeners=function(t,e,n){var i,o,r=t?this.removeListener:this.addListener,s=t?this.removeListeners:this.addListeners;if("object"!=typeof e||e instanceof RegExp)for(i=n.length;i--;)r.call(this,e,n[i]);else for(i in e)e.hasOwnProperty(i)&&(o=e[i])&&("function"==typeof o?r.call(this,i,o):s.call(this,i,o));return this},i.removeEvent=function(t){var e,n=typeof t,i=this._getEvents();if("string"===n)delete i[t];else if(t instanceof RegExp)for(e in i)i.hasOwnProperty(e)&&t.test(e)&&delete i[e];else delete this._events;return this},i.removeAllListeners=n("removeEvent"),i.emitEvent=function(t,e){var n,i,o,r,s=this.getListenersAsObject(t);for(o in s)if(s.hasOwnProperty(o))for(i=s[o].length;i--;)n=s[o][i],n.once===!0&&this.removeListener(t,n.listener),r=n.listener.apply(this,e||[]),r===this._getOnceReturnValue()&&this.removeListener(t,n.listener);return this},i.trigger=n("emitEvent"),i.emit=function(t){var e=Array.prototype.slice.call(arguments,1);return this.emitEvent(t,e)},i.setOnceReturnValue=function(t){return this._onceReturnValue=t,this},i._getOnceReturnValue=function(){return this.hasOwnProperty("_onceReturnValue")?this._onceReturnValue:!0},i._getEvents=function(){return this._events||(this._events={})},t.noConflict=function(){return o.EventEmitter=r,t},"function"==typeof define&&define.amd?define("eventEmitter/EventEmitter",[],function(){return t}):"object"==typeof module&&module.exports?module.exports=t:this.EventEmitter=t}.call(this),function(t){function e(e){var n=t.event;return n.target=n.target||n.srcElement||e,n}var n=document.documentElement,i=function(){};n.addEventListener?i=function(t,e,n){t.addEventListener(e,n,!1)}:n.attachEvent&&(i=function(t,n,i){t[n+i]=i.handleEvent?function(){var n=e(t);i.handleEvent.call(i,n)}:function(){var n=e(t);i.call(t,n)},t.attachEvent("on"+n,t[n+i])});var o=function(){};n.removeEventListener?o=function(t,e,n){t.removeEventListener(e,n,!1)}:n.detachEvent&&(o=function(t,e,n){t.detachEvent("on"+e,t[e+n]);try{delete t[e+n]}catch(i){t[e+n]=void 0}});var r={bind:i,unbind:o};"function"==typeof define&&define.amd?define("eventie/eventie",r):"object"==typeof exports?module.exports=r:t.eventie=r}(this),function(t){function e(t){if(t){if("string"==typeof i[t])return t;t=t.charAt(0).toUpperCase()+t.slice(1);for(var e,o=0,r=n.length;r>o;o++)if(e=n[o]+t,"string"==typeof i[e])return e}}var n="Webkit Moz ms Ms O".split(" "),i=document.documentElement.style;"function"==typeof define&&define.amd?define("get-style-property/get-style-property",[],function(){return e}):"object"==typeof exports?module.exports=e:t.getStyleProperty=e}(window),function(t){function e(t){var e=parseFloat(t),n=-1===t.indexOf("%")&&!isNaN(e);return n&&e}function n(){for(var t={width:0,height:0,innerWidth:0,innerHeight:0,outerWidth:0,outerHeight:0},e=0,n=s.length;n>e;e++){var i=s[e];t[i]=0}return t}function i(t){function i(t){if("string"==typeof t&&(t=document.querySelector(t)),t&&"object"==typeof t&&t.nodeType){var i=r(t);if("none"===i.display)return n();var o={};o.width=t.offsetWidth,o.height=t.offsetHeight;for(var d=o.isBorderBox=!(!u||!i[u]||"border-box"!==i[u]),p=0,c=s.length;c>p;p++){var f=s[p],l=i[f];l=a(t,l);var g=parseFloat(l);o[f]=isNaN(g)?0:g}var v=o.paddingLeft+o.paddingRight,m=o.paddingTop+o.paddingBottom,y=o.marginLeft+o.marginRight,E=o.marginTop+o.marginBottom,x=o.borderLeftWidth+o.borderRightWidth,b=o.borderTopWidth+o.borderBottomWidth,L=d&&h,P=e(i.width);P!==!1&&(o.width=P+(L?0:v+x));var S=e(i.height);return S!==!1&&(o.height=S+(L?0:m+b)),o.innerWidth=o.width-(v+x),o.innerHeight=o.height-(m+b),o.outerWidth=o.width+y,o.outerHeight=o.height+E,o}}function a(t,e){if(o||-1===e.indexOf("%"))return e;var n=t.style,i=n.left,r=t.runtimeStyle,s=r&&r.left;return s&&(r.left=t.currentStyle.left),n.left=e,e=n.pixelLeft,n.left=i,s&&(r.left=s),e}var h,u=t("boxSizing");return function(){if(u){var t=document.createElement("div");t.style.width="200px",t.style.padding="1px 2px 3px 4px",t.style.borderStyle="solid",t.style.borderWidth="1px 2px 3px 4px",t.style[u]="border-box";var n=document.body||document.documentElement;n.appendChild(t);var i=r(t);h=200===e(i.width),n.removeChild(t)}}(),i}var o=t.getComputedStyle,r=o?function(t){return o(t,null)}:function(t){return t.currentStyle},s=["paddingLeft","paddingRight","paddingTop","paddingBottom","marginLeft","marginRight","marginTop","marginBottom","borderLeftWidth","borderRightWidth","borderTopWidth","borderBottomWidth"];"function"==typeof define&&define.amd?define("get-size/get-size",["get-style-property/get-style-property"],i):"object"==typeof exports?module.exports=i(require("get-style-property")):t.getSize=i(t.getStyleProperty)}(window),function(t){function e(t,e){for(var n in e)t[n]=e[n];return t}function n(){}function i(i,o,s,u,d){function c(t,n){this.element="string"==typeof t?r.querySelector(t):t,this.options=e({},this.options),e(this.options,n),this._create()}function f(){return!1}function l(t,e){t.x=void 0!==e.pageX?e.pageX:e.clientX,t.y=void 0!==e.pageY?e.pageY:e.clientY}function g(t,e,n){return n=n||"round",e?Math[n](t/e)*e:t}var v=u("transform"),m=!!u("perspective");e(c.prototype,o.prototype),c.prototype.options={},c.prototype._create=function(){this.position={},this._getPosition(),this.startPoint={x:0,y:0},this.dragPoint={x:0,y:0},this.startPosition=e({},this.position);var t=a(this.element);"relative"!==t.position&&"absolute"!==t.position&&(this.element.style.position="relative"),this.enable(),this.setHandles()},c.prototype.setHandles=function(){this.handles=this.options.handle?this.element.querySelectorAll(this.options.handle):[this.element];for(var e=0,n=this.handles.length;n>e;e++){var i=this.handles[e];t.navigator.pointerEnabled?(s.bind(i,"pointerdown",this),i.style.touchAction="none"):t.navigator.msPointerEnabled?(s.bind(i,"MSPointerDown",this),i.style.msTouchAction="none"):(s.bind(i,"mousedown",this),s.bind(i,"touchstart",this),E(i))}};var y="attachEvent"in r.documentElement,E=y?function(t){"IMG"===t.nodeName&&(t.ondragstart=f);for(var e=t.querySelectorAll("img"),n=0,i=e.length;i>n;n++){var o=e[n];o.ondragstart=f}}:n;c.prototype._getPosition=function(){var t=a(this.element),e=parseInt(t.left,10),n=parseInt(t.top,10);this.position.x=isNaN(e)?0:e,this.position.y=isNaN(n)?0:n,this._addTransformPosition(t)},c.prototype._addTransformPosition=function(t){if(v){var e=t[v];if(0===e.indexOf("matrix")){var n=e.split(","),i=0===e.indexOf("matrix3d")?12:4,o=parseInt(n[i],10),r=parseInt(n[i+1],10);this.position.x+=o,this.position.y+=r}}},c.prototype.handleEvent=function(t){var e="on"+t.type;this[e]&&this[e](t)},c.prototype.getTouch=function(t){for(var e=0,n=t.length;n>e;e++){var i=t[e];if(i.identifier===this.pointerIdentifier)return i}},c.prototype.onmousedown=function(t){var e=t.button;e&&0!==e&&1!==e||this.dragStart(t,t)},c.prototype.ontouchstart=function(t){this.isDragging||this.dragStart(t,t.changedTouches[0])},c.prototype.onMSPointerDown=c.prototype.onpointerdown=function(t){this.isDragging||this.dragStart(t,t)};var x={mousedown:["mousemove","mouseup"],touchstart:["touchmove","touchend","touchcancel"],pointerdown:["pointermove","pointerup","pointercancel"],MSPointerDown:["MSPointerMove","MSPointerUp","MSPointerCancel"]};c.prototype.dragStart=function(e,n){this.isEnabled&&(e.preventDefault?e.preventDefault():e.returnValue=!1,this.pointerIdentifier=void 0!==n.pointerId?n.pointerId:n.identifier,this._getPosition(),this.measureContainment(),l(this.startPoint,n),this.startPosition.x=this.position.x,this.startPosition.y=this.position.y,this.setLeftTop(),this.dragPoint.x=0,this.dragPoint.y=0,this._bindEvents({events:x[e.type],node:e.preventDefault?t:r}),i.add(this.element,"is-dragging"),this.isDragging=!0,this.emitEvent("dragStart",[this,e,n]),this.animate())},c.prototype._bindEvents=function(t){for(var e=0,n=t.events.length;n>e;e++){var i=t.events[e];s.bind(t.node,i,this)}this._boundEvents=t},c.prototype._unbindEvents=function(){var t=this._boundEvents;if(t&&t.events){for(var e=0,n=t.events.length;n>e;e++){var i=t.events[e];s.unbind(t.node,i,this)}delete this._boundEvents}},c.prototype.measureContainment=function(){var t=this.options.containment;if(t){this.size=d(this.element);var e=this.element.getBoundingClientRect(),n=h(t)?t:"string"==typeof t?r.querySelector(t):this.element.parentNode;this.containerSize=d(n);var i=n.getBoundingClientRect();this.relativeStartPosition={x:e.left-i.left,y:e.top-i.top}}},c.prototype.onmousemove=function(t){this.dragMove(t,t)},c.prototype.onMSPointerMove=c.prototype.onpointermove=function(t){t.pointerId===this.pointerIdentifier&&this.dragMove(t,t)},c.prototype.ontouchmove=function(t){var e=this.getTouch(t.changedTouches);e&&this.dragMove(t,e)},c.prototype.dragMove=function(t,e){l(this.dragPoint,e);var n=this.dragPoint.x-this.startPoint.x,i=this.dragPoint.y-this.startPoint.y,o=this.options.grid,r=o&&o[0],s=o&&o[1];n=g(n,r),i=g(i,s),n=this.containDrag("x",n,r),i=this.containDrag("y",i,s),n="y"===this.options.axis?0:n,i="x"===this.options.axis?0:i,this.position.x=this.startPosition.x+n,this.position.y=this.startPosition.y+i,this.dragPoint.x=n,this.dragPoint.y=i,this.emitEvent("dragMove",[this,t,e])},c.prototype.containDrag=function(t,e,n){if(!this.options.containment)return e;var i="x"===t?"width":"height",o=this.relativeStartPosition[t],r=g(-o,n,"ceil"),s=this.containerSize[i]-o-this.size[i];return s=g(s,n,"floor"),Math.min(s,Math.max(r,e))},c.prototype.onmouseup=function(t){this.dragEnd(t,t)},c.prototype.onMSPointerUp=c.prototype.onpointerup=function(t){t.pointerId===this.pointerIdentifier&&this.dragEnd(t,t)},c.prototype.ontouchend=function(t){var e=this.getTouch(t.changedTouches);e&&this.dragEnd(t,e)},c.prototype.dragEnd=function(t,e){this.isDragging=!1,delete this.pointerIdentifier,v&&(this.element.style[v]="",this.setLeftTop()),this._unbindEvents(),i.remove(this.element,"is-dragging"),this.emitEvent("dragEnd",[this,t,e])},c.prototype.onMSPointerCancel=c.prototype.onpointercancel=function(t){t.pointerId===this.pointerIdentifier&&this.dragEnd(t,t)},c.prototype.ontouchcancel=function(t){var e=this.getTouch(t.changedTouches);this.dragEnd(t,e)},c.prototype.animate=function(){if(this.isDragging){this.positionDrag();var t=this;p(function(){t.animate()})}};var b=m?function(t,e){return"translate3d( "+t+"px, "+e+"px, 0)"}:function(t,e){return"translate( "+t+"px, "+e+"px)"};return c.prototype.setLeftTop=function(){this.element.style.left=this.position.x+"px",this.element.style.top=this.position.y+"px"},c.prototype.positionDrag=v?function(){this.element.style[v]=b(this.dragPoint.x,this.dragPoint.y)}:c.prototype.setLeftTop,c.prototype.enable=function(){this.isEnabled=!0},c.prototype.disable=function(){this.isEnabled=!1,this.isDragging&&this.dragEnd()},c}for(var o,r=t.document,s=r.defaultView,a=s&&s.getComputedStyle?function(t){return s.getComputedStyle(t,null)}:function(t){return t.currentStyle},h="object"==typeof HTMLElement?function(t){return t instanceof HTMLElement}:function(t){return t&&"object"==typeof t&&1===t.nodeType&&"string"==typeof t.nodeName},u=0,d="webkit moz ms o".split(" "),p=t.requestAnimationFrame,c=t.cancelAnimationFrame,f=0;d.length>f&&(!p||!c);f++)o=d[f],p=p||t[o+"RequestAnimationFrame"],c=c||t[o+"CancelAnimationFrame"]||t[o+"CancelRequestAnimationFrame"];p&&c||(p=function(e){var n=(new Date).getTime(),i=Math.max(0,16-(n-u)),o=t.setTimeout(function(){e(n+i)},i);return u=n+i,o},c=function(e){t.clearTimeout(e)}),"function"==typeof define&&define.amd?define(["classie/classie","eventEmitter/EventEmitter","eventie/eventie","get-style-property/get-style-property","get-size/get-size"],i):t.Draggabilly=i(t.classie,t.EventEmitter,t.eventie,t.getStyleProperty,t.getSize)}(window); -------------------------------------------------------------------------------- /favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bennettfeely/clippy/2f8d59931d1d373fddc7e7b3bf5a220539fd818a/favicon.ico -------------------------------------------------------------------------------- /fonts/browsers.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bennettfeely/clippy/2f8d59931d1d373fddc7e7b3bf5a220539fd818a/fonts/browsers.eot -------------------------------------------------------------------------------- /fonts/browsers.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Generated by IcoMoon 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /fonts/browsers.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bennettfeely/clippy/2f8d59931d1d373fddc7e7b3bf5a220539fd818a/fonts/browsers.ttf -------------------------------------------------------------------------------- /fonts/browsers.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bennettfeely/clippy/2f8d59931d1d373fddc7e7b3bf5a220539fd818a/fonts/browsers.woff -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | var gulp = require("gulp"); 2 | var git = require("gulp-git"); 3 | 4 | gulp.task("clone", function () { 5 | git.clone("https://github.com/stevelacy/gulp-git", function (err) { 6 | if (err) throw err; 7 | }); 8 | }); 9 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Clippy — CSS clip-path maker 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 |
18 | CSS clip-path maker 19 | 20 | 21 | 22 | 25 | 26 | 27 | 28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 | to add points
to 39 | custom polygon. 40 |
41 |
42 |
43 |
44 |
45 |

Custom shape

46 | 47 |
48 |
49 |
50 |

Round edges

51 | 52 |
53 |

54 | The inset() shape optionally allows values 55 | similar to border-radius for rounded edges. 56 | This new feature may be buggy in 57 | your browser. 58 |

59 |
60 | 63 |
64 |
65 | 71 | clip-path: ; 72 |
73 | 74 |
75 |
76 |
77 |
78 |
79 |
This ad keeps this site running.
80 |
Consider whitelisting this page.
81 |
Thank you for visiting either way!
82 |
83 | 84 |
85 |
86 |
87 |

Round edges

88 | 89 |
90 |

91 | The inset() shape optionally allows values 92 | similar to border-radius for rounded edges. 93 | This new feature may be buggy in 94 | your browser. 95 |

96 |
97 |
98 |

Custom shape

99 | 100 |
101 |
102 | 103 |
104 |
105 | 118 |
119 |

Demo Size

120 | 121 |

×

122 | 123 |
124 |
125 |

Demo Background

126 |
127 | 128 | 129 | 130 | 131 |
132 | 133 | 134 |
135 |

Show outside clip-path

136 | 137 | 138 |
139 |
140 |
141 |

About Clip Paths

142 |

The clip-path property allows you to make complex shapes in CSS by clipping an element to a basic shape (circle, ellipse, polygon, or inset), or to an SVG source.

143 |

CSS Animations and transitions are possible with two or more clip-path shapes with the same number of points.

144 |
145 |
146 |

Browser Support

147 |

Check out the current browser support for the clip-path property on Can I Use.

148 |
149 | 150 | 151 | 152 | 159 | 160 | 174 |
175 |

Brought to you by Bennett Feely

176 | 179 |

Find this project on Github.

180 |

Want a list of the name of every polygon? Check out my new site, Copy Paste List.

181 |
182 |
183 |
184 | 185 | 186 | 187 | 188 | 189 | 190 | 191 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "clippy", 3 | "author": "Bennett Feely", 4 | "description": "Create CSS clip-paths", 5 | "repository": { 6 | "type": "git", 7 | "url": "git://github.com/bennettfeely/clippy.git" 8 | }, 9 | "devDependencies": { 10 | "favicon": "0.0.2", 11 | "grunt": "^0.4.5", 12 | "grunt-autoprefixer": "^1.0.0", 13 | "grunt-contrib-cssmin": "^0.10.0", 14 | "grunt-contrib-htmlmin": "v3.1.0", 15 | "grunt-contrib-imagemin": "^0.8.0", 16 | "grunt-contrib-sass": "^0.7.4", 17 | "grunt-contrib-uglify": "^0.5.1", 18 | "grunt-contrib-watch": "^0.6.1", 19 | "grunt-favicons": "^0.6.4", 20 | "grunt-remfallback": "0.0.5", 21 | "grunt-uncss": "^0.3.5" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /pics/colorado.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bennettfeely/clippy/2f8d59931d1d373fddc7e7b3bf5a220539fd818a/pics/colorado.jpg -------------------------------------------------------------------------------- /pics/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bennettfeely/clippy/2f8d59931d1d373fddc7e7b3bf5a220539fd818a/pics/favicon.png -------------------------------------------------------------------------------- /pics/fierenze.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bennettfeely/clippy/2f8d59931d1d373fddc7e7b3bf5a220539fd818a/pics/fierenze.JPG -------------------------------------------------------------------------------- /pics/golf.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bennettfeely/clippy/2f8d59931d1d373fddc7e7b3bf5a220539fd818a/pics/golf.jpg -------------------------------------------------------------------------------- /pics/homescreen-196x196.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bennettfeely/clippy/2f8d59931d1d373fddc7e7b3bf5a220539fd818a/pics/homescreen-196x196.png -------------------------------------------------------------------------------- /pics/isaac.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bennettfeely/clippy/2f8d59931d1d373fddc7e7b3bf5a220539fd818a/pics/isaac.jpg -------------------------------------------------------------------------------- /pics/miami.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bennettfeely/clippy/2f8d59931d1d373fddc7e7b3bf5a220539fd818a/pics/miami.JPG -------------------------------------------------------------------------------- /pics/pittsburgh-night.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bennettfeely/clippy/2f8d59931d1d373fddc7e7b3bf5a220539fd818a/pics/pittsburgh-night.jpg -------------------------------------------------------------------------------- /pics/pittsburgh.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bennettfeely/clippy/2f8d59931d1d373fddc7e7b3bf5a220539fd818a/pics/pittsburgh.jpg -------------------------------------------------------------------------------- /pics/sparkler.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bennettfeely/clippy/2f8d59931d1d373fddc7e7b3bf5a220539fd818a/pics/sparkler.jpg -------------------------------------------------------------------------------- /style.min.css: -------------------------------------------------------------------------------- 1 | * { 2 | -moz-box-sizing: border-box; 3 | box-sizing: border-box; 4 | line-height: 1; 5 | vertical-align: middle; 6 | margin: 0; 7 | padding: 0; 8 | border: 0; 9 | } 10 | 11 | header, 12 | section, 13 | main, 14 | figure { 15 | display: block; 16 | } 17 | 18 | html, 19 | body { 20 | position: relative; 21 | height: 100%; 22 | } 23 | 24 | body { 25 | font: 100%/1.5 "Alegreya Sans", sans-serif; 26 | background: #d3d0c9; 27 | color: #100a09; 28 | } 29 | 30 | @media (min-width: 800px) { 31 | body { 32 | padding: 0 0.5rem 0; 33 | padding-left: -webkit-calc(100% - 23.625rem); 34 | padding-left: calc(100% - 23.625rem); 35 | } 36 | } 37 | 38 | .main { 39 | display: -webkit-box; 40 | display: -webkit-flex; 41 | display: -ms-flexbox; 42 | display: flex; 43 | -webkit-box-orient: vertical; 44 | -webkit-box-direction: normal; 45 | -webkit-flex-direction: column; 46 | -ms-flex-direction: column; 47 | flex-direction: column; 48 | } 49 | 50 | @media (min-width: 800px) { 51 | .main { 52 | position: fixed; 53 | top: 0; 54 | left: 0; 55 | height: 100%; 56 | right: 23.625rem; 57 | padding: 0.25rem 0.25rem 0.25rem 0.75rem; 58 | -ms-touch-action: none; 59 | touch-action: none; 60 | } 61 | } 62 | 63 | header { 64 | display: -webkit-box; 65 | display: -webkit-flex; 66 | display: -ms-flexbox; 67 | display: flex; 68 | -webkit-box-align: center; 69 | -webkit-align-items: center; 70 | -ms-flex-align: center; 71 | align-items: center; 72 | -webkit-box-pack: justify; 73 | -webkit-justify-content: space-between; 74 | -ms-flex-pack: justify; 75 | justify-content: space-between; 76 | background: rgba(251, 252, 247, 0.75); 77 | box-shadow: inset 0 -1px rgba(211, 208, 201, 0.25); 78 | padding: 0.75rem 1rem 0.75rem; 79 | } 80 | 81 | @media (min-width: 800px) { 82 | header { 83 | font-size: larger; 84 | margin-top: 0.5rem; 85 | padding: 0.75rem 1rem; 86 | border-radius: 2px 2px 0 0; 87 | } 88 | } 89 | 90 | header a { 91 | display: inline-block; 92 | text-decoration: none; 93 | color: inherit; 94 | padding: 0.25rem; 95 | -ms-user-select: none; 96 | -webkit-user-select: none; 97 | -moz-user-select: none; 98 | user-select: none; 99 | } 100 | 101 | header a:hover { 102 | text-decoration: underline; 103 | } 104 | 105 | header iframe { 106 | max-width: 95px; 107 | -webkit-animation: load 1s both; 108 | animation: load 1s both; 109 | } 110 | 111 | @-webkit-keyframes load { 112 | from { 113 | opacity: 0; 114 | } 115 | } 116 | 117 | @keyframes load { 118 | from { 119 | opacity: 0; 120 | } 121 | } 122 | 123 | .demo-container { 124 | display: -webkit-box; 125 | display: -webkit-flex; 126 | display: -ms-flexbox; 127 | display: flex; 128 | -webkit-box-pack: center; 129 | -webkit-justify-content: center; 130 | -ms-flex-pack: center; 131 | justify-content: center; 132 | -webkit-box-align: center; 133 | -webkit-align-items: center; 134 | -ms-flex-align: center; 135 | align-items: center; 136 | -webkit-box-flex: 1; 137 | -webkit-flex: 1; 138 | -ms-flex: 1; 139 | flex: 1; 140 | background: #fbfcf7; 141 | box-shadow: 0 1px 2px rgba(16, 10, 9, 0.15); 142 | position: relative; 143 | z-index: 100; 144 | padding-top: 0.5rem; 145 | -ms-user-select: none; 146 | -webkit-user-select: none; 147 | -moz-user-select: none; 148 | user-select: none; 149 | -webkit-tap-highlight-color: transparent; 150 | -webkit-touch-callout: none; 151 | tap-highlight-color: transparent; 152 | touch-callout: none; 153 | } 154 | 155 | @media (min-width: 800px) { 156 | .demo-container { 157 | border-radius: 0 0 2px 2px; 158 | } 159 | } 160 | 161 | .demo { 162 | position: relative; 163 | padding: 0 0 1rem; 164 | } 165 | 166 | .customizing .demo { 167 | cursor: crosshair; 168 | } 169 | 170 | .box { 171 | position: relative; 172 | box-shadow: inset 0 0 0 10px #fbfcf7, inset 0 0 0 11px #d3d0c9; 173 | -ms-touch-action: none; 174 | touch-action: none; 175 | } 176 | 177 | .shadowboard, 178 | .clipboard { 179 | position: absolute; 180 | top: 10px; 181 | left: 10px; 182 | right: 10px; 183 | bottom: 10px; 184 | background-color: #d3d0c9; 185 | background-image: url(pics/pittsburgh.jpg); 186 | background-size: cover; 187 | background-position: center center; 188 | } 189 | 190 | .shadowboard { 191 | pointer-events: none; 192 | opacity: 0; 193 | -webkit-transition: opacity 0.375s; 194 | transition: opacity 0.375s; 195 | } 196 | 197 | .handles { 198 | position: absolute; 199 | top: 0; 200 | left: 0; 201 | right: 0; 202 | bottom: 0; 203 | } 204 | 205 | .handle, 206 | .delete-point { 207 | position: absolute; 208 | width: 20px; 209 | height: 20px; 210 | } 211 | 212 | .handle { 213 | border-radius: 50%; 214 | box-shadow: inset 0 0 0 10px; 215 | opacity: 0.8; 216 | -webkit-transition: opacity 0.25s; 217 | transition: opacity 0.25s; 218 | cursor: -webkit-grab; 219 | cursor: -moz-grab; 220 | cursor: grab; 221 | } 222 | 223 | .customizing .handle { 224 | cursor: crosshair; 225 | } 226 | 227 | .customizing:not(.customizing-no-poly) .handle[data-handle="1"] { 228 | cursor: pointer; 229 | } 230 | 231 | .customizing:not(.customizing-no-poly) .handle[data-handle="1"]:hover { 232 | border-radius: 2px; 233 | color: black; 234 | } 235 | 236 | .customizing:not(.customizing-no-poly) .handle[data-handle="1"]:hover:before { 237 | display: block; 238 | position: absolute; 239 | top: 0; 240 | left: 0; 241 | right: 0; 242 | bottom: 0; 243 | content: ""; 244 | -webkit-clip-path: polygon( 245 | 67% 30%, 246 | 43% 54%, 247 | 33% 42%, 248 | 24% 51%, 249 | 44% 72%, 250 | 76% 39% 251 | ); 252 | clip-path: polygon(67% 30%, 43% 54%, 33% 42%, 24% 51%, 44% 72%, 76% 39%); 253 | background: #d3d0c9; 254 | } 255 | 256 | .customizing:not(.customizing-no-poly) .handle[data-handle="1"]:active { 257 | color: #555; 258 | } 259 | 260 | .customizing:not(.customizing-no-poly) .handle[data-handle="1"]:active:before { 261 | background: white; 262 | } 263 | 264 | .handle:after { 265 | display: block; 266 | content: ""; 267 | position: absolute; 268 | top: -8px; 269 | left: -8px; 270 | right: -8px; 271 | bottom: -8px; 272 | } 273 | 274 | .demo:hover .handle { 275 | opacity: 1; 276 | } 277 | 278 | .handle.is-dragging { 279 | z-index: 100; 280 | box-shadow: inset 0 0 0 3px; 281 | cursor: none; 282 | -webkit-transition: box-shadow 0; 283 | transition: box-shadow 0; 284 | } 285 | 286 | .handle.bar { 287 | border-radius: 20px; 288 | } 289 | 290 | .handle.bar:after { 291 | top: -5px; 292 | left: -5px; 293 | right: -5px; 294 | bottom: -5px; 295 | } 296 | 297 | .delete-point { 298 | position: absolute; 299 | left: 22px; 300 | top: 0; 301 | width: 25px; 302 | padding-left: 5px; 303 | border-radius: 3px; 304 | background: #d3d0c9; 305 | -webkit-transform: scale3d(0, 0, 0); 306 | -ms-transform: scale3d(0, 0, 0); 307 | transform: scale3d(0, 0, 0); 308 | -webkit-transform-origin: left center; 309 | -ms-transform-origin: left center; 310 | transform-origin: left center; 311 | cursor: pointer; 312 | opacity: 0.75; 313 | -webkit-clip-path: polygon(25% 0%, 100% 1%, 100% 100%, 25% 100%, 0% 50%); 314 | clip-path: polygon(25% 0%, 100% 1%, 100% 100%, 25% 100%, 0% 50%); 315 | -webkit-transition: -webkit-transform 0.25s, opacity 0.25s; 316 | transition: transform 0.25s, opacity 0.25s; 317 | } 318 | 319 | .show-delete .delete-point { 320 | -webkit-transform: scale3d(0.9, 0.9, 0.9); 321 | -ms-transform: scale3d(0.9, 0.9, 0.9); 322 | transform: scale3d(0.9, 0.9, 0.9); 323 | -webkit-transition: -webkit-transform 0.25s cubic-bezier(0.15, 1, 0.3, 1.1), 324 | opacity 0.25s; 325 | transition: transform 0.25s cubic-bezier(0.15, 1, 0.3, 1.1), opacity 0.25s; 326 | opacity: 1; 327 | } 328 | 329 | .delete-point:hover { 330 | -webkit-transform: scale3d(1, 1, 1); 331 | -ms-transform: scale3d(1, 1, 1); 332 | transform: scale3d(1, 1, 1); 333 | -webkit-transition: -webkit-transform 0.25s cubic-bezier(0.15, 1, 0.3, 1.1); 334 | transition: transform 0.25s cubic-bezier(0.15, 1, 0.3, 1.1); 335 | opacity: 1; 336 | } 337 | 338 | .delete-point:active { 339 | background: #100a09; 340 | } 341 | 342 | .delete-point:active:after { 343 | background: #d3d0c9; 344 | } 345 | 346 | .delete-point:after { 347 | display: block; 348 | content: ""; 349 | position: absolute; 350 | top: 4px; 351 | left: 9px; 352 | right: 4px; 353 | bottom: 4px; 354 | background: #100a09; 355 | -webkit-clip-path: polygon( 356 | 20% 10%, 357 | 10% 20%, 358 | 40% 50%, 359 | 10% 80%, 360 | 20% 90%, 361 | 50% 60%, 362 | 80% 90%, 363 | 90% 80%, 364 | 60% 50%, 365 | 90% 20%, 366 | 80% 10%, 367 | 50% 40% 368 | ); 369 | clip-path: polygon( 370 | 20% 10%, 371 | 10% 20%, 372 | 40% 50%, 373 | 10% 80%, 374 | 20% 90%, 375 | 50% 60%, 376 | 80% 90%, 377 | 90% 80%, 378 | 60% 50%, 379 | 90% 20%, 380 | 80% 10%, 381 | 50% 40% 382 | ); 383 | } 384 | 385 | .custom-notice { 386 | display: -webkit-box; 387 | display: -webkit-flex; 388 | display: -ms-flexbox; 389 | display: flex; 390 | -webkit-box-pack: center; 391 | -webkit-justify-content: center; 392 | -ms-flex-pack: center; 393 | justify-content: center; 394 | -webkit-box-align: center; 395 | -webkit-align-items: center; 396 | -ms-flex-align: center; 397 | align-items: center; 398 | position: absolute; 399 | top: 0; 400 | left: 0; 401 | right: 0; 402 | bottom: 1rem; 403 | pointer-events: none; 404 | opacity: 0; 405 | -webkit-transition: background 0.25s; 406 | transition: background 0.25s; 407 | background: rgba(255, 255, 255, 0); 408 | } 409 | 410 | .customizing .custom-notice { 411 | opacity: 1; 412 | } 413 | 414 | .custom-notice div { 415 | width: 100%; 416 | text-align: center; 417 | background: rgba(255, 255, 255, 0.9); 418 | padding: 1rem; 419 | margin: 0 2rem; 420 | -webkit-transition: opacity 0.25s; 421 | transition: opacity 0.25s; 422 | border-radius: 2px; 423 | box-shadow: 0 1px 2px rgba(16, 10, 9, 0.15); 424 | opacity: 0; 425 | } 426 | 427 | .start-customizing .custom-notice div { 428 | opacity: 1; 429 | -webkit-animation: pulse 1.5s ease-in-out infinite; 430 | animation: pulse 1.5s ease-in-out infinite; 431 | } 432 | 433 | .touchy:after { 434 | content: "Tap"; 435 | } 436 | 437 | @media (min-width: 800px) { 438 | .touchy:after { 439 | content: "Click"; 440 | } 441 | } 442 | 443 | .dark-panel { 444 | display: none; 445 | background: #100a09; 446 | padding: 0.75rem; 447 | color: white; 448 | -webkit-box-align: center; 449 | -webkit-align-items: center; 450 | -ms-flex-align: center; 451 | align-items: center; 452 | } 453 | 454 | .dark-panel p { 455 | color: #d3d0c9; 456 | margin: 0.5rem 0; 457 | } 458 | 459 | .dark-panel h2:first-child { 460 | color: #d3d0c9; 461 | } 462 | 463 | @media (max-width: 800px) { 464 | .insetting .main .inset { 465 | display: block; 466 | } 467 | } 468 | 469 | @media (min-width: 800px) { 470 | .insetting .side .inset { 471 | display: block; 472 | box-shadow: 0 1px 2px rgba(16, 10, 9, 0.15); 473 | border-radius: 2px; 474 | margin: 0.25rem; 475 | } 476 | } 477 | 478 | @media (max-width: 800px) { 479 | .customizing .main .custom { 480 | display: -webkit-box; 481 | display: -webkit-flex; 482 | display: -ms-flexbox; 483 | display: flex; 484 | } 485 | } 486 | 487 | @media (min-width: 800px) { 488 | .customizing .side .custom { 489 | display: -webkit-box; 490 | display: -webkit-flex; 491 | display: -ms-flexbox; 492 | display: flex; 493 | box-shadow: 0 1px 2px rgba(16, 10, 9, 0.15); 494 | border-radius: 2px; 495 | margin: 0.25rem; 496 | } 497 | } 498 | 499 | .finish, 500 | .inset-round { 501 | font: inherit; 502 | padding: 0.5rem; 503 | border-radius: 5rem; 504 | cursor: pointer; 505 | -webkit-box-flex: 1; 506 | -webkit-flex: 1; 507 | -ms-flex: 1; 508 | flex: 1; 509 | background: rgba(255, 255, 255, 0.35); 510 | color: rgba(255, 255, 255, 0.9); 511 | } 512 | 513 | .finish:hover, 514 | .inset-round:hover { 515 | color: white; 516 | background: rgba(255, 255, 255, 0.4); 517 | } 518 | 519 | .finish:active, 520 | .inset-round:active { 521 | -webkit-animation: none; 522 | animation: none; 523 | background: rgba(255, 255, 255, 0.2); 524 | color: rgba(255, 255, 255, 0.4); 525 | } 526 | 527 | .finish:after, 528 | .inset-round:after { 529 | content: "Finish " attr(data-shape); 530 | } 531 | 532 | .customizing-no-poly .finish, 533 | .customizing-no-poly .inset-round { 534 | -webkit-animation: none; 535 | animation: none; 536 | } 537 | 538 | .customizing-no-poly .finish:after, 539 | .customizing-no-poly .inset-round:after { 540 | content: "Close editor"; 541 | } 542 | 543 | .finish:focus, 544 | .inset-round:focus { 545 | outline: 0; 546 | } 547 | 548 | .inset-round { 549 | font-family: monospace; 550 | text-align: center; 551 | cursor: text; 552 | color: #d3d0c9; 553 | background: black; 554 | box-shadow: inset 0 0 0 0.125rem rgba(211, 208, 201, 0.5); 555 | -webkit-animation: glow 1.5s ease-in-out infinite; 556 | animation: glow 1.5s ease-in-out infinite; 557 | opacity: 0.5; 558 | } 559 | 560 | .inset-round:hover { 561 | background: transparent; 562 | color: #d3d0c9; 563 | -webkit-animation: none; 564 | animation: none; 565 | opacity: 0.75; 566 | } 567 | 568 | .inset-round:focus { 569 | color: #d3d0c9; 570 | box-shadow: inset 0 0 0 0.125rem rgba(211, 208, 201, 0.5); 571 | -webkit-animation: none; 572 | animation: none; 573 | opacity: 1; 574 | } 575 | 576 | @-webkit-keyframes glow { 577 | 50% { 578 | opacity: 0.75; 579 | } 580 | } 581 | 582 | @keyframes glow { 583 | 50% { 584 | opacity: 0.75; 585 | } 586 | } 587 | 588 | .shapes { 589 | position: relative; 590 | max-width: 100%; 591 | background: #d3d0c9; 592 | white-space: nowrap; 593 | overflow-x: hidden; 594 | } 595 | 596 | .shapes:focus { 597 | outline: 0; 598 | } 599 | 600 | .shapes.horizontal { 601 | display: block; 602 | overflow-x: scroll; 603 | } 604 | 605 | .shapes.vertical { 606 | display: none; 607 | } 608 | 609 | @media (min-width: 800px) { 610 | .shapes.horizontal { 611 | display: none; 612 | } 613 | 614 | .shapes.vertical { 615 | display: block; 616 | white-space: normal; 617 | } 618 | } 619 | 620 | @media (max-width: 800px) { 621 | .shapes:after { 622 | display: block; 623 | position: absolute; 624 | content: ""; 625 | pointer-events: none; 626 | bottom: 0; 627 | right: 0; 628 | top: 0; 629 | background: -webkit-linear-gradient(0deg, rgba(211, 208, 201, 0), #d3d0c9); 630 | background: linear-gradient(90deg, rgba(211, 208, 201, 0), #d3d0c9); 631 | width: 1.5rem; 632 | } 633 | } 634 | 635 | ul { 636 | width: 100%; 637 | padding: 0.25rem; 638 | } 639 | 640 | @media (max-width: 800px) { 641 | ul { 642 | white-space: nowrap; 643 | } 644 | } 645 | 646 | @media (min-width: 800px) { 647 | ul { 648 | display: -webkit-box; 649 | display: -webkit-flex; 650 | display: -ms-flexbox; 651 | display: flex; 652 | -webkit-flex-wrap: wrap; 653 | -ms-flex-wrap: wrap; 654 | flex-wrap: wrap; 655 | padding: 0; 656 | -webkit-perspective: 400px; 657 | -ms-perspective: 400px; 658 | perspective: 400px; 659 | overflow-x: hidden; 660 | } 661 | } 662 | 663 | .flickity-viewport { 664 | overflow: hidden; 665 | position: relative; 666 | } 667 | 668 | figure { 669 | display: inline-block; 670 | text-align: center; 671 | padding: 0.625rem 0.25rem; 672 | margin: 0.25rem; 673 | background: white; 674 | width: 4.125rem; 675 | box-shadow: 0 1px 2px rgba(16, 10, 9, 0.15); 676 | border-radius: 2px; 677 | -webkit-transition: background 0.25s, -webkit-transform 0.5s; 678 | transition: background 0.25s, transform 0.5s; 679 | -ms-user-select: none; 680 | -webkit-user-select: none; 681 | -moz-user-select: none; 682 | user-select: none; 683 | -webkit-tap-highlight-color: transparent; 684 | -webkit-touch-callout: none; 685 | tap-highlight-color: transparent; 686 | touch-callout: none; 687 | } 688 | 689 | @media (min-width: 800px) { 690 | figure { 691 | -webkit-box-flex: 4.625rem; 692 | -webkit-flex: 4.625rem; 693 | -ms-flex: 4.625rem; 694 | flex: 4.625rem; 695 | -webkit-transform-origin: top center; 696 | -ms-transform-origin: top center; 697 | transform-origin: top center; 698 | } 699 | 700 | figure:nth-child(n + 9) { 701 | -webkit-transform: translateZ(0) rotateX(-18deg); 702 | -ms-transform: translateZ(0) rotateX(-18deg); 703 | transform: translateZ(0) rotateX(-18deg); 704 | } 705 | 706 | figure:nth-child(n + 13) { 707 | -webkit-transform: translateZ(-1.85rem) rotateX(-36deg); 708 | -ms-transform: translateZ(-1.85rem) rotateX(-36deg); 709 | transform: translateZ(-1.85rem) rotateX(-36deg); 710 | } 711 | 712 | figure:nth-child(n + 17) { 713 | -webkit-transform: translateZ(-6.0125rem) rotateX(-54deg); 714 | -ms-transform: translateZ(-6.0125rem) rotateX(-54deg); 715 | transform: translateZ(-6.0125rem) rotateX(-54deg); 716 | } 717 | 718 | figure:nth-child(n + 21) { 719 | -webkit-transform: translateZ(-9.25rem) rotateX(-72deg); 720 | -ms-transform: translateZ(-9.25rem) rotateX(-72deg); 721 | transform: translateZ(-9.25rem) rotateX(-72deg); 722 | } 723 | 724 | figure:nth-child(n + 25) { 725 | -webkit-transform: translateZ(-11.5625rem) rotateX(-85deg); 726 | -ms-transform: translateZ(-11.5625rem) rotateX(-85deg); 727 | transform: translateZ(-11.5625rem) rotateX(-85deg); 728 | } 729 | 730 | .shapes:hover figure, 731 | .shapes:focus figure { 732 | -webkit-transform: translateZ(0) rotateX(0); 733 | -ms-transform: translateZ(0) rotateX(0); 734 | transform: translateZ(0) rotateX(0); 735 | -webkit-transition: background 0.25s, 736 | -webkit-transform 0.375s cubic-bezier(0.15, 1, 0.3, 1.1); 737 | transition: background 0.25s, 738 | transform 0.375s cubic-bezier(0.15, 1, 0.3, 1.1); 739 | } 740 | 741 | .shapes:hover figure:nth-child(n + 9), 742 | .shapes:focus figure:nth-child(n + 9) { 743 | -webkit-transition-delay: 0.025s; 744 | transition-delay: 0.025s; 745 | } 746 | 747 | .shapes:hover figure:nth-child(n + 13), 748 | .shapes:focus figure:nth-child(n + 13) { 749 | -webkit-transition-delay: 0.05s; 750 | transition-delay: 0.05s; 751 | } 752 | 753 | .shapes:hover figure:nth-child(n + 17), 754 | .shapes:focus figure:nth-child(n + 17) { 755 | -webkit-transition-delay: 0.075s; 756 | transition-delay: 0.075s; 757 | } 758 | 759 | .shapes:hover figure:nth-child(n + 21), 760 | .shapes:focus figure:nth-child(n + 21) { 761 | -webkit-transition-delay: 0.1s; 762 | transition-delay: 0.1s; 763 | } 764 | 765 | .shapes:hover figure:nth-child(n + 25), 766 | .shapes:focus figure:nth-child(n + 25) { 767 | -webkit-transition-delay: 0.125s; 768 | transition-delay: 0.125s; 769 | } 770 | } 771 | 772 | figure:hover { 773 | cursor: pointer; 774 | border-color: transparent; 775 | box-shadow: 0 2px 3px rgba(16, 10, 9, 0.3); 776 | } 777 | 778 | figure.on, 779 | figure:active { 780 | background: #100a09; 781 | } 782 | 783 | figure.on figcaption, 784 | figure:active figcaption { 785 | color: #d3d0c9; 786 | } 787 | 788 | @media (max-width: 800px) { 789 | figure[data-type="custom"] { 790 | width: 5.78125rem; 791 | } 792 | } 793 | 794 | figure.disabled { 795 | pointer-events: none; 796 | opacity: 0.35; 797 | } 798 | 799 | figure:nth-last-of-type(-n + 2) { 800 | -webkit-box-flex: 0.75; 801 | -webkit-flex: 0.75; 802 | -ms-flex: 0.75; 803 | flex: 0.75; 804 | } 805 | 806 | figure .shape { 807 | display: inline-block; 808 | width: 1.5rem; 809 | height: 1.5rem; 810 | background: currentColor; 811 | } 812 | 813 | figure figcaption { 814 | display: block; 815 | font-size: 0.75rem; 816 | color: #100a09; 817 | overflow: hidden; 818 | text-overflow: ellipsis; 819 | white-space: nowrap; 820 | margin-top: 0.5rem; 821 | padding: 0 0.25rem; 822 | } 823 | 824 | .clip-path { 825 | display: -webkit-box; 826 | display: -webkit-flex; 827 | display: -ms-flexbox; 828 | display: flex; 829 | position: relative; 830 | font-size: 1.1em; 831 | overflow-x: hidden; 832 | font-family: monospace; 833 | overflow-y: hidden; 834 | } 835 | 836 | @media (min-width: 800px) { 837 | .clip-path { 838 | margin: 0.5rem 0 0.25rem; 839 | border-radius: 2px; 840 | } 841 | 842 | .clip-path:focus { 843 | outline: 0; 844 | box-shadow: 0 0 0.5rem gold; 845 | background: rgba(255, 215, 0, 0.3); 846 | } 847 | } 848 | 849 | .code { 850 | background: #100a09; 851 | color: #9a8297; 852 | padding: 0.75rem; 853 | box-shadow: 0 1px 2px rgba(16, 10, 9, 0.15); 854 | } 855 | 856 | @media (min-width: 800px) { 857 | .code { 858 | border-radius: 2px; 859 | } 860 | } 861 | 862 | .css-code { 863 | -webkit-box-flex: 1; 864 | -webkit-flex: 1; 865 | -ms-flex: 1; 866 | flex: 1; 867 | } 868 | 869 | @media (min-width: 800px) { 870 | .css-code { 871 | margin-right: 0.5vw; 872 | max-height: 160px; 873 | overflow-y: auto; 874 | } 875 | } 876 | 877 | .edit-in-codepen { 878 | width: 4rem; 879 | background-image: url(http://blog.codepen.io/wp-content/uploads/2012/06/Button-White-Large.png); 880 | background-size: 60%; 881 | background-position: center center; 882 | background-repeat: no-repeat; 883 | -webkit-transition: opacity 0.25s, -webkit-transform 0.25s, 884 | background-size 0.25s; 885 | transition: opacity 0.25s, transform 0.25s, background-size 0.25s; 886 | cursor: pointer; 887 | -ms-user-select: none; 888 | -webkit-user-select: none; 889 | -moz-user-select: none; 890 | user-select: none; 891 | } 892 | 893 | .edit-in-codepen:hover { 894 | opacity: 0.8; 895 | -webkit-transition-duration: 0.125s; 896 | transition-duration: 0.125s; 897 | } 898 | 899 | .edit-in-codepen:active { 900 | -webkit-transform: scale(0.95); 901 | -ms-transform: scale(0.95); 902 | transform: scale(0.95); 903 | opacity: 0.5; 904 | -webkit-transition-duration: 0; 905 | transition-duration: 0; 906 | } 907 | 908 | .edit-in-codepen:focus { 909 | outline: 0; 910 | } 911 | 912 | .block { 913 | display: none; 914 | padding: 0.25rem; 915 | line-height: 1.3; 916 | } 917 | 918 | .show { 919 | display: block; 920 | } 921 | 922 | .show:nth-last-of-type(1) .point.changing { 923 | -webkit-animation-delay: 0.125s; 924 | animation-delay: 0.125s; 925 | } 926 | 927 | .show:nth-last-of-type(2) .point.changing { 928 | -webkit-animation-delay: 0.25s; 929 | animation-delay: 0.25s; 930 | } 931 | 932 | .show:nth-last-of-type(3) .point.changing { 933 | -webkit-animation-delay: 0.375s; 934 | animation-delay: 0.375s; 935 | } 936 | 937 | .show:nth-last-of-type(4) .point.changing { 938 | -webkit-animation-delay: 0.5s; 939 | animation-delay: 0.5s; 940 | } 941 | 942 | .point { 943 | display: inline-block; 944 | position: relative; 945 | vertical-align: baseline; 946 | } 947 | 948 | .customizing-no-poly .point { 949 | opacity: 0.5; 950 | } 951 | 952 | .point:after { 953 | display: block; 954 | position: absolute; 955 | content: ""; 956 | width: 80px; 957 | height: 80px; 958 | border-radius: 50%; 959 | background: currentColor; 960 | top: -webkit-calc(50% - 40px); 961 | top: calc(50% - 40px); 962 | left: -webkit-calc(50% - 40px); 963 | left: calc(50% - 40px); 964 | -webkit-transform: scale(0); 965 | -ms-transform: scale(0); 966 | transform: scale(0); 967 | will-change: transform, opacity; 968 | opacity: 0; 969 | } 970 | 971 | .point.changing { 972 | font-weight: bold; 973 | } 974 | 975 | .point.changing:after { 976 | -webkit-animation: emph 1.25s; 977 | animation: emph 1.25s; 978 | -webkit-animation-delay: inherit; 979 | animation-delay: inherit; 980 | } 981 | 982 | @-webkit-keyframes emph { 983 | 20% { 984 | -webkit-transform: none; 985 | transform: none; 986 | opacity: 0.5; 987 | } 988 | 989 | to { 990 | opacity: 0; 991 | -webkit-transform: scale(1.2); 992 | transform: scale(1.2); 993 | } 994 | } 995 | 996 | @keyframes emph { 997 | 20% { 998 | -webkit-transform: none; 999 | -ms-transform: none; 1000 | transform: none; 1001 | opacity: 0.5; 1002 | } 1003 | 1004 | to { 1005 | opacity: 0; 1006 | -webkit-transform: scale(1.2); 1007 | -ms-transform: scale(1.2); 1008 | transform: scale(1.2); 1009 | } 1010 | } 1011 | 1012 | .handle:nth-of-type(1), 1013 | .point:nth-of-type(1), 1014 | figure:nth-of-type(1) { 1015 | color: tomato; 1016 | } 1017 | 1018 | .handle:nth-of-type(2), 1019 | .point:nth-of-type(2), 1020 | figure:nth-of-type(2) { 1021 | color: mediumseagreen; 1022 | } 1023 | 1024 | .handle:nth-of-type(3), 1025 | .point:nth-of-type(3), 1026 | figure:nth-of-type(3) { 1027 | color: orange; 1028 | } 1029 | 1030 | .handle:nth-of-type(4), 1031 | .point:nth-of-type(4), 1032 | figure:nth-of-type(4) { 1033 | color: dodgerblue; 1034 | } 1035 | 1036 | .handle:nth-of-type(5), 1037 | .point:nth-of-type(5), 1038 | figure:nth-of-type(5) { 1039 | color: orchid; 1040 | } 1041 | 1042 | .handle:nth-of-type(6), 1043 | .point:nth-of-type(6), 1044 | figure:nth-of-type(6) { 1045 | color: lightgray; 1046 | } 1047 | 1048 | .handle:nth-of-type(7), 1049 | .point:nth-of-type(7), 1050 | figure:nth-of-type(7) { 1051 | color: darkturquoise; 1052 | } 1053 | 1054 | .handle:nth-of-type(8), 1055 | .point:nth-of-type(8), 1056 | figure:nth-of-type(8) { 1057 | color: palevioletred; 1058 | } 1059 | 1060 | .handle:nth-of-type(9), 1061 | .point:nth-of-type(9), 1062 | figure:nth-of-type(9) { 1063 | color: khaki; 1064 | } 1065 | 1066 | .handle:nth-of-type(10), 1067 | .point:nth-of-type(10), 1068 | figure:nth-of-type(10) { 1069 | color: limegreen; 1070 | } 1071 | 1072 | .handle:nth-of-type(11), 1073 | .point:nth-of-type(11), 1074 | figure:nth-of-type(11) { 1075 | color: coral; 1076 | } 1077 | 1078 | .handle:nth-of-type(12), 1079 | .point:nth-of-type(12), 1080 | figure:nth-of-type(12) { 1081 | color: slateblue; 1082 | } 1083 | 1084 | .handle:nth-of-type(13), 1085 | .point:nth-of-type(13), 1086 | figure:nth-of-type(13) { 1087 | color: indianred; 1088 | } 1089 | 1090 | .handle:nth-of-type(14), 1091 | .point:nth-of-type(14), 1092 | figure:nth-of-type(14) { 1093 | color: gray; 1094 | } 1095 | 1096 | .handle:nth-of-type(15), 1097 | .point:nth-of-type(15), 1098 | figure:nth-of-type(15) { 1099 | color: plum; 1100 | } 1101 | 1102 | .handle:nth-of-type(16), 1103 | .point:nth-of-type(16), 1104 | figure:nth-of-type(16) { 1105 | color: olivedrab; 1106 | } 1107 | 1108 | .handle:nth-of-type(17), 1109 | .point:nth-of-type(17), 1110 | figure:nth-of-type(17) { 1111 | color: lightgreen; 1112 | } 1113 | 1114 | .handle:nth-of-type(18), 1115 | .point:nth-of-type(18), 1116 | figure:nth-of-type(18) { 1117 | color: lightsalmon; 1118 | } 1119 | 1120 | .handle:nth-of-type(19), 1121 | .point:nth-of-type(19), 1122 | figure:nth-of-type(19) { 1123 | color: gold; 1124 | } 1125 | 1126 | .handle:nth-of-type(20), 1127 | .point:nth-of-type(20), 1128 | figure:nth-of-type(20) { 1129 | color: peru; 1130 | } 1131 | 1132 | .handle:nth-of-type(21), 1133 | .point:nth-of-type(21), 1134 | figure:nth-of-type(21) { 1135 | color: royalblue; 1136 | } 1137 | 1138 | .handle:nth-of-type(22), 1139 | .point:nth-of-type(22), 1140 | figure:nth-of-type(22) { 1141 | color: sandybrown; 1142 | } 1143 | 1144 | .handle:nth-of-type(23), 1145 | .point:nth-of-type(23), 1146 | figure:nth-of-type(23) { 1147 | color: lightseagreen; 1148 | } 1149 | 1150 | .handle:nth-of-type(24), 1151 | .point:nth-of-type(24), 1152 | figure:nth-of-type(24) { 1153 | color: blueviolet; 1154 | } 1155 | 1156 | .handle:nth-of-type(25), 1157 | .point:nth-of-type(25), 1158 | figure:nth-of-type(25) { 1159 | color: tomato; 1160 | } 1161 | 1162 | .handle:nth-of-type(26), 1163 | .point:nth-of-type(26), 1164 | figure:nth-of-type(26) { 1165 | color: goldenrod; 1166 | } 1167 | 1168 | .handle:nth-of-type(27), 1169 | .point:nth-of-type(27), 1170 | figure:nth-of-type(27) { 1171 | color: limegreen; 1172 | } 1173 | 1174 | .side { 1175 | padding: 0.25rem 0.25rem 1.25rem; 1176 | } 1177 | 1178 | @media (min-width: 800px) { 1179 | .side { 1180 | max-height: 100%; 1181 | padding: 0.5rem 0 0 0.125rem; 1182 | } 1183 | } 1184 | 1185 | .panel { 1186 | -webkit-box-flex: auto; 1187 | -webkit-flex: auto; 1188 | -ms-flex: auto; 1189 | flex: auto; 1190 | display: block; 1191 | padding: 1rem 1rem 1rem 0.5rem; 1192 | background: white; 1193 | border-radius: 2px; 1194 | box-shadow: 0 1px 2px rgba(16, 10, 9, 0.15); 1195 | margin: 0.5rem 0.25rem; 1196 | } 1197 | 1198 | .panel[href]:hover { 1199 | box-shadow: 0 2px 3px rgba(16, 10, 9, 0.3); 1200 | } 1201 | 1202 | .panel:first-of-type { 1203 | margin-top: 0.25rem; 1204 | } 1205 | 1206 | .flex { 1207 | display: -webkit-box; 1208 | display: -webkit-flex; 1209 | display: -ms-flexbox; 1210 | display: flex; 1211 | -webkit-box-align: center; 1212 | -webkit-align-items: center; 1213 | -ms-flex-align: center; 1214 | align-items: center; 1215 | } 1216 | 1217 | @media (min-width: 800px) { 1218 | .options { 1219 | position: relative; 1220 | background: #d3d0c9; 1221 | -webkit-transform: translate3d(0, -18.375rem, 0); 1222 | -ms-transform: translate3d(0, -18.375rem, 0); 1223 | transform: translate3d(0, -18.375rem, 0); 1224 | -webkit-transition: -webkit-transform 0.25s 0.125s 1225 | cubic-bezier(0.15, 1, 0.3, 1.1); 1226 | transition: transform 0.25s 0.125s cubic-bezier(0.15, 1, 0.3, 1.1); 1227 | } 1228 | 1229 | .options:before { 1230 | display: block; 1231 | position: absolute; 1232 | content: ""; 1233 | pointer-events: none; 1234 | left: 0; 1235 | right: 0; 1236 | bottom: 100%; 1237 | height: 4rem; 1238 | background: -webkit-linear-gradient(rgba(211, 208, 201, 0), #d3d0c9 90%); 1239 | background: linear-gradient(rgba(211, 208, 201, 0), #d3d0c9 90%); 1240 | -webkit-transition: inherit; 1241 | transition: inherit; 1242 | -webkit-transition-timing-function: ease; 1243 | transition-timing-function: ease; 1244 | -webkit-transform-origin: center bottom; 1245 | -ms-transform-origin: center bottom; 1246 | transform-origin: center bottom; 1247 | } 1248 | 1249 | .shapes:hover + .options, 1250 | .shapes:focus + .options { 1251 | -webkit-transform: none; 1252 | -ms-transform: none; 1253 | transform: none; 1254 | } 1255 | 1256 | .shapes:hover + .options:before, 1257 | .shapes:focus + .options:before { 1258 | -webkit-transform: scale3d(1, 0, 1); 1259 | -ms-transform: scale3d(1, 0, 1); 1260 | transform: scale3d(1, 0, 1); 1261 | } 1262 | } 1263 | 1264 | h2 { 1265 | display: inline-block; 1266 | -webkit-box-flex: 4rem; 1267 | -webkit-flex: 4rem auto; 1268 | -ms-flex: 4rem auto; 1269 | flex: 4rem auto; 1270 | font-size: 1.2rem; 1271 | font-weight: 500; 1272 | pointer-events: none; 1273 | min-width: 1em; 1274 | text-align: center; 1275 | color: #bcb8ad; 1276 | -ms-user-select: none; 1277 | -webkit-user-select: none; 1278 | -moz-user-select: none; 1279 | user-select: none; 1280 | } 1281 | 1282 | h2.block { 1283 | display: block; 1284 | } 1285 | 1286 | h2:first-child { 1287 | text-align: left; 1288 | color: #100a09; 1289 | font-weight: 300; 1290 | padding: 0 1.25rem 0 0.5rem; 1291 | } 1292 | 1293 | .side > h2 { 1294 | padding: 0.75rem 1rem 0.25rem 1rem; 1295 | } 1296 | 1297 | input[type="radio"], 1298 | input[type="checkbox"] { 1299 | display: none; 1300 | } 1301 | 1302 | label, 1303 | input[type="number"], 1304 | input[type="url"] { 1305 | display: inline-block; 1306 | font: inherit; 1307 | position: relative; 1308 | text-align: center; 1309 | background: white; 1310 | -webkit-box-flex: 1; 1311 | -webkit-flex: 1; 1312 | -ms-flex: 1; 1313 | flex: 1; 1314 | min-width: 2rem; 1315 | padding: 0.5rem 0.25rem; 1316 | border-radius: 2rem; 1317 | box-shadow: inset 0 0.125rem #d3d0c9, inset -0.125rem 0 #d3d0c9, 1318 | inset 0 -0.125rem #d3d0c9; 1319 | cursor: pointer; 1320 | -webkit-transition: background 0.25s; 1321 | transition: background 0.25s; 1322 | -webkit-tap-highlight-color: transparent; 1323 | -webkit-touch-callout: none; 1324 | tap-highlight-color: transparent; 1325 | touch-callout: none; 1326 | -ms-user-select: none; 1327 | -webkit-user-select: none; 1328 | -moz-user-select: none; 1329 | user-select: none; 1330 | } 1331 | 1332 | label:hover, 1333 | input[type="number"]:hover, 1334 | input[type="url"]:hover { 1335 | background: #d3d0c9; 1336 | -webkit-transition: background 0; 1337 | transition: background 0; 1338 | } 1339 | 1340 | label[for="shadowboard-toggle"]:before, 1341 | input[type="number"][for="shadowboard-toggle"]:before, 1342 | input[type="url"][for="shadowboard-toggle"]:before { 1343 | content: "Off"; 1344 | } 1345 | 1346 | input:checked + label[for="shadowboard-toggle"]:before, 1347 | input:checked + input[type="number"][for="shadowboard-toggle"]:before, 1348 | input:checked + input[type="url"][for="shadowboard-toggle"]:before { 1349 | content: "On"; 1350 | } 1351 | 1352 | label[for="webkit"]:before, 1353 | input[type="number"][for="webkit"]:before, 1354 | input[type="url"][for="webkit"]:before { 1355 | content: "-"; 1356 | font-family: monospace; 1357 | vertical-align: top; 1358 | } 1359 | 1360 | label:first-of-type, 1361 | input[type="number"]:first-of-type, 1362 | input[type="url"]:first-of-type { 1363 | box-shadow: inset 0 0.125rem #d3d0c9, inset 0.125rem 0 #d3d0c9, 1364 | inset -0.125rem 0 #d3d0c9, inset 0 -0.125rem #d3d0c9; 1365 | } 1366 | 1367 | label.joined, 1368 | input[type="number"].joined, 1369 | input[type="url"].joined { 1370 | border-radius: 0; 1371 | } 1372 | 1373 | label.joined:first-of-type, 1374 | input[type="number"].joined:first-of-type, 1375 | input[type="url"].joined:first-of-type { 1376 | border-top-left-radius: 2rem; 1377 | border-bottom-left-radius: 2rem; 1378 | } 1379 | 1380 | label.joined:last-of-type, 1381 | input[type="number"].joined:last-of-type, 1382 | input[type="url"].joined:last-of-type { 1383 | border-top-right-radius: 2rem; 1384 | border-bottom-right-radius: 2rem; 1385 | } 1386 | 1387 | input:checked + label, 1388 | label[type="number"]:focus, 1389 | label[type="url"]:focus, 1390 | input:checked + input[type="number"], 1391 | input[type="number"][type="number"]:focus, 1392 | input[type="number"][type="url"]:focus, 1393 | input:checked + input[type="url"], 1394 | input[type="url"][type="number"]:focus, 1395 | input[type="url"][type="url"]:focus { 1396 | background: #100a09; 1397 | z-index: 100; 1398 | color: #d3d0c9; 1399 | outline: 0; 1400 | box-shadow: inset 0 0 0 0.125rem #100a09, 0 0 0 0.125rem #100a09; 1401 | } 1402 | 1403 | input:checked + label:hover, 1404 | label[type="number"]:focus:hover, 1405 | label[type="url"]:focus:hover, 1406 | input:checked + input[type="number"]:hover, 1407 | input[type="number"][type="number"]:focus:hover, 1408 | input[type="number"][type="url"]:focus:hover, 1409 | input:checked + input[type="url"]:hover, 1410 | input[type="url"][type="number"]:focus:hover, 1411 | input[type="url"][type="url"]:focus:hover { 1412 | opacity: 0.8; 1413 | } 1414 | 1415 | input:checked + label:active, 1416 | label[type="number"]:focus:active, 1417 | label[type="url"]:focus:active, 1418 | input:checked + input[type="number"]:active, 1419 | input[type="number"][type="number"]:focus:active, 1420 | input[type="number"][type="url"]:focus:active, 1421 | input:checked + input[type="url"]:active, 1422 | input[type="url"][type="number"]:focus:active, 1423 | input[type="url"][type="url"]:focus:active { 1424 | opacity: 1; 1425 | } 1426 | 1427 | input[type="url"] { 1428 | display: block; 1429 | line-height: 40px; 1430 | height: 40px; 1431 | box-shadow: inset 0 0.125rem #d3d0c9, inset 0.125rem 0 #d3d0c9, 1432 | inset -0.125rem 0 #d3d0c9, inset 0 -0.125rem #d3d0c9; 1433 | } 1434 | 1435 | input[type="number"] { 1436 | font-family: inherit; 1437 | font-size: 1.1rem; 1438 | border-radius: 2rem; 1439 | box-shadow: inset 0 0 0 0.125rem #d3d0c9; 1440 | appearance: textfield; 1441 | -moz-appearance: textfield; 1442 | } 1443 | 1444 | input[type="number"]::-webkit-inner-spin-button, 1445 | input[type="number"]::-webkit-outer-spin-button { 1446 | -webkit-appearance: none; 1447 | appearance: none; 1448 | margin: 0; 1449 | } 1450 | 1451 | .shadowboard-toggle { 1452 | margin-top: 1rem; 1453 | } 1454 | 1455 | .backgrounds { 1456 | overflow: hidden; 1457 | position: relative; 1458 | padding: 0.5rem 0 0.75rem 0.375rem; 1459 | } 1460 | 1461 | .backgrounds img { 1462 | cursor: pointer; 1463 | border-radius: 0.25rem; 1464 | float: left; 1465 | width: -webkit-calc(25% - 0.25rem); 1466 | width: calc(25% - 0.25rem); 1467 | height: auto; 1468 | outline: 0.25rem solid white; 1469 | margin: 0.125rem; 1470 | -webkit-transition: 0.5s; 1471 | transition: 0.5s; 1472 | -ms-interpolation-mode: bicubic; 1473 | -webkit-user-drag: none; 1474 | -moz-user-drag: none; 1475 | -ms-user-drag: none; 1476 | user-drag: none; 1477 | } 1478 | 1479 | .backgrounds img:hover { 1480 | opacity: 0.9; 1481 | } 1482 | 1483 | .backgrounds img:active { 1484 | opacity: 0.5; 1485 | -webkit-transition: 0; 1486 | transition: 0; 1487 | } 1488 | 1489 | .backgrounds + input { 1490 | font: inherit; 1491 | font-size: 1rem; 1492 | line-height: 2; 1493 | width: -webkit-calc(100% - 0.375rem); 1494 | width: calc(100% - 0.375rem); 1495 | margin-left: 0.375rem; 1496 | text-align: left; 1497 | padding: 0.25rem 1rem; 1498 | } 1499 | 1500 | @-webkit-keyframes selected { 1501 | 10% { 1502 | opacity: 0.5; 1503 | } 1504 | } 1505 | 1506 | @keyframes selected { 1507 | 10% { 1508 | opacity: 0.5; 1509 | } 1510 | } 1511 | 1512 | .no-support-message { 1513 | display: none; 1514 | } 1515 | 1516 | .no-support .no-support-message { 1517 | display: block; 1518 | } 1519 | 1520 | .cite.panel { 1521 | -ms-user-select: none; 1522 | -webkit-user-select: none; 1523 | -moz-user-select: none; 1524 | user-select: none; 1525 | } 1526 | 1527 | .cite.panel .twitter { 1528 | margin: 0.75rem 0 0.5rem 0.5rem; 1529 | } 1530 | 1531 | .cite.panel p { 1532 | font-size: 0.95rem; 1533 | } 1534 | 1535 | .cite.panel a { 1536 | text-decoration: none; 1537 | font-weight: 500; 1538 | color: inherit; 1539 | -webkit-transition: 0.25s; 1540 | transition: 0.25s; 1541 | } 1542 | 1543 | .cite.panel:hover a { 1544 | color: #0b7fda; 1545 | } 1546 | 1547 | .cite.panel:hover a:hover { 1548 | text-decoration: underline; 1549 | } 1550 | 1551 | .warning.panel { 1552 | background: #ff6347; 1553 | } 1554 | 1555 | .warning.panel:active { 1556 | background: #ff6347; 1557 | } 1558 | 1559 | .warning.panel h1 { 1560 | font-weight: 300; 1561 | font-size: 2.5rem; 1562 | padding: 0 0.5rem; 1563 | } 1564 | 1565 | .warning.panel h1:before { 1566 | font: 0.7em Browsers; 1567 | content: "\e609"; 1568 | padding-right: 0.5em; 1569 | } 1570 | 1571 | .browser-support { 1572 | color: inherit; 1573 | text-decoration: none; 1574 | } 1575 | 1576 | .no-support .browser-support.permanent { 1577 | display: none; 1578 | } 1579 | 1580 | .browser-support h2 { 1581 | display: -webkit-box; 1582 | display: -webkit-flex; 1583 | display: -ms-flexbox; 1584 | display: flex; 1585 | padding-right: 0; 1586 | } 1587 | 1588 | .browser-support small { 1589 | -webkit-box-flex: 1; 1590 | -webkit-flex: 1; 1591 | -ms-flex: 1; 1592 | flex: 1; 1593 | text-align: right; 1594 | padding-left: 1em; 1595 | } 1596 | 1597 | .browser-support small:before { 1598 | content: "("; 1599 | } 1600 | 1601 | .browser-support small:after { 1602 | content: ")"; 1603 | } 1604 | 1605 | .browser-support:hover small { 1606 | color: #0b7fda; 1607 | text-decoration: underline; 1608 | } 1609 | 1610 | .browser-support:hover small:before { 1611 | content: "www."; 1612 | } 1613 | 1614 | .browser-support:hover small:after { 1615 | content: ""; 1616 | } 1617 | 1618 | .browser-support:active { 1619 | background: rgba(255, 255, 255, 0.5); 1620 | } 1621 | 1622 | .browser-support .table { 1623 | display: -webkit-box; 1624 | display: -webkit-flex; 1625 | display: -ms-flexbox; 1626 | display: flex; 1627 | -webkit-box-pack: justify; 1628 | -webkit-justify-content: space-between; 1629 | -ms-flex-pack: justify; 1630 | justify-content: space-between; 1631 | -webkit-flex-wrap: wrap; 1632 | -ms-flex-wrap: wrap; 1633 | flex-wrap: wrap; 1634 | margin-top: 0.5rem; 1635 | padding: 0.25rem; 1636 | } 1637 | 1638 | .icon { 1639 | display: inline-block; 1640 | text-align: center; 1641 | padding: 0.25rem; 1642 | color: #100a09; 1643 | -webkit-transition: color 0.25s, -webkit-transform 0.25s, text-shadow 0.25s; 1644 | transition: color 0.25s, transform 0.25s, text-shadow 0.25s; 1645 | -ms-user-select: none; 1646 | -webkit-user-select: none; 1647 | -moz-user-select: none; 1648 | user-select: none; 1649 | } 1650 | 1651 | .panel:hover .icon.unsupported { 1652 | -webkit-transform: scale(0.9); 1653 | -ms-transform: scale(0.9); 1654 | transform: scale(0.9); 1655 | opacity: 0.15; 1656 | } 1657 | 1658 | .icon:before { 1659 | display: block; 1660 | font-family: Browsers; 1661 | font-size: 2.5em; 1662 | } 1663 | 1664 | .icon.chrome:before { 1665 | content: "\e603"; 1666 | } 1667 | 1668 | .icon.safari:before { 1669 | content: "\e607"; 1670 | } 1671 | 1672 | .icon.opera:before { 1673 | content: "\e606"; 1674 | } 1675 | 1676 | .icon.firefox:before { 1677 | content: "\e604"; 1678 | } 1679 | 1680 | .icon.ie:before { 1681 | content: "\e605"; 1682 | } 1683 | 1684 | .icon:after { 1685 | display: block; 1686 | font-size: 1.25em; 1687 | content: attr(data-version); 1688 | padding-top: 0.25rem; 1689 | } 1690 | 1691 | .icon.unsupported { 1692 | opacity: 0.3; 1693 | } 1694 | 1695 | .icon [data-version=""]:after { 1696 | content: "/u00D7"; 1697 | } 1698 | 1699 | p { 1700 | font-size: 1.1rem; 1701 | line-height: 1.2; 1702 | padding: 0.5rem 0 0 0.5rem; 1703 | } 1704 | 1705 | @font-face { 1706 | font-family: "Browsers"; 1707 | src: url(fonts/browsers.eot); 1708 | src: url(fonts/browsers.eot) format("embedded-opentype"), 1709 | url(fonts/browsers.woff) format("woff"), 1710 | url(fonts/browsers.ttf) format("truetype"), 1711 | url(fonts/browsers.svg) format("svg"); 1712 | font-weight: normal; 1713 | font-style: normal; 1714 | } 1715 | 1716 | /*# sourceMappingURL=style.css.map */ 1717 | 1718 | .shapes figure:nth-last-child(-n + 27) { 1719 | display: none !important; 1720 | outline: thick solid blue; 1721 | } 1722 | 1723 | .ad-box:hover { 1724 | box-shadow: 0 2px 3px rgba(0, 0, 0, 0.25); 1725 | } 1726 | .ad-box { 1727 | position: relative; 1728 | background: #1d1f21; 1729 | padding: 1em; 1730 | min-height: 100px; 1731 | } 1732 | .beg { 1733 | position: absolute; 1734 | top: 0; 1735 | left: 0; 1736 | right: 0; 1737 | bottom: 0; 1738 | font-size: 0.9em; 1739 | line-height: 1.5; 1740 | color: #aaa; 1741 | text-align: center; 1742 | padding: 1em; 1743 | display: flex; 1744 | flex-direction: column; 1745 | align-items: center; 1746 | justify-content: center; 1747 | } 1748 | .beg div { 1749 | margin: 0.125em 0; 1750 | } 1751 | #carbonads { 1752 | position: relative; 1753 | z-index: 10; 1754 | cursor: pointer; 1755 | background: #1d1f21; 1756 | } 1757 | #carbonads, 1758 | #carbonads span { 1759 | display: block; 1760 | overflow: hidden; 1761 | } 1762 | #carbonads span { 1763 | position: relative; 1764 | } 1765 | .carbon-img { 1766 | float: left; 1767 | margin-right: 1rem; 1768 | } 1769 | .carbon-img img { 1770 | display: block; 1771 | border-radius: 4px; 1772 | background: rgba(16, 10, 9, 0.1); 1773 | } 1774 | .carbon-text { 1775 | font: 13px/1.3 Monaco, monospace; 1776 | float: left; 1777 | width: calc(100% - 150px); 1778 | text-align: left; 1779 | color: #81a2be; 1780 | text-decoration: none; 1781 | cursor: pointer; 1782 | } 1783 | .carbon-text:active { 1784 | color: #c5c8c6; 1785 | } 1786 | #carbonads:hover .carbon-text { 1787 | color: #f0c674; 1788 | } 1789 | .carbon-poweredby { 1790 | position: absolute; 1791 | right: 0; 1792 | bottom: 0; 1793 | display: block; 1794 | font: 11px/1 Monaco, monospace; 1795 | color: #969896; 1796 | text-decoration: none; 1797 | } 1798 | .carbon-poweredby:before { 1799 | content: "/* "; 1800 | } 1801 | .carbon-poweredby:after { 1802 | content: " */"; 1803 | } 1804 | 1805 | .sponsorship { 1806 | font-size: 0.8em; 1807 | float: right; 1808 | display: inline-block; 1809 | background: #2cbc63; 1810 | margin: 0; 1811 | padding: 0.5em; 1812 | border-radius: 2px; 1813 | color: #000; 1814 | box-shadow: 0 1px 2px rgba(16, 10, 9, 0.15); 1815 | background-image: url(https://getcssscan.com/favicon-32x32.png); 1816 | padding-left: 2.25em; 1817 | background-size: 20px 20px; 1818 | background-position: 0.5em 50%; 1819 | background-repeat: no-repeat; 1820 | transition: box-shadow 0.375s, background-color 0.375s; 1821 | text-decoration: none; 1822 | } 1823 | 1824 | .sponsorship-side { 1825 | font-size: 1em; 1826 | float: none; 1827 | margin: 0.75rem 0.5rem 0; 1828 | background-color: #f1f1ec; 1829 | } 1830 | 1831 | .sponsorship:hover { 1832 | background-color: #52e48a; 1833 | box-shadow: 0 2px 4px rgba(16, 10, 9, 0.15); 1834 | text-decoration: underline; 1835 | } 1836 | 1837 | .sponsorship-side:hover { 1838 | background-color: #d3d0ca; 1839 | } 1840 | 1841 | .sponsorship span { 1842 | text-decoration: underline; 1843 | } 1844 | --------------------------------------------------------------------------------