commit 9006b2e06a93f7228475bb498c0a0479ce49558e Author: Jay Date: Tue Mar 10 21:01:46 2026 +0000 init' diff --git a/about_me.html b/about_me.html new file mode 100644 index 0000000..1aa026c --- /dev/null +++ b/about_me.html @@ -0,0 +1,170 @@ + + + + About Me + + + + + + + + + + + + +

+ +

Havox & me

+ + +

+ +

About Me

+ I am a Computer Science graduate from the University of Nottingham, + with a degree awarded in August 2022. I joined FDM as a Java + Software Developer in June 2023, and since then I have been + enhancing my skills in various technologies and frameworks. Some of + the skills I have learnt at FDM are: creating REST APIs using the + Java Spring Framework, using postman api, JUnit and Mockito to test + them, whilst using H2, JDBC and MySQL to persist data. +

+ These skills complement my previous academic experience in areas + such as: Android Development, Distributed Systems, Game Development, + Malware Analysis, Data Visualisation, Graphics, Security, + Cryptography, Databases, Algorithms and Efficiency. +

+ I am passionate about learning new things and applying them to + real-world problems. I am looking for opportunities to further + develop my career as a software engineer and contribute to + innovative projects. +

About Havox

+ Havox is a website I have been using to host my projects and + tutorials since 2017. Back then a friend introduced me to the + concept of a VPS, using a debain box to run an nginx web server. + Several years later not much has changed (apart from the server, + domain and design - all several times). +

+ When I first started learning to code, I took inspiration from + The Coding Train and found an interest in visualising + algorithms. This was much more interesting than seeing a console + output. +

+ +

HavoxV3

+ 2023-Present +

+ Here havox morphed into more of a portfolio rather than a fun + side project. Now fully taking advantage of Scss, considering + mobile view-widths and general UI design. +

+ +

HavoxV2

+ 2019-2022 +

+ My first project using Scss! Also the first website to be + hosted on my own hardware - this allowed me to upload far more + projects. +

+ +

Havox.org

+ 2017-2019 +

+ My first website! The whole website was stored in one php + file🤣 However I did have a quote of the day feature using + python script scheduled by a cronjob using php to dynamically + display the quote. +

+ +

+ + + +

+ + + + + + + + + + + diff --git a/assets/css/fontawesome-all.min.css b/assets/css/fontawesome-all.min.css new file mode 100644 index 0000000..03c42e3 --- /dev/null +++ b/assets/css/fontawesome-all.min.css @@ -0,0 +1,101 @@ +/*! + * Font Awesome Free 5.15.4 by @fontawesome - https://fontawesome.com + * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) + */ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +.fa,.fab,.fad,.fal,.far,.fas{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-style:normal;font-variant:normal;text-rendering:auto;line-height:1}.fa-lg{font-size:1.33333em;line-height:.75em;vertical-align:-.0667em}.fa-xs{font-size:.75em}.fa-sm{font-size:.875em}.fa-1x{font-size:1em}.fa-2x{font-size:2em}.fa-3x{font-size:3em}.fa-4x{font-size:4em}.fa-5x{font-size:5em}.fa-6x{font-size:6em}.fa-7x{font-size:7em}.fa-8x{font-size:8em}.fa-9x{font-size:9em}.fa-10x{font-size:10em}.fa-fw{text-align:center;width:1.25em}.fa-ul{list-style-type:none;margin-left:2.5em;padding-left:0}.fa-ul>li{position:relative}.fa-li{left:-2em;position:absolute;text-align:center;width:2em;line-height:inherit}.fa-border{border:.08em solid #eee;border-radius:.1em;padding:.2em .25em .15em}.fa-pull-left{float:left}.fa-pull-right{float:right}.fa.fa-pull-left,.fab.fa-pull-left,.fal.fa-pull-left,.far.fa-pull-left,.fas.fa-pull-left{margin-right:.3em}.fa.fa-pull-right,.fab.fa-pull-right,.fal.fa-pull-right,.far.fa-pull-right,.fas.fa-pull-right{margin-left:.3em}.fa-spin{-webkit-animation:fa-spin 2s linear infinite;animation:fa-spin 2s linear infinite}.fa-pulse{-webkit-animation:fa-spin 1s steps(8) infinite;animation:fa-spin 1s steps(8) infinite}@-webkit-keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.fa-rotate-90{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";-webkit-transform:rotate(90deg);transform:rotate(90deg)}.fa-rotate-180{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";-webkit-transform:rotate(180deg);transform:rotate(180deg)}.fa-rotate-270{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";-webkit-transform:rotate(270deg);transform:rotate(270deg)}.fa-flip-horizontal{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";-webkit-transform:scaleX(-1);transform:scaleX(-1)}.fa-flip-vertical{-webkit-transform:scaleY(-1);transform:scaleY(-1)}.fa-flip-both,.fa-flip-horizontal.fa-flip-vertical,.fa-flip-vertical{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)"}.fa-flip-both,.fa-flip-horizontal.fa-flip-vertical{-webkit-transform:scale(-1);transform:scale(-1)}:root .fa-flip-both,:root .fa-flip-horizontal,:root .fa-flip-vertical,:root .fa-rotate-90,:root .fa-rotate-180,:root .fa-rotate-270{-webkit-filter:none;filter:none}.fa-stack{display:inline-block;height:2em;line-height:2em;position:relative;vertical-align:middle;width:2.5em}.fa-stack-1x,.fa-stack-2x{left:0;position:absolute;text-align:center;width:100%}.fa-stack-1x{line-height:inherit}.fa-stack-2x{font-size:2em}.fa-inverse{color:#fff}.fa-500px:before{content:"\f26e"}.fa-accessible-icon:before{content:"\f368"}.fa-accusoft:before{content:"\f369"}.fa-acquisitions-incorporated:before{content:"\f6af"}.fa-ad:before{content:"\f641"}.fa-address-book:before{content:"\f2b9"}.fa-address-card:before{content:"\f2bb"}.fa-adjust:before{content:"\f042"}.fa-adn:before{content:"\f170"}.fa-adversal:before{content:"\f36a"}.fa-affiliatetheme:before{content:"\f36b"}.fa-air-freshener:before{content:"\f5d0"}.fa-airbnb:before{content:"\f834"}.fa-algolia:before{content:"\f36c"}.fa-align-center:before{content:"\f037"}.fa-align-justify:before{content:"\f039"}.fa-align-left:before{content:"\f036"}.fa-align-right:before{content:"\f038"}.fa-alipay:before{content:"\f642"}.fa-allergies:before{content:"\f461"}.fa-amazon:before{content:"\f270"}.fa-amazon-pay:before{content:"\f42c"}.fa-ambulance:before{content:"\f0f9"}.fa-american-sign-language-interpreting:before{content:"\f2a3"}.fa-amilia:before{content:"\f36d"}.fa-anchor:before{content:"\f13d"}.fa-android:before{content:"\f17b"}.fa-angellist:before{content:"\f209"}.fa-angle-double-down:before{content:"\f103"}.fa-angle-double-left:before{content:"\f100"}.fa-angle-double-right:before{content:"\f101"}.fa-angle-double-up:before{content:"\f102"}.fa-angle-down:before{content:"\f107"}.fa-angle-left:before{content:"\f104"}.fa-angle-right:before{content:"\f105"}.fa-angle-up:before{content:"\f106"}.fa-angry:before{content:"\f556"}.fa-angrycreative:before{content:"\f36e"}.fa-angular:before{content:"\f420"}.fa-ankh:before{content:"\f644"}.fa-app-store:before{content:"\f36f"}.fa-app-store-ios:before{content:"\f370"}.fa-apper:before{content:"\f371"}.fa-apple:before{content:"\f179"}.fa-apple-alt:before{content:"\f5d1"}.fa-apple-pay:before{content:"\f415"}.fa-archive:before{content:"\f187"}.fa-archway:before{content:"\f557"}.fa-arrow-alt-circle-down:before{content:"\f358"}.fa-arrow-alt-circle-left:before{content:"\f359"}.fa-arrow-alt-circle-right:before{content:"\f35a"}.fa-arrow-alt-circle-up:before{content:"\f35b"}.fa-arrow-circle-down:before{content:"\f0ab"}.fa-arrow-circle-left:before{content:"\f0a8"}.fa-arrow-circle-right:before{content:"\f0a9"}.fa-arrow-circle-up:before{content:"\f0aa"}.fa-arrow-down:before{content:"\f063"}.fa-arrow-left:before{content:"\f060"}.fa-arrow-right:before{content:"\f061"}.fa-arrow-up:before{content:"\f062"}.fa-arrows-alt:before{content:"\f0b2"}.fa-arrows-alt-h:before{content:"\f337"}.fa-arrows-alt-v:before{content:"\f338"}.fa-artstation:before{content:"\f77a"}.fa-assistive-listening-systems:before{content:"\f2a2"}.fa-asterisk:before{content:"\f069"}.fa-asymmetrik:before{content:"\f372"}.fa-at:before{content:"\f1fa"}.fa-atlas:before{content:"\f558"}.fa-atlassian:before{content:"\f77b"}.fa-atom:before{content:"\f5d2"}.fa-audible:before{content:"\f373"}.fa-audio-description:before{content:"\f29e"}.fa-autoprefixer:before{content:"\f41c"}.fa-avianex:before{content:"\f374"}.fa-aviato:before{content:"\f421"}.fa-award:before{content:"\f559"}.fa-aws:before{content:"\f375"}.fa-baby:before{content:"\f77c"}.fa-baby-carriage:before{content:"\f77d"}.fa-backspace:before{content:"\f55a"}.fa-backward:before{content:"\f04a"}.fa-bacon:before{content:"\f7e5"}.fa-bacteria:before{content:"\e059"}.fa-bacterium:before{content:"\e05a"}.fa-bahai:before{content:"\f666"}.fa-balance-scale:before{content:"\f24e"}.fa-balance-scale-left:before{content:"\f515"}.fa-balance-scale-right:before{content:"\f516"}.fa-ban:before{content:"\f05e"}.fa-band-aid:before{content:"\f462"}.fa-bandcamp:before{content:"\f2d5"}.fa-barcode:before{content:"\f02a"}.fa-bars:before{content:"\f0c9"}.fa-baseball-ball:before{content:"\f433"}.fa-basketball-ball:before{content:"\f434"}.fa-bath:before{content:"\f2cd"}.fa-battery-empty:before{content:"\f244"}.fa-battery-full:before{content:"\f240"}.fa-battery-half:before{content:"\f242"}.fa-battery-quarter:before{content:"\f243"}.fa-battery-three-quarters:before{content:"\f241"}.fa-battle-net:before{content:"\f835"}.fa-bed:before{content:"\f236"}.fa-beer:before{content:"\f0fc"}.fa-behance:before{content:"\f1b4"}.fa-behance-square:before{content:"\f1b5"}.fa-bell:before{content:"\f0f3"}.fa-bell-slash:before{content:"\f1f6"}.fa-bezier-curve:before{content:"\f55b"}.fa-bible:before{content:"\f647"}.fa-bicycle:before{content:"\f206"}.fa-biking:before{content:"\f84a"}.fa-bimobject:before{content:"\f378"}.fa-binoculars:before{content:"\f1e5"}.fa-biohazard:before{content:"\f780"}.fa-birthday-cake:before{content:"\f1fd"}.fa-bitbucket:before{content:"\f171"}.fa-bitcoin:before{content:"\f379"}.fa-bity:before{content:"\f37a"}.fa-black-tie:before{content:"\f27e"}.fa-blackberry:before{content:"\f37b"}.fa-blender:before{content:"\f517"}.fa-blender-phone:before{content:"\f6b6"}.fa-blind:before{content:"\f29d"}.fa-blog:before{content:"\f781"}.fa-blogger:before{content:"\f37c"}.fa-blogger-b:before{content:"\f37d"}.fa-bluetooth:before{content:"\f293"}.fa-bluetooth-b:before{content:"\f294"}.fa-bold:before{content:"\f032"}.fa-bolt:before{content:"\f0e7"}.fa-bomb:before{content:"\f1e2"}.fa-bone:before{content:"\f5d7"}.fa-bong:before{content:"\f55c"}.fa-book:before{content:"\f02d"}.fa-book-dead:before{content:"\f6b7"}.fa-book-medical:before{content:"\f7e6"}.fa-book-open:before{content:"\f518"}.fa-book-reader:before{content:"\f5da"}.fa-bookmark:before{content:"\f02e"}.fa-bootstrap:before{content:"\f836"}.fa-border-all:before{content:"\f84c"}.fa-border-none:before{content:"\f850"}.fa-border-style:before{content:"\f853"}.fa-bowling-ball:before{content:"\f436"}.fa-box:before{content:"\f466"}.fa-box-open:before{content:"\f49e"}.fa-box-tissue:before{content:"\e05b"}.fa-boxes:before{content:"\f468"}.fa-braille:before{content:"\f2a1"}.fa-brain:before{content:"\f5dc"}.fa-bread-slice:before{content:"\f7ec"}.fa-briefcase:before{content:"\f0b1"}.fa-briefcase-medical:before{content:"\f469"}.fa-broadcast-tower:before{content:"\f519"}.fa-broom:before{content:"\f51a"}.fa-brush:before{content:"\f55d"}.fa-btc:before{content:"\f15a"}.fa-buffer:before{content:"\f837"}.fa-bug:before{content:"\f188"}.fa-building:before{content:"\f1ad"}.fa-bullhorn:before{content:"\f0a1"}.fa-bullseye:before{content:"\f140"}.fa-burn:before{content:"\f46a"}.fa-buromobelexperte:before{content:"\f37f"}.fa-bus:before{content:"\f207"}.fa-bus-alt:before{content:"\f55e"}.fa-business-time:before{content:"\f64a"}.fa-buy-n-large:before{content:"\f8a6"}.fa-buysellads:before{content:"\f20d"}.fa-calculator:before{content:"\f1ec"}.fa-calendar:before{content:"\f133"}.fa-calendar-alt:before{content:"\f073"}.fa-calendar-check:before{content:"\f274"}.fa-calendar-day:before{content:"\f783"}.fa-calendar-minus:before{content:"\f272"}.fa-calendar-plus:before{content:"\f271"}.fa-calendar-times:before{content:"\f273"}.fa-calendar-week:before{content:"\f784"}.fa-camera:before{content:"\f030"}.fa-camera-retro:before{content:"\f083"}.fa-campground:before{content:"\f6bb"}.fa-canadian-maple-leaf:before{content:"\f785"}.fa-candy-cane:before{content:"\f786"}.fa-cannabis:before{content:"\f55f"}.fa-capsules:before{content:"\f46b"}.fa-car:before{content:"\f1b9"}.fa-car-alt:before{content:"\f5de"}.fa-car-battery:before{content:"\f5df"}.fa-car-crash:before{content:"\f5e1"}.fa-car-side:before{content:"\f5e4"}.fa-caravan:before{content:"\f8ff"}.fa-caret-down:before{content:"\f0d7"}.fa-caret-left:before{content:"\f0d9"}.fa-caret-right:before{content:"\f0da"}.fa-caret-square-down:before{content:"\f150"}.fa-caret-square-left:before{content:"\f191"}.fa-caret-square-right:before{content:"\f152"}.fa-caret-square-up:before{content:"\f151"}.fa-caret-up:before{content:"\f0d8"}.fa-carrot:before{content:"\f787"}.fa-cart-arrow-down:before{content:"\f218"}.fa-cart-plus:before{content:"\f217"}.fa-cash-register:before{content:"\f788"}.fa-cat:before{content:"\f6be"}.fa-cc-amazon-pay:before{content:"\f42d"}.fa-cc-amex:before{content:"\f1f3"}.fa-cc-apple-pay:before{content:"\f416"}.fa-cc-diners-club:before{content:"\f24c"}.fa-cc-discover:before{content:"\f1f2"}.fa-cc-jcb:before{content:"\f24b"}.fa-cc-mastercard:before{content:"\f1f1"}.fa-cc-paypal:before{content:"\f1f4"}.fa-cc-stripe:before{content:"\f1f5"}.fa-cc-visa:before{content:"\f1f0"}.fa-centercode:before{content:"\f380"}.fa-centos:before{content:"\f789"}.fa-certificate:before{content:"\f0a3"}.fa-chair:before{content:"\f6c0"}.fa-chalkboard:before{content:"\f51b"}.fa-chalkboard-teacher:before{content:"\f51c"}.fa-charging-station:before{content:"\f5e7"}.fa-chart-area:before{content:"\f1fe"}.fa-chart-bar:before{content:"\f080"}.fa-chart-line:before{content:"\f201"}.fa-chart-pie:before{content:"\f200"}.fa-check:before{content:"\f00c"}.fa-check-circle:before{content:"\f058"}.fa-check-double:before{content:"\f560"}.fa-check-square:before{content:"\f14a"}.fa-cheese:before{content:"\f7ef"}.fa-chess:before{content:"\f439"}.fa-chess-bishop:before{content:"\f43a"}.fa-chess-board:before{content:"\f43c"}.fa-chess-king:before{content:"\f43f"}.fa-chess-knight:before{content:"\f441"}.fa-chess-pawn:before{content:"\f443"}.fa-chess-queen:before{content:"\f445"}.fa-chess-rook:before{content:"\f447"}.fa-chevron-circle-down:before{content:"\f13a"}.fa-chevron-circle-left:before{content:"\f137"}.fa-chevron-circle-right:before{content:"\f138"}.fa-chevron-circle-up:before{content:"\f139"}.fa-chevron-down:before{content:"\f078"}.fa-chevron-left:before{content:"\f053"}.fa-chevron-right:before{content:"\f054"}.fa-chevron-up:before{content:"\f077"}.fa-child:before{content:"\f1ae"}.fa-chrome:before{content:"\f268"}.fa-chromecast:before{content:"\f838"}.fa-church:before{content:"\f51d"}.fa-circle:before{content:"\f111"}.fa-circle-notch:before{content:"\f1ce"}.fa-city:before{content:"\f64f"}.fa-clinic-medical:before{content:"\f7f2"}.fa-clipboard:before{content:"\f328"}.fa-clipboard-check:before{content:"\f46c"}.fa-clipboard-list:before{content:"\f46d"}.fa-clock:before{content:"\f017"}.fa-clone:before{content:"\f24d"}.fa-closed-captioning:before{content:"\f20a"}.fa-cloud:before{content:"\f0c2"}.fa-cloud-download-alt:before{content:"\f381"}.fa-cloud-meatball:before{content:"\f73b"}.fa-cloud-moon:before{content:"\f6c3"}.fa-cloud-moon-rain:before{content:"\f73c"}.fa-cloud-rain:before{content:"\f73d"}.fa-cloud-showers-heavy:before{content:"\f740"}.fa-cloud-sun:before{content:"\f6c4"}.fa-cloud-sun-rain:before{content:"\f743"}.fa-cloud-upload-alt:before{content:"\f382"}.fa-cloudflare:before{content:"\e07d"}.fa-cloudscale:before{content:"\f383"}.fa-cloudsmith:before{content:"\f384"}.fa-cloudversify:before{content:"\f385"}.fa-cocktail:before{content:"\f561"}.fa-code:before{content:"\f121"}.fa-code-branch:before{content:"\f126"}.fa-codepen:before{content:"\f1cb"}.fa-codiepie:before{content:"\f284"}.fa-coffee:before{content:"\f0f4"}.fa-cog:before{content:"\f013"}.fa-cogs:before{content:"\f085"}.fa-coins:before{content:"\f51e"}.fa-columns:before{content:"\f0db"}.fa-comment:before{content:"\f075"}.fa-comment-alt:before{content:"\f27a"}.fa-comment-dollar:before{content:"\f651"}.fa-comment-dots:before{content:"\f4ad"}.fa-comment-medical:before{content:"\f7f5"}.fa-comment-slash:before{content:"\f4b3"}.fa-comments:before{content:"\f086"}.fa-comments-dollar:before{content:"\f653"}.fa-compact-disc:before{content:"\f51f"}.fa-compass:before{content:"\f14e"}.fa-compress:before{content:"\f066"}.fa-compress-alt:before{content:"\f422"}.fa-compress-arrows-alt:before{content:"\f78c"}.fa-concierge-bell:before{content:"\f562"}.fa-confluence:before{content:"\f78d"}.fa-connectdevelop:before{content:"\f20e"}.fa-contao:before{content:"\f26d"}.fa-cookie:before{content:"\f563"}.fa-cookie-bite:before{content:"\f564"}.fa-copy:before{content:"\f0c5"}.fa-copyright:before{content:"\f1f9"}.fa-cotton-bureau:before{content:"\f89e"}.fa-couch:before{content:"\f4b8"}.fa-cpanel:before{content:"\f388"}.fa-creative-commons:before{content:"\f25e"}.fa-creative-commons-by:before{content:"\f4e7"}.fa-creative-commons-nc:before{content:"\f4e8"}.fa-creative-commons-nc-eu:before{content:"\f4e9"}.fa-creative-commons-nc-jp:before{content:"\f4ea"}.fa-creative-commons-nd:before{content:"\f4eb"}.fa-creative-commons-pd:before{content:"\f4ec"}.fa-creative-commons-pd-alt:before{content:"\f4ed"}.fa-creative-commons-remix:before{content:"\f4ee"}.fa-creative-commons-sa:before{content:"\f4ef"}.fa-creative-commons-sampling:before{content:"\f4f0"}.fa-creative-commons-sampling-plus:before{content:"\f4f1"}.fa-creative-commons-share:before{content:"\f4f2"}.fa-creative-commons-zero:before{content:"\f4f3"}.fa-credit-card:before{content:"\f09d"}.fa-critical-role:before{content:"\f6c9"}.fa-crop:before{content:"\f125"}.fa-crop-alt:before{content:"\f565"}.fa-cross:before{content:"\f654"}.fa-crosshairs:before{content:"\f05b"}.fa-crow:before{content:"\f520"}.fa-crown:before{content:"\f521"}.fa-crutch:before{content:"\f7f7"}.fa-css3:before{content:"\f13c"}.fa-css3-alt:before{content:"\f38b"}.fa-cube:before{content:"\f1b2"}.fa-cubes:before{content:"\f1b3"}.fa-cut:before{content:"\f0c4"}.fa-cuttlefish:before{content:"\f38c"}.fa-d-and-d:before{content:"\f38d"}.fa-d-and-d-beyond:before{content:"\f6ca"}.fa-dailymotion:before{content:"\e052"}.fa-dashcube:before{content:"\f210"}.fa-database:before{content:"\f1c0"}.fa-deaf:before{content:"\f2a4"}.fa-deezer:before{content:"\e077"}.fa-delicious:before{content:"\f1a5"}.fa-democrat:before{content:"\f747"}.fa-deploydog:before{content:"\f38e"}.fa-deskpro:before{content:"\f38f"}.fa-desktop:before{content:"\f108"}.fa-dev:before{content:"\f6cc"}.fa-deviantart:before{content:"\f1bd"}.fa-dharmachakra:before{content:"\f655"}.fa-dhl:before{content:"\f790"}.fa-diagnoses:before{content:"\f470"}.fa-diaspora:before{content:"\f791"}.fa-dice:before{content:"\f522"}.fa-dice-d20:before{content:"\f6cf"}.fa-dice-d6:before{content:"\f6d1"}.fa-dice-five:before{content:"\f523"}.fa-dice-four:before{content:"\f524"}.fa-dice-one:before{content:"\f525"}.fa-dice-six:before{content:"\f526"}.fa-dice-three:before{content:"\f527"}.fa-dice-two:before{content:"\f528"}.fa-digg:before{content:"\f1a6"}.fa-digital-ocean:before{content:"\f391"}.fa-digital-tachograph:before{content:"\f566"}.fa-directions:before{content:"\f5eb"}.fa-discord:before{content:"\f392"}.fa-discourse:before{content:"\f393"}.fa-disease:before{content:"\f7fa"}.fa-divide:before{content:"\f529"}.fa-dizzy:before{content:"\f567"}.fa-dna:before{content:"\f471"}.fa-dochub:before{content:"\f394"}.fa-docker:before{content:"\f395"}.fa-dog:before{content:"\f6d3"}.fa-dollar-sign:before{content:"\f155"}.fa-dolly:before{content:"\f472"}.fa-dolly-flatbed:before{content:"\f474"}.fa-donate:before{content:"\f4b9"}.fa-door-closed:before{content:"\f52a"}.fa-door-open:before{content:"\f52b"}.fa-dot-circle:before{content:"\f192"}.fa-dove:before{content:"\f4ba"}.fa-download:before{content:"\f019"}.fa-draft2digital:before{content:"\f396"}.fa-drafting-compass:before{content:"\f568"}.fa-dragon:before{content:"\f6d5"}.fa-draw-polygon:before{content:"\f5ee"}.fa-dribbble:before{content:"\f17d"}.fa-dribbble-square:before{content:"\f397"}.fa-dropbox:before{content:"\f16b"}.fa-drum:before{content:"\f569"}.fa-drum-steelpan:before{content:"\f56a"}.fa-drumstick-bite:before{content:"\f6d7"}.fa-drupal:before{content:"\f1a9"}.fa-dumbbell:before{content:"\f44b"}.fa-dumpster:before{content:"\f793"}.fa-dumpster-fire:before{content:"\f794"}.fa-dungeon:before{content:"\f6d9"}.fa-dyalog:before{content:"\f399"}.fa-earlybirds:before{content:"\f39a"}.fa-ebay:before{content:"\f4f4"}.fa-edge:before{content:"\f282"}.fa-edge-legacy:before{content:"\e078"}.fa-edit:before{content:"\f044"}.fa-egg:before{content:"\f7fb"}.fa-eject:before{content:"\f052"}.fa-elementor:before{content:"\f430"}.fa-ellipsis-h:before{content:"\f141"}.fa-ellipsis-v:before{content:"\f142"}.fa-ello:before{content:"\f5f1"}.fa-ember:before{content:"\f423"}.fa-empire:before{content:"\f1d1"}.fa-envelope:before{content:"\f0e0"}.fa-envelope-open:before{content:"\f2b6"}.fa-envelope-open-text:before{content:"\f658"}.fa-envelope-square:before{content:"\f199"}.fa-envira:before{content:"\f299"}.fa-equals:before{content:"\f52c"}.fa-eraser:before{content:"\f12d"}.fa-erlang:before{content:"\f39d"}.fa-ethereum:before{content:"\f42e"}.fa-ethernet:before{content:"\f796"}.fa-etsy:before{content:"\f2d7"}.fa-euro-sign:before{content:"\f153"}.fa-evernote:before{content:"\f839"}.fa-exchange-alt:before{content:"\f362"}.fa-exclamation:before{content:"\f12a"}.fa-exclamation-circle:before{content:"\f06a"}.fa-exclamation-triangle:before{content:"\f071"}.fa-expand:before{content:"\f065"}.fa-expand-alt:before{content:"\f424"}.fa-expand-arrows-alt:before{content:"\f31e"}.fa-expeditedssl:before{content:"\f23e"}.fa-external-link-alt:before{content:"\f35d"}.fa-external-link-square-alt:before{content:"\f360"}.fa-eye:before{content:"\f06e"}.fa-eye-dropper:before{content:"\f1fb"}.fa-eye-slash:before{content:"\f070"}.fa-facebook:before{content:"\f09a"}.fa-facebook-f:before{content:"\f39e"}.fa-facebook-messenger:before{content:"\f39f"}.fa-facebook-square:before{content:"\f082"}.fa-fan:before{content:"\f863"}.fa-fantasy-flight-games:before{content:"\f6dc"}.fa-fast-backward:before{content:"\f049"}.fa-fast-forward:before{content:"\f050"}.fa-faucet:before{content:"\e005"}.fa-fax:before{content:"\f1ac"}.fa-feather:before{content:"\f52d"}.fa-feather-alt:before{content:"\f56b"}.fa-fedex:before{content:"\f797"}.fa-fedora:before{content:"\f798"}.fa-female:before{content:"\f182"}.fa-fighter-jet:before{content:"\f0fb"}.fa-figma:before{content:"\f799"}.fa-file:before{content:"\f15b"}.fa-file-alt:before{content:"\f15c"}.fa-file-archive:before{content:"\f1c6"}.fa-file-audio:before{content:"\f1c7"}.fa-file-code:before{content:"\f1c9"}.fa-file-contract:before{content:"\f56c"}.fa-file-csv:before{content:"\f6dd"}.fa-file-download:before{content:"\f56d"}.fa-file-excel:before{content:"\f1c3"}.fa-file-export:before{content:"\f56e"}.fa-file-image:before{content:"\f1c5"}.fa-file-import:before{content:"\f56f"}.fa-file-invoice:before{content:"\f570"}.fa-file-invoice-dollar:before{content:"\f571"}.fa-file-medical:before{content:"\f477"}.fa-file-medical-alt:before{content:"\f478"}.fa-file-pdf:before{content:"\f1c1"}.fa-file-powerpoint:before{content:"\f1c4"}.fa-file-prescription:before{content:"\f572"}.fa-file-signature:before{content:"\f573"}.fa-file-upload:before{content:"\f574"}.fa-file-video:before{content:"\f1c8"}.fa-file-word:before{content:"\f1c2"}.fa-fill:before{content:"\f575"}.fa-fill-drip:before{content:"\f576"}.fa-film:before{content:"\f008"}.fa-filter:before{content:"\f0b0"}.fa-fingerprint:before{content:"\f577"}.fa-fire:before{content:"\f06d"}.fa-fire-alt:before{content:"\f7e4"}.fa-fire-extinguisher:before{content:"\f134"}.fa-firefox:before{content:"\f269"}.fa-firefox-browser:before{content:"\e007"}.fa-first-aid:before{content:"\f479"}.fa-first-order:before{content:"\f2b0"}.fa-first-order-alt:before{content:"\f50a"}.fa-firstdraft:before{content:"\f3a1"}.fa-fish:before{content:"\f578"}.fa-fist-raised:before{content:"\f6de"}.fa-flag:before{content:"\f024"}.fa-flag-checkered:before{content:"\f11e"}.fa-flag-usa:before{content:"\f74d"}.fa-flask:before{content:"\f0c3"}.fa-flickr:before{content:"\f16e"}.fa-flipboard:before{content:"\f44d"}.fa-flushed:before{content:"\f579"}.fa-fly:before{content:"\f417"}.fa-folder:before{content:"\f07b"}.fa-folder-minus:before{content:"\f65d"}.fa-folder-open:before{content:"\f07c"}.fa-folder-plus:before{content:"\f65e"}.fa-font:before{content:"\f031"}.fa-font-awesome:before{content:"\f2b4"}.fa-font-awesome-alt:before{content:"\f35c"}.fa-font-awesome-flag:before{content:"\f425"}.fa-font-awesome-logo-full:before{content:"\f4e6"}.fa-fonticons:before{content:"\f280"}.fa-fonticons-fi:before{content:"\f3a2"}.fa-football-ball:before{content:"\f44e"}.fa-fort-awesome:before{content:"\f286"}.fa-fort-awesome-alt:before{content:"\f3a3"}.fa-forumbee:before{content:"\f211"}.fa-forward:before{content:"\f04e"}.fa-foursquare:before{content:"\f180"}.fa-free-code-camp:before{content:"\f2c5"}.fa-freebsd:before{content:"\f3a4"}.fa-frog:before{content:"\f52e"}.fa-frown:before{content:"\f119"}.fa-frown-open:before{content:"\f57a"}.fa-fulcrum:before{content:"\f50b"}.fa-funnel-dollar:before{content:"\f662"}.fa-futbol:before{content:"\f1e3"}.fa-galactic-republic:before{content:"\f50c"}.fa-galactic-senate:before{content:"\f50d"}.fa-gamepad:before{content:"\f11b"}.fa-gas-pump:before{content:"\f52f"}.fa-gavel:before{content:"\f0e3"}.fa-gem:before{content:"\f3a5"}.fa-genderless:before{content:"\f22d"}.fa-get-pocket:before{content:"\f265"}.fa-gg:before{content:"\f260"}.fa-gg-circle:before{content:"\f261"}.fa-ghost:before{content:"\f6e2"}.fa-gift:before{content:"\f06b"}.fa-gifts:before{content:"\f79c"}.fa-git:before{content:"\f1d3"}.fa-git-alt:before{content:"\f841"}.fa-git-square:before{content:"\f1d2"}.fa-github:before{content:"\f09b"}.fa-github-alt:before{content:"\f113"}.fa-github-square:before{content:"\f092"}.fa-gitkraken:before{content:"\f3a6"}.fa-gitlab:before{content:"\f296"}.fa-gitter:before{content:"\f426"}.fa-glass-cheers:before{content:"\f79f"}.fa-glass-martini:before{content:"\f000"}.fa-glass-martini-alt:before{content:"\f57b"}.fa-glass-whiskey:before{content:"\f7a0"}.fa-glasses:before{content:"\f530"}.fa-glide:before{content:"\f2a5"}.fa-glide-g:before{content:"\f2a6"}.fa-globe:before{content:"\f0ac"}.fa-globe-africa:before{content:"\f57c"}.fa-globe-americas:before{content:"\f57d"}.fa-globe-asia:before{content:"\f57e"}.fa-globe-europe:before{content:"\f7a2"}.fa-gofore:before{content:"\f3a7"}.fa-golf-ball:before{content:"\f450"}.fa-goodreads:before{content:"\f3a8"}.fa-goodreads-g:before{content:"\f3a9"}.fa-google:before{content:"\f1a0"}.fa-google-drive:before{content:"\f3aa"}.fa-google-pay:before{content:"\e079"}.fa-google-play:before{content:"\f3ab"}.fa-google-plus:before{content:"\f2b3"}.fa-google-plus-g:before{content:"\f0d5"}.fa-google-plus-square:before{content:"\f0d4"}.fa-google-wallet:before{content:"\f1ee"}.fa-gopuram:before{content:"\f664"}.fa-graduation-cap:before{content:"\f19d"}.fa-gratipay:before{content:"\f184"}.fa-grav:before{content:"\f2d6"}.fa-greater-than:before{content:"\f531"}.fa-greater-than-equal:before{content:"\f532"}.fa-grimace:before{content:"\f57f"}.fa-grin:before{content:"\f580"}.fa-grin-alt:before{content:"\f581"}.fa-grin-beam:before{content:"\f582"}.fa-grin-beam-sweat:before{content:"\f583"}.fa-grin-hearts:before{content:"\f584"}.fa-grin-squint:before{content:"\f585"}.fa-grin-squint-tears:before{content:"\f586"}.fa-grin-stars:before{content:"\f587"}.fa-grin-tears:before{content:"\f588"}.fa-grin-tongue:before{content:"\f589"}.fa-grin-tongue-squint:before{content:"\f58a"}.fa-grin-tongue-wink:before{content:"\f58b"}.fa-grin-wink:before{content:"\f58c"}.fa-grip-horizontal:before{content:"\f58d"}.fa-grip-lines:before{content:"\f7a4"}.fa-grip-lines-vertical:before{content:"\f7a5"}.fa-grip-vertical:before{content:"\f58e"}.fa-gripfire:before{content:"\f3ac"}.fa-grunt:before{content:"\f3ad"}.fa-guilded:before{content:"\e07e"}.fa-guitar:before{content:"\f7a6"}.fa-gulp:before{content:"\f3ae"}.fa-h-square:before{content:"\f0fd"}.fa-hacker-news:before{content:"\f1d4"}.fa-hacker-news-square:before{content:"\f3af"}.fa-hackerrank:before{content:"\f5f7"}.fa-hamburger:before{content:"\f805"}.fa-hammer:before{content:"\f6e3"}.fa-hamsa:before{content:"\f665"}.fa-hand-holding:before{content:"\f4bd"}.fa-hand-holding-heart:before{content:"\f4be"}.fa-hand-holding-medical:before{content:"\e05c"}.fa-hand-holding-usd:before{content:"\f4c0"}.fa-hand-holding-water:before{content:"\f4c1"}.fa-hand-lizard:before{content:"\f258"}.fa-hand-middle-finger:before{content:"\f806"}.fa-hand-paper:before{content:"\f256"}.fa-hand-peace:before{content:"\f25b"}.fa-hand-point-down:before{content:"\f0a7"}.fa-hand-point-left:before{content:"\f0a5"}.fa-hand-point-right:before{content:"\f0a4"}.fa-hand-point-up:before{content:"\f0a6"}.fa-hand-pointer:before{content:"\f25a"}.fa-hand-rock:before{content:"\f255"}.fa-hand-scissors:before{content:"\f257"}.fa-hand-sparkles:before{content:"\e05d"}.fa-hand-spock:before{content:"\f259"}.fa-hands:before{content:"\f4c2"}.fa-hands-helping:before{content:"\f4c4"}.fa-hands-wash:before{content:"\e05e"}.fa-handshake:before{content:"\f2b5"}.fa-handshake-alt-slash:before{content:"\e05f"}.fa-handshake-slash:before{content:"\e060"}.fa-hanukiah:before{content:"\f6e6"}.fa-hard-hat:before{content:"\f807"}.fa-hashtag:before{content:"\f292"}.fa-hat-cowboy:before{content:"\f8c0"}.fa-hat-cowboy-side:before{content:"\f8c1"}.fa-hat-wizard:before{content:"\f6e8"}.fa-hdd:before{content:"\f0a0"}.fa-head-side-cough:before{content:"\e061"}.fa-head-side-cough-slash:before{content:"\e062"}.fa-head-side-mask:before{content:"\e063"}.fa-head-side-virus:before{content:"\e064"}.fa-heading:before{content:"\f1dc"}.fa-headphones:before{content:"\f025"}.fa-headphones-alt:before{content:"\f58f"}.fa-headset:before{content:"\f590"}.fa-heart:before{content:"\f004"}.fa-heart-broken:before{content:"\f7a9"}.fa-heartbeat:before{content:"\f21e"}.fa-helicopter:before{content:"\f533"}.fa-highlighter:before{content:"\f591"}.fa-hiking:before{content:"\f6ec"}.fa-hippo:before{content:"\f6ed"}.fa-hips:before{content:"\f452"}.fa-hire-a-helper:before{content:"\f3b0"}.fa-history:before{content:"\f1da"}.fa-hive:before{content:"\e07f"}.fa-hockey-puck:before{content:"\f453"}.fa-holly-berry:before{content:"\f7aa"}.fa-home:before{content:"\f015"}.fa-hooli:before{content:"\f427"}.fa-hornbill:before{content:"\f592"}.fa-horse:before{content:"\f6f0"}.fa-horse-head:before{content:"\f7ab"}.fa-hospital:before{content:"\f0f8"}.fa-hospital-alt:before{content:"\f47d"}.fa-hospital-symbol:before{content:"\f47e"}.fa-hospital-user:before{content:"\f80d"}.fa-hot-tub:before{content:"\f593"}.fa-hotdog:before{content:"\f80f"}.fa-hotel:before{content:"\f594"}.fa-hotjar:before{content:"\f3b1"}.fa-hourglass:before{content:"\f254"}.fa-hourglass-end:before{content:"\f253"}.fa-hourglass-half:before{content:"\f252"}.fa-hourglass-start:before{content:"\f251"}.fa-house-damage:before{content:"\f6f1"}.fa-house-user:before{content:"\e065"}.fa-houzz:before{content:"\f27c"}.fa-hryvnia:before{content:"\f6f2"}.fa-html5:before{content:"\f13b"}.fa-hubspot:before{content:"\f3b2"}.fa-i-cursor:before{content:"\f246"}.fa-ice-cream:before{content:"\f810"}.fa-icicles:before{content:"\f7ad"}.fa-icons:before{content:"\f86d"}.fa-id-badge:before{content:"\f2c1"}.fa-id-card:before{content:"\f2c2"}.fa-id-card-alt:before{content:"\f47f"}.fa-ideal:before{content:"\e013"}.fa-igloo:before{content:"\f7ae"}.fa-image:before{content:"\f03e"}.fa-images:before{content:"\f302"}.fa-imdb:before{content:"\f2d8"}.fa-inbox:before{content:"\f01c"}.fa-indent:before{content:"\f03c"}.fa-industry:before{content:"\f275"}.fa-infinity:before{content:"\f534"}.fa-info:before{content:"\f129"}.fa-info-circle:before{content:"\f05a"}.fa-innosoft:before{content:"\e080"}.fa-instagram:before{content:"\f16d"}.fa-instagram-square:before{content:"\e055"}.fa-instalod:before{content:"\e081"}.fa-intercom:before{content:"\f7af"}.fa-internet-explorer:before{content:"\f26b"}.fa-invision:before{content:"\f7b0"}.fa-ioxhost:before{content:"\f208"}.fa-italic:before{content:"\f033"}.fa-itch-io:before{content:"\f83a"}.fa-itunes:before{content:"\f3b4"}.fa-itunes-note:before{content:"\f3b5"}.fa-java:before{content:"\f4e4"}.fa-jedi:before{content:"\f669"}.fa-jedi-order:before{content:"\f50e"}.fa-jenkins:before{content:"\f3b6"}.fa-jira:before{content:"\f7b1"}.fa-joget:before{content:"\f3b7"}.fa-joint:before{content:"\f595"}.fa-joomla:before{content:"\f1aa"}.fa-journal-whills:before{content:"\f66a"}.fa-js:before{content:"\f3b8"}.fa-js-square:before{content:"\f3b9"}.fa-jsfiddle:before{content:"\f1cc"}.fa-kaaba:before{content:"\f66b"}.fa-kaggle:before{content:"\f5fa"}.fa-key:before{content:"\f084"}.fa-keybase:before{content:"\f4f5"}.fa-keyboard:before{content:"\f11c"}.fa-keycdn:before{content:"\f3ba"}.fa-khanda:before{content:"\f66d"}.fa-kickstarter:before{content:"\f3bb"}.fa-kickstarter-k:before{content:"\f3bc"}.fa-kiss:before{content:"\f596"}.fa-kiss-beam:before{content:"\f597"}.fa-kiss-wink-heart:before{content:"\f598"}.fa-kiwi-bird:before{content:"\f535"}.fa-korvue:before{content:"\f42f"}.fa-landmark:before{content:"\f66f"}.fa-language:before{content:"\f1ab"}.fa-laptop:before{content:"\f109"}.fa-laptop-code:before{content:"\f5fc"}.fa-laptop-house:before{content:"\e066"}.fa-laptop-medical:before{content:"\f812"}.fa-laravel:before{content:"\f3bd"}.fa-lastfm:before{content:"\f202"}.fa-lastfm-square:before{content:"\f203"}.fa-laugh:before{content:"\f599"}.fa-laugh-beam:before{content:"\f59a"}.fa-laugh-squint:before{content:"\f59b"}.fa-laugh-wink:before{content:"\f59c"}.fa-layer-group:before{content:"\f5fd"}.fa-leaf:before{content:"\f06c"}.fa-leanpub:before{content:"\f212"}.fa-lemon:before{content:"\f094"}.fa-less:before{content:"\f41d"}.fa-less-than:before{content:"\f536"}.fa-less-than-equal:before{content:"\f537"}.fa-level-down-alt:before{content:"\f3be"}.fa-level-up-alt:before{content:"\f3bf"}.fa-life-ring:before{content:"\f1cd"}.fa-lightbulb:before{content:"\f0eb"}.fa-line:before{content:"\f3c0"}.fa-link:before{content:"\f0c1"}.fa-linkedin:before{content:"\f08c"}.fa-linkedin-in:before{content:"\f0e1"}.fa-linode:before{content:"\f2b8"}.fa-linux:before{content:"\f17c"}.fa-lira-sign:before{content:"\f195"}.fa-list:before{content:"\f03a"}.fa-list-alt:before{content:"\f022"}.fa-list-ol:before{content:"\f0cb"}.fa-list-ul:before{content:"\f0ca"}.fa-location-arrow:before{content:"\f124"}.fa-lock:before{content:"\f023"}.fa-lock-open:before{content:"\f3c1"}.fa-long-arrow-alt-down:before{content:"\f309"}.fa-long-arrow-alt-left:before{content:"\f30a"}.fa-long-arrow-alt-right:before{content:"\f30b"}.fa-long-arrow-alt-up:before{content:"\f30c"}.fa-low-vision:before{content:"\f2a8"}.fa-luggage-cart:before{content:"\f59d"}.fa-lungs:before{content:"\f604"}.fa-lungs-virus:before{content:"\e067"}.fa-lyft:before{content:"\f3c3"}.fa-magento:before{content:"\f3c4"}.fa-magic:before{content:"\f0d0"}.fa-magnet:before{content:"\f076"}.fa-mail-bulk:before{content:"\f674"}.fa-mailchimp:before{content:"\f59e"}.fa-male:before{content:"\f183"}.fa-mandalorian:before{content:"\f50f"}.fa-map:before{content:"\f279"}.fa-map-marked:before{content:"\f59f"}.fa-map-marked-alt:before{content:"\f5a0"}.fa-map-marker:before{content:"\f041"}.fa-map-marker-alt:before{content:"\f3c5"}.fa-map-pin:before{content:"\f276"}.fa-map-signs:before{content:"\f277"}.fa-markdown:before{content:"\f60f"}.fa-marker:before{content:"\f5a1"}.fa-mars:before{content:"\f222"}.fa-mars-double:before{content:"\f227"}.fa-mars-stroke:before{content:"\f229"}.fa-mars-stroke-h:before{content:"\f22b"}.fa-mars-stroke-v:before{content:"\f22a"}.fa-mask:before{content:"\f6fa"}.fa-mastodon:before{content:"\f4f6"}.fa-maxcdn:before{content:"\f136"}.fa-mdb:before{content:"\f8ca"}.fa-medal:before{content:"\f5a2"}.fa-medapps:before{content:"\f3c6"}.fa-medium:before{content:"\f23a"}.fa-medium-m:before{content:"\f3c7"}.fa-medkit:before{content:"\f0fa"}.fa-medrt:before{content:"\f3c8"}.fa-meetup:before{content:"\f2e0"}.fa-megaport:before{content:"\f5a3"}.fa-meh:before{content:"\f11a"}.fa-meh-blank:before{content:"\f5a4"}.fa-meh-rolling-eyes:before{content:"\f5a5"}.fa-memory:before{content:"\f538"}.fa-mendeley:before{content:"\f7b3"}.fa-menorah:before{content:"\f676"}.fa-mercury:before{content:"\f223"}.fa-meteor:before{content:"\f753"}.fa-microblog:before{content:"\e01a"}.fa-microchip:before{content:"\f2db"}.fa-microphone:before{content:"\f130"}.fa-microphone-alt:before{content:"\f3c9"}.fa-microphone-alt-slash:before{content:"\f539"}.fa-microphone-slash:before{content:"\f131"}.fa-microscope:before{content:"\f610"}.fa-microsoft:before{content:"\f3ca"}.fa-minus:before{content:"\f068"}.fa-minus-circle:before{content:"\f056"}.fa-minus-square:before{content:"\f146"}.fa-mitten:before{content:"\f7b5"}.fa-mix:before{content:"\f3cb"}.fa-mixcloud:before{content:"\f289"}.fa-mixer:before{content:"\e056"}.fa-mizuni:before{content:"\f3cc"}.fa-mobile:before{content:"\f10b"}.fa-mobile-alt:before{content:"\f3cd"}.fa-modx:before{content:"\f285"}.fa-monero:before{content:"\f3d0"}.fa-money-bill:before{content:"\f0d6"}.fa-money-bill-alt:before{content:"\f3d1"}.fa-money-bill-wave:before{content:"\f53a"}.fa-money-bill-wave-alt:before{content:"\f53b"}.fa-money-check:before{content:"\f53c"}.fa-money-check-alt:before{content:"\f53d"}.fa-monument:before{content:"\f5a6"}.fa-moon:before{content:"\f186"}.fa-mortar-pestle:before{content:"\f5a7"}.fa-mosque:before{content:"\f678"}.fa-motorcycle:before{content:"\f21c"}.fa-mountain:before{content:"\f6fc"}.fa-mouse:before{content:"\f8cc"}.fa-mouse-pointer:before{content:"\f245"}.fa-mug-hot:before{content:"\f7b6"}.fa-music:before{content:"\f001"}.fa-napster:before{content:"\f3d2"}.fa-neos:before{content:"\f612"}.fa-network-wired:before{content:"\f6ff"}.fa-neuter:before{content:"\f22c"}.fa-newspaper:before{content:"\f1ea"}.fa-nimblr:before{content:"\f5a8"}.fa-node:before{content:"\f419"}.fa-node-js:before{content:"\f3d3"}.fa-not-equal:before{content:"\f53e"}.fa-notes-medical:before{content:"\f481"}.fa-npm:before{content:"\f3d4"}.fa-ns8:before{content:"\f3d5"}.fa-nutritionix:before{content:"\f3d6"}.fa-object-group:before{content:"\f247"}.fa-object-ungroup:before{content:"\f248"}.fa-octopus-deploy:before{content:"\e082"}.fa-odnoklassniki:before{content:"\f263"}.fa-odnoklassniki-square:before{content:"\f264"}.fa-oil-can:before{content:"\f613"}.fa-old-republic:before{content:"\f510"}.fa-om:before{content:"\f679"}.fa-opencart:before{content:"\f23d"}.fa-openid:before{content:"\f19b"}.fa-opera:before{content:"\f26a"}.fa-optin-monster:before{content:"\f23c"}.fa-orcid:before{content:"\f8d2"}.fa-osi:before{content:"\f41a"}.fa-otter:before{content:"\f700"}.fa-outdent:before{content:"\f03b"}.fa-page4:before{content:"\f3d7"}.fa-pagelines:before{content:"\f18c"}.fa-pager:before{content:"\f815"}.fa-paint-brush:before{content:"\f1fc"}.fa-paint-roller:before{content:"\f5aa"}.fa-palette:before{content:"\f53f"}.fa-palfed:before{content:"\f3d8"}.fa-pallet:before{content:"\f482"}.fa-paper-plane:before{content:"\f1d8"}.fa-paperclip:before{content:"\f0c6"}.fa-parachute-box:before{content:"\f4cd"}.fa-paragraph:before{content:"\f1dd"}.fa-parking:before{content:"\f540"}.fa-passport:before{content:"\f5ab"}.fa-pastafarianism:before{content:"\f67b"}.fa-paste:before{content:"\f0ea"}.fa-patreon:before{content:"\f3d9"}.fa-pause:before{content:"\f04c"}.fa-pause-circle:before{content:"\f28b"}.fa-paw:before{content:"\f1b0"}.fa-paypal:before{content:"\f1ed"}.fa-peace:before{content:"\f67c"}.fa-pen:before{content:"\f304"}.fa-pen-alt:before{content:"\f305"}.fa-pen-fancy:before{content:"\f5ac"}.fa-pen-nib:before{content:"\f5ad"}.fa-pen-square:before{content:"\f14b"}.fa-pencil-alt:before{content:"\f303"}.fa-pencil-ruler:before{content:"\f5ae"}.fa-penny-arcade:before{content:"\f704"}.fa-people-arrows:before{content:"\e068"}.fa-people-carry:before{content:"\f4ce"}.fa-pepper-hot:before{content:"\f816"}.fa-perbyte:before{content:"\e083"}.fa-percent:before{content:"\f295"}.fa-percentage:before{content:"\f541"}.fa-periscope:before{content:"\f3da"}.fa-person-booth:before{content:"\f756"}.fa-phabricator:before{content:"\f3db"}.fa-phoenix-framework:before{content:"\f3dc"}.fa-phoenix-squadron:before{content:"\f511"}.fa-phone:before{content:"\f095"}.fa-phone-alt:before{content:"\f879"}.fa-phone-slash:before{content:"\f3dd"}.fa-phone-square:before{content:"\f098"}.fa-phone-square-alt:before{content:"\f87b"}.fa-phone-volume:before{content:"\f2a0"}.fa-photo-video:before{content:"\f87c"}.fa-php:before{content:"\f457"}.fa-pied-piper:before{content:"\f2ae"}.fa-pied-piper-alt:before{content:"\f1a8"}.fa-pied-piper-hat:before{content:"\f4e5"}.fa-pied-piper-pp:before{content:"\f1a7"}.fa-pied-piper-square:before{content:"\e01e"}.fa-piggy-bank:before{content:"\f4d3"}.fa-pills:before{content:"\f484"}.fa-pinterest:before{content:"\f0d2"}.fa-pinterest-p:before{content:"\f231"}.fa-pinterest-square:before{content:"\f0d3"}.fa-pizza-slice:before{content:"\f818"}.fa-place-of-worship:before{content:"\f67f"}.fa-plane:before{content:"\f072"}.fa-plane-arrival:before{content:"\f5af"}.fa-plane-departure:before{content:"\f5b0"}.fa-plane-slash:before{content:"\e069"}.fa-play:before{content:"\f04b"}.fa-play-circle:before{content:"\f144"}.fa-playstation:before{content:"\f3df"}.fa-plug:before{content:"\f1e6"}.fa-plus:before{content:"\f067"}.fa-plus-circle:before{content:"\f055"}.fa-plus-square:before{content:"\f0fe"}.fa-podcast:before{content:"\f2ce"}.fa-poll:before{content:"\f681"}.fa-poll-h:before{content:"\f682"}.fa-poo:before{content:"\f2fe"}.fa-poo-storm:before{content:"\f75a"}.fa-poop:before{content:"\f619"}.fa-portrait:before{content:"\f3e0"}.fa-pound-sign:before{content:"\f154"}.fa-power-off:before{content:"\f011"}.fa-pray:before{content:"\f683"}.fa-praying-hands:before{content:"\f684"}.fa-prescription:before{content:"\f5b1"}.fa-prescription-bottle:before{content:"\f485"}.fa-prescription-bottle-alt:before{content:"\f486"}.fa-print:before{content:"\f02f"}.fa-procedures:before{content:"\f487"}.fa-product-hunt:before{content:"\f288"}.fa-project-diagram:before{content:"\f542"}.fa-pump-medical:before{content:"\e06a"}.fa-pump-soap:before{content:"\e06b"}.fa-pushed:before{content:"\f3e1"}.fa-puzzle-piece:before{content:"\f12e"}.fa-python:before{content:"\f3e2"}.fa-qq:before{content:"\f1d6"}.fa-qrcode:before{content:"\f029"}.fa-question:before{content:"\f128"}.fa-question-circle:before{content:"\f059"}.fa-quidditch:before{content:"\f458"}.fa-quinscape:before{content:"\f459"}.fa-quora:before{content:"\f2c4"}.fa-quote-left:before{content:"\f10d"}.fa-quote-right:before{content:"\f10e"}.fa-quran:before{content:"\f687"}.fa-r-project:before{content:"\f4f7"}.fa-radiation:before{content:"\f7b9"}.fa-radiation-alt:before{content:"\f7ba"}.fa-rainbow:before{content:"\f75b"}.fa-random:before{content:"\f074"}.fa-raspberry-pi:before{content:"\f7bb"}.fa-ravelry:before{content:"\f2d9"}.fa-react:before{content:"\f41b"}.fa-reacteurope:before{content:"\f75d"}.fa-readme:before{content:"\f4d5"}.fa-rebel:before{content:"\f1d0"}.fa-receipt:before{content:"\f543"}.fa-record-vinyl:before{content:"\f8d9"}.fa-recycle:before{content:"\f1b8"}.fa-red-river:before{content:"\f3e3"}.fa-reddit:before{content:"\f1a1"}.fa-reddit-alien:before{content:"\f281"}.fa-reddit-square:before{content:"\f1a2"}.fa-redhat:before{content:"\f7bc"}.fa-redo:before{content:"\f01e"}.fa-redo-alt:before{content:"\f2f9"}.fa-registered:before{content:"\f25d"}.fa-remove-format:before{content:"\f87d"}.fa-renren:before{content:"\f18b"}.fa-reply:before{content:"\f3e5"}.fa-reply-all:before{content:"\f122"}.fa-replyd:before{content:"\f3e6"}.fa-republican:before{content:"\f75e"}.fa-researchgate:before{content:"\f4f8"}.fa-resolving:before{content:"\f3e7"}.fa-restroom:before{content:"\f7bd"}.fa-retweet:before{content:"\f079"}.fa-rev:before{content:"\f5b2"}.fa-ribbon:before{content:"\f4d6"}.fa-ring:before{content:"\f70b"}.fa-road:before{content:"\f018"}.fa-robot:before{content:"\f544"}.fa-rocket:before{content:"\f135"}.fa-rocketchat:before{content:"\f3e8"}.fa-rockrms:before{content:"\f3e9"}.fa-route:before{content:"\f4d7"}.fa-rss:before{content:"\f09e"}.fa-rss-square:before{content:"\f143"}.fa-ruble-sign:before{content:"\f158"}.fa-ruler:before{content:"\f545"}.fa-ruler-combined:before{content:"\f546"}.fa-ruler-horizontal:before{content:"\f547"}.fa-ruler-vertical:before{content:"\f548"}.fa-running:before{content:"\f70c"}.fa-rupee-sign:before{content:"\f156"}.fa-rust:before{content:"\e07a"}.fa-sad-cry:before{content:"\f5b3"}.fa-sad-tear:before{content:"\f5b4"}.fa-safari:before{content:"\f267"}.fa-salesforce:before{content:"\f83b"}.fa-sass:before{content:"\f41e"}.fa-satellite:before{content:"\f7bf"}.fa-satellite-dish:before{content:"\f7c0"}.fa-save:before{content:"\f0c7"}.fa-schlix:before{content:"\f3ea"}.fa-school:before{content:"\f549"}.fa-screwdriver:before{content:"\f54a"}.fa-scribd:before{content:"\f28a"}.fa-scroll:before{content:"\f70e"}.fa-sd-card:before{content:"\f7c2"}.fa-search:before{content:"\f002"}.fa-search-dollar:before{content:"\f688"}.fa-search-location:before{content:"\f689"}.fa-search-minus:before{content:"\f010"}.fa-search-plus:before{content:"\f00e"}.fa-searchengin:before{content:"\f3eb"}.fa-seedling:before{content:"\f4d8"}.fa-sellcast:before{content:"\f2da"}.fa-sellsy:before{content:"\f213"}.fa-server:before{content:"\f233"}.fa-servicestack:before{content:"\f3ec"}.fa-shapes:before{content:"\f61f"}.fa-share:before{content:"\f064"}.fa-share-alt:before{content:"\f1e0"}.fa-share-alt-square:before{content:"\f1e1"}.fa-share-square:before{content:"\f14d"}.fa-shekel-sign:before{content:"\f20b"}.fa-shield-alt:before{content:"\f3ed"}.fa-shield-virus:before{content:"\e06c"}.fa-ship:before{content:"\f21a"}.fa-shipping-fast:before{content:"\f48b"}.fa-shirtsinbulk:before{content:"\f214"}.fa-shoe-prints:before{content:"\f54b"}.fa-shopify:before{content:"\e057"}.fa-shopping-bag:before{content:"\f290"}.fa-shopping-basket:before{content:"\f291"}.fa-shopping-cart:before{content:"\f07a"}.fa-shopware:before{content:"\f5b5"}.fa-shower:before{content:"\f2cc"}.fa-shuttle-van:before{content:"\f5b6"}.fa-sign:before{content:"\f4d9"}.fa-sign-in-alt:before{content:"\f2f6"}.fa-sign-language:before{content:"\f2a7"}.fa-sign-out-alt:before{content:"\f2f5"}.fa-signal:before{content:"\f012"}.fa-signature:before{content:"\f5b7"}.fa-sim-card:before{content:"\f7c4"}.fa-simplybuilt:before{content:"\f215"}.fa-sink:before{content:"\e06d"}.fa-sistrix:before{content:"\f3ee"}.fa-sitemap:before{content:"\f0e8"}.fa-sith:before{content:"\f512"}.fa-skating:before{content:"\f7c5"}.fa-sketch:before{content:"\f7c6"}.fa-skiing:before{content:"\f7c9"}.fa-skiing-nordic:before{content:"\f7ca"}.fa-skull:before{content:"\f54c"}.fa-skull-crossbones:before{content:"\f714"}.fa-skyatlas:before{content:"\f216"}.fa-skype:before{content:"\f17e"}.fa-slack:before{content:"\f198"}.fa-slack-hash:before{content:"\f3ef"}.fa-slash:before{content:"\f715"}.fa-sleigh:before{content:"\f7cc"}.fa-sliders-h:before{content:"\f1de"}.fa-slideshare:before{content:"\f1e7"}.fa-smile:before{content:"\f118"}.fa-smile-beam:before{content:"\f5b8"}.fa-smile-wink:before{content:"\f4da"}.fa-smog:before{content:"\f75f"}.fa-smoking:before{content:"\f48d"}.fa-smoking-ban:before{content:"\f54d"}.fa-sms:before{content:"\f7cd"}.fa-snapchat:before{content:"\f2ab"}.fa-snapchat-ghost:before{content:"\f2ac"}.fa-snapchat-square:before{content:"\f2ad"}.fa-snowboarding:before{content:"\f7ce"}.fa-snowflake:before{content:"\f2dc"}.fa-snowman:before{content:"\f7d0"}.fa-snowplow:before{content:"\f7d2"}.fa-soap:before{content:"\e06e"}.fa-socks:before{content:"\f696"}.fa-solar-panel:before{content:"\f5ba"}.fa-sort:before{content:"\f0dc"}.fa-sort-alpha-down:before{content:"\f15d"}.fa-sort-alpha-down-alt:before{content:"\f881"}.fa-sort-alpha-up:before{content:"\f15e"}.fa-sort-alpha-up-alt:before{content:"\f882"}.fa-sort-amount-down:before{content:"\f160"}.fa-sort-amount-down-alt:before{content:"\f884"}.fa-sort-amount-up:before{content:"\f161"}.fa-sort-amount-up-alt:before{content:"\f885"}.fa-sort-down:before{content:"\f0dd"}.fa-sort-numeric-down:before{content:"\f162"}.fa-sort-numeric-down-alt:before{content:"\f886"}.fa-sort-numeric-up:before{content:"\f163"}.fa-sort-numeric-up-alt:before{content:"\f887"}.fa-sort-up:before{content:"\f0de"}.fa-soundcloud:before{content:"\f1be"}.fa-sourcetree:before{content:"\f7d3"}.fa-spa:before{content:"\f5bb"}.fa-space-shuttle:before{content:"\f197"}.fa-speakap:before{content:"\f3f3"}.fa-speaker-deck:before{content:"\f83c"}.fa-spell-check:before{content:"\f891"}.fa-spider:before{content:"\f717"}.fa-spinner:before{content:"\f110"}.fa-splotch:before{content:"\f5bc"}.fa-spotify:before{content:"\f1bc"}.fa-spray-can:before{content:"\f5bd"}.fa-square:before{content:"\f0c8"}.fa-square-full:before{content:"\f45c"}.fa-square-root-alt:before{content:"\f698"}.fa-squarespace:before{content:"\f5be"}.fa-stack-exchange:before{content:"\f18d"}.fa-stack-overflow:before{content:"\f16c"}.fa-stackpath:before{content:"\f842"}.fa-stamp:before{content:"\f5bf"}.fa-star:before{content:"\f005"}.fa-star-and-crescent:before{content:"\f699"}.fa-star-half:before{content:"\f089"}.fa-star-half-alt:before{content:"\f5c0"}.fa-star-of-david:before{content:"\f69a"}.fa-star-of-life:before{content:"\f621"}.fa-staylinked:before{content:"\f3f5"}.fa-steam:before{content:"\f1b6"}.fa-steam-square:before{content:"\f1b7"}.fa-steam-symbol:before{content:"\f3f6"}.fa-step-backward:before{content:"\f048"}.fa-step-forward:before{content:"\f051"}.fa-stethoscope:before{content:"\f0f1"}.fa-sticker-mule:before{content:"\f3f7"}.fa-sticky-note:before{content:"\f249"}.fa-stop:before{content:"\f04d"}.fa-stop-circle:before{content:"\f28d"}.fa-stopwatch:before{content:"\f2f2"}.fa-stopwatch-20:before{content:"\e06f"}.fa-store:before{content:"\f54e"}.fa-store-alt:before{content:"\f54f"}.fa-store-alt-slash:before{content:"\e070"}.fa-store-slash:before{content:"\e071"}.fa-strava:before{content:"\f428"}.fa-stream:before{content:"\f550"}.fa-street-view:before{content:"\f21d"}.fa-strikethrough:before{content:"\f0cc"}.fa-stripe:before{content:"\f429"}.fa-stripe-s:before{content:"\f42a"}.fa-stroopwafel:before{content:"\f551"}.fa-studiovinari:before{content:"\f3f8"}.fa-stumbleupon:before{content:"\f1a4"}.fa-stumbleupon-circle:before{content:"\f1a3"}.fa-subscript:before{content:"\f12c"}.fa-subway:before{content:"\f239"}.fa-suitcase:before{content:"\f0f2"}.fa-suitcase-rolling:before{content:"\f5c1"}.fa-sun:before{content:"\f185"}.fa-superpowers:before{content:"\f2dd"}.fa-superscript:before{content:"\f12b"}.fa-supple:before{content:"\f3f9"}.fa-surprise:before{content:"\f5c2"}.fa-suse:before{content:"\f7d6"}.fa-swatchbook:before{content:"\f5c3"}.fa-swift:before{content:"\f8e1"}.fa-swimmer:before{content:"\f5c4"}.fa-swimming-pool:before{content:"\f5c5"}.fa-symfony:before{content:"\f83d"}.fa-synagogue:before{content:"\f69b"}.fa-sync:before{content:"\f021"}.fa-sync-alt:before{content:"\f2f1"}.fa-syringe:before{content:"\f48e"}.fa-table:before{content:"\f0ce"}.fa-table-tennis:before{content:"\f45d"}.fa-tablet:before{content:"\f10a"}.fa-tablet-alt:before{content:"\f3fa"}.fa-tablets:before{content:"\f490"}.fa-tachometer-alt:before{content:"\f3fd"}.fa-tag:before{content:"\f02b"}.fa-tags:before{content:"\f02c"}.fa-tape:before{content:"\f4db"}.fa-tasks:before{content:"\f0ae"}.fa-taxi:before{content:"\f1ba"}.fa-teamspeak:before{content:"\f4f9"}.fa-teeth:before{content:"\f62e"}.fa-teeth-open:before{content:"\f62f"}.fa-telegram:before{content:"\f2c6"}.fa-telegram-plane:before{content:"\f3fe"}.fa-temperature-high:before{content:"\f769"}.fa-temperature-low:before{content:"\f76b"}.fa-tencent-weibo:before{content:"\f1d5"}.fa-tenge:before{content:"\f7d7"}.fa-terminal:before{content:"\f120"}.fa-text-height:before{content:"\f034"}.fa-text-width:before{content:"\f035"}.fa-th:before{content:"\f00a"}.fa-th-large:before{content:"\f009"}.fa-th-list:before{content:"\f00b"}.fa-the-red-yeti:before{content:"\f69d"}.fa-theater-masks:before{content:"\f630"}.fa-themeco:before{content:"\f5c6"}.fa-themeisle:before{content:"\f2b2"}.fa-thermometer:before{content:"\f491"}.fa-thermometer-empty:before{content:"\f2cb"}.fa-thermometer-full:before{content:"\f2c7"}.fa-thermometer-half:before{content:"\f2c9"}.fa-thermometer-quarter:before{content:"\f2ca"}.fa-thermometer-three-quarters:before{content:"\f2c8"}.fa-think-peaks:before{content:"\f731"}.fa-thumbs-down:before{content:"\f165"}.fa-thumbs-up:before{content:"\f164"}.fa-thumbtack:before{content:"\f08d"}.fa-ticket-alt:before{content:"\f3ff"}.fa-tiktok:before{content:"\e07b"}.fa-times:before{content:"\f00d"}.fa-times-circle:before{content:"\f057"}.fa-tint:before{content:"\f043"}.fa-tint-slash:before{content:"\f5c7"}.fa-tired:before{content:"\f5c8"}.fa-toggle-off:before{content:"\f204"}.fa-toggle-on:before{content:"\f205"}.fa-toilet:before{content:"\f7d8"}.fa-toilet-paper:before{content:"\f71e"}.fa-toilet-paper-slash:before{content:"\e072"}.fa-toolbox:before{content:"\f552"}.fa-tools:before{content:"\f7d9"}.fa-tooth:before{content:"\f5c9"}.fa-torah:before{content:"\f6a0"}.fa-torii-gate:before{content:"\f6a1"}.fa-tractor:before{content:"\f722"}.fa-trade-federation:before{content:"\f513"}.fa-trademark:before{content:"\f25c"}.fa-traffic-light:before{content:"\f637"}.fa-trailer:before{content:"\e041"}.fa-train:before{content:"\f238"}.fa-tram:before{content:"\f7da"}.fa-transgender:before{content:"\f224"}.fa-transgender-alt:before{content:"\f225"}.fa-trash:before{content:"\f1f8"}.fa-trash-alt:before{content:"\f2ed"}.fa-trash-restore:before{content:"\f829"}.fa-trash-restore-alt:before{content:"\f82a"}.fa-tree:before{content:"\f1bb"}.fa-trello:before{content:"\f181"}.fa-trophy:before{content:"\f091"}.fa-truck:before{content:"\f0d1"}.fa-truck-loading:before{content:"\f4de"}.fa-truck-monster:before{content:"\f63b"}.fa-truck-moving:before{content:"\f4df"}.fa-truck-pickup:before{content:"\f63c"}.fa-tshirt:before{content:"\f553"}.fa-tty:before{content:"\f1e4"}.fa-tumblr:before{content:"\f173"}.fa-tumblr-square:before{content:"\f174"}.fa-tv:before{content:"\f26c"}.fa-twitch:before{content:"\f1e8"}.fa-twitter:before{content:"\f099"}.fa-twitter-square:before{content:"\f081"}.fa-typo3:before{content:"\f42b"}.fa-uber:before{content:"\f402"}.fa-ubuntu:before{content:"\f7df"}.fa-uikit:before{content:"\f403"}.fa-umbraco:before{content:"\f8e8"}.fa-umbrella:before{content:"\f0e9"}.fa-umbrella-beach:before{content:"\f5ca"}.fa-uncharted:before{content:"\e084"}.fa-underline:before{content:"\f0cd"}.fa-undo:before{content:"\f0e2"}.fa-undo-alt:before{content:"\f2ea"}.fa-uniregistry:before{content:"\f404"}.fa-unity:before{content:"\e049"}.fa-universal-access:before{content:"\f29a"}.fa-university:before{content:"\f19c"}.fa-unlink:before{content:"\f127"}.fa-unlock:before{content:"\f09c"}.fa-unlock-alt:before{content:"\f13e"}.fa-unsplash:before{content:"\e07c"}.fa-untappd:before{content:"\f405"}.fa-upload:before{content:"\f093"}.fa-ups:before{content:"\f7e0"}.fa-usb:before{content:"\f287"}.fa-user:before{content:"\f007"}.fa-user-alt:before{content:"\f406"}.fa-user-alt-slash:before{content:"\f4fa"}.fa-user-astronaut:before{content:"\f4fb"}.fa-user-check:before{content:"\f4fc"}.fa-user-circle:before{content:"\f2bd"}.fa-user-clock:before{content:"\f4fd"}.fa-user-cog:before{content:"\f4fe"}.fa-user-edit:before{content:"\f4ff"}.fa-user-friends:before{content:"\f500"}.fa-user-graduate:before{content:"\f501"}.fa-user-injured:before{content:"\f728"}.fa-user-lock:before{content:"\f502"}.fa-user-md:before{content:"\f0f0"}.fa-user-minus:before{content:"\f503"}.fa-user-ninja:before{content:"\f504"}.fa-user-nurse:before{content:"\f82f"}.fa-user-plus:before{content:"\f234"}.fa-user-secret:before{content:"\f21b"}.fa-user-shield:before{content:"\f505"}.fa-user-slash:before{content:"\f506"}.fa-user-tag:before{content:"\f507"}.fa-user-tie:before{content:"\f508"}.fa-user-times:before{content:"\f235"}.fa-users:before{content:"\f0c0"}.fa-users-cog:before{content:"\f509"}.fa-users-slash:before{content:"\e073"}.fa-usps:before{content:"\f7e1"}.fa-ussunnah:before{content:"\f407"}.fa-utensil-spoon:before{content:"\f2e5"}.fa-utensils:before{content:"\f2e7"}.fa-vaadin:before{content:"\f408"}.fa-vector-square:before{content:"\f5cb"}.fa-venus:before{content:"\f221"}.fa-venus-double:before{content:"\f226"}.fa-venus-mars:before{content:"\f228"}.fa-vest:before{content:"\e085"}.fa-vest-patches:before{content:"\e086"}.fa-viacoin:before{content:"\f237"}.fa-viadeo:before{content:"\f2a9"}.fa-viadeo-square:before{content:"\f2aa"}.fa-vial:before{content:"\f492"}.fa-vials:before{content:"\f493"}.fa-viber:before{content:"\f409"}.fa-video:before{content:"\f03d"}.fa-video-slash:before{content:"\f4e2"}.fa-vihara:before{content:"\f6a7"}.fa-vimeo:before{content:"\f40a"}.fa-vimeo-square:before{content:"\f194"}.fa-vimeo-v:before{content:"\f27d"}.fa-vine:before{content:"\f1ca"}.fa-virus:before{content:"\e074"}.fa-virus-slash:before{content:"\e075"}.fa-viruses:before{content:"\e076"}.fa-vk:before{content:"\f189"}.fa-vnv:before{content:"\f40b"}.fa-voicemail:before{content:"\f897"}.fa-volleyball-ball:before{content:"\f45f"}.fa-volume-down:before{content:"\f027"}.fa-volume-mute:before{content:"\f6a9"}.fa-volume-off:before{content:"\f026"}.fa-volume-up:before{content:"\f028"}.fa-vote-yea:before{content:"\f772"}.fa-vr-cardboard:before{content:"\f729"}.fa-vuejs:before{content:"\f41f"}.fa-walking:before{content:"\f554"}.fa-wallet:before{content:"\f555"}.fa-warehouse:before{content:"\f494"}.fa-watchman-monitoring:before{content:"\e087"}.fa-water:before{content:"\f773"}.fa-wave-square:before{content:"\f83e"}.fa-waze:before{content:"\f83f"}.fa-weebly:before{content:"\f5cc"}.fa-weibo:before{content:"\f18a"}.fa-weight:before{content:"\f496"}.fa-weight-hanging:before{content:"\f5cd"}.fa-weixin:before{content:"\f1d7"}.fa-whatsapp:before{content:"\f232"}.fa-whatsapp-square:before{content:"\f40c"}.fa-wheelchair:before{content:"\f193"}.fa-whmcs:before{content:"\f40d"}.fa-wifi:before{content:"\f1eb"}.fa-wikipedia-w:before{content:"\f266"}.fa-wind:before{content:"\f72e"}.fa-window-close:before{content:"\f410"}.fa-window-maximize:before{content:"\f2d0"}.fa-window-minimize:before{content:"\f2d1"}.fa-window-restore:before{content:"\f2d2"}.fa-windows:before{content:"\f17a"}.fa-wine-bottle:before{content:"\f72f"}.fa-wine-glass:before{content:"\f4e3"}.fa-wine-glass-alt:before{content:"\f5ce"}.fa-wix:before{content:"\f5cf"}.fa-wizards-of-the-coast:before{content:"\f730"}.fa-wodu:before{content:"\e088"}.fa-wolf-pack-battalion:before{content:"\f514"}.fa-won-sign:before{content:"\f159"}.fa-wordpress:before{content:"\f19a"}.fa-wordpress-simple:before{content:"\f411"}.fa-wpbeginner:before{content:"\f297"}.fa-wpexplorer:before{content:"\f2de"}.fa-wpforms:before{content:"\f298"}.fa-wpressr:before{content:"\f3e4"}.fa-wrench:before{content:"\f0ad"}.fa-x-ray:before{content:"\f497"}.fa-xbox:before{content:"\f412"}.fa-xing:before{content:"\f168"}.fa-xing-square:before{content:"\f169"}.fa-y-combinator:before{content:"\f23b"}.fa-yahoo:before{content:"\f19e"}.fa-yammer:before{content:"\f840"}.fa-yandex:before{content:"\f413"}.fa-yandex-international:before{content:"\f414"}.fa-yarn:before{content:"\f7e3"}.fa-yelp:before{content:"\f1e9"}.fa-yen-sign:before{content:"\f157"}.fa-yin-yang:before{content:"\f6ad"}.fa-yoast:before{content:"\f2b1"}.fa-youtube:before{content:"\f167"}.fa-youtube-square:before{content:"\f431"}.fa-zhihu:before{content:"\f63f"}.sr-only{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.sr-only-focusable:active,.sr-only-focusable:focus{clip:auto;height:auto;margin:0;overflow:visible;position:static;width:auto}@font-face{font-family:"Font Awesome 5 Brands";font-style:normal;font-weight:400;font-display:block;src:url(../webfonts/fa-brands-400.eot);src:url(../webfonts/fa-brands-400.eot?#iefix) format("embedded-opentype"),url(../webfonts/fa-brands-400.woff2) format("woff2"),url(../webfonts/fa-brands-400.woff) format("woff"),url(../webfonts/fa-brands-400.ttf) format("truetype"),url(../webfonts/fa-brands-400.svg#fontawesome) format("svg")}.fab{font-family:"Font Awesome 5 Brands"}@font-face{font-family:"Font Awesome 5 Free";font-style:normal;font-weight:400;font-display:block;src:url(../webfonts/fa-regular-400.eot);src:url(../webfonts/fa-regular-400.eot?#iefix) format("embedded-opentype"),url(../webfonts/fa-regular-400.woff2) format("woff2"),url(../webfonts/fa-regular-400.woff) format("woff"),url(../webfonts/fa-regular-400.ttf) format("truetype"),url(../webfonts/fa-regular-400.svg#fontawesome) format("svg")}.fab,.far{font-weight:400}@font-face{font-family:"Font Awesome 5 Free";font-style:normal;font-weight:900;font-display:block;src:url(../webfonts/fa-solid-900.eot);src:url(../webfonts/fa-solid-900.eot?#iefix) format("embedded-opentype"),url(../webfonts/fa-solid-900.woff2) format("woff2"),url(../webfonts/fa-solid-900.woff) format("woff"),url(../webfonts/fa-solid-900.ttf) format("truetype"),url(../webfonts/fa-solid-900.svg#fontawesome) format("svg")}.fa,.far,.fas{font-family:"Font Awesome 5 Free"}.fa,.fas{font-weight:900} \ No newline at end of file diff --git a/assets/css/images/overlay.png b/assets/css/images/overlay.png new file mode 100644 index 0000000..a561943 Binary files /dev/null and b/assets/css/images/overlay.png differ diff --git a/assets/css/main.css b/assets/css/main.css new file mode 100644 index 0000000..15240b6 --- /dev/null +++ b/assets/css/main.css @@ -0,0 +1,3315 @@ +@import "fontawesome-all.min.css"; +@import "https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400"; +html, body, div, span, applet, object, +iframe, h1, h2, h3, h4, h5, h6, p, blockquote, +pre, a, abbr, acronym, address, big, cite, +code, del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, b, +u, i, center, dl, dt, dd, ol, ul, li, fieldset, +form, label, legend, table, caption, tbody, +tfoot, thead, tr, th, td, article, aside, +canvas, details, embed, figure, figcaption, +footer, header, hgroup, menu, nav, output, ruby, +section, summary, time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} + +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} + +body { + line-height: 1; +} + +ol, ul { + list-style: none; +} + +blockquote, q { + quotes: none; +} +blockquote:before, blockquote:after, q:before, q:after { + content: ""; + content: none; +} + +table { + border-collapse: collapse; + border-spacing: 0; +} + +body { + -webkit-text-size-adjust: none; +} + +mark { + background-color: transparent; + color: inherit; +} + +input::-moz-focus-inner { + border: 0; + padding: 0; +} + +input, select, textarea { + -moz-appearance: none; + -webkit-appearance: none; + -ms-appearance: none; + appearance: none; +} + +/* Basic */ +@-ms-viewport { + width: device-width; +} +body { + -ms-overflow-style: scrollbar; +} + +@media screen and (max-width: 480px) { + html, body { + min-width: 320px; + } +} +html { + box-sizing: border-box; +} + +*, *:before, *:after { + box-sizing: inherit; +} + +body { + background-color: #935d8c; + background-image: url("images/overlay.png"), -moz-linear-gradient(45deg, #ae2d68 15%, #422680 85%); + background-image: url("images/overlay.png"), -webkit-linear-gradient(45deg, #ae2d68 15%, #422680 85%); + background-image: url("images/overlay.png"), -ms-linear-gradient(45deg, #ae2d68 15%, #422680 85%); + background-image: url("images/overlay.png"), linear-gradient(45deg, #ae2d68 15%, #422680 85%); +} +body.is-preload *, body.is-preload *:before, body.is-preload *:after { + -moz-animation: none !important; + -webkit-animation: none !important; + -ms-animation: none !important; + animation: none !important; + -moz-transition: none !important; + -webkit-transition: none !important; + -ms-transition: none !important; + transition: none !important; +} + +/* Type */ +body { + background-color: #935d8c; + color: rgba(255, 255, 255, 0.65); +} + +body, +input, +select, +textarea { + font-family: "Source Sans Pro", Helvetica, sans-serif; + font-size: 18pt; + font-weight: 300; + line-height: 1.65; +} +@media screen and (max-width: 1680px) { + body, + input, + select, + textarea { + font-size: 15pt; + } +} +@media screen and (max-width: 1280px) { + body, + input, + select, + textarea { + font-size: 13pt; + } +} +@media screen and (max-width: 360px) { + body, + input, + select, + textarea { + font-size: 12pt; + } +} + +a { + -moz-transition: color 0.2s ease, border-bottom 0.2s ease; + -webkit-transition: color 0.2s ease, border-bottom 0.2s ease; + -ms-transition: color 0.2s ease, border-bottom 0.2s ease; + transition: color 0.2s ease, border-bottom 0.2s ease; + text-decoration: none; + /* border-bottom: dotted 1px; */ + color: inherit; +} +a:hover { + border-bottom-color: transparent; +} + +strong, +b { + font-weight: 400; +} + +em, +i { + font-style: italic; +} + +p { + margin: 0 0 2em 0; +} +p.content { + -moz-columns: 20em 2; + -webkit-columns: 20em 2; + -ms-columns: 20em 2; + columns: 20em 2; + -moz-column-gap: 2em; + -webkit-column-gap: 2em; + -ms-column-gap: 2em; + column-gap: 2em; + text-align: justify; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + font-weight: 300; + line-height: 1.5; + margin: 0 0 0.7em 0; + letter-spacing: -0.025em; +} +h1 a, +h2 a, +h3 a, +h4 a, +h5 a, +h6 a { + color: inherit; + text-decoration: none; +} + +h1 { + font-size: 2.5em; + line-height: 1.2; +} + +h2 { + font-size: 1.5em; +} + +h3 { + font-size: 1.25em; +} + +h4 { + font-size: 1.1em; +} + +h5 { + font-size: 0.9em; +} + +h6 { + font-size: 0.7em; +} + +@media screen and (max-width: 736px) { + h1 { + font-size: 2em; + } +} +sub { + font-size: 0.8em; + position: relative; + top: 0.5em; +} + +sup { + font-size: 0.8em; + position: relative; + top: -0.5em; +} + +blockquote { + border-left: solid 4px; + font-style: italic; + margin: 0 0 2em 0; + padding: 0.5em 0 0.5em 2em; +} + +code { + border-radius: 10px; + border: solid 1px; + font-family: "Courier New", monospace; + font-size: 0.9em; + margin: 0 0.25em; + padding: 0.25em 0.65em; +} + +pre { + -webkit-overflow-scrolling: touch; + font-family: "Courier New", monospace; + font-size: 0.9em; + margin: 0 0 2em 0; +} +pre code { + display: block; + line-height: 1.75; + padding: 1em 1.5em; + overflow-x: auto; +} + +hr { + border: 0; + border-bottom: solid 1px; + margin: 2em 0; +} +hr.major { + margin: 3em 0; +} + +.align-left { + text-align: left; +} + +.align-center { + text-align: center; +} + +.align-right { + text-align: right; +} + +input, +select, +textarea { + color: #ffffff; +} + +a:hover { + color: #ffffff; +} + +strong, +b { + color: #ffffff; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + color: #ffffff; +} + +blockquote { + border-left-color: rgba(255, 255, 255, 0.35); +} + +code { + background: rgba(255, 255, 255, 0.075); + border-color: rgba(255, 255, 255, 0.35); +} + +hr { + border-bottom-color: rgba(255, 255, 255, 0.35); +} + +/* Row */ +.row { + display: flex; + flex-wrap: wrap; + box-sizing: border-box; + align-items: stretch; +} +.row > * { + box-sizing: border-box; +} +.row.gtr-uniform > * > :last-child { + margin-bottom: 0; +} +.row.aln-left { + justify-content: flex-start; +} +.row.aln-center { + justify-content: center; +} +.row.aln-right { + justify-content: flex-end; +} +.row.aln-top { + align-items: flex-start; +} +.row.aln-middle { + align-items: center; +} +.row.aln-bottom { + align-items: flex-end; +} +.row > .imp { + order: -1; +} +.row > .col-1 { + width: 8.3333333333%; +} +.row > .off-1 { + margin-left: 8.3333333333%; +} +.row > .col-2 { + width: 16.6666666667%; +} +.row > .off-2 { + margin-left: 16.6666666667%; +} +.row > .col-3 { + width: 25%; +} +.row > .off-3 { + margin-left: 25%; +} +.row > .col-4 { + width: 33.3333333333%; +} +.row > .off-4 { + margin-left: 33.3333333333%; +} +.row > .col-5 { + width: 41.6666666667%; +} +.row > .off-5 { + margin-left: 41.6666666667%; +} +.row > .col-6 { + width: 50%; +} +.row > .off-6 { + margin-left: 50%; +} +.row > .col-7 { + width: 58.3333333333%; +} +.row > .off-7 { + margin-left: 58.3333333333%; +} +.row > .col-8 { + width: 66.6666666667%; +} +.row > .off-8 { + margin-left: 66.6666666667%; +} +.row > .col-9 { + width: 75%; +} +.row > .off-9 { + margin-left: 75%; +} +.row > .col-10 { + width: 83.3333333333%; +} +.row > .off-10 { + margin-left: 83.3333333333%; +} +.row > .col-11 { + width: 91.6666666667%; +} +.row > .off-11 { + margin-left: 91.6666666667%; +} +.row > .col-12 { + width: 100%; +} +.row > .off-12 { + margin-left: 100%; +} +.row.gtr-0 { + margin-top: 0; + margin-left: 0em; +} +.row.gtr-0 > * { + padding: 0 0 0 0em; +} +.row.gtr-0.gtr-uniform { + margin-top: 0em; +} +.row.gtr-0.gtr-uniform > * { + padding-top: 0em; +} +.row.gtr-25 { + margin-top: 0; + margin-left: -0.375em; +} +.row.gtr-25 > * { + padding: 0 0 0 0.375em; +} +.row.gtr-25.gtr-uniform { + margin-top: -0.375em; +} +.row.gtr-25.gtr-uniform > * { + padding-top: 0.375em; +} +.row.gtr-50 { + margin-top: 0; + margin-left: -0.75em; +} +.row.gtr-50 > * { + padding: 0 0 0 0.75em; +} +.row.gtr-50.gtr-uniform { + margin-top: -0.75em; +} +.row.gtr-50.gtr-uniform > * { + padding-top: 0.75em; +} +.row { + margin-top: 0; + margin-left: -1.5em; +} +.row > * { + padding: 0 0 0 1.5em; +} +.row.gtr-uniform { + margin-top: -1.5em; +} +.row.gtr-uniform > * { + padding-top: 1.5em; +} +.row.gtr-150 { + margin-top: 0; + margin-left: -2.25em; +} +.row.gtr-150 > * { + padding: 0 0 0 2.25em; +} +.row.gtr-150.gtr-uniform { + margin-top: -2.25em; +} +.row.gtr-150.gtr-uniform > * { + padding-top: 2.25em; +} +.row.gtr-200 { + margin-top: 0; + margin-left: -3em; +} +.row.gtr-200 > * { + padding: 0 0 0 3em; +} +.row.gtr-200.gtr-uniform { + margin-top: -3em; +} +.row.gtr-200.gtr-uniform > * { + padding-top: 3em; +} +@media screen and (max-width: 1680px) { + .row { + display: flex; + flex-wrap: wrap; + box-sizing: border-box; + align-items: stretch; + } + .row > * { + box-sizing: border-box; + } + .row.gtr-uniform > * > :last-child { + margin-bottom: 0; + } + .row.aln-left { + justify-content: flex-start; + } + .row.aln-center { + justify-content: center; + } + .row.aln-right { + justify-content: flex-end; + } + .row.aln-top { + align-items: flex-start; + } + .row.aln-middle { + align-items: center; + } + .row.aln-bottom { + align-items: flex-end; + } + .row > .imp-xlarge { + order: -1; + } + .row > .col-1-xlarge { + width: 8.3333333333%; + } + .row > .off-1-xlarge { + margin-left: 8.3333333333%; + } + .row > .col-2-xlarge { + width: 16.6666666667%; + } + .row > .off-2-xlarge { + margin-left: 16.6666666667%; + } + .row > .col-3-xlarge { + width: 25%; + } + .row > .off-3-xlarge { + margin-left: 25%; + } + .row > .col-4-xlarge { + width: 33.3333333333%; + } + .row > .off-4-xlarge { + margin-left: 33.3333333333%; + } + .row > .col-5-xlarge { + width: 41.6666666667%; + } + .row > .off-5-xlarge { + margin-left: 41.6666666667%; + } + .row > .col-6-xlarge { + width: 50%; + } + .row > .off-6-xlarge { + margin-left: 50%; + } + .row > .col-7-xlarge { + width: 58.3333333333%; + } + .row > .off-7-xlarge { + margin-left: 58.3333333333%; + } + .row > .col-8-xlarge { + width: 66.6666666667%; + } + .row > .off-8-xlarge { + margin-left: 66.6666666667%; + } + .row > .col-9-xlarge { + width: 75%; + } + .row > .off-9-xlarge { + margin-left: 75%; + } + .row > .col-10-xlarge { + width: 83.3333333333%; + } + .row > .off-10-xlarge { + margin-left: 83.3333333333%; + } + .row > .col-11-xlarge { + width: 91.6666666667%; + } + .row > .off-11-xlarge { + margin-left: 91.6666666667%; + } + .row > .col-12-xlarge { + width: 100%; + } + .row > .off-12-xlarge { + margin-left: 100%; + } + .row.gtr-0 { + margin-top: 0; + margin-left: 0em; + } + .row.gtr-0 > * { + padding: 0 0 0 0em; + } + .row.gtr-0.gtr-uniform { + margin-top: 0em; + } + .row.gtr-0.gtr-uniform > * { + padding-top: 0em; + } + .row.gtr-25 { + margin-top: 0; + margin-left: -0.375em; + } + .row.gtr-25 > * { + padding: 0 0 0 0.375em; + } + .row.gtr-25.gtr-uniform { + margin-top: -0.375em; + } + .row.gtr-25.gtr-uniform > * { + padding-top: 0.375em; + } + .row.gtr-50 { + margin-top: 0; + margin-left: -0.75em; + } + .row.gtr-50 > * { + padding: 0 0 0 0.75em; + } + .row.gtr-50.gtr-uniform { + margin-top: -0.75em; + } + .row.gtr-50.gtr-uniform > * { + padding-top: 0.75em; + } + .row { + margin-top: 0; + margin-left: -1.5em; + } + .row > * { + padding: 0 0 0 1.5em; + } + .row.gtr-uniform { + margin-top: -1.5em; + } + .row.gtr-uniform > * { + padding-top: 1.5em; + } + .row.gtr-150 { + margin-top: 0; + margin-left: -2.25em; + } + .row.gtr-150 > * { + padding: 0 0 0 2.25em; + } + .row.gtr-150.gtr-uniform { + margin-top: -2.25em; + } + .row.gtr-150.gtr-uniform > * { + padding-top: 2.25em; + } + .row.gtr-200 { + margin-top: 0; + margin-left: -3em; + } + .row.gtr-200 > * { + padding: 0 0 0 3em; + } + .row.gtr-200.gtr-uniform { + margin-top: -3em; + } + .row.gtr-200.gtr-uniform > * { + padding-top: 3em; + } +} +@media screen and (max-width: 1280px) { + .row { + display: flex; + flex-wrap: wrap; + box-sizing: border-box; + align-items: stretch; + } + .row > * { + box-sizing: border-box; + } + .row.gtr-uniform > * > :last-child { + margin-bottom: 0; + } + .row.aln-left { + justify-content: flex-start; + } + .row.aln-center { + justify-content: center; + } + .row.aln-right { + justify-content: flex-end; + } + .row.aln-top { + align-items: flex-start; + } + .row.aln-middle { + align-items: center; + } + .row.aln-bottom { + align-items: flex-end; + } + .row > .imp-large { + order: -1; + } + .row > .col-1-large { + width: 8.3333333333%; + } + .row > .off-1-large { + margin-left: 8.3333333333%; + } + .row > .col-2-large { + width: 16.6666666667%; + } + .row > .off-2-large { + margin-left: 16.6666666667%; + } + .row > .col-3-large { + width: 25%; + } + .row > .off-3-large { + margin-left: 25%; + } + .row > .col-4-large { + width: 33.3333333333%; + } + .row > .off-4-large { + margin-left: 33.3333333333%; + } + .row > .col-5-large { + width: 41.6666666667%; + } + .row > .off-5-large { + margin-left: 41.6666666667%; + } + .row > .col-6-large { + width: 50%; + } + .row > .off-6-large { + margin-left: 50%; + } + .row > .col-7-large { + width: 58.3333333333%; + } + .row > .off-7-large { + margin-left: 58.3333333333%; + } + .row > .col-8-large { + width: 66.6666666667%; + } + .row > .off-8-large { + margin-left: 66.6666666667%; + } + .row > .col-9-large { + width: 75%; + } + .row > .off-9-large { + margin-left: 75%; + } + .row > .col-10-large { + width: 83.3333333333%; + } + .row > .off-10-large { + margin-left: 83.3333333333%; + } + .row > .col-11-large { + width: 91.6666666667%; + } + .row > .off-11-large { + margin-left: 91.6666666667%; + } + .row > .col-12-large { + width: 100%; + } + .row > .off-12-large { + margin-left: 100%; + } + .row.gtr-0 { + margin-top: 0; + margin-left: 0em; + } + .row.gtr-0 > * { + padding: 0 0 0 0em; + } + .row.gtr-0.gtr-uniform { + margin-top: 0em; + } + .row.gtr-0.gtr-uniform > * { + padding-top: 0em; + } + .row.gtr-25 { + margin-top: 0; + margin-left: -0.375em; + } + .row.gtr-25 > * { + padding: 0 0 0 0.375em; + } + .row.gtr-25.gtr-uniform { + margin-top: -0.375em; + } + .row.gtr-25.gtr-uniform > * { + padding-top: 0.375em; + } + .row.gtr-50 { + margin-top: 0; + margin-left: -0.75em; + } + .row.gtr-50 > * { + padding: 0 0 0 0.75em; + } + .row.gtr-50.gtr-uniform { + margin-top: -0.75em; + } + .row.gtr-50.gtr-uniform > * { + padding-top: 0.75em; + } + .row { + margin-top: 0; + margin-left: -1.5em; + } + .row > * { + padding: 0 0 0 1.5em; + } + .row.gtr-uniform { + margin-top: -1.5em; + } + .row.gtr-uniform > * { + padding-top: 1.5em; + } + .row.gtr-150 { + margin-top: 0; + margin-left: -2.25em; + } + .row.gtr-150 > * { + padding: 0 0 0 2.25em; + } + .row.gtr-150.gtr-uniform { + margin-top: -2.25em; + } + .row.gtr-150.gtr-uniform > * { + padding-top: 2.25em; + } + .row.gtr-200 { + margin-top: 0; + margin-left: -3em; + } + .row.gtr-200 > * { + padding: 0 0 0 3em; + } + .row.gtr-200.gtr-uniform { + margin-top: -3em; + } + .row.gtr-200.gtr-uniform > * { + padding-top: 3em; + } +} +@media screen and (max-width: 980px) { + .row { + display: flex; + flex-wrap: wrap; + box-sizing: border-box; + align-items: stretch; + } + .row > * { + box-sizing: border-box; + } + .row.gtr-uniform > * > :last-child { + margin-bottom: 0; + } + .row.aln-left { + justify-content: flex-start; + } + .row.aln-center { + justify-content: center; + } + .row.aln-right { + justify-content: flex-end; + } + .row.aln-top { + align-items: flex-start; + } + .row.aln-middle { + align-items: center; + } + .row.aln-bottom { + align-items: flex-end; + } + .row > .imp-medium { + order: -1; + } + .row > .col-1-medium { + width: 8.3333333333%; + } + .row > .off-1-medium { + margin-left: 8.3333333333%; + } + .row > .col-2-medium { + width: 16.6666666667%; + } + .row > .off-2-medium { + margin-left: 16.6666666667%; + } + .row > .col-3-medium { + width: 25%; + } + .row > .off-3-medium { + margin-left: 25%; + } + .row > .col-4-medium { + width: 33.3333333333%; + } + .row > .off-4-medium { + margin-left: 33.3333333333%; + } + .row > .col-5-medium { + width: 41.6666666667%; + } + .row > .off-5-medium { + margin-left: 41.6666666667%; + } + .row > .col-6-medium { + width: 50%; + } + .row > .off-6-medium { + margin-left: 50%; + } + .row > .col-7-medium { + width: 58.3333333333%; + } + .row > .off-7-medium { + margin-left: 58.3333333333%; + } + .row > .col-8-medium { + width: 66.6666666667%; + } + .row > .off-8-medium { + margin-left: 66.6666666667%; + } + .row > .col-9-medium { + width: 75%; + } + .row > .off-9-medium { + margin-left: 75%; + } + .row > .col-10-medium { + width: 83.3333333333%; + } + .row > .off-10-medium { + margin-left: 83.3333333333%; + } + .row > .col-11-medium { + width: 91.6666666667%; + } + .row > .off-11-medium { + margin-left: 91.6666666667%; + } + .row > .col-12-medium { + width: 100%; + } + .row > .off-12-medium { + margin-left: 100%; + } + .row.gtr-0 { + margin-top: 0; + margin-left: 0em; + } + .row.gtr-0 > * { + padding: 0 0 0 0em; + } + .row.gtr-0.gtr-uniform { + margin-top: 0em; + } + .row.gtr-0.gtr-uniform > * { + padding-top: 0em; + } + .row.gtr-25 { + margin-top: 0; + margin-left: -0.375em; + } + .row.gtr-25 > * { + padding: 0 0 0 0.375em; + } + .row.gtr-25.gtr-uniform { + margin-top: -0.375em; + } + .row.gtr-25.gtr-uniform > * { + padding-top: 0.375em; + } + .row.gtr-50 { + margin-top: 0; + margin-left: -0.75em; + } + .row.gtr-50 > * { + padding: 0 0 0 0.75em; + } + .row.gtr-50.gtr-uniform { + margin-top: -0.75em; + } + .row.gtr-50.gtr-uniform > * { + padding-top: 0.75em; + } + .row { + margin-top: 0; + margin-left: -1.5em; + } + .row > * { + padding: 0 0 0 1.5em; + } + .row.gtr-uniform { + margin-top: -1.5em; + } + .row.gtr-uniform > * { + padding-top: 1.5em; + } + .row.gtr-150 { + margin-top: 0; + margin-left: -2.25em; + } + .row.gtr-150 > * { + padding: 0 0 0 2.25em; + } + .row.gtr-150.gtr-uniform { + margin-top: -2.25em; + } + .row.gtr-150.gtr-uniform > * { + padding-top: 2.25em; + } + .row.gtr-200 { + margin-top: 0; + margin-left: -3em; + } + .row.gtr-200 > * { + padding: 0 0 0 3em; + } + .row.gtr-200.gtr-uniform { + margin-top: -3em; + } + .row.gtr-200.gtr-uniform > * { + padding-top: 3em; + } +} +@media screen and (max-width: 736px) { + .row { + display: flex; + flex-wrap: wrap; + box-sizing: border-box; + align-items: stretch; + } + .row > * { + box-sizing: border-box; + } + .row.gtr-uniform > * > :last-child { + margin-bottom: 0; + } + .row.aln-left { + justify-content: flex-start; + } + .row.aln-center { + justify-content: center; + } + .row.aln-right { + justify-content: flex-end; + } + .row.aln-top { + align-items: flex-start; + } + .row.aln-middle { + align-items: center; + } + .row.aln-bottom { + align-items: flex-end; + } + .row > .imp-small { + order: -1; + } + .row > .col-1-small { + width: 8.3333333333%; + } + .row > .off-1-small { + margin-left: 8.3333333333%; + } + .row > .col-2-small { + width: 16.6666666667%; + } + .row > .off-2-small { + margin-left: 16.6666666667%; + } + .row > .col-3-small { + width: 25%; + } + .row > .off-3-small { + margin-left: 25%; + } + .row > .col-4-small { + width: 33.3333333333%; + } + .row > .off-4-small { + margin-left: 33.3333333333%; + } + .row > .col-5-small { + width: 41.6666666667%; + } + .row > .off-5-small { + margin-left: 41.6666666667%; + } + .row > .col-6-small { + width: 50%; + } + .row > .off-6-small { + margin-left: 50%; + } + .row > .col-7-small { + width: 58.3333333333%; + } + .row > .off-7-small { + margin-left: 58.3333333333%; + } + .row > .col-8-small { + width: 66.6666666667%; + } + .row > .off-8-small { + margin-left: 66.6666666667%; + } + .row > .col-9-small { + width: 75%; + } + .row > .off-9-small { + margin-left: 75%; + } + .row > .col-10-small { + width: 83.3333333333%; + } + .row > .off-10-small { + margin-left: 83.3333333333%; + } + .row > .col-11-small { + width: 91.6666666667%; + } + .row > .off-11-small { + margin-left: 91.6666666667%; + } + .row > .col-12-small { + width: 100%; + } + .row > .off-12-small { + margin-left: 100%; + } + .row.gtr-0 { + margin-top: 0; + margin-left: 0em; + } + .row.gtr-0 > * { + padding: 0 0 0 0em; + } + .row.gtr-0.gtr-uniform { + margin-top: 0em; + } + .row.gtr-0.gtr-uniform > * { + padding-top: 0em; + } + .row.gtr-25 { + margin-top: 0; + margin-left: -0.25em; + } + .row.gtr-25 > * { + padding: 0 0 0 0.25em; + } + .row.gtr-25.gtr-uniform { + margin-top: -0.25em; + } + .row.gtr-25.gtr-uniform > * { + padding-top: 0.25em; + } + .row.gtr-50 { + margin-top: 0; + margin-left: -0.5em; + } + .row.gtr-50 > * { + padding: 0 0 0 0.5em; + } + .row.gtr-50.gtr-uniform { + margin-top: -0.5em; + } + .row.gtr-50.gtr-uniform > * { + padding-top: 0.5em; + } + .row { + margin-top: 0; + margin-left: -1em; + } + .row > * { + padding: 0 0 0 1em; + } + .row.gtr-uniform { + margin-top: -1em; + } + .row.gtr-uniform > * { + padding-top: 1em; + } + .row.gtr-150 { + margin-top: 0; + margin-left: -1.5em; + } + .row.gtr-150 > * { + padding: 0 0 0 1.5em; + } + .row.gtr-150.gtr-uniform { + margin-top: -1.5em; + } + .row.gtr-150.gtr-uniform > * { + padding-top: 1.5em; + } + .row.gtr-200 { + margin-top: 0; + margin-left: -2em; + } + .row.gtr-200 > * { + padding: 0 0 0 2em; + } + .row.gtr-200.gtr-uniform { + margin-top: -2em; + } + .row.gtr-200.gtr-uniform > * { + padding-top: 2em; + } +} +@media screen and (max-width: 480px) { + .row { + display: flex; + flex-wrap: wrap; + box-sizing: border-box; + align-items: stretch; + } + .row > * { + box-sizing: border-box; + } + .row.gtr-uniform > * > :last-child { + margin-bottom: 0; + } + .row.aln-left { + justify-content: flex-start; + } + .row.aln-center { + justify-content: center; + } + .row.aln-right { + justify-content: flex-end; + } + .row.aln-top { + align-items: flex-start; + } + .row.aln-middle { + align-items: center; + } + .row.aln-bottom { + align-items: flex-end; + } + .row > .imp-xsmall { + order: -1; + } + .row > .col-1-xsmall { + width: 8.3333333333%; + } + .row > .off-1-xsmall { + margin-left: 8.3333333333%; + } + .row > .col-2-xsmall { + width: 16.6666666667%; + } + .row > .off-2-xsmall { + margin-left: 16.6666666667%; + } + .row > .col-3-xsmall { + width: 25%; + } + .row > .off-3-xsmall { + margin-left: 25%; + } + .row > .col-4-xsmall { + width: 33.3333333333%; + } + .row > .off-4-xsmall { + margin-left: 33.3333333333%; + } + .row > .col-5-xsmall { + width: 41.6666666667%; + } + .row > .off-5-xsmall { + margin-left: 41.6666666667%; + } + .row > .col-6-xsmall { + width: 50%; + } + .row > .off-6-xsmall { + margin-left: 50%; + } + .row > .col-7-xsmall { + width: 58.3333333333%; + } + .row > .off-7-xsmall { + margin-left: 58.3333333333%; + } + .row > .col-8-xsmall { + width: 66.6666666667%; + } + .row > .off-8-xsmall { + margin-left: 66.6666666667%; + } + .row > .col-9-xsmall { + width: 75%; + } + .row > .off-9-xsmall { + margin-left: 75%; + } + .row > .col-10-xsmall { + width: 83.3333333333%; + } + .row > .off-10-xsmall { + margin-left: 83.3333333333%; + } + .row > .col-11-xsmall { + width: 91.6666666667%; + } + .row > .off-11-xsmall { + margin-left: 91.6666666667%; + } + .row > .col-12-xsmall { + width: 100%; + } + .row > .off-12-xsmall { + margin-left: 100%; + } + .row.gtr-0 { + margin-top: 0; + margin-left: 0em; + } + .row.gtr-0 > * { + padding: 0 0 0 0em; + } + .row.gtr-0.gtr-uniform { + margin-top: 0em; + } + .row.gtr-0.gtr-uniform > * { + padding-top: 0em; + } + .row.gtr-25 { + margin-top: 0; + margin-left: -0.3125em; + } + .row.gtr-25 > * { + padding: 0 0 0 0.3125em; + } + .row.gtr-25.gtr-uniform { + margin-top: -0.3125em; + } + .row.gtr-25.gtr-uniform > * { + padding-top: 0.3125em; + } + .row.gtr-50 { + margin-top: 0; + margin-left: -0.625em; + } + .row.gtr-50 > * { + padding: 0 0 0 0.625em; + } + .row.gtr-50.gtr-uniform { + margin-top: -0.625em; + } + .row.gtr-50.gtr-uniform > * { + padding-top: 0.625em; + } + .row { + margin-top: 0; + margin-left: -1.25em; + } + .row > * { + padding: 0 0 0 1.25em; + } + .row.gtr-uniform { + margin-top: -1.25em; + } + .row.gtr-uniform > * { + padding-top: 1.25em; + } + .row.gtr-150 { + margin-top: 0; + margin-left: -1.875em; + } + .row.gtr-150 > * { + padding: 0 0 0 1.875em; + } + .row.gtr-150.gtr-uniform { + margin-top: -1.875em; + } + .row.gtr-150.gtr-uniform > * { + padding-top: 1.875em; + } + .row.gtr-200 { + margin-top: 0; + margin-left: -2.5em; + } + .row.gtr-200 > * { + padding: 0 0 0 2.5em; + } + .row.gtr-200.gtr-uniform { + margin-top: -2.5em; + } + .row.gtr-200.gtr-uniform > * { + padding-top: 2.5em; + } +} + +/* Box */ +.box { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + border-radius: 10px; + border: solid; + margin-bottom: 2em; + padding: 1.5em; + width: 75vw; +} +.box > :last-child, +.box > :last-child > :last-child, +.box > :last-child > :last-child > :last-child { + margin-bottom: 0; +} +.box.alt { + border: 0; + border-radius: 0; + padding: 0; +} +.box .title { + font-size: 1.5em; +} +.box img { + width: 80%; + max-width: 600px; + height: auto; +} +.box .date { + font-size: 1em; +} +.box .description { + font-size: 1.1em; + padding-top: 1em; +} + +.box { + border-color: rgba(255, 255, 255, 0.35); +} + +/* Card */ +.card-container { + display: flex; + flex-wrap: wrap; + justify-content: center; +} + +.box-wrapper { + margin: 0; + padding: 0; +} + +.card-container .box-wrapper { + flex: 0 0 50%; +} + +.card { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + border-radius: 10px; + border: solid #ddd; + margin-bottom: 2em; + padding: 1.5em; + margin: 1.5em; + width: 100%; +} +.card > :last-child, +.card > :last-child > :last-child, +.card > :last-child > :last-child > :last-child { + margin-bottom: 0; +} +.card.alt { + border: 0; + border-radius: 0; + padding: 0; +} +.card .title { + font-size: 1.5em; +} +.card img { + width: 80%; + max-width: 600px; + height: auto; +} +.card .description { + font-size: 1.1em; + padding-top: 1em; +} +.card .date { + font-size: 1em; + margin-top: auto; +} + +@media screen and (max-width: 736px) { + .card-container .box-wrapper { + flex: 0 0 100%; + } +} +/* Button */ +input[type=submit], +input[type=reset], +input[type=button], +button, +.button { + -moz-appearance: none; + -webkit-appearance: none; + -ms-appearance: none; + appearance: none; + -moz-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; + -webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; + -ms-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; + transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; + border-radius: 10px; + border: 0; + cursor: pointer; + display: inline-block; + font-weight: 300; + height: 2.75em; + line-height: 2.75em; + min-width: 9.25em; + padding: 0 1.5em; + text-align: center; + text-decoration: none; + white-space: nowrap; +} +input[type=submit].icon, +input[type=reset].icon, +input[type=button].icon, +button.icon, +.button.icon { + padding-left: 1.35em; +} +input[type=submit].icon:before, +input[type=reset].icon:before, +input[type=button].icon:before, +button.icon:before, +.button.icon:before { + margin-right: 0.5em; +} +input[type=submit].fit, +input[type=reset].fit, +input[type=button].fit, +button.fit, +.button.fit { + width: 100%; +} +input[type=submit].small, +input[type=reset].small, +input[type=button].small, +button.small, +.button.small { + font-size: 0.8em; +} +input[type=submit].large, +input[type=reset].large, +input[type=button].large, +button.large, +.button.large { + font-size: 1.35em; +} +input[type=submit].disabled, input[type=submit]:disabled, +input[type=reset].disabled, +input[type=reset]:disabled, +input[type=button].disabled, +input[type=button]:disabled, +button.disabled, +button:disabled, +.button.disabled, +.button:disabled { + pointer-events: none; + opacity: 0.25; +} +@media screen and (max-width: 736px) { + input[type=submit], + input[type=reset], + input[type=button], + button, + .button { + min-width: 0; + } +} + +input[type=submit], +input[type=reset], +input[type=button], +button, +.button { + background-color: transparent; + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35); + color: #ffffff !important; +} +input[type=submit]:hover, +input[type=reset]:hover, +input[type=button]:hover, +button:hover, +.button:hover { + background-color: rgba(255, 255, 255, 0.075); +} +input[type=submit]:active, +input[type=reset]:active, +input[type=button]:active, +button:active, +.button:active { + background-color: rgba(255, 255, 255, 0.2); +} +input[type=submit].icon:before, +input[type=reset].icon:before, +input[type=button].icon:before, +button.icon:before, +.button.icon:before { + color: rgba(255, 255, 255, 0.5); +} +input[type=submit].primary, +input[type=reset].primary, +input[type=button].primary, +button.primary, +.button.primary { + background-color: #8cc9f0; + color: #ffffff !important; + box-shadow: none; +} +input[type=submit].primary:hover, +input[type=reset].primary:hover, +input[type=button].primary:hover, +button.primary:hover, +.button.primary:hover { + background-color: #9acff2; +} +input[type=submit].primary:active, +input[type=reset].primary:active, +input[type=button].primary:active, +button.primary:active, +.button.primary:active { + background-color: #7ec3ee; +} +input[type=submit].primary.icon:before, +input[type=reset].primary.icon:before, +input[type=button].primary.icon:before, +button.primary.icon:before, +.button.primary.icon:before { + color: #ffffff !important; +} + +/* Form */ +form { + margin: 0 0 2em 0; +} + +label { + display: block; + font-size: 0.9em; + font-weight: 400; + margin: 0 0 1em 0; +} + +input[type=text], +input[type=password], +input[type=email], +select, +textarea { + -moz-appearance: none; + -webkit-appearance: none; + -ms-appearance: none; + appearance: none; + border-radius: 10px; + border: solid 1px; + color: inherit; + display: block; + outline: 0; + padding: 0 1em; + text-decoration: none; + width: 100%; +} +input[type=text]:invalid, +input[type=password]:invalid, +input[type=email]:invalid, +select:invalid, +textarea:invalid { + box-shadow: none; +} + +select { + background-size: 1.25rem; + background-repeat: no-repeat; + background-position: calc(100% - 1rem) center; + height: 2.75em; + padding-right: 2.75em; + text-overflow: ellipsis; +} +select:focus::-ms-value { + background-color: transparent; +} +select::-ms-expand { + display: none; +} + +input[type=text], +input[type=password], +input[type=email], +select { + height: 2.75em; +} + +textarea { + padding: 0.75em 1em; +} + +input[type=checkbox], +input[type=radio] { + -moz-appearance: none; + -webkit-appearance: none; + -ms-appearance: none; + appearance: none; + display: block; + float: left; + margin-right: -2em; + opacity: 0; + width: 1em; + z-index: -1; +} +input[type=checkbox] + label, +input[type=radio] + label { + text-decoration: none; + cursor: pointer; + display: inline-block; + font-size: 1em; + font-weight: 300; + padding-left: 2.4em; + padding-right: 0.75em; + position: relative; +} +input[type=checkbox] + label:before, +input[type=radio] + label:before { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + font-style: normal; + font-variant: normal; + text-rendering: auto; + line-height: 1; + text-transform: none !important; + font-family: "Font Awesome 5 Free"; + font-weight: 900; +} +input[type=checkbox] + label:before, +input[type=radio] + label:before { + border-radius: 10px; + border: solid 1px; + content: ""; + display: inline-block; + font-size: 0.8em; + height: 2.0625em; + left: 0; + line-height: 2.0625em; + position: absolute; + text-align: center; + top: 0; + width: 2.0625em; +} +input[type=checkbox]:checked + label:before, +input[type=radio]:checked + label:before { + content: "\f00c"; +} + +input[type=checkbox] + label:before { + border-radius: 10px; +} + +input[type=radio] + label:before { + border-radius: 100%; +} + +::-webkit-input-placeholder { + opacity: 1; +} + +:-moz-placeholder { + opacity: 1; +} + +::-moz-placeholder { + opacity: 1; +} + +:-ms-input-placeholder { + opacity: 1; +} + +label { + color: #ffffff; +} + +input[type=text], +input[type=password], +input[type=email], +select, +textarea { + background-color: rgba(255, 255, 255, 0.075); + border-color: rgba(255, 255, 255, 0.35); +} +input[type=text]:focus, +input[type=password]:focus, +input[type=email]:focus, +select:focus, +textarea:focus { + border-color: #8cc9f0; + box-shadow: 0 0 0 1px #8cc9f0; +} + +select { + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' preserveAspectRatio='none' viewBox='0 0 40 40'%3E%3Cpath d='M9.4,12.3l10.4,10.4l10.4-10.4c0.2-0.2,0.5-0.4,0.9-0.4c0.3,0,0.6,0.1,0.9,0.4l3.3,3.3c0.2,0.2,0.4,0.5,0.4,0.9 c0,0.4-0.1,0.6-0.4,0.9L20.7,31.9c-0.2,0.2-0.5,0.4-0.9,0.4c-0.3,0-0.6-0.1-0.9-0.4L4.3,17.3c-0.2-0.2-0.4-0.5-0.4-0.9 c0-0.4,0.1-0.6,0.4-0.9l3.3-3.3c0.2-0.2,0.5-0.4,0.9-0.4S9.1,12.1,9.4,12.3z' fill='rgba(255, 255, 255, 0.35)' /%3E%3C/svg%3E"); +} +select option { + color: #ffffff; + background: #935d8c; +} + +input[type=checkbox] + label, +input[type=radio] + label { + color: rgba(255, 255, 255, 0.65); +} +input[type=checkbox] + label:before, +input[type=radio] + label:before { + background: rgba(255, 255, 255, 0.075); + border-color: rgba(255, 255, 255, 0.35); +} +input[type=checkbox]:checked + label:before, +input[type=radio]:checked + label:before { + background-color: #ffffff; + border-color: #ffffff; + color: #935d8c; +} +input[type=checkbox]:focus + label:before, +input[type=radio]:focus + label:before { + border-color: #8cc9f0; + box-shadow: 0 0 0 1px #8cc9f0; +} + +::-webkit-input-placeholder { + color: rgba(255, 255, 255, 0.5) !important; +} + +:-moz-placeholder { + color: rgba(255, 255, 255, 0.5) !important; +} + +::-moz-placeholder { + color: rgba(255, 255, 255, 0.5) !important; +} + +:-ms-input-placeholder { + color: rgba(255, 255, 255, 0.5) !important; +} + +.formerize-placeholder { + color: rgba(255, 255, 255, 0.5) !important; +} + +/* Icon */ +.icon { + text-decoration: none; + -moz-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; + -webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; + -ms-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; + transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; + border-bottom: none; + position: relative; + font-size: 1.75em; +} +.icon:before { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + font-style: normal; + font-variant: normal; + text-rendering: auto; + line-height: 1; + text-transform: none !important; + font-family: "Font Awesome 5 Free"; + font-weight: 400; +} +.icon > .label { + display: none; +} +.icon:before { + line-height: solid; +} +.icon.solid:before { + font-weight: 900; +} +.icon.brands:before { + font-family: "Font Awesome 5 Brands"; +} +.icon.major { + border: solid 1px; + display: inline-block; + border-radius: 100%; + padding: 0.65em; + margin: 0 0 2em 0; + cursor: default; +} +.icon.major:before { + display: inline-block; + font-size: 6.25rem; + width: 2.25em; + height: 2.25em; + line-height: 2.2em; + border-radius: 100%; + border: solid 1px; + text-align: center; +} +.icon.alt { + display: inline-block; + border: solid 1px; + border-radius: 100%; +} +.icon.alt:before { + display: block; + font-size: 1.25em; + width: 2em; + height: 2em; + text-align: center; + line-height: 2em; +} +.icon.style1 { + color: #efa8b0; +} +.icon.style2 { + color: #c79cc8; +} +.icon.style3 { + color: #a89cc8; +} +.icon.style4 { + color: #9bb2e1; +} +.icon.style5 { + color: #8cc9f0; +} +@media screen and (max-width: 1680px) { + .icon.major:before { + font-size: 5.5rem; + } +} +@media screen and (max-width: 1280px) { + .icon.major:before { + font-size: 4.75rem; + } +} +@media screen and (max-width: 736px) { + .icon.major { + margin: 0 0 1.5em 0; + padding: 0.35em; + } + .icon.major:before { + font-size: 3.5rem; + } +} + +.icon.major { + border-color: rgba(255, 255, 255, 0.35); +} +.icon.major:before { + border-color: rgba(255, 255, 255, 0.35); +} +.icon.alt { + border-color: rgba(255, 255, 255, 0.35); + color: #ffffff; +} +.icon.alt:hover { + background-color: rgba(255, 255, 255, 0.075); +} +.icon.alt:active { + background-color: rgba(255, 255, 255, 0.2); +} + +/* Image */ +.image { + border-radius: 10px; + border: 0; + display: inline-block; + position: relative; +} +.image img { + border-radius: 10px; + display: block; +} +.image.left, .image.right { + max-width: 40%; +} +.image.left img, .image.right img { + width: 100%; +} +.image.left { + float: left; + margin: 0 1.5em 1em 0; + top: 0.25em; +} +.image.right { + float: right; + margin: 0 0 1em 1.5em; + top: 0.25em; +} +.image.fit { + display: block; + margin: 0 0 2em 0; + width: 100%; +} +.image.fit img { + width: 100%; +} +.image.main { + display: block; + margin: 0 0 3em 0; + width: 100%; +} +.image.main img { + width: 100%; +} + +/* List */ +ol { + list-style: decimal; + margin: 0 0 2em 0; + padding-left: 1.25em; +} +ol li { + padding-left: 0.25em; +} + +ul { + list-style: disc; + margin: 0 0 2em 0; + padding-left: 1em; +} +ul li { + padding-left: 0.5em; +} +ul.alt { + list-style: none; + padding-left: 0; +} +ul.alt li { + border-top: solid 1px; + padding: 0.5em 0; +} +ul.alt li:first-child { + border-top: 0; + padding-top: 0; +} + +dl { + margin: 0 0 2em 0; +} +dl dt { + display: block; + font-weight: 400; + margin: 0 0 1em 0; +} +dl dd { + margin-left: 2em; +} +dl.alt dt { + display: block; + width: 3em; + margin: 0; + clear: left; + float: left; +} +dl.alt dd { + margin: 0 0 0.85em 5.5em; +} +dl.alt:after { + content: ""; + display: block; + clear: both; +} + +ul.alt li { + border-top-color: rgba(255, 255, 255, 0.35); +} + +dl dt { + color: #ffffff; +} + +/* Actions */ +ul.actions { + display: -moz-flex; + display: -webkit-flex; + display: -ms-flex; + display: flex; + cursor: default; + list-style: none; + margin-left: -1em; + padding-left: 0; +} +ul.actions li { + padding: 0 0 0 1em; + vertical-align: middle; +} +ul.actions.special { + -moz-justify-content: center; + -webkit-justify-content: center; + -ms-justify-content: center; + justify-content: center; + width: 100%; + margin-left: 0; +} +ul.actions.special li:first-child { + padding-left: 0; +} +ul.actions.stacked { + -moz-flex-direction: column; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + margin-left: 0; +} +ul.actions.stacked li { + padding: 1.3em 0 0 0; +} +ul.actions.stacked li:first-child { + padding-top: 0; +} +ul.actions.fit { + width: calc(100% + 1em); +} +ul.actions.fit li { + -moz-flex-grow: 1; + -webkit-flex-grow: 1; + -ms-flex-grow: 1; + flex-grow: 1; + -moz-flex-shrink: 1; + -webkit-flex-shrink: 1; + -ms-flex-shrink: 1; + flex-shrink: 1; + width: 100%; +} +ul.actions.fit li > * { + width: 100%; +} +ul.actions.fit.stacked { + width: 100%; +} +@media screen and (max-width: 480px) { + ul.actions:not(.fixed) { + -moz-flex-direction: column; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + margin-left: 0; + width: 100% !important; + } + ul.actions:not(.fixed) li { + -moz-flex-grow: 1; + -webkit-flex-grow: 1; + -ms-flex-grow: 1; + flex-grow: 1; + -moz-flex-shrink: 1; + -webkit-flex-shrink: 1; + -ms-flex-shrink: 1; + flex-shrink: 1; + padding: 1em 0 0 0; + text-align: center; + width: 100%; + } + ul.actions:not(.fixed) li > * { + width: 100%; + } + ul.actions:not(.fixed) li:first-child { + padding-top: 0; + } + ul.actions:not(.fixed) li input[type=submit], + ul.actions:not(.fixed) li input[type=reset], + ul.actions:not(.fixed) li input[type=button], + ul.actions:not(.fixed) li button, + ul.actions:not(.fixed) li .button { + width: 100%; + } + ul.actions:not(.fixed) li input[type=submit].icon:before, + ul.actions:not(.fixed) li input[type=reset].icon:before, + ul.actions:not(.fixed) li input[type=button].icon:before, + ul.actions:not(.fixed) li button.icon:before, + ul.actions:not(.fixed) li .button.icon:before { + margin-left: -0.5rem; + } +} + +/* Icons */ +ul.icons { + cursor: default; + list-style: none; + padding-left: 0; +} +ul.icons li { + display: inline-block; + padding: 0 0.65em 0 0; +} +ul.icons li:last-child { + padding-right: 0 !important; +} + +/* Section/Article */ +section, +article { + display: flex; + flex-direction: column; +} +section.special, +article.special { + text-align: center; +} +section .box-wrapper, +article .box-wrapper { + display: flex; + justify-content: center; +} + +header.major { + margin-bottom: 3em; +} +header.major h2 { + font-size: 2em; +} +header.major h2:after { + display: block; + content: ""; + width: 3.25em; + height: 2px; + margin: 0.7em 0 1em 0; + border-radius: 2px; +} +section.special header.major h2:after, article.special header.major h2:after { + margin-left: auto; + margin-right: auto; +} +header.major p { + font-size: 1.25em; + letter-spacing: -0.025em; +} +header.major.special { + text-align: center; +} +header.major.special h2:after { + margin-left: auto; + margin-right: auto; +} + +footer.major { + margin-top: 3em; +} + +@media screen and (max-width: 736px) { + header.major { + margin-bottom: 0; + } + header.major h2 { + font-size: 1.5em; + } + header.major p { + font-size: 1em; + letter-spacing: 0; + } + header.major p br { + display: none; + } + footer.major { + margin-top: 0; + } +} +header.major h2:after { + background-color: rgba(255, 255, 255, 0.35); +} + +/* Table */ +.table-wrapper { + -webkit-overflow-scrolling: touch; + overflow-x: auto; +} + +table { + margin: 0 0 2em 0; + width: 100%; +} +table tbody tr { + border: solid 1px; + border-left: 0; + border-right: 0; +} +table td { + padding: 0.75em 0.75em; +} +table th { + font-size: 0.9em; + font-weight: 400; + padding: 0 0.75em 0.75em 0.75em; + text-align: left; +} +table thead { + border-bottom: solid 2px; +} +table tfoot { + border-top: solid 2px; +} +table.alt { + border-collapse: separate; +} +table.alt tbody tr td { + border: solid 1px; + border-left-width: 0; + border-top-width: 0; +} +table.alt tbody tr td:first-child { + border-left-width: 1px; +} +table.alt tbody tr:first-child td { + border-top-width: 1px; +} +table.alt thead { + border-bottom: 0; +} +table.alt tfoot { + border-top: 0; +} + +table tbody tr { + border-color: rgba(255, 255, 255, 0.35); +} +table tbody tr:nth-child(2n+1) { + background-color: rgba(255, 255, 255, 0.075); +} +table th { + color: #ffffff; +} +table thead { + border-bottom-color: rgba(255, 255, 255, 0.35); +} +table tfoot { + border-top-color: rgba(255, 255, 255, 0.35); +} +table.alt tbody tr td { + border-color: rgba(255, 255, 255, 0.35); +} + +/* Features */ +.features { + display: -moz-flex; + display: -webkit-flex; + display: -ms-flex; + display: flex; + -moz-flex-wrap: wrap; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + -moz-justify-content: center; + -webkit-justify-content: center; + -ms-justify-content: center; + justify-content: center; + width: calc(100% + 2em); + margin: 0 0 3em -2em; + padding: 0; + list-style: none; +} +.features li { + width: calc(33.3333333333% - 2em); + margin-left: 2em; + margin-top: 3em; + padding: 0; +} +.features li:nth-child(1), .features li:nth-child(2), .features li:nth-child(3) { + margin-top: 0; +} +.features li > :last-child { + margin-bottom: 0; +} +@media screen and (max-width: 980px) { + .features li { + width: calc(50% - 2em); + } + .features li:nth-child(3) { + margin-top: 3em; + } +} +@media screen and (max-width: 736px) { + .features { + width: 100%; + margin: 0 0 2em 0; + } + .features li { + width: 100%; + margin-left: 0; + margin-top: 2em; + } + .features li:nth-child(2), .features li:nth-child(3) { + margin-top: 2em; + } +} + +/* Statistics */ +.statistics { + display: -moz-flex; + display: -webkit-flex; + display: -ms-flex; + display: flex; + width: 100%; + margin: 0 0 3em 0; + padding: 0; + list-style: none; + cursor: default; +} +.statistics li { + -moz-flex: 1; + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; + padding: 1.5em; + color: #ffffff; + text-align: center; +} +.statistics li.style1 { + background-color: #efa8b0; +} +.statistics li.style2 { + background-color: #c79cc8; +} +.statistics li.style3 { + background-color: #a89cc8; +} +.statistics li.style4 { + background-color: #9bb2e1; +} +.statistics li.style5 { + background-color: #8cc9f0; +} +.statistics li strong, .statistics li b { + display: block; + font-size: 2em; + line-height: 1.1; + color: inherit !important; + font-weight: 300; + letter-spacing: -0.025em; +} +.statistics li:first-child { + border-top-left-radius: 10px; + border-bottom-left-radius: 10px; +} +.statistics li:last-child { + border-top-right-radius: 10px; + border-bottom-right-radius: 10px; +} +.statistics li .icon { + display: inline-block; +} +.statistics li .icon:before { + font-size: 2.75rem; + line-height: 1.3; +} +@media screen and (max-width: 980px) { + .statistics li strong, .statistics li b { + font-size: 1.5em; + } +} +@media screen and (max-width: 736px) { + .statistics { + display: block; + width: 20em; + max-width: 100%; + margin: 0 auto 2em auto; + } + .statistics li:first-child { + border-bottom-left-radius: 0; + border-top-right-radius: 10px; + } + .statistics li:last-child { + border-top-right-radius: 0; + border-bottom-left-radius: 10px; + } + .statistics li .icon:before { + font-size: 3.75rem; + } + .statistics li strong, .statistics li b { + font-size: 2.5em; + } +} + +/* Spotlight */ +.spotlight { + display: -moz-flex; + display: -webkit-flex; + display: -ms-flex; + display: flex; + -moz-align-items: center; + -webkit-align-items: center; + -ms-align-items: center; + align-items: center; + margin: 0 0 2em 0; +} +.spotlight .content { + -moz-flex: 1; + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; +} +.spotlight .content > :last-child { + margin-bottom: 0; +} +.spotlight .content header.major { + margin: 0 0 2em 0; +} +.spotlight .image { + display: inline-block; + margin-left: 4em; + padding: 0.65em; + border-radius: 100%; + border: solid 1px; +} +.spotlight .image img { + display: block; + border-radius: 100%; + width: 16em; +} +@media screen and (max-width: 980px) { + .spotlight { + -moz-flex-direction: column-reverse; + -webkit-flex-direction: column-reverse; + -ms-flex-direction: column-reverse; + flex-direction: column-reverse; + text-align: center; + } + .spotlight .content { + -moz-flex: 0 1 auto; + -webkit-flex: 0 1 auto; + -ms-flex: 0 1 auto; + flex: 0 1 auto; + width: 100%; + } + .spotlight .content header.major h2:after { + margin-left: auto; + margin-right: auto; + } + .spotlight .content .actions { + -moz-justify-content: center; + -webkit-justify-content: center; + -ms-justify-content: center; + justify-content: center; + width: calc(100% + 1em); + } + .spotlight .image { + -moz-flex: 0 1 auto; + -webkit-flex: 0 1 auto; + -ms-flex: 0 1 auto; + flex: 0 1 auto; + margin-left: 0; + margin-bottom: 2em; + } +} +@media screen and (max-width: 736px) { + .spotlight .image { + padding: 0.35em; + } + .spotlight .image img { + width: 12em; + } +} + +.spotlight .image { + border-color: rgba(255, 255, 255, 0.35); +} + +/* Timeline */ +.timeline { + position: relative; + max-width: 1200px; + margin: 100px auto; +} +.timeline::after { + content: ""; + position: absolute; + width: 6px; + height: 100%; + background: #4f5d73; + top: 0; + left: 50%; + margin-left: -3px; + z-index: 1; +} + +.container { + padding: 10px 50px; + position: relative; + width: 50%; +} +.container .timeline-img { + width: 100%; +} +.container .timeline-icon { + position: absolute; + width: 10%; + border-radius: 50%; + top: 61.5%; + z-index: 10; +} +.container:nth-child(odd) { + left: 0; +} +.container:nth-child(odd) .timeline-icon { + right: -5%; +} +.container:nth-child(even) { + left: 50%; +} +.container:nth-child(even) .timeline-icon { + left: -5%; +} + +.text-box { + padding: 20px; + border: #4f5d73 solid 3px; + position: relative; + border-radius: 6px; +} +.text-box h2 { + font-weight: 600; + margin-bottom: 0; +} +.text-box small { + display: inline-block; + margin-bottom: 15px; +} + +.arrow { + height: 0; + width: 0; + position: absolute; + top: 28px; + z-index: 1; + border-top: 15px solid transparent; + border-bottom: 15px solid transparent; +} +.arrow.left-arrow { + border-left: 15px solid #4f5d73; + right: -15px; +} +.arrow.right-arrow { + border-right: 15px solid #4f5d73; + left: -15px; +} + +@media screen and (max-width: 736px) { + .timeline { + margin: 50px auto; + } + .timeline::after { + left: 31px; + } + .container { + width: 100%; + padding-left: 80px; + padding-right: 25px; + } + .container:nth-child(even) { + left: 0; + } + .container:nth-child(odd) .timeline-icon, .container:nth-child(even) .timeline-icon { + left: 16px; + top: 51.5%; + } + .text-box { + font-size: 13px; + } + .text-box small { + margin-bottom: 10px; + } + .text-box .arrow.left-arrow, .text-box .arrow.right-arrow { + border-right: 15px solid #4f5d73; + border-left: 0; + left: -17px; + } +} +/* Header */ +#header { + padding: 5em 5em 1em 5em; + text-align: center; + height: 100vh; + max-height: 100vh; +} +#header h1 { + margin: 0 0 0.25em 0; +} +#header p { + font-size: 1.5em; + letter-spacing: -0.025em; +} +#header .description { + display: block; + margin-top: 1em; +} +#header.alt { + padding: 7em 5em 4em 5em; +} +#header.alt h1 { + font-size: 5em; +} +#header.alt > * { + -moz-transition: opacity 3s ease; + -webkit-transition: opacity 3s ease; + -ms-transition: opacity 3s ease; + transition: opacity 3s ease; + -moz-transition-delay: 0.5s; + -webkit-transition-delay: 0.5s; + -ms-transition-delay: 0.5s; + transition-delay: 0.5s; + opacity: 1; +} +#header.alt .logo { + -moz-transition: opacity 1.25s ease, -moz-transform 0.5s ease; + -webkit-transition: opacity 1.25s ease, -webkit-transform 0.5s ease; + -ms-transition: opacity 1.25s ease, -ms-transform 0.5s ease; + transition: opacity 1.25s ease, transform 0.5s ease; + -moz-transition-delay: 0s; + -webkit-transition-delay: 0s; + -ms-transition-delay: 0s; + transition-delay: 0s; + display: block; + margin: 0 0 1.5em 0; +} +#header.alt .logo img { + display: block; + margin: 0 auto; + max-width: 500px; +} +@media screen and (max-width: 1280px) { + #header { + padding: 4em 4em 0.1em 4em; + } + #header.alt { + padding: 6em 4em 3em 4em; + } +} +@media screen and (max-width: 980px) { + #header { + padding: 4em 3em 0.1em 3em; + } + #header.alt { + padding: 5em 3em 2em 3em; + } +} +@media screen and (max-width: 736px) { + #header { + padding: 3em 2em 0.1em 2em; + } + #header p { + font-size: 1em; + letter-spacing: 0; + } + #header p br { + display: none; + } + #header.alt { + padding: 4em 2em 1em 2em; + } + #header.alt h1 { + font-size: 2.5em; + } +} +@media screen and (max-width: 480px) { + #header { + padding: 3em 1.5em 0.1em 1.5em; + } + #header.alt { + padding: 4em 1.5em 1em 1.5em; + } +} +@media screen and (max-width: 360px) { + #header { + padding: 2.5em 1em 0.1em 1em; + } + #header.alt { + padding: 3.5em 1em 0.5em 1em; + } +} +body.is-preload #header.alt > * { + opacity: 0; +} +body.is-preload #header.alt .logo { + -moz-transform: scale(0.8) rotate(-30deg); + -webkit-transform: scale(0.8) rotate(-30deg); + -ms-transform: scale(0.8) rotate(-30deg); + transform: scale(0.8) rotate(-30deg); +} + +/* Nav */ +#nav { + -moz-transition: background-color 0.2s ease, border-top-left-radius 0.2s ease, border-top-right-radius 0.2s ease, padding 0.2s ease; + -webkit-transition: background-color 0.2s ease, border-top-left-radius 0.2s ease, border-top-right-radius 0.2s ease, padding 0.2s ease; + -ms-transition: background-color 0.2s ease, border-top-left-radius 0.2s ease, border-top-right-radius 0.2s ease, padding 0.2s ease; + transition: background-color 0.2s ease, border-top-left-radius 0.2s ease, border-top-right-radius 0.2s ease, padding 0.2s ease; + background-color: #ffffff; + color: #636363; + position: absolute; + width: 64em; + max-width: calc(100% - 4em); + padding: 1em; + background-color: #f7f7f7; + border-top-left-radius: 0.25em; + border-top-right-radius: 0.25em; + cursor: default; + text-align: center; +} +#nav input, +#nav select, +#nav textarea { + color: #636363; +} +#nav a:hover { + color: #636363; +} +#nav strong, +#nav b { + color: #636363; +} +#nav h1, +#nav h2, +#nav h3, +#nav h4, +#nav h5, +#nav h6 { + color: #636363; +} +#nav blockquote { + border-left-color: #dddddd; +} +#nav code { + background: rgba(222, 222, 222, 0.25); + border-color: #dddddd; +} +#nav hr { + border-bottom-color: #dddddd; +} +#nav + #main { + padding-top: 4.25em; +} +#nav ul { + margin: 0; + padding: 0; + list-style: none; +} +#nav ul li { + -moz-transition: margin 0.2s ease; + -webkit-transition: margin 0.2s ease; + -ms-transition: margin 0.2s ease; + transition: margin 0.2s ease; + display: inline-block; + margin: 0 0.35em; + padding: 0; + vertical-align: middle; +} +#nav ul li a { + -moz-transition: font-size 0.2s ease; + -webkit-transition: font-size 0.2s ease; + -ms-transition: font-size 0.2s ease; + transition: font-size 0.2s ease; + display: inline-block; + height: 2.25em; + line-height: 2.25em; + padding: 0 1.25em; + border: 0; + border-radius: 10px; + box-shadow: inset 0 0 0 1px transparent; + font-size: 1em; +} +#nav ul li a:hover { + background-color: rgba(222, 222, 222, 0.25); +} +#nav ul li a.active { + background-color: #ffffff; + box-shadow: none; +} +#nav.alt { + position: fixed; + top: 0; + padding: 0.5em 1em; + background-color: rgba(247, 247, 247, 0.95); + border-top-left-radius: 0; + border-top-right-radius: 0; + z-index: 10000; +} +#nav.alt ul li { + margin: 0 0.175em; +} +#nav.alt ul li a { + font-size: 1.1em; +} +@media screen and (max-width: 736px) { + #nav { + display: none; + } + #nav + #main { + padding-top: 0; + } +} + +/* Main */ +#main { + background-color: #ffffff; + color: #636363; + border-radius: 0.25em; +} +#main input, +#main select, +#main textarea { + color: #636363; +} +#main a:hover { + color: #636363; +} +#main strong, +#main b { + color: #636363; +} +#main h1, +#main h2, +#main h3, +#main h4, +#main h5, +#main h6 { + color: #636363; +} +#main blockquote { + border-left-color: #dddddd; +} +#main code { + background: rgba(222, 222, 222, 0.25); + border-color: #dddddd; +} +#main hr { + border-bottom-color: #dddddd; +} +#main .box { + border-color: #dddddd; +} +#main input[type=submit], +#main input[type=reset], +#main input[type=button], +#main button, +#main .button { + background-color: transparent; + box-shadow: inset 0 0 0 1px #dddddd; + color: #636363 !important; +} +#main input[type=submit]:hover, +#main input[type=reset]:hover, +#main input[type=button]:hover, +#main button:hover, +#main .button:hover { + background-color: rgba(222, 222, 222, 0.25); +} +#main input[type=submit]:active, +#main input[type=reset]:active, +#main input[type=button]:active, +#main button:active, +#main .button:active { + background-color: rgba(222, 222, 222, 0.5); +} +#main input[type=submit].icon:before, +#main input[type=reset].icon:before, +#main input[type=button].icon:before, +#main button.icon:before, +#main .button.icon:before { + color: rgba(99, 99, 99, 0.25); +} +#main input[type=submit].primary, +#main input[type=reset].primary, +#main input[type=button].primary, +#main button.primary, +#main .button.primary { + background-color: #8cc9f0; + color: #ffffff !important; + box-shadow: none; +} +#main input[type=submit].primary:hover, +#main input[type=reset].primary:hover, +#main input[type=button].primary:hover, +#main button.primary:hover, +#main .button.primary:hover { + background-color: #9acff2; +} +#main input[type=submit].primary:active, +#main input[type=reset].primary:active, +#main input[type=button].primary:active, +#main button.primary:active, +#main .button.primary:active { + background-color: #7ec3ee; +} +#main input[type=submit].primary.icon:before, +#main input[type=reset].primary.icon:before, +#main input[type=button].primary.icon:before, +#main button.primary.icon:before, +#main .button.primary.icon:before { + color: #ffffff !important; +} +#main label { + color: #636363; +} +#main input[type=text], +#main input[type=password], +#main input[type=email], +#main select, +#main textarea { + background-color: rgba(222, 222, 222, 0.25); + border-color: #dddddd; +} +#main input[type=text]:focus, +#main input[type=password]:focus, +#main input[type=email]:focus, +#main select:focus, +#main textarea:focus { + border-color: #8cc9f0; + box-shadow: 0 0 0 1px #8cc9f0; +} +#main select { + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' preserveAspectRatio='none' viewBox='0 0 40 40'%3E%3Cpath d='M9.4,12.3l10.4,10.4l10.4-10.4c0.2-0.2,0.5-0.4,0.9-0.4c0.3,0,0.6,0.1,0.9,0.4l3.3,3.3c0.2,0.2,0.4,0.5,0.4,0.9 c0,0.4-0.1,0.6-0.4,0.9L20.7,31.9c-0.2,0.2-0.5,0.4-0.9,0.4c-0.3,0-0.6-0.1-0.9-0.4L4.3,17.3c-0.2-0.2-0.4-0.5-0.4-0.9 c0-0.4,0.1-0.6,0.4-0.9l3.3-3.3c0.2-0.2,0.5-0.4,0.9-0.4S9.1,12.1,9.4,12.3z' fill='%23dddddd' /%3E%3C/svg%3E"); +} +#main select option { + color: #636363; + background: #ffffff; +} +#main input[type=checkbox] + label, +#main input[type=radio] + label { + color: #636363; +} +#main input[type=checkbox] + label:before, +#main input[type=radio] + label:before { + background: rgba(222, 222, 222, 0.25); + border-color: #dddddd; +} +#main input[type=checkbox]:checked + label:before, +#main input[type=radio]:checked + label:before { + background-color: #636363; + border-color: #636363; + color: #ffffff; +} +#main input[type=checkbox]:focus + label:before, +#main input[type=radio]:focus + label:before { + border-color: #8cc9f0; + box-shadow: 0 0 0 1px #8cc9f0; +} +#main ::-webkit-input-placeholder { + color: rgba(99, 99, 99, 0.25) !important; +} +#main :-moz-placeholder { + color: rgba(99, 99, 99, 0.25) !important; +} +#main ::-moz-placeholder { + color: rgba(99, 99, 99, 0.25) !important; +} +#main :-ms-input-placeholder { + color: rgba(99, 99, 99, 0.25) !important; +} +#main .formerize-placeholder { + color: rgba(99, 99, 99, 0.25) !important; +} +#main .icon.major { + border-color: #dddddd; +} +#main .icon.major:before { + border-color: #dddddd; +} +#main .icon.alt { + border-color: #dddddd; + color: #636363; +} +#main .icon.alt:hover { + background-color: rgba(222, 222, 222, 0.25); +} +#main .icon.alt:active { + background-color: rgba(222, 222, 222, 0.5); +} +#main ul.alt li { + border-top-color: #dddddd; +} +#main dl dt { + color: #636363; +} +#main header.major h2:after { + background-color: #dddddd; + background-image: -moz-linear-gradient(90deg, #efa8b0, #a89cc8, #8cc9f0); + background-image: -webkit-linear-gradient(90deg, #efa8b0, #a89cc8, #8cc9f0); + background-image: -ms-linear-gradient(90deg, #efa8b0, #a89cc8, #8cc9f0); + background-image: linear-gradient(90deg, #efa8b0, #a89cc8, #8cc9f0); +} +#main table tbody tr { + border-color: #dddddd; +} +#main table tbody tr:nth-child(2n+1) { + background-color: rgba(222, 222, 222, 0.25); +} +#main table th { + color: #636363; +} +#main table thead { + border-bottom-color: #dddddd; +} +#main table tfoot { + border-top-color: #dddddd; +} +#main table.alt tbody tr td { + border-color: #dddddd; +} +#main .spotlight .image { + border-color: #dddddd; +} +#main > .main { + padding: 5em 5em 3em 5em; + border-top: solid 1px #dddddd; +} +#main > .main:first-child { + border-top: 0; +} +#main > .main > .image.main:first-child { + margin: -5em 0 5em -5em; + width: calc(100% + 10em); + border-top-right-radius: 0.25em; + border-top-left-radius: 0.25em; + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; +} +#main > .main > .image.main:first-child img { + border-top-right-radius: 0.25em; + border-top-left-radius: 0.25em; + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; +} +@media screen and (max-width: 1280px) { + #main > .main { + padding: 4em 4em 2em 4em; + } + #main > .main > .image.main:first-child { + margin: -4em 0 4em -4em; + width: calc(100% + 8em); + } +} +@media screen and (max-width: 980px) { + #main > .main { + padding: 4em 3em 2em 3em; + } + #main > .main > .image.main:first-child { + margin: -4em 0 4em -3em; + width: calc(100% + 6em); + } +} +@media screen and (max-width: 736px) { + #main > .main { + padding: 3em 2em 1em 2em; + } + #main > .main > .image.main:first-child { + margin: -3em 0 2em -2em; + width: calc(100% + 4em); + } +} +@media screen and (max-width: 480px) { + #main > .main { + padding: 3em 1.5em 1em 1.5em; + } + #main > .main > .image.main:first-child { + margin: -3em 0 1.5em -1.5em; + width: calc(100% + 3em); + } +} +@media screen and (max-width: 360px) { + #main { + border-radius: 0; + } + #main > .main { + padding: 2.5em 1em 0.5em 1em; + } + #main > .main > .image.main:first-child { + margin: -2.5em 0 1.5em -1em; + width: calc(100% + 2em); + border-radius: 0; + } + #main > .main > .image.main:first-child img { + border-radius: 0; + } +} + +/* Footer */ +#footer { + display: -moz-flex; + display: -webkit-flex; + display: -ms-flex; + display: flex; + -moz-flex-wrap: wrap; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + padding: 5em 5em 3em 5em; + width: calc(100% + 2em); + margin: 0 0 3em -2em; +} +#footer > * { + width: calc(50% - 2em); + margin-left: 2em; +} +#footer .copyright { + width: 100%; + margin: 2.5em 0 2em 0; + font-size: 0.8em; + text-align: center; +} +@media screen and (max-width: 1280px) { + #footer { + padding: 4em 4em 2em 4em; + } +} +@media screen and (max-width: 980px) { + #footer { + padding: 4em 3em 2em 3em; + display: block; + margin: 0 0 3em 0; + width: 100%; + } + #footer > * { + width: 100%; + margin-left: 0; + margin-bottom: 3em; + } + #footer .copyright { + text-align: left; + } +} +@media screen and (max-width: 736px) { + #footer { + padding: 3em 2em 1em 2em; + } +} +@media screen and (max-width: 480px) { + #footer { + padding: 3em 1.5em 1em 1.5em; + } +} +@media screen and (max-width: 480px) { + #footer { + padding: 2.5em 1em 0.5em 1em; + } +} + +/* Wrapper */ +#wrapper { + width: 64em; + max-width: calc(100% - 4em); + margin: 0 auto; +} +@media screen and (max-width: 480px) { + #wrapper { + max-width: calc(100% - 2em); + } +} +@media screen and (max-width: 360px) { + #wrapper { + max-width: 100%; + } +} + +/*# sourceMappingURL=main.css.map */ diff --git a/assets/css/main.css.map b/assets/css/main.css.map new file mode 100644 index 0000000..d74c26d --- /dev/null +++ b/assets/css/main.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["../sass/main.scss","../sass/base/_reset.scss","../sass/base/_page.scss","../sass/libs/_breakpoints.scss","../sass/libs/_vendor.scss","../sass/base/_typography.scss","../sass/components/_row.scss","../sass/libs/_html-grid.scss","../sass/components/_box.scss","../sass/components/_card.scss","../sass/components/_button.scss","../sass/components/_form.scss","../sass/libs/_mixins.scss","../sass/components/_icon.scss","../sass/components/_image.scss","../sass/components/_list.scss","../sass/components/_actions.scss","../sass/components/_icons.scss","../sass/components/_section.scss","../sass/components/_table.scss","../sass/components/_features.scss","../sass/components/_statistics.scss","../sass/components/_spotlight.scss","../sass/components/_timeline.scss","../sass/layout/_header.scss","../sass/layout/_nav.scss","../sass/layout/_main.scss","../sass/layout/_footer.scss","../sass/layout/_wrapper.scss"],"names":[],"mappings":"AAMQ;AACA;ACEP;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAWC;EACA;EACA;EACA;EACA;EACA;;;AAGD;AAAA;EAEC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;AAEA;EAEC;EACA;;;AAIF;EACC;EACA;;;AAGD;EACC;;;AAGD;EACC;EACA;;;AAGD;EACC;EACA;;;AAGD;EACC;EACA;EACA;EACA;;;AC1EF;AAGE;EACC;;AAID;EACC;;;AC8LD;EDzLC;IACC;;;AAMF;EACC;;;AAGD;EACC;;;AAGF;EACC;EEgTI;EAAA;EAAA;EAAA;;AFxSF;EEiSE;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;;;ACvUN;AAEA;EACE;EACA;;;AAGF;AAAA;AAAA;AAAA;EAIE;EACA;EACA;EACA;;AFyLA;EEhMF;AAAA;AAAA;AAAA;IAUI;;;AFsLF;EEhMF;AAAA;AAAA;AAAA;IAcI;;;AFkLF;EEhMF;AAAA;AAAA;AAAA;IAkBI;;;;AAIJ;ED0SM;EAAA;EAAA;EAAA;EClSJ;AACA;EACA;;AAEA;EACE;;;AAIJ;AAAA;EAEE;;;AAGF;AAAA;EAEE;;;AAGF;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;AAAA;AAAA;AAAA;AAAA;AAAA;EAME;EACA;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;EACE;EACA;;;AAIJ;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AFwFA;EEpFA;IACE;;;AAIJ;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;;AAIJ;EACE;EACA;EACA;;AAEA;EACE;;;AAIJ;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AASA;AAAA;AAAA;EAGE;;;AAIA;EACE;;;AAIJ;AAAA;EAEE;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;EAME;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AC7NJ;AAEC;EC2BC;EACA;EACA;EACA;;AAGA;EACE;;AAME;EACE;;AAMN;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAeA;EACE;;AAKA;EACE;;AAGF;EACE;;AALF;EACE;;AAGF;EACE;;AALF;EACE;;AAGF;EACE;;AALF;EACE;;AAGF;EACE;;AALF;EACE;;AAGF;EACE;;AALF;EACE;;AAGF;EACE;;AALF;EACE;;AAGF;EACE;;AALF;EACE;;AAGF;EACE;;AALF;EACE;;AAGF;EACE;;AALF;EACE;;AAGF;EACE;;AALF;EACE;;AAGF;EACE;;AALF;EACE;;AAGF;EACE;;AAaF;EACE;EACA;;AAEA;EACE;;AAOF;EACE;;AAEA;EACE;;AAhBN;EACE;EACA;;AAEA;EACE;;AAOF;EACE;;AAEA;EACE;;AAhBN;EACE;EACA;;AAEA;EACE;;AAOF;EACE;;AAEA;EACE;;AAhBN;EACE;EACA;;AAEA;EACE;;AAOF;EACE;;AAEA;EACE;;AAhBN;EACE;EACA;;AAEA;EACE;;AAOF;EACE;;AAEA;EACE;;AAhBN;EACE;EACA;;AAEA;EACE;;AAOF;EACE;;AAEA;EACE;;AJoEV;EG/LD;IC2BC;IACA;IACA;IACA;;EAGA;IACE;;EAME;IACE;;EAMN;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAeA;IACE;;EAKA;IACE;;EAGF;IACE;;EALF;IACE;;EAGF;IACE;;EALF;IACE;;EAGF;IACE;;EALF;IACE;;EAGF;IACE;;EALF;IACE;;EAGF;IACE;;EALF;IACE;;EAGF;IACE;;EALF;IACE;;EAGF;IACE;;EALF;IACE;;EAGF;IACE;;EALF;IACE;;EAGF;IACE;;EALF;IACE;;EAGF;IACE;;EALF;IACE;;EAGF;IACE;;EALF;IACE;;EAGF;IACE;;EAaF;IACE;IACA;;EAEA;IACE;;EAOF;IACE;;EAEA;IACE;;EAhBN;IACE;IACA;;EAEA;IACE;;EAOF;IACE;;EAEA;IACE;;EAhBN;IACE;IACA;;EAEA;IACE;;EAOF;IACE;;EAEA;IACE;;EAhBN;IACE;IACA;;EAEA;IACE;;EAOF;IACE;;EAEA;IACE;;EAhBN;IACE;IACA;;EAEA;IACE;;EAOF;IACE;;EAEA;IACE;;EAhBN;IACE;IACA;;EAEA;IACE;;EAOF;IACE;;EAEA;IACE;;;AJoEV;EG/LD;IC2BC;IACA;IACA;IACA;;EAGA;IACE;;EAME;IACE;;EAMN;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAeA;IACE;;EAKA;IACE;;EAGF;IACE;;EALF;IACE;;EAGF;IACE;;EALF;IACE;;EAGF;IACE;;EALF;IACE;;EAGF;IACE;;EALF;IACE;;EAGF;IACE;;EALF;IACE;;EAGF;IACE;;EALF;IACE;;EAGF;IACE;;EALF;IACE;;EAGF;IACE;;EALF;IACE;;EAGF;IACE;;EALF;IACE;;EAGF;IACE;;EALF;IACE;;EAGF;IACE;;EALF;IACE;;EAGF;IACE;;EAaF;IACE;IACA;;EAEA;IACE;;EAOF;IACE;;EAEA;IACE;;EAhBN;IACE;IACA;;EAEA;IACE;;EAOF;IACE;;EAEA;IACE;;EAhBN;IACE;IACA;;EAEA;IACE;;EAOF;IACE;;EAEA;IACE;;EAhBN;IACE;IACA;;EAEA;IACE;;EAOF;IACE;;EAEA;IACE;;EAhBN;IACE;IACA;;EAEA;IACE;;EAOF;IACE;;EAEA;IACE;;EAhBN;IACE;IACA;;EAEA;IACE;;EAOF;IACE;;EAEA;IACE;;;AJoEV;EG/LD;IC2BC;IACA;IACA;IACA;;EAGA;IACE;;EAME;IACE;;EAMN;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAeA;IACE;;EAKA;IACE;;EAGF;IACE;;EALF;IACE;;EAGF;IACE;;EALF;IACE;;EAGF;IACE;;EALF;IACE;;EAGF;IACE;;EALF;IACE;;EAGF;IACE;;EALF;IACE;;EAGF;IACE;;EALF;IACE;;EAGF;IACE;;EALF;IACE;;EAGF;IACE;;EALF;IACE;;EAGF;IACE;;EALF;IACE;;EAGF;IACE;;EALF;IACE;;EAGF;IACE;;EALF;IACE;;EAGF;IACE;;EAaF;IACE;IACA;;EAEA;IACE;;EAOF;IACE;;EAEA;IACE;;EAhBN;IACE;IACA;;EAEA;IACE;;EAOF;IACE;;EAEA;IACE;;EAhBN;IACE;IACA;;EAEA;IACE;;EAOF;IACE;;EAEA;IACE;;EAhBN;IACE;IACA;;EAEA;IACE;;EAOF;IACE;;EAEA;IACE;;EAhBN;IACE;IACA;;EAEA;IACE;;EAOF;IACE;;EAEA;IACE;;EAhBN;IACE;IACA;;EAEA;IACE;;EAOF;IACE;;EAEA;IACE;;;AJoEV;EG/LD;IC2BC;IACA;IACA;IACA;;EAGA;IACE;;EAME;IACE;;EAMN;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAeA;IACE;;EAKA;IACE;;EAGF;IACE;;EALF;IACE;;EAGF;IACE;;EALF;IACE;;EAGF;IACE;;EALF;IACE;;EAGF;IACE;;EALF;IACE;;EAGF;IACE;;EALF;IACE;;EAGF;IACE;;EALF;IACE;;EAGF;IACE;;EALF;IACE;;EAGF;IACE;;EALF;IACE;;EAGF;IACE;;EALF;IACE;;EAGF;IACE;;EALF;IACE;;EAGF;IACE;;EALF;IACE;;EAGF;IACE;;EAaF;IACE;IACA;;EAEA;IACE;;EAOF;IACE;;EAEA;IACE;;EAhBN;IACE;IACA;;EAEA;IACE;;EAOF;IACE;;EAEA;IACE;;EAhBN;IACE;IACA;;EAEA;IACE;;EAOF;IACE;;EAEA;IACE;;EAhBN;IACE;IACA;;EAEA;IACE;;EAOF;IACE;;EAEA;IACE;;EAhBN;IACE;IACA;;EAEA;IACE;;EAOF;IACE;;EAEA;IACE;;EAhBN;IACE;IACA;;EAEA;IACE;;EAOF;IACE;;EAEA;IACE;;;AJoEV;EG/LD;IC2BC;IACA;IACA;IACA;;EAGA;IACE;;EAME;IACE;;EAMN;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAeA;IACE;;EAKA;IACE;;EAGF;IACE;;EALF;IACE;;EAGF;IACE;;EALF;IACE;;EAGF;IACE;;EALF;IACE;;EAGF;IACE;;EALF;IACE;;EAGF;IACE;;EALF;IACE;;EAGF;IACE;;EALF;IACE;;EAGF;IACE;;EALF;IACE;;EAGF;IACE;;EALF;IACE;;EAGF;IACE;;EALF;IACE;;EAGF;IACE;;EALF;IACE;;EAGF;IACE;;EALF;IACE;;EAGF;IACE;;EAaF;IACE;IACA;;EAEA;IACE;;EAOF;IACE;;EAEA;IACE;;EAhBN;IACE;IACA;;EAEA;IACE;;EAOF;IACE;;EAEA;IACE;;EAhBN;IACE;IACA;;EAEA;IACE;;EAOF;IACE;;EAEA;IACE;;EAhBN;IACE;IACA;;EAEA;IACE;;EAOF;IACE;;EAEA;IACE;;EAhBN;IACE;IACA;;EAEA;IACE;;EAOF;IACE;;EAEA;IACE;;EAhBN;IACE;IACA;;EAEA;IACE;;EAOF;IACE;;EAEA;IACE;;;;ACnIZ;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;AAAA;EAGE;;AAGF;EACE;EACA;EACA;;AAGF;EACE;;AAGF;EACE;EACA;EACA;;AAGF;EACE;;AAGF;EACE;EACA;;;AAKF;EACE;;;AC/CJ;AAEA;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;AAAA;EAGE;;AAGF;EACE;EACA;EACA;;AAGF;EACE;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;;AN6IF;EMxIA;IACE;;;AC1DJ;AAEC;AAAA;AAAA;AAAA;AAAA;EN+TK;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EMrTJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;EACC;;AAEA;AAAA;AAAA;AAAA;AAAA;EACC;;AAIF;AAAA;AAAA;AAAA;AAAA;EACC;;AAGD;AAAA;AAAA;AAAA;AAAA;EACC;;AAGD;AAAA;AAAA;AAAA;AAAA;EACC;;AAGD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ENiSE;EM9RD;;APiJD;EO/LD;AAAA;AAAA;AAAA;AAAA;IAkDE;;;;AAKD;AAAA;AAAA;AAAA;AAAA;EAKC;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;EACC;;AAGD;AAAA;AAAA;AAAA;AAAA;EACC;;AAIA;AAAA;AAAA;AAAA;AAAA;EACC;;AAIF;AAAA;AAAA;AAAA;AAAA;EACC;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;EACC;;AAGD;AAAA;AAAA;AAAA;AAAA;EACC;;AAIA;AAAA;AAAA;AAAA;AAAA;EACC;;;AC/FN;AAEC;EACC;;;AAGD;EACC;EACA;EACA;EACA;;;AAGD;AAAA;AAAA;AAAA;AAAA;EPoTK;EAAA;EAAA;EAAA;EO9SJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;EACC;;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;;AAGC;EACC;;AAIF;EACC;;;AAIF;AAAA;AAAA;AAAA;EAIC;;;AAGD;EACC;;;AAGD;AAAA;EPkQK;EAAA;EAAA;EAAA;EO/PJ;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;EC1EA;ED4EC;EACA;EACA;EACA;EACA;EACA;EACA;;AChFD;AAAA;EAKE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAKE;EACA;;ADgEH;AAAA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAKD;AAAA;EACC;;;AAOD;EACC;;;AAOD;EACC;;;AAKH;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAIA;EACC;;;AAGD;AAAA;AAAA;AAAA;AAAA;EAKC;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;EACC;EACA;;;AAIF;EACC;;AAEA;EACC;EACA;;;AAMD;AAAA;EACC;;AAEA;AAAA;EACC;EACA;;AAKD;AAAA;EACC;EACA;EACA;;AAKD;AAAA;EACC;EACA;;;AAKH;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AElNH;AAEA;EDHE;ERkUI;EAAA;EAAA;EAAA;EStTJ;EACA;EACA;;ADZA;EAKE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAQE;EACA;;ACPJ;EACE;;AAGF;EACE;;AAIA;EACE;;AAKF;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAIJ;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AV0GF;EUrGI;IACE;;;AVoGN;EU7FI;IACE;;;AV4FN;EUtFE;IACE;IACA;;EAEA;IACE;;;;AAQJ;EACE;;AAEA;EACE;;AAIJ;EACE;EACA;;AAEA;EACE;;AAGF;EACE;;;ACzIR;AAEC;EACC;EACA;EACA;EACA;;AAEA;EACC;EACA;;AAGD;EAEC;;AAEA;EACC;;AAIF;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA;;AAEA;EACC;;AAIF;EACC;EACA;EACA;;AAEA;EACC;;;AClDJ;AAEC;EACC;EACA;EACA;;AAEA;EACC;;;AAIF;EACC;EACA;EACA;;AAEA;EACC;;AAGD;EACC;EACA;;AAEA;EACC;EACA;;AAEA;EACC;EACA;;;AAMJ;EACC;;AAEA;EACC;EACA;EACA;;AAGD;EACC;;AAIA;EACC;EACA;EACA;EACA;EACA;;AAGD;EACC;;AAGD;EACC;EACA;EACA;;;AAQA;EACC;;;AAMF;EACC;;;ACxFJ;AAEA;EZ4UM;EAAA;EAAA;EAAA;EY1UJ;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EZyTI;EAAA;EAAA;EAAA;EYvTF;EACA;;AAGE;EACE;;AAKN;EZ6SI;EAAA;EAAA;EAAA;EY3SF;;AAEA;EACE;;AAEA;EACE;;AAKN;EACE;;AAEA;EZ6RE;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EY1RA;;AAEA;EACE;;AAIJ;EACE;;AbkJJ;Ea7IE;IZ6QE;IAAA;IAAA;IAAA;IY3QA;IACA;;EAEA;IZwQA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IYrQE;IACA;IACA;;EAEA;IACE;;EAGF;IACE;;EAGF;AAAA;AAAA;AAAA;AAAA;IAKE;;EAGE;AAAA;AAAA;AAAA;AAAA;IACE;;;;ACvFd;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;;;ACZN;AAEA;AAAA;EAME;EACA;;AALA;AAAA;EACE;;AAMF;AAAA;EACE;EACA;;;AAKF;EACE;;AAEA;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EAEE;EACA;;AAKN;EACE;EACA;;AAGF;EACE;;AAGE;EACE;EACA;;;AAQR;EACE;;;Af2IF;EerIE;IACE;;EAEA;IACE;;EAGF;IACE;IACA;;EAEA;IACE;;EAON;IACE;;;AASE;EACE;;;AC1FV;AAEC;EACC;EACA;;;AAGD;EACC;EACA;;AAGC;EACC;EACA;EACA;;AAIF;EACC;;AAGD;EACC;EACA;EACA;EACA;;AAGD;EACC;;AAGD;EACC;;AAGD;EACC;;AAIE;EACC;EACA;EACA;;AAEA;EACC;;AAKD;EACC;;AAMJ;EACC;;AAGD;EACC;;;AAQA;EACC;;AAEA;EACC;;AAKH;EACC;;AAGD;EACC;;AAGD;EACC;;AAME;EACC;;;ACzGP;AAEC;EhB4UK;EAAA;EAAA;EAAA;EAPA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EgBjUJ;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;;AAEA;EAGC;;AAGD;EACC;;AjB+KF;EiB1KC;IACC;;EAEA;IACC;;;AjBsKH;EiBrMD;IAqCE;IACA;;EAEA;IACC;IACA;IACA;;EAEA;IAEC;;;;AC3CL;AAEC;EjBsUK;EAAA;EAAA;EAAA;EiBpUJ;EACA;EACA;EACA;EACA;;AAEA;EjBuTI;EAAA;EAAA;EAAA;EiBrTH;EACA;EACA;;AAEA;EACC;;AAGD;EACC;;AAGD;EACC;;AAGD;EACC;;AAGD;EACC;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;;AAGD;EACC;EACA;;AAGD;EACC;EACA;;AAGD;EACC;;AAEA;EACC;EACA;;AlBqIH;EkB9HE;IACC;;;AlB6HH;EkB/LD;IAwEE;IACA;IACA;IACA;;EAGC;IACC;IACA;;EAGD;IACC;IACA;;EAIA;IACC;;EAIF;IACC;;;;ACjGL;AAEC;ElBsUK;EAAA;EAAA;EAAA;EAPA;EAAA;EAAA;EAAA;EkB5TJ;;AAEA;ElB0TI;EAAA;EAAA;EAAA;;AkBvTH;EACC;;AAIA;EACC;;AAKH;EACC;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;;AnBkKF;EmB/LD;IlB+TK;IAAA;IAAA;IAAA;IkB5RH;;EAEA;IlB0RG;IAAA;IAAA;IAAA;IkBxRF;;EAKG;IACC;IACA;;EAMJ;IlB2QE;IAAA;IAAA;IAAA;IkBzQD;;EAIF;IlBqQG;IAAA;IAAA;IAAA;IkBnQF;IACA;;;AnBkIF;EmB7HC;IACC;;EAEA;IACC;;;;AAQF;EACC;;;ACvFJ;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAEA;EACE;;AAIJ;EACE;;AAEA;EACE;;;AAKN;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;;ApBgHF;EoB3GA;IACE;;EAEA;IACE;;EAIJ;IACE;IACA;IACA;;EAEA;IACE;;EAGF;IAEE;IACA;;EAIJ;IACE;;EAEA;IACE;;EAIA;IAEE;IACA;IACA;;;AChIR;AAEA;EZ+CE;EY7CA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EZ2BA;;AYxBE;EACE;;AAGF;EpB0SE;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EoBvSA;;AAGF;EpBoSE;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EoB9RA;EACA;;AAEA;EACE;EACA;EACA;;ArBwJN;EqBrMF;IZ+CE;;EYME;IZNF;;;ATsJA;EqBrMF;IZ+CE;;EYcE;IZdF;;;ATsJA;EqBrMF;IZ+CE;;EYsBE;IACE;IACA;;EAEA;IACE;;EAIJ;IZ/BF;;EYkCI;IACE;;;ArBmHN;EqBrMF;IZ+CE;;EY2CE;IZ3CF;;;ATsJA;EqBrMF;IZ+CE;;EYmDE;IZnDF;;;AY0DI;EACE;;AAGF;EpBwNA;EAAA;EAAA;EAAA;;;AqBvUN;AAEC;ErBqUK;EAAA;EAAA;EAAA;EC5IF;EACA;EoBlLF;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;ApB6KA;AAAA;AAAA;EAGE;;AAIA;EACE;;AAIJ;AAAA;EAEE;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;EAME;;AAGF;EACE;;AAGF;EACE;EACA;;AAGF;EACE;;AoB/MF;EACC;;AAGD;EACC;EACA;EACA;;AAEA;ErB0SG;EAAA;EAAA;EAAA;EqBtSF;EACA;EACA;EACA;;AAEA;ErBiSE;EAAA;EAAA;EAAA;EqB7RD;EACA;EACA;EACA;EACA;EACA;EACA;EACe;;AAEf;EACC;;AAGD;EACC;EACA;;AAMJ;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAGC;EACC;;AAEA;EACC;;AtB0HJ;EsBrMD;IAkFE;;EAEA;IACC;;;;ACvFJ;AAEA;ErByLI;EACA;EqBxLF;;ArB2LA;AAAA;AAAA;EAGE;;AAIA;EACE;;AAIJ;AAAA;EAEE;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;EAME;;AAGF;EACE;;AAGF;EACE;EACA;;AAGF;EACE;;AGrLF;EACE;;AEgBF;AAAA;AAAA;AAAA;AAAA;EAKC;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;EACC;;AAGD;AAAA;AAAA;AAAA;AAAA;EACC;;AAIA;AAAA;AAAA;AAAA;AAAA;EACC;;AAIF;AAAA;AAAA;AAAA;AAAA;EACC;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;EACC;;AAGD;AAAA;AAAA;AAAA;AAAA;EACC;;AAIA;AAAA;AAAA;AAAA;AAAA;EACC;;AC4CJ;EACC;;AAGD;AAAA;AAAA;AAAA;AAAA;EAKC;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;EACC;EACA;;AAIF;EACC;;AAEA;EACC;EACA;;AAMD;AAAA;EACC;;AAEA;AAAA;EACC;EACA;;AAKD;AAAA;EACC;EACA;EACA;;AAKD;AAAA;EACC;EACA;;AAKH;EACC;;AAGD;EACC;;AAGD;EACC;;AAGD;EACC;;AAGD;EACC;;AE1FC;EACE;;AAEA;EACE;;AAIJ;EACE;EACA;;AAEA;EACE;;AAGF;EACE;;AE/DJ;EACC;;AAMF;EACC;;AGOI;EACE;Ed8OJ;EAAA;EAAA;EAAA;;Ae9PF;EACC;;AAEA;EACC;;AAKH;EACC;;AAGD;EACC;;AAGD;EACC;;AAME;EACC;;AGnBJ;EACC;;AIjFF;Ed2CA;EczCE;;AAEA;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AvB6KN;EuBvKE;IdiBF;;EcdI;IACE;IACA;;;AvBkKN;EuB5JE;IdMF;;EcHI;IACE;IACA;;;AvBuJN;EuBjJE;IdLF;;EcQI;IACE;IACA;;;AvB4IN;EuBtIE;IdhBF;;EcmBI;IACE;IACA;;;AvBiIN;EuBrMF;IA0EI;;EAEA;Id7BF;;EcgCI;IACE;IACA;IACA;;EAEA;IACE;;;;ACvFV;AAEC;EvB4UK;EAAA;EAAA;EAAA;EAPA;EAAA;EAAA;EAAA;EQtRJ;Ee3CA;EACA;;AAEA;EACC;EACA;;AAGD;EACC;EACA;EACA;EACA;;AxBqLD;EwBrMD;If+CC;;;ATsJA;EwBrMD;If+CC;IetBC;IACA;IACA;;EAEA;IACC;IACA;IACA;;EAGD;IACC;;;AxBiKF;EwBrMD;If+CC;;;ATsJA;EwBrMD;If+CC;;;ATsJA;EwBrMD;If+CC;;;;AgBjDF;AAEC;EACC;EACA;EACA;;AzBkMA;EyBrMD;IAME;;;AzB+LD;EyBrMD;IAUE","file":"main.css"} \ No newline at end of file diff --git a/assets/css/noscript.css b/assets/css/noscript.css new file mode 100644 index 0000000..488fd20 --- /dev/null +++ b/assets/css/noscript.css @@ -0,0 +1,12 @@ +/* Header */ +body.is-preload #header.alt > * { + opacity: 1; +} +body.is-preload #header.alt .logo { + -moz-transform: none; + -webkit-transform: none; + -ms-transform: none; + transform: none; +} + +/*# sourceMappingURL=noscript.css.map */ diff --git a/assets/css/noscript.css.map b/assets/css/noscript.css.map new file mode 100644 index 0000000..0cb8b72 --- /dev/null +++ b/assets/css/noscript.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["../sass/noscript.scss","../sass/libs/_vendor.scss"],"names":[],"mappings":"AAOA;AAKI;EACC;;AAGD;ECuTE;EAAA;EAAA;EAAA","file":"noscript.css"} \ No newline at end of file diff --git a/assets/js/breakpoints.min.js b/assets/js/breakpoints.min.js new file mode 100644 index 0000000..32419cc --- /dev/null +++ b/assets/js/breakpoints.min.js @@ -0,0 +1,2 @@ +/* breakpoints.js v1.0 | @ajlkn | MIT licensed */ +var breakpoints=function(){"use strict";function e(e){t.init(e)}var t={list:null,media:{},events:[],init:function(e){t.list=e,window.addEventListener("resize",t.poll),window.addEventListener("orientationchange",t.poll),window.addEventListener("load",t.poll),window.addEventListener("fullscreenchange",t.poll)},active:function(e){var n,a,s,i,r,d,c;if(!(e in t.media)){if(">="==e.substr(0,2)?(a="gte",n=e.substr(2)):"<="==e.substr(0,2)?(a="lte",n=e.substr(2)):">"==e.substr(0,1)?(a="gt",n=e.substr(1)):"<"==e.substr(0,1)?(a="lt",n=e.substr(1)):"!"==e.substr(0,1)?(a="not",n=e.substr(1)):(a="eq",n=e),n&&n in t.list)if(i=t.list[n],Array.isArray(i)){if(r=parseInt(i[0]),d=parseInt(i[1]),isNaN(r)){if(isNaN(d))return;c=i[1].substr(String(d).length)}else c=i[0].substr(String(r).length);if(isNaN(r))switch(a){case"gte":s="screen";break;case"lte":s="screen and (max-width: "+d+c+")";break;case"gt":s="screen and (min-width: "+(d+1)+c+")";break;case"lt":s="screen and (max-width: -1px)";break;case"not":s="screen and (min-width: "+(d+1)+c+")";break;default:s="screen and (max-width: "+d+c+")"}else if(isNaN(d))switch(a){case"gte":s="screen and (min-width: "+r+c+")";break;case"lte":s="screen";break;case"gt":s="screen and (max-width: -1px)";break;case"lt":s="screen and (max-width: "+(r-1)+c+")";break;case"not":s="screen and (max-width: "+(r-1)+c+")";break;default:s="screen and (min-width: "+r+c+")"}else switch(a){case"gte":s="screen and (min-width: "+r+c+")";break;case"lte":s="screen and (max-width: "+d+c+")";break;case"gt":s="screen and (min-width: "+(d+1)+c+")";break;case"lt":s="screen and (max-width: "+(r-1)+c+")";break;case"not":s="screen and (max-width: "+(r-1)+c+"), screen and (min-width: "+(d+1)+c+")";break;default:s="screen and (min-width: "+r+c+") and (max-width: "+d+c+")"}}else s="("==i.charAt(0)?"screen and "+i:i;t.media[e]=!!s&&s}return t.media[e]!==!1&&window.matchMedia(t.media[e]).matches},on:function(e,n){t.events.push({query:e,handler:n,state:!1}),t.active(e)&&n()},poll:function(){var e,n;for(e=0;e+~]|"+M+")"+M+"*"),U=new RegExp(M+"|>"),X=new RegExp(F),V=new RegExp("^"+I+"$"),G={ID:new RegExp("^#("+I+")"),CLASS:new RegExp("^\\.("+I+")"),TAG:new RegExp("^("+I+"|[*])"),ATTR:new RegExp("^"+W),PSEUDO:new RegExp("^"+F),CHILD:new RegExp("^:(only|first|last|nth|nth-last)-(child|of-type)(?:\$"+M+"*(even|odd|(([+-]|)(\\d*)n|)"+M+"*(?:([+-]|)"+M+"*(\\d+)|))"+M+"*\$|)","i"),bool:new RegExp("^(?:"+R+")$","i"),needsContext:new RegExp("^"+M+"*[>+~]|:(even|odd|eq|gt|lt|nth|first|last)(?:\$"+M+"*((?:-\\d)?\\d*)"+M+"*\$|)(?=[^-]|$)","i")},Y=/HTML$/i,Q=/^(?:input|select|textarea|button)$/i,J=/^h\d$/i,K=/^[^{]+\{\s*\[native \w/,Z=/^(?:#([\w-]+)|(\w+)|\.([\w-]+))$/,ee=/[+~]/,te=new RegExp("\\\\[\\da-fA-F]{1,6}"+M+"?|\\\\([^\\r\\n\\f])","g"),ne=function(e,t){var n="0x"+e.slice(1)-65536;return t||(n<0?String.fromCharCode(n+65536):String.fromCharCode(n>>10|55296,1023&n|56320))},re=/([\0-\x1f\x7f]|^-?\d)|^-$|[^\0-\x1f\x7f-\uFFFF\w-]/g,ie=function(e,t){return t?"\0"===e?"\ufffd":e.slice(0,-1)+"\\"+e.charCodeAt(e.length-1).toString(16)+" ":"\\"+e},oe=function(){T()},ae=be(function(e){return!0===e.disabled&&"fieldset"===e.nodeName.toLowerCase()},{dir:"parentNode",next:"legend"});try{H.apply(t=O.call(p.childNodes),p.childNodes),t[p.childNodes.length].nodeType}catch(e){H={apply:t.length?function(e,t){L.apply(e,O.call(t))}:function(e,t){var n=e.length,r=0;while(e[n++]=t[r++]);e.length=n-1}}}function se(t,e,n,r){var i,o,a,s,u,l,c,f=e&&e.ownerDocument,p=e?e.nodeType:9;if(n=n||[],"string"!=typeof t||!t||1!==p&&9!==p&&11!==p)return n;if(!r&&(T(e),e=e||C,E)){if(11!==p&&(u=Z.exec(t)))if(i=u[1]){if(9===p){if(!(a=e.getElementById(i)))return n;if(a.id===i)return n.push(a),n}else if(f&&(a=f.getElementById(i))&&y(e,a)&&a.id===i)return n.push(a),n}else{if(u[2])return H.apply(n,e.getElementsByTagName(t)),n;if((i=u[3])&&d.getElementsByClassName&&e.getElementsByClassName)return H.apply(n,e.getElementsByClassName(i)),n}if(d.qsa&&!N[t+" "]&&(!v||!v.test(t))&&(1!==p||"object"!==e.nodeName.toLowerCase())){if(c=t,f=e,1===p&&(U.test(t)||z.test(t))){(f=ee.test(t)&&ye(e.parentNode)||e)===e&&d.scope||((s=e.getAttribute("id"))?s=s.replace(re,ie):e.setAttribute("id",s=S)),o=(l=h(t)).length;while(o--)l[o]=(s?"#"+s:":scope")+" "+xe(l[o]);c=l.join(",")}try{return H.apply(n,f.querySelectorAll(c)),n}catch(e){N(t,!0)}finally{s===S&&e.removeAttribute("id")}}}return g(t.replace($,"$1"),e,n,r)}function ue(){var r=[];return function e(t,n){return r.push(t+" ")>b.cacheLength&&delete e[r.shift()],e[t+" "]=n}}function le(e){return e[S]=!0,e}function ce(e){var t=C.createElement("fieldset");try{return!!e(t)}catch(e){return!1}finally{t.parentNode&&t.parentNode.removeChild(t),t=null}}function fe(e,t){var n=e.split("|"),r=n.length;while(r--)b.attrHandle[n[r]]=t}function pe(e,t){var n=t&&e,r=n&&1===e.nodeType&&1===t.nodeType&&e.sourceIndex-t.sourceIndex;if(r)return r;if(n)while(n=n.nextSibling)if(n===t)return-1;return e?1:-1}function de(t){return function(e){return"input"===e.nodeName.toLowerCase()&&e.type===t}}function he(n){return function(e){var t=e.nodeName.toLowerCase();return("input"===t||"button"===t)&&e.type===n}}function ge(t){return function(e){return"form"in e?e.parentNode&&!1===e.disabled?"label"in e?"label"in e.parentNode?e.parentNode.disabled===t:e.disabled===t:e.isDisabled===t||e.isDisabled!==!t&&ae(e)===t:e.disabled===t:"label"in e&&e.disabled===t}}function ve(a){return le(function(o){return o=+o,le(function(e,t){var n,r=a([],e.length,o),i=r.length;while(i--)e[n=r[i]]&&(e[n]=!(t[n]=e[n]))})})}function ye(e){return e&&"undefined"!=typeof e.getElementsByTagName&&e}for(e in d=se.support={},i=se.isXML=function(e){var t=e&&e.namespaceURI,n=e&&(e.ownerDocument||e).documentElement;return!Y.test(t||n&&n.nodeName||"HTML")},T=se.setDocument=function(e){var t,n,r=e?e.ownerDocument||e:p;return r!=C&&9===r.nodeType&&r.documentElement&&(a=(C=r).documentElement,E=!i(C),p!=C&&(n=C.defaultView)&&n.top!==n&&(n.addEventListener?n.addEventListener("unload",oe,!1):n.attachEvent&&n.attachEvent("onunload",oe)),d.scope=ce(function(e){return a.appendChild(e).appendChild(C.createElement("div")),"undefined"!=typeof e.querySelectorAll&&!e.querySelectorAll(":scope fieldset div").length}),d.attributes=ce(function(e){return e.className="i",!e.getAttribute("className")}),d.getElementsByTagName=ce(function(e){return e.appendChild(C.createComment("")),!e.getElementsByTagName("*").length}),d.getElementsByClassName=K.test(C.getElementsByClassName),d.getById=ce(function(e){return a.appendChild(e).id=S,!C.getElementsByName||!C.getElementsByName(S).length}),d.getById?(b.filter.ID=function(e){var t=e.replace(te,ne);return function(e){return e.getAttribute("id")===t}},b.find.ID=function(e,t){if("undefined"!=typeof t.getElementById&&E){var n=t.getElementById(e);return n?[n]:[]}}):(b.filter.ID=function(e){var n=e.replace(te,ne);return function(e){var t="undefined"!=typeof e.getAttributeNode&&e.getAttributeNode("id");return t&&t.value===n}},b.find.ID=function(e,t){if("undefined"!=typeof t.getElementById&&E){var n,r,i,o=t.getElementById(e);if(o){if((n=o.getAttributeNode("id"))&&n.value===e)return[o];i=t.getElementsByName(e),r=0;while(o=i[r++])if((n=o.getAttributeNode("id"))&&n.value===e)return[o]}return[]}}),b.find.TAG=d.getElementsByTagName?function(e,t){return"undefined"!=typeof t.getElementsByTagName?t.getElementsByTagName(e):d.qsa?t.querySelectorAll(e):void 0}:function(e,t){var n,r=[],i=0,o=t.getElementsByTagName(e);if("*"===e){while(n=o[i++])1===n.nodeType&&r.push(n);return r}return o},b.find.CLASS=d.getElementsByClassName&&function(e,t){if("undefined"!=typeof t.getElementsByClassName&&E)return t.getElementsByClassName(e)},s=[],v=[],(d.qsa=K.test(C.querySelectorAll))&&(ce(function(e){var t;a.appendChild(e).innerHTML="",e.querySelectorAll("[msallowcapture^='']").length&&v.push("[*^$]="+M+"*(?:''|\"\")"),e.querySelectorAll("[selected]").length||v.push("\\["+M+"*(?:value|"+R+")"),e.querySelectorAll("[id~="+S+"-]").length||v.push("~="),(t=C.createElement("input")).setAttribute("name",""),e.appendChild(t),e.querySelectorAll("[name='']").length||v.push("\\["+M+"*name"+M+"*="+M+"*(?:''|\"\")"),e.querySelectorAll(":checked").length||v.push(":checked"),e.querySelectorAll("a#"+S+"+*").length||v.push(".#.+[+~]"),e.querySelectorAll("\\\f"),v.push("[\\r\\n\\f]")}),ce(function(e){e.innerHTML="";var t=C.createElement("input");t.setAttribute("type","hidden"),e.appendChild(t).setAttribute("name","D"),e.querySelectorAll("[name=d]").length&&v.push("name"+M+"*[*^$|!~]?="),2!==e.querySelectorAll(":enabled").length&&v.push(":enabled",":disabled"),a.appendChild(e).disabled=!0,2!==e.querySelectorAll(":disabled").length&&v.push(":enabled",":disabled"),e.querySelectorAll("*,:x"),v.push(",.*:")})),(d.matchesSelector=K.test(c=a.matches||a.webkitMatchesSelector||a.mozMatchesSelector||a.oMatchesSelector||a.msMatchesSelector))&&ce(function(e){d.disconnectedMatch=c.call(e,"*"),c.call(e,"[s!='']:x"),s.push("!=",F)}),v=v.length&&new RegExp(v.join("|")),s=s.length&&new RegExp(s.join("|")),t=K.test(a.compareDocumentPosition),y=t||K.test(a.contains)?function(e,t){var n=9===e.nodeType?e.documentElement:e,r=t&&t.parentNode;return e===r||!(!r||1!==r.nodeType||!(n.contains?n.contains(r):e.compareDocumentPosition&&16&e.compareDocumentPosition(r)))}:function(e,t){if(t)while(t=t.parentNode)if(t===e)return!0;return!1},j=t?function(e,t){if(e===t)return l=!0,0;var n=!e.compareDocumentPosition-!t.compareDocumentPosition;return n||(1&(n=(e.ownerDocument||e)==(t.ownerDocument||t)?e.compareDocumentPosition(t):1)||!d.sortDetached&&t.compareDocumentPosition(e)===n?e==C||e.ownerDocument==p&&y(p,e)?-1:t==C||t.ownerDocument==p&&y(p,t)?1:u?P(u,e)-P(u,t):0:4&n?-1:1)}:function(e,t){if(e===t)return l=!0,0;var n,r=0,i=e.parentNode,o=t.parentNode,a=[e],s=[t];if(!i||!o)return e==C?-1:t==C?1:i?-1:o?1:u?P(u,e)-P(u,t):0;if(i===o)return pe(e,t);n=e;while(n=n.parentNode)a.unshift(n);n=t;while(n=n.parentNode)s.unshift(n);while(a[r]===s[r])r++;return r?pe(a[r],s[r]):a[r]==p?-1:s[r]==p?1:0}),C},se.matches=function(e,t){return se(e,null,null,t)},se.matchesSelector=function(e,t){if(T(e),d.matchesSelector&&E&&!N[t+" "]&&(!s||!s.test(t))&&(!v||!v.test(t)))try{var n=c.call(e,t);if(n||d.disconnectedMatch||e.document&&11!==e.document.nodeType)return n}catch(e){N(t,!0)}return 0":{dir:"parentNode",first:!0}," ":{dir:"parentNode"},"+":{dir:"previousSibling",first:!0},"~":{dir:"previousSibling"}},preFilter:{ATTR:function(e){return e[1]=e[1].replace(te,ne),e[3]=(e[3]||e[4]||e[5]||"").replace(te,ne),"~="===e[2]&&(e[3]=" "+e[3]+" "),e.slice(0,4)},CHILD:function(e){return e[1]=e[1].toLowerCase(),"nth"===e[1].slice(0,3)?(e[3]||se.error(e[0]),e[4]=+(e[4]?e[5]+(e[6]||1):2*("even"===e[3]||"odd"===e[3])),e[5]=+(e[7]+e[8]||"odd"===e[3])):e[3]&&se.error(e[0]),e},PSEUDO:function(e){var t,n=!e[6]&&e[2];return G.CHILD.test(e[0])?null:(e[3]?e[2]=e[4]||e[5]||"":n&&X.test(n)&&(t=h(n,!0))&&(t=n.indexOf(")",n.length-t)-n.length)&&(e[0]=e[0].slice(0,t),e[2]=n.slice(0,t)),e.slice(0,3))}},filter:{TAG:function(e){var t=e.replace(te,ne).toLowerCase();return"*"===e?function(){return!0}:function(e){return e.nodeName&&e.nodeName.toLowerCase()===t}},CLASS:function(e){var t=m[e+" "];return t||(t=new RegExp("(^|"+M+")"+e+"("+M+"|$)"))&&m(e,function(e){return t.test("string"==typeof e.className&&e.className||"undefined"!=typeof e.getAttribute&&e.getAttribute("class")||"")})},ATTR:function(n,r,i){return function(e){var t=se.attr(e,n);return null==t?"!="===r:!r||(t+="","="===r?t===i:"!="===r?t!==i:"^="===r?i&&0===t.indexOf(i):"*="===r?i&&-1:\x20\t\r\n\f]*)[\x20\t\r\n\f]*\/?>(?:<\/\1>|)$/i;function j(e,n,r){return m(n)?S.grep(e,function(e,t){return!!n.call(e,t,e)!==r}):n.nodeType?S.grep(e,function(e){return e===n!==r}):"string"!=typeof n?S.grep(e,function(e){return-1)[^>]*|#([\w-]+))$/;(S.fn.init=function(e,t,n){var r,i;if(!e)return this;if(n=n||D,"string"==typeof e){if(!(r="<"===e[0]&&">"===e[e.length-1]&&3<=e.length?[null,e,null]:q.exec(e))||!r[1]&&t)return!t||t.jquery?(t||n).find(e):this.constructor(t).find(e);if(r[1]){if(t=t instanceof S?t[0]:t,S.merge(this,S.parseHTML(r[1],t&&t.nodeType?t.ownerDocument||t:E,!0)),N.test(r[1])&&S.isPlainObject(t))for(r in t)m(this[r])?this[r](t[r]):this.attr(r,t[r]);return this}return(i=E.getElementById(r[2]))&&(this[0]=i,this.length=1),this}return e.nodeType?(this[0]=e,this.length=1,this):m(e)?void 0!==n.ready?n.ready(e):e(S):S.makeArray(e,this)}).prototype=S.fn,D=S(E);var L=/^(?:parents|prev(?:Until|All))/,H={children:!0,contents:!0,next:!0,prev:!0};function O(e,t){while((e=e[t])&&1!==e.nodeType);return e}S.fn.extend({has:function(e){var t=S(e,this),n=t.length;return this.filter(function(){for(var e=0;e\x20\t\r\n\f]*)/i,he=/^$|^module$|\/(?:java|ecma)script/i;ce=E.createDocumentFragment().appendChild(E.createElement("div")),(fe=E.createElement("input")).setAttribute("type","radio"),fe.setAttribute("checked","checked"),fe.setAttribute("name","t"),ce.appendChild(fe),y.checkClone=ce.cloneNode(!0).cloneNode(!0).lastChild.checked,ce.innerHTML="",y.noCloneChecked=!!ce.cloneNode(!0).lastChild.defaultValue,ce.innerHTML="",y.option=!!ce.lastChild;var ge={thead:[1,"","

"],col:[2,"","

"],tr:[2,"","

"],td:[3,"","

"],_default:[0,"",""]};function ve(e,t){var n;return n="undefined"!=typeof e.getElementsByTagName?e.getElementsByTagName(t||"*"):"undefined"!=typeof e.querySelectorAll?e.querySelectorAll(t||"*"):[],void 0===t||t&&A(e,t)?S.merge([e],n):n}function ye(e,t){for(var n=0,r=e.length;n",""]);var me=/<|&#?\w+;/;function xe(e,t,n,r,i){for(var o,a,s,u,l,c,f=t.createDocumentFragment(),p=[],d=0,h=e.length;d\s*$/g;function je(e,t){return A(e,"table")&&A(11!==t.nodeType?t:t.firstChild,"tr")&&S(e).children("tbody")[0]||e}function De(e){return e.type=(null!==e.getAttribute("type"))+"/"+e.type,e}function qe(e){return"true/"===(e.type||"").slice(0,5)?e.type=e.type.slice(5):e.removeAttribute("type"),e}function Le(e,t){var n,r,i,o,a,s;if(1===t.nodeType){if(Y.hasData(e)&&(s=Y.get(e).events))for(i in Y.remove(t,"handle events"),s)for(n=0,r=s[i].length;n").attr(n.scriptAttrs||{}).prop({charset:n.scriptCharset,src:n.url}).on("load error",i=function(e){r.remove(),i=null,e&&t("error"===e.type?404:200,e.type)}),E.head.appendChild(r[0])},abort:function(){i&&i()}}});var _t,zt=[],Ut=/(=)\?(?=&|$)|\?\?/;S.ajaxSetup({jsonp:"callback",jsonpCallback:function(){var e=zt.pop()||S.expando+"_"+wt.guid++;return this[e]=!0,e}}),S.ajaxPrefilter("json jsonp",function(e,t,n){var r,i,o,a=!1!==e.jsonp&&(Ut.test(e.url)?"url":"string"==typeof e.data&&0===(e.contentType||"").indexOf("application/x-www-form-urlencoded")&&Ut.test(e.data)&&"data");if(a||"jsonp"===e.dataTypes[0])return r=e.jsonpCallback=m(e.jsonpCallback)?e.jsonpCallback():e.jsonpCallback,a?e[a]=e[a].replace(Ut,"$1"+r):!1!==e.jsonp&&(e.url+=(Tt.test(e.url)?"&":"?")+e.jsonp+"="+r),e.converters["script json"]=function(){return o||S.error(r+" was not called"),o[0]},e.dataTypes[0]="json",i=C[r],C[r]=function(){o=arguments},n.always(function(){void 0===i?S(C).removeProp(r):C[r]=i,e[r]&&(e.jsonpCallback=t.jsonpCallback,zt.push(r)),o&&m(i)&&i(o[0]),o=i=void 0}),"script"}),y.createHTMLDocument=((_t=E.implementation.createHTMLDocument("").body).innerHTML="",2===_t.childNodes.length),S.parseHTML=function(e,t,n){return"string"!=typeof e?[]:("boolean"==typeof t&&(n=t,t=!1),t||(y.createHTMLDocument?((r=(t=E.implementation.createHTMLDocument("")).createElement("base")).href=E.location.href,t.head.appendChild(r)):t=E),o=!n&&[],(i=N.exec(e))?[t.createElement(i[1])]:(i=xe([e],t,o),o&&o.length&&S(o).remove(),S.merge([],i.childNodes)));var r,i,o},S.fn.load=function(e,t,n){var r,i,o,a=this,s=e.indexOf(" ");return-1").append(S.parseHTML(e)).find(r):e)}).always(n&&function(e,t){a.each(function(){n.apply(this,o||[e.responseText,t,e])})}),this},S.expr.pseudos.animated=function(t){return S.grep(S.timers,function(e){return t===e.elem}).length},S.offset={setOffset:function(e,t,n){var r,i,o,a,s,u,l=S.css(e,"position"),c=S(e),f={};"static"===l&&(e.style.position="relative"),s=c.offset(),o=S.css(e,"top"),u=S.css(e,"left"),("absolute"===l||"fixed"===l)&&-1<(o+u).indexOf("auto")?(a=(r=c.position()).top,i=r.left):(a=parseFloat(o)||0,i=parseFloat(u)||0),m(t)&&(t=t.call(e,n,S.extend({},s))),null!=t.top&&(f.top=t.top-s.top+a),null!=t.left&&(f.left=t.left-s.left+i),"using"in t?t.using.call(e,f):c.css(f)}},S.fn.extend({offset:function(t){if(arguments.length)return void 0===t?this:this.each(function(e){S.offset.setOffset(this,t,e)});var e,n,r=this[0];return r?r.getClientRects().length?(e=r.getBoundingClientRect(),n=r.ownerDocument.defaultView,{top:e.top+n.pageYOffset,left:e.left+n.pageXOffset}):{top:0,left:0}:void 0},position:function(){if(this[0]){var e,t,n,r=this[0],i={top:0,left:0};if("fixed"===S.css(r,"position"))t=r.getBoundingClientRect();else{t=this.offset(),n=r.ownerDocument,e=r.offsetParent||n.documentElement;while(e&&(e===n.body||e===n.documentElement)&&"static"===S.css(e,"position"))e=e.parentNode;e&&e!==r&&1===e.nodeType&&((i=S(e).offset()).top+=S.css(e,"borderTopWidth",!0),i.left+=S.css(e,"borderLeftWidth",!0))}return{top:t.top-i.top-S.css(r,"marginTop",!0),left:t.left-i.left-S.css(r,"marginLeft",!0)}}},offsetParent:function(){return this.map(function(){var e=this.offsetParent;while(e&&"static"===S.css(e,"position"))e=e.offsetParent;return e||re})}}),S.each({scrollLeft:"pageXOffset",scrollTop:"pageYOffset"},function(t,i){var o="pageYOffset"===i;S.fn[t]=function(e){return $(this,function(e,t,n){var r;if(x(e)?r=e:9===e.nodeType&&(r=e.defaultView),void 0===n)return r?r[i]:e[t];r?r.scrollTo(o?r.pageXOffset:n,o?n:r.pageYOffset):e[t]=n},t,e,arguments.length)}}),S.each(["top","left"],function(e,n){S.cssHooks[n]=Fe(y.pixelPosition,function(e,t){if(t)return t=We(e,n),Pe.test(t)?S(e).position()[n]+"px":t})}),S.each({Height:"height",Width:"width"},function(a,s){S.each({padding:"inner"+a,content:s,"":"outer"+a},function(r,o){S.fn[o]=function(e,t){var n=arguments.length&&(r||"boolean"!=typeof e),i=r||(!0===e||!0===t?"margin":"border");return $(this,function(e,t,n){var r;return x(e)?0===o.indexOf("outer")?e["inner"+a]:e.document.documentElement["client"+a]:9===e.nodeType?(r=e.documentElement,Math.max(e.body["scroll"+a],r["scroll"+a],e.body["offset"+a],r["offset"+a],r["client"+a])):void 0===n?S.css(e,t,i):S.style(e,t,n,i)},s,n?e:void 0,n)}})}),S.each(["ajaxStart","ajaxStop","ajaxComplete","ajaxError","ajaxSuccess","ajaxSend"],function(e,t){S.fn[t]=function(e){return this.on(t,e)}}),S.fn.extend({bind:function(e,t,n){return this.on(e,null,t,n)},unbind:function(e,t){return this.off(e,null,t)},delegate:function(e,t,n,r){return this.on(t,e,n,r)},undelegate:function(e,t,n){return 1===arguments.length?this.off(e,"**"):this.off(t,e||"**",n)},hover:function(e,t){return this.mouseenter(e).mouseleave(t||e)}}),S.each("blur focus focusin focusout resize scroll click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup contextmenu".split(" "),function(e,n){S.fn[n]=function(e,t){return 01){for(var r=0;r=i&&o>=t};break;case"bottom":h=function(t,e,n,i,o){return n>=i&&o>=n};break;case"middle":h=function(t,e,n,i,o){return e>=i&&o>=e};break;case"top-only":h=function(t,e,n,i,o){return i>=t&&n>=i};break;case"bottom-only":h=function(t,e,n,i,o){return n>=o&&o>=t};break;default:case"default":h=function(t,e,n,i,o){return n>=i&&o>=t}}return c=function(t){var i,o,l,s,r,a,u=this.state,h=!1,c=this.$element.offset();i=n.height(),o=t+i/2,l=t+i,s=this.$element.outerHeight(),r=c.top+e(this.options.top,s,i),a=c.top+s-e(this.options.bottom,s,i),h=this.test(t,o,l,r,a),h!=u&&(this.state=h,h?this.options.enter&&this.options.enter.apply(this.element):this.options.leave&&this.options.leave.apply(this.element)),this.options.scroll&&this.options.scroll.apply(this.element,[(o-r)/(a-r)])},p={id:a,options:u,test:h,handler:c,state:null,element:this,$element:s,timeoutId:null},o[a]=p,s.data("_scrollexId",p.id),p.options.initialize&&p.options.initialize.apply(this),s},jQuery.fn.unscrollex=function(){var e=t(this);if(0==this.length)return e;if(this.length>1){for(var n=0;n1){for(o=0;o 0) { + + // Shrink effect. + $main + .scrollex({ + mode: 'top', + enter: function() { + $nav.addClass('alt'); + }, + leave: function() { + $nav.removeClass('alt'); + }, + }); + + // Links. + var $nav_a = $nav.find('a'); + + $nav_a + .scrolly({ + speed: 1000, + offset: function() { return $nav.height(); } + }) + .on('click', function() { + + var $this = $(this); + + // External link? Bail. + if ($this.attr('href').charAt(0) != '#') + return; + + // Deactivate all links. + $nav_a + .removeClass('active') + .removeClass('active-locked'); + + // Activate link *and* lock it (so Scrollex doesn't try to activate other links as we're scrolling to this one's section). + $this + .addClass('active') + .addClass('active-locked'); + + }) + .each(function() { + + var $this = $(this), + id = $this.attr('href'), + $section = $(id); + + // No section for this link? Bail. + if ($section.length < 1) + return; + + // Scrollex. + $section.scrollex({ + mode: 'middle', + initialize: function() { + + // Deactivate section. + if (browser.canUse('transition')) + $section.addClass('inactive'); + + }, + enter: function() { + + // Activate section. + $section.removeClass('inactive'); + + // No locked links? Deactivate all links and activate this section's one. + if ($nav_a.filter('.active-locked').length == 0) { + + $nav_a.removeClass('active'); + $this.addClass('active'); + + } + + // Otherwise, if this section's link is the one that's locked, unlock it. + else if ($this.hasClass('active-locked')) + $this.removeClass('active-locked'); + + } + }); + + }); + + } + + // Scrolly. + $('.scrolly').scrolly({ + speed: 1000 + }); + +})(jQuery); \ No newline at end of file diff --git a/assets/js/util.js b/assets/js/util.js new file mode 100644 index 0000000..bdb8e9f --- /dev/null +++ b/assets/js/util.js @@ -0,0 +1,587 @@ +(function($) { + + /** + * Generate an indented list of links from a nav. Meant for use with panel(). + * @return {jQuery} jQuery object. + */ + $.fn.navList = function() { + + var $this = $(this); + $a = $this.find('a'), + b = []; + + $a.each(function() { + + var $this = $(this), + indent = Math.max(0, $this.parents('li').length - 1), + href = $this.attr('href'), + target = $this.attr('target'); + + b.push( + '' + + '' + + $this.text() + + '' + ); + + }); + + return b.join(''); + + }; + + /** + * Panel-ify an element. + * @param {object} userConfig User config. + * @return {jQuery} jQuery object. + */ + $.fn.panel = function(userConfig) { + + // No elements? + if (this.length == 0) + return $this; + + // Multiple elements? + if (this.length > 1) { + + for (var i=0; i < this.length; i++) + $(this[i]).panel(userConfig); + + return $this; + + } + + // Vars. + var $this = $(this), + $body = $('body'), + $window = $(window), + id = $this.attr('id'), + config; + + // Config. + config = $.extend({ + + // Delay. + delay: 0, + + // Hide panel on link click. + hideOnClick: false, + + // Hide panel on escape keypress. + hideOnEscape: false, + + // Hide panel on swipe. + hideOnSwipe: false, + + // Reset scroll position on hide. + resetScroll: false, + + // Reset forms on hide. + resetForms: false, + + // Side of viewport the panel will appear. + side: null, + + // Target element for "class". + target: $this, + + // Class to toggle. + visibleClass: 'visible' + + }, userConfig); + + // Expand "target" if it's not a jQuery object already. + if (typeof config.target != 'jQuery') + config.target = $(config.target); + + // Panel. + + // Methods. + $this._hide = function(event) { + + // Already hidden? Bail. + if (!config.target.hasClass(config.visibleClass)) + return; + + // If an event was provided, cancel it. + if (event) { + + event.preventDefault(); + event.stopPropagation(); + + } + + // Hide. + config.target.removeClass(config.visibleClass); + + // Post-hide stuff. + window.setTimeout(function() { + + // Reset scroll position. + if (config.resetScroll) + $this.scrollTop(0); + + // Reset forms. + if (config.resetForms) + $this.find('form').each(function() { + this.reset(); + }); + + }, config.delay); + + }; + + // Vendor fixes. + $this + .css('-ms-overflow-style', '-ms-autohiding-scrollbar') + .css('-webkit-overflow-scrolling', 'touch'); + + // Hide on click. + if (config.hideOnClick) { + + $this.find('a') + .css('-webkit-tap-highlight-color', 'rgba(0,0,0,0)'); + + $this + .on('click', 'a', function(event) { + + var $a = $(this), + href = $a.attr('href'), + target = $a.attr('target'); + + if (!href || href == '#' || href == '' || href == '#' + id) + return; + + // Cancel original event. + event.preventDefault(); + event.stopPropagation(); + + // Hide panel. + $this._hide(); + + // Redirect to href. + window.setTimeout(function() { + + if (target == '_blank') + window.open(href); + else + window.location.href = href; + + }, config.delay + 10); + + }); + + } + + // Event: Touch stuff. + $this.on('touchstart', function(event) { + + $this.touchPosX = event.originalEvent.touches[0].pageX; + $this.touchPosY = event.originalEvent.touches[0].pageY; + + }) + + $this.on('touchmove', function(event) { + + if ($this.touchPosX === null + || $this.touchPosY === null) + return; + + var diffX = $this.touchPosX - event.originalEvent.touches[0].pageX, + diffY = $this.touchPosY - event.originalEvent.touches[0].pageY, + th = $this.outerHeight(), + ts = ($this.get(0).scrollHeight - $this.scrollTop()); + + // Hide on swipe? + if (config.hideOnSwipe) { + + var result = false, + boundary = 20, + delta = 50; + + switch (config.side) { + + case 'left': + result = (diffY < boundary && diffY > (-1 * boundary)) && (diffX > delta); + break; + + case 'right': + result = (diffY < boundary && diffY > (-1 * boundary)) && (diffX < (-1 * delta)); + break; + + case 'top': + result = (diffX < boundary && diffX > (-1 * boundary)) && (diffY > delta); + break; + + case 'bottom': + result = (diffX < boundary && diffX > (-1 * boundary)) && (diffY < (-1 * delta)); + break; + + default: + break; + + } + + if (result) { + + $this.touchPosX = null; + $this.touchPosY = null; + $this._hide(); + + return false; + + } + + } + + // Prevent vertical scrolling past the top or bottom. + if (($this.scrollTop() < 0 && diffY < 0) + || (ts > (th - 2) && ts < (th + 2) && diffY > 0)) { + + event.preventDefault(); + event.stopPropagation(); + + } + + }); + + // Event: Prevent certain events inside the panel from bubbling. + $this.on('click touchend touchstart touchmove', function(event) { + event.stopPropagation(); + }); + + // Event: Hide panel if a child anchor tag pointing to its ID is clicked. + $this.on('click', 'a[href="#' + id + '"]', function(event) { + + event.preventDefault(); + event.stopPropagation(); + + config.target.removeClass(config.visibleClass); + + }); + + // Body. + + // Event: Hide panel on body click/tap. + $body.on('click touchend', function(event) { + $this._hide(event); + }); + + // Event: Toggle. + $body.on('click', 'a[href="#' + id + '"]', function(event) { + + event.preventDefault(); + event.stopPropagation(); + + config.target.toggleClass(config.visibleClass); + + }); + + // Window. + + // Event: Hide on ESC. + if (config.hideOnEscape) + $window.on('keydown', function(event) { + + if (event.keyCode == 27) + $this._hide(event); + + }); + + return $this; + + }; + + /** + * Apply "placeholder" attribute polyfill to one or more forms. + * @return {jQuery} jQuery object. + */ + $.fn.placeholder = function() { + + // Browser natively supports placeholders? Bail. + if (typeof (document.createElement('input')).placeholder != 'undefined') + return $(this); + + // No elements? + if (this.length == 0) + return $this; + + // Multiple elements? + if (this.length > 1) { + + for (var i=0; i < this.length; i++) + $(this[i]).placeholder(); + + return $this; + + } + + // Vars. + var $this = $(this); + + // Text, TextArea. + $this.find('input[type=text],textarea') + .each(function() { + + var i = $(this); + + if (i.val() == '' + || i.val() == i.attr('placeholder')) + i + .addClass('polyfill-placeholder') + .val(i.attr('placeholder')); + + }) + .on('blur', function() { + + var i = $(this); + + if (i.attr('name').match(/-polyfill-field$/)) + return; + + if (i.val() == '') + i + .addClass('polyfill-placeholder') + .val(i.attr('placeholder')); + + }) + .on('focus', function() { + + var i = $(this); + + if (i.attr('name').match(/-polyfill-field$/)) + return; + + if (i.val() == i.attr('placeholder')) + i + .removeClass('polyfill-placeholder') + .val(''); + + }); + + // Password. + $this.find('input[type=password]') + .each(function() { + + var i = $(this); + var x = $( + $('

') + .append(i.clone()) + .remove() + .html() + .replace(/type="password"/i, 'type="text"') + .replace(/type=password/i, 'type=text') + ); + + if (i.attr('id') != '') + x.attr('id', i.attr('id') + '-polyfill-field'); + + if (i.attr('name') != '') + x.attr('name', i.attr('name') + '-polyfill-field'); + + x.addClass('polyfill-placeholder') + .val(x.attr('placeholder')).insertAfter(i); + + if (i.val() == '') + i.hide(); + else + x.hide(); + + i + .on('blur', function(event) { + + event.preventDefault(); + + var x = i.parent().find('input[name=' + i.attr('name') + '-polyfill-field]'); + + if (i.val() == '') { + + i.hide(); + x.show(); + + } + + }); + + x + .on('focus', function(event) { + + event.preventDefault(); + + var i = x.parent().find('input[name=' + x.attr('name').replace('-polyfill-field', '') + ']'); + + x.hide(); + + i + .show() + .focus(); + + }) + .on('keypress', function(event) { + + event.preventDefault(); + x.val(''); + + }); + + }); + + // Events. + $this + .on('submit', function() { + + $this.find('input[type=text],input[type=password],textarea') + .each(function(event) { + + var i = $(this); + + if (i.attr('name').match(/-polyfill-field$/)) + i.attr('name', ''); + + if (i.val() == i.attr('placeholder')) { + + i.removeClass('polyfill-placeholder'); + i.val(''); + + } + + }); + + }) + .on('reset', function(event) { + + event.preventDefault(); + + $this.find('select') + .val($('option:first').val()); + + $this.find('input,textarea') + .each(function() { + + var i = $(this), + x; + + i.removeClass('polyfill-placeholder'); + + switch (this.type) { + + case 'submit': + case 'reset': + break; + + case 'password': + i.val(i.attr('defaultValue')); + + x = i.parent().find('input[name=' + i.attr('name') + '-polyfill-field]'); + + if (i.val() == '') { + i.hide(); + x.show(); + } + else { + i.show(); + x.hide(); + } + + break; + + case 'checkbox': + case 'radio': + i.attr('checked', i.attr('defaultValue')); + break; + + case 'text': + case 'textarea': + i.val(i.attr('defaultValue')); + + if (i.val() == '') { + i.addClass('polyfill-placeholder'); + i.val(i.attr('placeholder')); + } + + break; + + default: + i.val(i.attr('defaultValue')); + break; + + } + }); + + }); + + return $this; + + }; + + /** + * Moves elements to/from the first positions of their respective parents. + * @param {jQuery} $elements Elements (or selector) to move. + * @param {bool} condition If true, moves elements to the top. Otherwise, moves elements back to their original locations. + */ + $.prioritize = function($elements, condition) { + + var key = '__prioritize'; + + // Expand $elements if it's not already a jQuery object. + if (typeof $elements != 'jQuery') + $elements = $($elements); + + // Step through elements. + $elements.each(function() { + + var $e = $(this), $p, + $parent = $e.parent(); + + // No parent? Bail. + if ($parent.length == 0) + return; + + // Not moved? Move it. + if (!$e.data(key)) { + + // Condition is false? Bail. + if (!condition) + return; + + // Get placeholder (which will serve as our point of reference for when this element needs to move back). + $p = $e.prev(); + + // Couldn't find anything? Means this element's already at the top, so bail. + if ($p.length == 0) + return; + + // Move element to top of parent. + $e.prependTo($parent); + + // Mark element as moved. + $e.data(key, $p); + + } + + // Moved already? + else { + + // Condition is true? Bail. + if (condition) + return; + + $p = $e.data(key); + + // Move element back to its original location (using our placeholder). + $e.insertAfter($p); + + // Unmark element as moved. + $e.removeData(key); + + } + + }); + + }; + +})(jQuery); \ No newline at end of file diff --git a/assets/sass/base/_page.scss b/assets/sass/base/_page.scss new file mode 100644 index 0000000..c6626d6 --- /dev/null +++ b/assets/sass/base/_page.scss @@ -0,0 +1,45 @@ +/* Basic */ + + // MSIE: Required for IEMobile. + @-ms-viewport { + width: device-width; + } + + // MSIE: Prevents scrollbar from overlapping content. + body { + -ms-overflow-style: scrollbar; + } + + // Ensures page width is always >=320px. + @include breakpoint('<=xsmall') { + html, body { + min-width: 320px; + } + } + + // Set box model to border-box. + // Based on css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice + html { + box-sizing: border-box; + } + + *, *:before, *:after { + box-sizing: inherit; + } + + body { + background-color: _palette(bg); + @include vendor('background-image', ( + 'url("images/overlay.png")', + 'linear-gradient(45deg, #{_palette(bg1)} 15%, #{_palette(bg2) 85%})', + )); + + // Stops initial animations until page loads. + &.is-preload { + *, *:before, *:after { + @include vendor('animation', 'none !important'); + @include vendor('transition', 'none !important'); + } + } + + } diff --git a/assets/sass/base/_reset.scss b/assets/sass/base/_reset.scss new file mode 100644 index 0000000..3af8aa8 --- /dev/null +++ b/assets/sass/base/_reset.scss @@ -0,0 +1,76 @@ +/// +/// Stellar by HTML5 UP +/// html5up.net | @ajlkn +/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +/// + +// Reset. +// Based on meyerweb.com/eric/tools/css/reset (v2.0 | 20110126 | License: public domain) + + html, body, div, span, applet, object, + iframe, h1, h2, h3, h4, h5, h6, p, blockquote, + pre, a, abbr, acronym, address, big, cite, + code, del, dfn, em, img, ins, kbd, q, s, samp, + small, strike, strong, sub, sup, tt, var, b, + u, i, center, dl, dt, dd, ol, ul, li, fieldset, + form, label, legend, table, caption, tbody, + tfoot, thead, tr, th, td, article, aside, + canvas, details, embed, figure, figcaption, + footer, header, hgroup, menu, nav, output, ruby, + section, summary, time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; + } + + article, aside, details, figcaption, figure, + footer, header, hgroup, menu, nav, section { + display: block; + } + + body { + line-height: 1; + } + + ol, ul { + list-style:none; + } + + blockquote, q { + quotes: none; + + &:before, + &:after { + content: ''; + content: none; + } + } + + table { + border-collapse: collapse; + border-spacing: 0; + } + + body { + -webkit-text-size-adjust: none; + } + + mark { + background-color: transparent; + color: inherit; + } + + input::-moz-focus-inner { + border: 0; + padding: 0; + } + + input, select, textarea { + -moz-appearance: none; + -webkit-appearance: none; + -ms-appearance: none; + appearance: none; + } \ No newline at end of file diff --git a/assets/sass/base/_typography.scss b/assets/sass/base/_typography.scss new file mode 100644 index 0000000..e54a8d6 --- /dev/null +++ b/assets/sass/base/_typography.scss @@ -0,0 +1,232 @@ +/* Type */ + +body { + background-color: _palette(bg); + color: _palette(fg); +} + +body, +input, +select, +textarea { + font-family: _font(family); + font-size: 18pt; + font-weight: _font(weight); + line-height: 1.65; + + @include breakpoint("<=xlarge") { + font-size: 15pt; + } + + @include breakpoint("<=large") { + font-size: 13pt; + } + + @include breakpoint("<=xxsmall") { + font-size: 12pt; + } +} + +a { + @include vendor( + "transition", + ( + "color #{_duration(transition)} ease", + "border-bottom #{_duration(transition)} ease" + ) + ); + text-decoration: none; + /* border-bottom: dotted 1px; */ + color: inherit; + + &:hover { + border-bottom-color: transparent; + } +} + +strong, +b { + font-weight: _font(weight-bold); +} + +em, +i { + font-style: italic; +} + +p { + margin: 0 0 _size(element-margin) 0; + + &.content { + -moz-columns: 20em 2; + -webkit-columns: 20em 2; + -ms-columns: 20em 2; + columns: 20em 2; + -moz-column-gap: _size(element-margin); + -webkit-column-gap: _size(element-margin); + -ms-column-gap: _size(element-margin); + column-gap: _size(element-margin); + text-align: justify; + } +} + +h1, +h2, +h3, +h4, +h5, +h6 { + font-weight: _font(weight); + line-height: 1.5; + margin: 0 0 (_size(element-margin) * 0.35) 0; + letter-spacing: _font(letter-spacing); + + a { + color: inherit; + text-decoration: none; + } +} + +h1 { + font-size: 2.5em; + line-height: 1.2; +} + +h2 { + font-size: 1.5em; +} + +h3 { + font-size: 1.25em; +} + +h4 { + font-size: 1.1em; +} + +h5 { + font-size: 0.9em; +} + +h6 { + font-size: 0.7em; +} + +@include breakpoint("<=small") { + h1 { + font-size: 2em; + } +} + +sub { + font-size: 0.8em; + position: relative; + top: 0.5em; +} + +sup { + font-size: 0.8em; + position: relative; + top: -0.5em; +} + +blockquote { + border-left: solid 4px; + font-style: italic; + margin: 0 0 _size(element-margin) 0; + padding: calc(_size(element-margin) / 4) 0 calc(_size(element-margin) / 4) + _size(element-margin); +} + +code { + border-radius: _size(border-radius); + border: solid 1px; + font-family: _font(family-fixed); + font-size: 0.9em; + margin: 0 0.25em; + padding: 0.25em 0.65em; +} + +pre { + -webkit-overflow-scrolling: touch; + font-family: _font(family-fixed); + font-size: 0.9em; + margin: 0 0 _size(element-margin) 0; + + code { + display: block; + line-height: 1.75; + padding: 1em 1.5em; + overflow-x: auto; + } +} + +hr { + border: 0; + border-bottom: solid 1px; + margin: _size(element-margin) 0; + + &.major { + margin: (_size(element-margin) * 1.5) 0; + } +} + +.align-left { + text-align: left; +} + +.align-center { + text-align: center; +} + +.align-right { + text-align: right; +} + +@mixin color-typography($p: null) { + @if $p != null { + background-color: _palette($p, bg); + color: _palette($p, fg); + } + + input, + select, + textarea { + color: _palette($p, fg-bold); + } + + a { + &:hover { + color: _palette($p, fg-bold); + } + } + + strong, + b { + color: _palette($p, fg-bold); + } + + h1, + h2, + h3, + h4, + h5, + h6 { + color: _palette($p, fg-bold); + } + + blockquote { + border-left-color: _palette($p, border); + } + + code { + background: _palette($p, border-bg); + border-color: _palette($p, border); + } + + hr { + border-bottom-color: _palette($p, border); + } +} + +@include color-typography; diff --git a/assets/sass/components/_actions.scss b/assets/sass/components/_actions.scss new file mode 100644 index 0000000..06076aa --- /dev/null +++ b/assets/sass/components/_actions.scss @@ -0,0 +1,95 @@ +/* Actions */ + +ul.actions { + @include vendor("display", "flex"); + cursor: default; + list-style: none; + margin-left: (_size(element-margin) * -0.5); + padding-left: 0; + + li { + padding: 0 0 0 (_size(element-margin) * 0.5); + vertical-align: middle; + } + + &.special { + @include vendor("justify-content", "center"); + width: 100%; + margin-left: 0; + + li { + &:first-child { + padding-left: 0; + } + } + } + + &.stacked { + @include vendor("flex-direction", "column"); + margin-left: 0; + + li { + padding: (_size(element-margin) * 0.65) 0 0 0; + + &:first-child { + padding-top: 0; + } + } + } + + &.fit { + width: calc(100% + #{_size(element-margin) * 0.5}); + + li { + @include vendor("flex-grow", "1"); + @include vendor("flex-shrink", "1"); + width: 100%; + + > * { + width: 100%; + } + } + + &.stacked { + width: 100%; + } + } + + @include breakpoint("<=xsmall") { + &:not(.fixed) { + @include vendor("flex-direction", "column"); + margin-left: 0; + width: 100% !important; + + li { + @include vendor("flex-grow", "1"); + @include vendor("flex-shrink", "1"); + padding: (_size(element-margin) * 0.5) 0 0 0; + text-align: center; + width: 100%; + + > * { + width: 100%; + } + + &:first-child { + padding-top: 0; + } + + input[type="submit"], + input[type="reset"], + input[type="button"], + button, + .button { + width: 100%; + + &.icon { + &:before { + margin-left: -0.5rem; + } + } + } + } + } + } +} diff --git a/assets/sass/components/_box.scss b/assets/sass/components/_box.scss new file mode 100644 index 0000000..b289644 --- /dev/null +++ b/assets/sass/components/_box.scss @@ -0,0 +1,52 @@ +/* Box */ + +.box { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + border-radius: _size(border-radius); + border: solid _size(border-width); + margin-bottom: _size(element-margin); + padding: 1.5em; + width: 75vw; + + > :last-child, + > :last-child > :last-child, + > :last-child > :last-child > :last-child { + margin-bottom: 0; + } + + &.alt { + border: 0; + border-radius: 0; + padding: 0; + } + + .title { + font-size: 1.5em; + } + + img { + width: 80%; + max-width: 600px; + height: auto; + } + + .date { + font-size: 1em; + } + + .description { + font-size: 1.1em; + padding-top: 1em; + } +} + +@mixin color-box($p: null) { + .box { + border-color: _palette($p, border); + } +} + +@include color-box; diff --git a/assets/sass/components/_button.scss b/assets/sass/components/_button.scss new file mode 100644 index 0000000..440e109 --- /dev/null +++ b/assets/sass/components/_button.scss @@ -0,0 +1,109 @@ +/// +/// Stellar by HTML5 UP +/// html5up.net | @ajlkn +/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +/// + +/* Button */ + + input[type="submit"], + input[type="reset"], + input[type="button"], + button, + .button { + @include vendor('appearance', 'none'); + @include vendor('transition', ( + 'background-color #{_duration(transition)} ease-in-out', + 'color #{_duration(transition)} ease-in-out' + )); + border-radius: _size(border-radius); + border: 0; + cursor: pointer; + display: inline-block; + font-weight: _font(weight); + height: 2.75em; + line-height: 2.75em; + min-width: 9.25em; + padding: 0 1.5em; + text-align: center; + text-decoration: none; + white-space: nowrap; + + &.icon { + padding-left: 1.35em; + + &:before { + margin-right: 0.5em; + } + } + + &.fit { + width: 100%; + } + + &.small { + font-size: 0.8em; + } + + &.large { + font-size: 1.35em; + } + + &.disabled, + &:disabled { + @include vendor('pointer-events', 'none'); + opacity: 0.25; + } + + @include breakpoint('<=small') { + min-width: 0; + } + } + + @mixin color-button($p: null) { + input[type="submit"], + input[type="reset"], + input[type="button"], + button, + .button { + background-color: transparent; + box-shadow: inset 0 0 0 1px _palette($p, border); + color: _palette($p, fg-bold) !important; + + &:hover { + background-color: _palette($p, border-bg); + } + + &:active { + background-color: _palette($p, border2-bg); + } + + &.icon { + &:before { + color: _palette($p, fg-light); + } + } + + &.primary { + background-color: _palette(accent); + color: _palette(invert, bg) !important; + box-shadow: none; + + &:hover { + background-color: lighten(_palette(accent), 3); + } + + &:active { + background-color: darken(_palette(accent), 3); + } + + &.icon { + &:before { + color: _palette(invert, bg) !important; + } + } + } + } + } + + @include color-button; \ No newline at end of file diff --git a/assets/sass/components/_card.scss b/assets/sass/components/_card.scss new file mode 100644 index 0000000..83b823c --- /dev/null +++ b/assets/sass/components/_card.scss @@ -0,0 +1,67 @@ +/* Card */ + +.card-container { + display: flex; + flex-wrap: wrap; + justify-content: center; +} + +.box-wrapper { + margin: 0; + padding: 0; +} + +.card-container .box-wrapper { + flex: 0 0 50%; +} + +.card { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + border-radius: _size(border-radius); + border: solid _size(border-width) #ddd; + margin-bottom: _size(element-margin); + padding: 1.5em; + margin: 1.5em; + width: 100%; + + > :last-child, + > :last-child > :last-child, + > :last-child > :last-child > :last-child { + margin-bottom: 0; + } + + &.alt { + border: 0; + border-radius: 0; + padding: 0; + } + + .title { + font-size: 1.5em; + } + + img { + width: 80%; + max-width: 600px; + height: auto; + } + + .description { + font-size: 1.1em; + padding-top: 1em; + } + + .date { + font-size: 1em; + margin-top: auto; + } +} + +@include breakpoint("<=small") { + .card-container .box-wrapper { + flex: 0 0 100%; + } +} diff --git a/assets/sass/components/_features.scss b/assets/sass/components/_features.scss new file mode 100644 index 0000000..caf4f87 --- /dev/null +++ b/assets/sass/components/_features.scss @@ -0,0 +1,54 @@ +/* Features */ + + .features { + @include vendor('display', 'flex'); + @include vendor('flex-wrap', 'wrap'); + @include vendor('justify-content', 'center'); + width: calc(100% + #{_size(element-margin)}); + margin: 0 0 (_size(element-margin) * 1.5) (_size(element-margin) * -1); + padding: 0; + list-style: none; + + li { + width: calc((100% / 3) - #{_size(element-margin)}); + margin-left: _size(element-margin); + margin-top: (_size(element-margin) * 1.5); + padding: 0; + + &:nth-child(1), + &:nth-child(2), + &:nth-child(3) { + margin-top: 0; + } + + > :last-child { + margin-bottom: 0; + } + } + + @include breakpoint('<=medium') { + li { + width: calc((100% / 2) - #{_size(element-margin)}); + + &:nth-child(3) { + margin-top: (_size(element-margin) * 1.5); + } + } + } + + @include breakpoint('<=small') { + width: 100%; + margin: 0 0 _size(element-margin) 0; + + li { + width: 100%; + margin-left: 0; + margin-top: _size(element-margin); + + &:nth-child(2), + &:nth-child(3) { + margin-top: _size(element-margin); + } + } + } + } diff --git a/assets/sass/components/_form.scss b/assets/sass/components/_form.scss new file mode 100644 index 0000000..7ac57d9 --- /dev/null +++ b/assets/sass/components/_form.scss @@ -0,0 +1,221 @@ +/// +/// Stellar by HTML5 UP +/// html5up.net | @ajlkn +/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +/// + +/* Form */ + + form { + margin: 0 0 _size(element-margin) 0; + } + + label { + display: block; + font-size: 0.9em; + font-weight: _font(weight-bold); + margin: 0 0 (_size(element-margin) * 0.5) 0; + } + + input[type="text"], + input[type="password"], + input[type="email"], + select, + textarea { + @include vendor('appearance', 'none'); + border-radius: _size(border-radius); + border: solid 1px; + color: inherit; + display: block; + outline: 0; + padding: 0 1em; + text-decoration: none; + width: 100%; + + &:invalid { + box-shadow: none; + } + } + + select { + background-size: 1.25rem; + background-repeat: no-repeat; + background-position: calc(100% - 1rem) center; + height: _size(element-height); + padding-right: _size(element-height); + text-overflow: ellipsis; + + &:focus { + &::-ms-value { + background-color: transparent; + } + } + + &::-ms-expand { + display: none; + } + } + + input[type="text"], + input[type="password"], + input[type="email"], + select { + height: _size(element-height); + } + + textarea { + padding: 0.75em 1em; + } + + input[type="checkbox"], + input[type="radio"], { + @include vendor('appearance', 'none'); + display: block; + float: left; + margin-right: -2em; + opacity: 0; + width: 1em; + z-index: -1; + + & + label { + @include icon(false, solid); + cursor: pointer; + display: inline-block; + font-size: 1em; + font-weight: _font(weight); + padding-left: (_size(element-height) * 0.6) + 0.75em; + padding-right: 0.75em; + position: relative; + + &:before { + border-radius: _size(border-radius); + border: solid 1px; + content: ''; + display: inline-block; + font-size: 0.8em; + height: (_size(element-height) * 0.75); + left: 0; + line-height: (_size(element-height) * 0.75); + position: absolute; + text-align: center; + top: 0; + width: (_size(element-height) * 0.75); + } + } + + &:checked + label { + &:before { + content: '\f00c'; + } + } + } + + input[type="checkbox"] { + & + label { + &:before { + border-radius: _size(border-radius); + } + } + } + + input[type="radio"] { + & + label { + &:before { + border-radius: 100%; + } + } + } + + ::-webkit-input-placeholder { + opacity: 1.0; + } + + :-moz-placeholder { + opacity: 1.0; + } + + ::-moz-placeholder { + opacity: 1.0; + } + + :-ms-input-placeholder { + opacity: 1.0; + } + + @mixin color-form($p: null) { + label { + color: _palette($p, fg-bold); + } + + input[type="text"], + input[type="password"], + input[type="email"], + select, + textarea { + background-color: _palette($p, border-bg); + border-color: _palette($p, border); + + &:focus { + border-color: _palette(accent); + box-shadow: 0 0 0 1px _palette(accent); + } + } + + select { + background-image: svg-url(""); + + option { + color: _palette($p, fg-bold); + background: _palette($p, bg); + } + } + + input[type="checkbox"], + input[type="radio"], { + & + label { + color: _palette($p, fg); + + &:before { + background: _palette($p, border-bg); + border-color: _palette($p, border); + } + } + + &:checked + label { + &:before { + background-color: _palette($p, fg-bold); + border-color: _palette($p, fg-bold); + color: _palette($p, bg); + } + } + + &:focus + label { + &:before { + border-color: _palette(accent); + box-shadow: 0 0 0 1px _palette(accent); + } + } + } + + ::-webkit-input-placeholder { + color: _palette($p, fg-light) !important; + } + + :-moz-placeholder { + color: _palette($p, fg-light) !important; + } + + ::-moz-placeholder { + color: _palette($p, fg-light) !important; + } + + :-ms-input-placeholder { + color: _palette($p, fg-light) !important; + } + + .formerize-placeholder { + color: _palette($p, fg-light) !important; + } + } + + @include color-form; \ No newline at end of file diff --git a/assets/sass/components/_icon.scss b/assets/sass/components/_icon.scss new file mode 100644 index 0000000..4d99a5a --- /dev/null +++ b/assets/sass/components/_icon.scss @@ -0,0 +1,150 @@ +/// +/// Stellar by HTML5 UP +/// html5up.net | @ajlkn +/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +/// + +/* Icon */ + +.icon { + @include icon; + @include vendor( + "transition", + ( + "background-color #{_duration(transition)} ease-in-out", + "color #{_duration(transition)} ease-in-out" + ) + ); + border-bottom: none; + position: relative; + font-size: 1.75em; + + > .label { + display: none; + } + + &:before { + line-height: solid; + } + + &.solid { + &:before { + font-weight: 900; + } + } + + &.brands { + &:before { + font-family: "Font Awesome 5 Brands"; + } + } + + &.major { + border: solid 1px; + display: inline-block; + border-radius: 100%; + padding: 0.65em; + margin: 0 0 _size(element-margin) 0; + cursor: default; + + &:before { + display: inline-block; + font-size: 6.25rem; + width: 2.25em; + height: 2.25em; + line-height: 2.2em; + border-radius: 100%; + border: solid 1px; + text-align: center; + } + } + + &.alt { + display: inline-block; + border: solid 1px; + border-radius: 100%; + + &:before { + display: block; + font-size: 1.25em; + width: 2em; + height: 2em; + text-align: center; + line-height: 2em; + } + } + + &.style1 { + color: _palette(accent1); + } + + &.style2 { + color: _palette(accent2); + } + + &.style3 { + color: _palette(accent3); + } + + &.style4 { + color: _palette(accent4); + } + + &.style5 { + color: _palette(accent5); + } + + @include breakpoint("<=xlarge") { + &.major { + &:before { + font-size: 5.5rem; + } + } + } + + @include breakpoint("<=large") { + &.major { + &:before { + font-size: 4.75rem; + } + } + } + + @include breakpoint("<=small") { + &.major { + margin: 0 0 (_size(element-margin) * 0.75) 0; + padding: 0.35em; + + &:before { + font-size: 3.5rem; + } + } + } +} + +@mixin color-icon($p: null) { + .icon { + &.major { + border-color: _palette($p, border); + + &:before { + border-color: _palette($p, border); + } + } + + &.alt { + border-color: _palette($p, border); + color: _palette($p, fg-bold); + + &:hover { + background-color: _palette($p, border-bg); + } + + &:active { + background-color: _palette($p, border2-bg); + } + } + } +} + +@include color-icon; diff --git a/assets/sass/components/_icons.scss b/assets/sass/components/_icons.scss new file mode 100644 index 0000000..a01b80c --- /dev/null +++ b/assets/sass/components/_icons.scss @@ -0,0 +1,16 @@ +/* Icons */ + +ul.icons { + cursor: default; + list-style: none; + padding-left: 0; + + li { + display: inline-block; + padding: 0 0.65em 0 0; + + &:last-child { + padding-right: 0 !important; + } + } +} diff --git a/assets/sass/components/_image.scss b/assets/sass/components/_image.scss new file mode 100644 index 0000000..3c4db8c --- /dev/null +++ b/assets/sass/components/_image.scss @@ -0,0 +1,60 @@ +/// +/// Stellar by HTML5 UP +/// html5up.net | @ajlkn +/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +/// + +/* Image */ + + .image { + border-radius: _size(border-radius); + border: 0; + display: inline-block; + position: relative; + + img { + border-radius: _size(border-radius); + display: block; + } + + &.left, + &.right { + max-width: 40%; + + img { + width: 100%; + } + } + + &.left { + float: left; + margin: 0 1.5em 1em 0; + top: 0.25em; + } + + &.right { + float: right; + margin: 0 0 1em 1.5em; + top: 0.25em; + } + + &.fit { + display: block; + margin: 0 0 _size(element-margin) 0; + width: 100%; + + img { + width: 100%; + } + } + + &.main { + display: block; + margin: 0 0 (_size(element-margin) * 1.5) 0; + width: 100%; + + img { + width: 100%; + } + } + } \ No newline at end of file diff --git a/assets/sass/components/_list.scss b/assets/sass/components/_list.scss new file mode 100644 index 0000000..bd49689 --- /dev/null +++ b/assets/sass/components/_list.scss @@ -0,0 +1,94 @@ +/// +/// Stellar by HTML5 UP +/// html5up.net | @ajlkn +/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +/// + +/* List */ + + ol { + list-style: decimal; + margin: 0 0 _size(element-margin) 0; + padding-left: 1.25em; + + li { + padding-left: 0.25em; + } + } + + ul { + list-style: disc; + margin: 0 0 _size(element-margin) 0; + padding-left: 1em; + + li { + padding-left: 0.5em; + } + + &.alt { + list-style: none; + padding-left: 0; + + li { + border-top: solid 1px; + padding: 0.5em 0; + + &:first-child { + border-top: 0; + padding-top: 0; + } + } + } + } + + dl { + margin: 0 0 _size(element-margin) 0; + + dt { + display: block; + font-weight: _font(weight-bold); + margin: 0 0 (_size(element-margin) * 0.5) 0; + } + + dd { + margin-left: _size(element-margin); + } + + &.alt { + dt { + display: block; + width: 3em; + margin: 0; + clear: left; + float: left; + } + + dd { + margin: 0 0 0.85em 5.5em; + } + + &:after { + content: ''; + display: block; + clear: both; + } + } + } + + @mixin color-list($p: null) { + ul { + &.alt { + li { + border-top-color: _palette($p, border); + } + } + } + + dl { + dt { + color: _palette($p, fg-bold); + } + } + } + + @include color-list; \ No newline at end of file diff --git a/assets/sass/components/_row.scss b/assets/sass/components/_row.scss new file mode 100644 index 0000000..fcd1df2 --- /dev/null +++ b/assets/sass/components/_row.scss @@ -0,0 +1,31 @@ +/// +/// Stellar by HTML5 UP +/// html5up.net | @ajlkn +/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +/// + +/* Row */ + + .row { + @include html-grid(1.5em); + + @include breakpoint('<=xlarge') { + @include html-grid(1.5em, 'xlarge'); + } + + @include breakpoint('<=large') { + @include html-grid(1.5em, 'large'); + } + + @include breakpoint('<=medium') { + @include html-grid(1.5em, 'medium'); + } + + @include breakpoint('<=small') { + @include html-grid(1em, 'small'); + } + + @include breakpoint('<=xsmall') { + @include html-grid(1.25em, 'xsmall'); + } + } \ No newline at end of file diff --git a/assets/sass/components/_section.scss b/assets/sass/components/_section.scss new file mode 100644 index 0000000..25643ee --- /dev/null +++ b/assets/sass/components/_section.scss @@ -0,0 +1,111 @@ +/* Section/Article */ + +section, +article { + &.special { + text-align: center; + } + + display: flex; + flex-direction: column; + + .box-wrapper { + display: flex; + justify-content: center; + } +} + +header { + &.major { + margin-bottom: (_size(element-margin) * 1.5); + + h2 { + font-size: 2em; + + &:after { + display: block; + content: ""; + width: 3.25em; + height: 2px; + margin: (_size(element-margin) * 0.35) 0 (_size(element-margin) * 0.5) 0; + border-radius: 2px; + + section.special &, + article.special & { + margin-left: auto; + margin-right: auto; + } + } + } + + p { + font-size: 1.25em; + letter-spacing: _font(letter-spacing); + } + + &.special { + text-align: center; + + h2 { + &:after { + margin-left: auto; + margin-right: auto; + } + } + } + } +} + +footer { + &.major { + margin-top: (_size(element-margin) * 1.5); + } +} + +@include breakpoint("<=small") { + header { + &.major { + margin-bottom: 0; + + h2 { + font-size: 1.5em; + } + + p { + font-size: 1em; + letter-spacing: 0; + + br { + display: none; + } + } + } + } + + footer { + &.major { + margin-top: 0; + } + } +} + +@mixin color-section($p: null) { + header { + &.major { + h2 { + &:after { + background-color: _palette($p, border); + + @if $p == "invert" { + @include vendor( + "background-image", + "linear-gradient(90deg, #{_palette(accent1)}, #{_palette(accent3)}, #{_palette(accent5)})" + ); + } + } + } + } + } +} + +@include color-section; diff --git a/assets/sass/components/_spotlight.scss b/assets/sass/components/_spotlight.scss new file mode 100644 index 0000000..da1aba6 --- /dev/null +++ b/assets/sass/components/_spotlight.scss @@ -0,0 +1,93 @@ +/// +/// Stellar by HTML5 UP +/// html5up.net | @ajlkn +/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +/// + +/* Spotlight */ + + .spotlight { + @include vendor('display', 'flex'); + @include vendor('align-items', 'center'); + margin: 0 0 _size(element-margin) 0; + + .content { + @include vendor('flex', '1'); + + > :last-child { + margin-bottom: 0; + } + + header { + &.major { + margin: 0 0 _size(element-margin) 0; + } + } + } + + .image { + display: inline-block; + margin-left: 4em; + padding: 0.65em; + border-radius: 100%; + border: solid 1px; + + img { + display: block; + border-radius: 100%; + width: 16em; + } + } + + @include breakpoint('<=medium') { + @include vendor('flex-direction', 'column-reverse'); + text-align: center; + + .content { + @include vendor('flex', '0 1 auto'); + width: 100%; + + header { + &.major { + h2 { + &:after { + margin-left: auto; + margin-right: auto; + } + } + } + } + + .actions { + @include vendor('justify-content', 'center'); + width: calc(100% + #{_size(element-margin) * 0.5}); + } + } + + .image { + @include vendor('flex', '0 1 auto'); + margin-left: 0; + margin-bottom: _size(element-margin); + } + } + + @include breakpoint('<=small') { + .image { + padding: 0.35em; + + img { + width: 12em; + } + } + } + } + + @mixin color-spotlight($p: null) { + .spotlight { + .image { + border-color: _palette($p, border); + } + } + } + + @include color-spotlight; \ No newline at end of file diff --git a/assets/sass/components/_statistics.scss b/assets/sass/components/_statistics.scss new file mode 100644 index 0000000..d438287 --- /dev/null +++ b/assets/sass/components/_statistics.scss @@ -0,0 +1,108 @@ +/// +/// Stellar by HTML5 UP +/// html5up.net | @ajlkn +/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +/// + +/* Statistics */ + + .statistics { + @include vendor('display', 'flex'); + width: 100%; + margin: 0 0 (_size(element-margin) * 1.5) 0; + padding: 0; + list-style: none; + cursor: default; + + li { + @include vendor('flex', '1'); + padding: 1.5em; + color: _palette(fg-bold); + text-align: center; + + &.style1 { + background-color: _palette(accent1); + } + + &.style2 { + background-color: _palette(accent2); + } + + &.style3 { + background-color: _palette(accent3); + } + + &.style4 { + background-color: _palette(accent4); + } + + &.style5 { + background-color: _palette(accent5); + } + + strong, b { + display: block; + font-size: 2em; + line-height: 1.1; + color: inherit !important; + font-weight: _font(weight); + letter-spacing: _font(letter-spacing); + } + + &:first-child { + border-top-left-radius: _size(border-radius); + border-bottom-left-radius: _size(border-radius); + } + + &:last-child { + border-top-right-radius: _size(border-radius); + border-bottom-right-radius: _size(border-radius); + } + + .icon { + display: inline-block; + + &:before { + font-size: 2.75rem; + line-height: 1.3; + } + } + } + + @include breakpoint('<=medium') { + li { + strong, b { + font-size: 1.5em; + } + } + } + + @include breakpoint('<=small') { + display: block; + width: 20em; + max-width: 100%; + margin: 0 auto _size(element-margin) auto; + + li { + &:first-child { + border-bottom-left-radius: 0; + border-top-right-radius: _size(border-radius); + } + + &:last-child { + border-top-right-radius: 0; + border-bottom-left-radius: _size(border-radius); + } + + .icon { + &:before { + font-size: 3.75rem; + } + } + + strong, b { + font-size: 2.5em; + } + } + } + } \ No newline at end of file diff --git a/assets/sass/components/_table.scss b/assets/sass/components/_table.scss new file mode 100644 index 0000000..961513a --- /dev/null +++ b/assets/sass/components/_table.scss @@ -0,0 +1,114 @@ +/// +/// Stellar by HTML5 UP +/// html5up.net | @ajlkn +/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +/// + +/* Table */ + + .table-wrapper { + -webkit-overflow-scrolling: touch; + overflow-x: auto; + } + + table { + margin: 0 0 _size(element-margin) 0; + width: 100%; + + tbody { + tr { + border: solid 1px; + border-left: 0; + border-right: 0; + } + } + + td { + padding: 0.75em 0.75em; + } + + th { + font-size: 0.9em; + font-weight: _font(weight-bold); + padding: 0 0.75em 0.75em 0.75em; + text-align: left; + } + + thead { + border-bottom: solid 2px; + } + + tfoot { + border-top: solid 2px; + } + + &.alt { + border-collapse: separate; + + tbody { + tr { + td { + border: solid 1px; + border-left-width: 0; + border-top-width: 0; + + &:first-child { + border-left-width: 1px; + } + } + + &:first-child { + td { + border-top-width: 1px; + } + } + } + } + + thead { + border-bottom: 0; + } + + tfoot { + border-top: 0; + } + } + } + + @mixin color-table($p: null) { + table { + tbody { + tr { + border-color: _palette($p, border); + + &:nth-child(2n + 1) { + background-color: _palette($p, border-bg); + } + } + } + + th { + color: _palette($p, fg-bold); + } + + thead { + border-bottom-color: _palette($p, border); + } + + tfoot { + border-top-color: _palette($p, border); + } + + &.alt { + tbody { + tr { + td { + border-color: _palette($p, border); + } + } + } + } + } + } + + @include color-table; \ No newline at end of file diff --git a/assets/sass/components/_timeline.scss b/assets/sass/components/_timeline.scss new file mode 100644 index 0000000..a37d53b --- /dev/null +++ b/assets/sass/components/_timeline.scss @@ -0,0 +1,133 @@ +/* Timeline */ + +.timeline { + position: relative; + max-width: 1200px; + margin: 100px auto; + + &::after { + content: ""; + position: absolute; + width: 6px; + height: 100%; + background: #4f5d73; + top: 0; + left: 50%; + margin-left: -3px; + z-index: 1; + } +} + +.container { + padding: 10px 50px; + position: relative; + width: 50%; + + .timeline-img { + width: 100%; + } + + .timeline-icon { + position: absolute; + width: 10%; + border-radius: 50%; + top: 61.5%; + z-index: 10; + } + + &:nth-child(odd) { + left: 0; + + .timeline-icon { + right: -5%; + } + } + + &:nth-child(even) { + left: 50%; + + .timeline-icon { + left: -5%; + } + } +} + +.text-box { + padding: 20px; + border: #4f5d73 solid 3px; + position: relative; + border-radius: 6px; + + h2 { + font-weight: 600; + margin-bottom: 0; + } + + small { + display: inline-block; + margin-bottom: 15px; + } +} + +.arrow { + height: 0; + width: 0; + position: absolute; + top: 28px; + z-index: 1; + border-top: 15px solid transparent; + border-bottom: 15px solid transparent; + + &.left-arrow { + border-left: 15px solid #4f5d73; + right: -15px; + } + + &.right-arrow { + border-right: 15px solid #4f5d73; + left: -15px; + } +} + +@include breakpoint("<=small") { + .timeline { + margin: 50px auto; + + &::after { + left: 31px; + } + } + + .container { + width: 100%; + padding-left: 80px; + padding-right: 25px; + + &:nth-child(even) { + left: 0; + } + + &:nth-child(odd) .timeline-icon, + &:nth-child(even) .timeline-icon { + left: 16px; + top: 51.5%; + } + } + + .text-box { + font-size: 13px; + + small { + margin-bottom: 10px; + } + + .arrow { + &.left-arrow, + &.right-arrow { + border-right: 15px solid #4f5d73; + border-left: 0; + left: -17px; + } + } + } +} diff --git a/assets/sass/layout/_footer.scss b/assets/sass/layout/_footer.scss new file mode 100644 index 0000000..96f8a89 --- /dev/null +++ b/assets/sass/layout/_footer.scss @@ -0,0 +1,54 @@ +/* Footer */ + + #footer { + @include vendor('display', 'flex'); + @include vendor('flex-wrap', 'wrap'); + @include padding(5em, 5em); + width: calc(100% + #{_size(element-margin)}); + margin: 0 0 (_size(element-margin) * 1.5) (_size(element-margin) * -1); + + > * { + width: calc(50% - #{_size(element-margin)}); + margin-left: _size(element-margin); + } + + .copyright { + width: 100%; + margin: (_size(element-margin) * 1.25) 0 _size(element-margin) 0; + font-size: 0.8em; + text-align: center; + } + + @include breakpoint('<=large') { + @include padding(4em, 4em); + } + + @include breakpoint('<=medium') { + @include padding(4em, 3em); + display: block; + margin: 0 0 (_size(element-margin) * 1.5) 0; + width: 100%; + + > * { + width: 100%; + margin-left: 0; + margin-bottom: (_size(element-margin) * 1.5); + } + + .copyright { + text-align: left; + } + } + + @include breakpoint('<=small') { + @include padding(3em, 2em); + } + + @include breakpoint('<=xsmall') { + @include padding(3em, 1.5em); + } + + @include breakpoint('<=xsmall') { + @include padding(2.5em, 1em); + } + } diff --git a/assets/sass/layout/_header.scss b/assets/sass/layout/_header.scss new file mode 100644 index 0000000..2eae2e8 --- /dev/null +++ b/assets/sass/layout/_header.scss @@ -0,0 +1,117 @@ +/* Header */ + +#header { + @include padding(5em, 5em, (0, 0, -2em, 0)); + text-align: center; + height: 100vh; + max-height: 100vh; + + h1 { + margin: 0 0 (_size(element-margin) * 0.125) 0; + } + + p { + font-size: 1.5em; + letter-spacing: _font(letter-spacing); + } + + .description { + display: block; + margin-top: 1em; + } + + &.alt { + @include padding(6em, 5em, (1em, 0, 0, 0)); + + h1 { + font-size: 5em; + } + + > * { + @include vendor("transition", "opacity 3s ease"); + @include vendor("transition-delay", "0.5s"); + opacity: 1; + } + + .logo { + @include vendor( + "transition", + ("opacity 1.25s ease", "transform 0.5s ease") + ); + @include vendor("transition-delay", "0s"); + display: block; + margin: 0 0 (_size(element-margin) * 0.75) 0; + + img { + display: block; + margin: 0 auto; + max-width: 500px; + } + } + } + + @include breakpoint("<=large") { + @include padding(4em, 4em, (0, 0, -2em, 0)); + + &.alt { + @include padding(5em, 4em, (1em, 0, 0, 0)); + } + } + + @include breakpoint("<=medium") { + @include padding(4em, 3em, (0, 0, -2em, 0)); + + &.alt { + @include padding(4em, 3em, (1em, 0, 0, 0)); + } + } + + @include breakpoint("<=small") { + @include padding(3em, 2em, (0, 0, -1em, 0)); + + p { + font-size: 1em; + letter-spacing: 0; + + br { + display: none; + } + } + + &.alt { + @include padding(3em, 2em, (1em, 0, 0, 0)); + + h1 { + font-size: 2.5em; + } + } + } + + @include breakpoint("<=xsmall") { + @include padding(3em, 1.5em, (0, 0, -1em, 0)); + + &.alt { + @include padding(3em, 1.5em, (1em, 0, 0, 0)); + } + } + + @include breakpoint("<=xxsmall") { + @include padding(2.5em, 1em, (0, 0, -1em, 0)); + + &.alt { + @include padding(2.5em, 1em, (1em, 0, 0, 0)); + } + } + + body.is-preload & { + &.alt { + > * { + opacity: 0; + } + + .logo { + @include vendor("transform", "scale(0.8) rotate(-30deg)"); + } + } + } +} diff --git a/assets/sass/layout/_main.scss b/assets/sass/layout/_main.scss new file mode 100644 index 0000000..56533b8 --- /dev/null +++ b/assets/sass/layout/_main.scss @@ -0,0 +1,93 @@ +/* Main */ + +#main { + @include color(invert); + border-radius: _size(border-radius-main); + + > .main { + @include padding(5em, 5em); + border-top: solid 1px _palette(invert, border); + + &:first-child { + border-top: 0; + } + + > .image.main:first-child { + margin: -5em 0 5em -5em; + width: calc(100% + 10em); + border-top-right-radius: _size(border-radius-main); + border-top-left-radius: _size(border-radius-main); + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; + + img { + border-top-right-radius: _size(border-radius-main); + border-top-left-radius: _size(border-radius-main); + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; + } + } + } + + @include breakpoint("<=large") { + > .main { + @include padding(4em, 4em); + + > .image.main:first-child { + margin: -4em 0 4em -4em; + width: calc(100% + 8em); + } + } + } + + @include breakpoint("<=medium") { + > .main { + @include padding(4em, 3em); + + > .image.main:first-child { + margin: -4em 0 4em -3em; + width: calc(100% + 6em); + } + } + } + + @include breakpoint("<=small") { + > .main { + @include padding(3em, 2em); + + > .image.main:first-child { + margin: -3em 0 2em -2em; + width: calc(100% + 4em); + } + } + } + + @include breakpoint("<=xsmall") { + > .main { + @include padding(3em, 1.5em); + + > .image.main:first-child { + margin: -3em 0 1.5em -1.5em; + width: calc(100% + 3em); + } + } + } + + @include breakpoint("<=xxsmall") { + border-radius: 0; + + > .main { + @include padding(2.5em, 1em); + + > .image.main:first-child { + margin: -2.5em 0 1.5em -1em; + width: calc(100% + 2em); + border-radius: 0; + + img { + border-radius: 0; + } + } + } + } +} diff --git a/assets/sass/layout/_nav.scss b/assets/sass/layout/_nav.scss new file mode 100644 index 0000000..05cedfe --- /dev/null +++ b/assets/sass/layout/_nav.scss @@ -0,0 +1,91 @@ +/* Nav */ + + #nav { + @include vendor('transition', ( + 'background-color #{_duration(transition)} ease', + 'border-top-left-radius #{_duration(transition)} ease', + 'border-top-right-radius #{_duration(transition)} ease', + 'padding #{_duration(transition)} ease', + )); + @include color-typography(invert); + position: absolute; + width: _size(inner); + max-width: calc(100% - #{_size(element-margin) * 2}); + padding: 1em; + background-color: _palette(invert, bg-alt); + border-top-left-radius: _size(border-radius-main); + border-top-right-radius: _size(border-radius-main); + cursor: default; + text-align: center; + + & + #main { + padding-top: 4.25em; + } + + ul { + margin: 0; + padding: 0; + list-style: none; + + li { + @include vendor('transition', ( + 'margin #{_duration(transition)} ease' + )); + display: inline-block; + margin: 0 0.35em; + padding: 0; + vertical-align: middle; + + a { + @include vendor('transition', ( + 'font-size #{_duration(transition)} ease' + )); + display: inline-block; + height: 2.25em; + line-height: 2.25em; + padding: 0 1.25em; + border: 0; + border-radius: _size(border-radius); + box-shadow: inset 0 0 0 1px transparent; + font-size: 1.0em; + + &:hover { + background-color: _palette(invert, border-bg); + } + + &.active { + background-color: _palette(invert, bg); + box-shadow: none; + } + } + } + } + + &.alt { + position: fixed; + top: 0; + padding: 0.5em 1em; + background-color: transparentize(_palette(invert, bg-alt), 0.05); + border-top-left-radius: 0; + border-top-right-radius: 0; + z-index: _misc(z-index-base); + + ul { + li { + margin: 0 0.175em; + + a { + font-size: 1.1em; + } + } + } + } + + @include breakpoint('<=small') { + display: none; + + & + #main { + padding-top: 0; + } + } + } diff --git a/assets/sass/layout/_wrapper.scss b/assets/sass/layout/_wrapper.scss new file mode 100644 index 0000000..5fbd3da --- /dev/null +++ b/assets/sass/layout/_wrapper.scss @@ -0,0 +1,15 @@ +/* Wrapper */ + + #wrapper { + width: _size(inner); + max-width: calc(100% - 4em); + margin: 0 auto; + + @include breakpoint('<=xsmall') { + max-width: calc(100% - 2em); + } + + @include breakpoint('<=xxsmall') { + max-width: 100%; + } + } diff --git a/assets/sass/libs/_breakpoints.scss b/assets/sass/libs/_breakpoints.scss new file mode 100644 index 0000000..54614e8 --- /dev/null +++ b/assets/sass/libs/_breakpoints.scss @@ -0,0 +1,203 @@ +// Vars. + +/// Breakpoints. +/// @var {list} +$breakpoints: (); + +// Mixins. + +/// Sets breakpoints. +/// @param {map} $x Breakpoints. +@mixin breakpoints($x: ()) { + $breakpoints: $x !global; +} + +/// Wraps @content in a @media block targeting a specific orientation. +/// @param {string} $orientation Orientation. +@mixin orientation($orientation) { + @media screen and (orientation: #{$orientation}) { + @content; + } +} + +/// Wraps @content in a @media block using a given query. +/// @param {string} $query Query. +@mixin breakpoint($query: null) { + $breakpoint: null; + $op: null; + $media: null; + + // Determine operator, breakpoint. + + // Greater than or equal. + @if (str-slice($query, 0, 2) == ">=") { + $op: "gte"; + $breakpoint: str-slice($query, 3); + } + + // Less than or equal. + @else if (str-slice($query, 0, 2) == "<=") { + $op: "lte"; + $breakpoint: str-slice($query, 3); + } + + // Greater than. + @else if (str-slice($query, 0, 1) == ">") { + $op: "gt"; + $breakpoint: str-slice($query, 2); + } + + // Less than. + @else if (str-slice($query, 0, 1) == "<") { + $op: "lt"; + $breakpoint: str-slice($query, 2); + } + + // Not. + @else if (str-slice($query, 0, 1) == "!") { + $op: "not"; + $breakpoint: str-slice($query, 2); + } + + // Equal. + @else { + $op: "eq"; + $breakpoint: $query; + } + + // Build media. + @if ($breakpoint and map-has-key($breakpoints, $breakpoint)) { + $a: map-get($breakpoints, $breakpoint); + + // Range. + @if (type-of($a) == "list") { + $x: nth($a, 1); + $y: nth($a, 2); + + // Max only. + @if ($x == null) { + // Greater than or equal (>= 0 / anything) + @if ($op == "gte") { + $media: "screen"; + } + + // Less than or equal (<= y) + @else if ($op == "lte") { + $media: "screen and (max-width: " + $y + ")"; + } + + // Greater than (> y) + @else if ($op == "gt") { + $media: "screen and (min-width: " + ($y + 1) + ")"; + } + + // Less than (< 0 / invalid) + @else if ($op == "lt") { + $media: "screen and (max-width: -1px)"; + } + + // Not (> y) + @else if ($op == "not") { + $media: "screen and (min-width: " + ($y + 1) + ")"; + } + + // Equal (<= y) + @else { + $media: "screen and (max-width: " + $y + ")"; + } + } + + // Min only. + @else if ($y == null) { + // Greater than or equal (>= x) + @if ($op == "gte") { + $media: "screen and (min-width: " + $x + ")"; + } + + // Less than or equal (<= inf / anything) + @else if ($op == "lte") { + $media: "screen"; + } + + // Greater than (> inf / invalid) + @else if ($op == "gt") { + $media: "screen and (max-width: -1px)"; + } + + // Less than (< x) + @else if ($op == "lt") { + $media: "screen and (max-width: " + ($x - 1) + ")"; + } + + // Not (< x) + @else if ($op == "not") { + $media: "screen and (max-width: " + ($x - 1) + ")"; + } + + // Equal (>= x) + @else { + $media: "screen and (min-width: " + $x + ")"; + } + } + + // Min and max. + @else { + // Greater than or equal (>= x) + @if ($op == "gte") { + $media: "screen and (min-width: " + $x + ")"; + } + + // Less than or equal (<= y) + @else if ($op == "lte") { + $media: "screen and (max-width: " + $y + ")"; + } + + // Greater than (> y) + @else if ($op == "gt") { + $media: "screen and (min-width: " + ($y + 1) + ")"; + } + + // Less than (< x) + @else if ($op == "lt") { + $media: "screen and (max-width: " + ($x - 1) + ")"; + } + + // Not (< x and > y) + @else if ($op == "not") { + $media: "screen and (max-width: " + + ($x - 1) + + "), screen and (min-width: " + + ($y + 1) + + ")"; + } + + // Equal (>= x and <= y) + @else { + $media: "screen and (min-width: " + + $x + + ") and (max-width: " + + $y + + ")"; + } + } + } + + // String. + @else { + // Missing a media type? Prefix with "screen". + @if (str-slice($a, 0, 1) == "(") { + $media: "screen and " + $a; + } + + // Otherwise, use as-is. + @else { + $media: $a; + } + } + } + + // Output. + @media #{$media} { + @content; + } +} diff --git a/assets/sass/libs/_functions.scss b/assets/sass/libs/_functions.scss new file mode 100644 index 0000000..55d1bd6 --- /dev/null +++ b/assets/sass/libs/_functions.scss @@ -0,0 +1,89 @@ +/// Removes a specific item from a list. +/// @param {list} $list List. +/// @param {integer} $index Index. +/// @return {list} Updated list. +@function remove-nth($list, $index) { + + $result: null; + + @if type-of($index) != number { + @warn "$index: #{quote($index)} is not a number for `remove-nth`."; + } + @else if $index == 0 { + @warn "List index 0 must be a non-zero integer for `remove-nth`."; + } + @else if abs($index) > length($list) { + @warn "List index is #{$index} but list is only #{length($list)} item long for `remove-nth`."; + } + @else { + + $result: (); + $index: if($index < 0, length($list) + $index + 1, $index); + + @for $i from 1 through length($list) { + + @if $i != $index { + $result: append($result, nth($list, $i)); + } + + } + + } + + @return $result; + +} + +/// Gets a value from a map. +/// @author Hugo Giraudel +/// @param {map} $map Map. +/// @param {string} $keys Key(s). +/// @return {string} Value. +@function val($map, $keys...) { + + @if nth($keys, 1) == null { + $keys: remove-nth($keys, 1); + } + + @each $key in $keys { + $map: map-get($map, $key); + } + + @return $map; + +} + +/// Gets a duration value. +/// @param {string} $keys Key(s). +/// @return {string} Value. +@function _duration($keys...) { + @return val($duration, $keys...); +} + +/// Gets a font value. +/// @param {string} $keys Key(s). +/// @return {string} Value. +@function _font($keys...) { + @return val($font, $keys...); +} + +/// Gets a misc value. +/// @param {string} $keys Key(s). +/// @return {string} Value. +@function _misc($keys...) { + @return val($misc, $keys...); +} + +/// Gets a palette value. +/// @param {string} $keys Key(s). +/// @return {string} Value. +@function _palette($keys...) { + @return val($palette, $keys...); +} + +/// Gets a size value. +/// @param {string} $keys Key(s). +/// @return {string} Value. +@function _size($keys...) { + @return val($size, $keys...); +} diff --git a/assets/sass/libs/_html-grid.scss b/assets/sass/libs/_html-grid.scss new file mode 100644 index 0000000..c65b228 --- /dev/null +++ b/assets/sass/libs/_html-grid.scss @@ -0,0 +1,138 @@ +// html-grid.scss v1.0 | @ajlkn | MIT licensed */ + +// Mixins. + +/// Initializes the current element as an HTML grid. +/// @param {mixed} $gutters Gutters (either a single number to set both column/row gutters, or a list to set them individually). +/// @param {mixed} $suffix Column class suffix (optional; either a single suffix or a list). +@mixin html-grid($gutters: 1.5em, $suffix: "") { + // Initialize. + $cols: 12; + $multipliers: 0, 0.25, 0.5, 1, 1.5, 2; + $unit: calc(100% / $cols); + + // Suffixes. + $suffixes: null; + + @if (type-of($suffix) == "list") { + $suffixes: $suffix; + } @else { + $suffixes: ($suffix); + } + + // Gutters. + $guttersCols: null; + $guttersRows: null; + + @if (type-of($gutters) == "list") { + $guttersCols: nth($gutters, 1); + $guttersRows: nth($gutters, 2); + } @else { + $guttersCols: $gutters; + $guttersRows: 0; + } + + // Row. + display: flex; + flex-wrap: wrap; + box-sizing: border-box; + align-items: stretch; + + // Columns. + > * { + box-sizing: border-box; + } + + // Gutters. + &.gtr-uniform { + > * { + > :last-child { + margin-bottom: 0; + } + } + } + + // Alignment. + &.aln-left { + justify-content: flex-start; + } + + &.aln-center { + justify-content: center; + } + + &.aln-right { + justify-content: flex-end; + } + + &.aln-top { + align-items: flex-start; + } + + &.aln-middle { + align-items: center; + } + + &.aln-bottom { + align-items: flex-end; + } + + // Step through suffixes. + @each $suffix in $suffixes { + // Suffix. + @if ($suffix != "") { + $suffix: "-" + $suffix; + } @else { + $suffix: ""; + } + + // Row. + + // Important. + > .imp#{$suffix} { + order: -1; + } + + // Columns, offsets. + @for $i from 1 through $cols { + > .col-#{$i}#{$suffix} { + width: $unit * $i; + } + + > .off-#{$i}#{$suffix} { + margin-left: $unit * $i; + } + } + + // Step through multipliers. + @each $multiplier in $multipliers { + // Gutters. + $class: null; + + @if ($multiplier != 1) { + $class: ".gtr-" + ($multiplier * 100); + } + + &#{$class} { + margin-top: ($guttersRows * $multiplier * -1); + margin-left: ($guttersCols * $multiplier * -1); + + > * { + padding: ($guttersRows * $multiplier) + 0 + 0 + ($guttersCols * $multiplier); + } + + // Uniform. + &.gtr-uniform { + margin-top: $guttersCols * $multiplier * -1; + + > * { + padding-top: $guttersCols * $multiplier; + } + } + } + } + } +} diff --git a/assets/sass/libs/_mixins.scss b/assets/sass/libs/_mixins.scss new file mode 100644 index 0000000..f0d06c5 --- /dev/null +++ b/assets/sass/libs/_mixins.scss @@ -0,0 +1,69 @@ +/// Makes an element's :before pseudoelement a FontAwesome icon. +/// @param {string} $content Optional content value to use. +/// @param {string} $category Optional category to use. +/// @param {string} $where Optional pseudoelement to target (before or after). +@mixin icon($content: false, $category: regular, $where: before) { + text-decoration: none; + + &:#{$where} { + @if $content { + content: $content; + } + + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + font-style: normal; + font-variant: normal; + text-rendering: auto; + line-height: 1; + text-transform: none !important; + + @if ($category == brands) { + font-family: "Font Awesome 5 Brands"; + } @else if ($category == solid) { + font-family: "Font Awesome 5 Free"; + font-weight: 900; + } @else { + font-family: "Font Awesome 5 Free"; + font-weight: 400; + } + } +} + +/// Applies padding to an element, taking the current element-margin value into account. +/// @param {mixed} $tb Top/bottom padding. +/// @param {mixed} $lr Left/right padding. +/// @param {list} $pad Optional extra padding (in the following order top, right, bottom, left) +/// @param {bool} $important If true, adds !important. +@mixin padding($tb, $lr, $pad: (0, 0, 0, 0), $important: null) { + @if $important { + $important: "!important"; + } + + $x: 0.1em; + + @if unit(_size(element-margin)) == "rem" { + $x: 0.1rem; + } + + padding: ($tb + nth($pad, 1)) ($lr + nth($pad, 2)) + max($x, $tb - _size(element-margin) + nth($pad, 3)) ($lr + nth($pad, 4)) #{$important}; +} + +/// Encodes a SVG data URL so IE doesn't choke (via codepen.io/jakob-e/pen/YXXBrp). +/// @param {string} $svg SVG data URL. +/// @return {string} Encoded SVG data URL. +@function svg-url($svg) { + $svg: str-replace($svg, '"', "'"); + $svg: str-replace($svg, "%", "%25"); + $svg: str-replace($svg, "<", "%3C"); + $svg: str-replace($svg, ">", "%3E"); + $svg: str-replace($svg, "&", "%26"); + $svg: str-replace($svg, "#", "%23"); + $svg: str-replace($svg, "{", "%7B"); + $svg: str-replace($svg, "}", "%7D"); + $svg: str-replace($svg, ";", "%3B"); + + @return url("data:image/svg+xml;charset=utf8,#{$svg}"); +} diff --git a/assets/sass/libs/_vars.scss b/assets/sass/libs/_vars.scss new file mode 100644 index 0000000..df397cc --- /dev/null +++ b/assets/sass/libs/_vars.scss @@ -0,0 +1,78 @@ +// Misc. +$misc: ( + z-index-base: 10000, +); + +// Duration. +$duration: ( + transition: 0.2s, +); + +// Size. +$size: ( + border-radius: 10px, + border-radius-main: 0.25em, + element-height: 2.75em, + element-margin: 2em, + inner: 64em, +); + +// Font. +$font: ( + family: ( + "Source Sans Pro", + Helvetica, + sans-serif, + ), + family-fixed: ( + "Courier New", + monospace, + ), + weight: 300, + weight-bold: 400, + letter-spacing: -0.025em, +); + +// Palette. +$palette: ( + bg: #935d8c, + fg: rgba(255, 255, 255, 0.65), + fg-bold: #ffffff, + fg-light: rgba(255, 255, 255, 0.5), + border: rgba(255, 255, 255, 0.35), + border-bg: rgba(255, 255, 255, 0.075), + border2: rgba(255, 255, 255, 0.75), + border2-bg: rgba(255, 255, 255, 0.2), + invert: ( + bg: #ffffff, + bg-alt: #f7f7f7, + fg: #636363, + fg-bold: #636363, + fg-light: rgba(99, 99, 99, 0.25), + border: #dddddd, + border-bg: rgba(222, 222, 222, 0.25), + border2: #dddddd, + border2-bg: rgba(222, 222, 222, 0.5), + ), + + accent: #8cc9f0, + //light blue + accent1: #efa8b0, + //light pink + accent2: #c79cc8, + //light purple + accent3: #a89cc8, + //slightly darker purple + accent4: #9bb2e1, + //slightly darker blue + accent5: #8cc9f0, + + //vivid blue + /* //bg bottom */ /* bg1: #e37682, */ /* // //bg top */ + /* bg2: #5f4d93 */ /* accent: #422680, */ /* accent1: #341671, */ + /* accent2: #280659, */ /* accent3: #f54952, */ /* accent4: #660f56, */ + /* accent5: #ae2d68, */ //bg bottom + bg1: #ae2d68, + //bg top + bg2: #422680, +); diff --git a/assets/sass/libs/_vendor.scss b/assets/sass/libs/_vendor.scss new file mode 100644 index 0000000..0d3b824 --- /dev/null +++ b/assets/sass/libs/_vendor.scss @@ -0,0 +1,343 @@ +// vendor.scss v1.0 | @ajlkn | MIT licensed */ + +// Vars. + +/// Vendor prefixes. +/// @var {list} +$vendor-prefixes: ("-moz-", "-webkit-", "-ms-", ""); + +/// Properties that should be vendorized. +/// Data via caniuse.com, github.com/postcss/autoprefixer, and developer.mozilla.org +/// @var {list} +$vendor-properties: ( + // Animation. + "animation", + "animation-delay", + "animation-direction", + "animation-duration", + "animation-fill-mode", + "animation-iteration-count", + "animation-name", + "animation-play-state", + "animation-timing-function", + // Appearance. + "appearance", + + // Backdrop filter. + "backdrop-filter", + + // Background image options. + "background-clip", + "background-origin", + "background-size", + // Box sizing. + "box-sizing", + + // Clip path. + "clip-path", + + // Filter effects. + "filter", + + // Flexbox. + "align-content", + "align-items", + "align-self", + "flex", + "flex-basis", + "flex-direction", + "flex-flow", + "flex-grow", + "flex-shrink", + "flex-wrap", + "justify-content", + "order", + // Font feature. + "font-feature-settings", + "font-language-override", + "font-variant-ligatures", + // Font kerning. + "font-kerning", + + // Fragmented borders and backgrounds. + "box-decoration-break", + + // Grid layout. + "grid-column", + "grid-column-align", + "grid-column-end", + "grid-column-start", + "grid-row", + "grid-row-align", + "grid-row-end", + "grid-row-start", + "grid-template-columns", + "grid-template-rows", + // Hyphens. + "hyphens", + "word-break", + // Masks. + "mask", + "mask-border", + "mask-border-outset", + "mask-border-repeat", + "mask-border-slice", + "mask-border-source", + "mask-border-width", + "mask-clip", + "mask-composite", + "mask-image", + "mask-origin", + "mask-position", + "mask-repeat", + "mask-size", + // Multicolumn. + "break-after", + "break-before", + "break-inside", + "column-count", + "column-fill", + "column-gap", + "column-rule", + "column-rule-color", + "column-rule-style", + "column-rule-width", + "column-span", + "column-width", + "columns", + // Object fit. + "object-fit", + "object-position", + // Regions. + "flow-from", + "flow-into", + "region-fragment", + // Scroll snap points. + "scroll-snap-coordinate", + "scroll-snap-destination", + "scroll-snap-points-x", + "scroll-snap-points-y", + "scroll-snap-type", + // Shapes. + "shape-image-threshold", + "shape-margin", + "shape-outside", + // Tab size. + "tab-size", + + // Text align last. + "text-align-last", + + // Text decoration. + "text-decoration-color", + "text-decoration-line", + "text-decoration-skip", + "text-decoration-style", + // Text emphasis. + "text-emphasis", + "text-emphasis-color", + "text-emphasis-position", + "text-emphasis-style", + // Text size adjust. + "text-size-adjust", + + // Text spacing. + "text-spacing", + + // Transform. + "transform", + "transform-origin", + // Transform 3D. + "backface-visibility", + "perspective", + "perspective-origin", + "transform-style", + // Transition. + "transition", + "transition-delay", + "transition-duration", + "transition-property", + "transition-timing-function", + // Unicode bidi. + "unicode-bidi", + + // User select. + "user-select", + + // Writing mode. + "writing-mode" +); + +/// Values that should be vendorized. +/// Data via caniuse.com, github.com/postcss/autoprefixer, and developer.mozilla.org +/// @var {list} +$vendor-values: ( + // Cross fade. + "cross-fade", + + // Element function. + "element", + + // Filter function. + "filter", + + // Flexbox. + "flex", + "inline-flex", + // Grab cursors. + "grab", + "grabbing", + // Gradients. + "linear-gradient", + "repeating-linear-gradient", + "radial-gradient", + "repeating-radial-gradient", + // Grid layout. + "grid", + "inline-grid", + // Image set. + "image-set", + + // Intrinsic width. + "max-content", + "min-content", + "fit-content", + "fill", + "fill-available", + "stretch", + // Sticky position. + "sticky", + + // Transform. + "transform", + + // Zoom cursors. + "zoom-in", + "zoom-out" +); + +// Functions. + +/// Removes a specific item from a list. +/// @author Hugo Giraudel +/// @param {list} $list List. +/// @param {integer} $index Index. +/// @return {list} Updated list. +@function remove-nth($list, $index) { + $result: null; + + @if type-of($index) != number { + @warn "$index: #{quote($index)} is not a number for `remove-nth`."; + } @else if $index == 0 { + @warn "List index 0 must be a non-zero integer for `remove-nth`."; + } @else if abs($index) > length($list) { + @warn "List index is #{$index} but list is only #{length($list)} item long for `remove-nth`."; + } @else { + $result: (); + $index: if($index < 0, length($list) + $index + 1, $index); + + @for $i from 1 through length($list) { + @if $i != $index { + $result: append($result, nth($list, $i)); + } + } + } + + @return $result; +} + +/// Replaces a substring within another string. +/// @author Hugo Giraudel +/// @param {string} $string String. +/// @param {string} $search Substring. +/// @param {string} $replace Replacement. +/// @return {string} Updated string. +@function str-replace($string, $search, $replace: "") { + $index: str-index($string, $search); + + @if $index { + @return str-slice($string, 1, $index - 1) + $replace + + str-replace( + str-slice($string, $index + str-length($search)), + $search, + $replace + ); + } + + @return $string; +} + +/// Replaces a substring within each string in a list. +/// @param {list} $strings List of strings. +/// @param {string} $search Substring. +/// @param {string} $replace Replacement. +/// @return {list} Updated list of strings. +@function str-replace-all($strings, $search, $replace: "") { + @each $string in $strings { + $strings: set-nth( + $strings, + index($strings, $string), + str-replace($string, $search, $replace) + ); + } + + @return $strings; +} + +// Mixins. + +/// Wraps @content in vendorized keyframe blocks. +/// @param {string} $name Name. +@mixin keyframes($name) { + @-moz-keyframes #{$name} { + @content; + } + @-webkit-keyframes #{$name} { + @content; + } + @-ms-keyframes #{$name} { + @content; + } + @keyframes #{$name} { + @content; + } +} + +/// Vendorizes a declaration's property and/or value(s). +/// @param {string} $property Property. +/// @param {mixed} $value String/list of value(s). +@mixin vendor($property, $value) { + // Determine if property should expand. + $expandProperty: index($vendor-properties, $property); + + // Determine if value should expand (and if so, add '-prefix-' placeholder). + $expandValue: false; + + @each $x in $value { + @each $y in $vendor-values { + @if $y == str-slice($x, 1, str-length($y)) { + $value: set-nth($value, index($value, $x), "-prefix-" + $x); + $expandValue: true; + } + } + } + + // Expand property? + @if $expandProperty { + @each $vendor in $vendor-prefixes { + #{$vendor}#{$property}: #{str-replace-all($value, "-prefix-", $vendor)}; + } + } + + // Expand just the value? + @else if $expandValue { + @each $vendor in $vendor-prefixes { + #{$property}: #{str-replace-all($value, "-prefix-", $vendor)}; + } + } + + // Neither? Treat them as a normal declaration. + @else { + #{$property}: #{$value}; + } +} diff --git a/assets/sass/main.scss b/assets/sass/main.scss new file mode 100644 index 0000000..a538e11 --- /dev/null +++ b/assets/sass/main.scss @@ -0,0 +1,86 @@ +@import "libs/vars"; +@import "libs/functions"; +@import "libs/mixins"; +@import "libs/vendor"; +@import "libs/breakpoints"; +@import "libs/html-grid"; +@import "fontawesome-all.min.css"; +@import "https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400"; + +// Breakpoints. + +@include breakpoints( + ( + xlarge: ( + 1281px, + 1680px, + ), + large: ( + 981px, + 1280px, + ), + medium: ( + 737px, + 980px, + ), + small: ( + 481px, + 736px, + ), + xsmall: ( + 361px, + 480px, + ), + xxsmall: ( + null, + 360px, + ), + ) +); + +// Mixins. + +@mixin color($p) { + @include color-typography($p); + @include color-box($p); + @include color-button($p); + @include color-form($p); + @include color-icon($p); + @include color-list($p); + @include color-section($p); + @include color-table($p); + @include color-spotlight($p); +} + +// Base. + +@import "base/reset"; +@import "base/page"; +@import "base/typography"; + +// Component. + +@import "components/row"; +@import "components/box"; +@import "components/card"; +@import "components/button"; +@import "components/form"; +@import "components/icon"; +@import "components/image"; +@import "components/list"; +@import "components/actions"; +@import "components/icons"; +@import "components/section"; +@import "components/table"; +@import "components/features"; +@import "components/statistics"; +@import "components/spotlight"; +@import "components/timeline"; + +// Layout. + +@import "layout/header"; +@import "layout/nav"; +@import "layout/main"; +@import "layout/footer"; +@import "layout/wrapper"; diff --git a/assets/sass/noscript.scss b/assets/sass/noscript.scss new file mode 100644 index 0000000..49d5024 --- /dev/null +++ b/assets/sass/noscript.scss @@ -0,0 +1,22 @@ +@import 'libs/vars'; +@import 'libs/functions'; +@import 'libs/mixins'; +@import 'libs/vendor'; +@import 'libs/breakpoints'; +@import 'libs/html-grid'; + +/* Header */ + + #header { + body.is-preload & { + &.alt { + > * { + opacity: 1; + } + + .logo { + @include vendor('transform', 'none'); + } + } + } + } diff --git a/assets/webfonts/fa-brands-400.eot b/assets/webfonts/fa-brands-400.eot new file mode 100644 index 0000000..cba6c6c Binary files /dev/null and b/assets/webfonts/fa-brands-400.eot differ diff --git a/assets/webfonts/fa-brands-400.svg b/assets/webfonts/fa-brands-400.svg new file mode 100644 index 0000000..b9881a4 --- /dev/null +++ b/assets/webfonts/fa-brands-400.svg @@ -0,0 +1,3717 @@ + + + diff --git a/assets/webfonts/fa-brands-400.ttf b/assets/webfonts/fa-brands-400.ttf new file mode 100644 index 0000000..8d75ded Binary files /dev/null and b/assets/webfonts/fa-brands-400.ttf differ diff --git a/assets/webfonts/fa-brands-400.woff b/assets/webfonts/fa-brands-400.woff new file mode 100644 index 0000000..3375bef Binary files /dev/null and b/assets/webfonts/fa-brands-400.woff differ diff --git a/assets/webfonts/fa-brands-400.woff2 b/assets/webfonts/fa-brands-400.woff2 new file mode 100644 index 0000000..402f81c Binary files /dev/null and b/assets/webfonts/fa-brands-400.woff2 differ diff --git a/assets/webfonts/fa-regular-400.eot b/assets/webfonts/fa-regular-400.eot new file mode 100644 index 0000000..a4e5989 Binary files /dev/null and b/assets/webfonts/fa-regular-400.eot differ diff --git a/assets/webfonts/fa-regular-400.svg b/assets/webfonts/fa-regular-400.svg new file mode 100644 index 0000000..463af27 --- /dev/null +++ b/assets/webfonts/fa-regular-400.svg @@ -0,0 +1,801 @@ + + + diff --git a/assets/webfonts/fa-regular-400.ttf b/assets/webfonts/fa-regular-400.ttf new file mode 100644 index 0000000..7157aaf Binary files /dev/null and b/assets/webfonts/fa-regular-400.ttf differ diff --git a/assets/webfonts/fa-regular-400.woff b/assets/webfonts/fa-regular-400.woff new file mode 100644 index 0000000..ad077c6 Binary files /dev/null and b/assets/webfonts/fa-regular-400.woff differ diff --git a/assets/webfonts/fa-regular-400.woff2 b/assets/webfonts/fa-regular-400.woff2 new file mode 100644 index 0000000..5632894 Binary files /dev/null and b/assets/webfonts/fa-regular-400.woff2 differ diff --git a/assets/webfonts/fa-solid-900.eot b/assets/webfonts/fa-solid-900.eot new file mode 100644 index 0000000..e994171 Binary files /dev/null and b/assets/webfonts/fa-solid-900.eot differ diff --git a/assets/webfonts/fa-solid-900.svg b/assets/webfonts/fa-solid-900.svg new file mode 100644 index 0000000..00296e9 --- /dev/null +++ b/assets/webfonts/fa-solid-900.svg @@ -0,0 +1,5034 @@ + + + diff --git a/assets/webfonts/fa-solid-900.ttf b/assets/webfonts/fa-solid-900.ttf new file mode 100644 index 0000000..25abf38 Binary files /dev/null and b/assets/webfonts/fa-solid-900.ttf differ diff --git a/assets/webfonts/fa-solid-900.woff b/assets/webfonts/fa-solid-900.woff new file mode 100644 index 0000000..23ee663 Binary files /dev/null and b/assets/webfonts/fa-solid-900.woff differ diff --git a/assets/webfonts/fa-solid-900.woff2 b/assets/webfonts/fa-solid-900.woff2 new file mode 100644 index 0000000..2217164 Binary files /dev/null and b/assets/webfonts/fa-solid-900.woff2 differ diff --git a/favicon/about.txt b/favicon/about.txt new file mode 100644 index 0000000..cbf0103 --- /dev/null +++ b/favicon/about.txt @@ -0,0 +1,6 @@ +This favicon was generated using the following graphics from Twitter Twemoji: + +- Graphics Title: 1f47e.svg +- Graphics Author: Copyright 2020 Twitter, Inc and other contributors (https://github.com/twitter/twemoji) +- Graphics Source: https://github.com/twitter/twemoji/blob/master/assets/svg/1f47e.svg +- Graphics License: CC-BY 4.0 (https://creativecommons.org/licenses/by/4.0/) diff --git a/favicon/android-chrome-192x192.png b/favicon/android-chrome-192x192.png new file mode 100644 index 0000000..9e7e881 Binary files /dev/null and b/favicon/android-chrome-192x192.png differ diff --git a/favicon/android-chrome-512x512.png b/favicon/android-chrome-512x512.png new file mode 100644 index 0000000..4bb5b55 Binary files /dev/null and b/favicon/android-chrome-512x512.png differ diff --git a/favicon/apple-touch-icon.png b/favicon/apple-touch-icon.png new file mode 100644 index 0000000..bd5ea48 Binary files /dev/null and b/favicon/apple-touch-icon.png differ diff --git a/favicon/favicon-16x16.png b/favicon/favicon-16x16.png new file mode 100644 index 0000000..22098d0 Binary files /dev/null and b/favicon/favicon-16x16.png differ diff --git a/favicon/favicon-32x32.png b/favicon/favicon-32x32.png new file mode 100644 index 0000000..ace2a7d Binary files /dev/null and b/favicon/favicon-32x32.png differ diff --git a/favicon/favicon.ico b/favicon/favicon.ico new file mode 100644 index 0000000..26e467a Binary files /dev/null and b/favicon/favicon.ico differ diff --git a/favicon/site.webmanifest b/favicon/site.webmanifest new file mode 100644 index 0000000..45dc8a2 --- /dev/null +++ b/favicon/site.webmanifest @@ -0,0 +1 @@ +{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"} \ No newline at end of file diff --git a/images/bees_and_bombs.png b/images/bees_and_bombs.png new file mode 100644 index 0000000..7cd325d Binary files /dev/null and b/images/bees_and_bombs.png differ diff --git a/images/bezier_curves.jpg b/images/bezier_curves.jpg new file mode 100644 index 0000000..f589f78 Binary files /dev/null and b/images/bezier_curves.jpg differ diff --git a/images/bubble_sort.png b/images/bubble_sort.png new file mode 100644 index 0000000..4094f16 Binary files /dev/null and b/images/bubble_sort.png differ diff --git a/images/calc_pi.png b/images/calc_pi.png new file mode 100644 index 0000000..584b460 Binary files /dev/null and b/images/calc_pi.png differ diff --git a/images/ccchaos.svg b/images/ccchaos.svg new file mode 100644 index 0000000..691c467 --- /dev/null +++ b/images/ccchaos.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/construct_ellipse.png b/images/construct_ellipse.png new file mode 100644 index 0000000..b340811 Binary files /dev/null and b/images/construct_ellipse.png differ diff --git a/images/convex_hull.png b/images/convex_hull.png new file mode 100644 index 0000000..69d31c1 Binary files /dev/null and b/images/convex_hull.png differ diff --git a/images/dddepth-088.jpg b/images/dddepth-088.jpg new file mode 100644 index 0000000..4c6152c Binary files /dev/null and b/images/dddepth-088.jpg differ diff --git a/images/dddepth-301.jpg b/images/dddepth-301.jpg new file mode 100644 index 0000000..ecfc666 Binary files /dev/null and b/images/dddepth-301.jpg differ diff --git a/images/ffflurry.svg b/images/ffflurry.svg new file mode 100644 index 0000000..59f908a --- /dev/null +++ b/images/ffflurry.svg @@ -0,0 +1,168 @@ + diff --git a/images/fourier_series.png b/images/fourier_series.png new file mode 100644 index 0000000..a4d5164 Binary files /dev/null and b/images/fourier_series.png differ diff --git a/images/game_of_life.png b/images/game_of_life.png new file mode 100644 index 0000000..a4a249a Binary files /dev/null and b/images/game_of_life.png differ diff --git a/images/havox.org.png b/images/havox.org.png new file mode 100644 index 0000000..38b383b Binary files /dev/null and b/images/havox.org.png differ diff --git a/images/havoxV2.png b/images/havoxV2.png new file mode 100644 index 0000000..b6f0f5c Binary files /dev/null and b/images/havoxV2.png differ diff --git a/images/havoxV3.png b/images/havoxV3.png new file mode 100644 index 0000000..8a0312c Binary files /dev/null and b/images/havoxV3.png differ diff --git a/images/logo.svg b/images/logo.svg new file mode 100644 index 0000000..a3248c9 --- /dev/null +++ b/images/logo.svg @@ -0,0 +1,16 @@ + + + \ No newline at end of file diff --git a/images/marching_squares.png b/images/marching_squares.png new file mode 100644 index 0000000..d9852bc Binary files /dev/null and b/images/marching_squares.png differ diff --git a/images/midpoint_displacement.png b/images/midpoint_displacement.png new file mode 100644 index 0000000..016339d Binary files /dev/null and b/images/midpoint_displacement.png differ diff --git a/images/pic01.jpg b/images/pic01.jpg new file mode 100644 index 0000000..25477aa Binary files /dev/null and b/images/pic01.jpg differ diff --git a/images/pic02.jpg b/images/pic02.jpg new file mode 100644 index 0000000..7cf8346 Binary files /dev/null and b/images/pic02.jpg differ diff --git a/images/pic03.jpg b/images/pic03.jpg new file mode 100644 index 0000000..51192cb Binary files /dev/null and b/images/pic03.jpg differ diff --git a/images/pic04.jpg b/images/pic04.jpg new file mode 100644 index 0000000..18063b1 Binary files /dev/null and b/images/pic04.jpg differ diff --git a/images/pic05.jpg b/images/pic05.jpg new file mode 100644 index 0000000..b7b49ed Binary files /dev/null and b/images/pic05.jpg differ diff --git a/images/pic06.jpg b/images/pic06.jpg new file mode 100644 index 0000000..cf78a92 Binary files /dev/null and b/images/pic06.jpg differ diff --git a/images/samstoreymusic.png b/images/samstoreymusic.png new file mode 100644 index 0000000..1838254 Binary files /dev/null and b/images/samstoreymusic.png differ diff --git a/images/summed_area.png b/images/summed_area.png new file mode 100644 index 0000000..6212f12 Binary files /dev/null and b/images/summed_area.png differ diff --git a/images/tsp.png b/images/tsp.png new file mode 100644 index 0000000..4854aec Binary files /dev/null and b/images/tsp.png differ diff --git a/images/unnamed.jpg b/images/unnamed.jpg new file mode 100644 index 0000000..442586e Binary files /dev/null and b/images/unnamed.jpg differ diff --git a/images/web_icon.svg b/images/web_icon.svg new file mode 100644 index 0000000..cbcd2d1 --- /dev/null +++ b/images/web_icon.svg @@ -0,0 +1,58 @@ + + + + \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..18c04df --- /dev/null +++ b/index.html @@ -0,0 +1,214 @@ + + + + + Havox + + + + + + + + + + + + + +

+ + + + + + + +

+ +

About Havox

+ Welcome to havox - a showcase of my projects and tutorials that + I have created over the years. The tutorials are mainly for my + own learning purposes, but I hope they can also benefit others + who are interested in the same topics. You can browse through my + tutorials or explore my JavaScript projects. +

Learn More

+ + +

My Skills

+ +
Code Experience
+
+ Professional experience in Java, using Java Spring Boot to + create RESTful APIs. Completed university courses in: C, C++, + Java and Haskell. +
+
+ +
Technical Background
+
+ Long term linux user with server experience hosting web and + media servers, along with cyber secure networking practices. +
+
+ +
Tutoring
+
+ Tutor with 4 years experience; tutoring computer science A-Level + in addition to tutoring maths and english to children aged 4-14. +
+

+ + + + + +

+ + +

My Tutorials

+ I am a strong believer that the best way to learn is to teach. + When I come across something I find interesting and want to deepen + my understanding I write a short tutorial. +

+ + +

Summed-area tables

3rd Jan 2021

+ This tutorial looks at intergral images and how they're useful. +

+ + + +

+ + +

My Projects

+ A lot of p5js projects. I enjoy visualising simple algorithms in + creative ways. +

+ + +

Drawing bezier curves

+ An interactive animated diagram on drawing quadratic and cubic + Bezier curves. Click anywhere on the canvas to place points. +

1st Oct 2021

+ + + +

+ + + + + + + + + + + + \ No newline at end of file diff --git a/projects.html b/projects.html new file mode 100644 index 0000000..40e0dbf --- /dev/null +++ b/projects.html @@ -0,0 +1,205 @@ + + + + + Projects + + + + + + + + + + + + + +

+ +

Projects

+ + +

+ +

Projects

+ Here are some Projects I've worked on over the years, I do this to + further my understanding of a topic. +

+ +

Sam Storey Music

+ I designed this website for the client as a portfolio of his + music and achievements. samstoreymusic.com is also hosted by + myself. +

20th Jun 2023

+ + +

Drawing Bezier Curves

+ An interactive animated diagram on drawing quadratic and cubic + Bezier curves. Click anywhere on the canvas to place your + points. +

1st Oct 2021

+ + +

2D Marching Squares

+ A demonstration of marching squares. Click a tile to edit the + terrain. +

23rd Sept 2021

+ + +

Bubble Sort Visualiser

+ A classic bubble sort visualiser where bars are sorted by + height. Where two elements are swapped each frame. +

11th Apr 2020

+ + + + + + + + + + + + + + + + + +

Fourier Series

+ A project showing how a square wave can be constructed by + additive sin waves. +

27th Feb 2019

+ + +

Constructing an Ellipse

+ A visualisation of how an ellipse can be constructed with a + circle and radial lines. Inspired by Feyman's Lost Lecture. + + + + +

23rd Feb 2019

+ + +

Game of Life

+ An implementation of the classic cellular automata: Game of + Life in javascript. +

2nd May 2018

+ + +

Calculating PI

+ A simulation that randomly places dots on the canvas, the + ratio of dots that are placed in the cirlce vs not approximate + PI. +

14th March 2018

+ + +

Oscillations in 3D

+ An implementation of bees and bomb's + + + + + in p5js. +

17th Dec 2017

+ +

+ + + +

+ + + + + + + + + + + + \ No newline at end of file diff --git a/projects/drawing_curves/cLine.js b/projects/drawing_curves/cLine.js new file mode 100644 index 0000000..58faa31 --- /dev/null +++ b/projects/drawing_curves/cLine.js @@ -0,0 +1,13 @@ +class cLine{ + constructor(p1, p2){ + this.p1 = p1; + this.p2 = p2; + } + + drawLine(){ + stroke(255, 50); + strokeWeight(3); + + line(this.p1.x, this.p1.y, this.p2.x, this.p2.y); + } +} diff --git a/projects/drawing_curves/cPoint.js b/projects/drawing_curves/cPoint.js new file mode 100644 index 0000000..5c7b041 --- /dev/null +++ b/projects/drawing_curves/cPoint.js @@ -0,0 +1,14 @@ +class cPoint{ + constructor(x,y) {this.x = x; this.y=y;} + + drawPoint(){ + strokeWeight(14); + stroke(255, 200); + + point(this.x, this.y); + } + get getX(){return this.x;} + get getY(){return this.y;} + set changeX(_x){this.x = _x;} + set changeY(_y){this.y = _y;} +} diff --git a/projects/drawing_curves/cubicCurve.js b/projects/drawing_curves/cubicCurve.js new file mode 100644 index 0000000..ad5da8e --- /dev/null +++ b/projects/drawing_curves/cubicCurve.js @@ -0,0 +1,111 @@ +let p = [], v=[]; +let lines = []; +let theta=3/2 * Math.PI, t=0, clicks=0; + +function setup(){ + createCanvas(1000, 800); + + initCubicCurve(); +} + +function draw(){ + background(63); + + for(let i = 0; i < p.length; i++){ + p[i].drawPoint(); + } + + if(clicks > 3){ + for(let i = 0; i < lines.length; i++){ + lines[i].drawLine(); + } + + lerpCubicCurve(); + drawCurve(); + } +} + +function drawCurve(){ + if (v.length > 100*Math.PI){v=[];} + stroke(0, 255, 0, 200); + strokeWeight(5); + + beginShape(LINES); + for (let i=0; i < v.length; i++){ + vertex(v[i].x, v[i].y); + } + endShape(); +} + +function mouseClicked(){ + if (clicks < 5) { + p[clicks].changeX = mouseX; + p[clicks].changeY = mouseY; + } else { + let c = clicks % 4; + p[c].changeX = mouseX; + p[c].changeY = mouseY; + } + v=[]; + clicks ++; + t=0; + theta=3/2 * Math.PI; +} + +function mouseDragged(){ + p[0].changeX = mouseX; + p[0].changeY = mouseY; + + return false; +} + +function initCubicCurve(){ + p[0] = new cPoint(0,0); + p[1] = new cPoint(0,0); + p[2] = new cPoint(0,0); + p[3] = new cPoint(0,0); + + p[4] = new cPoint(0, 0); + p[5] = new cPoint(0, 0); + p[6] = new cPoint(0, 0); + + p[7] = new cPoint(0, 0); + p[8] = new cPoint(0, 0); + + p[9] = new cPoint(0, 0); + + lines[0] = new cLine(p[0], p[1]); + lines[1] = new cLine(p[1], p[2]); + lines[2] = new cLine(p[2], p[3]); + + lines[3] = new cLine(p[4], p[5]); + lines[4] = new cLine(p[5], p[6]); + + lines[5] = new cLine(p[7], p[8]); +} + +function lerpCubicCurve(){ + p[4].changeX = (1-t)*p[0].x + t * p[1].x; + p[4].changeY = (1-t)*p[0].y + t * p[1].y; + + p[5].changeX = (1-t)*p[1].x + t * p[2].x; + p[5].changeY = (1-t)*p[1].y + t * p[2].y; + + p[6].changeX = (1-t)*p[2].x + t * p[3].x; + p[6].changeY = (1-t)*p[2].y + t * p[3].y; + + p[7].changeX = (1-t)*p[4].x + t * p[5].x; + p[7].changeY = (1-t)*p[4].y + t * p[5].y; + + p[8].changeX = (1-t)*p[5].x + t * p[6].x; + p[8].changeY = (1-t)*p[5].y + t * p[6].y; + + p[9].changeX = (1-t)*p[7].x + t * p[8].x; + p[9].changeY = (1-t)*p[7].y + t * p[8].y; + + v.push(new cPoint(p[9].x, p[9].y)); + + if (theta > 2*Math.PI){theta=0;} + theta += 0.01; + t = (Math.sin(theta) + 1) / 2; +} diff --git a/projects/drawing_curves/index.html b/projects/drawing_curves/index.html new file mode 100644 index 0000000..12a05dd --- /dev/null +++ b/projects/drawing_curves/index.html @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/projects/drawing_curves/quadCurve.js b/projects/drawing_curves/quadCurve.js new file mode 100644 index 0000000..39f0acf --- /dev/null +++ b/projects/drawing_curves/quadCurve.js @@ -0,0 +1,84 @@ +let p = [], v=[]; +let lines = []; +let theta=3/2 * Math.PI, t=0, clicks=0; + +function setup(){ + createCanvas(1000, 800); + + initQuadCurve(); +} + +function draw(){ + background(63); + + for(let i = 0; i < p.length; i++){ + p[i].drawPoint(); + } + + if(clicks > 2){ + for(let i = 0; i < lines.length; i++){ + lines[i].drawLine(); + } + + lerpQuadCurve(); + drawCurve(); + } +} + +function drawCurve(){ + if (v.length > 100*Math.PI){v=[];} + stroke(0, 255, 0, 200); + strokeWeight(5); + + beginShape(LINES); + for (let i=0; i < v.length; i++){ + vertex(v[i].x, v[i].y); + } + endShape(); +} + +function mouseClicked(){ + if (clicks < 3){ + p[clicks].changeX = mouseX; + p[clicks].changeY = mouseY; + } else { + let c = clicks % 3; + p[c].changeX = mouseX; + p[c].changeY = mouseY; + } + v=[]; + clicks ++; + t=0; + theta=3/2 * Math.PI; +} + +function initQuadCurve(){ + p[0] = new cPoint(0,0); + p[1] = new cPoint(0,0); + p[2] = new cPoint(0,0); + + p[3] = new cPoint(0, 0); + p[4] = new cPoint(0, 0); + p[5] = new cPoint(p[0].x, p[0].y); + + lines[0] = new cLine(p[0], p[1]); + lines[1] = new cLine(p[1], p[2]); + lines[2] = new cLine(p[3], p[4]); +} + +function lerpQuadCurve(){ + p[3].changeX = (1-t)*p[0].x + t * p[1].x; + p[3].changeY = (1-t)*p[0].y + t * p[1].y; + + p[4].changeX = (1-t)*p[1].x + t * p[2].x; + p[4].changeY = (1-t)*p[1].y + t * p[2].y; + + p[5].changeX = (1-t)*p[3].x + t * p[4].x; + p[5].changeY = (1-t)*p[3].y + t * p[4].y; + + v.push(new cPoint(p[5].x, p[5].y)); + + if (theta > 2*Math.PI){theta=0;} + theta += 0.01; + t = (Math.sin(theta) + 1) / 2; +} diff --git a/projects/drawing_curves/vectorForm.js b/projects/drawing_curves/vectorForm.js new file mode 100644 index 0000000..f3030a6 --- /dev/null +++ b/projects/drawing_curves/vectorForm.js @@ -0,0 +1,37 @@ +let t=0, theta=0; +let t1,t2,t3,t4; + +function setup(){ + createCanvas(1000, 1000); +} + +function draw(){ + background(15,26,38); + theta += 0.01; + t = (Math.sin(theta)+1)/2; + + t1 = (-t)^3 + 3*t^2 - 3*t + 1; + + strokeWeight(5); + textSize(40); + + noFill(); + stroke(217, 16, 75); + rect(50, 175, 750, 50); + text('1.00', 850, 215); + fill(217, 16, 75); + rect(50, 175, t1*325, 50); + + noFill(); + stroke(51, 185, 255); + rect(50, 375, 750, 50); + text('1.00', 850, 415); + + stroke(16, 255, 171); + rect(50, 575, 750, 50); + text('1.00', 850, 615); + + stroke(221, 192, 76); + rect(50, 775, 750, 50); + text('1.00', 850, 815); +} diff --git a/projects/ellipse_const.html b/projects/ellipse_const.html new file mode 100755 index 0000000..69f4d5b --- /dev/null +++ b/projects/ellipse_const.html @@ -0,0 +1,147 @@ + + + + + + + \ No newline at end of file diff --git a/projects/fourier_series.html b/projects/fourier_series.html new file mode 100755 index 0000000..7584af8 --- /dev/null +++ b/projects/fourier_series.html @@ -0,0 +1,77 @@ + + + + + + + + \ No newline at end of file diff --git a/projects/gameoflife.php b/projects/gameoflife.php new file mode 100644 index 0000000..72043da --- /dev/null +++ b/projects/gameoflife.php @@ -0,0 +1,111 @@ + + + + + + + + + + Game of Life + + + + + + diff --git a/projects/marching_squares.html b/projects/marching_squares.html new file mode 100755 index 0000000..1862d6d --- /dev/null +++ b/projects/marching_squares.html @@ -0,0 +1,173 @@ + + + + + + + + + diff --git a/projects/mazeGen.php b/projects/mazeGen.php new file mode 100644 index 0000000..4fd2499 --- /dev/null +++ b/projects/mazeGen.php @@ -0,0 +1,18 @@ + + + + + + + + + Maze Generator + + + + diff --git a/projects/oscil.php b/projects/oscil.php new file mode 100644 index 0000000..8c45167 --- /dev/null +++ b/projects/oscil.php @@ -0,0 +1,67 @@ + + + + Oscilations in 3D + + + + + + + +

Click me to change the number of boxes

+ diff --git a/projects/piApprox.php b/projects/piApprox.php new file mode 100644 index 0000000..65a8c8f --- /dev/null +++ b/projects/piApprox.php @@ -0,0 +1,78 @@ + + + + + + +

+ + diff --git a/projects/poissonDist.php b/projects/poissonDist.php new file mode 100644 index 0000000..fc08570 --- /dev/null +++ b/projects/poissonDist.php @@ -0,0 +1,110 @@ + + + + + + + diff --git a/projects/sorting_vis.html b/projects/sorting_vis.html new file mode 100755 index 0000000..6fef429 --- /dev/null +++ b/projects/sorting_vis.html @@ -0,0 +1,69 @@ + + + + + + \ No newline at end of file diff --git a/projects/warp_lines.html b/projects/warp_lines.html new file mode 100755 index 0000000..94dc088 --- /dev/null +++ b/projects/warp_lines.html @@ -0,0 +1,110 @@ + + + + + + + +

+ +

+ + + + + + + + + + + + + + + \ No newline at end of file diff --git a/tutorials/TSP_files/index.php b/tutorials/TSP_files/index.php new file mode 100644 index 0000000..9eb8c50 --- /dev/null +++ b/tutorials/TSP_files/index.php @@ -0,0 +1,53 @@ + + + + + + + + + Travelling Sales Person +

Travelling Sales Person Problem

+ + + +

+ +

The travelling salesman problem (TSP) asks the following question: "Given a list of cities and the distances between each pair of cities, what is the shortest possible route that visits each city and returns to the origin city?"

The problem was first formulated in 1930 and is one of the most intensively studied problems in optimization. It is used as a benchmark for many optimization methods. Even though the problem is computationally difficult, a large number of heuristics and exact algorithms are known, so that some instances with tens of thousands of cities can be solved completely and even problems with millions of cities can be approximated within a small fraction of 1%.

The TSP has several applications even in its purest formulation, such as planning, logistics, and the manufacture of microchips. Slightly modified, it appears as a sub-problem in many areas, such as DNA sequencing. In these applications, the concept city represents, for example, customers, soldering points, or DNA fragments, and the concept distance represents travelling times or cost, or a similarity measure between DNA fragments. The TSP also appears in astronomy, as astronomers observing many sources will want to minimize the time spent moving the telescope between the sources. In many applications, additional constraints such as limited resources or time windows may be imposed.

These are some of the algorithms I used

Note the purple route is the best route it's found so far and the thin white lines are the routes it's trying real time.

+ + +

Random Sort

+ +

This canvas sorts through random possiblities. Every frame the program chooses two random points (cities) and swaps them around. eg say the order was London, Paris, Madrid, the program would swap London and Paris so that the new order is: Paris, London, Madrid. The program then compares the distance against the record distance to decide whether the new order is better than the old order. This search method is the most inefficient way, the worst case scenario is never ending, as the point swaping is random the program may never reach the optimum route

Lexicographic Order

+ +

This canvas sorts through all possible orders sequentially, so after n! (where n is the number of points) this algorithm is guaranteed to have found the quickest possible route. However it is highly inefficient always taking n! frames to complete and as n increases, time taken increases exponentially.

+ Click here to learn more about the algorithm
+

Genetic Algorithm

+ +

This canvas is the most efficient at finding the quickest route, it is a mixture of the two methods above. It starts off by creating a population of orders, a fitness is then generated for each order in the population. This fitness decides how likely the order is to be picked and is based on the distance it takes (lower distance is better). When two orders are picked, the algorithm splices the two together at a random term, it's then mutated and compared against the record distance. This takes the least amount of time to find the shortest distance as the algorithm doesn't search through permuations that are obviously longer due to the order.

+ + + + + + diff --git a/tutorials/TSP_files/sketch.js b/tutorials/TSP_files/sketch.js new file mode 100644 index 0000000..5cc5cc3 --- /dev/null +++ b/tutorials/TSP_files/sketch.js @@ -0,0 +1,382 @@ +/*var seedSlider = document.getElementById('sliderRange') +seedSlider.onChange = function(){ + return this.value; +} + +var citiesSlider = document.getElementById('nRange') +citiesSlider.onChange = function(){ + return this.value; +}*/ + +var Seed = 21//seedChange(11); +var totalCities = 25//citiesChange(9); +// Sketch One +var randomSearch = function( p ) { // p could be any variable name + var cities = []; + var recordDistance; + var bestEver; + var localSeed = Seed; + var localCities = totalCities; + p.setup = function() { + p.createCanvas(400, 400); + p.setupPoints(Seed, totalCities); + } + + p.setupPoints = function(rngSeed, numCities){ + p.randomSeed(rngSeed); + for (var i = 0; i < numCities; i++) { + var v = p.createVector(p.random(p.width), p.random(p.height/2)); + cities[i] = v; + } + + var d = p.calcDistance(cities); + recordDistance = d; + bestEver = cities.slice(); + } + + + p.draw = function() { + if(localSeed != Seed){ + p.setupPoints(Seed, localCities); + localSeed = Seed; + } + if(localCities != totalCities){ + setupPoints(localSeed, totalCities); + localCities = totalCities; + } + + p.background(0); + + p.fill(255); + p.stroke(255); + for (var i = 0; i < cities.length; i++) { + p.ellipse(cities[i].x, cities[i].y, 8, 8); + } + + p.stroke(255, 0, 255); + p.strokeWeight(4); + p.noFill(); + p.beginShape(); + for (var i = 0; i < cities.length; i++) { + p.vertex(bestEver[i].x, bestEver[i].y); + } + p.endShape(); + + p.stroke(255); + p.translate(0 , p.height/2); + p.strokeWeight(1); + p.noFill(); + p.beginShape(); + for (var i = 0; i < cities.length; i++) { + p.vertex(cities[i].x, cities[i].y); + } + p.endShape(); + + var i = p.floor(p.random(cities.length)); + var j = p.floor(p.random(cities.length)); + p.swap(cities, i, j); + + var d = p.calcDistance(cities); + if (d < recordDistance) { + recordDistance = d; + bestEver = cities.slice(); + } +} + +p.swap = function(a, i, j) { + var temp = a[i]; + a[i] = a[j]; + a[j] = temp; +} + + +p.calcDistance = function(points) { + var sum = 0; + for (var i = 0; i < points.length - 1; i++) { + var d = p.dist(points[i].x, points[i].y, points[i + 1].x, points[i + 1].y); + sum += d; + } + return sum; +} +}; + +var myp5 = new p5(randomSearch, 'c1'); + +// Sketch Two +var lexicographicOrder = function( q ) { + var cities = []; + var order = []; + var totalPermutations; + var count = 0; + var recordDistance; + var bestEver; + + q.setup = function() { + q.randomSeed(Seed); + q.createCanvas(400, 400); + for (var i = 0; i < totalCities; i++) { + var v = q.createVector(q.random(q.width), q.random(q.height / 2)); + cities[i] = v; + order[i] = i; + } + + var d = q.calcDistance(cities, order); + recordDistance = d; + bestEver = order.slice(); + } + + q.draw = function() { + q.background(0); + + q.fill(255); + for (var i = 0; i < cities.length; i++) { + q.ellipse(cities[i].x, cities[i].y, 8, 8); + } + + q.stroke(255, 0, 255); + q.strokeWeight(4); + q.noFill(); + q.beginShape(); + for (var i = 0; i < order.length; i++) { + var n = bestEver[i]; + q.vertex(cities[n].x, cities[n].y); + } + q.endShape(); + + + q.translate(0, q.height / 2); + q.stroke(255); + q.strokeWeight(1); + q.noFill(); + q.beginShape(); + for (var i = 0; i < order.length; i++) { + var n = order[i]; + q.vertex(cities[n].x, cities[n].y); + } + q.endShape(); + + var d = q.calcDistance(cities, order); + if (d < recordDistance) { + recordDistance = d; + bestEver = order.slice(); + } + + q.nextOrder(); + } + + q.swap = function(a, i, j) { + var temp = a[i]; + a[i] = a[j]; + a[j] = temp; + } + + +q.calcDistance = function(points, order) { + var sum = 0; + for (var i = 0; i < order.length - 1; i++) { + var cityAIndex = order[i]; + var cityA = points[cityAIndex]; + var cityBIndex = order[i + 1]; + var cityB = points[cityBIndex]; + var d = q.dist(cityA.x, cityA.y, cityB.x, cityB.y); + sum += d; + } + return sum; +} + +// This is my lexical order algorithm + + q.nextOrder = function() { + + // STEP 1 of the algorithm + // https://www.quora.com/How-would-you-explain-an-algorithm-that-generates-permutations-using-lexicographic-ordering + var largestI = -1; + for (var i = 0; i < order.length - 1; i++) { + if (order[i] < order[i + 1]) { + largestI = i; + } + } + if (largestI == -1) { + q.noLoop(); + } + + // STEP 2 + var largestJ = -1; + for (var j = 0; j < order.length; j++) { + if (order[largestI] < order[j]) { + largestJ = j; + } + } + + // STEP 3 + q.swap(order, largestI, largestJ); + + // STEP 4: reverse from largestI + 1 to the end + var endArray = order.splice(largestI + 1); + endArray.reverse(); + order = order.concat(endArray); +} + +}; +var myp5 = new p5(lexicographicOrder, 'c2'); + +var geneticSearch = function( p ) { + var cities = []; + var popSize = 500; + var population = []; + var fitness = []; + var recordDistance = Infinity; + var bestEver; + var currentBest; + var statusP; + + p.setup = function(){ + p.randomSeed(Seed); + p.createCanvas(400, 400); + var order = []; + for (var i = 0; i < totalCities; i++) { + var v = p.createVector(p.random(p.width), p.random(p.height / 2)); + cities[i] = v; + order[i] = i; + } + + for (var i = 0; i < popSize; i++) { + population[i] = p.shuffle(order); + } + statusP = p.createP('').style('font-size', '32pt'); + } + + p.draw = function() { + p.background(0); + p.stroke(255); + p.fill(255); + for (var i = 0; i < cities.length; i++) { + p.ellipse(cities[i].x, cities[i].y, 8, 8); + } + + p.calculateFitness(); + p.normalizeFitness(); + p.nextGeneration(); + + p.noFill(); + p.strokeWeight(4); + p.beginShape(); + for (var i = 0; i < bestEver.length; i++) { + var n = bestEver[i]; + p.stroke(255, 0, 255); + p.vertex(cities[n].x, cities[n].y); + //p.stroke(255); + //p.ellipse(cities[n].x, cities[n].y, 8, 8); + } + p.endShape(); + + p.translate(0, p.height / 2); + p.stroke(255); + p.strokeWeight(1); + p.noFill(); + p.beginShape(); + for (var i = 0; i < currentBest.length; i++) { + var n = currentBest[i]; + p.vertex(cities[n].x, cities[n].y); + //p.ellipse(cities[n].x, cities[n].y, 8, 8); + } + p.endShape(); +} + + p.swap = function(a, i, j) { + var temp = a[i]; + a[i] = a[j]; + a[j] = temp; + } + + p.calcDistance = function(points, order) { + var sum = 0; + for (var i = 0; i < order.length - 1; i++) { + var cityAIndex = order[i]; + var cityA = points[cityAIndex]; + var cityBIndex = order[i + 1]; + var cityB = points[cityBIndex]; + var d = p.dist(cityA.x, cityA.y, cityB.x, cityB.y); + sum += d; + } + return sum; + } + + p.calculateFitness = function() { + var currentRecord = Infinity; + for (var i = 0; i < population.length; i++) { + var d = p.calcDistance(cities, population[i]); + if (d < recordDistance) { + recordDistance = d; + bestEver = population[i]; + } + if (d < currentRecord) { + currentRecord = d; + currentBest = population[i]; + } + + fitness[i] = 1 / (p.pow(d, 8) + 1); + } +} + + p.normalizeFitness = function() { + var sum = 0; + for (var i = 0; i < fitness.length; i++) { + sum += fitness[i]; + } + for (var i = 0; i < fitness.length; i++) { + fitness[i] = fitness[i] / sum;; + } + } + +p.nextGeneration = function() { + var newPopulation = []; + for (var i = 0; i < population.length; i++) { + var orderA = p.pickOne(population, fitness); + var orderB = p.pickOne(population, fitness); + var order = p.crossOver(orderA, orderB); + p.mutate(order, 0.01); + newPopulation[i] = order; + } + population = newPopulation; + +} + +p.pickOne = function(list, prob) { + var index = 0; + var r = p.random(1); + + while (r > 0) { + r = r - prob[index]; + index++; + } + index--; + return list[index].slice(); +} + + p.crossOver = function(orderA, orderB) { + var start = p.floor(p.random(orderA.length)); + var end = p.floor(p.random(start + 1, orderA.length)); + var neworder = orderA.slice(start, end); + // var left = totalCities - neworder.length; + for (var i = 0; i < orderB.length; i++) { + var city = orderB[i]; + if (!neworder.includes(city)) { + neworder.push(city); + } + } + return neworder; + } + + + p.mutate = function(order, mutationRate) { + for (var i = 0; i < totalCities; i++) { + if (p.random(1) < mutationRate) { + var indexA = p.floor(p.random(order.length)); + var indexB = (indexA + 1) % totalCities; + p.swap(order, indexA, indexB); + } + } + } +} +var myp5 = new p5(geneticSearch, 'c3'); diff --git a/tutorials/TSP_files/style.css b/tutorials/TSP_files/style.css new file mode 100644 index 0000000..5bef3b4 --- /dev/null +++ b/tutorials/TSP_files/style.css @@ -0,0 +1,160 @@ +@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed'); + +a{font-family: 'Roboto Condensed', sans-serif; font-size: 18pt;} + +h1 { + font-family: 'Roboto Condensed', sans-serif; + margin: 0; + padding: 0 0 15px 0; +} + +h2 { + font-family: 'Roboto Condensed', sans-serif; + margin: 0; + padding: 0 0 15px 0; + text-align: center; + text-decoration: bold; +} + +@media (min-width: 350px) { + h1 {font-size: 3.25em;} + img{height: 40px;} + p{font-size: 10px;} + h2{font-size: 17px;} +} + +@media (min-width: 400px) { + h1 {font-size: 3.25em;} + img{height: 45px;} + p{font-size: 15px;} + h2{font-size: 17px;} +} +@media (min-width: 440px) { + h1 {font-size: 3.5em;} + img {height: 100px;} + p{font-size: 16px;} + h2{font-size: 18px;} +} +@media (min-width: 500px) { + h1 {font-size: 3.75em;} + img{height: 125px;} + p{font-size: 16px;} + h2{font-size: 19px;} +} +@media (min-width: 630px) { + h1 {font-size: 5em;} + img{height: 150px;} + p{font-size: 20px;} + h2{font-size: 24px;} +} +@media (min-width: 768px) { + h1 { + font-size: 5em; + padding-bottom: 30px; + } + img{height: 175px;} + p{font-size: 22px;} + h2{font-size: 26px;} +} +@media (min-width: 1200px) { + h1 {font-size: 8em;} + img{height: 250px;} + p{font-size: 24px;} + h2{font-size: 28px;} +} + +p{ + + font-family: 'Roboto Condensed', sans-serif; +} + +h3{ + text-align: center; + font-size: 30px; + font-family: 'Roboto Condensed', sans-serif; +} + +footer{ + padding: 20px; + background-color: #e0e0e0; + font-family: 'Roboto Condensed', sans-serif; +} + +@keyframes dimImg{ + from {opacity: 1; + filter: alpha(opacity=100);} + to {opacity: 0.4; + filter: alpha(opacity=50);} +} + +@keyframes revealText{ + from {opacity: 0.4; + filter: alpha(opacity=50);} + to {opacity: 1; + filter: alpha(opacity=100);} +} + +.pictureContainer{ + float: right; + position: relative; +} + +.pictureContainer a{ + opacity: 0; + position: absolute; + text-align: center; + top: 5px; + left: 5px; +} + + +.pictureContainer:hover img{ + + animation-name: dimImg; + animation-duration: 1s; + opacity: 0.4; + filter: alpha(opacity=50); +} + +.pictureContainer:hover a{ + animation-name: revealText; + animation-duration: 1s; + opacity: 1; +} + +.canvasText{ + margin: 0px; + display: inline-block; + + text-align: left; +} + +#c1, #c2, #c3{ + display: block; + margin-left: auto; + margin-right: auto; + width: 50%; +} + +.button{ + padding: 16px 32px; + text-align: center; + text-decoration: none; + display: inline-block; + font-size: 16px; + margin: 4px 2px; + -webkit-transition-duration: 0.4s; /* Safari */ + transition-duration: 0.4s; + cursor: pointer; + background-color: white; + color: black; + border: 2px solid #555555; + float: right; +} + +.button:hover { + background-color: #555555; + color: white; +} + + diff --git a/tutorials/ellipseConst/dot.js b/tutorials/ellipseConst/dot.js new file mode 100644 index 0000000..1b1587a --- /dev/null +++ b/tutorials/ellipseConst/dot.js @@ -0,0 +1,8 @@ +class dot{ + + constructor(x, y){ + this.x = x; + this.y = y; + } + +} \ No newline at end of file diff --git a/tutorials/ellipseConst/index.php b/tutorials/ellipseConst/index.php new file mode 100644 index 0000000..d4b7fa2 --- /dev/null +++ b/tutorials/ellipseConst/index.php @@ -0,0 +1,60 @@ + + + + +Constructing Ellipses +

Drag your cursor around the canvas (you can use the left and right buttons for different results) to contruct an ellipse

Inspired by Grant Sanderson from 3blue1brown

Watch his here

NOTE: doesn't work on mobile, go get a PC

+ +

+ + + + + + + + + + diff --git a/tutorials/ellipseConst/script.js b/tutorials/ellipseConst/script.js new file mode 100644 index 0000000..da7931e --- /dev/null +++ b/tutorials/ellipseConst/script.js @@ -0,0 +1,138 @@ +var ux, uy; +var points = []; +var numericValue; + +function setup(){ + createCanvas(800, 800); + background(41); +} + +function draw(){ + numericValue = document.getElementById('numPoints').value; + translate(width/2, height/2); + background(41); + + stroke(75, 75, 215); + strokeWeight(2); + noFill(); + ellipse(0, 0, width-(0.0625*width), height - (0.0625*height)); + + stroke(215, 215, 15); + strokeWeight(7); + point(0,0); + if (mouseY > 0 && mouseY < height && mouseX > 0 && mouseX < width){ + if (mouseIsPressed == true && mouseButton == LEFT){ + + ux = mouseX - width/2; + uy = mouseY - height/2; + point(ux, uy); + getCirclePoints(); + drawLines(ux, uy); + drawTLines(ux, uy); + + } else if(mouseIsPressed == true && mouseButton == RIGHT){ + ux = mouseX - width/2; + uy = mouseY - height/2; + point(ux, uy); + getCirclePoints(); + drawTLines(ux, uy); + } + } + + + +} + +function getCirclePoints(){ + var r = (width-(0.0625*width)) / 2; + var step = 1 / numericValue; + var index = 0; + for (var i = 0; i < TWO_PI; i += step){ + var cx = r * Math.sin(i); + var cy = r * Math.cos(i); + points[index] = new dot(cx, cy); + index ++; + } +} + +function drawLines(startX, startY){ + strokeWeight(0.4); + stroke(255); + + for (var i = 0; i < points.length; i ++){ + line(startX, startY, points[i].x, points[i].y); + //findMidpoint(startX, startY, points[i].x, points[i].y); + + } +} + +function drawTLines(startX, startY){ + strokeWeight(0.4); + stroke(255); + + for (var i = 0; i < points.length; i ++){ + findMidpoint(startX, startY, points[i].x, points[i].y); + + } +} + +function findMidpoint(x1, y1, x2, y2){ + //find center + var cx = (x1+x2)/2; + var cy = (y1+y2)/2; + + //move line to the center on the origin + x1 -= cx; y1 -= cy; + x2 -= cx; y2 -= cy; + + //rotate both points + xtemp = x1; ytemp = y1; + x1=-ytemp; y1=xtemp; + + xtemp = x2; ytemp = y2; + x2=-ytemp; y2=xtemp; + + //move the center point back to where it was + x1+=cx; y1+=cy; + x2+=cx; y2+=cy; + stroke(255, 0, 0); + line(x1, y1, x2, y2); + stroke(255); +} + +function genLines(){ + var pointOk = false; + do{ + ux = random(width); + uy = random(height); + if(getDist(0, ux, 0, uy) <= (width-(0.0625*width)) / 2){ + pointOk = true; + } + } + while(!pointOk); + + point(ux, uy); + getCirclePoints(); + drawLines(ux, uy); + drawTLines(ux, uy); +} + +function genTLines(){ + var pointOk = false; + do{ + ux = random(width); + uy = random(height); + if(getDist(0, ux, 0, uy) <= (width-(0.0625*width)) / 2){ + pointOk = true; + } + } + while(!pointOk); + + point(ux, uy); + getCirclePoints(); + drawTLines(ux, uy); +} + +function getDist(x1, x2, y1, y2){ + return Math.sqrt((x1 - x2)^2 + (y1 - y2)^2); +} diff --git a/tutorials/ellipseConst/style.css b/tutorials/ellipseConst/style.css new file mode 100644 index 0000000..e7d56be --- /dev/null +++ b/tutorials/ellipseConst/style.css @@ -0,0 +1,76 @@ +@import url('https://fonts.googleapis.com/css?family=Roboto'); +.quantity { + position: absolute; + bottom: 50px; +} + +input[type=number]::-webkit-inner-spin-button, +input[type=number]::-webkit-outer-spin-button +{ + -webkit-appearance: none; + margin: 0; +} + +input[type=number] +{ + -moz-appearance: textfield; +} + +.quantity input { + width: 45px; + height: 42px; + line-height: 1.65; + float: left; + display: block; + padding: 0; + margin: 0; + border: 1px solid #eee; +} + +.quantity input:focus { + outline: 0; +} + +.quantity-nav { + float: left; + position: relative; + height: 42px; +} + +.quantity-button { + position: relative; + cursor: pointer; + border-left: 1px solid #eee; + width: 20px; + text-align: center; + color: #333; + font-size: 13px; + font-family: "Trebuchet MS", Helvetica, sans-serif !important; + line-height: 1.7; + -webkit-transform: translateX(-100%); + transform: translateX(-100%); + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + -o-user-select: none; + user-select: none; +} + +.quantity-button.quantity-up { + position: absolute; + height: 50%; + top: 0; + border-bottom: 1px solid #eee; +} + +.quantity-button.quantity-down { + position: absolute; + bottom: -1px; + height: 50%; +} + +p{ + font-family: 'Roboto', sans-serif; + font-size: 24px; + +} diff --git a/tutorials/jarvisMarsh/dot.js b/tutorials/jarvisMarsh/dot.js new file mode 100644 index 0000000..d0997c8 --- /dev/null +++ b/tutorials/jarvisMarsh/dot.js @@ -0,0 +1,7 @@ +class dot{ + + constructor(x, y){ + this.x = x; + this.y = y; + } +} \ No newline at end of file diff --git a/tutorials/jarvisMarsh/index.php b/tutorials/jarvisMarsh/index.php new file mode 100644 index 0000000..63b24c0 --- /dev/null +++ b/tutorials/jarvisMarsh/index.php @@ -0,0 +1,90 @@ + + + + +Convex Hull + + + + + + + + + + + + +

Convex Hull - Jarvis' Marsh

+ +

A convex hull is where a convex polygon is constructed to bound a set of points on a 2D plane. So, given all points in the set P, what is the smallest convex polygon we can construct that bounds all points in P.

Pseudo code:

Randomly place n points on a 2D plane.
Find the leftmost point/the point with the smallest x value. Called `gamma`.
Find the vector which is the most left which connects `gamma` to point q in set P.
Store `gamma` and q in a list and repeat until q = `gamma`.

+
+ + + + +

This canvas starts off by generating a set amount of points, placing them at random locations around the screen and adding them to an array. It then finds the index of the point in the array - `vertices[]` - with the lowest x value. It then loops through the array finding all vector's originating from `gamma`, `vec(gammaP(i))`.

We then examine each vertex and evaluate which one is the leftmost from the perspective of point `gamma`. Say in this case `P(q)` is the leftmost vector so we push q onto the stack.

Stack: `((q), (gamma))`

We then repeat until we reach our starting point, which in this case means our starting point is the same as the next point (`q=gamma`)

+ +

Now the question of how to calculate the leftness of a vector compared to another. We can use the cross product in 2D.

`vecu times vecv = u`_`x``*v`_`y`` - u`_`y``*v`_`x` If the cross product is greater than 0, the vector is to the left. If it is equal to 0 then the vectors are colinear

+ +

Note: to convert coordinates to a vector, find the difference between your origin point and your target point

+ +

+ for (var i = 0; i < vertices.length; i++){
+ if (i != originPoint){
+   x1 = vertices[recordLeftVector].x - vertices[originPoint].x;
+   y1 = vertices[recordLeftVector].y - vertices[originPoint].y;

+ +   x2 = vertices[i].x - vertices[originPoint].x;
+   y2 = vertices[i].y - vertices[originPoint].y;

+ +   if ((y2 * x1) - (y1 * x2) <= 0){
+    recordLeftVector = i;
+   }
+ + }
+ }
+

+ +

Now we just have to add in a little piece of code at the bottom of this function to: increment the iteration number so we don't recurse until eternity, add our leftmost vector to the route stack and call the function again with the next point as a parameter.

+ +

+ if (originPoint != recordLeftVector && iterations < 75){
+   route[iterations] = recordLeftVector;
+   iterations += 1;
+   findLeftLine(recordLeftVector);
+ + }
+

+ + + + + + + + diff --git a/tutorials/jarvisMarsh/sketch.js b/tutorials/jarvisMarsh/sketch.js new file mode 100644 index 0000000..7bb049e --- /dev/null +++ b/tutorials/jarvisMarsh/sketch.js @@ -0,0 +1,102 @@ +var jarvisMarsh = function( p ){ + + const numPoints = 12; + var vertices = []; + var route = []; + let iterations = 0; + + p.setup = function(){ + p.createCanvas(750, 500); + p.background(217); + + button = p.createButton('Reset Button') + button.mousePressed(p.resetSketch); + + p.initValues(); + + } + + p.draw = function(){} + + + p.drawLine = function(){ + let r = p.findLeftPoint(); + route[iterations] = r; + + p.findLeftLine(r); + + p.stroke(215, 75, 75); + p.strokeWeight(1); + for (var i = 0; i < route.length - 1; i++){ + p.line(vertices[route[i]].x, vertices[route[i]].y, vertices[route[i+1]].x, vertices[route[i+1]].y) + } + } + + p.findLeftLine = function(originPoint){ + var recordLeftVector = 1; + let x1, x2, y1, y2; + + for (var i = 0; i < vertices.length; i++){ + if (i != originPoint){ + x1 = vertices[recordLeftVector].x - vertices[originPoint].x; + y1 = vertices[recordLeftVector].y - vertices[originPoint].y; + + + + x2 = vertices[i].x - vertices[originPoint].x; + y2 = vertices[i].y - vertices[originPoint].y; + + //if the result if positive then vector u is left of vector v + //where u and v are both vectors from the target point + //If its equal to 0 then they're colinear. This is also good :) + if ((y2 * x1) - (y1 * x2) <= 0){ + recordLeftVector = i; + } + + } + } + + if (originPoint != recordLeftVector && iterations < 75){ + route[iterations] = recordLeftVector; + iterations += 1; + p.findLeftLine(recordLeftVector); + + } + } + + p.findLeftPoint = function(){ + let recordLeft = 0; + + for (var i = 0; i < vertices.length; i++){ + if (vertices[i].x < vertices[recordLeft].x){ + recordLeft = i; + } + } + return recordLeft; + } + + p.resetSketch = function(){ + vertices.length = 0; + p.clear() + p.background(217); + p.initValues(); + p.findLeftLine(); + p.draw(); + } + + p.initValues = function(){ + p.stroke(0); + p.strokeWeight(7); + + var bufferx = p.width * 0.0625; + var buffery = p.height * 0.0625; + + for (var i = 0; i < numPoints; i++){ + vertices[i] = new dot(p.random(bufferx, p.width - bufferx), p.random(buffery, p.height - buffery)); + p.point(vertices[i].x, vertices[i].y); + } + iterations = 0; + p.drawLine(); + } +}; +var myp5 = new p5(jarvisMarsh, 'c1'); \ No newline at end of file diff --git a/tutorials/jarvisMarsh/stepByStep.png b/tutorials/jarvisMarsh/stepByStep.png new file mode 100644 index 0000000..85aa093 Binary files /dev/null and b/tutorials/jarvisMarsh/stepByStep.png differ diff --git a/tutorials/jarvisMarsh/style.css b/tutorials/jarvisMarsh/style.css new file mode 100644 index 0000000..b9ecafb --- /dev/null +++ b/tutorials/jarvisMarsh/style.css @@ -0,0 +1,71 @@ +h1{ + font-family: 'Roboto Condensed', sans-serif; + margin: 0; + padding: 0 0 15px 0; + font-weight: 700; + font-size: 32px; +} + +h2{ + font-family: 'Roboto Condensed', sans-serif; + margin: 0; + padding: 15px 0 15px 0; + font-weight: 650; + font-size: 20px; +} + +p{ + margin: 1px; + font-family: 'Roboto', sans-serif; + font-size: 19px; + padding: 5px 0px 5px 0px; +} + +.psudoCode{ + font-family: 'Inconsolata', monospace; + font-size: 19px; + background-color: #D9D9D9; + border: 1px solid; + padding: 5px; + box-shadow: 5px 5px #888888; +} + +a{ + font-family: 'Inconsolata', monospace; + font-size: 19px; + background-color: #D9D9D9; + +} + +button{ + background-color: white; + border: 2px solid #555555; + color: black; + padding: 16px 32px; + text-align: center; + text-decoration: none; + display: inline-block; + font-size: 16px; + margin: 4px 2px; + -webkit-transition-duration: 0.4s; /* Safari */ + transition-duration: 0.4s; + cursor: pointer; + float:right; +} + +button:hover { + background-color: #555555; + color: white; +} + +.examples{ + padding: 10px; +} + + +html{ + -webkit-user-select: none; /* Safari */ + -moz-user-select: none; /* Firefox */ + -ms-user-select: none; /* IE10+/Edge */ + user-select: none; /* Standard */ +} diff --git a/tutorials/summed_area/.sass-cache/0d78ac648bac6159a2ba5f9b6d5a38b5701521ef/nord.scssc b/tutorials/summed_area/.sass-cache/0d78ac648bac6159a2ba5f9b6d5a38b5701521ef/nord.scssc new file mode 100644 index 0000000..0396f25 Binary files /dev/null and b/tutorials/summed_area/.sass-cache/0d78ac648bac6159a2ba5f9b6d5a38b5701521ef/nord.scssc differ diff --git a/tutorials/summed_area/.sass-cache/7cce12307e121b2db7ff3f53dbc1b9cfd649f803/cStyle.scssc b/tutorials/summed_area/.sass-cache/7cce12307e121b2db7ff3f53dbc1b9cfd649f803/cStyle.scssc new file mode 100644 index 0000000..6109124 Binary files /dev/null and b/tutorials/summed_area/.sass-cache/7cce12307e121b2db7ff3f53dbc1b9cfd649f803/cStyle.scssc differ diff --git a/tutorials/summed_area/cStyle.scss b/tutorials/summed_area/cStyle.scss new file mode 100644 index 0000000..333bc01 --- /dev/null +++ b/tutorials/summed_area/cStyle.scss @@ -0,0 +1,83 @@ +@import "../nord.scss"; +@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap'); + +$roboto-slab: 'Roboto', sans-serif; + +html { + background-color: $nord0; +} + +h1 { + color: $nord6; + font-family: $roboto-slab; + font-size: 48pt; +} + +p { + color: $nord4; + font-family: $roboto-slab; + font-size: 16pt; +} + +code { + font-size: 14pt; + border: 4px solid $nord13; +} + +a { + color: $nord4; + font-family: $roboto-slab; + font-size: 24pt; +} + +#subsetOutput { + color: $nord8; +} + +#wholeOutput { + color: $nord15; +} + +#tlOutput{ + color: $nord12; +} + +#tOutput{ + color: $nord13; +} + +#lOutput{ + color: $nord14; +} + +#sumDiv { + text-align: center; +} + +button { + display: inline-block; + width: 25%; + padding: 10px 25px; + margin: 0.1em; + border: 4px solid $nord8; + box-sizing: border-box; + text-decoration: none; + font-family: 'Roboto',sans-serif; + font-size: 14pt; + color: $nord2; + background-color: $nord6; + text-align: center; + position: relative; + transition: all 0.15s; + + &:hover { + background-color: $nord3; + color: $nord6; + border-color: $nord10; + } + + &:focus { + border: 4px solid $nord8; + box-sizing: border-box; + } +} \ No newline at end of file diff --git a/tutorials/summed_area/script.js b/tutorials/summed_area/script.js new file mode 100644 index 0000000..c9071e4 --- /dev/null +++ b/tutorials/summed_area/script.js @@ -0,0 +1,278 @@ +let myWidth = 800, myHeight = 800, offset = 5; +let r, n = 10; + +let t = []; +let tl = null +let br = null; + +let showCount = false; +let drawRectMode = 0; + +let sOutput, wOutput, tlOutput, tOutput, lOutput; + + +function setup() +{ + createCanvas(myWidth + 2*offset, myHeight + 2*offset); + r = myWidth / n; + for (y = 0; y < n; y ++) + { + for (x = 0; x < n; x ++) + { + t.push(new cTile(x*r + offset, y*r + offset, r)); + } + } + sOutput = document.getElementById('subsetOutput'); + wOutput = document.getElementById('wholeOutput'); + tlOutput = document.getElementById('tlOutput'); + tOutput = document.getElementById('tOutput'); + lOutput = document.getElementById('lOutput'); + +} + +function draw() +{ + background(46, 52, 64); + t.forEach(e => e.show()); + + stroke(156,212,228); + noFill(); + strokeWeight(5); + if (tl) + { + if (!br) + { + rect(tl.x, tl.y, tl.w); + } else { + rect(tl.x, tl.y, br.x - tl.x + r, br.y - tl.y + r); + drawRect(drawRectMode); + } + } +} + +function defineCount(br) +{ + let cols = Math.floor(br.x/ r) + 1; + let rows = Math.floor(br.y/ r) + 1; + let c = 0; + // let index = cols + n * rows; + + for (y = 0; y < rows; y++) { + for (x = 0; x < cols; x++){ + var i = x + n * y; + if (t[i].s){ + c++; + } + } + } + return c; +} + +function countSquares(tl, br) +{ + let topLeft, left, top, whole; + let tlx, tly, brx, bry; + + tlx = Math.floor(tl.x / r); + tly = Math.floor(tl.y / r); + brx = Math.floor(br.x / r); + bry = Math.floor(br.y / r); + + topLeft = t[(tlx-1) + n * (tly-1)].count; + left = t[(tlx-1) + n * bry ].count; + top = t[brx + n * (tly-1)].count; + whole = t[brx + n * bry ].count; + + var s = whole + topLeft - top - left; + if (s < 0) + s = 0; + + return s; +} + +function drawRect(n) +{ + strokeWeight(5); + noFill(); + + switch(n) + { + case 1: + //whole + stroke(180,142,173); + fill('rgba(180, 142, 173, 0.05)'); + rect(offset, offset, br.x - offset + br.w, br.y - offset + br.w); + break; + case 2: + //topleft + stroke(208,135,112); + fill('rgba(208,135,112, 0.05)'); + rect(offset, offset, tl.x - offset, tl.y - offset); + break; + case 3: + //left + stroke(163,190,140); + fill('rgba(163,190,140, 0.05)'); + rect(offset, offset, tl.x - offset, br.y - offset + br.w); + break; + case 4: + //top + stroke(235,203,139); + fill('rgba(235,203,139, 0.05)'); + rect(offset, offset, br.x - offset + br.w, tl.y - offset); + break; + default: + break; + } + + strokeWeight(1); +} + +function showCountToggle(){ + showCount = !showCount; +} + +function toggleRectMode(){ + if (tl && br) + { + var tlx = Math.floor(tl.x / r); + var tly = Math.floor(tl.y / r); + var brx = Math.floor(br.x / r); + var bry = Math.floor(br.y / r); + + var topLeft = t[(tlx-1) + n * (tly-1)].count; + var left = t[(tlx-1) + n * bry ].count; + var top = t[brx + n * (tly-1)].count; + var whole = t[brx + n * bry ].count; + + if (drawRectMode == 0){ + wOutput.innerHTML = whole.toString(10); + wOutput.style.fontWeight = "bold"; + drawRectMode ++; + } else if (drawRectMode == 1){ + tlOutput.innerHTML = topLeft.toString(10); + tlOutput.style.fontWeight = "bold"; + wOutput.style.fontWeight = "normal"; + drawRectMode ++; + } else if (drawRectMode == 2){ + lOutput.innerHTML = left.toString(10); + lOutput.style.fontWeight = "bold"; + tlOutput.style.fontWeight = "normal"; + drawRectMode ++; + } else if (drawRectMode == 3) { + tOutput.innerHTML = top.toString(10); + tOutput.style.fontWeight = "bold"; + lOutput.style.fontWeight = "normal"; + drawRectMode ++; + } else if (drawRectMode == 4) { + tOutput.style.fontWeight = "normal"; + drawRectMode = 0; + } + } +} + +function updateSum() +{ + var tlx = Math.floor(tl.x / r); + var tly = Math.floor(tl.y / r); + var brx = Math.floor(br.x / r); + var bry = Math.floor(br.y / r); + + var topLeft = t[(tlx-1) + n * (tly-1)].count; + var left = t[(tlx-1) + n * bry ].count; + var top = t[brx + n * (tly-1)].count; + var whole = t[brx + n * bry ].count; + + wOutput.innerHTML = whole.toString(10); + tlOutput.innerHTML = topLeft.toString(10); + lOutput.innerHTML = left.toString(10); + tOutput.innerHTML = top.toString(10); + sOutput.innerHTML = countSquares(tl,br).toString(10); +} + +function mouseClicked(event) +{ + if (event.shiftKey) + { + if (mouseX > offset && mouseX < myWidth && mouseY > offset && mouseY < myHeight) + { + let col = Math.floor(mouseX / r); + let row = Math.floor(mouseY / r); + + if (tl != null && br != null) + { + tl = null; + br = null; + } + + if (!tl) + { + tl = t[col + n * row]; + } else { + br = t[col + n * row]; + } + + if (tl != null && br != null) + { + updateSum(); + } + + } + } else { + if (mouseX > 0 && mouseX < myWidth && mouseY > 0 && mouseY < myHeight) + { + let col = Math.floor(mouseX / r); + let row = Math.floor(mouseY / r); + t[col + n * row].setState(); + + t.forEach(tile => tile.setCount(defineCount(tile))); + + if (tl != null && br != null) + { + updateSum(); + } + } + } +} + +class cTile +{ + constructor(_x, _y, _w) + { + this.x = _x; + this.y = _y; + this.s = false; + this.w = _w; + this.count = 0; + } + + show() + { + if (this.s) + { + fill(191,97,106); + } else { + noFill(); + } + stroke(236,239,244); + strokeWeight(1); + rect(this.x, this.y, this.w, this.w); + if (showCount) + { + textSize(18); + stroke(255); + fill(255); + text(this.count.toString(10), this.x + this.w/2 - 3, this.y + this.w/2 + 5); + } + } + + setState() + { + this.s = !this.s; + } + + setCount(c) + { + this.count = c; + } +}; \ No newline at end of file diff --git a/tutorials/summed_area/style.css b/tutorials/summed_area/style.css new file mode 100644 index 0000000..463f020 --- /dev/null +++ b/tutorials/summed_area/style.css @@ -0,0 +1,68 @@ +@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap"); +html { + background-color: #2e3440; } + +h1 { + color: #eceff4; + font-family: "Roboto", sans-serif; + font-size: 48pt; } + +p { + color: #d8dee9; + font-family: "Roboto", sans-serif; + font-size: 16pt; } + +code { + font-size: 14pt; + border: 4px solid #ebcb8b; } + +a { + color: #d8dee9; + font-family: "Roboto", sans-serif; + font-size: 24pt; } + +#subsetOutput { + color: #88c0d0; } + +#wholeOutput { + color: #b48ead; } + +#tlOutput { + color: #d08770; } + +#tOutput { + color: #ebcb8b; } + +#lOutput { + color: #a3be8c; } + +#sumDiv { + text-align: center; } + +button { + display: inline-block; + width: 25%; + padding: 10px 25px; + margin: 0.1em; + border: 4px solid #88c0d0; + box-sizing: border-box; + text-decoration: none; + font-family: 'Roboto',sans-serif; + font-size: 14pt; + color: #434c5e; + background-color: #eceff4; + text-align: center; + position: relative; + transition: all 0.15s; } + button:hover { + background-color: #4c566a; + color: #eceff4; + border-color: #5e81ac; } + button:focus { + border: 4px solid #88c0d0; + box-sizing: border-box; } + +#chillin { + display: none; } + +/*# sourceMappingURL=style.css.map */ diff --git a/tutorials/summed_area/style.css.map b/tutorials/summed_area/style.css.map new file mode 100644 index 0000000..8e96bf0 --- /dev/null +++ b/tutorials/summed_area/style.css.map @@ -0,0 +1,7 @@ +{ +"version": 3, +"mappings": "AACQ,2EAAmE;AAI3E,IAAK;EACD,gBAAgB,EC+BZ,OAAO;;AD5Bf,EAAG;EACC,KAAK,ECuID,OAAO;EDtIX,WAAW,EARD,oBAAoB;EAS9B,SAAS,EAAE,IAAI;;AAGnB,CAAE;EACE,KAAK,EC2GD,OAAO;ED1GX,WAAW,EAdD,oBAAoB;EAe9B,SAAS,EAAE,IAAI;;AAGnB,IAAK;EACD,SAAS,EAAE,IAAI;EACf,MAAM,EAAE,iBAAiB;;AAG7B,CAAE;EACE,KAAK,ECgGD,OAAO;ED/FX,WAAW,EAzBD,oBAAoB;EA0B9B,SAAS,EAAE,IAAI;;AAGnB,aAAc;EACV,KAAK,ECuID,OAAO;;ADpIf,YAAa;EACT,KAAK,ECqMA,OAAO;;ADlMhB,SAAS;EACL,KAAK,ECoKA,OAAO;;ADjKhB,QAAQ;EACJ,KAAK,EC0KA,OAAO;;ADvKhB,QAAQ;EACJ,KAAK,ECgLA,OAAO;;AD7KhB,OAAQ;EACJ,UAAU,EAAE,MAAM;;AAGtB,MAAO;EACH,OAAO,EAAE,YAAY;EACrB,KAAK,EAAE,GAAG;EACV,OAAO,EAAE,SAAS;EAClB,MAAM,EAAE,KAAK;EACb,MAAM,EAAE,iBAAgB;EACxB,UAAU,EAAE,UAAU;EACtB,eAAe,EAAE,IAAI;EACrB,WAAW,EAAE,mBAAmB;EAChC,SAAS,EAAE,IAAI;EACf,KAAK,ECMD,OAAO;EDLX,gBAAgB,EC8EZ,OAAO;ED7EX,UAAU,EAAE,MAAM;EAClB,QAAQ,EAAE,QAAQ;EAClB,UAAU,EAAE,SAAS;EAErB,YAAQ;IACJ,gBAAgB,EC+BhB,OAAO;ID9BP,KAAK,ECuEL,OAAO;IDtEP,YAAY,ECgHX,OAAO;ED7GZ,YAAQ;IACJ,MAAM,EAAE,iBAAgB;IACxB,UAAU,EAAE,UAAU;;AAI9B,QAAS;EACL,OAAO,EAAE,IAAI", +"sources": ["cStyle.scss","../nord.scss"], +"names": [], +"file": "style.css" +} \ No newline at end of file diff --git a/tutorials/summed_area/summed-area.html b/tutorials/summed_area/summed-area.html new file mode 100644 index 0000000..1bf3e19 --- /dev/null +++ b/tutorials/summed_area/summed-area.html @@ -0,0 +1,106 @@ + + + + + + + + + + +

Summed-area Table

+ A Summed-area table is a data structure and algorithm for quickly and + efficiently generating the sum of values in a rectangular grid. In image + processing it is also known as an integral image. +

+ + + +

+ To generate a summed-area table, each cell is given a value which is the + sum of all values in a rectangular subset where the top left corner is the + first cell in the grid and where the bottom right cell is the cell you're + calculating the value for (assumuing the array starts top left). +

+            
+function defineCount(br)
+{
+    let c = 0;
+    //where br is the cell we're calculating
+    //br.x is the column number
+    //br.y is the row number
+    for (y = 0; y <= br.y; y++) {
+    //loop through all rows above br (and the row br is on)
+        for (x = 0; x <= br.x; x++) {
+        //loop through all columns to the left of br (and br column)
+            var i = x + n * y; //convert 2d array format to 1d index
+
+            if (t[i].s){ //if cell[i].status == true then increase count
+                c++;
+            }
+        }
+    }
+    return c;
+}
+            
+

+ +

+ Now each cell has its own count value. This isn't much help on it's own, + however we can use it to calculate the sum value of any subset of the grid + by interrogating 4 cells and performing only 4 additions. NOTE: we have to + add the 'top left' region as it as been subtracted twice. +

+ +

+            
+function countSquares(tl, br) {
+//where tl and br are the top left and bottom right cell respectively
+    
+    let topLeft, left, top, whole;
+    //these are the four cells to interrogate
+
+    //1d index = x + #rows * y
+    topLeft = t[(tl.x-1) + n * (tl.y-1)].count;
+    left    = t[(tl.x-1) + n * bry     ].count;
+    top     = t[br.x     + n * (tl.y-1)].count;
+    whole   = t[br.x     + n * br.y    ].count;
+
+    return whole + topLeft - top - left;
+}
+            
+

Click a sqaure on the grid to turn it on or off.

Shift+Click two square to define a rectangle.

+ Press the show count button to display the sum value of each cell + (in this example a cell's value can only be 0 or 1). +

+ Press show rectangles to see the different regions simplified and + see how + it changes the sum below. +

+ 0 + = + 0 + + + 0 + - + 0 + - + 0 +

+ + + + + + \ No newline at end of file diff --git a/tutorials/terrainGen/Jagged_Terrain.jpg b/tutorials/terrainGen/Jagged_Terrain.jpg new file mode 100644 index 0000000..9f8f827 Binary files /dev/null and b/tutorials/terrainGen/Jagged_Terrain.jpg differ diff --git a/tutorials/terrainGen/dot.js b/tutorials/terrainGen/dot.js new file mode 100644 index 0000000..1b1587a --- /dev/null +++ b/tutorials/terrainGen/dot.js @@ -0,0 +1,8 @@ +class dot{ + + constructor(x, y){ + this.x = x; + this.y = y; + } + +} \ No newline at end of file diff --git a/tutorials/terrainGen/index.html b/tutorials/terrainGen/index.html new file mode 100644 index 0000000..761e860 --- /dev/null +++ b/tutorials/terrainGen/index.html @@ -0,0 +1,107 @@ + + Midpoint Displacement + + + + + + + + + + +

Midpoint Displacement

+ +

Midpoint displacement is a common way to generate terrains in video + games. Instead of manually creating a stage you can make an + algorithm create one based off randomness. This is faster to + calculate than a perlin noise stage which is why it can be found + frequently in older video game titles.

Psudo code:

Create two points.
Find the center x coordinate.
Create a new point in between the two first points with some + offset in the y coorindate.
Repeat. (can be recursive)

+
+ + + + +

This canvas starts off with two points in an array called + points[], one at height/2 and one at + math.random(-vertical_displacement, vertical_displacement). + The center point is found and a new point is made and added to the + array. This new point is offset on the y-axis by an amount however + we can't use the same vertical_displacement as we did before + as we'd end up with a very jagged terrain. +

+ +

Instead we have to iterate our variable - + vertical_displacement - based on the iteration number of the + sketch, in order to generate a smooth stage/terrain. +

+ +

+ vertical_displacement = points[0].y + points[1].y / 2;
+ vertical_displacement *= 2 ** (-roughness); +

+ +

The top formula is the inital value. The second is applied very + iteration of the sketch.

Right now we can add one point to the list, time to add several! This + means for loops. But before we can loop through our array how do we + know which point should connect to which? We need to sort the array + based on x value, so that the points read off from left to right. +

I just used a bubble sort for simplicity however it's worth pointing + out that the number of points grows exponetially - O(2^n) + where n = iterations - so after just 10 iterations points.length + = 1024. A merge sort could be used to speed up computation + times.

Now we can use a for loop to go through our array and compare the ith + item to the (i+1)th item, and then update iterations and + vertical_displacement. +

+ +

+ var pLength = points.length;

+ + for (var i = 0; i < pLength - 1; i++){
+ +    var midX = (points[i].x + points[i + + 1].x) / 2;
+    var midY = (points[i].y + points[i + + 1].y) / 2;
+    midY += random(-vertical_displacement, + vertical_displacement);
+ +    points[pLength + i] = new point(midX, + midY);
+ }

+ + iterations += 1;
+ vertical_displacement *= 2 ** (-roughness);
+ + bubbleSort();
+

NOTE: Do not use points.length to define your for loop as we are + increasing the length of the array within the loop

+ + + + + + + + + \ No newline at end of file diff --git a/tutorials/terrainGen/sketch.js b/tutorials/terrainGen/sketch.js new file mode 100644 index 0000000..c3a74d5 --- /dev/null +++ b/tutorials/terrainGen/sketch.js @@ -0,0 +1,90 @@ +var MidDisplacement = function( p ){ + + var points = []; + var iterations = 1; + const roughness = 1; + var vertical_displacement; + let button; + + p.setup = function(){ + p.createCanvas(800, 500); + p.frameRate(2); + p.background(217); + + button = p.createButton('Reset Button') + //button.position(p.width, p.height); + button.mousePressed(p.resetSketch); + p.initValues(); + + } + + p.draw = function(){} + + p.bubbleSort = function() { + var length = points.length; + //Number of passes + for (var i = 0; i < length; i++) { + //Notice that j < (length - i) + for (var j = 0; j < (length - i - 1); j++) { + //Compare the x values + if(points[j].x > points[j+1].x) { + //Swap the numbers + var tmp = points[j]; //Temporary variable to hold the current number + points[j] = points[j+1]; //Replace current number with adjacent number + points[j+1] = tmp; //Replace adjacent number with current number + } + } + } + } + + p.mouseClicked = function(){ + if (iterations < 11){ + var pLength = points.length; + + for (var i = 0; i < pLength - 1; i++){ + + var midX = (points[i].x + points[i + 1].x) / 2; + var midY = (points[i].y + points[i + 1].y) / 2; + midY += p.random(-vertical_displacement, vertical_displacement); + + points[pLength + i] = new dot(midX, midY); + } + + iterations += 1; + vertical_displacement *= 2 ** (-roughness); + + p.bubbleSort(); + + p.clear(); + p.background(215); + + for (var i = 0; i < pLength; i++){ + p.strokeWeight(4); + p.stroke(0); + p.point(points[i].x * 2, points[i].y); + + p.strokeWeight(1); + p.stroke(215, 15, 15); + p.line(points[i].x * 2, points[i].y, points[i+1].x * 2, points[i+1].y); + } + } + } + + p.initValues = function(){ + points[0] = new dot(0, p.height/2); + points[1] = new dot(p.width, p.height/2); + + vertical_displacement = points[0].y + points[1].y / 2; + vertical_displacement *= 2 ** (-roughness); + + iterations = 1; + } + + p.resetSketch = function(){ + points.length = 0; + p.clear() + p.background(217); + p.initValues(); + } +}; +var myp5 = new p5(MidDisplacement, 'c1'); \ No newline at end of file diff --git a/tutorials/terrainGen/style.css b/tutorials/terrainGen/style.css new file mode 100644 index 0000000..b9ecafb --- /dev/null +++ b/tutorials/terrainGen/style.css @@ -0,0 +1,71 @@ +h1{ + font-family: 'Roboto Condensed', sans-serif; + margin: 0; + padding: 0 0 15px 0; + font-weight: 700; + font-size: 32px; +} + +h2{ + font-family: 'Roboto Condensed', sans-serif; + margin: 0; + padding: 15px 0 15px 0; + font-weight: 650; + font-size: 20px; +} + +p{ + margin: 1px; + font-family: 'Roboto', sans-serif; + font-size: 19px; + padding: 5px 0px 5px 0px; +} + +.psudoCode{ + font-family: 'Inconsolata', monospace; + font-size: 19px; + background-color: #D9D9D9; + border: 1px solid; + padding: 5px; + box-shadow: 5px 5px #888888; +} + +a{ + font-family: 'Inconsolata', monospace; + font-size: 19px; + background-color: #D9D9D9; + +} + +button{ + background-color: white; + border: 2px solid #555555; + color: black; + padding: 16px 32px; + text-align: center; + text-decoration: none; + display: inline-block; + font-size: 16px; + margin: 4px 2px; + -webkit-transition-duration: 0.4s; /* Safari */ + transition-duration: 0.4s; + cursor: pointer; + float:right; +} + +button:hover { + background-color: #555555; + color: white; +} + +.examples{ + padding: 10px; +} + + +html{ + -webkit-user-select: none; /* Safari */ + -moz-user-select: none; /* Firefox */ + -ms-user-select: none; /* IE10+/Edge */ + user-select: none; /* Standard */ +}

About Me

About Havox

HavoxV3

Havox.org

Code Experience

Technical Background

Tutoring

Summed-area tables

Drawing bezier curves

Projects

Sam Storey Music

Drawing Bezier Curves

2D Marching Squares

Bubble Sort Visualiser

Fourier Series

Constructing an Ellipse

Game of Life

Calculating PI

Oscillations in 3D

Travelling Sales Person Problem

These are some of the algorithms I used

Random Sort

Lexicographic Order

Genetic Algorithm

Convex Hull - Jarvis' Marsh

Summed-area Table

Midpoint Displacement

NOTE: Do not use points.length to define your for loop as we are + increasing the length of the array within the loop