├── .gitignore ├── CNAME ├── README.md ├── _includes ├── _footer.jade ├── _header.jade ├── _jquerycourse-form.jade ├── _menu.jade ├── _popular-episodes.jade └── _testimonial-carousel.jade ├── _layouts └── _head.jade ├── assets ├── css │ ├── 1-tools │ │ ├── _fonts.scss │ │ ├── _normalize.scss │ │ └── _vars.sass │ ├── 2-basics │ │ ├── _body-element.sass │ │ ├── _buttons.sass │ │ ├── _forms.sass │ │ ├── _links.sass │ │ ├── _selection-colors.sass │ │ └── _typography.sass │ ├── 3-modules │ │ ├── _carousel.sass │ │ ├── _content-well.sass │ │ ├── _flex-video.sass │ │ ├── _footer.sass │ │ ├── _header.sass │ │ ├── _link-list.sass │ │ ├── _media-object.sass │ │ ├── _menu.sass │ │ ├── _patreon-section.sass │ │ ├── _popular-episodes.sass │ │ ├── _sections.sass │ │ └── _video-cascade.sass │ ├── 4-pages │ │ ├── _page-gifs.sass │ │ ├── _page-home.sass │ │ └── _page-jquerycourse.sass │ ├── main.css │ └── main.sass ├── img │ ├── aleksi.jpg │ ├── arc.svg │ ├── devtips-logo.svg │ ├── icn │ │ ├── ic_arrow_left.svg │ │ ├── ic_arrow_right.svg │ │ ├── ic_close.svg │ │ ├── ic_gif.svg │ │ ├── ic_home.svg │ │ ├── ic_jquery.svg │ │ ├── ic_menu.svg │ │ ├── ic_patreon.svg │ │ ├── ic_play_circle_filled.svg │ │ ├── ic_settings_overscan.svg │ │ ├── ic_text_format.svg │ │ ├── ic_view_carousel.svg │ │ ├── ic_youtube.svg │ │ ├── pat-chat.svg │ │ ├── pat-hang.svg │ │ ├── pat-pod.svg │ │ └── pat-vids.svg │ ├── learnjquery-cover1.jpg │ ├── learnjquery-cover2.jpg │ ├── learnjquery-cover3.jpg │ ├── topRect.svg │ └── topRect2.svg └── js │ ├── functions.js │ └── jquery-2.2.2.min.js ├── config.codekit ├── design-files └── devtipsshow.com.sketch ├── favicon.ico ├── gifs ├── blow.gif ├── bobbing.gif ├── camauri.gif ├── index.html ├── index.jade ├── magical.gif ├── pinch.gif ├── sad.gif ├── suprise.gif ├── thelook.gif └── waiting.gif ├── index.html ├── index.jade ├── jquerycourse └── index.html └── killingitwithjquery ├── index.html └── index.jade /.gitignore: -------------------------------------------------------------------------------- 1 | ### OSX ### 2 | .DS_Store 3 | .AppleDouble 4 | .LSOverride 5 | 6 | # Icon must end with two \r 7 | Icon 8 | 9 | 10 | # Thumbnails 11 | ._* 12 | 13 | # Files that might appear in the root of a volume 14 | .DocumentRevisions-V100 15 | .fseventsd 16 | .Spotlight-V100 17 | .TemporaryItems 18 | .Trashes 19 | .VolumeIcon.icns 20 | 21 | # Directories potentially created on remote AFP share 22 | .AppleDB 23 | .AppleDesktop 24 | Network Trash Folder 25 | Temporary Items 26 | .apdisk 27 | 28 | 29 | ### CodeKit ### 30 | # General CodeKit files to ignore 31 | config.codekit 32 | /min 33 | 34 | 35 | ### Sass ### 36 | .sass-cache/ 37 | *.css.map 38 | 39 | 40 | ### Jekyll ### 41 | _site/ 42 | .sass-cache/ 43 | .jekyll-metadata 44 | -------------------------------------------------------------------------------- /CNAME: -------------------------------------------------------------------------------- 1 | devtipsshow.com 2 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # DevTipsShowWebsite 2 | This is the official website of the DevTips YouTube channel. 3 | 4 | V1 was built in about 3 days. I documented the whole thing with videos! Yay! YouTube!! [Watch the playlist](https://www.youtube.com/playlist?list=PLqGj3iMvMa4KXCYyFCQnC2ZNmZyoMAj8L) 5 | -------------------------------------------------------------------------------- /_includes/_footer.jade: -------------------------------------------------------------------------------- 1 | footer.white.tint-reversed 2 | .constrainer 3 | ul.link-list.text-center 4 | li: a(href="http://travandlos.com") Late Nights with Trav & Los 5 | li: a(href="http://travisneilson.com/notes") Email Articles & Notes 6 | li: a(href="http://travisneilson.com") TravisNeilson.com 7 | li(style="color: hsla(0,0%,100%,0.4)") Copyright 2016 8 | -------------------------------------------------------------------------------- /_includes/_header.jade: -------------------------------------------------------------------------------- 1 | header 2 | include ../assets/img/devtips-logo.svg 3 | include ../assets/img/icn/ic_menu.svg 4 | -------------------------------------------------------------------------------- /_includes/_jquerycourse-form.jade: -------------------------------------------------------------------------------- 1 | form.jquerycourse-form(action='https://gumroad.com/follow_from_embed_form', method='post') 2 | input(name='seller_id', type='hidden', value='2449985483245') 3 | input(name='email', placeholder='Enter your email', type='email' id="email") 4 | div 5 | button(data-custom-highlight-color='', type='submit' class="jquerycourse-submit") Tell me when it's ready! 6 | -------------------------------------------------------------------------------- /_includes/_menu.jade: -------------------------------------------------------------------------------- 1 | .menu-overlay 2 | 3 | .menu-plate 4 | 5 | .menu-close 6 | include ../assets/img/icn/ic_close.svg 7 | 8 | ul.menu 9 | 10 | li: a(href="/") 11 | include ../assets/img/icn/ic_home.svg 12 | .double-line Home 13 | span What is DevTips? 14 | 15 | 16 | li: a(href="/killingitwithjquery") 17 | include ../assets/img/icn/ic_jquery.svg 18 | .double-line Killing it with jQuery 19 | span video courses 20 | 21 | li: a(href="/gifs") 22 | include ../assets/img/icn/ic_gif.svg 23 | .double-line Animated Gifs! 24 | span make the internet weird 25 | 26 | li: hr 27 | 28 | li: a(href="https://www.youtube.com/user/DevTipsForDesigners") 29 | include ../assets/img/icn/ic_youtube.svg 30 | .double-line YouTube Videos 31 | span Hundreds for free 32 | 33 | li: a(href="https://www.patreon.com/DevTips") 34 | include ../assets/img/icn/ic_patreon.svg 35 | .double-line Patreon Community 36 | span Extra content + Friends 37 | 38 | -------------------------------------------------------------------------------- /_includes/_popular-episodes.jade: -------------------------------------------------------------------------------- 1 | mixin popular-episode(url, img, title, count, duration) 2 | a(href="#{url}").video-unit 3 | .media 4 | img(src="#{img}") 5 | .desc 6 | .title #{title} 7 | .muted-extra.meta #{count} • #{duration} 8 | 9 | 10 | .popular-list 11 | +popular-episode( 12 | 'https://www.youtube.com/playlist?list=PLqGj3iMvMa4KQZUkRjfwMmTq_f1fbxerI', 13 | 'https://i.ytimg.com/vi/VcMjo_wczCc/mqdefault.jpg', 14 | 'How to Build a Responsive Website from Start to Finish', 15 | '26 videos', 16 | '10hrs 46min') 17 | 18 | +popular-episode( 19 | 'https://www.youtube.com/playlist?list=PLqGj3iMvMa4IyCbhul-PdeiDqmh4ooJzk', 20 | 'https://i.ytimg.com/vi/STwoa-9jxi0/mqdefault.jpg', 21 | 'Parallax on the Web', 22 | '10 videos', 23 | '3hrs 7min') 24 | 25 | +popular-episode( 26 | 'https://www.youtube.com/watch?v=OFDAGiPJHL8', 27 | 'https://i.ytimg.com/vi/OFDAGiPJHL8/mqdefault.jpg', 28 | 'Advice and Crap for Young Creators', 29 | '1 video', 30 | '8min') 31 | 32 | +popular-episode( 33 | 'https://www.youtube.com/watch?v=G7EIAgfkhmg', 34 | 'https://i.ytimg.com/vi/G7EIAgfkhmg/mqdefault.jpg', 35 | 'CSS FlexBox Essentials', 36 | '2 videos', 37 | '1hr 6 min') 38 | 39 | +popular-episode( 40 | 'https://www.youtube.com/playlist?list=PLqGj3iMvMa4KeBN2krBtcO3U90_7SOl-A', 41 | 'https://i.ytimg.com/vi/sJhhLvW-Xvg/mqdefault.jpg', 42 | 'Design + Code my Personal Website in 12 hours', 43 | '28 videos', 44 | '12hrs 31 min') 45 | 46 | +popular-episode( 47 | 'https://www.youtube.com/watch?v=QLbUzwxkwHA', 48 | 'https://i.ytimg.com/vi/QLbUzwxkwHA/mqdefault.jpg', 49 | 'My First Websites Were Horrible!', 50 | '1 video', 51 | '18min') 52 | -------------------------------------------------------------------------------- /_includes/_testimonial-carousel.jade: -------------------------------------------------------------------------------- 1 | mixin testimonial(img, name, words) 2 | .carousel-unit.media-object 3 | .media: img.avatar(src="#{img}") 4 | .testimonial-words.content #{words} 5 | div: cite — #{name} 6 | 7 | 8 | .carousel-wrap 9 | +testimonial( 10 | '/assets/img/aleksi.jpg', 11 | 'Aleksi Älli', 12 | 'This is not fair. All the trouble that I\'ve faced trying to learn jQuery in my past and now you are making it so easy to understand. Thanks a lot Travis ... I want my spent hundreds of hours back.') 13 | 14 | +testimonial( 15 | 'https://yt3.ggpht.com/-oOjN-nQRUj8/AAAAAAAAAAI/AAAAAAAAAAA/0jeOKM_yY8Q/s48-c-k-no-rj-c0xffffff/photo.jpg', 16 | 'Yonder', 17 | 'Two weeks ago I said I need to learn jQuery and when I heard you are planning to make jQuery series, I stopped and waited for you. Thanks again man.') 18 | 19 | +testimonial( 20 | 'https://yt3.ggpht.com/-5RoSkNBT5Co/AAAAAAAAAAI/AAAAAAAAAAA/531Kn-eUL1o/s48-c-k-no-rj-c0xffffff/photo.jpg', 21 | 'Jalil Tagizade', 22 | 'Finaaaaallllllyyyyyyyyy Trav, I\'ve been waitin for this for a long time') 23 | -------------------------------------------------------------------------------- /_layouts/_head.jade: -------------------------------------------------------------------------------- 1 | - var htmlClass = ''; 2 | block vars 3 | 4 | doctype html 5 | html(lang='en' class='#{htmlClass}') 6 | head 7 | title DevTips Show 8 | meta(charset='utf-8') 9 | meta(name='viewport', content='width=device-width, initial-scale=1') 10 | link(rel='shortcut icon', href='/assets/img/favicons/favicon.ico') 11 | link(rel='stylesheet', href='/assets/css/main.css') 12 | body 13 | 14 | 15 | .top-rect 16 | 17 | 18 | include ../_includes/_header.jade 19 | 20 | block content 21 | 22 | 23 | include ../_includes/_footer.jade 24 | 25 | include ../_includes/_menu.jade 26 | 27 | script(src='/assets/js/jquery-2.2.2.min.js') 28 | script(src='/assets/js/functions.js', type='text/javascript') 29 | -------------------------------------------------------------------------------- /assets/css/1-tools/_fonts.scss: -------------------------------------------------------------------------------- 1 | @import url(https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic); 2 | -------------------------------------------------------------------------------- /assets/css/1-tools/_normalize.scss: -------------------------------------------------------------------------------- 1 | /*! normalize.css v4.0.0 | MIT License | github.com/necolas/normalize.css */ 2 | 3 | /** 4 | * 1. Change the default font family in all browsers (opinionated). 5 | * 2. Prevent adjustments of font size after orientation changes in IE and iOS. 6 | */ 7 | 8 | html { 9 | font-family: sans-serif; /* 1 */ 10 | -ms-text-size-adjust: 100%; /* 2 */ 11 | -webkit-text-size-adjust: 100%; /* 2 */ 12 | } 13 | 14 | /** 15 | * Remove the margin in all browsers (opinionated). 16 | */ 17 | 18 | body { 19 | margin: 0; 20 | } 21 | 22 | /* HTML5 display definitions 23 | ========================================================================== */ 24 | 25 | /** 26 | * Add the correct display in IE 9-. 27 | * 1. Add the correct display in Edge, IE, and Firefox. 28 | * 2. Add the correct display in IE. 29 | */ 30 | 31 | article, 32 | aside, 33 | details, /* 1 */ 34 | figcaption, 35 | figure, 36 | footer, 37 | header, 38 | main, /* 2 */ 39 | menu, 40 | nav, 41 | section, 42 | summary { /* 1 */ 43 | display: block; 44 | } 45 | 46 | /** 47 | * Add the correct display in IE 9-. 48 | */ 49 | 50 | audio, 51 | canvas, 52 | progress, 53 | video { 54 | display: inline-block; 55 | } 56 | 57 | /** 58 | * Add the correct display in iOS 4-7. 59 | */ 60 | 61 | audio:not([controls]) { 62 | display: none; 63 | height: 0; 64 | } 65 | 66 | /** 67 | * Add the correct vertical alignment in Chrome, Firefox, and Opera. 68 | */ 69 | 70 | progress { 71 | vertical-align: baseline; 72 | } 73 | 74 | /** 75 | * Add the correct display in IE 10-. 76 | * 1. Add the correct display in IE. 77 | */ 78 | 79 | template, /* 1 */ 80 | [hidden] { 81 | display: none; 82 | } 83 | 84 | /* Links 85 | ========================================================================== */ 86 | 87 | /** 88 | * Remove the gray background on active links in IE 10. 89 | */ 90 | 91 | a { 92 | background-color: transparent; 93 | } 94 | 95 | /** 96 | * Remove the outline on focused links when they are also active or hovered 97 | * in all browsers (opinionated). 98 | */ 99 | 100 | a:active, 101 | a:hover { 102 | outline-width: 0; 103 | } 104 | 105 | /* Text-level semantics 106 | ========================================================================== */ 107 | 108 | /** 109 | * 1. Remove the bottom border in Firefox 39-. 110 | * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. 111 | */ 112 | 113 | abbr[title] { 114 | border-bottom: none; /* 1 */ 115 | text-decoration: underline; /* 2 */ 116 | text-decoration: underline dotted; /* 2 */ 117 | } 118 | 119 | /** 120 | * Prevent the duplicate application of `bolder` by the next rule in Safari 6. 121 | */ 122 | 123 | b, 124 | strong { 125 | font-weight: inherit; 126 | } 127 | 128 | /** 129 | * Add the correct font weight in Chrome, Edge, and Safari. 130 | */ 131 | 132 | b, 133 | strong { 134 | font-weight: bolder; 135 | } 136 | 137 | /** 138 | * Add the correct font style in Android 4.3-. 139 | */ 140 | 141 | dfn { 142 | font-style: italic; 143 | } 144 | 145 | /** 146 | * Correct the font size and margin on `h1` elements within `section` and 147 | * `article` contexts in Chrome, Firefox, and Safari. 148 | */ 149 | 150 | h1 { 151 | font-size: 2em; 152 | margin: 0.67em 0; 153 | } 154 | 155 | /** 156 | * Add the correct background and color in IE 9-. 157 | */ 158 | 159 | mark { 160 | background-color: #ff0; 161 | color: #000; 162 | } 163 | 164 | /** 165 | * Add the correct font size in all browsers. 166 | */ 167 | 168 | small { 169 | font-size: 80%; 170 | } 171 | 172 | /** 173 | * Prevent `sub` and `sup` elements from affecting the line height in 174 | * all browsers. 175 | */ 176 | 177 | sub, 178 | sup { 179 | font-size: 75%; 180 | line-height: 0; 181 | position: relative; 182 | vertical-align: baseline; 183 | } 184 | 185 | sub { 186 | bottom: -0.25em; 187 | } 188 | 189 | sup { 190 | top: -0.5em; 191 | } 192 | 193 | /* Embedded content 194 | ========================================================================== */ 195 | 196 | /** 197 | * Remove the border on images inside links in IE 10-. 198 | */ 199 | 200 | img { 201 | border-style: none; 202 | } 203 | 204 | /** 205 | * Hide the overflow in IE. 206 | */ 207 | 208 | svg:not(:root) { 209 | overflow: hidden; 210 | } 211 | 212 | /* Grouping content 213 | ========================================================================== */ 214 | 215 | /** 216 | * 1. Correct the inheritance and scaling of font size in all browsers. 217 | * 2. Correct the odd `em` font sizing in all browsers. 218 | */ 219 | 220 | code, 221 | kbd, 222 | pre, 223 | samp { 224 | font-family: monospace, monospace; /* 1 */ 225 | font-size: 1em; /* 2 */ 226 | } 227 | 228 | /** 229 | * Add the correct margin in IE 8. 230 | */ 231 | 232 | figure { 233 | margin: 1em 40px; 234 | } 235 | 236 | /** 237 | * 1. Add the correct box sizing in Firefox. 238 | * 2. Show the overflow in Edge and IE. 239 | */ 240 | 241 | hr { 242 | box-sizing: content-box; /* 1 */ 243 | height: 0; /* 1 */ 244 | overflow: visible; /* 2 */ 245 | } 246 | 247 | /* Forms 248 | ========================================================================== */ 249 | 250 | /** 251 | * Change font properties to `inherit` in all browsers (opinionated). 252 | */ 253 | 254 | button, 255 | input, 256 | select, 257 | textarea { 258 | font: inherit; 259 | } 260 | 261 | /** 262 | * Restore the font weight unset by the previous rule. 263 | */ 264 | 265 | optgroup { 266 | font-weight: bold; 267 | } 268 | 269 | /** 270 | * Show the overflow in IE. 271 | * 1. Show the overflow in Edge. 272 | * 2. Show the overflow in Edge, Firefox, and IE. 273 | */ 274 | 275 | button, 276 | input, /* 1 */ 277 | select { /* 2 */ 278 | overflow: visible; 279 | } 280 | 281 | /** 282 | * Remove the margin in Safari. 283 | * 1. Remove the margin in Firefox and Safari. 284 | */ 285 | 286 | button, 287 | input, 288 | select, 289 | textarea { /* 1 */ 290 | margin: 0; 291 | } 292 | 293 | /** 294 | * Remove the inheritence of text transform in Edge, Firefox, and IE. 295 | * 1. Remove the inheritence of text transform in Firefox. 296 | */ 297 | 298 | button, 299 | select { /* 1 */ 300 | text-transform: none; 301 | } 302 | 303 | /** 304 | * Change the cursor in all browsers (opinionated). 305 | */ 306 | 307 | button, 308 | [type="button"], 309 | [type="reset"], 310 | [type="submit"] { 311 | cursor: pointer; 312 | } 313 | 314 | /** 315 | * Restore the default cursor to disabled elements unset by the previous rule. 316 | */ 317 | 318 | [disabled] { 319 | cursor: default; 320 | } 321 | 322 | /** 323 | * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` 324 | * controls in Android 4. 325 | * 2. Correct the inability to style clickable types in iOS. 326 | */ 327 | 328 | button, 329 | html [type="button"], /* 1 */ 330 | [type="reset"], 331 | [type="submit"] { 332 | -webkit-appearance: button; /* 2 */ 333 | } 334 | 335 | /** 336 | * Remove the inner border and padding in Firefox. 337 | */ 338 | 339 | button::-moz-focus-inner, 340 | input::-moz-focus-inner { 341 | border: 0; 342 | padding: 0; 343 | } 344 | 345 | /** 346 | * Restore the focus styles unset by the previous rule. 347 | */ 348 | 349 | button:-moz-focusring, 350 | input:-moz-focusring { 351 | outline: 1px dotted ButtonText; 352 | } 353 | 354 | /** 355 | * Change the border, margin, and padding in all browsers (opinionated). 356 | */ 357 | 358 | fieldset { 359 | border: 1px solid #c0c0c0; 360 | margin: 0 2px; 361 | padding: 0.35em 0.625em 0.75em; 362 | } 363 | 364 | /** 365 | * 1. Correct the text wrapping in Edge and IE. 366 | * 2. Correct the color inheritance from `fieldset` elements in IE. 367 | * 3. Remove the padding so developers are not caught out when they zero out 368 | * `fieldset` elements in all browsers. 369 | */ 370 | 371 | legend { 372 | box-sizing: border-box; /* 1 */ 373 | color: inherit; /* 2 */ 374 | display: table; /* 1 */ 375 | max-width: 100%; /* 1 */ 376 | padding: 0; /* 3 */ 377 | white-space: normal; /* 1 */ 378 | } 379 | 380 | /** 381 | * Remove the default vertical scrollbar in IE. 382 | */ 383 | 384 | textarea { 385 | overflow: auto; 386 | } 387 | 388 | /** 389 | * 1. Add the correct box sizing in IE 10-. 390 | * 2. Remove the padding in IE 10-. 391 | */ 392 | 393 | [type="checkbox"], 394 | [type="radio"] { 395 | box-sizing: border-box; /* 1 */ 396 | padding: 0; /* 2 */ 397 | } 398 | 399 | /** 400 | * Correct the cursor style of increment and decrement buttons in Chrome. 401 | */ 402 | 403 | [type="number"]::-webkit-inner-spin-button, 404 | [type="number"]::-webkit-outer-spin-button { 405 | height: auto; 406 | } 407 | 408 | /** 409 | * Correct the odd appearance of search inputs in Chrome and Safari. 410 | */ 411 | 412 | [type="search"] { 413 | -webkit-appearance: textfield; 414 | } 415 | 416 | /** 417 | * Remove the inner padding and cancel buttons in Chrome on OS X and 418 | * Safari on OS X. 419 | */ 420 | 421 | [type="search"]::-webkit-search-cancel-button, 422 | [type="search"]::-webkit-search-decoration { 423 | -webkit-appearance: none; 424 | } 425 | -------------------------------------------------------------------------------- /assets/css/1-tools/_vars.sass: -------------------------------------------------------------------------------- 1 | // 2 | // Some Useful color Vars via http://clrs.cc/ 3 | // 4 | 5 | // Cool 6 | $aqua: #7FDBFF 7 | $blue: #0074D9 8 | $navy: #001F3F 9 | $teal: #39CCCC 10 | $green: #2ECC40 11 | $olive: #3D9970 12 | $lime: #01FF70 13 | 14 | 15 | // Warm 16 | $yellow: #FFDC00 17 | $orange: #FF851B 18 | $red: #FF4136 19 | $fuchsia: #F012BE 20 | $purple: #B10DC9 21 | $maroon: #85144B 22 | 23 | 24 | // Gray Scale 25 | $white: #fff 26 | $silver: #ddd 27 | $gray: #aaa 28 | $black: #111 29 | 30 | 31 | // 32 | // Add whatever variables you would like made available to the whole app 33 | // 34 | -------------------------------------------------------------------------------- /assets/css/2-basics/_body-element.sass: -------------------------------------------------------------------------------- 1 | body 2 | background-color: white 3 | font-size: 14px 4 | line-height: 1.6 5 | font-family: 'Roboto', sans-serif 6 | color: hsla(0,0%,0%,0.7) 7 | margin: 0 8 | padding: 0 9 | -webkit-font-smoothing: antialiased 10 | -webkit-text-size-adjust: 100% 11 | -------------------------------------------------------------------------------- /assets/css/2-basics/_buttons.sass: -------------------------------------------------------------------------------- 1 | .button, 2 | button, 3 | input[type="submit"], 4 | input[type="reset"], 5 | input[type="button"] 6 | display: inline-block 7 | //height: 38px 8 | padding: 5px 20px 9 | color: #555 10 | text-align: center 11 | //font-size: 11px 12 | //font-weight: 600 13 | //line-height: 38px 14 | //letter-spacing: .1rem 15 | //text-transform: uppercase 16 | text-decoration: none 17 | white-space: nowrap 18 | background-color: transparent 19 | border-radius: 4px 20 | border: 1px solid #bbb 21 | cursor: pointer 22 | box-sizing: border-box 23 | 24 | &:hover, 25 | &:active, 26 | &:focus 27 | color: inherit 28 | border-color: #888 29 | outline: 0 30 | -------------------------------------------------------------------------------- /assets/css/2-basics/_forms.sass: -------------------------------------------------------------------------------- 1 | form 2 | margin-bottom: 20px 3 | 4 | input[type="text"], 5 | input[type="email"] 6 | padding: 5px 10px 7 | border: 1px solid hsla(0,0%,0%,0.5) 8 | border-radius: 3px 9 | width: 100% 10 | margin-bottom: 10px 11 | box-sizing: border-box 12 | 13 | input, 14 | textarea 15 | font-size: 16px 16 | -webkit-appearance: none 17 | &:focus 18 | outline: none 19 | 20 | 21 | // Validaiton 22 | input.needsfilled 23 | border-color: $orange !important 24 | color: $orange !important 25 | -------------------------------------------------------------------------------- /assets/css/2-basics/_links.sass: -------------------------------------------------------------------------------- 1 | a 2 | color: inherit 3 | text-decoration: none 4 | outline: 0 5 | border-bottom: 2px solid hsla(0,0%,0%,0.15) 6 | 7 | &:hover, 8 | &:focus 9 | color: inherit 10 | border-bottom-color: hsla(0,0%,0%,0.3) 11 | 12 | &.white, 13 | &.white-hard, 14 | border-bottom-color: hsla(0,0%,100%,0.3) 15 | 16 | &:hover, 17 | &:focus 18 | color: white 19 | -------------------------------------------------------------------------------- /assets/css/2-basics/_selection-colors.sass: -------------------------------------------------------------------------------- 1 | // ::selection 2 | // background: #FFF498 3 | // 4 | // ::-moz-selection 5 | // background: #FFF498 6 | // 7 | // img::selection 8 | // background: transparent 9 | // 10 | // img::-moz-selection 11 | // background: transparent 12 | // 13 | // body 14 | // -webkit-tap-highlight-color: #FFF498 15 | -------------------------------------------------------------------------------- /assets/css/2-basics/_typography.sass: -------------------------------------------------------------------------------- 1 | // Headings 2 | 3 | .gigantic, .huge, .large, .bigger, .big, 4 | h1, h2, h3, h4, h5, h6 5 | color: #222 6 | font-weight: bold 7 | margin: 0 8 | margin-bottom: 20px 9 | 10 | .gigantic 11 | font-size: 110px 12 | line-height: 1.09 13 | letter-spacing: -2px 14 | 15 | .huge, h1 16 | font-size: 68px 17 | line-height: 1.05 18 | letter-spacing: -1px 19 | 20 | .large, h2 21 | font-size: 42px 22 | line-height: 1.14 23 | 24 | .bigger, h3 25 | font-size: 26px 26 | line-height: 1.38 27 | 28 | .big, h4 29 | font-size: 22px 30 | line-height: 1.38 31 | 32 | .small, small 33 | font-size: 10px 34 | line-height: 1.2 35 | 36 | 37 | // Basic Text Style 38 | 39 | p 40 | margin: 0 0 20px 0 41 | 42 | em 43 | font-style: italic 44 | 45 | strong 46 | font-weight: bold 47 | color: hsla(0,0%,0%,0.9) 48 | 49 | hr 50 | border: solid #ddd 51 | border-width: 1px 0 0 52 | clear: both 53 | margin: 10px 0 30px 54 | height: 0 55 | 56 | &.section-title-rule 57 | border-top: 2px solid #F5E830 58 | width: 100px 59 | margin: 10px auto 30px 60 | 61 | .tint-reversed & 62 | border-top-color: hsla(0,0%,100%,0.2) 63 | 64 | 65 | // Project Type Styles 66 | 67 | .section-head 68 | font: 69 | size: 18px 70 | //weight: 300 71 | color: hsla(0,0%,0%,0.8) 72 | text-align: center 73 | 74 | .lead 75 | font: 76 | size: 16px 77 | weight: 400 78 | color: hsla(0,0%,0%,0.8) 79 | 80 | .bold 81 | font: 82 | weight: 600 83 | 84 | .regular 85 | font: 86 | size: 14px 87 | weight: 400 88 | color: hsla(0,0%,0%,0.8) 89 | 90 | .muted 91 | font: 92 | size: 13px 93 | style: italic 94 | 95 | .muted-extra 96 | font: 97 | size: 12px 98 | weight: 400 99 | color: hsla(0,0%,0%,0.5) 100 | 101 | .blue 102 | color: #0067AF 103 | 104 | .black 105 | color: hsla(0,0%,0%,1) 106 | 107 | .white 108 | color: hsla(0,0%,100%,0.8) 109 | 110 | .white-hard 111 | color: hsla(0,0%,100%,1) 112 | 113 | .text-center 114 | text-align: center 115 | 116 | .text-right 117 | text-align: right 118 | -------------------------------------------------------------------------------- /assets/css/3-modules/_carousel.sass: -------------------------------------------------------------------------------- 1 | section.testimonials 2 | overflow: hidden 3 | 4 | .carousel-nav-wrap 5 | height: 30px 6 | margin-bottom: 20px 7 | position: relative 8 | 9 | 10 | 11 | &:after 12 | content: '' 13 | display: block 14 | position: absolute 15 | z-index: -1 16 | width: 200px 17 | height: 25px 18 | background: rgba(249, 236, 49, 0.3) 19 | top: 0px 20 | left: -10px 21 | transform: rotate(-2deg) skewX(10deg) 22 | 23 | .carousel-nav 24 | float: right 25 | 26 | svg 27 | cursor: pointer 28 | fill: rgba(0,0,0,0.54) 29 | 30 | &:hover 31 | fill: black 32 | 33 | .carousel-wrap 34 | position: relative 35 | margin-bottom: 20px 36 | 37 | cite 38 | color: #999 39 | 40 | .carousel-unit 41 | opacity: 0 42 | position: absolute 43 | transform: translate(0px, 50px) scale(1.2) 44 | transition: all ease-in-out 500ms 45 | pointer-events: none 46 | 47 | &.is-current 48 | opacity: 1 49 | transform: translate(0px, 0px) scale(1) 50 | 51 | // .carousel-unit 52 | // position: absolute 53 | // 54 | // .media 55 | // transform: translate(0px, 50px) 56 | // opacity: 0 57 | // transition: all ease-in-out 800ms 200ms 58 | // 59 | // .testimonial-words 60 | // transform: translate(0px, 0px) 61 | // opacity: 0 62 | // transition: all ease-in-out 500ms 63 | // 64 | // &.is-current 65 | // .media, 66 | // .testimonial-words 67 | // transform: translate(0px, 0px) 68 | // opacity: 1 69 | -------------------------------------------------------------------------------- /assets/css/3-modules/_content-well.sass: -------------------------------------------------------------------------------- 1 | .content-well 2 | background-color: #f5f5f5 3 | //background-color: pink 4 | padding: 20px 0px 1px 5 | border-radius: 5px 6 | box-shadow: 80px 0px 0px #f5f5f5, -80px 0px 0px #f5f5f5 7 | -------------------------------------------------------------------------------- /assets/css/3-modules/_flex-video.sass: -------------------------------------------------------------------------------- 1 | .flex-video 2 | height: 0 3 | margin-bottom: 0.88889rem 4 | overflow: hidden 5 | padding-bottom: 56% 6 | position: relative 7 | 8 | .flex-video iframe, 9 | .flex-video object, 10 | .flex-video embed, 11 | .flex-video video 12 | height: 100% 13 | position: absolute 14 | top: 0 15 | width: 100% 16 | left: 0 17 | -------------------------------------------------------------------------------- /assets/css/3-modules/_footer.sass: -------------------------------------------------------------------------------- 1 | footer 2 | padding: 40px 0px 3 | background: #444 4 | -------------------------------------------------------------------------------- /assets/css/3-modules/_header.sass: -------------------------------------------------------------------------------- 1 | body 2 | position: relative 3 | 4 | .top-rect 5 | width: 100% 6 | padding-top: 400px 7 | position: absolute 8 | top: 0 9 | left: 0 10 | z-index: -1 11 | background-color: #F9EC31 12 | overflow: hidden 13 | 14 | &:after 15 | content: '' 16 | display: block 17 | background: white 18 | height: 400px 19 | width: 8000px 20 | position: absolute 21 | z-index: 1 22 | bottom: -50% 23 | left: 50% 24 | margin-left: -4000px 25 | transform: rotate(-6deg) 26 | 27 | 28 | 29 | 30 | header 31 | height: 80px 32 | position: relative 33 | 34 | .devtips-logo-svg 35 | position: absolute 36 | left: 50% 37 | top: 50% 38 | margin-left: -25px 39 | margin-top: -20px 40 | 41 | .menu-svg 42 | position: absolute 43 | top: 28px 44 | left: 30px 45 | cursor: pointer 46 | -------------------------------------------------------------------------------- /assets/css/3-modules/_link-list.sass: -------------------------------------------------------------------------------- 1 | .link-list 2 | list-style: none 3 | padding: 0 4 | margin: 0 5 | 6 | li 7 | 8 | &:after 9 | content: '' 10 | display: block 11 | height: 1px 12 | width: 20px 13 | background: hsla(0,0%,0%,0.1) 14 | margin: 20px auto 15 | 16 | .tint-reversed & 17 | background: hsla(0,0%,100%,0.1) 18 | 19 | &:last-child:after 20 | display: none 21 | 22 | a 23 | border: none 24 | -------------------------------------------------------------------------------- /assets/css/3-modules/_media-object.sass: -------------------------------------------------------------------------------- 1 | .media-object 2 | display: flex 3 | 4 | .media 5 | margin-right: 20px 6 | flex-shrink: 0 7 | 8 | .avatar 9 | width: 50px 10 | height: 50px 11 | border-radius: 50% 12 | -------------------------------------------------------------------------------- /assets/css/3-modules/_menu.sass: -------------------------------------------------------------------------------- 1 | .menu-overlay 2 | position: fixed 3 | background-color: hsla(0,0%,0%,0.0) 4 | top: 0 5 | left: 0 6 | right: 0 7 | bottom: 0 8 | pointer-events: none 9 | transition: all 350ms ease-in-out 10 | 11 | .menu-plate 12 | position: absolute 13 | top: 0px 14 | left: -400px 15 | width: 300px 16 | height: 100% 17 | background: white 18 | box-shadow: 3px 0px 30px rgba(0,0,0,0.4) 19 | transition: all 350ms ease-in-out 20 | 21 | .jquery-icon-svg path 22 | fill: rgba(0,0,0,0.54) 23 | 24 | .menu-close 25 | position: absolute 26 | top: 28px 27 | left: 30px 28 | cursor: pointer 29 | 30 | .menu 31 | margin: 0 32 | list-style: none 33 | margin-top: 88px 34 | padding-left: 30px 35 | 36 | li 37 | margin-bottom: 30px 38 | 39 | svg 40 | vertical-align: top 41 | margin-right: 20px 42 | fill: hsla(0,0%,0%,0.54) 43 | width: 24px 44 | height: 24px 45 | 46 | 47 | a 48 | border-bottom: none 49 | text-transform: uppercase 50 | font-weight: 500 51 | font-size: 16px 52 | display: inline-block 53 | height: 24px 54 | line-height: 24px 55 | 56 | 57 | .double-line 58 | display: inline-block 59 | line-height: 1.4 60 | 61 | span 62 | display: block 63 | font-size: 12px 64 | color: hsla(0, 0%, 0%, 0.3) 65 | 66 | 67 | // Is Open 68 | 69 | html.menu-open 70 | 71 | body 72 | overflow: hidden 73 | position: fixed 74 | top: 0 75 | left: 0 76 | right: 0 77 | bottom: 0 78 | 79 | .menu-overlay 80 | background-color: hsla(0,0%,0%,0.7) 81 | pointer-events: auto 82 | 83 | .menu-plate 84 | transform: translate3d(400px, 0px, 0px) 85 | -------------------------------------------------------------------------------- /assets/css/3-modules/_patreon-section.sass: -------------------------------------------------------------------------------- 1 | .patreon-community 2 | .section-title-rule 3 | border-top-color: #E84500 4 | 5 | .patreon-icons 6 | display: flex 7 | justify-content: space-around 8 | 9 | > div 10 | margin: 0 5px 11 | 12 | p 13 | text-transform: uppercase 14 | font-size: 9px 15 | -------------------------------------------------------------------------------- /assets/css/3-modules/_popular-episodes.sass: -------------------------------------------------------------------------------- 1 | .popular-episodes 2 | padding-top: 0 3 | 4 | .arc-svg 5 | margin-top: -1px 6 | path 7 | fill: white 8 | 9 | @media (min-width: 830px) 10 | .constrainer 11 | max-width: 540px 12 | 13 | .popular-list 14 | 15 | &:after 16 | visibility: hidden 17 | display: block 18 | font-size: 0 19 | content: " " 20 | clear: both 21 | height: 0 22 | 23 | .video-unit 24 | max-width: calc(50% - 24px) 25 | float: left 26 | margin-bottom: 20px 27 | //border: solid 1px #ddd 28 | border: none 29 | border-radius: 3px 30 | padding: 5px 31 | background: white 32 | box-shadow: 0px 0px 1px rgba(0,0,0,0.3) 33 | transition: all ease-in-out 200ms 34 | 35 | &:nth-child(odd) 36 | margin-right: 20px 37 | 38 | &:hover 39 | box-shadow: 0px 5px 30px rgba(0,0,0,0.3) 40 | 41 | .desc 42 | display: flex 43 | flex-direction: column 44 | justify-content: space-between 45 | height: 75px 46 | 47 | .title 48 | font-weight: 500 49 | line-height: 1.3 50 | 51 | img 52 | max-width: 100% 53 | display: block 54 | margin-bottom: 5px 55 | 56 | @media (min-width: 830px) 57 | .video-unit 58 | max-width: calc(37.1% - 46px) 59 | margin-right: 20px 60 | 61 | &:nth-child(3n) 62 | margin-right: 0 63 | 64 | @media(max-width: 370px) 65 | .video-unit 66 | max-width: 220px 67 | margin-right: auto !important 68 | margin: 0px auto 20px !important 69 | box-sizing: border-box 70 | float: none 71 | display: block 72 | -------------------------------------------------------------------------------- /assets/css/3-modules/_sections.sass: -------------------------------------------------------------------------------- 1 | section 2 | padding: 40px 0px 3 | 4 | &.tint 5 | background-color: #f5f5f5 6 | 7 | 8 | .constrainer 9 | max-width: 360px 10 | margin: 0 auto 11 | padding: 0 30px 12 | -------------------------------------------------------------------------------- /assets/css/3-modules/_video-cascade.sass: -------------------------------------------------------------------------------- 1 | .video-cascade 2 | text-align: left 3 | border: none 4 | display: block 5 | position: relative 6 | padding-bottom: 50% 7 | margin-bottom: 30px 8 | margin-top: 30px 9 | 10 | a 11 | border: none 12 | 13 | .video-thumbnail 14 | width: 60% 15 | padding-top: 34% 16 | position: absolute 17 | box-shadow: 0px 2px 10px rgba(0,0,0,0.3) 18 | transition: all 200ms ease-in-out 19 | background-size: cover 20 | 21 | &:nth-child(1) 22 | top: 0px 23 | left: 0px 24 | 25 | &:nth-child(2) 26 | top: 50% 27 | left: 50% 28 | transform: translate(-50%, -50%) 29 | 30 | &:nth-child(3) 31 | right: 0px 32 | bottom: 0px 33 | 34 | .play-placer 35 | position: absolute 36 | right: 0px 37 | bottom: 0px 38 | background: hsla(45, 50%, 50%, 0.3) 39 | padding-top: 34% 40 | width: 60% 41 | transition: all 200ms ease-in-out 42 | 43 | .play-circle-filled-svg 44 | fill: rgba(255,255,255,0.8) 45 | position: absolute 46 | top: 50% 47 | left: 50% 48 | margin-left: -27px 49 | margin-top: -27px 50 | width: 54px 51 | height: 54px 52 | filter: drop-shadow( 0px 2px 8px rgba(0,0,0,0.5) ) 53 | transition: all 200ms ease-in-out 54 | 55 | &:hover 56 | .play-circle-filled-svg 57 | transform: scale(1.4) 58 | filter: drop-shadow( 0px 4px 16px rgba(0,0,0,0.7) ) 59 | fill: rgba(255,255,255,1) 60 | 61 | .video-thumbnail 62 | &:nth-child(3) 63 | transform: scale(1.1) 64 | box-shadow: 0px 20px 20px rgba(0,0,0,0.15) 65 | 66 | &:nth-child(2) 67 | transform: translate(-50%, -50%) scale(1.03) 68 | box-shadow: 0px 3px 13px rgba(0,0,0,0.15) 69 | 70 | &:nth-child(1) 71 | transform: scale(0.8) 72 | box-shadow: 0px 1px 3px rgba(0,0,0,0.15) 73 | -------------------------------------------------------------------------------- /assets/css/4-pages/_page-gifs.sass: -------------------------------------------------------------------------------- 1 | .page-gifs 2 | 3 | .top-rect 4 | background-color: $red 5 | padding-top: 330px 6 | 7 | header .menu-svg 8 | fill: white 9 | 10 | .devtips-logo-svg 11 | path 12 | fill: white 13 | 14 | .gif 15 | display: inline-block 16 | max-height: 100px 17 | margin: 1px 18 | 19 | .gif-cluster 20 | padding: 0 20px 21 | font-size: 0px 22 | max-width: 800px 23 | margin: 0 auto 24 | 25 | a 26 | border: none 27 | -------------------------------------------------------------------------------- /assets/css/4-pages/_page-home.sass: -------------------------------------------------------------------------------- 1 | .page-home 2 | 3 | .home-hero 4 | padding: 20px 20px 40px 5 | 6 | .mission 7 | font: 8 | size: 21px 9 | weight: 400 10 | margin-bottom: 20px 11 | max-width: 300px 12 | 13 | .section-title-rule 14 | border-top-color: rgba(0,0,0,0.15) 15 | margin: 0px 0px 30px 16 | display: none 17 | 18 | &.bottom 19 | display: block 20 | margin: 10px 0px 30px 21 | 22 | .top-rect 23 | padding-top: 500px 24 | 25 | 26 | @media (min-width: 830px) 27 | 28 | .home-hero 29 | 30 | .mission 31 | font-size: 28px 32 | line-height: 1.38 33 | 34 | .section-title-rule 35 | display: block 36 | 37 | .flex-container 38 | display: flex 39 | max-width: 830px 40 | margin: 0 auto 41 | 42 | .flex-about-content 43 | max-width: 300px 44 | margin-right: 30px 45 | flex-shrink: 0 46 | 47 | .section-head 48 | text-align: left 49 | 50 | .section-title-rule 51 | display: block 52 | 53 | &.bottom 54 | display: none 55 | 56 | .flex-video-right 57 | width: 100% 58 | 59 | 60 | .jquery-video-course 61 | background-color: #0067AF 62 | 63 | .section-title-rule 64 | border-top-color: rgba(255,255,255,0.3) 65 | 66 | input[type="text"], 67 | input[type="email"] 68 | background-color: hsla(0,0%,100%,0.15) 69 | border-color: white 70 | color: white 71 | text-transform: uppercase 72 | 73 | &::placeholder 74 | color: hsla(0,0%,100%,0.5) 75 | 76 | input[type="submit"], 77 | button 78 | background: white 79 | color: #0067AF 80 | border-color: white 81 | 82 | .quote 83 | text-align: center 84 | background: #f5f5f5 85 | 86 | > div 87 | display: inline-block 88 | font-size: 24px 89 | font-weight: 300 90 | max-width: 600px 91 | padding: 0 20px 92 | 93 | span 94 | font-weight: 400 95 | 96 | cite 97 | display: block 98 | text-align: right 99 | font-size: 14px 100 | 101 | .popular-episodes 102 | 103 | .section-head span 104 | font-style: italic 105 | font-weight: 400 106 | display: inline-block 107 | position: relative 108 | z-index: 1 109 | 110 | &:after 111 | content: '' 112 | display: block 113 | background: fade-out(#F9EC31, 0.7) 114 | height: 30px 115 | width: 50px 116 | z-index: -1 117 | position: absolute 118 | top: 0px 119 | left: -5px 120 | transform: rotate(24deg) skewY(-24deg) 121 | -------------------------------------------------------------------------------- /assets/css/4-pages/_page-jquerycourse.sass: -------------------------------------------------------------------------------- 1 | .page-jquerycourse 2 | 3 | .top-rect 4 | background-color: #ff005b 5 | padding-top: 330px 6 | padding-top: 500px 7 | 8 | @media (max-width: 550px) 9 | padding-top: 400px 10 | 11 | .jquery-hero .jquery-icon-svg path 12 | fill: #ff005b 13 | 14 | header .menu-svg 15 | fill: white 16 | 17 | .devtips-logo-svg 18 | path 19 | fill: white 20 | 21 | .jquery-icon 22 | margin: 20px 0 23 | 24 | input[type="text"], 25 | input[type="email"] 26 | border-color: #ff005b 27 | text-align: center 28 | 29 | input[type="submit"], 30 | button 31 | background-color: #ff005b 32 | color: white 33 | border-color: #ff005b 34 | 35 | .projects-include 36 | svg 37 | fill: hsla(0,0%,0%,0.54) 38 | 39 | 40 | header 41 | margin-bottom: 30px 42 | 43 | .jquery-promo-video 44 | max-width: 70% 45 | margin: 0px auto 46 | 47 | @media (max-width: 550px) 48 | max-width: 100% 49 | padding: 0px 15px 50 | 51 | @media (min-width: 1200px) 52 | max-width: 850px 53 | 54 | .flex-video 55 | box-shadow: 0px 5px 20px rgba(0,0,0,0.2) 56 | -------------------------------------------------------------------------------- /assets/css/main.css: -------------------------------------------------------------------------------- 1 | @import url(https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic); 2 | /*! normalize.css v4.0.0 | MIT License | github.com/necolas/normalize.css */ 3 | /** 4 | * 1. Change the default font family in all browsers (opinionated). 5 | * 2. Prevent adjustments of font size after orientation changes in IE and iOS. 6 | */ 7 | html { 8 | font-family: sans-serif; 9 | /* 1 */ 10 | -ms-text-size-adjust: 100%; 11 | /* 2 */ 12 | -webkit-text-size-adjust: 100%; 13 | /* 2 */ } 14 | 15 | /** 16 | * Remove the margin in all browsers (opinionated). 17 | */ 18 | body { 19 | margin: 0; } 20 | 21 | /* HTML5 display definitions 22 | ========================================================================== */ 23 | /** 24 | * Add the correct display in IE 9-. 25 | * 1. Add the correct display in Edge, IE, and Firefox. 26 | * 2. Add the correct display in IE. 27 | */ 28 | article, 29 | aside, 30 | details, 31 | figcaption, 32 | figure, 33 | footer, 34 | header, 35 | main, 36 | menu, 37 | nav, 38 | section, 39 | summary { 40 | /* 1 */ 41 | display: block; } 42 | 43 | /** 44 | * Add the correct display in IE 9-. 45 | */ 46 | audio, 47 | canvas, 48 | progress, 49 | video { 50 | display: inline-block; } 51 | 52 | /** 53 | * Add the correct display in iOS 4-7. 54 | */ 55 | audio:not([controls]) { 56 | display: none; 57 | height: 0; } 58 | 59 | /** 60 | * Add the correct vertical alignment in Chrome, Firefox, and Opera. 61 | */ 62 | progress { 63 | vertical-align: baseline; } 64 | 65 | /** 66 | * Add the correct display in IE 10-. 67 | * 1. Add the correct display in IE. 68 | */ 69 | template, 70 | [hidden] { 71 | display: none; } 72 | 73 | /* Links 74 | ========================================================================== */ 75 | /** 76 | * Remove the gray background on active links in IE 10. 77 | */ 78 | a { 79 | background-color: transparent; } 80 | 81 | /** 82 | * Remove the outline on focused links when they are also active or hovered 83 | * in all browsers (opinionated). 84 | */ 85 | a:active, 86 | a:hover { 87 | outline-width: 0; } 88 | 89 | /* Text-level semantics 90 | ========================================================================== */ 91 | /** 92 | * 1. Remove the bottom border in Firefox 39-. 93 | * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. 94 | */ 95 | abbr[title] { 96 | border-bottom: none; 97 | /* 1 */ 98 | text-decoration: underline; 99 | /* 2 */ 100 | text-decoration: underline dotted; 101 | /* 2 */ } 102 | 103 | /** 104 | * Prevent the duplicate application of `bolder` by the next rule in Safari 6. 105 | */ 106 | b, 107 | strong { 108 | font-weight: inherit; } 109 | 110 | /** 111 | * Add the correct font weight in Chrome, Edge, and Safari. 112 | */ 113 | b, 114 | strong { 115 | font-weight: bolder; } 116 | 117 | /** 118 | * Add the correct font style in Android 4.3-. 119 | */ 120 | dfn { 121 | font-style: italic; } 122 | 123 | /** 124 | * Correct the font size and margin on `h1` elements within `section` and 125 | * `article` contexts in Chrome, Firefox, and Safari. 126 | */ 127 | h1 { 128 | font-size: 2em; 129 | margin: 0.67em 0; } 130 | 131 | /** 132 | * Add the correct background and color in IE 9-. 133 | */ 134 | mark { 135 | background-color: #ff0; 136 | color: #000; } 137 | 138 | /** 139 | * Add the correct font size in all browsers. 140 | */ 141 | small { 142 | font-size: 80%; } 143 | 144 | /** 145 | * Prevent `sub` and `sup` elements from affecting the line height in 146 | * all browsers. 147 | */ 148 | sub, 149 | sup { 150 | font-size: 75%; 151 | line-height: 0; 152 | position: relative; 153 | vertical-align: baseline; } 154 | 155 | sub { 156 | bottom: -0.25em; } 157 | 158 | sup { 159 | top: -0.5em; } 160 | 161 | /* Embedded content 162 | ========================================================================== */ 163 | /** 164 | * Remove the border on images inside links in IE 10-. 165 | */ 166 | img { 167 | border-style: none; } 168 | 169 | /** 170 | * Hide the overflow in IE. 171 | */ 172 | svg:not(:root) { 173 | overflow: hidden; } 174 | 175 | /* Grouping content 176 | ========================================================================== */ 177 | /** 178 | * 1. Correct the inheritance and scaling of font size in all browsers. 179 | * 2. Correct the odd `em` font sizing in all browsers. 180 | */ 181 | code, 182 | kbd, 183 | pre, 184 | samp { 185 | font-family: monospace, monospace; 186 | /* 1 */ 187 | font-size: 1em; 188 | /* 2 */ } 189 | 190 | /** 191 | * Add the correct margin in IE 8. 192 | */ 193 | figure { 194 | margin: 1em 40px; } 195 | 196 | /** 197 | * 1. Add the correct box sizing in Firefox. 198 | * 2. Show the overflow in Edge and IE. 199 | */ 200 | hr { 201 | box-sizing: content-box; 202 | /* 1 */ 203 | height: 0; 204 | /* 1 */ 205 | overflow: visible; 206 | /* 2 */ } 207 | 208 | /* Forms 209 | ========================================================================== */ 210 | /** 211 | * Change font properties to `inherit` in all browsers (opinionated). 212 | */ 213 | button, 214 | input, 215 | select, 216 | textarea { 217 | font: inherit; } 218 | 219 | /** 220 | * Restore the font weight unset by the previous rule. 221 | */ 222 | optgroup { 223 | font-weight: bold; } 224 | 225 | /** 226 | * Show the overflow in IE. 227 | * 1. Show the overflow in Edge. 228 | * 2. Show the overflow in Edge, Firefox, and IE. 229 | */ 230 | button, 231 | input, 232 | select { 233 | /* 2 */ 234 | overflow: visible; } 235 | 236 | /** 237 | * Remove the margin in Safari. 238 | * 1. Remove the margin in Firefox and Safari. 239 | */ 240 | button, 241 | input, 242 | select, 243 | textarea { 244 | /* 1 */ 245 | margin: 0; } 246 | 247 | /** 248 | * Remove the inheritence of text transform in Edge, Firefox, and IE. 249 | * 1. Remove the inheritence of text transform in Firefox. 250 | */ 251 | button, 252 | select { 253 | /* 1 */ 254 | text-transform: none; } 255 | 256 | /** 257 | * Change the cursor in all browsers (opinionated). 258 | */ 259 | button, 260 | [type="button"], 261 | [type="reset"], 262 | [type="submit"] { 263 | cursor: pointer; } 264 | 265 | /** 266 | * Restore the default cursor to disabled elements unset by the previous rule. 267 | */ 268 | [disabled] { 269 | cursor: default; } 270 | 271 | /** 272 | * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` 273 | * controls in Android 4. 274 | * 2. Correct the inability to style clickable types in iOS. 275 | */ 276 | button, 277 | html [type="button"], 278 | [type="reset"], 279 | [type="submit"] { 280 | -webkit-appearance: button; 281 | /* 2 */ } 282 | 283 | /** 284 | * Remove the inner border and padding in Firefox. 285 | */ 286 | button::-moz-focus-inner, 287 | input::-moz-focus-inner { 288 | border: 0; 289 | padding: 0; } 290 | 291 | /** 292 | * Restore the focus styles unset by the previous rule. 293 | */ 294 | button:-moz-focusring, 295 | input:-moz-focusring { 296 | outline: 1px dotted ButtonText; } 297 | 298 | /** 299 | * Change the border, margin, and padding in all browsers (opinionated). 300 | */ 301 | fieldset { 302 | border: 1px solid #c0c0c0; 303 | margin: 0 2px; 304 | padding: 0.35em 0.625em 0.75em; } 305 | 306 | /** 307 | * 1. Correct the text wrapping in Edge and IE. 308 | * 2. Correct the color inheritance from `fieldset` elements in IE. 309 | * 3. Remove the padding so developers are not caught out when they zero out 310 | * `fieldset` elements in all browsers. 311 | */ 312 | legend { 313 | box-sizing: border-box; 314 | /* 1 */ 315 | color: inherit; 316 | /* 2 */ 317 | display: table; 318 | /* 1 */ 319 | max-width: 100%; 320 | /* 1 */ 321 | padding: 0; 322 | /* 3 */ 323 | white-space: normal; 324 | /* 1 */ } 325 | 326 | /** 327 | * Remove the default vertical scrollbar in IE. 328 | */ 329 | textarea { 330 | overflow: auto; } 331 | 332 | /** 333 | * 1. Add the correct box sizing in IE 10-. 334 | * 2. Remove the padding in IE 10-. 335 | */ 336 | [type="checkbox"], 337 | [type="radio"] { 338 | box-sizing: border-box; 339 | /* 1 */ 340 | padding: 0; 341 | /* 2 */ } 342 | 343 | /** 344 | * Correct the cursor style of increment and decrement buttons in Chrome. 345 | */ 346 | [type="number"]::-webkit-inner-spin-button, 347 | [type="number"]::-webkit-outer-spin-button { 348 | height: auto; } 349 | 350 | /** 351 | * Correct the odd appearance of search inputs in Chrome and Safari. 352 | */ 353 | [type="search"] { 354 | -webkit-appearance: textfield; } 355 | 356 | /** 357 | * Remove the inner padding and cancel buttons in Chrome on OS X and 358 | * Safari on OS X. 359 | */ 360 | [type="search"]::-webkit-search-cancel-button, 361 | [type="search"]::-webkit-search-decoration { 362 | -webkit-appearance: none; } 363 | 364 | body { 365 | background-color: white; 366 | font-size: 14px; 367 | line-height: 1.6; 368 | font-family: "Roboto", sans-serif; 369 | color: rgba(0, 0, 0, 0.7); 370 | margin: 0; 371 | padding: 0; 372 | -webkit-font-smoothing: antialiased; 373 | -webkit-text-size-adjust: 100%; } 374 | 375 | a { 376 | color: inherit; 377 | text-decoration: none; 378 | outline: 0; 379 | border-bottom: 2px solid rgba(0, 0, 0, 0.15); } 380 | a:hover, a:focus { 381 | color: inherit; 382 | border-bottom-color: rgba(0, 0, 0, 0.3); } 383 | a.white, a.white-hard { 384 | border-bottom-color: rgba(255, 255, 255, 0.3); } 385 | a.white:hover, a.white:focus, a.white-hard:hover, a.white-hard:focus { 386 | color: white; } 387 | 388 | .gigantic, .huge, .large, .bigger, .big, 389 | h1, h2, h3, h4, h5, h6 { 390 | color: #222; 391 | font-weight: bold; 392 | margin: 0; 393 | margin-bottom: 20px; } 394 | 395 | .gigantic { 396 | font-size: 110px; 397 | line-height: 1.09; 398 | letter-spacing: -2px; } 399 | 400 | .huge, h1 { 401 | font-size: 68px; 402 | line-height: 1.05; 403 | letter-spacing: -1px; } 404 | 405 | .large, h2 { 406 | font-size: 42px; 407 | line-height: 1.14; } 408 | 409 | .bigger, h3 { 410 | font-size: 26px; 411 | line-height: 1.38; } 412 | 413 | .big, h4 { 414 | font-size: 22px; 415 | line-height: 1.38; } 416 | 417 | .small, small { 418 | font-size: 10px; 419 | line-height: 1.2; } 420 | 421 | p { 422 | margin: 0 0 20px 0; } 423 | 424 | em { 425 | font-style: italic; } 426 | 427 | strong { 428 | font-weight: bold; 429 | color: rgba(0, 0, 0, 0.9); } 430 | 431 | hr { 432 | border: solid #ddd; 433 | border-width: 1px 0 0; 434 | clear: both; 435 | margin: 10px 0 30px; 436 | height: 0; } 437 | hr.section-title-rule { 438 | border-top: 2px solid #F5E830; 439 | width: 100px; 440 | margin: 10px auto 30px; } 441 | .tint-reversed hr.section-title-rule { 442 | border-top-color: rgba(255, 255, 255, 0.2); } 443 | 444 | .section-head { 445 | font-size: 18px; 446 | color: rgba(0, 0, 0, 0.8); 447 | text-align: center; } 448 | 449 | .lead { 450 | font-size: 16px; 451 | font-weight: 400; 452 | color: rgba(0, 0, 0, 0.8); } 453 | 454 | .bold { 455 | font-weight: 600; } 456 | 457 | .regular { 458 | font-size: 14px; 459 | font-weight: 400; 460 | color: rgba(0, 0, 0, 0.8); } 461 | 462 | .muted { 463 | font-size: 13px; 464 | font-style: italic; } 465 | 466 | .muted-extra { 467 | font-size: 12px; 468 | font-weight: 400; 469 | color: rgba(0, 0, 0, 0.5); } 470 | 471 | .blue { 472 | color: #0067AF; } 473 | 474 | .black { 475 | color: black; } 476 | 477 | .white { 478 | color: rgba(255, 255, 255, 0.8); } 479 | 480 | .white-hard { 481 | color: white; } 482 | 483 | .text-center { 484 | text-align: center; } 485 | 486 | .text-right { 487 | text-align: right; } 488 | 489 | .button, 490 | button, 491 | input[type="submit"], 492 | input[type="reset"], 493 | input[type="button"] { 494 | display: inline-block; 495 | padding: 5px 20px; 496 | color: #555; 497 | text-align: center; 498 | text-decoration: none; 499 | white-space: nowrap; 500 | background-color: transparent; 501 | border-radius: 4px; 502 | border: 1px solid #bbb; 503 | cursor: pointer; 504 | box-sizing: border-box; } 505 | .button:hover, .button:active, .button:focus, 506 | button:hover, 507 | button:active, 508 | button:focus, 509 | input[type="submit"]:hover, 510 | input[type="submit"]:active, 511 | input[type="submit"]:focus, 512 | input[type="reset"]:hover, 513 | input[type="reset"]:active, 514 | input[type="reset"]:focus, 515 | input[type="button"]:hover, 516 | input[type="button"]:active, 517 | input[type="button"]:focus { 518 | color: inherit; 519 | border-color: #888; 520 | outline: 0; } 521 | 522 | form { 523 | margin-bottom: 20px; } 524 | 525 | input[type="text"], 526 | input[type="email"] { 527 | padding: 5px 10px; 528 | border: 1px solid rgba(0, 0, 0, 0.5); 529 | border-radius: 3px; 530 | width: 100%; 531 | margin-bottom: 10px; 532 | box-sizing: border-box; } 533 | 534 | input, 535 | textarea { 536 | font-size: 16px; 537 | -webkit-appearance: none; } 538 | input:focus, 539 | textarea:focus { 540 | outline: none; } 541 | 542 | input.needsfilled { 543 | border-color: #FF851B !important; 544 | color: #FF851B !important; } 545 | 546 | .flex-video { 547 | height: 0; 548 | margin-bottom: 0.88889rem; 549 | overflow: hidden; 550 | padding-bottom: 56%; 551 | position: relative; } 552 | 553 | .flex-video iframe, 554 | .flex-video object, 555 | .flex-video embed, 556 | .flex-video video { 557 | height: 100%; 558 | position: absolute; 559 | top: 0; 560 | width: 100%; 561 | left: 0; } 562 | 563 | body { 564 | position: relative; } 565 | 566 | .top-rect { 567 | width: 100%; 568 | padding-top: 400px; 569 | position: absolute; 570 | top: 0; 571 | left: 0; 572 | z-index: -1; 573 | background-color: #F9EC31; 574 | overflow: hidden; } 575 | .top-rect:after { 576 | content: ""; 577 | display: block; 578 | background: white; 579 | height: 400px; 580 | width: 8000px; 581 | position: absolute; 582 | z-index: 1; 583 | bottom: -50%; 584 | left: 50%; 585 | margin-left: -4000px; 586 | -webkit-transform: rotate(-6deg); 587 | transform: rotate(-6deg); } 588 | 589 | header { 590 | height: 80px; 591 | position: relative; } 592 | header .devtips-logo-svg { 593 | position: absolute; 594 | left: 50%; 595 | top: 50%; 596 | margin-left: -25px; 597 | margin-top: -20px; } 598 | header .menu-svg { 599 | position: absolute; 600 | top: 28px; 601 | left: 30px; 602 | cursor: pointer; } 603 | 604 | footer { 605 | padding: 40px 0px; 606 | background: #444; } 607 | 608 | section { 609 | padding: 40px 0px; } 610 | section.tint { 611 | background-color: #f5f5f5; } 612 | section .constrainer { 613 | max-width: 360px; 614 | margin: 0 auto; 615 | padding: 0 30px; } 616 | 617 | .media-object { 618 | display: -webkit-box; 619 | display: -webkit-flex; 620 | display: -ms-flexbox; 621 | display: flex; } 622 | .media-object .media { 623 | margin-right: 20px; 624 | -webkit-flex-shrink: 0; 625 | -ms-flex-negative: 0; 626 | flex-shrink: 0; } 627 | 628 | .avatar { 629 | width: 50px; 630 | height: 50px; 631 | border-radius: 50%; } 632 | 633 | .link-list { 634 | list-style: none; 635 | padding: 0; 636 | margin: 0; } 637 | .link-list li:after { 638 | content: ""; 639 | display: block; 640 | height: 1px; 641 | width: 20px; 642 | background: rgba(0, 0, 0, 0.1); 643 | margin: 20px auto; } 644 | .tint-reversed .link-list li:after { 645 | background: rgba(255, 255, 255, 0.1); } 646 | .link-list li:last-child:after { 647 | display: none; } 648 | .link-list li a { 649 | border: none; } 650 | 651 | .video-cascade { 652 | text-align: left; 653 | border: none; 654 | display: block; 655 | position: relative; 656 | padding-bottom: 50%; 657 | margin-bottom: 30px; 658 | margin-top: 30px; } 659 | .video-cascade a { 660 | border: none; } 661 | .video-cascade .video-thumbnail { 662 | width: 60%; 663 | padding-top: 34%; 664 | position: absolute; 665 | box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3); 666 | -webkit-transition: all 200ms ease-in-out; 667 | transition: all 200ms ease-in-out; 668 | background-size: cover; } 669 | .video-cascade .video-thumbnail:nth-child(1) { 670 | top: 0px; 671 | left: 0px; } 672 | .video-cascade .video-thumbnail:nth-child(2) { 673 | top: 50%; 674 | left: 50%; 675 | -webkit-transform: translate(-50%, -50%); 676 | transform: translate(-50%, -50%); } 677 | .video-cascade .video-thumbnail:nth-child(3) { 678 | right: 0px; 679 | bottom: 0px; } 680 | .video-cascade .play-placer { 681 | position: absolute; 682 | right: 0px; 683 | bottom: 0px; 684 | background: rgba(191, 159, 64, 0.3); 685 | padding-top: 34%; 686 | width: 60%; 687 | -webkit-transition: all 200ms ease-in-out; 688 | transition: all 200ms ease-in-out; } 689 | .video-cascade .play-circle-filled-svg { 690 | fill: rgba(255, 255, 255, 0.8); 691 | position: absolute; 692 | top: 50%; 693 | left: 50%; 694 | margin-left: -27px; 695 | margin-top: -27px; 696 | width: 54px; 697 | height: 54px; 698 | -webkit-filter: drop-shadow(0px 2px 8px rgba(0, 0, 0, 0.5)); 699 | filter: drop-shadow(0px 2px 8px rgba(0, 0, 0, 0.5)); 700 | -webkit-transition: all 200ms ease-in-out; 701 | transition: all 200ms ease-in-out; } 702 | .video-cascade:hover .play-circle-filled-svg { 703 | -webkit-transform: scale(1.4); 704 | transform: scale(1.4); 705 | -webkit-filter: drop-shadow(0px 4px 16px rgba(0, 0, 0, 0.7)); 706 | filter: drop-shadow(0px 4px 16px rgba(0, 0, 0, 0.7)); 707 | fill: white; } 708 | .video-cascade:hover .video-thumbnail:nth-child(3) { 709 | -webkit-transform: scale(1.1); 710 | transform: scale(1.1); 711 | box-shadow: 0px 20px 20px rgba(0, 0, 0, 0.15); } 712 | .video-cascade:hover .video-thumbnail:nth-child(2) { 713 | -webkit-transform: translate(-50%, -50%) scale(1.03); 714 | transform: translate(-50%, -50%) scale(1.03); 715 | box-shadow: 0px 3px 13px rgba(0, 0, 0, 0.15); } 716 | .video-cascade:hover .video-thumbnail:nth-child(1) { 717 | -webkit-transform: scale(0.8); 718 | transform: scale(0.8); 719 | box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.15); } 720 | 721 | .patreon-community .section-title-rule { 722 | border-top-color: #E84500; } 723 | .patreon-community .patreon-icons { 724 | display: -webkit-box; 725 | display: -webkit-flex; 726 | display: -ms-flexbox; 727 | display: flex; 728 | -webkit-justify-content: space-around; 729 | -ms-flex-pack: distribute; 730 | justify-content: space-around; } 731 | .patreon-community .patreon-icons > div { 732 | margin: 0 5px; } 733 | .patreon-community .patreon-icons p { 734 | text-transform: uppercase; 735 | font-size: 9px; } 736 | 737 | .menu-overlay { 738 | position: fixed; 739 | background-color: transparent; 740 | top: 0; 741 | left: 0; 742 | right: 0; 743 | bottom: 0; 744 | pointer-events: none; 745 | -webkit-transition: all 350ms ease-in-out; 746 | transition: all 350ms ease-in-out; } 747 | 748 | .menu-plate { 749 | position: absolute; 750 | top: 0px; 751 | left: -400px; 752 | width: 300px; 753 | height: 100%; 754 | background: white; 755 | box-shadow: 3px 0px 30px rgba(0, 0, 0, 0.4); 756 | -webkit-transition: all 350ms ease-in-out; 757 | transition: all 350ms ease-in-out; } 758 | .menu-plate .jquery-icon-svg path { 759 | fill: rgba(0, 0, 0, 0.54); } 760 | 761 | .menu-close { 762 | position: absolute; 763 | top: 28px; 764 | left: 30px; 765 | cursor: pointer; } 766 | 767 | .menu { 768 | margin: 0; 769 | list-style: none; 770 | margin-top: 88px; 771 | padding-left: 30px; } 772 | .menu li { 773 | margin-bottom: 30px; } 774 | .menu svg { 775 | vertical-align: top; 776 | margin-right: 20px; 777 | fill: rgba(0, 0, 0, 0.54); 778 | width: 24px; 779 | height: 24px; } 780 | .menu a { 781 | border-bottom: none; 782 | text-transform: uppercase; 783 | font-weight: 500; 784 | font-size: 16px; 785 | display: inline-block; 786 | height: 24px; 787 | line-height: 24px; } 788 | .menu .double-line { 789 | display: inline-block; 790 | line-height: 1.4; } 791 | .menu .double-line span { 792 | display: block; 793 | font-size: 12px; 794 | color: rgba(0, 0, 0, 0.3); } 795 | 796 | html.menu-open body { 797 | overflow: hidden; 798 | position: fixed; 799 | top: 0; 800 | left: 0; 801 | right: 0; 802 | bottom: 0; } 803 | html.menu-open .menu-overlay { 804 | background-color: rgba(0, 0, 0, 0.7); 805 | pointer-events: auto; } 806 | html.menu-open .menu-plate { 807 | -webkit-transform: translate3d(400px, 0px, 0px); 808 | transform: translate3d(400px, 0px, 0px); } 809 | 810 | .popular-episodes { 811 | padding-top: 0; } 812 | .popular-episodes .arc-svg { 813 | margin-top: -1px; } 814 | .popular-episodes .arc-svg path { 815 | fill: white; } 816 | @media (min-width: 830px) { 817 | .popular-episodes .constrainer { 818 | max-width: 540px; } } 819 | 820 | .popular-list:after { 821 | visibility: hidden; 822 | display: block; 823 | font-size: 0; 824 | content: " "; 825 | clear: both; 826 | height: 0; } 827 | .popular-list .video-unit { 828 | max-width: calc(50% - 24px); 829 | float: left; 830 | margin-bottom: 20px; 831 | border: none; 832 | border-radius: 3px; 833 | padding: 5px; 834 | background: white; 835 | box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.3); 836 | -webkit-transition: all ease-in-out 200ms; 837 | transition: all ease-in-out 200ms; } 838 | .popular-list .video-unit:nth-child(odd) { 839 | margin-right: 20px; } 840 | .popular-list .video-unit:hover { 841 | box-shadow: 0px 5px 30px rgba(0, 0, 0, 0.3); } 842 | .popular-list .desc { 843 | display: -webkit-box; 844 | display: -webkit-flex; 845 | display: -ms-flexbox; 846 | display: flex; 847 | -webkit-box-orient: vertical; 848 | -webkit-box-direction: normal; 849 | -webkit-flex-direction: column; 850 | -ms-flex-direction: column; 851 | flex-direction: column; 852 | -webkit-box-pack: justify; 853 | -webkit-justify-content: space-between; 854 | -ms-flex-pack: justify; 855 | justify-content: space-between; 856 | height: 75px; } 857 | .popular-list .title { 858 | font-weight: 500; 859 | line-height: 1.3; } 860 | .popular-list img { 861 | max-width: 100%; 862 | display: block; 863 | margin-bottom: 5px; } 864 | @media (min-width: 830px) { 865 | .popular-list .video-unit { 866 | max-width: calc(37.1% - 46px); 867 | margin-right: 20px; } 868 | .popular-list .video-unit:nth-child(3n) { 869 | margin-right: 0; } } 870 | @media(max-width: 370px) { 871 | .popular-list .video-unit { 872 | max-width: 220px; 873 | margin-right: auto !important; 874 | margin: 0px auto 20px !important; 875 | box-sizing: border-box; 876 | float: none; 877 | display: block; } } 878 | .content-well { 879 | background-color: #f5f5f5; 880 | padding: 20px 0px 1px; 881 | border-radius: 5px; 882 | box-shadow: 80px 0px 0px #f5f5f5, -80px 0px 0px #f5f5f5; } 883 | 884 | section.testimonials { 885 | overflow: hidden; } 886 | 887 | .carousel-nav-wrap { 888 | height: 30px; 889 | margin-bottom: 20px; 890 | position: relative; } 891 | .carousel-nav-wrap:after { 892 | content: ""; 893 | display: block; 894 | position: absolute; 895 | z-index: -1; 896 | width: 200px; 897 | height: 25px; 898 | background: rgba(249, 236, 49, 0.3); 899 | top: 0px; 900 | left: -10px; 901 | -webkit-transform: rotate(-2deg) skewX(10deg); 902 | transform: rotate(-2deg) skewX(10deg); } 903 | .carousel-nav-wrap .carousel-nav { 904 | float: right; } 905 | .carousel-nav-wrap .carousel-nav svg { 906 | cursor: pointer; 907 | fill: rgba(0, 0, 0, 0.54); } 908 | .carousel-nav-wrap .carousel-nav svg:hover { 909 | fill: black; } 910 | 911 | .carousel-wrap { 912 | position: relative; 913 | margin-bottom: 20px; } 914 | .carousel-wrap cite { 915 | color: #999; } 916 | .carousel-wrap .carousel-unit { 917 | opacity: 0; 918 | position: absolute; 919 | -webkit-transform: translate(0px, 50px) scale(1.2); 920 | transform: translate(0px, 50px) scale(1.2); 921 | -webkit-transition: all ease-in-out 500ms; 922 | transition: all ease-in-out 500ms; 923 | pointer-events: none; } 924 | .carousel-wrap .carousel-unit.is-current { 925 | opacity: 1; 926 | -webkit-transform: translate(0px, 0px) scale(1); 927 | transform: translate(0px, 0px) scale(1); } 928 | 929 | .page-home .home-hero { 930 | padding: 20px 20px 40px; } 931 | .page-home .home-hero .mission { 932 | font-size: 21px; 933 | font-weight: 400; 934 | margin-bottom: 20px; 935 | max-width: 300px; } 936 | .page-home .home-hero .section-title-rule { 937 | border-top-color: rgba(0, 0, 0, 0.15); 938 | margin: 0px 0px 30px; 939 | display: none; } 940 | .page-home .home-hero .section-title-rule.bottom { 941 | display: block; 942 | margin: 10px 0px 30px; } 943 | .page-home .top-rect { 944 | padding-top: 500px; } 945 | @media (min-width: 830px) { 946 | .page-home .home-hero .mission { 947 | font-size: 28px; 948 | line-height: 1.38; } 949 | .page-home .home-hero .section-title-rule { 950 | display: block; } 951 | .page-home .home-hero .flex-container { 952 | display: -webkit-box; 953 | display: -webkit-flex; 954 | display: -ms-flexbox; 955 | display: flex; 956 | max-width: 830px; 957 | margin: 0 auto; } 958 | .page-home .home-hero .flex-about-content { 959 | max-width: 300px; 960 | margin-right: 30px; 961 | -webkit-flex-shrink: 0; 962 | -ms-flex-negative: 0; 963 | flex-shrink: 0; } 964 | .page-home .home-hero .flex-about-content .section-head { 965 | text-align: left; } 966 | .page-home .home-hero .flex-about-content .section-title-rule { 967 | display: block; } 968 | .page-home .home-hero .flex-about-content .section-title-rule.bottom { 969 | display: none; } 970 | .page-home .home-hero .flex-video-right { 971 | width: 100%; } } 972 | .page-home .jquery-video-course { 973 | background-color: #0067AF; } 974 | .page-home .jquery-video-course .section-title-rule { 975 | border-top-color: rgba(255, 255, 255, 0.3); } 976 | .page-home .jquery-video-course input[type="text"], 977 | .page-home .jquery-video-course input[type="email"] { 978 | background-color: rgba(255, 255, 255, 0.15); 979 | border-color: white; 980 | color: white; 981 | text-transform: uppercase; } 982 | .page-home .jquery-video-course input[type="text"]::-webkit-input-placeholder, 983 | .page-home .jquery-video-course input[type="email"]::-webkit-input-placeholder { 984 | color: rgba(255, 255, 255, 0.5); } 985 | .page-home .jquery-video-course input[type="text"]::-moz-placeholder, 986 | .page-home .jquery-video-course input[type="email"]::-moz-placeholder { 987 | color: rgba(255, 255, 255, 0.5); } 988 | .page-home .jquery-video-course input[type="text"]:-ms-input-placeholder, 989 | .page-home .jquery-video-course input[type="email"]:-ms-input-placeholder { 990 | color: rgba(255, 255, 255, 0.5); } 991 | .page-home .jquery-video-course input[type="text"]::placeholder, 992 | .page-home .jquery-video-course input[type="email"]::placeholder { 993 | color: rgba(255, 255, 255, 0.5); } 994 | .page-home .jquery-video-course input[type="submit"], 995 | .page-home .jquery-video-course button { 996 | background: white; 997 | color: #0067AF; 998 | border-color: white; } 999 | .page-home .quote { 1000 | text-align: center; 1001 | background: #f5f5f5; } 1002 | .page-home .quote > div { 1003 | display: inline-block; 1004 | font-size: 24px; 1005 | font-weight: 300; 1006 | max-width: 600px; 1007 | padding: 0 20px; } 1008 | .page-home .quote > div span { 1009 | font-weight: 400; } 1010 | .page-home .quote > div cite { 1011 | display: block; 1012 | text-align: right; 1013 | font-size: 14px; } 1014 | .page-home .popular-episodes .section-head span { 1015 | font-style: italic; 1016 | font-weight: 400; 1017 | display: inline-block; 1018 | position: relative; 1019 | z-index: 1; } 1020 | .page-home .popular-episodes .section-head span:after { 1021 | content: ""; 1022 | display: block; 1023 | background: rgba(249, 236, 49, 0.3); 1024 | height: 30px; 1025 | width: 50px; 1026 | z-index: -1; 1027 | position: absolute; 1028 | top: 0px; 1029 | left: -5px; 1030 | -webkit-transform: rotate(24deg) skewY(-24deg); 1031 | transform: rotate(24deg) skewY(-24deg); } 1032 | 1033 | .page-jquerycourse .top-rect { 1034 | background-color: #ff005b; 1035 | padding-top: 330px; 1036 | padding-top: 500px; } 1037 | @media (max-width: 550px) { 1038 | .page-jquerycourse .top-rect { 1039 | padding-top: 400px; } } 1040 | .page-jquerycourse .jquery-hero .jquery-icon-svg path { 1041 | fill: #ff005b; } 1042 | .page-jquerycourse header .menu-svg { 1043 | fill: white; } 1044 | .page-jquerycourse .devtips-logo-svg path { 1045 | fill: white; } 1046 | .page-jquerycourse .jquery-icon { 1047 | margin: 20px 0; } 1048 | .page-jquerycourse input[type="text"], 1049 | .page-jquerycourse input[type="email"] { 1050 | border-color: #ff005b; 1051 | text-align: center; } 1052 | .page-jquerycourse input[type="submit"], 1053 | .page-jquerycourse button { 1054 | background-color: #ff005b; 1055 | color: white; 1056 | border-color: #ff005b; } 1057 | .page-jquerycourse .projects-include svg { 1058 | fill: rgba(0, 0, 0, 0.54); } 1059 | .page-jquerycourse header { 1060 | margin-bottom: 30px; } 1061 | .page-jquerycourse .jquery-promo-video { 1062 | max-width: 70%; 1063 | margin: 0px auto; } 1064 | @media (max-width: 550px) { 1065 | .page-jquerycourse .jquery-promo-video { 1066 | max-width: 100%; 1067 | padding: 0px 15px; } } 1068 | @media (min-width: 1200px) { 1069 | .page-jquerycourse .jquery-promo-video { 1070 | max-width: 850px; } } 1071 | .page-jquerycourse .jquery-promo-video .flex-video { 1072 | box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.2); } 1073 | 1074 | .page-gifs .top-rect { 1075 | background-color: #FF4136; 1076 | padding-top: 330px; } 1077 | .page-gifs header .menu-svg { 1078 | fill: white; } 1079 | .page-gifs .devtips-logo-svg path { 1080 | fill: white; } 1081 | .page-gifs .gif { 1082 | display: inline-block; 1083 | max-height: 100px; 1084 | margin: 1px; } 1085 | .page-gifs .gif-cluster { 1086 | padding: 0 20px; 1087 | font-size: 0px; 1088 | max-width: 800px; 1089 | margin: 0 auto; } 1090 | .page-gifs .gif-cluster a { 1091 | border: none; } 1092 | -------------------------------------------------------------------------------- /assets/css/main.sass: -------------------------------------------------------------------------------- 1 | // This is the single file output by sass. It is intended to ONLY @import other files. 2 | 3 | 4 | // 1 - TOOLS 5 | //@import '1-tools/bourbon/bourbon' 6 | @import '1-tools/fonts' 7 | @import '1-tools/normalize' 8 | @import '1-tools/vars' 9 | 10 | 11 | // 2 - BASICS 12 | @import '2-basics/body-element' 13 | @import '2-basics/selection-colors' 14 | @import '2-basics/links' 15 | @import '2-basics/typography' 16 | @import '2-basics/buttons' 17 | @import '2-basics/forms' 18 | 19 | 20 | // 3 - Modules 21 | @import '3-modules/flex-video' 22 | @import '3-modules/header' 23 | @import '3-modules/footer' 24 | @import '3-modules/sections' 25 | @import '3-modules/media-object' 26 | @import '3-modules/link-list' 27 | @import '3-modules/video-cascade' 28 | @import '3-modules/patreon-section' 29 | @import '3-modules/menu' 30 | @import '3-modules/popular-episodes' 31 | @import '3-modules/content-well' 32 | @import '3-modules/carousel' 33 | 34 | 35 | // 4 - pages 36 | @import '4-pages/page-home' 37 | @import '4-pages/page-jquerycourse' 38 | @import '4-pages/page-gifs' 39 | -------------------------------------------------------------------------------- /assets/img/aleksi.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/travisneilson/DevTipsShowWebsite/e78d5f746d27745fa10eba69138b415df63e6b46/assets/img/aleksi.jpg -------------------------------------------------------------------------------- /assets/img/arc.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /assets/img/devtips-logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /assets/img/icn/ic_arrow_left.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /assets/img/icn/ic_arrow_right.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /assets/img/icn/ic_close.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /assets/img/icn/ic_gif.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /assets/img/icn/ic_home.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /assets/img/icn/ic_jquery.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /assets/img/icn/ic_menu.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /assets/img/icn/ic_patreon.svg: -------------------------------------------------------------------------------- 1 | ic_patreon 2 | -------------------------------------------------------------------------------- /assets/img/icn/ic_play_circle_filled.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /assets/img/icn/ic_settings_overscan.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /assets/img/icn/ic_text_format.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /assets/img/icn/ic_view_carousel.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /assets/img/icn/ic_youtube.svg: -------------------------------------------------------------------------------- 1 | ic_youtube 2 | -------------------------------------------------------------------------------- /assets/img/icn/pat-chat.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 13 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /assets/img/icn/pat-hang.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 10 | 11 | 14 | 17 | 20 | 23 | 24 | 26 | 29 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /assets/img/icn/pat-pod.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 10 | 13 | 14 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /assets/img/icn/pat-vids.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 10 | 12 | 14 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /assets/img/learnjquery-cover1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/travisneilson/DevTipsShowWebsite/e78d5f746d27745fa10eba69138b415df63e6b46/assets/img/learnjquery-cover1.jpg -------------------------------------------------------------------------------- /assets/img/learnjquery-cover2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/travisneilson/DevTipsShowWebsite/e78d5f746d27745fa10eba69138b415df63e6b46/assets/img/learnjquery-cover2.jpg -------------------------------------------------------------------------------- /assets/img/learnjquery-cover3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/travisneilson/DevTipsShowWebsite/e78d5f746d27745fa10eba69138b415df63e6b46/assets/img/learnjquery-cover3.jpg -------------------------------------------------------------------------------- /assets/img/topRect.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /assets/img/topRect2.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Rectangle 2 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /assets/js/functions.js: -------------------------------------------------------------------------------- 1 | $(function(){ 2 | 3 | menuToggle(); 4 | carousel(); 5 | 6 | }); 7 | 8 | function menuToggle(){ 9 | $('.menu-plate').on('click', function(e){ 10 | e.stopPropagation(); 11 | }); 12 | 13 | $('.menu-close, header .menu-svg, .menu-overlay').on('click', function(){ 14 | $('html').toggleClass('menu-open'); 15 | }); 16 | } 17 | 18 | function carousel(){ 19 | 20 | var $carouselWrap = $('.carousel-wrap'), 21 | $carouselUnits = $carouselWrap.find('.carousel-unit'), 22 | unitCount = $carouselUnits.length, 23 | tallestUnitHeight = getTallestUnitHeight(), 24 | $carouselNav = $('.carousel-nav'); 25 | 26 | function getTallestUnitHeight(){ 27 | var heights = []; 28 | for (var i = 0; i < unitCount; i++) { 29 | var height = $carouselUnits.eq(i).height(); 30 | heights.push(height); 31 | } 32 | var tallest = Math.max.apply(Math, heights); 33 | return tallest; 34 | } 35 | 36 | function initCarousel(){ 37 | $carouselUnits.height(tallestUnitHeight).first().addClass('is-current'); 38 | $carouselWrap.height(tallestUnitHeight); 39 | } 40 | initCarousel(); 41 | 42 | function nextTestimonial(){ 43 | if ($carouselUnits.filter('.is-current').index() < unitCount-1) { 44 | $carouselUnits.filter('.is-current').next().addClass('is-current').siblings().removeClass('is-current'); 45 | } 46 | else { 47 | $carouselUnits.first().addClass('is-current').siblings().removeClass('is-current'); 48 | } 49 | } 50 | 51 | function prevTestimonial(){ 52 | if ($carouselUnits.filter('.is-current').index() === 0) { 53 | $carouselUnits.last().addClass('is-current').siblings().removeClass('is-current'); 54 | } 55 | else { 56 | $carouselUnits.filter('.is-current').prev().addClass('is-current').siblings().removeClass('is-current'); 57 | } 58 | } 59 | 60 | var carouselInterval = setInterval(function(){ nextTestimonial() }, 4500); 61 | 62 | $carouselNav.children('svg').on('click', function(){ 63 | clearInterval(carouselInterval); 64 | if ($(this).index() === $carouselNav.length) { 65 | nextTestimonial(); 66 | } else { 67 | prevTestimonial(); 68 | } 69 | }); 70 | 71 | } 72 | -------------------------------------------------------------------------------- /config.codekit: -------------------------------------------------------------------------------- 1 | { 2 | "CodeKitInfo": "This is a CodeKit 2.x project configuration file. It is designed to sync project settings across multiple machines. MODIFYING THE CONTENTS OF THIS FILE IS A POOR LIFE DECISION. If you do so, you will likely cause CodeKit to crash. This file is not useful unless accompanied by the project that created it in CodeKit 2. This file is not backwards-compatible with CodeKit 1.x. For more information, see: http:\/\/incident57.com\/codekit", 3 | "creatorBuild": "19127", 4 | "files": { 5 | "\/_includes\/_footer.jade": { 6 | "compileDebug": 1, 7 | "fileType": 512, 8 | "ignore": 1, 9 | "ignoreWasSetByUser": 0, 10 | "inputAbbreviatedPath": "\/_includes\/_footer.jade", 11 | "outputAbbreviatedPath": "\/_includes\/_footer.html", 12 | "outputPathIsOutsideProject": 0, 13 | "outputPathIsSetByUser": 0, 14 | "outputStyle": 0 15 | }, 16 | "\/_includes\/_header.jade": { 17 | "compileDebug": 1, 18 | "fileType": 512, 19 | "ignore": 1, 20 | "ignoreWasSetByUser": 0, 21 | "inputAbbreviatedPath": "\/_includes\/_header.jade", 22 | "outputAbbreviatedPath": "\/_includes\/_header.html", 23 | "outputPathIsOutsideProject": 0, 24 | "outputPathIsSetByUser": 0, 25 | "outputStyle": 0 26 | }, 27 | "\/_includes\/_jquerycourse-form.jade": { 28 | "compileDebug": 1, 29 | "fileType": 512, 30 | "ignore": 1, 31 | "ignoreWasSetByUser": 0, 32 | "inputAbbreviatedPath": "\/_includes\/_jquerycourse-form.jade", 33 | "outputAbbreviatedPath": "\/_includes\/_jquerycourse-form.html", 34 | "outputPathIsOutsideProject": 0, 35 | "outputPathIsSetByUser": 0, 36 | "outputStyle": 0 37 | }, 38 | "\/_includes\/_menu.jade": { 39 | "compileDebug": 1, 40 | "fileType": 512, 41 | "ignore": 1, 42 | "ignoreWasSetByUser": 0, 43 | "inputAbbreviatedPath": "\/_includes\/_menu.jade", 44 | "outputAbbreviatedPath": "\/_includes\/_menu.html", 45 | "outputPathIsOutsideProject": 0, 46 | "outputPathIsSetByUser": 0, 47 | "outputStyle": 0 48 | }, 49 | "\/_includes\/_popular-episodes.jade": { 50 | "compileDebug": 1, 51 | "fileType": 512, 52 | "ignore": 1, 53 | "ignoreWasSetByUser": 0, 54 | "inputAbbreviatedPath": "\/_includes\/_popular-episodes.jade", 55 | "outputAbbreviatedPath": "\/_includes\/_popular-episodes.html", 56 | "outputPathIsOutsideProject": 0, 57 | "outputPathIsSetByUser": 0, 58 | "outputStyle": 0 59 | }, 60 | "\/_includes\/_testimonial-carousel.jade": { 61 | "compileDebug": 1, 62 | "fileType": 512, 63 | "ignore": 1, 64 | "ignoreWasSetByUser": 0, 65 | "inputAbbreviatedPath": "\/_includes\/_testimonial-carousel.jade", 66 | "outputAbbreviatedPath": "\/_includes\/_testimonial-carousel.html", 67 | "outputPathIsOutsideProject": 0, 68 | "outputPathIsSetByUser": 0, 69 | "outputStyle": 0 70 | }, 71 | "\/_layouts\/_head.jade": { 72 | "compileDebug": 1, 73 | "fileType": 512, 74 | "ignore": 1, 75 | "ignoreWasSetByUser": 0, 76 | "inputAbbreviatedPath": "\/_layouts\/_head.jade", 77 | "outputAbbreviatedPath": "\/_layouts\/_head.html", 78 | "outputPathIsOutsideProject": 0, 79 | "outputPathIsSetByUser": 0, 80 | "outputStyle": 0 81 | }, 82 | "\/assets\/css\/1-tools\/_fonts.scss": { 83 | "createSourceMap": 0, 84 | "debugStyle": 0, 85 | "decimalPrecision": 10, 86 | "fileType": 4, 87 | "ignore": 1, 88 | "ignoreWasSetByUser": 0, 89 | "inputAbbreviatedPath": "\/assets\/css\/1-tools\/_fonts.scss", 90 | "outputAbbreviatedPath": "\/assets\/css\/css\/_fonts.css", 91 | "outputPathIsOutsideProject": 0, 92 | "outputPathIsSetByUser": 0, 93 | "outputStyle": 0, 94 | "shouldRunAutoprefixer": 1, 95 | "shouldRunBless": 0, 96 | "useLibsass": 0 97 | }, 98 | "\/assets\/css\/1-tools\/_normalize.scss": { 99 | "createSourceMap": 0, 100 | "debugStyle": 0, 101 | "decimalPrecision": 10, 102 | "fileType": 4, 103 | "ignore": 1, 104 | "ignoreWasSetByUser": 0, 105 | "inputAbbreviatedPath": "\/assets\/css\/1-tools\/_normalize.scss", 106 | "outputAbbreviatedPath": "\/assets\/css\/css\/_normalize.css", 107 | "outputPathIsOutsideProject": 0, 108 | "outputPathIsSetByUser": 0, 109 | "outputStyle": 0, 110 | "shouldRunAutoprefixer": 1, 111 | "shouldRunBless": 0, 112 | "useLibsass": 0 113 | }, 114 | "\/assets\/css\/1-tools\/_vars.sass": { 115 | "createSourceMap": 0, 116 | "debugStyle": 0, 117 | "decimalPrecision": 10, 118 | "fileType": 2, 119 | "ignore": 1, 120 | "ignoreWasSetByUser": 0, 121 | "inputAbbreviatedPath": "\/assets\/css\/1-tools\/_vars.sass", 122 | "outputAbbreviatedPath": "\/assets\/css\/css\/_vars.css", 123 | "outputPathIsOutsideProject": 0, 124 | "outputPathIsSetByUser": 0, 125 | "outputStyle": 0, 126 | "shouldRunAutoprefixer": 1, 127 | "shouldRunBless": 0, 128 | "useLibsass": false 129 | }, 130 | "\/assets\/css\/2-basics\/_body-element.sass": { 131 | "createSourceMap": 0, 132 | "debugStyle": 0, 133 | "decimalPrecision": 10, 134 | "fileType": 2, 135 | "ignore": 1, 136 | "ignoreWasSetByUser": 0, 137 | "inputAbbreviatedPath": "\/assets\/css\/2-basics\/_body-element.sass", 138 | "outputAbbreviatedPath": "\/assets\/css\/css\/_body-element.css", 139 | "outputPathIsOutsideProject": 0, 140 | "outputPathIsSetByUser": 0, 141 | "outputStyle": 0, 142 | "shouldRunAutoprefixer": 1, 143 | "shouldRunBless": 0, 144 | "useLibsass": false 145 | }, 146 | "\/assets\/css\/2-basics\/_buttons.sass": { 147 | "createSourceMap": 0, 148 | "debugStyle": 0, 149 | "decimalPrecision": 10, 150 | "fileType": 2, 151 | "ignore": 1, 152 | "ignoreWasSetByUser": 0, 153 | "inputAbbreviatedPath": "\/assets\/css\/2-basics\/_buttons.sass", 154 | "outputAbbreviatedPath": "\/assets\/css\/css\/_buttons.css", 155 | "outputPathIsOutsideProject": 0, 156 | "outputPathIsSetByUser": 0, 157 | "outputStyle": 0, 158 | "shouldRunAutoprefixer": 1, 159 | "shouldRunBless": 0, 160 | "useLibsass": false 161 | }, 162 | "\/assets\/css\/2-basics\/_forms.sass": { 163 | "createSourceMap": 0, 164 | "debugStyle": 0, 165 | "decimalPrecision": 10, 166 | "fileType": 2, 167 | "ignore": 1, 168 | "ignoreWasSetByUser": 0, 169 | "inputAbbreviatedPath": "\/assets\/css\/2-basics\/_forms.sass", 170 | "outputAbbreviatedPath": "\/assets\/css\/css\/_forms.css", 171 | "outputPathIsOutsideProject": 0, 172 | "outputPathIsSetByUser": 0, 173 | "outputStyle": 0, 174 | "shouldRunAutoprefixer": 1, 175 | "shouldRunBless": 0, 176 | "useLibsass": false 177 | }, 178 | "\/assets\/css\/2-basics\/_links.sass": { 179 | "createSourceMap": 0, 180 | "debugStyle": 0, 181 | "decimalPrecision": 10, 182 | "fileType": 2, 183 | "ignore": 1, 184 | "ignoreWasSetByUser": 0, 185 | "inputAbbreviatedPath": "\/assets\/css\/2-basics\/_links.sass", 186 | "outputAbbreviatedPath": "\/assets\/css\/css\/_links.css", 187 | "outputPathIsOutsideProject": 0, 188 | "outputPathIsSetByUser": 0, 189 | "outputStyle": 0, 190 | "shouldRunAutoprefixer": 1, 191 | "shouldRunBless": 0, 192 | "useLibsass": false 193 | }, 194 | "\/assets\/css\/2-basics\/_selection-colors.sass": { 195 | "createSourceMap": 0, 196 | "debugStyle": 0, 197 | "decimalPrecision": 10, 198 | "fileType": 2, 199 | "ignore": 1, 200 | "ignoreWasSetByUser": 0, 201 | "inputAbbreviatedPath": "\/assets\/css\/2-basics\/_selection-colors.sass", 202 | "outputAbbreviatedPath": "\/assets\/css\/css\/_selection-colors.css", 203 | "outputPathIsOutsideProject": 0, 204 | "outputPathIsSetByUser": 0, 205 | "outputStyle": 0, 206 | "shouldRunAutoprefixer": 1, 207 | "shouldRunBless": 0, 208 | "useLibsass": false 209 | }, 210 | "\/assets\/css\/2-basics\/_typography.sass": { 211 | "createSourceMap": 0, 212 | "debugStyle": 0, 213 | "decimalPrecision": 10, 214 | "fileType": 2, 215 | "ignore": 1, 216 | "ignoreWasSetByUser": 0, 217 | "inputAbbreviatedPath": "\/assets\/css\/2-basics\/_typography.sass", 218 | "outputAbbreviatedPath": "\/assets\/css\/css\/_typography.css", 219 | "outputPathIsOutsideProject": 0, 220 | "outputPathIsSetByUser": 0, 221 | "outputStyle": 0, 222 | "shouldRunAutoprefixer": 1, 223 | "shouldRunBless": 0, 224 | "useLibsass": false 225 | }, 226 | "\/assets\/css\/3-modules\/_carousel.sass": { 227 | "createSourceMap": 0, 228 | "debugStyle": 0, 229 | "decimalPrecision": 10, 230 | "fileType": 2, 231 | "ignore": 1, 232 | "ignoreWasSetByUser": 0, 233 | "inputAbbreviatedPath": "\/assets\/css\/3-modules\/_carousel.sass", 234 | "outputAbbreviatedPath": "\/assets\/css\/css\/_carousel.css", 235 | "outputPathIsOutsideProject": 0, 236 | "outputPathIsSetByUser": 0, 237 | "outputStyle": 0, 238 | "shouldRunAutoprefixer": 1, 239 | "shouldRunBless": 0, 240 | "useLibsass": false 241 | }, 242 | "\/assets\/css\/3-modules\/_content-well.sass": { 243 | "createSourceMap": 0, 244 | "debugStyle": 0, 245 | "decimalPrecision": 10, 246 | "fileType": 2, 247 | "ignore": 1, 248 | "ignoreWasSetByUser": 0, 249 | "inputAbbreviatedPath": "\/assets\/css\/3-modules\/_content-well.sass", 250 | "outputAbbreviatedPath": "\/assets\/css\/css\/_content-well.css", 251 | "outputPathIsOutsideProject": 0, 252 | "outputPathIsSetByUser": 0, 253 | "outputStyle": 0, 254 | "shouldRunAutoprefixer": 1, 255 | "shouldRunBless": 0, 256 | "useLibsass": false 257 | }, 258 | "\/assets\/css\/3-modules\/_flex-video.sass": { 259 | "createSourceMap": 0, 260 | "debugStyle": 0, 261 | "decimalPrecision": 10, 262 | "fileType": 2, 263 | "ignore": 1, 264 | "ignoreWasSetByUser": 0, 265 | "inputAbbreviatedPath": "\/assets\/css\/3-modules\/_flex-video.sass", 266 | "outputAbbreviatedPath": "\/assets\/css\/css\/_flex-video.css", 267 | "outputPathIsOutsideProject": 0, 268 | "outputPathIsSetByUser": 0, 269 | "outputStyle": 0, 270 | "shouldRunAutoprefixer": 1, 271 | "shouldRunBless": 0, 272 | "useLibsass": false 273 | }, 274 | "\/assets\/css\/3-modules\/_footer.sass": { 275 | "createSourceMap": 0, 276 | "debugStyle": 0, 277 | "decimalPrecision": 10, 278 | "fileType": 2, 279 | "ignore": 1, 280 | "ignoreWasSetByUser": 0, 281 | "inputAbbreviatedPath": "\/assets\/css\/3-modules\/_footer.sass", 282 | "outputAbbreviatedPath": "\/assets\/css\/css\/_footer.css", 283 | "outputPathIsOutsideProject": 0, 284 | "outputPathIsSetByUser": 0, 285 | "outputStyle": 0, 286 | "shouldRunAutoprefixer": 1, 287 | "shouldRunBless": 0, 288 | "useLibsass": false 289 | }, 290 | "\/assets\/css\/3-modules\/_header.sass": { 291 | "createSourceMap": 0, 292 | "debugStyle": 0, 293 | "decimalPrecision": 10, 294 | "fileType": 2, 295 | "ignore": 1, 296 | "ignoreWasSetByUser": 0, 297 | "inputAbbreviatedPath": "\/assets\/css\/3-modules\/_header.sass", 298 | "outputAbbreviatedPath": "\/assets\/css\/css\/_header.css", 299 | "outputPathIsOutsideProject": 0, 300 | "outputPathIsSetByUser": 0, 301 | "outputStyle": 0, 302 | "shouldRunAutoprefixer": 1, 303 | "shouldRunBless": 0, 304 | "useLibsass": false 305 | }, 306 | "\/assets\/css\/3-modules\/_link-list.sass": { 307 | "createSourceMap": 0, 308 | "debugStyle": 0, 309 | "decimalPrecision": 10, 310 | "fileType": 2, 311 | "ignore": 1, 312 | "ignoreWasSetByUser": 0, 313 | "inputAbbreviatedPath": "\/assets\/css\/3-modules\/_link-list.sass", 314 | "outputAbbreviatedPath": "\/assets\/css\/css\/_link-list.css", 315 | "outputPathIsOutsideProject": 0, 316 | "outputPathIsSetByUser": 0, 317 | "outputStyle": 0, 318 | "shouldRunAutoprefixer": 1, 319 | "shouldRunBless": 0, 320 | "useLibsass": false 321 | }, 322 | "\/assets\/css\/3-modules\/_media-object.sass": { 323 | "createSourceMap": 0, 324 | "debugStyle": 0, 325 | "decimalPrecision": 10, 326 | "fileType": 2, 327 | "ignore": 1, 328 | "ignoreWasSetByUser": 0, 329 | "inputAbbreviatedPath": "\/assets\/css\/3-modules\/_media-object.sass", 330 | "outputAbbreviatedPath": "\/assets\/css\/css\/_media-object.css", 331 | "outputPathIsOutsideProject": 0, 332 | "outputPathIsSetByUser": 0, 333 | "outputStyle": 0, 334 | "shouldRunAutoprefixer": 1, 335 | "shouldRunBless": 0, 336 | "useLibsass": false 337 | }, 338 | "\/assets\/css\/3-modules\/_menu.sass": { 339 | "createSourceMap": 0, 340 | "debugStyle": 0, 341 | "decimalPrecision": 10, 342 | "fileType": 2, 343 | "ignore": 1, 344 | "ignoreWasSetByUser": 0, 345 | "inputAbbreviatedPath": "\/assets\/css\/3-modules\/_menu.sass", 346 | "outputAbbreviatedPath": "\/assets\/css\/css\/_menu.css", 347 | "outputPathIsOutsideProject": 0, 348 | "outputPathIsSetByUser": 0, 349 | "outputStyle": 0, 350 | "shouldRunAutoprefixer": 1, 351 | "shouldRunBless": 0, 352 | "useLibsass": false 353 | }, 354 | "\/assets\/css\/3-modules\/_patreon-section.sass": { 355 | "createSourceMap": 0, 356 | "debugStyle": 0, 357 | "decimalPrecision": 10, 358 | "fileType": 2, 359 | "ignore": 1, 360 | "ignoreWasSetByUser": 0, 361 | "inputAbbreviatedPath": "\/assets\/css\/3-modules\/_patreon-section.sass", 362 | "outputAbbreviatedPath": "\/assets\/css\/css\/_patreon-section.css", 363 | "outputPathIsOutsideProject": 0, 364 | "outputPathIsSetByUser": 0, 365 | "outputStyle": 0, 366 | "shouldRunAutoprefixer": 1, 367 | "shouldRunBless": 0, 368 | "useLibsass": false 369 | }, 370 | "\/assets\/css\/3-modules\/_popular-episodes.sass": { 371 | "createSourceMap": 0, 372 | "debugStyle": 0, 373 | "decimalPrecision": 10, 374 | "fileType": 2, 375 | "ignore": 1, 376 | "ignoreWasSetByUser": 0, 377 | "inputAbbreviatedPath": "\/assets\/css\/3-modules\/_popular-episodes.sass", 378 | "outputAbbreviatedPath": "\/assets\/css\/css\/_popular-episodes.css", 379 | "outputPathIsOutsideProject": 0, 380 | "outputPathIsSetByUser": 0, 381 | "outputStyle": 0, 382 | "shouldRunAutoprefixer": 1, 383 | "shouldRunBless": 0, 384 | "useLibsass": false 385 | }, 386 | "\/assets\/css\/3-modules\/_sections.sass": { 387 | "createSourceMap": 0, 388 | "debugStyle": 0, 389 | "decimalPrecision": 10, 390 | "fileType": 2, 391 | "ignore": 1, 392 | "ignoreWasSetByUser": 0, 393 | "inputAbbreviatedPath": "\/assets\/css\/3-modules\/_sections.sass", 394 | "outputAbbreviatedPath": "\/assets\/css\/css\/_sections.css", 395 | "outputPathIsOutsideProject": 0, 396 | "outputPathIsSetByUser": 0, 397 | "outputStyle": 0, 398 | "shouldRunAutoprefixer": 1, 399 | "shouldRunBless": 0, 400 | "useLibsass": false 401 | }, 402 | "\/assets\/css\/3-modules\/_video-cascade.sass": { 403 | "createSourceMap": 0, 404 | "debugStyle": 0, 405 | "decimalPrecision": 10, 406 | "fileType": 2, 407 | "ignore": 1, 408 | "ignoreWasSetByUser": 0, 409 | "inputAbbreviatedPath": "\/assets\/css\/3-modules\/_video-cascade.sass", 410 | "outputAbbreviatedPath": "\/assets\/css\/css\/_video-cascade.css", 411 | "outputPathIsOutsideProject": 0, 412 | "outputPathIsSetByUser": 0, 413 | "outputStyle": 0, 414 | "shouldRunAutoprefixer": 1, 415 | "shouldRunBless": 0, 416 | "useLibsass": false 417 | }, 418 | "\/assets\/css\/4-pages\/_page-gifs.sass": { 419 | "createSourceMap": 0, 420 | "debugStyle": 0, 421 | "decimalPrecision": 10, 422 | "fileType": 2, 423 | "ignore": 1, 424 | "ignoreWasSetByUser": 0, 425 | "inputAbbreviatedPath": "\/assets\/css\/4-pages\/_page-gifs.sass", 426 | "outputAbbreviatedPath": "\/assets\/css\/css\/_page-gifs.css", 427 | "outputPathIsOutsideProject": 0, 428 | "outputPathIsSetByUser": 0, 429 | "outputStyle": 0, 430 | "shouldRunAutoprefixer": 1, 431 | "shouldRunBless": 0, 432 | "useLibsass": false 433 | }, 434 | "\/assets\/css\/4-pages\/_page-home.sass": { 435 | "createSourceMap": 0, 436 | "debugStyle": 0, 437 | "decimalPrecision": 10, 438 | "fileType": 2, 439 | "ignore": 1, 440 | "ignoreWasSetByUser": 0, 441 | "inputAbbreviatedPath": "\/assets\/css\/4-pages\/_page-home.sass", 442 | "outputAbbreviatedPath": "\/assets\/css\/css\/_page-home.css", 443 | "outputPathIsOutsideProject": 0, 444 | "outputPathIsSetByUser": 0, 445 | "outputStyle": 0, 446 | "shouldRunAutoprefixer": 1, 447 | "shouldRunBless": 0, 448 | "useLibsass": false 449 | }, 450 | "\/assets\/css\/4-pages\/_page-jquerycourse.sass": { 451 | "createSourceMap": 0, 452 | "debugStyle": 0, 453 | "decimalPrecision": 10, 454 | "fileType": 2, 455 | "ignore": 1, 456 | "ignoreWasSetByUser": 0, 457 | "inputAbbreviatedPath": "\/assets\/css\/4-pages\/_page-jquerycourse.sass", 458 | "outputAbbreviatedPath": "\/assets\/css\/css\/_page-jquerycourse.css", 459 | "outputPathIsOutsideProject": 0, 460 | "outputPathIsSetByUser": 0, 461 | "outputStyle": 0, 462 | "shouldRunAutoprefixer": 1, 463 | "shouldRunBless": 0, 464 | "useLibsass": false 465 | }, 466 | "\/assets\/css\/main.css": { 467 | "fileType": 16, 468 | "ignore": 1, 469 | "ignoreWasSetByUser": 0, 470 | "inputAbbreviatedPath": "\/assets\/css\/main.css", 471 | "outputAbbreviatedPath": "No Output Path", 472 | "outputPathIsOutsideProject": 0, 473 | "outputPathIsSetByUser": 0 474 | }, 475 | "\/assets\/css\/main.sass": { 476 | "createSourceMap": 0, 477 | "debugStyle": 0, 478 | "decimalPrecision": 10, 479 | "fileType": 2, 480 | "ignore": 0, 481 | "ignoreWasSetByUser": 0, 482 | "inputAbbreviatedPath": "\/assets\/css\/main.sass", 483 | "outputAbbreviatedPath": "\/assets\/css\/main.css", 484 | "outputPathIsOutsideProject": 0, 485 | "outputPathIsSetByUser": 1, 486 | "outputStyle": 0, 487 | "shouldRunAutoprefixer": 1, 488 | "shouldRunBless": 0, 489 | "useLibsass": false 490 | }, 491 | "\/assets\/img\/aleksi.jpg": { 492 | "fileType": 16384, 493 | "ignore": 0, 494 | "ignoreWasSetByUser": 0, 495 | "initialSize": 42778, 496 | "inputAbbreviatedPath": "\/assets\/img\/aleksi.jpg", 497 | "outputAbbreviatedPath": "\/assets\/img\/aleksi.jpg", 498 | "outputPathIsOutsideProject": 0, 499 | "outputPathIsSetByUser": 0, 500 | "processed": 0 501 | }, 502 | "\/assets\/img\/learnjquery-cover1.jpg": { 503 | "fileType": 16384, 504 | "ignore": 0, 505 | "ignoreWasSetByUser": 0, 506 | "initialSize": 57487, 507 | "inputAbbreviatedPath": "\/assets\/img\/learnjquery-cover1.jpg", 508 | "outputAbbreviatedPath": "\/assets\/img\/learnjquery-cover1.jpg", 509 | "outputPathIsOutsideProject": 0, 510 | "outputPathIsSetByUser": 0, 511 | "processed": 0 512 | }, 513 | "\/assets\/img\/learnjquery-cover2.jpg": { 514 | "fileType": 16384, 515 | "ignore": 0, 516 | "ignoreWasSetByUser": 0, 517 | "initialSize": 58976, 518 | "inputAbbreviatedPath": "\/assets\/img\/learnjquery-cover2.jpg", 519 | "outputAbbreviatedPath": "\/assets\/img\/learnjquery-cover2.jpg", 520 | "outputPathIsOutsideProject": 0, 521 | "outputPathIsSetByUser": 0, 522 | "processed": 0 523 | }, 524 | "\/assets\/img\/learnjquery-cover3.jpg": { 525 | "fileType": 16384, 526 | "ignore": 0, 527 | "ignoreWasSetByUser": 0, 528 | "initialSize": 499521, 529 | "inputAbbreviatedPath": "\/assets\/img\/learnjquery-cover3.jpg", 530 | "outputAbbreviatedPath": "\/assets\/img\/learnjquery-cover3.jpg", 531 | "outputPathIsOutsideProject": 0, 532 | "outputPathIsSetByUser": 0, 533 | "processed": 0 534 | }, 535 | "\/assets\/js\/functions.js": { 536 | "fileType": 64, 537 | "ignore": 1, 538 | "ignoreWasSetByUser": 1, 539 | "inputAbbreviatedPath": "\/assets\/js\/functions.js", 540 | "outputAbbreviatedPath": "\/assets\/js\/min\/functions-min.js", 541 | "outputPathIsOutsideProject": 0, 542 | "outputPathIsSetByUser": 0, 543 | "outputStyle": 1, 544 | "syntaxCheckerStyle": 0 545 | }, 546 | "\/assets\/js\/jquery-2.2.2.min.js": { 547 | "fileType": 64, 548 | "ignore": 0, 549 | "ignoreWasSetByUser": 0, 550 | "inputAbbreviatedPath": "\/assets\/js\/jquery-2.2.2.min.js", 551 | "outputAbbreviatedPath": "\/assets\/js\/min\/jquery-2.2.2.min-min.js", 552 | "outputPathIsOutsideProject": 0, 553 | "outputPathIsSetByUser": 0, 554 | "outputStyle": 1, 555 | "syntaxCheckerStyle": 1 556 | }, 557 | "\/gifs\/index.html": { 558 | "fileType": 8192, 559 | "ignore": 1, 560 | "ignoreWasSetByUser": 0, 561 | "inputAbbreviatedPath": "\/gifs\/index.html", 562 | "outputAbbreviatedPath": "No Output Path", 563 | "outputPathIsOutsideProject": 0, 564 | "outputPathIsSetByUser": 0 565 | }, 566 | "\/gifs\/index.jade": { 567 | "compileDebug": 1, 568 | "fileType": 512, 569 | "ignore": 0, 570 | "ignoreWasSetByUser": 0, 571 | "inputAbbreviatedPath": "\/gifs\/index.jade", 572 | "outputAbbreviatedPath": "\/gifs\/index.html", 573 | "outputPathIsOutsideProject": 0, 574 | "outputPathIsSetByUser": 0, 575 | "outputStyle": 0 576 | }, 577 | "\/index.html": { 578 | "fileType": 8192, 579 | "ignore": 1, 580 | "ignoreWasSetByUser": 0, 581 | "inputAbbreviatedPath": "\/index.html", 582 | "outputAbbreviatedPath": "No Output Path", 583 | "outputPathIsOutsideProject": 0, 584 | "outputPathIsSetByUser": 0 585 | }, 586 | "\/index.jade": { 587 | "compileDebug": 1, 588 | "fileType": 512, 589 | "ignore": 0, 590 | "ignoreWasSetByUser": 0, 591 | "inputAbbreviatedPath": "\/index.jade", 592 | "outputAbbreviatedPath": "\/index.html", 593 | "outputPathIsOutsideProject": 0, 594 | "outputPathIsSetByUser": 0, 595 | "outputStyle": 0 596 | }, 597 | "\/jquerycourse\/index.html": { 598 | "fileType": 8192, 599 | "ignore": 1, 600 | "ignoreWasSetByUser": 0, 601 | "inputAbbreviatedPath": "\/jquerycourse\/index.html", 602 | "outputAbbreviatedPath": "No Output Path", 603 | "outputPathIsOutsideProject": 0, 604 | "outputPathIsSetByUser": 0 605 | }, 606 | "\/killingitwithjquery\/index.html": { 607 | "fileType": 8192, 608 | "ignore": 1, 609 | "ignoreWasSetByUser": 0, 610 | "inputAbbreviatedPath": "\/killingitwithjquery\/index.html", 611 | "outputAbbreviatedPath": "No Output Path", 612 | "outputPathIsOutsideProject": 0, 613 | "outputPathIsSetByUser": 0 614 | }, 615 | "\/killingitwithjquery\/index.jade": { 616 | "compileDebug": 1, 617 | "fileType": 512, 618 | "ignore": 0, 619 | "ignoreWasSetByUser": 0, 620 | "inputAbbreviatedPath": "\/killingitwithjquery\/index.jade", 621 | "outputAbbreviatedPath": "\/killingitwithjquery\/index.html", 622 | "outputPathIsOutsideProject": 0, 623 | "outputPathIsSetByUser": 0, 624 | "outputStyle": 0 625 | }, 626 | "\/README.md": { 627 | "criticStyle": 0, 628 | "enableFootnotes": 1, 629 | "enableLabels": 1, 630 | "enableSmartQuotes": 1, 631 | "escapeLineBreaks": 0, 632 | "fileType": 4096, 633 | "ignore": 1, 634 | "ignoreWasSetByUser": 1, 635 | "inputAbbreviatedPath": "\/README.md", 636 | "maskEmailAddresses": 1, 637 | "outputAbbreviatedPath": "\/README.html", 638 | "outputFormat": 0, 639 | "outputPathIsOutsideProject": 0, 640 | "outputPathIsSetByUser": 0, 641 | "outputStyle": 0, 642 | "parseMetadata": 1, 643 | "processHTML": 0, 644 | "randomFootnoteNumbers": 0, 645 | "useCompatibilityMode": 0 646 | } 647 | }, 648 | "hooks": [ 649 | ], 650 | "lastSavedByUser": "Travis Neilson", 651 | "manualImportLinks": { 652 | }, 653 | "projectAttributes": { 654 | "bowerAbbreviatedPath": "", 655 | "displayValue": "DevTipsShow", 656 | "displayValueWasSetByUser": 1, 657 | "iconImageName": "meme-trap" 658 | }, 659 | "projectSettings": { 660 | "alwaysUseExternalServer": 0, 661 | "animateCSSInjections": 1, 662 | "autoApplyPSLanguageSettingsStyle": 0, 663 | "autoprefixerBrowserString": "> 1%, last 2 versions, Firefox ESR, Opera 12.1", 664 | "autoSyncProjectSettingsFile": 1, 665 | "browserRefreshDelay": 0, 666 | "coffeeAutoOutputPathEnabled": 1, 667 | "coffeeAutoOutputPathFilenamePattern": "*.js", 668 | "coffeeAutoOutputPathRelativePath": "", 669 | "coffeeAutoOutputPathReplace1": "", 670 | "coffeeAutoOutputPathReplace2": "", 671 | "coffeeAutoOutputPathStyle": 0, 672 | "coffeeCreateSourceMap": 0, 673 | "coffeeLintFlags2": { 674 | "arrow_spacing": { 675 | "active": 0, 676 | "flagValue": -1 677 | }, 678 | "camel_case_classes": { 679 | "active": 1, 680 | "flagValue": -1 681 | }, 682 | "colon_assignment_spacing": { 683 | "active": 0, 684 | "flagValue": 1 685 | }, 686 | "cyclomatic_complexity": { 687 | "active": 0, 688 | "flagValue": 10 689 | }, 690 | "duplicate_key": { 691 | "active": 1, 692 | "flagValue": -1 693 | }, 694 | "empty_constructor_needs_parens": { 695 | "active": 0, 696 | "flagValue": -1 697 | }, 698 | "ensure_comprehensions": { 699 | "active": 1, 700 | "flagValue": -1 701 | }, 702 | "indentation": { 703 | "active": 1, 704 | "flagValue": 2 705 | }, 706 | "line_endings": { 707 | "active": 0, 708 | "flagValue": 0 709 | }, 710 | "max_line_length": { 711 | "active": 0, 712 | "flagValue": 150 713 | }, 714 | "missing_fat_arrows": { 715 | "active": 0, 716 | "flagValue": -1 717 | }, 718 | "newlines_after_classes": { 719 | "active": 0, 720 | "flagValue": 3 721 | }, 722 | "no_backticks": { 723 | "active": 1, 724 | "flagValue": -1 725 | }, 726 | "no_debugger": { 727 | "active": 1, 728 | "flagValue": -1 729 | }, 730 | "no_empty_functions": { 731 | "active": 0, 732 | "flagValue": -1 733 | }, 734 | "no_empty_param_list": { 735 | "active": 0, 736 | "flagValue": -1 737 | }, 738 | "no_implicit_braces": { 739 | "active": 1, 740 | "flagValue": -1 741 | }, 742 | "no_implicit_parens": { 743 | "active": 0, 744 | "flagValue": -1 745 | }, 746 | "no_interpolation_in_single_quotes": { 747 | "active": 0, 748 | "flagValue": -1 749 | }, 750 | "no_nested_string_interpolation": { 751 | "active": 1, 752 | "flagValue": -1 753 | }, 754 | "no_plusplus": { 755 | "active": 0, 756 | "flagValue": -1 757 | }, 758 | "no_private_function_fat_arrows": { 759 | "active": 1, 760 | "flagValue": -1 761 | }, 762 | "no_stand_alone_at": { 763 | "active": 1, 764 | "flagValue": -1 765 | }, 766 | "no_tabs": { 767 | "active": 1, 768 | "flagValue": -1 769 | }, 770 | "no_this": { 771 | "active": 0, 772 | "flagValue": -1 773 | }, 774 | "no_throwing_strings": { 775 | "active": 1, 776 | "flagValue": -1 777 | }, 778 | "no_trailing_semicolons": { 779 | "active": 1, 780 | "flagValue": -1 781 | }, 782 | "no_trailing_whitespace": { 783 | "active": 1, 784 | "flagValue": -1 785 | }, 786 | "no_unnecessary_double_quotes": { 787 | "active": 0, 788 | "flagValue": -1 789 | }, 790 | "no_unnecessary_fat_arrows": { 791 | "active": 1, 792 | "flagValue": -1 793 | }, 794 | "non_empty_constructor_needs_parens": { 795 | "active": 0, 796 | "flagValue": -1 797 | }, 798 | "prefer_english_operator": { 799 | "active": 0, 800 | "flagValue": -1 801 | }, 802 | "space_operators": { 803 | "active": 0, 804 | "flagValue": -1 805 | }, 806 | "spacing_after_comma": { 807 | "active": 1, 808 | "flagValue": -1 809 | } 810 | }, 811 | "coffeeMinifyOutput": 1, 812 | "coffeeOutputStyle": 0, 813 | "coffeeSyntaxCheckerStyle": 1, 814 | "externalServerAddress": "http:\/\/localhost:8888", 815 | "externalServerPreviewPathAddition": "", 816 | "genericWebpageFileExtensionsString": "html, htm, shtml, shtm, xhtml, php, jsp, asp, aspx, erb, ctp", 817 | "hamlAutoOutputPathEnabled": 1, 818 | "hamlAutoOutputPathFilenamePattern": "*.html", 819 | "hamlAutoOutputPathRelativePath": "", 820 | "hamlAutoOutputPathReplace1": "", 821 | "hamlAutoOutputPathReplace2": "", 822 | "hamlAutoOutputPathStyle": 0, 823 | "hamlEscapeHTMLCharacters": 0, 824 | "hamlNoEscapeInAttributes": 0, 825 | "hamlOutputFormat": 2, 826 | "hamlOutputStyle": 0, 827 | "hamlUseCDATA": 0, 828 | "hamlUseDoubleQuotes": 0, 829 | "hamlUseUnixNewlines": 0, 830 | "jadeAutoOutputPathEnabled": 1, 831 | "jadeAutoOutputPathFilenamePattern": "*.html", 832 | "jadeAutoOutputPathRelativePath": "", 833 | "jadeAutoOutputPathReplace1": "", 834 | "jadeAutoOutputPathReplace2": "", 835 | "jadeAutoOutputPathStyle": 0, 836 | "jadeCompileDebug": 1, 837 | "jadeOutputStyle": 0, 838 | "javascriptAutoOutputPathEnabled": 1, 839 | "javascriptAutoOutputPathFilenamePattern": "*-min.js", 840 | "javascriptAutoOutputPathRelativePath": "\/min", 841 | "javascriptAutoOutputPathReplace1": "", 842 | "javascriptAutoOutputPathReplace2": "", 843 | "javascriptAutoOutputPathStyle": 2, 844 | "javascriptCreateSourceMap": 1, 845 | "javascriptOutputStyle": 1, 846 | "javascriptSyntaxCheckerStyle": 1, 847 | "jsCheckerReservedNamesString": "", 848 | "jsHintFlags2": { 849 | "asi": { 850 | "active": 0, 851 | "flagValue": -1 852 | }, 853 | "bitwise": { 854 | "active": 1, 855 | "flagValue": -1 856 | }, 857 | "boss": { 858 | "active": 0, 859 | "flagValue": -1 860 | }, 861 | "browser": { 862 | "active": 1, 863 | "flagValue": -1 864 | }, 865 | "browserify": { 866 | "active": 0, 867 | "flagValue": -1 868 | }, 869 | "camelcase": { 870 | "active": 0, 871 | "flagValue": -1 872 | }, 873 | "couch": { 874 | "active": 0, 875 | "flagValue": -1 876 | }, 877 | "curly": { 878 | "active": 1, 879 | "flagValue": -1 880 | }, 881 | "debug": { 882 | "active": 0, 883 | "flagValue": -1 884 | }, 885 | "devel": { 886 | "active": 0, 887 | "flagValue": -1 888 | }, 889 | "dojo": { 890 | "active": 0, 891 | "flagValue": -1 892 | }, 893 | "elision": { 894 | "active": 1, 895 | "flagValue": -1 896 | }, 897 | "eqeqeq": { 898 | "active": 1, 899 | "flagValue": -1 900 | }, 901 | "eqnull": { 902 | "active": 0, 903 | "flagValue": -1 904 | }, 905 | "es3": { 906 | "active": 0, 907 | "flagValue": -1 908 | }, 909 | "esnext": { 910 | "active": 0, 911 | "flagValue": -1 912 | }, 913 | "evil": { 914 | "active": 0, 915 | "flagValue": -1 916 | }, 917 | "expr": { 918 | "active": 0, 919 | "flagValue": -1 920 | }, 921 | "forin": { 922 | "active": 0, 923 | "flagValue": -1 924 | }, 925 | "freeze": { 926 | "active": 1, 927 | "flagValue": -1 928 | }, 929 | "funcscope": { 930 | "active": 0, 931 | "flagValue": -1 932 | }, 933 | "futurehostile": { 934 | "active": 0, 935 | "flagValue": -1 936 | }, 937 | "globalstrict": { 938 | "active": 0, 939 | "flagValue": -1 940 | }, 941 | "immed": { 942 | "active": 0, 943 | "flagValue": -1 944 | }, 945 | "indent": { 946 | "active": 0, 947 | "flagValue": 4 948 | }, 949 | "iterator": { 950 | "active": 0, 951 | "flagValue": -1 952 | }, 953 | "jasmine": { 954 | "active": 0, 955 | "flagValue": -1 956 | }, 957 | "jquery": { 958 | "active": 1, 959 | "flagValue": -1 960 | }, 961 | "lastsemic": { 962 | "active": 0, 963 | "flagValue": -1 964 | }, 965 | "latedef": { 966 | "active": 1, 967 | "flagValue": -1 968 | }, 969 | "laxbreak": { 970 | "active": 0, 971 | "flagValue": -1 972 | }, 973 | "laxcomma": { 974 | "active": 0, 975 | "flagValue": -1 976 | }, 977 | "loopfunc": { 978 | "active": 0, 979 | "flagValue": -1 980 | }, 981 | "maxcomplexity": { 982 | "active": 0, 983 | "flagValue": 10 984 | }, 985 | "maxdepth": { 986 | "active": 0, 987 | "flagValue": 3 988 | }, 989 | "maxlen": { 990 | "active": 0, 991 | "flagValue": 150 992 | }, 993 | "maxparams": { 994 | "active": 0, 995 | "flagValue": 3 996 | }, 997 | "maxstatements": { 998 | "active": 0, 999 | "flagValue": 4 1000 | }, 1001 | "mocha": { 1002 | "active": 0, 1003 | "flagValue": -1 1004 | }, 1005 | "mootools": { 1006 | "active": 0, 1007 | "flagValue": -1 1008 | }, 1009 | "moz": { 1010 | "active": 0, 1011 | "flagValue": -1 1012 | }, 1013 | "multistr": { 1014 | "active": 0, 1015 | "flagValue": -1 1016 | }, 1017 | "newcap": { 1018 | "active": 1, 1019 | "flagValue": -1 1020 | }, 1021 | "noarg": { 1022 | "active": 1, 1023 | "flagValue": -1 1024 | }, 1025 | "nocomma": { 1026 | "active": 0, 1027 | "flagValue": -1 1028 | }, 1029 | "node": { 1030 | "active": 0, 1031 | "flagValue": -1 1032 | }, 1033 | "noempty": { 1034 | "active": 0, 1035 | "flagValue": -1 1036 | }, 1037 | "nonbsp": { 1038 | "active": 0, 1039 | "flagValue": -1 1040 | }, 1041 | "nonew": { 1042 | "active": 1, 1043 | "flagValue": -1 1044 | }, 1045 | "nonstandard": { 1046 | "active": 0, 1047 | "flagValue": -1 1048 | }, 1049 | "notypeof": { 1050 | "active": 1, 1051 | "flagValue": -1 1052 | }, 1053 | "noyield": { 1054 | "active": 0, 1055 | "flagValue": -1 1056 | }, 1057 | "onecase": { 1058 | "active": 0, 1059 | "flagValue": -1 1060 | }, 1061 | "phantom": { 1062 | "active": 0, 1063 | "flagValue": -1 1064 | }, 1065 | "plusplus": { 1066 | "active": 0, 1067 | "flagValue": -1 1068 | }, 1069 | "proto": { 1070 | "active": 0, 1071 | "flagValue": -1 1072 | }, 1073 | "prototypejs": { 1074 | "active": 0, 1075 | "flagValue": -1 1076 | }, 1077 | "qunit": { 1078 | "active": 0, 1079 | "flagValue": -1 1080 | }, 1081 | "regexp": { 1082 | "active": 1, 1083 | "flagValue": -1 1084 | }, 1085 | "rhino": { 1086 | "active": 0, 1087 | "flagValue": -1 1088 | }, 1089 | "scripturl": { 1090 | "active": 0, 1091 | "flagValue": -1 1092 | }, 1093 | "shadow": { 1094 | "active": 0, 1095 | "flagValue": -1 1096 | }, 1097 | "shelljs": { 1098 | "active": 0, 1099 | "flagValue": -1 1100 | }, 1101 | "singleGroups": { 1102 | "active": 0, 1103 | "flagValue": -1 1104 | }, 1105 | "strict": { 1106 | "active": 0, 1107 | "flagValue": -1 1108 | }, 1109 | "sub": { 1110 | "active": 0, 1111 | "flagValue": -1 1112 | }, 1113 | "supernew": { 1114 | "active": 0, 1115 | "flagValue": -1 1116 | }, 1117 | "typed": { 1118 | "active": 0, 1119 | "flagValue": -1 1120 | }, 1121 | "undef": { 1122 | "active": 1, 1123 | "flagValue": -1 1124 | }, 1125 | "unused": { 1126 | "active": 1, 1127 | "flagValue": -1 1128 | }, 1129 | "varstmt": { 1130 | "active": 0, 1131 | "flagValue": -1 1132 | }, 1133 | "withstmt": { 1134 | "active": 0, 1135 | "flagValue": -1 1136 | }, 1137 | "worker": { 1138 | "active": 0, 1139 | "flagValue": -1 1140 | }, 1141 | "wsh": { 1142 | "active": 0, 1143 | "flagValue": -1 1144 | }, 1145 | "yui": { 1146 | "active": 0, 1147 | "flagValue": -1 1148 | } 1149 | }, 1150 | "jsLintFlags2": { 1151 | "bitwise": { 1152 | "active": 0, 1153 | "flagValue": -1 1154 | }, 1155 | "browser": { 1156 | "active": 1, 1157 | "flagValue": -1 1158 | }, 1159 | "couch": { 1160 | "active": 0, 1161 | "flagValue": -1 1162 | }, 1163 | "devel": { 1164 | "active": 0, 1165 | "flagValue": -1 1166 | }, 1167 | "es6": { 1168 | "active": 0, 1169 | "flagValue": -1 1170 | }, 1171 | "eval": { 1172 | "active": 0, 1173 | "flagValue": -1 1174 | }, 1175 | "for": { 1176 | "active": 0, 1177 | "flagValue": -1 1178 | }, 1179 | "maxlen": { 1180 | "active": 0, 1181 | "flagValue": 150 1182 | }, 1183 | "node": { 1184 | "active": 0, 1185 | "flagValue": -1 1186 | }, 1187 | "this": { 1188 | "active": 0, 1189 | "flagValue": -1 1190 | }, 1191 | "white": { 1192 | "active": 0, 1193 | "flagValue": -1 1194 | } 1195 | }, 1196 | "jsonAutoOutputPathEnabled": 0, 1197 | "jsonAutoOutputPathFilenamePattern": "*-min.json", 1198 | "jsonAutoOutputPathRelativePath": "", 1199 | "jsonAutoOutputPathReplace1": "", 1200 | "jsonAutoOutputPathReplace2": "", 1201 | "jsonAutoOutputPathStyle": 0, 1202 | "jsonOrderOutput": 0, 1203 | "jsonOutputStyle": 1, 1204 | "kitAutoOutputPathEnabled": 1, 1205 | "kitAutoOutputPathFilenamePattern": "*.html", 1206 | "kitAutoOutputPathRelativePath": "", 1207 | "kitAutoOutputPathReplace1": "", 1208 | "kitAutoOutputPathReplace2": "", 1209 | "kitAutoOutputPathStyle": 0, 1210 | "lessAllowInsecureImports": 0, 1211 | "lessAutoOutputPathEnabled": 1, 1212 | "lessAutoOutputPathFilenamePattern": "*.css", 1213 | "lessAutoOutputPathRelativePath": "..\/css", 1214 | "lessAutoOutputPathReplace1": "less", 1215 | "lessAutoOutputPathReplace2": "css", 1216 | "lessAutoOutputPathStyle": 2, 1217 | "lessCreateSourceMap": 0, 1218 | "lessDisableJavascript": 0, 1219 | "lessIeCompatibility": 1, 1220 | "lessOutputStyle": 0, 1221 | "lessRelativeURLS": 0, 1222 | "lessStrictImports": 0, 1223 | "lessStrictMath": 0, 1224 | "lessStrictUnits": 0, 1225 | "markdownAutoOutputPathEnabled": 1, 1226 | "markdownAutoOutputPathFilenamePattern": "*.html", 1227 | "markdownAutoOutputPathRelativePath": "", 1228 | "markdownAutoOutputPathReplace1": "", 1229 | "markdownAutoOutputPathReplace2": "", 1230 | "markdownAutoOutputPathStyle": 0, 1231 | "markdownCriticStyle": 0, 1232 | "markdownEnableFootnotes": 1, 1233 | "markdownEnableLabels": 1, 1234 | "markdownEnableSmartQuotes": 1, 1235 | "markdownEscapeLineBreaks": 0, 1236 | "markdownMaskEmailAddresses": 1, 1237 | "markdownOutputFormat": 0, 1238 | "markdownOutputStyle": 0, 1239 | "markdownParseMetadata": 1, 1240 | "markdownProcessHTML": 0, 1241 | "markdownRandomFootnoteNumbers": 0, 1242 | "markdownUseCompatibilityMode": 0, 1243 | "reloadFileURLs": 0, 1244 | "sassAutoOutputPathEnabled": 1, 1245 | "sassAutoOutputPathFilenamePattern": "*.css", 1246 | "sassAutoOutputPathRelativePath": "..\/css", 1247 | "sassAutoOutputPathReplace1": "sass", 1248 | "sassAutoOutputPathReplace2": "css", 1249 | "sassAutoOutputPathStyle": 2, 1250 | "sassCreateSourceMap": 0, 1251 | "sassDebugStyle": 0, 1252 | "sassDecimalPrecision": 10, 1253 | "sassOutputStyle": 0, 1254 | "sassUseLibsass": 0, 1255 | "shouldRunAutoprefixer": 1, 1256 | "shouldRunBless": 0, 1257 | "skippedItemsString": ".svn, .git, .hg, log, _logs, _cache, cache, logs, node_modules", 1258 | "slimAutoOutputPathEnabled": 1, 1259 | "slimAutoOutputPathFilenamePattern": "*.html", 1260 | "slimAutoOutputPathRelativePath": "", 1261 | "slimAutoOutputPathReplace1": "", 1262 | "slimAutoOutputPathReplace2": "", 1263 | "slimAutoOutputPathStyle": 0, 1264 | "slimCompileOnly": 0, 1265 | "slimLogicless": 0, 1266 | "slimOutputFormat": 0, 1267 | "slimOutputStyle": 1, 1268 | "slimRailsCompatible": 0, 1269 | "stylusAutoOutputPathEnabled": 1, 1270 | "stylusAutoOutputPathFilenamePattern": "*.css", 1271 | "stylusAutoOutputPathRelativePath": "..\/css", 1272 | "stylusAutoOutputPathReplace1": "stylus", 1273 | "stylusAutoOutputPathReplace2": "css", 1274 | "stylusAutoOutputPathStyle": 2, 1275 | "stylusCreateSourceMap": 0, 1276 | "stylusDebugStyle": 0, 1277 | "stylusImportCSS": 0, 1278 | "stylusOutputStyle": 0, 1279 | "stylusResolveRelativeURLS": 0, 1280 | "typescriptAutoOutputPathEnabled": 1, 1281 | "typescriptAutoOutputPathFilenamePattern": "*.js", 1282 | "typescriptAutoOutputPathRelativePath": "\/js", 1283 | "typescriptAutoOutputPathReplace1": "", 1284 | "typescriptAutoOutputPathReplace2": "", 1285 | "typescriptAutoOutputPathStyle": 2, 1286 | "typescriptCreateDeclarationFile": 0, 1287 | "typescriptCreateSourceMap": 0, 1288 | "typescriptJSXMode": 0, 1289 | "typescriptMinifyOutput": 0, 1290 | "typescriptModuleResolutionType": 0, 1291 | "typescriptModuleType": 0, 1292 | "typescriptNoImplicitAny": 0, 1293 | "typescriptPreserveConstEnums": 0, 1294 | "typescriptRemoveComments": 0, 1295 | "typescriptSuppressImplicitAnyIndexErrors": 0, 1296 | "typescriptTargetECMAVersion": 0, 1297 | "uglifyDefinesString": "", 1298 | "uglifyFlags2": { 1299 | "ascii-only": { 1300 | "active": 0, 1301 | "flagValue": -1 1302 | }, 1303 | "bare-returns": { 1304 | "active": 0, 1305 | "flagValue": -1 1306 | }, 1307 | "booleans": { 1308 | "active": 1, 1309 | "flagValue": -1 1310 | }, 1311 | "bracketize": { 1312 | "active": 0, 1313 | "flagValue": -1 1314 | }, 1315 | "cascade": { 1316 | "active": 1, 1317 | "flagValue": -1 1318 | }, 1319 | "comments": { 1320 | "active": 1, 1321 | "flagValue": -1 1322 | }, 1323 | "comparisons": { 1324 | "active": 1, 1325 | "flagValue": -1 1326 | }, 1327 | "compress": { 1328 | "active": 1, 1329 | "flagValue": -1 1330 | }, 1331 | "conditionals": { 1332 | "active": 1, 1333 | "flagValue": -1 1334 | }, 1335 | "dead_code": { 1336 | "active": 0, 1337 | "flagValue": -1 1338 | }, 1339 | "drop_console": { 1340 | "active": 0, 1341 | "flagValue": -1 1342 | }, 1343 | "drop_debugger": { 1344 | "active": 1, 1345 | "flagValue": -1 1346 | }, 1347 | "eval": { 1348 | "active": 0, 1349 | "flagValue": -1 1350 | }, 1351 | "evaluate": { 1352 | "active": 1, 1353 | "flagValue": -1 1354 | }, 1355 | "hoist_funs": { 1356 | "active": 1, 1357 | "flagValue": -1 1358 | }, 1359 | "hoist_vars": { 1360 | "active": 0, 1361 | "flagValue": -1 1362 | }, 1363 | "if_return": { 1364 | "active": 1, 1365 | "flagValue": -1 1366 | }, 1367 | "indent-level": { 1368 | "active": 0, 1369 | "flagValue": 4 1370 | }, 1371 | "indent-start": { 1372 | "active": 0, 1373 | "flagValue": 0 1374 | }, 1375 | "inline-script": { 1376 | "active": 0, 1377 | "flagValue": -1 1378 | }, 1379 | "join_vars": { 1380 | "active": 1, 1381 | "flagValue": -1 1382 | }, 1383 | "keep_fargs": { 1384 | "active": 0, 1385 | "flagValue": -1 1386 | }, 1387 | "keep_fnames": { 1388 | "active": 0, 1389 | "flagValue": -1 1390 | }, 1391 | "loops": { 1392 | "active": 1, 1393 | "flagValue": -1 1394 | }, 1395 | "mangle": { 1396 | "active": 1, 1397 | "flagValue": -1 1398 | }, 1399 | "max-line-len": { 1400 | "active": 1, 1401 | "flagValue": 32000 1402 | }, 1403 | "negate_iife": { 1404 | "active": 1, 1405 | "flagValue": -1 1406 | }, 1407 | "properties": { 1408 | "active": 1, 1409 | "flagValue": -1 1410 | }, 1411 | "pure_getters": { 1412 | "active": 0, 1413 | "flagValue": -1 1414 | }, 1415 | "quote-keys": { 1416 | "active": 0, 1417 | "flagValue": -1 1418 | }, 1419 | "screw-ie8": { 1420 | "active": 0, 1421 | "flagValue": -1 1422 | }, 1423 | "semicolons": { 1424 | "active": 1, 1425 | "flagValue": -1 1426 | }, 1427 | "sequences": { 1428 | "active": 1, 1429 | "flagValue": -1 1430 | }, 1431 | "sort": { 1432 | "active": 0, 1433 | "flagValue": -1 1434 | }, 1435 | "space-colon": { 1436 | "active": 1, 1437 | "flagValue": -1 1438 | }, 1439 | "toplevel": { 1440 | "active": 0, 1441 | "flagValue": -1 1442 | }, 1443 | "unsafe": { 1444 | "active": 0, 1445 | "flagValue": -1 1446 | }, 1447 | "unused": { 1448 | "active": 0, 1449 | "flagValue": -1 1450 | }, 1451 | "warnings": { 1452 | "active": 0, 1453 | "flagValue": -1 1454 | }, 1455 | "width": { 1456 | "active": 1, 1457 | "flagValue": 80 1458 | } 1459 | }, 1460 | "uglifyReservedNamesString": "$", 1461 | "websiteRelativeRoot": "" 1462 | }, 1463 | "settingsFileVersion": "2" 1464 | } -------------------------------------------------------------------------------- /design-files/devtipsshow.com.sketch: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/travisneilson/DevTipsShowWebsite/e78d5f746d27745fa10eba69138b415df63e6b46/design-files/devtipsshow.com.sketch -------------------------------------------------------------------------------- /favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/travisneilson/DevTipsShowWebsite/e78d5f746d27745fa10eba69138b415df63e6b46/favicon.ico -------------------------------------------------------------------------------- /gifs/blow.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/travisneilson/DevTipsShowWebsite/e78d5f746d27745fa10eba69138b415df63e6b46/gifs/blow.gif -------------------------------------------------------------------------------- /gifs/bobbing.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/travisneilson/DevTipsShowWebsite/e78d5f746d27745fa10eba69138b415df63e6b46/gifs/bobbing.gif -------------------------------------------------------------------------------- /gifs/camauri.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/travisneilson/DevTipsShowWebsite/e78d5f746d27745fa10eba69138b415df63e6b46/gifs/camauri.gif -------------------------------------------------------------------------------- /gifs/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | DevTips Show 5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 |
24 |
25 |
26 |
DevTips GIFs!
27 |
28 |

These images were all created and passed around inside the DevTips Chat. I'm placing them here so you can use them to make the internet weird.

29 |
30 |
31 |
32 |
33 | 43 |
44 |
45 |
46 | 47 | 48 | 49 |
50 | 83 |
84 |
85 | 86 | 87 | 88 | -------------------------------------------------------------------------------- /gifs/index.jade: -------------------------------------------------------------------------------- 1 | extends ../_layouts/_head.jade 2 | 3 | block vars 4 | - var htmlClass = 'page-gifs'; 5 | 6 | block content 7 | 8 | section.gif-hero 9 | .text-center 10 | .constrainer 11 | .section-head DevTips GIFs! 12 | hr.section-title-rule(style="border-top-color: #FF4136;") 13 | 14 | p.lead These images were all created and passed around inside the DevTips Chat. I'm placing them here so you can use them to make the internet weird. 15 | 16 | .gif-cluster 17 | a(href="/gifs/blow.gif" target="_blank"): img.gif(src="/gifs/blow.gif") 18 | a(href="/gifs/pinch.gif" target="_blank"): img.gif(src="/gifs/pinch.gif") 19 | a(href="/gifs/suprise.gif" target="_blank"): img.gif(src="/gifs/suprise.gif") 20 | a(href="https://j.gifs.com/W6p2Vn.gif" target="_blank"): img.gif(src="https://j.gifs.com/W6p2Vn.gif") 21 | a(href="/gifs/magical.gif" target="_blank"): img.gif(src="/gifs/magical.gif") 22 | a(href="https://j.gifs.com/PNgRL2.gif" target="_blank"): img.gif(src="https://j.gifs.com/PNgRL2.gif") 23 | a(href="/gifs/sad.gif" target="_blank"): img.gif(src="/gifs/sad.gif") 24 | a(href="/gifs/waiting.gif" target="_blank"): img.gif(src="/gifs/waiting.gif") 25 | a(href="https://j.gifs.com/yP7RER.gif" target="_blank"): img.gif(src="https://j.gifs.com/yP7RER.gif") 26 | a(href="/gifs/thelook.gif" target="_blank"): img.gif(src="/gifs/thelook.gif") 27 | a(href="/gifs/bobbing.gif" target="_blank"): img.gif(src="/gifs/bobbing.gif") 28 | a(href="https://j.gifs.com/gJX02k.gif" target="_blank"): img.gif(src="https://j.gifs.com/gJX02k.gif") 29 | a(href="https://j.gifs.com/kRM1wN.gif" target="_blank"): img.gif(src="https://j.gifs.com/kRM1wN.gif") 30 | a(href="https://j.gifs.com/KrEDAY.gif" target="_blank"): img.gif(src="https://j.gifs.com/KrEDAY.gif") 31 | a(href="https://j.gifs.com/ADOp9P.gif" target="_blank"): img.gif(src="https://j.gifs.com/ADOp9P.gif") 32 | a(href="https://j.gifs.com/Nk1J5p.gif" target="_blank"): img.gif(src="https://j.gifs.com/Nk1J5p.gif") 33 | a(href="https://j.gifs.com/pYV172.gif" target="_blank"): img.gif(src="https://j.gifs.com/pYV172.gif") 34 | -------------------------------------------------------------------------------- /gifs/magical.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/travisneilson/DevTipsShowWebsite/e78d5f746d27745fa10eba69138b415df63e6b46/gifs/magical.gif -------------------------------------------------------------------------------- /gifs/pinch.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/travisneilson/DevTipsShowWebsite/e78d5f746d27745fa10eba69138b415df63e6b46/gifs/pinch.gif -------------------------------------------------------------------------------- /gifs/sad.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/travisneilson/DevTipsShowWebsite/e78d5f746d27745fa10eba69138b415df63e6b46/gifs/sad.gif -------------------------------------------------------------------------------- /gifs/suprise.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/travisneilson/DevTipsShowWebsite/e78d5f746d27745fa10eba69138b415df63e6b46/gifs/suprise.gif -------------------------------------------------------------------------------- /gifs/thelook.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/travisneilson/DevTipsShowWebsite/e78d5f746d27745fa10eba69138b415df63e6b46/gifs/thelook.gif -------------------------------------------------------------------------------- /gifs/waiting.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/travisneilson/DevTipsShowWebsite/e78d5f746d27745fa10eba69138b415df63e6b46/gifs/waiting.gif -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | DevTips Show 5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 |
24 |
25 |
26 |
27 |
The education and training to change your circumstances and take control of your future.
28 |
29 |
30 |
31 |
32 |
33 |
34 |

Video above: I ask six talented creators what advice they would give their younger selves.

35 |
36 |
37 |
38 |
39 |
40 |
What is DevTips?
41 |
42 |
43 |
44 |
45 |

DevTips is a weekly YouTube show that focuses on web development and design, hosted by Travis Neilson.

46 |
47 |
48 |
49 |
50 |
51 | 52 | 53 | 54 | 55 | 56 |
57 |
Popular Videos Free!
58 |
59 |
60 |
61 |
62 |
How to Build a Responsive Website from Start to Finish
63 |
26 videos • 10hrs 46min
64 |
65 |
66 |
67 |
Parallax on the Web
68 |
10 videos • 3hrs 7min
69 |
70 |
71 |
72 |
Advice and Crap for Young Creators
73 |
1 video • 8min
74 |
75 |
76 |
77 |
CSS FlexBox Essentials
78 |
2 videos • 1hr 6 min
79 |
80 |
81 |
82 |
Design + Code my Personal Website in 12 hours
83 |
28 videos • 12hrs 31 min
84 |
85 |
86 |
87 |
My First Websites Were Horrible!
88 |
1 video • 18min
89 |
90 |
91 |
92 |
93 |
94 |
95 |
jQuery Video Course
96 |
97 |

Learn jQuery the DevTips way by coding real projects that you can use professionally.

98 |
99 | 100 | 101 |
102 | 103 |
104 |
105 |

This video course is still in development, so sign up to be notified of the launch!

106 |

Learn more about the course

107 |
108 |
109 |
110 |
111 |
Patreon Community
112 |
113 |
114 |
115 | 116 | 117 | 119 | 120 | 126 | 133 | 134 | 135 | 136 |

DevTips Chat

137 |
138 |
139 | 140 | 141 | 143 | 144 | 147 | 149 | 151 | 155 | 156 | 157 | 158 |

Extra Videos

159 |
160 |
161 | 162 | 163 | 165 | 166 | 169 | 170 | 173 | 176 | 179 | 182 | 183 | 185 | 188 | 191 | 192 | 193 | 194 |

hangouts

195 |
196 |
197 | 198 | 199 | 201 | 202 | 205 | 208 | 209 | 211 | 212 | 213 | 214 | 215 |

DevTips Podcast

216 |
217 |
218 |

The DevTips community is a way for fans of the show to support the creative efforts involved.

219 |

Of course, Patrons get awesome perks ;)

220 |
221 |
222 | 224 |
225 |
DevTips Mission: educate, inspire, and uplift anyone willing to engage; whoever wherever, however possible.
226 |
227 | 237 |
238 |
239 |
240 | 241 | 242 | 243 |
244 | 277 |
278 |
279 | 280 | 281 | 282 | -------------------------------------------------------------------------------- /index.jade: -------------------------------------------------------------------------------- 1 | extends ./_layouts/_head.jade 2 | 3 | block vars 4 | - var htmlClass = 'page-home'; 5 | 6 | block content 7 | 8 | section.home-hero 9 | .flex-container 10 | .flex-about-content 11 | hr.section-title-rule 12 | .mission The education and training to change your circumstances and take control of your future. 13 | hr.section-title-rule.bottom 14 | 15 | 16 | .flex-video-right 17 | .flex-video-wrap 18 | .flex-video 19 | p.muted-extra(style="max-width: 300px") Video above: I ask six talented creators what advice they would give their younger selves. 20 | 21 | 22 | 23 | section.what-is-devtips 24 | .constrainer 25 | .section-head What is DevTips? 26 | hr.section-title-rule 27 | .media-object 28 | .media 29 | img.avatar(src="https://ci5.googleusercontent.com/proxy/AaZXsl9_ruMCGZrO6LVVcCg5qr82Ti86mO-hGHy2ioUj7wbkNJp5niE5p6GDGVfpb4Z9X3Am-dOK84ShwqK2vyO1x_GjxNbdYeB7QG5NHLAJawEloHQa_0wrRTnfTtOLYHTHJWiJnbbxyA7y07-zTqSxkSDjOt-HRj1Qow0=s0-d-e1-ft#https://gallery.mailchimp.com/2abae111d44df144b3b3986bc/images/cd92ba3c-ecf7-4268-b153-181559b6ea28.jpg") 30 | .content 31 | p DevTips is a weekly YouTube show that focuses on web development and design, hosted by Travis Neilson. 32 | 33 | 34 | section.popular-episodes.tint 35 | include ./assets/img/arc.svg 36 | .constrainer 37 | .section-head Popular Videos Free! 38 | hr.section-title-rule 39 | 40 | include ./_includes/_popular-episodes.jade 41 | 42 | 43 | section.jquery-video-course 44 | .constrainer.text-center 45 | .section-head.white jQuery Video Course 46 | hr.section-title-rule 47 | 48 | p.white Learn jQuery the DevTips way by coding real projects that you can use professionally. 49 | 50 | include ./_includes/_jquerycourse-form.jade 51 | 52 | p.white This video course is still in development, so sign up to be notified of the launch! 53 | p: a.white-hard(href="/killingitwithjquery") Learn more about the course 54 | 55 | 56 | section.patreon-community 57 | .constrainer.text-center 58 | .section-head Patreon Community 59 | hr.section-title-rule 60 | 61 | .patreon-icons 62 | .chat 63 | include ./assets/img/icn/pat-chat.svg 64 | p.muted-extra DevTips Chat 65 | .vids 66 | include ./assets/img/icn/pat-vids.svg 67 | p.muted-extra Extra Videos 68 | .hang 69 | include ./assets/img/icn/pat-hang.svg 70 | p.muted-extra hangouts 71 | .pod 72 | include ./assets/img/icn/pat-pod.svg 73 | p.muted-extra DevTips Podcast 74 | 75 | p The DevTips community is a way for fans of the show to support the creative efforts involved. 76 | 77 | p Of course, Patrons get awesome perks ;) 78 | 79 | //section.quote 80 | div You can deal with anything today
if you have a compelling future— Tony Robbins 81 | section.quote 82 | div DevTips Mission: educate, inspire, and uplift anyone willing to engage; whoever wherever, however possible. 83 | -------------------------------------------------------------------------------- /jquerycourse/index.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /killingitwithjquery/index.jade: -------------------------------------------------------------------------------- 1 | extends ../_layouts/_head.jade 2 | 3 | block vars 4 | - var htmlClass = 'page-jquerycourse'; 5 | 6 | block content 7 | 8 | section.jquery-hero 9 | 10 | .jquery-promo-video 11 | .flex-video 12 | 13 | .constrainer.text-center 14 | 15 | //.section-head jQuery Video Course 16 | 17 | .spacer(style="height: 60px") 18 | 19 | .bigger Learn jQuery the DevTips way by coding real projects that you can use professionally. 20 | 21 | .jquery-icon 22 | include ../assets/img/icn/ic_jquery.svg 23 | 24 | .content-well 25 | p.lead Get updates about the course as I develop it! 26 | 27 | include ../_includes/_jquerycourse-form.jade 28 | 29 | .spacer(style="height: 20px") 30 | 31 | p.lead In this series of clearly explained, easy to understand videos, YouTuber Travis Neilson walks you through creating several professional grade projects, step by step, that you can use to impress your boss, win new clients, and expand your ability to create functional and stunning websites. 32 | 33 | section.testimonials 34 | .constrainer 35 | .lead.carousel-nav-wrap People like you are hyped 36 | .carousel-nav 37 | include ../assets/img/icn/ic_arrow_left.svg 38 | include ../assets/img/icn/ic_arrow_right.svg 39 | 40 | include ../_includes/_testimonial-carousel.jade 41 | 42 | section.projects-include.tint 43 | .constrainer 44 | p.lead Projects include: 45 | 46 | .media-object 47 | .media 48 | include ../assets/img/icn/ic_view_carousel.svg 49 | .content 50 | p Custom image slider with timer controls and style options. 51 | .media-object 52 | .media 53 | include ../assets/img/icn/ic_settings_overscan.svg 54 | .content 55 | p Animating popup modal, perfect for user logins or special messages. 56 | .media-object 57 | .media 58 | include ../assets/img/icn/ic_menu.svg 59 | .content 60 | p Mobile first menu with slide out navigation drawer. 61 | .media-object 62 | .media 63 | include ../assets/img/icn/ic_text_format.svg 64 | .content 65 | p Use jQuery to validate and send contact, sales, and questionare forms. 66 | 67 | section.15-minute-videos-promo 68 | .constrainer.text-center 69 | p.lead The course is still being developed, but in the mean time, learn the basics of jQuery in only 15 minutes right now for free! 70 | 71 | a(href="https://www.youtube.com/playlist?list=PLqGj3iMvMa4KOekRWjjajinzlRK879Ksn" target="_blank").video-cascade 72 | .video-thumbnail(style="background-image: url(/assets/img/learnjquery-cover3.jpg);") 73 | .video-thumbnail(style="background-image: url(/assets/img/learnjquery-cover2.jpg);") 74 | .video-thumbnail(style="background-image: url(/assets/img/learnjquery-cover1.jpg);") 75 | include ../assets/img/icn/ic_play_circle_filled.svg 76 | 77 | p.muted Get started with three free 5 minute lessons that cover the basics of jQuery. 78 | p.muted A perfect way to get ready for the courses, and get comfortable with learning the DevTips way. 79 | 80 | 81 | section.small-about-devtips.tint 82 | .constrainer 83 | .media-object 84 | .media 85 | img.avatar(src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBwgHBgkIBwgKCgkLDRYPDQwMDRsUFRAWIB0iIiAdHx8kKDQsJCYxJx8fLT0tMTU3Ojo6Iys/RD84QzQ5OjcBCgoKDQwNGg8PGjclHyU3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3N//AABEIAGAAYAMBIgACEQEDEQH/xAAcAAACAgMBAQAAAAAAAAAAAAAEBgUHAAIDCAH/xAA6EAABAwMCBAMFBgQHAQAAAAABAgMEAAUREiEGEzFBUWGBByJxkaEUMmKxwfAVI1KSQ2SCssLR4TP/xAAYAQEBAQEBAAAAAAAAAAAAAAAAAQMCBP/EACIRAQEBAAIABQUAAAAAAAAAAAABAgMRQVFhweESExQhMf/aAAwDAQACEQMRAD8AdWmqLbZHhWNI8qNaboNWmh4UQhnyoW53OHaGErlrJcX/APNlG63D5D9TtUGbncrorBcVCZPRuOfeI819fligbUsHwrcNY6ilePw7AWAp1Djyv6nXlrV8yakmLc9CwYEx9vH+G6sutnywo5HoRQTaRiiGl9jQkR8ujS6gIeA95IOQfMHwonGKAmsrmhR6GulBlZWVlArsorhxJfInDNkeucz3gj3Wmh1dcP3Uj97DJo5pNUr7a76t7ihq2IWSzbWgdA6F5Yzn+3T8zQEcIcRSLtxyF3Nr7ap9Ol5WBpZUpQ0JSD0SkZ2/XNSVx49lwL1OiNWGC5HjSFtIXzlNqUEnGdgfCkbhO5Dh9+PcH2lvJbeDjiW/vOH1/e1MN/sU525SJ1uacuMOU4t9EiI2XE+8o5ScZ3HQ14eTjx+R3vxnnZ+0NMH2nxSB9ttEhk/5Z5Lv+4Jp3st0ZvNtauEErLDuQnmI0qyCQcj4iqIats56W1EREeEh5WlttaCkqPhvird4bjIttliW9uYVLaCuYpoj+W6VHWk7kHSdseRq8k1iycN7t8Le50qcFyiKk8pqfF+1tEamS8nWk+Ck5yKn0PtLSDkAkdCelUF7Sbc4xxLIfkIaLM4B1sA56JSFA5HXOfQilVE67WYF+y3OVGCE55SXCUYH4Tt6YrTP3/pl7nfrPn2HqnbtX0Lx1qF4UlOz7TGmOBOl+O04CD1KkAnbt1FSq1YrTg5Ly8c3Z12CAoGtqC5mmt0v1qIxkbivNHtEeW97Qb2pzYIlkf2gJH0Fehr1Jdi2h9cZeiQpOhpX9JPf0GT6V5/4oZcU1zpQS4+4vWHyn31jVvqPf4nxoJSBBTIhtpDfMcKAEoHiaYLFwhfkKCo93fhJO+hp9YA9AcVG8IvanNY3wlIT8qsy0SSpIqXM1OrAI1aL7Fiu/wAR4oluRdB1oASCR394gkehFRNwvz9u5KYEKRMeeQXM4KW20jxXvv8AOpa98RRwkxEfznF7ctIzn40NBtLzjGlLjUdIT/Kb1HAPbbwqZznP8g6XG6wOI4qrVLgyn1tR0ScNDSTk4wlR2yPCl6LwXarust26TdWVYJW1JihZSAQCCUYx12yPyNNzIlWl+NJlqQ6yAG16Nw1nv+X1pngKa/iLbiEjU6goJHcdf0rnfHdXuasBFgtqbXbGIbYUlpltLbaFnJSlIwMnucAUW6KJod6rjExmZgCcVQ6nSk12e70A8rBrsBX9hyRZn+SCXWxrSAOuOv0Jql+MTzLfGWSAErDehPQgdDn41e7K8YqovbRbY1tXbHIRWgSXXVutZykEaSCPDcnbzoIjhdRaYBBPifHr2+lWDapCltONIVpWUFIPhkVVtil6HUJUoYSdgaf4UlsHU0rUD1PXFANc7ZOhKRJisPOpUfeLQClAfDrvUWJ3G4krdh8LsutdE/aG+asD46x9AKeTIMyOgFASFDCU1iY9xj5VFQnJ/FQRLM64cqK9MtL0GZISpt9pAXyegIODnB+femrhN93n21h0kuDWFH4JNcIMi4uEKnMpQlO5OvYj4UXwckPXp5xIPKZZOnPipW3/ACoHU9KGeNdlqwKEdVQDPGo6QaMeVUfIVQY0uqw9sbLky8W5sfdRFWpOPHUM/kKsZpykbjJ5E7i1qOjChHiBKiD0UpROPlp+dBVz0aTFdDhSpSBjBHepyBfXGo+hQBz8cgUxvW3QgggEefaoCZbmwtSVIAySBtigMsvFbgVydX3T7gJ260/Wi/trxrc1e6DqPcDvVOO2Z9GVRXQNth61tHkXeOcJS7lO37+VBcPEF6CIC3WHACRgds0z+zxhxNkVcXwQ5OXrQD2bGyfnuoeShVNcI2W88U3ZmG8VswUe/Kcz0R0OPM9B/wCV6BToZaQ00kIbQkJQkdABsBQd3HKDdXWOOUK65QaPL60A+uuzrlAvL3oENjjxV0va7dYgzyUNk894EKWfwJ8vOo6zx3GLu6ZClOLeOtS1HJKs771WLanYzyH461NuoUFIUk4INWlwteWeIGUrVpRPZSOc301fiT5H6H0oGgxtSBk5GO9Q9yt2d8bd6ZIycoAIrJEULTjf/qgSEW4rXpGcdfhRzVpUhOV4wKl/4etCspGfOuziCEEvbISNSvICgYuCIYg2fmFIDkhetW3YbAfvxNTqnfOq64W9pllnstRZgXbngkBJfI5av9Xb1xTrzwtIUhQUkjIIOQRQEuO0M45XNbtDuOUH11yhHV19ccoVxdB//9k=") 86 | .content 87 | p Travis has created over 200 tutorial videos on YouTube with over 2.5 million views. 88 | 89 | section.bottom-form 90 | .constrainer.text-center 91 | p.lead Get notified when the courses are ready! 92 | 93 | include ../_includes/_jquerycourse-form.jade 94 | 95 | .hurry This video course is still in development, so sign up to be notified of the launch! 96 | 97 | --------------------------------------------------------------------------------