├── .gitignore ├── docs ├── CNAME ├── index.html ├── index.js ├── index.js.map ├── santahand.a6e3db49.png ├── santahand.fbeeee9f.png ├── scripts.9b48a5c0.js ├── scripts.9b48a5c0.js.map ├── scripts.b71a6038.js ├── scripts.b71a6038.js.map ├── style.48278cf0.css ├── style.48278cf0.css.map ├── style.9c3b912e.css ├── style.9c3b912e.css.map ├── style.9c3b912e.js └── style.9c3b912e.js.map ├── package-lock.json ├── package.json ├── pug.config.js ├── readme.md └── source ├── cursors.js ├── index.pug ├── santahand.png ├── scripts.js └── style.styl /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | .DS_Store 3 | *.log 4 | haters 5 | .cache/ 6 | dist/ 7 | .parcel-cache 8 | -------------------------------------------------------------------------------- /docs/CNAME: -------------------------------------------------------------------------------- 1 | csscursor.info 2 | -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | CSS Cursors! -------------------------------------------------------------------------------- /docs/index.js: -------------------------------------------------------------------------------- 1 | // modules are defined as an array 2 | // [ module function, map of requires ] 3 | // 4 | // map of requires is short require name -> numeric require 5 | // 6 | // anything defined in a previous bundle is accessed via the 7 | // orig method which is the require for previous bundles 8 | parcelRequire = (function (modules, cache, entry, globalName) { 9 | // Save the require from previous bundle to this closure if any 10 | var previousRequire = typeof parcelRequire === 'function' && parcelRequire; 11 | var nodeRequire = typeof require === 'function' && require; 12 | 13 | function newRequire(name, jumped) { 14 | if (!cache[name]) { 15 | if (!modules[name]) { 16 | // if we cannot find the module within our internal map or 17 | // cache jump to the current global require ie. the last bundle 18 | // that was added to the page. 19 | var currentRequire = typeof parcelRequire === 'function' && parcelRequire; 20 | if (!jumped && currentRequire) { 21 | return currentRequire(name, true); 22 | } 23 | 24 | // If there are other bundles on this page the require from the 25 | // previous one is saved to 'previousRequire'. Repeat this as 26 | // many times as there are bundles until the module is found or 27 | // we exhaust the require chain. 28 | if (previousRequire) { 29 | return previousRequire(name, true); 30 | } 31 | 32 | // Try the node require function if it exists. 33 | if (nodeRequire && typeof name === 'string') { 34 | return nodeRequire(name); 35 | } 36 | 37 | var err = new Error('Cannot find module \'' + name + '\''); 38 | err.code = 'MODULE_NOT_FOUND'; 39 | throw err; 40 | } 41 | 42 | localRequire.resolve = resolve; 43 | localRequire.cache = {}; 44 | 45 | var module = cache[name] = new newRequire.Module(name); 46 | 47 | modules[name][0].call(module.exports, localRequire, module, module.exports, this); 48 | } 49 | 50 | return cache[name].exports; 51 | 52 | function localRequire(x){ 53 | return newRequire(localRequire.resolve(x)); 54 | } 55 | 56 | function resolve(x){ 57 | return modules[name][1][x] || x; 58 | } 59 | } 60 | 61 | function Module(moduleName) { 62 | this.id = moduleName; 63 | this.bundle = newRequire; 64 | this.exports = {}; 65 | } 66 | 67 | newRequire.isParcelRequire = true; 68 | newRequire.Module = Module; 69 | newRequire.modules = modules; 70 | newRequire.cache = cache; 71 | newRequire.parent = previousRequire; 72 | newRequire.register = function (id, exports) { 73 | modules[id] = [function (require, module) { 74 | module.exports = exports; 75 | }, {}]; 76 | }; 77 | 78 | var error; 79 | for (var i = 0; i < entry.length; i++) { 80 | try { 81 | newRequire(entry[i]); 82 | } catch (e) { 83 | // Save first error but execute all entries 84 | if (!error) { 85 | error = e; 86 | } 87 | } 88 | } 89 | 90 | if (entry.length) { 91 | // Expose entry point to Node, AMD or browser globals 92 | // Based on https://github.com/ForbesLindesay/umd/blob/master/template.js 93 | var mainExports = newRequire(entry[entry.length - 1]); 94 | 95 | // CommonJS 96 | if (typeof exports === "object" && typeof module !== "undefined") { 97 | module.exports = mainExports; 98 | 99 | // RequireJS 100 | } else if (typeof define === "function" && define.amd) { 101 | define(function () { 102 | return mainExports; 103 | }); 104 | 105 | // 36 | 37 | script. 38 | window.dataLayer = window.dataLayer || []; 39 | function gtag(){dataLayer.push(arguments);} 40 | gtag('js', new Date()); 41 | 42 | gtag('config', 'G-3XQ7E0LJZ0'); 43 | 44 | -------------------------------------------------------------------------------- /source/santahand.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/CSS-Cursors/994b2b0d910ff4c7ee2723671ddd2113baf2cf86/source/santahand.png -------------------------------------------------------------------------------- /source/scripts.js: -------------------------------------------------------------------------------- 1 | 2 | const items = document.querySelectorAll('.cursors li'); 3 | 4 | function handleClick() { 5 | /* 6 | Copy to clipboard 7 | */ 8 | const clipboardInput = document.querySelector('[name="clipboard"]'); 9 | clipboardInput.value = this.dataset.css || ' '; 10 | clipboardInput.select(); 11 | document.execCommand('copy'); 12 | 13 | this.classList.add('copied'); 14 | setTimeout(()=>this.classList.add('copied-active')) 15 | this.addEventListener('transitionend', ()=> { 16 | this.classList.remove('copied','copied-active'); 17 | }); 18 | } 19 | 20 | Array.from(items).forEach(item => item.addEventListener('click', handleClick)); 21 | -------------------------------------------------------------------------------- /source/style.styl: -------------------------------------------------------------------------------- 1 | /* 2 | Variables 3 | */ 4 | 5 | red = #FF2914 6 | yellow = #FFFF80 7 | darkerYellow = #F5F57B 8 | /* 9 | House Keeping 10 | */ 11 | 12 | html 13 | font-size 10px 14 | font-family Neuton, sans-serif 15 | box-sizing: border-box; 16 | 17 | *, *:before, *:after 18 | box-sizing: inherit; 19 | 20 | body 21 | margin 0 22 | border 1px solid red 23 | 24 | /* 25 | The Good Stuff™ 26 | */ 27 | .cursors 28 | list-style none 29 | display flex 30 | flex-wrap wrap 31 | height 100vh 32 | margin 0 33 | padding 0 34 | li 35 | flex-basis 20% 36 | width 20% 37 | flex-direction column 38 | justify-content center 39 | align-items center 40 | border 3px solid darkerYellow 41 | display flex 42 | background yellow 43 | transition all 0.1s 44 | text-align center 45 | &.copied 46 | background darkerYellow 47 | transition all 0.3s 48 | transform scale(1.2) 49 | &.copied.copied-active 50 | transition all 0.2s 51 | background yellow 52 | 53 | p 54 | font-size 25px 55 | 56 | li.url 57 | cursor url('./santahand.png'),default; 58 | 59 | [name="clipboard"] 60 | width 10px 61 | height 10px 62 | position absolute 63 | opacity 0 64 | 65 | li.deets 66 | text-align center 67 | p 68 | font-size 15px 69 | a 70 | color red 71 | --------------------------------------------------------------------------------