Neelify

├── README.md ├── assets ├── css │ ├── fontawesome-all.min.css │ ├── main.css │ └── noscript.css ├── js │ ├── breakpoints.min.js │ ├── browser.min.js │ ├── jquery.min.js │ ├── main.js │ └── util.js ├── sass │ ├── base │ │ ├── _page.scss │ │ ├── _reset.scss │ │ └── _typography.scss │ ├── components │ │ ├── _actions.scss │ │ ├── _box.scss │ │ ├── _button.scss │ │ ├── _form.scss │ │ ├── _icon.scss │ │ ├── _icons.scss │ │ ├── _image.scss │ │ ├── _list.scss │ │ └── _table.scss │ ├── layout │ │ ├── _bg.scss │ │ ├── _footer.scss │ │ ├── _header.scss │ │ ├── _main.scss │ │ └── _wrapper.scss │ ├── libs │ │ ├── _breakpoints.scss │ │ ├── _functions.scss │ │ ├── _mixins.scss │ │ ├── _vars.scss │ │ └── _vendor.scss │ ├── main.scss │ └── noscript.scss └── webfonts │ ├── fa-brands-400.eot │ ├── fa-brands-400.svg │ ├── fa-brands-400.ttf │ ├── fa-brands-400.woff │ ├── fa-brands-400.woff2 │ ├── fa-regular-400.eot │ ├── fa-regular-400.svg │ ├── fa-regular-400.ttf │ ├── fa-regular-400.woff │ ├── fa-regular-400.woff2 │ ├── fa-solid-900.eot │ ├── fa-solid-900.svg │ ├── fa-solid-900.ttf │ ├── fa-solid-900.woff │ └── fa-solid-900.woff2 ├── images ├── bg.jpg ├── overlay.png ├── pic01.jpg ├── pic02.jpg └── pic03.jpg └── index.html /README.md: -------------------------------------------------------------------------------- 1 | # Neelify 2 | Neel's Portfolio Website 3 | 4 | 5 |

6 | 7 | ## Techs used in making this project : 8 | 9 |

HTML
SCSS
CSS 3
Vanilla JS
JQuery
Formspree API (key yet to be activated on client demand)

0:!!("ontouchstart"in window),e.mobile="wp"==e.os||"android"==e.os||"ios"==e.os||"bb"==e.os}};return e.init(),e}();!function(e,n){"function"==typeof define&&define.amd?define([],n):"object"==typeof exports?module.exports=n():e.browser=n()}(this,function(){return browser}); 3 | -------------------------------------------------------------------------------- /assets/js/main.js: -------------------------------------------------------------------------------- 1 | /* 2 | Dimension by HTML5 UP 3 | html5up.net | @ajlkn 4 | Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) 5 | */ 6 | 7 | (function($) { 8 | 9 | var $window = $(window), 10 | $body = $('body'), 11 | $wrapper = $('#wrapper'), 12 | $header = $('#header'), 13 | $footer = $('#footer'), 14 | $main = $('#main'), 15 | $main_articles = $main.children('article'); 16 | 17 | // Breakpoints. 18 | breakpoints({ 19 | xlarge: [ '1281px', '1680px' ], 20 | large: [ '981px', '1280px' ], 21 | medium: [ '737px', '980px' ], 22 | small: [ '481px', '736px' ], 23 | xsmall: [ '361px', '480px' ], 24 | xxsmall: [ null, '360px' ] 25 | }); 26 | 27 | // Play initial animations on page load. 28 | $window.on('load', function() { 29 | window.setTimeout(function() { 30 | $body.removeClass('is-preload'); 31 | }, 100); 32 | }); 33 | 34 | // Fix: Flexbox min-height bug on IE. 35 | if (browser.name == 'ie') { 36 | 37 | var flexboxFixTimeoutId; 38 | 39 | $window.on('resize.flexbox-fix', function() { 40 | 41 | clearTimeout(flexboxFixTimeoutId); 42 | 43 | flexboxFixTimeoutId = setTimeout(function() { 44 | 45 | if ($wrapper.prop('scrollHeight') > $window.height()) 46 | $wrapper.css('height', 'auto'); 47 | else 48 | $wrapper.css('height', '100vh'); 49 | 50 | }, 250); 51 | 52 | }).triggerHandler('resize.flexbox-fix'); 53 | 54 | } 55 | 56 | // Nav. 57 | var $nav = $header.children('nav'), 58 | $nav_li = $nav.find('li'); 59 | 60 | // Add "middle" alignment classes if we're dealing with an even number of items. 61 | if ($nav_li.length % 2 == 0) { 62 | 63 | $nav.addClass('use-middle'); 64 | $nav_li.eq( ($nav_li.length / 2) ).addClass('is-middle'); 65 | 66 | } 67 | 68 | // Main. 69 | var delay = 325, 70 | locked = false; 71 | 72 | // Methods. 73 | $main._show = function(id, initial) { 74 | 75 | var $article = $main_articles.filter('#' + id); 76 | 77 | // No such article? Bail. 78 | if ($article.length == 0) 79 | return; 80 | 81 | // Handle lock. 82 | 83 | // Already locked? Speed through "show" steps w/o delays. 84 | if (locked || (typeof initial != 'undefined' && initial === true)) { 85 | 86 | // Mark as switching. 87 | $body.addClass('is-switching'); 88 | 89 | // Mark as visible. 90 | $body.addClass('is-article-visible'); 91 | 92 | // Deactivate all articles (just in case one's already active). 93 | $main_articles.removeClass('active'); 94 | 95 | // Hide header, footer. 96 | $header.hide(); 97 | $footer.hide(); 98 | 99 | // Show main, article. 100 | $main.show(); 101 | $article.show(); 102 | 103 | // Activate article. 104 | $article.addClass('active'); 105 | 106 | // Unlock. 107 | locked = false; 108 | 109 | // Unmark as switching. 110 | setTimeout(function() { 111 | $body.removeClass('is-switching'); 112 | }, (initial ? 1000 : 0)); 113 | 114 | return; 115 | 116 | } 117 | 118 | // Lock. 119 | locked = true; 120 | 121 | // Article already visible? Just swap articles. 122 | if ($body.hasClass('is-article-visible')) { 123 | 124 | // Deactivate current article. 125 | var $currentArticle = $main_articles.filter('.active'); 126 | 127 | $currentArticle.removeClass('active'); 128 | 129 | // Show article. 130 | setTimeout(function() { 131 | 132 | // Hide current article. 133 | $currentArticle.hide(); 134 | 135 | // Show article. 136 | $article.show(); 137 | 138 | // Activate article. 139 | setTimeout(function() { 140 | 141 | $article.addClass('active'); 142 | 143 | // Window stuff. 144 | $window 145 | .scrollTop(0) 146 | .triggerHandler('resize.flexbox-fix'); 147 | 148 | // Unlock. 149 | setTimeout(function() { 150 | locked = false; 151 | }, delay); 152 | 153 | }, 25); 154 | 155 | }, delay); 156 | 157 | } 158 | 159 | // Otherwise, handle as normal. 160 | else { 161 | 162 | // Mark as visible. 163 | $body 164 | .addClass('is-article-visible'); 165 | 166 | // Show article. 167 | setTimeout(function() { 168 | 169 | // Hide header, footer. 170 | $header.hide(); 171 | $footer.hide(); 172 | 173 | // Show main, article. 174 | $main.show(); 175 | $article.show(); 176 | 177 | // Activate article. 178 | setTimeout(function() { 179 | 180 | $article.addClass('active'); 181 | 182 | // Window stuff. 183 | $window 184 | .scrollTop(0) 185 | .triggerHandler('resize.flexbox-fix'); 186 | 187 | // Unlock. 188 | setTimeout(function() { 189 | locked = false; 190 | }, delay); 191 | 192 | }, 25); 193 | 194 | }, delay); 195 | 196 | } 197 | 198 | }; 199 | 200 | $main._hide = function(addState) { 201 | 202 | var $article = $main_articles.filter('.active'); 203 | 204 | // Article not visible? Bail. 205 | if (!$body.hasClass('is-article-visible')) 206 | return; 207 | 208 | // Add state? 209 | if (typeof addState != 'undefined' 210 | && addState === true) 211 | history.pushState(null, null, '#'); 212 | 213 | // Handle lock. 214 | 215 | // Already locked? Speed through "hide" steps w/o delays. 216 | if (locked) { 217 | 218 | // Mark as switching. 219 | $body.addClass('is-switching'); 220 | 221 | // Deactivate article. 222 | $article.removeClass('active'); 223 | 224 | // Hide article, main. 225 | $article.hide(); 226 | $main.hide(); 227 | 228 | // Show footer, header. 229 | $footer.show(); 230 | $header.show(); 231 | 232 | // Unmark as visible. 233 | $body.removeClass('is-article-visible'); 234 | 235 | // Unlock. 236 | locked = false; 237 | 238 | // Unmark as switching. 239 | $body.removeClass('is-switching'); 240 | 241 | // Window stuff. 242 | $window 243 | .scrollTop(0) 244 | .triggerHandler('resize.flexbox-fix'); 245 | 246 | return; 247 | 248 | } 249 | 250 | // Lock. 251 | locked = true; 252 | 253 | // Deactivate article. 254 | $article.removeClass('active'); 255 | 256 | // Hide article. 257 | setTimeout(function() { 258 | 259 | // Hide article, main. 260 | $article.hide(); 261 | $main.hide(); 262 | 263 | // Show footer, header. 264 | $footer.show(); 265 | $header.show(); 266 | 267 | // Unmark as visible. 268 | setTimeout(function() { 269 | 270 | $body.removeClass('is-article-visible'); 271 | 272 | // Window stuff. 273 | $window 274 | .scrollTop(0) 275 | .triggerHandler('resize.flexbox-fix'); 276 | 277 | // Unlock. 278 | setTimeout(function() { 279 | locked = false; 280 | }, delay); 281 | 282 | }, 25); 283 | 284 | }, delay); 285 | 286 | 287 | }; 288 | 289 | // Articles. 290 | $main_articles.each(function() { 291 | 292 | var $this = $(this); 293 | 294 | // Close. 295 | $('

') 296 | .appendTo($this) 297 | .on('click', function() { 298 | location.hash = ''; 299 | }); 300 | 301 | // Prevent clicks from inside article from bubbling. 302 | $this.on('click', function(event) { 303 | event.stopPropagation(); 304 | }); 305 | 306 | }); 307 | 308 | // Events. 309 | $body.on('click', function(event) { 310 | 311 | // Article visible? Hide. 312 | if ($body.hasClass('is-article-visible')) 313 | $main._hide(true); 314 | 315 | }); 316 | 317 | $window.on('keyup', function(event) { 318 | 319 | switch (event.keyCode) { 320 | 321 | case 27: 322 | 323 | // Article visible? Hide. 324 | if ($body.hasClass('is-article-visible')) 325 | $main._hide(true); 326 | 327 | break; 328 | 329 | default: 330 | break; 331 | 332 | } 333 | 334 | }); 335 | 336 | $window.on('hashchange', function(event) { 337 | 338 | // Empty hash? 339 | if (location.hash == '' 340 | || location.hash == '#') { 341 | 342 | // Prevent default. 343 | event.preventDefault(); 344 | event.stopPropagation(); 345 | 346 | // Hide. 347 | $main._hide(); 348 | 349 | } 350 | 351 | // Otherwise, check for a matching article. 352 | else if ($main_articles.filter(location.hash).length > 0) { 353 | 354 | // Prevent default. 355 | event.preventDefault(); 356 | event.stopPropagation(); 357 | 358 | // Show article. 359 | $main._show(location.hash.substr(1)); 360 | 361 | } 362 | 363 | }); 364 | 365 | // Scroll restoration. 366 | // This prevents the page from scrolling back to the top on a hashchange. 367 | if ('scrollRestoration' in history) 368 | history.scrollRestoration = 'manual'; 369 | else { 370 | 371 | var oldScrollPos = 0, 372 | scrollPos = 0, 373 | $htmlbody = $('html,body'); 374 | 375 | $window 376 | .on('scroll', function() { 377 | 378 | oldScrollPos = scrollPos; 379 | scrollPos = $htmlbody.scrollTop(); 380 | 381 | }) 382 | .on('hashchange', function() { 383 | $window.scrollTop(oldScrollPos); 384 | }); 385 | 386 | } 387 | 388 | // Initialize. 389 | 390 | // Hide main, articles. 391 | $main.hide(); 392 | $main_articles.hide(); 393 | 394 | // Initial article. 395 | if (location.hash != '' 396 | && location.hash != '#') 397 | $window.on('load', function() { 398 | $main._show(location.hash.substr(1), true); 399 | }); 400 | 401 | })(jQuery); -------------------------------------------------------------------------------- /assets/js/util.js: -------------------------------------------------------------------------------- 1 | (function($) { 2 | 3 | /** 4 | * Generate an indented list of links from a nav. Meant for use with panel(). 5 | * @return {jQuery} jQuery object. 6 | */ 7 | $.fn.navList = function() { 8 | 9 | var $this = $(this); 10 | $a = $this.find('a'), 11 | b = []; 12 | 13 | $a.each(function() { 14 | 15 | var $this = $(this), 16 | indent = Math.max(0, $this.parents('li').length - 1), 17 | href = $this.attr('href'), 18 | target = $this.attr('target'); 19 | 20 | b.push( 21 | '' + 26 | '' + 27 | $this.text() + 28 | '' 29 | ); 30 | 31 | }); 32 | 33 | return b.join(''); 34 | 35 | }; 36 | 37 | /** 38 | * Panel-ify an element. 39 | * @param {object} userConfig User config. 40 | * @return {jQuery} jQuery object. 41 | */ 42 | $.fn.panel = function(userConfig) { 43 | 44 | // No elements? 45 | if (this.length == 0) 46 | return $this; 47 | 48 | // Multiple elements? 49 | if (this.length > 1) { 50 | 51 | for (var i=0; i < this.length; i++) 52 | $(this[i]).panel(userConfig); 53 | 54 | return $this; 55 | 56 | } 57 | 58 | // Vars. 59 | var $this = $(this), 60 | $body = $('body'), 61 | $window = $(window), 62 | id = $this.attr('id'), 63 | config; 64 | 65 | // Config. 66 | config = $.extend({ 67 | 68 | // Delay. 69 | delay: 0, 70 | 71 | // Hide panel on link click. 72 | hideOnClick: false, 73 | 74 | // Hide panel on escape keypress. 75 | hideOnEscape: false, 76 | 77 | // Hide panel on swipe. 78 | hideOnSwipe: false, 79 | 80 | // Reset scroll position on hide. 81 | resetScroll: false, 82 | 83 | // Reset forms on hide. 84 | resetForms: false, 85 | 86 | // Side of viewport the panel will appear. 87 | side: null, 88 | 89 | // Target element for "class". 90 | target: $this, 91 | 92 | // Class to toggle. 93 | visibleClass: 'visible' 94 | 95 | }, userConfig); 96 | 97 | // Expand "target" if it's not a jQuery object already. 98 | if (typeof config.target != 'jQuery') 99 | config.target = $(config.target); 100 | 101 | // Panel. 102 | 103 | // Methods. 104 | $this._hide = function(event) { 105 | 106 | // Already hidden? Bail. 107 | if (!config.target.hasClass(config.visibleClass)) 108 | return; 109 | 110 | // If an event was provided, cancel it. 111 | if (event) { 112 | 113 | event.preventDefault(); 114 | event.stopPropagation(); 115 | 116 | } 117 | 118 | // Hide. 119 | config.target.removeClass(config.visibleClass); 120 | 121 | // Post-hide stuff. 122 | window.setTimeout(function() { 123 | 124 | // Reset scroll position. 125 | if (config.resetScroll) 126 | $this.scrollTop(0); 127 | 128 | // Reset forms. 129 | if (config.resetForms) 130 | $this.find('form').each(function() { 131 | this.reset(); 132 | }); 133 | 134 | }, config.delay); 135 | 136 | }; 137 | 138 | // Vendor fixes. 139 | $this 140 | .css('-ms-overflow-style', '-ms-autohiding-scrollbar') 141 | .css('-webkit-overflow-scrolling', 'touch'); 142 | 143 | // Hide on click. 144 | if (config.hideOnClick) { 145 | 146 | $this.find('a') 147 | .css('-webkit-tap-highlight-color', 'rgba(0,0,0,0)'); 148 | 149 | $this 150 | .on('click', 'a', function(event) { 151 | 152 | var $a = $(this), 153 | href = $a.attr('href'), 154 | target = $a.attr('target'); 155 | 156 | if (!href || href == '#' || href == '' || href == '#' + id) 157 | return; 158 | 159 | // Cancel original event. 160 | event.preventDefault(); 161 | event.stopPropagation(); 162 | 163 | // Hide panel. 164 | $this._hide(); 165 | 166 | // Redirect to href. 167 | window.setTimeout(function() { 168 | 169 | if (target == '_blank') 170 | window.open(href); 171 | else 172 | window.location.href = href; 173 | 174 | }, config.delay + 10); 175 | 176 | }); 177 | 178 | } 179 | 180 | // Event: Touch stuff. 181 | $this.on('touchstart', function(event) { 182 | 183 | $this.touchPosX = event.originalEvent.touches[0].pageX; 184 | $this.touchPosY = event.originalEvent.touches[0].pageY; 185 | 186 | }) 187 | 188 | $this.on('touchmove', function(event) { 189 | 190 | if ($this.touchPosX === null 191 | || $this.touchPosY === null) 192 | return; 193 | 194 | var diffX = $this.touchPosX - event.originalEvent.touches[0].pageX, 195 | diffY = $this.touchPosY - event.originalEvent.touches[0].pageY, 196 | th = $this.outerHeight(), 197 | ts = ($this.get(0).scrollHeight - $this.scrollTop()); 198 | 199 | // Hide on swipe? 200 | if (config.hideOnSwipe) { 201 | 202 | var result = false, 203 | boundary = 20, 204 | delta = 50; 205 | 206 | switch (config.side) { 207 | 208 | case 'left': 209 | result = (diffY < boundary && diffY > (-1 * boundary)) && (diffX > delta); 210 | break; 211 | 212 | case 'right': 213 | result = (diffY < boundary && diffY > (-1 * boundary)) && (diffX < (-1 * delta)); 214 | break; 215 | 216 | case 'top': 217 | result = (diffX < boundary && diffX > (-1 * boundary)) && (diffY > delta); 218 | break; 219 | 220 | case 'bottom': 221 | result = (diffX < boundary && diffX > (-1 * boundary)) && (diffY < (-1 * delta)); 222 | break; 223 | 224 | default: 225 | break; 226 | 227 | } 228 | 229 | if (result) { 230 | 231 | $this.touchPosX = null; 232 | $this.touchPosY = null; 233 | $this._hide(); 234 | 235 | return false; 236 | 237 | } 238 | 239 | } 240 | 241 | // Prevent vertical scrolling past the top or bottom. 242 | if (($this.scrollTop() < 0 && diffY < 0) 243 | || (ts > (th - 2) && ts < (th + 2) && diffY > 0)) { 244 | 245 | event.preventDefault(); 246 | event.stopPropagation(); 247 | 248 | } 249 | 250 | }); 251 | 252 | // Event: Prevent certain events inside the panel from bubbling. 253 | $this.on('click touchend touchstart touchmove', function(event) { 254 | event.stopPropagation(); 255 | }); 256 | 257 | // Event: Hide panel if a child anchor tag pointing to its ID is clicked. 258 | $this.on('click', 'a[href="#' + id + '"]', function(event) { 259 | 260 | event.preventDefault(); 261 | event.stopPropagation(); 262 | 263 | config.target.removeClass(config.visibleClass); 264 | 265 | }); 266 | 267 | // Body. 268 | 269 | // Event: Hide panel on body click/tap. 270 | $body.on('click touchend', function(event) { 271 | $this._hide(event); 272 | }); 273 | 274 | // Event: Toggle. 275 | $body.on('click', 'a[href="#' + id + '"]', function(event) { 276 | 277 | event.preventDefault(); 278 | event.stopPropagation(); 279 | 280 | config.target.toggleClass(config.visibleClass); 281 | 282 | }); 283 | 284 | // Window. 285 | 286 | // Event: Hide on ESC. 287 | if (config.hideOnEscape) 288 | $window.on('keydown', function(event) { 289 | 290 | if (event.keyCode == 27) 291 | $this._hide(event); 292 | 293 | }); 294 | 295 | return $this; 296 | 297 | }; 298 | 299 | /** 300 | * Apply "placeholder" attribute polyfill to one or more forms. 301 | * @return {jQuery} jQuery object. 302 | */ 303 | $.fn.placeholder = function() { 304 | 305 | // Browser natively supports placeholders? Bail. 306 | if (typeof (document.createElement('input')).placeholder != 'undefined') 307 | return $(this); 308 | 309 | // No elements? 310 | if (this.length == 0) 311 | return $this; 312 | 313 | // Multiple elements? 314 | if (this.length > 1) { 315 | 316 | for (var i=0; i < this.length; i++) 317 | $(this[i]).placeholder(); 318 | 319 | return $this; 320 | 321 | } 322 | 323 | // Vars. 324 | var $this = $(this); 325 | 326 | // Text, TextArea. 327 | $this.find('input[type=text],textarea') 328 | .each(function() { 329 | 330 | var i = $(this); 331 | 332 | if (i.val() == '' 333 | || i.val() == i.attr('placeholder')) 334 | i 335 | .addClass('polyfill-placeholder') 336 | .val(i.attr('placeholder')); 337 | 338 | }) 339 | .on('blur', function() { 340 | 341 | var i = $(this); 342 | 343 | if (i.attr('name').match(/-polyfill-field$/)) 344 | return; 345 | 346 | if (i.val() == '') 347 | i 348 | .addClass('polyfill-placeholder') 349 | .val(i.attr('placeholder')); 350 | 351 | }) 352 | .on('focus', function() { 353 | 354 | var i = $(this); 355 | 356 | if (i.attr('name').match(/-polyfill-field$/)) 357 | return; 358 | 359 | if (i.val() == i.attr('placeholder')) 360 | i 361 | .removeClass('polyfill-placeholder') 362 | .val(''); 363 | 364 | }); 365 | 366 | // Password. 367 | $this.find('input[type=password]') 368 | .each(function() { 369 | 370 | var i = $(this); 371 | var x = $( 372 | $('

') 373 | .append(i.clone()) 374 | .remove() 375 | .html() 376 | .replace(/type="password"/i, 'type="text"') 377 | .replace(/type=password/i, 'type=text') 378 | ); 379 | 380 | if (i.attr('id') != '') 381 | x.attr('id', i.attr('id') + '-polyfill-field'); 382 | 383 | if (i.attr('name') != '') 384 | x.attr('name', i.attr('name') + '-polyfill-field'); 385 | 386 | x.addClass('polyfill-placeholder') 387 | .val(x.attr('placeholder')).insertAfter(i); 388 | 389 | if (i.val() == '') 390 | i.hide(); 391 | else 392 | x.hide(); 393 | 394 | i 395 | .on('blur', function(event) { 396 | 397 | event.preventDefault(); 398 | 399 | var x = i.parent().find('input[name=' + i.attr('name') + '-polyfill-field]'); 400 | 401 | if (i.val() == '') { 402 | 403 | i.hide(); 404 | x.show(); 405 | 406 | } 407 | 408 | }); 409 | 410 | x 411 | .on('focus', function(event) { 412 | 413 | event.preventDefault(); 414 | 415 | var i = x.parent().find('input[name=' + x.attr('name').replace('-polyfill-field', '') + ']'); 416 | 417 | x.hide(); 418 | 419 | i 420 | .show() 421 | .focus(); 422 | 423 | }) 424 | .on('keypress', function(event) { 425 | 426 | event.preventDefault(); 427 | x.val(''); 428 | 429 | }); 430 | 431 | }); 432 | 433 | // Events. 434 | $this 435 | .on('submit', function() { 436 | 437 | $this.find('input[type=text],input[type=password],textarea') 438 | .each(function(event) { 439 | 440 | var i = $(this); 441 | 442 | if (i.attr('name').match(/-polyfill-field$/)) 443 | i.attr('name', ''); 444 | 445 | if (i.val() == i.attr('placeholder')) { 446 | 447 | i.removeClass('polyfill-placeholder'); 448 | i.val(''); 449 | 450 | } 451 | 452 | }); 453 | 454 | }) 455 | .on('reset', function(event) { 456 | 457 | event.preventDefault(); 458 | 459 | $this.find('select') 460 | .val($('option:first').val()); 461 | 462 | $this.find('input,textarea') 463 | .each(function() { 464 | 465 | var i = $(this), 466 | x; 467 | 468 | i.removeClass('polyfill-placeholder'); 469 | 470 | switch (this.type) { 471 | 472 | case 'submit': 473 | case 'reset': 474 | break; 475 | 476 | case 'password': 477 | i.val(i.attr('defaultValue')); 478 | 479 | x = i.parent().find('input[name=' + i.attr('name') + '-polyfill-field]'); 480 | 481 | if (i.val() == '') { 482 | i.hide(); 483 | x.show(); 484 | } 485 | else { 486 | i.show(); 487 | x.hide(); 488 | } 489 | 490 | break; 491 | 492 | case 'checkbox': 493 | case 'radio': 494 | i.attr('checked', i.attr('defaultValue')); 495 | break; 496 | 497 | case 'text': 498 | case 'textarea': 499 | i.val(i.attr('defaultValue')); 500 | 501 | if (i.val() == '') { 502 | i.addClass('polyfill-placeholder'); 503 | i.val(i.attr('placeholder')); 504 | } 505 | 506 | break; 507 | 508 | default: 509 | i.val(i.attr('defaultValue')); 510 | break; 511 | 512 | } 513 | }); 514 | 515 | }); 516 | 517 | return $this; 518 | 519 | }; 520 | 521 | /** 522 | * Moves elements to/from the first positions of their respective parents. 523 | * @param {jQuery} $elements Elements (or selector) to move. 524 | * @param {bool} condition If true, moves elements to the top. Otherwise, moves elements back to their original locations. 525 | */ 526 | $.prioritize = function($elements, condition) { 527 | 528 | var key = '__prioritize'; 529 | 530 | // Expand $elements if it's not already a jQuery object. 531 | if (typeof $elements != 'jQuery') 532 | $elements = $($elements); 533 | 534 | // Step through elements. 535 | $elements.each(function() { 536 | 537 | var $e = $(this), $p, 538 | $parent = $e.parent(); 539 | 540 | // No parent? Bail. 541 | if ($parent.length == 0) 542 | return; 543 | 544 | // Not moved? Move it. 545 | if (!$e.data(key)) { 546 | 547 | // Condition is false? Bail. 548 | if (!condition) 549 | return; 550 | 551 | // Get placeholder (which will serve as our point of reference for when this element needs to move back). 552 | $p = $e.prev(); 553 | 554 | // Couldn't find anything? Means this element's already at the top, so bail. 555 | if ($p.length == 0) 556 | return; 557 | 558 | // Move element to top of parent. 559 | $e.prependTo($parent); 560 | 561 | // Mark element as moved. 562 | $e.data(key, $p); 563 | 564 | } 565 | 566 | // Moved already? 567 | else { 568 | 569 | // Condition is true? Bail. 570 | if (condition) 571 | return; 572 | 573 | $p = $e.data(key); 574 | 575 | // Move element back to its original location (using our placeholder). 576 | $e.insertAfter($p); 577 | 578 | // Unmark element as moved. 579 | $e.removeData(key); 580 | 581 | } 582 | 583 | }); 584 | 585 | }; 586 | 587 | })(jQuery); -------------------------------------------------------------------------------- /assets/sass/base/_page.scss: -------------------------------------------------------------------------------- 1 | /// 2 | /// Dimension by HTML5 UP 3 | /// html5up.net | @ajlkn 4 | /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) 5 | /// 6 | 7 | /* Basic */ 8 | 9 | // MSIE: Required for IEMobile. 10 | @-ms-viewport { 11 | width: device-width; 12 | } 13 | 14 | // Ensures page width is always >=320px. 15 | @include breakpoint('<=xsmall') { 16 | html, body { 17 | min-width: 320px; 18 | } 19 | } 20 | 21 | // Set box model to border-box. 22 | // Based on css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice 23 | html { 24 | box-sizing: border-box; 25 | } 26 | 27 | *, *:before, *:after { 28 | box-sizing: inherit; 29 | } 30 | 31 | body { 32 | background: _palette(bg); 33 | 34 | // Stops initial animations until page loads. 35 | &.is-preload { 36 | *, *:before, *:after { 37 | @include vendor('animation', 'none !important'); 38 | @include vendor('transition', 'none !important'); 39 | } 40 | } 41 | 42 | } -------------------------------------------------------------------------------- /assets/sass/base/_reset.scss: -------------------------------------------------------------------------------- 1 | /// 2 | /// Dimension by HTML5 UP 3 | /// html5up.net | @ajlkn 4 | /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) 5 | /// 6 | 7 | // Reset. 8 | // Based on meyerweb.com/eric/tools/css/reset (v2.0 | 20110126 | License: public domain) 9 | 10 | html, body, div, span, applet, object, 11 | iframe, h1, h2, h3, h4, h5, h6, p, blockquote, 12 | pre, a, abbr, acronym, address, big, cite, 13 | code, del, dfn, em, img, ins, kbd, q, s, samp, 14 | small, strike, strong, sub, sup, tt, var, b, 15 | u, i, center, dl, dt, dd, ol, ul, li, fieldset, 16 | form, label, legend, table, caption, tbody, 17 | tfoot, thead, tr, th, td, article, aside, 18 | canvas, details, embed, figure, figcaption, 19 | footer, header, hgroup, menu, nav, output, ruby, 20 | section, summary, time, mark, audio, video { 21 | margin: 0; 22 | padding: 0; 23 | border: 0; 24 | font-size: 100%; 25 | font: inherit; 26 | vertical-align: baseline; 27 | } 28 | 29 | article, aside, details, figcaption, figure, 30 | footer, header, hgroup, menu, nav, section { 31 | display: block; 32 | } 33 | 34 | body { 35 | line-height: 1; 36 | } 37 | 38 | ol, ul { 39 | list-style:none; 40 | } 41 | 42 | blockquote, q { 43 | quotes: none; 44 | 45 | &:before, 46 | &:after { 47 | content: ''; 48 | content: none; 49 | } 50 | } 51 | 52 | table { 53 | border-collapse: collapse; 54 | border-spacing: 0; 55 | } 56 | 57 | body { 58 | -webkit-text-size-adjust: none; 59 | } 60 | 61 | mark { 62 | background-color: transparent; 63 | color: inherit; 64 | } 65 | 66 | input::-moz-focus-inner { 67 | border: 0; 68 | padding: 0; 69 | } 70 | 71 | input, select, textarea { 72 | -moz-appearance: none; 73 | -webkit-appearance: none; 74 | -ms-appearance: none; 75 | appearance: none; 76 | } -------------------------------------------------------------------------------- /assets/sass/base/_typography.scss: -------------------------------------------------------------------------------- 1 | /// 2 | /// Dimension by HTML5 UP 3 | /// html5up.net | @ajlkn 4 | /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) 5 | /// 6 | 7 | /* Type */ 8 | 9 | html { 10 | font-size: 16pt; 11 | 12 | @include breakpoint('<=xlarge') { 13 | font-size: 12pt; 14 | } 15 | 16 | @include breakpoint('<=small') { 17 | font-size: 11pt; 18 | } 19 | 20 | @include breakpoint('<=xxsmall') { 21 | font-size: 10pt; 22 | } 23 | } 24 | 25 | body, input, select, textarea { 26 | color: _palette(fg); 27 | font-family: _font(family); 28 | font-weight: _font(weight); 29 | font-size: 1rem; 30 | line-height: 1.65; 31 | } 32 | 33 | a { 34 | @include vendor('transition', ( 35 | 'color #{_duration(transition)} ease-in-out', 36 | 'background-color #{_duration(transition)} ease-in-out', 37 | 'border-bottom-color #{_duration(transition)} ease-in-out' 38 | )); 39 | border-bottom: dotted 1px _palette(fg-light); 40 | text-decoration: none; 41 | color: inherit; 42 | 43 | &:hover { 44 | border-bottom-color: transparent; 45 | } 46 | } 47 | 48 | strong, b { 49 | color: _palette(fg-bold); 50 | font-weight: _font(weight-bold); 51 | } 52 | 53 | em, i { 54 | font-style: italic; 55 | } 56 | 57 | p { 58 | margin: 0 0 _size(element-margin) 0; 59 | } 60 | 61 | h1, h2, h3, h4, h5, h6 { 62 | color: _palette(fg-bold); 63 | font-weight: _font(weight-bold); 64 | line-height: 1.5; 65 | margin: 0 0 (_size(element-margin) * 0.5) 0; 66 | text-transform: uppercase; 67 | letter-spacing: _font(letter-spacing); 68 | 69 | a { 70 | color: inherit; 71 | text-decoration: none; 72 | } 73 | 74 | &.major { 75 | border-bottom: solid _size(border-width) _palette(border); 76 | width: -moz-max-content; 77 | width: -webkit-max-content; 78 | width: -ms-max-content; 79 | width: max-content; 80 | padding-bottom: 0.5rem; 81 | margin: 0 0 (_size(element-margin) * 1) 0; 82 | } 83 | } 84 | 85 | h1 { 86 | font-size: 2.25rem; 87 | line-height: 1.3; 88 | letter-spacing: _font(letter-spacing-heading); 89 | } 90 | 91 | h2 { 92 | font-size: 1.5rem; 93 | line-height: 1.4; 94 | letter-spacing: _font(letter-spacing-heading); 95 | } 96 | 97 | h3 { 98 | font-size: 1rem; 99 | } 100 | 101 | h4 { 102 | font-size: 0.8rem; 103 | } 104 | 105 | h5 { 106 | font-size: 0.7rem; 107 | } 108 | 109 | h6 { 110 | font-size: 0.6rem; 111 | } 112 | 113 | @include breakpoint('<=small') { 114 | h1 { 115 | font-size: 1.75rem; 116 | line-height: 1.4; 117 | } 118 | 119 | h2 { 120 | font-size: 1.25em; 121 | line-height: 1.5; 122 | } 123 | } 124 | 125 | sub { 126 | font-size: 0.8rem; 127 | position: relative; 128 | top: 0.5rem; 129 | } 130 | 131 | sup { 132 | font-size: 0.8rem; 133 | position: relative; 134 | top: -0.5rem; 135 | } 136 | 137 | blockquote { 138 | border-left: solid (_size(border-width) * 4) _palette(border); 139 | font-style: italic; 140 | margin: 0 0 _size(element-margin) 0; 141 | padding: (_size(element-margin) / 4) 0 (_size(element-margin) / 4) _size(element-margin); 142 | } 143 | 144 | code { 145 | background: _palette(border-bg); 146 | border-radius: _size(border-radius); 147 | font-family: _font(family-fixed); 148 | font-size: 0.9rem; 149 | margin: 0 0.25rem; 150 | padding: 0.25rem 0.65rem; 151 | } 152 | 153 | pre { 154 | -webkit-overflow-scrolling: touch; 155 | font-family: _font(family-fixed); 156 | font-size: 0.9rem; 157 | margin: 0 0 _size(element-margin) 0; 158 | 159 | code { 160 | display: block; 161 | line-height: 1.75; 162 | padding: 1rem 1.5rem; 163 | overflow-x: auto; 164 | } 165 | } 166 | 167 | hr { 168 | border: 0; 169 | border-bottom: solid _size(border-width) _palette(border); 170 | margin: (_size(element-margin) * 1.375) 0; 171 | } 172 | 173 | .align-left { 174 | text-align: left; 175 | } 176 | 177 | .align-center { 178 | text-align: center; 179 | } 180 | 181 | .align-right { 182 | text-align: right; 183 | } -------------------------------------------------------------------------------- /assets/sass/components/_actions.scss: -------------------------------------------------------------------------------- 1 | /// 2 | /// Dimension by HTML5 UP 3 | /// html5up.net | @ajlkn 4 | /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) 5 | /// 6 | 7 | /* Actions */ 8 | 9 | ul.actions { 10 | @include vendor('display', 'flex'); 11 | cursor: default; 12 | list-style: none; 13 | margin-left: (_size(element-margin) * -0.5); 14 | padding-left: 0; 15 | 16 | li { 17 | padding: 0 0 0 (_size(element-margin) * 0.5); 18 | vertical-align: middle; 19 | } 20 | 21 | &.special { 22 | @include vendor('justify-content', 'center'); 23 | width: 100%; 24 | margin-left: 0; 25 | 26 | li { 27 | &:first-child { 28 | padding-left: 0; 29 | } 30 | } 31 | } 32 | 33 | &.stacked { 34 | @include vendor('flex-direction', 'column'); 35 | margin-left: 0; 36 | 37 | li { 38 | padding: (_size(element-margin) * 0.65) 0 0 0; 39 | 40 | &:first-child { 41 | padding-top: 0; 42 | } 43 | } 44 | } 45 | 46 | &.fit { 47 | width: calc(100% + #{_size(element-margin) * 0.5}); 48 | 49 | li { 50 | @include vendor('flex-grow', '1'); 51 | @include vendor('flex-shrink', '1'); 52 | width: 100%; 53 | 54 | > * { 55 | width: 100%; 56 | } 57 | } 58 | 59 | &.stacked { 60 | width: 100%; 61 | } 62 | } 63 | 64 | @include breakpoint('<=xsmall') { 65 | &:not(.fixed) { 66 | @include vendor('flex-direction', 'column'); 67 | margin-left: 0; 68 | width: 100% !important; 69 | 70 | li { 71 | @include vendor('flex-grow', '1'); 72 | @include vendor('flex-shrink', '1'); 73 | padding: (_size(element-margin) * 0.5) 0 0 0; 74 | text-align: center; 75 | width: 100%; 76 | 77 | > * { 78 | width: 100%; 79 | } 80 | 81 | &:first-child { 82 | padding-top: 0; 83 | } 84 | 85 | input[type="submit"], 86 | input[type="reset"], 87 | input[type="button"], 88 | button, 89 | .button { 90 | width: 100%; 91 | 92 | &.icon { 93 | &:before { 94 | margin-left: -0.5em; 95 | } 96 | } 97 | } 98 | } 99 | } 100 | } 101 | } -------------------------------------------------------------------------------- /assets/sass/components/_box.scss: -------------------------------------------------------------------------------- 1 | /// 2 | /// Dimension by HTML5 UP 3 | /// html5up.net | @ajlkn 4 | /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) 5 | /// 6 | 7 | /* Box */ 8 | 9 | .box { 10 | border-radius: _size(border-radius); 11 | border: solid _size(border-width) _palette(border); 12 | margin-bottom: _size(element-margin); 13 | padding: 1.5em; 14 | 15 | > :last-child, 16 | > :last-child > :last-child, 17 | > :last-child > :last-child > :last-child { 18 | margin-bottom: 0; 19 | } 20 | 21 | &.alt { 22 | border: 0; 23 | border-radius: 0; 24 | padding: 0; 25 | } 26 | } -------------------------------------------------------------------------------- /assets/sass/components/_button.scss: -------------------------------------------------------------------------------- 1 | /// 2 | /// Dimension by HTML5 UP 3 | /// html5up.net | @ajlkn 4 | /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) 5 | /// 6 | 7 | /* Button */ 8 | 9 | input[type="submit"], 10 | input[type="reset"], 11 | input[type="button"], 12 | button, 13 | .button { 14 | @include vendor('appearance', 'none'); 15 | @include vendor('transition', 'background-color #{_duration(transition)} ease-in-out, color #{_duration(transition)} ease-in-out'); 16 | background-color: transparent; 17 | border-radius: _size(border-radius); 18 | border: 0; 19 | box-shadow: inset 0 0 0 _size(border-width) _palette(border); 20 | color: _palette(fg-bold) !important; 21 | cursor: pointer; 22 | display: inline-block; 23 | font-size: 0.8rem; 24 | font-weight: _font(weight); 25 | height: _size(element-height); 26 | letter-spacing: _font(letter-spacing); 27 | line-height: _size(element-height); 28 | outline: 0; 29 | padding: 0 1.25rem 0 (1.25rem + (_font(letter-spacing) * 0.5)); 30 | text-align: center; 31 | text-decoration: none; 32 | text-transform: uppercase; 33 | white-space: nowrap; 34 | 35 | &:hover { 36 | background-color: _palette(border-bg); 37 | } 38 | 39 | &:active { 40 | background-color: _palette(border-bg-alt); 41 | } 42 | 43 | &.icon { 44 | &:before { 45 | margin-right: 0.5em; 46 | } 47 | } 48 | 49 | &.fit { 50 | width: 100%; 51 | } 52 | 53 | &.small { 54 | font-size: 0.6rem; 55 | height: (_size(element-height) * 0.75); 56 | line-height: (_size(element-height) * 0.75); 57 | } 58 | 59 | &.primary { 60 | background-color: _palette(fg-bold); 61 | color: _palette(bg) !important; 62 | font-weight: _font(weight-bold); 63 | 64 | &:hover { 65 | } 66 | 67 | &:active { 68 | } 69 | } 70 | 71 | &.disabled, 72 | &:disabled { 73 | @include vendor('pointer-events', 'none'); 74 | cursor: default; 75 | opacity: 0.25; 76 | } 77 | } 78 | 79 | input[type="submit"], 80 | input[type="reset"], 81 | input[type="button"], 82 | button { 83 | line-height: calc(#{_size(element-height)} - 2px); 84 | } -------------------------------------------------------------------------------- /assets/sass/components/_form.scss: -------------------------------------------------------------------------------- 1 | /// 2 | /// Dimension by HTML5 UP 3 | /// html5up.net | @ajlkn 4 | /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) 5 | /// 6 | 7 | /* Form */ 8 | 9 | form { 10 | margin: 0 0 _size(element-margin) 0; 11 | 12 | > :last-child { 13 | margin-bottom: 0; 14 | } 15 | 16 | > .fields { 17 | $gutter: (_size(element-margin) * 0.75); 18 | 19 | @include vendor('display', 'flex'); 20 | @include vendor('flex-wrap', 'wrap'); 21 | width: calc(100% + #{$gutter * 2}); 22 | margin: ($gutter * -1) 0 _size(element-margin) ($gutter * -1); 23 | 24 | > .field { 25 | @include vendor('flex-grow', '0'); 26 | @include vendor('flex-shrink', '0'); 27 | padding: $gutter 0 0 $gutter; 28 | width: calc(100% - #{$gutter * 1}); 29 | 30 | &.half { 31 | width: calc(50% - #{$gutter * 0.5}); 32 | } 33 | 34 | &.third { 35 | width: calc(#{100% / 3} - #{$gutter * (1 / 3)}); 36 | } 37 | 38 | &.quarter { 39 | width: calc(25% - #{$gutter * 0.25}); 40 | } 41 | } 42 | } 43 | 44 | @include breakpoint('<=xsmall') { 45 | > .fields { 46 | $gutter: (_size(element-margin) * 0.75); 47 | 48 | width: calc(100% + #{$gutter * 2}); 49 | margin: ($gutter * -1) 0 _size(element-margin) ($gutter * -1); 50 | 51 | > .field { 52 | padding: $gutter 0 0 $gutter; 53 | width: calc(100% - #{$gutter * 1}); 54 | 55 | &.half { 56 | width: calc(100% - #{$gutter * 1}); 57 | } 58 | 59 | &.third { 60 | width: calc(100% - #{$gutter * 1}); 61 | } 62 | 63 | &.quarter { 64 | width: calc(100% - #{$gutter * 1}); 65 | } 66 | } 67 | } 68 | } 69 | } 70 | 71 | label { 72 | color: _palette(fg-bold); 73 | display: block; 74 | font-size: 0.8rem; 75 | font-weight: _font(weight); 76 | letter-spacing: _font(letter-spacing); 77 | line-height: 1.5; 78 | margin: 0 0 (_size(element-margin) * 0.5) 0; 79 | text-transform: uppercase; 80 | } 81 | 82 | input[type="text"], 83 | input[type="password"], 84 | input[type="email"], 85 | input[type="tel"], 86 | select, 87 | textarea { 88 | @include vendor('appearance', 'none'); 89 | @include vendor('transition', ( 90 | 'border-color #{_duration(transition)} ease-in-out', 91 | 'box-shadow #{_duration(transition)} ease-in-out', 92 | 'background-color #{_duration(transition)} ease-in-out' 93 | )); 94 | background-color: transparent; 95 | border-radius: _size(border-radius); 96 | border: solid _size(border-width) _palette(border); 97 | color: inherit; 98 | display: block; 99 | outline: 0; 100 | padding: 0 1rem; 101 | text-decoration: none; 102 | width: 100%; 103 | 104 | &:invalid { 105 | box-shadow: none; 106 | } 107 | 108 | &:focus { 109 | background: _palette(border-bg); 110 | border-color: _palette(fg-bold); 111 | box-shadow: 0 0 0 _size(border-width) _palette(fg-bold); 112 | } 113 | } 114 | 115 | select { 116 | background-image: svg-url(""); 117 | background-size: 1.25rem; 118 | background-repeat: no-repeat; 119 | background-position: calc(100% - 1rem) center; 120 | height: _size(element-height); 121 | padding-right: _size(element-height); 122 | text-overflow: ellipsis; 123 | 124 | option { 125 | color: _palette(fg); 126 | background: _palette(bg); 127 | } 128 | 129 | &:focus { 130 | &::-ms-value { 131 | background-color: transparent; 132 | } 133 | } 134 | 135 | &::-ms-expand { 136 | display: none; 137 | } 138 | } 139 | 140 | input[type="text"], 141 | input[type="password"], 142 | input[type="email"], 143 | select { 144 | height: _size(element-height); 145 | } 146 | 147 | textarea { 148 | padding: 0.75rem 1rem; 149 | } 150 | 151 | input[type="checkbox"], 152 | input[type="radio"], { 153 | @include vendor('appearance', 'none'); 154 | display: block; 155 | float: left; 156 | margin-right: -2rem; 157 | opacity: 0; 158 | width: 1rem; 159 | z-index: -1; 160 | 161 | & + label { 162 | @include icon(false, solid); 163 | @include vendor('user-select', 'none'); 164 | color: _palette(fg); 165 | cursor: pointer; 166 | display: inline-block; 167 | font-size: 0.8rem; 168 | font-weight: _font(weight); 169 | margin: 0 0 (_size(element-margin) * 0.25) 0; 170 | padding-left: (_size(element-height) * 0.6) + 1rem; 171 | padding-right: 0.75rem; 172 | position: relative; 173 | 174 | &:before { 175 | @include vendor('transition', ( 176 | 'border-color #{_duration(transition)} ease-in-out', 177 | 'box-shadow #{_duration(transition)} ease-in-out', 178 | 'background-color #{_duration(transition)} ease-in-out' 179 | )); 180 | border-radius: _size(border-radius); 181 | border: solid _size(border-width) _palette(border); 182 | content: ''; 183 | display: inline-block; 184 | height: (_size(element-height) * 0.6); 185 | left: 0; 186 | line-height: (_size(element-height) * 0.6); 187 | //line-height: calc(#{_size(element-height) * 0.6} + 0em); 188 | position: absolute; 189 | text-align: center; 190 | top: -0.15rem; 191 | width: (_size(element-height) * 0.6); 192 | } 193 | } 194 | 195 | &:checked + label { 196 | &:before { 197 | background: _palette(fg-bold) !important; 198 | border-color: _palette(fg-bold) !important; 199 | color: _palette(bg); 200 | content: '\f00c'; 201 | } 202 | } 203 | 204 | &:focus + label { 205 | &:before { 206 | background: _palette(border-bg); 207 | border-color: _palette(fg-bold); 208 | box-shadow: 0 0 0 _size(border-width) _palette(fg-bold); 209 | } 210 | } 211 | } 212 | 213 | input[type="checkbox"] { 214 | & + label { 215 | &:before { 216 | border-radius: _size(border-radius); 217 | } 218 | } 219 | } 220 | 221 | input[type="radio"] { 222 | & + label { 223 | &:before { 224 | border-radius: 100%; 225 | } 226 | } 227 | } 228 | 229 | ::-webkit-input-placeholder { 230 | color: _palette(fg-light) !important; 231 | opacity: 1.0; 232 | } 233 | 234 | :-moz-placeholder { 235 | color: _palette(fg-light) !important; 236 | opacity: 1.0; 237 | } 238 | 239 | ::-moz-placeholder { 240 | color: _palette(fg-light) !important; 241 | opacity: 1.0; 242 | } 243 | 244 | :-ms-input-placeholder { 245 | color: _palette(fg-light) !important; 246 | opacity: 1.0; 247 | } 248 | 249 | .formerize-placeholder { 250 | color: _palette(fg-light) !important; 251 | opacity: 1.0; 252 | } -------------------------------------------------------------------------------- /assets/sass/components/_icon.scss: -------------------------------------------------------------------------------- 1 | /// 2 | /// Dimension by HTML5 UP 3 | /// html5up.net | @ajlkn 4 | /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) 5 | /// 6 | 7 | /* Icon */ 8 | 9 | .icon { 10 | @include icon; 11 | border-bottom: none; 12 | position: relative; 13 | 14 | > .label { 15 | display: none; 16 | } 17 | 18 | &:before { 19 | line-height: inherit; 20 | } 21 | 22 | &.solid { 23 | &:before { 24 | font-weight: 900; 25 | } 26 | } 27 | 28 | &.brands { 29 | &:before { 30 | font-family: 'Font Awesome 5 Brands'; 31 | } 32 | } 33 | } -------------------------------------------------------------------------------- /assets/sass/components/_icons.scss: -------------------------------------------------------------------------------- 1 | /// 2 | /// Dimension by HTML5 UP 3 | /// html5up.net | @ajlkn 4 | /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) 5 | /// 6 | 7 | /* Icons */ 8 | 9 | ul.icons { 10 | cursor: default; 11 | list-style: none; 12 | padding-left: 0; 13 | 14 | li { 15 | display: inline-block; 16 | padding: 0 0.75em 0 0; 17 | 18 | &:last-child { 19 | padding-right: 0; 20 | } 21 | 22 | a { 23 | border-radius: 100%; 24 | box-shadow: inset 0 0 0 _size(border-width) _palette(border); 25 | display: inline-block; 26 | height: 2.25rem; 27 | line-height: 2.25rem; 28 | text-align: center; 29 | width: 2.25rem; 30 | 31 | &:hover { 32 | background-color: _palette(border-bg); 33 | } 34 | 35 | &:active { 36 | background-color: _palette(border-bg-alt); 37 | } 38 | } 39 | } 40 | } -------------------------------------------------------------------------------- /assets/sass/components/_image.scss: -------------------------------------------------------------------------------- 1 | /// 2 | /// Dimension by HTML5 UP 3 | /// html5up.net | @ajlkn 4 | /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) 5 | /// 6 | 7 | /* Image */ 8 | 9 | .image { 10 | border-radius: _size(border-radius); 11 | border: 0; 12 | display: inline-block; 13 | position: relative; 14 | 15 | &:before { 16 | @include vendor('pointer-events', 'none'); 17 | background-image: url('../../images/overlay.png'); 18 | background-color: _palette(bg-overlay); 19 | border-radius: _size(border-radius); 20 | content: ''; 21 | display: block; 22 | height: 100%; 23 | left: 0; 24 | opacity: 0.5; 25 | position: absolute; 26 | top: 0; 27 | width: 100%; 28 | } 29 | 30 | img { 31 | border-radius: _size(border-radius); 32 | display: block; 33 | } 34 | 35 | &.left, 36 | &.right { 37 | max-width: 40%; 38 | 39 | img { 40 | width: 100%; 41 | } 42 | } 43 | 44 | &.left { 45 | float: left; 46 | padding: 0 1.5em 1em 0; 47 | top: 0.25em; 48 | } 49 | 50 | &.right { 51 | float: right; 52 | padding: 0 0 1em 1.5em; 53 | top: 0.25em; 54 | } 55 | 56 | &.fit { 57 | display: block; 58 | margin: 0 0 _size(element-margin) 0; 59 | width: 100%; 60 | 61 | img { 62 | width: 100%; 63 | } 64 | } 65 | 66 | &.main { 67 | display: block; 68 | margin: (_size(element-margin) * 1.25) 0; 69 | width: 100%; 70 | 71 | img { 72 | width: 100%; 73 | } 74 | } 75 | 76 | @include breakpoint('<=small') { 77 | &.main { 78 | margin: (_size(element-margin) * 1) 0; 79 | } 80 | } 81 | 82 | @include breakpoint('<=xsmall') { 83 | &.main { 84 | margin: (_size(element-margin) * 0.75) 0; 85 | } 86 | } 87 | } -------------------------------------------------------------------------------- /assets/sass/components/_list.scss: -------------------------------------------------------------------------------- 1 | /// 2 | /// Dimension by HTML5 UP 3 | /// html5up.net | @ajlkn 4 | /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) 5 | /// 6 | 7 | /* List */ 8 | 9 | ol { 10 | list-style: decimal; 11 | margin: 0 0 _size(element-margin) 0; 12 | padding-left: 1.25em; 13 | 14 | li { 15 | padding-left: 0.25em; 16 | } 17 | } 18 | 19 | ul { 20 | list-style: disc; 21 | margin: 0 0 _size(element-margin) 0; 22 | padding-left: 1em; 23 | 24 | li { 25 | padding-left: 0.5em; 26 | } 27 | 28 | &.alt { 29 | list-style: none; 30 | padding-left: 0; 31 | 32 | li { 33 | border-top: solid _size(border-width) _palette(border); 34 | padding: 0.5em 0; 35 | 36 | &:first-child { 37 | border-top: 0; 38 | padding-top: 0; 39 | } 40 | } 41 | } 42 | } 43 | 44 | dl { 45 | margin: 0 0 _size(element-margin) 0; 46 | 47 | dt { 48 | display: block; 49 | font-weight: _font(weight-bold); 50 | margin: 0 0 (_size(element-margin) * 0.5) 0; 51 | } 52 | 53 | dd { 54 | margin-left: _size(element-margin); 55 | } 56 | } -------------------------------------------------------------------------------- /assets/sass/components/_table.scss: -------------------------------------------------------------------------------- 1 | /// 2 | /// Dimension by HTML5 UP 3 | /// html5up.net | @ajlkn 4 | /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) 5 | /// 6 | 7 | /* Table */ 8 | 9 | .table-wrapper { 10 | -webkit-overflow-scrolling: touch; 11 | overflow-x: auto; 12 | } 13 | 14 | table { 15 | margin: 0 0 _size(element-margin) 0; 16 | width: 100%; 17 | 18 | tbody { 19 | tr { 20 | border: solid _size(border-width) _palette(border); 21 | border-left: 0; 22 | border-right: 0; 23 | 24 | &:nth-child(2n + 1) { 25 | background-color: _palette(border-bg); 26 | } 27 | } 28 | } 29 | 30 | td { 31 | padding: 0.75em 0.75em; 32 | } 33 | 34 | th { 35 | color: _palette(fg-bold); 36 | font-size: 0.9em; 37 | font-weight: _font(weight-bold); 38 | padding: 0 0.75em 0.75em 0.75em; 39 | text-align: left; 40 | } 41 | 42 | thead { 43 | border-bottom: solid (_size(border-width) * 2) _palette(border); 44 | } 45 | 46 | tfoot { 47 | border-top: solid (_size(border-width) * 2) _palette(border); 48 | } 49 | 50 | &.alt { 51 | border-collapse: separate; 52 | 53 | tbody { 54 | tr { 55 | td { 56 | border: solid _size(border-width) _palette(border); 57 | border-left-width: 0; 58 | border-top-width: 0; 59 | 60 | &:first-child { 61 | border-left-width: _size(border-width); 62 | } 63 | } 64 | 65 | &:first-child { 66 | td { 67 | border-top-width: _size(border-width); 68 | } 69 | } 70 | } 71 | } 72 | 73 | thead { 74 | border-bottom: 0; 75 | } 76 | 77 | tfoot { 78 | border-top: 0; 79 | } 80 | } 81 | } -------------------------------------------------------------------------------- /assets/sass/layout/_bg.scss: -------------------------------------------------------------------------------- 1 | /// 2 | /// Dimension by HTML5 UP 3 | /// html5up.net | @ajlkn 4 | /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) 5 | /// 6 | 7 | /* BG */ 8 | 9 | #bg { 10 | @include vendor('transform', 'scale(1.0)'); 11 | -webkit-backface-visibility: hidden; 12 | position: fixed; 13 | top: 0; 14 | left: 0; 15 | width: 100%; 16 | height: 100vh; 17 | z-index: 1; 18 | 19 | &:before, &:after { 20 | content: ''; 21 | display: block; 22 | position: absolute; 23 | top: 0; 24 | left: 0; 25 | width: 100%; 26 | height: 100%; 27 | } 28 | 29 | &:before { 30 | @include vendor('transition', 'background-color #{_duration(bg)} ease-in-out'); 31 | @include vendor('transition-delay', '#{_duration(intro)}'); 32 | background-image: linear-gradient(to top, #{_palette(bg-overlay)}, #{_palette(bg-overlay)}), 33 | url('../../images/overlay.png'); 34 | background-size: auto, 35 | 256px 256px; 36 | background-position: center, 37 | center; 38 | background-repeat: no-repeat, 39 | repeat; 40 | z-index: 2; 41 | } 42 | 43 | &:after { 44 | @include vendor('transform', 'scale(1.125)'); 45 | @include vendor('transition', ( 46 | 'transform #{_duration(article)} ease-in-out', 47 | 'filter #{_duration(article)} ease-in-out' 48 | )); 49 | background-image: url('../../images/bg.jpg'); 50 | background-position: center; 51 | background-size: cover; 52 | background-repeat: no-repeat; 53 | z-index: 1; 54 | } 55 | 56 | body.is-article-visible & { 57 | &:after { 58 | @include vendor('transform', 'scale(1.0825)'); 59 | @include vendor('filter', 'blur(0.2rem)'); 60 | } 61 | } 62 | 63 | body.is-preload & { 64 | &:before { 65 | background-color: _palette(bg-alt); 66 | } 67 | } 68 | } -------------------------------------------------------------------------------- /assets/sass/layout/_footer.scss: -------------------------------------------------------------------------------- 1 | /// 2 | /// Dimension by HTML5 UP 3 | /// html5up.net | @ajlkn 4 | /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) 5 | /// 6 | 7 | /* Footer */ 8 | 9 | #footer { 10 | @include vendor('transition', ( 11 | 'transform #{_duration(article)} ease-in-out', 12 | 'filter #{_duration(article)} ease-in-out', 13 | 'opacity #{_duration(article)} ease-in-out', 14 | )); 15 | width: 100%; 16 | max-width: 100%; 17 | margin-top: 2rem; 18 | text-align: center; 19 | 20 | .copyright { 21 | letter-spacing: _font(letter-spacing); 22 | font-size: 0.6rem; 23 | opacity: 0.75; 24 | margin-bottom: 0; 25 | text-transform: uppercase; 26 | } 27 | 28 | body.is-article-visible & { 29 | @include vendor('transform', 'scale(0.95)'); 30 | @include vendor('filter', 'blur(0.1rem)'); 31 | opacity: 0; 32 | } 33 | 34 | body.is-preload & { 35 | opacity: 0; 36 | } 37 | } -------------------------------------------------------------------------------- /assets/sass/layout/_header.scss: -------------------------------------------------------------------------------- 1 | /// 2 | /// Dimension by HTML5 UP 3 | /// html5up.net | @ajlkn 4 | /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) 5 | /// 6 | 7 | /* Header */ 8 | 9 | #header { 10 | @include vendor('display', 'flex'); 11 | @include vendor('flex-direction', 'column'); 12 | @include vendor('align-items', 'center'); 13 | @include vendor('transition', ( 14 | 'transform #{_duration(article)} ease-in-out', 15 | 'filter #{_duration(article)} ease-in-out', 16 | 'opacity #{_duration(article)} ease-in-out', 17 | )); 18 | background-image: -moz-radial-gradient(rgba(0,0,0,0.25) 25%, rgba(0,0,0,0) 55%); 19 | background-image: -webkit-radial-gradient(rgba(0,0,0,0.25) 25%, rgba(0,0,0,0) 55%); 20 | background-image: -ms-radial-gradient(rgba(0,0,0,0.25) 25%, rgba(0,0,0,0) 55%); 21 | background-image: radial-gradient(rgba(0,0,0,0.25) 25%, rgba(0,0,0,0) 55%); 22 | max-width: 100%; 23 | text-align: center; 24 | 25 | > * { 26 | @include vendor('transition', 'opacity #{_duration(article)} ease-in-out'); 27 | position: relative; 28 | margin-top: 3.5rem; 29 | 30 | &:before { 31 | content: ''; 32 | display: block; 33 | position: absolute; 34 | top: calc(-3.5rem - 1px); 35 | left: calc(50% - #{_size(border-width) * 1}); 36 | width: _size(border-width); 37 | height: calc(3.5rem + 1px); 38 | background: _palette(border); 39 | } 40 | } 41 | 42 | > :first-child { 43 | margin-top: 0; 44 | 45 | &:before { 46 | display: none; 47 | } 48 | } 49 | 50 | .logo { 51 | width: 5.5rem; 52 | height: 5.5rem; 53 | line-height: 5.5rem; 54 | border: solid _size(border-width) _palette(border); 55 | border-radius: 100%; 56 | 57 | .icon { 58 | &:before { 59 | font-size: 2rem; 60 | } 61 | } 62 | } 63 | 64 | .content { 65 | border-style: solid; 66 | border-color: _palette(border); 67 | border-top-width: _size(border-width); 68 | border-bottom-width: _size(border-width); 69 | max-width: 100%; 70 | 71 | .inner { 72 | @include vendor('transition', ( 73 | 'max-height #{_duration(intro)} ease', 74 | 'padding #{_duration(intro)} ease', 75 | 'opacity #{_duration(article)} ease-in-out' 76 | )); 77 | @include vendor('transition-delay', '0.25s'); 78 | padding: 3rem 2rem; 79 | max-height: 40rem; 80 | overflow: hidden; 81 | 82 | > :last-child { 83 | margin-bottom: 0; 84 | } 85 | } 86 | 87 | p { 88 | text-transform: uppercase; 89 | letter-spacing: _font(letter-spacing); 90 | font-size: 0.8rem; 91 | line-height: 2; 92 | } 93 | } 94 | 95 | nav { 96 | ul { 97 | @include vendor('display', 'flex'); 98 | margin-bottom: 0; 99 | list-style: none; 100 | padding-left: 0; 101 | border: solid _size(border-width) _palette(border); 102 | border-radius: _size(border-radius); 103 | 104 | li { 105 | padding-left: 0; 106 | border-left: solid _size(border-width) _palette(border); 107 | 108 | &:first-child { 109 | border-left: 0; 110 | } 111 | 112 | a { 113 | display: block; 114 | min-width: 7.5rem; 115 | height: 2.75rem; 116 | line-height: 2.75rem; 117 | padding: 0 1.25rem 0 (1.25rem + _font(letter-spacing)); 118 | text-transform: uppercase; 119 | letter-spacing: _font(letter-spacing); 120 | font-size: 0.8rem; 121 | border-bottom: 0; 122 | 123 | &:hover { 124 | background-color: _palette(border-bg); 125 | } 126 | 127 | &:active { 128 | background-color: _palette(border-bg-alt); 129 | } 130 | } 131 | } 132 | } 133 | 134 | &.use-middle { 135 | &:after { 136 | content: ''; 137 | display: block; 138 | position: absolute; 139 | top: 0; 140 | left: calc(50% - #{_size(border-width) * 1}); 141 | width: _size(border-width); 142 | height: 100%; 143 | background: _palette(border); 144 | } 145 | 146 | ul { 147 | li { 148 | &.is-middle { 149 | border-left: 0; 150 | } 151 | } 152 | } 153 | } 154 | } 155 | 156 | body.is-article-visible & { 157 | @include vendor('transform', 'scale(0.95)'); 158 | @include vendor('filter', 'blur(0.1rem)'); 159 | opacity: 0; 160 | } 161 | 162 | body.is-preload & { 163 | > * { 164 | opacity: 0; 165 | } 166 | 167 | @include vendor('filter', 'blur(0.125rem)'); 168 | 169 | .content { 170 | .inner { 171 | max-height: 0; 172 | padding-top: 0; 173 | padding-bottom: 0; 174 | opacity: 0; 175 | } 176 | } 177 | } 178 | 179 | @include breakpoint('<=medium') { 180 | .content { 181 | p { 182 | br { 183 | display: none; 184 | } 185 | } 186 | } 187 | } 188 | 189 | @include breakpoint('<=small') { 190 | > * { 191 | margin-top: 2rem; 192 | 193 | &:before { 194 | top: calc(-2rem - 1px); 195 | height: calc(2rem + 1px); 196 | } 197 | } 198 | 199 | .logo { 200 | width: 4.75rem; 201 | height: 4.75rem; 202 | line-height: 4.75rem; 203 | 204 | .icon { 205 | &:before { 206 | font-size: 1.75rem; 207 | } 208 | } 209 | } 210 | 211 | .content { 212 | .inner { 213 | padding: 2.5rem 1rem; 214 | } 215 | 216 | p { 217 | line-height: 1.875; 218 | } 219 | } 220 | } 221 | 222 | @include breakpoint('<=xsmall') { 223 | padding: 1.5rem 0; 224 | 225 | .content { 226 | .inner { 227 | padding: 2.5rem 0; 228 | } 229 | } 230 | 231 | nav { 232 | ul { 233 | @include vendor('flex-direction', 'column'); 234 | min-width: 10rem; 235 | max-width: 100%; 236 | 237 | li { 238 | border-left: 0; 239 | border-top: solid _size(border-width) _palette(border); 240 | 241 | &:first-child { 242 | border-top: 0; 243 | } 244 | 245 | a { 246 | height: 3rem; 247 | line-height: 3rem; 248 | min-width: 0; 249 | width: 100%; 250 | } 251 | } 252 | } 253 | 254 | &.use-middle { 255 | &:after { 256 | display: none; 257 | } 258 | } 259 | } 260 | } 261 | } -------------------------------------------------------------------------------- /assets/sass/layout/_main.scss: -------------------------------------------------------------------------------- 1 | /// 2 | /// Dimension by HTML5 UP 3 | /// html5up.net | @ajlkn 4 | /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) 5 | /// 6 | 7 | /* Main */ 8 | 9 | #main { 10 | @include vendor('flex-grow', '1'); 11 | @include vendor('flex-shrink', '1'); 12 | @include vendor('display', 'flex'); 13 | @include vendor('align-items', 'center'); 14 | @include vendor('justify-content', 'center'); 15 | @include vendor('flex-direction', 'column'); 16 | position: relative; 17 | max-width: 100%; 18 | z-index: 3; 19 | 20 | article { 21 | @include vendor('transform', 'translateY(0.25rem)'); 22 | @include vendor('transition', ( 23 | 'opacity #{_duration(article)} ease-in-out', 24 | 'transform #{_duration(article)} ease-in-out' 25 | )); 26 | @include padding(2.5rem, 2.5rem, (2rem, 0, 1rem, 0)); 27 | position: relative; 28 | width: 40rem; 29 | max-width: 100%; 30 | background-color: transparentize(_palette(bg), 0.15); 31 | border-radius: _size(border-radius); 32 | opacity: 0; 33 | 34 | &.active { 35 | @include vendor('transform', 'translateY(0)'); 36 | opacity: 1; 37 | } 38 | 39 | .close { 40 | display: block; 41 | position: absolute; 42 | top: 0; 43 | right: 0; 44 | width: 4rem; 45 | height: 4rem; 46 | cursor: pointer; 47 | text-indent: 4rem; 48 | overflow: hidden; 49 | white-space: nowrap; 50 | 51 | &:before { 52 | @include vendor('transition', 'background-color #{_duration(transition)} ease-in-out'); 53 | content: ''; 54 | display: block; 55 | position: absolute; 56 | top: 0.75rem; 57 | left: 0.75rem; 58 | width: 2.5rem; 59 | height: 2.5rem; 60 | border-radius: 100%; 61 | background-position: center; 62 | background-image: svg-url(''); 63 | background-size: 20px 20px; 64 | background-repeat: no-repeat; 65 | } 66 | 67 | &:hover { 68 | &:before { 69 | background-color: _palette(border-bg); 70 | } 71 | } 72 | 73 | &:active { 74 | &:before { 75 | background-color: _palette(border-bg-alt); 76 | } 77 | } 78 | } 79 | } 80 | 81 | @include breakpoint('<=small') { 82 | article { 83 | @include padding(2rem, 2rem, (1.5rem, 0, 0.5rem, 0)); 84 | 85 | .close { 86 | &:before { 87 | top: 0.875rem; 88 | left: 0.875rem; 89 | width: 2.25rem; 90 | height: 2.25rem; 91 | background-size: 14px 14px; 92 | } 93 | } 94 | } 95 | } 96 | 97 | @include breakpoint('<=xsmall') { 98 | article { 99 | @include padding(2rem, 1.5rem, (1rem, 0, 0.5rem, 0)); 100 | } 101 | } 102 | } -------------------------------------------------------------------------------- /assets/sass/layout/_wrapper.scss: -------------------------------------------------------------------------------- 1 | /// 2 | /// Dimension by HTML5 UP 3 | /// html5up.net | @ajlkn 4 | /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) 5 | /// 6 | 7 | /* Wrapper */ 8 | 9 | #wrapper { 10 | @include vendor('display', 'flex'); 11 | @include vendor('flex-direction', 'column'); 12 | @include vendor('align-items', 'center'); 13 | @include vendor('justify-content', 'space-between'); 14 | position: relative; 15 | min-height: 100vh; 16 | width: 100%; 17 | padding: 4rem 2rem; 18 | z-index: 3; 19 | 20 | &:before { 21 | content: ''; 22 | display: block; 23 | } 24 | 25 | @include breakpoint('<=xlarge') { 26 | padding: 3rem 2rem; 27 | } 28 | 29 | @include breakpoint('<=small') { 30 | padding: 2rem 1rem; 31 | } 32 | 33 | @include breakpoint('<=xsmall') { 34 | padding: 1rem; 35 | } 36 | } -------------------------------------------------------------------------------- /assets/sass/libs/_breakpoints.scss: -------------------------------------------------------------------------------- 1 | // breakpoints.scss v1.0 | @ajlkn | MIT licensed */ 2 | 3 | // Vars. 4 | 5 | /// Breakpoints. 6 | /// @var {list} 7 | $breakpoints: () !global; 8 | 9 | // Mixins. 10 | 11 | /// Sets breakpoints. 12 | /// @param {map} $x Breakpoints. 13 | @mixin breakpoints($x: ()) { 14 | $breakpoints: $x !global; 15 | } 16 | 17 | /// Wraps @content in a @media block targeting a specific orientation. 18 | /// @param {string} $orientation Orientation. 19 | @mixin orientation($orientation) { 20 | @media screen and (orientation: #{$orientation}) { 21 | @content; 22 | } 23 | } 24 | 25 | /// Wraps @content in a @media block using a given query. 26 | /// @param {string} $query Query. 27 | @mixin breakpoint($query: null) { 28 | 29 | $breakpoint: null; 30 | $op: null; 31 | $media: null; 32 | 33 | // Determine operator, breakpoint. 34 | 35 | // Greater than or equal. 36 | @if (str-slice($query, 0, 2) == '>=') { 37 | 38 | $op: 'gte'; 39 | $breakpoint: str-slice($query, 3); 40 | 41 | } 42 | 43 | // Less than or equal. 44 | @elseif (str-slice($query, 0, 2) == '<=') { 45 | 46 | $op: 'lte'; 47 | $breakpoint: str-slice($query, 3); 48 | 49 | } 50 | 51 | // Greater than. 52 | @elseif (str-slice($query, 0, 1) == '>') { 53 | 54 | $op: 'gt'; 55 | $breakpoint: str-slice($query, 2); 56 | 57 | } 58 | 59 | // Less than. 60 | @elseif (str-slice($query, 0, 1) == '<') { 61 | 62 | $op: 'lt'; 63 | $breakpoint: str-slice($query, 2); 64 | 65 | } 66 | 67 | // Not. 68 | @elseif (str-slice($query, 0, 1) == '!') { 69 | 70 | $op: 'not'; 71 | $breakpoint: str-slice($query, 2); 72 | 73 | } 74 | 75 | // Equal. 76 | @else { 77 | 78 | $op: 'eq'; 79 | $breakpoint: $query; 80 | 81 | } 82 | 83 | // Build media. 84 | @if ($breakpoint and map-has-key($breakpoints, $breakpoint)) { 85 | 86 | $a: map-get($breakpoints, $breakpoint); 87 | 88 | // Range. 89 | @if (type-of($a) == 'list') { 90 | 91 | $x: nth($a, 1); 92 | $y: nth($a, 2); 93 | 94 | // Max only. 95 | @if ($x == null) { 96 | 97 | // Greater than or equal (>= 0 / anything) 98 | @if ($op == 'gte') { 99 | $media: 'screen'; 100 | } 101 | 102 | // Less than or equal (<= y) 103 | @elseif ($op == 'lte') { 104 | $media: 'screen and (max-width: ' + $y + ')'; 105 | } 106 | 107 | // Greater than (> y) 108 | @elseif ($op == 'gt') { 109 | $media: 'screen and (min-width: ' + ($y + 1) + ')'; 110 | } 111 | 112 | // Less than (< 0 / invalid) 113 | @elseif ($op == 'lt') { 114 | $media: 'screen and (max-width: -1px)'; 115 | } 116 | 117 | // Not (> y) 118 | @elseif ($op == 'not') { 119 | $media: 'screen and (min-width: ' + ($y + 1) + ')'; 120 | } 121 | 122 | // Equal (<= y) 123 | @else { 124 | $media: 'screen and (max-width: ' + $y + ')'; 125 | } 126 | 127 | } 128 | 129 | // Min only. 130 | @else if ($y == null) { 131 | 132 | // Greater than or equal (>= x) 133 | @if ($op == 'gte') { 134 | $media: 'screen and (min-width: ' + $x + ')'; 135 | } 136 | 137 | // Less than or equal (<= inf / anything) 138 | @elseif ($op == 'lte') { 139 | $media: 'screen'; 140 | } 141 | 142 | // Greater than (> inf / invalid) 143 | @elseif ($op == 'gt') { 144 | $media: 'screen and (max-width: -1px)'; 145 | } 146 | 147 | // Less than (< x) 148 | @elseif ($op == 'lt') { 149 | $media: 'screen and (max-width: ' + ($x - 1) + ')'; 150 | } 151 | 152 | // Not (< x) 153 | @elseif ($op == 'not') { 154 | $media: 'screen and (max-width: ' + ($x - 1) + ')'; 155 | } 156 | 157 | // Equal (>= x) 158 | @else { 159 | $media: 'screen and (min-width: ' + $x + ')'; 160 | } 161 | 162 | } 163 | 164 | // Min and max. 165 | @else { 166 | 167 | // Greater than or equal (>= x) 168 | @if ($op == 'gte') { 169 | $media: 'screen and (min-width: ' + $x + ')'; 170 | } 171 | 172 | // Less than or equal (<= y) 173 | @elseif ($op == 'lte') { 174 | $media: 'screen and (max-width: ' + $y + ')'; 175 | } 176 | 177 | // Greater than (> y) 178 | @elseif ($op == 'gt') { 179 | $media: 'screen and (min-width: ' + ($y + 1) + ')'; 180 | } 181 | 182 | // Less than (< x) 183 | @elseif ($op == 'lt') { 184 | $media: 'screen and (max-width: ' + ($x - 1) + ')'; 185 | } 186 | 187 | // Not (< x and > y) 188 | @elseif ($op == 'not') { 189 | $media: 'screen and (max-width: ' + ($x - 1) + '), screen and (min-width: ' + ($y + 1) + ')'; 190 | } 191 | 192 | // Equal (>= x and <= y) 193 | @else { 194 | $media: 'screen and (min-width: ' + $x + ') and (max-width: ' + $y + ')'; 195 | } 196 | 197 | } 198 | 199 | } 200 | 201 | // String. 202 | @else { 203 | 204 | // Missing a media type? Prefix with "screen". 205 | @if (str-slice($a, 0, 1) == '(') { 206 | $media: 'screen and ' + $a; 207 | } 208 | 209 | // Otherwise, use as-is. 210 | @else { 211 | $media: $a; 212 | } 213 | 214 | } 215 | 216 | } 217 | 218 | // Output. 219 | @media #{$media} { 220 | @content; 221 | } 222 | 223 | } -------------------------------------------------------------------------------- /assets/sass/libs/_functions.scss: -------------------------------------------------------------------------------- 1 | /// Removes a specific item from a list. 2 | /// @author Hugo Giraudel 3 | /// @param {list} $list List. 4 | /// @param {integer} $index Index. 5 | /// @return {list} Updated list. 6 | @function remove-nth($list, $index) { 7 | 8 | $result: null; 9 | 10 | @if type-of($index) != number { 11 | @warn "$index: #{quote($index)} is not a number for `remove-nth`."; 12 | } 13 | @else if $index == 0 { 14 | @warn "List index 0 must be a non-zero integer for `remove-nth`."; 15 | } 16 | @else if abs($index) > length($list) { 17 | @warn "List index is #{$index} but list is only #{length($list)} item long for `remove-nth`."; 18 | } 19 | @else { 20 | 21 | $result: (); 22 | $index: if($index < 0, length($list) + $index + 1, $index); 23 | 24 | @for $i from 1 through length($list) { 25 | 26 | @if $i != $index { 27 | $result: append($result, nth($list, $i)); 28 | } 29 | 30 | } 31 | 32 | } 33 | 34 | @return $result; 35 | 36 | } 37 | 38 | /// Gets a value from a map. 39 | /// @author Hugo Giraudel 40 | /// @param {map} $map Map. 41 | /// @param {string} $keys Key(s). 42 | /// @return {string} Value. 43 | @function val($map, $keys...) { 44 | 45 | @if nth($keys, 1) == null { 46 | $keys: remove-nth($keys, 1); 47 | } 48 | 49 | @each $key in $keys { 50 | $map: map-get($map, $key); 51 | } 52 | 53 | @return $map; 54 | 55 | } 56 | 57 | /// Gets a duration value. 58 | /// @param {string} $keys Key(s). 59 | /// @return {string} Value. 60 | @function _duration($keys...) { 61 | @return val($duration, $keys...); 62 | } 63 | 64 | /// Gets a font value. 65 | /// @param {string} $keys Key(s). 66 | /// @return {string} Value. 67 | @function _font($keys...) { 68 | @return val($font, $keys...); 69 | } 70 | 71 | /// Gets a misc value. 72 | /// @param {string} $keys Key(s). 73 | /// @return {string} Value. 74 | @function _misc($keys...) { 75 | @return val($misc, $keys...); 76 | } 77 | 78 | /// Gets a palette value. 79 | /// @param {string} $keys Key(s). 80 | /// @return {string} Value. 81 | @function _palette($keys...) { 82 | @return val($palette, $keys...); 83 | } 84 | 85 | /// Gets a size value. 86 | /// @param {string} $keys Key(s). 87 | /// @return {string} Value. 88 | @function _size($keys...) { 89 | @return val($size, $keys...); 90 | } -------------------------------------------------------------------------------- /assets/sass/libs/_mixins.scss: -------------------------------------------------------------------------------- 1 | /// Makes an element's :before pseudoelement a FontAwesome icon. 2 | /// @param {string} $content Optional content value to use. 3 | /// @param {string} $category Optional category to use. 4 | /// @param {string} $where Optional pseudoelement to target (before or after). 5 | @mixin icon($content: false, $category: regular, $where: before) { 6 | 7 | text-decoration: none; 8 | 9 | &:#{$where} { 10 | 11 | @if $content { 12 | content: $content; 13 | } 14 | 15 | -moz-osx-font-smoothing: grayscale; 16 | -webkit-font-smoothing: antialiased; 17 | display: inline-block; 18 | font-style: normal; 19 | font-variant: normal; 20 | text-rendering: auto; 21 | line-height: 1; 22 | text-transform: none !important; 23 | 24 | @if ($category == brands) { 25 | font-family: 'Font Awesome 5 Brands'; 26 | } 27 | @elseif ($category == solid) { 28 | font-family: 'Font Awesome 5 Free'; 29 | font-weight: 900; 30 | } 31 | @else { 32 | font-family: 'Font Awesome 5 Free'; 33 | font-weight: 400; 34 | } 35 | 36 | } 37 | 38 | } 39 | 40 | /// Applies padding to an element, taking the current element-margin value into account. 41 | /// @param {mixed} $tb Top/bottom padding. 42 | /// @param {mixed} $lr Left/right padding. 43 | /// @param {list} $pad Optional extra padding (in the following order top, right, bottom, left) 44 | /// @param {bool} $important If true, adds !important. 45 | @mixin padding($tb, $lr, $pad: (0,0,0,0), $important: null) { 46 | 47 | @if $important { 48 | $important: '!important'; 49 | } 50 | 51 | $x: 0.1em; 52 | 53 | @if unit(_size(element-margin)) == 'rem' { 54 | $x: 0.1rem; 55 | } 56 | 57 | padding: ($tb + nth($pad,1)) ($lr + nth($pad,2)) max($x, $tb - _size(element-margin) + nth($pad,3)) ($lr + nth($pad,4)) #{$important}; 58 | 59 | } 60 | 61 | /// Encodes a SVG data URL so IE doesn't choke (via codepen.io/jakob-e/pen/YXXBrp). 62 | /// @param {string} $svg SVG data URL. 63 | /// @return {string} Encoded SVG data URL. 64 | @function svg-url($svg) { 65 | 66 | $svg: str-replace($svg, '"', '\''); 67 | $svg: str-replace($svg, '%', '%25'); 68 | $svg: str-replace($svg, '<', '%3C'); 69 | $svg: str-replace($svg, '>', '%3E'); 70 | $svg: str-replace($svg, '&', '%26'); 71 | $svg: str-replace($svg, '#', '%23'); 72 | $svg: str-replace($svg, '{', '%7B'); 73 | $svg: str-replace($svg, '}', '%7D'); 74 | $svg: str-replace($svg, ';', '%3B'); 75 | 76 | @return url("data:image/svg+xml;charset=utf8,#{$svg}"); 77 | 78 | } -------------------------------------------------------------------------------- /assets/sass/libs/_vars.scss: -------------------------------------------------------------------------------- 1 | // Misc. 2 | $misc: ( 3 | z-index-base: 10000 4 | ); 5 | 6 | // Duration. 7 | $duration: ( 8 | transition: 0.2s, 9 | bg: 2.5s, 10 | intro: 0.75s, 11 | article: 0.325s 12 | ); 13 | 14 | // Size. 15 | $size: ( 16 | border-radius: 4px, 17 | border-width: 1px, 18 | element-height: 2.75rem, 19 | element-margin: 2rem 20 | ); 21 | 22 | // Font. 23 | $font: ( 24 | family: ('Source Sans Pro', sans-serif), 25 | family-fixed: ('Courier New', monospace), 26 | weight: 300, 27 | weight-bold: 600, 28 | letter-spacing: 0.2rem, 29 | letter-spacing-heading: 0.5rem 30 | ); 31 | 32 | // Palette. 33 | $palette: ( 34 | bg: #1b1f22, 35 | bg-alt: #000000, 36 | bg-overlay: rgba(19,21,25,0.5), 37 | fg: #ffffff, 38 | fg-bold: #ffffff, 39 | fg-light: rgba(255,255,255,0.5), 40 | border: #ffffff, 41 | border-bg: rgba(255,255,255,0.075), 42 | border-bg-alt: rgba(255,255,255,0.175) 43 | ); -------------------------------------------------------------------------------- /assets/sass/libs/_vendor.scss: -------------------------------------------------------------------------------- 1 | // vendor.scss v1.0 | @ajlkn | MIT licensed */ 2 | 3 | // Vars. 4 | 5 | /// Vendor prefixes. 6 | /// @var {list} 7 | $vendor-prefixes: ( 8 | '-moz-', 9 | '-webkit-', 10 | '-ms-', 11 | '' 12 | ); 13 | 14 | /// Properties that should be vendorized. 15 | /// Data via caniuse.com, github.com/postcss/autoprefixer, and developer.mozilla.org 16 | /// @var {list} 17 | $vendor-properties: ( 18 | 19 | // Animation. 20 | 'animation', 21 | 'animation-delay', 22 | 'animation-direction', 23 | 'animation-duration', 24 | 'animation-fill-mode', 25 | 'animation-iteration-count', 26 | 'animation-name', 27 | 'animation-play-state', 28 | 'animation-timing-function', 29 | 30 | // Appearance. 31 | 'appearance', 32 | 33 | // Backdrop filter. 34 | 'backdrop-filter', 35 | 36 | // Background image options. 37 | 'background-clip', 38 | 'background-origin', 39 | 'background-size', 40 | 41 | // Box sizing. 42 | 'box-sizing', 43 | 44 | // Clip path. 45 | 'clip-path', 46 | 47 | // Filter effects. 48 | 'filter', 49 | 50 | // Flexbox. 51 | 'align-content', 52 | 'align-items', 53 | 'align-self', 54 | 'flex', 55 | 'flex-basis', 56 | 'flex-direction', 57 | 'flex-flow', 58 | 'flex-grow', 59 | 'flex-shrink', 60 | 'flex-wrap', 61 | 'justify-content', 62 | 'order', 63 | 64 | // Font feature. 65 | 'font-feature-settings', 66 | 'font-language-override', 67 | 'font-variant-ligatures', 68 | 69 | // Font kerning. 70 | 'font-kerning', 71 | 72 | // Fragmented borders and backgrounds. 73 | 'box-decoration-break', 74 | 75 | // Grid layout. 76 | 'grid-column', 77 | 'grid-column-align', 78 | 'grid-column-end', 79 | 'grid-column-start', 80 | 'grid-row', 81 | 'grid-row-align', 82 | 'grid-row-end', 83 | 'grid-row-start', 84 | 'grid-template-columns', 85 | 'grid-template-rows', 86 | 87 | // Hyphens. 88 | 'hyphens', 89 | 'word-break', 90 | 91 | // Masks. 92 | 'mask', 93 | 'mask-border', 94 | 'mask-border-outset', 95 | 'mask-border-repeat', 96 | 'mask-border-slice', 97 | 'mask-border-source', 98 | 'mask-border-width', 99 | 'mask-clip', 100 | 'mask-composite', 101 | 'mask-image', 102 | 'mask-origin', 103 | 'mask-position', 104 | 'mask-repeat', 105 | 'mask-size', 106 | 107 | // Multicolumn. 108 | 'break-after', 109 | 'break-before', 110 | 'break-inside', 111 | 'column-count', 112 | 'column-fill', 113 | 'column-gap', 114 | 'column-rule', 115 | 'column-rule-color', 116 | 'column-rule-style', 117 | 'column-rule-width', 118 | 'column-span', 119 | 'column-width', 120 | 'columns', 121 | 122 | // Object fit. 123 | 'object-fit', 124 | 'object-position', 125 | 126 | // Regions. 127 | 'flow-from', 128 | 'flow-into', 129 | 'region-fragment', 130 | 131 | // Scroll snap points. 132 | 'scroll-snap-coordinate', 133 | 'scroll-snap-destination', 134 | 'scroll-snap-points-x', 135 | 'scroll-snap-points-y', 136 | 'scroll-snap-type', 137 | 138 | // Shapes. 139 | 'shape-image-threshold', 140 | 'shape-margin', 141 | 'shape-outside', 142 | 143 | // Tab size. 144 | 'tab-size', 145 | 146 | // Text align last. 147 | 'text-align-last', 148 | 149 | // Text decoration. 150 | 'text-decoration-color', 151 | 'text-decoration-line', 152 | 'text-decoration-skip', 153 | 'text-decoration-style', 154 | 155 | // Text emphasis. 156 | 'text-emphasis', 157 | 'text-emphasis-color', 158 | 'text-emphasis-position', 159 | 'text-emphasis-style', 160 | 161 | // Text size adjust. 162 | 'text-size-adjust', 163 | 164 | // Text spacing. 165 | 'text-spacing', 166 | 167 | // Transform. 168 | 'transform', 169 | 'transform-origin', 170 | 171 | // Transform 3D. 172 | 'backface-visibility', 173 | 'perspective', 174 | 'perspective-origin', 175 | 'transform-style', 176 | 177 | // Transition. 178 | 'transition', 179 | 'transition-delay', 180 | 'transition-duration', 181 | 'transition-property', 182 | 'transition-timing-function', 183 | 184 | // Unicode bidi. 185 | 'unicode-bidi', 186 | 187 | // User select. 188 | 'user-select', 189 | 190 | // Writing mode. 191 | 'writing-mode', 192 | 193 | ); 194 | 195 | /// Values that should be vendorized. 196 | /// Data via caniuse.com, github.com/postcss/autoprefixer, and developer.mozilla.org 197 | /// @var {list} 198 | $vendor-values: ( 199 | 200 | // Cross fade. 201 | 'cross-fade', 202 | 203 | // Element function. 204 | 'element', 205 | 206 | // Filter function. 207 | 'filter', 208 | 209 | // Flexbox. 210 | 'flex', 211 | 'inline-flex', 212 | 213 | // Grab cursors. 214 | 'grab', 215 | 'grabbing', 216 | 217 | // Gradients. 218 | 'linear-gradient', 219 | 'repeating-linear-gradient', 220 | 'radial-gradient', 221 | 'repeating-radial-gradient', 222 | 223 | // Grid layout. 224 | 'grid', 225 | 'inline-grid', 226 | 227 | // Image set. 228 | 'image-set', 229 | 230 | // Intrinsic width. 231 | 'max-content', 232 | 'min-content', 233 | 'fit-content', 234 | 'fill', 235 | 'fill-available', 236 | 'stretch', 237 | 238 | // Sticky position. 239 | 'sticky', 240 | 241 | // Transform. 242 | 'transform', 243 | 244 | // Zoom cursors. 245 | 'zoom-in', 246 | 'zoom-out', 247 | 248 | ); 249 | 250 | // Functions. 251 | 252 | /// Removes a specific item from a list. 253 | /// @author Hugo Giraudel 254 | /// @param {list} $list List. 255 | /// @param {integer} $index Index. 256 | /// @return {list} Updated list. 257 | @function remove-nth($list, $index) { 258 | 259 | $result: null; 260 | 261 | @if type-of($index) != number { 262 | @warn "$index: #{quote($index)} is not a number for `remove-nth`."; 263 | } 264 | @else if $index == 0 { 265 | @warn "List index 0 must be a non-zero integer for `remove-nth`."; 266 | } 267 | @else if abs($index) > length($list) { 268 | @warn "List index is #{$index} but list is only #{length($list)} item long for `remove-nth`."; 269 | } 270 | @else { 271 | 272 | $result: (); 273 | $index: if($index < 0, length($list) + $index + 1, $index); 274 | 275 | @for $i from 1 through length($list) { 276 | 277 | @if $i != $index { 278 | $result: append($result, nth($list, $i)); 279 | } 280 | 281 | } 282 | 283 | } 284 | 285 | @return $result; 286 | 287 | } 288 | 289 | /// Replaces a substring within another string. 290 | /// @author Hugo Giraudel 291 | /// @param {string} $string String. 292 | /// @param {string} $search Substring. 293 | /// @param {string} $replace Replacement. 294 | /// @return {string} Updated string. 295 | @function str-replace($string, $search, $replace: '') { 296 | 297 | $index: str-index($string, $search); 298 | 299 | @if $index { 300 | @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace); 301 | } 302 | 303 | @return $string; 304 | 305 | } 306 | 307 | /// Replaces a substring within each string in a list. 308 | /// @param {list} $strings List of strings. 309 | /// @param {string} $search Substring. 310 | /// @param {string} $replace Replacement. 311 | /// @return {list} Updated list of strings. 312 | @function str-replace-all($strings, $search, $replace: '') { 313 | 314 | @each $string in $strings { 315 | $strings: set-nth($strings, index($strings, $string), str-replace($string, $search, $replace)); 316 | } 317 | 318 | @return $strings; 319 | 320 | } 321 | 322 | // Mixins. 323 | 324 | /// Wraps @content in vendorized keyframe blocks. 325 | /// @param {string} $name Name. 326 | @mixin keyframes($name) { 327 | 328 | @-moz-keyframes #{$name} { @content; } 329 | @-webkit-keyframes #{$name} { @content; } 330 | @-ms-keyframes #{$name} { @content; } 331 | @keyframes #{$name} { @content; } 332 | 333 | } 334 | 335 | /// Vendorizes a declaration's property and/or value(s). 336 | /// @param {string} $property Property. 337 | /// @param {mixed} $value String/list of value(s). 338 | @mixin vendor($property, $value) { 339 | 340 | // Determine if property should expand. 341 | $expandProperty: index($vendor-properties, $property); 342 | 343 | // Determine if value should expand (and if so, add '-prefix-' placeholder). 344 | $expandValue: false; 345 | 346 | @each $x in $value { 347 | @each $y in $vendor-values { 348 | @if $y == str-slice($x, 1, str-length($y)) { 349 | 350 | $value: set-nth($value, index($value, $x), '-prefix-' + $x); 351 | $expandValue: true; 352 | 353 | } 354 | } 355 | } 356 | 357 | // Expand property? 358 | @if $expandProperty { 359 | @each $vendor in $vendor-prefixes { 360 | #{$vendor}#{$property}: #{str-replace-all($value, '-prefix-', $vendor)}; 361 | } 362 | } 363 | 364 | // Expand just the value? 365 | @elseif $expandValue { 366 | @each $vendor in $vendor-prefixes { 367 | #{$property}: #{str-replace-all($value, '-prefix-', $vendor)}; 368 | } 369 | } 370 | 371 | // Neither? Treat them as a normal declaration. 372 | @else { 373 | #{$property}: #{$value}; 374 | } 375 | 376 | } -------------------------------------------------------------------------------- /assets/sass/main.scss: -------------------------------------------------------------------------------- 1 | @import 'libs/vars'; 2 | @import 'libs/functions'; 3 | @import 'libs/mixins'; 4 | @import 'libs/vendor'; 5 | @import 'libs/breakpoints'; 6 | @import 'fontawesome-all.min.css'; 7 | @import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:300italic,600italic,300,600'); 8 | 9 | /* 10 | Dimension by HTML5 UP 11 | html5up.net | @ajlkn 12 | Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) 13 | */ 14 | 15 | // Breakpoints. 16 | 17 | @include breakpoints(( 18 | xlarge: ( 1281px, 1680px ), 19 | large: ( 981px, 1280px ), 20 | medium: ( 737px, 980px ), 21 | small: ( 481px, 736px ), 22 | xsmall: ( 361px, 480px ), 23 | xxsmall: ( null, 360px ) 24 | )); 25 | 26 | // Base. 27 | 28 | @import 'base/reset'; 29 | @import 'base/page'; 30 | @import 'base/typography'; 31 | 32 | // Component. 33 | 34 | @import 'components/form'; 35 | @import 'components/box'; 36 | @import 'components/icon'; 37 | @import 'components/image'; 38 | @import 'components/list'; 39 | @import 'components/actions'; 40 | @import 'components/icons'; 41 | @import 'components/table'; 42 | @import 'components/button'; 43 | 44 | // Layout. 45 | 46 | @import 'layout/bg'; 47 | @import 'layout/wrapper'; 48 | @import 'layout/header'; 49 | @import 'layout/main'; 50 | @import 'layout/footer'; -------------------------------------------------------------------------------- /assets/sass/noscript.scss: -------------------------------------------------------------------------------- 1 | @import 'libs/vars'; 2 | @import 'libs/functions'; 3 | @import 'libs/mixins'; 4 | @import 'libs/vendor'; 5 | @import 'libs/breakpoints'; 6 | 7 | /* 8 | Dimension by HTML5 UP 9 | html5up.net | @ajlkn 10 | Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) 11 | */ 12 | 13 | /* BG */ 14 | 15 | #bg { 16 | body.is-preload & { 17 | &:before { 18 | background-color: transparent; 19 | } 20 | } 21 | } 22 | 23 | /* Header */ 24 | 25 | #header { 26 | body.is-preload & { 27 | > * { 28 | opacity: 1; 29 | } 30 | 31 | @include vendor('filter', 'none'); 32 | 33 | .content { 34 | .inner { 35 | max-height: none; 36 | padding: 3rem 2rem; 37 | opacity: 1; 38 | } 39 | } 40 | } 41 | } 42 | 43 | /* Main */ 44 | 45 | #main { 46 | article { 47 | opacity: 1; 48 | margin: (_size(element-margin) * 2) 0 0 0; 49 | } 50 | } -------------------------------------------------------------------------------- /assets/webfonts/fa-brands-400.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/Neelify/b5d44778380aeaf74c9bd23f440e06532025670b/assets/webfonts/fa-brands-400.eot -------------------------------------------------------------------------------- /assets/webfonts/fa-brands-400.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/Neelify/b5d44778380aeaf74c9bd23f440e06532025670b/assets/webfonts/fa-brands-400.ttf -------------------------------------------------------------------------------- /assets/webfonts/fa-brands-400.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/Neelify/b5d44778380aeaf74c9bd23f440e06532025670b/assets/webfonts/fa-brands-400.woff -------------------------------------------------------------------------------- /assets/webfonts/fa-brands-400.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/Neelify/b5d44778380aeaf74c9bd23f440e06532025670b/assets/webfonts/fa-brands-400.woff2 -------------------------------------------------------------------------------- /assets/webfonts/fa-regular-400.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/Neelify/b5d44778380aeaf74c9bd23f440e06532025670b/assets/webfonts/fa-regular-400.eot -------------------------------------------------------------------------------- /assets/webfonts/fa-regular-400.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/Neelify/b5d44778380aeaf74c9bd23f440e06532025670b/assets/webfonts/fa-regular-400.ttf -------------------------------------------------------------------------------- /assets/webfonts/fa-regular-400.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/Neelify/b5d44778380aeaf74c9bd23f440e06532025670b/assets/webfonts/fa-regular-400.woff -------------------------------------------------------------------------------- /assets/webfonts/fa-regular-400.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/Neelify/b5d44778380aeaf74c9bd23f440e06532025670b/assets/webfonts/fa-regular-400.woff2 -------------------------------------------------------------------------------- /assets/webfonts/fa-solid-900.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/Neelify/b5d44778380aeaf74c9bd23f440e06532025670b/assets/webfonts/fa-solid-900.eot -------------------------------------------------------------------------------- /assets/webfonts/fa-solid-900.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/Neelify/b5d44778380aeaf74c9bd23f440e06532025670b/assets/webfonts/fa-solid-900.ttf -------------------------------------------------------------------------------- /assets/webfonts/fa-solid-900.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/Neelify/b5d44778380aeaf74c9bd23f440e06532025670b/assets/webfonts/fa-solid-900.woff -------------------------------------------------------------------------------- /assets/webfonts/fa-solid-900.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/Neelify/b5d44778380aeaf74c9bd23f440e06532025670b/assets/webfonts/fa-solid-900.woff2 -------------------------------------------------------------------------------- /images/bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/Neelify/b5d44778380aeaf74c9bd23f440e06532025670b/images/bg.jpg -------------------------------------------------------------------------------- /images/overlay.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/Neelify/b5d44778380aeaf74c9bd23f440e06532025670b/images/overlay.png -------------------------------------------------------------------------------- /images/pic01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/Neelify/b5d44778380aeaf74c9bd23f440e06532025670b/images/pic01.jpg -------------------------------------------------------------------------------- /images/pic02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/Neelify/b5d44778380aeaf74c9bd23f440e06532025670b/images/pic02.jpg -------------------------------------------------------------------------------- /images/pic03.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/Neelify/b5d44778380aeaf74c9bd23f440e06532025670b/images/pic03.jpg -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Neelify 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |

15 | 16 | 17 | 37 | 38 | 39 |

40 | 41 | 42 |

43 |

Intro

44 |

45 |

Bonjour! I am Neel Wanelkar. I am an aspiring Mechatronics Engineer and a CS enthusiast.

46 |

Development is my passion and an unsatiable urge of knowledge and improvement haunts me to learn newer stuffs daily. I have a knack for IoT, Data Sciene and Python QT programming. I also have a significant knowledge in R. I am a diligent worker and a result driven sophomore of SRM University Chennai. As a Pune based guy, I have huge dreams to achieve and a life of experiences to conquer.

47 |

Talking about my personality, I am a fan of Christiano Ronaldo and hence football is my passion. I try to balance to my work and life with a sauve ease which you can find in very less number of people nowadays. I am really fast at learning things as well as sticking to my cultures and old values. I believe in potentiality of an individual and try to instill the same in myself too. Overall, I shall say I can be an asset to any company of you hire me for a suitable role

48 |

49 | 50 | 51 |

52 |

Work

53 |

54 |

I love developing things...

55 |

Scientific Calculator in R
Temperature convertor in R
Simple Portfolio Website
Neelify, a game app

61 |

62 | 63 | 64 |

65 |

My CV

66 |

67 |

EDUCATION :

68 | 69 |

School

70 | Indira National School, Pune, India
71 | 2015-2019 72 |

Indira National School Pune.
Completed my 10th and 12th Board exams.
Participated in interhouse sport activities.

77 |
78 |

College

79 | SRM University, Chennai
80 | Mechatronics, 2019 - 2023 81 |

Participated in programming seminars
Participated in workshops
Developed projects and tools
Represented college in sports

87 | 88 |

Skills

89 |

French
Football and Fitness
R
Python
Embedded Systems and Designs
Circuitary and Robotic Designs with Arduino

97 |

98 | 99 | 100 |

101 |

Contact

102 | 122 |

126 |

127 | 128 | 129 | 130 | 131 | 132 |

133 | 134 | 135 | 138 | 139 |

140 | 141 | 142 |

143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | --------------------------------------------------------------------------------