diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..79da560 Binary files /dev/null and b/.DS_Store differ diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..e1f16db --- /dev/null +++ b/.gitignore @@ -0,0 +1,3 @@ +_site +.idea +node_modules \ No newline at end of file diff --git a/404.html b/404.html new file mode 100644 index 0000000..4554615 --- /dev/null +++ b/404.html @@ -0,0 +1,14 @@ +--- +layout: not_found +title: 404 +--- + +
+
+
+

404

+

Houston, we have a problem.

+ Back to Earth  đźš€ +
+
+
-- particles
diff --git a/_config.yml b/_config.yml new file mode 100644 index 0000000..1b6c1c7 --- /dev/null +++ b/_config.yml @@ -0,0 +1,37 @@ +exclude: + - "Gemfile" + - "Gemfile.lock" + - "README.md" + - "*.gemspec" + +keep_files: + - "CNAME" + - ".git" + - ".gitignore" + +# Site settings +baseurl: "" +title: Brittany Chiang | Front End Software Engineer +name: Brittany Chiang +description: Design-minded, detail oriented software engineer passionate about combining beautiful code with beautiful design. +url: http://brittanychiang.com # the base hostname & protocol for your site +email: brittany.chiang@gmail.com +cover: http://brittanychiang.com/img/og.jpg +logo: http://brittanychiang.com/img/logo-black.png +resume: http://brittanychiang.com/resume.pdf +social: + - title: email + url: mailto:brittany.chiang@gmail.com + - title: twitter + url: https://twitter.com/bchiang7 + - title: instagram + url: https://instagram.com/bchiang7 + - title: codepen + url: http://codepen.io/bchiang7 + - title: github + url: https://github.com/bchiang7 + - title: linkedin + url: https://www.linkedin.com/in/bchiang7 + +# Build settings +markdown: kramdown diff --git a/_data/navigation.yml b/_data/navigation.yml new file mode 100644 index 0000000..ae548b9 --- /dev/null +++ b/_data/navigation.yml @@ -0,0 +1,28 @@ +- section: intro + title: Intro + number: 1 + +- section: about + title: About + number: 2 + +- section: services + title: What I Do + number: 3 + +- section: skills + title: Skills + number: 4 + +- section: experience + title: Experience + number: 5 + +- section: portfolio + title: Portfolio + number: 6 + +- section: contact + title: Contact + number: 7 + diff --git a/_data/portfolio.yml b/_data/portfolio.yml new file mode 100644 index 0000000..da579ae --- /dev/null +++ b/_data/portfolio.yml @@ -0,0 +1,107 @@ +- title: Weather Widget + demo: http://quiet-dusk-89245.herokuapp.com/ + code: https://github.com/bchiang7/DemoWebApp + description: A simple weather app I made at HubSpot's Fall 2016 Web App Workshop utilizing Node.js, Express, and Heroku. I used the OpenWeatherMap API to get weather and forecast data, and then used the current city's coordinates to create a map background that reflected the current city using the Google Maps API. + img: weather + used: + - thing: OpenWeatherMap API + - thing: Google Maps API + - thing: JavaScript + - thing: jQuery + - thing: CSS + - thing: Node.js + - thing: Express + - thing: Heroku + +- title: Screentime 2.0 + demo: https://play.google.com/store/apps/details?id=com.starry.management + description: ScreenTime 2.0 was one of Starry's most important consumer-facing software updates on Starry Station, providing new functionality for users to easily filter content, pause the internet, and even create custom rules for blocking apps like Facebook and Twitter right from their mobile phones. As a co-op, I played a large role in the implementation of this feature on Starry's cordova android app, and was responsible for building out front-end designs, linking up back-end data, as well as communicating with designers and other engineers throughout the process.

Check out the Starry App on Google Play, and learn more about ScreenTime 2.0 on Product Hunt and the Starry Blog. + img: screentime + used: + - thing: JavaScript + - thing: CSS + - thing: Handlebars.js + - thing: Backbone.js + - thing: Marionette.js + - thing: Cordova + +- title: Online Resume + demo: http://brittanychiang.com/resume + code: https://github.com/bchiang7/react-profile/ + description: This is just an online version of my resume I made for fun. I was interested in learning React.js, so I found this simple tutorial and it kind of spun into this weekend project. I probably didn't need to use React at all, but hey, at least I learned a few things! + img: resume + used: + - thing: JavaScript + - thing: React.js + - thing: CSS + +- title: Old Personal Website + demo: http://brittanychiang.com/v1 + code: https://github.com/bchiang7/website_2015/ + description: This was my first portfolio website I built in 2014. It's a simple one-pager like this current site, but relied heavily on Bootstrap. Since then, I think my web development and design skills have increased immensely. + img: websitev1 + used: + - thing: HTML + - thing: CSS + - thing: Bootstrap + - thing: JavaScript + - thing: jQuery + +- title: CourseSource + demo: http://webdevspring2016-chiangbrittany.rhcloud.com/project/client/#/login + code: https://github.com/bchiang7/WebDevSpring2016/tree/master/public/project + description: CourseSource is a web application built on the MEAN (MongoDB, Express, Angular, Node) stack for my web development class in 2015. I created this web app with the intention of providing Northeastern Students a better experience browsing the courses offered at Northeastern (which is currently a painstakingly tedious task on our current student portal). + img: coursesource + used: + - thing: HTML + - thing: CSS + - thing: Bootstrap + - thing: JavaScript + - thing: jQuery + - thing: NodeJS + - thing: AngularJS + - thing: Express + - thing: MongoDB + +- title: NU Women in Tech + demo: http://nuwit.ccs.neu.edu/ + code: https://github.com/nuwit/website + description: While serving as web chair for Northeastern University Women in Technology, I did a complete overhaul of the club website. I designed and developed the current website using Jekyll as a static site generator, and was responsible for the upkeeping and maintainence of the site. + img: nuwit + used: + - thing: Jekyll + - thing: Liquid + - thing: Yaml + - thing: HTML + - thing: CSS + - thing: Bootstrap + - thing: jQuery + +- title: Fontipsums + demo: http://brittanychiang.com/fontipsums + code: https://github.com/bchiang7/fontipsums + description: As a typography nerd, I wanted a way to visually see different font combinations together. I whipped up this simple website to display some of my favorite pairings combined with some fun lorem ipsum variations I found on the web. Over the course of creating this site, I learned a lot about web fonts and best practices. + img: fontipsums + used: + - thing: HTML + - thing: SCSS + +- title: One Card For All + demo: http://onecardforall.org + description: At MullenLowe, I helped build this 2015 holiday site around an algorithm that generated a holiday greeting to each and every person on the planet. We also accounted for newcomers being added at an amazing rate. Overall, the website is a tranquil, animated experience. As new names appear, visitors can watch them fall, like snowflakes, onto a stylized world map. Users can also find their own name and see it as part of the world collective. Check out this short video describing the project! + img: onecard + used: + - thing: HTML + - thing: SCSS + - thing: JavaScript + - thing: jQuery + +- title: JetBlue HumanKinda + demo: http://jetbluehumankinda.com + description: During my first co-op as a creative technologist at Mullen Lowe, I played a major role in the development of this Tumblr site to complement JetBlue's HumanKinda campaign and documentary. The site houses the video documentary at the top, the many graphics created by Mullen for the campaign, and an interactive quiz to determine how "HumanKinda" you are. This project was featured on AdWeek, Fast Company, and Digiday! + img: humankinda + used: + - thing: HTML + - thing: CSS + - thing: JavaScript + - thing: jQuery diff --git a/_data/services.yml b/_data/services.yml new file mode 100644 index 0000000..9b241c7 --- /dev/null +++ b/_data/services.yml @@ -0,0 +1,19 @@ +- row: row1 + services: + - heading: Web Development + sprite: webdev + text: I love using HTML, CSS, and JavaScript with pre-processors and build tools such as Sass and Grunt to produce pixel-perfect websites and apps with semantic, modular front-end code and dry, efficient back-end code for the web. + + - heading: Responsive UI Design + sprite: ui + text: A user interface is like a joke. If you have to explain it, it's not that good. I strive to develop and implement responsive and aesthetically pleasing interfaces for websites and apps that adapt to any type of device, platform, or browser. + +- row: row2 + services: + - heading: Experience Design + sprite: xd + text: There have been far too many times where I've been trying to accomplish a simple task on a website, and ended up wanting to throw my computer out the window in frustration. Needless to say, user experience is an aspect of software I am always focused on perfecting. + + - heading: Inclusivity in Tech + sprite: wit + text: Coding and designing aside, I am a strong advocate for diversifying the tech industry, especially for women. I currently lead Northeastern Women in Tech, and was a 2016 Grace Hopper Conference Scholar. diff --git a/_data/skills.yml b/_data/skills.yml new file mode 100644 index 0000000..5f2266e --- /dev/null +++ b/_data/skills.yml @@ -0,0 +1,31 @@ +development: + - item: JavaScript + - item: HTML5 + - item: CSS3 + - item: Sass + - item: NodeJS + - item: Handlebars + - item: Backbone + - item: MongoDB + - item: Python + +design: + - item: adobe-photoshop + - item: adobe-indesign + - item: adobe-illustrator + - item: invision + - item: zeplin + +tools: + - item: Git, Github + - item: Command Line + - item: Chrome DevTools + - item: Grunt/Gulp + - item: Postman + +knowledge: + - item: CSS Detangling + - item: ES6 + - item: Usability + - item: Wireframing + - item: SEO diff --git a/_data/timeline.yml b/_data/timeline.yml new file mode 100644 index 0000000..262e50f --- /dev/null +++ b/_data/timeline.yml @@ -0,0 +1,41 @@ +- position: Northeastern University + company: NU College of Computer & Information Science + url: http://www.ccis.northeastern.edu/program/information-science-bs/ + description: Candidate for Bachelor of Science in Information Science with a concentration in Human Computer Interaction (HCI) and a minor in Interaction Design.
Expected graduation May 2018 + sprite: university + date: 2013 - Present + +- position: HCI Research Assistant + company: NU College of Computer & Information Science + url: http://www.ccis.northeastern.edu/ + description: CAssisted a computer science PhD student in the development of a software prototype built with HTML, CSS, JavaScript, and jQuery to facilitate better understanding of parent-child communication preferences in low-SES (Socio-Economic Status) families. Developed remotely to meet weekly deadlines and project checkpoints. + sprite: research + date: Mar - May 2015 + +- position: Creative Technologist Co-op + company: MullenLowe U.S. + url: http://us.mullenlowe.com/ + description: Developed and maintained code for in-house and client websites. Tested front-end code in various browsers and mobile devices to ensure cross-browser compatibility and responsiveness. Collaborated closely with other developers and digital producers to meet deadlines for clients including Lovesac, U.S. Cellular, JetBlue, and more. + sprite: industry + date: July - Dec 2015 + +- position: HCI Teaching Assistant + company: NU College of Computer & Information Science + url: http://www.ccis.northeastern.edu/ + description: Assisted professor with grading homework and project assignments. Held office hours to aid students in their understanding of core HCI concepts and reported to the professor the extent of their understanding. + sprite: academic + date: Jan - May 2016 + +- position: President + company: NU Women in Tech + url: http://nuwit.ccs.neu.edu + description: Lead weekly club meetings to foster a community of diverse women in CS. Manage a variety of academic and social activities throughout the semester, including tech talks, student panels, and workshops. Communicate regularly with e-board and administrative organizations. + sprite: university + date: May 2016 - Present + +- position: Software Engineer Co-op + company: Starry, Inc. + url: https://starry.com/ + description: Engineered and maintained major features of Starry's customer-facing web app using ES6, Handlebars, Backbone, Marionette, and CSS. Proposed and implemented scalable solutions to issues identified with cloud services and applications responsible for communicating with Starry Station. Worked closely with designers and other developers to ensure thoughtful and coherent user experiences across Starry’s mobile apps. + sprite: industry + date: July - Dec 2016 diff --git a/_includes/about.html b/_includes/about.html new file mode 100644 index 0000000..01b33ed --- /dev/null +++ b/_includes/about.html @@ -0,0 +1,17 @@ +
+
+
+

Hey, I'm Brittany.

+

I'm a design-minded, detail oriented software engineer passionate about combining beautiful code with beautiful design.

+ +
+ headshot +
+

I'm a fourth year student at Northeastern University in Boston studying computer science and interaction design. I have experience developing and designing products for the web, from simple landing pages to multi-tier web applications. I strive to create software that not only functions efficiently under the hood, but also provides intuitive, pixel-perfect user experiences.

+

I love finding new and better ways to create seamless user experiences with clean, efficient, and scalable code. I consider work an ongoing education, and I'm always looking for opportunities to work with those who are willing to share their knowledge as much as I want to learn. At the end of the day, my primary goal is to create something beautiful with people that bring out the best in me.

+

When I'm not in front of a screen, I'm probably snowboarding, traveling, petting dogs, or learning a new song on my uke.

+
+
+
+
+
diff --git a/_includes/contact.html b/_includes/contact.html new file mode 100644 index 0000000..b790b43 --- /dev/null +++ b/_includes/contact.html @@ -0,0 +1,38 @@ +
+
+
+
+
+

Get In Touch

+ +

Have a sweet project in mind or just want to say hi? Feel free to send me a message!

+
+
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+ +
+
+
+
+
diff --git a/_includes/experience.html b/_includes/experience.html new file mode 100644 index 0000000..384edca --- /dev/null +++ b/_includes/experience.html @@ -0,0 +1,34 @@ +
+
+
+
+
+

Experience

+ + +

As a part of Northeastern's five year co-op program, I alternate semesters of academic study with semesters of full-time employment. I had the privilege of completing my first co-op at Mullen Lowe U.S. as a Creative Technologist, and I am currently working at Starry as a software engineer for my second co-op.

+
+
+
+ {% for item in site.data.timeline %} +
+
+

{{item.position}}

+

{{item.company}}

+

{{item.description}}

+
+
+
+
+ {{item.date}} +
+ {% endfor %} +
+ +
+
+
+
diff --git a/_includes/footer.html b/_includes/footer.html new file mode 100644 index 0000000..4800e6f --- /dev/null +++ b/_includes/footer.html @@ -0,0 +1,12 @@ + diff --git a/_includes/head.html b/_includes/head.html new file mode 100644 index 0000000..5c0e7f0 --- /dev/null +++ b/_includes/head.html @@ -0,0 +1,37 @@ + + + + +{{ site.title }} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/_includes/intro.html b/_includes/intro.html new file mode 100644 index 0000000..435450c --- /dev/null +++ b/_includes/intro.html @@ -0,0 +1,30 @@ +
+
+
+
+
+

Brittany Chiang

+
+

+ Front-End Software Engineer +

+
+
+
+ +
+
+
+
diff --git a/_includes/nav.html b/_includes/nav.html new file mode 100644 index 0000000..9f57c38 --- /dev/null +++ b/_includes/nav.html @@ -0,0 +1,29 @@ + + +
+ + + +
+ +
+ + +
diff --git a/_includes/portfolio.html b/_includes/portfolio.html new file mode 100644 index 0000000..d9c30fd --- /dev/null +++ b/_includes/portfolio.html @@ -0,0 +1,44 @@ +
+
+
+

Some of My Work

+ +
+ {% for project in site.data.portfolio %} +
+
+ {% if project.title == "Screentime 2.0" %} + + + + + {% else %} + + + + {% endif %} +
+
+

{{project.title}}

+
+ Demo + {% if project.code %} + Code + {% endif %} +
+
+

{{project.description}}

+
+
    + {% for item in project.used %} +
  • {{item.thing}}
    • + {% endfor %} +
+
+
+ + {% endfor %} +
+
+
+
diff --git a/_includes/resume_btn.html b/_includes/resume_btn.html new file mode 100644 index 0000000..70f832d --- /dev/null +++ b/_includes/resume_btn.html @@ -0,0 +1,4 @@ + + View my full résumé + download + diff --git a/_includes/scripts.html b/_includes/scripts.html new file mode 100644 index 0000000..19d0d65 --- /dev/null +++ b/_includes/scripts.html @@ -0,0 +1,9 @@ +{% if page.layout == "not_found" %} + + + +{% else %} + + + +{% endif %} diff --git a/_includes/services.html b/_includes/services.html new file mode 100644 index 0000000..5c8f7f3 --- /dev/null +++ b/_includes/services.html @@ -0,0 +1,25 @@ +
+
+
+
+

What I Do

+ +
+ {% for row in site.data.services %} +
+ {% for service in row.services %} +
+
+

{{service.heading}}

+

{{service.text}}

+
+ {% endfor %} +
+ {% endfor %} +
+
+
+
diff --git a/_includes/skills.html b/_includes/skills.html new file mode 100644 index 0000000..1d1299f --- /dev/null +++ b/_includes/skills.html @@ -0,0 +1,55 @@ +
+
+
+

Skills

+ +
+
+

+ + Development +

+
    + {% for dev in site.data.skills.development %} +
  • {{dev.item}}
    • + {% endfor %} +
+
+
+

+ + Design +

+
    + {% for design in site.data.skills.design %} +
    • + {% endfor %} +
+
+
+
+

+ + Tools +

+
    + {% for tool in site.data.skills.tools %} +
  • {{tool.item}}
    • + {% endfor %} +
+
+
+

+ + Knowledge

+
    + {% for thing in site.data.skills.knowledge %} +
  • {{thing.item}}
    • + {% endfor %} +
+
+
+
+
+
+
diff --git a/_layouts/default.html b/_layouts/default.html new file mode 100644 index 0000000..6772e12 --- /dev/null +++ b/_layouts/default.html @@ -0,0 +1,13 @@ + + + + {% include head.html %} + + + {% include nav.html %} +
+ {{ content }} +
+ {% include scripts.html %} + + diff --git a/_layouts/not_found.html b/_layouts/not_found.html new file mode 100644 index 0000000..229ad02 --- /dev/null +++ b/_layouts/not_found.html @@ -0,0 +1,10 @@ + + + + {% include head.html %} + + + {{ content }} + {% include scripts.html %} + + diff --git a/_layouts/post.html b/_layouts/post.html new file mode 100644 index 0000000..04e3586 --- /dev/null +++ b/_layouts/post.html @@ -0,0 +1,9 @@ +--- +layout: default +--- +

{{ page.title }}

+

{{ page.date | date_to_string }}

+ +
+{{ content }} +
diff --git a/_posts/2014-04-20-welcome-to-jekyll.markdown b/_posts/2014-04-20-welcome-to-jekyll.markdown new file mode 100644 index 0000000..63cebe6 --- /dev/null +++ b/_posts/2014-04-20-welcome-to-jekyll.markdown @@ -0,0 +1,24 @@ +--- +layout: post +title: "Welcome to Jekyll!" +date: 2014-04-20 09:11:03 +categories: jekyll update +--- + +You'll find this post in your `_posts` directory - edit this post and re-build (or run with the `-w` switch) to see your changes! +To add new posts, simply add a file in the `_posts` directory that follows the convention: YYYY-MM-DD-name-of-post.ext. + +Jekyll also offers powerful support for code snippets: + +{% highlight ruby %} +def print_hi(name) + puts "Hi, #{name}" +end +print_hi('Tom') +#=> prints 'Hi, Tom' to STDOUT. +{% endhighlight %} + +Check out the [Jekyll docs][jekyll] for more info on how to get the most out of Jekyll. File all bugs/feature requests at [Jekyll's GitHub repo][jekyll-gh]. + +[jekyll-gh]: https://github.com/mojombo/jekyll +[jekyll]: http://jekyllrb.com diff --git a/_scss/.DS_Store b/_scss/.DS_Store new file mode 100644 index 0000000..c09985c Binary files /dev/null and b/_scss/.DS_Store differ diff --git a/_scss/bourbon/_bourbon-deprecated-upcoming.scss b/_scss/bourbon/_bourbon-deprecated-upcoming.scss new file mode 100644 index 0000000..e6d1b8c --- /dev/null +++ b/_scss/bourbon/_bourbon-deprecated-upcoming.scss @@ -0,0 +1,411 @@ +// The following features have been deprecated and will be removed in the next MAJOR version release + +@mixin inline-block { + display: inline-block; + + @warn "The inline-block mixin is deprecated and will be removed in the next major version release"; +} + +@mixin button ($style: simple, $base-color: #4294f0, $text-size: inherit, $padding: 7px 18px) { + + @if type-of($style) == string and type-of($base-color) == color { + @include buttonstyle($style, $base-color, $text-size, $padding); + } + + @if type-of($style) == string and type-of($base-color) == number { + $padding: $text-size; + $text-size: $base-color; + $base-color: #4294f0; + + @if $padding == inherit { + $padding: 7px 18px; + } + + @include buttonstyle($style, $base-color, $text-size, $padding); + } + + @if type-of($style) == color and type-of($base-color) == color { + $base-color: $style; + $style: simple; + @include buttonstyle($style, $base-color, $text-size, $padding); + } + + @if type-of($style) == color and type-of($base-color) == number { + $padding: $text-size; + $text-size: $base-color; + $base-color: $style; + $style: simple; + + @if $padding == inherit { + $padding: 7px 18px; + } + + @include buttonstyle($style, $base-color, $text-size, $padding); + } + + @if type-of($style) == number { + $padding: $base-color; + $text-size: $style; + $base-color: #4294f0; + $style: simple; + + @if $padding == #4294f0 { + $padding: 7px 18px; + } + + @include buttonstyle($style, $base-color, $text-size, $padding); + } + + &:disabled { + cursor: not-allowed; + opacity: 0.5; + } + + @warn "The button mixin is deprecated and will be removed in the next major version release"; +} + +// Selector Style Button +@mixin buttonstyle($type, $b-color, $t-size, $pad) { + // Grayscale button + @if $type == simple and $b-color == grayscale($b-color) { + @include simple($b-color, true, $t-size, $pad); + } + + @if $type == shiny and $b-color == grayscale($b-color) { + @include shiny($b-color, true, $t-size, $pad); + } + + @if $type == pill and $b-color == grayscale($b-color) { + @include pill($b-color, true, $t-size, $pad); + } + + @if $type == flat and $b-color == grayscale($b-color) { + @include flat($b-color, true, $t-size, $pad); + } + + // Colored button + @if $type == simple { + @include simple($b-color, false, $t-size, $pad); + } + + @else if $type == shiny { + @include shiny($b-color, false, $t-size, $pad); + } + + @else if $type == pill { + @include pill($b-color, false, $t-size, $pad); + } + + @else if $type == flat { + @include flat($b-color, false, $t-size, $pad); + } +} + +// Simple Button +@mixin simple($base-color, $grayscale: false, $textsize: inherit, $padding: 7px 18px) { + $color: hsl(0, 0, 100%); + $border: adjust-color($base-color, $saturation: 9%, $lightness: -14%); + $inset-shadow: adjust-color($base-color, $saturation: -8%, $lightness: 15%); + $stop-gradient: adjust-color($base-color, $saturation: 9%, $lightness: -11%); + $text-shadow: adjust-color($base-color, $saturation: 15%, $lightness: -18%); + + @if is-light($base-color) { + $color: hsl(0, 0, 20%); + $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%); + } + + @if $grayscale == true { + $border: grayscale($border); + $inset-shadow: grayscale($inset-shadow); + $stop-gradient: grayscale($stop-gradient); + $text-shadow: grayscale($text-shadow); + } + + border: 1px solid $border; + border-radius: 3px; + box-shadow: inset 0 1px 0 0 $inset-shadow; + color: $color; + display: inline-block; + font-size: $textsize; + font-weight: bold; + @include linear-gradient ($base-color, $stop-gradient); + padding: $padding; + text-decoration: none; + text-shadow: 0 1px 0 $text-shadow; + background-clip: padding-box; + + &:hover:not(:disabled) { + $base-color-hover: adjust-color($base-color, $saturation: -4%, $lightness: -5%); + $inset-shadow-hover: adjust-color($base-color, $saturation: -7%, $lightness: 5%); + $stop-gradient-hover: adjust-color($base-color, $saturation: 8%, $lightness: -14%); + + @if $grayscale == true { + $base-color-hover: grayscale($base-color-hover); + $inset-shadow-hover: grayscale($inset-shadow-hover); + $stop-gradient-hover: grayscale($stop-gradient-hover); + } + + @include linear-gradient ($base-color-hover, $stop-gradient-hover); + + box-shadow: inset 0 1px 0 0 $inset-shadow-hover; + cursor: pointer; + } + + &:active:not(:disabled), + &:focus:not(:disabled) { + $border-active: adjust-color($base-color, $saturation: 9%, $lightness: -14%); + $inset-shadow-active: adjust-color($base-color, $saturation: 7%, $lightness: -17%); + + @if $grayscale == true { + $border-active: grayscale($border-active); + $inset-shadow-active: grayscale($inset-shadow-active); + } + + border: 1px solid $border-active; + box-shadow: inset 0 0 8px 4px $inset-shadow-active, inset 0 0 8px 4px $inset-shadow-active; + } +} + +// Shiny Button +@mixin shiny($base-color, $grayscale: false, $textsize: inherit, $padding: 7px 18px) { + $color: hsl(0, 0, 100%); + $border: adjust-color($base-color, $red: -117, $green: -111, $blue: -81); + $border-bottom: adjust-color($base-color, $red: -126, $green: -127, $blue: -122); + $fourth-stop: adjust-color($base-color, $red: -79, $green: -70, $blue: -46); + $inset-shadow: adjust-color($base-color, $red: 37, $green: 29, $blue: 12); + $second-stop: adjust-color($base-color, $red: -56, $green: -50, $blue: -33); + $text-shadow: adjust-color($base-color, $red: -140, $green: -141, $blue: -114); + $third-stop: adjust-color($base-color, $red: -86, $green: -75, $blue: -48); + + @if is-light($base-color) { + $color: hsl(0, 0, 20%); + $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%); + } + + @if $grayscale == true { + $border: grayscale($border); + $border-bottom: grayscale($border-bottom); + $fourth-stop: grayscale($fourth-stop); + $inset-shadow: grayscale($inset-shadow); + $second-stop: grayscale($second-stop); + $text-shadow: grayscale($text-shadow); + $third-stop: grayscale($third-stop); + } + + @include linear-gradient(top, $base-color 0%, $second-stop 50%, $third-stop 50%, $fourth-stop 100%); + + border: 1px solid $border; + border-bottom: 1px solid $border-bottom; + border-radius: 5px; + box-shadow: inset 0 1px 0 0 $inset-shadow; + color: $color; + display: inline-block; + font-size: $textsize; + font-weight: bold; + padding: $padding; + text-align: center; + text-decoration: none; + text-shadow: 0 -1px 1px $text-shadow; + + &:hover:not(:disabled) { + $first-stop-hover: adjust-color($base-color, $red: -13, $green: -15, $blue: -18); + $second-stop-hover: adjust-color($base-color, $red: -66, $green: -62, $blue: -51); + $third-stop-hover: adjust-color($base-color, $red: -93, $green: -85, $blue: -66); + $fourth-stop-hover: adjust-color($base-color, $red: -86, $green: -80, $blue: -63); + + @if $grayscale == true { + $first-stop-hover: grayscale($first-stop-hover); + $second-stop-hover: grayscale($second-stop-hover); + $third-stop-hover: grayscale($third-stop-hover); + $fourth-stop-hover: grayscale($fourth-stop-hover); + } + + @include linear-gradient(top, $first-stop-hover 0%, + $second-stop-hover 50%, + $third-stop-hover 50%, + $fourth-stop-hover 100%); + cursor: pointer; + } + + &:active:not(:disabled), + &:focus:not(:disabled) { + $inset-shadow-active: adjust-color($base-color, $red: -111, $green: -116, $blue: -122); + + @if $grayscale == true { + $inset-shadow-active: grayscale($inset-shadow-active); + } + + box-shadow: inset 0 0 20px 0 $inset-shadow-active; + } +} + +// Pill Button +@mixin pill($base-color, $grayscale: false, $textsize: inherit, $padding: 7px 18px) { + $color: hsl(0, 0, 100%); + $border-bottom: adjust-color($base-color, $hue: 8, $saturation: -11%, $lightness: -26%); + $border-sides: adjust-color($base-color, $hue: 4, $saturation: -21%, $lightness: -21%); + $border-top: adjust-color($base-color, $hue: -1, $saturation: -30%, $lightness: -15%); + $inset-shadow: adjust-color($base-color, $hue: -1, $saturation: -1%, $lightness: 7%); + $stop-gradient: adjust-color($base-color, $hue: 8, $saturation: 14%, $lightness: -10%); + $text-shadow: adjust-color($base-color, $hue: 5, $saturation: -19%, $lightness: -15%); + + @if is-light($base-color) { + $color: hsl(0, 0, 20%); + $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%); + } + + @if $grayscale == true { + $border-bottom: grayscale($border-bottom); + $border-sides: grayscale($border-sides); + $border-top: grayscale($border-top); + $inset-shadow: grayscale($inset-shadow); + $stop-gradient: grayscale($stop-gradient); + $text-shadow: grayscale($text-shadow); + } + + border: 1px solid $border-top; + border-color: $border-top $border-sides $border-bottom; + border-radius: 16px; + box-shadow: inset 0 1px 0 0 $inset-shadow; + color: $color; + display: inline-block; + font-size: $textsize; + font-weight: normal; + line-height: 1; + @include linear-gradient ($base-color, $stop-gradient); + padding: $padding; + text-align: center; + text-decoration: none; + text-shadow: 0 -1px 1px $text-shadow; + background-clip: padding-box; + + &:hover:not(:disabled) { + $base-color-hover: adjust-color($base-color, $lightness: -4.5%); + $border-bottom: adjust-color($base-color, $hue: 8, $saturation: 13.5%, $lightness: -32%); + $border-sides: adjust-color($base-color, $hue: 4, $saturation: -2%, $lightness: -27%); + $border-top: adjust-color($base-color, $hue: -1, $saturation: -17%, $lightness: -21%); + $inset-shadow-hover: adjust-color($base-color, $saturation: -1%, $lightness: 3%); + $stop-gradient-hover: adjust-color($base-color, $hue: 8, $saturation: -4%, $lightness: -15.5%); + $text-shadow-hover: adjust-color($base-color, $hue: 5, $saturation: -5%, $lightness: -22%); + + @if $grayscale == true { + $base-color-hover: grayscale($base-color-hover); + $border-bottom: grayscale($border-bottom); + $border-sides: grayscale($border-sides); + $border-top: grayscale($border-top); + $inset-shadow-hover: grayscale($inset-shadow-hover); + $stop-gradient-hover: grayscale($stop-gradient-hover); + $text-shadow-hover: grayscale($text-shadow-hover); + } + + @include linear-gradient ($base-color-hover, $stop-gradient-hover); + + background-clip: padding-box; + border: 1px solid $border-top; + border-color: $border-top $border-sides $border-bottom; + box-shadow: inset 0 1px 0 0 $inset-shadow-hover; + cursor: pointer; + text-shadow: 0 -1px 1px $text-shadow-hover; + } + + &:active:not(:disabled), + &:focus:not(:disabled) { + $active-color: adjust-color($base-color, $hue: 4, $saturation: -12%, $lightness: -10%); + $border-active: adjust-color($base-color, $hue: 6, $saturation: -2.5%, $lightness: -30%); + $border-bottom-active: adjust-color($base-color, $hue: 11, $saturation: 6%, $lightness: -31%); + $inset-shadow-active: adjust-color($base-color, $hue: 9, $saturation: 2%, $lightness: -21.5%); + $text-shadow-active: adjust-color($base-color, $hue: 5, $saturation: -12%, $lightness: -21.5%); + + @if $grayscale == true { + $active-color: grayscale($active-color); + $border-active: grayscale($border-active); + $border-bottom-active: grayscale($border-bottom-active); + $inset-shadow-active: grayscale($inset-shadow-active); + $text-shadow-active: grayscale($text-shadow-active); + } + + background: $active-color; + border: 1px solid $border-active; + border-bottom: 1px solid $border-bottom-active; + box-shadow: inset 0 0 6px 3px $inset-shadow-active; + text-shadow: 0 -1px 1px $text-shadow-active; + } +} + +// Flat Button +@mixin flat($base-color, $grayscale: false, $textsize: inherit, $padding: 7px 18px) { + $color: hsl(0, 0, 100%); + + @if is-light($base-color) { + $color: hsl(0, 0, 20%); + } + + background-color: $base-color; + border-radius: 3px; + border: 0; + color: $color; + display: inline-block; + font-size: $textsize; + font-weight: bold; + padding: $padding; + text-decoration: none; + background-clip: padding-box; + + &:hover:not(:disabled){ + $base-color-hover: adjust-color($base-color, $saturation: 4%, $lightness: 5%); + + @if $grayscale == true { + $base-color-hover: grayscale($base-color-hover); + } + + background-color: $base-color-hover; + cursor: pointer; + } + + &:active:not(:disabled), + &:focus:not(:disabled) { + $base-color-active: adjust-color($base-color, $saturation: -4%, $lightness: -5%); + + @if $grayscale == true { + $base-color-active: grayscale($base-color-active); + } + + background-color: $base-color-active; + cursor: pointer; + } +} + +// Flexible grid +@function flex-grid($columns, $container-columns: $fg-max-columns) { + $width: $columns * $fg-column + ($columns - 1) * $fg-gutter; + $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter; + @return percentage($width / $container-width); + + @warn "The flex-grid function is deprecated and will be removed in the next major version release"; +} + +// Flexible gutter +@function flex-gutter($container-columns: $fg-max-columns, $gutter: $fg-gutter) { + $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter; + @return percentage($gutter / $container-width); + + @warn "The flex-gutter function is deprecated and will be removed in the next major version release"; +} + +@function grid-width($n) { + @return $n * $gw-column + ($n - 1) * $gw-gutter; + + @warn "The grid-width function is deprecated and will be removed in the next major version release"; +} + +@function golden-ratio($value, $increment) { + @return modular-scale($increment, $value, $ratio: $golden); + + @warn "The golden-ratio function is deprecated and will be removed in the next major version release. Please use the modular-scale function, instead."; +} + +@mixin box-sizing($box) { + @include prefixer(box-sizing, $box, webkit moz spec); + + @warn "The box-sizing mixin is deprecated and will be removed in the next major version release. This property can now be used un-prefixed."; +} diff --git a/_scss/bourbon/_bourbon.scss b/_scss/bourbon/_bourbon.scss new file mode 100644 index 0000000..635c680 --- /dev/null +++ b/_scss/bourbon/_bourbon.scss @@ -0,0 +1,87 @@ +// Bourbon 4.2.7 +// http://bourbon.io +// Copyright 2011-2015 thoughtbot, inc. +// MIT License + +@import "settings/prefixer"; +@import "settings/px-to-em"; +@import "settings/asset-pipeline"; + +@import "functions/assign-inputs"; +@import "functions/contains"; +@import "functions/contains-falsy"; +@import "functions/is-length"; +@import "functions/is-light"; +@import "functions/is-number"; +@import "functions/is-size"; +@import "functions/px-to-em"; +@import "functions/px-to-rem"; +@import "functions/shade"; +@import "functions/strip-units"; +@import "functions/tint"; +@import "functions/transition-property-name"; +@import "functions/unpack"; +@import "functions/modular-scale"; + +@import "helpers/convert-units"; +@import "helpers/directional-values"; +@import "helpers/font-source-declaration"; +@import "helpers/gradient-positions-parser"; +@import "helpers/linear-angle-parser"; +@import "helpers/linear-gradient-parser"; +@import "helpers/linear-positions-parser"; +@import "helpers/linear-side-corner-parser"; +@import "helpers/radial-arg-parser"; +@import "helpers/radial-positions-parser"; +@import "helpers/radial-gradient-parser"; +@import "helpers/render-gradients"; +@import "helpers/shape-size-stripper"; +@import "helpers/str-to-num"; + +@import "css3/animation"; +@import "css3/appearance"; +@import "css3/backface-visibility"; +@import "css3/background"; +@import "css3/background-image"; +@import "css3/border-image"; +@import "css3/calc"; +@import "css3/columns"; +@import "css3/filter"; +@import "css3/flex-box"; +@import "css3/font-face"; +@import "css3/font-feature-settings"; +@import "css3/hidpi-media-query"; +@import "css3/hyphens"; +@import "css3/image-rendering"; +@import "css3/keyframes"; +@import "css3/linear-gradient"; +@import "css3/perspective"; +@import "css3/placeholder"; +@import "css3/radial-gradient"; +@import "css3/selection"; +@import "css3/text-decoration"; +@import "css3/transform"; +@import "css3/transition"; +@import "css3/user-select"; + +@import "addons/border-color"; +@import "addons/border-radius"; +@import "addons/border-style"; +@import "addons/border-width"; +@import "addons/buttons"; +@import "addons/clearfix"; +@import "addons/ellipsis"; +@import "addons/font-stacks"; +@import "addons/hide-text"; +@import "addons/margin"; +@import "addons/padding"; +@import "addons/position"; +@import "addons/prefixer"; +@import "addons/retina-image"; +@import "addons/size"; +@import "addons/text-inputs"; +@import "addons/timing-functions"; +@import "addons/triangle"; +@import "addons/word-wrap"; + +@import "bourbon-deprecated-upcoming"; diff --git a/_scss/bourbon/addons/_border-color.scss b/_scss/bourbon/addons/_border-color.scss new file mode 100644 index 0000000..6f6ab36 --- /dev/null +++ b/_scss/bourbon/addons/_border-color.scss @@ -0,0 +1,26 @@ +@charset "UTF-8"; + +/// Provides a quick method for targeting `border-color` on specific sides of a box. Use a `null` value to “skip” a side. +/// +/// @param {Arglist} $vals +/// List of arguments +/// +/// @example scss - Usage +/// .element { +/// @include border-color(#a60b55 #76cd9c null #e8ae1a); +/// } +/// +/// @example css - CSS Output +/// .element { +/// border-left-color: #e8ae1a; +/// border-right-color: #76cd9c; +/// border-top-color: #a60b55; +/// } +/// +/// @require {mixin} directional-property +/// +/// @output `border-color` + +@mixin border-color($vals...) { + @include directional-property(border, color, $vals...); +} diff --git a/_scss/bourbon/addons/_border-radius.scss b/_scss/bourbon/addons/_border-radius.scss new file mode 100644 index 0000000..1f65863 --- /dev/null +++ b/_scss/bourbon/addons/_border-radius.scss @@ -0,0 +1,48 @@ +@charset "UTF-8"; + +/// Provides a quick method for targeting `border-radius` on both corners on the side of a box. +/// +/// @param {Number} $radii +/// List of arguments +/// +/// @example scss - Usage +/// .element-one { +/// @include border-top-radius(5px); +/// } +/// +/// .element-two { +/// @include border-left-radius(3px); +/// } +/// +/// @example css - CSS Output +/// .element-one { +/// border-top-left-radius: 5px; +/// border-top-right-radius: 5px; +/// } +/// +/// .element-two { +/// border-bottom-left-radius: 3px; +/// border-top-left-radius: 3px; +/// } +/// +/// @output `border-radius` + +@mixin border-top-radius($radii) { + border-top-left-radius: $radii; + border-top-right-radius: $radii; +} + +@mixin border-right-radius($radii) { + border-bottom-right-radius: $radii; + border-top-right-radius: $radii; +} + +@mixin border-bottom-radius($radii) { + border-bottom-left-radius: $radii; + border-bottom-right-radius: $radii; +} + +@mixin border-left-radius($radii) { + border-bottom-left-radius: $radii; + border-top-left-radius: $radii; +} diff --git a/_scss/bourbon/addons/_border-style.scss b/_scss/bourbon/addons/_border-style.scss new file mode 100644 index 0000000..d86ee79 --- /dev/null +++ b/_scss/bourbon/addons/_border-style.scss @@ -0,0 +1,25 @@ +@charset "UTF-8"; + +/// Provides a quick method for targeting `border-style` on specific sides of a box. Use a `null` value to “skip” a side. +/// +/// @param {Arglist} $vals +/// List of arguments +/// +/// @example scss - Usage +/// .element { +/// @include border-style(dashed null solid); +/// } +/// +/// @example css - CSS Output +/// .element { +/// border-bottom-style: solid; +/// border-top-style: dashed; +/// } +/// +/// @require {mixin} directional-property +/// +/// @output `border-style` + +@mixin border-style($vals...) { + @include directional-property(border, style, $vals...); +} diff --git a/_scss/bourbon/addons/_border-width.scss b/_scss/bourbon/addons/_border-width.scss new file mode 100644 index 0000000..0ea2d4b --- /dev/null +++ b/_scss/bourbon/addons/_border-width.scss @@ -0,0 +1,25 @@ +@charset "UTF-8"; + +/// Provides a quick method for targeting `border-width` on specific sides of a box. Use a `null` value to “skip” a side. +/// +/// @param {Arglist} $vals +/// List of arguments +/// +/// @example scss - Usage +/// .element { +/// @include border-width(1em null 20px); +/// } +/// +/// @example css - CSS Output +/// .element { +/// border-bottom-width: 20px; +/// border-top-width: 1em; +/// } +/// +/// @require {mixin} directional-property +/// +/// @output `border-width` + +@mixin border-width($vals...) { + @include directional-property(border, width, $vals...); +} diff --git a/_scss/bourbon/addons/_buttons.scss b/_scss/bourbon/addons/_buttons.scss new file mode 100644 index 0000000..debeabc --- /dev/null +++ b/_scss/bourbon/addons/_buttons.scss @@ -0,0 +1,64 @@ +@charset "UTF-8"; + +/// Generates variables for all buttons. Please note that you must use interpolation on the variable: `#{$all-buttons}`. +/// +/// @example scss - Usage +/// #{$all-buttons} { +/// background-color: #f00; +/// } +/// +/// #{$all-buttons-focus}, +/// #{$all-buttons-hover} { +/// background-color: #0f0; +/// } +/// +/// #{$all-buttons-active} { +/// background-color: #00f; +/// } +/// +/// @example css - CSS Output +/// button, +/// input[type="button"], +/// input[type="reset"], +/// input[type="submit"] { +/// background-color: #f00; +/// } +/// +/// button:focus, +/// input[type="button"]:focus, +/// input[type="reset"]:focus, +/// input[type="submit"]:focus, +/// button:hover, +/// input[type="button"]:hover, +/// input[type="reset"]:hover, +/// input[type="submit"]:hover { +/// background-color: #0f0; +/// } +/// +/// button:active, +/// input[type="button"]:active, +/// input[type="reset"]:active, +/// input[type="submit"]:active { +/// background-color: #00f; +/// } +/// +/// @require assign-inputs +/// +/// @type List +/// +/// @todo Remove double assigned variables (Lines 59–62) in v5.0.0 + +$buttons-list: 'button', + 'input[type="button"]', + 'input[type="reset"]', + 'input[type="submit"]'; + +$all-buttons: assign-inputs($buttons-list); +$all-buttons-active: assign-inputs($buttons-list, active); +$all-buttons-focus: assign-inputs($buttons-list, focus); +$all-buttons-hover: assign-inputs($buttons-list, hover); + +$all-button-inputs: $all-buttons; +$all-button-inputs-active: $all-buttons-active; +$all-button-inputs-focus: $all-buttons-focus; +$all-button-inputs-hover: $all-buttons-hover; diff --git a/_scss/bourbon/addons/_clearfix.scss b/_scss/bourbon/addons/_clearfix.scss new file mode 100644 index 0000000..11313d6 --- /dev/null +++ b/_scss/bourbon/addons/_clearfix.scss @@ -0,0 +1,25 @@ +@charset "UTF-8"; + +/// Provides an easy way to include a clearfix for containing floats. +/// +/// @link http://cssmojo.com/latest_new_clearfix_so_far/ +/// +/// @example scss - Usage +/// .element { +/// @include clearfix; +/// } +/// +/// @example css - CSS Output +/// .element::after { +/// clear: both; +/// content: ""; +/// display: table; +/// } + +@mixin clearfix { + &::after { + clear: both; + content: ""; + display: table; + } +} diff --git a/_scss/bourbon/addons/_ellipsis.scss b/_scss/bourbon/addons/_ellipsis.scss new file mode 100644 index 0000000..a367f65 --- /dev/null +++ b/_scss/bourbon/addons/_ellipsis.scss @@ -0,0 +1,30 @@ +@charset "UTF-8"; + +/// Truncates text and adds an ellipsis to represent overflow. +/// +/// @param {Number} $width [100%] +/// Max-width for the string to respect before being truncated +/// +/// @example scss - Usage +/// .element { +/// @include ellipsis; +/// } +/// +/// @example css - CSS Output +/// .element { +/// display: inline-block; +/// max-width: 100%; +/// overflow: hidden; +/// text-overflow: ellipsis; +/// white-space: nowrap; +/// word-wrap: normal; +/// } + +@mixin ellipsis($width: 100%) { + display: inline-block; + max-width: $width; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + word-wrap: normal; +} diff --git a/_scss/bourbon/addons/_font-stacks.scss b/_scss/bourbon/addons/_font-stacks.scss new file mode 100644 index 0000000..57128f4 --- /dev/null +++ b/_scss/bourbon/addons/_font-stacks.scss @@ -0,0 +1,31 @@ +@charset "UTF-8"; + +/// Georgia font stack. +/// +/// @type List + +$georgia: "Georgia", "Cambria", "Times New Roman", "Times", serif; + +/// Helvetica font stack. +/// +/// @type List + +$helvetica: "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif; + +/// Lucida Grande font stack. +/// +/// @type List + +$lucida-grande: "Lucida Grande", "Tahoma", "Verdana", "Arial", sans-serif; + +/// Monospace font stack. +/// +/// @type List + +$monospace: "Bitstream Vera Sans Mono", "Consolas", "Courier", monospace; + +/// Verdana font stack. +/// +/// @type List + +$verdana: "Verdana", "Geneva", sans-serif; diff --git a/_scss/bourbon/addons/_hide-text.scss b/_scss/bourbon/addons/_hide-text.scss new file mode 100644 index 0000000..4caf20e --- /dev/null +++ b/_scss/bourbon/addons/_hide-text.scss @@ -0,0 +1,27 @@ +/// Hides the text in an element, commonly used to show an image. Some elements will need block-level styles applied. +/// +/// @link http://zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement +/// +/// @example scss - Usage +/// .element { +/// @include hide-text; +/// } +/// +/// @example css - CSS Output +/// .element { +/// overflow: hidden; +/// text-indent: 101%; +/// white-space: nowrap; +/// } +/// +/// @todo Remove height argument in v5.0.0 + +@mixin hide-text($height: null) { + overflow: hidden; + text-indent: 101%; + white-space: nowrap; + + @if $height { + @warn "The `hide-text` mixin has changed and no longer requires a height. The height argument will no longer be accepted in v5.0.0"; + } +} diff --git a/_scss/bourbon/addons/_margin.scss b/_scss/bourbon/addons/_margin.scss new file mode 100644 index 0000000..674f4e5 --- /dev/null +++ b/_scss/bourbon/addons/_margin.scss @@ -0,0 +1,26 @@ +@charset "UTF-8"; + +/// Provides a quick method for targeting `margin` on specific sides of a box. Use a `null` value to “skip” a side. +/// +/// @param {Arglist} $vals +/// List of arguments +/// +/// @example scss - Usage +/// .element { +/// @include margin(null 10px 3em 20vh); +/// } +/// +/// @example css - CSS Output +/// .element { +/// margin-bottom: 3em; +/// margin-left: 20vh; +/// margin-right: 10px; +/// } +/// +/// @require {mixin} directional-property +/// +/// @output `margin` + +@mixin margin($vals...) { + @include directional-property(margin, false, $vals...); +} diff --git a/_scss/bourbon/addons/_padding.scss b/_scss/bourbon/addons/_padding.scss new file mode 100644 index 0000000..40a5f00 --- /dev/null +++ b/_scss/bourbon/addons/_padding.scss @@ -0,0 +1,26 @@ +@charset "UTF-8"; + +/// Provides a quick method for targeting `padding` on specific sides of a box. Use a `null` value to “skip” a side. +/// +/// @param {Arglist} $vals +/// List of arguments +/// +/// @example scss - Usage +/// .element { +/// @include padding(12vh null 10px 5%); +/// } +/// +/// @example css - CSS Output +/// .element { +/// padding-bottom: 10px; +/// padding-left: 5%; +/// padding-top: 12vh; +/// } +/// +/// @require {mixin} directional-property +/// +/// @output `padding` + +@mixin padding($vals...) { + @include directional-property(padding, false, $vals...); +} diff --git a/_scss/bourbon/addons/_position.scss b/_scss/bourbon/addons/_position.scss new file mode 100644 index 0000000..e460f3f --- /dev/null +++ b/_scss/bourbon/addons/_position.scss @@ -0,0 +1,48 @@ +@charset "UTF-8"; + +/// Provides a quick method for setting an element’s position. Use a `null` value to “skip” a side. +/// +/// @param {Position} $position [relative] +/// A CSS position value +/// +/// @param {Arglist} $coordinates [null null null null] +/// List of values that correspond to the 4-value syntax for the edges of a box +/// +/// @example scss - Usage +/// .element { +/// @include position(absolute, 0 null null 10em); +/// } +/// +/// @example css - CSS Output +/// .element { +/// left: 10em; +/// position: absolute; +/// top: 0; +/// } +/// +/// @require {function} is-length +/// @require {function} unpack + +@mixin position($position: relative, $coordinates: null null null null) { + @if type-of($position) == list { + $coordinates: $position; + $position: relative; + } + + $coordinates: unpack($coordinates); + + $offsets: ( + top: nth($coordinates, 1), + right: nth($coordinates, 2), + bottom: nth($coordinates, 3), + left: nth($coordinates, 4) + ); + + position: $position; + + @each $offset, $value in $offsets { + @if is-length($value) { + #{$offset}: $value; + } + } +} diff --git a/_scss/bourbon/addons/_prefixer.scss b/_scss/bourbon/addons/_prefixer.scss new file mode 100644 index 0000000..2b6f731 --- /dev/null +++ b/_scss/bourbon/addons/_prefixer.scss @@ -0,0 +1,66 @@ +@charset "UTF-8"; + +/// A mixin for generating vendor prefixes on non-standardized properties. +/// +/// @param {String} $property +/// Property to prefix +/// +/// @param {*} $value +/// Value to use +/// +/// @param {List} $prefixes +/// Prefixes to define +/// +/// @example scss - Usage +/// .element { +/// @include prefixer(border-radius, 10px, webkit ms spec); +/// } +/// +/// @example css - CSS Output +/// .element { +/// -webkit-border-radius: 10px; +/// -moz-border-radius: 10px; +/// border-radius: 10px; +/// } +/// +/// @require {variable} $prefix-for-webkit +/// @require {variable} $prefix-for-mozilla +/// @require {variable} $prefix-for-microsoft +/// @require {variable} $prefix-for-opera +/// @require {variable} $prefix-for-spec + +@mixin prefixer($property, $value, $prefixes) { + @each $prefix in $prefixes { + @if $prefix == webkit { + @if $prefix-for-webkit { + -webkit-#{$property}: $value; + } + } @else if $prefix == moz { + @if $prefix-for-mozilla { + -moz-#{$property}: $value; + } + } @else if $prefix == ms { + @if $prefix-for-microsoft { + -ms-#{$property}: $value; + } + } @else if $prefix == o { + @if $prefix-for-opera { + -o-#{$property}: $value; + } + } @else if $prefix == spec { + @if $prefix-for-spec { + #{$property}: $value; + } + } @else { + @warn "Unrecognized prefix: #{$prefix}"; + } + } +} + +@mixin disable-prefix-for-all() { + $prefix-for-webkit: false !global; + $prefix-for-mozilla: false !global; + $prefix-for-microsoft: false !global; + $prefix-for-opera: false !global; + $prefix-for-spec: false !global; +} diff --git a/_scss/bourbon/addons/_retina-image.scss b/_scss/bourbon/addons/_retina-image.scss new file mode 100644 index 0000000..7febbd7 --- /dev/null +++ b/_scss/bourbon/addons/_retina-image.scss @@ -0,0 +1,25 @@ +@mixin retina-image($filename, $background-size, $extension: png, $retina-filename: null, $retina-suffix: _2x, $asset-pipeline: $asset-pipeline) { + @if $asset-pipeline { + background-image: image-url("#{$filename}.#{$extension}"); + } @else { + background-image: url("#{$filename}.#{$extension}"); + } + + @include hidpi { + @if $asset-pipeline { + @if $retina-filename { + background-image: image-url("#{$retina-filename}.#{$extension}"); + } @else { + background-image: image-url("#{$filename}#{$retina-suffix}.#{$extension}"); + } + } @else { + @if $retina-filename { + background-image: url("#{$retina-filename}.#{$extension}"); + } @else { + background-image: url("#{$filename}#{$retina-suffix}.#{$extension}"); + } + } + + background-size: $background-size; + } +} diff --git a/_scss/bourbon/addons/_size.scss b/_scss/bourbon/addons/_size.scss new file mode 100644 index 0000000..a2992a3 --- /dev/null +++ b/_scss/bourbon/addons/_size.scss @@ -0,0 +1,51 @@ +@charset "UTF-8"; + +/// Sets the `width` and `height` of the element. +/// +/// @param {List} $size +/// A list of at most 2 size values. +/// +/// If there is only a single value in `$size` it is used for both width and height. All units are supported. +/// +/// @example scss - Usage +/// .first-element { +/// @include size(2em); +/// } +/// +/// .second-element { +/// @include size(auto 10em); +/// } +/// +/// @example css - CSS Output +/// .first-element { +/// width: 2em; +/// height: 2em; +/// } +/// +/// .second-element { +/// width: auto; +/// height: 10em; +/// } +/// +/// @todo Refactor in 5.0.0 to use a comma-separated argument + +@mixin size($value) { + $width: nth($value, 1); + $height: $width; + + @if length($value) > 1 { + $height: nth($value, 2); + } + + @if is-size($height) { + height: $height; + } @else { + @warn "`#{$height}` is not a valid length for the `$height` parameter in the `size` mixin."; + } + + @if is-size($width) { + width: $width; + } @else { + @warn "`#{$width}` is not a valid length for the `$width` parameter in the `size` mixin."; + } +} diff --git a/_scss/bourbon/addons/_text-inputs.scss b/_scss/bourbon/addons/_text-inputs.scss new file mode 100644 index 0000000..1eb7a54 --- /dev/null +++ b/_scss/bourbon/addons/_text-inputs.scss @@ -0,0 +1,113 @@ +@charset "UTF-8"; + +/// Generates variables for all text-based inputs. Please note that you must use interpolation on the variable: `#{$all-text-inputs}`. +/// +/// @example scss - Usage +/// #{$all-text-inputs} { +/// border: 1px solid #f00; +/// } +/// +/// #{$all-text-inputs-focus}, +/// #{$all-text-inputs-hover} { +/// border: 1px solid #0f0; +/// } +/// +/// #{$all-text-inputs-active} { +/// border: 1px solid #00f; +/// } +/// +/// @example css - CSS Output +/// input[type="color"], +/// input[type="date"], +/// input[type="datetime"], +/// input[type="datetime-local"], +/// input[type="email"], +/// input[type="month"], +/// input[type="number"], +/// input[type="password"], +/// input[type="search"], +/// input[type="tel"], +/// input[type="text"], +/// input[type="time"], +/// input[type="url"], +/// input[type="week"], +/// textarea { +/// border: 1px solid #f00; +/// } +/// +/// input[type="color"]:focus, +/// input[type="date"]:focus, +/// input[type="datetime"]:focus, +/// input[type="datetime-local"]:focus, +/// input[type="email"]:focus, +/// input[type="month"]:focus, +/// input[type="number"]:focus, +/// input[type="password"]:focus, +/// input[type="search"]:focus, +/// input[type="tel"]:focus, +/// input[type="text"]:focus, +/// input[type="time"]:focus, +/// input[type="url"]:focus, +/// input[type="week"]:focus, +/// textarea:focus, +/// input[type="color"]:hover, +/// input[type="date"]:hover, +/// input[type="datetime"]:hover, +/// input[type="datetime-local"]:hover, +/// input[type="email"]:hover, +/// input[type="month"]:hover, +/// input[type="number"]:hover, +/// input[type="password"]:hover, +/// input[type="search"]:hover, +/// input[type="tel"]:hover, +/// input[type="text"]:hover, +/// input[type="time"]:hover, +/// input[type="url"]:hover, +/// input[type="week"]:hover, +/// textarea:hover { +/// border: 1px solid #0f0; +/// } +/// +/// input[type="color"]:active, +/// input[type="date"]:active, +/// input[type="datetime"]:active, +/// input[type="datetime-local"]:active, +/// input[type="email"]:active, +/// input[type="month"]:active, +/// input[type="number"]:active, +/// input[type="password"]:active, +/// input[type="search"]:active, +/// input[type="tel"]:active, +/// input[type="text"]:active, +/// input[type="time"]:active, +/// input[type="url"]:active, +/// input[type="week"]:active, +/// textarea:active { +/// border: 1px solid #00f; +/// } +/// +/// @require assign-inputs +/// +/// @type List + +$text-inputs-list: 'input[type="color"]', + 'input[type="date"]', + 'input[type="datetime"]', + 'input[type="datetime-local"]', + 'input[type="email"]', + 'input[type="month"]', + 'input[type="number"]', + 'input[type="password"]', + 'input[type="search"]', + 'input[type="tel"]', + 'input[type="text"]', + 'input[type="time"]', + 'input[type="url"]', + 'input[type="week"]', + 'input:not([type])', + 'textarea'; + +$all-text-inputs: assign-inputs($text-inputs-list); +$all-text-inputs-active: assign-inputs($text-inputs-list, active); +$all-text-inputs-focus: assign-inputs($text-inputs-list, focus); +$all-text-inputs-hover: assign-inputs($text-inputs-list, hover); diff --git a/_scss/bourbon/addons/_timing-functions.scss b/_scss/bourbon/addons/_timing-functions.scss new file mode 100644 index 0000000..20e5f1d --- /dev/null +++ b/_scss/bourbon/addons/_timing-functions.scss @@ -0,0 +1,34 @@ +@charset "UTF-8"; + +/// CSS cubic-bezier timing functions. Timing functions courtesy of jquery.easie (github.com/jaukia/easie) +/// +/// Timing functions are the same as demoed here: http://jqueryui.com/resources/demos/effect/easing.html +/// +/// @type cubic-bezier + +$ease-in-quad: cubic-bezier(0.550, 0.085, 0.680, 0.530); +$ease-in-cubic: cubic-bezier(0.550, 0.055, 0.675, 0.190); +$ease-in-quart: cubic-bezier(0.895, 0.030, 0.685, 0.220); +$ease-in-quint: cubic-bezier(0.755, 0.050, 0.855, 0.060); +$ease-in-sine: cubic-bezier(0.470, 0.000, 0.745, 0.715); +$ease-in-expo: cubic-bezier(0.950, 0.050, 0.795, 0.035); +$ease-in-circ: cubic-bezier(0.600, 0.040, 0.980, 0.335); +$ease-in-back: cubic-bezier(0.600, -0.280, 0.735, 0.045); + +$ease-out-quad: cubic-bezier(0.250, 0.460, 0.450, 0.940); +$ease-out-cubic: cubic-bezier(0.215, 0.610, 0.355, 1.000); +$ease-out-quart: cubic-bezier(0.165, 0.840, 0.440, 1.000); +$ease-out-quint: cubic-bezier(0.230, 1.000, 0.320, 1.000); +$ease-out-sine: cubic-bezier(0.390, 0.575, 0.565, 1.000); +$ease-out-expo: cubic-bezier(0.190, 1.000, 0.220, 1.000); +$ease-out-circ: cubic-bezier(0.075, 0.820, 0.165, 1.000); +$ease-out-back: cubic-bezier(0.175, 0.885, 0.320, 1.275); + +$ease-in-out-quad: cubic-bezier(0.455, 0.030, 0.515, 0.955); +$ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1.000); +$ease-in-out-quart: cubic-bezier(0.770, 0.000, 0.175, 1.000); +$ease-in-out-quint: cubic-bezier(0.860, 0.000, 0.070, 1.000); +$ease-in-out-sine: cubic-bezier(0.445, 0.050, 0.550, 0.950); +$ease-in-out-expo: cubic-bezier(1.000, 0.000, 0.000, 1.000); +$ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.150, 0.860); +$ease-in-out-back: cubic-bezier(0.680, -0.550, 0.265, 1.550); diff --git a/_scss/bourbon/addons/_triangle.scss b/_scss/bourbon/addons/_triangle.scss new file mode 100644 index 0000000..8a1ed9c --- /dev/null +++ b/_scss/bourbon/addons/_triangle.scss @@ -0,0 +1,63 @@ +@mixin triangle($size, $color, $direction) { + $width: nth($size, 1); + $height: nth($size, length($size)); + $foreground-color: nth($color, 1); + $background-color: if(length($color) == 2, nth($color, 2), transparent); + height: 0; + width: 0; + + @if ($direction == up) or ($direction == down) or ($direction == right) or ($direction == left) { + $width: $width / 2; + $height: if(length($size) > 1, $height, $height/2); + + @if $direction == up { + border-bottom: $height solid $foreground-color; + border-left: $width solid $background-color; + border-right: $width solid $background-color; + } @else if $direction == right { + border-bottom: $width solid $background-color; + border-left: $height solid $foreground-color; + border-top: $width solid $background-color; + } @else if $direction == down { + border-left: $width solid $background-color; + border-right: $width solid $background-color; + border-top: $height solid $foreground-color; + } @else if $direction == left { + border-bottom: $width solid $background-color; + border-right: $height solid $foreground-color; + border-top: $width solid $background-color; + } + } @else if ($direction == up-right) or ($direction == up-left) { + border-top: $height solid $foreground-color; + + @if $direction == up-right { + border-left: $width solid $background-color; + } @else if $direction == up-left { + border-right: $width solid $background-color; + } + } @else if ($direction == down-right) or ($direction == down-left) { + border-bottom: $height solid $foreground-color; + + @if $direction == down-right { + border-left: $width solid $background-color; + } @else if $direction == down-left { + border-right: $width solid $background-color; + } + } @else if ($direction == inset-up) { + border-color: $background-color $background-color $foreground-color; + border-style: solid; + border-width: $height $width; + } @else if ($direction == inset-down) { + border-color: $foreground-color $background-color $background-color; + border-style: solid; + border-width: $height $width; + } @else if ($direction == inset-right) { + border-color: $background-color $background-color $background-color $foreground-color; + border-style: solid; + border-width: $width $height; + } @else if ($direction == inset-left) { + border-color: $background-color $foreground-color $background-color $background-color; + border-style: solid; + border-width: $width $height; + } +} diff --git a/_scss/bourbon/addons/_word-wrap.scss b/_scss/bourbon/addons/_word-wrap.scss new file mode 100644 index 0000000..64856a9 --- /dev/null +++ b/_scss/bourbon/addons/_word-wrap.scss @@ -0,0 +1,29 @@ +@charset "UTF-8"; + +/// Provides an easy way to change the `word-wrap` property. +/// +/// @param {String} $wrap [break-word] +/// Value for the `word-break` property. +/// +/// @example scss - Usage +/// .wrapper { +/// @include word-wrap(break-word); +/// } +/// +/// @example css - CSS Output +/// .wrapper { +/// overflow-wrap: break-word; +/// word-break: break-all; +/// word-wrap: break-word; +/// } + +@mixin word-wrap($wrap: break-word) { + overflow-wrap: $wrap; + word-wrap: $wrap; + + @if $wrap == break-word { + word-break: break-all; + } @else { + word-break: $wrap; + } +} diff --git a/_scss/bourbon/css3/_animation.scss b/_scss/bourbon/css3/_animation.scss new file mode 100644 index 0000000..aac675f --- /dev/null +++ b/_scss/bourbon/css3/_animation.scss @@ -0,0 +1,43 @@ +// http://www.w3.org/TR/css3-animations/#the-animation-name-property- +// Each of these mixins support comma separated lists of values, which allows different transitions for individual properties to be described in a single style rule. Each value in the list corresponds to the value at that same position in the other properties. + +@mixin animation($animations...) { + @include prefixer(animation, $animations, webkit moz spec); +} + +@mixin animation-name($names...) { + @include prefixer(animation-name, $names, webkit moz spec); +} + +@mixin animation-duration($times...) { + @include prefixer(animation-duration, $times, webkit moz spec); +} + +@mixin animation-timing-function($motions...) { + // ease | linear | ease-in | ease-out | ease-in-out + @include prefixer(animation-timing-function, $motions, webkit moz spec); +} + +@mixin animation-iteration-count($values...) { + // infinite | + @include prefixer(animation-iteration-count, $values, webkit moz spec); +} + +@mixin animation-direction($directions...) { + // normal | alternate + @include prefixer(animation-direction, $directions, webkit moz spec); +} + +@mixin animation-play-state($states...) { + // running | paused + @include prefixer(animation-play-state, $states, webkit moz spec); +} + +@mixin animation-delay($times...) { + @include prefixer(animation-delay, $times, webkit moz spec); +} + +@mixin animation-fill-mode($modes...) { + // none | forwards | backwards | both + @include prefixer(animation-fill-mode, $modes, webkit moz spec); +} diff --git a/_scss/bourbon/css3/_appearance.scss b/_scss/bourbon/css3/_appearance.scss new file mode 100644 index 0000000..abddc02 --- /dev/null +++ b/_scss/bourbon/css3/_appearance.scss @@ -0,0 +1,3 @@ +@mixin appearance($value) { + @include prefixer(appearance, $value, webkit moz ms o spec); +} diff --git a/_scss/bourbon/css3/_backface-visibility.scss b/_scss/bourbon/css3/_backface-visibility.scss new file mode 100644 index 0000000..fc68e2d --- /dev/null +++ b/_scss/bourbon/css3/_backface-visibility.scss @@ -0,0 +1,3 @@ +@mixin backface-visibility($visibility) { + @include prefixer(backface-visibility, $visibility, webkit spec); +} diff --git a/_scss/bourbon/css3/_background-image.scss b/_scss/bourbon/css3/_background-image.scss new file mode 100644 index 0000000..6ed19ab --- /dev/null +++ b/_scss/bourbon/css3/_background-image.scss @@ -0,0 +1,42 @@ +//************************************************************************// +// Background-image property for adding multiple background images with +// gradients, or for stringing multiple gradients together. +//************************************************************************// + +@mixin background-image($images...) { + $webkit-images: (); + $spec-images: (); + + @each $image in $images { + $webkit-image: (); + $spec-image: (); + + @if (type-of($image) == string) { + $url-str: str-slice($image, 1, 3); + $gradient-type: str-slice($image, 1, 6); + + @if $url-str == "url" { + $webkit-image: $image; + $spec-image: $image; + } + + @else if $gradient-type == "linear" { + $gradients: _linear-gradient-parser($image); + $webkit-image: map-get($gradients, webkit-image); + $spec-image: map-get($gradients, spec-image); + } + + @else if $gradient-type == "radial" { + $gradients: _radial-gradient-parser($image); + $webkit-image: map-get($gradients, webkit-image); + $spec-image: map-get($gradients, spec-image); + } + } + + $webkit-images: append($webkit-images, $webkit-image, comma); + $spec-images: append($spec-images, $spec-image, comma); + } + + background-image: $webkit-images; + background-image: $spec-images; +} diff --git a/_scss/bourbon/css3/_background.scss b/_scss/bourbon/css3/_background.scss new file mode 100644 index 0000000..019db0e --- /dev/null +++ b/_scss/bourbon/css3/_background.scss @@ -0,0 +1,55 @@ +//************************************************************************// +// Background property for adding multiple backgrounds using shorthand +// notation. +//************************************************************************// + +@mixin background($backgrounds...) { + $webkit-backgrounds: (); + $spec-backgrounds: (); + + @each $background in $backgrounds { + $webkit-background: (); + $spec-background: (); + $background-type: type-of($background); + + @if $background-type == string or $background-type == list { + $background-str: if($background-type == list, nth($background, 1), $background); + + $url-str: str-slice($background-str, 1, 3); + $gradient-type: str-slice($background-str, 1, 6); + + @if $url-str == "url" { + $webkit-background: $background; + $spec-background: $background; + } + + @else if $gradient-type == "linear" { + $gradients: _linear-gradient-parser("#{$background}"); + $webkit-background: map-get($gradients, webkit-image); + $spec-background: map-get($gradients, spec-image); + } + + @else if $gradient-type == "radial" { + $gradients: _radial-gradient-parser("#{$background}"); + $webkit-background: map-get($gradients, webkit-image); + $spec-background: map-get($gradients, spec-image); + } + + @else { + $webkit-background: $background; + $spec-background: $background; + } + } + + @else { + $webkit-background: $background; + $spec-background: $background; + } + + $webkit-backgrounds: append($webkit-backgrounds, $webkit-background, comma); + $spec-backgrounds: append($spec-backgrounds, $spec-background, comma); + } + + background: $webkit-backgrounds; + background: $spec-backgrounds; +} diff --git a/_scss/bourbon/css3/_border-image.scss b/_scss/bourbon/css3/_border-image.scss new file mode 100644 index 0000000..cf568ce --- /dev/null +++ b/_scss/bourbon/css3/_border-image.scss @@ -0,0 +1,59 @@ +@mixin border-image($borders...) { + $webkit-borders: (); + $spec-borders: (); + + @each $border in $borders { + $webkit-border: (); + $spec-border: (); + $border-type: type-of($border); + + @if $border-type == string or list { + $border-str: if($border-type == list, nth($border, 1), $border); + + $url-str: str-slice($border-str, 1, 3); + $gradient-type: str-slice($border-str, 1, 6); + + @if $url-str == "url" { + $webkit-border: $border; + $spec-border: $border; + } + + @else if $gradient-type == "linear" { + $gradients: _linear-gradient-parser("#{$border}"); + $webkit-border: map-get($gradients, webkit-image); + $spec-border: map-get($gradients, spec-image); + } + + @else if $gradient-type == "radial" { + $gradients: _radial-gradient-parser("#{$border}"); + $webkit-border: map-get($gradients, webkit-image); + $spec-border: map-get($gradients, spec-image); + } + + @else { + $webkit-border: $border; + $spec-border: $border; + } + } + + @else { + $webkit-border: $border; + $spec-border: $border; + } + + $webkit-borders: append($webkit-borders, $webkit-border, comma); + $spec-borders: append($spec-borders, $spec-border, comma); + } + + -webkit-border-image: $webkit-borders; + border-image: $spec-borders; + border-style: solid; +} + +//Examples: +// @include border-image(url("image.png")); +// @include border-image(url("image.png") 20 stretch); +// @include border-image(linear-gradient(45deg, orange, yellow)); +// @include border-image(linear-gradient(45deg, orange, yellow) stretch); +// @include border-image(linear-gradient(45deg, orange, yellow) 20 30 40 50 stretch round); +// @include border-image(radial-gradient(top, cover, orange, yellow, orange)); diff --git a/_scss/bourbon/css3/_calc.scss b/_scss/bourbon/css3/_calc.scss new file mode 100644 index 0000000..0bfc738 --- /dev/null +++ b/_scss/bourbon/css3/_calc.scss @@ -0,0 +1,4 @@ +@mixin calc($property, $value) { + #{$property}: -webkit-calc(#{$value}); + #{$property}: calc(#{$value}); +} diff --git a/_scss/bourbon/css3/_columns.scss b/_scss/bourbon/css3/_columns.scss new file mode 100644 index 0000000..9611767 --- /dev/null +++ b/_scss/bourbon/css3/_columns.scss @@ -0,0 +1,47 @@ +@mixin columns($arg: auto) { + // || + @include prefixer(columns, $arg, webkit moz spec); +} + +@mixin column-count($int: auto) { + // auto || integer + @include prefixer(column-count, $int, webkit moz spec); +} + +@mixin column-gap($length: normal) { + // normal || length + @include prefixer(column-gap, $length, webkit moz spec); +} + +@mixin column-fill($arg: auto) { + // auto || length + @include prefixer(column-fill, $arg, webkit moz spec); +} + +@mixin column-rule($arg) { + // || || + @include prefixer(column-rule, $arg, webkit moz spec); +} + +@mixin column-rule-color($color) { + @include prefixer(column-rule-color, $color, webkit moz spec); +} + +@mixin column-rule-style($style: none) { + // none | hidden | dashed | dotted | double | groove | inset | inset | outset | ridge | solid + @include prefixer(column-rule-style, $style, webkit moz spec); +} + +@mixin column-rule-width ($width: none) { + @include prefixer(column-rule-width, $width, webkit moz spec); +} + +@mixin column-span($arg: none) { + // none || all + @include prefixer(column-span, $arg, webkit moz spec); +} + +@mixin column-width($length: auto) { + // auto || length + @include prefixer(column-width, $length, webkit moz spec); +} diff --git a/_scss/bourbon/css3/_filter.scss b/_scss/bourbon/css3/_filter.scss new file mode 100644 index 0000000..b8f8ffb --- /dev/null +++ b/_scss/bourbon/css3/_filter.scss @@ -0,0 +1,4 @@ +@mixin filter($function: none) { + // [ + @include prefixer(perspective, $depth, webkit moz spec); +} + +@mixin perspective-origin($value: 50% 50%) { + @include prefixer(perspective-origin, $value, webkit moz spec); +} diff --git a/_scss/bourbon/css3/_placeholder.scss b/_scss/bourbon/css3/_placeholder.scss new file mode 100644 index 0000000..5682fd0 --- /dev/null +++ b/_scss/bourbon/css3/_placeholder.scss @@ -0,0 +1,8 @@ +@mixin placeholder { + $placeholders: ":-webkit-input" ":-moz" "-moz" "-ms-input"; + @each $placeholder in $placeholders { + &:#{$placeholder}-placeholder { + @content; + } + } +} diff --git a/_scss/bourbon/css3/_radial-gradient.scss b/_scss/bourbon/css3/_radial-gradient.scss new file mode 100644 index 0000000..18f7b5b --- /dev/null +++ b/_scss/bourbon/css3/_radial-gradient.scss @@ -0,0 +1,39 @@ +// Requires Sass 3.1+ +@mixin radial-gradient($g1, $g2, + $g3: null, $g4: null, + $g5: null, $g6: null, + $g7: null, $g8: null, + $g9: null, $g10: null, + $pos: null, + $shape-size: null, + $fallback: null) { + + $data: _radial-arg-parser($g1, $g2, $pos, $shape-size); + $g1: nth($data, 1); + $g2: nth($data, 2); + $pos: nth($data, 3); + $shape-size: nth($data, 4); + + $full: $g1, $g2, $g3, $g4, $g5, $g6, $g7, $g8, $g9, $g10; + + // Strip deprecated cover/contain for spec + $shape-size-spec: _shape-size-stripper($shape-size); + + // Set $g1 as the default fallback color + $first-color: nth($full, 1); + $fallback-color: nth($first-color, 1); + + @if (type-of($fallback) == color) or ($fallback == "transparent") { + $fallback-color: $fallback; + } + + // Add Commas and spaces + $shape-size: if($shape-size, "#{$shape-size}, ", null); + $pos: if($pos, "#{$pos}, ", null); + $pos-spec: if($pos, "at #{$pos}", null); + $shape-size-spec: if(($shape-size-spec != " ") and ($pos == null), "#{$shape-size-spec}, ", "#{$shape-size-spec} "); + + background-color: $fallback-color; + background-image: -webkit-radial-gradient(#{$pos}#{$shape-size}#{$full}); + background-image: radial-gradient(#{$shape-size-spec}#{$pos-spec}#{$full}); +} diff --git a/_scss/bourbon/css3/_selection.scss b/_scss/bourbon/css3/_selection.scss new file mode 100644 index 0000000..cd71d4f --- /dev/null +++ b/_scss/bourbon/css3/_selection.scss @@ -0,0 +1,42 @@ +@charset "UTF-8"; + +/// Outputs the spec and prefixed versions of the `::selection` pseudo-element. +/// +/// @param {Bool} $current-selector [false] +/// If set to `true`, it takes the current element into consideration. +/// +/// @example scss - Usage +/// .element { +/// @include selection(true) { +/// background-color: #ffbb52; +/// } +/// } +/// +/// @example css - CSS Output +/// .element::-moz-selection { +/// background-color: #ffbb52; +/// } +/// +/// .element::selection { +/// background-color: #ffbb52; +/// } + +@mixin selection($current-selector: false) { + @if $current-selector { + &::-moz-selection { + @content; + } + + &::selection { + @content; + } + } @else { + ::-moz-selection { + @content; + } + + ::selection { + @content; + } + } +} diff --git a/_scss/bourbon/css3/_text-decoration.scss b/_scss/bourbon/css3/_text-decoration.scss new file mode 100644 index 0000000..9222746 --- /dev/null +++ b/_scss/bourbon/css3/_text-decoration.scss @@ -0,0 +1,19 @@ +@mixin text-decoration($value) { +// || || + @include prefixer(text-decoration, $value, moz); +} + +@mixin text-decoration-line($line: none) { +// none || underline || overline || line-through + @include prefixer(text-decoration-line, $line, moz); +} + +@mixin text-decoration-style($style: solid) { +// solid || double || dotted || dashed || wavy + @include prefixer(text-decoration-style, $style, moz webkit); +} + +@mixin text-decoration-color($color: currentColor) { +// currentColor || + @include prefixer(text-decoration-color, $color, moz); +} diff --git a/_scss/bourbon/css3/_transform.scss b/_scss/bourbon/css3/_transform.scss new file mode 100644 index 0000000..8ee6509 --- /dev/null +++ b/_scss/bourbon/css3/_transform.scss @@ -0,0 +1,15 @@ +@mixin transform($property: none) { + // none | + @include prefixer(transform, $property, webkit moz ms o spec); +} + +@mixin transform-origin($axes: 50%) { + // x-axis - left | center | right | length | % + // y-axis - top | center | bottom | length | % + // z-axis - length + @include prefixer(transform-origin, $axes, webkit moz ms o spec); +} + +@mixin transform-style($style: flat) { + @include prefixer(transform-style, $style, webkit moz ms o spec); +} diff --git a/_scss/bourbon/css3/_transition.scss b/_scss/bourbon/css3/_transition.scss new file mode 100644 index 0000000..3c785ed --- /dev/null +++ b/_scss/bourbon/css3/_transition.scss @@ -0,0 +1,71 @@ +// Shorthand mixin. Supports multiple parentheses-deliminated values for each variable. +// Example: @include transition (all 2s ease-in-out); +// @include transition (opacity 1s ease-in 2s, width 2s ease-out); +// @include transition-property (transform, opacity); + +@mixin transition($properties...) { + // Fix for vendor-prefix transform property + $needs-prefixes: false; + $webkit: (); + $moz: (); + $spec: (); + + // Create lists for vendor-prefixed transform + @each $list in $properties { + @if nth($list, 1) == "transform" { + $needs-prefixes: true; + $list1: -webkit-transform; + $list2: -moz-transform; + $list3: (); + + @each $var in $list { + $list3: join($list3, $var); + + @if $var != "transform" { + $list1: join($list1, $var); + $list2: join($list2, $var); + } + } + + $webkit: append($webkit, $list1); + $moz: append($moz, $list2); + $spec: append($spec, $list3); + } @else { + $webkit: append($webkit, $list, comma); + $moz: append($moz, $list, comma); + $spec: append($spec, $list, comma); + } + } + + @if $needs-prefixes { + -webkit-transition: $webkit; + -moz-transition: $moz; + transition: $spec; + } @else { + @if length($properties) >= 1 { + @include prefixer(transition, $properties, webkit moz spec); + } @else { + $properties: all 0.15s ease-out 0s; + @include prefixer(transition, $properties, webkit moz spec); + } + } +} + +@mixin transition-property($properties...) { + -webkit-transition-property: transition-property-names($properties, "webkit"); + -moz-transition-property: transition-property-names($properties, "moz"); + transition-property: transition-property-names($properties, false); +} + +@mixin transition-duration($times...) { + @include prefixer(transition-duration, $times, webkit moz spec); +} + +@mixin transition-timing-function($motions...) { + // ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier() + @include prefixer(transition-timing-function, $motions, webkit moz spec); +} + +@mixin transition-delay($times...) { + @include prefixer(transition-delay, $times, webkit moz spec); +} diff --git a/_scss/bourbon/css3/_user-select.scss b/_scss/bourbon/css3/_user-select.scss new file mode 100644 index 0000000..d4e5551 --- /dev/null +++ b/_scss/bourbon/css3/_user-select.scss @@ -0,0 +1,3 @@ +@mixin user-select($value: none) { + @include prefixer(user-select, $value, webkit moz ms spec); +} diff --git a/_scss/bourbon/functions/_assign-inputs.scss b/_scss/bourbon/functions/_assign-inputs.scss new file mode 100644 index 0000000..f8aba96 --- /dev/null +++ b/_scss/bourbon/functions/_assign-inputs.scss @@ -0,0 +1,11 @@ +@function assign-inputs($inputs, $pseudo: null) { + $list: (); + + @each $input in $inputs { + $input: unquote($input); + $input: if($pseudo, $input + ":" + $pseudo, $input); + $list: append($list, $input, comma); + } + + @return $list; +} diff --git a/_scss/bourbon/functions/_contains-falsy.scss b/_scss/bourbon/functions/_contains-falsy.scss new file mode 100644 index 0000000..c096fdb --- /dev/null +++ b/_scss/bourbon/functions/_contains-falsy.scss @@ -0,0 +1,20 @@ +@charset "UTF-8"; + +/// Checks if a list does not contains a value. +/// +/// @access private +/// +/// @param {List} $list +/// The list to check against. +/// +/// @return {Bool} + +@function contains-falsy($list) { + @each $item in $list { + @if not $item { + @return true; + } + } + + @return false; +} diff --git a/_scss/bourbon/functions/_contains.scss b/_scss/bourbon/functions/_contains.scss new file mode 100644 index 0000000..3dec27d --- /dev/null +++ b/_scss/bourbon/functions/_contains.scss @@ -0,0 +1,26 @@ +@charset "UTF-8"; + +/// Checks if a list contains a value(s). +/// +/// @access private +/// +/// @param {List} $list +/// The list to check against. +/// +/// @param {List} $values +/// A single value or list of values to check for. +/// +/// @example scss - Usage +/// contains($list, $value) +/// +/// @return {Bool} + +@function contains($list, $values...) { + @each $value in $values { + @if type-of(index($list, $value)) != "number" { + @return false; + } + } + + @return true; +} diff --git a/_scss/bourbon/functions/_is-length.scss b/_scss/bourbon/functions/_is-length.scss new file mode 100644 index 0000000..5826e78 --- /dev/null +++ b/_scss/bourbon/functions/_is-length.scss @@ -0,0 +1,11 @@ +@charset "UTF-8"; + +/// Checks for a valid CSS length. +/// +/// @param {String} $value + +@function is-length($value) { + @return type-of($value) != "null" and (str-slice($value + "", 1, 4) == "calc" + or index(auto inherit initial 0, $value) + or (type-of($value) == "number" and not(unitless($value)))); +} diff --git a/_scss/bourbon/functions/_is-light.scss b/_scss/bourbon/functions/_is-light.scss new file mode 100644 index 0000000..92d90ac --- /dev/null +++ b/_scss/bourbon/functions/_is-light.scss @@ -0,0 +1,21 @@ +@charset "UTF-8"; + +/// Programatically determines whether a color is light or dark. +/// +/// @link http://robots.thoughtbot.com/closer-look-color-lightness +/// +/// @param {Color (Hex)} $color +/// +/// @example scss - Usage +/// is-light($color) +/// +/// @return {Bool} + +@function is-light($hex-color) { + $-local-red: red(rgba($hex-color, 1)); + $-local-green: green(rgba($hex-color, 1)); + $-local-blue: blue(rgba($hex-color, 1)); + $-local-lightness: ($-local-red * 0.2126 + $-local-green * 0.7152 + $-local-blue * 0.0722) / 255; + + @return $-local-lightness > 0.6; +} diff --git a/_scss/bourbon/functions/_is-number.scss b/_scss/bourbon/functions/_is-number.scss new file mode 100644 index 0000000..a64e0bf --- /dev/null +++ b/_scss/bourbon/functions/_is-number.scss @@ -0,0 +1,11 @@ +@charset "UTF-8"; + +/// Checks for a valid number. +/// +/// @param {Number} $value +/// +/// @require {function} contains + +@function is-number($value) { + @return contains("0" "1" "2" "3" "4" "5" "6" "7" "8" "9" 0 1 2 3 4 5 6 7 8 9, $value); +} diff --git a/_scss/bourbon/functions/_is-size.scss b/_scss/bourbon/functions/_is-size.scss new file mode 100644 index 0000000..661789a --- /dev/null +++ b/_scss/bourbon/functions/_is-size.scss @@ -0,0 +1,13 @@ +@charset "UTF-8"; + +/// Checks for a valid CSS size. +/// +/// @param {String} $value +/// +/// @require {function} contains +/// @require {function} is-length + +@function is-size($value) { + @return is-length($value) + or contains("fill" "fit-content" "min-content" "max-content", $value); +} diff --git a/_scss/bourbon/functions/_modular-scale.scss b/_scss/bourbon/functions/_modular-scale.scss new file mode 100644 index 0000000..20fa388 --- /dev/null +++ b/_scss/bourbon/functions/_modular-scale.scss @@ -0,0 +1,69 @@ +// Scaling Variables +$golden: 1.618; +$minor-second: 1.067; +$major-second: 1.125; +$minor-third: 1.2; +$major-third: 1.25; +$perfect-fourth: 1.333; +$augmented-fourth: 1.414; +$perfect-fifth: 1.5; +$minor-sixth: 1.6; +$major-sixth: 1.667; +$minor-seventh: 1.778; +$major-seventh: 1.875; +$octave: 2; +$major-tenth: 2.5; +$major-eleventh: 2.667; +$major-twelfth: 3; +$double-octave: 4; + +$modular-scale-ratio: $perfect-fourth !default; +$modular-scale-base: em($em-base) !default; + +@function modular-scale($increment, $value: $modular-scale-base, $ratio: $modular-scale-ratio) { + $v1: nth($value, 1); + $v2: nth($value, length($value)); + $value: $v1; + + // scale $v2 to just above $v1 + @while $v2 > $v1 { + $v2: ($v2 / $ratio); // will be off-by-1 + } + @while $v2 < $v1 { + $v2: ($v2 * $ratio); // will fix off-by-1 + } + + // check AFTER scaling $v2 to prevent double-counting corner-case + $double-stranded: $v2 > $v1; + + @if $increment > 0 { + @for $i from 1 through $increment { + @if $double-stranded and ($v1 * $ratio) > $v2 { + $value: $v2; + $v2: ($v2 * $ratio); + } @else { + $v1: ($v1 * $ratio); + $value: $v1; + } + } + } + + @if $increment < 0 { + // adjust $v2 to just below $v1 + @if $double-stranded { + $v2: ($v2 / $ratio); + } + + @for $i from $increment through -1 { + @if $double-stranded and ($v1 / $ratio) < $v2 { + $value: $v2; + $v2: ($v2 / $ratio); + } @else { + $v1: ($v1 / $ratio); + $value: $v1; + } + } + } + + @return $value; +} diff --git a/_scss/bourbon/functions/_px-to-em.scss b/_scss/bourbon/functions/_px-to-em.scss new file mode 100644 index 0000000..ae81a44 --- /dev/null +++ b/_scss/bourbon/functions/_px-to-em.scss @@ -0,0 +1,13 @@ +// Convert pixels to ems +// eg. for a relational value of 12px write em(12) when the parent is 16px +// if the parent is another value say 24px write em(12, 24) + +@function em($pxval, $base: $em-base) { + @if not unitless($pxval) { + $pxval: strip-units($pxval); + } + @if not unitless($base) { + $base: strip-units($base); + } + @return ($pxval / $base) * 1em; +} diff --git a/_scss/bourbon/functions/_px-to-rem.scss b/_scss/bourbon/functions/_px-to-rem.scss new file mode 100644 index 0000000..0ac941e --- /dev/null +++ b/_scss/bourbon/functions/_px-to-rem.scss @@ -0,0 +1,15 @@ +// Convert pixels to rems +// eg. for a relational value of 12px write rem(12) +// Assumes $em-base is the font-size of + +@function rem($pxval) { + @if not unitless($pxval) { + $pxval: strip-units($pxval); + } + + $base: $em-base; + @if not unitless($base) { + $base: strip-units($base); + } + @return ($pxval / $base) * 1rem; +} diff --git a/_scss/bourbon/functions/_shade.scss b/_scss/bourbon/functions/_shade.scss new file mode 100644 index 0000000..8aaf2c6 --- /dev/null +++ b/_scss/bourbon/functions/_shade.scss @@ -0,0 +1,24 @@ +@charset "UTF-8"; + +/// Mixes a color with black. +/// +/// @param {Color} $color +/// +/// @param {Number (Percentage)} $percent +/// The amount of black to be mixed in. +/// +/// @example scss - Usage +/// .element { +/// background-color: shade(#ffbb52, 60%); +/// } +/// +/// @example css - CSS Output +/// .element { +/// background-color: #664a20; +/// } +/// +/// @return {Color} + +@function shade($color, $percent) { + @return mix(#000, $color, $percent); +} diff --git a/_scss/bourbon/functions/_strip-units.scss b/_scss/bourbon/functions/_strip-units.scss new file mode 100644 index 0000000..6c5f3e8 --- /dev/null +++ b/_scss/bourbon/functions/_strip-units.scss @@ -0,0 +1,17 @@ +@charset "UTF-8"; + +/// Strips the unit from a number. +/// +/// @param {Number (With Unit)} $value +/// +/// @example scss - Usage +/// $dimension: strip-units(10em); +/// +/// @example css - CSS Output +/// $dimension: 10; +/// +/// @return {Number (Unitless)} + +@function strip-units($value) { + @return ($value / ($value * 0 + 1)); +} diff --git a/_scss/bourbon/functions/_tint.scss b/_scss/bourbon/functions/_tint.scss new file mode 100644 index 0000000..2e33814 --- /dev/null +++ b/_scss/bourbon/functions/_tint.scss @@ -0,0 +1,24 @@ +@charset "UTF-8"; + +/// Mixes a color with white. +/// +/// @param {Color} $color +/// +/// @param {Number (Percentage)} $percent +/// The amount of white to be mixed in. +/// +/// @example scss - Usage +/// .element { +/// background-color: tint(#6ecaa6, 40%); +/// } +/// +/// @example css - CSS Output +/// .element { +/// background-color: #a8dfc9; +/// } +/// +/// @return {Color} + +@function tint($color, $percent) { + @return mix(#fff, $color, $percent); +} diff --git a/_scss/bourbon/functions/_transition-property-name.scss b/_scss/bourbon/functions/_transition-property-name.scss new file mode 100644 index 0000000..18348b9 --- /dev/null +++ b/_scss/bourbon/functions/_transition-property-name.scss @@ -0,0 +1,22 @@ +// Return vendor-prefixed property names if appropriate +// Example: transition-property-names((transform, color, background), moz) -> -moz-transform, color, background +//************************************************************************// +@function transition-property-names($props, $vendor: false) { + $new-props: (); + + @each $prop in $props { + $new-props: append($new-props, transition-property-name($prop, $vendor), comma); + } + + @return $new-props; +} + +@function transition-property-name($prop, $vendor: false) { + // put other properties that need to be prefixed here aswell + @if $vendor and $prop == transform { + @return unquote('-'+$vendor+'-'+$prop); + } + @else { + @return $prop; + } +} diff --git a/_scss/bourbon/functions/_unpack.scss b/_scss/bourbon/functions/_unpack.scss new file mode 100644 index 0000000..4367935 --- /dev/null +++ b/_scss/bourbon/functions/_unpack.scss @@ -0,0 +1,27 @@ +@charset "UTF-8"; + +/// Converts shorthand to the 4-value syntax. +/// +/// @param {List} $shorthand +/// +/// @example scss - Usage +/// .element { +/// margin: unpack(1em 2em); +/// } +/// +/// @example css - CSS Output +/// .element { +/// margin: 1em 2em 1em 2em; +/// } + +@function unpack($shorthand) { + @if length($shorthand) == 1 { + @return nth($shorthand, 1) nth($shorthand, 1) nth($shorthand, 1) nth($shorthand, 1); + } @else if length($shorthand) == 2 { + @return nth($shorthand, 1) nth($shorthand, 2) nth($shorthand, 1) nth($shorthand, 2); + } @else if length($shorthand) == 3 { + @return nth($shorthand, 1) nth($shorthand, 2) nth($shorthand, 3) nth($shorthand, 2); + } @else { + @return $shorthand; + } +} diff --git a/_scss/bourbon/helpers/_convert-units.scss b/_scss/bourbon/helpers/_convert-units.scss new file mode 100644 index 0000000..e0a65a0 --- /dev/null +++ b/_scss/bourbon/helpers/_convert-units.scss @@ -0,0 +1,21 @@ +//************************************************************************// +// Helper function for str-to-num fn. +// Source: http://sassmeister.com/gist/9647408 +//************************************************************************// +@function _convert-units($number, $unit) { + $strings: "px", "cm", "mm", "%", "ch", "pica", "in", "em", "rem", "pt", "pc", "ex", "vw", "vh", "vmin", "vmax", "deg", "rad", "grad", "turn"; + $units: 1px, 1cm, 1mm, 1%, 1ch, 1pica, 1in, 1em, 1rem, 1pt, 1pc, 1ex, 1vw, 1vh, 1vmin, 1vmax, 1deg, 1rad, 1grad, 1turn; + $index: index($strings, $unit); + + @if not $index { + @warn "Unknown unit `#{$unit}`."; + @return false; + } + + @if type-of($number) != "number" { + @warn "`#{$number} is not a number`"; + @return false; + } + + @return $number * nth($units, $index); +} diff --git a/_scss/bourbon/helpers/_directional-values.scss b/_scss/bourbon/helpers/_directional-values.scss new file mode 100644 index 0000000..6ee538d --- /dev/null +++ b/_scss/bourbon/helpers/_directional-values.scss @@ -0,0 +1,96 @@ +@charset "UTF-8"; + +/// Directional-property mixins are shorthands for writing properties like the following +/// +/// @ignore You can also use `false` instead of `null`. +/// +/// @param {List} $vals +/// List of directional values +/// +/// @example scss - Usage +/// .element { +/// @include border-style(dotted null); +/// @include margin(null 0 10px); +/// } +/// +/// @example css - CSS Output +/// .element { +/// border-bottom-style: dotted; +/// border-top-style: dotted; +/// margin-bottom: 10px; +/// margin-left: 0; +/// margin-right: 0; +/// } +/// +/// @require {function} contains-falsy +/// +/// @return {List} + +@function collapse-directionals($vals) { + $output: null; + + $a: nth($vals, 1); + $b: if(length($vals) < 2, $a, nth($vals, 2)); + $c: if(length($vals) < 3, $a, nth($vals, 3)); + $d: if(length($vals) < 2, $a, nth($vals, if(length($vals) < 4, 2, 4))); + + @if $a == 0 { $a: 0; } + @if $b == 0 { $b: 0; } + @if $c == 0 { $c: 0; } + @if $d == 0 { $d: 0; } + + @if $a == $b and $a == $c and $a == $d { $output: $a; } + @else if $a == $c and $b == $d { $output: $a $b; } + @else if $b == $d { $output: $a $b $c; } + @else { $output: $a $b $c $d; } + + @return $output; +} + +/// Output directional properties, for instance `margin`. +/// +/// @access private +/// +/// @param {String} $pre +/// Prefix to use +/// @param {String} $suf +/// Suffix to use +/// @param {List} $vals +/// List of values +/// +/// @require {function} collapse-directionals +/// @require {function} contains-falsy + +@mixin directional-property($pre, $suf, $vals) { + // Property Names + $top: $pre + "-top" + if($suf, "-#{$suf}", ""); + $bottom: $pre + "-bottom" + if($suf, "-#{$suf}", ""); + $left: $pre + "-left" + if($suf, "-#{$suf}", ""); + $right: $pre + "-right" + if($suf, "-#{$suf}", ""); + $all: $pre + if($suf, "-#{$suf}", ""); + + $vals: collapse-directionals($vals); + + @if contains-falsy($vals) { + @if nth($vals, 1) { #{$top}: nth($vals, 1); } + + @if length($vals) == 1 { + @if nth($vals, 1) { #{$right}: nth($vals, 1); } + } @else { + @if nth($vals, 2) { #{$right}: nth($vals, 2); } + } + + @if length($vals) == 2 { + @if nth($vals, 1) { #{$bottom}: nth($vals, 1); } + @if nth($vals, 2) { #{$left}: nth($vals, 2); } + } @else if length($vals) == 3 { + @if nth($vals, 3) { #{$bottom}: nth($vals, 3); } + @if nth($vals, 2) { #{$left}: nth($vals, 2); } + } @else if length($vals) == 4 { + @if nth($vals, 3) { #{$bottom}: nth($vals, 3); } + @if nth($vals, 4) { #{$left}: nth($vals, 4); } + } + } @else { + #{$all}: $vals; + } +} diff --git a/_scss/bourbon/helpers/_font-source-declaration.scss b/_scss/bourbon/helpers/_font-source-declaration.scss new file mode 100644 index 0000000..7f17586 --- /dev/null +++ b/_scss/bourbon/helpers/_font-source-declaration.scss @@ -0,0 +1,43 @@ +// Used for creating the source string for fonts using @font-face +// Reference: http://goo.gl/Ru1bKP + +@function font-url-prefixer($asset-pipeline) { + @if $asset-pipeline == true { + @return font-url; + } @else { + @return url; + } +} + +@function font-source-declaration( + $font-family, + $file-path, + $asset-pipeline, + $file-formats, + $font-url) { + + $src: (); + + $formats-map: ( + eot: "#{$file-path}.eot?#iefix" format("embedded-opentype"), + woff2: "#{$file-path}.woff2" format("woff2"), + woff: "#{$file-path}.woff" format("woff"), + ttf: "#{$file-path}.ttf" format("truetype"), + svg: "#{$file-path}.svg##{$font-family}" format("svg") + ); + + @each $key, $values in $formats-map { + @if contains($file-formats, $key) { + $file-path: nth($values, 1); + $font-format: nth($values, 2); + + @if $asset-pipeline == true { + $src: append($src, font-url($file-path) $font-format, comma); + } @else { + $src: append($src, url($file-path) $font-format, comma); + } + } + } + + @return $src; +} diff --git a/_scss/bourbon/helpers/_gradient-positions-parser.scss b/_scss/bourbon/helpers/_gradient-positions-parser.scss new file mode 100644 index 0000000..07d30b6 --- /dev/null +++ b/_scss/bourbon/helpers/_gradient-positions-parser.scss @@ -0,0 +1,13 @@ +@function _gradient-positions-parser($gradient-type, $gradient-positions) { + @if $gradient-positions + and ($gradient-type == linear) + and (type-of($gradient-positions) != color) { + $gradient-positions: _linear-positions-parser($gradient-positions); + } + @else if $gradient-positions + and ($gradient-type == radial) + and (type-of($gradient-positions) != color) { + $gradient-positions: _radial-positions-parser($gradient-positions); + } + @return $gradient-positions; +} diff --git a/_scss/bourbon/helpers/_linear-angle-parser.scss b/_scss/bourbon/helpers/_linear-angle-parser.scss new file mode 100644 index 0000000..e0401ed --- /dev/null +++ b/_scss/bourbon/helpers/_linear-angle-parser.scss @@ -0,0 +1,25 @@ +// Private function for linear-gradient-parser +@function _linear-angle-parser($image, $first-val, $prefix, $suffix) { + $offset: null; + $unit-short: str-slice($first-val, str-length($first-val) - 2, str-length($first-val)); + $unit-long: str-slice($first-val, str-length($first-val) - 3, str-length($first-val)); + + @if ($unit-long == "grad") or + ($unit-long == "turn") { + $offset: if($unit-long == "grad", -100grad * 3, -0.75turn); + } + + @else if ($unit-short == "deg") or + ($unit-short == "rad") { + $offset: if($unit-short == "deg", -90 * 3, 1.6rad); + } + + @if $offset { + $num: _str-to-num($first-val); + + @return ( + webkit-image: -webkit- + $prefix + ($offset - $num) + $suffix, + spec-image: $image + ); + } +} diff --git a/_scss/bourbon/helpers/_linear-gradient-parser.scss b/_scss/bourbon/helpers/_linear-gradient-parser.scss new file mode 100644 index 0000000..48a8f77 --- /dev/null +++ b/_scss/bourbon/helpers/_linear-gradient-parser.scss @@ -0,0 +1,41 @@ +@function _linear-gradient-parser($image) { + $image: unquote($image); + $gradients: (); + $start: str-index($image, "("); + $end: str-index($image, ","); + $first-val: str-slice($image, $start + 1, $end - 1); + + $prefix: str-slice($image, 1, $start); + $suffix: str-slice($image, $end, str-length($image)); + + $has-multiple-vals: str-index($first-val, " "); + $has-single-position: unquote(_position-flipper($first-val) + ""); + $has-angle: is-number(str-slice($first-val, 1, 1)); + + @if $has-multiple-vals { + $gradients: _linear-side-corner-parser($image, $first-val, $prefix, $suffix, $has-multiple-vals); + } + + @else if $has-single-position != "" { + $pos: unquote($has-single-position + ""); + + $gradients: ( + webkit-image: -webkit- + $image, + spec-image: $prefix + "to " + $pos + $suffix + ); + } + + @else if $has-angle { + // Rotate degree for webkit + $gradients: _linear-angle-parser($image, $first-val, $prefix, $suffix); + } + + @else { + $gradients: ( + webkit-image: -webkit- + $image, + spec-image: $image + ); + } + + @return $gradients; +} diff --git a/_scss/bourbon/helpers/_linear-positions-parser.scss b/_scss/bourbon/helpers/_linear-positions-parser.scss new file mode 100644 index 0000000..96d6a6d --- /dev/null +++ b/_scss/bourbon/helpers/_linear-positions-parser.scss @@ -0,0 +1,61 @@ +@function _linear-positions-parser($pos) { + $type: type-of(nth($pos, 1)); + $spec: null; + $degree: null; + $side: null; + $corner: null; + $length: length($pos); + // Parse Side and corner positions + @if ($length > 1) { + @if nth($pos, 1) == "to" { // Newer syntax + $side: nth($pos, 2); + + @if $length == 2 { // eg. to top + // Swap for backwards compatibility + $degree: _position-flipper(nth($pos, 2)); + } + @else if $length == 3 { // eg. to top left + $corner: nth($pos, 3); + } + } + @else if $length == 2 { // Older syntax ("top left") + $side: _position-flipper(nth($pos, 1)); + $corner: _position-flipper(nth($pos, 2)); + } + + @if ("#{$side} #{$corner}" == "left top") or ("#{$side} #{$corner}" == "top left") { + $degree: _position-flipper(#{$side}) _position-flipper(#{$corner}); + } + @else if ("#{$side} #{$corner}" == "right top") or ("#{$side} #{$corner}" == "top right") { + $degree: _position-flipper(#{$side}) _position-flipper(#{$corner}); + } + @else if ("#{$side} #{$corner}" == "right bottom") or ("#{$side} #{$corner}" == "bottom right") { + $degree: _position-flipper(#{$side}) _position-flipper(#{$corner}); + } + @else if ("#{$side} #{$corner}" == "left bottom") or ("#{$side} #{$corner}" == "bottom left") { + $degree: _position-flipper(#{$side}) _position-flipper(#{$corner}); + } + $spec: to $side $corner; + } + @else if $length == 1 { + // Swap for backwards compatibility + @if $type == string { + $degree: $pos; + $spec: to _position-flipper($pos); + } + @else { + $degree: -270 - $pos; //rotate the gradient opposite from spec + $spec: $pos; + } + } + $degree: unquote($degree + ","); + $spec: unquote($spec + ","); + @return $degree $spec; +} + +@function _position-flipper($pos) { + @return if($pos == left, right, null) + if($pos == right, left, null) + if($pos == top, bottom, null) + if($pos == bottom, top, null); +} diff --git a/_scss/bourbon/helpers/_linear-side-corner-parser.scss b/_scss/bourbon/helpers/_linear-side-corner-parser.scss new file mode 100644 index 0000000..7a69125 --- /dev/null +++ b/_scss/bourbon/helpers/_linear-side-corner-parser.scss @@ -0,0 +1,31 @@ +// Private function for linear-gradient-parser +@function _linear-side-corner-parser($image, $first-val, $prefix, $suffix, $has-multiple-vals) { + $val-1: str-slice($first-val, 1, $has-multiple-vals - 1); + $val-2: str-slice($first-val, $has-multiple-vals + 1, str-length($first-val)); + $val-3: null; + $has-val-3: str-index($val-2, " "); + + @if $has-val-3 { + $val-3: str-slice($val-2, $has-val-3 + 1, str-length($val-2)); + $val-2: str-slice($val-2, 1, $has-val-3 - 1); + } + + $pos: _position-flipper($val-1) _position-flipper($val-2) _position-flipper($val-3); + $pos: unquote($pos + ""); + + // Use old spec for webkit + @if $val-1 == "to" { + @return ( + webkit-image: -webkit- + $prefix + $pos + $suffix, + spec-image: $image + ); + } + + // Bring the code up to spec + @else { + @return ( + webkit-image: -webkit- + $image, + spec-image: $prefix + "to " + $pos + $suffix + ); + } +} diff --git a/_scss/bourbon/helpers/_radial-arg-parser.scss b/_scss/bourbon/helpers/_radial-arg-parser.scss new file mode 100644 index 0000000..56c6030 --- /dev/null +++ b/_scss/bourbon/helpers/_radial-arg-parser.scss @@ -0,0 +1,69 @@ +@function _radial-arg-parser($g1, $g2, $pos, $shape-size) { + @each $value in $g1, $g2 { + $first-val: nth($value, 1); + $pos-type: type-of($first-val); + $spec-at-index: null; + + // Determine if spec was passed to mixin + @if type-of($value) == list { + $spec-at-index: if(index($value, at), index($value, at), false); + } + @if $spec-at-index { + @if $spec-at-index > 1 { + @for $i from 1 through ($spec-at-index - 1) { + $shape-size: $shape-size nth($value, $i); + } + @for $i from ($spec-at-index + 1) through length($value) { + $pos: $pos nth($value, $i); + } + } + @else if $spec-at-index == 1 { + @for $i from ($spec-at-index + 1) through length($value) { + $pos: $pos nth($value, $i); + } + } + $g1: null; + } + + // If not spec calculate correct values + @else { + @if ($pos-type != color) or ($first-val != "transparent") { + @if ($pos-type == number) + or ($first-val == "center") + or ($first-val == "top") + or ($first-val == "right") + or ($first-val == "bottom") + or ($first-val == "left") { + + $pos: $value; + + @if $pos == $g1 { + $g1: null; + } + } + + @else if + ($first-val == "ellipse") + or ($first-val == "circle") + or ($first-val == "closest-side") + or ($first-val == "closest-corner") + or ($first-val == "farthest-side") + or ($first-val == "farthest-corner") + or ($first-val == "contain") + or ($first-val == "cover") { + + $shape-size: $value; + + @if $value == $g1 { + $g1: null; + } + + @else if $value == $g2 { + $g2: null; + } + } + } + } + } + @return $g1, $g2, $pos, $shape-size; +} diff --git a/_scss/bourbon/helpers/_radial-gradient-parser.scss b/_scss/bourbon/helpers/_radial-gradient-parser.scss new file mode 100644 index 0000000..5444d80 --- /dev/null +++ b/_scss/bourbon/helpers/_radial-gradient-parser.scss @@ -0,0 +1,50 @@ +@function _radial-gradient-parser($image) { + $image: unquote($image); + $gradients: (); + $start: str-index($image, "("); + $end: str-index($image, ","); + $first-val: str-slice($image, $start + 1, $end - 1); + + $prefix: str-slice($image, 1, $start); + $suffix: str-slice($image, $end, str-length($image)); + + $is-spec-syntax: str-index($first-val, "at"); + + @if $is-spec-syntax and $is-spec-syntax > 1 { + $keyword: str-slice($first-val, 1, $is-spec-syntax - 2); + $pos: str-slice($first-val, $is-spec-syntax + 3, str-length($first-val)); + $pos: append($pos, $keyword, comma); + + $gradients: ( + webkit-image: -webkit- + $prefix + $pos + $suffix, + spec-image: $image + ); + } + + @else if $is-spec-syntax == 1 { + $pos: str-slice($first-val, $is-spec-syntax + 3, str-length($first-val)); + + $gradients: ( + webkit-image: -webkit- + $prefix + $pos + $suffix, + spec-image: $image + ); + } + + @else if str-index($image, "cover") or str-index($image, "contain") { + @warn "Radial-gradient needs to be updated to conform to latest spec."; + + $gradients: ( + webkit-image: null, + spec-image: $image + ); + } + + @else { + $gradients: ( + webkit-image: -webkit- + $image, + spec-image: $image + ); + } + + @return $gradients; +} diff --git a/_scss/bourbon/helpers/_radial-positions-parser.scss b/_scss/bourbon/helpers/_radial-positions-parser.scss new file mode 100644 index 0000000..3c552ad --- /dev/null +++ b/_scss/bourbon/helpers/_radial-positions-parser.scss @@ -0,0 +1,18 @@ +@function _radial-positions-parser($gradient-pos) { + $shape-size: nth($gradient-pos, 1); + $pos: nth($gradient-pos, 2); + $shape-size-spec: _shape-size-stripper($shape-size); + + $pre-spec: unquote(if($pos, "#{$pos}, ", null)) + unquote(if($shape-size, "#{$shape-size},", null)); + $pos-spec: if($pos, "at #{$pos}", null); + + $spec: "#{$shape-size-spec} #{$pos-spec}"; + + // Add comma + @if ($spec != " ") { + $spec: "#{$spec},"; + } + + @return $pre-spec $spec; +} diff --git a/_scss/bourbon/helpers/_render-gradients.scss b/_scss/bourbon/helpers/_render-gradients.scss new file mode 100644 index 0000000..5765676 --- /dev/null +++ b/_scss/bourbon/helpers/_render-gradients.scss @@ -0,0 +1,26 @@ +// User for linear and radial gradients within background-image or border-image properties + +@function _render-gradients($gradient-positions, $gradients, $gradient-type, $vendor: false) { + $pre-spec: null; + $spec: null; + $vendor-gradients: null; + @if $gradient-type == linear { + @if $gradient-positions { + $pre-spec: nth($gradient-positions, 1); + $spec: nth($gradient-positions, 2); + } + } + @else if $gradient-type == radial { + $pre-spec: nth($gradient-positions, 1); + $spec: nth($gradient-positions, 2); + } + + @if $vendor { + $vendor-gradients: -#{$vendor}-#{$gradient-type}-gradient(#{$pre-spec} $gradients); + } + @else if $vendor == false { + $vendor-gradients: "#{$gradient-type}-gradient(#{$spec} #{$gradients})"; + $vendor-gradients: unquote($vendor-gradients); + } + @return $vendor-gradients; +} diff --git a/_scss/bourbon/helpers/_shape-size-stripper.scss b/_scss/bourbon/helpers/_shape-size-stripper.scss new file mode 100644 index 0000000..ee5eda4 --- /dev/null +++ b/_scss/bourbon/helpers/_shape-size-stripper.scss @@ -0,0 +1,10 @@ +@function _shape-size-stripper($shape-size) { + $shape-size-spec: null; + @each $value in $shape-size { + @if ($value == "cover") or ($value == "contain") { + $value: null; + } + $shape-size-spec: "#{$shape-size-spec} #{$value}"; + } + @return $shape-size-spec; +} diff --git a/_scss/bourbon/helpers/_str-to-num.scss b/_scss/bourbon/helpers/_str-to-num.scss new file mode 100644 index 0000000..3ef1d87 --- /dev/null +++ b/_scss/bourbon/helpers/_str-to-num.scss @@ -0,0 +1,50 @@ +//************************************************************************// +// Helper function for linear/radial-gradient-parsers. +// Source: http://sassmeister.com/gist/9647408 +//************************************************************************// +@function _str-to-num($string) { + // Matrices + $strings: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9"; + $numbers: 0 1 2 3 4 5 6 7 8 9; + + // Result + $result: 0; + $divider: 0; + $minus: false; + + // Looping through all characters + @for $i from 1 through str-length($string) { + $character: str-slice($string, $i, $i); + $index: index($strings, $character); + + @if $character == "-" { + $minus: true; + } + + @else if $character == "." { + $divider: 1; + } + + @else { + @if not $index { + $result: if($minus, $result * -1, $result); + @return _convert-units($result, str-slice($string, $i)); + } + + $number: nth($numbers, $index); + + @if $divider == 0 { + $result: $result * 10; + } + + @else { + // Move the decimal dot to the left + $divider: $divider * 10; + $number: $number / $divider; + } + + $result: $result + $number; + } + } + @return if($minus, $result * -1, $result); +} diff --git a/_scss/bourbon/settings/_asset-pipeline.scss b/_scss/bourbon/settings/_asset-pipeline.scss new file mode 100644 index 0000000..4c6afc5 --- /dev/null +++ b/_scss/bourbon/settings/_asset-pipeline.scss @@ -0,0 +1,7 @@ +@charset "UTF-8"; + +/// A global setting to enable or disable the `$asset-pipeline` variable for all functions that accept it. +/// +/// @type Bool + +$asset-pipeline: false !default; diff --git a/_scss/bourbon/settings/_prefixer.scss b/_scss/bourbon/settings/_prefixer.scss new file mode 100644 index 0000000..8c39051 --- /dev/null +++ b/_scss/bourbon/settings/_prefixer.scss @@ -0,0 +1,9 @@ +@charset "UTF-8"; + +/// Global variables to enable or disable vendor prefixes + +$prefix-for-webkit: true !default; +$prefix-for-mozilla: true !default; +$prefix-for-microsoft: true !default; +$prefix-for-opera: true !default; +$prefix-for-spec: true !default; diff --git a/_scss/bourbon/settings/_px-to-em.scss b/_scss/bourbon/settings/_px-to-em.scss new file mode 100644 index 0000000..f2f9a3e --- /dev/null +++ b/_scss/bourbon/settings/_px-to-em.scss @@ -0,0 +1 @@ +$em-base: 16px !default; diff --git a/_scss/main.scss b/_scss/main.scss new file mode 100644 index 0000000..26e258e --- /dev/null +++ b/_scss/main.scss @@ -0,0 +1,222 @@ +@import 'bourbon/bourbon'; +@import 'partials/mixins'; +@import 'partials/variables'; +@import 'partials/fonts'; +@import 'partials/dotNav'; +@import 'partials/mobileMenu'; +@import 'partials/blockBtn'; +@import 'partials/intro'; +@import 'partials/about'; +@import 'partials/services'; +@import 'partials/skills'; +@import 'partials/experience'; +@import 'partials/portfolio'; +@import 'partials/contact'; +@import 'partials/footer'; +@import 'partials/404'; + +*, +*:after, +*:before { + box-sizing: border-box; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +html, +body { + margin: 0; + padding: 0; + font-family: $Whitney, $sans-serif-stack; + height: 100%; + color: $white; + background-color: $dark-grey; +} + +h1 { + font-family: $Chronicle, $serif-stack; + margin: 0; +} + +h2, h3 { + font-family: $Gotham, $sans-serif-stack; + margin: 10px 0; +} + +p { + margin: 0; + margin-bottom: 10px; + font-family: $Whitney, $sans-serif-stack; +} + +a { + text-decoration: none; + color: $white; +} + +ul { + list-style: none; + padding: 0; +} + +.noScroll { + overflow: hidden; + height: 100% +} + +.center { + text-align: center; + margin-left: auto; + margin-right: auto; +} + +.section { + width: 100%; + height: auto; + min-height: 700px; + padding: 0; + overflow: hidden; + color: $white; + position: relative; + &:first-of-type { + background-color: #0054c7 + } + &:nth-of-type(odd) { + background-color: #5b5b5b; + } + &:nth-of-type(even) { + background-color: $dark-grey; + } + a { + display: block; + } + .overlay-wrapper, + .section-wrapper { + padding: 100px; + @include MQ(MM) { + padding: 100px 50px; + } + @include MQ(S400) { + padding: 100px 25px; + } + h1 { + font-size: 3em; + } + p { + font-size: 1.3em; + line-height: 1.5em; + @include MQ(SM) { + font-size: 1em; + } + } + .divider { + display: block; + margin: 30px 0px; + width: 100px; + height: 2px; + background-color: $blue; + } + .center { + margin-right: auto; + margin-left: auto; + text-align: center; + } + } + .overlay-wrapper { + background: linear-gradient(to bottom, rgba(0, 0, 0, $overlayOpacity), rgba(0, 0, 0, $overlayOpacity), rgba(0, 0, 0, $overlayOpacity), rgba(0, 0, 0, $overlayOpacity), rgba(0, 0, 0, $overlayOpacity)); + width: 100%; + height: 100%; + } +} + +.skrollr-desktop body { + height: 100% !important; +} + +#skrollr-body { + height: 100%; + overflow: visible; + position: relative; +} + +.gap, +.skrollr .gap { + background: transparent !important; +} + +.bg { + width: 100%; + height: 100%; + min-height: 100%; + background-position: center center; + background-repeat: no-repeat; + background-size: cover; + position: absolute; + z-index: -1; + overflow: hidden; +} + +#intro-section .bg { + z-index: 0; + background-image: url('../img/bg-intro/intro-xl.jpg'); + @include MQ(L) { + background-image: url('../img/bg-intro/intro-lg.jpg'); + } + @include MQ(MM) { + background-image: url('../img/bg-intro/intro-md.jpg'); + } + @include MQ(S660) { + background-image: url('../img/bg-intro/intro-sm.jpg'); + } + @include MQ(SM) { + background-image: url('../img/bg-intro/intro-xs.jpg'); + } +} + +#services-section .bg { + background-image: url('../img/bg-services/services-xl.jpg'); + @include MQ(L) { + background-image: url('../img/bg-services/services-lg.jpg'); + } + @include MQ(MM) { + background-image: url('../img/bg-services/services-md.jpg'); + } + @include MQ(S660) { + background-image: url('../img/bg-services/services-sm.jpg'); + } + @include MQ(SM) { + background-image: url('../img/bg-services/services-xs.jpg'); + } +} + +#experience-section .bg { + background-image: url('../img/bg-experience/experience-xl.jpg'); + @include MQ(L) { + background-image: url('../img/bg-experience/experience-lg.jpg'); + } + @include MQ(MM) { + background-image: url('../img/bg-experience/experience-md.jpg'); + } + @include MQ(S660) { + background-image: url('../img/bg-experience/experience-sm.jpg'); + } + @include MQ(SM) { + background-image: url('../img/bg-experience/experience-xs.jpg'); + } +} + +#contact-section .bg { + background-image: url('../img/bg-contact/contact-xl.jpg'); + @include MQ(L) { + background-image: url('../img/bg-contact/contact-lg.jpg'); + } + @include MQ(MM) { + background-image: url('../img/bg-contact/contact-md.jpg'); + } + @include MQ(S660) { + background-image: url('../img/bg-contact/contact-sm.jpg'); + } + @include MQ(SM) { + background-image: url('../img/bg-contact/contact-xs.jpg'); + } +} diff --git a/_scss/partials/_404.scss b/_scss/partials/_404.scss new file mode 100644 index 0000000..3aa72ea --- /dev/null +++ b/_scss/partials/_404.scss @@ -0,0 +1,110 @@ +.four-oh-four { + font-family: $Gotham, $sans-serif-stack; + canvas { + display: block; + vertical-align: bottom; + } + #particles-js { + position: fixed; + width: 100%; + height: 100%; + top: 0; + left: 0; + z-index: 1; + animation: appear 1.4s ease 0s normal forwards 1 running; + background-color: #070525; + background-repeat: no-repeat; + background-size: cover; + background-position: center; + background-image: url('http://brittanychiang.com/img/404-bg.jpg'); + + &:before { + content: ''; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + background: #141E30; + background: -webkit-linear-gradient(to bottom, #141E30 , #243B55); + background: linear-gradient(to bottom, #141E30 , #243B55); + opacity: 0.7; + } + } + .count-particles { + background: #000022; + position: absolute; + top: 48px; + left: 0; + width: 80px; + color: #13E8E9; + font-size: .8em; + text-align: left; + text-indent: 4px; + line-height: 14px; + padding-bottom: 2px; + font-family: Helvetica, Arial, sans-serif; + font-weight: bold; + display: none; + } + .js-count-particles { + font-size: 1.1em; + } + #stats, + .count-particles { + -webkit-user-select: none; + margin-top: 5px; + margin-left: 5px; + } + #stats { + border-radius: 3px 3px 0 0; + overflow: hidden; + } + .count-particles { + border-radius: 0 0 3px 3px; + } + .text-container { + text-align: center; + cursor: default; + position: relative; + top: 25vh; + .text { + display: inline-block; + color: #fff; + font-weight: 500; + line-height: 1; + text-transform: uppercase; + z-index: 2; + position: relative; + h1 { + font-family: $Gotham, $sans-serif-stack; + font-size: 10em; + font-weight: 500; + margin: 0 auto; + text-shadow: 0 5px 5px rgba(0,0,0,.5); + } + h3 { + font-size: 1em; + font-weight: 700; + margin: 15px 0 75px; + text-shadow: 0 3px 5px rgba(0,0,0,.5); + } + a { + display: block; + width: 200px; + margin: 0 auto; + color: $white; + background: #ab473c; + font-size: 0.95em; + text-decoration: none; + padding: 15px; + border-radius: 30px; + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.25); + &:hover { + background: #c74739; + } + } + } + } +} diff --git a/_scss/partials/_about.scss b/_scss/partials/_about.scss new file mode 100644 index 0000000..566ce98 --- /dev/null +++ b/_scss/partials/_about.scss @@ -0,0 +1,50 @@ +#about-section { + .section-subheading { + width: 60%; + font-size: 1.2em; + font-weight: 500; + line-height: 1.5; + margin-top: 1em; + @include MQ(ML) { + width: 100%; + } + } + .about-wrapper { + padding-right: 20px; + @include MQ(MM) { + padding: 0; + } + .about-text-wrapper { + display: inline-block; + width: 60%; + vertical-align: top; + @include MQ(MM) { + width: 100%; + } + .about-text { + margin-bottom: 10px; + font-size: 1.15em; + } + } + .headshot { + display: inline-block; + width: 35%; + height: auto; + border-radius: 50%; + margin-top: -100px; + float: right; + max-width: 450px; + @include MQ(ML) { + margin-top: 0px; + } + @include MQ(MM) { + float: none; + margin: 10px 0 40px 0; + width: 300px; + } + @include MQ(S400) { + width: 250px; + } + } + } +} \ No newline at end of file diff --git a/_scss/partials/_blockBtn.scss b/_scss/partials/_blockBtn.scss new file mode 100644 index 0000000..87b6e68 --- /dev/null +++ b/_scss/partials/_blockBtn.scss @@ -0,0 +1,54 @@ +.block-btn { + display: block; + width: 100%; + min-height: 100px; + overflow: hidden; + color: $white; + position: relative; + background: #00909c; + font-family: $Gotham, $sans-serif-stack; + font-size: 1em; + font-weight: 700; + text-transform: uppercase; + text-align: center; + letter-spacing: 1px; + overflow: hidden; + transition: background-color 0.5s linear; + &:hover { + background: $blue; + transition: all 0.3s ease; + .resume-text { + opacity: 0; + visibility: hidden; + transform: translate3D(0, 4em, 0) scale(.25); + } + .resume-img { + opacity: 1; + visibility: visible; + transform: translate3D(0, 0, 0) scale(1); + } + } + .resume-text, + .resume-img { + position: absolute; + top: 0; + left: 0; + right: 0; + text-align: center; + } + .resume-text { + margin: 40px auto; + opacity: 1; + visibility: visible; + transition: transform .4s cubic-bezier(.425, -.195, .005, 1.215), opacity .13333s linear, -webkit-transform .4s cubic-bezier(.425, -.195, .005, 1.215); + transform: scale(1); + } + .resume-img { + width: 50px; + margin: 25px auto; + opacity: 0; + visibility: hidden; + transition: transform .4s cubic-bezier(.425, -.195, .005, 1.215), opacity .4s linear, -webkit-transform .4s cubic-bezier(.425, -.195, .005, 1.215); + transform: translate3D(0, -4em, 0) scale(0); + } +} diff --git a/_scss/partials/_contact.scss b/_scss/partials/_contact.scss new file mode 100644 index 0000000..1eadfe3 --- /dev/null +++ b/_scss/partials/_contact.scss @@ -0,0 +1,130 @@ +#contact-section { + .contact-description { + margin: 0 auto; + max-width: 440px; + font-size: 1.2em; + @include MQ(L) { + padding: 0; + } + } + .form-wrapper { + width: 500px; + margin: 20px auto; + padding: 0; + @include MQ(S600) { + width: 90%; + } + @include MQ(S400) { + width: 95%; + } + .input-wrapper { + padding: 0; + margin-bottom: 10px; + position: relative; + transition: all 0.5s ease; + @include MQ(M) { + margin-bottom: 10px; + } + @include MQ(SM) { + margin-bottom: 5px; + } + &:before { + content: ""; + position: absolute; + display: block; + width: 100%; + height: 2px; + background-color: $grey; + bottom: 0; + left: 0; + transition: all 0.5s ease; + } + &:after { + background-color: #00b7c7; + content: ""; + position: absolute; + display: block; + width: 0px; + height: 2px; + bottom: 0; + left: 0; + transition: all 0.5s ease; + } + .input-label { + display: block; + padding-left: 4px; + font-size: 1.15em; + font-weight: 500; + transform: translateY(25px); + color: $white; + transition: all 0.5s ease; + } + .contact-input { + position: relative; + background: transparent; + width: 100%; + border: none; + padding: 20px 0 10px; + margin-bottom: -10px; + font-size: 1em; + line-height: 1.3; + color: $white; + font-family: $Whitney, $sans-serif-stack; + resize: none; + display: block; + overflow: hidden; + box-sizing: padding-box; + transition: all 0.5s ease; + &:focus { + outline: 0; + color: $white; + } + } + } + .is-active, + .is-completed { + padding: 15px 0 0 0; + } + .is-active:after { + width: 100%; + } + .is-active .input-label { + color: #00b7c7; + } + .is-completed .input-label { + font-size: 14px; + font-weight: 700; + transform: translateY(0); + padding: 0; + } + .is-completed .contact-input { + padding-top: 10px; + } + .message-btn { + display: block; + text-align: center; + cursor: pointer; + text-transform: uppercase; + font-weight: 700; + font-size: 14px; + font-family: $Gotham, $sans-serif-stack; + line-height: 1.5; + padding: 12px 20px 10px; + margin: 70px auto 0; + color: $blue; + background: transparent; + border: 2px solid $blue; + border-radius: 3px; + position: relative; + overflow: hidden; + transition: all 0.3s ease; + &:hover { + color: $white; + background: $blue; + } + } + #message-label { + margin-bottom: 10px; + } + } +} diff --git a/_scss/partials/_dotNav.scss b/_scss/partials/_dotNav.scss new file mode 100644 index 0000000..12f70aa --- /dev/null +++ b/_scss/partials/_dotNav.scss @@ -0,0 +1,55 @@ +#dot-nav { + position: fixed; + right: 34px; + @include center(y); + z-index: 1; + display: none; + @include MQ(M) { + display: none; + } + .dot-container { + text-align: right; + } + a { + display: inline-block; + @include clearfix; + backface-visibility: hidden; + span { + float: right; + display: inline-block; + transform: scale(0.6); + } + &:hover span { + transform: scale(0.75); + } + &:hover .dot-label { + opacity: 1; + } + &.is-selected .dot { + background-color: $blue; + } + } + .dot { + position: relative; + top: 7px; + height: 20px; + width: 20px; + border-radius: 50%; + background-color: rgba(255,255,255,0.25); + transition: transform 0.2s, background-color 0.5s; + transform-origin: 50% 50%; + } + .dot-label { + position: relative; + top: 3px; + padding: 0.4em .5em; + color: $white; + font-family: $Gotham, $sans-serif-stack; + font-size: 1em; + font-weight: 500; + text-transform: uppercase; + opacity: 0; + transition: transform 0.2s, opacity 0.2s; + transform-origin: 100% 50%; + } +} diff --git a/_scss/partials/_experience.scss b/_scss/partials/_experience.scss new file mode 100644 index 0000000..368a48c --- /dev/null +++ b/_scss/partials/_experience.scss @@ -0,0 +1,308 @@ +#experience-section { + .experience-description { + padding: 0 100px; + font-size: 1.2em; + @include MQ(L) { + padding: 0; + } + a { + display: inline-block; + position: relative; + font-weight: 500; + transition: all 0.3s ease; + &:after { + content: ''; + width: 100%; + position: absolute; + left: 0; + bottom: 2px; + border-width: 0 0 .5px; + border-style: solid; + border-color: $white; + transition: all 0.3s ease; + } + } + } + .experience-wrapper { + padding: 30px; + @include MQ(ML) { + padding-left: 0; + } + @include MQ(S600) { + padding: 30px 0; + } + #timeline { + position: relative; + padding: 2em 0; + margin: 0 auto; + width: 100%; + max-width: 1170px; + margin: 0 auto; + &:before { + content: ''; + position: absolute; + top: 0; + left: calc(50% - 1px); + height: 100%; + width: 2px; + background: $blue; + @include MQ(ML) { + left: 20px; + margin-left: 0px; + } + @include MQ(SM) { + left: 10px; + } + } + &:after { + content: ''; + display: table; + clear: both; + } + .timeline-block { + position: relative; + transition: all 0.3s ease; + margin: 1em 0; + &:after { + content: ""; + display: table; + clear: both; + } + &:first-child { + margin-top: 0; + } + &:last-child { + margin-bottom: 0; + } + &:nth-child(odd) { + @include MQ(L) { + margin-top: 0; + margin-bottom: 2em; + } + .timeline-content { + float: left; + @include MQ(L) { + right: 10px; + } + @include MQ(ML) { + right: auto; + } + &:before { + top: 24px; + left: 100%; + border-color: transparent; + border-left-color: $dark-grey; + @include MQ(ML) { + top: 16px; + left: auto; + border-color: transparent; + border-right-color: $dark-grey; + } + } + .date { + left: auto; + text-align: right; + right: -33%; + } + } + } + &:nth-child(even) { + .date { + text-align: right; + left: auto; + right: 55%; + @include MQ(ML) { + text-align: left; + font-size: 14px; + color: $light-grey; + position: relative; + top: -40px; + left: 95px; + right: auto; + } + @include MQ(SM) { + left: 66px; + } + } + } + .timeline-img { + position: absolute; + width: 50px; + height: 50px; + top: 15px; + left: 50%; + margin-left: -25px; + border-radius: 50%; + background: #212121; + transform: translateZ(0); + backface-visibility: hidden; + transition: all 0.3s ease; + @include MQ(ML) { + top: 5px; + left: 20px; + } + @include MQ(SM) { + width: 40px; + height: 40px; + top: 10px; + left: 15px; + } + .sprite { + display: block; + width: 24px; + height: 24px; + position: relative; + left: 50%; + top: 50%; + margin-left: -12px; + margin-top: -12px; + background-repeat: no-repeat; + background-size: 100%; + @include MQ(SM) { + width: 20px; + height: 20px; + margin-left: -10px; + margin-top: -10px; + } + &.university { + background-image: url('../img/icons/graduate-cap.png'); + } + &.research { + background-image: url('../img/icons/search.png'); + } + &.industry { + background-image: url('../img/icons/briefcase.png'); + } + &.academic { + background-image: url('../img/icons/notebook.png'); + } + } + } + .timeline-content { + float: right; + position: relative; + background: $dark-grey; + border-radius: 3px; + margin-left: 0; + padding: 1.5em; + width: 45%; + opacity: 0.85; + transition: all 0.3s ease; + @include MQ(L) { + left: 0px; + padding-bottom: 2.5em; + } + @include MQ(ML) { + margin-left: 70px; + right: auto; + width: auto; + } + @include MQ(SM) { + margin-left: 50px; + padding: 1.5em 1em 2.5em; + } + &:hover { + opacity: 1; + + .timeline-img { + background: $blue; + } + } + &:before { + content: ''; + position: absolute; + top: 24px; + right: 100%; + height: 0; + width: 0; + border: 15px solid transparent; + border-color: transparent; + border-right-color: $dark-grey; + @include MQ(ML) { + top: 16px; + right: 100%; + left: auto; + border: 15px solid transparent; + border-right: 15px solid $dark-grey; + } + } + &:after { + content: ""; + display: table; + clear: both; + } + .position { + color: $white; + margin: 5px 0 10px; + font-size: 18px; + display: inline-block; + text-transform: uppercase; + font-family: $Gotham, $sans-serif-stack; + } + .company { + margin: 0 0 10px 0; + font-size: 15px; + font-weight: 500; + a { + color: $blue; + display: inline; + transition: all 0.3s ease; + &:hover { + color: #00dded; + } + } + } + .job-desc { + margin: 1em 0; + font-size: 1em; + line-height: 1.5; + @include MQ(SM) { + font-size: 1em; + line-height: 1.5; + } + } + } + .date { + font-size: 1em; + font-weight: 500; + display: inline-block; + color: $white; + font-family: $Gotham, $sans-serif-stack; + text-transform: uppercase; + position: absolute; + width: 100%; + left: 55%; + top: 30px; + @include MQ(ML) { + font-size: 14px; + color: $light-grey; + position: absolute; + top: auto; + bottom: 20px; + left: 95px; + } + @include MQ(SM) { + left: 66px; + } + } + } + } + } + .down-arrow { + display: block; + margin: 0 auto; + border-color: transparent; + border-top-color: $blue; + border-style: solid; + border-width: 15px 7px 0; + width: 0; + height: 0; + position: relative; + line-height: 0; + @include MQ(ML) { + margin-left: 13.5px; + } + @include MQ(SM) { + margin-left: 3.5px; + } + } +} diff --git a/_scss/partials/_fonts.scss b/_scss/partials/_fonts.scss new file mode 100644 index 0000000..c35dd4f --- /dev/null +++ b/_scss/partials/_fonts.scss @@ -0,0 +1,89 @@ +@font-face { + font-family: 'Chronicle Display Bold'; + src: url('../fonts/chronicle-display/ChronicleDisplay-Bold.eot'); + src: url('../fonts/chronicle-display/ChronicleDisplay-Bold.eot?#iefix') format('embedded-opentype'), url('../fonts/chronicle-display/ChronicleDisplay-Bold.woff2') format('woff2'), url('../fonts/chronicle-display/ChronicleDisplay-Bold.woff') format('woff'), url('../fonts/chronicle-display/ChronicleDisplay-Bold.ttf') format('truetype'), url('../fonts/chronicle-display/ChronicleDisplay-Bold.svg#ChronicleDisplay-Bold') format('svg'); + font-weight: bold; + font-style: normal; +} + +/* ===== WHITNEY ===== */ +/* - Book 400 +** - Book Italic 400 +** - Medium 500 +** - Medium Italic 500 +** - Bold 700 +*/ + +@font-face { + font-family: 'Whitney'; + src: url('../fonts/whitney/whitney-book.woff2') format('woff2'), url('../fonts/whitney/whitney-book.woff') format('woff'), url('../fonts/whitney/whitney-book.ttf') format('truetype'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Whitney'; + src: url('../fonts/whitney/whitney-bookitalic.woff2') format('woff2'), url('../fonts/whitney/whitney-bookitalic.woff') format('woff'), url('../fonts/whitney/whitney-bookitalic.ttf') format('truetype'); + font-weight: normal; + font-style: italic; +} +@font-face { + font-family: 'Whitney'; + src: url('../fonts/whitney/whitney-medium.woff2') format('woff2'), url('../fonts/whitney/whitney-medium.woff') format('woff'), url('../fonts/whitney/whitney-medium.ttf') format('truetype'); + font-weight: 500; + font-style: normal; +} +@font-face { + font-family: 'Whitney'; + src: url('../fonts/whitney/whitney-mediumitalic.woff2') format('woff2'), url('../fonts/whitney/whitney-mediumitalic.woff') format('woff'), url('../fonts/whitney/whitney-mediumitalic.ttf') format('truetype'); + font-weight: 500; + font-style: italic; +} +@font-face { + font-family: 'Whitney'; + src: url('../fonts/whitney/whitney-bold.woff2') format('woff2'), url('../fonts/whitney/whitney-bold.woff') format('woff'), url('../fonts/whitney/whitney-bold.ttf') format('truetype'); + font-weight: 700; + font-style: normal; +} + +/* ===== GOTHAM ===== */ +/* - Book 400 +** - Medium 500 +** - Bold 700 +*/ + +@font-face { + font-family: 'Gotham'; + src: url('../fonts/gotham/Gotham-Book.eot'); + src: url('../fonts/gotham/Gotham-Book.eot?#iefix') format('embedded-opentype'), + url('../fonts/gotham/Gotham-Book.woff2') format('woff2'), + url('../fonts/gotham/Gotham-Book.woff') format('woff'), + url('../fonts/gotham/Gotham-Book.ttf') format('truetype'), + url('../fonts/gotham/Gotham-Book.svg#Gotham-Book') format('svg'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Gotham'; + src: url('../fonts/gotham/Gotham-Medium.eot'); + src: url('../fonts/gotham/Gotham-Medium.eot?#iefix') format('embedded-opentype'), + url('../fonts/gotham/Gotham-Medium.woff2') format('woff2'), + url('../fonts/gotham/Gotham-Medium.woff') format('woff'), + url('../fonts/gotham/Gotham-Medium.ttf') format('truetype'), + url('../fonts/gotham/Gotham-Medium.svg#Gotham-Medium') format('svg'); + font-weight: 500; + font-style: normal; +} + +@font-face { + font-family: 'Gotham'; + src: url('../fonts/gotham/Gotham-Bold.eot'); + src: url('../fonts/gotham/Gotham-Bold.eot?#iefix') format('embedded-opentype'), + url('../fonts/gotham/Gotham-Bold.woff2') format('woff2'), + url('../fonts/gotham/Gotham-Bold.woff') format('woff'), + url('../fonts/gotham/Gotham-Bold.ttf') format('truetype'), + url('../fonts/gotham/Gotham-Bold.svg#Gotham-Bold') format('svg'); + font-weight: bold; + font-style: normal; +} diff --git a/_scss/partials/_footer.scss b/_scss/partials/_footer.scss new file mode 100644 index 0000000..1efaca4 --- /dev/null +++ b/_scss/partials/_footer.scss @@ -0,0 +1,91 @@ +#footer { + background: linear-gradient(45deg, $blue 0%, $purple 100%); + height: 200px; + min-height: 100px; + color: $white; + @include MQ(SM) { + height: 200px; + } + .section-wrapper { + padding: 30px 0px 40px; + @include MQ(S660) { + padding: 30px 0; + } + } + .soc { + display: block; + font-size: 0; + list-style: none; + margin: 0 auto; + padding: 0; + text-align: center; + .soc-item { + display: inline-block; + margin: 1rem 0.5rem; + @include MQ(S400) { + margin: 1rem 0.3rem; + } + a { + display: block; + position: relative; + color: #fff; + width: 2.5rem; + height: 2.5rem; + position: relative; + @include MQ(S) { + width: 2.2rem; + height: 2.2rem; + } + &.icon { + color: $white; + fill: $white; + &:hover { + color: #fff; + fill: #fff; + transition: all 0.3s ease; + transform: scale(1.1) translateY(-5px); + } + } + &.instagram, + &.github { + width: 2.3rem; + height: 2.3rem; + position: relative; + top: -1px; + @include MQ(S) { + width: 2rem; + height: 2rem; + } + } + em { + font-size: 14px; + line-height: 1.5; + margin-top: -0.75em; + position: absolute; + text-align: center; + top: 50%; + right: 0; + bottom: 0; + left: 0; + } + } + } + } + .footer-logo { + width: 30px; + margin: 0 auto; + } + .copyright-wrapper { + margin-top: 25px; + font-size: 13px; + color: $white; + font-weight: 500; + p { + margin: 0; + color: $white; + } + .please { + font-size: 12px; + } + } +} diff --git a/_scss/partials/_intro.scss b/_scss/partials/_intro.scss new file mode 100644 index 0000000..2250021 --- /dev/null +++ b/_scss/partials/_intro.scss @@ -0,0 +1,172 @@ +#intro-section { + .intro-wrapper { + // background: linear-gradient(45deg, $blueRGBA , $purpleRGBA ); + padding: 0; + padding-bottom: 20px; + .intro-body { + width: 100%; + height: 101vh; + overflow: hidden; + position: relative; + display: flex; + align-items: center; + justify-content: center; + @include reveal(reveal-up, 100%); + @include reveal(reveal-down, -100%); + @keyframes loading-mask { + 0%, + 100% { + transform: scaleX(0); + } + 40%, + 60% { + transform: scaleX(1); + } + } + .intro-content { + text-align: center; + padding: 0 5%; + width: 100%; + position: relative; + top: -5%; + .heading, + .heading .name, + .subtext, + .btn { + opacity: 0; + animation-duration: 0.8s; + animation-delay: 0.3s; + animation-fill-mode: forwards; + .no-cssanimations & { + opacity: 1; + } + } + .heading { + font-size: 4.5em; + font-weight: 700; + position: relative; + padding-bottom: 10px; + color: transparent; + overflow: hidden; + opacity: 1; + @include MQ(M) { + .name:before { + top: calc(100% + 18px); + } + } + @include MQ(SM) { + font-size: 4em; + } + &:after { + content: attr(data-content); + position: absolute; + top: 0; + left: 0; + height: 100%; + width: 100%; + color: $white; + animation-name: reveal-up; + animation-fill-mode: backwards; + animation-duration: 0.4s; + animation-delay: 0.7s; + } + .name { + position: relative; + display: inline-block; + opacity: 1; + &:before { + /* this is the line */ + content: ''; + position: absolute; + top: calc(100% + 8px); + left: -1em; + height: 2px; + width: calc(100% + 2em); + background-color: $white; + animation: loading-mask 1s .3s both; + } + } + } + .action-wrapper { + overflow: hidden; + .subtext { + position: relative; + margin: 0; + padding: 0; + animation-name: reveal-down; + animation-duration: 0.4s; + animation-delay: 0.7s; + .btn { + display: inline-block; + padding: 1.2em 0; + font-size: 1.3rem; + font-weight: 500; + line-height: 1.5; + color: $white; + text-transform: uppercase; + font-family: $Gotham, $sans-serif-stack; + opacity: 1; + margin: 0; + @include MQ(SM) { + font-size: 1.1em; + } + } + } + } + } + .scroll-down-wrapper { + position: absolute; + bottom: 50px; + left: 0; + right: 0; + margin: 0 auto; + text-align: center; + color: $white; + .scroll-down { + display: block; + width: 70px; + margin: 0 auto; + transition: all 0.3s ease; + &:hover { + transition: all 0.3s ease; + .logo { + opacity: 0; + } + .scroll-down-text { + opacity: 1; + visibility: visible; + } + } + .logo { + width: 35px; + transition: opacity 0.5s ease, visibility 0.5s; + } + .scroll-down-text { + color: $white; + font-family: $Gotham, $sans-serif-stack; + text-transform: uppercase; + font-size: 12px; + font-weight: 700; + text-align: center; + height: 100%; + opacity: 0; + padding-top: 0.5em; + position: absolute; + top: 0; + left: 0; + right: 0; + transition: opacity 0.5s ease, visibility 0.5s; + visibility: hidden; + width: 100%; + .chevron { + transform: rotate(90deg); + height: 20px; + display: block; + margin: 10px auto; + } + } + } + } + } + } +} diff --git a/_scss/partials/_mixins.scss b/_scss/partials/_mixins.scss new file mode 100644 index 0000000..81b073f --- /dev/null +++ b/_scss/partials/_mixins.scss @@ -0,0 +1,43 @@ +// center vertically and/or horizontally an absolute positioned element +@mixin center($xy:xy) { + @if $xy==xy { + left: 50%; + top: 50%; + bottom: auto; + right: auto; + transform: translateX(-50%) translateY(-50%); + } + @else if $xy==x { + left: 50%; + right: auto; + transform: translateX(-50%); + } + @else if $xy==y { + top: 50%; + bottom: auto; + transform: translateY(-50%); + } +} + +@mixin box-shadow($top, $left, $blur, $color, $inset: false) { + @if $inset { + box-shadow: inset $top $left $blur $color; + } + @else { + box-shadow: $top $left $blur $color; + } +} + +// define different reveal animations +@mixin reveal($animation, $value) { + @include keyframes($animation) { + 0% { + opacity: 1; + transform: translateY($value); + } + 100% { + opacity: 1; + transform: translateY(0); + } + } +} diff --git a/_scss/partials/_mobileMenu.scss b/_scss/partials/_mobileMenu.scss new file mode 100644 index 0000000..70c70f2 --- /dev/null +++ b/_scss/partials/_mobileMenu.scss @@ -0,0 +1,183 @@ +#toggle { + position: fixed; + top: 25px; + right: 25px; + height: $button-height; + width: $button-width; + cursor: pointer; + z-index: 100; + display: none; + transition: opacity 0.25s ease; + @include MQ(M) { + display: block; + } + &:hover { + opacity: 0.7; + } + &.active { + .line { + background: $white; + } + .top { + transform: translateY(10px) translateX(0) rotate(45deg); + } + .middle { + opacity: 0; + } + .bottom { + transform: translateY(-10px) translateX(0) rotate(-45deg); + } + } + .line { + background: $white; + border: none; + border-radius: 30px; + cursor: pointer; + width: 100%; + height: 3px; + position: absolute; + top: 0; + left: 0; + transition: all 0.35s ease; + &.middle { + top: 10px; + } + &.bottom { + top: 20px; + } + } +} + +.overlay { + position: fixed; + background: rgba(0, 183, 199, 0.95); + top: 0; + left: 0; + width: 100%; + height: 100%; + opacity: 0; + visibility: hidden; + overflow: hidden; + z-index: 10; + transition: 0.3s; + &.open { + height: 100%; + z-index: 10; + opacity: 1; + visibility: visible; + overflow: hidden; + .menu-item { + animation: fadeInTop 0.5s ease forwards; + animation-delay: 0.35s; + &:nth-of-type(2) { + animation-delay: 0.4s; + } + &:nth-of-type(3) { + animation-delay: 0.45s; + } + &:nth-of-type(4) { + animation-delay: 0.5s; + } + &:nth-of-type(5) { + animation-delay: 0.55s; + } + &:nth-of-type(6) { + animation-delay: 0.6s; + } + &:nth-of-type(7) { + animation-delay: 0.65s; + } + } + } + .logo { + color: $white; + font-family: $Chronicle, $serif-stack; + font-size: 30px; + margin: 14px 20px; + @include MQ(S400) { + font-size: 24px; + margin: 17px 20px; + } + .logo-img { + width: 35px; + margin-right: 10px; + position: relative; + top: 5px; + @include MQ(S400) { + width: 30px; + top: 5px; + } + } + } + .overlay-menu { + position: relative; + height: 70%; + transform: translateY(-50%); + top: 45%; + font-size: 1.5em; + font-family: $Gotham, $sans-serif-stack; + font-weight: 700; + text-align: center; + .menu-container { + list-style: none; + padding: 0; + margin: 0 auto; + display: inline-block; + position: relative; + height: 100%; + .menu-item { + display: block; + height: 14.25%; + height: calc(100% / 7); + min-height: 50px; + position: relative; + opacity: 0; + a { + position: relative; + color: $white; + text-decoration: none; + text-transform: uppercase; + overflow: hidden; + &:before, + &:after { + content: ''; + position: absolute; + width: 0%; + height: 2px; + top: 50%; + background: $white; + margin-top: -2px; + left: -3px; + } + &:after { + transition: width 0.7s cubic-bezier(0.22, 0.61, 0.36, 1); + } + &:hover { + &:before, + &:after { + width: 105%; + } + &:before { + transition: width 0.5s cubic-bezier(0.22, 0.61, 0.36, 1); + } + &:after { + background: transparent; + transition: 0s; + } + } + } + } + } + } +} + +@keyframes fadeInTop { + 0% { + opacity: 0; + bottom: 20%; + } + 100% { + opacity: 1; + bottom: 0; + } +} diff --git a/_scss/partials/_portfolio.scss b/_scss/partials/_portfolio.scss new file mode 100644 index 0000000..73ad6ef --- /dev/null +++ b/_scss/partials/_portfolio.scss @@ -0,0 +1,251 @@ +#portfolio-section { + .section-wrapper { + padding-bottom: 50px; + } + a { + display: inline-block; + } + .portfolio-item-wrapper { + .divider { + &:last-of-type { + display: none; + } + } + } + .portfolio-row { + margin: 0; + padding-top: 50px; + display: block; + .screenshots { + position: relative; + overflow: hidden; + display: block; + width: 95%; + &:before, + &:after { + box-sizing: inherit; + padding: 0; + margin: 0; + } + &:after { + display: block; + padding-top: 45.5%; + content: ""; + } + &.screentime { + &:after { + display: block; + padding-top: 5.5%; + content: ""; + @include MQ(MM) { + padding-top: 7.5%; + } + @include MQ(S660) { + padding-top: 10%; + } + @include MQ(SM) { + padding-top: 15%; + } + } + } + .img-lg, + .img-md, + .img-sm { + border: 0; + position: absolute; + right: 0; + bottom: 0; + border-radius: 2px; + box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.75); + &:after { + content: ""; + display: block; + } + } + .img-lg { + width: 70%; + left: 0; + z-index: 1; + &:after { + padding-top: 65%; + } + } + .img-md { + width: 27%; + right: 14%; + z-index: 2; + &:after { + padding-top: 110%; + } + } + .img-sm { + width: 15%; + right: 1rem; + z-index: 3; + box-shadow: 0 5px 5px 0 rgba(0,0,0,.75); + &:after { + padding-top: 145%; + } + } + .img-screentime { + position: relative; + top: 0px; + border: 0; + border-radius: 2px; + box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.75); + width: 26%; + margin-right: -20px; + @include MQ(M) { + width: 27%; + } + @include MQ(SM) { + width: 25%; + margin-right: -10px; + } + &:nth-of-type(2) { + top: 15px; + @include MQ(S600) { + top: 10px; + } + } + &:nth-of-type(3) { + top: 30px; + @include MQ(S600) { + top: 20px; + } + } + &:nth-of-type(4) { + top: 45px; + @include MQ(S600) { + top: 30px; + } + } + &:after { + content: ""; + display: block; + } + } + } + .description-title-container { + position: relative; + width: 90%; + margin-top: 30px; + margin-left: 1em; + align-items: baseline; + display: -webkit-flex; + -webkit-flex-wrap: nowrap; + -webkit-flex-direction: row; + -webkit-justify-content: flex-end; + -webkit-align-content: stretch; + display: flex; + flex-wrap: nowrap; + flex-direction: row; + justify-content: flex-end; + align-content: stretch; + @include MQ(M) { + width: 95%; + } + @include MQ(S660) { + width: 100%; + margin-left: 0; + } + @include MQ(S600) { + display: block; + } + .description-title { + flex: 1; + margin-bottom: 20px; + font-family: $Gotham, $sans-serif-stack; + text-transform: uppercase; + } + .description-buttons { + a { + padding: 10px 15px; + background: transparent; + border: 2px solid $blue; + border-radius: 3px; + margin: 0 5px; + color: $blue; + font-family: $Gotham, $sans-serif-stack; + font-weight: 500; + text-transform: uppercase; + transition: all 0.3s ease; + @include MQ(S660) { + font-size: 14px; + padding: 7px 10px; + } + @include MQ(S600) { + margin: 0 10px 30px 0; + } + &:hover { + background: $blue; + color: $white; + } + } + } + } + .portfolio-description { + display: block; + width: 90%; + margin-top: 15px; + margin-left: 1rem; + margin-bottom: 25px; + font-size: 1.1em; + color: $almostWhite; + @include MQ(S660) { + width: 100%; + margin-left: 0; + margin-top: 10px; + } + @include MQ(SM) { + font-size: 1em; + } + a { + position: relative; + font-weight: 500; + color: $almostWhite; + &:after { + content: ''; + width: 100%; + position: absolute; + left: 0; + bottom: 2px; + border-width: 0 0 .5px; + border-style: solid; + border-color: $almostWhite; + } + } + } + .used { + display: block; + width: 90%; + font-family: $Gotham, $sans-serif-stack; + margin-bottom: 100px; + @include MQ(M) { + margin-bottom: 70px; + } + @include MQ(S400) { + margin-bottom: 50px; + } + .used-items { + margin-left: 1em; + @include MQ(S660) { + margin-left: 0; + } + .used-item { + display: inline-block; + padding: 7px 7px 5px; + margin-right: 5px; + margin-bottom: 10px; + color: $light-grey; + background: #333; + border-radius: 3px; + text-transform: uppercase; + font-size: 10px; + font-weight: 500; + letter-spacing: .5px; + } + } + } + } +} diff --git a/_scss/partials/_services.scss b/_scss/partials/_services.scss new file mode 100644 index 0000000..ef903a6 --- /dev/null +++ b/_scss/partials/_services.scss @@ -0,0 +1,127 @@ +#services-section { + a { + display: inline-block; + position: relative; + &:after { + content: ''; + width: 100%; + position: absolute; + left: 0; + bottom: 2px; + border-width: 0 0 .5px; + border-style: solid; + border-color: #cbcbcb; + } + } + .services-wrapper { + width: 100%; + margin: 0 auto; + padding: 20px; + @include MQ(ML) { + padding: 0; + } + } + .service-row { + width: 100%; + height: 50%; + @include MQ(S660) { + height: auto; + } + &:nth-of-type(odd) { + border-bottom: 1px solid $whiteRGBA; + @include MQ(S660) { + border: none; + } + } + &:nth-of-type(even) { + .service-column { + padding-top: 40px; + @include MQ(S660) { + padding-top: 20px; + } + } + } + .service-column { + display: inline-block; + vertical-align: top; + width: 49%; + height: 100%; + padding: 20px; + overflow: hidden; + white-space: nowrap; + @include MQ(S660) { + display: block; + width: 100%; + border: none; + } + @include MQ(SM) { + padding: 20px 0; + } + &:nth-of-type(odd) { + border-right: 1px solid $whiteRGBA; + @include MQ(S660) { + border: none; + } + } + .service-img { + width: 40px; + margin-right: 15px; + display: inline-block; + vertical-align: middle; + position: relative; + top: -5px; + } + .sprite { + width: 40px; + height: 40px; + margin-right: 15px; + display: inline-block; + vertical-align: middle; + position: relative; + top: -3px; + background-repeat: no-repeat; + background-position: center center; + background-size: 100%; + @include MQ(S400) { + width: 35px; + height: 35px; + } + &.webdev { + background-image: url('../img/icons/html.png'); + } + &.ui { + background-image: url('../img/icons/pencil.png'); + background-size: 90%; + } + &.xd { + background-image: url('../img/icons/ux-design.png'); + } + &.wit { + background-image: url('../img/icons/internet.png'); + background-size: 90%; + } + } + .service-heading { + font-family: $Gotham, $sans-serif-stack; + text-transform: uppercase; + margin: 0 0 30px; + font-size: 20px; + display: inline-block; + @include MQ(L) { + font-size: 2vw; + } + @include MQ(S660) { + font-size: 4vw; + } + @include MQ(S440) { + font-size: 16px; + } + } + .service-text { + font-size: 1.1em; + margin-bottom: 20px; + white-space: initial; + } + } + } +} diff --git a/_scss/partials/_skills.scss b/_scss/partials/_skills.scss new file mode 100644 index 0000000..877950a --- /dev/null +++ b/_scss/partials/_skills.scss @@ -0,0 +1,177 @@ +#skills-section { + .skills-flex-wrapper, + .flex-item, + .check-wrapper { + display: flex; + } + .skills-flex-wrapper { + font: 100 30px 'Whitney'; + height: 17em; + flex-flow: column wrap; + @include MQ(M) { + display: block; + height: auto; + } + .skills-heading { + font-family: $Gotham, $sans-serif-stack; + text-transform: uppercase; + font-weight: 700; + font-size: 1.5vw; + @include MQ(M) { + font-size: 18px; + } + .sprite { + width: 35px; + height: 35px; + margin-right: 10px; + position: relative; + top: 7px; + display: inline-block; + vertical-align: text-bottom; + background-repeat: no-repeat; + background-position: center center; + background-size: 100%; + &.dev { + background-image: url('../img/icons/settings.png'); + } + &.design { + background-image: url('../img/icons/design.png'); + background-size: 90%; + } + &.tools { + background-image: url('../img/icons/repair-tools.png'); + background-size: 90%; + } + &.knowledge { + background-image: url('../img/icons/light-bulb.png'); + } + } + } + .flex-item { + flex: 0 0 auto; + min-height: 200px; + background: transparent; + padding: 15px; + @include MQ(L) { + padding-right: 0; + } + @include MQ(SM) { + padding: 0; + } + @include MQ(S440) { + display: block; + } + &:nth-child(1) { + width: 40%; + max-width: 400px; + min-height: 450px; + @include MQ(L) { + width: 37%; + } + @include MQ(ML) { + width: 45%; + } + @include MQ(M) { + width: 100%; + min-height: 50px; + } + } + &:nth-child(2) { + width: 60%; + min-height: 151px; + @include MQ(ML) { + width: 55%; + } + @include MQ(M) { + width: 100%; + } + } + &:nth-child(3) { + min-height: 299px; + width: 60%; + @include MQ(ML) { + width: 55%; + } + @include MQ(M) { + width: 100%; + } + } + } + .dev-wrapper { + display: block; + .dev-item { + display: inline-block; + border: 2px solid rgba(57,57,57,.5); + border-radius: 50%; + text-align: center; + margin: 10px 10px 10px 0; + padding: 0px; + width: 100px; + height: 100px; + line-height: 7; + font-size: 14px; + @include MQ(L) { + width: 80px; + height: 80px; + font-size: 14px; + line-height: 5.5; + margin: 5px 5px 5px 0; + } + @include MQ(M) { + width: 100px; + height: 100px; + line-height: 7; + margin: 1%; + } + @include MQ(SM) { + width: 80px; + height: 80px; + line-height: 5.5; + } + } + } + .design-wrapper { + display: block; + .design-item { + display: inline-block; + margin: 10px; + @include MQ(L) { + margin: 10px 5px; + } + .item-img { + height: 40px; + filter: grayscale(100%); + } + } + } + } + .check-wrapper { + .tools-wrapper, + .knowledge-wrapper { + width: 50%; + display: inline-block; + vertical-align: top; + overflow: hidden; + white-space: nowrap; + @include MQ(S440) { + display: block; + width: 100%; + } + .list { + margin-top: 30px; + margin-left: 20px; + .list-item { + margin: 10px 0; + font-size: 16px; + .item-svg { + margin-right: 10px; + width: 12px; + height: 12px; + color: #fff; + fill: #fff; + } + } + } + } + } +} diff --git a/_scss/partials/_variables.scss b/_scss/partials/_variables.scss new file mode 100644 index 0000000..3572c69 --- /dev/null +++ b/_scss/partials/_variables.scss @@ -0,0 +1,67 @@ +// Colors +$button-height: 27px; +$button-width: 30px; +$black: #070707; +$color255: rgba(255, 255, 255, 0.8); +$darkest-grey: #555; +$dark-grey: #1b1b1b; +$light-grey: #777777; +$grey: #707070; +$white: #f2f2f2; +$almostWhite: #cbcbcb; +$whiteRGBA: rgba(242,242,242,0.3); +$blue: #00b7c7; +$blueRGBA: rgba(0, 183, 199, 0.7); +$purple: #4d0ce8; +$purpleRGBA: rgba(77, 12, 232, 0.7); +$overlayOpacity: 0.61; +// Fonts +$Chronicle: 'Chronicle Display Bold'; +$serif-stack: Georgia, serif; +$Gotham: 'Gotham'; +$Whitney: 'Whitney'; +$sans-serif-stack: Helvetica, Arial, sans-serif; +// Breakpoints +$S: 330px; +$S400: 400px; +$S440: 440px; +$SM: 480px; +$S600: 600px; +$S660: 660px; +$M: 768px; +$MM: 900px; +$ML: 1000px; +$L: 1170px; +// Media queries +@mixin MQ($canvas) { + @if $canvas==S { + @media only screen and (max-width: $S) { @content; } + } + @else if $canvas==S400 { + @media only screen and (max-width: $S400) { @content; } + } + @else if $canvas==S440 { + @media only screen and (max-width: $S440) { @content; } + } + @else if $canvas==SM { + @media only screen and (max-width: $SM) { @content; } + } + @else if $canvas==S600 { + @media only screen and (max-width: $S600) { @content; } + } + @else if $canvas==S660 { + @media only screen and (max-width: $S660) { @content; } + } + @else if $canvas==M { + @media only screen and (max-width: $M) { @content; } + } + @else if $canvas==MM { + @media only screen and (max-width: $MM) { @content; } + } + @else if $canvas==ML { + @media only screen and (max-width: $ML) { @content; } + } + @else if $canvas==L { + @media only screen and (max-width: $L) { @content; } + } +} diff --git a/css/main.css b/css/main.css new file mode 100644 index 0000000..f91f659 --- /dev/null +++ b/css/main.css @@ -0,0 +1 @@ +#footer .soc,ul{list-style:none}@font-face{font-family:'Chronicle Display Bold';src:url(../fonts/chronicle-display/ChronicleDisplay-Bold.eot);src:url(../fonts/chronicle-display/ChronicleDisplay-Bold.eot?#iefix) format("embedded-opentype"),url(../fonts/chronicle-display/ChronicleDisplay-Bold.woff2) format("woff2"),url(../fonts/chronicle-display/ChronicleDisplay-Bold.woff) format("woff"),url(../fonts/chronicle-display/ChronicleDisplay-Bold.ttf) format("truetype"),url(../fonts/chronicle-display/ChronicleDisplay-Bold.svg#ChronicleDisplay-Bold) format("svg");font-weight:700;font-style:normal}@font-face{font-family:Whitney;src:url(../fonts/whitney/whitney-book.woff2) format("woff2"),url(../fonts/whitney/whitney-book.woff) format("woff"),url(../fonts/whitney/whitney-book.ttf) format("truetype");font-weight:400;font-style:normal}@font-face{font-family:Whitney;src:url(../fonts/whitney/whitney-bookitalic.woff2) format("woff2"),url(../fonts/whitney/whitney-bookitalic.woff) format("woff"),url(../fonts/whitney/whitney-bookitalic.ttf) format("truetype");font-weight:400;font-style:italic}@font-face{font-family:Whitney;src:url(../fonts/whitney/whitney-medium.woff2) format("woff2"),url(../fonts/whitney/whitney-medium.woff) format("woff"),url(../fonts/whitney/whitney-medium.ttf) format("truetype");font-weight:500;font-style:normal}@font-face{font-family:Whitney;src:url(../fonts/whitney/whitney-mediumitalic.woff2) format("woff2"),url(../fonts/whitney/whitney-mediumitalic.woff) format("woff"),url(../fonts/whitney/whitney-mediumitalic.ttf) format("truetype");font-weight:500;font-style:italic}@font-face{font-family:Whitney;src:url(../fonts/whitney/whitney-bold.woff2) format("woff2"),url(../fonts/whitney/whitney-bold.woff) format("woff"),url(../fonts/whitney/whitney-bold.ttf) format("truetype");font-weight:700;font-style:normal}@font-face{font-family:Gotham;src:url(../fonts/gotham/Gotham-Book.eot);src:url(../fonts/gotham/Gotham-Book.eot?#iefix) format("embedded-opentype"),url(../fonts/gotham/Gotham-Book.woff2) format("woff2"),url(../fonts/gotham/Gotham-Book.woff) format("woff"),url(../fonts/gotham/Gotham-Book.ttf) format("truetype"),url(../fonts/gotham/Gotham-Book.svg#Gotham-Book) format("svg");font-weight:400;font-style:normal}@font-face{font-family:Gotham;src:url(../fonts/gotham/Gotham-Medium.eot);src:url(../fonts/gotham/Gotham-Medium.eot?#iefix) format("embedded-opentype"),url(../fonts/gotham/Gotham-Medium.woff2) format("woff2"),url(../fonts/gotham/Gotham-Medium.woff) format("woff"),url(../fonts/gotham/Gotham-Medium.ttf) format("truetype"),url(../fonts/gotham/Gotham-Medium.svg#Gotham-Medium) format("svg");font-weight:500;font-style:normal}@font-face{font-family:Gotham;src:url(../fonts/gotham/Gotham-Bold.eot);src:url(../fonts/gotham/Gotham-Bold.eot?#iefix) format("embedded-opentype"),url(../fonts/gotham/Gotham-Bold.woff2) format("woff2"),url(../fonts/gotham/Gotham-Bold.woff) format("woff"),url(../fonts/gotham/Gotham-Bold.ttf) format("truetype"),url(../fonts/gotham/Gotham-Bold.svg#Gotham-Bold) format("svg");font-weight:700;font-style:normal}#dot-nav{position:fixed;right:34px;top:50%;bottom:auto;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);z-index:1;display:none}#dot-nav .dot-container{text-align:right}#dot-nav a{display:inline-block;-webkit-backface-visibility:hidden;backface-visibility:hidden}#dot-nav a::after{clear:both;content:"";display:table}#dot-nav a span{float:right;display:inline-block;-webkit-transform:scale(.6);-ms-transform:scale(.6);transform:scale(.6)}#dot-nav a:hover span{-webkit-transform:scale(.75);-ms-transform:scale(.75);transform:scale(.75)}#dot-nav a:hover .dot-label{opacity:1}#dot-nav a.is-selected .dot{background-color:#00b7c7}#dot-nav .dot{position:relative;top:7px;height:20px;width:20px;-webkit-border-radius:50%;border-radius:50%;background-color:rgba(255,255,255,.25);-webkit-transition:background-color .5s,-webkit-transform .2s;transition:background-color .5s,-webkit-transform .2s;transition:transform .2s,background-color .5s;transition:transform .2s,background-color .5s,-webkit-transform .2s;-webkit-transform-origin:50% 50%;-ms-transform-origin:50% 50%;transform-origin:50% 50%}#toggle .line,#toggle.active .line{background:#f2f2f2}#dot-nav .dot-label{position:relative;top:3px;padding:.4em .5em;color:#f2f2f2;font-family:Gotham,Helvetica,Arial,sans-serif;font-size:1em;font-weight:500;text-transform:uppercase;opacity:0;-webkit-transition:opacity .2s,-webkit-transform .2s;transition:opacity .2s,-webkit-transform .2s;transition:transform .2s,opacity .2s;transition:transform .2s,opacity .2s,-webkit-transform .2s;-webkit-transform-origin:100% 50%;-ms-transform-origin:100% 50%;transform-origin:100% 50%}#toggle{position:fixed;top:25px;right:25px;height:27px;width:30px;cursor:pointer;z-index:100;display:none;-webkit-transition:opacity .25s ease;transition:opacity .25s ease}@media only screen and (max-width:768px){#dot-nav{display:none}#toggle{display:block}}#toggle:hover{opacity:.7}#toggle.active .middle,.overlay{opacity:0}#toggle.active .top{-webkit-transform:translateY(10px) translateX(0) rotate(45deg);-ms-transform:translateY(10px) translateX(0) rotate(45deg);transform:translateY(10px) translateX(0) rotate(45deg)}#toggle.active .bottom{-webkit-transform:translateY(-10px) translateX(0) rotate(-45deg);-ms-transform:translateY(-10px) translateX(0) rotate(-45deg);transform:translateY(-10px) translateX(0) rotate(-45deg)}#toggle .line{border:none;-webkit-border-radius:30px;border-radius:30px;cursor:pointer;width:100%;height:3px;position:absolute;top:0;left:0;-webkit-transition:all .35s ease;transition:all .35s ease}.overlay,.overlay.open{height:100%;z-index:10;overflow:hidden}#toggle .line.middle{top:10px}#toggle .line.bottom{top:20px}.overlay{position:fixed;background:rgba(0,183,199,.95);top:0;left:0;width:100%;visibility:hidden;-webkit-transition:.3s;transition:.3s}.overlay.open{opacity:1;visibility:visible}.overlay.open .menu-item{-webkit-animation:fadeInTop .5s ease forwards;animation:fadeInTop .5s ease forwards;-webkit-animation-delay:.35s;animation-delay:.35s}.overlay.open .menu-item:nth-of-type(2){-webkit-animation-delay:.4s;animation-delay:.4s}.overlay.open .menu-item:nth-of-type(3){-webkit-animation-delay:.45s;animation-delay:.45s}.overlay.open .menu-item:nth-of-type(4){-webkit-animation-delay:.5s;animation-delay:.5s}.overlay.open .menu-item:nth-of-type(5){-webkit-animation-delay:.55s;animation-delay:.55s}.overlay.open .menu-item:nth-of-type(6){-webkit-animation-delay:.6s;animation-delay:.6s}.overlay.open .menu-item:nth-of-type(7){-webkit-animation-delay:.65s;animation-delay:.65s}.overlay .logo{color:#f2f2f2;font-family:"Chronicle Display Bold",Georgia,serif;font-size:30px;margin:14px 20px}#intro-section .intro-wrapper .intro-body .intro-content .action-wrapper .subtext .btn,#services-section .service-row .service-column .service-heading,.block-btn,.overlay .overlay-menu{font-family:Gotham,Helvetica,Arial,sans-serif}@media only screen and (max-width:400px){.overlay .logo{font-size:24px;margin:17px 20px}}.overlay .logo .logo-img{width:35px;margin-right:10px;position:relative;top:5px}@media only screen and (max-width:400px){.overlay .logo .logo-img{width:30px;top:5px}}.overlay .overlay-menu{position:relative;height:70%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);top:45%;font-size:1.5em;font-weight:700;text-align:center}.overlay .overlay-menu .menu-container{list-style:none;padding:0;margin:0 auto;display:inline-block;position:relative;height:100%}.overlay .overlay-menu .menu-container .menu-item{display:block;height:14.25%;height:-webkit-calc(100% / 7);height:calc(100% / 7);min-height:50px;position:relative;opacity:0}.overlay .overlay-menu .menu-container .menu-item a{position:relative;color:#f2f2f2;text-decoration:none;text-transform:uppercase;overflow:hidden}.overlay .overlay-menu .menu-container .menu-item a:after,.overlay .overlay-menu .menu-container .menu-item a:before{content:'';position:absolute;width:0;height:2px;top:50%;background:#f2f2f2;margin-top:-2px;left:-3px}.overlay .overlay-menu .menu-container .menu-item a:after{-webkit-transition:width .7s cubic-bezier(.22,.61,.36,1);transition:width .7s cubic-bezier(.22,.61,.36,1)}.overlay .overlay-menu .menu-container .menu-item a:hover:after,.overlay .overlay-menu .menu-container .menu-item a:hover:before{width:105%}.overlay .overlay-menu .menu-container .menu-item a:hover:before{-webkit-transition:width .5s cubic-bezier(.22,.61,.36,1);transition:width .5s cubic-bezier(.22,.61,.36,1)}.overlay .overlay-menu .menu-container .menu-item a:hover:after{background:0 0;-webkit-transition:0s;transition:0s}@-webkit-keyframes fadeInTop{0%{opacity:0;bottom:20%}100%{opacity:1;bottom:0}}@keyframes fadeInTop{0%{opacity:0;bottom:20%}100%{opacity:1;bottom:0}}.block-btn{display:block;width:100%;min-height:100px;color:#f2f2f2;position:relative;background:#00909c;font-size:1em;font-weight:700;text-transform:uppercase;text-align:center;letter-spacing:1px;overflow:hidden;-webkit-transition:background-color .5s linear;transition:background-color .5s linear}.block-btn:hover{background:#00b7c7;-webkit-transition:all .3s ease;transition:all .3s ease}.block-btn:hover .resume-text{opacity:0;visibility:hidden;-webkit-transform:translate3D(0,4em,0) scale(.25);-ms-transform:translate3D(0,4em,0) scale(.25);transform:translate3D(0,4em,0) scale(.25)}.block-btn:hover .resume-img{opacity:1;visibility:visible;-webkit-transform:translate3D(0,0,0) scale(1);-ms-transform:translate3D(0,0,0) scale(1);transform:translate3D(0,0,0) scale(1)}.block-btn .resume-img,.block-btn .resume-text{position:absolute;top:0;left:0;right:0;text-align:center}.block-btn .resume-text{margin:40px auto;opacity:1;visibility:visible;transition:transform .4s cubic-bezier(.425,-.195,.005,1.215),opacity .13333s linear,-webkit-transform .4s cubic-bezier(.425,-.195,.005,1.215);-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}.block-btn .resume-img{width:50px;margin:25px auto;opacity:0;visibility:hidden;transition:transform .4s cubic-bezier(.425,-.195,.005,1.215),opacity .4s linear,-webkit-transform .4s cubic-bezier(.425,-.195,.005,1.215);-webkit-transform:translate3D(0,-4em,0) scale(0);-ms-transform:translate3D(0,-4em,0) scale(0);transform:translate3D(0,-4em,0) scale(0)}#intro-section .intro-wrapper{padding:0 0 20px}#intro-section .intro-wrapper .intro-body{width:100%;height:101vh;overflow:hidden;position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center}@-webkit-keyframes reveal-up{0%{opacity:1;-webkit-transform:translateY(100%);transform:translateY(100%)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes reveal-up{0%{opacity:1;-webkit-transform:translateY(100%);transform:translateY(100%)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes reveal-down{0%{opacity:1;-webkit-transform:translateY(-100%);transform:translateY(-100%)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes reveal-down{0%{opacity:1;-webkit-transform:translateY(-100%);transform:translateY(-100%)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes loading-mask{0%,100%{-webkit-transform:scaleX(0);transform:scaleX(0)}40%,60%{-webkit-transform:scaleX(1);transform:scaleX(1)}}@keyframes loading-mask{0%,100%{-webkit-transform:scaleX(0);transform:scaleX(0)}40%,60%{-webkit-transform:scaleX(1);transform:scaleX(1)}}#intro-section .intro-wrapper .intro-body .intro-content{text-align:center;padding:0 5%;width:100%;position:relative;top:-5%}#intro-section .intro-wrapper .intro-body .intro-content .btn,#intro-section .intro-wrapper .intro-body .intro-content .heading,#intro-section .intro-wrapper .intro-body .intro-content .heading .name,#intro-section .intro-wrapper .intro-body .intro-content .subtext{opacity:0;-webkit-animation-duration:.8s;animation-duration:.8s;-webkit-animation-delay:.3s;animation-delay:.3s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}.no-cssanimations #intro-section .intro-wrapper .intro-body .intro-content .btn,.no-cssanimations #intro-section .intro-wrapper .intro-body .intro-content .heading,.no-cssanimations #intro-section .intro-wrapper .intro-body .intro-content .heading .name,.no-cssanimations #intro-section .intro-wrapper .intro-body .intro-content .subtext{opacity:1}#intro-section .intro-wrapper .intro-body .intro-content .heading{font-size:4.5em;font-weight:700;position:relative;padding-bottom:10px;color:transparent;overflow:hidden;opacity:1}@media only screen and (max-width:768px){#intro-section .intro-wrapper .intro-body .intro-content .heading .name:before{top:-webkit-calc(100% + 18px);top:calc(100% + 18px)}}@media only screen and (max-width:480px){#intro-section .intro-wrapper .intro-body .intro-content .heading{font-size:4em}}#intro-section .intro-wrapper .intro-body .intro-content .heading:after{content:attr(data-content);position:absolute;top:0;left:0;height:100%;width:100%;color:#f2f2f2;-webkit-animation-name:reveal-up;animation-name:reveal-up;-webkit-animation-fill-mode:backwards;animation-fill-mode:backwards;-webkit-animation-duration:.4s;animation-duration:.4s;-webkit-animation-delay:.7s;animation-delay:.7s}#intro-section .intro-wrapper .intro-body .intro-content .heading .name{position:relative;display:inline-block;opacity:1}#intro-section .intro-wrapper .intro-body .intro-content .heading .name:before{content:'';position:absolute;top:-webkit-calc(100% + 8px);top:calc(100% + 8px);left:-1em;height:2px;width:-webkit-calc(100% + 2em);width:calc(100% + 2em);background-color:#f2f2f2;-webkit-animation:loading-mask 1s .3s both;animation:loading-mask 1s .3s both}#intro-section .intro-wrapper .intro-body .intro-content .action-wrapper{overflow:hidden}#intro-section .intro-wrapper .intro-body .intro-content .action-wrapper .subtext{position:relative;margin:0;padding:0;-webkit-animation-name:reveal-down;animation-name:reveal-down;-webkit-animation-duration:.4s;animation-duration:.4s;-webkit-animation-delay:.7s;animation-delay:.7s}#intro-section .intro-wrapper .intro-body .intro-content .action-wrapper .subtext .btn{display:inline-block;padding:1.2em 0;font-size:1.3rem;font-weight:500;line-height:1.5;color:#f2f2f2;text-transform:uppercase;opacity:1;margin:0}@media only screen and (max-width:480px){#intro-section .intro-wrapper .intro-body .intro-content .action-wrapper .subtext .btn{font-size:1.1em}}#intro-section .intro-wrapper .intro-body .scroll-down-wrapper{position:absolute;bottom:50px;left:0;right:0;margin:0 auto;text-align:center;color:#f2f2f2}#intro-section .intro-wrapper .intro-body .scroll-down-wrapper .scroll-down{display:block;width:70px;margin:0 auto;-webkit-transition:all .3s ease;transition:all .3s ease}#intro-section .intro-wrapper .intro-body .scroll-down-wrapper .scroll-down:hover{-webkit-transition:all .3s ease;transition:all .3s ease}#intro-section .intro-wrapper .intro-body .scroll-down-wrapper .scroll-down:hover .logo{opacity:0}#intro-section .intro-wrapper .intro-body .scroll-down-wrapper .scroll-down:hover .scroll-down-text{opacity:1;visibility:visible}#intro-section .intro-wrapper .intro-body .scroll-down-wrapper .scroll-down .logo{width:35px;-webkit-transition:opacity .5s ease,visibility .5s;transition:opacity .5s ease,visibility .5s}#intro-section .intro-wrapper .intro-body .scroll-down-wrapper .scroll-down .scroll-down-text{color:#f2f2f2;font-family:Gotham,Helvetica,Arial,sans-serif;text-transform:uppercase;font-size:12px;font-weight:700;text-align:center;height:100%;opacity:0;padding-top:.5em;position:absolute;top:0;left:0;right:0;-webkit-transition:opacity .5s ease,visibility .5s;transition:opacity .5s ease,visibility .5s;visibility:hidden;width:100%}#intro-section .intro-wrapper .intro-body .scroll-down-wrapper .scroll-down .scroll-down-text .chevron{-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg);height:20px;display:block;margin:10px auto}#about-section .section-subheading{width:60%;font-size:1.2em;font-weight:500;line-height:1.5;margin-top:1em}@media only screen and (max-width:1000px){#about-section .section-subheading{width:100%}}#about-section .about-wrapper{padding-right:20px}#about-section .about-wrapper .about-text-wrapper{display:inline-block;width:60%;vertical-align:top}@media only screen and (max-width:900px){#about-section .about-wrapper{padding:0}#about-section .about-wrapper .about-text-wrapper{width:100%}}#about-section .about-wrapper .about-text-wrapper .about-text{margin-bottom:10px;font-size:1.15em}#about-section .about-wrapper .headshot{display:inline-block;width:35%;height:auto;-webkit-border-radius:50%;border-radius:50%;margin-top:-100px;float:right;max-width:450px}@media only screen and (max-width:1000px){#about-section .about-wrapper .headshot{margin-top:0}}@media only screen and (max-width:900px){#about-section .about-wrapper .headshot{float:none;margin:10px 0 40px;width:300px}}@media only screen and (max-width:400px){#about-section .about-wrapper .headshot{width:250px}}#services-section a{display:inline-block;position:relative}#services-section a:after{content:'';width:100%;position:absolute;left:0;bottom:2px;border-width:0 0 .5px;border-style:solid;border-color:#cbcbcb}#services-section .services-wrapper{width:100%;margin:0 auto;padding:20px}@media only screen and (max-width:1000px){#services-section .services-wrapper{padding:0}}#services-section .service-row{width:100%;height:50%}#services-section .service-row:nth-of-type(odd){border-bottom:1px solid rgba(242,242,242,.3)}#services-section .service-row:nth-of-type(even) .service-column{padding-top:40px}@media only screen and (max-width:660px){#services-section .service-row{height:auto}#services-section .service-row:nth-of-type(odd){border:none}#services-section .service-row:nth-of-type(even) .service-column{padding-top:20px}}#services-section .service-row .service-column{display:inline-block;vertical-align:top;width:49%;height:100%;padding:20px;overflow:hidden;white-space:nowrap}@media only screen and (max-width:660px){#services-section .service-row .service-column{display:block;width:100%;border:none}}@media only screen and (max-width:480px){#services-section .service-row .service-column{padding:20px 0}}#services-section .service-row .service-column:nth-of-type(odd){border-right:1px solid rgba(242,242,242,.3)}#services-section .service-row .service-column .service-img{width:40px;margin-right:15px;display:inline-block;vertical-align:middle;position:relative;top:-5px}#services-section .service-row .service-column .sprite{width:40px;height:40px;margin-right:15px;display:inline-block;vertical-align:middle;position:relative;top:-3px;background-repeat:no-repeat;background-position:center center;background-size:100%}@media only screen and (max-width:400px){#services-section .service-row .service-column .sprite{width:35px;height:35px}}#services-section .service-row .service-column .sprite.webdev{background-image:url(../img/icons/html.png)}#services-section .service-row .service-column .sprite.ui{background-image:url(../img/icons/pencil.png);background-size:90%}#services-section .service-row .service-column .sprite.xd{background-image:url(../img/icons/ux-design.png)}#services-section .service-row .service-column .sprite.wit{background-image:url(../img/icons/internet.png);background-size:90%}#services-section .service-row .service-column .service-heading{text-transform:uppercase;margin:0 0 30px;font-size:20px;display:inline-block}@media only screen and (max-width:1170px){#services-section .service-row .service-column .service-heading{font-size:2vw}}@media only screen and (max-width:660px){#services-section .service-row .service-column:nth-of-type(odd){border:none}#services-section .service-row .service-column .service-heading{font-size:4vw}}@media only screen and (max-width:440px){#services-section .service-row .service-column .service-heading{font-size:16px}}#services-section .service-row .service-column .service-text{font-size:1.1em;margin-bottom:20px;white-space:initial}#skills-section .check-wrapper,#skills-section .flex-item,#skills-section .skills-flex-wrapper{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}#skills-section .skills-flex-wrapper{font:100 30px Whitney;height:17em;-webkit-flex-flow:column wrap;-ms-flex-flow:column wrap;flex-flow:column wrap}#skills-section .skills-flex-wrapper .skills-heading{font-family:Gotham,Helvetica,Arial,sans-serif;text-transform:uppercase;font-weight:700;font-size:1.5vw}@media only screen and (max-width:768px){#skills-section .skills-flex-wrapper{display:block;height:auto}#skills-section .skills-flex-wrapper .skills-heading{font-size:18px}}#skills-section .skills-flex-wrapper .skills-heading .sprite{width:35px;height:35px;margin-right:10px;position:relative;top:7px;display:inline-block;vertical-align:text-bottom;background-repeat:no-repeat;background-position:center center;background-size:100%}#skills-section .skills-flex-wrapper .skills-heading .sprite.dev{background-image:url(../img/icons/settings.png)}#skills-section .skills-flex-wrapper .skills-heading .sprite.design{background-image:url(../img/icons/design.png);background-size:90%}#skills-section .skills-flex-wrapper .skills-heading .sprite.tools{background-image:url(../img/icons/repair-tools.png);background-size:90%}#skills-section .skills-flex-wrapper .skills-heading .sprite.knowledge{background-image:url(../img/icons/light-bulb.png)}#skills-section .skills-flex-wrapper .flex-item{-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;min-height:200px;background:0 0;padding:15px}@media only screen and (max-width:440px){#skills-section .skills-flex-wrapper .flex-item{display:block}}#skills-section .skills-flex-wrapper .flex-item:nth-child(1){width:40%;max-width:400px;min-height:450px}@media only screen and (max-width:1170px){#skills-section .skills-flex-wrapper .flex-item{padding-right:0}#skills-section .skills-flex-wrapper .flex-item:nth-child(1){width:37%}}@media only screen and (max-width:1000px){#skills-section .skills-flex-wrapper .flex-item:nth-child(1){width:45%}}@media only screen and (max-width:768px){#skills-section .skills-flex-wrapper .flex-item:nth-child(1){width:100%;min-height:50px}}#skills-section .skills-flex-wrapper .flex-item:nth-child(2){width:60%;min-height:151px}@media only screen and (max-width:1000px){#skills-section .skills-flex-wrapper .flex-item:nth-child(2){width:55%}}@media only screen and (max-width:768px){#skills-section .skills-flex-wrapper .flex-item:nth-child(2){width:100%}}#skills-section .skills-flex-wrapper .flex-item:nth-child(3){min-height:299px;width:60%}@media only screen and (max-width:1000px){#skills-section .skills-flex-wrapper .flex-item:nth-child(3){width:55%}}@media only screen and (max-width:768px){#skills-section .skills-flex-wrapper .flex-item:nth-child(3){width:100%}}#skills-section .skills-flex-wrapper .dev-wrapper{display:block}#skills-section .skills-flex-wrapper .dev-wrapper .dev-item{display:inline-block;border:2px solid rgba(57,57,57,.5);-webkit-border-radius:50%;border-radius:50%;text-align:center;margin:10px 10px 10px 0;padding:0;width:100px;height:100px;line-height:7;font-size:14px}@media only screen and (max-width:1170px){#skills-section .skills-flex-wrapper .dev-wrapper .dev-item{width:80px;height:80px;font-size:14px;line-height:5.5;margin:5px 5px 5px 0}}@media only screen and (max-width:768px){#skills-section .skills-flex-wrapper .dev-wrapper .dev-item{width:100px;height:100px;line-height:7;margin:1%}}@media only screen and (max-width:480px){#skills-section .skills-flex-wrapper .flex-item{padding:0}#skills-section .skills-flex-wrapper .dev-wrapper .dev-item{width:80px;height:80px;line-height:5.5}}#skills-section .skills-flex-wrapper .design-wrapper{display:block}#skills-section .skills-flex-wrapper .design-wrapper .design-item{display:inline-block;margin:10px}@media only screen and (max-width:1170px){#skills-section .skills-flex-wrapper .design-wrapper .design-item{margin:10px 5px}}#skills-section .skills-flex-wrapper .design-wrapper .design-item .item-img{height:40px;-webkit-filter:grayscale(100%);filter:grayscale(100%)}#skills-section .check-wrapper .knowledge-wrapper,#skills-section .check-wrapper .tools-wrapper{width:50%;display:inline-block;vertical-align:top;overflow:hidden;white-space:nowrap}@media only screen and (max-width:440px){#skills-section .check-wrapper .knowledge-wrapper,#skills-section .check-wrapper .tools-wrapper{display:block;width:100%}}#skills-section .check-wrapper .knowledge-wrapper .list,#skills-section .check-wrapper .tools-wrapper .list{margin-top:30px;margin-left:20px}#skills-section .check-wrapper .knowledge-wrapper .list .list-item,#skills-section .check-wrapper .tools-wrapper .list .list-item{margin:10px 0;font-size:16px}#skills-section .check-wrapper .knowledge-wrapper .list .list-item .item-svg,#skills-section .check-wrapper .tools-wrapper .list .list-item .item-svg{margin-right:10px;width:12px;height:12px;color:#fff;fill:#fff}#experience-section .experience-description{padding:0 100px;font-size:1.2em}@media only screen and (max-width:1170px){#experience-section .experience-description{padding:0}}#experience-section .experience-description a{display:inline-block;position:relative;font-weight:500;-webkit-transition:all .3s ease;transition:all .3s ease}#experience-section .experience-description a:after{content:'';width:100%;position:absolute;left:0;bottom:2px;border-width:0 0 .5px;border-style:solid;border-color:#f2f2f2;-webkit-transition:all .3s ease;transition:all .3s ease}#experience-section .experience-wrapper{padding:30px}@media only screen and (max-width:1000px){#experience-section .experience-wrapper{padding-left:0}}@media only screen and (max-width:600px){#experience-section .experience-wrapper{padding:30px 0}}#experience-section .experience-wrapper #timeline{position:relative;padding:2em 0;width:100%;max-width:1170px;margin:0 auto}#experience-section .experience-wrapper #timeline:before{content:'';position:absolute;top:0;left:-webkit-calc(50% - 1px);left:calc(50% - 1px);height:100%;width:2px;background:#00b7c7}@media only screen and (max-width:1000px){#experience-section .experience-wrapper #timeline:before{left:20px;margin-left:0}}@media only screen and (max-width:480px){#experience-section .experience-wrapper #timeline:before{left:10px}}#experience-section .experience-wrapper #timeline:after{content:'';display:table;clear:both}#experience-section .experience-wrapper #timeline .timeline-block{position:relative;-webkit-transition:all .3s ease;transition:all .3s ease;margin:1em 0}#experience-section .experience-wrapper #timeline .timeline-block:after{content:"";display:table;clear:both}#experience-section .experience-wrapper #timeline .timeline-block:first-child{margin-top:0}#experience-section .experience-wrapper #timeline .timeline-block:last-child{margin-bottom:0}#experience-section .experience-wrapper #timeline .timeline-block:nth-child(odd) .timeline-content{float:left}@media only screen and (max-width:1170px){#experience-section .experience-wrapper #timeline .timeline-block:nth-child(odd){margin-top:0;margin-bottom:2em}#experience-section .experience-wrapper #timeline .timeline-block:nth-child(odd) .timeline-content{right:10px}}#experience-section .experience-wrapper #timeline .timeline-block:nth-child(odd) .timeline-content:before{top:24px;left:100%;border-color:transparent transparent transparent #1b1b1b}@media only screen and (max-width:1000px){#experience-section .experience-wrapper #timeline .timeline-block:nth-child(odd) .timeline-content{right:auto}#experience-section .experience-wrapper #timeline .timeline-block:nth-child(odd) .timeline-content:before{top:16px;left:auto;border-color:transparent #1b1b1b transparent transparent}}#experience-section .experience-wrapper #timeline .timeline-block:nth-child(odd) .timeline-content .date{left:auto;text-align:right;right:-33%}#experience-section .experience-wrapper #timeline .timeline-block:nth-child(even) .date{text-align:right;left:auto;right:55%}@media only screen and (max-width:1000px){#experience-section .experience-wrapper #timeline .timeline-block:nth-child(even) .date{text-align:left;font-size:14px;color:#777;position:relative;top:-40px;left:95px;right:auto}}@media only screen and (max-width:480px){#experience-section .experience-wrapper #timeline .timeline-block:nth-child(even) .date{left:66px}}#experience-section .experience-wrapper #timeline .timeline-block .timeline-img{position:absolute;width:50px;height:50px;top:15px;left:50%;margin-left:-25px;-webkit-border-radius:50%;border-radius:50%;background:#212121;-webkit-transform:translateZ(0);transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-transition:all .3s ease;transition:all .3s ease}@media only screen and (max-width:1000px){#experience-section .experience-wrapper #timeline .timeline-block .timeline-img{top:5px;left:20px}}@media only screen and (max-width:480px){#experience-section .experience-wrapper #timeline .timeline-block .timeline-img{width:40px;height:40px;top:10px;left:15px}}#experience-section .experience-wrapper #timeline .timeline-block .timeline-img .sprite{display:block;width:24px;height:24px;position:relative;left:50%;top:50%;margin-left:-12px;margin-top:-12px;background-repeat:no-repeat;background-size:100%}@media only screen and (max-width:480px){#experience-section .experience-wrapper #timeline .timeline-block .timeline-img .sprite{width:20px;height:20px;margin-left:-10px;margin-top:-10px}}#experience-section .experience-wrapper #timeline .timeline-block .timeline-img .sprite.university{background-image:url(../img/icons/graduate-cap.png)}#experience-section .experience-wrapper #timeline .timeline-block .timeline-img .sprite.research{background-image:url(../img/icons/search.png)}#experience-section .experience-wrapper #timeline .timeline-block .timeline-img .sprite.industry{background-image:url(../img/icons/briefcase.png)}#experience-section .experience-wrapper #timeline .timeline-block .timeline-img .sprite.academic{background-image:url(../img/icons/notebook.png)}#experience-section .experience-wrapper #timeline .timeline-block .timeline-content{float:right;position:relative;background:#1b1b1b;-webkit-border-radius:3px;border-radius:3px;margin-left:0;padding:1.5em;width:45%;opacity:.85;-webkit-transition:all .3s ease;transition:all .3s ease}@media only screen and (max-width:1170px){#experience-section .experience-wrapper #timeline .timeline-block .timeline-content{left:0;padding-bottom:2.5em}}@media only screen and (max-width:1000px){#experience-section .experience-wrapper #timeline .timeline-block .timeline-content{margin-left:70px;right:auto;width:auto}}@media only screen and (max-width:480px){#experience-section .experience-wrapper #timeline .timeline-block .timeline-content{margin-left:50px;padding:1.5em 1em 2.5em}}#experience-section .experience-wrapper #timeline .timeline-block .timeline-content:hover{opacity:1}#experience-section .experience-wrapper #timeline .timeline-block .timeline-content:hover+.timeline-img{background:#00b7c7}#experience-section .experience-wrapper #timeline .timeline-block .timeline-content:before{content:'';position:absolute;top:24px;right:100%;height:0;width:0;border:15px solid transparent;border-color:transparent #1b1b1b transparent transparent}@media only screen and (max-width:1000px){#experience-section .experience-wrapper #timeline .timeline-block .timeline-content:before{top:16px;right:100%;left:auto;border:15px solid transparent;border-right:15px solid #1b1b1b}}#experience-section .experience-wrapper #timeline .timeline-block .timeline-content:after{content:"";display:table;clear:both}#experience-section .experience-wrapper #timeline .timeline-block .timeline-content .position{color:#f2f2f2;margin:5px 0 10px;font-size:18px;display:inline-block;text-transform:uppercase;font-family:Gotham,Helvetica,Arial,sans-serif}#experience-section .experience-wrapper #timeline .timeline-block .timeline-content .company{margin:0 0 10px;font-size:15px;font-weight:500}#experience-section .experience-wrapper #timeline .timeline-block .timeline-content .company a{color:#00b7c7;display:inline;-webkit-transition:all .3s ease;transition:all .3s ease}#experience-section .experience-wrapper #timeline .timeline-block .timeline-content .company a:hover{color:#00dded}#experience-section .experience-wrapper #timeline .timeline-block .timeline-content .job-desc{margin:1em 0;font-size:1em;line-height:1.5}@media only screen and (max-width:480px){#experience-section .experience-wrapper #timeline .timeline-block .timeline-content .job-desc{font-size:1em;line-height:1.5}}#experience-section .experience-wrapper #timeline .timeline-block .date{font-size:1em;font-weight:500;display:inline-block;color:#f2f2f2;font-family:Gotham,Helvetica,Arial,sans-serif;text-transform:uppercase;position:absolute;width:100%;left:55%;top:30px}@media only screen and (max-width:1000px){#experience-section .experience-wrapper #timeline .timeline-block .date{font-size:14px;color:#777;position:absolute;top:auto;bottom:20px;left:95px}}#experience-section .down-arrow{display:block;margin:0 auto;border-color:#00b7c7 transparent transparent;border-style:solid;border-width:15px 7px 0;width:0;height:0;position:relative;line-height:0}@media only screen and (max-width:1000px){#experience-section .down-arrow{margin-left:13.5px}}@media only screen and (max-width:480px){#experience-section .experience-wrapper #timeline .timeline-block .date{left:66px}#experience-section .down-arrow{margin-left:3.5px}}#portfolio-section .section-wrapper{padding-bottom:50px}#portfolio-section a{display:inline-block}#portfolio-section .portfolio-item-wrapper .divider:last-of-type{display:none}#portfolio-section .portfolio-row{margin:0;padding-top:50px;display:block}#portfolio-section .portfolio-row .screenshots{position:relative;overflow:hidden;display:block;width:95%}#portfolio-section .portfolio-row .screenshots:after,#portfolio-section .portfolio-row .screenshots:before{-webkit-box-sizing:inherit;box-sizing:inherit;padding:0;margin:0}#portfolio-section .portfolio-row .screenshots:after{display:block;padding-top:45.5%;content:""}#portfolio-section .portfolio-row .screenshots.screentime:after{display:block;padding-top:5.5%;content:""}@media only screen and (max-width:900px){#portfolio-section .portfolio-row .screenshots.screentime:after{padding-top:7.5%}}@media only screen and (max-width:660px){#portfolio-section .portfolio-row .screenshots.screentime:after{padding-top:10%}}@media only screen and (max-width:480px){#portfolio-section .portfolio-row .screenshots.screentime:after{padding-top:15%}}#portfolio-section .portfolio-row .screenshots .img-lg,#portfolio-section .portfolio-row .screenshots .img-md,#portfolio-section .portfolio-row .screenshots .img-sm{border:0;position:absolute;right:0;bottom:0;-webkit-border-radius:2px;border-radius:2px;-webkit-box-shadow:0 5px 10px 0 rgba(0,0,0,.75);box-shadow:0 5px 10px 0 rgba(0,0,0,.75)}#portfolio-section .portfolio-row .screenshots .img-lg:after,#portfolio-section .portfolio-row .screenshots .img-md:after,#portfolio-section .portfolio-row .screenshots .img-sm:after{content:"";display:block}#portfolio-section .portfolio-row .screenshots .img-lg{width:70%;left:0;z-index:1}#portfolio-section .portfolio-row .screenshots .img-lg:after{padding-top:65%}#portfolio-section .portfolio-row .screenshots .img-md{width:27%;right:14%;z-index:2}#portfolio-section .portfolio-row .screenshots .img-md:after{padding-top:110%}#portfolio-section .portfolio-row .screenshots .img-sm{width:15%;right:1rem;z-index:3;-webkit-box-shadow:0 5px 5px 0 rgba(0,0,0,.75);box-shadow:0 5px 5px 0 rgba(0,0,0,.75)}#portfolio-section .portfolio-row .screenshots .img-sm:after{padding-top:145%}#portfolio-section .portfolio-row .screenshots .img-screentime{position:relative;top:0;border:0;-webkit-border-radius:2px;border-radius:2px;-webkit-box-shadow:0 5px 10px 0 rgba(0,0,0,.75);box-shadow:0 5px 10px 0 rgba(0,0,0,.75);width:26%;margin-right:-20px}@media only screen and (max-width:768px){#portfolio-section .portfolio-row .screenshots .img-screentime{width:27%}}@media only screen and (max-width:480px){#portfolio-section .portfolio-row .screenshots .img-screentime{width:25%;margin-right:-10px}}#portfolio-section .portfolio-row .screenshots .img-screentime:nth-of-type(2){top:15px}@media only screen and (max-width:600px){#portfolio-section .portfolio-row .screenshots .img-screentime:nth-of-type(2){top:10px}}#portfolio-section .portfolio-row .screenshots .img-screentime:nth-of-type(3){top:30px}@media only screen and (max-width:600px){#portfolio-section .portfolio-row .screenshots .img-screentime:nth-of-type(3){top:20px}}#portfolio-section .portfolio-row .screenshots .img-screentime:nth-of-type(4){top:45px}#portfolio-section .portfolio-row .screenshots .img-screentime:after{content:"";display:block}#portfolio-section .portfolio-row .description-title-container{position:relative;width:90%;margin-top:30px;margin-left:1em;-webkit-box-align:baseline;-webkit-align-items:baseline;-ms-flex-align:baseline;align-items:baseline;-webkit-flex-wrap:nowrap;-webkit-flex-direction:row;-webkit-justify-content:flex-end;-webkit-align-content:stretch;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;-ms-flex-line-pack:stretch;align-content:stretch}@media only screen and (max-width:768px){#portfolio-section .portfolio-row .description-title-container{width:95%}}@media only screen and (max-width:660px){#portfolio-section .portfolio-row .description-title-container{width:100%;margin-left:0}}#portfolio-section .portfolio-row .description-title-container .description-title{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;margin-bottom:20px;font-family:Gotham,Helvetica,Arial,sans-serif;text-transform:uppercase}#portfolio-section .portfolio-row .description-title-container .description-buttons a{padding:10px 15px;background:0 0;border:2px solid #00b7c7;-webkit-border-radius:3px;border-radius:3px;margin:0 5px;color:#00b7c7;font-family:Gotham,Helvetica,Arial,sans-serif;font-weight:500;text-transform:uppercase;-webkit-transition:all .3s ease;transition:all .3s ease}@media only screen and (max-width:660px){#portfolio-section .portfolio-row .description-title-container .description-buttons a{font-size:14px;padding:7px 10px}}@media only screen and (max-width:600px){#portfolio-section .portfolio-row .screenshots .img-screentime:nth-of-type(4){top:30px}#portfolio-section .portfolio-row .description-title-container{display:block}#portfolio-section .portfolio-row .description-title-container .description-buttons a{margin:0 10px 30px 0}}#portfolio-section .portfolio-row .description-title-container .description-buttons a:hover{background:#00b7c7;color:#f2f2f2}#portfolio-section .portfolio-row .portfolio-description{display:block;width:90%;margin-top:15px;margin-left:1rem;margin-bottom:25px;font-size:1.1em;color:#cbcbcb}@media only screen and (max-width:660px){#portfolio-section .portfolio-row .portfolio-description{width:100%;margin-left:0;margin-top:10px}}@media only screen and (max-width:480px){#portfolio-section .portfolio-row .portfolio-description{font-size:1em}}#portfolio-section .portfolio-row .portfolio-description a{position:relative;font-weight:500;color:#cbcbcb}#portfolio-section .portfolio-row .portfolio-description a:after{content:'';width:100%;position:absolute;left:0;bottom:2px;border-width:0 0 .5px;border-style:solid;border-color:#cbcbcb}#portfolio-section .portfolio-row .used{display:block;width:90%;font-family:Gotham,Helvetica,Arial,sans-serif;margin-bottom:100px}@media only screen and (max-width:768px){#portfolio-section .portfolio-row .used{margin-bottom:70px}}@media only screen and (max-width:400px){#portfolio-section .portfolio-row .used{margin-bottom:50px}}#portfolio-section .portfolio-row .used .used-items{margin-left:1em}@media only screen and (max-width:660px){#portfolio-section .portfolio-row .used .used-items{margin-left:0}}#portfolio-section .portfolio-row .used .used-items .used-item{display:inline-block;padding:7px 7px 5px;margin-right:5px;margin-bottom:10px;color:#777;background:#333;-webkit-border-radius:3px;border-radius:3px;text-transform:uppercase;font-size:10px;font-weight:500;letter-spacing:.5px}#contact-section .contact-description{margin:0 auto;max-width:440px;font-size:1.2em}@media only screen and (max-width:1170px){#contact-section .contact-description{padding:0}}#contact-section .form-wrapper{width:500px;margin:20px auto;padding:0}@media only screen and (max-width:600px){#contact-section .form-wrapper{width:90%}}@media only screen and (max-width:400px){#contact-section .form-wrapper{width:95%}}#contact-section .form-wrapper .input-wrapper{padding:0;margin-bottom:10px;position:relative;-webkit-transition:all .5s ease;transition:all .5s ease}#contact-section .form-wrapper .input-wrapper:after,#contact-section .form-wrapper .input-wrapper:before{content:"";position:absolute;height:2px;-webkit-transition:all .5s ease;transition:all .5s ease;display:block;bottom:0;left:0}@media only screen and (max-width:768px){#contact-section .form-wrapper .input-wrapper{margin-bottom:10px}}@media only screen and (max-width:480px){#contact-section .form-wrapper .input-wrapper{margin-bottom:5px}#footer{height:200px}}#contact-section .form-wrapper .input-wrapper:before{width:100%;background-color:#707070}#contact-section .form-wrapper .input-wrapper:after{background-color:#00b7c7;width:0}#contact-section .form-wrapper .input-wrapper .input-label{display:block;padding-left:4px;font-size:1.15em;font-weight:500;-webkit-transform:translateY(25px);-ms-transform:translateY(25px);transform:translateY(25px);color:#f2f2f2;-webkit-transition:all .5s ease;transition:all .5s ease}#contact-section .form-wrapper .input-wrapper .contact-input{position:relative;background:0 0;width:100%;border:none;padding:20px 0 10px;margin-bottom:-10px;font-size:1em;line-height:1.3;color:#f2f2f2;font-family:Whitney,Helvetica,Arial,sans-serif;resize:none;display:block;overflow:hidden;-webkit-box-sizing:padding-box;box-sizing:padding-box;-webkit-transition:all .5s ease;transition:all .5s ease}#contact-section .form-wrapper .message-btn,.four-oh-four{font-family:Gotham,Helvetica,Arial,sans-serif}#contact-section .form-wrapper .input-wrapper .contact-input:focus{outline:0;color:#f2f2f2}#contact-section .form-wrapper .is-active,#contact-section .form-wrapper .is-completed{padding:15px 0 0}#contact-section .form-wrapper .is-active:after{width:100%}#contact-section .form-wrapper .is-active .input-label{color:#00b7c7}#contact-section .form-wrapper .is-completed .input-label{font-size:14px;font-weight:700;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);padding:0}#contact-section .form-wrapper .is-completed .contact-input{padding-top:10px}#contact-section .form-wrapper .message-btn{display:block;text-align:center;cursor:pointer;text-transform:uppercase;font-weight:700;font-size:14px;line-height:1.5;padding:12px 20px 10px;margin:70px auto 0;color:#00b7c7;background:0 0;border:2px solid #00b7c7;-webkit-border-radius:3px;border-radius:3px;position:relative;overflow:hidden;-webkit-transition:all .3s ease;transition:all .3s ease}#contact-section .form-wrapper .message-btn:hover{color:#f2f2f2;background:#00b7c7}#contact-section .form-wrapper #message-label{margin-bottom:10px}#footer{background:-webkit-linear-gradient(45deg,#00b7c7 0,#4d0ce8 100%);background:linear-gradient(45deg,#00b7c7 0,#4d0ce8 100%);height:200px;min-height:100px;color:#f2f2f2}#footer .section-wrapper{padding:30px 0 40px}@media only screen and (max-width:660px){#footer .section-wrapper{padding:30px 0}}#footer .soc{display:block;font-size:0;margin:0 auto;padding:0;text-align:center}#footer .soc .soc-item{display:inline-block;margin:1rem .5rem}@media only screen and (max-width:400px){#footer .soc .soc-item{margin:1rem .3rem}}#footer .soc .soc-item a{display:block;color:#fff;width:2.5rem;height:2.5rem;position:relative}@media only screen and (max-width:330px){#footer .soc .soc-item a{width:2.2rem;height:2.2rem}}#footer .soc .soc-item a.icon{color:#f2f2f2;fill:#f2f2f2}#footer .soc .soc-item a.icon:hover{color:#fff;fill:#fff;-webkit-transition:all .3s ease;transition:all .3s ease;-webkit-transform:scale(1.1) translateY(-5px);-ms-transform:scale(1.1) translateY(-5px);transform:scale(1.1) translateY(-5px)}#footer .soc .soc-item a.github,#footer .soc .soc-item a.instagram{width:2.3rem;height:2.3rem;position:relative;top:-1px}@media only screen and (max-width:330px){#footer .soc .soc-item a.github,#footer .soc .soc-item a.instagram{width:2rem;height:2rem}}#footer .soc .soc-item a em{font-size:14px;line-height:1.5;margin-top:-.75em;position:absolute;text-align:center;top:50%;right:0;bottom:0;left:0}#footer .footer-logo{width:30px;margin:0 auto}#footer .copyright-wrapper{margin-top:25px;font-size:13px;color:#f2f2f2;font-weight:500}#footer .copyright-wrapper p{margin:0;color:#f2f2f2}#footer .copyright-wrapper .please{font-size:12px}.four-oh-four canvas{display:block;vertical-align:bottom}.four-oh-four #particles-js{position:fixed;width:100%;height:100%;top:0;left:0;z-index:1;-webkit-animation:appear 1.4s ease 0s normal forwards 1 running;animation:appear 1.4s ease 0s normal forwards 1 running;background-color:#070525;background-repeat:no-repeat;background-size:cover;background-position:center;background-image:url(http://brittanychiang.com/img/404-bg.jpg)}.four-oh-four #particles-js:before{content:'';position:absolute;top:0;right:0;bottom:0;left:0;background:#141E30;background:-webkit-linear-gradient(to bottom,#141E30,#243B55);background:-webkit-gradient(linear,left top, left bottom,from(#141E30),to(#243B55));background:-webkit-linear-gradient(top,#141E30,#243B55);background:linear-gradient(to bottom,#141E30,#243B55);opacity:.7}.four-oh-four .count-particles{background:#002;position:absolute;top:48px;left:0;width:80px;color:#13E8E9;font-size:.8em;text-align:left;text-indent:4px;line-height:14px;padding-bottom:2px;font-family:Helvetica,Arial,sans-serif;font-weight:700;display:none}.four-oh-four .js-count-particles{font-size:1.1em}.four-oh-four #stats,.four-oh-four .count-particles{-webkit-user-select:none;margin-top:5px;margin-left:5px}.four-oh-four #stats{-webkit-border-radius:3px 3px 0 0;border-radius:3px 3px 0 0;overflow:hidden}.four-oh-four .count-particles{-webkit-border-radius:0 0 3px 3px;border-radius:0 0 3px 3px}.four-oh-four .text-container{text-align:center;cursor:default;position:relative;top:25vh}.four-oh-four .text-container .text{display:inline-block;color:#fff;font-weight:500;line-height:1;text-transform:uppercase;z-index:2;position:relative}.section,a,body,html{color:#f2f2f2}.four-oh-four .text-container .text h1{font-family:Gotham,Helvetica,Arial,sans-serif;font-size:10em;font-weight:500;margin:0 auto;text-shadow:0 5px 5px rgba(0,0,0,.5)}.four-oh-four .text-container .text h3{font-size:1em;font-weight:700;margin:15px 0 75px;text-shadow:0 3px 5px rgba(0,0,0,.5)}.four-oh-four .text-container .text a{display:block;width:200px;margin:0 auto;color:#f2f2f2;background:#ab473c;font-size:.95em;text-decoration:none;padding:15px;-webkit-border-radius:30px;border-radius:30px;-webkit-transition:all .3s cubic-bezier(.4,0,.2,1);transition:all .3s cubic-bezier(.4,0,.2,1);-webkit-box-shadow:0 2px 5px 0 rgba(0,0,0,.25);box-shadow:0 2px 5px 0 rgba(0,0,0,.25)}.four-oh-four .text-container .text a:hover{background:#c74739}*,:after,:before{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body,html{margin:0;padding:0;font-family:Whitney,Helvetica,Arial,sans-serif;height:100%;background-color:#1b1b1b}h1{font-family:"Chronicle Display Bold",Georgia,serif;margin:0}h2,h3{font-family:Gotham,Helvetica,Arial,sans-serif;margin:10px 0}p{margin:0 0 10px;font-family:Whitney,Helvetica,Arial,sans-serif}a{text-decoration:none}ul{padding:0}.noScroll{overflow:hidden;height:100%}.center{text-align:center;margin-left:auto;margin-right:auto}.section{width:100%;height:auto;min-height:700px;padding:0;overflow:hidden;position:relative}.section:first-of-type{background-color:#0054c7}.section:nth-of-type(odd){background-color:#5b5b5b}.section:nth-of-type(even){background-color:#1b1b1b}.section a{display:block}.section .overlay-wrapper,.section .section-wrapper{padding:100px}@media only screen and (max-width:900px){.section .overlay-wrapper,.section .section-wrapper{padding:100px 50px}}@media only screen and (max-width:400px){.section .overlay-wrapper,.section .section-wrapper{padding:100px 25px}}.section .overlay-wrapper h1,.section .section-wrapper h1{font-size:3em}.section .overlay-wrapper p,.section .section-wrapper p{font-size:1.3em;line-height:1.5em}.section .overlay-wrapper .divider,.section .section-wrapper .divider{display:block;margin:30px 0;width:100px;height:2px;background-color:#00b7c7}.section .overlay-wrapper .center,.section .section-wrapper .center{margin-right:auto;margin-left:auto;text-align:center}.section .overlay-wrapper{background:-webkit-gradient(linear,left top, left bottom,from(rgba(0,0,0,.61)),color-stop(rgba(0,0,0,.61)),color-stop(rgba(0,0,0,.61)),color-stop(rgba(0,0,0,.61)),to(rgba(0,0,0,.61)));background:-webkit-linear-gradient(top,rgba(0,0,0,.61),rgba(0,0,0,.61),rgba(0,0,0,.61),rgba(0,0,0,.61),rgba(0,0,0,.61));background:linear-gradient(to bottom,rgba(0,0,0,.61),rgba(0,0,0,.61),rgba(0,0,0,.61),rgba(0,0,0,.61),rgba(0,0,0,.61));width:100%;height:100%}.skrollr-desktop body{height:100%!important}#skrollr-body{height:100%;overflow:visible;position:relative}.gap,.skrollr .gap{background:0 0!important}.bg{width:100%;height:100%;min-height:100%;background-position:center center;background-repeat:no-repeat;background-size:cover;position:absolute;z-index:-1;overflow:hidden}#intro-section .bg{z-index:0;background-image:url(../img/bg-intro/intro-xl.jpg)}@media only screen and (max-width:1170px){#intro-section .bg{background-image:url(../img/bg-intro/intro-lg.jpg)}}@media only screen and (max-width:900px){#intro-section .bg{background-image:url(../img/bg-intro/intro-md.jpg)}}@media only screen and (max-width:660px){#intro-section .bg{background-image:url(../img/bg-intro/intro-sm.jpg)}}@media only screen and (max-width:480px){.section .overlay-wrapper p,.section .section-wrapper p{font-size:1em}#intro-section .bg{background-image:url(../img/bg-intro/intro-xs.jpg)}}#services-section .bg{background-image:url(../img/bg-services/services-xl.jpg)}@media only screen and (max-width:1170px){#services-section .bg{background-image:url(../img/bg-services/services-lg.jpg)}}@media only screen and (max-width:900px){#services-section .bg{background-image:url(../img/bg-services/services-md.jpg)}}@media only screen and (max-width:660px){#services-section .bg{background-image:url(../img/bg-services/services-sm.jpg)}}@media only screen and (max-width:480px){#services-section .bg{background-image:url(../img/bg-services/services-xs.jpg)}}#experience-section .bg{background-image:url(../img/bg-experience/experience-xl.jpg)}@media only screen and (max-width:1170px){#experience-section .bg{background-image:url(../img/bg-experience/experience-lg.jpg)}}@media only screen and (max-width:900px){#experience-section .bg{background-image:url(../img/bg-experience/experience-md.jpg)}}@media only screen and (max-width:660px){#experience-section .bg{background-image:url(../img/bg-experience/experience-sm.jpg)}}@media only screen and (max-width:480px){#experience-section .bg{background-image:url(../img/bg-experience/experience-xs.jpg)}}#contact-section .bg{background-image:url(../img/bg-contact/contact-xl.jpg)}@media only screen and (max-width:1170px){#contact-section .bg{background-image:url(../img/bg-contact/contact-lg.jpg)}}@media only screen and (max-width:900px){#contact-section .bg{background-image:url(../img/bg-contact/contact-md.jpg)}}@media only screen and (max-width:660px){#contact-section .bg{background-image:url(../img/bg-contact/contact-sm.jpg)}}@media only screen and (max-width:480px){#contact-section .bg{background-image:url(../img/bg-contact/contact-xs.jpg)}} \ No newline at end of file diff --git a/fonts/.DS_Store b/fonts/.DS_Store new file mode 100644 index 0000000..3e78a5d Binary files /dev/null and b/fonts/.DS_Store differ diff --git a/fonts/chronicle-display/ChronicleDisplay-Bold.eot b/fonts/chronicle-display/ChronicleDisplay-Bold.eot new file mode 100644 index 0000000..cd5f6ec Binary files /dev/null and b/fonts/chronicle-display/ChronicleDisplay-Bold.eot differ diff --git a/fonts/chronicle-display/ChronicleDisplay-Bold.svg b/fonts/chronicle-display/ChronicleDisplay-Bold.svg new file mode 100644 index 0000000..9697605 --- /dev/null +++ b/fonts/chronicle-display/ChronicleDisplay-Bold.svg @@ -0,0 +1,3857 @@ + + + + +Created by FontForge 20120731 at Sun May 15 08:28:01 2016 + By ,,, +Copyright (C) 2002, 2007 Hoefler & Frere-Jones. http://www.typography.com + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/fonts/chronicle-display/ChronicleDisplay-Bold.ttf b/fonts/chronicle-display/ChronicleDisplay-Bold.ttf new file mode 100644 index 0000000..1283640 Binary files /dev/null and b/fonts/chronicle-display/ChronicleDisplay-Bold.ttf differ diff --git a/fonts/chronicle-display/ChronicleDisplay-Bold.woff b/fonts/chronicle-display/ChronicleDisplay-Bold.woff new file mode 100644 index 0000000..be8c85e Binary files /dev/null and b/fonts/chronicle-display/ChronicleDisplay-Bold.woff differ diff --git a/fonts/chronicle-display/ChronicleDisplay-Bold.woff2 b/fonts/chronicle-display/ChronicleDisplay-Bold.woff2 new file mode 100644 index 0000000..fedd75e Binary files /dev/null and b/fonts/chronicle-display/ChronicleDisplay-Bold.woff2 differ diff --git a/fonts/gotham/Gotham-Bold.eot b/fonts/gotham/Gotham-Bold.eot new file mode 100644 index 0000000..28c0dc5 Binary files /dev/null and b/fonts/gotham/Gotham-Bold.eot differ diff --git a/fonts/gotham/Gotham-Bold.svg b/fonts/gotham/Gotham-Bold.svg new file mode 100644 index 0000000..b744d09 --- /dev/null +++ b/fonts/gotham/Gotham-Bold.svg @@ -0,0 +1,3072 @@ + + + + +Created by FontForge 20120731 at Fri Sep 9 06:13:48 2016 + By ,,, +Copyright (C) 2000, 2007 Hoefler & Frere-Jones. http://www.typography.com + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/fonts/gotham/Gotham-Bold.ttf b/fonts/gotham/Gotham-Bold.ttf new file mode 100644 index 0000000..f2fcf8f Binary files /dev/null and b/fonts/gotham/Gotham-Bold.ttf differ diff --git a/fonts/gotham/Gotham-Bold.woff b/fonts/gotham/Gotham-Bold.woff new file mode 100644 index 0000000..cbcfbfa Binary files /dev/null and b/fonts/gotham/Gotham-Bold.woff differ diff --git a/fonts/gotham/Gotham-Bold.woff2 b/fonts/gotham/Gotham-Bold.woff2 new file mode 100644 index 0000000..d2c04a7 Binary files /dev/null and b/fonts/gotham/Gotham-Bold.woff2 differ diff --git a/fonts/gotham/Gotham-Book.eot b/fonts/gotham/Gotham-Book.eot new file mode 100644 index 0000000..e17386b Binary files /dev/null and b/fonts/gotham/Gotham-Book.eot differ diff --git a/fonts/gotham/Gotham-Book.svg b/fonts/gotham/Gotham-Book.svg new file mode 100644 index 0000000..66474be --- /dev/null +++ b/fonts/gotham/Gotham-Book.svg @@ -0,0 +1,3091 @@ + + + + +Created by FontForge 20120731 at Fri Sep 9 06:13:48 2016 + By ,,, +Copyright (C) 2000, 2007 Hoefler & Frere-Jones. http://www.typography.com + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/fonts/gotham/Gotham-Book.ttf b/fonts/gotham/Gotham-Book.ttf new file mode 100644 index 0000000..7b8a44c Binary files /dev/null and b/fonts/gotham/Gotham-Book.ttf differ diff --git a/fonts/gotham/Gotham-Book.woff b/fonts/gotham/Gotham-Book.woff new file mode 100644 index 0000000..10b6bd0 Binary files /dev/null and b/fonts/gotham/Gotham-Book.woff differ diff --git a/fonts/gotham/Gotham-Book.woff2 b/fonts/gotham/Gotham-Book.woff2 new file mode 100644 index 0000000..37464f3 Binary files /dev/null and b/fonts/gotham/Gotham-Book.woff2 differ diff --git a/fonts/gotham/Gotham-Medium.eot b/fonts/gotham/Gotham-Medium.eot new file mode 100644 index 0000000..b6a48d2 Binary files /dev/null and b/fonts/gotham/Gotham-Medium.eot differ diff --git a/fonts/gotham/Gotham-Medium.svg b/fonts/gotham/Gotham-Medium.svg new file mode 100644 index 0000000..9e11293 --- /dev/null +++ b/fonts/gotham/Gotham-Medium.svg @@ -0,0 +1,3090 @@ + + + + +Created by FontForge 20120731 at Fri Sep 9 06:13:49 2016 + By ,,, +Copyright (C) 2000, 2007 Hoefler & Frere-Jones. http://www.typography.com + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/fonts/gotham/Gotham-Medium.ttf b/fonts/gotham/Gotham-Medium.ttf new file mode 100644 index 0000000..6fdded0 Binary files /dev/null and b/fonts/gotham/Gotham-Medium.ttf differ diff --git a/fonts/gotham/Gotham-Medium.woff b/fonts/gotham/Gotham-Medium.woff new file mode 100644 index 0000000..17d3d34 Binary files /dev/null and b/fonts/gotham/Gotham-Medium.woff differ diff --git a/fonts/gotham/Gotham-Medium.woff2 b/fonts/gotham/Gotham-Medium.woff2 new file mode 100644 index 0000000..b4969ed Binary files /dev/null and b/fonts/gotham/Gotham-Medium.woff2 differ diff --git a/fonts/whitney/whitney-bold.ttf b/fonts/whitney/whitney-bold.ttf new file mode 100644 index 0000000..80c9271 Binary files /dev/null and b/fonts/whitney/whitney-bold.ttf differ diff --git a/fonts/whitney/whitney-bold.woff b/fonts/whitney/whitney-bold.woff new file mode 100644 index 0000000..508f22b Binary files /dev/null and b/fonts/whitney/whitney-bold.woff differ diff --git a/fonts/whitney/whitney-bold.woff2 b/fonts/whitney/whitney-bold.woff2 new file mode 100644 index 0000000..03007e2 Binary files /dev/null and b/fonts/whitney/whitney-bold.woff2 differ diff --git a/fonts/whitney/whitney-book.ttf b/fonts/whitney/whitney-book.ttf new file mode 100644 index 0000000..6568a9d Binary files /dev/null and b/fonts/whitney/whitney-book.ttf differ diff --git a/fonts/whitney/whitney-book.woff b/fonts/whitney/whitney-book.woff new file mode 100644 index 0000000..e1d9621 Binary files /dev/null and b/fonts/whitney/whitney-book.woff differ diff --git a/fonts/whitney/whitney-book.woff2 b/fonts/whitney/whitney-book.woff2 new file mode 100644 index 0000000..30441fe Binary files /dev/null and b/fonts/whitney/whitney-book.woff2 differ diff --git a/fonts/whitney/whitney-bookitalic.ttf b/fonts/whitney/whitney-bookitalic.ttf new file mode 100644 index 0000000..6d66fc1 Binary files /dev/null and b/fonts/whitney/whitney-bookitalic.ttf differ diff --git a/fonts/whitney/whitney-bookitalic.woff b/fonts/whitney/whitney-bookitalic.woff new file mode 100644 index 0000000..032929e Binary files /dev/null and b/fonts/whitney/whitney-bookitalic.woff differ diff --git a/fonts/whitney/whitney-bookitalic.woff2 b/fonts/whitney/whitney-bookitalic.woff2 new file mode 100644 index 0000000..b396be1 Binary files /dev/null and b/fonts/whitney/whitney-bookitalic.woff2 differ diff --git a/fonts/whitney/whitney-medium.ttf b/fonts/whitney/whitney-medium.ttf new file mode 100644 index 0000000..33f4b5f Binary files /dev/null and b/fonts/whitney/whitney-medium.ttf differ diff --git a/fonts/whitney/whitney-medium.woff b/fonts/whitney/whitney-medium.woff new file mode 100644 index 0000000..1fc8545 Binary files /dev/null and b/fonts/whitney/whitney-medium.woff differ diff --git a/fonts/whitney/whitney-medium.woff2 b/fonts/whitney/whitney-medium.woff2 new file mode 100644 index 0000000..7fb3336 Binary files /dev/null and b/fonts/whitney/whitney-medium.woff2 differ diff --git a/fonts/whitney/whitney-mediumitalic.ttf b/fonts/whitney/whitney-mediumitalic.ttf new file mode 100644 index 0000000..5fe54dd Binary files /dev/null and b/fonts/whitney/whitney-mediumitalic.ttf differ diff --git a/fonts/whitney/whitney-mediumitalic.woff b/fonts/whitney/whitney-mediumitalic.woff new file mode 100644 index 0000000..b6d8faa Binary files /dev/null and b/fonts/whitney/whitney-mediumitalic.woff differ diff --git a/fonts/whitney/whitney-mediumitalic.woff2 b/fonts/whitney/whitney-mediumitalic.woff2 new file mode 100644 index 0000000..a63f212 Binary files /dev/null and b/fonts/whitney/whitney-mediumitalic.woff2 differ diff --git a/gulpfile.js b/gulpfile.js new file mode 100644 index 0000000..bc327b9 --- /dev/null +++ b/gulpfile.js @@ -0,0 +1,101 @@ +var gulp = require('gulp'); +var browserSync = require('browser-sync'); +var cp = require('child_process'); +var htmlmin = require('gulp-htmlmin'); +var sass = require('gulp-sass'); +var cleanCSS = require('gulp-clean-css'); +var autoprefix = require('gulp-autoprefixer'); +var concat = require('gulp-concat'); +var jshint = require('gulp-jshint'); +var babel = require('gulp-babel'); +var uglify = require('gulp-uglify'); +var imagemin = require('gulp-imagemin'); +var deploy = require('gulp-gh-pages'); + +var jekyll = process.platform === 'win32' ? 'jekyll.bat' : 'jekyll'; +var messages = { + jekyllBuild: 'Running: $ jekyll build' +}; + +// Build the Jekyll Site +gulp.task('jekyll-build', function(done) { + browserSync.notify(messages.jekyllBuild); + return cp.spawn( jekyll , ['build'], {stdio: 'inherit'}) + .on('close', done); + }); + +// Rebuild Jekyll & do page reload +gulp.task('jekyll-rebuild', ['jekyll-build'], function () { + browserSync.reload(); + }); + +// Wait for jekyll-build, then launch the Server +gulp.task('browser-sync', ['styles', 'jekyll-build'], function() { + browserSync({ + server: { + baseDir: '_site' + } + }); + }); + + +gulp.task('htmlmin', function() { + return gulp.src('*.html') + .pipe(htmlmin({collapseWhitespace: true, removeComments: true})) + .pipe(gulp.dest('_site')); + }); + +// Compile files from _scss into both _site/css (for live injecting) and site (for future jekyll builds) +gulp.task('styles', function() { + return gulp.src('_scss/main.scss') + .pipe(sass({ + includePaths: ['scss'], + onError: browserSync.notify + }) + ) + .pipe(cleanCSS({compatibility: 'ie8'})) + .pipe(autoprefix(['last 15 versions', '> 1%', 'ie 8', 'ie 7'], { cascade: true })) + .pipe(gulp.dest('_site/css')) + .pipe(browserSync.reload({stream:true})) + .pipe(gulp.dest('css')); + }); + + +gulp.task('scripts', function() { + return gulp.src('js/*.js') + .pipe(jshint()) + .pipe(babel({ + presets: ['es2015'] + })) + //.pipe(concat('scripts.js')) + //.pipe(uglify()) + .pipe(gulp.dest('_site/js')); + }); + +gulp.task('images', function() { + return gulp.src('img/**/*.+(png|jpg|gif|svg)') + .pipe(imagemin()) + .pipe(gulp.dest('_site/img')); + }); + +gulp.task('fonts', function() { + return gulp.src('fonts/**/*') + .pipe(gulp.dest('_site/fonts')) +}) + +// Watch scss files for changes & recompile +// Watch html/md files, run jekyll & reload BrowserSync +gulp.task('watch', function() { + gulp.watch(['*.html', '_layouts/*.html', '_includes/*.html', '_data/*.yml'], ['jekyll-rebuild']); + gulp.watch('_scss/**/*.scss', ['styles']); + gulp.watch('js/*.js', ['scripts']); + }); + +// deploy to github pages +gulp.task('deploy', ["jekyll-build"], function () { + return gulp.src("./_site/**/*") + .pipe(deploy()); + }); + +// Default task, running just `gulp` will compile the sass, compile the jekyll site, launch BrowserSync & watch files. +gulp.task('default', ['browser-sync', 'watch']); diff --git a/img/.DS_Store b/img/.DS_Store new file mode 100644 index 0000000..cb71c80 Binary files /dev/null and b/img/.DS_Store differ diff --git a/img/404-bg.jpg b/img/404-bg.jpg new file mode 100644 index 0000000..1727cfe Binary files /dev/null and b/img/404-bg.jpg differ diff --git a/img/bg-contact/contact-lg.jpg b/img/bg-contact/contact-lg.jpg new file mode 100644 index 0000000..88e541b Binary files /dev/null and b/img/bg-contact/contact-lg.jpg differ diff --git a/img/bg-contact/contact-md.jpg b/img/bg-contact/contact-md.jpg new file mode 100644 index 0000000..95ca99d Binary files /dev/null and b/img/bg-contact/contact-md.jpg differ diff --git a/img/bg-contact/contact-sm.jpg b/img/bg-contact/contact-sm.jpg new file mode 100644 index 0000000..c271707 Binary files /dev/null and b/img/bg-contact/contact-sm.jpg differ diff --git a/img/bg-contact/contact-xl.jpg b/img/bg-contact/contact-xl.jpg new file mode 100644 index 0000000..223f59f Binary files /dev/null and b/img/bg-contact/contact-xl.jpg differ diff --git a/img/bg-contact/contact-xs.jpg b/img/bg-contact/contact-xs.jpg new file mode 100644 index 0000000..d434f71 Binary files /dev/null and b/img/bg-contact/contact-xs.jpg differ diff --git a/img/bg-experience/experience-lg.jpg b/img/bg-experience/experience-lg.jpg new file mode 100644 index 0000000..45ecfdc Binary files /dev/null and b/img/bg-experience/experience-lg.jpg differ diff --git a/img/bg-experience/experience-md.jpg b/img/bg-experience/experience-md.jpg new file mode 100644 index 0000000..c340f04 Binary files /dev/null and b/img/bg-experience/experience-md.jpg differ diff --git a/img/bg-experience/experience-sm.jpg b/img/bg-experience/experience-sm.jpg new file mode 100644 index 0000000..f255ba8 Binary files /dev/null and b/img/bg-experience/experience-sm.jpg differ diff --git a/img/bg-experience/experience-xl.jpg b/img/bg-experience/experience-xl.jpg new file mode 100644 index 0000000..032583b Binary files /dev/null and b/img/bg-experience/experience-xl.jpg differ diff --git a/img/bg-experience/experience-xs.jpg b/img/bg-experience/experience-xs.jpg new file mode 100644 index 0000000..add1480 Binary files /dev/null and b/img/bg-experience/experience-xs.jpg differ diff --git a/img/bg-intro/bg-intro.jpg b/img/bg-intro/bg-intro.jpg new file mode 100644 index 0000000..4f78cc5 Binary files /dev/null and b/img/bg-intro/bg-intro.jpg differ diff --git a/img/bg-intro/intro-lg.jpg b/img/bg-intro/intro-lg.jpg new file mode 100644 index 0000000..795170d Binary files /dev/null and b/img/bg-intro/intro-lg.jpg differ diff --git a/img/bg-intro/intro-md.jpg b/img/bg-intro/intro-md.jpg new file mode 100644 index 0000000..a9f31a7 Binary files /dev/null and b/img/bg-intro/intro-md.jpg differ diff --git a/img/bg-intro/intro-sm.jpg b/img/bg-intro/intro-sm.jpg new file mode 100644 index 0000000..fcf9275 Binary files /dev/null and b/img/bg-intro/intro-sm.jpg differ diff --git a/img/bg-intro/intro-xl.jpg b/img/bg-intro/intro-xl.jpg new file mode 100644 index 0000000..866b8f9 Binary files /dev/null and b/img/bg-intro/intro-xl.jpg differ diff --git a/img/bg-intro/intro-xs.jpg b/img/bg-intro/intro-xs.jpg new file mode 100644 index 0000000..3dce19f Binary files /dev/null and b/img/bg-intro/intro-xs.jpg differ diff --git a/img/bg-services/services-lg.jpg b/img/bg-services/services-lg.jpg new file mode 100644 index 0000000..4be79f8 Binary files /dev/null and b/img/bg-services/services-lg.jpg differ diff --git a/img/bg-services/services-md.jpg b/img/bg-services/services-md.jpg new file mode 100644 index 0000000..29c2db0 Binary files /dev/null and b/img/bg-services/services-md.jpg differ diff --git a/img/bg-services/services-sm.jpg b/img/bg-services/services-sm.jpg new file mode 100644 index 0000000..c00411e Binary files /dev/null and b/img/bg-services/services-sm.jpg differ diff --git a/img/bg-services/services-xl.jpg b/img/bg-services/services-xl.jpg new file mode 100644 index 0000000..72bab11 Binary files /dev/null and b/img/bg-services/services-xl.jpg differ diff --git a/img/bg-services/services-xs.jpg b/img/bg-services/services-xs.jpg new file mode 100644 index 0000000..88e1fe3 Binary files /dev/null and b/img/bg-services/services-xs.jpg differ diff --git a/img/headshot.jpg b/img/headshot.jpg new file mode 100644 index 0000000..51df61d Binary files /dev/null and b/img/headshot.jpg differ diff --git a/img/icons/.DS_Store b/img/icons/.DS_Store new file mode 100644 index 0000000..5008ddf Binary files /dev/null and b/img/icons/.DS_Store differ diff --git a/img/icons/adobe-illustrator.png b/img/icons/adobe-illustrator.png new file mode 100755 index 0000000..6e679c0 Binary files /dev/null and b/img/icons/adobe-illustrator.png differ diff --git a/img/icons/adobe-indesign.png b/img/icons/adobe-indesign.png new file mode 100755 index 0000000..47c12d0 Binary files /dev/null and b/img/icons/adobe-indesign.png differ diff --git a/img/icons/adobe-photoshop.png b/img/icons/adobe-photoshop.png new file mode 100755 index 0000000..030f4f3 Binary files /dev/null and b/img/icons/adobe-photoshop.png differ diff --git a/img/icons/atom.png b/img/icons/atom.png new file mode 100755 index 0000000..c3fe5f7 Binary files /dev/null and b/img/icons/atom.png differ diff --git a/img/icons/briefcase.png b/img/icons/briefcase.png new file mode 100755 index 0000000..29b1ffa Binary files /dev/null and b/img/icons/briefcase.png differ diff --git a/img/icons/browser-1.png b/img/icons/browser-1.png new file mode 100755 index 0000000..28cd88a Binary files /dev/null and b/img/icons/browser-1.png differ diff --git a/img/icons/browser.png b/img/icons/browser.png new file mode 100644 index 0000000..060caf4 Binary files /dev/null and b/img/icons/browser.png differ diff --git a/img/icons/checkmark.svg b/img/icons/checkmark.svg new file mode 100644 index 0000000..5b4554e --- /dev/null +++ b/img/icons/checkmark.svg @@ -0,0 +1 @@ + diff --git a/img/icons/code.png b/img/icons/code.png new file mode 100644 index 0000000..eb8c50d Binary files /dev/null and b/img/icons/code.png differ diff --git a/img/icons/codepen.svg b/img/icons/codepen.svg new file mode 100644 index 0000000..8b95bdc --- /dev/null +++ b/img/icons/codepen.svg @@ -0,0 +1 @@ + diff --git a/img/icons/design.png b/img/icons/design.png new file mode 100644 index 0000000..9ac6d01 Binary files /dev/null and b/img/icons/design.png differ diff --git a/img/icons/devices.png b/img/icons/devices.png new file mode 100644 index 0000000..e19efbb Binary files /dev/null and b/img/icons/devices.png differ diff --git a/img/icons/download.png b/img/icons/download.png new file mode 100755 index 0000000..96650fc Binary files /dev/null and b/img/icons/download.png differ diff --git a/img/icons/email.svg b/img/icons/email.svg new file mode 100644 index 0000000..d2cb290 --- /dev/null +++ b/img/icons/email.svg @@ -0,0 +1 @@ + diff --git a/img/icons/female.png b/img/icons/female.png new file mode 100644 index 0000000..4231598 Binary files /dev/null and b/img/icons/female.png differ diff --git a/img/icons/github.svg b/img/icons/github.svg new file mode 100644 index 0000000..fbd81ec --- /dev/null +++ b/img/icons/github.svg @@ -0,0 +1 @@ + diff --git a/img/icons/graduate-cap.png b/img/icons/graduate-cap.png new file mode 100755 index 0000000..36a32ba Binary files /dev/null and b/img/icons/graduate-cap.png differ diff --git a/img/icons/html.png b/img/icons/html.png new file mode 100644 index 0000000..2aef940 Binary files /dev/null and b/img/icons/html.png differ diff --git a/img/icons/instagram.svg b/img/icons/instagram.svg new file mode 100644 index 0000000..7a5077a --- /dev/null +++ b/img/icons/instagram.svg @@ -0,0 +1 @@ + diff --git a/img/icons/internet.png b/img/icons/internet.png new file mode 100644 index 0000000..b207b03 Binary files /dev/null and b/img/icons/internet.png differ diff --git a/img/icons/invision.png b/img/icons/invision.png new file mode 100755 index 0000000..a9631a3 Binary files /dev/null and b/img/icons/invision.png differ diff --git a/img/icons/laptop.png b/img/icons/laptop.png new file mode 100644 index 0000000..7e2e556 Binary files /dev/null and b/img/icons/laptop.png differ diff --git a/img/icons/light-bulb.png b/img/icons/light-bulb.png new file mode 100644 index 0000000..aa45562 Binary files /dev/null and b/img/icons/light-bulb.png differ diff --git a/img/icons/like.png b/img/icons/like.png new file mode 100644 index 0000000..9f03d72 Binary files /dev/null and b/img/icons/like.png differ diff --git a/img/icons/linkedin.svg b/img/icons/linkedin.svg new file mode 100644 index 0000000..5442d3e --- /dev/null +++ b/img/icons/linkedin.svg @@ -0,0 +1 @@ + diff --git a/img/icons/notebook.png b/img/icons/notebook.png new file mode 100755 index 0000000..8168bfc Binary files /dev/null and b/img/icons/notebook.png differ diff --git a/img/icons/pencil.png b/img/icons/pencil.png new file mode 100755 index 0000000..2a705f7 Binary files /dev/null and b/img/icons/pencil.png differ diff --git a/img/icons/repair-tools.png b/img/icons/repair-tools.png new file mode 100755 index 0000000..6698785 Binary files /dev/null and b/img/icons/repair-tools.png differ diff --git a/img/icons/search.png b/img/icons/search.png new file mode 100755 index 0000000..08f7bbb Binary files /dev/null and b/img/icons/search.png differ diff --git a/img/icons/settings.png b/img/icons/settings.png new file mode 100644 index 0000000..953dac8 Binary files /dev/null and b/img/icons/settings.png differ diff --git a/img/icons/sketch.png b/img/icons/sketch.png new file mode 100755 index 0000000..1f5c647 Binary files /dev/null and b/img/icons/sketch.png differ diff --git a/img/icons/twitter.svg b/img/icons/twitter.svg new file mode 100644 index 0000000..52ddbd5 --- /dev/null +++ b/img/icons/twitter.svg @@ -0,0 +1 @@ + diff --git a/img/icons/ux-design.png b/img/icons/ux-design.png new file mode 100644 index 0000000..035f56d Binary files /dev/null and b/img/icons/ux-design.png differ diff --git a/img/icons/zeplin.png b/img/icons/zeplin.png new file mode 100755 index 0000000..d1ab253 Binary files /dev/null and b/img/icons/zeplin.png differ diff --git a/img/invision.png b/img/invision.png new file mode 100755 index 0000000..a9631a3 Binary files /dev/null and b/img/invision.png differ diff --git a/img/logo-black.png b/img/logo-black.png new file mode 100755 index 0000000..95cc48a Binary files /dev/null and b/img/logo-black.png differ diff --git a/img/logo-white.png b/img/logo-white.png new file mode 100755 index 0000000..e2384dc Binary files /dev/null and b/img/logo-white.png differ diff --git a/img/marvel.png b/img/marvel.png new file mode 100644 index 0000000..7c168c1 Binary files /dev/null and b/img/marvel.png differ diff --git a/img/og.jpg b/img/og.jpg new file mode 100644 index 0000000..3c17f3e Binary files /dev/null and b/img/og.jpg differ diff --git a/img/portfolio/.DS_Store b/img/portfolio/.DS_Store new file mode 100644 index 0000000..0a47699 Binary files /dev/null and b/img/portfolio/.DS_Store differ diff --git a/img/portfolio/coursesource/coursesource-mobile.jpg b/img/portfolio/coursesource/coursesource-mobile.jpg new file mode 100644 index 0000000..c340956 Binary files /dev/null and b/img/portfolio/coursesource/coursesource-mobile.jpg differ diff --git a/img/portfolio/coursesource/coursesource-tablet.jpg b/img/portfolio/coursesource/coursesource-tablet.jpg new file mode 100644 index 0000000..5346027 Binary files /dev/null and b/img/portfolio/coursesource/coursesource-tablet.jpg differ diff --git a/img/portfolio/coursesource/coursesource.jpg b/img/portfolio/coursesource/coursesource.jpg new file mode 100644 index 0000000..f4a311a Binary files /dev/null and b/img/portfolio/coursesource/coursesource.jpg differ diff --git a/img/portfolio/fontipsums/fontipsums-mobile.jpg b/img/portfolio/fontipsums/fontipsums-mobile.jpg new file mode 100644 index 0000000..0648dbb Binary files /dev/null and b/img/portfolio/fontipsums/fontipsums-mobile.jpg differ diff --git a/img/portfolio/fontipsums/fontipsums-tablet.jpg b/img/portfolio/fontipsums/fontipsums-tablet.jpg new file mode 100644 index 0000000..88d9397 Binary files /dev/null and b/img/portfolio/fontipsums/fontipsums-tablet.jpg differ diff --git a/img/portfolio/fontipsums/fontipsums.jpg b/img/portfolio/fontipsums/fontipsums.jpg new file mode 100644 index 0000000..2da210e Binary files /dev/null and b/img/portfolio/fontipsums/fontipsums.jpg differ diff --git a/img/portfolio/humankinda/humankinda-mobile.jpg b/img/portfolio/humankinda/humankinda-mobile.jpg new file mode 100644 index 0000000..cc5f8f9 Binary files /dev/null and b/img/portfolio/humankinda/humankinda-mobile.jpg differ diff --git a/img/portfolio/humankinda/humankinda-tablet.jpg b/img/portfolio/humankinda/humankinda-tablet.jpg new file mode 100644 index 0000000..a1ebb68 Binary files /dev/null and b/img/portfolio/humankinda/humankinda-tablet.jpg differ diff --git a/img/portfolio/humankinda/humankinda.jpg b/img/portfolio/humankinda/humankinda.jpg new file mode 100644 index 0000000..35ac1ac Binary files /dev/null and b/img/portfolio/humankinda/humankinda.jpg differ diff --git a/img/portfolio/mullen/mullen-mobile.jpg b/img/portfolio/mullen/mullen-mobile.jpg new file mode 100644 index 0000000..45d33ef Binary files /dev/null and b/img/portfolio/mullen/mullen-mobile.jpg differ diff --git a/img/portfolio/mullen/mullen-tablet.jpg b/img/portfolio/mullen/mullen-tablet.jpg new file mode 100644 index 0000000..ce5d705 Binary files /dev/null and b/img/portfolio/mullen/mullen-tablet.jpg differ diff --git a/img/portfolio/mullen/mullen.jpg b/img/portfolio/mullen/mullen.jpg new file mode 100644 index 0000000..893293f Binary files /dev/null and b/img/portfolio/mullen/mullen.jpg differ diff --git a/img/portfolio/nuwit/nuwit-mobile.jpg b/img/portfolio/nuwit/nuwit-mobile.jpg new file mode 100644 index 0000000..00d949e Binary files /dev/null and b/img/portfolio/nuwit/nuwit-mobile.jpg differ diff --git a/img/portfolio/nuwit/nuwit-tablet.jpg b/img/portfolio/nuwit/nuwit-tablet.jpg new file mode 100644 index 0000000..62f0d98 Binary files /dev/null and b/img/portfolio/nuwit/nuwit-tablet.jpg differ diff --git a/img/portfolio/nuwit/nuwit.jpg b/img/portfolio/nuwit/nuwit.jpg new file mode 100644 index 0000000..94ad7be Binary files /dev/null and b/img/portfolio/nuwit/nuwit.jpg differ diff --git a/img/portfolio/onecard/onecard-mobile.jpg b/img/portfolio/onecard/onecard-mobile.jpg new file mode 100644 index 0000000..d8f1a1c Binary files /dev/null and b/img/portfolio/onecard/onecard-mobile.jpg differ diff --git a/img/portfolio/onecard/onecard-tablet.jpg b/img/portfolio/onecard/onecard-tablet.jpg new file mode 100644 index 0000000..9b3690c Binary files /dev/null and b/img/portfolio/onecard/onecard-tablet.jpg differ diff --git a/img/portfolio/onecard/onecard.jpg b/img/portfolio/onecard/onecard.jpg new file mode 100644 index 0000000..32cd267 Binary files /dev/null and b/img/portfolio/onecard/onecard.jpg differ diff --git a/img/portfolio/resume/resume-mobile.jpg b/img/portfolio/resume/resume-mobile.jpg new file mode 100644 index 0000000..8c637b1 Binary files /dev/null and b/img/portfolio/resume/resume-mobile.jpg differ diff --git a/img/portfolio/resume/resume-tablet.jpg b/img/portfolio/resume/resume-tablet.jpg new file mode 100644 index 0000000..87829d5 Binary files /dev/null and b/img/portfolio/resume/resume-tablet.jpg differ diff --git a/img/portfolio/resume/resume.jpg b/img/portfolio/resume/resume.jpg new file mode 100644 index 0000000..f5b0c04 Binary files /dev/null and b/img/portfolio/resume/resume.jpg differ diff --git a/img/portfolio/screentime/screentime-1.jpg b/img/portfolio/screentime/screentime-1.jpg new file mode 100644 index 0000000..e3b92fb Binary files /dev/null and b/img/portfolio/screentime/screentime-1.jpg differ diff --git a/img/portfolio/screentime/screentime-2.jpg b/img/portfolio/screentime/screentime-2.jpg new file mode 100644 index 0000000..d9412c3 Binary files /dev/null and b/img/portfolio/screentime/screentime-2.jpg differ diff --git a/img/portfolio/screentime/screentime-3.jpg b/img/portfolio/screentime/screentime-3.jpg new file mode 100644 index 0000000..9bd5ae2 Binary files /dev/null and b/img/portfolio/screentime/screentime-3.jpg differ diff --git a/img/portfolio/screentime/screentime-4.jpg b/img/portfolio/screentime/screentime-4.jpg new file mode 100644 index 0000000..e77d7ed Binary files /dev/null and b/img/portfolio/screentime/screentime-4.jpg differ diff --git a/img/portfolio/weather/weather-mobile.jpg b/img/portfolio/weather/weather-mobile.jpg new file mode 100644 index 0000000..afcc276 Binary files /dev/null and b/img/portfolio/weather/weather-mobile.jpg differ diff --git a/img/portfolio/weather/weather-tablet.jpg b/img/portfolio/weather/weather-tablet.jpg new file mode 100644 index 0000000..53fdd47 Binary files /dev/null and b/img/portfolio/weather/weather-tablet.jpg differ diff --git a/img/portfolio/weather/weather.jpg b/img/portfolio/weather/weather.jpg new file mode 100644 index 0000000..b09def3 Binary files /dev/null and b/img/portfolio/weather/weather.jpg differ diff --git a/img/portfolio/websitev1/websitev1-mobile.jpg b/img/portfolio/websitev1/websitev1-mobile.jpg new file mode 100644 index 0000000..3c0e0f8 Binary files /dev/null and b/img/portfolio/websitev1/websitev1-mobile.jpg differ diff --git a/img/portfolio/websitev1/websitev1-tablet.jpg b/img/portfolio/websitev1/websitev1-tablet.jpg new file mode 100644 index 0000000..9ef5a05 Binary files /dev/null and b/img/portfolio/websitev1/websitev1-tablet.jpg differ diff --git a/img/portfolio/websitev1/websitev1.jpg b/img/portfolio/websitev1/websitev1.jpg new file mode 100644 index 0000000..1d5b044 Binary files /dev/null and b/img/portfolio/websitev1/websitev1.jpg differ diff --git a/img/sketch.png b/img/sketch.png new file mode 100755 index 0000000..1f5c647 Binary files /dev/null and b/img/sketch.png differ diff --git a/img/zeplin.png b/img/zeplin.png new file mode 100755 index 0000000..d1ab253 Binary files /dev/null and b/img/zeplin.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..deebb24 --- /dev/null +++ b/index.html @@ -0,0 +1,13 @@ +--- +layout: default +--- + +{% include intro.html %} +{% include about.html %} +{% include services.html %} +{% include skills.html %} +{% include experience.html %} +{% include resume_btn.html %} +{% include portfolio.html %} +{% include contact.html %} +{% include footer.html %} diff --git a/js/.DS_Store b/js/.DS_Store new file mode 100644 index 0000000..5008ddf Binary files /dev/null and b/js/.DS_Store differ diff --git a/js/main.js b/js/main.js new file mode 100644 index 0000000..cffb536 --- /dev/null +++ b/js/main.js @@ -0,0 +1,139 @@ +$(function() { + const contentSections = $('.section'); + const navigationItems = $('#dot-nav a'); + const overlayItems = $('#overlay a'); + + $(window).on('scroll', () => { updateNavigation(); }); + //smooth scroll to the section + navigationItems.on('click', event => { + event.preventDefault(); + smoothScroll($(this.hash)); + }); + overlayItems.on('click', event => { + event.preventDefault(); + smoothScroll($(this.hash)); + $('#toggle').click(); + }); + // smooth scroll to second section + $('.scroll-down').on('click', event => { + event.preventDefault(); + smoothScroll($(this.hash)); + }); + // close navigation on touch devices when selectinG an elemnt from the list + $('.touch #dot-nav a').on('click', () => { + $('.touch #dot-nav').removeClass('open'); + }); + + // ==================== VERTICAL NAV ON SCROLL ==================== // + $(document).scroll( () => { + const x = $(window).width(); + const y = $(this).scrollTop(); + const $nav = $('#dot-nav'); + if (x > 768 && y > 500) { + $nav.fadeIn(); + } else { + $nav.fadeOut(); + } + }); + + function updateNavigation() { + contentSections.each( () => { + const $this = $(this); + const activeSection = $('#dot-nav a[href="#' + $this.attr('id') + '"]').data('number') - 1; + if (($this.offset().top - $(window).height() / 2 < $(window).scrollTop()) && ($this.offset().top + $this.height() - $(window).height() / 2 > $(window).scrollTop())) { + navigationItems.eq(activeSection).addClass('is-selected'); + } else { + navigationItems.eq(activeSection).removeClass('is-selected'); + } + }); + } + + function smoothScroll(target) { + $('body,html').animate({ 'scrollTop': target.offset().top + 50 }, 600); + } + + // ==================== MOBILE MENU ==================== // + $('#toggle').click(function(e) { + $(this).toggleClass('active'); + $('#overlay').toggleClass('open'); + $('body').toggleClass('noScroll'); + }); + $(window).on('resize', event => { + var windowWidth = $(window).width(); + var isOpen = $('#overlay').hasClass('open'); + + if (windowWidth > 768) { + $('#dot-nav').show(); + if (isOpen) { + $('#toggle').removeClass('active'); + $('#overlay').removeClass('open'); + } + } else if (windowWidth < 768) { + $('#dot-nav').hide(); + } + }); + + // ==================== CONTACT FORM ==================== // + const $contactInput = $('.contact-input'); + $contactInput.focus(function() { + $(this).parent().addClass('is-active is-completed'); + }); + $contactInput.focusout(function() { + if ($(this).val() === "") { + $(this).parent().removeClass('is-completed'); + } + $(this).parent().removeClass('is-active'); + }); + + $(document).one('focus.textarea', '.autoExpand', () => { + const savedValue = this.value; + this.value = ''; + this.baseScrollHeight = this.scrollHeight; + this.value = savedValue; + }).on('input.textarea', '.autoExpand', () => { + var minRows = this.getAttribute('data-min-rows') | 0, + rows; + this.rows = minRows; + rows = Math.ceil((this.scrollHeight - this.baseScrollHeight) / 17); + this.rows = minRows + rows; + }); + + const isMobile = { + Android() { + return navigator.userAgent.match(/Android/i); + }, + BlackBerry() { + return navigator.userAgent.match(/BlackBerry/i); + }, + iOS() { + return navigator.userAgent.match(/iPhone|iPad|iPod/i); + }, + Opera() { + return navigator.userAgent.match(/Opera Mini/i); + }, + Windows() { + return navigator.userAgent.match(/IEMobile/i); + }, + any() { + return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows()); + } + }; + + if (!isMobile.any()) { + skrollr.init({ + render: function(data) { + //Debugging - Log the current scroll position. + // console.log(data.curTop); + }, + smoothScrolling: false, + forceHeight: false + }); + } +}); + +(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ + (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), + m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) +})(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); +ga('create', 'UA-84377262-1', 'auto'); +ga('send', 'pageview'); diff --git a/js/particles.js b/js/particles.js new file mode 100644 index 0000000..3bb7435 --- /dev/null +++ b/js/particles.js @@ -0,0 +1,127 @@ +particlesJS("particles-js", { + "particles": { + "number": { + "value": 50, + "density": { + "enable": true, + "value_area": 700 + } + }, + "color": { + "value": "#ffffff" + }, + "shape": { + "type": "circle", + "stroke": { + "width": 0, + "color": "#000000" + }, + "polygon": { + "nb_sides": 5 + }, + "image": { + "src": "img/github.svg", + "width": 100, + "height": 100 + } + }, + "opacity": { + "value": 0.75, + "random": false, + "anim": { + "enable": false, + "speed": 0.25, + "opacity_min": 0.1, + "sync": false + } + }, + "size": { + "value": 3, + "random": true, + "anim": { + "enable": false, + "speed": 50, + "size_min": 0.1, + "sync": false + } + }, + "line_linked": { + "enable": true, + "distance": 100, + "color": "#ffffff", + "opacity": 0.7, + "width": 0.5 + }, + "move": { + "enable": true, + "speed": 3, + "direction": "none", + "random": false, + "straight": false, + "out_mode": "out", + "bounce": false, + "attract": { + "enable": false, + "rotateX": 700, + "rotateY": 1400 + } + } + }, + "interactivity": { + "detect_on": "canvas", + "events": { + "onhover": { + "enable": true, + "mode": "repulse" + }, + "onclick": { + "enable": true, + "mode": "push" + }, + "resize": true + }, + "modes": { + "grab": { + "distance": 400, + "line_linked": { + "opacity": 1 + } + }, + "bubble": { + "distance": 400, + "size": 40, + "duration": 2, + "opacity": 8, + "speed": 3 + }, + "repulse": { + "distance": 100, + "duration": 0.3 + }, + "push": { + "particles_nb": 4 + }, + "remove": { + "particles_nb": 2 + } + } + }, + "retina_detect": true +}); +// var count_particles, stats, update; +// stats = new Stats; +// stats.setMode(0); +// stats.domElement.style.position = 'absolute'; +// stats.domElement.style.left = '0px'; +// stats.domElement.style.top = '0px'; +// document.body.appendChild(stats.domElement); +// count_particles = document.querySelector('.js-count-particles'); +// update = function() { +// stats.begin(); +// stats.end(); +// if (window.pJSDom[0].pJS.particles && window.pJSDom[0].pJS.particles.array) { +// count_particles.innerText = window.pJSDom[0].pJS.particles.array.length; +// } +// requestAnimationFrame(update); +// }; +// requestAnimationFrame(update);; diff --git a/package.json b/package.json new file mode 100644 index 0000000..ec4e04e --- /dev/null +++ b/package.json @@ -0,0 +1,34 @@ +{ + "name": "Brittany Chiang", + "version": "0.0.0", + "description": "Personal website of Brittany Chiang", + "main": "gulpfile.js", + "author": "Brittany Chiang", + "devDependencies": { + "babel-preset-es2015": "^6.18.0", + "browser-sync": "^2.18.2", + "gulp": "^3.8.8", + "gulp-autoprefixer": "3.1.1", + "gulp-babel": "^6.1.2", + "gulp-clean-css": "^2.1.1", + "gulp-concat": "^2.6.1", + "gulp-gh-pages": "^0.5.4", + "gulp-htmlmin": "^3.0.0", + "gulp-imagemin": "^3.1.1", + "gulp-jshint": "^2.0.4", + "gulp-sass": "^2.1.0", + "gulp-uglify": "^2.0.0", + "jshint": "^2.9.4" + }, + "repository": { + "type": "git", + "url": "https://github.com/bchiang7/bchiang7.github.io" + }, + "keywords": [ + "jekyll", + "gulp", + "sass", + "browsersync" + ], + "homepage": "https://github.com/shakyShane/jekyll-gulp-sass-browser-sync" +}