├── .gitignore ├── README.md ├── _img ├── android-chrome-192x192.png ├── android-chrome-384x384.png ├── apple-touch-icon.png ├── favicon-16x16.png ├── favicon-32x32.png ├── favicon.ico ├── me.jpg ├── safari-pinned-tab.svg └── screenshots │ ├── antiweather.png │ ├── clippy.png │ ├── copypastelist.png │ ├── csscreatures.png │ ├── csspiechart.png │ ├── cssscales.png │ ├── flexplorer.png │ ├── genesis.jpg │ ├── gradients.png │ ├── imageeffects.png │ ├── mapsfortheweb.jpg │ ├── openbrainproject.png │ ├── plaintextlist.png │ ├── soteriaradar.jpg │ ├── tiny │ ├── antiweather.jpg │ ├── clippy.jpg │ ├── copypastelist.jpg │ ├── csscreatures.jpg │ ├── csspiechart.jpg │ ├── cssscales.jpg │ ├── flexplorer.jpg │ ├── genesis.jpg │ ├── gradients.jpg │ ├── imageeffects.jpg │ ├── mapsfortheweb.jpg │ ├── openbrainproject.jpg │ ├── plaintextlist.jpg │ ├── soteriaradar.jpg │ ├── usa2200.jpg │ ├── usacss.jpg │ └── ztext.jpg │ ├── usa2200.png │ ├── usacss.png │ └── ztext.png ├── _redirects ├── _src ├── index.slim └── scss │ ├── partials │ ├── _extensions.scss │ ├── _functions.scss │ ├── _normalize.scss │ ├── _palette.scss │ └── _reset.scss │ └── style.scss ├── gulpfile.js ├── index.html ├── package-lock.json ├── package.json └── style.min.css /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | .sass-cache 3 | .sass-cache/* 4 | .Trashes 5 | node_modules 6 | npm-debug.log -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Bennett Feely 2 | 3 | This repo is now solely my personal homepage at https://bennettfeely.com 4 | 5 | ## Projects 6 | 7 | Projects were previously in subfolders in this one repo (which is why this repo has so many stars). 8 | 9 | Each project is now in its own respective repo. Give 'em a star! 10 | 11 | | Repo link | Live demo | Description | 12 | | :------------------------------------------------------------- | :--------------------------------------------- | :---------------------------------------------- | 13 | | [antiweather](https://github.com/bennettfeely/antiweather) | [Live](https://bennettfeely.com/antiweather) | See the weather at the opposite point on Earth | 14 | | [clippy](https://github.com/bennettfeely/clippy) | [Live](https://bennettfeely.com/clippy) | Shape up your website with CSS clip-paths | 15 | | [csscreatures](https://github.com/bennettfeely/csscreatures) | [Live](https://bennettfeely.com/csscreatures) | Make a creature by tweeting to @csscreatures | 16 | | [csspiechart](https://github.com/bennettfeely/csspiechart) | [Live](https://bennettfeely.com/csspiechart) | Generate a pie chart with CSS conic gradients | 17 | | [flexplorer](https://github.com/bennettfeely/flexplorer) | [Live](https://bennettfeely.com/flexplorer) | CSS flexible box model explorer | 18 | | [gradients](https://github.com/bennettfeely/gradients) | [Live](https://bennettfeely.com/gradients) | CSS gradients with background-blend-mode | 19 | | [image-effects](https://github.com/bennettfeely/image-effects) | [Live](https://bennettfeely.com/image-effects) | Complex image effects with CSS | 20 | | [scales](https://github.com/bennettfeely/scales) | [Live](https://bennettfeely.com/scales) | Color scales reproduced as CSS gradients | 21 | | [trumptalk](https://github.com/bennettfeely/trumptalk) | [Live](https://bennettfeely.com/trumptalk) | Generate a President Trump Inaugural Address | 22 | | [usa-css](https://github.com/bennettfeely/usa-css) | [Live](https://bennettfeely.com/usacss) | The most American CSS stylesheet | 23 | | [usa-2200](https://github.com/bennettfeely/usa-2200) | [Live](https://usa2200.netlify.app/) | Retro simulation of America | 24 | | [youtubedecade](https://github.com/bennettfeely/youtubedecade) | [Live](https://bennettfeely.com/youtubedecade) | Most-viewed videos posted exactly 10 years ago. | 25 | | [ztext](https://github.com/bennettfeely/ztext) | [Live](https://bennettfeely.com/ztext) | Easy to implement, 3D typography for the web. | 26 | -------------------------------------------------------------------------------- /_img/android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bennettfeely/bennett/bde16596e80c5d0d512a9b9d08fe9fa1e6bf8c96/_img/android-chrome-192x192.png -------------------------------------------------------------------------------- /_img/android-chrome-384x384.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bennettfeely/bennett/bde16596e80c5d0d512a9b9d08fe9fa1e6bf8c96/_img/android-chrome-384x384.png -------------------------------------------------------------------------------- /_img/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bennettfeely/bennett/bde16596e80c5d0d512a9b9d08fe9fa1e6bf8c96/_img/apple-touch-icon.png -------------------------------------------------------------------------------- /_img/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bennettfeely/bennett/bde16596e80c5d0d512a9b9d08fe9fa1e6bf8c96/_img/favicon-16x16.png -------------------------------------------------------------------------------- /_img/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bennettfeely/bennett/bde16596e80c5d0d512a9b9d08fe9fa1e6bf8c96/_img/favicon-32x32.png -------------------------------------------------------------------------------- /_img/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bennettfeely/bennett/bde16596e80c5d0d512a9b9d08fe9fa1e6bf8c96/_img/favicon.ico -------------------------------------------------------------------------------- /_img/me.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bennettfeely/bennett/bde16596e80c5d0d512a9b9d08fe9fa1e6bf8c96/_img/me.jpg -------------------------------------------------------------------------------- /_img/screenshots/antiweather.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bennettfeely/bennett/bde16596e80c5d0d512a9b9d08fe9fa1e6bf8c96/_img/screenshots/antiweather.png -------------------------------------------------------------------------------- /_img/screenshots/clippy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bennettfeely/bennett/bde16596e80c5d0d512a9b9d08fe9fa1e6bf8c96/_img/screenshots/clippy.png -------------------------------------------------------------------------------- /_img/screenshots/copypastelist.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bennettfeely/bennett/bde16596e80c5d0d512a9b9d08fe9fa1e6bf8c96/_img/screenshots/copypastelist.png -------------------------------------------------------------------------------- /_img/screenshots/csscreatures.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bennettfeely/bennett/bde16596e80c5d0d512a9b9d08fe9fa1e6bf8c96/_img/screenshots/csscreatures.png -------------------------------------------------------------------------------- /_img/screenshots/csspiechart.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bennettfeely/bennett/bde16596e80c5d0d512a9b9d08fe9fa1e6bf8c96/_img/screenshots/csspiechart.png -------------------------------------------------------------------------------- /_img/screenshots/cssscales.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bennettfeely/bennett/bde16596e80c5d0d512a9b9d08fe9fa1e6bf8c96/_img/screenshots/cssscales.png -------------------------------------------------------------------------------- /_img/screenshots/flexplorer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bennettfeely/bennett/bde16596e80c5d0d512a9b9d08fe9fa1e6bf8c96/_img/screenshots/flexplorer.png -------------------------------------------------------------------------------- /_img/screenshots/genesis.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bennettfeely/bennett/bde16596e80c5d0d512a9b9d08fe9fa1e6bf8c96/_img/screenshots/genesis.jpg -------------------------------------------------------------------------------- /_img/screenshots/gradients.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bennettfeely/bennett/bde16596e80c5d0d512a9b9d08fe9fa1e6bf8c96/_img/screenshots/gradients.png -------------------------------------------------------------------------------- /_img/screenshots/imageeffects.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bennettfeely/bennett/bde16596e80c5d0d512a9b9d08fe9fa1e6bf8c96/_img/screenshots/imageeffects.png -------------------------------------------------------------------------------- /_img/screenshots/mapsfortheweb.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bennettfeely/bennett/bde16596e80c5d0d512a9b9d08fe9fa1e6bf8c96/_img/screenshots/mapsfortheweb.jpg -------------------------------------------------------------------------------- /_img/screenshots/openbrainproject.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bennettfeely/bennett/bde16596e80c5d0d512a9b9d08fe9fa1e6bf8c96/_img/screenshots/openbrainproject.png -------------------------------------------------------------------------------- /_img/screenshots/plaintextlist.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bennettfeely/bennett/bde16596e80c5d0d512a9b9d08fe9fa1e6bf8c96/_img/screenshots/plaintextlist.png -------------------------------------------------------------------------------- /_img/screenshots/soteriaradar.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bennettfeely/bennett/bde16596e80c5d0d512a9b9d08fe9fa1e6bf8c96/_img/screenshots/soteriaradar.jpg -------------------------------------------------------------------------------- /_img/screenshots/tiny/antiweather.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bennettfeely/bennett/bde16596e80c5d0d512a9b9d08fe9fa1e6bf8c96/_img/screenshots/tiny/antiweather.jpg -------------------------------------------------------------------------------- /_img/screenshots/tiny/clippy.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bennettfeely/bennett/bde16596e80c5d0d512a9b9d08fe9fa1e6bf8c96/_img/screenshots/tiny/clippy.jpg -------------------------------------------------------------------------------- /_img/screenshots/tiny/copypastelist.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bennettfeely/bennett/bde16596e80c5d0d512a9b9d08fe9fa1e6bf8c96/_img/screenshots/tiny/copypastelist.jpg -------------------------------------------------------------------------------- /_img/screenshots/tiny/csscreatures.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bennettfeely/bennett/bde16596e80c5d0d512a9b9d08fe9fa1e6bf8c96/_img/screenshots/tiny/csscreatures.jpg -------------------------------------------------------------------------------- /_img/screenshots/tiny/csspiechart.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bennettfeely/bennett/bde16596e80c5d0d512a9b9d08fe9fa1e6bf8c96/_img/screenshots/tiny/csspiechart.jpg -------------------------------------------------------------------------------- /_img/screenshots/tiny/cssscales.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bennettfeely/bennett/bde16596e80c5d0d512a9b9d08fe9fa1e6bf8c96/_img/screenshots/tiny/cssscales.jpg -------------------------------------------------------------------------------- /_img/screenshots/tiny/flexplorer.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bennettfeely/bennett/bde16596e80c5d0d512a9b9d08fe9fa1e6bf8c96/_img/screenshots/tiny/flexplorer.jpg -------------------------------------------------------------------------------- /_img/screenshots/tiny/genesis.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bennettfeely/bennett/bde16596e80c5d0d512a9b9d08fe9fa1e6bf8c96/_img/screenshots/tiny/genesis.jpg -------------------------------------------------------------------------------- /_img/screenshots/tiny/gradients.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bennettfeely/bennett/bde16596e80c5d0d512a9b9d08fe9fa1e6bf8c96/_img/screenshots/tiny/gradients.jpg -------------------------------------------------------------------------------- /_img/screenshots/tiny/imageeffects.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bennettfeely/bennett/bde16596e80c5d0d512a9b9d08fe9fa1e6bf8c96/_img/screenshots/tiny/imageeffects.jpg -------------------------------------------------------------------------------- /_img/screenshots/tiny/mapsfortheweb.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bennettfeely/bennett/bde16596e80c5d0d512a9b9d08fe9fa1e6bf8c96/_img/screenshots/tiny/mapsfortheweb.jpg -------------------------------------------------------------------------------- /_img/screenshots/tiny/openbrainproject.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bennettfeely/bennett/bde16596e80c5d0d512a9b9d08fe9fa1e6bf8c96/_img/screenshots/tiny/openbrainproject.jpg -------------------------------------------------------------------------------- /_img/screenshots/tiny/plaintextlist.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bennettfeely/bennett/bde16596e80c5d0d512a9b9d08fe9fa1e6bf8c96/_img/screenshots/tiny/plaintextlist.jpg -------------------------------------------------------------------------------- /_img/screenshots/tiny/soteriaradar.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bennettfeely/bennett/bde16596e80c5d0d512a9b9d08fe9fa1e6bf8c96/_img/screenshots/tiny/soteriaradar.jpg -------------------------------------------------------------------------------- /_img/screenshots/tiny/usa2200.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bennettfeely/bennett/bde16596e80c5d0d512a9b9d08fe9fa1e6bf8c96/_img/screenshots/tiny/usa2200.jpg -------------------------------------------------------------------------------- /_img/screenshots/tiny/usacss.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bennettfeely/bennett/bde16596e80c5d0d512a9b9d08fe9fa1e6bf8c96/_img/screenshots/tiny/usacss.jpg -------------------------------------------------------------------------------- /_img/screenshots/tiny/ztext.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bennettfeely/bennett/bde16596e80c5d0d512a9b9d08fe9fa1e6bf8c96/_img/screenshots/tiny/ztext.jpg -------------------------------------------------------------------------------- /_img/screenshots/usa2200.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bennettfeely/bennett/bde16596e80c5d0d512a9b9d08fe9fa1e6bf8c96/_img/screenshots/usa2200.png -------------------------------------------------------------------------------- /_img/screenshots/usacss.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bennettfeely/bennett/bde16596e80c5d0d512a9b9d08fe9fa1e6bf8c96/_img/screenshots/usacss.png -------------------------------------------------------------------------------- /_img/screenshots/ztext.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bennettfeely/bennett/bde16596e80c5d0d512a9b9d08fe9fa1e6bf8c96/_img/screenshots/ztext.png -------------------------------------------------------------------------------- /_redirects: -------------------------------------------------------------------------------- 1 | https://bennettfeely.com/usacss https://bennettfeely.com/usa-css 301 -------------------------------------------------------------------------------- /_src/index.slim: -------------------------------------------------------------------------------- 1 | doctype html 2 | html lang="en" 3 | head 4 | meta charset="utf-8" 5 | meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" 6 | title Bennett Feely 7 | meta name="description" content="Bennett Feely is a web developer based in Pittsburgh. He makes websites so you don't have to." 8 | link href="style.min.css" rel="stylesheet" 9 | link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin="" 10 | link href="https://fonts.googleapis.com/css?family=Nunito:400,700" rel="stylesheet" 11 | link rel="apple-touch-icon" sizes="180x180" href="_img/apple-touch-icon.png" 12 | link rel="icon" type="image/png" sizes="32x32" href="_img/favicon-32x32.png" 13 | link rel="icon" type="image/png" sizes="16x16" href="_img/favicon-16x16.png" 14 | link rel="mask-icon" href="img//safari-pinned-tab.svg" color="#5bbad5" 15 | meta name="theme-color" content="#ffffff" 16 | body 17 | .header-wrapper 18 | header 19 | .container 20 | img.me src="_img/me.jpg" width="250" height="250" alt="Photo of Bennett Feely" 21 | h1 Hello! My name is Bennett Feely. 
I make websites so you don't have to. 22 | / .job-wrapper 23 | / section 24 | / .container 25 | / h2 Update January 2021: 26 | / p I'm currently available for freelance web design and development, logo design, brand design, and graphic design work. 27 | / a href="#contact" Let's get in touch! 28 | .main-wrapper 29 | section 30 | h2.outline 31 | span Recent Projects 32 | .container 33 | ul 34 | li.project 35 | a.project-link href="https://bennettfeely.com/ztext/" data-img="ztext" 36 | .screenshot-wrapper 37 | img.screenshot src="_img/screenshots/ztext.png" width="600" height="450" alt="" 38 | .line 39 | .caption ztext.js, 3D typography for any website and any font 40 | li.project 41 | a.project-link href="https://bennettfeely.com/csscreatures/" data-img="csscreatures" 42 | .screenshot-wrapper 43 | img.screenshot src="_img/screenshots/csscreatures.png" width="600" height="450" alt="" 44 | .line 45 | .caption CSS Creatures, make a creature from your tweet 46 | li.project 47 | a.project-link href="https://copypastelist.com" data-img="copypastelist" 48 | .screenshot-wrapper 49 | img.screenshot src="_img/screenshots/copypastelist.png" width="600" height="450" alt="" 50 | .line 51 | .caption Copy Paste List, collection of lists in plain text 52 | li.project 53 | a.project-link href="/usa-css" data-img="usa" 54 | .screenshot-wrapper 55 | img.screenshot src="_img/screenshots/usacss.png" width="600" height="450" alt="" 56 | .line 57 | .caption USA.css, the most American CSS stylesheet 58 | li.project 59 | a.project-link href="/csspiechart" data-img="pie" 60 | .screenshot-wrapper 61 | img.screenshot src="_img/screenshots/csspiechart.png" width="600" height="450" alt="" 62 | .line 63 | .caption CSS Pie Chart, generate pie charts with conic gradients 64 | li.project 65 | a.project-link href="/clippy" data-img="clippy" 66 | .screenshot-wrapper 67 | img.screenshot src="_img/screenshots/clippy.png" width="600" height="450" alt="" 68 | .line 69 | .caption Clippy, a tool for making CSS clip paths 70 | li.project 71 | a.project-link href="/antiweather" data-img="antiweather" 72 | .screenshot-wrapper 73 | img.screenshot src="_img/screenshots/antiweather.png" width="600" height="450" alt="" 74 | .line 75 | .caption Antiweather, see what the weather is like on the other side of the world 76 | / li.project 77 | / a.project-link href="/usa-2200" data-img="usa2200" 78 | / .screenshot-wrapper 79 | / img.screenshot src="_img/screenshots/usa2200.png" width="600" height="450" alt="" 80 | / .line 81 | / .caption USA 2200, every state is made of pixels at war with each other 82 | li.project 83 | a.project-link href="/image-effects" data-img="imageeffects" 84 | .screenshot-wrapper 85 | img.screenshot src="_img/screenshots/imageeffects.png" width="600" height="450" alt="" 86 | .line 87 | .caption CSS Image Effects, using blend modes for complex image effects 88 | li.project 89 | a.project-link href="/gradients" data-img="gradients" 90 | .screenshot-wrapper 91 | img.screenshot src="_img/screenshots/gradients.png" width="600" height="450" alt="" 92 | .line 93 | .caption CSS Gradients, using blend modes with background gradients 94 | li.project 95 | a.project-link href="/flexplorer" data-img="flexplorer" 96 | .screenshot-wrapper 97 | img.screenshot src="_img/screenshots/flexplorer.png" width="600" height="450" alt="" 98 | .line 99 | .caption Flexplorer, learn how flexbox works with lists 100 | li.project 101 | a.project-link href="/scales" data-img="cssscales" 102 | .screenshot-wrapper 103 | img.screenshot src="_img/screenshots/cssscales.png" width="600" height="450" alt="" 104 | .line 105 | .caption CSS Scales, accessible CSS gradients 106 | .container 107 | h2.outline 108 | span Recent Work 109 | ul 110 | li.project 111 | a.project-link href="https://www.w3.org/2020/maps/" data-img="mapsfortheweb" 112 | .screenshot-wrapper 113 | img.screenshot src="_img/screenshots/mapsfortheweb.jpg" width="600" height="450" alt="" 114 | .line 115 | .caption Logo and graphics for Maps for the Web Workshop, for the W3C 116 | li.project 117 | a.project-link href="https://openbrainproject.org" data-img="openbrainproject" 118 | .screenshot-wrapper 119 | img.screenshot src="_img/screenshots/openbrainproject.png" width="600" height="450" alt="" 120 | .line 121 | .caption The Open Brain Project, at Carnegie Mellon University 122 | li.project 123 | a.project-link href="https://soteriaradar.netlify.app/" data-img="soteriaradar" 124 | .screenshot-wrapper 125 | img.screenshot src="_img/screenshots/soteriaradar.jpg" width="600" height="450" alt="" 126 | .line 127 | .caption Soteria Radar, a website for a startup 128 | .contact-wrapper#contact 129 | section 130 | .container 131 | h2.outline 132 | span Contact 133 | ul.contacts 134 | li.contact 135 | label.contact-link.email-link onClick="document.querySelector('.email-link input').select();" 136 | Email 137 | li.contact 138 | a.contact-link href="https://twitter.com/bennettfeely" 139 | Twitter @bennettfeely 140 | li.contact 141 | a.contact-link href="https://github.com/bennettfeely" 142 | GitHub @bennettfeely 143 | li.contact 144 | a.contact-link href="https://instagram.com/bennettfeely" 145 | Instagram @bennettfeely 146 | li.contact 147 | a.contact-link href="https://codepen.io/bennettfeely" 148 | CodePen /bennettfeely 149 | li.contact 150 | a.contact-link href="https://www.linkedin.com/in/bennettfeely/" 151 | LinkedIn /in/bennettfeely 152 | .footer-wrapper 153 | footer 154 | .container 155 | p.copyright © 2021 Bennett Feely -------------------------------------------------------------------------------- /_src/scss/partials/_extensions.scss: -------------------------------------------------------------------------------- 1 | %no-select { 2 | -ms-user-select: none; 3 | -webkit-user-select: none; 4 | -moz-user-select: none; 5 | user-select: none; 6 | } 7 | 8 | %no-drag { 9 | -webkit-user-drag: none; 10 | -moz-user-drag: none; 11 | -ms-user-drag: none; 12 | user-drag: none; 13 | } 14 | 15 | %no-tap { 16 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 17 | -webkit-touch-callout: none; 18 | tap-highlight-color: rgba(0, 0, 0, 0); 19 | touch-callout: none; 20 | } 21 | 22 | %psuedo { 23 | display: block; 24 | content: ""; 25 | position: absolute; 26 | } 27 | -------------------------------------------------------------------------------- /_src/scss/partials/_functions.scss: -------------------------------------------------------------------------------- 1 | @function tint($color, $percent) { 2 | @return mix(white, $color, $percent); 3 | } 4 | @function shade($color, $percent) { 5 | @return mix(black, $color, $percent); 6 | } 7 | -------------------------------------------------------------------------------- /_src/scss/partials/_normalize.scss: -------------------------------------------------------------------------------- 1 | /* normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */ 2 | 3 | /* Document 4 | ========================================================================== */ 5 | 6 | /** 7 | * 1. Correct the line height in all browsers. 8 | * 2. Prevent adjustments of font size after orientation changes in iOS. 9 | */ 10 | 11 | html { 12 | line-height: 1.15; /* 1 */ 13 | -webkit-text-size-adjust: 100%; /* 2 */ 14 | } 15 | 16 | /* Sections 17 | ========================================================================== */ 18 | 19 | /** 20 | * Remove the margin in all browsers. 21 | */ 22 | 23 | body { 24 | margin: 0; 25 | } 26 | 27 | /** 28 | * Correct the font size and margin on `h1` elements within `section` and 29 | * `article` contexts in Chrome, Firefox, and Safari. 30 | */ 31 | 32 | h1 { 33 | font-size: 2em; 34 | margin: 0.67em 0; 35 | } 36 | 37 | /* Grouping content 38 | ========================================================================== */ 39 | 40 | /** 41 | * 1. Add the correct box sizing in Firefox. 42 | * 2. Show the overflow in Edge and IE. 43 | */ 44 | 45 | hr { 46 | box-sizing: content-box; /* 1 */ 47 | height: 0; /* 1 */ 48 | overflow: visible; /* 2 */ 49 | } 50 | 51 | /** 52 | * 1. Correct the inheritance and scaling of font size in all browsers. 53 | * 2. Correct the odd `em` font sizing in all browsers. 54 | */ 55 | 56 | pre { 57 | font-family: monospace, monospace; /* 1 */ 58 | font-size: 1em; /* 2 */ 59 | } 60 | 61 | /* Text-level semantics 62 | ========================================================================== */ 63 | 64 | /** 65 | * Remove the gray background on active links in IE 10. 66 | */ 67 | 68 | a { 69 | background-color: transparent; 70 | } 71 | 72 | /** 73 | * 1. Remove the bottom border in Chrome 57- 74 | * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. 75 | */ 76 | 77 | abbr[title] { 78 | border-bottom: none; /* 1 */ 79 | text-decoration: underline; /* 2 */ 80 | text-decoration: underline dotted; /* 2 */ 81 | } 82 | 83 | /** 84 | * Add the correct font weight in Chrome, Edge, and Safari. 85 | */ 86 | 87 | b, 88 | strong { 89 | font-weight: bolder; 90 | } 91 | 92 | /** 93 | * 1. Correct the inheritance and scaling of font size in all browsers. 94 | * 2. Correct the odd `em` font sizing in all browsers. 95 | */ 96 | 97 | code, 98 | kbd, 99 | samp { 100 | font-family: monospace, monospace; /* 1 */ 101 | font-size: 1em; /* 2 */ 102 | } 103 | 104 | /** 105 | * Add the correct font size in all browsers. 106 | */ 107 | 108 | small { 109 | font-size: 80%; 110 | } 111 | 112 | /** 113 | * Prevent `sub` and `sup` elements from affecting the line height in 114 | * all browsers. 115 | */ 116 | 117 | sub, 118 | sup { 119 | font-size: 75%; 120 | line-height: 0; 121 | position: relative; 122 | vertical-align: baseline; 123 | } 124 | 125 | sub { 126 | bottom: -0.25em; 127 | } 128 | 129 | sup { 130 | top: -0.5em; 131 | } 132 | 133 | /* Embedded content 134 | ========================================================================== */ 135 | 136 | /** 137 | * Remove the border on images inside links in IE 10. 138 | */ 139 | 140 | img { 141 | border-style: none; 142 | } 143 | 144 | /* Forms 145 | ========================================================================== */ 146 | 147 | /** 148 | * 1. Change the font styles in all browsers. 149 | * 2. Remove the margin in Firefox and Safari. 150 | */ 151 | 152 | button, 153 | input, 154 | optgroup, 155 | select, 156 | textarea { 157 | font-family: inherit; /* 1 */ 158 | font-size: 100%; /* 1 */ 159 | line-height: 1.15; /* 1 */ 160 | margin: 0; /* 2 */ 161 | } 162 | 163 | /** 164 | * Show the overflow in IE. 165 | * 1. Show the overflow in Edge. 166 | */ 167 | 168 | button, 169 | input { 170 | /* 1 */ 171 | overflow: visible; 172 | } 173 | 174 | /** 175 | * Remove the inheritance of text transform in Edge, Firefox, and IE. 176 | * 1. Remove the inheritance of text transform in Firefox. 177 | */ 178 | 179 | button, 180 | select { 181 | /* 1 */ 182 | text-transform: none; 183 | } 184 | 185 | /** 186 | * Correct the inability to style clickable types in iOS and Safari. 187 | */ 188 | 189 | button, 190 | [type="button"], 191 | [type="reset"], 192 | [type="submit"] { 193 | -webkit-appearance: button; 194 | } 195 | 196 | /** 197 | * Remove the inner border and padding in Firefox. 198 | */ 199 | 200 | button::-moz-focus-inner, 201 | [type="button"]::-moz-focus-inner, 202 | [type="reset"]::-moz-focus-inner, 203 | [type="submit"]::-moz-focus-inner { 204 | border-style: none; 205 | padding: 0; 206 | } 207 | 208 | /** 209 | * Restore the focus styles unset by the previous rule. 210 | */ 211 | 212 | button:-moz-focusring, 213 | [type="button"]:-moz-focusring, 214 | [type="reset"]:-moz-focusring, 215 | [type="submit"]:-moz-focusring { 216 | outline: 1px dotted ButtonText; 217 | } 218 | 219 | /** 220 | * Correct the padding in Firefox. 221 | */ 222 | 223 | fieldset { 224 | padding: 0.35em 0.75em 0.625em; 225 | } 226 | 227 | /** 228 | * 1. Correct the text wrapping in Edge and IE. 229 | * 2. Correct the color inheritance from `fieldset` elements in IE. 230 | * 3. Remove the padding so developers are not caught out when they zero out 231 | * `fieldset` elements in all browsers. 232 | */ 233 | 234 | legend { 235 | box-sizing: border-box; /* 1 */ 236 | color: inherit; /* 2 */ 237 | display: table; /* 1 */ 238 | max-width: 100%; /* 1 */ 239 | padding: 0; /* 3 */ 240 | white-space: normal; /* 1 */ 241 | } 242 | 243 | /** 244 | * Add the correct vertical alignment in Chrome, Firefox, and Opera. 245 | */ 246 | 247 | progress { 248 | vertical-align: baseline; 249 | } 250 | 251 | /** 252 | * Remove the default vertical scrollbar in IE 10+. 253 | */ 254 | 255 | textarea { 256 | overflow: auto; 257 | } 258 | 259 | /** 260 | * 1. Add the correct box sizing in IE 10. 261 | * 2. Remove the padding in IE 10. 262 | */ 263 | 264 | [type="checkbox"], 265 | [type="radio"] { 266 | box-sizing: border-box; /* 1 */ 267 | padding: 0; /* 2 */ 268 | } 269 | 270 | /** 271 | * Correct the cursor style of increment and decrement buttons in Chrome. 272 | */ 273 | 274 | [type="number"]::-webkit-inner-spin-button, 275 | [type="number"]::-webkit-outer-spin-button { 276 | height: auto; 277 | } 278 | 279 | /** 280 | * 1. Correct the odd appearance in Chrome and Safari. 281 | * 2. Correct the outline style in Safari. 282 | */ 283 | 284 | [type="search"] { 285 | -webkit-appearance: textfield; /* 1 */ 286 | outline-offset: -2px; /* 2 */ 287 | } 288 | 289 | /** 290 | * Remove the inner padding in Chrome and Safari on macOS. 291 | */ 292 | 293 | [type="search"]::-webkit-search-decoration { 294 | -webkit-appearance: none; 295 | } 296 | 297 | /** 298 | * 1. Correct the inability to style clickable types in iOS and Safari. 299 | * 2. Change font properties to `inherit` in Safari. 300 | */ 301 | 302 | ::-webkit-file-upload-button { 303 | -webkit-appearance: button; /* 1 */ 304 | font: inherit; /* 2 */ 305 | } 306 | 307 | /* Interactive 308 | ========================================================================== */ 309 | 310 | /* 311 | * Add the correct display in Edge, IE 10+, and Firefox. 312 | */ 313 | 314 | details { 315 | display: block; 316 | } 317 | 318 | /* 319 | * Add the correct display in all browsers. 320 | */ 321 | 322 | summary { 323 | display: list-item; 324 | } 325 | 326 | /* Misc 327 | ========================================================================== */ 328 | 329 | /** 330 | * Add the correct display in IE 10+. 331 | */ 332 | 333 | template { 334 | display: none; 335 | } 336 | 337 | /** 338 | * Add the correct display in IE 10. 339 | */ 340 | 341 | [hidden] { 342 | display: none; 343 | } 344 | -------------------------------------------------------------------------------- /_src/scss/partials/_palette.scss: -------------------------------------------------------------------------------- 1 | // Palettes 2 | // -------------------------------------------------------------------------------- 3 | 4 | // Red 5 | $list-red: #fde0dc, #f9bdbb, #f69988, #f36c60, #e84e40, 6 | #e51c23, #dd191d, #d01716, #c41411, #b0120a, 7 | #ff7997, #ff5177, #ff2d6f, #e00032; 8 | 9 | // Pink 10 | $list-pink: #fce4ec, #f8bbd0, #f48fb1, #f06292, #ec407a, 11 | #e91e63, #d81b60, #c2185b, #ad1457, #880e4f, 12 | #ff80ab, #ff4081, #f50057, #c51162; 13 | 14 | // Purple 15 | $list-purple: #f3e5f5, #e1bee7, #ce93d8, #ba68c8, #ab47bc, 16 | #9c27b0, #8e24aa, #7b1fa2, #6a1b9a, #4a148c, 17 | #ea80fc, #e040fb, #d500f9, #aa00ff; 18 | 19 | // Deep Purple 20 | $list-deep-purple: #ede7f6, #d1c4e9, #b39ddb, #9575cd, #7e57c2, 21 | #673ab7, #5e35b1, #512da8, #4527a0, #311b92, 22 | #b388ff, #7c4dff, #651fff, #6200ea; 23 | 24 | // Indigo 25 | $list-indigo: #e8eaf6, #c5cae9, #9fa8da, #7986cb, #5c6bc0, 26 | #3f51b5, #3949ab, #303f9f, #283593, #1a237e, 27 | #8c9eff, #536dfe, #3d5afe, #304ffe; 28 | 29 | // Blue 30 | $list-blue: #e7e9fd, #d0d9ff, #afbfff, #91a7ff, #738ffe, 31 | #5677fc, #4e6cef, #455ede, #3b50ce, #2a36b1, 32 | #a6baff, #6889ff, #4d73ff, #4d69ff; 33 | 34 | // Light Blue 35 | $list-light-blue: #e1f5fe, #b3e5fc, #81d4fa, #4fc3f7, #29b6f6, 36 | #03a9f4, #039be5, #0288d1, #0277bd, #01579b, 37 | #80d8ff, #40c4ff, #00b0ff, #0091ea; 38 | 39 | // Cyan 40 | $list-cyan: #e0f7fa, #b2ebf2, #80deea, #4dd0e1, #26c6da, 41 | #00bcd4, #00acc1, #0097a7, #00838f, #006064, 42 | #84ffff, #18ffff, #00e5ff, #00b8d4; 43 | 44 | // Teal 45 | $list-teal: #e0f2f1, #b2dfdb, #80cbc4, #4db6ac, #26a69a, 46 | #009688, #00897b, #00796b, #00695c, #004d40, 47 | #a7ffeb, #64ffda, #1de9b6, #00bfa5; 48 | 49 | // Green 50 | $list-green: #d0f8ce, #a3e9a4, #72d572, #42bd41, #2baf2b, 51 | #259b24, #0a8f08, #0a7e07, #056f00, #0d5302, 52 | #a2f78d, #5af158, #14e715, #12c700; 53 | 54 | // Light Green 55 | $list-light-green: #f1f8e9, #dcedc8, #c5e1a5, #aed581, #9ccc65, 56 | #8bc34a, #7cb342, #689f38, #558b2f, #33691e, 57 | #ccff90, #b2ff59, #76ff03, #64dd17; 58 | 59 | // Lime 60 | $list-lime: #f9fbe7, #f0f4c3, #e6ee9c, #dce775, #d4e157, 61 | #cddc39, #c0ca33, #afb42b, #9e9d24, #827717, 62 | #f4ff81, #eeff41, #c6ff00, #aeea00; 63 | 64 | // Yellow 65 | $list-yellow: #fffde7, #fff9c4, #fff59d, #fff176, #ffee58, 66 | #ffeb3b, #fdd835, #fbc02d, #f9a825, #f57f17, 67 | #ffff8d, #ffff00, #ffea00, #ffd600; 68 | 69 | // Amber 70 | $list-amber: #fff8e1, #ffecb3, #ffe082, #ffd54f, #ffca28, 71 | #ffc107, #ffb300, #ffa000, #ff8f00, #ff6f00, 72 | #ffe57f, #ffd740, #ffc400, #ffab00; 73 | 74 | // Orange 75 | $list-orange: #fff3e0, #ffe0b2, #ffcc80, #ffb74d, #ffa726, 76 | #ff9800, #fb8c00, #f57c00, #ef6c00, #e65100, 77 | #ffd180, #ffab40, #ff9100, #ff6d00; 78 | 79 | // Deep Orange 80 | $list-deep-orange: #fbe9e7, #ffccbc, #ffab91, #ff8a65, #ff7043, 81 | #ff5722, #f4511e, #e64a19, #d84315, #bf360c, 82 | #ff9e80, #ff6e40, #ff3d00, #dd2c00; 83 | 84 | // Brown 85 | $list-brown: #efebe9, #d7ccc8, #bcaaa4, #a1887f, #8d6e63, 86 | #795548, #6d4c41, #5d4037, #4e342e, #3e2723; 87 | 88 | // Grey 89 | $list-grey: #fafafa, #f5f5f5, #eeeeee, #e0e0e0, #bdbdbd, 90 | #9e9e9e, #757575, #616161, #424242, #212121, 91 | #000000; 92 | 93 | // Blue Grey 94 | $list-blue-grey: #eceff1, #cfd8dc, #b0bec5, #90a4ae, #78909c, 95 | #607d8b, #546e7a, #455a64, #37474f, #263238; 96 | 97 | 98 | 99 | // Definitions 100 | // -------------------------------------------------------------------------------- 101 | 102 | // Red 103 | $red: nth($list-red, 6); 104 | 105 | $red-50: nth($list-red, 1); 106 | $red-100: nth($list-red, 2); 107 | $red-200: nth($list-red, 3); 108 | $red-300: nth($list-red, 4); 109 | $red-400: nth($list-red, 5); 110 | $red-500: nth($list-red, 6); 111 | $red-600: nth($list-red, 7); 112 | $red-700: nth($list-red, 8); 113 | $red-800: nth($list-red, 9); 114 | $red-900: nth($list-red, 10); 115 | $red-A100: nth($list-red, 11); 116 | $red-A200: nth($list-red, 12); 117 | $red-A400: nth($list-red, 13); 118 | $red-A700: nth($list-red, 14); 119 | 120 | 121 | // Pink 122 | $pink: nth($list-pink, 6); 123 | 124 | $pink-50: nth($list-pink, 1); 125 | $pink-100: nth($list-pink, 2); 126 | $pink-200: nth($list-pink, 3); 127 | $pink-300: nth($list-pink, 4); 128 | $pink-400: nth($list-pink, 5); 129 | $pink-500: nth($list-pink, 6); 130 | $pink-600: nth($list-pink, 7); 131 | $pink-700: nth($list-pink, 8); 132 | $pink-800: nth($list-pink, 9); 133 | $pink-900: nth($list-pink, 10); 134 | $pink-A100: nth($list-pink, 11); 135 | $pink-A200: nth($list-pink, 12); 136 | $pink-A400: nth($list-pink, 13); 137 | $pink-A700: nth($list-pink, 14); 138 | 139 | 140 | // Purple 141 | $purple: nth($list-purple, 6); 142 | 143 | $purple-50: nth($list-purple, 1); 144 | $purple-100: nth($list-purple, 2); 145 | $purple-200: nth($list-purple, 3); 146 | $purple-300: nth($list-purple, 4); 147 | $purple-400: nth($list-purple, 5); 148 | $purple-500: nth($list-purple, 6); 149 | $purple-600: nth($list-purple, 7); 150 | $purple-700: nth($list-purple, 8); 151 | $purple-800: nth($list-purple, 9); 152 | $purple-900: nth($list-purple, 10); 153 | $purple-A100: nth($list-purple, 11); 154 | $purple-A200: nth($list-purple, 12); 155 | $purple-A400: nth($list-purple, 13); 156 | $purple-A700: nth($list-purple, 14); 157 | 158 | 159 | // Deep Purple 160 | $deep-purple: nth($list-deep-purple, 6); 161 | 162 | $deep-purple-50: nth($list-deep-purple, 1); 163 | $deep-purple-100: nth($list-deep-purple, 2); 164 | $deep-purple-200: nth($list-deep-purple, 3); 165 | $deep-purple-300: nth($list-deep-purple, 4); 166 | $deep-purple-400: nth($list-deep-purple, 5); 167 | $deep-purple-500: nth($list-deep-purple, 6); 168 | $deep-purple-600: nth($list-deep-purple, 7); 169 | $deep-purple-700: nth($list-deep-purple, 8); 170 | $deep-purple-800: nth($list-deep-purple, 9); 171 | $deep-purple-900: nth($list-deep-purple, 10); 172 | $deep-purple-A100: nth($list-deep-purple, 11); 173 | $deep-purple-A200: nth($list-deep-purple, 12); 174 | $deep-purple-A400: nth($list-deep-purple, 13); 175 | $deep-purple-A700: nth($list-deep-purple, 14); 176 | 177 | 178 | // Indigo 179 | $indigo: nth($list-indigo, 6); 180 | 181 | $indigo-50: nth($list-indigo, 1); 182 | $indigo-100: nth($list-indigo, 2); 183 | $indigo-200: nth($list-indigo, 3); 184 | $indigo-300: nth($list-indigo, 4); 185 | $indigo-400: nth($list-indigo, 5); 186 | $indigo-500: nth($list-indigo, 6); 187 | $indigo-600: nth($list-indigo, 7); 188 | $indigo-700: nth($list-indigo, 8); 189 | $indigo-800: nth($list-indigo, 9); 190 | $indigo-900: nth($list-indigo, 10); 191 | $indigo-A100: nth($list-indigo, 11); 192 | $indigo-A200: nth($list-indigo, 12); 193 | $indigo-A400: nth($list-indigo, 13); 194 | $indigo-A700: nth($list-indigo, 14); 195 | 196 | 197 | // Blue 198 | $blue: nth($list-blue, 6); 199 | 200 | $blue-50: nth($list-blue, 1); 201 | $blue-100: nth($list-blue, 2); 202 | $blue-200: nth($list-blue, 3); 203 | $blue-300: nth($list-blue, 4); 204 | $blue-400: nth($list-blue, 5); 205 | $blue-500: nth($list-blue, 6); 206 | $blue-600: nth($list-blue, 7); 207 | $blue-700: nth($list-blue, 8); 208 | $blue-800: nth($list-blue, 9); 209 | $blue-900: nth($list-blue, 10); 210 | $blue-A100: nth($list-blue, 11); 211 | $blue-A200: nth($list-blue, 12); 212 | $blue-A400: nth($list-blue, 13); 213 | $blue-A700: nth($list-blue, 14); 214 | 215 | 216 | // Light Blue 217 | $light-blue: nth($list-light-blue, 6); 218 | 219 | $light-blue-50: nth($list-light-blue, 1); 220 | $light-blue-100: nth($list-light-blue, 2); 221 | $light-blue-200: nth($list-light-blue, 3); 222 | $light-blue-300: nth($list-light-blue, 4); 223 | $light-blue-400: nth($list-light-blue, 5); 224 | $light-blue-500: nth($list-light-blue, 6); 225 | $light-blue-600: nth($list-light-blue, 7); 226 | $light-blue-700: nth($list-light-blue, 8); 227 | $light-blue-800: nth($list-light-blue, 9); 228 | $light-blue-900: nth($list-light-blue, 10); 229 | $light-blue-A100: nth($list-light-blue, 11); 230 | $light-blue-A200: nth($list-light-blue, 12); 231 | $light-blue-A400: nth($list-light-blue, 13); 232 | $light-blue-A700: nth($list-light-blue, 14); 233 | 234 | 235 | // Cyan 236 | $cyan: nth($list-cyan, 6); 237 | 238 | $cyan-50: nth($list-cyan, 1); 239 | $cyan-100: nth($list-cyan, 2); 240 | $cyan-200: nth($list-cyan, 3); 241 | $cyan-300: nth($list-cyan, 4); 242 | $cyan-400: nth($list-cyan, 5); 243 | $cyan-500: nth($list-cyan, 6); 244 | $cyan-600: nth($list-cyan, 7); 245 | $cyan-700: nth($list-cyan, 8); 246 | $cyan-800: nth($list-cyan, 9); 247 | $cyan-900: nth($list-cyan, 10); 248 | $cyan-A100: nth($list-cyan, 11); 249 | $cyan-A200: nth($list-cyan, 12); 250 | $cyan-A400: nth($list-cyan, 13); 251 | $cyan-A700: nth($list-cyan, 14); 252 | 253 | 254 | // Teal 255 | $teal: nth($list-teal, 6); 256 | 257 | $teal-50: nth($list-teal, 1); 258 | $teal-100: nth($list-teal, 2); 259 | $teal-200: nth($list-teal, 3); 260 | $teal-300: nth($list-teal, 4); 261 | $teal-400: nth($list-teal, 5); 262 | $teal-500: nth($list-teal, 6); 263 | $teal-600: nth($list-teal, 7); 264 | $teal-700: nth($list-teal, 8); 265 | $teal-800: nth($list-teal, 9); 266 | $teal-900: nth($list-teal, 10); 267 | $teal-A100: nth($list-teal, 11); 268 | $teal-A200: nth($list-teal, 12); 269 | $teal-A400: nth($list-teal, 13); 270 | $teal-A700: nth($list-teal, 14); 271 | 272 | 273 | // Green 274 | $green: nth($list-green, 6); 275 | 276 | $green-50: nth($list-green, 1); 277 | $green-100: nth($list-green, 2); 278 | $green-200: nth($list-green, 3); 279 | $green-300: nth($list-green, 4); 280 | $green-400: nth($list-green, 5); 281 | $green-500: nth($list-green, 6); 282 | $green-600: nth($list-green, 7); 283 | $green-700: nth($list-green, 8); 284 | $green-800: nth($list-green, 9); 285 | $green-900: nth($list-green, 10); 286 | $green-A100: nth($list-green, 11); 287 | $green-A200: nth($list-green, 12); 288 | $green-A400: nth($list-green, 13); 289 | $green-A700: nth($list-green, 14); 290 | 291 | 292 | // Light Green 293 | $light-green: nth($list-light-green, 6); 294 | 295 | $light-green-50: nth($list-light-green, 1); 296 | $light-green-100: nth($list-light-green, 2); 297 | $light-green-200: nth($list-light-green, 3); 298 | $light-green-300: nth($list-light-green, 4); 299 | $light-green-400: nth($list-light-green, 5); 300 | $light-green-500: nth($list-light-green, 6); 301 | $light-green-600: nth($list-light-green, 7); 302 | $light-green-700: nth($list-light-green, 8); 303 | $light-green-800: nth($list-light-green, 9); 304 | $light-green-900: nth($list-light-green, 10); 305 | $light-green-A100: nth($list-light-green, 11); 306 | $light-green-A200: nth($list-light-green, 12); 307 | $light-green-A400: nth($list-light-green, 13); 308 | $light-green-A700: nth($list-light-green, 14); 309 | 310 | 311 | // Lime 312 | $lime: nth($list-lime, 6); 313 | 314 | $lime-50: nth($list-lime, 1); 315 | $lime-100: nth($list-lime, 2); 316 | $lime-200: nth($list-lime, 3); 317 | $lime-300: nth($list-lime, 4); 318 | $lime-400: nth($list-lime, 5); 319 | $lime-500: nth($list-lime, 6); 320 | $lime-600: nth($list-lime, 7); 321 | $lime-700: nth($list-lime, 8); 322 | $lime-800: nth($list-lime, 9); 323 | $lime-900: nth($list-lime, 10); 324 | $lime-A100: nth($list-lime, 11); 325 | $lime-A200: nth($list-lime, 12); 326 | $lime-A400: nth($list-lime, 13); 327 | $lime-A700: nth($list-lime, 14); 328 | 329 | 330 | //Yellow 331 | $yellow: nth($list-yellow, 6); 332 | 333 | $yellow-50: nth($list-yellow, 1); 334 | $yellow-100: nth($list-yellow, 2); 335 | $yellow-200: nth($list-yellow, 3); 336 | $yellow-300: nth($list-yellow, 4); 337 | $yellow-400: nth($list-yellow, 5); 338 | $yellow-500: nth($list-yellow, 6); 339 | $yellow-600: nth($list-yellow, 7); 340 | $yellow-700: nth($list-yellow, 8); 341 | $yellow-800: nth($list-yellow, 9); 342 | $yellow-900: nth($list-yellow, 10); 343 | $yellow-A100: nth($list-yellow, 11); 344 | $yellow-A200: nth($list-yellow, 12); 345 | $yellow-A400: nth($list-yellow, 13); 346 | $yellow-A700: nth($list-yellow, 14); 347 | 348 | 349 | // Amber 350 | $amber: nth($list-amber, 6); 351 | 352 | $amber-50: nth($list-amber, 1); 353 | $amber-100: nth($list-amber, 2); 354 | $amber-200: nth($list-amber, 3); 355 | $amber-300: nth($list-amber, 4); 356 | $amber-400: nth($list-amber, 5); 357 | $amber-500: nth($list-amber, 6); 358 | $amber-600: nth($list-amber, 7); 359 | $amber-700: nth($list-amber, 8); 360 | $amber-800: nth($list-amber, 9); 361 | $amber-900: nth($list-amber, 10); 362 | $amber-A100: nth($list-amber, 11); 363 | $amber-A200: nth($list-amber, 12); 364 | $amber-A400: nth($list-amber, 13); 365 | $amber-A700: nth($list-amber, 14); 366 | 367 | 368 | // Orange 369 | $orange: nth($list-orange, 6); 370 | 371 | $orange-50: nth($list-orange, 1); 372 | $orange-100: nth($list-orange, 2); 373 | $orange-200: nth($list-orange, 3); 374 | $orange-300: nth($list-orange, 4); 375 | $orange-400: nth($list-orange, 5); 376 | $orange-500: nth($list-orange, 6); 377 | $orange-600: nth($list-orange, 7); 378 | $orange-700: nth($list-orange, 8); 379 | $orange-800: nth($list-orange, 9); 380 | $orange-900: nth($list-orange, 10); 381 | $orange-A100: nth($list-orange, 11); 382 | $orange-A200: nth($list-orange, 12); 383 | $orange-A400: nth($list-orange, 13); 384 | $orange-A700: nth($list-orange, 14); 385 | 386 | 387 | // Deep Orange 388 | $deep-orange: nth($list-deep-orange, 6); 389 | 390 | $deep-orange-50: nth($list-deep-orange, 1); 391 | $deep-orange-100: nth($list-deep-orange, 2); 392 | $deep-orange-200: nth($list-deep-orange, 3); 393 | $deep-orange-300: nth($list-deep-orange, 4); 394 | $deep-orange-400: nth($list-deep-orange, 5); 395 | $deep-orange-500: nth($list-deep-orange, 6); 396 | $deep-orange-600: nth($list-deep-orange, 7); 397 | $deep-orange-700: nth($list-deep-orange, 8); 398 | $deep-orange-800: nth($list-deep-orange, 9); 399 | $deep-orange-900: nth($list-deep-orange, 10); 400 | $deep-orange-A100: nth($list-deep-orange, 11); 401 | $deep-orange-A200: nth($list-deep-orange, 12); 402 | $deep-orange-A400: nth($list-deep-orange, 13); 403 | $deep-orange-A700: nth($list-deep-orange, 14); 404 | 405 | 406 | // Brown 407 | $brown: nth($list-brown, 6); 408 | 409 | $brown-50: nth($list-brown, 1); 410 | $brown-100: nth($list-brown, 2); 411 | $brown-200: nth($list-brown, 3); 412 | $brown-300: nth($list-brown, 4); 413 | $brown-400: nth($list-brown, 5); 414 | $brown-500: nth($list-brown, 6); 415 | $brown-600: nth($list-brown, 7); 416 | $brown-700: nth($list-brown, 8); 417 | $brown-800: nth($list-brown, 9); 418 | $brown-900: nth($list-brown, 10); 419 | 420 | 421 | // Grey 422 | $grey: nth($list-grey, 6); 423 | 424 | $grey-50: nth($list-grey, 1); 425 | $grey-100: nth($list-grey, 2); 426 | $grey-200: nth($list-grey, 3); 427 | $grey-300: nth($list-grey, 4); 428 | $grey-400: nth($list-grey, 5); 429 | $grey-500: nth($list-grey, 6); 430 | $grey-600: nth($list-grey, 7); 431 | $grey-700: nth($list-grey, 8); 432 | $grey-800: nth($list-grey, 9); 433 | $grey-900: nth($list-grey, 10); 434 | $grey-1000: nth($list-grey, 11); 435 | 436 | 437 | // Blue Grey 438 | $blue-grey: nth($list-blue-grey, 6); 439 | 440 | $blue-grey-50: nth($list-blue-grey, 1); 441 | $blue-grey-100: nth($list-blue-grey, 2); 442 | $blue-grey-200: nth($list-blue-grey, 3); 443 | $blue-grey-300: nth($list-blue-grey, 4); 444 | $blue-grey-400: nth($list-blue-grey, 5); 445 | $blue-grey-500: nth($list-blue-grey, 6); 446 | $blue-grey-600: nth($list-blue-grey, 7); 447 | $blue-grey-700: nth($list-blue-grey, 8); 448 | $blue-grey-800: nth($list-blue-grey, 9); 449 | $blue-grey-900: nth($list-blue-grey, 10); 450 | 451 | 452 | // UI Color Application 453 | // -------------------------------------------------------------------------------- 454 | 455 | // Typography 456 | $ui-display-4: $grey-600; 457 | $ui-display-3: $grey-600; 458 | $ui-display-2: $grey-600; 459 | $ui-display-1: $grey-600; 460 | $ui-headline: $grey-900; 461 | $ui-title: $grey-900; 462 | $ui-subhead-1: $grey-900; 463 | $ui-body-2: $grey-900; 464 | $ui-body-1: $grey-900; 465 | $ui-caption: $grey-600; 466 | $ui-menu: $grey-900; 467 | $ui-button: $grey-900; 468 | -------------------------------------------------------------------------------- /_src/scss/partials/_reset.scss: -------------------------------------------------------------------------------- 1 | *, 2 | *:before, 3 | *:after { 4 | box-sizing: border-box; 5 | } 6 | h1, 7 | h2, 8 | h3, 9 | h4, 10 | h5, 11 | h6, 12 | button, 13 | ul, 14 | ol, 15 | li, 16 | details, 17 | summary, 18 | blockquote, 19 | q, 20 | p { 21 | margin: 0; 22 | } 23 | 24 | ul, 25 | ol, 26 | li, 27 | blockquote { 28 | padding: 0; 29 | } 30 | 31 | body { 32 | text-rendering: optimizeLegibility; 33 | font-smoothing: antialiased; 34 | font-variant-ligatures: common-ligatures; 35 | scroll-behavior: smooth; 36 | } 37 | 38 | input[type="range"] { 39 | -webkit-appearance: none; // Hides the slider so that custom slider can be made 40 | // width: 100%; // Specific width is required for Firefox. 41 | background: transparent; // Otherwise white in Chrome 42 | } 43 | 44 | input[type="range"]::-webkit-slider-thumb { 45 | -webkit-appearance: none; 46 | } 47 | 48 | input[type="range"]::-ms-track { 49 | width: 100%; 50 | cursor: pointer; 51 | 52 | // Hides the slider so custom styles can be added 53 | background: transparent; 54 | border-color: transparent; 55 | color: transparent; 56 | } 57 | -------------------------------------------------------------------------------- /_src/scss/style.scss: -------------------------------------------------------------------------------- 1 | // Charset ============================================================= 2 | @charset "UTF-8"; 3 | 4 | // Normalize =========================================================== 5 | @import "partials/normalize"; 6 | @import "partials/reset"; 7 | @import "partials/extensions"; 8 | @import "partials/functions"; 9 | @import "partials/palette"; 10 | 11 | // Variables =========================================================== 12 | $tablet: 40em; 13 | $desktop: 60em; 14 | 15 | $space-small: 2.5rem; 16 | $space-large: 5rem; 17 | 18 | :root { 19 | --radius-small: 0.25em; 20 | --radius-medium: 0.5em; 21 | --radius-large: 1em; 22 | --transition: 0.35s; 23 | --transition-hover: 0.1s; 24 | --duration: 4s; 25 | 26 | --black: #16161d; 27 | --black-a: rgba(22, 22, 29, 0.15); 28 | --gray: #909099; 29 | 30 | --blue: #1e90ff; 31 | --blue-a: rgb(30, 144, 255, 0.3); 32 | --blue-dark: #005cb8; 33 | --blue-light: #52c3fb; 34 | --purple: #a029de; 35 | --purple-dark: #5f267d; 36 | --purple-muted: #a377d2; 37 | --white: #fff; 38 | --offwhite: #ccc; 39 | 40 | --sky-100: #3b2f4a; 41 | --sky-150: #302944; 42 | --sky-200: #1f1f3a; 43 | --sky-300: #16161d; 44 | 45 | --background-gradient: radial-gradient( 46 | circle at center bottom, 47 | var(--sky-100), 48 | var(--sky-200), 49 | var(--sky-300) 50 | ); 51 | 52 | // Light Mode 53 | --background: var(--white); 54 | --text-color: var(--black); 55 | --text-color-a: var(--gray); 56 | --link-color: var(--blue); 57 | --link-color-hover: var(--blue); 58 | --link-color-visited: var(--purple); 59 | --link-color-visited-hover: var(--purple); 60 | } 61 | 62 | // Structual styles ==================================================== 63 | body { 64 | position: relative; 65 | font: 100%/1.5 Nunito, sans-serif; 66 | color: var(--text-color); 67 | overflow-x: hidden; 68 | } 69 | 70 | .header-wrapper { 71 | max-width: 35em; 72 | margin: 0 auto; 73 | text-align: center; 74 | padding-top: 1.5em; 75 | 76 | @media (min-width: $tablet) { 77 | max-width: 42em; 78 | } 79 | 80 | @media (min-width: $desktop) { 81 | max-width: 50em; 82 | } 83 | } 84 | 85 | .main-wrapper { 86 | margin: 1.5em auto 0; 87 | max-width: 35em; 88 | 89 | @media (min-width: $tablet) { 90 | margin: 0 auto; 91 | max-width: 25em; 92 | padding: 2.5em 0; 93 | } 94 | } 95 | 96 | .container { 97 | position: relative; 98 | padding: 2rem; 99 | 100 | .header-wrapper &, 101 | .footer-wrapper & { 102 | padding: 1.5em 0; 103 | margin: 0 1.5em; 104 | } 105 | 106 | .contact-wrapper & { 107 | text-align: center; 108 | margin: 1.5rem auto; 109 | padding: 0 1.5rem; 110 | 111 | @media (min-width: $tablet) { 112 | max-width: 42em; 113 | } 114 | 115 | @media (min-width: $desktop) { 116 | max-width: 50em; 117 | } 118 | } 119 | } 120 | 121 | // Typography ========================================================== 122 | h1, 123 | h2 { 124 | font-weight: 400; 125 | line-height: 1.2; 126 | } 127 | 128 | h1 { 129 | font-size: 1.5em; 130 | 131 | @media (min-width: $desktop) { 132 | font-size: 2em; 133 | } 134 | } 135 | h2 { 136 | @extend %no-select; 137 | display: block; 138 | cursor: default; 139 | text-align: center; 140 | font-size: 1.25em; 141 | opacity: 0.75; 142 | } 143 | 144 | a { 145 | text-decoration: none; 146 | color: var(--text-color); 147 | } 148 | 149 | img { 150 | @extend %no-drag; 151 | @extend %no-select; 152 | } 153 | 154 | .outline { 155 | position: relative; 156 | color: var(--text-color); 157 | border-radius: var(--radius-large); 158 | 159 | &:before { 160 | display: block; 161 | content: ""; 162 | position: absolute; 163 | top: 50%; 164 | left: 0; 165 | right: 0; 166 | height: 1px; 167 | background: var(--black-a); 168 | } 169 | 170 | span { 171 | position: relative; 172 | display: inline-block; 173 | z-index: 10; 174 | background: var(--background); 175 | padding: 0.5em 1em; 176 | } 177 | } 178 | 179 | // Header ============================================================== 180 | header { 181 | .container { 182 | text-align: center; 183 | 184 | @media (min-width: $tablet) { 185 | display: flex; 186 | align-items: center; 187 | text-align: left; 188 | } 189 | } 190 | 191 | h1 { 192 | @media (min-width: $tablet) { 193 | flex: 1; 194 | align-items: center; 195 | } 196 | } 197 | 198 | br { 199 | @media (max-width: $tablet) { 200 | display: none; 201 | } 202 | } 203 | } 204 | 205 | .me { 206 | width: 6em; 207 | height: 6em; 208 | border-radius: 50%; 209 | margin: 0 0 0.5rem 0; 210 | 211 | @media (min-width: $tablet) { 212 | width: 7em; 213 | height: 7em; 214 | margin: 0 1.5rem 0 0; 215 | } 216 | 217 | @media (min-width: $desktop) { 218 | width: 8em; 219 | height: 8em; 220 | } 221 | } 222 | 223 | // Jobs ================================================================ 224 | .job-wrapper { 225 | max-width: 40em; 226 | margin: 0 auto 0; 227 | text-align: center; 228 | 229 | .outline { 230 | margin: 0 1.5em; 231 | border-radius: var(--radius-large); 232 | padding: 1.5em; 233 | border-color: rgba(128, 128, 128, 0.3); 234 | } 235 | 236 | p { 237 | font-size: 1em; 238 | margin-top: 1em; 239 | } 240 | 241 | a { 242 | display: inline-block; 243 | margin-top: 1em; 244 | font-weight: bold; 245 | color: var(--link-color); 246 | padding: 0.5em 1.5em; 247 | border-radius: var(--radius-medium); 248 | transition: background var(--transition), color var(--transition), 249 | box-shadow var(--transition); 250 | box-shadow: inset 0 0 0 0.1em var(--blue-a), 0 0 0 0 transparent; 251 | 252 | &:hover { 253 | background: var(--blue-a); 254 | color: var(--link-color-hover); 255 | box-shadow: inset 0 0 0 0.1em transparent, 0 0 0 0.25em var(--blue-a); 256 | } 257 | } 258 | } 259 | 260 | // List ================================================================ 261 | ul { 262 | @extend %no-select; 263 | font-size: 1.2em; 264 | } 265 | 266 | li { 267 | position: relative; 268 | list-style: none; 269 | } 270 | 271 | // Links =============================================================== 272 | .project-link, 273 | .contact-link { 274 | display: block; 275 | position: relative; 276 | cursor: pointer; 277 | padding: 1.5rem 0; 278 | 279 | strong { 280 | color: var(--link-color); 281 | transition: color var(--transition); 282 | } 283 | 284 | &:hover { 285 | strong { 286 | color: var(--link-color-hover); 287 | } 288 | } 289 | 290 | &:visited { 291 | strong { 292 | color: var(--link-color-visited); 293 | } 294 | 295 | &:hover { 296 | strong { 297 | color: var(--link-color-visited-hover); 298 | } 299 | } 300 | } 301 | 302 | @media (min-width: $tablet) { 303 | transition: background-color var(--transition); 304 | border-radius: var(--radius-medium); 305 | margin: 1rem 0; 306 | padding: 1.5rem; 307 | 308 | &:hover { 309 | background: var(--blue-a); 310 | transition-duration: var(--transition-hover); 311 | } 312 | } 313 | } 314 | 315 | .project-link { 316 | display: flex; 317 | align-items: center; 318 | 319 | .project:nth-child(odd) & { 320 | flex-direction: row-reverse; 321 | } 322 | } 323 | 324 | // Screenshots ========================================================= 325 | $space: 5em; 326 | 327 | .screenshot-wrapper { 328 | min-width: 50%; 329 | max-width: 50%; 330 | height: auto; 331 | margin: 0 1.5rem 0 0; 332 | transition: transform var(--transition); 333 | transform: scale(0.9); 334 | 335 | .project:nth-child(odd) & { 336 | margin: 0 0 0 1.5rem; 337 | } 338 | 339 | .project-link:hover & { 340 | transform: scale(1); 341 | transition-duration: var(--transition-hover); 342 | } 343 | 344 | @media (min-width: $tablet) { 345 | position: absolute; 346 | z-index: 10; 347 | width: 12em; 348 | height: 9em; 349 | 350 | .project:nth-child(odd) & { 351 | margin: 0; 352 | } 353 | } 354 | } 355 | 356 | .screenshot { 357 | width: 100%; 358 | height: auto; 359 | border-radius: var(--radius-small); 360 | box-shadow: 0 2.5em 5em var(--offwhite); 361 | box-shadow: 0 2em 2em -1em var(--offwhite); 362 | 363 | @media (min-width: $tablet) { 364 | display: block; 365 | width: 100%; 366 | height: auto; 367 | transition: box-shadow var(--transition); 368 | } 369 | } 370 | 371 | .project-link:hover .screenshot { 372 | box-shadow: 0 1em 2em var(--offwhite); 373 | } 374 | 375 | .line { 376 | @media (min-width: $tablet) { 377 | position: absolute; 378 | content: ""; 379 | width: $space * 2; 380 | height: 1px; 381 | background: var(--text-color); 382 | opacity: 0.25; 383 | pointer-events: none; 384 | top: 50%; 385 | transition: opacity var(--transition); 386 | 387 | .project-link:hover & { 388 | opacity: 1; 389 | } 390 | } 391 | } 392 | 393 | // Left side ----------------------------------------------------------- 394 | $spread: 1.5em; 395 | 396 | .project { 397 | &:nth-child(odd) { 398 | .line { 399 | right: calc(100% + 0.5em); 400 | transform-origin: center right; 401 | } 402 | 403 | .screenshot-wrapper { 404 | @media (min-width: $tablet) { 405 | right: calc(100% + #{$space-small}); 406 | } 407 | @media (min-width: $desktop) { 408 | right: calc(100% + #{$space-large}); 409 | } 410 | 411 | .screenshot { 412 | transform: rotate(5deg); 413 | } 414 | } 415 | } 416 | 417 | @media (min-width: $tablet) { 418 | &:nth-child(1) { 419 | .line { 420 | transform: rotate(6deg); 421 | } 422 | .screenshot-wrapper { 423 | top: -40%; 424 | 425 | .screenshot { 426 | transform: rotate(4deg); 427 | } 428 | } 429 | } 430 | &:nth-child(3) { 431 | .line { 432 | transform: rotate(14deg); 433 | } 434 | .screenshot-wrapper { 435 | top: -45%; 436 | 437 | .screenshot { 438 | transform: rotate(-2deg); 439 | } 440 | } 441 | } 442 | &:nth-child(5) { 443 | .line { 444 | transform: rotate(-5deg); 445 | } 446 | .screenshot-wrapper { 447 | top: -35%; 448 | 449 | .screenshot { 450 | transform: rotate(8deg); 451 | } 452 | } 453 | } 454 | &:nth-child(7) { 455 | .line { 456 | transform: rotate(5deg); 457 | } 458 | .screenshot-wrapper { 459 | top: -20%; 460 | 461 | .screenshot { 462 | transform: rotate(-8deg); 463 | } 464 | } 465 | } 466 | } 467 | } 468 | 469 | // Right side ---------------------------------------------------------- 470 | .project { 471 | &:nth-child(even) { 472 | .line { 473 | left: calc(100% + 0.5em); 474 | transform-origin: center left; 475 | } 476 | 477 | .screenshot-wrapper { 478 | @media (min-width: $tablet) { 479 | left: calc(100% + #{$space-small}); 480 | } 481 | @media (min-width: $desktop) { 482 | left: calc(100% + #{$space-large}); 483 | } 484 | 485 | .screenshot { 486 | transform: rotate(-5deg); 487 | } 488 | } 489 | } 490 | 491 | @media (min-width: $tablet) { 492 | &:nth-child(even) { 493 | .line { 494 | transform-origin: left center; 495 | } 496 | 497 | .screenshot img { 498 | transform: rotate(-5deg); 499 | } 500 | } 501 | 502 | &:nth-child(2) { 503 | .line { 504 | transform: rotate(-25deg); 505 | } 506 | .screenshot-wrapper { 507 | top: -80%; 508 | 509 | .screenshot { 510 | transform: rotate(-8deg); 511 | } 512 | } 513 | } 514 | &:nth-child(4) { 515 | .line { 516 | transform: rotate(-25deg); 517 | } 518 | .screenshot-wrapper { 519 | top: -60%; 520 | 521 | .screenshot { 522 | transform: rotate(2deg); 523 | } 524 | } 525 | } 526 | &:nth-child(6) { 527 | .line { 528 | transform: rotate(-18deg); 529 | } 530 | .screenshot-wrapper { 531 | top: -70%; 532 | 533 | .screenshot { 534 | transform: rotate(8deg); 535 | } 536 | } 537 | } 538 | } 539 | } 540 | 541 | // Contact ========================================================= 542 | .contacts { 543 | @media (min-width: $tablet) { 544 | display: flex; 545 | flex-wrap: wrap; 546 | border: none; 547 | } 548 | } 549 | 550 | .contact { 551 | flex: 1 0 50%; 552 | } 553 | 554 | .contact-link { 555 | display: block; 556 | padding: 1rem 1.5rem; 557 | } 558 | 559 | .email-link { 560 | cursor: text; 561 | 562 | strong { 563 | user-select: none; 564 | } 565 | 566 | input { 567 | background: transparent; 568 | text-align: center; 569 | border: 0; 570 | width: 11em; 571 | 572 | &:focus { 573 | outline: 0; 574 | border-radius: var(--radius-small); 575 | } 576 | } 577 | } 578 | 579 | // Footer =============================================================== 580 | .footer-wrapper { 581 | text-align: center; 582 | font-size: smaller; 583 | text-align: center; 584 | } 585 | 586 | .copyright { 587 | @extend %no-select; 588 | cursor: default; 589 | margin: 0 0 1.5rem; 590 | } 591 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | const gulp = require("gulp"); 2 | const git = require("gulp-git"); 3 | const del = require("del"); 4 | const slim = require("gulp-slim"); 5 | const htmlmin = require("gulp-htmlmin"); 6 | const sass = require("gulp-sass"); 7 | const autoprefixer = require("gulp-autoprefixer"); 8 | const cssnano = require("gulp-cssnano"); 9 | const browserSync = require("browser-sync").create(); 10 | const rename = require("gulp-rename"); 11 | 12 | // Resize screenshots 13 | var gm = require("gulp-gm"); 14 | var newer = require("gulp-newer"); 15 | var imagemin = require("gulp-imagemin"); 16 | 17 | gulp.task("resize", function () { 18 | gulp 19 | .src("_img/screenshots/*.*") 20 | .pipe(newer("small")) 21 | .pipe( 22 | gm(function (gmfile) { 23 | gmfile.setFormat("jpg").quality(90); 24 | return gmfile.resize(60, 45); 25 | }) 26 | ) 27 | .pipe(imagemin()) 28 | .pipe(gulp.dest("small")); 29 | }); 30 | 31 | // Repos as folders ---------------------------------------------------- 32 | let repos = [ 33 | "antiweather", 34 | "brain", 35 | "clippy", 36 | "csscreatures", 37 | "csspiechart", 38 | "flexplorer", 39 | "gradients", 40 | "image-effects", 41 | "scales", 42 | // "soteria", 43 | "trumptalk", 44 | "usa-css", 45 | // "usa-2200", // problem being this is built in parcel 46 | "ztext", 47 | ]; 48 | 49 | gulp.task("clean", () => { 50 | return del(repos); 51 | }); 52 | 53 | gulp.task("clone", async () => { 54 | repos.forEach((repo) => { 55 | let git_url = "https://github.com/bennettfeely/" + repo; 56 | 57 | git.clone(git_url, (err) => { 58 | if (err) throw err; 59 | }); 60 | }); 61 | }); 62 | 63 | gulp.task("build", gulp.series("clean", "clone")); 64 | 65 | // Homepage ------------------------------------------------------------ 66 | // gulp.task("sync", () => { 67 | // console.log("sync"); 68 | 69 | // return browserSync.init({ 70 | // server: { 71 | // baseDir: "", 72 | // }, 73 | // }); 74 | // }); 75 | 76 | gulp.task("slim", () => { 77 | return gulp 78 | .src("_src/*.slim") 79 | .pipe( 80 | slim({ 81 | pretty: true, 82 | }) 83 | ) 84 | .pipe( 85 | htmlmin({ 86 | collapseWhitespace: true, 87 | removeComments: true, 88 | minifyCSS: true, 89 | minifyJS: true, 90 | }) 91 | ) 92 | .pipe(gulp.dest("./")) 93 | .pipe( 94 | browserSync.reload({ 95 | stream: true, 96 | }) 97 | ); 98 | }); 99 | 100 | gulp.task("scss", () => { 101 | return gulp 102 | .src("_src/scss/*.scss") 103 | .pipe(sass()) 104 | .on("error", sass.logError) 105 | .pipe( 106 | autoprefixer({ 107 | browsers: ["last 2 versions"], 108 | cascade: false, 109 | }) 110 | ) 111 | .pipe(cssnano()) 112 | .pipe( 113 | rename(function (path) { 114 | path.basename += ".min"; 115 | path.extname = ".css"; 116 | }) 117 | ) 118 | .pipe(gulp.dest("./")) 119 | .pipe( 120 | browserSync.reload({ 121 | stream: true, 122 | }) 123 | ); 124 | }); 125 | 126 | gulp.task("default", () => { 127 | browserSync.init({ 128 | server: { 129 | baseDir: "./", 130 | }, 131 | }); 132 | 133 | gulp.watch(["_src/*.slim"], gulp.series(["slim"])); 134 | gulp.watch(["_src/scss/*.scss"], gulp.series(["scss"])); 135 | }); 136 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | Bennett Feely
Photo of Bennett Feely

Hello! My name is Bennett Feely. 
I make websites so you don't have to.

Recent Projects

Recent Work

Contact

-------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "netlify", 3 | "version": "1.0.0", 4 | "description": "Compiling repos for live demos on https://bennettfeely.com", 5 | "main": "gulpfile.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/bennettfeely/netlify.git" 12 | }, 13 | "author": "", 14 | "license": "ISC", 15 | "bugs": { 16 | "url": "https://github.com/bennettfeely/netlify/issues" 17 | }, 18 | "homepage": "https://github.com/bennettfeely/netlify#readme", 19 | "dependencies": { 20 | "browser-sync": "^2.26.12", 21 | "del": "^6.0.0", 22 | "gulp": "^4.0.2", 23 | "gulp-autoprefixer": "^7.0.1", 24 | "gulp-cssnano": "^2.1.3", 25 | "gulp-gm": "0.0.9", 26 | "gulp-htmlmin": "^5.0.1", 27 | "gulp-newer": "^1.4.0", 28 | "gulp-rename": "^2.0.0", 29 | "gulp-sass": "^4.1.0", 30 | "gulp-scss": "^1.4.0", 31 | "gulp-slim": "^0.3.0" 32 | }, 33 | "devDependencies": { 34 | "gulp-git": "^2.10.1", 35 | "gulp-image-resize": "^0.13.1", 36 | "gulp-imagemin": "^7.1.0" 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /style.min.css: -------------------------------------------------------------------------------- 1 | html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}[hidden],template{display:none}*,:after,:before{box-sizing:border-box}blockquote,button,details,h1,h2,h3,h4,h5,h6,li,ol,p,q,summary,ul{margin:0}blockquote,li,ol,ul{padding:0}body{text-rendering:optimizeLegibility;font-smoothing:antialiased;font-variant-ligatures:common-ligatures;scroll-behavior:smooth}input[type=range]{-webkit-appearance:none;background:transparent}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none}input[type=range]::-ms-track{width:100%;cursor:pointer;background:transparent;border-color:transparent;color:transparent}.copyright,h2,img,ul{-ms-user-select:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}img{-webkit-user-drag:none;-moz-user-drag:none;-ms-user-drag:none;user-drag:none}:root{--radius-small:0.25em;--radius-medium:0.5em;--radius-large:1em;--transition:0.35s;--transition-hover:0.1s;--duration:4s;--black:#16161d;--black-a:rgba(22,22,29,.15);--gray:#909099;--blue:#1e90ff;--blue-a:rgba(30,144,255,.3);--blue-dark:#005cb8;--blue-light:#52c3fb;--purple:#a029de;--purple-dark:#5f267d;--purple-muted:#a377d2;--white:#fff;--offwhite:#ccc;--sky-100:#3b2f4a;--sky-150:#302944;--sky-200:#1f1f3a;--sky-300:#16161d;--background-gradient:radial-gradient(circle at center bottom,var(--sky-100),var(--sky-200),var(--sky-300));--background:var(--white);--text-color:var(--black);--text-color-a:var(--gray);--link-color:var(--blue);--link-color-hover:var(--blue);--link-color-visited:var(--purple);--link-color-visited-hover:var(--purple)}body{position:relative;font:100%/1.5 Nunito,sans-serif;color:var(--text-color);overflow-x:hidden}.header-wrapper{max-width:35em;margin:0 auto;text-align:center;padding-top:1.5em}@media (min-width:40em){.header-wrapper{max-width:42em}}@media (min-width:60em){.header-wrapper{max-width:50em}}.main-wrapper{margin:1.5em auto 0;max-width:35em}@media (min-width:40em){.main-wrapper{margin:0 auto;max-width:25em;padding:2.5em 0}}.container{position:relative;padding:2rem}.footer-wrapper .container,.header-wrapper .container{padding:1.5em 0;margin:0 1.5em}.contact-wrapper .container{text-align:center;margin:1.5rem auto;padding:0 1.5rem}@media (min-width:40em){.contact-wrapper .container{max-width:42em}}@media (min-width:60em){.contact-wrapper .container{max-width:50em}}h1,h2{font-weight:400;line-height:1.2}h1{font-size:1.5em}@media (min-width:60em){h1{font-size:2em}}h2{display:block;cursor:default;text-align:center;font-size:1.25em;opacity:.75}a{text-decoration:none}.outline,a{color:var(--text-color)}.outline{position:relative;border-radius:var(--radius-large)}.outline:before{display:block;content:"";position:absolute;top:50%;left:0;right:0;height:1px;background:var(--black-a)}.outline span{position:relative;display:inline-block;z-index:1;background:var(--background);padding:.5em 1em}header .container{text-align:center}@media (min-width:40em){header .container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;text-align:left}}@media (min-width:40em){header h1{-ms-flex:1;flex:1;-ms-flex-align:center;align-items:center}}@media (max-width:40em){header br{display:none}}.me{width:6em;height:6em;border-radius:50%;margin:0 0 .5rem}@media (min-width:40em){.me{width:7em;height:7em;margin:0 1.5rem 0 0}}@media (min-width:60em){.me{width:8em;height:8em}}.job-wrapper{max-width:40em;margin:0 auto;text-align:center}.job-wrapper .outline{margin:0 1.5em;border-radius:var(--radius-large);padding:1.5em;border-color:hsla(0,0%,50%,.3)}.job-wrapper p{font-size:1em;margin-top:1em}.job-wrapper a{display:inline-block;margin-top:1em;font-weight:700;color:var(--link-color);padding:.5em 1.5em;border-radius:var(--radius-medium);transition:background var(--transition),color var(--transition),box-shadow var(--transition);box-shadow:inset 0 0 0 .1em var(--blue-a),0 0 0 0 transparent}.job-wrapper a:hover{background:var(--blue-a);color:var(--link-color-hover);box-shadow:inset 0 0 0 .1em transparent,0 0 0 .25em var(--blue-a)}ul{font-size:1.2em}li{position:relative;list-style:none}.contact-link,.project-link{display:block;position:relative;cursor:pointer;padding:1.5rem 0}.contact-link strong,.project-link strong{color:var(--link-color);transition:color var(--transition)}.contact-link:hover strong,.project-link:hover strong{color:var(--link-color-hover)}.contact-link:visited strong,.project-link:visited strong{color:var(--link-color-visited)}.contact-link:visited:hover strong,.project-link:visited:hover strong{color:var(--link-color-visited-hover)}@media (min-width:40em){.contact-link,.project-link{transition:background-color var(--transition);border-radius:var(--radius-medium);margin:1rem 0;padding:1.5rem}.contact-link:hover,.project-link:hover{background:var(--blue-a);transition-duration:var(--transition-hover)}}.project-link{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.project:nth-child(odd) .project-link{-ms-flex-direction:row-reverse;flex-direction:row-reverse}.screenshot-wrapper{min-width:50%;max-width:50%;height:auto;margin:0 1.5rem 0 0;transition:transform var(--transition);transform:scale(.9)}.project:nth-child(odd) .screenshot-wrapper{margin:0 0 0 1.5rem}.project-link:hover .screenshot-wrapper{transform:scale(1);transition-duration:var(--transition-hover)}@media (min-width:40em){.screenshot-wrapper{position:absolute;z-index:1;width:12em;height:9em}.project:nth-child(odd) .screenshot-wrapper{margin:0}}.screenshot{width:100%;height:auto;border-radius:var(--radius-small);box-shadow:0 2.5em 5em var(--offwhite);box-shadow:0 2em 2em -1em var(--offwhite)}@media (min-width:40em){.screenshot{display:block;width:100%;height:auto;transition:box-shadow var(--transition)}}.project-link:hover .screenshot{box-shadow:0 1em 2em var(--offwhite)}@media (min-width:40em){.line{position:absolute;content:"";width:10em;height:1px;background:var(--text-color);opacity:.25;pointer-events:none;top:50%;transition:opacity var(--transition)}.project-link:hover .line{opacity:1}}.project:nth-child(odd) .line{right:calc(100% + .5em);transform-origin:center right}@media (min-width:40em){.project:nth-child(odd) .screenshot-wrapper{right:calc(100% + 2.5rem)}}@media (min-width:60em){.project:nth-child(odd) .screenshot-wrapper{right:calc(100% + 5rem)}}.project:nth-child(odd) .screenshot-wrapper .screenshot{transform:rotate(5deg)}@media (min-width:40em){.project:first-child .line{transform:rotate(6deg)}.project:first-child .screenshot-wrapper{top:-40%}.project:first-child .screenshot-wrapper .screenshot{transform:rotate(4deg)}.project:nth-child(3) .line{transform:rotate(14deg)}.project:nth-child(3) .screenshot-wrapper{top:-45%}.project:nth-child(3) .screenshot-wrapper .screenshot{transform:rotate(-2deg)}.project:nth-child(5) .line{transform:rotate(-5deg)}.project:nth-child(5) .screenshot-wrapper{top:-35%}.project:nth-child(5) .screenshot-wrapper .screenshot{transform:rotate(8deg)}.project:nth-child(7) .line{transform:rotate(5deg)}.project:nth-child(7) .screenshot-wrapper{top:-20%}.project:nth-child(7) .screenshot-wrapper .screenshot{transform:rotate(-8deg)}}.project:nth-child(2n) .line{left:calc(100% + .5em);transform-origin:center left}@media (min-width:40em){.project:nth-child(2n) .screenshot-wrapper{left:calc(100% + 2.5rem)}}@media (min-width:60em){.project:nth-child(2n) .screenshot-wrapper{left:calc(100% + 5rem)}}.project:nth-child(2n) .screenshot-wrapper .screenshot{transform:rotate(-5deg)}@media (min-width:40em){.project:nth-child(2n) .line{transform-origin:left center}.project:nth-child(2n) .screenshot img{transform:rotate(-5deg)}.project:nth-child(2) .line{transform:rotate(-25deg)}.project:nth-child(2) .screenshot-wrapper{top:-80%}.project:nth-child(2) .screenshot-wrapper .screenshot{transform:rotate(-8deg)}.project:nth-child(4) .line{transform:rotate(-25deg)}.project:nth-child(4) .screenshot-wrapper{top:-60%}.project:nth-child(4) .screenshot-wrapper .screenshot{transform:rotate(2deg)}.project:nth-child(6) .line{transform:rotate(-18deg)}.project:nth-child(6) .screenshot-wrapper{top:-70%}.project:nth-child(6) .screenshot-wrapper .screenshot{transform:rotate(8deg)}}@media (min-width:40em){.contacts{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;border:none}}.contact{-ms-flex:1 0 50%;flex:1 0 50%}.contact-link{display:block;padding:1rem 1.5rem}.email-link{cursor:text}.email-link strong{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.email-link input{background:transparent;text-align:center;border:0;width:11em}.email-link input:focus{outline:0;border-radius:var(--radius-small)}.footer-wrapper{font-size:smaller;text-align:center}.copyright{cursor:default;margin:0 0 1.5rem} --------------------------------------------------------------------------------