├── .gitignore ├── README.md ├── bundle.js ├── images ├── Icons │ └── Nav │ │ └── Apps.svg ├── avatar.svg ├── book-01.jpg ├── book-02.jpg ├── book-03.jpg ├── book-04.jpg ├── book-05.jpg ├── book-06.jpg ├── book-07.jpg ├── category-default.svg ├── category-selected.svg ├── home-default.svg ├── home-selected.svg ├── logo.svg ├── pick-1.jpg ├── pick-2.jpg ├── pick-3.jpg ├── pick-4.jpg ├── profile-default.svg ├── profile-selected.svg ├── read-01.jpg ├── read-02.jpg ├── read-03.jpg ├── read-04.jpg ├── wishlist-default.svg └── wishlist-selected.svg ├── index.html ├── main.js ├── output.css ├── package-lock.json ├── package.json ├── screenshot.png ├── style.css └── tailwind.js /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Libre - a responsive single page app template for collection management projects. 2 | 3 | ![Libre Screenshot](./screenshot.png) 4 | 5 | Libre is a responsive single page app template designed for developers who want to create collection management-like projects (e.g. books, music, podcasts, games, etc.). Built with tailwind.css and vanilla javascript, this template is easily customizable and has common components like profile, lists, filters and popovers which sets the ground work for your projects. Libre is made for Codrops exclusively. 6 | 7 | ## Running the project locally 8 | Make sure your local version is v6+. I currently am using v10.8 as of Aug 2018. 9 | ``` 10 | npm install 11 | ``` 12 | 13 | If you want to regenerate css with your changes, run this command to generate css using tailwind config (e.g. tailwind.js) 14 | ``` 15 | $ ./node_modules/.bin/tailwind build style.css -c ./tailwind.js -o ./output.css 16 | ``` 17 | 18 | If you want to recompile the javascript, make sure browserify is installed globally then run this command to create bundle.js 19 | ``` 20 | $ npm install -g browserify 21 | $ browserify main.js -o bundle.js 22 | ``` 23 | 24 | Check out the details on [Codrops](https://tympanus.net/codrops/2018/09/16/freebie-libre-web-app-template/) 25 | 26 | ## Live Demo 27 | 👋 [Libre Live Demo](https://tympanus.net/Freebies/libre/) 28 | 29 | ## Credits 30 | - [Browserify](http://browserify.org/) 31 | - [Anime.js](http://animejs.com/) 32 | - [tippy.js](https://atomiks.github.io/tippyjs/) 33 | - [Tailwind.css](https://tailwindcss.com/) 34 | - [Shopify Polaris's Icons](https://polaris.shopify.com/) 35 | 36 | ## License 37 | Use it freely but please do not republish, distribute or sell "as-is". [Read more about our license.](http://tympanus.net/codrops/licensing/) 38 | 39 | ## Misc 40 | 41 | Follow Amie: [Website](https://www.amie-chen.com/), [Dribbble](http://www.dribbble.com/hyperyolo), [Github](https://github.com/amiechen), [Twitter](https://twitter.com/hyper_yolo), [Medium](https://medium.com/@hyperyolo) 42 | 43 | Follow Codrops: [Twitter](http://www.twitter.com/codrops), [Facebook](http://www.facebook.com/pages/Codrops/159107397912), [Google+](https://plus.google.com/101095823814290637419), [GitHub](https://github.com/codrops), [Pinterest](http://www.pinterest.com/codrops/) 44 | 45 | [© Codrops 2018](http://www.codrops.com) -------------------------------------------------------------------------------- /images/Icons/Nav/Apps.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Icons/Nav/Apps 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /images/avatar.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | avatar 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /images/book-01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/amiechen/codrops-libre/97f3ed9f63af3636485103d5e4b514e49fe52659/images/book-01.jpg -------------------------------------------------------------------------------- /images/book-02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/amiechen/codrops-libre/97f3ed9f63af3636485103d5e4b514e49fe52659/images/book-02.jpg -------------------------------------------------------------------------------- /images/book-03.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/amiechen/codrops-libre/97f3ed9f63af3636485103d5e4b514e49fe52659/images/book-03.jpg -------------------------------------------------------------------------------- /images/book-04.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/amiechen/codrops-libre/97f3ed9f63af3636485103d5e4b514e49fe52659/images/book-04.jpg -------------------------------------------------------------------------------- /images/book-05.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/amiechen/codrops-libre/97f3ed9f63af3636485103d5e4b514e49fe52659/images/book-05.jpg -------------------------------------------------------------------------------- /images/book-06.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/amiechen/codrops-libre/97f3ed9f63af3636485103d5e4b514e49fe52659/images/book-06.jpg -------------------------------------------------------------------------------- /images/book-07.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/amiechen/codrops-libre/97f3ed9f63af3636485103d5e4b514e49fe52659/images/book-07.jpg -------------------------------------------------------------------------------- /images/category-default.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Icon 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /images/category-selected.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Group 2 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /images/home-default.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Icon 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /images/home-selected.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Group 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /images/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | logo 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /images/pick-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/amiechen/codrops-libre/97f3ed9f63af3636485103d5e4b514e49fe52659/images/pick-1.jpg -------------------------------------------------------------------------------- /images/pick-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/amiechen/codrops-libre/97f3ed9f63af3636485103d5e4b514e49fe52659/images/pick-2.jpg -------------------------------------------------------------------------------- /images/pick-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/amiechen/codrops-libre/97f3ed9f63af3636485103d5e4b514e49fe52659/images/pick-3.jpg -------------------------------------------------------------------------------- /images/pick-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/amiechen/codrops-libre/97f3ed9f63af3636485103d5e4b514e49fe52659/images/pick-4.jpg -------------------------------------------------------------------------------- /images/profile-default.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Icon 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /images/profile-selected.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Group 3 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /images/read-01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/amiechen/codrops-libre/97f3ed9f63af3636485103d5e4b514e49fe52659/images/read-01.jpg -------------------------------------------------------------------------------- /images/read-02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/amiechen/codrops-libre/97f3ed9f63af3636485103d5e4b514e49fe52659/images/read-02.jpg -------------------------------------------------------------------------------- /images/read-03.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/amiechen/codrops-libre/97f3ed9f63af3636485103d5e4b514e49fe52659/images/read-03.jpg -------------------------------------------------------------------------------- /images/read-04.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/amiechen/codrops-libre/97f3ed9f63af3636485103d5e4b514e49fe52659/images/read-04.jpg -------------------------------------------------------------------------------- /images/wishlist-default.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Group 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /images/wishlist-selected.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Group 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | Personal Library - Codrops Template 12 | 13 | 14 | 15 | 16 | 17 | 18 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 |
38 |
39 | 44 |
45 |
46 |
47 |
48 | 49 | 50 |
51 | 52 | 53 | 54 |
55 | 56 | 57 |
58 |
59 | 60 |
61 | 62 | 102 | 103 |
104 | 105 |
106 |
107 |

Art & Design

108 |

Interesting Stats

109 |
110 | 111 |
112 | 113 | 161 | 162 |
163 | 164 |
165 |
Stats
166 |
Library (7)
167 |
Picks for you
168 |
169 |
170 | 171 | 314 | 315 | 349 |
350 | 351 | 393 |
394 | 410 | 411 | 412 | -------------------------------------------------------------------------------- /main.js: -------------------------------------------------------------------------------- 1 | const anime = require("animejs"); 2 | const tippy = require("tippy.js"); 3 | const imagesloaded = require("imagesloaded"); 4 | 5 | // utilities 6 | const get = (selector, scope) => { 7 | scope = scope ? scope : document; 8 | return scope.querySelector(selector); 9 | }; 10 | 11 | const getAll = (selector, scope) => { 12 | scope = scope ? scope : document; 13 | return scope.querySelectorAll(selector); 14 | }; 15 | 16 | const nav = get("nav"); 17 | const profile = get("#profile"); 18 | const loading = get("#loading"); 19 | const content = get("#content"); 20 | const toggle = get(".toggle"); 21 | const avatarAnimation = anime({ 22 | targets: '#avatar #moon', 23 | rotate: '1turn', 24 | transformOrigin: "center center 0", 25 | duration: 5000 26 | }); 27 | const showSidenavCategories = anime({ 28 | targets: '#sidenav-categories li', 29 | translateY: [-10, 0], 30 | duration: 1200, 31 | opacity: [0,1], 32 | delay: function(el, i) { 33 | return i * 60; 34 | } 35 | }); 36 | 37 | function isHidden(el) { 38 | return (el.offsetParent === null) 39 | } 40 | 41 | function removeLoadingScreen () { 42 | anime({ 43 | targets: "#loading", 44 | opacity: 0, 45 | duration: 1000, 46 | easing: "easeOutExpo", 47 | complete: () => { 48 | loading.style.display = "none"; 49 | } 50 | }); 51 | } 52 | 53 | // loading animation 54 | anime({ 55 | targets: '#morphing #moon', 56 | rotate: '1turn', 57 | transformOrigin: "center center 0", 58 | duration: 5000, 59 | loop: true 60 | }); 61 | 62 | // toggle stats on when window resizes 63 | window.addEventListener("resize", () => { 64 | if(window.innerWidth > 768) { 65 | if (get("[data-tab='section-stats']").classList.contains('active')) { 66 | get("[data-tab='section-library']").click(); 67 | } 68 | if (content.classList.contains("hidden")) { 69 | content.classList.remove("hidden"); 70 | content.classList.add("flex"); 71 | profile.style.top = 0; 72 | } 73 | } 74 | }) 75 | 76 | // show loading screen if images loaded faster than 200ms 77 | setTimeout(() => { 78 | imagesloaded(get("body"), () => { 79 | let tabs = getAll(".js-tab"); 80 | let panes = getAll(".js-tab-pane"); 81 | let sidenavCategoriesTrigger = get("#sidenav-categories-trigger"); 82 | let sidenavCategories = get("#sidenav-categories"); 83 | let sidenavIcon = get("#sidenav-icon"); 84 | let books = getAll(".js-book"); 85 | let mobileReoadTriggers = getAll(".mobile-home-trigger"); 86 | 87 | removeLoadingScreen(); 88 | 89 | // bind click event to sideNav 90 | sidenavCategoriesTrigger.addEventListener("click", sidenavClick); 91 | 92 | // bind click event to each tab 93 | for (var i = 0; i < tabs.length; i++) { 94 | tabs[i].addEventListener("click", tabClick); 95 | } 96 | 97 | for (let i = 0; i < mobileReoadTriggers.length; i++) { 98 | mobileReoadTriggers[i].addEventListener("click", event => { 99 | location.reload(); 100 | }) 101 | } 102 | 103 | for (var i = 0; i < books.length; i++) { 104 | tippy(books[i], { 105 | html: "#popup", 106 | placement: "right", 107 | theme: "light rounded", 108 | arrow: true, 109 | arrowTransform: "scaleX(1.3)", 110 | distance: 20, 111 | maxWidth: "200px", 112 | animation: "fade", 113 | trigger: "click", 114 | interactive: true, 115 | }); 116 | } 117 | 118 | // disable/enable tippy if on mobile/desktop device 119 | tippy.browser.onUserInputChange = type => { 120 | const method = type === 'touch' || this.window.innerWidth < 768 ? 'disable' : 'enable'; 121 | for (let i = 0; i < books.length; i++) { 122 | books[i]._tippy[method](); 123 | } 124 | } 125 | 126 | function sidenavClick (event) { 127 | if (sidenavCategories.classList.contains("hidden")) { 128 | sidenavCategories.classList.remove("hidden"); 129 | sidenavIcon.classList.remove("rotate"); 130 | showSidenavCategories.restart(); 131 | } else { 132 | sidenavCategories.classList.add("hidden"); 133 | sidenavIcon.classList.add("rotate"); 134 | } 135 | } 136 | 137 | // each click event is scoped to the tab_container 138 | function tabClick (event) { 139 | let clickedTab = event.target; 140 | let activePane = get(`#${clickedTab.getAttribute("data-tab")}`); 141 | 142 | // remove all active tab classes 143 | for (let i = 0; i < tabs.length; i++) { 144 | tabs[i].classList.remove('active'); 145 | } 146 | 147 | // remove all active pane classes 148 | for (var i = 0; i < panes.length; i++) { 149 | panes[i].classList.remove('active'); 150 | } 151 | 152 | // apply active classes on desired tab and pane 153 | clickedTab.classList.add('active'); 154 | activePane.classList.add('active'); 155 | } 156 | }); 157 | }, 1000); 158 | 159 | get("#mobile-nav-trigger").addEventListener("click", event => { 160 | if (isHidden(nav)) { 161 | toggle.classList.add("open"); 162 | nav.classList.remove("hidden"); 163 | } else { 164 | toggle.classList.remove("open"); 165 | nav.classList.add("hidden"); 166 | } 167 | }); 168 | 169 | get("#mobile-profile-trigger").addEventListener("click", event => { 170 | profile.classList.remove("hidden"); 171 | profile.style.top = "63px"; 172 | content.classList.remove("flex"); 173 | content.classList.add("hidden"); 174 | nav.classList.add("hidden"); 175 | toggle.classList.remove("open"); 176 | }); 177 | 178 | // avatar animation 179 | get("#avatar").addEventListener("mouseenter", event => { 180 | avatarAnimation.restart(); 181 | }, false); 182 | 183 | get("#avatar").addEventListener("mouseleave", event => { 184 | avatarAnimation.reverse(); 185 | }, false); -------------------------------------------------------------------------------- /package-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "codrops-library", 3 | "version": "1.0.0", 4 | "lockfileVersion": 1, 5 | "requires": true, 6 | "dependencies": { 7 | "animejs": { 8 | "version": "2.2.0", 9 | "resolved": "https://registry.npmjs.org/animejs/-/animejs-2.2.0.tgz", 10 | "integrity": "sha1-Ne79/FNbgZScnLBvCz5gwC5v3IA=" 11 | }, 12 | "ansi-regex": { 13 | "version": "2.1.1", 14 | "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz", 15 | "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=", 16 | "dev": true 17 | }, 18 | "ansi-styles": { 19 | "version": "2.2.1", 20 | "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz", 21 | "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=", 22 | "dev": true 23 | }, 24 | "balanced-match": { 25 | "version": "1.0.0", 26 | "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz", 27 | "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=", 28 | "dev": true 29 | }, 30 | "brace-expansion": { 31 | "version": "1.1.11", 32 | "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", 33 | "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", 34 | "dev": true, 35 | "requires": { 36 | "balanced-match": "^1.0.0", 37 | "concat-map": "0.0.1" 38 | } 39 | }, 40 | "camelcase-css": { 41 | "version": "1.0.1", 42 | "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-1.0.1.tgz", 43 | "integrity": "sha1-FXxCOCZfXPlKHf/ehkRlUsvz9wU=", 44 | "dev": true 45 | }, 46 | "chalk": { 47 | "version": "1.1.3", 48 | "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz", 49 | "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=", 50 | "dev": true, 51 | "requires": { 52 | "ansi-styles": "^2.2.1", 53 | "escape-string-regexp": "^1.0.2", 54 | "has-ansi": "^2.0.0", 55 | "strip-ansi": "^3.0.0", 56 | "supports-color": "^2.0.0" 57 | }, 58 | "dependencies": { 59 | "supports-color": { 60 | "version": "2.0.0", 61 | "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz", 62 | "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=", 63 | "dev": true 64 | } 65 | } 66 | }, 67 | "color-convert": { 68 | "version": "1.9.2", 69 | "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.2.tgz", 70 | "integrity": "sha512-3NUJZdhMhcdPn8vJ9v2UQJoH0qqoGUkYTgFEPZaPjEtwmmKUfNV46zZmgB2M5M4DCEQHMaCfWHCxiBflLm04Tg==", 71 | "dev": true, 72 | "requires": { 73 | "color-name": "1.1.1" 74 | } 75 | }, 76 | "color-name": { 77 | "version": "1.1.1", 78 | "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.1.tgz", 79 | "integrity": "sha1-SxQVMEz1ACjqgWQ2Q72C6gWANok=", 80 | "dev": true 81 | }, 82 | "commander": { 83 | "version": "2.17.1", 84 | "resolved": "https://registry.npmjs.org/commander/-/commander-2.17.1.tgz", 85 | "integrity": "sha512-wPMUt6FnH2yzG95SA6mzjQOEKUU3aLaDEmzs1ti+1E9h+CsrZghRlqEM/EJ4KscsQVG8uNN4uVreUeT8+drlgg==", 86 | "dev": true 87 | }, 88 | "comment-regex": { 89 | "version": "1.0.1", 90 | "resolved": "https://registry.npmjs.org/comment-regex/-/comment-regex-1.0.1.tgz", 91 | "integrity": "sha512-IWlN//Yfby92tOIje7J18HkNmWRR7JESA/BK8W7wqY/akITpU5B0JQWnbTjCfdChSrDNb0DrdA9jfAxiiBXyiQ==", 92 | "dev": true 93 | }, 94 | "concat-map": { 95 | "version": "0.0.1", 96 | "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", 97 | "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=", 98 | "dev": true 99 | }, 100 | "css.escape": { 101 | "version": "1.5.1", 102 | "resolved": "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz", 103 | "integrity": "sha1-QuJ9T6BK4y+TGktNQZH6nN3ul8s=", 104 | "dev": true 105 | }, 106 | "defined": { 107 | "version": "1.0.0", 108 | "resolved": "https://registry.npmjs.org/defined/-/defined-1.0.0.tgz", 109 | "integrity": "sha1-yY2bzvdWdBiOEQlpFRGZ45sfppM=", 110 | "dev": true 111 | }, 112 | "dot-prop": { 113 | "version": "4.2.0", 114 | "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-4.2.0.tgz", 115 | "integrity": "sha512-tUMXrxlExSW6U2EXiiKGSBVdYgtV8qlHL+C10TsW4PURY/ic+eaysnSkwB4kA/mBlCyy/IKDJ+Lc3wbWeaXtuQ==", 116 | "dev": true, 117 | "requires": { 118 | "is-obj": "^1.0.0" 119 | } 120 | }, 121 | "escape-string-regexp": { 122 | "version": "1.0.5", 123 | "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz", 124 | "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=", 125 | "dev": true 126 | }, 127 | "ev-emitter": { 128 | "version": "1.1.1", 129 | "resolved": "https://registry.npmjs.org/ev-emitter/-/ev-emitter-1.1.1.tgz", 130 | "integrity": "sha512-ipiDYhdQSCZ4hSbX4rMW+XzNKMD1prg/sTvoVmSLkuQ1MVlwjJQQA+sW8tMYR3BLUr9KjodFV4pvzunvRhd33Q==" 131 | }, 132 | "fs-extra": { 133 | "version": "4.0.3", 134 | "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-4.0.3.tgz", 135 | "integrity": "sha512-q6rbdDd1o2mAnQreO7YADIxf/Whx4AHBiRf6d+/cVT8h44ss+lHgxf1FemcqDnQt9X3ct4McHr+JMGlYSsK7Cg==", 136 | "dev": true, 137 | "requires": { 138 | "graceful-fs": "^4.1.2", 139 | "jsonfile": "^4.0.0", 140 | "universalify": "^0.1.0" 141 | } 142 | }, 143 | "fs.realpath": { 144 | "version": "1.0.0", 145 | "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", 146 | "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=", 147 | "dev": true 148 | }, 149 | "gather-stream": { 150 | "version": "1.0.0", 151 | "resolved": "https://registry.npmjs.org/gather-stream/-/gather-stream-1.0.0.tgz", 152 | "integrity": "sha1-szmUr0V6gRVwDUEPMXczy+egkEs=", 153 | "dev": true 154 | }, 155 | "glob": { 156 | "version": "7.1.2", 157 | "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.2.tgz", 158 | "integrity": "sha512-MJTUg1kjuLeQCJ+ccE4Vpa6kKVXkPYJ2mOCQyUuKLcLQsdrMCpBPUi8qVE6+YuaJkozeA9NusTAw3hLr8Xe5EQ==", 159 | "dev": true, 160 | "requires": { 161 | "fs.realpath": "^1.0.0", 162 | "inflight": "^1.0.4", 163 | "inherits": "2", 164 | "minimatch": "^3.0.4", 165 | "once": "^1.3.0", 166 | "path-is-absolute": "^1.0.0" 167 | } 168 | }, 169 | "graceful-fs": { 170 | "version": "4.1.11", 171 | "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.11.tgz", 172 | "integrity": "sha1-Dovf5NHduIVNZOBOp8AOKgJuVlg=", 173 | "dev": true 174 | }, 175 | "has-ansi": { 176 | "version": "2.0.0", 177 | "resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-2.0.0.tgz", 178 | "integrity": "sha1-NPUEnOHs3ysGSa8+8k5F7TVBbZE=", 179 | "dev": true, 180 | "requires": { 181 | "ansi-regex": "^2.0.0" 182 | } 183 | }, 184 | "has-flag": { 185 | "version": "1.0.0", 186 | "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-1.0.0.tgz", 187 | "integrity": "sha1-nZ55MWXOAXoA8AQYxD+UKnsdEfo=", 188 | "dev": true 189 | }, 190 | "imagesloaded": { 191 | "version": "4.1.4", 192 | "resolved": "https://registry.npmjs.org/imagesloaded/-/imagesloaded-4.1.4.tgz", 193 | "integrity": "sha512-ltiBVcYpc/TYTF5nolkMNsnREHW+ICvfQ3Yla2Sgr71YFwQ86bDwV9hgpFhFtrGPuwEx5+LqOHIrdXBdoWwwsA==", 194 | "requires": { 195 | "ev-emitter": "^1.0.0" 196 | } 197 | }, 198 | "indexes-of": { 199 | "version": "1.0.1", 200 | "resolved": "https://registry.npmjs.org/indexes-of/-/indexes-of-1.0.1.tgz", 201 | "integrity": "sha1-8w9xbI4r00bHtn0985FVZqfAVgc=", 202 | "dev": true 203 | }, 204 | "inflight": { 205 | "version": "1.0.6", 206 | "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz", 207 | "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=", 208 | "dev": true, 209 | "requires": { 210 | "once": "^1.3.0", 211 | "wrappy": "1" 212 | } 213 | }, 214 | "inherits": { 215 | "version": "2.0.3", 216 | "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz", 217 | "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=", 218 | "dev": true 219 | }, 220 | "is-obj": { 221 | "version": "1.0.1", 222 | "resolved": "https://registry.npmjs.org/is-obj/-/is-obj-1.0.1.tgz", 223 | "integrity": "sha1-PkcprB9f3gJc19g6iW2rn09n2w8=", 224 | "dev": true 225 | }, 226 | "js-base64": { 227 | "version": "2.4.8", 228 | "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.4.8.tgz", 229 | "integrity": "sha512-hm2nYpDrwoO/OzBhdcqs/XGT6XjSuSSCVEpia+Kl2J6x4CYt5hISlVL/AYU1khoDXv0AQVgxtdJySb9gjAn56Q==", 230 | "dev": true 231 | }, 232 | "jsonfile": { 233 | "version": "4.0.0", 234 | "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz", 235 | "integrity": "sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=", 236 | "dev": true, 237 | "requires": { 238 | "graceful-fs": "^4.1.6" 239 | } 240 | }, 241 | "lodash": { 242 | "version": "4.17.10", 243 | "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.10.tgz", 244 | "integrity": "sha512-UejweD1pDoXu+AD825lWwp4ZGtSwgnpZxb3JDViD7StjQz+Nb/6l093lx4OQ0foGWNRoc19mWy7BzL+UAK2iVg==", 245 | "dev": true 246 | }, 247 | "minimatch": { 248 | "version": "3.0.4", 249 | "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz", 250 | "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==", 251 | "dev": true, 252 | "requires": { 253 | "brace-expansion": "^1.1.7" 254 | } 255 | }, 256 | "minimist": { 257 | "version": "1.2.0", 258 | "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz", 259 | "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=", 260 | "dev": true 261 | }, 262 | "object-assign": { 263 | "version": "4.1.1", 264 | "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", 265 | "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=", 266 | "dev": true 267 | }, 268 | "once": { 269 | "version": "1.4.0", 270 | "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz", 271 | "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=", 272 | "dev": true, 273 | "requires": { 274 | "wrappy": "1" 275 | } 276 | }, 277 | "path-is-absolute": { 278 | "version": "1.0.1", 279 | "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz", 280 | "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=", 281 | "dev": true 282 | }, 283 | "perfectionist": { 284 | "version": "2.4.0", 285 | "resolved": "https://registry.npmjs.org/perfectionist/-/perfectionist-2.4.0.tgz", 286 | "integrity": "sha1-wUetNxThJkZ/F2QSnuct+GHUfqA=", 287 | "dev": true, 288 | "requires": { 289 | "comment-regex": "^1.0.0", 290 | "defined": "^1.0.0", 291 | "minimist": "^1.2.0", 292 | "postcss": "^5.0.8", 293 | "postcss-scss": "^0.3.0", 294 | "postcss-value-parser": "^3.3.0", 295 | "read-file-stdin": "^0.2.0", 296 | "string.prototype.repeat": "^0.2.0", 297 | "vendors": "^1.0.0", 298 | "write-file-stdout": "0.0.2" 299 | }, 300 | "dependencies": { 301 | "postcss": { 302 | "version": "5.2.18", 303 | "resolved": "https://registry.npmjs.org/postcss/-/postcss-5.2.18.tgz", 304 | "integrity": "sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg==", 305 | "dev": true, 306 | "requires": { 307 | "chalk": "^1.1.3", 308 | "js-base64": "^2.1.9", 309 | "source-map": "^0.5.6", 310 | "supports-color": "^3.2.3" 311 | } 312 | } 313 | } 314 | }, 315 | "popper.js": { 316 | "version": "1.14.4", 317 | "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.14.4.tgz", 318 | "integrity": "sha1-juwdj/AqWjoVLdQ0FKFce3n9abY=" 319 | }, 320 | "postcss": { 321 | "version": "6.0.23", 322 | "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.23.tgz", 323 | "integrity": "sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==", 324 | "dev": true, 325 | "requires": { 326 | "chalk": "^2.4.1", 327 | "source-map": "^0.6.1", 328 | "supports-color": "^5.4.0" 329 | }, 330 | "dependencies": { 331 | "ansi-styles": { 332 | "version": "3.2.1", 333 | "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz", 334 | "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==", 335 | "dev": true, 336 | "requires": { 337 | "color-convert": "^1.9.0" 338 | } 339 | }, 340 | "chalk": { 341 | "version": "2.4.1", 342 | "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.1.tgz", 343 | "integrity": "sha512-ObN6h1v2fTJSmUXoS3nMQ92LbDK9be4TV+6G+omQlGJFdcUX5heKi1LZ1YnRMIgwTLEj3E24bT6tYni50rlCfQ==", 344 | "dev": true, 345 | "requires": { 346 | "ansi-styles": "^3.2.1", 347 | "escape-string-regexp": "^1.0.5", 348 | "supports-color": "^5.3.0" 349 | } 350 | }, 351 | "has-flag": { 352 | "version": "3.0.0", 353 | "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", 354 | "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=", 355 | "dev": true 356 | }, 357 | "source-map": { 358 | "version": "0.6.1", 359 | "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", 360 | "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", 361 | "dev": true 362 | }, 363 | "supports-color": { 364 | "version": "5.4.0", 365 | "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.4.0.tgz", 366 | "integrity": "sha512-zjaXglF5nnWpsq470jSv6P9DwPvgLkuapYmfDm3JWOm0vkNTVF2tI4UrN2r6jH1qM/uc/WtxYY1hYoA2dOKj5w==", 367 | "dev": true, 368 | "requires": { 369 | "has-flag": "^3.0.0" 370 | } 371 | } 372 | } 373 | }, 374 | "postcss-functions": { 375 | "version": "3.0.0", 376 | "resolved": "https://registry.npmjs.org/postcss-functions/-/postcss-functions-3.0.0.tgz", 377 | "integrity": "sha1-DpTQFERwCkgd4g3k1V+yZAVkJQ4=", 378 | "dev": true, 379 | "requires": { 380 | "glob": "^7.1.2", 381 | "object-assign": "^4.1.1", 382 | "postcss": "^6.0.9", 383 | "postcss-value-parser": "^3.3.0" 384 | } 385 | }, 386 | "postcss-js": { 387 | "version": "1.0.1", 388 | "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-1.0.1.tgz", 389 | "integrity": "sha512-smhUUMF5o5W1ZCQSyh5A3lNOXFLdNrxqyhWbLsGolZH2AgVmlyhxhYbIixfsdKE6r1vG5i7O40DPcvEvE1mvjw==", 390 | "dev": true, 391 | "requires": { 392 | "camelcase-css": "^1.0.1", 393 | "postcss": "^6.0.11" 394 | } 395 | }, 396 | "postcss-nested": { 397 | "version": "3.0.0", 398 | "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-3.0.0.tgz", 399 | "integrity": "sha512-1xxmLHSfubuUi6xZZ0zLsNoiKfk3BWQj6fkNMaBJC529wKKLcdeCxXt6KJmDLva+trNyQNwEaE/ZWMA7cve1fA==", 400 | "dev": true, 401 | "requires": { 402 | "postcss": "^6.0.14", 403 | "postcss-selector-parser": "^3.1.1" 404 | } 405 | }, 406 | "postcss-scss": { 407 | "version": "0.3.1", 408 | "resolved": "https://registry.npmjs.org/postcss-scss/-/postcss-scss-0.3.1.tgz", 409 | "integrity": "sha1-ZcYQ2OKn7g5isYNbcbiHBzSBbks=", 410 | "dev": true, 411 | "requires": { 412 | "postcss": "^5.2.4" 413 | }, 414 | "dependencies": { 415 | "postcss": { 416 | "version": "5.2.18", 417 | "resolved": "https://registry.npmjs.org/postcss/-/postcss-5.2.18.tgz", 418 | "integrity": "sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg==", 419 | "dev": true, 420 | "requires": { 421 | "chalk": "^1.1.3", 422 | "js-base64": "^2.1.9", 423 | "source-map": "^0.5.6", 424 | "supports-color": "^3.2.3" 425 | } 426 | } 427 | } 428 | }, 429 | "postcss-selector-parser": { 430 | "version": "3.1.1", 431 | "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-3.1.1.tgz", 432 | "integrity": "sha1-T4dfSvsMllc9XPTXQBGu4lCn6GU=", 433 | "dev": true, 434 | "requires": { 435 | "dot-prop": "^4.1.1", 436 | "indexes-of": "^1.0.1", 437 | "uniq": "^1.0.1" 438 | } 439 | }, 440 | "postcss-value-parser": { 441 | "version": "3.3.0", 442 | "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.0.tgz", 443 | "integrity": "sha1-h/OPnxj3dKSrTIojL1xc6IcqnRU=", 444 | "dev": true 445 | }, 446 | "read-file-stdin": { 447 | "version": "0.2.1", 448 | "resolved": "https://registry.npmjs.org/read-file-stdin/-/read-file-stdin-0.2.1.tgz", 449 | "integrity": "sha1-JezP86FTtoCa+ssj7hU4fbng7mE=", 450 | "dev": true, 451 | "requires": { 452 | "gather-stream": "^1.0.0" 453 | } 454 | }, 455 | "source-map": { 456 | "version": "0.5.7", 457 | "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", 458 | "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=", 459 | "dev": true 460 | }, 461 | "string.prototype.repeat": { 462 | "version": "0.2.0", 463 | "resolved": "https://registry.npmjs.org/string.prototype.repeat/-/string.prototype.repeat-0.2.0.tgz", 464 | "integrity": "sha1-q6Nt4I3O5qWjN9SbLqHaGyj8Ds8=", 465 | "dev": true 466 | }, 467 | "strip-ansi": { 468 | "version": "3.0.1", 469 | "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz", 470 | "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=", 471 | "dev": true, 472 | "requires": { 473 | "ansi-regex": "^2.0.0" 474 | } 475 | }, 476 | "supports-color": { 477 | "version": "3.2.3", 478 | "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-3.2.3.tgz", 479 | "integrity": "sha1-ZawFBLOVQXHYpklGsq48u4pfVPY=", 480 | "dev": true, 481 | "requires": { 482 | "has-flag": "^1.0.0" 483 | } 484 | }, 485 | "tailwindcss": { 486 | "version": "0.6.4", 487 | "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-0.6.4.tgz", 488 | "integrity": "sha512-xfN6NrJDCv9giNQOy8gwtXZ+7VJuCoqM6HV3ZtXO9bcjXiCd7N8inJLe+PvVxaA3cq4kwWH5RODuLN0pruXuIA==", 489 | "dev": true, 490 | "requires": { 491 | "commander": "^2.11.0", 492 | "css.escape": "^1.5.1", 493 | "fs-extra": "^4.0.2", 494 | "lodash": "^4.17.5", 495 | "perfectionist": "^2.4.0", 496 | "postcss": "^6.0.9", 497 | "postcss-functions": "^3.0.0", 498 | "postcss-js": "^1.0.1", 499 | "postcss-nested": "^3.0.0", 500 | "postcss-selector-parser": "^3.1.1" 501 | } 502 | }, 503 | "tippy.js": { 504 | "version": "2.5.4", 505 | "resolved": "https://registry.npmjs.org/tippy.js/-/tippy.js-2.5.4.tgz", 506 | "integrity": "sha512-1fpdl/tZ4pFjna4knkK/U2MQWHW2xYYU1ttZWZl0yapxvBUzGLfiI72CqenRog4R6KvvS7Y1WsSQhVv4bSce4g==", 507 | "requires": { 508 | "popper.js": "^1.14.3" 509 | } 510 | }, 511 | "uniq": { 512 | "version": "1.0.1", 513 | "resolved": "https://registry.npmjs.org/uniq/-/uniq-1.0.1.tgz", 514 | "integrity": "sha1-sxxa6CVIRKOoKBVBzisEuGWnNP8=", 515 | "dev": true 516 | }, 517 | "universalify": { 518 | "version": "0.1.2", 519 | "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz", 520 | "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==", 521 | "dev": true 522 | }, 523 | "vendors": { 524 | "version": "1.0.2", 525 | "resolved": "https://registry.npmjs.org/vendors/-/vendors-1.0.2.tgz", 526 | "integrity": "sha512-w/hry/368nO21AN9QljsaIhb9ZiZtZARoVH5f3CsFbawdLdayCgKRPup7CggujvySMxx0I91NOyxdVENohprLQ==", 527 | "dev": true 528 | }, 529 | "wrappy": { 530 | "version": "1.0.2", 531 | "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz", 532 | "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=", 533 | "dev": true 534 | }, 535 | "write-file-stdout": { 536 | "version": "0.0.2", 537 | "resolved": "https://registry.npmjs.org/write-file-stdout/-/write-file-stdout-0.0.2.tgz", 538 | "integrity": "sha1-wlLXx8WxtAKJdjDjRTx7/mkNnKE=", 539 | "dev": true 540 | } 541 | } 542 | } 543 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "codrops-library", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "main.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+ssh://git@gitlab.com/amiechen/codrops-library.git" 12 | }, 13 | "author": "Amie Chen", 14 | "license": "MIT", 15 | "bugs": { 16 | "url": "https://gitlab.com/amiechen/codrops-library/issues" 17 | }, 18 | "homepage": "https://gitlab.com/amiechen/codrops-library#README", 19 | "devDependencies": { 20 | "tailwindcss": "^0.6.4" 21 | }, 22 | "dependencies": { 23 | "animejs": "^2.2.0", 24 | "imagesloaded": "^4.1.4", 25 | "tippy.js": "^2.5.4" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/amiechen/codrops-libre/97f3ed9f63af3636485103d5e4b514e49fe52659/screenshot.png -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | @tailwind preflight; 2 | @tailwind components; 3 | 4 | .transition-normal { 5 | transition: all 200ms ease; 6 | } 7 | 8 | .appearance-none { 9 | -webkit-appearance: none; 10 | appearance: none; 11 | } 12 | 13 | .js-tab:before { 14 | transition: 0.5s all ease; 15 | position: absolute; 16 | left: 50%; 17 | right: 50%; 18 | bottom: -2px; 19 | opacity: 0; 20 | content: ""; 21 | height: 2px; 22 | background-color: #6574CD; 23 | } 24 | 25 | .js-tab:hover:before { 26 | transition: 0.5s all ease; 27 | left: 0; 28 | right: 0; 29 | opacity: 1; 30 | } 31 | 32 | .js-tab-pane { 33 | display: none; 34 | } 35 | 36 | .js-tab.active:before { 37 | opacity: 1; 38 | left: 0; 39 | right: 0; 40 | } 41 | 42 | .js-tab-pane.active { 43 | display: flex; 44 | } 45 | 46 | #sidenav-icon.rotate { 47 | transform-origin: center center; 48 | transform: rotate(180deg); 49 | transition: transform .3s ease-in-out; 50 | } 51 | 52 | .hover\:brighter:hover { 53 | filter: brightness(110%); 54 | } 55 | 56 | .hover\:translate-y-1:hover { 57 | transform: translateY(-1px); 58 | } 59 | 60 | .active\:translate-y-1:active { 61 | transform: translateY(1px); 62 | } 63 | 64 | .tippy-tooltip { 65 | @apply p-4 text-left; 66 | } 67 | 68 | @responsive { 69 | .-order-1 { 70 | order: -1; 71 | } 72 | .order-0 { 73 | order: 0; 74 | } 75 | 76 | .order-1 { 77 | order: 1; 78 | } 79 | 80 | .order-2 { 81 | order: 2; 82 | } 83 | } 84 | 85 | .toggle { 86 | @apply relative; 87 | } 88 | 89 | .toggle span, 90 | .toggle span:before, 91 | .toggle span:after { 92 | content: ''; 93 | position: absolute; 94 | height: 2px; 95 | width: 18px; 96 | border-radius: 2px; 97 | background: white; 98 | display: block; 99 | cursor: pointer; 100 | transition: all 0.3s ease-in-out; 101 | right: 0; 102 | } 103 | 104 | .toggle span:before { 105 | top: -6px; 106 | } 107 | 108 | .toggle span:after { 109 | bottom: -6px; 110 | } 111 | 112 | .toggle.open span{ 113 | background-color: transparent; 114 | } 115 | 116 | .toggle.open span:before, 117 | .toggle.open span:after { 118 | top: 0; 119 | } 120 | 121 | .toggle.open span:before { 122 | transform: rotate(45deg); 123 | } 124 | 125 | .toggle.open span:after { 126 | transform: rotate(-45deg); 127 | } 128 | 129 | @tailwind utilities; 130 | -------------------------------------------------------------------------------- /tailwind.js: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | Tailwind - The Utility-First CSS Framework 4 | 5 | A project by Adam Wathan (@adamwathan), Jonathan Reinink (@reinink), 6 | David Hemphill (@davidhemphill) and Steve Schoger (@steveschoger). 7 | 8 | Welcome to the Tailwind config file. This is where you can customize 9 | Tailwind specifically for your project. Don't be intimidated by the 10 | length of this file. It's really just a big JavaScript object and 11 | we've done our very best to explain each section. 12 | 13 | View the full documentation at https://tailwindcss.com. 14 | 15 | 16 | |------------------------------------------------------------------------------- 17 | | The default config 18 | |------------------------------------------------------------------------------- 19 | | 20 | | This variable contains the default Tailwind config. You don't have 21 | | to use it, but it can sometimes be helpful to have available. For 22 | | example, you may choose to merge your custom configuration 23 | | values with some of the Tailwind defaults. 24 | | 25 | */ 26 | 27 | // let defaultConfig = require('tailwindcss/defaultConfig')() 28 | 29 | 30 | /* 31 | |------------------------------------------------------------------------------- 32 | | Colors https://tailwindcss.com/docs/colors 33 | |------------------------------------------------------------------------------- 34 | | 35 | | Here you can specify the colors used in your project. To get you started, 36 | | we've provided a generous palette of great looking colors that are perfect 37 | | for prototyping, but don't hesitate to change them for your project. You 38 | | own these colors, nothing will break if you change everything about them. 39 | | 40 | | We've used literal color names ("red", "blue", etc.) for the default 41 | | palette, but if you'd rather use functional names like "primary" and 42 | | "secondary", or even a numeric scale like "100" and "200", go for it. 43 | | 44 | */ 45 | 46 | let colors = { 47 | 'transparent': 'transparent', 48 | 49 | 'black': '#22292f', 50 | 'grey-darkest': '#3d4852', 51 | 'grey-darker': '#606f7b', 52 | 'grey-dark': '#8795a1', 53 | 'grey': '#b8c2cc', 54 | 'grey-light': '#dae1e7', 55 | 'grey-lighter': '#f1f5f8', 56 | 'grey-lighter-2': '#EAF1F7', 57 | 'grey-lightest': '#f8fafc', 58 | 'white': '#ffffff', 59 | 60 | 'libre-grey': '#C4CDD5', 61 | 'libre-yellow': '#FFC48B', 62 | 'libre-pink': '#FDAC9A', 63 | 64 | 'indigo-darkest': '#191e38', 65 | 'indigo-darker': '#2f365f', 66 | 'indigo-dark': '#5661b3', 67 | 'indigo-medium': '#38406C', 68 | 'indigo': '#6574cd', 69 | 'indigo-light': '#7886d7', 70 | 'indigo-lighter': '#b2b7ff', 71 | 'indigo-lightest': '#e6e8ff', 72 | } 73 | 74 | module.exports = { 75 | 76 | /* 77 | |----------------------------------------------------------------------------- 78 | | Colors https://tailwindcss.com/docs/colors 79 | |----------------------------------------------------------------------------- 80 | | 81 | | The color palette defined above is also assigned to the "colors" key of 82 | | your Tailwind config. This makes it easy to access them in your CSS 83 | | using Tailwind's config helper. For example: 84 | | 85 | | .error { color: config('colors.red') } 86 | | 87 | */ 88 | 89 | colors: colors, 90 | 91 | 92 | /* 93 | |----------------------------------------------------------------------------- 94 | | Screens https://tailwindcss.com/docs/responsive-design 95 | |----------------------------------------------------------------------------- 96 | | 97 | | Screens in Tailwind are translated to CSS media queries. They define the 98 | | responsive breakpoints for your project. By default Tailwind takes a 99 | | "mobile first" approach, where each screen size represents a minimum 100 | | viewport width. Feel free to have as few or as many screens as you 101 | | want, naming them in whatever way you'd prefer for your project. 102 | | 103 | | Tailwind also allows for more complex screen definitions, which can be 104 | | useful in certain situations. Be sure to see the full responsive 105 | | documentation for a complete list of options. 106 | | 107 | | Class name: .{screen}:{utility} 108 | | 109 | */ 110 | 111 | screens: { 112 | 'sm': '576px', 113 | 'md': '768px', 114 | 'lg': '992px', 115 | 'xl': '1200px', 116 | }, 117 | 118 | 119 | /* 120 | |----------------------------------------------------------------------------- 121 | | Fonts https://tailwindcss.com/docs/fonts 122 | |----------------------------------------------------------------------------- 123 | | 124 | | Here is where you define your project's font stack, or font families. 125 | | Keep in mind that Tailwind doesn't actually load any fonts for you. 126 | | If you're using custom fonts you'll need to import them prior to 127 | | defining them here. 128 | | 129 | | By default we provide a native font stack that works remarkably well on 130 | | any device or OS you're using, since it just uses the default fonts 131 | | provided by the platform. 132 | | 133 | | Class name: .font-{name} 134 | | 135 | */ 136 | 137 | fonts: { 138 | 'sans': [ 139 | 'Roboto', 140 | 'sans-serif', 141 | ], 142 | 'serif': [ 143 | 'Constantia', 144 | 'Lucida Bright', 145 | 'Lucidabright', 146 | 'Lucida Serif', 147 | 'Lucida', 148 | 'DejaVu Serif', 149 | 'Bitstream Vera Serif', 150 | 'Liberation Serif', 151 | 'Georgia', 152 | 'serif', 153 | ], 154 | 'mono': [ 155 | 'Menlo', 156 | 'Monaco', 157 | 'Consolas', 158 | 'Liberation Mono', 159 | 'Courier New', 160 | 'monospace', 161 | ] 162 | }, 163 | 164 | 165 | /* 166 | |----------------------------------------------------------------------------- 167 | | Text sizes https://tailwindcss.com/docs/text-sizing 168 | |----------------------------------------------------------------------------- 169 | | 170 | | Here is where you define your text sizes. Name these in whatever way 171 | | makes the most sense to you. We use size names by default, but 172 | | you're welcome to use a numeric scale or even something else 173 | | entirely. 174 | | 175 | | By default Tailwind uses the "rem" unit type for most measurements. 176 | | This allows you to set a root font size which all other sizes are 177 | | then based on. That said, you are free to use whatever units you 178 | | prefer, be it rems, ems, pixels or other. 179 | | 180 | | Class name: .text-{size} 181 | | 182 | */ 183 | 184 | textSizes: { 185 | 'xs': '.75rem', // 12px 186 | 'sm': '.875rem', // 14px 187 | 'base': '1rem', // 16px 188 | 'lg': '1.125rem', // 18px 189 | 'xl': '1.25rem', // 20px 190 | '2xl': '1.5rem', // 24px 191 | '3xl': '1.875rem', // 30px 192 | '4xl': '2.25rem', // 36px 193 | '5xl': '3rem', // 48px 194 | }, 195 | 196 | 197 | /* 198 | |----------------------------------------------------------------------------- 199 | | Font weights https://tailwindcss.com/docs/font-weight 200 | |----------------------------------------------------------------------------- 201 | | 202 | | Here is where you define your font weights. We've provided a list of 203 | | common font weight names with their respective numeric scale values 204 | | to get you started. It's unlikely that your project will require 205 | | all of these, so we recommend removing those you don't need. 206 | | 207 | | Class name: .font-{weight} 208 | | 209 | */ 210 | 211 | fontWeights: { 212 | 'hairline': 100, 213 | 'thin': 200, 214 | 'light': 300, 215 | 'normal': 400, 216 | 'medium': 500, 217 | 'semibold': 600, 218 | 'bold': 700, 219 | 'extrabold': 800, 220 | 'black': 900, 221 | }, 222 | 223 | 224 | /* 225 | |----------------------------------------------------------------------------- 226 | | Leading (line height) https://tailwindcss.com/docs/line-height 227 | |----------------------------------------------------------------------------- 228 | | 229 | | Here is where you define your line height values, or as we call 230 | | them in Tailwind, leadings. 231 | | 232 | | Class name: .leading-{size} 233 | | 234 | */ 235 | 236 | leading: { 237 | 'none': 1, 238 | 'tight': 1.25, 239 | 'normal': 1.5, 240 | 'loose': 2, 241 | 'medium': 1.3, 242 | }, 243 | 244 | 245 | /* 246 | |----------------------------------------------------------------------------- 247 | | Tracking (letter spacing) https://tailwindcss.com/docs/letter-spacing 248 | |----------------------------------------------------------------------------- 249 | | 250 | | Here is where you define your letter spacing values, or as we call 251 | | them in Tailwind, tracking. 252 | | 253 | | Class name: .tracking-{size} 254 | | 255 | */ 256 | 257 | tracking: { 258 | 'tight': '-0.05em', 259 | 'normal': '0', 260 | 'wide': '0.05em', 261 | }, 262 | 263 | 264 | /* 265 | |----------------------------------------------------------------------------- 266 | | Text colors https://tailwindcss.com/docs/text-color 267 | |----------------------------------------------------------------------------- 268 | | 269 | | Here is where you define your text colors. By default these use the 270 | | color palette we defined above, however you're welcome to set these 271 | | independently if that makes sense for your project. 272 | | 273 | | Class name: .text-{color} 274 | | 275 | */ 276 | 277 | textColors: colors, 278 | 279 | 280 | /* 281 | |----------------------------------------------------------------------------- 282 | | Background colors https://tailwindcss.com/docs/background-color 283 | |----------------------------------------------------------------------------- 284 | | 285 | | Here is where you define your background colors. By default these use 286 | | the color palette we defined above, however you're welcome to set 287 | | these independently if that makes sense for your project. 288 | | 289 | | Class name: .bg-{color} 290 | | 291 | */ 292 | 293 | backgroundColors: colors, 294 | 295 | 296 | /* 297 | |----------------------------------------------------------------------------- 298 | | Background sizes https://tailwindcss.com/docs/background-size 299 | |----------------------------------------------------------------------------- 300 | | 301 | | Here is where you define your background sizes. We provide some common 302 | | values that are useful in most projects, but feel free to add other sizes 303 | | that are specific to your project here as well. 304 | | 305 | | Class name: .bg-{size} 306 | | 307 | */ 308 | 309 | backgroundSize: { 310 | 'auto': 'auto', 311 | 'cover': 'cover', 312 | 'contain': 'contain', 313 | }, 314 | 315 | 316 | /* 317 | |----------------------------------------------------------------------------- 318 | | Border widths https://tailwindcss.com/docs/border-width 319 | |----------------------------------------------------------------------------- 320 | | 321 | | Here is where you define your border widths. Take note that border 322 | | widths require a special "default" value set as well. This is the 323 | | width that will be used when you do not specify a border width. 324 | | 325 | | Class name: .border{-side?}{-width?} 326 | | 327 | */ 328 | 329 | borderWidths: { 330 | default: '1px', 331 | '0': '0', 332 | '2': '2px', 333 | '4': '4px', 334 | '8': '8px', 335 | }, 336 | 337 | 338 | /* 339 | |----------------------------------------------------------------------------- 340 | | Border colors https://tailwindcss.com/docs/border-color 341 | |----------------------------------------------------------------------------- 342 | | 343 | | Here is where you define your border colors. By default these use the 344 | | color palette we defined above, however you're welcome to set these 345 | | independently if that makes sense for your project. 346 | | 347 | | Take note that border colors require a special "default" value set 348 | | as well. This is the color that will be used when you do not 349 | | specify a border color. 350 | | 351 | | Class name: .border-{color} 352 | | 353 | */ 354 | 355 | borderColors: global.Object.assign({ default: colors['grey-light'] }, colors), 356 | 357 | 358 | /* 359 | |----------------------------------------------------------------------------- 360 | | Border radius https://tailwindcss.com/docs/border-radius 361 | |----------------------------------------------------------------------------- 362 | | 363 | | Here is where you define your border radius values. If a `default` radius 364 | | is provided, it will be made available as the non-suffixed `.rounded` 365 | | utility. 366 | | 367 | | If your scale includes a `0` value to reset already rounded corners, it's 368 | | a good idea to put it first so other values are able to override it. 369 | | 370 | | Class name: .rounded{-side?}{-size?} 371 | | 372 | */ 373 | 374 | borderRadius: { 375 | 'none': '0', 376 | 'sm': '.125rem', 377 | default: '.25rem', 378 | 'lg': '.5rem', 379 | 'full': '9999px', 380 | }, 381 | 382 | 383 | /* 384 | |----------------------------------------------------------------------------- 385 | | Width https://tailwindcss.com/docs/width 386 | |----------------------------------------------------------------------------- 387 | | 388 | | Here is where you define your width utility sizes. These can be 389 | | percentage based, pixels, rems, or any other units. By default 390 | | we provide a sensible rem based numeric scale, a percentage 391 | | based fraction scale, plus some other common use-cases. You 392 | | can, of course, modify these values as needed. 393 | | 394 | | 395 | | It's also worth mentioning that Tailwind automatically escapes 396 | | invalid CSS class name characters, which allows you to have 397 | | awesome classes like .w-2/3. 398 | | 399 | | Class name: .w-{size} 400 | | 401 | */ 402 | 403 | width: { 404 | 'auto': 'auto', 405 | 'px': '1px', 406 | '1': '0.25rem', 407 | '2': '0.5rem', 408 | '3': '0.75rem', 409 | '4': '1rem', 410 | '5': '1.25rem', 411 | '6': '1.5rem', 412 | '8': '2rem', 413 | '10': '2.5rem', 414 | '12': '3rem', 415 | '16': '4rem', 416 | '24': '6rem', 417 | '32': '8rem', 418 | '48': '12rem', 419 | '64': '16rem', 420 | '1/2': '50%', 421 | '1/3': '33.33333%', 422 | '2/3': '66.66667%', 423 | '1/4': '25%', 424 | '3/4': '75%', 425 | '1/5': '20%', 426 | '2/5': '40%', 427 | '3/5': '60%', 428 | '4/5': '80%', 429 | '1/6': '16.66667%', 430 | '5/6': '83.33333%', 431 | 'full': '100%', 432 | 'screen': '100vw' 433 | }, 434 | 435 | 436 | /* 437 | |----------------------------------------------------------------------------- 438 | | Height https://tailwindcss.com/docs/height 439 | |----------------------------------------------------------------------------- 440 | | 441 | | Here is where you define your height utility sizes. These can be 442 | | percentage based, pixels, rems, or any other units. By default 443 | | we provide a sensible rem based numeric scale plus some other 444 | | common use-cases. You can, of course, modify these values as 445 | | needed. 446 | | 447 | | Class name: .h-{size} 448 | | 449 | */ 450 | 451 | height: { 452 | 'auto': 'auto', 453 | 'px': '1px', 454 | '1': '0.25rem', 455 | '2': '0.5rem', 456 | '3': '0.75rem', 457 | '4': '1rem', 458 | '5': '1.25rem', 459 | '6': '1.5rem', 460 | '8': '2rem', 461 | '10': '2.5rem', 462 | '12': '3rem', 463 | '16': '4rem', 464 | '24': '6rem', 465 | '32': '8rem', 466 | '48': '12rem', 467 | '64': '16rem', 468 | 'full': '100%', 469 | 'screen': '100vh' 470 | }, 471 | 472 | 473 | /* 474 | |----------------------------------------------------------------------------- 475 | | Minimum width https://tailwindcss.com/docs/min-width 476 | |----------------------------------------------------------------------------- 477 | | 478 | | Here is where you define your minimum width utility sizes. These can 479 | | be percentage based, pixels, rems, or any other units. We provide a 480 | | couple common use-cases by default. You can, of course, modify 481 | | these values as needed. 482 | | 483 | | Class name: .min-w-{size} 484 | | 485 | */ 486 | 487 | minWidth: { 488 | '0': '0', 489 | 'full': '100%', 490 | }, 491 | 492 | 493 | /* 494 | |----------------------------------------------------------------------------- 495 | | Minimum height https://tailwindcss.com/docs/min-height 496 | |----------------------------------------------------------------------------- 497 | | 498 | | Here is where you define your minimum height utility sizes. These can 499 | | be percentage based, pixels, rems, or any other units. We provide a 500 | | few common use-cases by default. You can, of course, modify these 501 | | values as needed. 502 | | 503 | | Class name: .min-h-{size} 504 | | 505 | */ 506 | 507 | minHeight: { 508 | '0': '0', 509 | 'full': '100%', 510 | 'screen': '100vh' 511 | }, 512 | 513 | 514 | /* 515 | |----------------------------------------------------------------------------- 516 | | Maximum width https://tailwindcss.com/docs/max-width 517 | |----------------------------------------------------------------------------- 518 | | 519 | | Here is where you define your maximum width utility sizes. These can 520 | | be percentage based, pixels, rems, or any other units. By default 521 | | we provide a sensible rem based scale and a "full width" size, 522 | | which is basically a reset utility. You can, of course, 523 | | modify these values as needed. 524 | | 525 | | Class name: .max-w-{size} 526 | | 527 | */ 528 | 529 | maxWidth: { 530 | 'xs': '20rem', 531 | 'sm': '30rem', 532 | 'md': '40rem', 533 | 'lg': '50rem', 534 | 'xl': '60rem', 535 | '2xl': '70rem', 536 | '3xl': '80rem', 537 | '4xl': '90rem', 538 | '5xl': '100rem', 539 | 'full': '100%', 540 | 'tiny': '7rem', 541 | }, 542 | 543 | 544 | /* 545 | |----------------------------------------------------------------------------- 546 | | Maximum height https://tailwindcss.com/docs/max-height 547 | |----------------------------------------------------------------------------- 548 | | 549 | | Here is where you define your maximum height utility sizes. These can 550 | | be percentage based, pixels, rems, or any other units. We provide a 551 | | couple common use-cases by default. You can, of course, modify 552 | | these values as needed. 553 | | 554 | | Class name: .max-h-{size} 555 | | 556 | */ 557 | 558 | maxHeight: { 559 | 'full': '100%', 560 | 'screen': '100vh', 561 | }, 562 | 563 | 564 | /* 565 | |----------------------------------------------------------------------------- 566 | | Padding https://tailwindcss.com/docs/padding 567 | |----------------------------------------------------------------------------- 568 | | 569 | | Here is where you define your padding utility sizes. These can be 570 | | percentage based, pixels, rems, or any other units. By default we 571 | | provide a sensible rem based numeric scale plus a couple other 572 | | common use-cases like "1px". You can, of course, modify these 573 | | values as needed. 574 | | 575 | | Class name: .p{side?}-{size} 576 | | 577 | */ 578 | 579 | padding: { 580 | 'px': '1px', 581 | '0': '0', 582 | '1': '0.25rem', 583 | '2': '0.5rem', 584 | '3': '0.75rem', 585 | '4': '1rem', 586 | '5': '1.25rem', 587 | '6': '1.5rem', 588 | '8': '2rem', 589 | '10': '2.5rem', 590 | '12': '3rem', 591 | '16': '4rem', 592 | '20': '5rem', 593 | '24': '6rem', 594 | '32': '8rem', 595 | '1/2': '.15rem', 596 | }, 597 | 598 | 599 | /* 600 | |----------------------------------------------------------------------------- 601 | | Margin https://tailwindcss.com/docs/margin 602 | |----------------------------------------------------------------------------- 603 | | 604 | | Here is where you define your margin utility sizes. These can be 605 | | percentage based, pixels, rems, or any other units. By default we 606 | | provide a sensible rem based numeric scale plus a couple other 607 | | common use-cases like "1px". You can, of course, modify these 608 | | values as needed. 609 | | 610 | | Class name: .m{side?}-{size} 611 | | 612 | */ 613 | 614 | margin: { 615 | 'auto': 'auto', 616 | 'px': '1px', 617 | '0': '0', 618 | '1': '0.25rem', 619 | '2': '0.5rem', 620 | '3': '0.75rem', 621 | '4': '1rem', 622 | '5': '1.25rem', 623 | '6': '1.5rem', 624 | '8': '2rem', 625 | '10': '2.5rem', 626 | '12': '3rem', 627 | '16': '4rem', 628 | '20': '5rem', 629 | '24': '6rem', 630 | '32': '8rem', 631 | }, 632 | 633 | 634 | /* 635 | |----------------------------------------------------------------------------- 636 | | Negative margin https://tailwindcss.com/docs/negative-margin 637 | |----------------------------------------------------------------------------- 638 | | 639 | | Here is where you define your negative margin utility sizes. These can 640 | | be percentage based, pixels, rems, or any other units. By default we 641 | | provide matching values to the padding scale since these utilities 642 | | generally get used together. You can, of course, modify these 643 | | values as needed. 644 | | 645 | | Class name: .-m{side?}-{size} 646 | | 647 | */ 648 | 649 | negativeMargin: { 650 | 'px': '1px', 651 | '0': '0', 652 | '1': '0.25rem', 653 | '2': '0.5rem', 654 | '3': '0.75rem', 655 | '4': '1rem', 656 | '5': '1.25rem', 657 | '6': '1.5rem', 658 | '8': '2rem', 659 | '10': '2.5rem', 660 | '12': '3rem', 661 | '16': '4rem', 662 | '20': '5rem', 663 | '24': '6rem', 664 | '32': '8rem', 665 | }, 666 | 667 | 668 | /* 669 | |----------------------------------------------------------------------------- 670 | | Shadows https://tailwindcss.com/docs/shadows 671 | |----------------------------------------------------------------------------- 672 | | 673 | | Here is where you define your shadow utilities. As you can see from 674 | | the defaults we provide, it's possible to apply multiple shadows 675 | | per utility using comma separation. 676 | | 677 | | If a `default` shadow is provided, it will be made available as the non- 678 | | suffixed `.shadow` utility. 679 | | 680 | | Class name: .shadow-{size?} 681 | | 682 | */ 683 | 684 | shadows: { 685 | default: '0 2px 4px 0 rgba(0,0,0,0.10)', 686 | 'md': '0 4px 8px 0 rgba(0,0,0,0.12), 0 2px 4px 0 rgba(0,0,0,0.08)', 687 | 'lg': '0 15px 30px 0 rgba(0,0,0,0.11), 0 5px 15px 0 rgba(0,0,0,0.08)', 688 | 'inner': 'inset 0 2px 4px 0 rgba(0,0,0,0.06)', 689 | 'outline': '0 0 0 3px rgba(52,144,220,0.5)', 690 | 'none': 'none', 691 | }, 692 | 693 | 694 | /* 695 | |----------------------------------------------------------------------------- 696 | | Z-index https://tailwindcss.com/docs/z-index 697 | |----------------------------------------------------------------------------- 698 | | 699 | | Here is where you define your z-index utility values. By default we 700 | | provide a sensible numeric scale. You can, of course, modify these 701 | | values as needed. 702 | | 703 | | Class name: .z-{index} 704 | | 705 | */ 706 | 707 | zIndex: { 708 | 'auto': 'auto', 709 | '0': 0, 710 | '10': 10, 711 | '20': 20, 712 | '30': 30, 713 | '40': 40, 714 | '50': 50, 715 | }, 716 | 717 | 718 | /* 719 | |----------------------------------------------------------------------------- 720 | | Opacity https://tailwindcss.com/docs/opacity 721 | |----------------------------------------------------------------------------- 722 | | 723 | | Here is where you define your opacity utility values. By default we 724 | | provide a sensible numeric scale. You can, of course, modify these 725 | | values as needed. 726 | | 727 | | Class name: .opacity-{name} 728 | | 729 | */ 730 | 731 | opacity: { 732 | '0': '0', 733 | '25': '.25', 734 | '50': '.5', 735 | '75': '.75', 736 | '100': '1', 737 | }, 738 | 739 | 740 | /* 741 | |----------------------------------------------------------------------------- 742 | | SVG fill https://tailwindcss.com/docs/svg 743 | |----------------------------------------------------------------------------- 744 | | 745 | | Here is where you define your SVG fill colors. By default we just provide 746 | | `fill-current` which sets the fill to the current text color. This lets you 747 | | specify a fill color using existing text color utilities and helps keep the 748 | | generated CSS file size down. 749 | | 750 | | Class name: .fill-{name} 751 | | 752 | */ 753 | 754 | svgFill: { 755 | 'current': 'currentColor', 756 | }, 757 | 758 | 759 | /* 760 | |----------------------------------------------------------------------------- 761 | | SVG stroke https://tailwindcss.com/docs/svg 762 | |----------------------------------------------------------------------------- 763 | | 764 | | Here is where you define your SVG stroke colors. By default we just provide 765 | | `stroke-current` which sets the stroke to the current text color. This lets 766 | | you specify a stroke color using existing text color utilities and helps 767 | | keep the generated CSS file size down. 768 | | 769 | | Class name: .stroke-{name} 770 | | 771 | */ 772 | 773 | svgStroke: { 774 | 'current': 'currentColor', 775 | }, 776 | 777 | 778 | /* 779 | |----------------------------------------------------------------------------- 780 | | Modules https://tailwindcss.com/docs/configuration#modules 781 | |----------------------------------------------------------------------------- 782 | | 783 | | Here is where you control which modules are generated and what variants are 784 | | generated for each of those modules. 785 | | 786 | | Currently supported variants: 787 | | - responsive 788 | | - hover 789 | | - focus 790 | | - active 791 | | - group-hover 792 | | 793 | | To disable a module completely, use `false` instead of an array. 794 | | 795 | */ 796 | 797 | modules: { 798 | appearance: ['responsive'], 799 | backgroundAttachment: ['responsive'], 800 | backgroundColors: ['responsive', 'hover', 'focus'], 801 | backgroundPosition: ['responsive'], 802 | backgroundRepeat: ['responsive'], 803 | backgroundSize: ['responsive'], 804 | borderCollapse: [], 805 | borderColors: ['responsive', 'hover', 'focus'], 806 | borderRadius: ['responsive'], 807 | borderStyle: ['responsive'], 808 | borderWidths: ['responsive', 'hover'], 809 | cursor: ['responsive', 'hover'], 810 | display: ['responsive'], 811 | flexbox: ['responsive'], 812 | float: ['responsive'], 813 | fonts: ['responsive'], 814 | fontWeights: ['responsive', 'hover', 'focus'], 815 | height: ['responsive'], 816 | leading: ['responsive'], 817 | lists: ['responsive'], 818 | margin: ['responsive'], 819 | maxHeight: ['responsive'], 820 | maxWidth: ['responsive'], 821 | minHeight: ['responsive'], 822 | minWidth: ['responsive'], 823 | negativeMargin: ['responsive'], 824 | opacity: ['responsive'], 825 | outline: ['focus'], 826 | overflow: ['responsive'], 827 | padding: ['responsive'], 828 | pointerEvents: ['responsive'], 829 | position: ['responsive'], 830 | resize: ['responsive'], 831 | shadows: ['responsive', 'hover', 'focus'], 832 | svgFill: [], 833 | svgStroke: [], 834 | tableLayout: ['responsive'], 835 | textAlign: ['responsive'], 836 | textColors: ['responsive', 'hover', 'focus'], 837 | textSizes: ['responsive'], 838 | textStyle: ['responsive', 'hover', 'focus'], 839 | tracking: ['responsive'], 840 | userSelect: ['responsive'], 841 | verticalAlign: ['responsive'], 842 | visibility: ['responsive'], 843 | whitespace: ['responsive'], 844 | width: ['responsive'], 845 | zIndex: ['responsive'], 846 | }, 847 | 848 | 849 | /* 850 | |----------------------------------------------------------------------------- 851 | | Plugins https://tailwindcss.com/docs/plugins 852 | |----------------------------------------------------------------------------- 853 | | 854 | | Here is where you can register any plugins you'd like to use in your 855 | | project. Tailwind's built-in `container` plugin is enabled by default to 856 | | give you a Bootstrap-style responsive container component out of the box. 857 | | 858 | | Be sure to view the complete plugin documentation to learn more about how 859 | | the plugin system works. 860 | | 861 | */ 862 | 863 | plugins: [ 864 | require('tailwindcss/plugins/container')({ 865 | // center: true, 866 | // padding: '1rem', 867 | }), 868 | ], 869 | 870 | 871 | /* 872 | |----------------------------------------------------------------------------- 873 | | Advanced Options https://tailwindcss.com/docs/configuration#options 874 | |----------------------------------------------------------------------------- 875 | | 876 | | Here is where you can tweak advanced configuration options. We recommend 877 | | leaving these options alone unless you absolutely need to change them. 878 | | 879 | */ 880 | 881 | options: { 882 | prefix: '', 883 | important: false, 884 | separator: ':', 885 | }, 886 | 887 | } 888 | --------------------------------------------------------------------------------