' + 207 | o.name + '
'; 208 | newItem.appendChild(subLinkDiv); 209 | var newDate = document.createElement('span'); 210 | newDate.className = 'SideNav_RecentDate'; 211 | newDate.textContent = o.date; 212 | newItem.appendChild(newDate); 213 | } else { 214 | newItem.innerHTML = '' + o.name + ' ' + 216 | o.date + ''; 217 | } 218 | SideNav_Recent.appendChild(newItem); 219 | } 220 | 221 | var linkElems = document.getElementsByClassName('Links_Link'); 222 | var links = []; 223 | var now = moment(); 224 | // Figure out the time ago 225 | for (var i = 0; i < linkElems.length; i++) { 226 | var linkDate = linkElems[i].getAttribute('data-date'); 227 | var d = linkDate.split('-'); 228 | // Need to minus a 1 from the month as Moment.js 229 | // treats 0 as Jan and 11 as Dec 230 | d[1] = d[1] - 1; 231 | var ago = moment(d).fromNow(); 232 | if (ago.includes('day') && parseInt(ago.substr(0, ago.indexOf(' '))) < 14 233 | || ago.includes('in') || ago.includes('hour') || ago.includes('a day')) { 234 | var styleOrder = moment(d).unix() * -1; 235 | var dummyLinks = linkElems[i].classList.value.includes('Links_Link--dummy') ? 236 | linkElems[i].nextSibling 237 | : false; 238 | links.push({ 239 | name: linkElems[i].textContent, 240 | url: linkElems[i].href, 241 | date: ago[0] === 'a' ? 'Yesterday' : ago, 242 | order: styleOrder, 243 | dummy: dummyLinks 244 | }); 245 | } 246 | } 247 | // Create the items in recent 248 | for (var j = 0; j < links.length; j++) { 249 | createRecentItem(links[j]); 250 | } 251 | if (links.length === 0) { 252 | SideNav_Recent.innerHTML = ' \ 253 | Nothing has been added in the last 14 days. \ 254 | Don\'t worry! We\'re still updating \ 255 | this repo. We\'re focusing on quality which means links won\'t be added all the time, \ 256 | only when they are required.'; 257 | } 258 | // Local storage and working out the notification 259 | if (!localStorage.getItem(recentType)) { 260 | function linkReducer(acc, val) { 261 | acc.push({name: val.name, seen: false}); 262 | return acc; 263 | } 264 | var reducedLinks = links.reduce(linkReducer, []); 265 | localStorage.setItem(recentType, JSON.stringify(reducedLinks)); 266 | } 267 | var ls = JSON.parse(localStorage.getItem(recentType)); 268 | function reducer(acc, val) { 269 | var matched = false; 270 | for (var i = 0; i < ls.length; i++) { 271 | if (ls[i].name === val.name) { 272 | matched = true; 273 | } 274 | } 275 | if (!matched) { 276 | acc.push(val); 277 | } 278 | return acc; 279 | } 280 | var newLinks = links.reduce(reducer, []); 281 | var oldUnseenLinks = ls.filter(function(item){ 282 | return item.seen === false; 283 | }); 284 | unseen = newLinks.concat(oldUnseenLinks); 285 | localStorage.setItem(recentType, JSON.stringify(ls.concat(newLinks))); 286 | if (unseen.length > 0) { 287 | SideNav_RecentNumber.textContent = unseen.length; 288 | SideNav_RecentNumber.classList.add('SideNav_RecentNumber--visible'); 289 | } 290 | } 291 | 292 | function SideNavTabs () { 293 | var SideNavTabs = document.getElementsByClassName('SideNav_Tabs')[0]; 294 | var Tab1 = document.getElementById('tab-1'); 295 | var Tab2 = document.getElementById('tab-2'); 296 | var Panel1 = document.getElementById('panel-1'); 297 | var Panel2 = document.getElementById('panel-2'); 298 | Tab1.addEventListener('click',function(){ 299 | if (SideNavTabs.classList.contains('SideNav_Tabs--tab2')) { 300 | SideNavTabs.classList.remove('SideNav_Tabs--tab2'); 301 | SideNavTabs.classList.add('SideNav_Tabs--tab1'); 302 | Panel1.classList.add('SideNav_Panel--visible'); 303 | Panel2.classList.remove('SideNav_Panel--visible'); 304 | Panel1.setAttribute('aria-hidden', false); 305 | Panel2.setAttribute('aria-hidden', true); 306 | } 307 | }); 308 | Tab2.addEventListener('click',function(){ 309 | if (SideNavTabs.classList.contains('SideNav_Tabs--tab1')) { 310 | SideNavTabs.classList.remove('SideNav_Tabs--tab1'); 311 | SideNavTabs.classList.add('SideNav_Tabs--tab2'); 312 | Panel1.classList.remove('SideNav_Panel--visible'); 313 | Panel2.classList.add('SideNav_Panel--visible'); 314 | Panel1.setAttribute('aria-hidden', true); 315 | Panel2.setAttribute('aria-hidden', false); 316 | var ls = JSON.parse(localStorage.getItem(recentType)); 317 | for (var y = 0; y < ls.length; y++) { 318 | ls[y].seen = true; 319 | } 320 | localStorage.setItem(recentType, JSON.stringify(ls)); 321 | SideNav_RecentNumber.textContent = ''; 322 | SideNav_RecentNumber.classList.remove('SideNav_RecentNumber--visible'); 323 | if (unseen.length > 0) { 324 | var SideNav_RecentItems = document.getElementsByClassName('SideNav_RecentItem'); 325 | for (var a = 0; a < SideNav_RecentItems.length; a++) { 326 | var isUnseen = false; 327 | unseen.map(function(item) { 328 | if (SideNav_RecentItems[a].firstChild.textContent === item.name) { 329 | isUnseen = true; 330 | } 331 | }); 332 | if (isUnseen) { 333 | SideNav_RecentItems[a].classList.add('SideNav_RecentItem--unseen'); 334 | } 335 | } 336 | } 337 | } 338 | }); 339 | }; 340 | 341 | function SmoothScrollAnchor() { 342 | var Hamburger = document.getElementsByClassName('TopBar_Hamburger')[0]; 343 | var SideNav = document.getElementsByClassName('SideNav')[0]; 344 | var SideNavBackdrop = document.getElementsByClassName('SideNav_Backdrop')[0]; 345 | function toggleSideNav() { 346 | SideNav.classList.toggle('SideNav--visible'); 347 | SideNavBackdrop.classList.toggle('SideNav_Backdrop--visible'); 348 | } 349 | // Smooth Scrolling Anchor Links 350 | $('a[href^="#"]').click(function(e) { 351 | e.preventDefault(); 352 | // calculate destination place 353 | var scrollDest = $(this.hash)[0].offsetTop - 70; 354 | 355 | if($(window).width() < 600) { 356 | toggleSideNav(); 357 | } 358 | 359 | // go to destination 360 | $('.Links').animate({ 361 | scrollTop: scrollDest 362 | }, 500, 'swing'); 363 | }); 364 | }; 365 | 366 | window.onload = function () { 367 | RecentItems(); 368 | SideNavTabs(); 369 | Modals(); 370 | SmoothScrollAnchor(); 371 | MultiLinks(); 372 | Notification(); 373 | MobileMenu(); 374 | MobileCategoryHeader(); 375 | FuckAdBlock(); 376 | FuckAdBlockCheck(); 377 | } 378 | 379 | function FuckAdBlock () { 380 | var FuckAdBlock = function(options) { 381 | this._options = { 382 | checkOnLoad: false, 383 | resetOnEnd: false, 384 | loopCheckTime: 50, 385 | loopMaxNumber: 5, 386 | baitClass: 'pub_300x250 pub_300x250m pub_728x90 text-ad textAd text_ad text_ads text-ads text-ad-links', 387 | baitStyle: 'width: 1px !important; height: 1px !important; position: absolute !important; left: -10000px !important; top: -1000px !important;', 388 | debug: false 389 | }; 390 | this._var = { 391 | version: '3.2.1', 392 | bait: null, 393 | checking: false, 394 | loop: null, 395 | loopNumber: 0, 396 | event: { detected: [], notDetected: [] } 397 | }; 398 | if(options !== undefined) { 399 | this.setOption(options); 400 | } 401 | var self = this; 402 | var eventCallback = function() { 403 | setTimeout(function() { 404 | if(self._options.checkOnLoad === true) { 405 | if(self._options.debug === true) { 406 | self._log('onload->eventCallback', 'A check loading is launched'); 407 | } 408 | if(self._var.bait === null) { 409 | self._creatBait(); 410 | } 411 | setTimeout(function() { 412 | self.check(); 413 | }, 1); 414 | } 415 | }, 1); 416 | }; 417 | if(window.addEventListener !== undefined) { 418 | window.addEventListener('load', eventCallback, false); 419 | } else { 420 | window.attachEvent('onload', eventCallback); 421 | } 422 | }; 423 | FuckAdBlock.prototype._options = null; 424 | FuckAdBlock.prototype._var = null; 425 | FuckAdBlock.prototype._bait = null; 426 | 427 | FuckAdBlock.prototype._log = function(method, message) { 428 | console.log('[FuckAdBlock]['+method+'] '+message); 429 | }; 430 | 431 | FuckAdBlock.prototype.setOption = function(options, value) { 432 | if(value !== undefined) { 433 | var key = options; 434 | options = {}; 435 | options[key] = value; 436 | } 437 | for(var option in options) { 438 | this._options[option] = options[option]; 439 | if(this._options.debug === true) { 440 | this._log('setOption', 'The option "'+option+'" he was assigned to "'+options[option]+'"'); 441 | } 442 | } 443 | return this; 444 | }; 445 | 446 | FuckAdBlock.prototype._creatBait = function() { 447 | var bait = document.createElement('div'); 448 | bait.setAttribute('class', this._options.baitClass); 449 | bait.setAttribute('style', this._options.baitStyle); 450 | this._var.bait = window.document.body.appendChild(bait); 451 | 452 | this._var.bait.offsetParent; 453 | this._var.bait.offsetHeight; 454 | this._var.bait.offsetLeft; 455 | this._var.bait.offsetTop; 456 | this._var.bait.offsetWidth; 457 | this._var.bait.clientHeight; 458 | this._var.bait.clientWidth; 459 | 460 | if(this._options.debug === true) { 461 | this._log('_creatBait', 'Bait has been created'); 462 | } 463 | }; 464 | FuckAdBlock.prototype._destroyBait = function() { 465 | window.document.body.removeChild(this._var.bait); 466 | this._var.bait = null; 467 | 468 | if(this._options.debug === true) { 469 | this._log('_destroyBait', 'Bait has been removed'); 470 | } 471 | }; 472 | 473 | FuckAdBlock.prototype.check = function(loop) { 474 | if(loop === undefined) { 475 | loop = true; 476 | } 477 | 478 | if(this._options.debug === true) { 479 | this._log('check', 'An audit was requested '+(loop===true?'with a':'without')+' loop'); 480 | } 481 | 482 | if(this._var.checking === true) { 483 | if(this._options.debug === true) { 484 | this._log('check', 'A check was canceled because there is already an ongoing'); 485 | } 486 | return false; 487 | } 488 | this._var.checking = true; 489 | 490 | if(this._var.bait === null) { 491 | this._creatBait(); 492 | } 493 | 494 | var self = this; 495 | this._var.loopNumber = 0; 496 | if(loop === true) { 497 | this._var.loop = setInterval(function() { 498 | self._checkBait(loop); 499 | }, this._options.loopCheckTime); 500 | } 501 | setTimeout(function() { 502 | self._checkBait(loop); 503 | }, 1); 504 | if(this._options.debug === true) { 505 | this._log('check', 'A check is in progress ...'); 506 | } 507 | 508 | return true; 509 | }; 510 | FuckAdBlock.prototype._checkBait = function(loop) { 511 | var detected = false; 512 | 513 | if(this._var.bait === null) { 514 | this._creatBait(); 515 | } 516 | 517 | if(window.document.body.getAttribute('abp') !== null 518 | || this._var.bait.offsetParent === null 519 | || this._var.bait.offsetHeight == 0 520 | || this._var.bait.offsetLeft == 0 521 | || this._var.bait.offsetTop == 0 522 | || this._var.bait.offsetWidth == 0 523 | || this._var.bait.clientHeight == 0 524 | || this._var.bait.clientWidth == 0) { 525 | detected = true; 526 | } 527 | if(window.getComputedStyle !== undefined) { 528 | var baitTemp = window.getComputedStyle(this._var.bait, null); 529 | if(baitTemp && (baitTemp.getPropertyValue('display') == 'none' || baitTemp.getPropertyValue('visibility') == 'hidden')) { 530 | detected = true; 531 | } 532 | } 533 | 534 | if(this._options.debug === true) { 535 | this._log('_checkBait', 'A check ('+(this._var.loopNumber+1)+'/'+this._options.loopMaxNumber+' ~'+(1+this._var.loopNumber*this._options.loopCheckTime)+'ms) was conducted and detection is '+(detected===true?'positive':'negative')); 536 | } 537 | 538 | if(loop === true) { 539 | this._var.loopNumber++; 540 | if(this._var.loopNumber >= this._options.loopMaxNumber) { 541 | this._stopLoop(); 542 | } 543 | } 544 | 545 | if(detected === true) { 546 | this._stopLoop(); 547 | this._destroyBait(); 548 | this.emitEvent(true); 549 | if(loop === true) { 550 | this._var.checking = false; 551 | } 552 | } else if(this._var.loop === null || loop === false) { 553 | this._destroyBait(); 554 | this.emitEvent(false); 555 | if(loop === true) { 556 | this._var.checking = false; 557 | } 558 | } 559 | }; 560 | FuckAdBlock.prototype._stopLoop = function(detected) { 561 | clearInterval(this._var.loop); 562 | this._var.loop = null; 563 | this._var.loopNumber = 0; 564 | 565 | if(this._options.debug === true) { 566 | this._log('_stopLoop', 'A loop has been stopped'); 567 | } 568 | }; 569 | 570 | FuckAdBlock.prototype.emitEvent = function(detected) { 571 | if(this._options.debug === true) { 572 | this._log('emitEvent', 'An event with a '+(detected===true?'positive':'negative')+' detection was called'); 573 | } 574 | 575 | var fns = this._var.event[(detected===true?'detected':'notDetected')]; 576 | for(var i in fns) { 577 | if(this._options.debug === true) { 578 | this._log('emitEvent', 'Call function '+(parseInt(i)+1)+'/'+fns.length); 579 | } 580 | if(fns.hasOwnProperty(i)) { 581 | fns[i](); 582 | } 583 | } 584 | if(this._options.resetOnEnd === true) { 585 | this.clearEvent(); 586 | } 587 | return this; 588 | }; 589 | FuckAdBlock.prototype.clearEvent = function() { 590 | this._var.event.detected = []; 591 | this._var.event.notDetected = []; 592 | 593 | if(this._options.debug === true) { 594 | this._log('clearEvent', 'The event list has been cleared'); 595 | } 596 | }; 597 | 598 | FuckAdBlock.prototype.on = function(detected, fn) { 599 | this._var.event[(detected===true?'detected':'notDetected')].push(fn); 600 | if(this._options.debug === true) { 601 | this._log('on', 'A type of event "'+(detected===true?'detected':'notDetected')+'" was added'); 602 | } 603 | 604 | return this; 605 | }; 606 | FuckAdBlock.prototype.onDetected = function(fn) { 607 | return this.on(true, fn); 608 | }; 609 | FuckAdBlock.prototype.onNotDetected = function(fn) { 610 | return this.on(false, fn); 611 | }; 612 | 613 | window.FuckAdBlock = FuckAdBlock; 614 | 615 | if(window.fuckAdBlock === undefined) { 616 | window.fuckAdBlock = new FuckAdBlock({ 617 | checkOnLoad: true, 618 | resetOnEnd: true 619 | }); 620 | } 621 | }; 622 | -------------------------------------------------------------------------------- /docs/sep-email.html: -------------------------------------------------------------------------------- 1 |Join over 2,000 other Designers & Developers!
Email from September
' + 28 | o.name + '
'; 29 | newItem.appendChild(subLinkDiv); 30 | var newDate = document.createElement('span'); 31 | newDate.className = 'SideNav_RecentDate'; 32 | newDate.textContent = o.date; 33 | newItem.appendChild(newDate); 34 | } else { 35 | newItem.innerHTML = '' + o.name + ' ' + 37 | o.date + ''; 38 | } 39 | SideNav_Recent.appendChild(newItem); 40 | } 41 | 42 | var linkElems = document.getElementsByClassName('Links_Link'); 43 | var links = []; 44 | var now = moment(); 45 | // Figure out the time ago 46 | for (var i = 0; i < linkElems.length; i++) { 47 | var linkDate = linkElems[i].getAttribute('data-date'); 48 | var d = linkDate.split('-'); 49 | // Need to minus a 1 from the month as Moment.js 50 | // treats 0 as Jan and 11 as Dec 51 | d[1] = d[1] - 1; 52 | var ago = moment(d).fromNow(); 53 | if (ago.includes('day') && parseInt(ago.substr(0, ago.indexOf(' '))) < 14 54 | || ago.includes('in') || ago.includes('hour') || ago.includes('a day')) { 55 | var styleOrder = moment(d).unix() * -1; 56 | var dummyLinks = linkElems[i].classList.value.includes('Links_Link--dummy') ? 57 | linkElems[i].nextSibling 58 | : false; 59 | links.push({ 60 | name: linkElems[i].textContent, 61 | url: linkElems[i].href, 62 | date: ago[0] === 'a' ? 'Yesterday' : ago, 63 | order: styleOrder, 64 | dummy: dummyLinks 65 | }); 66 | } 67 | } 68 | // Create the items in recent 69 | for (var j = 0; j < links.length; j++) { 70 | createRecentItem(links[j]); 71 | } 72 | if (links.length === 0) { 73 | SideNav_Recent.innerHTML = ' \ 74 | Nothing has been added in the last 14 days. \ 75 | Don\'t worry! We\'re still updating \ 76 | this repo. We\'re focusing on quality which means links won\'t be added all the time, \ 77 | only when they are required.'; 78 | } 79 | // Local storage and working out the notification 80 | if (!localStorage.getItem(recentType)) { 81 | function linkReducer(acc, val) { 82 | acc.push({name: val.name, seen: false}); 83 | return acc; 84 | } 85 | var reducedLinks = links.reduce(linkReducer, []); 86 | localStorage.setItem(recentType, JSON.stringify(reducedLinks)); 87 | } 88 | var ls = JSON.parse(localStorage.getItem(recentType)); 89 | function reducer(acc, val) { 90 | var matched = false; 91 | for (var i = 0; i < ls.length; i++) { 92 | if (ls[i].name === val.name) { 93 | matched = true; 94 | } 95 | } 96 | if (!matched) { 97 | acc.push(val); 98 | } 99 | return acc; 100 | } 101 | var newLinks = links.reduce(reducer, []); 102 | var oldUnseenLinks = ls.filter(function(item){ 103 | return item.seen === false; 104 | }); 105 | unseen = newLinks.concat(oldUnseenLinks); 106 | localStorage.setItem(recentType, JSON.stringify(ls.concat(newLinks))); 107 | if (unseen.length > 0) { 108 | SideNav_RecentNumber.textContent = unseen.length; 109 | SideNav_RecentNumber.classList.add('SideNav_RecentNumber--visible'); 110 | } 111 | } 112 | -------------------------------------------------------------------------------- /src/js/SideNavTabs.js: -------------------------------------------------------------------------------- 1 | function SideNavTabs () { 2 | var SideNavTabs = document.getElementsByClassName('SideNav_Tabs')[0]; 3 | var Tab1 = document.getElementById('tab-1'); 4 | var Tab2 = document.getElementById('tab-2'); 5 | var Panel1 = document.getElementById('panel-1'); 6 | var Panel2 = document.getElementById('panel-2'); 7 | Tab1.addEventListener('click',function(){ 8 | if (SideNavTabs.classList.contains('SideNav_Tabs--tab2')) { 9 | SideNavTabs.classList.remove('SideNav_Tabs--tab2'); 10 | SideNavTabs.classList.add('SideNav_Tabs--tab1'); 11 | Panel1.classList.add('SideNav_Panel--visible'); 12 | Panel2.classList.remove('SideNav_Panel--visible'); 13 | Panel1.setAttribute('aria-hidden', false); 14 | Panel2.setAttribute('aria-hidden', true); 15 | } 16 | }); 17 | Tab2.addEventListener('click',function(){ 18 | if (SideNavTabs.classList.contains('SideNav_Tabs--tab1')) { 19 | SideNavTabs.classList.remove('SideNav_Tabs--tab1'); 20 | SideNavTabs.classList.add('SideNav_Tabs--tab2'); 21 | Panel1.classList.remove('SideNav_Panel--visible'); 22 | Panel2.classList.add('SideNav_Panel--visible'); 23 | Panel1.setAttribute('aria-hidden', true); 24 | Panel2.setAttribute('aria-hidden', false); 25 | var ls = JSON.parse(localStorage.getItem(recentType)); 26 | for (var y = 0; y < ls.length; y++) { 27 | ls[y].seen = true; 28 | } 29 | localStorage.setItem(recentType, JSON.stringify(ls)); 30 | SideNav_RecentNumber.textContent = ''; 31 | SideNav_RecentNumber.classList.remove('SideNav_RecentNumber--visible'); 32 | if (unseen.length > 0) { 33 | var SideNav_RecentItems = document.getElementsByClassName('SideNav_RecentItem'); 34 | for (var a = 0; a < SideNav_RecentItems.length; a++) { 35 | var isUnseen = false; 36 | unseen.map(function(item) { 37 | if (SideNav_RecentItems[a].firstChild.textContent === item.name) { 38 | isUnseen = true; 39 | } 40 | }); 41 | if (isUnseen) { 42 | SideNav_RecentItems[a].classList.add('SideNav_RecentItem--unseen'); 43 | } 44 | } 45 | } 46 | } 47 | }); 48 | }; 49 | -------------------------------------------------------------------------------- /src/js/SmoothScrollAnchor.js: -------------------------------------------------------------------------------- 1 | function SmoothScrollAnchor() { 2 | var Hamburger = document.getElementsByClassName('TopBar_Hamburger')[0]; 3 | var SideNav = document.getElementsByClassName('SideNav')[0]; 4 | var SideNavBackdrop = document.getElementsByClassName('SideNav_Backdrop')[0]; 5 | function toggleSideNav() { 6 | SideNav.classList.toggle('SideNav--visible'); 7 | SideNavBackdrop.classList.toggle('SideNav_Backdrop--visible'); 8 | } 9 | // Smooth Scrolling Anchor Links 10 | $('a[href^="#"]').click(function(e) { 11 | e.preventDefault(); 12 | // calculate destination place 13 | var scrollDest = $(this.hash)[0].offsetTop - 70; 14 | 15 | if($(window).width() < 600) { 16 | toggleSideNav(); 17 | } 18 | 19 | // go to destination 20 | $('.Links').animate({ 21 | scrollTop: scrollDest 22 | }, 500, 'swing'); 23 | }); 24 | }; 25 | -------------------------------------------------------------------------------- /src/js/WindowOnLoad.js: -------------------------------------------------------------------------------- 1 | window.onload = function () { 2 | RecentItems(); 3 | SideNavTabs(); 4 | Modals(); 5 | SmoothScrollAnchor(); 6 | MultiLinks(); 7 | Notification(); 8 | MobileMenu(); 9 | MobileCategoryHeader(); 10 | FuckAdBlock(); 11 | FuckAdBlockCheck(); 12 | } 13 | -------------------------------------------------------------------------------- /src/js/fuckadblock.js: -------------------------------------------------------------------------------- 1 | function FuckAdBlock () { 2 | var FuckAdBlock = function(options) { 3 | this._options = { 4 | checkOnLoad: false, 5 | resetOnEnd: false, 6 | loopCheckTime: 50, 7 | loopMaxNumber: 5, 8 | baitClass: 'pub_300x250 pub_300x250m pub_728x90 text-ad textAd text_ad text_ads text-ads text-ad-links', 9 | baitStyle: 'width: 1px !important; height: 1px !important; position: absolute !important; left: -10000px !important; top: -1000px !important;', 10 | debug: false 11 | }; 12 | this._var = { 13 | version: '3.2.1', 14 | bait: null, 15 | checking: false, 16 | loop: null, 17 | loopNumber: 0, 18 | event: { detected: [], notDetected: [] } 19 | }; 20 | if(options !== undefined) { 21 | this.setOption(options); 22 | } 23 | var self = this; 24 | var eventCallback = function() { 25 | setTimeout(function() { 26 | if(self._options.checkOnLoad === true) { 27 | if(self._options.debug === true) { 28 | self._log('onload->eventCallback', 'A check loading is launched'); 29 | } 30 | if(self._var.bait === null) { 31 | self._creatBait(); 32 | } 33 | setTimeout(function() { 34 | self.check(); 35 | }, 1); 36 | } 37 | }, 1); 38 | }; 39 | if(window.addEventListener !== undefined) { 40 | window.addEventListener('load', eventCallback, false); 41 | } else { 42 | window.attachEvent('onload', eventCallback); 43 | } 44 | }; 45 | FuckAdBlock.prototype._options = null; 46 | FuckAdBlock.prototype._var = null; 47 | FuckAdBlock.prototype._bait = null; 48 | 49 | FuckAdBlock.prototype._log = function(method, message) { 50 | console.log('[FuckAdBlock]['+method+'] '+message); 51 | }; 52 | 53 | FuckAdBlock.prototype.setOption = function(options, value) { 54 | if(value !== undefined) { 55 | var key = options; 56 | options = {}; 57 | options[key] = value; 58 | } 59 | for(var option in options) { 60 | this._options[option] = options[option]; 61 | if(this._options.debug === true) { 62 | this._log('setOption', 'The option "'+option+'" he was assigned to "'+options[option]+'"'); 63 | } 64 | } 65 | return this; 66 | }; 67 | 68 | FuckAdBlock.prototype._creatBait = function() { 69 | var bait = document.createElement('div'); 70 | bait.setAttribute('class', this._options.baitClass); 71 | bait.setAttribute('style', this._options.baitStyle); 72 | this._var.bait = window.document.body.appendChild(bait); 73 | 74 | this._var.bait.offsetParent; 75 | this._var.bait.offsetHeight; 76 | this._var.bait.offsetLeft; 77 | this._var.bait.offsetTop; 78 | this._var.bait.offsetWidth; 79 | this._var.bait.clientHeight; 80 | this._var.bait.clientWidth; 81 | 82 | if(this._options.debug === true) { 83 | this._log('_creatBait', 'Bait has been created'); 84 | } 85 | }; 86 | FuckAdBlock.prototype._destroyBait = function() { 87 | window.document.body.removeChild(this._var.bait); 88 | this._var.bait = null; 89 | 90 | if(this._options.debug === true) { 91 | this._log('_destroyBait', 'Bait has been removed'); 92 | } 93 | }; 94 | 95 | FuckAdBlock.prototype.check = function(loop) { 96 | if(loop === undefined) { 97 | loop = true; 98 | } 99 | 100 | if(this._options.debug === true) { 101 | this._log('check', 'An audit was requested '+(loop===true?'with a':'without')+' loop'); 102 | } 103 | 104 | if(this._var.checking === true) { 105 | if(this._options.debug === true) { 106 | this._log('check', 'A check was canceled because there is already an ongoing'); 107 | } 108 | return false; 109 | } 110 | this._var.checking = true; 111 | 112 | if(this._var.bait === null) { 113 | this._creatBait(); 114 | } 115 | 116 | var self = this; 117 | this._var.loopNumber = 0; 118 | if(loop === true) { 119 | this._var.loop = setInterval(function() { 120 | self._checkBait(loop); 121 | }, this._options.loopCheckTime); 122 | } 123 | setTimeout(function() { 124 | self._checkBait(loop); 125 | }, 1); 126 | if(this._options.debug === true) { 127 | this._log('check', 'A check is in progress ...'); 128 | } 129 | 130 | return true; 131 | }; 132 | FuckAdBlock.prototype._checkBait = function(loop) { 133 | var detected = false; 134 | 135 | if(this._var.bait === null) { 136 | this._creatBait(); 137 | } 138 | 139 | if(window.document.body.getAttribute('abp') !== null 140 | || this._var.bait.offsetParent === null 141 | || this._var.bait.offsetHeight == 0 142 | || this._var.bait.offsetLeft == 0 143 | || this._var.bait.offsetTop == 0 144 | || this._var.bait.offsetWidth == 0 145 | || this._var.bait.clientHeight == 0 146 | || this._var.bait.clientWidth == 0) { 147 | detected = true; 148 | } 149 | if(window.getComputedStyle !== undefined) { 150 | var baitTemp = window.getComputedStyle(this._var.bait, null); 151 | if(baitTemp && (baitTemp.getPropertyValue('display') == 'none' || baitTemp.getPropertyValue('visibility') == 'hidden')) { 152 | detected = true; 153 | } 154 | } 155 | 156 | if(this._options.debug === true) { 157 | this._log('_checkBait', 'A check ('+(this._var.loopNumber+1)+'/'+this._options.loopMaxNumber+' ~'+(1+this._var.loopNumber*this._options.loopCheckTime)+'ms) was conducted and detection is '+(detected===true?'positive':'negative')); 158 | } 159 | 160 | if(loop === true) { 161 | this._var.loopNumber++; 162 | if(this._var.loopNumber >= this._options.loopMaxNumber) { 163 | this._stopLoop(); 164 | } 165 | } 166 | 167 | if(detected === true) { 168 | this._stopLoop(); 169 | this._destroyBait(); 170 | this.emitEvent(true); 171 | if(loop === true) { 172 | this._var.checking = false; 173 | } 174 | } else if(this._var.loop === null || loop === false) { 175 | this._destroyBait(); 176 | this.emitEvent(false); 177 | if(loop === true) { 178 | this._var.checking = false; 179 | } 180 | } 181 | }; 182 | FuckAdBlock.prototype._stopLoop = function(detected) { 183 | clearInterval(this._var.loop); 184 | this._var.loop = null; 185 | this._var.loopNumber = 0; 186 | 187 | if(this._options.debug === true) { 188 | this._log('_stopLoop', 'A loop has been stopped'); 189 | } 190 | }; 191 | 192 | FuckAdBlock.prototype.emitEvent = function(detected) { 193 | if(this._options.debug === true) { 194 | this._log('emitEvent', 'An event with a '+(detected===true?'positive':'negative')+' detection was called'); 195 | } 196 | 197 | var fns = this._var.event[(detected===true?'detected':'notDetected')]; 198 | for(var i in fns) { 199 | if(this._options.debug === true) { 200 | this._log('emitEvent', 'Call function '+(parseInt(i)+1)+'/'+fns.length); 201 | } 202 | if(fns.hasOwnProperty(i)) { 203 | fns[i](); 204 | } 205 | } 206 | if(this._options.resetOnEnd === true) { 207 | this.clearEvent(); 208 | } 209 | return this; 210 | }; 211 | FuckAdBlock.prototype.clearEvent = function() { 212 | this._var.event.detected = []; 213 | this._var.event.notDetected = []; 214 | 215 | if(this._options.debug === true) { 216 | this._log('clearEvent', 'The event list has been cleared'); 217 | } 218 | }; 219 | 220 | FuckAdBlock.prototype.on = function(detected, fn) { 221 | this._var.event[(detected===true?'detected':'notDetected')].push(fn); 222 | if(this._options.debug === true) { 223 | this._log('on', 'A type of event "'+(detected===true?'detected':'notDetected')+'" was added'); 224 | } 225 | 226 | return this; 227 | }; 228 | FuckAdBlock.prototype.onDetected = function(fn) { 229 | return this.on(true, fn); 230 | }; 231 | FuckAdBlock.prototype.onNotDetected = function(fn) { 232 | return this.on(false, fn); 233 | }; 234 | 235 | window.FuckAdBlock = FuckAdBlock; 236 | 237 | if(window.fuckAdBlock === undefined) { 238 | window.fuckAdBlock = new FuckAdBlock({ 239 | checkOnLoad: true, 240 | resetOnEnd: true 241 | }); 242 | } 243 | }; 244 | -------------------------------------------------------------------------------- /src/pug/head.pug: -------------------------------------------------------------------------------- 1 | meta(charset='UTF-8') 2 | link(rel='icon', href='img/favicon.png', type='image/png') 3 | meta(name="theme-color" content="#364359") 4 | link(rel="icon" sizes="192x192" href="./img/favicon.png") 5 | title webdesignrepo - a compact list of helpful webdesign links 6 | meta(property="og:title" content="webdesignrepo") 7 | meta(property="og:type" content="website") 8 | meta(property="article:tag" content="web design") 9 | meta(property="article:tag" content="web development") 10 | meta(property="article:tag" content="development") 11 | meta(property="article:tag" content="design") 12 | meta(property="article:tag" content="frontend") 13 | meta(property="article:tag" content="startups") 14 | meta(property="article:tag" content="css") 15 | meta(property="article:tag" content="html") 16 | meta(property="article:tag" content="js") 17 | meta(property="article:tag" content="javascript") 18 | meta(property="og:url" content="http://webdesignrepo.com") 19 | meta(property="og:image" content="http://webdesignrepo.com/img/banner.png") 20 | meta(property="og:image:width" content="388") 21 | meta(property="og:image:height" content="82") 22 | meta(property="og:description" content="The best of webdesign, frontend & startups all in one place.") 23 | meta(name="twitter:card" content="summary_large_image") 24 | meta(name="twitter:site" content="@webdesignrepo") 25 | meta(name="twitter:creator" content="@mildrenben") 26 | meta(name="twitter:title" content="webdesignrepo") 27 | meta(name="twitter:description" content="The best of webdesign, frontend & startups all in one place.") 28 | meta(name="twitter:image" content="http://webdesignrepo.com/img/banner.png") 29 | meta(name='description', content='The best of webdesign, frontend & startups all in one place.') 30 | link(rel='stylesheet', type='text/css', href='css/main.css') 31 | link(href='https://fonts.googleapis.com/css?family=Montserrat:500,700', rel='stylesheet') 32 | link(rel='stylesheet', type='text/css', href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css') 33 | meta(name='viewport', content='width=device-width, initial-scale=1, maximum-scale=1') 34 | -------------------------------------------------------------------------------- /src/pug/pageTemplate.pug: -------------------------------------------------------------------------------- 1 | doctype html 2 | html(lang="en") 3 | head 4 | include ./head.pug 5 | base(target='_blank') 6 | body 7 | header.TopBar(role='banner') 8 | a.TopBar_LogoWrap(href="/" target="_self") 9 | h1.TopBar_Logo 10 | span.TopBar_LogoDesktop webdesignrepo 11 | span.TopBar_LogoMobile w 12 | nav.TopBar_Repos(role='navigation' class="TopBar_Repos--" + pageTitle) 13 | h2.TopBar_Repo.TopBar_Repo--WebDesign(role='menuitem') 14 | a(href='/' target="_self") WebDesign 15 | h2.TopBar_Repo.TopBar_Repo--FrontEnd(role='menuitem') 16 | a(href='/frontend.html' target="_self") Frontend 17 | h2.TopBar_Repo.TopBar_Repo--Startups(role='menuitem') 18 | a(href='/startups.html' target="_self") Startups 19 | div.TopBar_Categories 20 | each category in data 21 | h5.TopBar_Category= category.title 22 | div.TopBar_Hamburger 23 | i.fa.fa-bars(aria-hidden="true") 24 | div.TopBar_Social(aria-label='Social Media Links') 25 | a.TopBar_SocialLink.TopBar_SocialLink--patreon(href="https://www.patreon.com/user?u=4147601") 26 | include ./patreonimg 27 | span.TopBar_SocialLink.TopBar_SocialLink--newsletter 28 | i.fa.fa-envelope 29 | a.TopBar_SocialLink(href='http://www.facebook.com/webdesignrepowebsite') 30 | i.fa.fa-facebook(aria-hidden='true') 31 | a.TopBar_SocialLink(href='https://twitter.com/webdesignrepo') 32 | i.fa.fa-twitter(aria-hidden='true') 33 | a.TopBar_SocialLink(href='https://github.com/mildrenben/webdesignrepo') 34 | i.fa.fa-github(aria-hidden='true') 35 | div.SideNav_Backdrop 36 | aside.SideNav 37 | div.SideNav_Tabs.SideNav_Tabs--tab1(role='tablist') 38 | button#tab-1.SideNav_Tab(role='tab', aria-controls='panel-1') Sections 39 | button#tab-2.SideNav_Tab(role='tab', aria-controls='panel-2') New 40 | span.SideNav_RecentNumber 41 | span.SideNav_TabUnderscore(aria-hidden='true') 42 | .SideNav_PanelWrap 43 | .SideNav_Panel.SideNav_Panel-1.SideNav_Panel--visible#panel-1(role='tabpanel', aria-labelledby='tab-1', aria-hidden='false') 44 | nav(role='navigation') 45 | ul.SideNav_Categories(role='menu') 46 | each category in data 47 | li(role='menuitem') 48 | a(href="#"+category.id target="_self")= category.title 49 | .SideNav_Panel.SideNav_Panel-2#panel-2(role='tabpanel', aria-labelledby='tab-2', aria-hidden='true') 50 | ul.SideNav_Recent 51 | .SideNav_Social 52 | span.TopBar_SocialLink.TopBar_SocialLink--newsletter 53 | i.fa.fa-envelope 54 | a.TopBar_SocialLink(href='http://www.facebook.com/webdesignrepowebsite') 55 | i.fa.fa-facebook(aria-hidden='true') 56 | a.TopBar_SocialLink(href='https://twitter.com/webdesignrepo') 57 | i.fa.fa-twitter(aria-hidden='true') 58 | a.TopBar_SocialLink(href='https://github.com/mildrenben/webdesignrepo') 59 | i.fa.fa-github(aria-hidden='true') 60 | div.SideNav_Info 61 | button#SubmitBtn.SideNav_InfoBtn.SideNav_SubmitBtn Submit 62 | button.SideNav_InfoBtn.SideNav_SponsorBtn Sponsor 63 | 64 | div.Modal(aria-controlledby='SubmitBtn', aria-label='Submit Modal', aria-hidden='true') 65 | div.Modal_Backdrop(aria-hidden='true') 66 | div.Modal_Content 67 | i.fa.fa-times(aria-hidden='true') 68 | div.Modal_Message.Modal_Message--sponsor.Modal_Message--large 69 | p Thinking of sponsoring webdesignrepo? Awesome! We are a highly targeted platform to advertise on with an audience of web designers, web developers and startup enthusiasts. 70 | p Here are some options: 71 | ul 72 | li #[span Email sponsorship] - currently over 2,000 subscribers. Avg open rate of 37.9% and avg click rate of 7.1%. 73 | li #[span Website sponsorship] - two potential spots for sponsorship, one always in view in the side navigation and one banner between sections. 74 | li #[span Link sponsorship] - sponsor your own link in the repo by highlighting it to stand out more. Note: only applicable to links already on the site. We will not accept payment to be added to the list. 75 | p Sponsorship options vary in cost based on campaign length and other factors. Please contact #[a(href="mailto:webdesignrepo@gmail.com") us via email] (webdesignrepo[at]gmail.com) for more details and pricing. 76 | div.Modal_Message.Modal_Message--submit 77 | p Think we've missed something cool? We'd love your input! 78 | p Tweet us at 79 | | #[a(href='https://twitter.com/webdesignrepo') @webdesignrepo], make an issue on 80 | | #[a(href='https://github.com/mildrenben/webdesignrepo') Github] 81 | | or drop us a message on 82 | | #[a(href='http://www.facebook.com/webdesignrepowebsite') Facebook]. 83 | div.Modal_Message.Modal_Message--newsletter 84 | p Join over 2,000 other Designers & Developers! 85 | p.Modal_MessageText--small Receive a weekly newsletter of new resources and interesting articles. 86 | p.Modal_MessageText--small No spam! #[a(href="/sep-email.html") Click here to see what our emails look like]. 87 | #mc_embed_signup 88 | form(action="//rrrepo.us3.list-manage.com/subscribe/post?u=98616074a58bc97bbcdbdc691&id=661e9be5d1" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate) 89 | #mc_embed_signup_scroll 90 | input(type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required) 91 | div(style="position: absolute; left: -5000px;" aria-hidden="true") 92 | input(type="text" name="b_98616074a58bc97bbcdbdc691_661e9be5d1" tabindex="-1" value="") 93 | div.EmailSubCatch 94 | input(type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button") 95 | 96 | main.Links(role="main") 97 | each category in data 98 | div.Links_Cat(id=category.id) 99 | h4.Links_CatTitle= category.title 100 | div.Links_SubCats 101 | each subCat in category.subCats 102 | div.Links_SubCat 103 | h3.Links_SubCatTitle= subCat.title 104 | ul.Links_SubCatList 105 | if subCat.track 106 | div.Links_Tracks 107 | span.Links_TrackTooltip TRACK 108 | each track, idx in subCat.track 109 | div(class="Links_Track Links_Track--amount" + track + " Links_Track--num" + idx) 110 | span(class="Links_TrackNum")= idx 111 | 112 | each link in subCat.links 113 | li(style="order: " + link.track) 114 | if link.urls 115 | p.Links_Link.Links_Link--dummy(data-date=link.date)= link.name 116 | div.Links_SubLinks 117 | each url in link.urls 118 | a.Links_SubLink(href=url.url)= url.name 119 | else 120 | a(href=link.url class="Links_Link" data-date=link.date)= link.name 121 | if link.paid 122 | span.Links_Tag.Links_Tag--dollar $ 123 | if link.book 124 | span.Links_Tag.Links_Tag--book B 125 | nav.BottomBar_Repos(role='navigation' class="TopBar_Repos--" + pageTitle) 126 | h2.TopBar_Repo.TopBar_Repo--WebDesign(role='menuitem') 127 | a(href='/' target="_self") WebDesign 128 | h2.TopBar_Repo.TopBar_Repo--FrontEnd(role='menuitem') 129 | a(href='/frontend.html' target="_self") Frontend 130 | h2.TopBar_Repo.TopBar_Repo--Startups(role='menuitem') 131 | a(href='/startups.html' target="_self") Startups 132 | 133 | 134 | 135 | 136 | 137 | script(type='text/javascript', src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js') 138 | script(src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous") 139 | script(type='text/javascript', src='./js/main.js') 140 | script(type='text/javascript'). 141 | var _gaq = _gaq || []; 142 | _gaq.push(['_setAccount', 'UA-39874852-1']); 143 | _gaq.push(['_trackPageview']); 144 | (function() { 145 | var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; 146 | ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; 147 | var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); 148 | })(); 149 | -------------------------------------------------------------------------------- /src/pug/patreonimg.pug: -------------------------------------------------------------------------------- 1 | img(src="data:image/png;base64,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") 2 | -------------------------------------------------------------------------------- /src/pug/temp.pug: -------------------------------------------------------------------------------- 1 | include data/webdesign/data_webdesign.pug 2 | doctype html 3 | html(lang="en") 4 | head 5 | meta(charset='UTF-8') 6 | link(rel='icon', href='img/icon.png', type='image/png') 7 | title webdesignrepo - a compact list of helpful webdesign links 8 | meta(name='description', content='The best of webdesign, all in one place. webdesignrepo is a curated collection of helpful links from around the web for beginners and veterans alike. Primarily the repo is for webdesign links, but there is a large overlap with web development and graphic design.') 9 | link(rel='stylesheet', type='text/css', href='css/main.css') 10 | link(href='https://fonts.googleapis.com/css?family=Montserrat:400,700', rel='stylesheet') 11 | link(rel='stylesheet', type='text/css', href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css') 12 | base(target='_blank') 13 | meta(name='viewport', content='width=device-width, initial-scale=1, maximum-scale=1') 14 | body 15 | header.TopBar(role='banner') 16 | a(href="/" target="_self") 17 | h1.TopBar_Logo webdesignrepo 18 | nav.TopBar_Repos(role='navigation') 19 | h2(role='menuitem').active 20 | a(href='/') WebDesign 21 | h2(role='menuitem') 22 | a(href='/') Frontend 23 | h2(role='menuitem') 24 | a(href='/') Startups 25 | div.TopBar_Social(aria-label='Social Media Links') 26 | a(href='http://www.facebook.com/webdesignrepowebsite') 27 | i.fa.fa-facebook(aria-hidden='true') 28 | a(href='https://twitter.com/webdesignrepo') 29 | i.fa.fa-twitter(aria-hidden='true') 30 | a(href='https://github.com/mildrenben/webdesignrepo') 31 | i.fa.fa-github(aria-hidden='true') 32 | 33 | aside.SideNav 34 | div.SideNav_Tabs.SideNav_Tabs--tab1(role='tablist') 35 | button#tab-1.SideNav_Tab(role='tab', aria-controls='panel-1') Sections 36 | button#tab-2.SideNav_Tab(role='tab', aria-controls='panel-2') New 37 | span.SideNav_RecentNumber 38 | span.SideNav_TabUnderscore(aria-hidden='true') 39 | .SideNav_PanelWrap 40 | .SideNav_Panel.SideNav_Panel-1.SideNav_Panel--visible#panel-1(role='tabpanel', aria-labelledby='tab-1', aria-hidden='false') 41 | nav(role='navigation') 42 | ul.SideNav_Categories(role='menu') 43 | each category in data 44 | li(role='menuitem') 45 | a(href="#"+category.id target="_self")= category.title 46 | .SideNav_Panel.SideNav_Panel-2#panel-2(role='tabpanel', aria-labelledby='tab-2', aria-hidden='true') 47 | ul.SideNav_Recent 48 | div.SideNav_Info 49 | button#SubmitBtn.SideNav_SubmitBtn Submit 50 | 51 | div.SubmitModal(aria-controlledby='SubmitBtn', aria-label='Submit Modal', aria-hidden='true') 52 | div.SubmitModal_Backdrop(aria-hidden='true') 53 | div.SubmitModal_Content 54 | i.fa.fa-times(aria-hidden='true') 55 | p Think we've missed something cool? We'd love your input! 56 | p Tweet us at 57 | | #[a(href='https://twitter.com/webdesignrepo') @webdesignrepo], make an issue on 58 | | #[a(href='https://github.com/mildrenben/webdesignrepo') Github] 59 | | or drop us a message on 60 | | #[a(href='http://www.facebook.com/webdesignrepowebsite') Facebook]. 61 | 62 | main.Links(role="main") 63 | each category in data 64 | div.Links_Cat(id=category.id) 65 | h4.Links_CatTitle= category.title 66 | div.Links_SubCats 67 | each subCat in category.subCats 68 | div.Links_SubCat 69 | h3.Links_SubCatTitle= subCat.title 70 | ul.Links_SubCatList 71 | each link in subCat.links 72 | if link.paid 73 | if link.book 74 | li #[a(href=link.url class="Links_Link" data-date=link.date)= link.name] $ B 75 | else 76 | li #[a(href=link.url class="Links_Link" data-date=link.date)= link.name] $ 77 | else if link.book 78 | li #[a(href=link.url class="Links_Link" data-date=link.date)= link.name] B 79 | else 80 | li #[a(href=link.url class="Links_Link" data-date=link.date)= link.name] 81 | div.Notification 82 | i.fa.fa-times.Notification_Close(aria-hidden='true') 83 | p.Notification_Message We look different, right? 84 | p.Notification_Message webdesignrepo is back in business. New design, new features and new subrepos. 85 | p.Notification_Message We've trimmed the fat and left the best of the best, as it's meant to be. 86 | p.Notification_Message Check out the details #[a(href="/") here on Medium]. 87 | 88 | 89 | 90 | 91 | 92 | script(type='text/javascript', src='./js/main.js') 93 | script(type='text/javascript', src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js') 94 | script(src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous") 95 | script(type='text/javascript'). 96 | var _gaq = _gaq || []; 97 | _gaq.push(['_setAccount', 'UA-39874852-1']); 98 | _gaq.push(['_trackPageview']); 99 | (function() { 100 | var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; 101 | ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; 102 | var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); 103 | })(); 104 | -------------------------------------------------------------------------------- /src/scss/Email.scss: -------------------------------------------------------------------------------- 1 | @import './_commons'; 2 | 3 | .Email { 4 | width: 40em; 5 | margin: 5em auto; 6 | &_ReturnLink { 7 | font-size: 1.5em; 8 | color: $med-blue; 9 | position: absolute; 10 | top: 1.5em; 11 | left: 1.5em; 12 | i { 13 | margin-right: .3em; 14 | } 15 | } 16 | &_Top { 17 | font-size: 1.6em; 18 | p:nth-of-type(2) { 19 | margin-top: 3.5em; 20 | } 21 | } 22 | &_Container { 23 | border: solid 1px $light-grey-1; 24 | border-radius: .5em; 25 | overflow: hidden; 26 | margin-top: .8em; 27 | background: $white; 28 | padding-bottom: 3em; 29 | } 30 | &_Header { 31 | background: $med-blue; 32 | color: $orange; 33 | width: 100%; 34 | font-size: 1.6em; 35 | letter-spacing: 0.5px; 36 | padding: 1em 0; 37 | text-align: center; 38 | } 39 | &_Section { 40 | margin-top: 2em; 41 | width: 100%; 42 | padding: 0 2em; 43 | &Title { 44 | color: $med-blue; 45 | font-size: 1.8em; 46 | text-decoration: underline; 47 | margin-bottom: .9em; 48 | } 49 | &:not(:first-of-type) { 50 | margin-top: 4em; 51 | } 52 | } 53 | &_Item { 54 | font-size: 1.4em; 55 | margin-bottom: .7em; 56 | display: block; 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /src/scss/Links.scss: -------------------------------------------------------------------------------- 1 | @import './_commons'; 2 | 3 | .Links { 4 | margin-left: $SideNavWidth; 5 | width: calc(100% - #{$SideNavWidth}); 6 | height: calc(100vh - #{$TopBarHeight)}); 7 | overflow-y: auto; 8 | box-sizing: border-box; 9 | margin-top: $TopBarHeight; 10 | font-size: 1.6em; 11 | padding: 3em 7em; 12 | &_AdResponse { 13 | display: none; 14 | &--visible { 15 | display: block; 16 | padding: 1.2rem 2rem .5rem; 17 | border: solid 1px $light-grey-1; 18 | margin-bottom: 2rem; 19 | margin-top: -1rem; 20 | font-size: 1.2rem; 21 | background: $white; 22 | line-height: 140%; 23 | color: $grey; 24 | a { 25 | @include link; 26 | color: $med-blue; 27 | } 28 | } 29 | } 30 | &_Cat { 31 | margin-bottom: 6em; 32 | position: relative; 33 | &Title { 34 | font-size: 3em; 35 | color: $orange; 36 | margin-bottom: 0.2em; 37 | } 38 | } 39 | &_SubCats { 40 | margin-top: 0.5em; 41 | background: $white; 42 | padding: 1.5em 1.5em 0.5em; 43 | display: flex; 44 | flex-wrap: wrap; 45 | align-items: flex-start; 46 | justify-content: flex-start; 47 | } 48 | &_SubCat { 49 | width: 22rem; 50 | margin-bottom: 2em; 51 | padding: 0.7em; 52 | margin-right: 1em; 53 | } 54 | &_SubCatTitle { 55 | font-size: 1.1em; 56 | font-weight: 500; 57 | color: $med-blue; 58 | margin-bottom: 0.6em; 59 | opacity: 0.85; 60 | } 61 | &_SubCatList { 62 | list-style: none; 63 | position: relative; 64 | display: inline-flex; 65 | flex-wrap: wrap; 66 | li { 67 | color: $grey; 68 | font-size: .85em; 69 | position: relative; 70 | width: 100%; 71 | } 72 | } 73 | &_Tracks { 74 | position: absolute; 75 | left: -1.8em; 76 | top: -.2rem; 77 | opacity: 0.35; 78 | &:hover { 79 | opacity: 0.8; 80 | .Links_TrackTooltip { 81 | opacity: 1; 82 | } 83 | } 84 | } 85 | &_TrackTooltip { 86 | position: absolute; 87 | bottom: -1em; 88 | left: 0; 89 | z-index: -1; 90 | z-index: 3; 91 | top: 106%; 92 | width: 6.6em; 93 | left: -2.4em; 94 | padding: 1em; 95 | height: 3em; 96 | font-size: 0.6em; 97 | border-radius: 3px; 98 | box-sizing: border-box; 99 | text-align: center; 100 | background: $light-blue; 101 | font-weight: 700; 102 | color: $white; 103 | opacity: 0; 104 | pointer-events: none; 105 | } 106 | &_Track { 107 | border-right: solid 2px; 108 | display: flex; 109 | align-items: center; 110 | margin-bottom: .4rem; 111 | @for $i from 1 through 3 { 112 | &--amount#{$i} { height: 2.1rem * $i; } 113 | } 114 | &--num1 { border-color: #1BBC9B }; 115 | &--num2 { border-color: #E87E04 }; 116 | &--num3 { border-color: #EF4836 }; 117 | } 118 | &_TrackNum { 119 | $size: 1.3rem; 120 | display: block; 121 | font-size: .6em; 122 | margin-right: .3em; 123 | height: $size; 124 | width: $size; 125 | border-radius: $size; 126 | border: solid 2px $grey; 127 | font-weight: 700; 128 | color: black; 129 | background: $white; 130 | text-align: center; 131 | line-height: $size; 132 | position: relative; 133 | cursor: default; 134 | } 135 | &_Tag { 136 | $color: $grey; 137 | position: relative; 138 | font-size: 1.2rem; 139 | color: $color; 140 | margin-left: .3rem; 141 | font-family: Montserrat; 142 | font-weight: 500; 143 | display: inline-flex; 144 | justify-content: center; 145 | align-items: center; 146 | opacity: 0.5; 147 | cursor: default; 148 | &--dollar { 149 | &:hover { 150 | &:after { 151 | content: 'PAID'; 152 | } 153 | } 154 | } 155 | &--book{ 156 | &:hover { 157 | &:after { 158 | content: 'BOOK'; 159 | } 160 | } 161 | } 162 | &:hover { 163 | opacity: 1; 164 | &:after { 165 | position: absolute; 166 | z-index: 3; 167 | top: 150%; 168 | width: 5em; 169 | left: -2em; 170 | padding: 1em; 171 | font-size: 0.9em; 172 | border-radius: 3px; 173 | box-sizing: border-box; 174 | text-align: center; 175 | font-family: 'Montserrat', sans-serif; 176 | background: $light-blue; 177 | font-weight: 700; 178 | color: $white; 179 | } 180 | } 181 | } 182 | &_Link { 183 | @include link; 184 | &--dummy { 185 | cursor: pointer; 186 | &:hover { 187 | &:after { 188 | opacity: 0; 189 | } 190 | } 191 | } 192 | } 193 | } 194 | 195 | .Links_SubLinks { 196 | height: 0; 197 | overflow: hidden; 198 | transition: all 0.2s ease-in-out; 199 | margin: -.2rem 0 .2rem; 200 | display: flex; 201 | overflow-x: auto; 202 | a { 203 | @include link; 204 | color: lighten($grey, 10%); 205 | font-size: 1.2rem; 206 | margin-right: 1em; 207 | } 208 | } 209 | 210 | .Links .Links_SubLinks--visible { 211 | height: 2.8rem; 212 | } 213 | 214 | .SideNav_Recent .Links_SubLinks--visible { 215 | height: 2.4rem; 216 | } 217 | 218 | @media screen and (min-width: 601px) and (max-width: $tab) { 219 | .Links { 220 | padding: 2em 4em; 221 | &_CatTitle { 222 | font-size: 2.3em; 223 | } 224 | } 225 | } 226 | 227 | @media screen and (max-width: $mob) { 228 | .Links { 229 | margin-left: 0; 230 | width: 100%; 231 | font-size: 15px; 232 | padding: 0; 233 | padding-top: 1.5em; 234 | &_CatTitle { 235 | font-size: 2.3em; 236 | margin-left: 0.4em; 237 | } 238 | } 239 | } 240 | -------------------------------------------------------------------------------- /src/scss/Misc.scss: -------------------------------------------------------------------------------- 1 | @import './_commons'; 2 | 3 | .Modal { 4 | opacity: 0; 5 | position: absolute; 6 | top: 0; 7 | left: 0; 8 | width: 100%; 9 | height: 100%; 10 | transition: opacity 0.2s ease; 11 | pointer-events: none; 12 | z-index: 5; 13 | &--visible { 14 | pointer-events: auto; 15 | opacity: 1; 16 | .SubmitModal_Content { 17 | transform: translate(-50%,-50%) scale(1); 18 | } 19 | } 20 | &_Backdrop { 21 | width: 100%; 22 | height: 100%; 23 | background: rgba(0,0,0,0.18); 24 | top: 0; 25 | left: 0; 26 | position: absolute; 27 | z-index: 1; 28 | } 29 | &_Content { 30 | font-size: 1.4rem; 31 | height: auto; 32 | position: absolute; 33 | top: 45%; 34 | left: 50%; 35 | transform: translate(-50%,-50%) scale(1.1); 36 | transition: transform 0.2s ease; 37 | background: $white; 38 | padding: 3rem; 39 | z-index: 2; 40 | line-height: 1.6; 41 | p { 42 | color: $med-blue; 43 | &:first-of-type { 44 | margin-bottom: 1.5em; 45 | } 46 | a { 47 | color: $orange; 48 | } 49 | } 50 | .fa-times { 51 | position: absolute; 52 | right: 0; 53 | top: -3em; 54 | color: $grey; 55 | padding: 1em; 56 | cursor: pointer; 57 | } 58 | } 59 | &_Message { 60 | display: none; 61 | width: 100%; 62 | max-width: 33rem; 63 | &.Modal_Message--visible { 64 | display: block; 65 | } 66 | &Text--small { 67 | font-size: 1rem; 68 | margin-bottom: 0.5rem; 69 | } 70 | &--large { 71 | max-width: 60rem; 72 | } 73 | } 74 | } 75 | 76 | @media screen and (max-width: $mob) { 77 | .Modal { 78 | &_Content { 79 | transform: translate(-50%, 0); 80 | top: 4rem; 81 | overflow: auto; 82 | max-height: calc(100% - 4rem); 83 | width: 55%; 84 | } 85 | .fa-times { 86 | top: 0; 87 | } 88 | } 89 | } 90 | 91 | .Modal_Message--sponsor { 92 | ul { 93 | font-size: .9em; 94 | margin-bottom: 3rem; 95 | li { 96 | margin: 1.5rem 0; 97 | color: $light-blue; 98 | span { 99 | color: $dark-blue; 100 | font-weight: 700; 101 | } 102 | } 103 | } 104 | } 105 | 106 | #mce-EMAIL { 107 | width: 100%; 108 | padding: 1rem; 109 | box-sizing: border-box; 110 | border: solid 1px $light-grey-1; 111 | outline: none; 112 | box-shadow: none; 113 | margin-top: 1rem; 114 | &:focus { 115 | outline: none; 116 | border: solid 1px darken($light-grey-1, 10%); 117 | } 118 | } 119 | .EmailSubCatch { 120 | width: 50%; 121 | margin: 0 auto; 122 | } 123 | #mc-embedded-subscribe { 124 | width: 100%; 125 | padding: 1rem; 126 | margin-top: 2rem; 127 | margin-left: auto; 128 | margin-right: auto; 129 | display: block; 130 | box-shadow: none; 131 | outline: none; 132 | border: none; 133 | border-radius: 0.4rem; 134 | padding: .8em 1.7em; 135 | font-size: 1.1rem; 136 | text-transform: uppercase; 137 | font-family: Montserrat, sans-serif; 138 | font-weight: 500; 139 | color: $white; 140 | background: $orange; 141 | cursor: pointer; 142 | transition: all 0.2s ease-out; 143 | &:hover { 144 | box-shadow: 0 0 9px 2px rgba($orange,0.25); 145 | } 146 | } 147 | 148 | .Notification { 149 | position: absolute; 150 | bottom: 2em; 151 | right: 2em; 152 | padding: 1em 2em; 153 | font-size: 1.4em; 154 | max-width: 20em; 155 | background: $white; 156 | border: solid 1px darken($light-grey-1,6%); 157 | transform: scale(0); 158 | transform-origin: 100% 100%; 159 | animation: popup 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) 1.5s forwards; 160 | &--hidden { 161 | display: none; 162 | } 163 | &_Message { 164 | font-size: 1em; 165 | color: $grey; 166 | line-height: 130%; 167 | margin: 1em 0; 168 | &:first-of-type { 169 | color: $med-blue; 170 | } 171 | a { 172 | color: $orange; 173 | } 174 | } 175 | &_Close { 176 | position: absolute; 177 | right: 0; 178 | top: -3em; 179 | padding: 1em; 180 | cursor: pointer; 181 | } 182 | } 183 | 184 | @keyframes popup { 185 | to { 186 | transform: scale(1); 187 | } 188 | } 189 | 190 | @media screen and (max-width: $mob) { 191 | .EmailSubCatch { 192 | width: 75%; 193 | } 194 | .Notification { 195 | max-width: 16em; 196 | } 197 | } 198 | -------------------------------------------------------------------------------- /src/scss/SideNav.scss: -------------------------------------------------------------------------------- 1 | @import './_commons'; 2 | 3 | $infoHeightDesktop: 15em; 4 | 5 | .SideNav { 6 | position: fixed; 7 | top: $TopBarHeight; 8 | left: 0; 9 | overflow-y: auto; 10 | overflow-x: hidden; 11 | width: $SideNavWidth; 12 | background: $white; 13 | height: calc(100vh - #{$TopBarHeight}); 14 | display: flex; 15 | flex-direction: column; 16 | &_Tabs { 17 | width: 100%; 18 | height: $TopBarHeight - .5; 19 | position: relative; 20 | &--tab1 { 21 | .SideNav_Tab:first-of-type { 22 | color: $med-blue; 23 | } 24 | } 25 | &--tab2 { 26 | .SideNav_Tab:nth-of-type(2) { 27 | color: $med-blue; 28 | } 29 | .SideNav_TabUnderscore { 30 | transform: translateX(100%); 31 | } 32 | } 33 | } 34 | &_Tab { 35 | width: 50%; 36 | display: inline-block; 37 | font-weight: 500; 38 | height: 100%; 39 | font-size: 1.1rem; 40 | color: $grey; 41 | border-bottom: solid 1px $light-grey-1; 42 | } 43 | &_TabUnderscore { 44 | display: block; 45 | position: absolute; 46 | bottom: 0; 47 | left: 0; 48 | width: 50%; 49 | background: $orange; 50 | box-shadow: 0 0 9px 1px rgba($orange,0.2); 51 | height: 2px; 52 | z-index: 2; 53 | transition: transform 0.15s ease-in-out; 54 | transform: translateX(0%); 55 | } 56 | &_PanelWrap { 57 | position: relative; 58 | width: 100%; 59 | height: calc(100% - #{$infoHeightDesktop}); 60 | } 61 | &_Panel { 62 | position: absolute; 63 | top: 0; 64 | width: 100%; 65 | transition: transform 0.2s ease; 66 | height: 100%; 67 | overflow-y: auto; 68 | } 69 | &_Panel-1 { 70 | &.SideNav_Panel--visible { 71 | transform: translateX(0); 72 | } 73 | &:not(.SideNav_Panel--visible) { 74 | transform: translateX(-100%); 75 | } 76 | } 77 | &_Panel-2 { 78 | &.SideNav_Panel--visible { 79 | transform: translateX(0); 80 | } 81 | &:not(.SideNav_Panel--visible) { 82 | transform: translateX(100%); 83 | } 84 | } 85 | &_Recent { 86 | list-style: none; 87 | padding: .8em; 88 | font-size: 1.6rem; 89 | display: flex; 90 | flex-direction: column; 91 | &Item { 92 | font-size: 0.85em; 93 | padding: 1em 1em .9em; 94 | position: relative; 95 | &--unseen { 96 | &:before { 97 | $size: 6px; 98 | content: ''; 99 | width: $size; 100 | height: $size; 101 | position: absolute; 102 | left: 0; 103 | top: 1.34em; 104 | background: $orange; 105 | border-radius: $size; 106 | animation: pulse 5s linear forwards; 107 | } 108 | } 109 | } 110 | &Link { 111 | @include link; 112 | font-size: .95em; 113 | } 114 | &Date { 115 | display: block; 116 | font-size: 0.8em; 117 | color: $grey; 118 | opacity: 0.5; 119 | margin-top: -0.4em; 120 | } 121 | &NoItems { 122 | padding: 1.2rem 1.2rem 1rem; 123 | color: $grey; 124 | display: block; 125 | &:first-of-type { 126 | font-size: 0.9em; 127 | margin-bottom: 1em; 128 | } 129 | &:nth-child(2) { 130 | font-size: 0.75em; 131 | line-height: 150%; 132 | opacity: 0.6; 133 | } 134 | } 135 | &Number { 136 | opacity: 0; 137 | position: absolute; 138 | display: inline-block; 139 | background: #F28374; 140 | color: white; 141 | border-radius: 50%; 142 | width: 1.8em; 143 | height: 1.8em; 144 | font-size: .8em; 145 | text-align: center; 146 | line-height: 1.8em; 147 | margin-top: -.55em; 148 | margin-left: .55em; 149 | box-shadow: 0 0 9px 1px rgba(242,131,116,.2); 150 | &--visible { 151 | animation: bounceIn .5s linear .5s forwards; 152 | } 153 | } 154 | } 155 | &_Categories { 156 | padding: .9em; 157 | list-style: none; 158 | font-size: 1.6rem; 159 | width: 100%; 160 | box-sizing: border-box; 161 | li { 162 | font-size: .8em; 163 | width: 100%; 164 | a { 165 | color: $grey; 166 | width: 100%; 167 | box-sizing: border-box; 168 | padding: .75em .8em; 169 | margin: .22em 0; 170 | border-radius: 0.3em; 171 | display: inline-block; 172 | &:hover { 173 | background: $light-grey; 174 | } 175 | } 176 | } 177 | } 178 | &_Info { 179 | display: flex; 180 | justify-content: center; 181 | align-items: flex-end; 182 | padding-bottom: 2rem; 183 | border-top: solid 1px $light-grey-1; 184 | height: $infoHeightDesktop; 185 | margin-top: auto; 186 | } 187 | &_InfoBtn { 188 | border: solid 1px $grey; 189 | color: $grey; 190 | border-radius: 0.4rem; 191 | padding: .8em 1.4em; 192 | font-size: 1.05rem; 193 | text-transform: uppercase; 194 | font-weight: 500; 195 | opacity: 0.35; 196 | transition: all 0.2s ease-out; 197 | &:hover { 198 | opacity: 1; 199 | color: $white; 200 | } 201 | } 202 | &_SubmitBtn { 203 | margin-right: 1rem; 204 | &:hover { 205 | border-color: $orange; 206 | background: $orange; 207 | box-shadow: 0 0 10px 2px rgba($orange,0.25); 208 | } 209 | } 210 | &_SponsorBtn { 211 | &:hover { 212 | $foo: #81CFE0; 213 | border-color: $foo; 214 | background: $foo; 215 | box-shadow: 0 0 9px 2px rgba($foo,0.25); 216 | } 217 | } 218 | &_Backdrop, 219 | &_Social { 220 | display: none; 221 | } 222 | } 223 | 224 | $infoHeightMobile: 10em; 225 | 226 | @media screen and (max-width: $mob) { 227 | .SideNav { 228 | left: 0; 229 | transform: translateX(-($SideNavWidth + 4rem)); 230 | height: 100%; 231 | width: 23rem; 232 | top: 0; 233 | transition: transform 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86); 234 | z-index: 5; 235 | box-shadow: 0 3px 7px 1px rgba(0,0,0,0.1); 236 | &--visible { 237 | transform: translateX(0); 238 | } 239 | &_Backdrop { 240 | display: block; 241 | position: absolute; 242 | top: 0; 243 | left: 0; 244 | width: 100%; 245 | height: 100%; 246 | background: rgba(0,0,0,0.2); 247 | z-index: 4; 248 | opacity: 0; 249 | pointer-events: none; 250 | transition: opacity 0.2s cubic-bezier(0.785, 0.135, 0.15, 0.86); 251 | &--visible { 252 | opacity: 1; 253 | pointer-events: all; 254 | } 255 | } 256 | &_Tabs { 257 | height: 6rem; 258 | } 259 | &_PanelWrap { 260 | height: calc(100% - #{$infoHeightMobile}); 261 | } 262 | &_Social { 263 | height: 4rem; 264 | border-top: solid 1px $light-grey-1; 265 | display: block; 266 | font-size: 1.3rem; 267 | .TopBar_SocialLink { 268 | width: 25%; 269 | height: 100%; 270 | text-align: center; 271 | display: inline-block; 272 | border-right: solid 1px $light-grey-1; 273 | box-sizing: border-box; 274 | color: rgba($light-blue, 0.9); 275 | &:last-child { 276 | border: none; 277 | } 278 | i { 279 | line-height: 4rem; 280 | } 281 | } 282 | } 283 | &_Info { 284 | height: $infoHeightMobile; 285 | } 286 | } 287 | } 288 | -------------------------------------------------------------------------------- /src/scss/TopBar.scss: -------------------------------------------------------------------------------- 1 | @import './_commons'; 2 | 3 | .TopBar { 4 | display: flex; 5 | width: 100%; 6 | height: $TopBarHeight; 7 | background-color: $med-blue; 8 | position: fixed; 9 | top: 0; 10 | left: 0; 11 | &_Logo, 12 | &_Repos, 13 | &_Social { 14 | display: inline-flex; 15 | height: 100%; 16 | justify-content: center; 17 | align-items: center; 18 | } 19 | &_LogoWrap { 20 | height: 100%; 21 | } 22 | &_Logo { 23 | font-size: 1.4rem; 24 | letter-spacing: 0.03em; 25 | font-weight: 500; 26 | width: $SideNavWidth; 27 | color: $orange; 28 | background: $dark-blue; 29 | &Mobile { 30 | display: none; 31 | } 32 | } 33 | &_Repos { 34 | flex: 1; 35 | } 36 | &_Hamburger, 37 | &_Categories { 38 | display: none; 39 | } 40 | &_Social { 41 | padding: 0 1em; 42 | font-size: 1.3rem; 43 | .TopBar_SocialLink { 44 | width: 2.2rem; 45 | opacity: 0.4; 46 | color: $white; 47 | cursor: pointer; 48 | display: inline-flex; 49 | align-items: center; 50 | justify-content: center; 51 | &--newsletter { 52 | width: 2.4rem; 53 | } 54 | &--patreon { 55 | width: 2.5rem; 56 | img { 57 | height: 1.4rem; 58 | } 59 | } 60 | &:hover { 61 | opacity: 1; 62 | } 63 | } 64 | } 65 | } 66 | 67 | .TopBar_Repos--WebDesign .TopBar_Repo--WebDesign a { 68 | opacity: 0.9; 69 | } 70 | .TopBar_Repos--FrontEnd .TopBar_Repo--FrontEnd a { 71 | opacity: 0.9; 72 | } 73 | .TopBar_Repos--Startups .TopBar_Repo--Startups a { 74 | opacity: 0.9; 75 | } 76 | .TopBar_Repo { 77 | font-size: 0.95em; 78 | height: 100%; 79 | display: inline-flex; 80 | align-items: center; 81 | a { 82 | font-weight: 500; 83 | opacity: 0.5; 84 | padding: 1em 1.3em; 85 | border-radius: 0.3em; 86 | display: inline-block; 87 | color: $white; 88 | letter-spacing: 0.1em; 89 | text-transform: uppercase; 90 | &:hover { 91 | opacity: 1; 92 | background: rgba($white, 0.05); 93 | } 94 | } 95 | } 96 | 97 | .BottomBar_Repos { 98 | display: none; 99 | } 100 | 101 | @media screen and (max-width: $mob) { 102 | .TopBar { 103 | overflow: hidden; 104 | &_Logo { 105 | width: 4.8rem; 106 | &Desktop { 107 | display: none; 108 | } 109 | &Mobile { 110 | display: block; 111 | } 112 | } 113 | &_Repos { 114 | display: none; 115 | .TopBar_Repo a { 116 | padding: 1em; 117 | } 118 | } 119 | &_Categories { 120 | display: inline-block; 121 | flex: 1; 122 | height: 100%; 123 | transform: translateY(0); 124 | transition: transform 0.2s ease-in-out; 125 | } 126 | &_Category { 127 | width: 100%; 128 | text-align: center; 129 | font-size: 1em; 130 | text-transform: uppercase; 131 | font-weight: 500; 132 | height: 100%; 133 | line-height: 4.8rem; 134 | letter-spacing: 0.1em; 135 | color: $white; 136 | } 137 | &_Hamburger { 138 | display: inline-block; 139 | width: 4.8rem; 140 | font-size: 1.4em; 141 | text-align: center; 142 | opacity: .8; 143 | i { 144 | line-height: 4.8rem; 145 | color: $white; 146 | } 147 | } 148 | &_Social { 149 | display: none; 150 | } 151 | } 152 | .BottomBar_Repos { 153 | display: flex; 154 | position: fixed; 155 | bottom: 0; 156 | left: 0; 157 | width: 100%; 158 | height: 4.2rem; 159 | justify-content: center; 160 | background: $light-blue; 161 | .TopBar_Repo a { 162 | padding: 1em; 163 | } 164 | } 165 | } 166 | -------------------------------------------------------------------------------- /src/scss/_commons.scss: -------------------------------------------------------------------------------- 1 | // Colors 2 | $dark-blue: #2C3749; 3 | $med-blue: #364359; 4 | $light-blue: #404F69; 5 | $orange: #F28374; 6 | 7 | $white: #FFFFFE; 8 | $light-grey: #F4F6FB; 9 | $grey: #787d88; 10 | 11 | $light-grey-1: darken($light-grey, 3%); 12 | 13 | // Sizes 14 | 15 | $TopBarHeight: 4.8rem; 16 | $SideNavWidth: 20rem; 17 | 18 | // Media Queries 19 | 20 | $mob: 600px; 21 | $tab: 760px; 22 | $largeDesktop: 1600px; 23 | 24 | // Mixins 25 | 26 | @mixin link { 27 | color: $grey; 28 | position: relative; 29 | display: inline-block; 30 | &:after { 31 | content: ''; 32 | height: 0.4rem; 33 | display: block; 34 | width: 100%; 35 | position: relative; 36 | top: -.3em; 37 | left: 0; 38 | background: $orange; 39 | z-index: 0; 40 | opacity: 0; 41 | margin-bottom: .3em; 42 | } 43 | &:hover { 44 | &:after { 45 | opacity: .7; 46 | } 47 | } 48 | } 49 | 50 | // Keyframes 51 | @keyframes bounceIn { 52 | from, 20%, 40%, 60%, 80%, to { 53 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 54 | } 55 | 56 | 0% { 57 | opacity: 0; 58 | transform: scale3d(.3, .3, .3); 59 | } 60 | 61 | 20% { 62 | transform: scale3d(1.1, 1.1, 1.1); 63 | } 64 | 65 | 40% { 66 | transform: scale3d(.9, .9, .9); 67 | } 68 | 69 | 60% { 70 | opacity: 1; 71 | transform: scale3d(1.03, 1.03, 1.03); 72 | } 73 | 74 | 80% { 75 | transform: scale3d(.97, .97, .97); 76 | } 77 | 78 | to { 79 | opacity: 1; 80 | transform: scale3d(1, 1, 1); 81 | } 82 | } 83 | 84 | @keyframes pulse { 85 | from, 10%, 20%, 30%, 40%, 50%, 60%, 70%, 80% { 86 | transform: scale3d(1, 1, 1); 87 | } 88 | 89 | 15%, 45%, 75% { 90 | transform: scale3d(1.3, 1.3, 1.3); 91 | } 92 | 93 | 85%, 100% { 94 | transform: scale3d(0,0,0); 95 | } 96 | } 97 | -------------------------------------------------------------------------------- /src/scss/_reset.scss: -------------------------------------------------------------------------------- 1 | *, 2 | *:after, 3 | *:before { 4 | margin: 0; 5 | padding: 0; 6 | } 7 | 8 | a { 9 | text-decoration: none; 10 | } 11 | 12 | a, 13 | button { 14 | cursor: pointer; 15 | } 16 | 17 | button { 18 | border: none; 19 | background: none; 20 | font-family: 'Montserrat', sans-serif; 21 | &:focus { 22 | outline: none; 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /src/scss/main.scss: -------------------------------------------------------------------------------- 1 | @import './_reset'; 2 | @import './_commons'; 3 | @import './TopBar'; 4 | @import './SideNav'; 5 | @import './Links'; 6 | @import './Misc'; 7 | @import './Email'; 8 | 9 | html { 10 | font-size: 10px; 11 | font-family: 'Montserrat', sans-serif; 12 | font-weight: 500; 13 | } 14 | 15 | body { 16 | background: $light-grey; 17 | } 18 | 19 | @media screen and (min-width: $largeDesktop) { 20 | html { 21 | font-size: 10.5px; 22 | } 23 | } 24 | 25 | @media screen and (max-width: $mob) { 26 | html, 27 | body { 28 | overflow-x: hidden; 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /src/sep-email.pug: -------------------------------------------------------------------------------- 1 | doctype html 2 | html(lang="en") 3 | head 4 | meta(charset='UTF-8') 5 | link(rel='icon', href='img/icon.png', type='image/png') 6 | title webdesignrepo - a compact list of helpful webdesign links 7 | meta(name='description', content='The best of webdesign, all in one place. webdesignrepo is a curated collection of helpful links from around the web for beginners and veterans alike. Primarily the repo is for webdesign links, but there is a large overlap with web development and graphic design.') 8 | link(rel='stylesheet', type='text/css', href='css/main.css') 9 | link(href='https://fonts.googleapis.com/css?family=Montserrat:400,700', rel='stylesheet') 10 | link(rel='stylesheet', type='text/css', href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css') 11 | meta(name='viewport', content='width=device-width, initial-scale=1, maximum-scale=1') 12 | body 13 | a.Email_ReturnLink(href="/") #[i(class="fa fa-arrow-left" aria-hidden="true")] Return 14 | .Email 15 | .Email_Top 16 | p Join over 2,000 other Designers & Developers! 17 | #mc_embed_signup 18 | form(action="//rrrepo.us3.list-manage.com/subscribe/post?u=98616074a58bc97bbcdbdc691&id=661e9be5d1" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate) 19 | #mc_embed_signup_scroll 20 | input(type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required) 21 | div(style="position: absolute; left: -5000px;" aria-hidden="true") 22 | input(type="text" name="b_98616074a58bc97bbcdbdc691_661e9be5d1" tabindex="-1" value="") 23 | div.EmailSubCatch 24 | input(type="submit" value="Subscribe now" name="subscribe now" id="mc-embedded-subscribe" class="button") 25 | p Email from September 26 | .Email_Container 27 | .Email_Header webdesignrepo 28 | .Email_Content 29 | .Email_Section 30 | .Email_SectionTitle Added Links 31 | a.Email_Item(href="http://littlebigdetails.com/") Little Big Details 32 | a.Email_Item(href="https://www.jpeg.io/") Jpeg.io 33 | a.Email_Item(href="https://www.sitepoint.com/getting-started-with-vue-js/") Getting Started with Vue 34 | .Email_Section 35 | .Email_SectionTitle Recommended Viewing 36 | a.Email_Item(href="https://femmebot.github.io/google-type/") Gorgeous Google Fonts Combinations 37 | a.Email_Item(href="http://codepen.io/alexzaworski/full/EVNVXV") Gooey Slider 38 | a.Email_Item(href="https://github.com/twbs/bootstrap/issues/20631") Bootstrap v3 No Longer Maintained 39 | script(type='text/javascript'). 40 | var EmailSubCatch = document.getElementsByClassName('EmailSubCatch')[0]; 41 | EmailSubCatch.addEventListener('click', function(){ 42 | localStorage.setItem('wdr_subbed', true); 43 | }); 44 | script(type='text/javascript'). 45 | var _gaq = _gaq || []; 46 | _gaq.push(['_setAccount', 'UA-39874852-1']); 47 | _gaq.push(['_trackPageview']); 48 | (function() { 49 | var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; 50 | ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; 51 | var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); 52 | })(); 53 | -------------------------------------------------------------------------------- /src/startups.pug: -------------------------------------------------------------------------------- 1 | include data/startups/data_startups.pug 2 | - var pageTitle = 'Startups'; 3 | include pug/pageTemplate.pug 4 | --------------------------------------------------------------------------------