-
-
Notifications
You must be signed in to change notification settings - Fork 61
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Revert "turns project into an 11ty app"
This reverts commit 8be8a3d.
- Loading branch information
Showing
63 changed files
with
1,711 additions
and
4,779 deletions.
There are no files selected for viewing
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,133 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <!-- Google tag (gtag.js) --> | ||
| <script async src="https://www.googletagmanager.com/gtag/js?id=G-GNR8WM6SC0"></script> | ||
| <script> | ||
| window.dataLayer = window.dataLayer || []; | ||
| function gtag(){dataLayer.push(arguments);} | ||
| gtag('js', new Date()); | ||
|
|
||
| gtag('config', 'G-GNR8WM6SC0'); | ||
| </script> | ||
| <meta charset="UTF-8"> | ||
| <meta name="description" content="Easily make tints and shades that match the output of Chrome DevTools, Sass, Less, and PostCSS."> | ||
| <meta name="author" content="Michael Edelstone"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
| <title>404 | Tint and Shade Generator</title> | ||
| <meta name="title" content="Tint and Shade Generator"> | ||
| <link rel="canonical" href="https://maketintsandshades.com/404"> | ||
| <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> | ||
| <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> | ||
| <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> | ||
| <link rel="manifest" href="/site.webmanifest"> | ||
| <meta name="msapplication-TileColor" content="#2b5797"> | ||
| <meta name="theme-color" content="#fff" media="(prefers-color-scheme: light)"> | ||
| <meta name="theme-color" content="#1a1a1a" media="(prefers-color-scheme: dark)"> | ||
| <meta property="og:type" content="website"> | ||
| <meta property="og:url" content="https://maketintsandshades.com/"> | ||
| <meta property="og:title" content="Tint and Shade Generator"> | ||
| <meta property="og:description" content="Easily make tints and shades that match the output of Chrome DevTools, Sass, Less, and PostCSS."> | ||
| <meta property="og:image" content="https://maketintsandshades.com/images/og-image.jpg"> | ||
| <meta name="twitter:card" content="summary_large_image"> | ||
| <meta name="twitter:url" content="https://maketintsandshades.com/"> | ||
| <meta name="twitter:title" content="Tint and Shade Generator"> | ||
| <meta name="twitter:description" content="Easily make tints and shades that match the output of Chrome DevTools, Sass, Less, and PostCSS."> | ||
| <meta name="twitter:image" content="https://maketintsandshades.com/images/og-image.jpg"> | ||
| <link rel="stylesheet" href="/css/normalize.css"> | ||
| <link rel="stylesheet" href="/css/fonts.css"> | ||
| <link rel="stylesheet" href="/css/main.css"> | ||
| <link rel="stylesheet" href="/css/dark.css"> | ||
| <link rel="stylesheet" href="/css/carbon-alt.css"> | ||
| <script> </script> <!-- Empty script tag fixes Chromimum bug where transitions fire on page load: https://bugs.chromium.org/p/chromium/issues/detail?id=1404365 --> | ||
| </head> | ||
|
|
||
| <body> | ||
|
|
||
| <a href="#main-content" class="offscreen">Jump to main content</a> | ||
|
|
||
| <div class="dark-mode"> | ||
| <label for="darkmode-toggle" class="switch" tabindex="0"> | ||
| <input id="darkmode-toggle" class="darkmode-toggle" type="checkbox" tabindex="-1"> | ||
| <span class="control"></span> | ||
| <span class="label" id="darkmode-text-toggle">Go dark</span> | ||
| </label> | ||
| </div> | ||
|
|
||
| <a href="https://github.com/edelstone/tints-and-shades" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#000; color:#fff;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a> | ||
|
|
||
| <div class="ts-wrapper"> | ||
|
|
||
| <header class="ts-header"> | ||
| <div class="ts-headline"> | ||
| <h1><a href="/">Tint & Shade Generator</a></h1> | ||
| <div class="ts-ad item-ads ts-ad-secondary"> | ||
| <script async src="//cdn.carbonads.com/carbon.js?serve=CE7DP5QY&placement=maketintsandshadescom" id="_carbonads_js"></script> | ||
| </div> | ||
| </div> | ||
| </header> | ||
|
|
||
| <main id="main-content" class="ts-content"> | ||
|
|
||
| <div class="not-found"> | ||
| <h2>404</h2> | ||
| <p>This page doesn't exist or has been moved.</p> | ||
| </div> | ||
|
|
||
| </main> | ||
|
|
||
| <footer class="ts-footer"> | ||
| <p><a href="/about">About</a><a href="/about#support-this-project">Support this project</a><p> | ||
| </footer> | ||
|
|
||
| </div> | ||
|
|
||
| <script src="/scripts/darken.js"></script> | ||
| <script> | ||
| // Get the checkbox element from DOM. | ||
| let darkmodeToggle = document.getElementById('darkmode-toggle'); | ||
| let darkModeTextToggle = document.getElementById("darkmode-text-toggle"); | ||
|
|
||
|
|
||
| // Set options. | ||
| const darkmodeOptions = { | ||
| class: "darkmode-active", | ||
| /* Add here any option but do not use the toggle | ||
| option as you manually added an event listener. */ | ||
| } | ||
|
|
||
| // Instantiate darken with options and callback. | ||
| const darkmode = new darken(darkmodeOptions, active => { | ||
| // If darkmode is active then check the checkbox. | ||
| if(active){ | ||
| darkmodeToggle.checked = active; | ||
| darkModeTextToggle.innerText="Go bright"; | ||
| }else{ | ||
| darkModeTextToggle.innerText="Go dark"; | ||
|
|
||
| } | ||
|
|
||
|
|
||
| // Same as | ||
| // if (active) darkmodeToggle.checked = true; | ||
| // else darkmodeToggle.checked = false; | ||
| }); | ||
|
|
||
| // Add event listener on checkbox click. | ||
| darkmodeToggle.addEventListener('click', () => { | ||
| // Depending on the state of the checkbox, call the on/off methods. | ||
| if (darkmodeToggle.checked){ | ||
| darkmode.on(); | ||
| darkModeTextToggle.innerText="Go bright"; | ||
|
|
||
| } | ||
| else{ | ||
| darkmode.off(); | ||
| darkModeTextToggle.innerText="Go dark"; | ||
|
|
||
| } | ||
| }); | ||
| </script> | ||
| </body> | ||
|
|
||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,4 +1,4 @@ | ||
| # [<img src="icon.svg" width="25px" />](https://maketintsandshades.com) [Tint & Shade Generator](https://maketintsandshades.com) | ||
| # [<img src="https://maketintsandshades.com/favicon.ico" width="25px" />](https://maketintsandshades.com) [Tint & Shade Generator](https://maketintsandshades.com) | ||
|
|
||
| <a href="https://maketintsandshades.com"> | ||
| <picture> | ||
|
|
@@ -12,7 +12,7 @@ | |
| <picture> | ||
| <source media="(prefers-color-scheme: dark)" srcset="images/colors-dark.png" /> | ||
| <source media="(prefers-color-scheme: light)" srcset="images/colors-light.png" /> | ||
| <img alt="Screenshot of color swatches after submitting form" src="images/colors-light.png" /> | ||
| <img alt="Screenshot of app home page" src="images/colors-light.png" /> | ||
| </picture> | ||
| </a> | ||
|
|
||
|
|
@@ -24,6 +24,7 @@ It takes the math seriously. In my experience similar tools get the calculation | |
|
|
||
| Testing shows that the output matches Chrome DevTools' calculation method as well as some [established](https://css-tricks.com/snippets/sass/tint-shade-functions), [popular](https://sindresorhus.com/sass-extras/#color-function-tint) methods to derive tints and shades via Sass. | ||
|
|
||
|
|
||
| ## When would I use this? | ||
| It's best used when you already have some base colors but would like complimentary colors for gradients, borders, backgrounds, shadows or other elements. | ||
|
|
||
|
|
@@ -59,20 +60,10 @@ Let's say we want tints and shades of [Rebecca Purple](https://meyerweb.com/eric | |
| ## Feedback and contributing | ||
| This project is open source and I'd love your help! | ||
|
|
||
| If you notice a bug or want a feature added please [file an issue on GitHub](https://github.com/edelstone/tints-and-shades/issues/new). If you don't have a GitHub account, just [email me](mailto:[email protected]) the details. | ||
| If you notice a bug or want a feature added please [file an issue on GitHub](https://github.com/edelstone/tints-and-shades/issues/new). If you don't have an account there, just [email me](mailto:[email protected]) the details. | ||
|
|
||
| If you're a developer and want to help with the project, please comment on [open issues](https://github.com/edelstone/tints-and-shades/issues) or create a new one and communicate your intentions. Once we agree on a path forward you can just make a pull request and take it to the finish line. | ||
|
|
||
| ## Local Development | ||
|
|
||
| *Prerequisites: Node.js 14+* | ||
|
|
||
| 1. Clone this project. | ||
| 1. Navigate to the project in your terminal. | ||
| 1. Install dependencies: `npm install`. | ||
| 1. Start the server: `npm start`. | ||
| 1. Navigate to [localhost:8080](http://localhost:8080/) in your browser. | ||
|
|
||
| ## Support this project | ||
| The Tint & Shade Generator will always be free but your support is greatly appreciated. | ||
|
|
||
|
|
@@ -86,14 +77,36 @@ The Tint & Shade Generator will always be free but your support is greatly appre | |
|
|
||
| We use these amazing open-source libraries across the project: | ||
|
|
||
| - [11ty](https://github.com/11ty/eleventy) | ||
| - [Darken](https://github.com/ColinEspinas/darken) | ||
| - [clipboard.js](https://github.com/zenorocha/clipboard.js) | ||
| - [Darken](https://colinespinas.github.io/darken/) | ||
| - [clipboard.js](https://clipboardjs.com/) | ||
| - [jQuery](https://jquery.com/) | ||
|
|
||
| Many thanks to [Joel Carr](https://github.com/joelcarr), [Sebastian Gutierrez](https://github.com/pepas24), [Tim Scalzo](https://github.com/TJScalzo), [Aman Agarwal](https://github.com/AmanAgarwal041), [Aleksandr Hovhannisyan](https://github.com/AleksandrHovhannisyan), [Shubhendu Sen](https://github.com/Sen-442b), and [Luis Escarrilla](https://github.com/latesc) for their valuable contributions. | ||
|
|
||
| ## Other details | ||
| - Typography: [Work Sans](https://weiweihuanghuang.github.io/Work-Sans/) by Wei Huang</li> | ||
| - Colors: [#000000](https://maketintsandshades.com/#000000), [#ffffff](https://maketintsandshades.com/#ffffff), [#e96443](https://maketintsandshades.com/#e96443), and [#ca228e](https://maketintsandshades.com/#ca228e) | ||
| - Privacy: We use Google Analytics to record basic information about your visit. This is strictly to improve the application and understand a bit about the people who use it. | ||
| - Like Google's Material Design? Try [this other thing I made](https://materialpalettes.com). | ||
| - Privacy: We use Google Analytics to record basic information about your visit strictly to improve the application and understand the people who use it. | ||
| - Like Google's Material Design? Try [this other thing I made](https://materialpalettes.com). | ||
|
|
||
| ## Stats | ||
|
|
||
| ### Lighthouse | ||
|
|
||
| <a title="Click to see full Lighthouse report" href="https://maketintsandshades.com/lighthouse"> | ||
| <picture> | ||
| <source media="(prefers-color-scheme: dark)" srcset="images/lighthouse-dark.png" /> | ||
| <source media="(prefers-color-scheme: light)" srcset="images/lighthouse-light.png" /> | ||
| <img alt="Perfect score on Lighthouse" src="images/lighthouse-light.png" /> | ||
| </picture> | ||
| </a> | ||
|
|
||
| ### Star history | ||
|
|
||
| <a title="Click to see star history" href="https://star-history.com/#edelstone/tints-and-shades&Date"> | ||
| <picture> | ||
| <source media="(prefers-color-scheme: dark)" srcset="https://api.star-history.com/svg?repos=edelstone/tints-and-shades&type=Date&theme=dark" /> | ||
| <source media="(prefers-color-scheme: light)" srcset="https://api.star-history.com/svg?repos=edelstone/tints-and-shades&type=Date" /> | ||
| <img alt="Star History Chart" src="https://api.star-history.com/svg?repos=edelstone/tints-and-shades&type=Date" /> | ||
| </picture> | ||
| </a> | ||
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
Oops, something went wrong.