From 66e98b7125c87706782b8247b8e0329473dbeb5a Mon Sep 17 00:00:00 2001 From: "Adam T. Carpenter" Date: Sat, 11 Jul 2020 10:59:50 -0400 Subject: reorganized assets and CSS, added a post --- .prettierrc | 8 + README.md | 1 - _cobalt.yml | 10 +- _includes/footer.liquid | 38 +- _includes/head.liquid | 11 +- _includes/nav.liquid | 167 +- _layouts/index.liquid | 198 +- _scripts/resume.sh | 13 - assets/logo.png | Bin 0 -> 20369 bytes assets/logo_diag.png | Bin 0 -> 39576 bytes index.md | 6 - pages/resume.md | 48 - pages/resume.md.html | 55 - pages/resume.pdf | Bin 24012 -> 0 bytes posts/2020-07-11-why-computer-science-at-w-m.md | 166 + public/css/_sass/.DS_Store | Bin 6148 -> 0 bytes public/css/_sass/base/_all.sass | 5 - public/css/_sass/base/generic.sass | 130 - public/css/_sass/base/helpers.sass | 276 -- public/css/_sass/base/minireset.sass | 84 - public/css/_sass/components/_all.sass | 15 - public/css/_sass/components/breadcrumb.sass | 75 - public/css/_sass/components/card.sass | 74 - public/css/_sass/components/dropdown.sass | 77 - public/css/_sass/components/level.sass | 75 - public/css/_sass/components/list.sass | 39 - public/css/_sass/components/media.sass | 48 - public/css/_sass/components/menu.sass | 50 - public/css/_sass/components/message.sass | 86 - public/css/_sass/components/modal.sass | 113 - public/css/_sass/components/navbar.sass | 428 --- public/css/_sass/components/pagination.sass | 144 - public/css/_sass/components/panel.sass | 101 - public/css/_sass/components/tabs.sass | 151 - public/css/_sass/elements/_all.sass | 16 - public/css/_sass/elements/box.sass | 24 - public/css/_sass/elements/button.sass | 275 -- public/css/_sass/elements/container.sass | 25 - public/css/_sass/elements/content.sass | 151 - public/css/_sass/elements/form.sass | 602 ---- public/css/_sass/elements/icon.sass | 21 - public/css/_sass/elements/image.sass | 69 - public/css/_sass/elements/notification.sass | 35 - public/css/_sass/elements/other.sass | 39 - public/css/_sass/elements/progress.sass | 65 - public/css/_sass/elements/table.sass | 126 - public/css/_sass/elements/tag.sass | 130 - public/css/_sass/elements/title.sass | 64 - public/css/_sass/grid/_all.sass | 4 - public/css/_sass/grid/columns.sass | 504 --- public/css/_sass/grid/tiles.sass | 32 - public/css/_sass/layout/_all.sass | 5 - public/css/_sass/layout/footer.sass | 6 - public/css/_sass/layout/hero.sass | 156 - public/css/_sass/layout/section.sass | 13 - public/css/_sass/utilities/_all.sass | 8 - public/css/_sass/utilities/animations.sass | 5 - public/css/_sass/utilities/controls.sass | 50 - public/css/_sass/utilities/derived-variables.sass | 85 - public/css/_sass/utilities/functions.sass | 62 - public/css/_sass/utilities/initial-variables.sass | 72 - public/css/_sass/utilities/mixins.sass | 261 -- public/css/animate.css | 3623 --------------------- public/css/fonts/iosevka-regular.ttf | Bin 288852 -> 0 bytes public/css/fonts/iosevka-term-slab-regular.ttf | Bin 425096 -> 0 bytes public/css/fonts/iosevka-term-thin.woff2 | Bin 110248 -> 0 bytes public/css/fonts/lora-regular.ttf | Bin 173616 -> 0 bytes public/css/fonts/symbola.ttf | Bin 2240100 -> 0 bytes public/css/resume.css | 3 - public/css/styles.sass | 48 - public/images/logo.png | Bin 20369 -> 0 bytes public/images/logo_diag.png | Bin 39576 -> 0 bytes styles/_sass/.DS_Store | Bin 0 -> 6148 bytes styles/_sass/base/_all.sass | 5 + styles/_sass/base/generic.sass | 130 + styles/_sass/base/helpers.sass | 276 ++ styles/_sass/base/minireset.sass | 84 + styles/_sass/components/_all.sass | 15 + styles/_sass/components/breadcrumb.sass | 75 + styles/_sass/components/card.sass | 74 + styles/_sass/components/dropdown.sass | 77 + styles/_sass/components/level.sass | 75 + styles/_sass/components/list.sass | 39 + styles/_sass/components/media.sass | 48 + styles/_sass/components/menu.sass | 50 + styles/_sass/components/message.sass | 86 + styles/_sass/components/modal.sass | 113 + styles/_sass/components/navbar.sass | 428 +++ styles/_sass/components/pagination.sass | 144 + styles/_sass/components/panel.sass | 101 + styles/_sass/components/tabs.sass | 151 + styles/_sass/elements/_all.sass | 16 + styles/_sass/elements/box.sass | 24 + styles/_sass/elements/button.sass | 275 ++ styles/_sass/elements/container.sass | 25 + styles/_sass/elements/content.sass | 151 + styles/_sass/elements/form.sass | 602 ++++ styles/_sass/elements/icon.sass | 21 + styles/_sass/elements/image.sass | 69 + styles/_sass/elements/notification.sass | 35 + styles/_sass/elements/other.sass | 39 + styles/_sass/elements/progress.sass | 65 + styles/_sass/elements/table.sass | 126 + styles/_sass/elements/tag.sass | 130 + styles/_sass/elements/title.sass | 64 + styles/_sass/grid/_all.sass | 4 + styles/_sass/grid/columns.sass | 504 +++ styles/_sass/grid/tiles.sass | 32 + styles/_sass/layout/_all.sass | 5 + styles/_sass/layout/footer.sass | 6 + styles/_sass/layout/hero.sass | 156 + styles/_sass/layout/section.sass | 13 + styles/_sass/utilities/_all.sass | 8 + styles/_sass/utilities/animations.sass | 5 + styles/_sass/utilities/controls.sass | 50 + styles/_sass/utilities/derived-variables.sass | 85 + styles/_sass/utilities/functions.sass | 62 + styles/_sass/utilities/initial-variables.sass | 72 + styles/_sass/utilities/mixins.sass | 261 ++ styles/animate.css | 3623 +++++++++++++++++++++ styles/fonts/iosevka-regular.ttf | Bin 0 -> 288852 bytes styles/fonts/iosevka-term-slab-regular.ttf | Bin 0 -> 425096 bytes styles/fonts/iosevka-term-thin.woff2 | Bin 0 -> 110248 bytes styles/fonts/lora-regular.ttf | Bin 0 -> 173616 bytes styles/fonts/symbola.ttf | Bin 0 -> 2240100 bytes styles/styles.sass | 48 + 126 files changed, 8913 insertions(+), 8905 deletions(-) create mode 100644 .prettierrc delete mode 100644 README.md delete mode 100755 _scripts/resume.sh create mode 100644 assets/logo.png create mode 100644 assets/logo_diag.png delete mode 100644 pages/resume.md delete mode 100644 pages/resume.md.html delete mode 100644 pages/resume.pdf create mode 100644 posts/2020-07-11-why-computer-science-at-w-m.md delete mode 100644 public/css/_sass/.DS_Store delete mode 100644 public/css/_sass/base/_all.sass delete mode 100644 public/css/_sass/base/generic.sass delete mode 100644 public/css/_sass/base/helpers.sass delete mode 100644 public/css/_sass/base/minireset.sass delete mode 100644 public/css/_sass/components/_all.sass delete mode 100644 public/css/_sass/components/breadcrumb.sass delete mode 100644 public/css/_sass/components/card.sass delete mode 100644 public/css/_sass/components/dropdown.sass delete mode 100644 public/css/_sass/components/level.sass delete mode 100644 public/css/_sass/components/list.sass delete mode 100644 public/css/_sass/components/media.sass delete mode 100644 public/css/_sass/components/menu.sass delete mode 100644 public/css/_sass/components/message.sass delete mode 100644 public/css/_sass/components/modal.sass delete mode 100644 public/css/_sass/components/navbar.sass delete mode 100644 public/css/_sass/components/pagination.sass delete mode 100644 public/css/_sass/components/panel.sass delete mode 100644 public/css/_sass/components/tabs.sass delete mode 100644 public/css/_sass/elements/_all.sass delete mode 100644 public/css/_sass/elements/box.sass delete mode 100644 public/css/_sass/elements/button.sass delete mode 100644 public/css/_sass/elements/container.sass delete mode 100644 public/css/_sass/elements/content.sass delete mode 100644 public/css/_sass/elements/form.sass delete mode 100644 public/css/_sass/elements/icon.sass delete mode 100644 public/css/_sass/elements/image.sass delete mode 100644 public/css/_sass/elements/notification.sass delete mode 100644 public/css/_sass/elements/other.sass delete mode 100644 public/css/_sass/elements/progress.sass delete mode 100644 public/css/_sass/elements/table.sass delete mode 100644 public/css/_sass/elements/tag.sass delete mode 100644 public/css/_sass/elements/title.sass delete mode 100644 public/css/_sass/grid/_all.sass delete mode 100644 public/css/_sass/grid/columns.sass delete mode 100644 public/css/_sass/grid/tiles.sass delete mode 100644 public/css/_sass/layout/_all.sass delete mode 100644 public/css/_sass/layout/footer.sass delete mode 100644 public/css/_sass/layout/hero.sass delete mode 100644 public/css/_sass/layout/section.sass delete mode 100644 public/css/_sass/utilities/_all.sass delete mode 100644 public/css/_sass/utilities/animations.sass delete mode 100644 public/css/_sass/utilities/controls.sass delete mode 100644 public/css/_sass/utilities/derived-variables.sass delete mode 100644 public/css/_sass/utilities/functions.sass delete mode 100644 public/css/_sass/utilities/initial-variables.sass delete mode 100644 public/css/_sass/utilities/mixins.sass delete mode 100644 public/css/animate.css delete mode 100644 public/css/fonts/iosevka-regular.ttf delete mode 100644 public/css/fonts/iosevka-term-slab-regular.ttf delete mode 100644 public/css/fonts/iosevka-term-thin.woff2 delete mode 100644 public/css/fonts/lora-regular.ttf delete mode 100644 public/css/fonts/symbola.ttf delete mode 100644 public/css/resume.css delete mode 100644 public/css/styles.sass delete mode 100644 public/images/logo.png delete mode 100644 public/images/logo_diag.png create mode 100644 styles/_sass/.DS_Store create mode 100644 styles/_sass/base/_all.sass create mode 100644 styles/_sass/base/generic.sass create mode 100644 styles/_sass/base/helpers.sass create mode 100644 styles/_sass/base/minireset.sass create mode 100644 styles/_sass/components/_all.sass create mode 100644 styles/_sass/components/breadcrumb.sass create mode 100644 styles/_sass/components/card.sass create mode 100644 styles/_sass/components/dropdown.sass create mode 100644 styles/_sass/components/level.sass create mode 100644 styles/_sass/components/list.sass create mode 100644 styles/_sass/components/media.sass create mode 100644 styles/_sass/components/menu.sass create mode 100644 styles/_sass/components/message.sass create mode 100644 styles/_sass/components/modal.sass create mode 100644 styles/_sass/components/navbar.sass create mode 100644 styles/_sass/components/pagination.sass create mode 100644 styles/_sass/components/panel.sass create mode 100644 styles/_sass/components/tabs.sass create mode 100644 styles/_sass/elements/_all.sass create mode 100644 styles/_sass/elements/box.sass create mode 100644 styles/_sass/elements/button.sass create mode 100644 styles/_sass/elements/container.sass create mode 100644 styles/_sass/elements/content.sass create mode 100644 styles/_sass/elements/form.sass create mode 100644 styles/_sass/elements/icon.sass create mode 100644 styles/_sass/elements/image.sass create mode 100644 styles/_sass/elements/notification.sass create mode 100644 styles/_sass/elements/other.sass create mode 100644 styles/_sass/elements/progress.sass create mode 100644 styles/_sass/elements/table.sass create mode 100644 styles/_sass/elements/tag.sass create mode 100644 styles/_sass/elements/title.sass create mode 100644 styles/_sass/grid/_all.sass create mode 100644 styles/_sass/grid/columns.sass create mode 100644 styles/_sass/grid/tiles.sass create mode 100644 styles/_sass/layout/_all.sass create mode 100644 styles/_sass/layout/footer.sass create mode 100644 styles/_sass/layout/hero.sass create mode 100644 styles/_sass/layout/section.sass create mode 100644 styles/_sass/utilities/_all.sass create mode 100644 styles/_sass/utilities/animations.sass create mode 100644 styles/_sass/utilities/controls.sass create mode 100644 styles/_sass/utilities/derived-variables.sass create mode 100644 styles/_sass/utilities/functions.sass create mode 100644 styles/_sass/utilities/initial-variables.sass create mode 100644 styles/_sass/utilities/mixins.sass create mode 100644 styles/animate.css create mode 100644 styles/fonts/iosevka-regular.ttf create mode 100644 styles/fonts/iosevka-term-slab-regular.ttf create mode 100644 styles/fonts/iosevka-term-thin.woff2 create mode 100644 styles/fonts/lora-regular.ttf create mode 100644 styles/fonts/symbola.ttf create mode 100644 styles/styles.sass diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..a1f4f2e --- /dev/null +++ b/.prettierrc @@ -0,0 +1,8 @@ +{ + "overrides": [ + { + "files": "*.liquid", + "options": { "parser": "html" } + } + ] +} diff --git a/README.md b/README.md deleted file mode 100644 index db669dc..0000000 --- a/README.md +++ /dev/null @@ -1 +0,0 @@ -# The personal and professional website of Adam Carpenter diff --git a/_cobalt.yml b/_cobalt.yml index 74bf31d..6c03879 100644 --- a/_cobalt.yml +++ b/_cobalt.yml @@ -1,7 +1,11 @@ -ignore: ["readme.md", "README.md", ".git", ".gitignore"] site: - title: 53hornet + title: Adam Carpenter | 53hornet description: The personal webpages of Adam Tristan Carpenter - base_url: https://53hor.net + base_url: https://www.53hor.net posts: rss: rss.xml +ignore: + - .git + - .gitignore + - README.md + - readme.md diff --git a/_includes/footer.liquid b/_includes/footer.liquid index f1bfa52..af4831d 100644 --- a/_includes/footer.liquid +++ b/_includes/footer.liquid @@ -1,35 +1,7 @@
-
-

- Site last updated {{ "now" | date: "%A, %b %e, %Y" }} -

-

- See a problem? - - Tell me so I can fix it - - or - - fix it yourself! - -

-

- Built using - - Cobalt.rs - - , - - Bulma.io - - , - - Animate.css - - , and self-hosted with - - NGINX - -

-
+
+

+ Site last updated {{ "now" | date: "%A, %b %e, %Y" }} +

+
diff --git a/_includes/head.liquid b/_includes/head.liquid index 5bac44f..e392263 100644 --- a/_includes/head.liquid +++ b/_includes/head.liquid @@ -1,7 +1,6 @@ - -{{ page.title }} + @@ -14,11 +13,11 @@ {% if page.published_date %} - + {% endif %} {% if page.tags %} - {% for tag in page.tags %} - - {% endfor %} + {% for tag in page.tags %} + + {% endfor %} {% endif %} diff --git a/_includes/nav.liquid b/_includes/nav.liquid index ea497f2..ae6a63e 100644 --- a/_includes/nav.liquid +++ b/_includes/nav.liquid @@ -1,87 +1,83 @@
- + + Journal + +
+ + + + - diff --git a/_layouts/index.liquid b/_layouts/index.liquid index 268f780..1fae9ab 100644 --- a/_layouts/index.liquid +++ b/_layouts/index.liquid @@ -1,116 +1,110 @@ - - {% include "head.liquid" %} - - + + {{ page.title }} + {% include "head.liquid" %} + + - - -
- -
- {% include "nav.liquid" %} -
- - - -
-
-
-
- - -
-

- Greetings, my name is -

-

- Adam Carpenter -

- -
-

- and I am a... -

    -
  • - Professional computer programmer -
    • -
  • - Amateur Hudson driver, mechanic, and caretaker -
    • -
  • - *nix and FreeBSD enthusiast -
    • -
  • - Loving husband and puppy parent -
    • -
-

-
- -

- and this is my website. -

+ + +
+ +
+ {% include "nav.liquid" %} +
+ -

- ↓ Keep reading below ↓ -

-
- - -
-
-
-
- -
-
-
-
+ +
+
+
+
+ +
+

+ Greetings, my name is +

+

+ Adam Carpenter +

+
+

+ and I am a... +

+
    +
  • + Professional computer programmer +
    • +
  • + Amateur Hudson driver, mechanic, and caretaker +
    • +
  • + *nix and FreeBSD enthusiast +
    • +
  • + Loving husband and puppy parent +
    • +
-
- - -
- - -
-
-

- Latest Post -

-

- - See the whole journal here. - +

+ and this is my website.

- {% assign post = collections.posts.pages.first %} - {% include post-card.liquid %} +

+ ↓ Keep reading below ↓ +

+
+ -
- - - -
-
-
- {{ page.content }} -
+
+
+
+ +
+
-
- + + + + + + + + +
+
+

+ Latest Post +

+

+ + See the whole journal here. + +

+ + {% assign post = collections.posts.pages.first %} {% include + post-card.liquid %} +
+
+ - - + +
+
+
+ {{ page.content }} +
+
+
+ + + diff --git a/_scripts/resume.sh b/_scripts/resume.sh deleted file mode 100755 index 4ee93ca..0000000 --- a/_scripts/resume.sh +++ /dev/null @@ -1,13 +0,0 @@ -#!/bin/sh - -INFILE="$1" -CSSFILE="$2" -OUTFILE="$(echo "$1" | cut -d'.' -f1).pdf" - -PD=$(which pandoc) -PDFLAGS="--from=markdown_mmd+yaml_metadata_block+smart --standalone" -WK=$(which wkhtmltopdf) -WKFLAGS="-B 25mm -T 25mm -L 25mm -R 25mm -q -s Letter" - -"$PD" "$PDFLAGS" --to=html -V css="$CSSFILE" "$INFILE" | "$WK" "$WKFLAGS" - "$OUTFILE" - diff --git a/assets/logo.png b/assets/logo.png new file mode 100644 index 0000000..549bd0e Binary files /dev/null and b/assets/logo.png differ diff --git a/assets/logo_diag.png b/assets/logo_diag.png new file mode 100644 index 0000000..fa302b6 Binary files /dev/null and b/assets/logo_diag.png differ diff --git a/index.md b/index.md index dd2d9f0..6e0253e 100644 --- a/index.md +++ b/index.md @@ -14,9 +14,3 @@ If you want to search my site or get alerts when new content is added, A running collection of posts about what I've been up to. -## More to Come - -There's a lot more in the works as I continue to get this site set up the way I -want it. It's a work-in-progress currently but I've been enjoying the -transition from my older sites. - diff --git a/pages/resume.md b/pages/resume.md deleted file mode 100644 index 95181fe..0000000 --- a/pages/resume.md +++ /dev/null @@ -1,48 +0,0 @@ ---- -permalink: "/{{slug}}" -title: Resume -description: My Professional, Up-to-Date Resume -layout: page.liquid ---- - -# Adam T. Carpenter - -Email: [atc@53hor.net](mailto:atc@53hor.net) -| Web Site: [www.53hor.net](https://53hor.net) -| Portfolio: [git.53hor.net](https://git.53hor.net) -| LinkedIn: [in/adam-carpenter](https://www.linkedin.com/in/adam-carpenter/) - -## Software Developer - -## Technical Expertise - -- C#, .NET Core, ASP.NET Core, .NET Framework -- JavaScript, TypeScript, ECMAScript 6 -- AngularJS, Aurelia -- HTML5, CSS3/Sass -- Rust, C, C++ -- POSIX Shell, Python -- MS SQL Server + EFCore, OracleDB, SQLite -- UNIX/\*NIX (GNU/Linux, FreeBSD), Windows (10, Server 2016) -- Docker, IBM Cloud Private (Kubernetes) -- Splunk, ElasticSearch (ELK Stack) - -## Professional Experience - -### Associate Application Developer (Automation Spec.) - -- Agile, Scrum methodologies -- devops -- automation -- mentoring new hires -- spearheading kubernetes -- rest apis -- web apps -- legacy + greenfield application interfacing - -### Technology Support - -## Education - -### Bachelor of Science, Computer Science, The College of William and Mary ('18) - diff --git a/pages/resume.md.html b/pages/resume.md.html deleted file mode 100644 index 089d829..0000000 --- a/pages/resume.md.html +++ /dev/null @@ -1,55 +0,0 @@ - - - - - - - Resume - - - - - -
-

Resume

-
-

Adam T. Carpenter

-

Email: atc@53hor.net | Web Site: www.53hor.net | Portfolio: git.53hor.net | LinkedIn: in/adam-carpenter

-

Software Developer

-

Technical Expertise

- -

Professional Experience

-

Associate Application Developer (Automation Spec.)

- -

Technology Support

-

Education

-

Bachelor of Science, Computer Science, The College of William and Mary (’18)

- - diff --git a/pages/resume.pdf b/pages/resume.pdf deleted file mode 100644 index 2bb3d25..0000000 Binary files a/pages/resume.pdf and /dev/null differ diff --git a/posts/2020-07-11-why-computer-science-at-w-m.md b/posts/2020-07-11-why-computer-science-at-w-m.md new file mode 100644 index 0000000..25f2789 --- /dev/null +++ b/posts/2020-07-11-why-computer-science-at-w-m.md @@ -0,0 +1,166 @@ +--- +permalink: "/posts/{{categories}}/{{slug}}" +title: Why Computer Science at W&M +categories: + - life +tags: + - william + - and + - mary + - computer + - science +excerpt_separator: "\n\n\n" +published_date: "2020-07-11 14:58:18 +0000" +layout: post.liquid +is_draft: false +--- +Recently a rising high-school senior asked for input on what going to the +College of William and Mary was like for a Computer Science degree. They were +asking about the program itself as well as what it's like on and off campus. +Here's what I sent to them. + +# Quick Intro + +I graduated with a Bachelor's in Computer Science from W&M in 2018. I'm a +couple years in the workforce now but can still remember my experiences well +enough to hopefully add my honest opinion on my time there as well as how it +prepared me for my career. I will also add a little bit about my time on campus +in a dorm and off-campus in Colonial Williamsburg. + +# Courses and Curriculum + +I felt very positively about the array of courses that were offered while I was +a student. I took a variety of core prerequisites, just like everyone else, and +a good mix of electives. The courses I took include Data Structures and +Algorithms, Software Development/Engineering, Computer +Organization/Architecture, UNIX Systems Programming, Computer +Graphics/Animation, and Computer and Network Security. This list is not +exhaustive and I'm sure they aren't all offered anymore. I was also required to +take a few math classes (Calc I, II, Discrete Math, Linear Algebra, and Finite +Automata). + +It is true that the courses listed at `cs.wm.edu` aren't all offered at the +same time. And it is also true that the higher-level electives pretty much all +required my core prerequisites to be completed. The result is that the +electives all came in my final two years. My understanding is the curriculum is +designed to give someone the best possible background in computing as a whole. +A lot of the topics may seem like they would never be useful in the "real +world" but I have found the opposite is true. I am an application developer at +a three-letter company. My day-to-day work is building and debugging web apps, +but there's been a lot more to it than that. My first assignment on the job was +scraping bytes off a remote shell and writing a parser to sift through them. +The level of understanding I gathered from my core classes helped more than I +expected they would. I think as a whole they give me an edge at work and help +me teach my colleagues about algorithms, performance, and systems +administration. + +That being said, course registration was always nightmarish. It was very +difficult to get into the limited seats in the classes I was most interested +in. Eventually the heads of the department had to pass around a sign up sheet +and organize every student into courses, classrooms, and professors so that +seniors would graduate on time and we could all get _something_ on our +schedules. I hope the shortage of teachers has caught up since I graduated. I +learned from a long-time faculty member that this is largely a result of the +exponential growth of incoming CS degree-seekers. The program has grown very +popular in the last ten years and I like to think grads are catching on to +that. + +# Teaching + +CS@W&M had neutral to good instructors for me. Some were far worse than others, +as with all subjects. When I was there, lots of the older faculty were retiring +and quickly being replaced with younger, newer instructors, which added to the +growing pains of the program. The most important thing again was making sure +there were enough teachers to teach all of the students. + +I know a few of my peers were very upset about what they described as a lack of +communication or availability from their professors. Some have also mentioned +they didn't like having to learn material on their own and wanted more to come +from instruction. I don't deny that the material itself was difficult and there +was a lot of hard work I had to do on my own to understand very involved +concepts in intense, fast-paced courses. I think that hard work has paid off. I +don't think there's realistically anywhere someone can learn about computing +where they won't do any learning on their own. I am also a very visual, and +hands-on learner so I suppose your mileage may vary. + +The most important takeaway from this for me was the ability to pick up new +concepts and technologies quickly and apply them productively. The majority of +professors had project-driven courses. Lots of due dates meant learning how to +transform what I read or learned in class into practical applications in short +amounts of time. This has become, according to those I work with, one of my +greater assets. I am constantly learning new things in my career and I don't +have a lecturer to explain things to me. It's very powerful to have that and I +am thankful for it. It also helps me teach that knowledge to my colleagues so +we can move faster as a team. + +# Campus + +I agree with my peers about the conditions of classrooms and buildings on +campus. Some are old. I guess that comes with an old university but there are a +choice few that haven't been kept up as best they could. Since CS is growing so +fast it's also long outgrown its own offices. Classrooms are scattered +throughout every academic building on campus and I probably had a CS course in +at least 80% of them. That meant jumping from one side of campus to another and +back again in between periods. + +The College itself isn't too sprawling. I am long-legged and I found I could +get from one end of campus to another in fifteen minutes on foot. I rode bike a +lot to get to classes where I only had ten minutes to do it. It's also pretty +marshy and woodsy in a lot of areas, so during the rainy season some walking +paths got muddy or flooded. Good boots required. I have never been in as good +shape as when I had to do all that walking but I definitely got soaked and +winded making those transitions. + +I appreciate history and architecture and was drawn in by the look and feel of +William and Mary as a result. Without getting too romantic, it's definitely a +beautiful place to attend classes. The ancient Wren building still holds +classes and it's a monument to the College's tradition. However, I really +appreciated the modern academic buildings on the other side of campus where all +of the new construction was taking place. Modern lab equipment and the library +lived there. + +The dorms were nothing to write home about. Lots of them were nested in the +woods and built ages ago so they were a little tired and even dingy. Others are +brand new and well maintained; ask around and get opinions on which ones to go +for first chance you get. I made do with what I got for the first couple of +years by keeping it clean and decorated. My last two years I lived in a couple +of off-campus apartments. It was well worth the switch. Depending on where you +are on campus you may need at least a bike to access local restaurants, shops, +and the grocery store. A bike is a good idea anyway but it's not necessary for +every dorm. + +# Colonial Williamsburg + +Lots of my peers didn't appreciate CW as a "college town" but I enjoyed my time +there. I can't speak about parties or clubbing, I was boring and didn't do any +of that. I made a great group of friends and we would walk into town to get ice +cream, see historical attractions (most of which are free as a student, IIRC), +and see movies or plays when we weren't studying or playing video games in the +dorm. There are some good, sort-of-affordable restaurants but they're kind of +driving distance. + +The best part about living there was meeting my wife. We would go on long walks +to get away from studying and wound up seeing horse-and-carriages and the +Governor's Palace and things like that. We would also escape with her car to go +to some of the surrounding towns to get away to nice grocery stores and fun +places to eat and explore on the weekends. I also have family in the area so it +was easy for me to stop by home and say hi, although I know lots of students +wanted to get as far away from home as possible. + +# Parting Words + +I don't consider myself a gung ho alumnus. There are lots of things I think +could be improved, both in CS and at W&M as a whole but I do not regret my +going there. There is no such thing as "everything is great" or "everything is +terrible". It's not so definitive. I had my fair share of gripes and at times +it strained me. There were pros and cons but I think I have a lot to be +thankful for (I landed my job through W&M recruiting and the career center as +well, which are fantastic resources). I cannot say "do this instead of that." I +haven't gone to any other colleges and don't know enough about them to +recommend them as better or worse. What I can recommend is the same path I took +for folks who want to pursue a degree in Computer Science. I think you'll come +away from it all the more knowledgable, resourceful, and dedicated. + + + + diff --git a/public/css/_sass/.DS_Store b/public/css/_sass/.DS_Store deleted file mode 100644 index 3aa8e90..0000000 Binary files a/public/css/_sass/.DS_Store and /dev/null differ diff --git a/public/css/_sass/base/_all.sass b/public/css/_sass/base/_all.sass deleted file mode 100644 index e913d6b..0000000 --- a/public/css/_sass/base/_all.sass +++ /dev/null @@ -1,5 +0,0 @@ -@charset "utf-8" - -@import "minireset.sass" -@import "generic.sass" -@import "helpers.sass" diff --git a/public/css/_sass/base/generic.sass b/public/css/_sass/base/generic.sass deleted file mode 100644 index 42a3d88..0000000 --- a/public/css/_sass/base/generic.sass +++ /dev/null @@ -1,130 +0,0 @@ -$body-background-color: $white !default -$body-size: 16px !default -$body-rendering: optimizeLegibility !default -$body-family: $family-primary !default -$body-color: $text !default -$body-weight: $weight-normal !default -$body-line-height: 1.5 !default - -$code-family: $family-code !default -$code-padding: 0.25em 0.5em 0.25em !default -$code-weight: normal !default -$code-size: 0.875em !default - -$hr-background-color: $background !default -$hr-height: 2px !default -$hr-margin: 1.5rem 0 !default - -$strong-color: $text-strong !default -$strong-weight: $weight-bold !default - -html - background-color: $body-background-color - font-size: $body-size - -moz-osx-font-smoothing: grayscale - -webkit-font-smoothing: antialiased - min-width: 300px - overflow-x: hidden - overflow-y: scroll - text-rendering: $body-rendering - text-size-adjust: 100% - -article, -aside, -figure, -footer, -header, -hgroup, -section - display: block - -body, -button, -input, -select, -textarea - font-family: $body-family - -code, -pre - -moz-osx-font-smoothing: auto - -webkit-font-smoothing: auto - font-family: $code-family - -body - color: $body-color - font-size: 1rem - font-weight: $body-weight - line-height: $body-line-height - -// Inline - -a - color: $link - cursor: pointer - text-decoration: none - strong - color: currentColor - &:hover - color: $link-hover - -code - background-color: $code-background - color: $code - font-size: $code-size - font-weight: $code-weight - padding: $code-padding - -hr - background-color: $hr-background-color - border: none - display: block - height: $hr-height - margin: $hr-margin - -img - height: auto - max-width: 100% - -input[type="checkbox"], -input[type="radio"] - vertical-align: baseline - -small - font-size: 0.875em - -span - font-style: inherit - font-weight: inherit - -strong - color: $strong-color - font-weight: $strong-weight - -// Block - -fieldset - border: none - -pre - +overflow-touch - background-color: $pre-background - color: $pre - font-size: 0.875em - overflow-x: auto - padding: 1.25rem 1.5rem - white-space: pre - word-wrap: normal - code - background-color: transparent - color: currentColor - font-size: 1em - padding: 0 - -table - td, - th - text-align: left - vertical-align: top - th - color: $text-strong diff --git a/public/css/_sass/base/helpers.sass b/public/css/_sass/base/helpers.sass deleted file mode 100644 index 17fdf15..0000000 --- a/public/css/_sass/base/helpers.sass +++ /dev/null @@ -1,276 +0,0 @@ -// Float - -.is-clearfix - +clearfix - -.is-pulled-left - float: left !important - -.is-pulled-right - float: right !important - -// Overflow - -.is-clipped - overflow: hidden !important - -// Overlay - -.is-overlay - @extend %overlay - -// Typography - -=typography-size($target:'') - @each $size in $sizes - $i: index($sizes, $size) - .is-size-#{$i}#{if($target == '', '', '-' + $target)} - font-size: $size !important - -+typography-size() - -+mobile - +typography-size('mobile') - -+tablet - +typography-size('tablet') - -+touch - +typography-size('touch') - -+desktop - +typography-size('desktop') - -+widescreen - +typography-size('widescreen') - -+fullhd - +typography-size('fullhd') - -$alignments: ('centered': 'center', 'justified': 'justify', 'left': 'left', 'right': 'right') - -@each $alignment, $text-align in $alignments - .has-text-#{$alignment} - text-align: #{$text-align} !important - -@each $alignment, $text-align in $alignments - +mobile - .has-text-#{$alignment}-mobile - text-align: #{$text-align} !important - +tablet - .has-text-#{$alignment}-tablet - text-align: #{$text-align} !important - +tablet-only - .has-text-#{$alignment}-tablet-only - text-align: #{$text-align} !important - +touch - .has-text-#{$alignment}-touch - text-align: #{$text-align} !important - +desktop - .has-text-#{$alignment}-desktop - text-align: #{$text-align} !important - +desktop-only - .has-text-#{$alignment}-desktop-only - text-align: #{$text-align} !important - +widescreen - .has-text-#{$alignment}-widescreen - text-align: #{$text-align} !important - +widescreen-only - .has-text-#{$alignment}-widescreen-only - text-align: #{$text-align} !important - +fullhd - .has-text-#{$alignment}-fullhd - text-align: #{$text-align} !important - -.is-capitalized - text-transform: capitalize !important - -.is-lowercase - text-transform: lowercase !important - -.is-uppercase - text-transform: uppercase !important - -.is-italic - font-style: italic !important - -@each $name, $pair in $colors - $color: nth($pair, 1) - .has-text-#{$name} - color: $color !important - a.has-text-#{$name} - &:hover, - &:focus - color: darken($color, 10%) !important - .has-background-#{$name} - background-color: $color !important - -@each $name, $shade in $shades - .has-text-#{$name} - color: $shade !important - .has-background-#{$name} - background-color: $shade !important - -.has-text-weight-light - font-weight: $weight-light !important -.has-text-weight-normal - font-weight: $weight-normal !important -.has-text-weight-semibold - font-weight: $weight-semibold !important -.has-text-weight-bold - font-weight: $weight-bold !important - -.is-family-primary - font-family: $family-primary !important - -.is-family-secondary - font-family: $family-secondary !important - -.is-family-sans-serif - font-family: $family-sans-serif !important - -.is-family-monospace - font-family: $family-monospace !important - -.is-family-code - font-family: $family-code !important - -// Visibility - -$displays: 'block' 'flex' 'inline' 'inline-block' 'inline-flex' - -@each $display in $displays - .is-#{$display} - display: #{$display} !important - +mobile - .is-#{$display}-mobile - display: #{$display} !important - +tablet - .is-#{$display}-tablet - display: #{$display} !important - +tablet-only - .is-#{$display}-tablet-only - display: #{$display} !important - +touch - .is-#{$display}-touch - display: #{$display} !important - +desktop - .is-#{$display}-desktop - display: #{$display} !important - +desktop-only - .is-#{$display}-desktop-only - display: #{$display} !important - +widescreen - .is-#{$display}-widescreen - display: #{$display} !important - +widescreen-only - .is-#{$display}-widescreen-only - display: #{$display} !important - +fullhd - .is-#{$display}-fullhd - display: #{$display} !important - -.is-hidden - display: none !important - -.is-sr-only - border: none !important - clip: rect(0, 0, 0, 0) !important - height: 0.01em !important - overflow: hidden !important - padding: 0 !important - position: absolute !important - white-space: nowrap !important - width: 0.01em !important - -+mobile - .is-hidden-mobile - display: none !important - -+tablet - .is-hidden-tablet - display: none !important - -+tablet-only - .is-hidden-tablet-only - display: none !important - -+touch - .is-hidden-touch - display: none !important - -+desktop - .is-hidden-desktop - display: none !important - -+desktop-only - .is-hidden-desktop-only - display: none !important - -+widescreen - .is-hidden-widescreen - display: none !important - -+widescreen-only - .is-hidden-widescreen-only - display: none !important - -+fullhd - .is-hidden-fullhd - display: none !important - -.is-invisible - visibility: hidden !important - -+mobile - .is-invisible-mobile - visibility: hidden !important - -+tablet - .is-invisible-tablet - visibility: hidden !important - -+tablet-only - .is-invisible-tablet-only - visibility: hidden !important - -+touch - .is-invisible-touch - visibility: hidden !important - -+desktop - .is-invisible-desktop - visibility: hidden !important - -+desktop-only - .is-invisible-desktop-only - visibility: hidden !important - -+widescreen - .is-invisible-widescreen - visibility: hidden !important - -+widescreen-only - .is-invisible-widescreen-only - visibility: hidden !important - -+fullhd - .is-invisible-fullhd - visibility: hidden !important - -// Other - -.is-marginless - margin: 0 !important - -.is-paddingless - padding: 0 !important - -.is-radiusless - border-radius: 0 !important - -.is-shadowless - box-shadow: none !important - -.is-unselectable - @extend %unselectable diff --git a/public/css/_sass/base/minireset.sass b/public/css/_sass/base/minireset.sass deleted file mode 100644 index 9c34a89..0000000 --- a/public/css/_sass/base/minireset.sass +++ /dev/null @@ -1,84 +0,0 @@ -/*! minireset.css v0.0.4 | MIT License | github.com/jgthms/minireset.css */ -// Blocks -html, -body, -p, -ol, -ul, -li, -dl, -dt, -dd, -blockquote, -figure, -fieldset, -legend, -textarea, -pre, -iframe, -hr, -h1, -h2, -h3, -h4, -h5, -h6 - margin: 0 - padding: 0 - -// Headings -h1, -h2, -h3, -h4, -h5, -h6 - font-size: 100% - font-weight: normal - -// List -ul - list-style: none - -// Form -button, -input, -select, -textarea - margin: 0 - -// Box sizing -html - box-sizing: border-box - -* - &, - &::before, - &::after - box-sizing: inherit - -// Media -img, -embed, -iframe, -object, -video - height: auto - max-width: 100% - -audio - max-width: 100% - -// Iframe -iframe - border: 0 - -// Table -table - border-collapse: collapse - border-spacing: 0 - -td, -th - padding: 0 - text-align: left diff --git a/public/css/_sass/components/_all.sass b/public/css/_sass/components/_all.sass deleted file mode 100644 index 88fd45c..0000000 --- a/public/css/_sass/components/_all.sass +++ /dev/null @@ -1,15 +0,0 @@ -@charset "utf-8" - -@import "breadcrumb.sass" -@import "card.sass" -@import "dropdown.sass" -@import "level.sass" -@import "list.sass" -@import "media.sass" -@import "menu.sass" -@import "message.sass" -@import "modal.sass" -@import "navbar.sass" -@import "pagination.sass" -@import "panel.sass" -@import "tabs.sass" diff --git a/public/css/_sass/components/breadcrumb.sass b/public/css/_sass/components/breadcrumb.sass deleted file mode 100644 index bcbd15b..0000000 --- a/public/css/_sass/components/breadcrumb.sass +++ /dev/null @@ -1,75 +0,0 @@ -$breadcrumb-item-color: $link !default -$breadcrumb-item-hover-color: $link-hover !default -$breadcrumb-item-active-color: $text-strong !default - -$breadcrumb-item-padding-vertical: 0 !default -$breadcrumb-item-padding-horizontal: 0.75em !default - -$breadcrumb-item-separator-color: $grey-light !default - -.breadcrumb - @extend %block - @extend %unselectable - font-size: $size-normal - white-space: nowrap - a - align-items: center - color: $breadcrumb-item-color - display: flex - justify-content: center - padding: $breadcrumb-item-padding-vertical $breadcrumb-item-padding-horizontal - &:hover - color: $breadcrumb-item-hover-color - li - align-items: center - display: flex - &:first-child a - padding-left: 0 - &.is-active - a - color: $breadcrumb-item-active-color - cursor: default - pointer-events: none - & + li::before - color: $breadcrumb-item-separator-color - content: "\0002f" - ul, - ol - align-items: flex-start - display: flex - flex-wrap: wrap - justify-content: flex-start - .icon - &:first-child - margin-right: 0.5em - &:last-child - margin-left: 0.5em - // Alignment - &.is-centered - ol, - ul - justify-content: center - &.is-right - ol, - ul - justify-content: flex-end - // Sizes - &.is-small - font-size: $size-small - &.is-medium - font-size: $size-medium - &.is-large - font-size: $size-large - // Styles - &.has-arrow-separator - li + li::before - content: "\02192" - &.has-bullet-separator - li + li::before - content: "\02022" - &.has-dot-separator - li + li::before - content: "\000b7" - &.has-succeeds-separator - li + li::before - content: "\0227B" diff --git a/public/css/_sass/components/card.sass b/public/css/_sass/components/card.sass deleted file mode 100644 index ff12395..0000000 --- a/public/css/_sass/components/card.sass +++ /dev/null @@ -1,74 +0,0 @@ -$card-color: $text !default -$card-background-color: $white !default -$card-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default - -$card-header-background-color: transparent !default -$card-header-color: $text-strong !default -$card-header-shadow: 0 1px 2px rgba($black, 0.1) !default -$card-header-weight: $weight-bold !default - -$card-content-background-color: transparent !default - -$card-footer-background-color: transparent !default -$card-footer-border-top: 1px solid $border !default - -.card - background-color: $card-background-color - box-shadow: $card-shadow - color: $card-color - max-width: 100% - position: relative - -.card-header - background-color: $card-header-background-color - align-items: stretch - box-shadow: $card-header-shadow - display: flex - -.card-header-title - align-items: center - color: $card-header-color - display: flex - flex-grow: 1 - font-weight: $card-header-weight - padding: 0.75rem - &.is-centered - justify-content: center - -.card-header-icon - align-items: center - cursor: pointer - display: flex - justify-content: center - padding: 0.75rem - -.card-image - display: block - position: relative - -.card-content - background-color: $card-content-background-color - padding: 1.5rem - -.card-footer - background-color: $card-footer-background-color - border-top: $card-footer-border-top - align-items: stretch - display: flex - -.card-footer-item - align-items: center - display: flex - flex-basis: 0 - flex-grow: 1 - flex-shrink: 0 - justify-content: center - padding: 0.75rem - &:not(:last-child) - border-right: $card-footer-border-top - -// Combinations - -.card - .media:not(:last-child) - margin-bottom: 0.75rem diff --git a/public/css/_sass/components/dropdown.sass b/public/css/_sass/components/dropdown.sass deleted file mode 100644 index aad663a..0000000 --- a/public/css/_sass/components/dropdown.sass +++ /dev/null @@ -1,77 +0,0 @@ -$dropdown-content-background-color: $white !default -$dropdown-content-arrow: $link !default -$dropdown-content-offset: 4px !default -$dropdown-content-radius: $radius !default -$dropdown-content-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default -$dropdown-content-z: 20 !default - -$dropdown-item-color: $grey-dark !default -$dropdown-item-hover-color: $black !default -$dropdown-item-hover-background-color: $background !default -$dropdown-item-active-color: $link-invert !default -$dropdown-item-active-background-color: $link !default - -$dropdown-divider-background-color: $border !default - -.dropdown - display: inline-flex - position: relative - vertical-align: top - &.is-active, - &.is-hoverable:hover - .dropdown-menu - display: block - &.is-right - .dropdown-menu - left: auto - right: 0 - &.is-up - .dropdown-menu - bottom: 100% - padding-bottom: $dropdown-content-offset - padding-top: initial - top: auto - -.dropdown-menu - display: none - left: 0 - min-width: 12rem - padding-top: $dropdown-content-offset - position: absolute - top: 100% - z-index: $dropdown-content-z - -.dropdown-content - background-color: $dropdown-content-background-color - border-radius: $dropdown-content-radius - box-shadow: $dropdown-content-shadow - padding-bottom: 0.5rem - padding-top: 0.5rem - -.dropdown-item - color: $dropdown-item-color - display: block - font-size: 0.875rem - line-height: 1.5 - padding: 0.375rem 1rem - position: relative - -a.dropdown-item, -button.dropdown-item - padding-right: 3rem - text-align: left - white-space: nowrap - width: 100% - &:hover - background-color: $dropdown-item-hover-background-color - color: $dropdown-item-hover-color - &.is-active - background-color: $dropdown-item-active-background-color - color: $dropdown-item-active-color - -.dropdown-divider - background-color: $dropdown-divider-background-color - border: none - display: block - height: 1px - margin: 0.5rem 0 diff --git a/public/css/_sass/components/level.sass b/public/css/_sass/components/level.sass deleted file mode 100644 index a3b7716..0000000 --- a/public/css/_sass/components/level.sass +++ /dev/null @@ -1,75 +0,0 @@ -.level - @extend %block - align-items: center - justify-content: space-between - code - border-radius: $radius - img - display: inline-block - vertical-align: top - // Modifiers - &.is-mobile - display: flex - .level-left, - .level-right - display: flex - .level-left + .level-right - margin-top: 0 - .level-item - &:not(:last-child) - margin-bottom: 0 - margin-right: 0.75rem - &:not(.is-narrow) - flex-grow: 1 - // Responsiveness - +tablet - display: flex - & > .level-item - &:not(.is-narrow) - flex-grow: 1 - -.level-item - align-items: center - display: flex - flex-basis: auto - flex-grow: 0 - flex-shrink: 0 - justify-content: center - .title, - .subtitle - margin-bottom: 0 - // Responsiveness - +mobile - &:not(:last-child) - margin-bottom: 0.75rem - -.level-left, -.level-right - flex-basis: auto - flex-grow: 0 - flex-shrink: 0 - .level-item - // Modifiers - &.is-flexible - flex-grow: 1 - // Responsiveness - +tablet - &:not(:last-child) - margin-right: 0.75rem - -.level-left - align-items: center - justify-content: flex-start - // Responsiveness - +mobile - & + .level-right - margin-top: 1.5rem - +tablet - display: flex - -.level-right - align-items: center - justify-content: flex-end - // Responsiveness - +tablet - display: flex diff --git a/public/css/_sass/components/list.sass b/public/css/_sass/components/list.sass deleted file mode 100644 index eccd034..0000000 --- a/public/css/_sass/components/list.sass +++ /dev/null @@ -1,39 +0,0 @@ -$list-background-color: $white !default -$list-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default -$list-radius: $radius !default - -$list-item-border: 1px solid $border !default -$list-item-color: $text !default -$list-item-active-background-color: $link !default -$list-item-active-color: $link-invert !default -$list-item-hover-background-color: $background !default - -.list - @extend %block - background-color: $list-background-color - border-radius: $list-radius - box-shadow: $list-shadow - // &.is-hoverable > .list-item:hover:not(.is-active) - // background-color: $list-item-hover-background-color - // cursor: pointer - -.list-item - display: block - padding: 0.5em 1em - &:not(a) - color: $list-item-color - &:first-child - border-top-left-radius: $list-radius - border-top-right-radius: $list-radius - &:last-child - border-top-left-radius: $list-radius - border-top-right-radius: $list-radius - &:not(:last-child) - border-bottom: $list-item-border - &.is-active - background-color: $list-item-active-background-color - color: $list-item-active-color - -a.list-item - background-color: $list-item-hover-background-color - cursor: pointer \ No newline at end of file diff --git a/public/css/_sass/components/media.sass b/public/css/_sass/components/media.sass deleted file mode 100644 index e8542d8..0000000 --- a/public/css/_sass/components/media.sass +++ /dev/null @@ -1,48 +0,0 @@ -.media - align-items: flex-start - display: flex - text-align: left - .content:not(:last-child) - margin-bottom: 0.75rem - .media - border-top: 1px solid rgba($border, 0.5) - display: flex - padding-top: 0.75rem - .content:not(:last-child), - .control:not(:last-child) - margin-bottom: 0.5rem - .media - padding-top: 0.5rem - & + .media - margin-top: 0.5rem - & + .media - border-top: 1px solid rgba($border, 0.5) - margin-top: 1rem - padding-top: 1rem - // Sizes - &.is-large - & + .media - margin-top: 1.5rem - padding-top: 1.5rem - -.media-left, -.media-right - flex-basis: auto - flex-grow: 0 - flex-shrink: 0 - -.media-left - margin-right: 1rem - -.media-right - margin-left: 1rem - -.media-content - flex-basis: auto - flex-grow: 1 - flex-shrink: 1 - text-align: left - -+mobile - .media-content - overflow-x: auto diff --git a/public/css/_sass/components/menu.sass b/public/css/_sass/components/menu.sass deleted file mode 100644 index 727df36..0000000 --- a/public/css/_sass/components/menu.sass +++ /dev/null @@ -1,50 +0,0 @@ -$menu-item-color: $text !default -$menu-item-radius: $radius-small !default -$menu-item-hover-color: $text-strong !default -$menu-item-hover-background-color: $background !default -$menu-item-active-color: $link-invert !default -$menu-item-active-background-color: $link !default - -$menu-list-border-left: 1px solid $border !default - -$menu-label-color: $text-light !default - -.menu - font-size: $size-normal - // Sizes - &.is-small - font-size: $size-small - &.is-medium - font-size: $size-medium - &.is-large - font-size: $size-large - -.menu-list - line-height: 1.25 - a - border-radius: $menu-item-radius - color: $menu-item-color - display: block - padding: 0.5em 0.75em - &:hover - background-color: $menu-item-hover-background-color - color: $menu-item-hover-color - // Modifiers - &.is-active - background-color: $menu-item-active-background-color - color: $menu-item-active-color - li - ul - border-left: $menu-list-border-left - margin: 0.75em - padding-left: 0.75em - -.menu-label - color: $menu-label-color - font-size: 0.75em - letter-spacing: 0.1em - text-transform: uppercase - &:not(:first-child) - margin-top: 1em - &:not(:last-child) - margin-bottom: 1em diff --git a/public/css/_sass/components/message.sass b/public/css/_sass/components/message.sass deleted file mode 100644 index badac5d..0000000 --- a/public/css/_sass/components/message.sass +++ /dev/null @@ -1,86 +0,0 @@ -$message-background-color: $background !default -$message-radius: $radius !default - -$message-header-background-color: $text !default -$message-header-color: $text-invert !default -$message-header-weight: $weight-bold !default -$message-header-padding: 0.75em 1em !default -$message-header-radius: $radius !default - -$message-body-border-color: $border !default -$message-body-border-width: 0 0 0 4px !default -$message-body-color: $text !default -$message-body-padding: 1.25em 1.5em !default -$message-body-radius: $radius !default - -$message-body-pre-background-color: $white !default -$message-body-pre-code-background-color: transparent !default - -$message-header-body-border-width: 0 !default - -.message - @extend %block - background-color: $message-background-color - border-radius: $message-radius - font-size: $size-normal - strong - color: currentColor - a:not(.button):not(.tag):not(.dropdown-item) - color: currentColor - text-decoration: underline - // Sizes - &.is-small - font-size: $size-small - &.is-medium - font-size: $size-medium - &.is-large - font-size: $size-large - // Colors - @each $name, $pair in $colors - $color: nth($pair, 1) - $color-invert: nth($pair, 2) - $color-lightning: max((100% - lightness($color)) - 2%, 0%) - $color-luminance: colorLuminance($color) - $darken-percentage: $color-luminance * 70% - $desaturate-percentage: $color-luminance * 30% - &.is-#{$name} - background-color: lighten($color, $color-lightning) - .message-header - background-color: $color - color: $color-invert - .message-body - border-color: $color - color: desaturate(darken($color, $darken-percentage), $desaturate-percentage) - -.message-header - align-items: center - background-color: $message-header-background-color - border-radius: $message-header-radius $message-header-radius 0 0 - color: $message-header-color - display: flex - font-weight: $message-header-weight - justify-content: space-between - line-height: 1.25 - padding: $message-header-padding - position: relative - .delete - flex-grow: 0 - flex-shrink: 0 - margin-left: 0.75em - & + .message-body - border-width: $message-header-body-border-width - border-top-left-radius: 0 - border-top-right-radius: 0 - -.message-body - border-color: $message-body-border-color - border-radius: $message-body-radius - border-style: solid - border-width: $message-body-border-width - color: $message-body-color - padding: $message-body-padding - code, - pre - background-color: $message-body-pre-background-color - pre code - background-color: $message-body-pre-code-background-color diff --git a/public/css/_sass/components/modal.sass b/public/css/_sass/components/modal.sass deleted file mode 100644 index b6fb1a1..0000000 --- a/public/css/_sass/components/modal.sass +++ /dev/null @@ -1,113 +0,0 @@ -$modal-z: 40 !default - -$modal-background-background-color: rgba($black, 0.86) !default - -$modal-content-width: 640px !default -$modal-content-margin-mobile: 20px !default -$modal-content-spacing-mobile: 160px !default -$modal-content-spacing-tablet: 40px !default - -$modal-close-dimensions: 40px !default -$modal-close-right: 20px !default -$modal-close-top: 20px !default - -$modal-card-spacing: 40px !default - -$modal-card-head-background-color: $background !default -$modal-card-head-border-bottom: 1px solid $border !default -$modal-card-head-padding: 20px !default -$modal-card-head-radius: $radius-large !default - -$modal-card-title-color: $text-strong !default -$modal-card-title-line-height: 1 !default -$modal-card-title-size: $size-4 !default - -$modal-card-foot-radius: $radius-large !default -$modal-card-foot-border-top: 1px solid $border !default - -$modal-card-body-background-color: $white !default -$modal-card-body-padding: 20px !default - -.modal - @extend %overlay - align-items: center - display: none - flex-direction: column - justify-content: center - overflow: hidden - position: fixed - z-index: $modal-z - // Modifiers - &.is-active - display: flex - -.modal-background - @extend %overlay - background-color: $modal-background-background-color - -.modal-content, -.modal-card - margin: 0 $modal-content-margin-mobile - max-height: calc(100vh - #{$modal-content-spacing-mobile}) - overflow: auto - position: relative - width: 100% - // Responsiveness - +tablet - margin: 0 auto - max-height: calc(100vh - #{$modal-content-spacing-tablet}) - width: $modal-content-width - -.modal-close - @extend %delete - background: none - height: $modal-close-dimensions - position: fixed - right: $modal-close-right - top: $modal-close-top - width: $modal-close-dimensions - -.modal-card - display: flex - flex-direction: column - max-height: calc(100vh - #{$modal-card-spacing}) - overflow: hidden - -ms-overflow-y: visible - -.modal-card-head, -.modal-card-foot - align-items: center - background-color: $modal-card-head-background-color - display: flex - flex-shrink: 0 - justify-content: flex-start - padding: $modal-card-head-padding - position: relative - -.modal-card-head - border-bottom: $modal-card-head-border-bottom - border-top-left-radius: $modal-card-head-radius - border-top-right-radius: $modal-card-head-radius - -.modal-card-title - color: $modal-card-title-color - flex-grow: 1 - flex-shrink: 0 - font-size: $modal-card-title-size - line-height: $modal-card-title-line-height - -.modal-card-foot - border-bottom-left-radius: $modal-card-foot-radius - border-bottom-right-radius: $modal-card-foot-radius - border-top: $modal-card-foot-border-top - .button - &:not(:last-child) - margin-right: 10px - -.modal-card-body - +overflow-touch - background-color: $modal-card-body-background-color - flex-grow: 1 - flex-shrink: 1 - overflow: auto - padding: $modal-card-body-padding diff --git a/public/css/_sass/components/navbar.sass b/public/css/_sass/components/navbar.sass deleted file mode 100644 index dc90dd9..0000000 --- a/public/css/_sass/components/navbar.sass +++ /dev/null @@ -1,428 +0,0 @@ -$navbar-background-color: $white !default -$navbar-box-shadow-size: 0 2px 0 0 !default -$navbar-box-shadow-color: $background !default -$navbar-height: 3.25rem !default -$navbar-padding-vertical: 1rem !default -$navbar-padding-horizontal: 2rem !default -$navbar-z: 30 !default -$navbar-fixed-z: 30 !default - -$navbar-item-color: $grey-dark !default -$navbar-item-hover-color: $link !default -$navbar-item-hover-background-color: $white-bis !default -$navbar-item-active-color: $black !default -$navbar-item-active-background-color: transparent !default -$navbar-item-img-max-height: 1.75rem !default - -$navbar-burger-color: $navbar-item-color !default - -$navbar-tab-hover-background-color: transparent !default -$navbar-tab-hover-border-bottom-color: $link !default -$navbar-tab-active-color: $link !default -$navbar-tab-active-background-color: transparent !default -$navbar-tab-active-border-bottom-color: $link !default -$navbar-tab-active-border-bottom-style: solid !default -$navbar-tab-active-border-bottom-width: 3px !default - -$navbar-dropdown-background-color: $white !default -$navbar-dropdown-border-top: 2px solid $border !default -$navbar-dropdown-offset: -4px !default -$navbar-dropdown-arrow: $link !default -$navbar-dropdown-radius: $radius-large !default -$navbar-dropdown-z: 20 !default - -$navbar-dropdown-boxed-radius: $radius-large !default -$navbar-dropdown-boxed-shadow: 0 8px 8px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default - -$navbar-dropdown-item-hover-color: $black !default -$navbar-dropdown-item-hover-background-color: $background !default -$navbar-dropdown-item-active-color: $link !default -$navbar-dropdown-item-active-background-color: $background !default - -$navbar-divider-background-color: $background !default -$navbar-divider-height: 2px !default - -$navbar-bottom-box-shadow-size: 0 -2px 0 0 !default - -$navbar-breakpoint: $desktop !default - -=navbar-fixed - left: 0 - position: fixed - right: 0 - z-index: $navbar-fixed-z - -.navbar - background-color: $navbar-background-color - min-height: $navbar-height - position: relative - z-index: $navbar-z - @each $name, $pair in $colors - $color: nth($pair, 1) - $color-invert: nth($pair, 2) - &.is-#{$name} - background-color: $color - color: $color-invert - .navbar-brand - & > .navbar-item, - .navbar-link - color: $color-invert - & > a.navbar-item, - .navbar-link - &:hover, - &.is-active - background-color: darken($color, 5%) - color: $color-invert - .navbar-link - &::after - border-color: $color-invert - .navbar-burger - color: $color-invert - +from($navbar-breakpoint) - .navbar-start, - .navbar-end - & > .navbar-item, - .navbar-link - color: $color-invert - & > a.navbar-item, - .navbar-link - &:hover, - &.is-active - background-color: darken($color, 5%) - color: $color-invert - .navbar-link - &::after - border-color: $color-invert - .navbar-item.has-dropdown:hover .navbar-link, - .navbar-item.has-dropdown.is-active .navbar-link - background-color: darken($color, 5%) - color: $color-invert - .navbar-dropdown - a.navbar-item - &.is-active - background-color: $color - color: $color-invert - & > .container - align-items: stretch - display: flex - min-height: $navbar-height - width: 100% - &.has-shadow - box-shadow: $navbar-box-shadow-size $navbar-box-shadow-color - &.is-fixed-bottom, - &.is-fixed-top - +navbar-fixed - &.is-fixed-bottom - bottom: 0 - &.has-shadow - box-shadow: $navbar-bottom-box-shadow-size $navbar-box-shadow-color - &.is-fixed-top - top: 0 - -html, -body - &.has-navbar-fixed-top - padding-top: $navbar-height - &.has-navbar-fixed-bottom - padding-bottom: $navbar-height - -.navbar-brand, -.navbar-tabs - align-items: stretch - display: flex - flex-shrink: 0 - min-height: $navbar-height - -.navbar-brand - a.navbar-item - &:hover - background-color: transparent - -.navbar-tabs - +overflow-touch - max-width: 100vw - overflow-x: auto - overflow-y: hidden - -.navbar-burger - color: $navbar-burger-color - +hamburger($navbar-height) - margin-left: auto - -.navbar-menu - display: none - -.navbar-item, -.navbar-link - color: $navbar-item-color - display: block - line-height: 1.5 - padding: 0.5rem 0.75rem - position: relative - .icon - &:only-child - margin-left: -0.25rem - margin-right: -0.25rem - -a.navbar-item, -.navbar-link - cursor: pointer - &:hover, - &.is-active - background-color: $navbar-item-hover-background-color - color: $navbar-item-hover-color - -.navbar-item - display: block - flex-grow: 0 - flex-shrink: 0 - img - max-height: $navbar-item-img-max-height - &.has-dropdown - padding: 0 - &.is-expanded - flex-grow: 1 - flex-shrink: 1 - &.is-tab - border-bottom: 1px solid transparent - min-height: $navbar-height - padding-bottom: calc(0.5rem - 1px) - &:hover - background-color: $navbar-tab-hover-background-color - border-bottom-color: $navbar-tab-hover-border-bottom-color - &.is-active - background-color: $navbar-tab-active-background-color - border-bottom-color: $navbar-tab-active-border-bottom-color - border-bottom-style: $navbar-tab-active-border-bottom-style - border-bottom-width: $navbar-tab-active-border-bottom-width - color: $navbar-tab-active-color - padding-bottom: calc(0.5rem - #{$navbar-tab-active-border-bottom-width}) - -.navbar-content - flex-grow: 1 - flex-shrink: 1 - -.navbar-link:not(.is-arrowless) - padding-right: 2.5em - &::after - @extend %arrow - border-color: $navbar-dropdown-arrow - margin-top: -0.375em - right: 1.125em - -.navbar-dropdown - font-size: 0.875rem - padding-bottom: 0.5rem - padding-top: 0.5rem - .navbar-item - padding-left: 1.5rem - padding-right: 1.5rem - -.navbar-divider - background-color: $navbar-divider-background-color - border: none - display: none - height: $navbar-divider-height - margin: 0.5rem 0 - -+until($navbar-breakpoint) - .navbar > .container - display: block - .navbar-brand, - .navbar-tabs - .navbar-item - align-items: center - display: flex - .navbar-link - &::after - display: none - .navbar-menu - background-color: $navbar-background-color - box-shadow: 0 8px 16px rgba($black, 0.1) - padding: 0.5rem 0 - &.is-active - display: block - // Fixed navbar - .navbar - &.is-fixed-bottom-touch, - &.is-fixed-top-touch - +navbar-fixed - &.is-fixed-bottom-touch - bottom: 0 - &.has-shadow - box-shadow: 0 -2px 3px rgba($black, 0.1) - &.is-fixed-top-touch - top: 0 - &.is-fixed-top, - &.is-fixed-top-touch - .navbar-menu - +overflow-touch - max-height: calc(100vh - #{$navbar-height}) - overflow: auto - html, - body - &.has-navbar-fixed-top-touch - padding-top: $navbar-height - &.has-navbar-fixed-bottom-touch - padding-bottom: $navbar-height - -+from($navbar-breakpoint) - .navbar, - .navbar-menu, - .navbar-start, - .navbar-end - align-items: stretch - display: flex - .navbar - min-height: $navbar-height - &.is-spaced - padding: $navbar-padding-vertical $navbar-padding-horizontal - .navbar-start, - .navbar-end - align-items: center - a.navbar-item, - .navbar-link - border-radius: $radius - &.is-transparent - a.navbar-item, - .navbar-link - &:hover, - &.is-active - background-color: transparent !important - .navbar-item.has-dropdown - &.is-active, - &.is-hoverable:hover - .navbar-link - background-color: transparent !important - .navbar-dropdown - a.navbar-item - &:hover - background-color: $navbar-dropdown-item-hover-background-color - color: $navbar-dropdown-item-hover-color - &.is-active - background-color: $navbar-dropdown-item-active-background-color - color: $navbar-dropdown-item-active-color - .navbar-burger - display: none - .navbar-item, - .navbar-link - align-items: center - display: flex - .navbar-item - display: flex - &.has-dropdown - align-items: stretch - &.has-dropdown-up - .navbar-link::after - transform: rotate(135deg) translate(0.25em, -0.25em) - .navbar-dropdown - border-bottom: $navbar-dropdown-border-top - border-radius: $navbar-dropdown-radius $navbar-dropdown-radius 0 0 - border-top: none - bottom: 100% - box-shadow: 0 -8px 8px rgba($black, 0.1) - top: auto - &.is-active, - &.is-hoverable:hover - .navbar-dropdown - display: block - .navbar.is-spaced &, - &.is-boxed - opacity: 1 - pointer-events: auto - transform: translateY(0) - .navbar-menu - flex-grow: 1 - flex-shrink: 0 - .navbar-start - justify-content: flex-start - margin-right: auto - .navbar-end - justify-content: flex-end - margin-left: auto - .navbar-dropdown - background-color: $navbar-dropdown-background-color - border-bottom-left-radius: $navbar-dropdown-radius - border-bottom-right-radius: $navbar-dropdown-radius - border-top: $navbar-dropdown-border-top - box-shadow: 0 8px 8px rgba($black, 0.1) - display: none - font-size: 0.875rem - left: 0 - min-width: 100% - position: absolute - top: 100% - z-index: $navbar-dropdown-z - .navbar-item - padding: 0.375rem 1rem - white-space: nowrap - a.navbar-item - padding-right: 3rem - &:hover - background-color: $navbar-dropdown-item-hover-background-color - color: $navbar-dropdown-item-hover-color - &.is-active - background-color: $navbar-dropdown-item-active-background-color - color: $navbar-dropdown-item-active-color - .navbar.is-spaced &, - &.is-boxed - border-radius: $navbar-dropdown-boxed-radius - border-top: none - box-shadow: $navbar-dropdown-boxed-shadow - display: block - opacity: 0 - pointer-events: none - top: calc(100% + (#{$navbar-dropdown-offset})) - transform: translateY(-5px) - transition-duration: $speed - transition-property: opacity, transform - &.is-right - left: auto - right: 0 - .navbar-divider - display: block - .navbar > .container, - .container > .navbar - .navbar-brand - margin-left: -.75rem - .navbar-menu - margin-right: -.75rem - // Fixed navbar - .navbar - &.is-fixed-bottom-desktop, - &.is-fixed-top-desktop - +navbar-fixed - &.is-fixed-bottom-desktop - bottom: 0 - &.has-shadow - box-shadow: 0 -2px 3px rgba($black, 0.1) - &.is-fixed-top-desktop - top: 0 - html, - body - &.has-navbar-fixed-top-desktop - padding-top: $navbar-height - &.has-navbar-fixed-bottom-desktop - padding-bottom: $navbar-height - &.has-spaced-navbar-fixed-top - padding-top: $navbar-height + ($navbar-padding-vertical * 2) - &.has-spaced-navbar-fixed-bottom - padding-bottom: $navbar-height + ($navbar-padding-vertical * 2) - // Hover/Active states - a.navbar-item, - .navbar-link - &.is-active - color: $navbar-item-active-color - &.is-active:not(:hover) - background-color: $navbar-item-active-background-color - .navbar-item.has-dropdown - &:hover, - &.is-active - .navbar-link - background-color: $navbar-item-hover-background-color - -// Combination - -.hero - &.is-fullheight-with-navbar - min-height: calc(100vh - #{$navbar-height}) diff --git a/public/css/_sass/components/pagination.sass b/public/css/_sass/components/pagination.sass deleted file mode 100644 index 9b8fd03..0000000 --- a/public/css/_sass/components/pagination.sass +++ /dev/null @@ -1,144 +0,0 @@ -$pagination-color: $grey-darker !default -$pagination-border-color: $grey-lighter !default -$pagination-margin: -0.25rem !default -$pagination-min-width: $control-height !default - -$pagination-hover-color: $link-hover !default -$pagination-hover-border-color: $link-hover-border !default - -$pagination-focus-color: $link-focus !default -$pagination-focus-border-color: $link-focus-border !default - -$pagination-active-color: $link-active !default -$pagination-active-border-color: $link-active-border !default - -$pagination-disabled-color: $grey !default -$pagination-disabled-background-color: $grey-lighter !default -$pagination-disabled-border-color: $grey-lighter !default - -$pagination-current-color: $link-invert !default -$pagination-current-background-color: $link !default -$pagination-current-border-color: $link !default - -$pagination-ellipsis-color: $grey-light !default - -$pagination-shadow-inset: inset 0 1px 2px rgba($black, 0.2) - -.pagination - font-size: $size-normal - margin: $pagination-margin - // Sizes - &.is-small - font-size: $size-small - &.is-medium - font-size: $size-medium - &.is-large - font-size: $size-large - &.is-rounded - .pagination-previous, - .pagination-next - padding-left: 1em - padding-right: 1em - border-radius: $radius-rounded - .pagination-link - border-radius: $radius-rounded - -.pagination, -.pagination-list - align-items: center - display: flex - justify-content: center - text-align: center - -.pagination-previous, -.pagination-next, -.pagination-link, -.pagination-ellipsis - @extend %control - @extend %unselectable - font-size: 1em - padding-left: 0.5em - padding-right: 0.5em - justify-content: center - margin: 0.25rem - text-align: center - -.pagination-previous, -.pagination-next, -.pagination-link - border-color: $pagination-border-color - color: $pagination-color - min-width: $pagination-min-width - &:hover - border-color: $pagination-hover-border-color - color: $pagination-hover-color - &:focus - border-color: $pagination-focus-border-color - &:active - box-shadow: $pagination-shadow-inset - &[disabled] - background-color: $pagination-disabled-background-color - border-color: $pagination-disabled-border-color - box-shadow: none - color: $pagination-disabled-color - opacity: 0.5 - -.pagination-previous, -.pagination-next - padding-left: 0.75em - padding-right: 0.75em - white-space: nowrap - -.pagination-link - &.is-current - background-color: $pagination-current-background-color - border-color: $pagination-current-border-color - color: $pagination-current-color - -.pagination-ellipsis - color: $pagination-ellipsis-color - pointer-events: none - -.pagination-list - flex-wrap: wrap - -+mobile - .pagination - flex-wrap: wrap - .pagination-previous, - .pagination-next - flex-grow: 1 - flex-shrink: 1 - .pagination-list - li - flex-grow: 1 - flex-shrink: 1 - -+tablet - .pagination-list - flex-grow: 1 - flex-shrink: 1 - justify-content: flex-start - order: 1 - .pagination-previous - order: 2 - .pagination-next - order: 3 - .pagination - justify-content: space-between - &.is-centered - .pagination-previous - order: 1 - .pagination-list - justify-content: center - order: 2 - .pagination-next - order: 3 - &.is-right - .pagination-previous - order: 1 - .pagination-next - order: 2 - .pagination-list - justify-content: flex-end - order: 3 diff --git a/public/css/_sass/components/panel.sass b/public/css/_sass/components/panel.sass deleted file mode 100644 index b9d339e..0000000 --- a/public/css/_sass/components/panel.sass +++ /dev/null @@ -1,101 +0,0 @@ -$panel-item-border: 1px solid $border !default - -$panel-heading-background-color: $background !default -$panel-heading-color: $text-strong !default -$panel-heading-line-height: 1.25 !default -$panel-heading-padding: 0.5em 0.75em !default -$panel-heading-radius: $radius !default -$panel-heading-size: 1.25em !default -$panel-heading-weight: $weight-light !default - -$panel-tab-border-bottom: 1px solid $border !default -$panel-tab-active-border-bottom-color: $link-active-border !default -$panel-tab-active-color: $link-active !default - -$panel-list-item-color: $text !default -$panel-list-item-hover-color: $link !default - -$panel-block-color: $text-strong !default -$panel-block-hover-background-color: $background !default -$panel-block-active-border-left-color: $link !default -$panel-block-active-color: $link-active !default -$panel-block-active-icon-color: $link !default - -$panel-icon-color: $text-light !default - -.panel - font-size: $size-normal - &:not(:last-child) - margin-bottom: 1.5rem - -.panel-heading, -.panel-tabs, -.panel-block - border-bottom: $panel-item-border - border-left: $panel-item-border - border-right: $panel-item-border - &:first-child - border-top: $panel-item-border - -.panel-heading - background-color: $panel-heading-background-color - border-radius: $panel-heading-radius $panel-heading-radius 0 0 - color: $panel-heading-color - font-size: $panel-heading-size - font-weight: $panel-heading-weight - line-height: $panel-heading-line-height - padding: $panel-heading-padding - -.panel-tabs - align-items: flex-end - display: flex - font-size: 0.875em - justify-content: center - a - border-bottom: $panel-tab-border-bottom - margin-bottom: -1px - padding: 0.5em - // Modifiers - &.is-active - border-bottom-color: $panel-tab-active-border-bottom-color - color: $panel-tab-active-color - -.panel-list - a - color: $panel-list-item-color - &:hover - color: $panel-list-item-hover-color - -.panel-block - align-items: center - color: $panel-block-color - display: flex - justify-content: flex-start - padding: 0.5em 0.75em - input[type="checkbox"] - margin-right: 0.75em - & > .control - flex-grow: 1 - flex-shrink: 1 - width: 100% - &.is-wrapped - flex-wrap: wrap - &.is-active - border-left-color: $panel-block-active-border-left-color - color: $panel-block-active-color - .panel-icon - color: $panel-block-active-icon-color - -a.panel-block, -label.panel-block - cursor: pointer - &:hover - background-color: $panel-block-hover-background-color - -.panel-icon - +fa(14px, 1em) - color: $panel-icon-color - margin-right: 0.75em - .fa - font-size: inherit - line-height: inherit diff --git a/public/css/_sass/components/tabs.sass b/public/css/_sass/components/tabs.sass deleted file mode 100644 index 21ed90a..0000000 --- a/public/css/_sass/components/tabs.sass +++ /dev/null @@ -1,151 +0,0 @@ -$tabs-border-bottom-color: $border !default -$tabs-border-bottom-style: solid !default -$tabs-border-bottom-width: 1px !default -$tabs-link-color: $text !default -$tabs-link-hover-border-bottom-color: $text-strong !default -$tabs-link-hover-color: $text-strong !default -$tabs-link-active-border-bottom-color: $link !default -$tabs-link-active-color: $link !default -$tabs-link-padding: 0.5em 1em !default - -$tabs-boxed-link-radius: $radius !default -$tabs-boxed-link-hover-background-color: $background !default -$tabs-boxed-link-hover-border-bottom-color: $border !default - -$tabs-boxed-link-active-background-color: $white !default -$tabs-boxed-link-active-border-color: $border !default -$tabs-boxed-link-active-border-bottom-color: transparent !default - -$tabs-toggle-link-border-color: $border !default -$tabs-toggle-link-border-style: solid !default -$tabs-toggle-link-border-width: 1px !default -$tabs-toggle-link-hover-background-color: $background !default -$tabs-toggle-link-hover-border-color: $border-hover !default -$tabs-toggle-link-radius: $radius !default -$tabs-toggle-link-active-background-color: $link !default -$tabs-toggle-link-active-border-color: $link !default -$tabs-toggle-link-active-color: $link-invert !default - -.tabs - @extend %block - +overflow-touch - @extend %unselectable - align-items: stretch - display: flex - font-size: $size-normal - justify-content: space-between - overflow: hidden - overflow-x: auto - white-space: nowrap - a - align-items: center - border-bottom-color: $tabs-border-bottom-color - border-bottom-style: $tabs-border-bottom-style - border-bottom-width: $tabs-border-bottom-width - color: $tabs-link-color - display: flex - justify-content: center - margin-bottom: -#{$tabs-border-bottom-width} - padding: $tabs-link-padding - vertical-align: top - &:hover - border-bottom-color: $tabs-link-hover-border-bottom-color - color: $tabs-link-hover-color - li - display: block - &.is-active - a - border-bottom-color: $tabs-link-active-border-bottom-color - color: $tabs-link-active-color - ul - align-items: center - border-bottom-color: $tabs-border-bottom-color - border-bottom-style: $tabs-border-bottom-style - border-bottom-width: $tabs-border-bottom-width - display: flex - flex-grow: 1 - flex-shrink: 0 - justify-content: flex-start - &.is-left - padding-right: 0.75em - &.is-center - flex: none - justify-content: center - padding-left: 0.75em - padding-right: 0.75em - &.is-right - justify-content: flex-end - padding-left: 0.75em - .icon - &:first-child - margin-right: 0.5em - &:last-child - margin-left: 0.5em - // Alignment - &.is-centered - ul - justify-content: center - &.is-right - ul - justify-content: flex-end - // Styles - &.is-boxed - a - border: 1px solid transparent - border-radius: $tabs-boxed-link-radius $tabs-boxed-link-radius 0 0 - &:hover - background-color: $tabs-boxed-link-hover-background-color - border-bottom-color: $tabs-boxed-link-hover-border-bottom-color - li - &.is-active - a - background-color: $tabs-boxed-link-active-background-color - border-color: $tabs-boxed-link-active-border-color - border-bottom-color: $tabs-boxed-link-active-border-bottom-color !important - &.is-fullwidth - li - flex-grow: 1 - flex-shrink: 0 - &.is-toggle - a - border-color: $tabs-toggle-link-border-color - border-style: $tabs-toggle-link-border-style - border-width: $tabs-toggle-link-border-width - margin-bottom: 0 - position: relative - &:hover - background-color: $tabs-toggle-link-hover-background-color - border-color: $tabs-toggle-link-hover-border-color - z-index: 2 - li - & + li - margin-left: -#{$tabs-toggle-link-border-width} - &:first-child a - border-radius: $tabs-toggle-link-radius 0 0 $tabs-toggle-link-radius - &:last-child a - border-radius: 0 $tabs-toggle-link-radius $tabs-toggle-link-radius 0 - &.is-active - a - background-color: $tabs-toggle-link-active-background-color - border-color: $tabs-toggle-link-active-border-color - color: $tabs-toggle-link-active-color - z-index: 1 - ul - border-bottom: none - &.is-toggle-rounded - li - &:first-child a - border-bottom-left-radius: $radius-rounded - border-top-left-radius: $radius-rounded - padding-left: 1.25em - &:last-child a - border-bottom-right-radius: $radius-rounded - border-top-right-radius: $radius-rounded - padding-right: 1.25em - // Sizes - &.is-small - font-size: $size-small - &.is-medium - font-size: $size-medium - &.is-large - font-size: $size-large diff --git a/public/css/_sass/elements/_all.sass b/public/css/_sass/elements/_all.sass deleted file mode 100644 index 2234322..0000000 --- a/public/css/_sass/elements/_all.sass +++ /dev/null @@ -1,16 +0,0 @@ -@charset "utf-8" - -@import "box.sass" -@import "button.sass" -@import "container.sass" -@import "content.sass" -@import "form.sass" -@import "icon.sass" -@import "image.sass" -@import "notification.sass" -@import "progress.sass" -@import "table.sass" -@import "tag.sass" -@import "title.sass" - -@import "other.sass" diff --git a/public/css/_sass/elements/box.sass b/public/css/_sass/elements/box.sass deleted file mode 100644 index d58f405..0000000 --- a/public/css/_sass/elements/box.sass +++ /dev/null @@ -1,24 +0,0 @@ -$box-color: $text !default -$box-background-color: $white !default -$box-radius: $radius-large !default -$box-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default -$box-padding: 1.25rem !default - -$box-link-hover-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px $link !default -$box-link-active-shadow: inset 0 1px 2px rgba($black, 0.2), 0 0 0 1px $link !default - -.box - @extend %block - background-color: $box-background-color - border-radius: $box-radius - box-shadow: $box-shadow - color: $box-color - display: block - padding: $box-padding - -a.box - &:hover, - &:focus - box-shadow: $box-link-hover-shadow - &:active - box-shadow: $box-link-active-shadow diff --git a/public/css/_sass/elements/button.sass b/public/css/_sass/elements/button.sass deleted file mode 100644 index e75cd2f..0000000 --- a/public/css/_sass/elements/button.sass +++ /dev/null @@ -1,275 +0,0 @@ -$button-color: $grey-darker !default -$button-background-color: $white !default - -$button-border-color: $grey-lighter !default -$button-border-width: $control-border-width !default - -$button-padding-vertical: calc(0.375em - #{$button-border-width}) !default -$button-padding-horizontal: 0.75em !default - -$button-hover-color: $link-hover !default -$button-hover-border-color: $link-hover-border !default - -$button-focus-color: $link-focus !default -$button-focus-border-color: $link-focus-border !default -$button-focus-box-shadow-size: 0 0 0 0.125em !default -$button-focus-box-shadow-color: rgba($link, 0.25) !default - -$button-active-color: $link-active !default -$button-active-border-color: $link-active-border !default - -$button-text-color: $text !default -$button-text-hover-background-color: $background !default -$button-text-hover-color: $text-strong !default - -$button-disabled-background-color: $white !default -$button-disabled-border-color: $grey-lighter !default -$button-disabled-shadow: none !default -$button-disabled-opacity: 0.5 !default - -$button-static-color: $grey !default -$button-static-background-color: $white-ter !default -$button-static-border-color: $grey-lighter !default - -// The button sizes use mixins so they can be used at different breakpoints -=button-small - border-radius: $radius-small - font-size: $size-small -=button-normal - font-size: $size-normal -=button-medium - font-size: $size-medium -=button-large - font-size: $size-large - -.button - @extend %control - @extend %unselectable - background-color: $button-background-color - border-color: $button-border-color - border-width: $button-border-width - color: $button-color - cursor: pointer - justify-content: center - padding-bottom: $button-padding-vertical - padding-left: $button-padding-horizontal - padding-right: $button-padding-horizontal - padding-top: $button-padding-vertical - text-align: center - white-space: nowrap - strong - color: inherit - .icon - &, - &.is-small, - &.is-medium, - &.is-large - height: 1.5em - width: 1.5em - &:first-child:not(:last-child) - margin-left: calc(-0.375em - #{$button-border-width}) - margin-right: 0.1875em - &:last-child:not(:first-child) - margin-left: 0.1875em - margin-right: calc(-0.375em - #{$button-border-width}) - &:first-child:last-child - margin-left: calc(-0.375em - #{$button-border-width}) - margin-right: calc(-0.375em - #{$button-border-width}) - // States - &:hover, - &.is-hovered - border-color: $button-hover-border-color - color: $button-hover-color - &:focus, - &.is-focused - border-color: $button-focus-border-color - color: $button-focus-color - &:not(:active) - box-shadow: $button-focus-box-shadow-size $button-focus-box-shadow-color - &:active, - &.is-active - border-color: $button-active-border-color - color: $button-active-color - // Colors - &.is-text - background-color: transparent - border-color: transparent - color: $button-text-color - text-decoration: underline - &:hover, - &.is-hovered, - &:focus, - &.is-focused - background-color: $button-text-hover-background-color - color: $button-text-hover-color - &:active, - &.is-active - background-color: darken($button-text-hover-background-color, 5%) - color: $button-text-hover-color - &[disabled], - fieldset[disabled] & - background-color: transparent - border-color: transparent - box-shadow: none - @each $name, $pair in $colors - $color: nth($pair, 1) - $color-invert: nth($pair, 2) - &.is-#{$name} - background-color: $color - border-color: transparent - color: $color-invert - &:hover, - &.is-hovered - background-color: darken($color, 2.5%) - border-color: transparent - color: $color-invert - &:focus, - &.is-focused - border-color: transparent - color: $color-invert - &:not(:active) - box-shadow: $button-focus-box-shadow-size rgba($color, 0.25) - &:active, - &.is-active - background-color: darken($color, 5%) - border-color: transparent - color: $color-invert - &[disabled], - fieldset[disabled] & - background-color: $color - border-color: transparent - box-shadow: none - &.is-inverted - background-color: $color-invert - color: $color - &:hover - background-color: darken($color-invert, 5%) - &[disabled], - fieldset[disabled] & - background-color: $color-invert - border-color: transparent - box-shadow: none - color: $color - &.is-loading - &::after - border-color: transparent transparent $color-invert $color-invert !important - &.is-outlined - background-color: transparent - border-color: $color - color: $color - &:hover, - &:focus - background-color: $color - border-color: $color - color: $color-invert - &.is-loading - &::after - border-color: transparent transparent $color $color !important - &[disabled], - fieldset[disabled] & - background-color: transparent - border-color: $color - box-shadow: none - color: $color - &.is-inverted.is-outlined - background-color: transparent - border-color: $color-invert - color: $color-invert - &:hover, - &:focus - background-color: $color-invert - color: $color - &[disabled], - fieldset[disabled] & - background-color: transparent - border-color: $color-invert - box-shadow: none - color: $color-invert - // Sizes - &.is-small - +button-small - &.is-normal - +button-normal - &.is-medium - +button-medium - &.is-large - +button-large - // Modifiers - &[disabled], - fieldset[disabled] & - background-color: $button-disabled-background-color - border-color: $button-disabled-border-color - box-shadow: $button-disabled-shadow - opacity: $button-disabled-opacity - &.is-fullwidth - display: flex - width: 100% - &.is-loading - color: transparent !important - pointer-events: none - &::after - @extend %loader - +center(1em) - position: absolute !important - &.is-static - background-color: $button-static-background-color - border-color: $button-static-border-color - color: $button-static-color - box-shadow: none - pointer-events: none - &.is-rounded - border-radius: $radius-rounded - padding-left: 1em - padding-right: 1em - -.buttons - align-items: center - display: flex - flex-wrap: wrap - justify-content: flex-start - .button - margin-bottom: 0.5rem - &:not(:last-child):not(.is-fullwidth) - margin-right: 0.5rem - &:last-child - margin-bottom: -0.5rem - &:not(:last-child) - margin-bottom: 1rem - // Sizes - &.are-small - .button:not(.is-normal):not(.is-medium):not(.is-large) - +button-small - &.are-medium - .button:not(.is-small):not(.is-normal):not(.is-large) - +button-medium - &.are-large - .button:not(.is-small):not(.is-normal):not(.is-medium) - +button-large - &.has-addons - .button - &:not(:first-child) - border-bottom-left-radius: 0 - border-top-left-radius: 0 - &:not(:last-child) - border-bottom-right-radius: 0 - border-top-right-radius: 0 - margin-right: -1px - &:last-child - margin-right: 0 - &:hover, - &.is-hovered - z-index: 2 - &:focus, - &.is-focused, - &:active, - &.is-active, - &.is-selected - z-index: 3 - &:hover - z-index: 4 - &.is-expanded - flex-grow: 1 - &.is-centered - justify-content: center - &.is-right - justify-content: flex-end diff --git a/public/css/_sass/elements/container.sass b/public/css/_sass/elements/container.sass deleted file mode 100644 index 2aaf591..0000000 --- a/public/css/_sass/elements/container.sass +++ /dev/null @@ -1,25 +0,0 @@ -.container - margin: 0 auto - position: relative - +desktop - max-width: $desktop - (2 * $gap) - width: $desktop - (2 * $gap) - &.is-fluid - margin-left: $gap - margin-right: $gap - max-width: none - width: auto - +until-widescreen - &.is-widescreen - max-width: $widescreen - (2 * $gap) - width: auto - +until-fullhd - &.is-fullhd - max-width: $fullhd - (2 * $gap) - width: auto - +widescreen - max-width: $widescreen - (2 * $gap) - width: $widescreen - (2 * $gap) - +fullhd - max-width: $fullhd - (2 * $gap) - width: $fullhd - (2 * $gap) diff --git a/public/css/_sass/elements/content.sass b/public/css/_sass/elements/content.sass deleted file mode 100644 index 3f5530e..0000000 --- a/public/css/_sass/elements/content.sass +++ /dev/null @@ -1,151 +0,0 @@ -$content-heading-color: $text-strong !default -$content-heading-weight: $weight-semibold !default -$content-heading-line-height: 1.125 !default - -$content-blockquote-background-color: $background !default -$content-blockquote-border-left: 5px solid $border !default -$content-blockquote-padding: 1.25em 1.5em !default - -$content-pre-padding: 1.25em 1.5em !default - -$content-table-cell-border: 1px solid $border !default -$content-table-cell-border-width: 0 0 1px !default -$content-table-cell-padding: 0.5em 0.75em !default -$content-table-cell-heading-color: $text-strong !default -$content-table-head-cell-border-width: 0 0 2px !default -$content-table-head-cell-color: $text-strong !default -$content-table-foot-cell-border-width: 2px 0 0 !default -$content-table-foot-cell-color: $text-strong !default - -.content - @extend %block - // Inline - li + li - margin-top: 0.25em - // Block - p, - dl, - ol, - ul, - blockquote, - pre, - table - &:not(:last-child) - margin-bottom: 1em - h1, - h2, - h3, - h4, - h5, - h6 - color: $content-heading-color - font-weight: $content-heading-weight - line-height: $content-heading-line-height - h1 - font-size: 2em - margin-bottom: 0.5em - &:not(:first-child) - margin-top: 1em - h2 - font-size: 1.75em - margin-bottom: 0.5714em - &:not(:first-child) - margin-top: 1.1428em - h3 - font-size: 1.5em - margin-bottom: 0.6666em - &:not(:first-child) - margin-top: 1.3333em - h4 - font-size: 1.25em - margin-bottom: 0.8em - h5 - font-size: 1.125em - margin-bottom: 0.8888em - h6 - font-size: 1em - margin-bottom: 1em - blockquote - background-color: $content-blockquote-background-color - border-left: $content-blockquote-border-left - padding: $content-blockquote-padding - ol - list-style-position: outside - margin-left: 2em - margin-top: 1em - &:not([type]) - list-style-type: decimal - &.is-lower-alpha - list-style-type: lower-alpha - &.is-lower-roman - list-style-type: lower-roman - &.is-upper-alpha - list-style-type: upper-alpha - &.is-upper-roman - list-style-type: upper-roman - ul - list-style: disc outside - margin-left: 2em - margin-top: 1em - ul - list-style-type: circle - margin-top: 0.5em - ul - list-style-type: square - dd - margin-left: 2em - figure - margin-left: 2em - margin-right: 2em - text-align: center - &:not(:first-child) - margin-top: 2em - &:not(:last-child) - margin-bottom: 2em - img - display: inline-block - figcaption - font-style: italic - pre - +overflow-touch - overflow-x: auto - padding: $content-pre-padding - white-space: pre - word-wrap: normal - sup, - sub - font-size: 75% - table - width: 100% - td, - th - border: $content-table-cell-border - border-width: $content-table-cell-border-width - padding: $content-table-cell-padding - vertical-align: top - th - color: $content-table-cell-heading-color - text-align: left - thead - td, - th - border-width: $content-table-head-cell-border-width - color: $content-table-head-cell-color - tfoot - td, - th - border-width: $content-table-foot-cell-border-width - color: $content-table-foot-cell-color - tbody - tr - &:last-child - td, - th - border-bottom-width: 0 - // Sizes - &.is-small - font-size: $size-small - &.is-medium - font-size: $size-medium - &.is-large - font-size: $size-large diff --git a/public/css/_sass/elements/form.sass b/public/css/_sass/elements/form.sass deleted file mode 100644 index c944b75..0000000 --- a/public/css/_sass/elements/form.sass +++ /dev/null @@ -1,602 +0,0 @@ -$input-color: $grey-darker !default -$input-background-color: $white !default -$input-border-color: $grey-lighter !default -$input-height: $control-height !default -$input-shadow: inset 0 1px 2px rgba($black, 0.1) !default -$input-placeholder-color: rgba($input-color, 0.3) !default - -$input-hover-color: $grey-darker !default -$input-hover-border-color: $grey-light !default - -$input-focus-color: $grey-darker !default -$input-focus-border-color: $link !default -$input-focus-box-shadow-size: 0 0 0 0.125em !default -$input-focus-box-shadow-color: rgba($link, 0.25) !default - -$input-disabled-color: $text-light !default -$input-disabled-background-color: $background !default -$input-disabled-border-color: $background !default -$input-disabled-placeholder-color: rgba($input-disabled-color, 0.3) !default - -$input-arrow: $link !default - -$input-icon-color: $grey-lighter !default -$input-icon-active-color: $grey !default - -$input-radius: $radius !default - -$file-border-color: $border !default -$file-radius: $radius !default - -$file-cta-background-color: $white-ter !default -$file-cta-color: $grey-dark !default -$file-cta-hover-color: $grey-darker !default -$file-cta-active-color: $grey-darker !default - -$file-name-border-color: $border !default -$file-name-border-style: solid !default -$file-name-border-width: 1px 1px 1px 0 !default -$file-name-max-width: 16em !default - -$label-color: $grey-darker !default -$label-weight: $weight-bold !default - -$help-size: $size-small !default - -=input - @extend %control - background-color: $input-background-color - border-color: $input-border-color - color: $input-color - +placeholder - color: $input-placeholder-color - &:hover, - &.is-hovered - border-color: $input-hover-border-color - &:focus, - &.is-focused, - &:active, - &.is-active - border-color: $input-focus-border-color - box-shadow: $input-focus-box-shadow-size $input-focus-box-shadow-color - &[disabled], - fieldset[disabled] & - background-color: $input-disabled-background-color - border-color: $input-disabled-border-color - box-shadow: none - color: $input-disabled-color - +placeholder - color: $input-disabled-placeholder-color - -.input, -.textarea - +input - box-shadow: $input-shadow - max-width: 100% - width: 100% - &[readonly] - box-shadow: none - // Colors - @each $name, $pair in $colors - $color: nth($pair, 1) - &.is-#{$name} - border-color: $color - &:focus, - &.is-focused, - &:active, - &.is-active - box-shadow: $input-focus-box-shadow-size rgba($color, 0.25) - // Sizes - &.is-small - +control-small - &.is-medium - +control-medium - &.is-large - +control-large - // Modifiers - &.is-fullwidth - display: block - width: 100% - &.is-inline - display: inline - width: auto - -.input - &.is-rounded - border-radius: $radius-rounded - padding-left: 1em - padding-right: 1em - &.is-static - background-color: transparent - border-color: transparent - box-shadow: none - padding-left: 0 - padding-right: 0 - -.textarea - display: block - max-width: 100% - min-width: 100% - padding: 0.625em - resize: vertical - &:not([rows]) - max-height: 600px - min-height: 120px - &[rows] - height: initial - // Modifiers - &.has-fixed-size - resize: none - -.checkbox, -.radio - cursor: pointer - display: inline-block - line-height: 1.25 - position: relative - input - cursor: pointer - &:hover - color: $input-hover-color - &[disabled], - fieldset[disabled] & - color: $input-disabled-color - cursor: not-allowed - -.radio - & + .radio - margin-left: 0.5em - -.select - display: inline-block - max-width: 100% - position: relative - vertical-align: top - &:not(.is-multiple) - height: $input-height - &:not(.is-multiple):not(.is-loading) - &::after - @extend %arrow - border-color: $input-arrow - right: 1.125em - z-index: 4 - &.is-rounded - select - border-radius: $radius-rounded - padding-left: 1em - select - +input - cursor: pointer - display: block - font-size: 1em - max-width: 100% - outline: none - &::-ms-expand - display: none - &[disabled]:hover, - fieldset[disabled] &:hover - border-color: $input-disabled-border-color - &:not([multiple]) - padding-right: 2.5em - &[multiple] - height: auto - padding: 0 - option - padding: 0.5em 1em - // States - &:not(.is-multiple):not(.is-loading):hover - &::after - border-color: $input-hover-color - // Colors - @each $name, $pair in $colors - $color: nth($pair, 1) - &.is-#{$name} - &:not(:hover)::after - border-color: $color - select - border-color: $color - &:hover, - &.is-hovered - border-color: darken($color, 5%) - &:focus, - &.is-focused, - &:active, - &.is-active - box-shadow: $input-focus-box-shadow-size rgba($color, 0.25) - // Sizes - &.is-small - +control-small - &.is-medium - +control-medium - &.is-large - +control-large - // Modifiers - &.is-disabled - &::after - border-color: $input-disabled-color - &.is-fullwidth - width: 100% - select - width: 100% - &.is-loading - &::after - @extend %loader - margin-top: 0 - position: absolute - right: 0.625em - top: 0.625em - transform: none - &.is-small:after - font-size: $size-small - &.is-medium:after - font-size: $size-medium - &.is-large:after - font-size: $size-large - -.file - @extend %unselectable - align-items: stretch - display: flex - justify-content: flex-start - position: relative - // Colors - @each $name, $pair in $colors - $color: nth($pair, 1) - $color-invert: nth($pair, 2) - &.is-#{$name} - .file-cta - background-color: $color - border-color: transparent - color: $color-invert - &:hover, - &.is-hovered - .file-cta - background-color: darken($color, 2.5%) - border-color: transparent - color: $color-invert - &:focus, - &.is-focused - .file-cta - border-color: transparent - box-shadow: 0 0 0.5em rgba($color, 0.25) - color: $color-invert - &:active, - &.is-active - .file-cta - background-color: darken($color, 5%) - border-color: transparent - color: $color-invert - // Sizes - &.is-small - font-size: $size-small - &.is-medium - font-size: $size-medium - .file-icon - .fa - font-size: 21px - &.is-large - font-size: $size-large - .file-icon - .fa - font-size: 28px - // Modifiers - &.has-name - .file-cta - border-bottom-right-radius: 0 - border-top-right-radius: 0 - .file-name - border-bottom-left-radius: 0 - border-top-left-radius: 0 - &.is-empty - .file-cta - border-radius: $file-radius - .file-name - display: none - &.is-boxed - .file-label - flex-direction: column - .file-cta - flex-direction: column - height: auto - padding: 1em 3em - .file-name - border-width: 0 1px 1px - .file-icon - height: 1.5em - width: 1.5em - .fa - font-size: 21px - &.is-small - .file-icon .fa - font-size: 14px - &.is-medium - .file-icon .fa - font-size: 28px - &.is-large - .file-icon .fa - font-size: 35px - &.has-name - .file-cta - border-radius: $file-radius $file-radius 0 0 - .file-name - border-radius: 0 0 $file-radius $file-radius - border-width: 0 1px 1px - &.is-centered - justify-content: center - &.is-fullwidth - .file-label - width: 100% - .file-name - flex-grow: 1 - max-width: none - &.is-right - justify-content: flex-end - .file-cta - border-radius: 0 $file-radius $file-radius 0 - .file-name - border-radius: $file-radius 0 0 $file-radius - border-width: 1px 0 1px 1px - order: -1 - -.file-label - align-items: stretch - display: flex - cursor: pointer - justify-content: flex-start - overflow: hidden - position: relative - &:hover - .file-cta - background-color: darken($file-cta-background-color, 2.5%) - color: $file-cta-hover-color - .file-name - border-color: darken($file-name-border-color, 2.5%) - &:active - .file-cta - background-color: darken($file-cta-background-color, 5%) - color: $file-cta-active-color - .file-name - border-color: darken($file-name-border-color, 5%) - -.file-input - height: 100% - left: 0 - opacity: 0 - outline: none - position: absolute - top: 0 - width: 100% - -.file-cta, -.file-name - @extend %control - border-color: $file-border-color - border-radius: $file-radius - font-size: 1em - padding-left: 1em - padding-right: 1em - white-space: nowrap - -.file-cta - background-color: $file-cta-background-color - color: $file-cta-color - -.file-name - border-color: $file-name-border-color - border-style: $file-name-border-style - border-width: $file-name-border-width - display: block - max-width: $file-name-max-width - overflow: hidden - text-align: left - text-overflow: ellipsis - -.file-icon - align-items: center - display: flex - height: 1em - justify-content: center - margin-right: 0.5em - width: 1em - .fa - font-size: 14px - -.label - color: $label-color - display: block - font-size: $size-normal - font-weight: $label-weight - &:not(:last-child) - margin-bottom: 0.5em - // Sizes - &.is-small - font-size: $size-small - &.is-medium - font-size: $size-medium - &.is-large - font-size: $size-large - -.help - display: block - font-size: $help-size - margin-top: 0.25rem - @each $name, $pair in $colors - $color: nth($pair, 1) - &.is-#{$name} - color: $color - -// Containers - -.field - &:not(:last-child) - margin-bottom: 0.75rem - // Modifiers - &.has-addons - display: flex - justify-content: flex-start - .control - &:not(:last-child) - margin-right: -1px - &:not(:first-child):not(:last-child) - .button, - .input, - .select select - border-radius: 0 - &:first-child:not(:only-child) - .button, - .input, - .select select - border-bottom-right-radius: 0 - border-top-right-radius: 0 - &:last-child:not(:only-child) - .button, - .input, - .select select - border-bottom-left-radius: 0 - border-top-left-radius: 0 - .button, - .input, - .select select - &:not([disabled]) - &:hover, - &.is-hovered - z-index: 2 - &:focus, - &.is-focused, - &:active, - &.is-active - z-index: 3 - &:hover - z-index: 4 - &.is-expanded - flex-grow: 1 - &.has-addons-centered - justify-content: center - &.has-addons-right - justify-content: flex-end - &.has-addons-fullwidth - .control - flex-grow: 1 - flex-shrink: 0 - &.is-grouped - display: flex - justify-content: flex-start - & > .control - flex-shrink: 0 - &:not(:last-child) - margin-bottom: 0 - margin-right: 0.75rem - &.is-expanded - flex-grow: 1 - flex-shrink: 1 - &.is-grouped-centered - justify-content: center - &.is-grouped-right - justify-content: flex-end - &.is-grouped-multiline - flex-wrap: wrap - & > .control - &:last-child, - &:not(:last-child) - margin-bottom: 0.75rem - &:last-child - margin-bottom: -0.75rem - &:not(:last-child) - margin-bottom: 0 - &.is-horizontal - +tablet - display: flex - -.field-label - .label - font-size: inherit - +mobile - margin-bottom: 0.5rem - +tablet - flex-basis: 0 - flex-grow: 1 - flex-shrink: 0 - margin-right: 1.5rem - text-align: right - &.is-small - font-size: $size-small - padding-top: 0.375em - &.is-normal - padding-top: 0.375em - &.is-medium - font-size: $size-medium - padding-top: 0.375em - &.is-large - font-size: $size-large - padding-top: 0.375em - -.field-body - .field .field - margin-bottom: 0 - +tablet - display: flex - flex-basis: 0 - flex-grow: 5 - flex-shrink: 1 - .field - margin-bottom: 0 - & > .field - flex-shrink: 1 - &:not(.is-narrow) - flex-grow: 1 - &:not(:last-child) - margin-right: 0.75rem - -.control - box-sizing: border-box - clear: both //fixes the icon floating out of the input when help text is floated right - font-size: $size-normal - position: relative - text-align: left - // Modifiers - &.has-icons-left, - &.has-icons-right - .input, - .select - &:focus - & ~ .icon - color: $input-icon-active-color - &.is-small ~ .icon - font-size: $size-small - &.is-medium ~ .icon - font-size: $size-medium - &.is-large ~ .icon - font-size: $size-large - .icon - color: $input-icon-color - height: $input-height - pointer-events: none - position: absolute - top: 0 - width: $input-height - z-index: 4 - &.has-icons-left - .input, - .select select - padding-left: $input-height - .icon.is-left - left: 0 - &.has-icons-right - .input, - .select select - padding-right: $input-height - .icon.is-right - right: 0 - &.is-loading - &::after - @extend %loader - position: absolute !important - right: 0.625em - top: 0.625em - z-index: 4 - &.is-small:after - font-size: $size-small - &.is-medium:after - font-size: $size-medium - &.is-large:after - font-size: $size-large diff --git a/public/css/_sass/elements/icon.sass b/public/css/_sass/elements/icon.sass deleted file mode 100644 index 988546c..0000000 --- a/public/css/_sass/elements/icon.sass +++ /dev/null @@ -1,21 +0,0 @@ -$icon-dimensions: 1.5rem !default -$icon-dimensions-small: 1rem !default -$icon-dimensions-medium: 2rem !default -$icon-dimensions-large: 3rem !default - -.icon - align-items: center - display: inline-flex - justify-content: center - height: $icon-dimensions - width: $icon-dimensions - // Sizes - &.is-small - height: $icon-dimensions-small - width: $icon-dimensions-small - &.is-medium - height: $icon-dimensions-medium - width: $icon-dimensions-medium - &.is-large - height: $icon-dimensions-large - width: $icon-dimensions-large diff --git a/public/css/_sass/elements/image.sass b/public/css/_sass/elements/image.sass deleted file mode 100644 index cfa64fe..0000000 --- a/public/css/_sass/elements/image.sass +++ /dev/null @@ -1,69 +0,0 @@ -$dimensions: 16 24 32 48 64 96 128 !default - -.image - display: block - position: relative - img - display: block - height: auto - width: 100% - &.is-rounded - border-radius: $radius-rounded - // Ratio - &.is-square, - &.is-1by1, - &.is-5by4, - &.is-4by3, - &.is-3by2, - &.is-5by3, - &.is-16by9, - &.is-2by1, - &.is-3by1, - &.is-4by5, - &.is-3by4, - &.is-2by3, - &.is-3by5, - &.is-9by16, - &.is-1by2, - &.is-1by3 - img, - .has-ratio - @extend %overlay - height: 100% - width: 100% - &.is-square, - &.is-1by1 - padding-top: 100% - &.is-5by4 - padding-top: 80% - &.is-4by3 - padding-top: 75% - &.is-3by2 - padding-top: 66.6666% - &.is-5by3 - padding-top: 60% - &.is-16by9 - padding-top: 56.25% - &.is-2by1 - padding-top: 50% - &.is-3by1 - padding-top: 33.3333% - &.is-4by5 - padding-top: 125% - &.is-3by4 - padding-top: 133.3333% - &.is-2by3 - padding-top: 150% - &.is-3by5 - padding-top: 166.6666% - &.is-9by16 - padding-top: 177.7777% - &.is-1by2 - padding-top: 200% - &.is-1by3 - padding-top: 300% - // Sizes - @each $dimension in $dimensions - &.is-#{$dimension}x#{$dimension} - height: $dimension * 1px - width: $dimension * 1px diff --git a/public/css/_sass/elements/notification.sass b/public/css/_sass/elements/notification.sass deleted file mode 100644 index 2bda414..0000000 --- a/public/css/_sass/elements/notification.sass +++ /dev/null @@ -1,35 +0,0 @@ -$notification-background-color: $background !default -$notification-radius: $radius !default -$notification-padding: 1.25rem 2.5rem 1.25rem 1.5rem !default - -.notification - @extend %block - background-color: $notification-background-color - border-radius: $notification-radius - padding: $notification-padding - position: relative - a:not(.button):not(.dropdown-item) - color: currentColor - text-decoration: underline - strong - color: currentColor - code, - pre - background: $white - pre code - background: transparent - & > .delete - position: absolute - right: 0.5rem - top: 0.5rem - .title, - .subtitle, - .content - color: currentColor - // Colors - @each $name, $pair in $colors - $color: nth($pair, 1) - $color-invert: nth($pair, 2) - &.is-#{$name} - background-color: $color - color: $color-invert diff --git a/public/css/_sass/elements/other.sass b/public/css/_sass/elements/other.sass deleted file mode 100644 index 5725617..0000000 --- a/public/css/_sass/elements/other.sass +++ /dev/null @@ -1,39 +0,0 @@ -.block - @extend %block - -.delete - @extend %delete - -.heading - display: block - font-size: 11px - letter-spacing: 1px - margin-bottom: 5px - text-transform: uppercase - -.highlight - @extend %block - font-weight: $weight-normal - max-width: 100% - overflow: hidden - padding: 0 - pre - overflow: auto - max-width: 100% - -.loader - @extend %loader - -.number - align-items: center - background-color: $background - border-radius: $radius-rounded - display: inline-flex - font-size: $size-medium - height: 2em - justify-content: center - margin-right: 1.5rem - min-width: 2.5em - padding: 0.25rem 0.5rem - text-align: center - vertical-align: top diff --git a/public/css/_sass/elements/progress.sass b/public/css/_sass/elements/progress.sass deleted file mode 100644 index b263eeb..0000000 --- a/public/css/_sass/elements/progress.sass +++ /dev/null @@ -1,65 +0,0 @@ -$progress-bar-background-color: $border !default -$progress-value-background-color: $text !default - -$progress-indeterminate-duration: 1.5s !default - -.progress - @extend %block - -moz-appearance: none - -webkit-appearance: none - border: none - border-radius: $radius-rounded - display: block - height: $size-normal - overflow: hidden - padding: 0 - width: 100% - &::-webkit-progress-bar - background-color: $progress-bar-background-color - &::-webkit-progress-value - background-color: $progress-value-background-color - &::-moz-progress-bar - background-color: $progress-value-background-color - &::-ms-fill - background-color: $progress-value-background-color - border: none - &:indeterminate - animation-duration: $progress-indeterminate-duration - animation-iteration-count: infinite - animation-name: moveIndeterminate - animation-timing-function: linear - background-color: $progress-bar-background-color - background-image: linear-gradient(to right, $text 30%, $progress-bar-background-color 30%) - background-position: top left - background-repeat: no-repeat - background-size: 150% 150% - &::-webkit-progress-bar - background-color: transparent - &::-moz-progress-bar - background-color: transparent - // Colors - @each $name, $pair in $colors - $color: nth($pair, 1) - &.is-#{$name} - &::-webkit-progress-value - background-color: $color - &::-moz-progress-bar - background-color: $color - &::-ms-fill - background-color: $color - &:indeterminate - background-image: linear-gradient(to right, $color 30%, $progress-bar-background-color 30%) - - // Sizes - &.is-small - height: $size-small - &.is-medium - height: $size-medium - &.is-large - height: $size-large - -@keyframes moveIndeterminate - from - background-position: 200% 0 - to - background-position: -200% 0 diff --git a/public/css/_sass/elements/table.sass b/public/css/_sass/elements/table.sass deleted file mode 100644 index a1cf936..0000000 --- a/public/css/_sass/elements/table.sass +++ /dev/null @@ -1,126 +0,0 @@ -$table-color: $grey-darker !default -$table-background-color: $white !default - -$table-cell-border: 1px solid $grey-lighter !default -$table-cell-border-width: 0 0 1px !default -$table-cell-padding: 0.5em 0.75em !default -$table-cell-heading-color: $text-strong !default - -$table-head-cell-border-width: 0 0 2px !default -$table-head-cell-color: $text-strong !default -$table-foot-cell-border-width: 2px 0 0 !default -$table-foot-cell-color: $text-strong !default - -$table-head-background-color: transparent !default -$table-body-background-color: transparent !default -$table-foot-background-color: transparent !default - -$table-row-hover-background-color: $white-bis !default - -$table-row-active-background-color: $primary !default -$table-row-active-color: $primary-invert !default - -$table-striped-row-even-background-color: $white-bis !default -$table-striped-row-even-hover-background-color: $white-ter !default - -.table - @extend %block - background-color: $table-background-color - color: $table-color - td, - th - border: $table-cell-border - border-width: $table-cell-border-width - padding: $table-cell-padding - vertical-align: top - // Colors - @each $name, $pair in $colors - $color: nth($pair, 1) - $color-invert: nth($pair, 2) - &.is-#{$name} - background-color: $color - border-color: $color - color: $color-invert - // Modifiers - &.is-narrow - white-space: nowrap - width: 1% - &.is-selected - background-color: $table-row-active-background-color - color: $table-row-active-color - a, - strong - color: currentColor - th - color: $table-cell-heading-color - text-align: left - tr - &.is-selected - background-color: $table-row-active-background-color - color: $table-row-active-color - a, - strong - color: currentColor - td, - th - border-color: $table-row-active-color - color: currentColor - thead - background-color: $table-head-background-color - td, - th - border-width: $table-head-cell-border-width - color: $table-head-cell-color - tfoot - background-color: $table-foot-background-color - td, - th - border-width: $table-foot-cell-border-width - color: $table-foot-cell-color - tbody - background-color: $table-body-background-color - tr - &:last-child - td, - th - border-bottom-width: 0 - // Modifiers - &.is-bordered - td, - th - border-width: 1px - tr - &:last-child - td, - th - border-bottom-width: 1px - &.is-fullwidth - width: 100% - &.is-hoverable - tbody - tr:not(.is-selected) - &:hover - background-color: $table-row-hover-background-color - &.is-striped - tbody - tr:not(.is-selected) - &:hover - background-color: $table-row-hover-background-color - &:nth-child(even) - background-color: $table-striped-row-even-hover-background-color - &.is-narrow - td, - th - padding: 0.25em 0.5em - &.is-striped - tbody - tr:not(.is-selected) - &:nth-child(even) - background-color: $table-striped-row-even-background-color - -.table-container - @extend %block - +overflow-touch - overflow: auto - overflow-y: hidden - max-width: 100% diff --git a/public/css/_sass/elements/tag.sass b/public/css/_sass/elements/tag.sass deleted file mode 100644 index a5fb3c4..0000000 --- a/public/css/_sass/elements/tag.sass +++ /dev/null @@ -1,130 +0,0 @@ -$tag-background-color: $background !default -$tag-color: $text !default -$tag-radius: $radius !default -$tag-delete-margin: 1px !default - -.tags - align-items: center - display: flex - flex-wrap: wrap - justify-content: flex-start - .tag - margin-bottom: 0.5rem - &:not(:last-child) - margin-right: 0.5rem - &:last-child - margin-bottom: -0.5rem - &:not(:last-child) - margin-bottom: 1rem - // Sizes - &.are-medium - .tag:not(.is-normal):not(.is-large) - font-size: $size-normal - &.are-large - .tag:not(.is-normal):not(.is-medium) - font-size: $size-medium - &.has-addons - .tag - margin-right: 0 - &:not(:first-child) - border-bottom-left-radius: 0 - border-top-left-radius: 0 - &:not(:last-child) - border-bottom-right-radius: 0 - border-top-right-radius: 0 - &.is-centered - justify-content: center - .tag - margin-right: 0.25rem - margin-left: 0.25rem - &.is-right - justify-content: flex-end - .tag - &:not(:first-child) - margin-left: 0.5rem - &:not(:last-child) - margin-right: 0 - &.has-addons - .tag - margin-right: 0 - &:not(:first-child) - margin-left: 0 - border-bottom-left-radius: 0 - border-top-left-radius: 0 - &:not(:last-child) - border-bottom-right-radius: 0 - border-top-right-radius: 0 - -.tag:not(body) - align-items: center - background-color: $tag-background-color - border-radius: $tag-radius - color: $tag-color - display: inline-flex - font-size: $size-small - height: 2em - justify-content: center - line-height: 1.5 - padding-left: 0.75em - padding-right: 0.75em - white-space: nowrap - .delete - margin-left: 0.25rem - margin-right: -0.375rem - // Colors - @each $name, $pair in $colors - $color: nth($pair, 1) - $color-invert: nth($pair, 2) - &.is-#{$name} - background-color: $color - color: $color-invert - // Sizes - &.is-normal - font-size: $size-small - &.is-medium - font-size: $size-normal - &.is-large - font-size: $size-medium - .icon - &:first-child:not(:last-child) - margin-left: -0.375em - margin-right: 0.1875em - &:last-child:not(:first-child) - margin-left: 0.1875em - margin-right: -0.375em - &:first-child:last-child - margin-left: -0.375em - margin-right: -0.375em - // Modifiers - &.is-delete - margin-left: $tag-delete-margin - padding: 0 - position: relative - width: 2em - &::before, - &::after - background-color: currentColor - content: "" - display: block - left: 50% - position: absolute - top: 50% - transform: translateX(-50%) translateY(-50%) rotate(45deg) - transform-origin: center center - &::before - height: 1px - width: 50% - &::after - height: 50% - width: 1px - &:hover, - &:focus - background-color: darken($tag-background-color, 5%) - &:active - background-color: darken($tag-background-color, 10%) - &.is-rounded - border-radius: $radius-rounded - -a.tag - &:hover - text-decoration: underline diff --git a/public/css/_sass/elements/title.sass b/public/css/_sass/elements/title.sass deleted file mode 100644 index febe2fc..0000000 --- a/public/css/_sass/elements/title.sass +++ /dev/null @@ -1,64 +0,0 @@ -$title-color: $grey-darker !default -$title-size: $size-3 !default -$title-weight: $weight-semibold !default -$title-line-height: 1.125 !default -$title-strong-color: inherit !default -$title-strong-weight: inherit !default -$title-sub-size: 0.75em !default -$title-sup-size: 0.75em !default - -$subtitle-color: $grey-dark !default -$subtitle-size: $size-5 !default -$subtitle-weight: $weight-normal !default -$subtitle-line-height: 1.25 !default -$subtitle-strong-color: $grey-darker !default -$subtitle-strong-weight: $weight-semibold !default -$subtitle-negative-margin: -1.25rem !default - -.title, -.subtitle - @extend %block - word-break: break-word - em, - span - font-weight: inherit - sub - font-size: $title-sub-size - sup - font-size: $title-sup-size - .tag - vertical-align: middle - -.title - color: $title-color - font-size: $title-size - font-weight: $title-weight - line-height: $title-line-height - strong - color: $title-strong-color - font-weight: $title-strong-weight - & + .highlight - margin-top: -0.75rem - &:not(.is-spaced) + .subtitle - margin-top: $subtitle-negative-margin - // Sizes - @each $size in $sizes - $i: index($sizes, $size) - &.is-#{$i} - font-size: $size - -.subtitle - color: $subtitle-color - font-size: $subtitle-size - font-weight: $subtitle-weight - line-height: $subtitle-line-height - strong - color: $subtitle-strong-color - font-weight: $subtitle-strong-weight - &:not(.is-spaced) + .title - margin-top: $subtitle-negative-margin - // Sizes - @each $size in $sizes - $i: index($sizes, $size) - &.is-#{$i} - font-size: $size diff --git a/public/css/_sass/grid/_all.sass b/public/css/_sass/grid/_all.sass deleted file mode 100644 index e53070f..0000000 --- a/public/css/_sass/grid/_all.sass +++ /dev/null @@ -1,4 +0,0 @@ -@charset "utf-8" - -@import "columns.sass" -@import "tiles.sass" diff --git a/public/css/_sass/grid/columns.sass b/public/css/_sass/grid/columns.sass deleted file mode 100644 index bd41761..0000000 --- a/public/css/_sass/grid/columns.sass +++ /dev/null @@ -1,504 +0,0 @@ -$column-gap: 0.75rem !default - -.column - display: block - flex-basis: 0 - flex-grow: 1 - flex-shrink: 1 - padding: $column-gap - .columns.is-mobile > &.is-narrow - flex: none - .columns.is-mobile > &.is-full - flex: none - width: 100% - .columns.is-mobile > &.is-three-quarters - flex: none - width: 75% - .columns.is-mobile > &.is-two-thirds - flex: none - width: 66.6666% - .columns.is-mobile > &.is-half - flex: none - width: 50% - .columns.is-mobile > &.is-one-third - flex: none - width: 33.3333% - .columns.is-mobile > &.is-one-quarter - flex: none - width: 25% - .columns.is-mobile > &.is-one-fifth - flex: none - width: 20% - .columns.is-mobile > &.is-two-fifths - flex: none - width: 40% - .columns.is-mobile > &.is-three-fifths - flex: none - width: 60% - .columns.is-mobile > &.is-four-fifths - flex: none - width: 80% - .columns.is-mobile > &.is-offset-three-quarters - margin-left: 75% - .columns.is-mobile > &.is-offset-two-thirds - margin-left: 66.6666% - .columns.is-mobile > &.is-offset-half - margin-left: 50% - .columns.is-mobile > &.is-offset-one-third - margin-left: 33.3333% - .columns.is-mobile > &.is-offset-one-quarter - margin-left: 25% - .columns.is-mobile > &.is-offset-one-fifth - margin-left: 20% - .columns.is-mobile > &.is-offset-two-fifths - margin-left: 40% - .columns.is-mobile > &.is-offset-three-fifths - margin-left: 60% - .columns.is-mobile > &.is-offset-four-fifths - margin-left: 80% - @for $i from 1 through 12 - .columns.is-mobile > &.is-#{$i} - flex: none - width: percentage($i / 12) - .columns.is-mobile > &.is-offset-#{$i} - margin-left: percentage($i / 12) - +mobile - &.is-narrow-mobile - flex: none - &.is-full-mobile - flex: none - width: 100% - &.is-three-quarters-mobile - flex: none - width: 75% - &.is-two-thirds-mobile - flex: none - width: 66.6666% - &.is-half-mobile - flex: none - width: 50% - &.is-one-third-mobile - flex: none - width: 33.3333% - &.is-one-quarter-mobile - flex: none - width: 25% - &.is-one-fifth-mobile - flex: none - width: 20% - &.is-two-fifths-mobile - flex: none - width: 40% - &.is-three-fifths-mobile - flex: none - width: 60% - &.is-four-fifths-mobile - flex: none - width: 80% - &.is-offset-three-quarters-mobile - margin-left: 75% - &.is-offset-two-thirds-mobile - margin-left: 66.6666% - &.is-offset-half-mobile - margin-left: 50% - &.is-offset-one-third-mobile - margin-left: 33.3333% - &.is-offset-one-quarter-mobile - margin-left: 25% - &.is-offset-one-fifth-mobile - margin-left: 20% - &.is-offset-two-fifths-mobile - margin-left: 40% - &.is-offset-three-fifths-mobile - margin-left: 60% - &.is-offset-four-fifths-mobile - margin-left: 80% - @for $i from 1 through 12 - &.is-#{$i}-mobile - flex: none - width: percentage($i / 12) - &.is-offset-#{$i}-mobile - margin-left: percentage($i / 12) - +tablet - &.is-narrow, - &.is-narrow-tablet - flex: none - &.is-full, - &.is-full-tablet - flex: none - width: 100% - &.is-three-quarters, - &.is-three-quarters-tablet - flex: none - width: 75% - &.is-two-thirds, - &.is-two-thirds-tablet - flex: none - width: 66.6666% - &.is-half, - &.is-half-tablet - flex: none - width: 50% - &.is-one-third, - &.is-one-third-tablet - flex: none - width: 33.3333% - &.is-one-quarter, - &.is-one-quarter-tablet - flex: none - width: 25% - &.is-one-fifth, - &.is-one-fifth-tablet - flex: none - width: 20% - &.is-two-fifths, - &.is-two-fifths-tablet - flex: none - width: 40% - &.is-three-fifths, - &.is-three-fifths-tablet - flex: none - width: 60% - &.is-four-fifths, - &.is-four-fifths-tablet - flex: none - width: 80% - &.is-offset-three-quarters, - &.is-offset-three-quarters-tablet - margin-left: 75% - &.is-offset-two-thirds, - &.is-offset-two-thirds-tablet - margin-left: 66.6666% - &.is-offset-half, - &.is-offset-half-tablet - margin-left: 50% - &.is-offset-one-third, - &.is-offset-one-third-tablet - margin-left: 33.3333% - &.is-offset-one-quarter, - &.is-offset-one-quarter-tablet - margin-left: 25% - &.is-offset-one-fifth, - &.is-offset-one-fifth-tablet - margin-left: 20% - &.is-offset-two-fifths, - &.is-offset-two-fifths-tablet - margin-left: 40% - &.is-offset-three-fifths, - &.is-offset-three-fifths-tablet - margin-left: 60% - &.is-offset-four-fifths, - &.is-offset-four-fifths-tablet - margin-left: 80% - @for $i from 1 through 12 - &.is-#{$i}, - &.is-#{$i}-tablet - flex: none - width: percentage($i / 12) - &.is-offset-#{$i}, - &.is-offset-#{$i}-tablet - margin-left: percentage($i / 12) - +touch - &.is-narrow-touch - flex: none - &.is-full-touch - flex: none - width: 100% - &.is-three-quarters-touch - flex: none - width: 75% - &.is-two-thirds-touch - flex: none - width: 66.6666% - &.is-half-touch - flex: none - width: 50% - &.is-one-third-touch - flex: none - width: 33.3333% - &.is-one-quarter-touch - flex: none - width: 25% - &.is-one-fifth-touch - flex: none - width: 20% - &.is-two-fifths-touch - flex: none - width: 40% - &.is-three-fifths-touch - flex: none - width: 60% - &.is-four-fifths-touch - flex: none - width: 80% - &.is-offset-three-quarters-touch - margin-left: 75% - &.is-offset-two-thirds-touch - margin-left: 66.6666% - &.is-offset-half-touch - margin-left: 50% - &.is-offset-one-third-touch - margin-left: 33.3333% - &.is-offset-one-quarter-touch - margin-left: 25% - &.is-offset-one-fifth-touch - margin-left: 20% - &.is-offset-two-fifths-touch - margin-left: 40% - &.is-offset-three-fifths-touch - margin-left: 60% - &.is-offset-four-fifths-touch - margin-left: 80% - @for $i from 1 through 12 - &.is-#{$i}-touch - flex: none - width: percentage($i / 12) - &.is-offset-#{$i}-touch - margin-left: percentage($i / 12) - +desktop - &.is-narrow-desktop - flex: none - &.is-full-desktop - flex: none - width: 100% - &.is-three-quarters-desktop - flex: none - width: 75% - &.is-two-thirds-desktop - flex: none - width: 66.6666% - &.is-half-desktop - flex: none - width: 50% - &.is-one-third-desktop - flex: none - width: 33.3333% - &.is-one-quarter-desktop - flex: none - width: 25% - &.is-one-fifth-desktop - flex: none - width: 20% - &.is-two-fifths-desktop - flex: none - width: 40% - &.is-three-fifths-desktop - flex: none - width: 60% - &.is-four-fifths-desktop - flex: none - width: 80% - &.is-offset-three-quarters-desktop - margin-left: 75% - &.is-offset-two-thirds-desktop - margin-left: 66.6666% - &.is-offset-half-desktop - margin-left: 50% - &.is-offset-one-third-desktop - margin-left: 33.3333% - &.is-offset-one-quarter-desktop - margin-left: 25% - &.is-offset-one-fifth-desktop - margin-left: 20% - &.is-offset-two-fifths-desktop - margin-left: 40% - &.is-offset-three-fifths-desktop - margin-left: 60% - &.is-offset-four-fifths-desktop - margin-left: 80% - @for $i from 1 through 12 - &.is-#{$i}-desktop - flex: none - width: percentage($i / 12) - &.is-offset-#{$i}-desktop - margin-left: percentage($i / 12) - +widescreen - &.is-narrow-widescreen - flex: none - &.is-full-widescreen - flex: none - width: 100% - &.is-three-quarters-widescreen - flex: none - width: 75% - &.is-two-thirds-widescreen - flex: none - width: 66.6666% - &.is-half-widescreen - flex: none - width: 50% - &.is-one-third-widescreen - flex: none - width: 33.3333% - &.is-one-quarter-widescreen - flex: none - width: 25% - &.is-one-fifth-widescreen - flex: none - width: 20% - &.is-two-fifths-widescreen - flex: none - width: 40% - &.is-three-fifths-widescreen - flex: none - width: 60% - &.is-four-fifths-widescreen - flex: none - width: 80% - &.is-offset-three-quarters-widescreen - margin-left: 75% - &.is-offset-two-thirds-widescreen - margin-left: 66.6666% - &.is-offset-half-widescreen - margin-left: 50% - &.is-offset-one-third-widescreen - margin-left: 33.3333% - &.is-offset-one-quarter-widescreen - margin-left: 25% - &.is-offset-one-fifth-widescreen - margin-left: 20% - &.is-offset-two-fifths-widescreen - margin-left: 40% - &.is-offset-three-fifths-widescreen - margin-left: 60% - &.is-offset-four-fifths-widescreen - margin-left: 80% - @for $i from 1 through 12 - &.is-#{$i}-widescreen - flex: none - width: percentage($i / 12) - &.is-offset-#{$i}-widescreen - margin-left: percentage($i / 12) - +fullhd - &.is-narrow-fullhd - flex: none - &.is-full-fullhd - flex: none - width: 100% - &.is-three-quarters-fullhd - flex: none - width: 75% - &.is-two-thirds-fullhd - flex: none - width: 66.6666% - &.is-half-fullhd - flex: none - width: 50% - &.is-one-third-fullhd - flex: none - width: 33.3333% - &.is-one-quarter-fullhd - flex: none - width: 25% - &.is-one-fifth-fullhd - flex: none - width: 20% - &.is-two-fifths-fullhd - flex: none - width: 40% - &.is-three-fifths-fullhd - flex: none - width: 60% - &.is-four-fifths-fullhd - flex: none - width: 80% - &.is-offset-three-quarters-fullhd - margin-left: 75% - &.is-offset-two-thirds-fullhd - margin-left: 66.6666% - &.is-offset-half-fullhd - margin-left: 50% - &.is-offset-one-third-fullhd - margin-left: 33.3333% - &.is-offset-one-quarter-fullhd - margin-left: 25% - &.is-offset-one-fifth-fullhd - margin-left: 20% - &.is-offset-two-fifths-fullhd - margin-left: 40% - &.is-offset-three-fifths-fullhd - margin-left: 60% - &.is-offset-four-fifths-fullhd - margin-left: 80% - @for $i from 1 through 12 - &.is-#{$i}-fullhd - flex: none - width: percentage($i / 12) - &.is-offset-#{$i}-fullhd - margin-left: percentage($i / 12) - -.columns - margin-left: (-$column-gap) - margin-right: (-$column-gap) - margin-top: (-$column-gap) - &:last-child - margin-bottom: (-$column-gap) - &:not(:last-child) - margin-bottom: calc(1.5rem - #{$column-gap}) - // Modifiers - &.is-centered - justify-content: center - &.is-gapless - margin-left: 0 - margin-right: 0 - margin-top: 0 - & > .column - margin: 0 - padding: 0 !important - &:not(:last-child) - margin-bottom: 1.5rem - &:last-child - margin-bottom: 0 - &.is-mobile - display: flex - &.is-multiline - flex-wrap: wrap - &.is-vcentered - align-items: center - // Responsiveness - +tablet - &:not(.is-desktop) - display: flex - +desktop - // Modifiers - &.is-desktop - display: flex - -@if $variable-columns - .columns.is-variable - --columnGap: 0.75rem - margin-left: calc(-1 * var(--columnGap)) - margin-right: calc(-1 * var(--columnGap)) - .column - padding-left: var(--columnGap) - padding-right: var(--columnGap) - @for $i from 0 through 8 - &.is-#{$i} - --columnGap: #{$i * 0.25rem} - +mobile - &.is-#{$i}-mobile - --columnGap: #{$i * 0.25rem} - +tablet - &.is-#{$i}-tablet - --columnGap: #{$i * 0.25rem} - +tablet-only - &.is-#{$i}-tablet-only - --columnGap: #{$i * 0.25rem} - +touch - &.is-#{$i}-touch - --columnGap: #{$i * 0.25rem} - +desktop - &.is-#{$i}-desktop - --columnGap: #{$i * 0.25rem} - +desktop-only - &.is-#{$i}-desktop-only - --columnGap: #{$i * 0.25rem} - +widescreen - &.is-#{$i}-widescreen - --columnGap: #{$i * 0.25rem} - +widescreen-only - &.is-#{$i}-widescreen-only - --columnGap: #{$i * 0.25rem} - +fullhd - &.is-#{$i}-fullhd - --columnGap: #{$i * 0.25rem} diff --git a/public/css/_sass/grid/tiles.sass b/public/css/_sass/grid/tiles.sass deleted file mode 100644 index 1f6a626..0000000 --- a/public/css/_sass/grid/tiles.sass +++ /dev/null @@ -1,32 +0,0 @@ -.tile - align-items: stretch - display: block - flex-basis: 0 - flex-grow: 1 - flex-shrink: 1 - min-height: min-content - // Modifiers - &.is-ancestor - margin-left: -0.75rem - margin-right: -0.75rem - margin-top: -0.75rem - &:last-child - margin-bottom: -0.75rem - &:not(:last-child) - margin-bottom: 0.75rem - &.is-child - margin: 0 !important - &.is-parent - padding: 0.75rem - &.is-vertical - flex-direction: column - & > .tile.is-child:not(:last-child) - margin-bottom: 1.5rem !important - // Responsiveness - +tablet - &:not(.is-child) - display: flex - @for $i from 1 through 12 - &.is-#{$i} - flex: none - width: ($i / 12) * 100% diff --git a/public/css/_sass/layout/_all.sass b/public/css/_sass/layout/_all.sass deleted file mode 100644 index 143ada3..0000000 --- a/public/css/_sass/layout/_all.sass +++ /dev/null @@ -1,5 +0,0 @@ -@charset "utf-8" - -@import "hero.sass" -@import "section.sass" -@import "footer.sass" diff --git a/public/css/_sass/layout/footer.sass b/public/css/_sass/layout/footer.sass deleted file mode 100644 index 1988153..0000000 --- a/public/css/_sass/layout/footer.sass +++ /dev/null @@ -1,6 +0,0 @@ -$footer-background-color: $white-bis !default -$footer-padding: 3rem 1.5rem 6rem !default - -.footer - background-color: $footer-background-color - padding: $footer-padding diff --git a/public/css/_sass/layout/hero.sass b/public/css/_sass/layout/hero.sass deleted file mode 100644 index d988040..0000000 --- a/public/css/_sass/layout/hero.sass +++ /dev/null @@ -1,156 +0,0 @@ -// Main container - -.hero - align-items: stretch - display: flex - flex-direction: column - justify-content: space-between - .navbar - background: none - .tabs - ul - border-bottom: none - // Colors - @each $name, $pair in $colors - $color: nth($pair, 1) - $color-invert: nth($pair, 2) - &.is-#{$name} - background-color: $color - color: $color-invert - a:not(.button):not(.dropdown-item):not(.tag), - strong - color: inherit - .title - color: $color-invert - .subtitle - color: rgba($color-invert, 0.9) - a:not(.button), - strong - color: $color-invert - .navbar-menu - +touch - background-color: $color - .navbar-item, - .navbar-link - color: rgba($color-invert, 0.7) - a.navbar-item, - .navbar-link - &:hover, - &.is-active - background-color: darken($color, 5%) - color: $color-invert - .tabs - a - color: $color-invert - opacity: 0.9 - &:hover - opacity: 1 - li - &.is-active a - opacity: 1 - &.is-boxed, - &.is-toggle - a - color: $color-invert - &:hover - background-color: rgba($black, 0.1) - li.is-active a - &, - &:hover - background-color: $color-invert - border-color: $color-invert - color: $color - // Modifiers - &.is-bold - $gradient-top-left: darken(saturate(adjust-hue($color, -10deg), 10%), 10%) - $gradient-bottom-right: lighten(saturate(adjust-hue($color, 10deg), 5%), 5%) - background-image: linear-gradient(141deg, $gradient-top-left 0%, $color 71%, $gradient-bottom-right 100%) - +mobile - .navbar-menu - background-image: linear-gradient(141deg, $gradient-top-left 0%, $color 71%, $gradient-bottom-right 100%) - // Responsiveness - // +mobile - // .nav-toggle - // span - // background-color: $color-invert - // &:hover - // background-color: rgba($black, 0.1) - // &.is-active - // span - // background-color: $color-invert - // .nav-menu - // .nav-item - // border-top-color: rgba($color-invert, 0.2) - // Sizes - &.is-small - .hero-body - padding-bottom: 1.5rem - padding-top: 1.5rem - &.is-medium - +tablet - .hero-body - padding-bottom: 9rem - padding-top: 9rem - &.is-large - +tablet - .hero-body - padding-bottom: 18rem - padding-top: 18rem - &.is-halfheight, - &.is-fullheight, - &.is-fullheight-with-navbar - .hero-body - align-items: center - display: flex - & > .container - flex-grow: 1 - flex-shrink: 1 - &.is-halfheight - min-height: 50vh - &.is-fullheight - min-height: 100vh - -// Components - -.hero-video - @extend %overlay - overflow: hidden - video - left: 50% - min-height: 100% - min-width: 100% - position: absolute - top: 50% - transform: translate3d(-50%, -50%, 0) - // Modifiers - &.is-transparent - opacity: 0.3 - // Responsiveness - +mobile - display: none - -.hero-buttons - margin-top: 1.5rem - // Responsiveness - +mobile - .button - display: flex - &:not(:last-child) - margin-bottom: 0.75rem - +tablet - display: flex - justify-content: center - .button:not(:last-child) - margin-right: 1.5rem - -// Containers - -.hero-head, -.hero-foot - flex-grow: 0 - flex-shrink: 0 - -.hero-body - flex-grow: 1 - flex-shrink: 0 - padding: 3rem 1.5rem diff --git a/public/css/_sass/layout/section.sass b/public/css/_sass/layout/section.sass deleted file mode 100644 index 6f2d352..0000000 --- a/public/css/_sass/layout/section.sass +++ /dev/null @@ -1,13 +0,0 @@ -$section-padding: 3rem 1.5rem !default -$section-padding-medium: 9rem 1.5rem !default -$section-padding-large: 18rem 1.5rem !default - -.section - padding: $section-padding - // Responsiveness - +desktop - // Sizes - &.is-medium - padding: $section-padding-medium - &.is-large - padding: $section-padding-large diff --git a/public/css/_sass/utilities/_all.sass b/public/css/_sass/utilities/_all.sass deleted file mode 100644 index bf4ecfe..0000000 --- a/public/css/_sass/utilities/_all.sass +++ /dev/null @@ -1,8 +0,0 @@ -@charset "utf-8" - -@import "initial-variables.sass" -@import "functions.sass" -@import "derived-variables.sass" -@import "animations.sass" -@import "mixins.sass" -@import "controls.sass" diff --git a/public/css/_sass/utilities/animations.sass b/public/css/_sass/utilities/animations.sass deleted file mode 100644 index a14525d..0000000 --- a/public/css/_sass/utilities/animations.sass +++ /dev/null @@ -1,5 +0,0 @@ -@keyframes spinAround - from - transform: rotate(0deg) - to - transform: rotate(359deg) diff --git a/public/css/_sass/utilities/controls.sass b/public/css/_sass/utilities/controls.sass deleted file mode 100644 index 7ca0521..0000000 --- a/public/css/_sass/utilities/controls.sass +++ /dev/null @@ -1,50 +0,0 @@ -$control-radius: $radius !default -$control-radius-small: $radius-small !default - -$control-border-width: 1px !default - -$control-height: 2.25em !default -$control-line-height: 1.5 !default - -$control-padding-vertical: calc(0.375em - #{$control-border-width}) !default -$control-padding-horizontal: calc(0.625em - #{$control-border-width}) !default - -=control - -moz-appearance: none - -webkit-appearance: none - align-items: center - border: $control-border-width solid transparent - border-radius: $control-radius - box-shadow: none - display: inline-flex - font-size: $size-normal - height: $control-height - justify-content: flex-start - line-height: $control-line-height - padding-bottom: $control-padding-vertical - padding-left: $control-padding-horizontal - padding-right: $control-padding-horizontal - padding-top: $control-padding-vertical - position: relative - vertical-align: top - // States - &:focus, - &.is-focused, - &:active, - &.is-active - outline: none - &[disabled], - fieldset[disabled] & - cursor: not-allowed - -%control - +control - -// The controls sizes use mixins so they can be used at different breakpoints -=control-small - border-radius: $control-radius-small - font-size: $size-small -=control-medium - font-size: $size-medium -=control-large - font-size: $size-large diff --git a/public/css/_sass/utilities/derived-variables.sass b/public/css/_sass/utilities/derived-variables.sass deleted file mode 100644 index c464814..0000000 --- a/public/css/_sass/utilities/derived-variables.sass +++ /dev/null @@ -1,85 +0,0 @@ -$primary: $turquoise !default - -$info: $cyan !default -$success: $green !default -$warning: $yellow !default -$danger: $red !default - -$light: $white-ter !default -$dark: $grey-darker !default - -// Invert colors - -$orange-invert: findColorInvert($orange) !default -$yellow-invert: findColorInvert($yellow) !default -$green-invert: findColorInvert($green) !default -$turquoise-invert: findColorInvert($turquoise) !default -$cyan-invert: findColorInvert($cyan) !default -$blue-invert: findColorInvert($blue) !default -$purple-invert: findColorInvert($purple) !default -$red-invert: findColorInvert($red) !default - -$primary-invert: $turquoise-invert !default -$info-invert: $cyan-invert !default -$success-invert: $green-invert !default -$warning-invert: $yellow-invert !default -$danger-invert: $red-invert !default -$light-invert: $dark !default -$dark-invert: $light !default - -// General colors - -$background: $white-ter !default - -$border: $grey-lighter !default -$border-hover: $grey-light !default - -// Text colors - -$text: $grey-dark !default -$text-invert: findColorInvert($text) !default -$text-light: $grey !default -$text-strong: $grey-darker !default - -// Code colors - -$code: $red !default -$code-background: $background !default - -$pre: $text !default -$pre-background: $background !default - -// Link colors - -$link: $blue !default -$link-invert: $blue-invert !default -$link-visited: $purple !default - -$link-hover: $grey-darker !default -$link-hover-border: $grey-light !default - -$link-focus: $grey-darker !default -$link-focus-border: $blue !default - -$link-active: $grey-darker !default -$link-active-border: $grey-dark !default - -// Typography - -$family-primary: $family-sans-serif !default -$family-secondary: $family-sans-serif !default -$family-code: $family-monospace !default - -$size-small: $size-7 !default -$size-normal: $size-6 !default -$size-medium: $size-5 !default -$size-large: $size-4 !default - -// Lists and maps -$custom-colors: null !default -$custom-shades: null !default - -$colors: mergeColorMaps(("white": ($white, $black), "black": ($black, $white), "light": ($light, $light-invert), "dark": ($dark, $dark-invert), "primary": ($primary, $primary-invert), "link": ($link, $link-invert), "info": ($info, $info-invert), "success": ($success, $success-invert), "warning": ($warning, $warning-invert), "danger": ($danger, $danger-invert)), $custom-colors) !default -$shades: mergeColorMaps(("black-bis": $black-bis, "black-ter": $black-ter, "grey-darker": $grey-darker, "grey-dark": $grey-dark, "grey": $grey, "grey-light": $grey-light, "grey-lighter": $grey-lighter, "white-ter": $white-ter, "white-bis": $white-bis), $custom-shades) !default - -$sizes: $size-1 $size-2 $size-3 $size-4 $size-5 $size-6 $size-7 !default diff --git a/public/css/_sass/utilities/functions.sass b/public/css/_sass/utilities/functions.sass deleted file mode 100644 index acd3e83..0000000 --- a/public/css/_sass/utilities/functions.sass +++ /dev/null @@ -1,62 +0,0 @@ -@function mergeColorMaps($bulma-colors, $custom-colors) - // we return at least bulma hardcoded colors - $merged-colors: $bulma-colors - - // we want a map as input - @if type-of($custom-colors) == 'map' - @each $name, $components in $custom-colors - // color name should be a string and colors pair a list with at least one element - @if type-of($name) == 'string' and (type-of($components) == 'list' or type-of($components) == 'color') and length($components) >= 1 - $color-base: null - - // the param can either be a single color - // or a list of 2 colors - @if type-of($components) == 'color' - $color-base: $components - @else if type-of($components) == 'list' - $color-base: nth($components, 1) - - $color-invert: null - // is an inverted color provided in the list - @if length($components) > 1 - $color-invert: nth($components, 2) - - // we only want a color as base color - @if type-of($color-base) == 'color' - // if inverted color is not provided or is not a color we compute it - @if type-of($color-invert) != 'color' - $color-invert: findColorInvert($color-base) - - // we merge this colors elements as map with bulma colors (we can override them this way, no multiple definition for the same name) - $merged-colors: map_merge($merged-colors, ($name: ($color-base, $color-invert))) - - @return $merged-colors - -@function powerNumber($number, $exp) - $value: 1 - @if $exp > 0 - @for $i from 1 through $exp - $value: $value * $number - @else if $exp < 0 - @for $i from 1 through -$exp - $value: $value / $number - @return $value - -@function colorLuminance($color) - $color-rgb: ('red': red($color),'green': green($color),'blue': blue($color)) - @each $name, $value in $color-rgb - $adjusted: 0 - $value: $value / 255 - @if $value < 0.03928 - $value: $value / 12.92 - @else - $value: ($value + .055) / 1.055 - $value: powerNumber($value, 2) - $color-rgb: map-merge($color-rgb, ($name: $value)) - @return (map-get($color-rgb, 'red') * .2126) + (map-get($color-rgb, 'green') * .7152) + (map-get($color-rgb, 'blue') * .0722) - -@function findColorInvert($color) - @if (colorLuminance($color) > 0.55) - @return rgba(#000, 0.7) - @else - @return #fff diff --git a/public/css/_sass/utilities/initial-variables.sass b/public/css/_sass/utilities/initial-variables.sass deleted file mode 100644 index 421bd3d..0000000 --- a/public/css/_sass/utilities/initial-variables.sass +++ /dev/null @@ -1,72 +0,0 @@ -// Colors - -$black: hsl(0, 0%, 4%) !default -$black-bis: hsl(0, 0%, 7%) !default -$black-ter: hsl(0, 0%, 14%) !default - -$grey-darker: hsl(0, 0%, 21%) !default -$grey-dark: hsl(0, 0%, 29%) !default -$grey: hsl(0, 0%, 48%) !default -$grey-light: hsl(0, 0%, 71%) !default -$grey-lighter: hsl(0, 0%, 86%) !default - -$white-ter: hsl(0, 0%, 96%) !default -$white-bis: hsl(0, 0%, 98%) !default -$white: hsl(0, 0%, 100%) !default - -$orange: hsl(14, 100%, 53%) !default -$yellow: hsl(48, 100%, 67%) !default -$green: hsl(141, 71%, 48%) !default -$turquoise: hsl(171, 100%, 41%) !default -$cyan: hsl(204, 86%, 53%) !default -$blue: hsl(217, 71%, 53%) !default -$purple: hsl(271, 100%, 71%) !default -$red: hsl(348, 100%, 61%) !default - -// Typography - -$family-sans-serif: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif !default -$family-monospace: monospace !default -$render-mode: optimizeLegibility !default - -$size-1: 3rem !default -$size-2: 2.5rem !default -$size-3: 2rem !default -$size-4: 1.5rem !default -$size-5: 1.25rem !default -$size-6: 1rem !default -$size-7: 0.75rem !default - -$weight-light: 300 !default -$weight-normal: 400 !default -$weight-medium: 500 !default -$weight-semibold: 600 !default -$weight-bold: 700 !default - -// Responsiveness - -// The container horizontal gap, which acts as the offset for breakpoints -$gap: 64px !default -// 960, 1152, and 1344 have been chosen because they are divisible by both 12 and 16 -$tablet: 769px !default -// 960px container + 4rem -$desktop: 960px + (2 * $gap) !default -// 1152px container + 4rem -$widescreen: 1152px + (2 * $gap) !default -$widescreen-enabled: true !default -// 1344px container + 4rem -$fullhd: 1344px + (2 * $gap) !default -$fullhd-enabled: true !default - -// Miscellaneous - -$easing: ease-out !default -$radius-small: 2px !default -$radius: 4px !default -$radius-large: 6px !default -$radius-rounded: 290486px !default -$speed: 86ms !default - -// Flags - -$variable-columns: true !default diff --git a/public/css/_sass/utilities/mixins.sass b/public/css/_sass/utilities/mixins.sass deleted file mode 100644 index 5623e3c..0000000 --- a/public/css/_sass/utilities/mixins.sass +++ /dev/null @@ -1,261 +0,0 @@ -@import "initial-variables" - -=clearfix - &::after - clear: both - content: " " - display: table - -=center($width, $height: 0) - position: absolute - @if $height != 0 - left: calc(50% - (#{$width} / 2)) - top: calc(50% - (#{$height} / 2)) - @else - left: calc(50% - (#{$width} / 2)) - top: calc(50% - (#{$width} / 2)) - -=fa($size, $dimensions) - display: inline-block - font-size: $size - height: $dimensions - line-height: $dimensions - text-align: center - vertical-align: top - width: $dimensions - -=hamburger($dimensions) - cursor: pointer - display: block - height: $dimensions - position: relative - width: $dimensions - span - background-color: currentColor - display: block - height: 1px - left: calc(50% - 8px) - position: absolute - transform-origin: center - transition-duration: $speed - transition-property: background-color, opacity, transform - transition-timing-function: $easing - width: 16px - &:nth-child(1) - top: calc(50% - 6px) - &:nth-child(2) - top: calc(50% - 1px) - &:nth-child(3) - top: calc(50% + 4px) - &:hover - background-color: rgba(black, 0.05) - // Modifers - &.is-active - span - &:nth-child(1) - transform: translateY(5px) rotate(45deg) - &:nth-child(2) - opacity: 0 - &:nth-child(3) - transform: translateY(-5px) rotate(-45deg) - -=overflow-touch - -webkit-overflow-scrolling: touch - -=placeholder - $placeholders: ':-moz' ':-webkit-input' '-moz' '-ms-input' - @each $placeholder in $placeholders - &:#{$placeholder}-placeholder - @content - -// Responsiveness - -=from($device) - @media screen and (min-width: $device) - @content - -=until($device) - @media screen and (max-width: $device - 1px) - @content - -=mobile - @media screen and (max-width: $tablet - 1px) - @content - -=tablet - @media screen and (min-width: $tablet), print - @content - -=tablet-only - @media screen and (min-width: $tablet) and (max-width: $desktop - 1px) - @content - -=touch - @media screen and (max-width: $desktop - 1px) - @content - -=desktop - @media screen and (min-width: $desktop) - @content - -=desktop-only - @if $widescreen-enabled - @media screen and (min-width: $desktop) and (max-width: $widescreen - 1px) - @content - -=until-widescreen - @if $widescreen-enabled - @media screen and (max-width: $widescreen - 1px) - @content - -=widescreen - @if $widescreen-enabled - @media screen and (min-width: $widescreen) - @content - -=widescreen-only - @if $widescreen-enabled and $fullhd-enabled - @media screen and (min-width: $widescreen) and (max-width: $fullhd - 1px) - @content - -=until-fullhd - @if $fullhd-enabled - @media screen and (max-width: $fullhd - 1px) - @content - -=fullhd - @if $fullhd-enabled - @media screen and (min-width: $fullhd) - @content - -// Placeholders - -=unselectable - -webkit-touch-callout: none - -webkit-user-select: none - -moz-user-select: none - -ms-user-select: none - user-select: none - -%unselectable - +unselectable - -=arrow($color: transparent) - border: 3px solid $color - border-radius: 2px - border-right: 0 - border-top: 0 - content: " " - display: block - height: 0.625em - margin-top: -0.4375em - pointer-events: none - position: absolute - top: 50% - transform: rotate(-45deg) - transform-origin: center - width: 0.625em - -%arrow - +arrow - -=block - &:not(:last-child) - margin-bottom: 1.5rem - -%block - +block - -=delete - @extend %unselectable - -moz-appearance: none - -webkit-appearance: none - background-color: rgba($black, 0.2) - border: none - border-radius: $radius-rounded - cursor: pointer - pointer-events: auto - display: inline-block - flex-grow: 0 - flex-shrink: 0 - font-size: 0 - height: 20px - max-height: 20px - max-width: 20px - min-height: 20px - min-width: 20px - outline: none - position: relative - vertical-align: top - width: 20px - &::before, - &::after - background-color: $white - content: "" - display: block - left: 50% - position: absolute - top: 50% - transform: translateX(-50%) translateY(-50%) rotate(45deg) - transform-origin: center center - &::before - height: 2px - width: 50% - &::after - height: 50% - width: 2px - &:hover, - &:focus - background-color: rgba($black, 0.3) - &:active - background-color: rgba($black, 0.4) - // Sizes - &.is-small - height: 16px - max-height: 16px - max-width: 16px - min-height: 16px - min-width: 16px - width: 16px - &.is-medium - height: 24px - max-height: 24px - max-width: 24px - min-height: 24px - min-width: 24px - width: 24px - &.is-large - height: 32px - max-height: 32px - max-width: 32px - min-height: 32px - min-width: 32px - width: 32px - -%delete - +delete - -=loader - animation: spinAround 500ms infinite linear - border: 2px solid $grey-lighter - border-radius: $radius-rounded - border-right-color: transparent - border-top-color: transparent - content: "" - display: block - height: 1em - position: relative - width: 1em - -%loader - +loader - -=overlay($offset: 0) - bottom: $offset - left: $offset - position: absolute - right: $offset - top: $offset - -%overlay - +overlay diff --git a/public/css/animate.css b/public/css/animate.css deleted file mode 100644 index dac48f1..0000000 --- a/public/css/animate.css +++ /dev/null @@ -1,3623 +0,0 @@ -@charset "UTF-8"; - -/*! - * animate.css -http://daneden.me/animate - * Version - 3.7.0 - * Licensed under the MIT license - http://opensource.org/licenses/MIT - * - * Copyright (c) 2018 Daniel Eden - */ - -@-webkit-keyframes bounce { - from, - 20%, - 53%, - 80%, - to { - -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); - animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - } - - 40%, - 43% { - -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); - animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); - -webkit-transform: translate3d(0, -30px, 0); - transform: translate3d(0, -30px, 0); - } - - 70% { - -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); - animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); - -webkit-transform: translate3d(0, -15px, 0); - transform: translate3d(0, -15px, 0); - } - - 90% { - -webkit-transform: translate3d(0, -4px, 0); - transform: translate3d(0, -4px, 0); - } -} - -@keyframes bounce { - from, - 20%, - 53%, - 80%, - to { - -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); - animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - } - - 40%, - 43% { - -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); - animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); - -webkit-transform: translate3d(0, -30px, 0); - transform: translate3d(0, -30px, 0); - } - - 70% { - -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); - animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); - -webkit-transform: translate3d(0, -15px, 0); - transform: translate3d(0, -15px, 0); - } - - 90% { - -webkit-transform: translate3d(0, -4px, 0); - transform: translate3d(0, -4px, 0); - } -} - -.bounce { - -webkit-animation-name: bounce; - animation-name: bounce; - -webkit-transform-origin: center bottom; - transform-origin: center bottom; -} - -@-webkit-keyframes flash { - from, - 50%, - to { - opacity: 1; - } - - 25%, - 75% { - opacity: 0; - } -} - -@keyframes flash { - from, - 50%, - to { - opacity: 1; - } - - 25%, - 75% { - opacity: 0; - } -} - -.flash { - -webkit-animation-name: flash; - animation-name: flash; -} - -/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ - -@-webkit-keyframes pulse { - from { - -webkit-transform: scale3d(1, 1, 1); - transform: scale3d(1, 1, 1); - } - - 50% { - -webkit-transform: scale3d(1.05, 1.05, 1.05); - transform: scale3d(1.05, 1.05, 1.05); - } - - to { - -webkit-transform: scale3d(1, 1, 1); - transform: scale3d(1, 1, 1); - } -} - -@keyframes pulse { - from { - -webkit-transform: scale3d(1, 1, 1); - transform: scale3d(1, 1, 1); - } - - 50% { - -webkit-transform: scale3d(1.05, 1.05, 1.05); - transform: scale3d(1.05, 1.05, 1.05); - } - - to { - -webkit-transform: scale3d(1, 1, 1); - transform: scale3d(1, 1, 1); - } -} - -.pulse { - -webkit-animation-name: pulse; - animation-name: pulse; -} - -@-webkit-keyframes rubberBand { - from { - -webkit-transform: scale3d(1, 1, 1); - transform: scale3d(1, 1, 1); - } - - 30% { - -webkit-transform: scale3d(1.25, 0.75, 1); - transform: scale3d(1.25, 0.75, 1); - } - - 40% { - -webkit-transform: scale3d(0.75, 1.25, 1); - transform: scale3d(0.75, 1.25, 1); - } - - 50% { - -webkit-transform: scale3d(1.15, 0.85, 1); - transform: scale3d(1.15, 0.85, 1); - } - - 65% { - -webkit-transform: scale3d(0.95, 1.05, 1); - transform: scale3d(0.95, 1.05, 1); - } - - 75% { - -webkit-transform: scale3d(1.05, 0.95, 1); - transform: scale3d(1.05, 0.95, 1); - } - - to { - -webkit-transform: scale3d(1, 1, 1); - transform: scale3d(1, 1, 1); - } -} - -@keyframes rubberBand { - from { - -webkit-transform: scale3d(1, 1, 1); - transform: scale3d(1, 1, 1); - } - - 30% { - -webkit-transform: scale3d(1.25, 0.75, 1); - transform: scale3d(1.25, 0.75, 1); - } - - 40% { - -webkit-transform: scale3d(0.75, 1.25, 1); - transform: scale3d(0.75, 1.25, 1); - } - - 50% { - -webkit-transform: scale3d(1.15, 0.85, 1); - transform: scale3d(1.15, 0.85, 1); - } - - 65% { - -webkit-transform: scale3d(0.95, 1.05, 1); - transform: scale3d(0.95, 1.05, 1); - } - - 75% { - -webkit-transform: scale3d(1.05, 0.95, 1); - transform: scale3d(1.05, 0.95, 1); - } - - to { - -webkit-transform: scale3d(1, 1, 1); - transform: scale3d(1, 1, 1); - } -} - -.rubberBand { - -webkit-animation-name: rubberBand; - animation-name: rubberBand; -} - -@-webkit-keyframes shake { - from, - to { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - } - - 10%, - 30%, - 50%, - 70%, - 90% { - -webkit-transform: translate3d(-10px, 0, 0); - transform: translate3d(-10px, 0, 0); - } - - 20%, - 40%, - 60%, - 80% { - -webkit-transform: translate3d(10px, 0, 0); - transform: translate3d(10px, 0, 0); - } -} - -@keyframes shake { - from, - to { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - } - - 10%, - 30%, - 50%, - 70%, - 90% { - -webkit-transform: translate3d(-10px, 0, 0); - transform: translate3d(-10px, 0, 0); - } - - 20%, - 40%, - 60%, - 80% { - -webkit-transform: translate3d(10px, 0, 0); - transform: translate3d(10px, 0, 0); - } -} - -.shake { - -webkit-animation-name: shake; - animation-name: shake; -} - -@-webkit-keyframes headShake { - 0% { - -webkit-transform: translateX(0); - transform: translateX(0); - } - - 6.5% { - -webkit-transform: translateX(-6px) rotateY(-9deg); - transform: translateX(-6px) rotateY(-9deg); - } - - 18.5% { - -webkit-transform: translateX(5px) rotateY(7deg); - transform: translateX(5px) rotateY(7deg); - } - - 31.5% { - -webkit-transform: translateX(-3px) rotateY(-5deg); - transform: translateX(-3px) rotateY(-5deg); - } - - 43.5% { - -webkit-transform: translateX(2px) rotateY(3deg); - transform: translateX(2px) rotateY(3deg); - } - - 50% { - -webkit-transform: translateX(0); - transform: translateX(0); - } -} - -@keyframes headShake { - 0% { - -webkit-transform: translateX(0); - transform: translateX(0); - } - - 6.5% { - -webkit-transform: translateX(-6px) rotateY(-9deg); - transform: translateX(-6px) rotateY(-9deg); - } - - 18.5% { - -webkit-transform: translateX(5px) rotateY(7deg); - transform: translateX(5px) rotateY(7deg); - } - - 31.5% { - -webkit-transform: translateX(-3px) rotateY(-5deg); - transform: translateX(-3px) rotateY(-5deg); - } - - 43.5% { - -webkit-transform: translateX(2px) rotateY(3deg); - transform: translateX(2px) rotateY(3deg); - } - - 50% { - -webkit-transform: translateX(0); - transform: translateX(0); - } -} - -.headShake { - -webkit-animation-timing-function: ease-in-out; - animation-timing-function: ease-in-out; - -webkit-animation-name: headShake; - animation-name: headShake; -} - -@-webkit-keyframes swing { - 20% { - -webkit-transform: rotate3d(0, 0, 1, 15deg); - transform: rotate3d(0, 0, 1, 15deg); - } - - 40% { - -webkit-transform: rotate3d(0, 0, 1, -10deg); - transform: rotate3d(0, 0, 1, -10deg); - } - - 60% { - -webkit-transform: rotate3d(0, 0, 1, 5deg); - transform: rotate3d(0, 0, 1, 5deg); - } - - 80% { - -webkit-transform: rotate3d(0, 0, 1, -5deg); - transform: rotate3d(0, 0, 1, -5deg); - } - - to { - -webkit-transform: rotate3d(0, 0, 1, 0deg); - transform: rotate3d(0, 0, 1, 0deg); - } -} - -@keyframes swing { - 20% { - -webkit-transform: rotate3d(0, 0, 1, 15deg); - transform: rotate3d(0, 0, 1, 15deg); - } - - 40% { - -webkit-transform: rotate3d(0, 0, 1, -10deg); - transform: rotate3d(0, 0, 1, -10deg); - } - - 60% { - -webkit-transform: rotate3d(0, 0, 1, 5deg); - transform: rotate3d(0, 0, 1, 5deg); - } - - 80% { - -webkit-transform: rotate3d(0, 0, 1, -5deg); - transform: rotate3d(0, 0, 1, -5deg); - } - - to { - -webkit-transform: rotate3d(0, 0, 1, 0deg); - transform: rotate3d(0, 0, 1, 0deg); - } -} - -.swing { - -webkit-transform-origin: top center; - transform-origin: top center; - -webkit-animation-name: swing; - animation-name: swing; -} - -@-webkit-keyframes tada { - from { - -webkit-transform: scale3d(1, 1, 1); - transform: scale3d(1, 1, 1); - } - - 10%, - 20% { - -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); - transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); - } - - 30%, - 50%, - 70%, - 90% { - -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); - transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); - } - - 40%, - 60%, - 80% { - -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); - transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); - } - - to { - -webkit-transform: scale3d(1, 1, 1); - transform: scale3d(1, 1, 1); - } -} - -@keyframes tada { - from { - -webkit-transform: scale3d(1, 1, 1); - transform: scale3d(1, 1, 1); - } - - 10%, - 20% { - -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); - transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); - } - - 30%, - 50%, - 70%, - 90% { - -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); - transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); - } - - 40%, - 60%, - 80% { - -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); - transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); - } - - to { - -webkit-transform: scale3d(1, 1, 1); - transform: scale3d(1, 1, 1); - } -} - -.tada { - -webkit-animation-name: tada; - animation-name: tada; -} - -/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ - -@-webkit-keyframes wobble { - from { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - } - - 15% { - -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); - transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); - } - - 30% { - -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); - transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); - } - - 45% { - -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); - transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); - } - - 60% { - -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); - transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); - } - - 75% { - -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); - transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); - } - - to { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - } -} - -@keyframes wobble { - from { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - } - - 15% { - -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); - transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); - } - - 30% { - -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); - transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); - } - - 45% { - -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); - transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); - } - - 60% { - -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); - transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); - } - - 75% { - -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); - transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); - } - - to { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - } -} - -.wobble { - -webkit-animation-name: wobble; - animation-name: wobble; -} - -@-webkit-keyframes jello { - from, - 11.1%, - to { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - } - - 22.2% { - -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); - transform: skewX(-12.5deg) skewY(-12.5deg); - } - - 33.3% { - -webkit-transform: skewX(6.25deg) skewY(6.25deg); - transform: skewX(6.25deg) skewY(6.25deg); - } - - 44.4% { - -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); - transform: skewX(-3.125deg) skewY(-3.125deg); - } - - 55.5% { - -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); - transform: skewX(1.5625deg) skewY(1.5625deg); - } - - 66.6% { - -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg); - transform: skewX(-0.78125deg) skewY(-0.78125deg); - } - - 77.7% { - -webkit-transform: skewX(0.390625deg) skewY(0.390625deg); - transform: skewX(0.390625deg) skewY(0.390625deg); - } - - 88.8% { - -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg); - transform: skewX(-0.1953125deg) skewY(-0.1953125deg); - } -} - -@keyframes jello { - from, - 11.1%, - to { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - } - - 22.2% { - -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); - transform: skewX(-12.5deg) skewY(-12.5deg); - } - - 33.3% { - -webkit-transform: skewX(6.25deg) skewY(6.25deg); - transform: skewX(6.25deg) skewY(6.25deg); - } - - 44.4% { - -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); - transform: skewX(-3.125deg) skewY(-3.125deg); - } - - 55.5% { - -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); - transform: skewX(1.5625deg) skewY(1.5625deg); - } - - 66.6% { - -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg); - transform: skewX(-0.78125deg) skewY(-0.78125deg); - } - - 77.7% { - -webkit-transform: skewX(0.390625deg) skewY(0.390625deg); - transform: skewX(0.390625deg) skewY(0.390625deg); - } - - 88.8% { - -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg); - transform: skewX(-0.1953125deg) skewY(-0.1953125deg); - } -} - -.jello { - -webkit-animation-name: jello; - animation-name: jello; - -webkit-transform-origin: center; - transform-origin: center; -} - -@-webkit-keyframes heartBeat { - 0% { - -webkit-transform: scale(1); - transform: scale(1); - } - - 14% { - -webkit-transform: scale(1.3); - transform: scale(1.3); - } - - 28% { - -webkit-transform: scale(1); - transform: scale(1); - } - - 42% { - -webkit-transform: scale(1.3); - transform: scale(1.3); - } - - 70% { - -webkit-transform: scale(1); - transform: scale(1); - } -} - -@keyframes heartBeat { - 0% { - -webkit-transform: scale(1); - transform: scale(1); - } - - 14% { - -webkit-transform: scale(1.3); - transform: scale(1.3); - } - - 28% { - -webkit-transform: scale(1); - transform: scale(1); - } - - 42% { - -webkit-transform: scale(1.3); - transform: scale(1.3); - } - - 70% { - -webkit-transform: scale(1); - transform: scale(1); - } -} - -.heartBeat { - -webkit-animation-name: heartBeat; - animation-name: heartBeat; - -webkit-animation-duration: 1.3s; - animation-duration: 1.3s; - -webkit-animation-timing-function: ease-in-out; - animation-timing-function: ease-in-out; -} - -@-webkit-keyframes bounceIn { - from, - 20%, - 40%, - 60%, - 80%, - to { - -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); - animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); - } - - 0% { - opacity: 0; - -webkit-transform: scale3d(0.3, 0.3, 0.3); - transform: scale3d(0.3, 0.3, 0.3); - } - - 20% { - -webkit-transform: scale3d(1.1, 1.1, 1.1); - transform: scale3d(1.1, 1.1, 1.1); - } - - 40% { - -webkit-transform: scale3d(0.9, 0.9, 0.9); - transform: scale3d(0.9, 0.9, 0.9); - } - - 60% { - opacity: 1; - -webkit-transform: scale3d(1.03, 1.03, 1.03); - transform: scale3d(1.03, 1.03, 1.03); - } - - 80% { - -webkit-transform: scale3d(0.97, 0.97, 0.97); - transform: scale3d(0.97, 0.97, 0.97); - } - - to { - opacity: 1; - -webkit-transform: scale3d(1, 1, 1); - transform: scale3d(1, 1, 1); - } -} - -@keyframes bounceIn { - from, - 20%, - 40%, - 60%, - 80%, - to { - -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); - animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); - } - - 0% { - opacity: 0; - -webkit-transform: scale3d(0.3, 0.3, 0.3); - transform: scale3d(0.3, 0.3, 0.3); - } - - 20% { - -webkit-transform: scale3d(1.1, 1.1, 1.1); - transform: scale3d(1.1, 1.1, 1.1); - } - - 40% { - -webkit-transform: scale3d(0.9, 0.9, 0.9); - transform: scale3d(0.9, 0.9, 0.9); - } - - 60% { - opacity: 1; - -webkit-transform: scale3d(1.03, 1.03, 1.03); - transform: scale3d(1.03, 1.03, 1.03); - } - - 80% { - -webkit-transform: scale3d(0.97, 0.97, 0.97); - transform: scale3d(0.97, 0.97, 0.97); - } - - to { - opacity: 1; - -webkit-transform: scale3d(1, 1, 1); - transform: scale3d(1, 1, 1); - } -} - -.bounceIn { - -webkit-animation-duration: 0.75s; - animation-duration: 0.75s; - -webkit-animation-name: bounceIn; - animation-name: bounceIn; -} - -@-webkit-keyframes bounceInDown { - from, - 60%, - 75%, - 90%, - to { - -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); - animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); - } - - 0% { - opacity: 0; - -webkit-transform: translate3d(0, -3000px, 0); - transform: translate3d(0, -3000px, 0); - } - - 60% { - opacity: 1; - -webkit-transform: translate3d(0, 25px, 0); - transform: translate3d(0, 25px, 0); - } - - 75% { - -webkit-transform: translate3d(0, -10px, 0); - transform: translate3d(0, -10px, 0); - } - - 90% { - -webkit-transform: translate3d(0, 5px, 0); - transform: translate3d(0, 5px, 0); - } - - to { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - } -} - -@keyframes bounceInDown { - from, - 60%, - 75%, - 90%, - to { - -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); - animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); - } - - 0% { - opacity: 0; - -webkit-transform: translate3d(0, -3000px, 0); - transform: translate3d(0, -3000px, 0); - } - - 60% { - opacity: 1; - -webkit-transform: translate3d(0, 25px, 0); - transform: translate3d(0, 25px, 0); - } - - 75% { - -webkit-transform: translate3d(0, -10px, 0); - transform: translate3d(0, -10px, 0); - } - - 90% { - -webkit-transform: translate3d(0, 5px, 0); - transform: translate3d(0, 5px, 0); - } - - to { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - } -} - -.bounceInDown { - -webkit-animation-name: bounceInDown; - animation-name: bounceInDown; -} - -@-webkit-keyframes bounceInLeft { - from, - 60%, - 75%, - 90%, - to { - -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); - animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); - } - - 0% { - opacity: 0; - -webkit-transform: translate3d(-3000px, 0, 0); - transform: translate3d(-3000px, 0, 0); - } - - 60% { - opacity: 1; - -webkit-transform: translate3d(25px, 0, 0); - transform: translate3d(25px, 0, 0); - } - - 75% { - -webkit-transform: translate3d(-10px, 0, 0); - transform: translate3d(-10px, 0, 0); - } - - 90% { - -webkit-transform: translate3d(5px, 0, 0); - transform: translate3d(5px, 0, 0); - } - - to { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - } -} - -@keyframes bounceInLeft { - from, - 60%, - 75%, - 90%, - to { - -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); - animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); - } - - 0% { - opacity: 0; - -webkit-transform: translate3d(-3000px, 0, 0); - transform: translate3d(-3000px, 0, 0); - } - - 60% { - opacity: 1; - -webkit-transform: translate3d(25px, 0, 0); - transform: translate3d(25px, 0, 0); - } - - 75% { - -webkit-transform: translate3d(-10px, 0, 0); - transform: translate3d(-10px, 0, 0); - } - - 90% { - -webkit-transform: translate3d(5px, 0, 0); - transform: translate3d(5px, 0, 0); - } - - to { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - } -} - -.bounceInLeft { - -webkit-animation-name: bounceInLeft; - animation-name: bounceInLeft; -} - -@-webkit-keyframes bounceInRight { - from, - 60%, - 75%, - 90%, - to { - -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); - animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); - } - - from { - opacity: 0; - -webkit-transform: translate3d(3000px, 0, 0); - transform: translate3d(3000px, 0, 0); - } - - 60% { - opacity: 1; - -webkit-transform: translate3d(-25px, 0, 0); - transform: translate3d(-25px, 0, 0); - } - - 75% { - -webkit-transform: translate3d(10px, 0, 0); - transform: translate3d(10px, 0, 0); - } - - 90% { - -webkit-transform: translate3d(-5px, 0, 0); - transform: translate3d(-5px, 0, 0); - } - - to { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - } -} - -@keyframes bounceInRight { - from, - 60%, - 75%, - 90%, - to { - -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); - animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); - } - - from { - opacity: 0; - -webkit-transform: translate3d(3000px, 0, 0); - transform: translate3d(3000px, 0, 0); - } - - 60% { - opacity: 1; - -webkit-transform: translate3d(-25px, 0, 0); - transform: translate3d(-25px, 0, 0); - } - - 75% { - -webkit-transform: translate3d(10px, 0, 0); - transform: translate3d(10px, 0, 0); - } - - 90% { - -webkit-transform: translate3d(-5px, 0, 0); - transform: translate3d(-5px, 0, 0); - } - - to { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - } -} - -.bounceInRight { - -webkit-animation-name: bounceInRight; - animation-name: bounceInRight; -} - -@-webkit-keyframes bounceInUp { - from, - 60%, - 75%, - 90%, - to { - -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); - animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); - } - - from { - opacity: 0; - -webkit-transform: translate3d(0, 3000px, 0); - transform: translate3d(0, 3000px, 0); - } - - 60% { - opacity: 1; - -webkit-transform: translate3d(0, -20px, 0); - transform: translate3d(0, -20px, 0); - } - - 75% { - -webkit-transform: translate3d(0, 10px, 0); - transform: translate3d(0, 10px, 0); - } - - 90% { - -webkit-transform: translate3d(0, -5px, 0); - transform: translate3d(0, -5px, 0); - } - - to { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - } -} - -@keyframes bounceInUp { - from, - 60%, - 75%, - 90%, - to { - -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); - animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); - } - - from { - opacity: 0; - -webkit-transform: translate3d(0, 3000px, 0); - transform: translate3d(0, 3000px, 0); - } - - 60% { - opacity: 1; - -webkit-transform: translate3d(0, -20px, 0); - transform: translate3d(0, -20px, 0); - } - - 75% { - -webkit-transform: translate3d(0, 10px, 0); - transform: translate3d(0, 10px, 0); - } - - 90% { - -webkit-transform: translate3d(0, -5px, 0); - transform: translate3d(0, -5px, 0); - } - - to { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - } -} - -.bounceInUp { - -webkit-animation-name: bounceInUp; - animation-name: bounceInUp; -} - -@-webkit-keyframes bounceOut { - 20% { - -webkit-transform: scale3d(0.9, 0.9, 0.9); - transform: scale3d(0.9, 0.9, 0.9); - } - - 50%, - 55% { - opacity: 1; - -webkit-transform: scale3d(1.1, 1.1, 1.1); - transform: scale3d(1.1, 1.1, 1.1); - } - - to { - opacity: 0; - -webkit-transform: scale3d(0.3, 0.3, 0.3); - transform: scale3d(0.3, 0.3, 0.3); - } -} - -@keyframes bounceOut { - 20% { - -webkit-transform: scale3d(0.9, 0.9, 0.9); - transform: scale3d(0.9, 0.9, 0.9); - } - - 50%, - 55% { - opacity: 1; - -webkit-transform: scale3d(1.1, 1.1, 1.1); - transform: scale3d(1.1, 1.1, 1.1); - } - - to { - opacity: 0; - -webkit-transform: scale3d(0.3, 0.3, 0.3); - transform: scale3d(0.3, 0.3, 0.3); - } -} - -.bounceOut { - -webkit-animation-duration: 0.75s; - animation-duration: 0.75s; - -webkit-animation-name: bounceOut; - animation-name: bounceOut; -} - -@-webkit-keyframes bounceOutDown { - 20% { - -webkit-transform: translate3d(0, 10px, 0); - transform: translate3d(0, 10px, 0); - } - - 40%, - 45% { - opacity: 1; - -webkit-transform: translate3d(0, -20px, 0); - transform: translate3d(0, -20px, 0); - } - - to { - opacity: 0; - -webkit-transform: translate3d(0, 2000px, 0); - transform: translate3d(0, 2000px, 0); - } -} - -@keyframes bounceOutDown { - 20% { - -webkit-transform: translate3d(0, 10px, 0); - transform: translate3d(0, 10px, 0); - } - - 40%, - 45% { - opacity: 1; - -webkit-transform: translate3d(0, -20px, 0); - transform: translate3d(0, -20px, 0); - } - - to { - opacity: 0; - -webkit-transform: translate3d(0, 2000px, 0); - transform: translate3d(0, 2000px, 0); - } -} - -.bounceOutDown { - -webkit-animation-name: bounceOutDown; - animation-name: bounceOutDown; -} - -@-webkit-keyframes bounceOutLeft { - 20% { - opacity: 1; - -webkit-transform: translate3d(20px, 0, 0); - transform: translate3d(20px, 0, 0); - } - - to { - opacity: 0; - -webkit-transform: translate3d(-2000px, 0, 0); - transform: translate3d(-2000px, 0, 0); - } -} - -@keyframes bounceOutLeft { - 20% { - opacity: 1; - -webkit-transform: translate3d(20px, 0, 0); - transform: translate3d(20px, 0, 0); - } - - to { - opacity: 0; - -webkit-transform: translate3d(-2000px, 0, 0); - transform: translate3d(-2000px, 0, 0); - } -} - -.bounceOutLeft { - -webkit-animation-name: bounceOutLeft; - animation-name: bounceOutLeft; -} - -@-webkit-keyframes bounceOutRight { - 20% { - opacity: 1; - -webkit-transform: translate3d(-20px, 0, 0); - transform: translate3d(-20px, 0, 0); - } - - to { - opacity: 0; - -webkit-transform: translate3d(2000px, 0, 0); - transform: translate3d(2000px, 0, 0); - } -} - -@keyframes bounceOutRight { - 20% { - opacity: 1; - -webkit-transform: translate3d(-20px, 0, 0); - transform: translate3d(-20px, 0, 0); - } - - to { - opacity: 0; - -webkit-transform: translate3d(2000px, 0, 0); - transform: translate3d(2000px, 0, 0); - } -} - -.bounceOutRight { - -webkit-animation-name: bounceOutRight; - animation-name: bounceOutRight; -} - -@-webkit-keyframes bounceOutUp { - 20% { - -webkit-transform: translate3d(0, -10px, 0); - transform: translate3d(0, -10px, 0); - } - - 40%, - 45% { - opacity: 1; - -webkit-transform: translate3d(0, 20px, 0); - transform: translate3d(0, 20px, 0); - } - - to { - opacity: 0; - -webkit-transform: translate3d(0, -2000px, 0); - transform: translate3d(0, -2000px, 0); - } -} - -@keyframes bounceOutUp { - 20% { - -webkit-transform: translate3d(0, -10px, 0); - transform: translate3d(0, -10px, 0); - } - - 40%, - 45% { - opacity: 1; - -webkit-transform: translate3d(0, 20px, 0); - transform: translate3d(0, 20px, 0); - } - - to { - opacity: 0; - -webkit-transform: translate3d(0, -2000px, 0); - transform: translate3d(0, -2000px, 0); - } -} - -.bounceOutUp { - -webkit-animation-name: bounceOutUp; - animation-name: bounceOutUp; -} - -@-webkit-keyframes fadeIn { - from { - opacity: 0; - } - - to { - opacity: 1; - } -} - -@keyframes fadeIn { - from { - opacity: 0; - } - - to { - opacity: 1; - } -} - -.fadeIn { - -webkit-animation-name: fadeIn; - animation-name: fadeIn; -} - -@-webkit-keyframes fadeInDown { - from { - opacity: 0; - -webkit-transform: translate3d(0, -100%, 0); - transform: translate3d(0, -100%, 0); - } - - to { - opacity: 1; - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - } -} - -@keyframes fadeInDown { - from { - opacity: 0; - -webkit-transform: translate3d(0, -100%, 0); - transform: translate3d(0, -100%, 0); - } - - to { - opacity: 1; - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - } -} - -.fadeInDown { - -webkit-animation-name: fadeInDown; - animation-name: fadeInDown; -} - -@-webkit-keyframes fadeInDownBig { - from { - opacity: 0; - -webkit-transform: translate3d(0, -2000px, 0); - transform: translate3d(0, -2000px, 0); - } - - to { - opacity: 1; - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - } -} - -@keyframes fadeInDownBig { - from { - opacity: 0; - -webkit-transform: translate3d(0, -2000px, 0); - transform: translate3d(0, -2000px, 0); - } - - to { - opacity: 1; - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - } -} - -.fadeInDownBig { - -webkit-animation-name: fadeInDownBig; - animation-name: fadeInDownBig; -} - -@-webkit-keyframes fadeInLeft { - from { - opacity: 0; - -webkit-transform: translate3d(-100%, 0, 0); - transform: translate3d(-100%, 0, 0); - } - - to { - opacity: 1; - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - } -} - -@keyframes fadeInLeft { - from { - opacity: 0; - -webkit-transform: translate3d(-100%, 0, 0); - transform: translate3d(-100%, 0, 0); - } - - to { - opacity: 1; - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - } -} - -.fadeInLeft { - -webkit-animation-name: fadeInLeft; - animation-name: fadeInLeft; -} - -@-webkit-keyframes fadeInLeftBig { - from { - opacity: 0; - -webkit-transform: translate3d(-2000px, 0, 0); - transform: translate3d(-2000px, 0, 0); - } - - to { - opacity: 1; - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - } -} - -@keyframes fadeInLeftBig { - from { - opacity: 0; - -webkit-transform: translate3d(-2000px, 0, 0); - transform: translate3d(-2000px, 0, 0); - } - - to { - opacity: 1; - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - } -} - -.fadeInLeftBig { - -webkit-animation-name: fadeInLeftBig; - animation-name: fadeInLeftBig; -} - -@-webkit-keyframes fadeInRight { - from { - opacity: 0; - -webkit-transform: translate3d(100%, 0, 0); - transform: translate3d(100%, 0, 0); - } - - to { - opacity: 1; - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - } -} - -@keyframes fadeInRight { - from { - opacity: 0; - -webkit-transform: translate3d(100%, 0, 0); - transform: translate3d(100%, 0, 0); - } - - to { - opacity: 1; - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - } -} - -.fadeInRight { - -webkit-animation-name: fadeInRight; - animation-name: fadeInRight; -} - -@-webkit-keyframes fadeInRightBig { - from { - opacity: 0; - -webkit-transform: translate3d(2000px, 0, 0); - transform: translate3d(2000px, 0, 0); - } - - to { - opacity: 1; - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - } -} - -@keyframes fadeInRightBig { - from { - opacity: 0; - -webkit-transform: translate3d(2000px, 0, 0); - transform: translate3d(2000px, 0, 0); - } - - to { - opacity: 1; - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - } -} - -.fadeInRightBig { - -webkit-animation-name: fadeInRightBig; - animation-name: fadeInRightBig; -} - -@-webkit-keyframes fadeInUp { - from { - opacity: 0; - -webkit-transform: translate3d(0, 100%, 0); - transform: translate3d(0, 100%, 0); - } - - to { - opacity: 1; - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - } -} - -@keyframes fadeInUp { - from { - opacity: 0; - -webkit-transform: translate3d(0, 100%, 0); - transform: translate3d(0, 100%, 0); - } - - to { - opacity: 1; - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - } -} - -.fadeInUp { - -webkit-animation-name: fadeInUp; - animation-name: fadeInUp; -} - -@-webkit-keyframes fadeInUpBig { - from { - opacity: 0; - -webkit-transform: translate3d(0, 2000px, 0); - transform: translate3d(0, 2000px, 0); - } - - to { - opacity: 1; - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - } -} - -@keyframes fadeInUpBig { - from { - opacity: 0; - -webkit-transform: translate3d(0, 2000px, 0); - transform: translate3d(0, 2000px, 0); - } - - to { - opacity: 1; - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - } -} - -.fadeInUpBig { - -webkit-animation-name: fadeInUpBig; - animation-name: fadeInUpBig; -} - -@-webkit-keyframes fadeOut { - from { - opacity: 1; - } - - to { - opacity: 0; - } -} - -@keyframes fadeOut { - from { - opacity: 1; - } - - to { - opacity: 0; - } -} - -.fadeOut { - -webkit-animation-name: fadeOut; - animation-name: fadeOut; -} - -@-webkit-keyframes fadeOutDown { - from { - opacity: 1; - } - - to { - opacity: 0; - -webkit-transform: translate3d(0, 100%, 0); - transform: translate3d(0, 100%, 0); - } -} - -@keyframes fadeOutDown { - from { - opacity: 1; - } - - to { - opacity: 0; - -webkit-transform: translate3d(0, 100%, 0); - transform: translate3d(0, 100%, 0); - } -} - -.fadeOutDown { - -webkit-animation-name: fadeOutDown; - animation-name: fadeOutDown; -} - -@-webkit-keyframes fadeOutDownBig { - from { - opacity: 1; - } - - to { - opacity: 0; - -webkit-transform: translate3d(0, 2000px, 0); - transform: translate3d(0, 2000px, 0); - } -} - -@keyframes fadeOutDownBig { - from { - opacity: 1; - } - - to { - opacity: 0; - -webkit-transform: translate3d(0, 2000px, 0); - transform: translate3d(0, 2000px, 0); - } -} - -.fadeOutDownBig { - -webkit-animation-name: fadeOutDownBig; - animation-name: fadeOutDownBig; -} - -@-webkit-keyframes fadeOutLeft { - from { - opacity: 1; - } - - to { - opacity: 0; - -webkit-transform: translate3d(-100%, 0, 0); - transform: translate3d(-100%, 0, 0); - } -} - -@keyframes fadeOutLeft { - from { - opacity: 1; - } - - to { - opacity: 0; - -webkit-transform: translate3d(-100%, 0, 0); - transform: translate3d(-100%, 0, 0); - } -} - -.fadeOutLeft { - -webkit-animation-name: fadeOutLeft; - animation-name: fadeOutLeft; -} - -@-webkit-keyframes fadeOutLeftBig { - from { - opacity: 1; - } - - to { - opacity: 0; - -webkit-transform: translate3d(-2000px, 0, 0); - transform: translate3d(-2000px, 0, 0); - } -} - -@keyframes fadeOutLeftBig { - from { - opacity: 1; - } - - to { - opacity: 0; - -webkit-transform: translate3d(-2000px, 0, 0); - transform: translate3d(-2000px, 0, 0); - } -} - -.fadeOutLeftBig { - -webkit-animation-name: fadeOutLeftBig; - animation-name: fadeOutLeftBig; -} - -@-webkit-keyframes fadeOutRight { - from { - opacity: 1; - } - - to { - opacity: 0; - -webkit-transform: translate3d(100%, 0, 0); - transform: translate3d(100%, 0, 0); - } -} - -@keyframes fadeOutRight { - from { - opacity: 1; - } - - to { - opacity: 0; - -webkit-transform: translate3d(100%, 0, 0); - transform: translate3d(100%, 0, 0); - } -} - -.fadeOutRight { - -webkit-animation-name: fadeOutRight; - animation-name: fadeOutRight; -} - -@-webkit-keyframes fadeOutRightBig { - from { - opacity: 1; - } - - to { - opacity: 0; - -webkit-transform: translate3d(2000px, 0, 0); - transform: translate3d(2000px, 0, 0); - } -} - -@keyframes fadeOutRightBig { - from { - opacity: 1; - } - - to { - opacity: 0; - -webkit-transform: translate3d(2000px, 0, 0); - transform: translate3d(2000px, 0, 0); - } -} - -.fadeOutRightBig { - -webkit-animation-name: fadeOutRightBig; - animation-name: fadeOutRightBig; -} - -@-webkit-keyframes fadeOutUp { - from { - opacity: 1; - } - - to { - opacity: 0; - -webkit-transform: translate3d(0, -100%, 0); - transform: translate3d(0, -100%, 0); - } -} - -@keyframes fadeOutUp { - from { - opacity: 1; - } - - to { - opacity: 0; - -webkit-transform: translate3d(0, -100%, 0); - transform: translate3d(0, -100%, 0); - } -} - -.fadeOutUp { - -webkit-animation-name: fadeOutUp; - animation-name: fadeOutUp; -} - -@-webkit-keyframes fadeOutUpBig { - from { - opacity: 1; - } - - to { - opacity: 0; - -webkit-transform: translate3d(0, -2000px, 0); - transform: translate3d(0, -2000px, 0); - } -} - -@keyframes fadeOutUpBig { - from { - opacity: 1; - } - - to { - opacity: 0; - -webkit-transform: translate3d(0, -2000px, 0); - transform: translate3d(0, -2000px, 0); - } -} - -.fadeOutUpBig { - -webkit-animation-name: fadeOutUpBig; - animation-name: fadeOutUpBig; -} - -@-webkit-keyframes flip { - from { - -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) - rotate3d(0, 1, 0, -360deg); - transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg); - -webkit-animation-timing-function: ease-out; - animation-timing-function: ease-out; - } - - 40% { - -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) - rotate3d(0, 1, 0, -190deg); - transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) - rotate3d(0, 1, 0, -190deg); - -webkit-animation-timing-function: ease-out; - animation-timing-function: ease-out; - } - - 50% { - -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) - rotate3d(0, 1, 0, -170deg); - transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) - rotate3d(0, 1, 0, -170deg); - -webkit-animation-timing-function: ease-in; - animation-timing-function: ease-in; - } - - 80% { - -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) - rotate3d(0, 1, 0, 0deg); - transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) - rotate3d(0, 1, 0, 0deg); - -webkit-animation-timing-function: ease-in; - animation-timing-function: ease-in; - } - - to { - -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) - rotate3d(0, 1, 0, 0deg); - transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg); - -webkit-animation-timing-function: ease-in; - animation-timing-function: ease-in; - } -} - -@keyframes flip { - from { - -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) - rotate3d(0, 1, 0, -360deg); - transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg); - -webkit-animation-timing-function: ease-out; - animation-timing-function: ease-out; - } - - 40% { - -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) - rotate3d(0, 1, 0, -190deg); - transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) - rotate3d(0, 1, 0, -190deg); - -webkit-animation-timing-function: ease-out; - animation-timing-function: ease-out; - } - - 50% { - -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) - rotate3d(0, 1, 0, -170deg); - transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) - rotate3d(0, 1, 0, -170deg); - -webkit-animation-timing-function: ease-in; - animation-timing-function: ease-in; - } - - 80% { - -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) - rotate3d(0, 1, 0, 0deg); - transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) - rotate3d(0, 1, 0, 0deg); - -webkit-animation-timing-function: ease-in; - animation-timing-function: ease-in; - } - - to { - -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) - rotate3d(0, 1, 0, 0deg); - transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg); - -webkit-animation-timing-function: ease-in; - animation-timing-function: ease-in; - } -} - -.animated.flip { - -webkit-backface-visibility: visible; - backface-visibility: visible; - -webkit-animation-name: flip; - animation-name: flip; -} - -@-webkit-keyframes flipInX { - from { - -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); - transform: perspective(400px) rotate3d(1, 0, 0, 90deg); - -webkit-animation-timing-function: ease-in; - animation-timing-function: ease-in; - opacity: 0; - } - - 40% { - -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); - transform: perspective(400px) rotate3d(1, 0, 0, -20deg); - -webkit-animation-timing-function: ease-in; - animation-timing-function: ease-in; - } - - 60% { - -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); - transform: perspective(400px) rotate3d(1, 0, 0, 10deg); - opacity: 1; - } - - 80% { - -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); - transform: perspective(400px) rotate3d(1, 0, 0, -5deg); - } - - to { - -webkit-transform: perspective(400px); - transform: perspective(400px); - } -} - -@keyframes flipInX { - from { - -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); - transform: perspective(400px) rotate3d(1, 0, 0, 90deg); - -webkit-animation-timing-function: ease-in; - animation-timing-function: ease-in; - opacity: 0; - } - - 40% { - -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); - transform: perspective(400px) rotate3d(1, 0, 0, -20deg); - -webkit-animation-timing-function: ease-in; - animation-timing-function: ease-in; - } - - 60% { - -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); - transform: perspective(400px) rotate3d(1, 0, 0, 10deg); - opacity: 1; - } - - 80% { - -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); - transform: perspective(400px) rotate3d(1, 0, 0, -5deg); - } - - to { - -webkit-transform: perspective(400px); - transform: perspective(400px); - } -} - -.flipInX { - -webkit-backface-visibility: visible !important; - backface-visibility: visible !important; - -webkit-animation-name: flipInX; - animation-name: flipInX; -} - -@-webkit-keyframes flipInY { - from { - -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); - transform: perspective(400px) rotate3d(0, 1, 0, 90deg); - -webkit-animation-timing-function: ease-in; - animation-timing-function: ease-in; - opacity: 0; - } - - 40% { - -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); - transform: perspective(400px) rotate3d(0, 1, 0, -20deg); - -webkit-animation-timing-function: ease-in; - animation-timing-function: ease-in; - } - - 60% { - -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); - transform: perspective(400px) rotate3d(0, 1, 0, 10deg); - opacity: 1; - } - - 80% { - -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); - transform: perspective(400px) rotate3d(0, 1, 0, -5deg); - } - - to { - -webkit-transform: perspective(400px); - transform: perspective(400px); - } -} - -@keyframes flipInY { - from { - -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); - transform: perspective(400px) rotate3d(0, 1, 0, 90deg); - -webkit-animation-timing-function: ease-in; - animation-timing-function: ease-in; - opacity: 0; - } - - 40% { - -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); - transform: perspective(400px) rotate3d(0, 1, 0, -20deg); - -webkit-animation-timing-function: ease-in; - animation-timing-function: ease-in; - } - - 60% { - -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); - transform: perspective(400px) rotate3d(0, 1, 0, 10deg); - opacity: 1; - } - - 80% { - -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); - transform: perspective(400px) rotate3d(0, 1, 0, -5deg); - } - - to { - -webkit-transform: perspective(400px); - transform: perspective(400px); - } -} - -.flipInY { - -webkit-backface-visibility: visible !important; - backface-visibility: visible !important; - -webkit-animation-name: flipInY; - animation-name: flipInY; -} - -@-webkit-keyframes flipOutX { - from { - -webkit-transform: perspective(400px); - transform: perspective(400px); - } - - 30% { - -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); - transform: perspective(400px) rotate3d(1, 0, 0, -20deg); - opacity: 1; - } - - to { - -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); - transform: perspective(400px) rotate3d(1, 0, 0, 90deg); - opacity: 0; - } -} - -@keyframes flipOutX { - from { - -webkit-transform: perspective(400px); - transform: perspective(400px); - } - - 30% { - -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); - transform: perspective(400px) rotate3d(1, 0, 0, -20deg); - opacity: 1; - } - - to { - -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); - transform: perspective(400px) rotate3d(1, 0, 0, 90deg); - opacity: 0; - } -} - -.flipOutX { - -webkit-animation-duration: 0.75s; - animation-duration: 0.75s; - -webkit-animation-name: flipOutX; - animation-name: flipOutX; - -webkit-backface-visibility: visible !important; - backface-visibility: visible !important; -} - -@-webkit-keyframes flipOutY { - from { - -webkit-transform: perspective(400px); - transform: perspective(400px); - } - - 30% { - -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg); - transform: perspective(400px) rotate3d(0, 1, 0, -15deg); - opacity: 1; - } - - to { - -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); - transform: perspective(400px) rotate3d(0, 1, 0, 90deg); - opacity: 0; - } -} - -@keyframes flipOutY { - from { - -webkit-transform: perspective(400px); - transform: perspective(400px); - } - - 30% { - -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg); - transform: perspective(400px) rotate3d(0, 1, 0, -15deg); - opacity: 1; - } - - to { - -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); - transform: perspective(400px) rotate3d(0, 1, 0, 90deg); - opacity: 0; - } -} - -.flipOutY { - -webkit-animation-duration: 0.75s; - animation-duration: 0.75s; - -webkit-backface-visibility: visible !important; - backface-visibility: visible !important; - -webkit-animation-name: flipOutY; - animation-name: flipOutY; -} - -@-webkit-keyframes lightSpeedIn { - from { - -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); - transform: translate3d(100%, 0, 0) skewX(-30deg); - opacity: 0; - } - - 60% { - -webkit-transform: skewX(20deg); - transform: skewX(20deg); - opacity: 1; - } - - 80% { - -webkit-transform: skewX(-5deg); - transform: skewX(-5deg); - } - - to { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - } -} - -@keyframes lightSpeedIn { - from { - -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); - transform: translate3d(100%, 0, 0) skewX(-30deg); - opacity: 0; - } - - 60% { - -webkit-transform: skewX(20deg); - transform: skewX(20deg); - opacity: 1; - } - - 80% { - -webkit-transform: skewX(-5deg); - transform: skewX(-5deg); - } - - to { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - } -} - -.lightSpeedIn { - -webkit-animation-name: lightSpeedIn; - animation-name: lightSpeedIn; - -webkit-animation-timing-function: ease-out; - animation-timing-function: ease-out; -} - -@-webkit-keyframes lightSpeedOut { - from { - opacity: 1; - } - - to { - -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); - transform: translate3d(100%, 0, 0) skewX(30deg); - opacity: 0; - } -} - -@keyframes lightSpeedOut { - from { - opacity: 1; - } - - to { - -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); - transform: translate3d(100%, 0, 0) skewX(30deg); - opacity: 0; - } -} - -.lightSpeedOut { - -webkit-animation-name: lightSpeedOut; - animation-name: lightSpeedOut; - -webkit-animation-timing-function: ease-in; - animation-timing-function: ease-in; -} - -@-webkit-keyframes rotateIn { - from { - -webkit-transform-origin: center; - transform-origin: center; - -webkit-transform: rotate3d(0, 0, 1, -200deg); - transform: rotate3d(0, 0, 1, -200deg); - opacity: 0; - } - - to { - -webkit-transform-origin: center; - transform-origin: center; - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - opacity: 1; - } -} - -@keyframes rotateIn { - from { - -webkit-transform-origin: center; - transform-origin: center; - -webkit-transform: rotate3d(0, 0, 1, -200deg); - transform: rotate3d(0, 0, 1, -200deg); - opacity: 0; - } - - to { - -webkit-transform-origin: center; - transform-origin: center; - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - opacity: 1; - } -} - -.rotateIn { - -webkit-animation-name: rotateIn; - animation-name: rotateIn; -} - -@-webkit-keyframes rotateInDownLeft { - from { - -webkit-transform-origin: left bottom; - transform-origin: left bottom; - -webkit-transform: rotate3d(0, 0, 1, -45deg); - transform: rotate3d(0, 0, 1, -45deg); - opacity: 0; - } - - to { - -webkit-transform-origin: left bottom; - transform-origin: left bottom; - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - opacity: 1; - } -} - -@keyframes rotateInDownLeft { - from { - -webkit-transform-origin: left bottom; - transform-origin: left bottom; - -webkit-transform: rotate3d(0, 0, 1, -45deg); - transform: rotate3d(0, 0, 1, -45deg); - opacity: 0; - } - - to { - -webkit-transform-origin: left bottom; - transform-origin: left bottom; - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - opacity: 1; - } -} - -.rotateInDownLeft { - -webkit-animation-name: rotateInDownLeft; - animation-name: rotateInDownLeft; -} - -@-webkit-keyframes rotateInDownRight { - from { - -webkit-transform-origin: right bottom; - transform-origin: right bottom; - -webkit-transform: rotate3d(0, 0, 1, 45deg); - transform: rotate3d(0, 0, 1, 45deg); - opacity: 0; - } - - to { - -webkit-transform-origin: right bottom; - transform-origin: right bottom; - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - opacity: 1; - } -} - -@keyframes rotateInDownRight { - from { - -webkit-transform-origin: right bottom; - transform-origin: right bottom; - -webkit-transform: rotate3d(0, 0, 1, 45deg); - transform: rotate3d(0, 0, 1, 45deg); - opacity: 0; - } - - to { - -webkit-transform-origin: right bottom; - transform-origin: right bottom; - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - opacity: 1; - } -} - -.rotateInDownRight { - -webkit-animation-name: rotateInDownRight; - animation-name: rotateInDownRight; -} - -@-webkit-keyframes rotateInUpLeft { - from { - -webkit-transform-origin: left bottom; - transform-origin: left bottom; - -webkit-transform: rotate3d(0, 0, 1, 45deg); - transform: rotate3d(0, 0, 1, 45deg); - opacity: 0; - } - - to { - -webkit-transform-origin: left bottom; - transform-origin: left bottom; - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - opacity: 1; - } -} - -@keyframes rotateInUpLeft { - from { - -webkit-transform-origin: left bottom; - transform-origin: left bottom; - -webkit-transform: rotate3d(0, 0, 1, 45deg); - transform: rotate3d(0, 0, 1, 45deg); - opacity: 0; - } - - to { - -webkit-transform-origin: left bottom; - transform-origin: left bottom; - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - opacity: 1; - } -} - -.rotateInUpLeft { - -webkit-animation-name: rotateInUpLeft; - animation-name: rotateInUpLeft; -} - -@-webkit-keyframes rotateInUpRight { - from { - -webkit-transform-origin: right bottom; - transform-origin: right bottom; - -webkit-transform: rotate3d(0, 0, 1, -90deg); - transform: rotate3d(0, 0, 1, -90deg); - opacity: 0; - } - - to { - -webkit-transform-origin: right bottom; - transform-origin: right bottom; - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - opacity: 1; - } -} - -@keyframes rotateInUpRight { - from { - -webkit-transform-origin: right bottom; - transform-origin: right bottom; - -webkit-transform: rotate3d(0, 0, 1, -90deg); - transform: rotate3d(0, 0, 1, -90deg); - opacity: 0; - } - - to { - -webkit-transform-origin: right bottom; - transform-origin: right bottom; - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - opacity: 1; - } -} - -.rotateInUpRight { - -webkit-animation-name: rotateInUpRight; - animation-name: rotateInUpRight; -} - -@-webkit-keyframes rotateOut { - from { - -webkit-transform-origin: center; - transform-origin: center; - opacity: 1; - } - - to { - -webkit-transform-origin: center; - transform-origin: center; - -webkit-transform: rotate3d(0, 0, 1, 200deg); - transform: rotate3d(0, 0, 1, 200deg); - opacity: 0; - } -} - -@keyframes rotateOut { - from { - -webkit-transform-origin: center; - transform-origin: center; - opacity: 1; - } - - to { - -webkit-transform-origin: center; - transform-origin: center; - -webkit-transform: rotate3d(0, 0, 1, 200deg); - transform: rotate3d(0, 0, 1, 200deg); - opacity: 0; - } -} - -.rotateOut { - -webkit-animation-name: rotateOut; - animation-name: rotateOut; -} - -@-webkit-keyframes rotateOutDownLeft { - from { - -webkit-transform-origin: left bottom; - transform-origin: left bottom; - opacity: 1; - } - - to { - -webkit-transform-origin: left bottom; - transform-origin: left bottom; - -webkit-transform: rotate3d(0, 0, 1, 45deg); - transform: rotate3d(0, 0, 1, 45deg); - opacity: 0; - } -} - -@keyframes rotateOutDownLeft { - from { - -webkit-transform-origin: left bottom; - transform-origin: left bottom; - opacity: 1; - } - - to { - -webkit-transform-origin: left bottom; - transform-origin: left bottom; - -webkit-transform: rotate3d(0, 0, 1, 45deg); - transform: rotate3d(0, 0, 1, 45deg); - opacity: 0; - } -} - -.rotateOutDownLeft { - -webkit-animation-name: rotateOutDownLeft; - animation-name: rotateOutDownLeft; -} - -@-webkit-keyframes rotateOutDownRight { - from { - -webkit-transform-origin: right bottom; - transform-origin: right bottom; - opacity: 1; - } - - to { - -webkit-transform-origin: right bottom; - transform-origin: right bottom; - -webkit-transform: rotate3d(0, 0, 1, -45deg); - transform: rotate3d(0, 0, 1, -45deg); - opacity: 0; - } -} - -@keyframes rotateOutDownRight { - from { - -webkit-transform-origin: right bottom; - transform-origin: right bottom; - opacity: 1; - } - - to { - -webkit-transform-origin: right bottom; - transform-origin: right bottom; - -webkit-transform: rotate3d(0, 0, 1, -45deg); - transform: rotate3d(0, 0, 1, -45deg); - opacity: 0; - } -} - -.rotateOutDownRight { - -webkit-animation-name: rotateOutDownRight; - animation-name: rotateOutDownRight; -} - -@-webkit-keyframes rotateOutUpLeft { - from { - -webkit-transform-origin: left bottom; - transform-origin: left bottom; - opacity: 1; - } - - to { - -webkit-transform-origin: left bottom; - transform-origin: left bottom; - -webkit-transform: rotate3d(0, 0, 1, -45deg); - transform: rotate3d(0, 0, 1, -45deg); - opacity: 0; - } -} - -@keyframes rotateOutUpLeft { - from { - -webkit-transform-origin: left bottom; - transform-origin: left bottom; - opacity: 1; - } - - to { - -webkit-transform-origin: left bottom; - transform-origin: left bottom; - -webkit-transform: rotate3d(0, 0, 1, -45deg); - transform: rotate3d(0, 0, 1, -45deg); - opacity: 0; - } -} - -.rotateOutUpLeft { - -webkit-animation-name: rotateOutUpLeft; - animation-name: rotateOutUpLeft; -} - -@-webkit-keyframes rotateOutUpRight { - from { - -webkit-transform-origin: right bottom; - transform-origin: right bottom; - opacity: 1; - } - - to { - -webkit-transform-origin: right bottom; - transform-origin: right bottom; - -webkit-transform: rotate3d(0, 0, 1, 90deg); - transform: rotate3d(0, 0, 1, 90deg); - opacity: 0; - } -} - -@keyframes rotateOutUpRight { - from { - -webkit-transform-origin: right bottom; - transform-origin: right bottom; - opacity: 1; - } - - to { - -webkit-transform-origin: right bottom; - transform-origin: right bottom; - -webkit-transform: rotate3d(0, 0, 1, 90deg); - transform: rotate3d(0, 0, 1, 90deg); - opacity: 0; - } -} - -.rotateOutUpRight { - -webkit-animation-name: rotateOutUpRight; - animation-name: rotateOutUpRight; -} - -@-webkit-keyframes hinge { - 0% { - -webkit-transform-origin: top left; - transform-origin: top left; - -webkit-animation-timing-function: ease-in-out; - animation-timing-function: ease-in-out; - } - - 20%, - 60% { - -webkit-transform: rotate3d(0, 0, 1, 80deg); - transform: rotate3d(0, 0, 1, 80deg); - -webkit-transform-origin: top left; - transform-origin: top left; - -webkit-animation-timing-function: ease-in-out; - animation-timing-function: ease-in-out; - } - - 40%, - 80% { - -webkit-transform: rotate3d(0, 0, 1, 60deg); - transform: rotate3d(0, 0, 1, 60deg); - -webkit-transform-origin: top left; - transform-origin: top left; - -webkit-animation-timing-function: ease-in-out; - animation-timing-function: ease-in-out; - opacity: 1; - } - - to { - -webkit-transform: translate3d(0, 700px, 0); - transform: translate3d(0, 700px, 0); - opacity: 0; - } -} - -@keyframes hinge { - 0% { - -webkit-transform-origin: top left; - transform-origin: top left; - -webkit-animation-timing-function: ease-in-out; - animation-timing-function: ease-in-out; - } - - 20%, - 60% { - -webkit-transform: rotate3d(0, 0, 1, 80deg); - transform: rotate3d(0, 0, 1, 80deg); - -webkit-transform-origin: top left; - transform-origin: top left; - -webkit-animation-timing-function: ease-in-out; - animation-timing-function: ease-in-out; - } - - 40%, - 80% { - -webkit-transform: rotate3d(0, 0, 1, 60deg); - transform: rotate3d(0, 0, 1, 60deg); - -webkit-transform-origin: top left; - transform-origin: top left; - -webkit-animation-timing-function: ease-in-out; - animation-timing-function: ease-in-out; - opacity: 1; - } - - to { - -webkit-transform: translate3d(0, 700px, 0); - transform: translate3d(0, 700px, 0); - opacity: 0; - } -} - -.hinge { - -webkit-animation-duration: 2s; - animation-duration: 2s; - -webkit-animation-name: hinge; - animation-name: hinge; -} - -@-webkit-keyframes jackInTheBox { - from { - opacity: 0; - -webkit-transform: scale(0.1) rotate(30deg); - transform: scale(0.1) rotate(30deg); - -webkit-transform-origin: center bottom; - transform-origin: center bottom; - } - - 50% { - -webkit-transform: rotate(-10deg); - transform: rotate(-10deg); - } - - 70% { - -webkit-transform: rotate(3deg); - transform: rotate(3deg); - } - - to { - opacity: 1; - -webkit-transform: scale(1); - transform: scale(1); - } -} - -@keyframes jackInTheBox { - from { - opacity: 0; - -webkit-transform: scale(0.1) rotate(30deg); - transform: scale(0.1) rotate(30deg); - -webkit-transform-origin: center bottom; - transform-origin: center bottom; - } - - 50% { - -webkit-transform: rotate(-10deg); - transform: rotate(-10deg); - } - - 70% { - -webkit-transform: rotate(3deg); - transform: rotate(3deg); - } - - to { - opacity: 1; - -webkit-transform: scale(1); - transform: scale(1); - } -} - -.jackInTheBox { - -webkit-animation-name: jackInTheBox; - animation-name: jackInTheBox; -} - -/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ - -@-webkit-keyframes rollIn { - from { - opacity: 0; - -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); - transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); - } - - to { - opacity: 1; - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - } -} - -@keyframes rollIn { - from { - opacity: 0; - -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); - transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); - } - - to { - opacity: 1; - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - } -} - -.rollIn { - -webkit-animation-name: rollIn; - animation-name: rollIn; -} - -/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ - -@-webkit-keyframes rollOut { - from { - opacity: 1; - } - - to { - opacity: 0; - -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); - transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); - } -} - -@keyframes rollOut { - from { - opacity: 1; - } - - to { - opacity: 0; - -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); - transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); - } -} - -.rollOut { - -webkit-animation-name: rollOut; - animation-name: rollOut; -} - -@-webkit-keyframes zoomIn { - from { - opacity: 0; - -webkit-transform: scale3d(0.3, 0.3, 0.3); - transform: scale3d(0.3, 0.3, 0.3); - } - - 50% { - opacity: 1; - } -} - -@keyframes zoomIn { - from { - opacity: 0; - -webkit-transform: scale3d(0.3, 0.3, 0.3); - transform: scale3d(0.3, 0.3, 0.3); - } - - 50% { - opacity: 1; - } -} - -.zoomIn { - -webkit-animation-name: zoomIn; - animation-name: zoomIn; -} - -@-webkit-keyframes zoomInDown { - from { - opacity: 0; - -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); - transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); - -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); - animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); - } - - 60% { - opacity: 1; - -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); - transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); - -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); - animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); - } -} - -@keyframes zoomInDown { - from { - opacity: 0; - -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); - transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); - -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); - animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); - } - - 60% { - opacity: 1; - -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); - transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); - -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); - animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); - } -} - -.zoomInDown { - -webkit-animation-name: zoomInDown; - animation-name: zoomInDown; -} - -@-webkit-keyframes zoomInLeft { - from { - opacity: 0; - -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); - transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); - -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); - animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); - } - - 60% { - opacity: 1; - -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); - transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); - -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); - animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); - } -} - -@keyframes zoomInLeft { - from { - opacity: 0; - -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); - transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); - -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); - animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); - } - - 60% { - opacity: 1; - -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); - transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); - -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); - animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); - } -} - -.zoomInLeft { - -webkit-animation-name: zoomInLeft; - animation-name: zoomInLeft; -} - -@-webkit-keyframes zoomInRight { - from { - opacity: 0; - -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); - transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); - -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); - animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); - } - - 60% { - opacity: 1; - -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); - transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); - -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); - animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); - } -} - -@keyframes zoomInRight { - from { - opacity: 0; - -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); - transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); - -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); - animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); - } - - 60% { - opacity: 1; - -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); - transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); - -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); - animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); - } -} - -.zoomInRight { - -webkit-animation-name: zoomInRight; - animation-name: zoomInRight; -} - -@-webkit-keyframes zoomInUp { - from { - opacity: 0; - -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); - transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); - -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); - animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); - } - - 60% { - opacity: 1; - -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); - transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); - -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); - animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); - } -} - -@keyframes zoomInUp { - from { - opacity: 0; - -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); - transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); - -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); - animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); - } - - 60% { - opacity: 1; - -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); - transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); - -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); - animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); - } -} - -.zoomInUp { - -webkit-animation-name: zoomInUp; - animation-name: zoomInUp; -} - -@-webkit-keyframes zoomOut { - from { - opacity: 1; - } - - 50% { - opacity: 0; - -webkit-transform: scale3d(0.3, 0.3, 0.3); - transform: scale3d(0.3, 0.3, 0.3); - } - - to { - opacity: 0; - } -} - -@keyframes zoomOut { - from { - opacity: 1; - } - - 50% { - opacity: 0; - -webkit-transform: scale3d(0.3, 0.3, 0.3); - transform: scale3d(0.3, 0.3, 0.3); - } - - to { - opacity: 0; - } -} - -.zoomOut { - -webkit-animation-name: zoomOut; - animation-name: zoomOut; -} - -@-webkit-keyframes zoomOutDown { - 40% { - opacity: 1; - -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); - transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); - -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); - animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); - } - - to { - opacity: 0; - -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); - transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); - -webkit-transform-origin: center bottom; - transform-origin: center bottom; - -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); - animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); - } -} - -@keyframes zoomOutDown { - 40% { - opacity: 1; - -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); - transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); - -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); - animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); - } - - to { - opacity: 0; - -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); - transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); - -webkit-transform-origin: center bottom; - transform-origin: center bottom; - -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); - animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); - } -} - -.zoomOutDown { - -webkit-animation-name: zoomOutDown; - animation-name: zoomOutDown; -} - -@-webkit-keyframes zoomOutLeft { - 40% { - opacity: 1; - -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); - transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); - } - - to { - opacity: 0; - -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0); - transform: scale(0.1) translate3d(-2000px, 0, 0); - -webkit-transform-origin: left center; - transform-origin: left center; - } -} - -@keyframes zoomOutLeft { - 40% { - opacity: 1; - -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); - transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); - } - - to { - opacity: 0; - -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0); - transform: scale(0.1) translate3d(-2000px, 0, 0); - -webkit-transform-origin: left center; - transform-origin: left center; - } -} - -.zoomOutLeft { - -webkit-animation-name: zoomOutLeft; - animation-name: zoomOutLeft; -} - -@-webkit-keyframes zoomOutRight { - 40% { - opacity: 1; - -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); - transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); - } - - to { - opacity: 0; - -webkit-transform: scale(0.1) translate3d(2000px, 0, 0); - transform: scale(0.1) translate3d(2000px, 0, 0); - -webkit-transform-origin: right center; - transform-origin: right center; - } -} - -@keyframes zoomOutRight { - 40% { - opacity: 1; - -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); - transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); - } - - to { - opacity: 0; - -webkit-transform: scale(0.1) translate3d(2000px, 0, 0); - transform: scale(0.1) translate3d(2000px, 0, 0); - -webkit-transform-origin: right center; - transform-origin: right center; - } -} - -.zoomOutRight { - -webkit-animation-name: zoomOutRight; - animation-name: zoomOutRight; -} - -@-webkit-keyframes zoomOutUp { - 40% { - opacity: 1; - -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); - transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); - -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); - animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); - } - - to { - opacity: 0; - -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); - transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); - -webkit-transform-origin: center bottom; - transform-origin: center bottom; - -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); - animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); - } -} - -@keyframes zoomOutUp { - 40% { - opacity: 1; - -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); - transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); - -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); - animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); - } - - to { - opacity: 0; - -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); - transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); - -webkit-transform-origin: center bottom; - transform-origin: center bottom; - -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); - animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); - } -} - -.zoomOutUp { - -webkit-animation-name: zoomOutUp; - animation-name: zoomOutUp; -} - -@-webkit-keyframes slideInDown { - from { - -webkit-transform: translate3d(0, -100%, 0); - transform: translate3d(0, -100%, 0); - visibility: visible; - } - - to { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - } -} - -@keyframes slideInDown { - from { - -webkit-transform: translate3d(0, -100%, 0); - transform: translate3d(0, -100%, 0); - visibility: visible; - } - - to { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - } -} - -.slideInDown { - -webkit-animation-name: slideInDown; - animation-name: slideInDown; -} - -@-webkit-keyframes slideInLeft { - from { - -webkit-transform: translate3d(-100%, 0, 0); - transform: translate3d(-100%, 0, 0); - visibility: visible; - } - - to { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - } -} - -@keyframes slideInLeft { - from { - -webkit-transform: translate3d(-100%, 0, 0); - transform: translate3d(-100%, 0, 0); - visibility: visible; - } - - to { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - } -} - -.slideInLeft { - -webkit-animation-name: slideInLeft; - animation-name: slideInLeft; -} - -@-webkit-keyframes slideInRight { - from { - -webkit-transform: translate3d(100%, 0, 0); - transform: translate3d(100%, 0, 0); - visibility: visible; - } - - to { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - } -} - -@keyframes slideInRight { - from { - -webkit-transform: translate3d(100%, 0, 0); - transform: translate3d(100%, 0, 0); - visibility: visible; - } - - to { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - } -} - -.slideInRight { - -webkit-animation-name: slideInRight; - animation-name: slideInRight; -} - -@-webkit-keyframes slideInUp { - from { - -webkit-transform: translate3d(0, 100%, 0); - transform: translate3d(0, 100%, 0); - visibility: visible; - } - - to { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - } -} - -@keyframes slideInUp { - from { - -webkit-transform: translate3d(0, 100%, 0); - transform: translate3d(0, 100%, 0); - visibility: visible; - } - - to { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - } -} - -.slideInUp { - -webkit-animation-name: slideInUp; - animation-name: slideInUp; -} - -@-webkit-keyframes slideOutDown { - from { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - } - - to { - visibility: hidden; - -webkit-transform: translate3d(0, 100%, 0); - transform: translate3d(0, 100%, 0); - } -} - -@keyframes slideOutDown { - from { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - } - - to { - visibility: hidden; - -webkit-transform: translate3d(0, 100%, 0); - transform: translate3d(0, 100%, 0); - } -} - -.slideOutDown { - -webkit-animation-name: slideOutDown; - animation-name: slideOutDown; -} - -@-webkit-keyframes slideOutLeft { - from { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - } - - to { - visibility: hidden; - -webkit-transform: translate3d(-100%, 0, 0); - transform: translate3d(-100%, 0, 0); - } -} - -@keyframes slideOutLeft { - from { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - } - - to { - visibility: hidden; - -webkit-transform: translate3d(-100%, 0, 0); - transform: translate3d(-100%, 0, 0); - } -} - -.slideOutLeft { - -webkit-animation-name: slideOutLeft; - animation-name: slideOutLeft; -} - -@-webkit-keyframes slideOutRight { - from { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - } - - to { - visibility: hidden; - -webkit-transform: translate3d(100%, 0, 0); - transform: translate3d(100%, 0, 0); - } -} - -@keyframes slideOutRight { - from { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - } - - to { - visibility: hidden; - -webkit-transform: translate3d(100%, 0, 0); - transform: translate3d(100%, 0, 0); - } -} - -.slideOutRight { - -webkit-animation-name: slideOutRight; - animation-name: slideOutRight; -} - -@-webkit-keyframes slideOutUp { - from { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - } - - to { - visibility: hidden; - -webkit-transform: translate3d(0, -100%, 0); - transform: translate3d(0, -100%, 0); - } -} - -@keyframes slideOutUp { - from { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - } - - to { - visibility: hidden; - -webkit-transform: translate3d(0, -100%, 0); - transform: translate3d(0, -100%, 0); - } -} - -.slideOutUp { - -webkit-animation-name: slideOutUp; - animation-name: slideOutUp; -} - -.animated { - -webkit-animation-duration: 1s; - animation-duration: 1s; - -webkit-animation-fill-mode: both; - animation-fill-mode: both; -} - -.animated.infinite { - -webkit-animation-iteration-count: infinite; - animation-iteration-count: infinite; -} - -.animated.delay-1s { - -webkit-animation-delay: 1s; - animation-delay: 1s; -} - -.animated.delay-2s { - -webkit-animation-delay: 2s; - animation-delay: 2s; -} - -.animated.delay-3s { - -webkit-animation-delay: 3s; - animation-delay: 3s; -} - -.animated.delay-4s { - -webkit-animation-delay: 4s; - animation-delay: 4s; -} - -.animated.delay-5s { - -webkit-animation-delay: 5s; - animation-delay: 5s; -} - -.animated.fast { - -webkit-animation-duration: 800ms; - animation-duration: 800ms; -} - -.animated.faster { - -webkit-animation-duration: 500ms; - animation-duration: 500ms; -} - -.animated.slow { - -webkit-animation-duration: 2s; - animation-duration: 2s; -} - -.animated.slower { - -webkit-animation-duration: 3s; - animation-duration: 3s; -} - -@media (print), (prefers-reduced-motion) { - .animated { - -webkit-animation: unset !important; - animation: unset !important; - -webkit-transition: none !important; - transition: none !important; - } -} diff --git a/public/css/fonts/iosevka-regular.ttf b/public/css/fonts/iosevka-regular.ttf deleted file mode 100644 index c897c7c..0000000 Binary files a/public/css/fonts/iosevka-regular.ttf and /dev/null differ diff --git a/public/css/fonts/iosevka-term-slab-regular.ttf b/public/css/fonts/iosevka-term-slab-regular.ttf deleted file mode 100644 index f6e16d5..0000000 Binary files a/public/css/fonts/iosevka-term-slab-regular.ttf and /dev/null differ diff --git a/public/css/fonts/iosevka-term-thin.woff2 b/public/css/fonts/iosevka-term-thin.woff2 deleted file mode 100644 index 25b82f8..0000000 Binary files a/public/css/fonts/iosevka-term-thin.woff2 and /dev/null differ diff --git a/public/css/fonts/lora-regular.ttf b/public/css/fonts/lora-regular.ttf deleted file mode 100644 index 42f137a..0000000 Binary files a/public/css/fonts/lora-regular.ttf and /dev/null differ diff --git a/public/css/fonts/symbola.ttf b/public/css/fonts/symbola.ttf deleted file mode 100644 index d1bddac..0000000 Binary files a/public/css/fonts/symbola.ttf and /dev/null differ diff --git a/public/css/resume.css b/public/css/resume.css deleted file mode 100644 index 210ff31..0000000 --- a/public/css/resume.css +++ /dev/null @@ -1,3 +0,0 @@ -html { - background: white -} diff --git a/public/css/styles.sass b/public/css/styles.sass deleted file mode 100644 index 3cc7c6e..0000000 --- a/public/css/styles.sass +++ /dev/null @@ -1,48 +0,0 @@ -@charset "utf-8" -/*! bulma.io v0.7.4 | MIT License | github.com/jgthms/bulma */ - -// primary colors -$balboa: hsl(196, 63%, 27%); - -/* coolors.co/193a44-ffffff-1c5d99-639fab-bbcde5 */ -// $white: hsl(0%, 0%, 100%); -$lapis-lazuli: hsl(209%, 69%, 35%); -$cadet-blue: hsl(190%, 30%, 53%); -$pale-aqua: hsl(214%, 45%, 82%); - -/* coolors.co/193a44-dcedff-94b0da-8f91a2-505a5b */ -//$azurish-white: hsl(211%, 100%, 93%); -//$light-cobalt-blue: hsl(216%, 49%, 72%); -//$gray-blue: hsl(234%, 9%, 60%); -//$feldgrau: hsl(185%, 6%, 34%); - -// Derived colors -$primary: $balboa; -$info: $lapis-lazuli; -$link: $lapis-lazuli; -$success: $cadet-blue; -//$warning: -//$danger: -$light: $pale-aqua; -//$dark: - -// Custom fonts -@font-face - font-family: "lora" - src: url("/public/css/fonts/lora-regular.ttf") format("truetype") -@font-face - font-family: "iosevka" - src: url("/public/css/fonts/iosevka-term-slab-regular.ttf") format("truetype") - -$family-serif: "lora", serif; -$family-primary: $family-serif; -$family-monospace: "iosevka", monospace; -$family-code: $family-monospace; - -@import "_sass/utilities/_all"; -@import "_sass/base/_all"; -@import "_sass/elements/_all"; -@import "_sass/components/_all"; -@import "_sass/grid/_all"; -@import "_sass/layout/_all"; -//@import "animate.css"; diff --git a/public/images/logo.png b/public/images/logo.png deleted file mode 100644 index 549bd0e..0000000 Binary files a/public/images/logo.png and /dev/null differ diff --git a/public/images/logo_diag.png b/public/images/logo_diag.png deleted file mode 100644 index fa302b6..0000000 Binary files a/public/images/logo_diag.png and /dev/null differ diff --git a/styles/_sass/.DS_Store b/styles/_sass/.DS_Store new file mode 100644 index 0000000..3aa8e90 Binary files /dev/null and b/styles/_sass/.DS_Store differ diff --git a/styles/_sass/base/_all.sass b/styles/_sass/base/_all.sass new file mode 100644 index 0000000..e913d6b --- /dev/null +++ b/styles/_sass/base/_all.sass @@ -0,0 +1,5 @@ +@charset "utf-8" + +@import "minireset.sass" +@import "generic.sass" +@import "helpers.sass" diff --git a/styles/_sass/base/generic.sass b/styles/_sass/base/generic.sass new file mode 100644 index 0000000..42a3d88 --- /dev/null +++ b/styles/_sass/base/generic.sass @@ -0,0 +1,130 @@ +$body-background-color: $white !default +$body-size: 16px !default +$body-rendering: optimizeLegibility !default +$body-family: $family-primary !default +$body-color: $text !default +$body-weight: $weight-normal !default +$body-line-height: 1.5 !default + +$code-family: $family-code !default +$code-padding: 0.25em 0.5em 0.25em !default +$code-weight: normal !default +$code-size: 0.875em !default + +$hr-background-color: $background !default +$hr-height: 2px !default +$hr-margin: 1.5rem 0 !default + +$strong-color: $text-strong !default +$strong-weight: $weight-bold !default + +html + background-color: $body-background-color + font-size: $body-size + -moz-osx-font-smoothing: grayscale + -webkit-font-smoothing: antialiased + min-width: 300px + overflow-x: hidden + overflow-y: scroll + text-rendering: $body-rendering + text-size-adjust: 100% + +article, +aside, +figure, +footer, +header, +hgroup, +section + display: block + +body, +button, +input, +select, +textarea + font-family: $body-family + +code, +pre + -moz-osx-font-smoothing: auto + -webkit-font-smoothing: auto + font-family: $code-family + +body + color: $body-color + font-size: 1rem + font-weight: $body-weight + line-height: $body-line-height + +// Inline + +a + color: $link + cursor: pointer + text-decoration: none + strong + color: currentColor + &:hover + color: $link-hover + +code + background-color: $code-background + color: $code + font-size: $code-size + font-weight: $code-weight + padding: $code-padding + +hr + background-color: $hr-background-color + border: none + display: block + height: $hr-height + margin: $hr-margin + +img + height: auto + max-width: 100% + +input[type="checkbox"], +input[type="radio"] + vertical-align: baseline + +small + font-size: 0.875em + +span + font-style: inherit + font-weight: inherit + +strong + color: $strong-color + font-weight: $strong-weight + +// Block + +fieldset + border: none + +pre + +overflow-touch + background-color: $pre-background + color: $pre + font-size: 0.875em + overflow-x: auto + padding: 1.25rem 1.5rem + white-space: pre + word-wrap: normal + code + background-color: transparent + color: currentColor + font-size: 1em + padding: 0 + +table + td, + th + text-align: left + vertical-align: top + th + color: $text-strong diff --git a/styles/_sass/base/helpers.sass b/styles/_sass/base/helpers.sass new file mode 100644 index 0000000..17fdf15 --- /dev/null +++ b/styles/_sass/base/helpers.sass @@ -0,0 +1,276 @@ +// Float + +.is-clearfix + +clearfix + +.is-pulled-left + float: left !important + +.is-pulled-right + float: right !important + +// Overflow + +.is-clipped + overflow: hidden !important + +// Overlay + +.is-overlay + @extend %overlay + +// Typography + +=typography-size($target:'') + @each $size in $sizes + $i: index($sizes, $size) + .is-size-#{$i}#{if($target == '', '', '-' + $target)} + font-size: $size !important + ++typography-size() + ++mobile + +typography-size('mobile') + ++tablet + +typography-size('tablet') + ++touch + +typography-size('touch') + ++desktop + +typography-size('desktop') + ++widescreen + +typography-size('widescreen') + ++fullhd + +typography-size('fullhd') + +$alignments: ('centered': 'center', 'justified': 'justify', 'left': 'left', 'right': 'right') + +@each $alignment, $text-align in $alignments + .has-text-#{$alignment} + text-align: #{$text-align} !important + +@each $alignment, $text-align in $alignments + +mobile + .has-text-#{$alignment}-mobile + text-align: #{$text-align} !important + +tablet + .has-text-#{$alignment}-tablet + text-align: #{$text-align} !important + +tablet-only + .has-text-#{$alignment}-tablet-only + text-align: #{$text-align} !important + +touch + .has-text-#{$alignment}-touch + text-align: #{$text-align} !important + +desktop + .has-text-#{$alignment}-desktop + text-align: #{$text-align} !important + +desktop-only + .has-text-#{$alignment}-desktop-only + text-align: #{$text-align} !important + +widescreen + .has-text-#{$alignment}-widescreen + text-align: #{$text-align} !important + +widescreen-only + .has-text-#{$alignment}-widescreen-only + text-align: #{$text-align} !important + +fullhd + .has-text-#{$alignment}-fullhd + text-align: #{$text-align} !important + +.is-capitalized + text-transform: capitalize !important + +.is-lowercase + text-transform: lowercase !important + +.is-uppercase + text-transform: uppercase !important + +.is-italic + font-style: italic !important + +@each $name, $pair in $colors + $color: nth($pair, 1) + .has-text-#{$name} + color: $color !important + a.has-text-#{$name} + &:hover, + &:focus + color: darken($color, 10%) !important + .has-background-#{$name} + background-color: $color !important + +@each $name, $shade in $shades + .has-text-#{$name} + color: $shade !important + .has-background-#{$name} + background-color: $shade !important + +.has-text-weight-light + font-weight: $weight-light !important +.has-text-weight-normal + font-weight: $weight-normal !important +.has-text-weight-semibold + font-weight: $weight-semibold !important +.has-text-weight-bold + font-weight: $weight-bold !important + +.is-family-primary + font-family: $family-primary !important + +.is-family-secondary + font-family: $family-secondary !important + +.is-family-sans-serif + font-family: $family-sans-serif !important + +.is-family-monospace + font-family: $family-monospace !important + +.is-family-code + font-family: $family-code !important + +// Visibility + +$displays: 'block' 'flex' 'inline' 'inline-block' 'inline-flex' + +@each $display in $displays + .is-#{$display} + display: #{$display} !important + +mobile + .is-#{$display}-mobile + display: #{$display} !important + +tablet + .is-#{$display}-tablet + display: #{$display} !important + +tablet-only + .is-#{$display}-tablet-only + display: #{$display} !important + +touch + .is-#{$display}-touch + display: #{$display} !important + +desktop + .is-#{$display}-desktop + display: #{$display} !important + +desktop-only + .is-#{$display}-desktop-only + display: #{$display} !important + +widescreen + .is-#{$display}-widescreen + display: #{$display} !important + +widescreen-only + .is-#{$display}-widescreen-only + display: #{$display} !important + +fullhd + .is-#{$display}-fullhd + display: #{$display} !important + +.is-hidden + display: none !important + +.is-sr-only + border: none !important + clip: rect(0, 0, 0, 0) !important + height: 0.01em !important + overflow: hidden !important + padding: 0 !important + position: absolute !important + white-space: nowrap !important + width: 0.01em !important + ++mobile + .is-hidden-mobile + display: none !important + ++tablet + .is-hidden-tablet + display: none !important + ++tablet-only + .is-hidden-tablet-only + display: none !important + ++touch + .is-hidden-touch + display: none !important + ++desktop + .is-hidden-desktop + display: none !important + ++desktop-only + .is-hidden-desktop-only + display: none !important + ++widescreen + .is-hidden-widescreen + display: none !important + ++widescreen-only + .is-hidden-widescreen-only + display: none !important + ++fullhd + .is-hidden-fullhd + display: none !important + +.is-invisible + visibility: hidden !important + ++mobile + .is-invisible-mobile + visibility: hidden !important + ++tablet + .is-invisible-tablet + visibility: hidden !important + ++tablet-only + .is-invisible-tablet-only + visibility: hidden !important + ++touch + .is-invisible-touch + visibility: hidden !important + ++desktop + .is-invisible-desktop + visibility: hidden !important + ++desktop-only + .is-invisible-desktop-only + visibility: hidden !important + ++widescreen + .is-invisible-widescreen + visibility: hidden !important + ++widescreen-only + .is-invisible-widescreen-only + visibility: hidden !important + ++fullhd + .is-invisible-fullhd + visibility: hidden !important + +// Other + +.is-marginless + margin: 0 !important + +.is-paddingless + padding: 0 !important + +.is-radiusless + border-radius: 0 !important + +.is-shadowless + box-shadow: none !important + +.is-unselectable + @extend %unselectable diff --git a/styles/_sass/base/minireset.sass b/styles/_sass/base/minireset.sass new file mode 100644 index 0000000..9c34a89 --- /dev/null +++ b/styles/_sass/base/minireset.sass @@ -0,0 +1,84 @@ +/*! minireset.css v0.0.4 | MIT License | github.com/jgthms/minireset.css */ +// Blocks +html, +body, +p, +ol, +ul, +li, +dl, +dt, +dd, +blockquote, +figure, +fieldset, +legend, +textarea, +pre, +iframe, +hr, +h1, +h2, +h3, +h4, +h5, +h6 + margin: 0 + padding: 0 + +// Headings +h1, +h2, +h3, +h4, +h5, +h6 + font-size: 100% + font-weight: normal + +// List +ul + list-style: none + +// Form +button, +input, +select, +textarea + margin: 0 + +// Box sizing +html + box-sizing: border-box + +* + &, + &::before, + &::after + box-sizing: inherit + +// Media +img, +embed, +iframe, +object, +video + height: auto + max-width: 100% + +audio + max-width: 100% + +// Iframe +iframe + border: 0 + +// Table +table + border-collapse: collapse + border-spacing: 0 + +td, +th + padding: 0 + text-align: left diff --git a/styles/_sass/components/_all.sass b/styles/_sass/components/_all.sass new file mode 100644 index 0000000..88fd45c --- /dev/null +++ b/styles/_sass/components/_all.sass @@ -0,0 +1,15 @@ +@charset "utf-8" + +@import "breadcrumb.sass" +@import "card.sass" +@import "dropdown.sass" +@import "level.sass" +@import "list.sass" +@import "media.sass" +@import "menu.sass" +@import "message.sass" +@import "modal.sass" +@import "navbar.sass" +@import "pagination.sass" +@import "panel.sass" +@import "tabs.sass" diff --git a/styles/_sass/components/breadcrumb.sass b/styles/_sass/components/breadcrumb.sass new file mode 100644 index 0000000..bcbd15b --- /dev/null +++ b/styles/_sass/components/breadcrumb.sass @@ -0,0 +1,75 @@ +$breadcrumb-item-color: $link !default +$breadcrumb-item-hover-color: $link-hover !default +$breadcrumb-item-active-color: $text-strong !default + +$breadcrumb-item-padding-vertical: 0 !default +$breadcrumb-item-padding-horizontal: 0.75em !default + +$breadcrumb-item-separator-color: $grey-light !default + +.breadcrumb + @extend %block + @extend %unselectable + font-size: $size-normal + white-space: nowrap + a + align-items: center + color: $breadcrumb-item-color + display: flex + justify-content: center + padding: $breadcrumb-item-padding-vertical $breadcrumb-item-padding-horizontal + &:hover + color: $breadcrumb-item-hover-color + li + align-items: center + display: flex + &:first-child a + padding-left: 0 + &.is-active + a + color: $breadcrumb-item-active-color + cursor: default + pointer-events: none + & + li::before + color: $breadcrumb-item-separator-color + content: "\0002f" + ul, + ol + align-items: flex-start + display: flex + flex-wrap: wrap + justify-content: flex-start + .icon + &:first-child + margin-right: 0.5em + &:last-child + margin-left: 0.5em + // Alignment + &.is-centered + ol, + ul + justify-content: center + &.is-right + ol, + ul + justify-content: flex-end + // Sizes + &.is-small + font-size: $size-small + &.is-medium + font-size: $size-medium + &.is-large + font-size: $size-large + // Styles + &.has-arrow-separator + li + li::before + content: "\02192" + &.has-bullet-separator + li + li::before + content: "\02022" + &.has-dot-separator + li + li::before + content: "\000b7" + &.has-succeeds-separator + li + li::before + content: "\0227B" diff --git a/styles/_sass/components/card.sass b/styles/_sass/components/card.sass new file mode 100644 index 0000000..ff12395 --- /dev/null +++ b/styles/_sass/components/card.sass @@ -0,0 +1,74 @@ +$card-color: $text !default +$card-background-color: $white !default +$card-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default + +$card-header-background-color: transparent !default +$card-header-color: $text-strong !default +$card-header-shadow: 0 1px 2px rgba($black, 0.1) !default +$card-header-weight: $weight-bold !default + +$card-content-background-color: transparent !default + +$card-footer-background-color: transparent !default +$card-footer-border-top: 1px solid $border !default + +.card + background-color: $card-background-color + box-shadow: $card-shadow + color: $card-color + max-width: 100% + position: relative + +.card-header + background-color: $card-header-background-color + align-items: stretch + box-shadow: $card-header-shadow + display: flex + +.card-header-title + align-items: center + color: $card-header-color + display: flex + flex-grow: 1 + font-weight: $card-header-weight + padding: 0.75rem + &.is-centered + justify-content: center + +.card-header-icon + align-items: center + cursor: pointer + display: flex + justify-content: center + padding: 0.75rem + +.card-image + display: block + position: relative + +.card-content + background-color: $card-content-background-color + padding: 1.5rem + +.card-footer + background-color: $card-footer-background-color + border-top: $card-footer-border-top + align-items: stretch + display: flex + +.card-footer-item + align-items: center + display: flex + flex-basis: 0 + flex-grow: 1 + flex-shrink: 0 + justify-content: center + padding: 0.75rem + &:not(:last-child) + border-right: $card-footer-border-top + +// Combinations + +.card + .media:not(:last-child) + margin-bottom: 0.75rem diff --git a/styles/_sass/components/dropdown.sass b/styles/_sass/components/dropdown.sass new file mode 100644 index 0000000..aad663a --- /dev/null +++ b/styles/_sass/components/dropdown.sass @@ -0,0 +1,77 @@ +$dropdown-content-background-color: $white !default +$dropdown-content-arrow: $link !default +$dropdown-content-offset: 4px !default +$dropdown-content-radius: $radius !default +$dropdown-content-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default +$dropdown-content-z: 20 !default + +$dropdown-item-color: $grey-dark !default +$dropdown-item-hover-color: $black !default +$dropdown-item-hover-background-color: $background !default +$dropdown-item-active-color: $link-invert !default +$dropdown-item-active-background-color: $link !default + +$dropdown-divider-background-color: $border !default + +.dropdown + display: inline-flex + position: relative + vertical-align: top + &.is-active, + &.is-hoverable:hover + .dropdown-menu + display: block + &.is-right + .dropdown-menu + left: auto + right: 0 + &.is-up + .dropdown-menu + bottom: 100% + padding-bottom: $dropdown-content-offset + padding-top: initial + top: auto + +.dropdown-menu + display: none + left: 0 + min-width: 12rem + padding-top: $dropdown-content-offset + position: absolute + top: 100% + z-index: $dropdown-content-z + +.dropdown-content + background-color: $dropdown-content-background-color + border-radius: $dropdown-content-radius + box-shadow: $dropdown-content-shadow + padding-bottom: 0.5rem + padding-top: 0.5rem + +.dropdown-item + color: $dropdown-item-color + display: block + font-size: 0.875rem + line-height: 1.5 + padding: 0.375rem 1rem + position: relative + +a.dropdown-item, +button.dropdown-item + padding-right: 3rem + text-align: left + white-space: nowrap + width: 100% + &:hover + background-color: $dropdown-item-hover-background-color + color: $dropdown-item-hover-color + &.is-active + background-color: $dropdown-item-active-background-color + color: $dropdown-item-active-color + +.dropdown-divider + background-color: $dropdown-divider-background-color + border: none + display: block + height: 1px + margin: 0.5rem 0 diff --git a/styles/_sass/components/level.sass b/styles/_sass/components/level.sass new file mode 100644 index 0000000..a3b7716 --- /dev/null +++ b/styles/_sass/components/level.sass @@ -0,0 +1,75 @@ +.level + @extend %block + align-items: center + justify-content: space-between + code + border-radius: $radius + img + display: inline-block + vertical-align: top + // Modifiers + &.is-mobile + display: flex + .level-left, + .level-right + display: flex + .level-left + .level-right + margin-top: 0 + .level-item + &:not(:last-child) + margin-bottom: 0 + margin-right: 0.75rem + &:not(.is-narrow) + flex-grow: 1 + // Responsiveness + +tablet + display: flex + & > .level-item + &:not(.is-narrow) + flex-grow: 1 + +.level-item + align-items: center + display: flex + flex-basis: auto + flex-grow: 0 + flex-shrink: 0 + justify-content: center + .title, + .subtitle + margin-bottom: 0 + // Responsiveness + +mobile + &:not(:last-child) + margin-bottom: 0.75rem + +.level-left, +.level-right + flex-basis: auto + flex-grow: 0 + flex-shrink: 0 + .level-item + // Modifiers + &.is-flexible + flex-grow: 1 + // Responsiveness + +tablet + &:not(:last-child) + margin-right: 0.75rem + +.level-left + align-items: center + justify-content: flex-start + // Responsiveness + +mobile + & + .level-right + margin-top: 1.5rem + +tablet + display: flex + +.level-right + align-items: center + justify-content: flex-end + // Responsiveness + +tablet + display: flex diff --git a/styles/_sass/components/list.sass b/styles/_sass/components/list.sass new file mode 100644 index 0000000..eccd034 --- /dev/null +++ b/styles/_sass/components/list.sass @@ -0,0 +1,39 @@ +$list-background-color: $white !default +$list-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default +$list-radius: $radius !default + +$list-item-border: 1px solid $border !default +$list-item-color: $text !default +$list-item-active-background-color: $link !default +$list-item-active-color: $link-invert !default +$list-item-hover-background-color: $background !default + +.list + @extend %block + background-color: $list-background-color + border-radius: $list-radius + box-shadow: $list-shadow + // &.is-hoverable > .list-item:hover:not(.is-active) + // background-color: $list-item-hover-background-color + // cursor: pointer + +.list-item + display: block + padding: 0.5em 1em + &:not(a) + color: $list-item-color + &:first-child + border-top-left-radius: $list-radius + border-top-right-radius: $list-radius + &:last-child + border-top-left-radius: $list-radius + border-top-right-radius: $list-radius + &:not(:last-child) + border-bottom: $list-item-border + &.is-active + background-color: $list-item-active-background-color + color: $list-item-active-color + +a.list-item + background-color: $list-item-hover-background-color + cursor: pointer \ No newline at end of file diff --git a/styles/_sass/components/media.sass b/styles/_sass/components/media.sass new file mode 100644 index 0000000..e8542d8 --- /dev/null +++ b/styles/_sass/components/media.sass @@ -0,0 +1,48 @@ +.media + align-items: flex-start + display: flex + text-align: left + .content:not(:last-child) + margin-bottom: 0.75rem + .media + border-top: 1px solid rgba($border, 0.5) + display: flex + padding-top: 0.75rem + .content:not(:last-child), + .control:not(:last-child) + margin-bottom: 0.5rem + .media + padding-top: 0.5rem + & + .media + margin-top: 0.5rem + & + .media + border-top: 1px solid rgba($border, 0.5) + margin-top: 1rem + padding-top: 1rem + // Sizes + &.is-large + & + .media + margin-top: 1.5rem + padding-top: 1.5rem + +.media-left, +.media-right + flex-basis: auto + flex-grow: 0 + flex-shrink: 0 + +.media-left + margin-right: 1rem + +.media-right + margin-left: 1rem + +.media-content + flex-basis: auto + flex-grow: 1 + flex-shrink: 1 + text-align: left + ++mobile + .media-content + overflow-x: auto diff --git a/styles/_sass/components/menu.sass b/styles/_sass/components/menu.sass new file mode 100644 index 0000000..727df36 --- /dev/null +++ b/styles/_sass/components/menu.sass @@ -0,0 +1,50 @@ +$menu-item-color: $text !default +$menu-item-radius: $radius-small !default +$menu-item-hover-color: $text-strong !default +$menu-item-hover-background-color: $background !default +$menu-item-active-color: $link-invert !default +$menu-item-active-background-color: $link !default + +$menu-list-border-left: 1px solid $border !default + +$menu-label-color: $text-light !default + +.menu + font-size: $size-normal + // Sizes + &.is-small + font-size: $size-small + &.is-medium + font-size: $size-medium + &.is-large + font-size: $size-large + +.menu-list + line-height: 1.25 + a + border-radius: $menu-item-radius + color: $menu-item-color + display: block + padding: 0.5em 0.75em + &:hover + background-color: $menu-item-hover-background-color + color: $menu-item-hover-color + // Modifiers + &.is-active + background-color: $menu-item-active-background-color + color: $menu-item-active-color + li + ul + border-left: $menu-list-border-left + margin: 0.75em + padding-left: 0.75em + +.menu-label + color: $menu-label-color + font-size: 0.75em + letter-spacing: 0.1em + text-transform: uppercase + &:not(:first-child) + margin-top: 1em + &:not(:last-child) + margin-bottom: 1em diff --git a/styles/_sass/components/message.sass b/styles/_sass/components/message.sass new file mode 100644 index 0000000..badac5d --- /dev/null +++ b/styles/_sass/components/message.sass @@ -0,0 +1,86 @@ +$message-background-color: $background !default +$message-radius: $radius !default + +$message-header-background-color: $text !default +$message-header-color: $text-invert !default +$message-header-weight: $weight-bold !default +$message-header-padding: 0.75em 1em !default +$message-header-radius: $radius !default + +$message-body-border-color: $border !default +$message-body-border-width: 0 0 0 4px !default +$message-body-color: $text !default +$message-body-padding: 1.25em 1.5em !default +$message-body-radius: $radius !default + +$message-body-pre-background-color: $white !default +$message-body-pre-code-background-color: transparent !default + +$message-header-body-border-width: 0 !default + +.message + @extend %block + background-color: $message-background-color + border-radius: $message-radius + font-size: $size-normal + strong + color: currentColor + a:not(.button):not(.tag):not(.dropdown-item) + color: currentColor + text-decoration: underline + // Sizes + &.is-small + font-size: $size-small + &.is-medium + font-size: $size-medium + &.is-large + font-size: $size-large + // Colors + @each $name, $pair in $colors + $color: nth($pair, 1) + $color-invert: nth($pair, 2) + $color-lightning: max((100% - lightness($color)) - 2%, 0%) + $color-luminance: colorLuminance($color) + $darken-percentage: $color-luminance * 70% + $desaturate-percentage: $color-luminance * 30% + &.is-#{$name} + background-color: lighten($color, $color-lightning) + .message-header + background-color: $color + color: $color-invert + .message-body + border-color: $color + color: desaturate(darken($color, $darken-percentage), $desaturate-percentage) + +.message-header + align-items: center + background-color: $message-header-background-color + border-radius: $message-header-radius $message-header-radius 0 0 + color: $message-header-color + display: flex + font-weight: $message-header-weight + justify-content: space-between + line-height: 1.25 + padding: $message-header-padding + position: relative + .delete + flex-grow: 0 + flex-shrink: 0 + margin-left: 0.75em + & + .message-body + border-width: $message-header-body-border-width + border-top-left-radius: 0 + border-top-right-radius: 0 + +.message-body + border-color: $message-body-border-color + border-radius: $message-body-radius + border-style: solid + border-width: $message-body-border-width + color: $message-body-color + padding: $message-body-padding + code, + pre + background-color: $message-body-pre-background-color + pre code + background-color: $message-body-pre-code-background-color diff --git a/styles/_sass/components/modal.sass b/styles/_sass/components/modal.sass new file mode 100644 index 0000000..b6fb1a1 --- /dev/null +++ b/styles/_sass/components/modal.sass @@ -0,0 +1,113 @@ +$modal-z: 40 !default + +$modal-background-background-color: rgba($black, 0.86) !default + +$modal-content-width: 640px !default +$modal-content-margin-mobile: 20px !default +$modal-content-spacing-mobile: 160px !default +$modal-content-spacing-tablet: 40px !default + +$modal-close-dimensions: 40px !default +$modal-close-right: 20px !default +$modal-close-top: 20px !default + +$modal-card-spacing: 40px !default + +$modal-card-head-background-color: $background !default +$modal-card-head-border-bottom: 1px solid $border !default +$modal-card-head-padding: 20px !default +$modal-card-head-radius: $radius-large !default + +$modal-card-title-color: $text-strong !default +$modal-card-title-line-height: 1 !default +$modal-card-title-size: $size-4 !default + +$modal-card-foot-radius: $radius-large !default +$modal-card-foot-border-top: 1px solid $border !default + +$modal-card-body-background-color: $white !default +$modal-card-body-padding: 20px !default + +.modal + @extend %overlay + align-items: center + display: none + flex-direction: column + justify-content: center + overflow: hidden + position: fixed + z-index: $modal-z + // Modifiers + &.is-active + display: flex + +.modal-background + @extend %overlay + background-color: $modal-background-background-color + +.modal-content, +.modal-card + margin: 0 $modal-content-margin-mobile + max-height: calc(100vh - #{$modal-content-spacing-mobile}) + overflow: auto + position: relative + width: 100% + // Responsiveness + +tablet + margin: 0 auto + max-height: calc(100vh - #{$modal-content-spacing-tablet}) + width: $modal-content-width + +.modal-close + @extend %delete + background: none + height: $modal-close-dimensions + position: fixed + right: $modal-close-right + top: $modal-close-top + width: $modal-close-dimensions + +.modal-card + display: flex + flex-direction: column + max-height: calc(100vh - #{$modal-card-spacing}) + overflow: hidden + -ms-overflow-y: visible + +.modal-card-head, +.modal-card-foot + align-items: center + background-color: $modal-card-head-background-color + display: flex + flex-shrink: 0 + justify-content: flex-start + padding: $modal-card-head-padding + position: relative + +.modal-card-head + border-bottom: $modal-card-head-border-bottom + border-top-left-radius: $modal-card-head-radius + border-top-right-radius: $modal-card-head-radius + +.modal-card-title + color: $modal-card-title-color + flex-grow: 1 + flex-shrink: 0 + font-size: $modal-card-title-size + line-height: $modal-card-title-line-height + +.modal-card-foot + border-bottom-left-radius: $modal-card-foot-radius + border-bottom-right-radius: $modal-card-foot-radius + border-top: $modal-card-foot-border-top + .button + &:not(:last-child) + margin-right: 10px + +.modal-card-body + +overflow-touch + background-color: $modal-card-body-background-color + flex-grow: 1 + flex-shrink: 1 + overflow: auto + padding: $modal-card-body-padding diff --git a/styles/_sass/components/navbar.sass b/styles/_sass/components/navbar.sass new file mode 100644 index 0000000..dc90dd9 --- /dev/null +++ b/styles/_sass/components/navbar.sass @@ -0,0 +1,428 @@ +$navbar-background-color: $white !default +$navbar-box-shadow-size: 0 2px 0 0 !default +$navbar-box-shadow-color: $background !default +$navbar-height: 3.25rem !default +$navbar-padding-vertical: 1rem !default +$navbar-padding-horizontal: 2rem !default +$navbar-z: 30 !default +$navbar-fixed-z: 30 !default + +$navbar-item-color: $grey-dark !default +$navbar-item-hover-color: $link !default +$navbar-item-hover-background-color: $white-bis !default +$navbar-item-active-color: $black !default +$navbar-item-active-background-color: transparent !default +$navbar-item-img-max-height: 1.75rem !default + +$navbar-burger-color: $navbar-item-color !default + +$navbar-tab-hover-background-color: transparent !default +$navbar-tab-hover-border-bottom-color: $link !default +$navbar-tab-active-color: $link !default +$navbar-tab-active-background-color: transparent !default +$navbar-tab-active-border-bottom-color: $link !default +$navbar-tab-active-border-bottom-style: solid !default +$navbar-tab-active-border-bottom-width: 3px !default + +$navbar-dropdown-background-color: $white !default +$navbar-dropdown-border-top: 2px solid $border !default +$navbar-dropdown-offset: -4px !default +$navbar-dropdown-arrow: $link !default +$navbar-dropdown-radius: $radius-large !default +$navbar-dropdown-z: 20 !default + +$navbar-dropdown-boxed-radius: $radius-large !default +$navbar-dropdown-boxed-shadow: 0 8px 8px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default + +$navbar-dropdown-item-hover-color: $black !default +$navbar-dropdown-item-hover-background-color: $background !default +$navbar-dropdown-item-active-color: $link !default +$navbar-dropdown-item-active-background-color: $background !default + +$navbar-divider-background-color: $background !default +$navbar-divider-height: 2px !default + +$navbar-bottom-box-shadow-size: 0 -2px 0 0 !default + +$navbar-breakpoint: $desktop !default + +=navbar-fixed + left: 0 + position: fixed + right: 0 + z-index: $navbar-fixed-z + +.navbar + background-color: $navbar-background-color + min-height: $navbar-height + position: relative + z-index: $navbar-z + @each $name, $pair in $colors + $color: nth($pair, 1) + $color-invert: nth($pair, 2) + &.is-#{$name} + background-color: $color + color: $color-invert + .navbar-brand + & > .navbar-item, + .navbar-link + color: $color-invert + & > a.navbar-item, + .navbar-link + &:hover, + &.is-active + background-color: darken($color, 5%) + color: $color-invert + .navbar-link + &::after + border-color: $color-invert + .navbar-burger + color: $color-invert + +from($navbar-breakpoint) + .navbar-start, + .navbar-end + & > .navbar-item, + .navbar-link + color: $color-invert + & > a.navbar-item, + .navbar-link + &:hover, + &.is-active + background-color: darken($color, 5%) + color: $color-invert + .navbar-link + &::after + border-color: $color-invert + .navbar-item.has-dropdown:hover .navbar-link, + .navbar-item.has-dropdown.is-active .navbar-link + background-color: darken($color, 5%) + color: $color-invert + .navbar-dropdown + a.navbar-item + &.is-active + background-color: $color + color: $color-invert + & > .container + align-items: stretch + display: flex + min-height: $navbar-height + width: 100% + &.has-shadow + box-shadow: $navbar-box-shadow-size $navbar-box-shadow-color + &.is-fixed-bottom, + &.is-fixed-top + +navbar-fixed + &.is-fixed-bottom + bottom: 0 + &.has-shadow + box-shadow: $navbar-bottom-box-shadow-size $navbar-box-shadow-color + &.is-fixed-top + top: 0 + +html, +body + &.has-navbar-fixed-top + padding-top: $navbar-height + &.has-navbar-fixed-bottom + padding-bottom: $navbar-height + +.navbar-brand, +.navbar-tabs + align-items: stretch + display: flex + flex-shrink: 0 + min-height: $navbar-height + +.navbar-brand + a.navbar-item + &:hover + background-color: transparent + +.navbar-tabs + +overflow-touch + max-width: 100vw + overflow-x: auto + overflow-y: hidden + +.navbar-burger + color: $navbar-burger-color + +hamburger($navbar-height) + margin-left: auto + +.navbar-menu + display: none + +.navbar-item, +.navbar-link + color: $navbar-item-color + display: block + line-height: 1.5 + padding: 0.5rem 0.75rem + position: relative + .icon + &:only-child + margin-left: -0.25rem + margin-right: -0.25rem + +a.navbar-item, +.navbar-link + cursor: pointer + &:hover, + &.is-active + background-color: $navbar-item-hover-background-color + color: $navbar-item-hover-color + +.navbar-item + display: block + flex-grow: 0 + flex-shrink: 0 + img + max-height: $navbar-item-img-max-height + &.has-dropdown + padding: 0 + &.is-expanded + flex-grow: 1 + flex-shrink: 1 + &.is-tab + border-bottom: 1px solid transparent + min-height: $navbar-height + padding-bottom: calc(0.5rem - 1px) + &:hover + background-color: $navbar-tab-hover-background-color + border-bottom-color: $navbar-tab-hover-border-bottom-color + &.is-active + background-color: $navbar-tab-active-background-color + border-bottom-color: $navbar-tab-active-border-bottom-color + border-bottom-style: $navbar-tab-active-border-bottom-style + border-bottom-width: $navbar-tab-active-border-bottom-width + color: $navbar-tab-active-color + padding-bottom: calc(0.5rem - #{$navbar-tab-active-border-bottom-width}) + +.navbar-content + flex-grow: 1 + flex-shrink: 1 + +.navbar-link:not(.is-arrowless) + padding-right: 2.5em + &::after + @extend %arrow + border-color: $navbar-dropdown-arrow + margin-top: -0.375em + right: 1.125em + +.navbar-dropdown + font-size: 0.875rem + padding-bottom: 0.5rem + padding-top: 0.5rem + .navbar-item + padding-left: 1.5rem + padding-right: 1.5rem + +.navbar-divider + background-color: $navbar-divider-background-color + border: none + display: none + height: $navbar-divider-height + margin: 0.5rem 0 + ++until($navbar-breakpoint) + .navbar > .container + display: block + .navbar-brand, + .navbar-tabs + .navbar-item + align-items: center + display: flex + .navbar-link + &::after + display: none + .navbar-menu + background-color: $navbar-background-color + box-shadow: 0 8px 16px rgba($black, 0.1) + padding: 0.5rem 0 + &.is-active + display: block + // Fixed navbar + .navbar + &.is-fixed-bottom-touch, + &.is-fixed-top-touch + +navbar-fixed + &.is-fixed-bottom-touch + bottom: 0 + &.has-shadow + box-shadow: 0 -2px 3px rgba($black, 0.1) + &.is-fixed-top-touch + top: 0 + &.is-fixed-top, + &.is-fixed-top-touch + .navbar-menu + +overflow-touch + max-height: calc(100vh - #{$navbar-height}) + overflow: auto + html, + body + &.has-navbar-fixed-top-touch + padding-top: $navbar-height + &.has-navbar-fixed-bottom-touch + padding-bottom: $navbar-height + ++from($navbar-breakpoint) + .navbar, + .navbar-menu, + .navbar-start, + .navbar-end + align-items: stretch + display: flex + .navbar + min-height: $navbar-height + &.is-spaced + padding: $navbar-padding-vertical $navbar-padding-horizontal + .navbar-start, + .navbar-end + align-items: center + a.navbar-item, + .navbar-link + border-radius: $radius + &.is-transparent + a.navbar-item, + .navbar-link + &:hover, + &.is-active + background-color: transparent !important + .navbar-item.has-dropdown + &.is-active, + &.is-hoverable:hover + .navbar-link + background-color: transparent !important + .navbar-dropdown + a.navbar-item + &:hover + background-color: $navbar-dropdown-item-hover-background-color + color: $navbar-dropdown-item-hover-color + &.is-active + background-color: $navbar-dropdown-item-active-background-color + color: $navbar-dropdown-item-active-color + .navbar-burger + display: none + .navbar-item, + .navbar-link + align-items: center + display: flex + .navbar-item + display: flex + &.has-dropdown + align-items: stretch + &.has-dropdown-up + .navbar-link::after + transform: rotate(135deg) translate(0.25em, -0.25em) + .navbar-dropdown + border-bottom: $navbar-dropdown-border-top + border-radius: $navbar-dropdown-radius $navbar-dropdown-radius 0 0 + border-top: none + bottom: 100% + box-shadow: 0 -8px 8px rgba($black, 0.1) + top: auto + &.is-active, + &.is-hoverable:hover + .navbar-dropdown + display: block + .navbar.is-spaced &, + &.is-boxed + opacity: 1 + pointer-events: auto + transform: translateY(0) + .navbar-menu + flex-grow: 1 + flex-shrink: 0 + .navbar-start + justify-content: flex-start + margin-right: auto + .navbar-end + justify-content: flex-end + margin-left: auto + .navbar-dropdown + background-color: $navbar-dropdown-background-color + border-bottom-left-radius: $navbar-dropdown-radius + border-bottom-right-radius: $navbar-dropdown-radius + border-top: $navbar-dropdown-border-top + box-shadow: 0 8px 8px rgba($black, 0.1) + display: none + font-size: 0.875rem + left: 0 + min-width: 100% + position: absolute + top: 100% + z-index: $navbar-dropdown-z + .navbar-item + padding: 0.375rem 1rem + white-space: nowrap + a.navbar-item + padding-right: 3rem + &:hover + background-color: $navbar-dropdown-item-hover-background-color + color: $navbar-dropdown-item-hover-color + &.is-active + background-color: $navbar-dropdown-item-active-background-color + color: $navbar-dropdown-item-active-color + .navbar.is-spaced &, + &.is-boxed + border-radius: $navbar-dropdown-boxed-radius + border-top: none + box-shadow: $navbar-dropdown-boxed-shadow + display: block + opacity: 0 + pointer-events: none + top: calc(100% + (#{$navbar-dropdown-offset})) + transform: translateY(-5px) + transition-duration: $speed + transition-property: opacity, transform + &.is-right + left: auto + right: 0 + .navbar-divider + display: block + .navbar > .container, + .container > .navbar + .navbar-brand + margin-left: -.75rem + .navbar-menu + margin-right: -.75rem + // Fixed navbar + .navbar + &.is-fixed-bottom-desktop, + &.is-fixed-top-desktop + +navbar-fixed + &.is-fixed-bottom-desktop + bottom: 0 + &.has-shadow + box-shadow: 0 -2px 3px rgba($black, 0.1) + &.is-fixed-top-desktop + top: 0 + html, + body + &.has-navbar-fixed-top-desktop + padding-top: $navbar-height + &.has-navbar-fixed-bottom-desktop + padding-bottom: $navbar-height + &.has-spaced-navbar-fixed-top + padding-top: $navbar-height + ($navbar-padding-vertical * 2) + &.has-spaced-navbar-fixed-bottom + padding-bottom: $navbar-height + ($navbar-padding-vertical * 2) + // Hover/Active states + a.navbar-item, + .navbar-link + &.is-active + color: $navbar-item-active-color + &.is-active:not(:hover) + background-color: $navbar-item-active-background-color + .navbar-item.has-dropdown + &:hover, + &.is-active + .navbar-link + background-color: $navbar-item-hover-background-color + +// Combination + +.hero + &.is-fullheight-with-navbar + min-height: calc(100vh - #{$navbar-height}) diff --git a/styles/_sass/components/pagination.sass b/styles/_sass/components/pagination.sass new file mode 100644 index 0000000..9b8fd03 --- /dev/null +++ b/styles/_sass/components/pagination.sass @@ -0,0 +1,144 @@ +$pagination-color: $grey-darker !default +$pagination-border-color: $grey-lighter !default +$pagination-margin: -0.25rem !default +$pagination-min-width: $control-height !default + +$pagination-hover-color: $link-hover !default +$pagination-hover-border-color: $link-hover-border !default + +$pagination-focus-color: $link-focus !default +$pagination-focus-border-color: $link-focus-border !default + +$pagination-active-color: $link-active !default +$pagination-active-border-color: $link-active-border !default + +$pagination-disabled-color: $grey !default +$pagination-disabled-background-color: $grey-lighter !default +$pagination-disabled-border-color: $grey-lighter !default + +$pagination-current-color: $link-invert !default +$pagination-current-background-color: $link !default +$pagination-current-border-color: $link !default + +$pagination-ellipsis-color: $grey-light !default + +$pagination-shadow-inset: inset 0 1px 2px rgba($black, 0.2) + +.pagination + font-size: $size-normal + margin: $pagination-margin + // Sizes + &.is-small + font-size: $size-small + &.is-medium + font-size: $size-medium + &.is-large + font-size: $size-large + &.is-rounded + .pagination-previous, + .pagination-next + padding-left: 1em + padding-right: 1em + border-radius: $radius-rounded + .pagination-link + border-radius: $radius-rounded + +.pagination, +.pagination-list + align-items: center + display: flex + justify-content: center + text-align: center + +.pagination-previous, +.pagination-next, +.pagination-link, +.pagination-ellipsis + @extend %control + @extend %unselectable + font-size: 1em + padding-left: 0.5em + padding-right: 0.5em + justify-content: center + margin: 0.25rem + text-align: center + +.pagination-previous, +.pagination-next, +.pagination-link + border-color: $pagination-border-color + color: $pagination-color + min-width: $pagination-min-width + &:hover + border-color: $pagination-hover-border-color + color: $pagination-hover-color + &:focus + border-color: $pagination-focus-border-color + &:active + box-shadow: $pagination-shadow-inset + &[disabled] + background-color: $pagination-disabled-background-color + border-color: $pagination-disabled-border-color + box-shadow: none + color: $pagination-disabled-color + opacity: 0.5 + +.pagination-previous, +.pagination-next + padding-left: 0.75em + padding-right: 0.75em + white-space: nowrap + +.pagination-link + &.is-current + background-color: $pagination-current-background-color + border-color: $pagination-current-border-color + color: $pagination-current-color + +.pagination-ellipsis + color: $pagination-ellipsis-color + pointer-events: none + +.pagination-list + flex-wrap: wrap + ++mobile + .pagination + flex-wrap: wrap + .pagination-previous, + .pagination-next + flex-grow: 1 + flex-shrink: 1 + .pagination-list + li + flex-grow: 1 + flex-shrink: 1 + ++tablet + .pagination-list + flex-grow: 1 + flex-shrink: 1 + justify-content: flex-start + order: 1 + .pagination-previous + order: 2 + .pagination-next + order: 3 + .pagination + justify-content: space-between + &.is-centered + .pagination-previous + order: 1 + .pagination-list + justify-content: center + order: 2 + .pagination-next + order: 3 + &.is-right + .pagination-previous + order: 1 + .pagination-next + order: 2 + .pagination-list + justify-content: flex-end + order: 3 diff --git a/styles/_sass/components/panel.sass b/styles/_sass/components/panel.sass new file mode 100644 index 0000000..b9d339e --- /dev/null +++ b/styles/_sass/components/panel.sass @@ -0,0 +1,101 @@ +$panel-item-border: 1px solid $border !default + +$panel-heading-background-color: $background !default +$panel-heading-color: $text-strong !default +$panel-heading-line-height: 1.25 !default +$panel-heading-padding: 0.5em 0.75em !default +$panel-heading-radius: $radius !default +$panel-heading-size: 1.25em !default +$panel-heading-weight: $weight-light !default + +$panel-tab-border-bottom: 1px solid $border !default +$panel-tab-active-border-bottom-color: $link-active-border !default +$panel-tab-active-color: $link-active !default + +$panel-list-item-color: $text !default +$panel-list-item-hover-color: $link !default + +$panel-block-color: $text-strong !default +$panel-block-hover-background-color: $background !default +$panel-block-active-border-left-color: $link !default +$panel-block-active-color: $link-active !default +$panel-block-active-icon-color: $link !default + +$panel-icon-color: $text-light !default + +.panel + font-size: $size-normal + &:not(:last-child) + margin-bottom: 1.5rem + +.panel-heading, +.panel-tabs, +.panel-block + border-bottom: $panel-item-border + border-left: $panel-item-border + border-right: $panel-item-border + &:first-child + border-top: $panel-item-border + +.panel-heading + background-color: $panel-heading-background-color + border-radius: $panel-heading-radius $panel-heading-radius 0 0 + color: $panel-heading-color + font-size: $panel-heading-size + font-weight: $panel-heading-weight + line-height: $panel-heading-line-height + padding: $panel-heading-padding + +.panel-tabs + align-items: flex-end + display: flex + font-size: 0.875em + justify-content: center + a + border-bottom: $panel-tab-border-bottom + margin-bottom: -1px + padding: 0.5em + // Modifiers + &.is-active + border-bottom-color: $panel-tab-active-border-bottom-color + color: $panel-tab-active-color + +.panel-list + a + color: $panel-list-item-color + &:hover + color: $panel-list-item-hover-color + +.panel-block + align-items: center + color: $panel-block-color + display: flex + justify-content: flex-start + padding: 0.5em 0.75em + input[type="checkbox"] + margin-right: 0.75em + & > .control + flex-grow: 1 + flex-shrink: 1 + width: 100% + &.is-wrapped + flex-wrap: wrap + &.is-active + border-left-color: $panel-block-active-border-left-color + color: $panel-block-active-color + .panel-icon + color: $panel-block-active-icon-color + +a.panel-block, +label.panel-block + cursor: pointer + &:hover + background-color: $panel-block-hover-background-color + +.panel-icon + +fa(14px, 1em) + color: $panel-icon-color + margin-right: 0.75em + .fa + font-size: inherit + line-height: inherit diff --git a/styles/_sass/components/tabs.sass b/styles/_sass/components/tabs.sass new file mode 100644 index 0000000..21ed90a --- /dev/null +++ b/styles/_sass/components/tabs.sass @@ -0,0 +1,151 @@ +$tabs-border-bottom-color: $border !default +$tabs-border-bottom-style: solid !default +$tabs-border-bottom-width: 1px !default +$tabs-link-color: $text !default +$tabs-link-hover-border-bottom-color: $text-strong !default +$tabs-link-hover-color: $text-strong !default +$tabs-link-active-border-bottom-color: $link !default +$tabs-link-active-color: $link !default +$tabs-link-padding: 0.5em 1em !default + +$tabs-boxed-link-radius: $radius !default +$tabs-boxed-link-hover-background-color: $background !default +$tabs-boxed-link-hover-border-bottom-color: $border !default + +$tabs-boxed-link-active-background-color: $white !default +$tabs-boxed-link-active-border-color: $border !default +$tabs-boxed-link-active-border-bottom-color: transparent !default + +$tabs-toggle-link-border-color: $border !default +$tabs-toggle-link-border-style: solid !default +$tabs-toggle-link-border-width: 1px !default +$tabs-toggle-link-hover-background-color: $background !default +$tabs-toggle-link-hover-border-color: $border-hover !default +$tabs-toggle-link-radius: $radius !default +$tabs-toggle-link-active-background-color: $link !default +$tabs-toggle-link-active-border-color: $link !default +$tabs-toggle-link-active-color: $link-invert !default + +.tabs + @extend %block + +overflow-touch + @extend %unselectable + align-items: stretch + display: flex + font-size: $size-normal + justify-content: space-between + overflow: hidden + overflow-x: auto + white-space: nowrap + a + align-items: center + border-bottom-color: $tabs-border-bottom-color + border-bottom-style: $tabs-border-bottom-style + border-bottom-width: $tabs-border-bottom-width + color: $tabs-link-color + display: flex + justify-content: center + margin-bottom: -#{$tabs-border-bottom-width} + padding: $tabs-link-padding + vertical-align: top + &:hover + border-bottom-color: $tabs-link-hover-border-bottom-color + color: $tabs-link-hover-color + li + display: block + &.is-active + a + border-bottom-color: $tabs-link-active-border-bottom-color + color: $tabs-link-active-color + ul + align-items: center + border-bottom-color: $tabs-border-bottom-color + border-bottom-style: $tabs-border-bottom-style + border-bottom-width: $tabs-border-bottom-width + display: flex + flex-grow: 1 + flex-shrink: 0 + justify-content: flex-start + &.is-left + padding-right: 0.75em + &.is-center + flex: none + justify-content: center + padding-left: 0.75em + padding-right: 0.75em + &.is-right + justify-content: flex-end + padding-left: 0.75em + .icon + &:first-child + margin-right: 0.5em + &:last-child + margin-left: 0.5em + // Alignment + &.is-centered + ul + justify-content: center + &.is-right + ul + justify-content: flex-end + // Styles + &.is-boxed + a + border: 1px solid transparent + border-radius: $tabs-boxed-link-radius $tabs-boxed-link-radius 0 0 + &:hover + background-color: $tabs-boxed-link-hover-background-color + border-bottom-color: $tabs-boxed-link-hover-border-bottom-color + li + &.is-active + a + background-color: $tabs-boxed-link-active-background-color + border-color: $tabs-boxed-link-active-border-color + border-bottom-color: $tabs-boxed-link-active-border-bottom-color !important + &.is-fullwidth + li + flex-grow: 1 + flex-shrink: 0 + &.is-toggle + a + border-color: $tabs-toggle-link-border-color + border-style: $tabs-toggle-link-border-style + border-width: $tabs-toggle-link-border-width + margin-bottom: 0 + position: relative + &:hover + background-color: $tabs-toggle-link-hover-background-color + border-color: $tabs-toggle-link-hover-border-color + z-index: 2 + li + & + li + margin-left: -#{$tabs-toggle-link-border-width} + &:first-child a + border-radius: $tabs-toggle-link-radius 0 0 $tabs-toggle-link-radius + &:last-child a + border-radius: 0 $tabs-toggle-link-radius $tabs-toggle-link-radius 0 + &.is-active + a + background-color: $tabs-toggle-link-active-background-color + border-color: $tabs-toggle-link-active-border-color + color: $tabs-toggle-link-active-color + z-index: 1 + ul + border-bottom: none + &.is-toggle-rounded + li + &:first-child a + border-bottom-left-radius: $radius-rounded + border-top-left-radius: $radius-rounded + padding-left: 1.25em + &:last-child a + border-bottom-right-radius: $radius-rounded + border-top-right-radius: $radius-rounded + padding-right: 1.25em + // Sizes + &.is-small + font-size: $size-small + &.is-medium + font-size: $size-medium + &.is-large + font-size: $size-large diff --git a/styles/_sass/elements/_all.sass b/styles/_sass/elements/_all.sass new file mode 100644 index 0000000..2234322 --- /dev/null +++ b/styles/_sass/elements/_all.sass @@ -0,0 +1,16 @@ +@charset "utf-8" + +@import "box.sass" +@import "button.sass" +@import "container.sass" +@import "content.sass" +@import "form.sass" +@import "icon.sass" +@import "image.sass" +@import "notification.sass" +@import "progress.sass" +@import "table.sass" +@import "tag.sass" +@import "title.sass" + +@import "other.sass" diff --git a/styles/_sass/elements/box.sass b/styles/_sass/elements/box.sass new file mode 100644 index 0000000..d58f405 --- /dev/null +++ b/styles/_sass/elements/box.sass @@ -0,0 +1,24 @@ +$box-color: $text !default +$box-background-color: $white !default +$box-radius: $radius-large !default +$box-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default +$box-padding: 1.25rem !default + +$box-link-hover-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px $link !default +$box-link-active-shadow: inset 0 1px 2px rgba($black, 0.2), 0 0 0 1px $link !default + +.box + @extend %block + background-color: $box-background-color + border-radius: $box-radius + box-shadow: $box-shadow + color: $box-color + display: block + padding: $box-padding + +a.box + &:hover, + &:focus + box-shadow: $box-link-hover-shadow + &:active + box-shadow: $box-link-active-shadow diff --git a/styles/_sass/elements/button.sass b/styles/_sass/elements/button.sass new file mode 100644 index 0000000..e75cd2f --- /dev/null +++ b/styles/_sass/elements/button.sass @@ -0,0 +1,275 @@ +$button-color: $grey-darker !default +$button-background-color: $white !default + +$button-border-color: $grey-lighter !default +$button-border-width: $control-border-width !default + +$button-padding-vertical: calc(0.375em - #{$button-border-width}) !default +$button-padding-horizontal: 0.75em !default + +$button-hover-color: $link-hover !default +$button-hover-border-color: $link-hover-border !default + +$button-focus-color: $link-focus !default +$button-focus-border-color: $link-focus-border !default +$button-focus-box-shadow-size: 0 0 0 0.125em !default +$button-focus-box-shadow-color: rgba($link, 0.25) !default + +$button-active-color: $link-active !default +$button-active-border-color: $link-active-border !default + +$button-text-color: $text !default +$button-text-hover-background-color: $background !default +$button-text-hover-color: $text-strong !default + +$button-disabled-background-color: $white !default +$button-disabled-border-color: $grey-lighter !default +$button-disabled-shadow: none !default +$button-disabled-opacity: 0.5 !default + +$button-static-color: $grey !default +$button-static-background-color: $white-ter !default +$button-static-border-color: $grey-lighter !default + +// The button sizes use mixins so they can be used at different breakpoints +=button-small + border-radius: $radius-small + font-size: $size-small +=button-normal + font-size: $size-normal +=button-medium + font-size: $size-medium +=button-large + font-size: $size-large + +.button + @extend %control + @extend %unselectable + background-color: $button-background-color + border-color: $button-border-color + border-width: $button-border-width + color: $button-color + cursor: pointer + justify-content: center + padding-bottom: $button-padding-vertical + padding-left: $button-padding-horizontal + padding-right: $button-padding-horizontal + padding-top: $button-padding-vertical + text-align: center + white-space: nowrap + strong + color: inherit + .icon + &, + &.is-small, + &.is-medium, + &.is-large + height: 1.5em + width: 1.5em + &:first-child:not(:last-child) + margin-left: calc(-0.375em - #{$button-border-width}) + margin-right: 0.1875em + &:last-child:not(:first-child) + margin-left: 0.1875em + margin-right: calc(-0.375em - #{$button-border-width}) + &:first-child:last-child + margin-left: calc(-0.375em - #{$button-border-width}) + margin-right: calc(-0.375em - #{$button-border-width}) + // States + &:hover, + &.is-hovered + border-color: $button-hover-border-color + color: $button-hover-color + &:focus, + &.is-focused + border-color: $button-focus-border-color + color: $button-focus-color + &:not(:active) + box-shadow: $button-focus-box-shadow-size $button-focus-box-shadow-color + &:active, + &.is-active + border-color: $button-active-border-color + color: $button-active-color + // Colors + &.is-text + background-color: transparent + border-color: transparent + color: $button-text-color + text-decoration: underline + &:hover, + &.is-hovered, + &:focus, + &.is-focused + background-color: $button-text-hover-background-color + color: $button-text-hover-color + &:active, + &.is-active + background-color: darken($button-text-hover-background-color, 5%) + color: $button-text-hover-color + &[disabled], + fieldset[disabled] & + background-color: transparent + border-color: transparent + box-shadow: none + @each $name, $pair in $colors + $color: nth($pair, 1) + $color-invert: nth($pair, 2) + &.is-#{$name} + background-color: $color + border-color: transparent + color: $color-invert + &:hover, + &.is-hovered + background-color: darken($color, 2.5%) + border-color: transparent + color: $color-invert + &:focus, + &.is-focused + border-color: transparent + color: $color-invert + &:not(:active) + box-shadow: $button-focus-box-shadow-size rgba($color, 0.25) + &:active, + &.is-active + background-color: darken($color, 5%) + border-color: transparent + color: $color-invert + &[disabled], + fieldset[disabled] & + background-color: $color + border-color: transparent + box-shadow: none + &.is-inverted + background-color: $color-invert + color: $color + &:hover + background-color: darken($color-invert, 5%) + &[disabled], + fieldset[disabled] & + background-color: $color-invert + border-color: transparent + box-shadow: none + color: $color + &.is-loading + &::after + border-color: transparent transparent $color-invert $color-invert !important + &.is-outlined + background-color: transparent + border-color: $color + color: $color + &:hover, + &:focus + background-color: $color + border-color: $color + color: $color-invert + &.is-loading + &::after + border-color: transparent transparent $color $color !important + &[disabled], + fieldset[disabled] & + background-color: transparent + border-color: $color + box-shadow: none + color: $color + &.is-inverted.is-outlined + background-color: transparent + border-color: $color-invert + color: $color-invert + &:hover, + &:focus + background-color: $color-invert + color: $color + &[disabled], + fieldset[disabled] & + background-color: transparent + border-color: $color-invert + box-shadow: none + color: $color-invert + // Sizes + &.is-small + +button-small + &.is-normal + +button-normal + &.is-medium + +button-medium + &.is-large + +button-large + // Modifiers + &[disabled], + fieldset[disabled] & + background-color: $button-disabled-background-color + border-color: $button-disabled-border-color + box-shadow: $button-disabled-shadow + opacity: $button-disabled-opacity + &.is-fullwidth + display: flex + width: 100% + &.is-loading + color: transparent !important + pointer-events: none + &::after + @extend %loader + +center(1em) + position: absolute !important + &.is-static + background-color: $button-static-background-color + border-color: $button-static-border-color + color: $button-static-color + box-shadow: none + pointer-events: none + &.is-rounded + border-radius: $radius-rounded + padding-left: 1em + padding-right: 1em + +.buttons + align-items: center + display: flex + flex-wrap: wrap + justify-content: flex-start + .button + margin-bottom: 0.5rem + &:not(:last-child):not(.is-fullwidth) + margin-right: 0.5rem + &:last-child + margin-bottom: -0.5rem + &:not(:last-child) + margin-bottom: 1rem + // Sizes + &.are-small + .button:not(.is-normal):not(.is-medium):not(.is-large) + +button-small + &.are-medium + .button:not(.is-small):not(.is-normal):not(.is-large) + +button-medium + &.are-large + .button:not(.is-small):not(.is-normal):not(.is-medium) + +button-large + &.has-addons + .button + &:not(:first-child) + border-bottom-left-radius: 0 + border-top-left-radius: 0 + &:not(:last-child) + border-bottom-right-radius: 0 + border-top-right-radius: 0 + margin-right: -1px + &:last-child + margin-right: 0 + &:hover, + &.is-hovered + z-index: 2 + &:focus, + &.is-focused, + &:active, + &.is-active, + &.is-selected + z-index: 3 + &:hover + z-index: 4 + &.is-expanded + flex-grow: 1 + &.is-centered + justify-content: center + &.is-right + justify-content: flex-end diff --git a/styles/_sass/elements/container.sass b/styles/_sass/elements/container.sass new file mode 100644 index 0000000..2aaf591 --- /dev/null +++ b/styles/_sass/elements/container.sass @@ -0,0 +1,25 @@ +.container + margin: 0 auto + position: relative + +desktop + max-width: $desktop - (2 * $gap) + width: $desktop - (2 * $gap) + &.is-fluid + margin-left: $gap + margin-right: $gap + max-width: none + width: auto + +until-widescreen + &.is-widescreen + max-width: $widescreen - (2 * $gap) + width: auto + +until-fullhd + &.is-fullhd + max-width: $fullhd - (2 * $gap) + width: auto + +widescreen + max-width: $widescreen - (2 * $gap) + width: $widescreen - (2 * $gap) + +fullhd + max-width: $fullhd - (2 * $gap) + width: $fullhd - (2 * $gap) diff --git a/styles/_sass/elements/content.sass b/styles/_sass/elements/content.sass new file mode 100644 index 0000000..3f5530e --- /dev/null +++ b/styles/_sass/elements/content.sass @@ -0,0 +1,151 @@ +$content-heading-color: $text-strong !default +$content-heading-weight: $weight-semibold !default +$content-heading-line-height: 1.125 !default + +$content-blockquote-background-color: $background !default +$content-blockquote-border-left: 5px solid $border !default +$content-blockquote-padding: 1.25em 1.5em !default + +$content-pre-padding: 1.25em 1.5em !default + +$content-table-cell-border: 1px solid $border !default +$content-table-cell-border-width: 0 0 1px !default +$content-table-cell-padding: 0.5em 0.75em !default +$content-table-cell-heading-color: $text-strong !default +$content-table-head-cell-border-width: 0 0 2px !default +$content-table-head-cell-color: $text-strong !default +$content-table-foot-cell-border-width: 2px 0 0 !default +$content-table-foot-cell-color: $text-strong !default + +.content + @extend %block + // Inline + li + li + margin-top: 0.25em + // Block + p, + dl, + ol, + ul, + blockquote, + pre, + table + &:not(:last-child) + margin-bottom: 1em + h1, + h2, + h3, + h4, + h5, + h6 + color: $content-heading-color + font-weight: $content-heading-weight + line-height: $content-heading-line-height + h1 + font-size: 2em + margin-bottom: 0.5em + &:not(:first-child) + margin-top: 1em + h2 + font-size: 1.75em + margin-bottom: 0.5714em + &:not(:first-child) + margin-top: 1.1428em + h3 + font-size: 1.5em + margin-bottom: 0.6666em + &:not(:first-child) + margin-top: 1.3333em + h4 + font-size: 1.25em + margin-bottom: 0.8em + h5 + font-size: 1.125em + margin-bottom: 0.8888em + h6 + font-size: 1em + margin-bottom: 1em + blockquote + background-color: $content-blockquote-background-color + border-left: $content-blockquote-border-left + padding: $content-blockquote-padding + ol + list-style-position: outside + margin-left: 2em + margin-top: 1em + &:not([type]) + list-style-type: decimal + &.is-lower-alpha + list-style-type: lower-alpha + &.is-lower-roman + list-style-type: lower-roman + &.is-upper-alpha + list-style-type: upper-alpha + &.is-upper-roman + list-style-type: upper-roman + ul + list-style: disc outside + margin-left: 2em + margin-top: 1em + ul + list-style-type: circle + margin-top: 0.5em + ul + list-style-type: square + dd + margin-left: 2em + figure + margin-left: 2em + margin-right: 2em + text-align: center + &:not(:first-child) + margin-top: 2em + &:not(:last-child) + margin-bottom: 2em + img + display: inline-block + figcaption + font-style: italic + pre + +overflow-touch + overflow-x: auto + padding: $content-pre-padding + white-space: pre + word-wrap: normal + sup, + sub + font-size: 75% + table + width: 100% + td, + th + border: $content-table-cell-border + border-width: $content-table-cell-border-width + padding: $content-table-cell-padding + vertical-align: top + th + color: $content-table-cell-heading-color + text-align: left + thead + td, + th + border-width: $content-table-head-cell-border-width + color: $content-table-head-cell-color + tfoot + td, + th + border-width: $content-table-foot-cell-border-width + color: $content-table-foot-cell-color + tbody + tr + &:last-child + td, + th + border-bottom-width: 0 + // Sizes + &.is-small + font-size: $size-small + &.is-medium + font-size: $size-medium + &.is-large + font-size: $size-large diff --git a/styles/_sass/elements/form.sass b/styles/_sass/elements/form.sass new file mode 100644 index 0000000..c944b75 --- /dev/null +++ b/styles/_sass/elements/form.sass @@ -0,0 +1,602 @@ +$input-color: $grey-darker !default +$input-background-color: $white !default +$input-border-color: $grey-lighter !default +$input-height: $control-height !default +$input-shadow: inset 0 1px 2px rgba($black, 0.1) !default +$input-placeholder-color: rgba($input-color, 0.3) !default + +$input-hover-color: $grey-darker !default +$input-hover-border-color: $grey-light !default + +$input-focus-color: $grey-darker !default +$input-focus-border-color: $link !default +$input-focus-box-shadow-size: 0 0 0 0.125em !default +$input-focus-box-shadow-color: rgba($link, 0.25) !default + +$input-disabled-color: $text-light !default +$input-disabled-background-color: $background !default +$input-disabled-border-color: $background !default +$input-disabled-placeholder-color: rgba($input-disabled-color, 0.3) !default + +$input-arrow: $link !default + +$input-icon-color: $grey-lighter !default +$input-icon-active-color: $grey !default + +$input-radius: $radius !default + +$file-border-color: $border !default +$file-radius: $radius !default + +$file-cta-background-color: $white-ter !default +$file-cta-color: $grey-dark !default +$file-cta-hover-color: $grey-darker !default +$file-cta-active-color: $grey-darker !default + +$file-name-border-color: $border !default +$file-name-border-style: solid !default +$file-name-border-width: 1px 1px 1px 0 !default +$file-name-max-width: 16em !default + +$label-color: $grey-darker !default +$label-weight: $weight-bold !default + +$help-size: $size-small !default + +=input + @extend %control + background-color: $input-background-color + border-color: $input-border-color + color: $input-color + +placeholder + color: $input-placeholder-color + &:hover, + &.is-hovered + border-color: $input-hover-border-color + &:focus, + &.is-focused, + &:active, + &.is-active + border-color: $input-focus-border-color + box-shadow: $input-focus-box-shadow-size $input-focus-box-shadow-color + &[disabled], + fieldset[disabled] & + background-color: $input-disabled-background-color + border-color: $input-disabled-border-color + box-shadow: none + color: $input-disabled-color + +placeholder + color: $input-disabled-placeholder-color + +.input, +.textarea + +input + box-shadow: $input-shadow + max-width: 100% + width: 100% + &[readonly] + box-shadow: none + // Colors + @each $name, $pair in $colors + $color: nth($pair, 1) + &.is-#{$name} + border-color: $color + &:focus, + &.is-focused, + &:active, + &.is-active + box-shadow: $input-focus-box-shadow-size rgba($color, 0.25) + // Sizes + &.is-small + +control-small + &.is-medium + +control-medium + &.is-large + +control-large + // Modifiers + &.is-fullwidth + display: block + width: 100% + &.is-inline + display: inline + width: auto + +.input + &.is-rounded + border-radius: $radius-rounded + padding-left: 1em + padding-right: 1em + &.is-static + background-color: transparent + border-color: transparent + box-shadow: none + padding-left: 0 + padding-right: 0 + +.textarea + display: block + max-width: 100% + min-width: 100% + padding: 0.625em + resize: vertical + &:not([rows]) + max-height: 600px + min-height: 120px + &[rows] + height: initial + // Modifiers + &.has-fixed-size + resize: none + +.checkbox, +.radio + cursor: pointer + display: inline-block + line-height: 1.25 + position: relative + input + cursor: pointer + &:hover + color: $input-hover-color + &[disabled], + fieldset[disabled] & + color: $input-disabled-color + cursor: not-allowed + +.radio + & + .radio + margin-left: 0.5em + +.select + display: inline-block + max-width: 100% + position: relative + vertical-align: top + &:not(.is-multiple) + height: $input-height + &:not(.is-multiple):not(.is-loading) + &::after + @extend %arrow + border-color: $input-arrow + right: 1.125em + z-index: 4 + &.is-rounded + select + border-radius: $radius-rounded + padding-left: 1em + select + +input + cursor: pointer + display: block + font-size: 1em + max-width: 100% + outline: none + &::-ms-expand + display: none + &[disabled]:hover, + fieldset[disabled] &:hover + border-color: $input-disabled-border-color + &:not([multiple]) + padding-right: 2.5em + &[multiple] + height: auto + padding: 0 + option + padding: 0.5em 1em + // States + &:not(.is-multiple):not(.is-loading):hover + &::after + border-color: $input-hover-color + // Colors + @each $name, $pair in $colors + $color: nth($pair, 1) + &.is-#{$name} + &:not(:hover)::after + border-color: $color + select + border-color: $color + &:hover, + &.is-hovered + border-color: darken($color, 5%) + &:focus, + &.is-focused, + &:active, + &.is-active + box-shadow: $input-focus-box-shadow-size rgba($color, 0.25) + // Sizes + &.is-small + +control-small + &.is-medium + +control-medium + &.is-large + +control-large + // Modifiers + &.is-disabled + &::after + border-color: $input-disabled-color + &.is-fullwidth + width: 100% + select + width: 100% + &.is-loading + &::after + @extend %loader + margin-top: 0 + position: absolute + right: 0.625em + top: 0.625em + transform: none + &.is-small:after + font-size: $size-small + &.is-medium:after + font-size: $size-medium + &.is-large:after + font-size: $size-large + +.file + @extend %unselectable + align-items: stretch + display: flex + justify-content: flex-start + position: relative + // Colors + @each $name, $pair in $colors + $color: nth($pair, 1) + $color-invert: nth($pair, 2) + &.is-#{$name} + .file-cta + background-color: $color + border-color: transparent + color: $color-invert + &:hover, + &.is-hovered + .file-cta + background-color: darken($color, 2.5%) + border-color: transparent + color: $color-invert + &:focus, + &.is-focused + .file-cta + border-color: transparent + box-shadow: 0 0 0.5em rgba($color, 0.25) + color: $color-invert + &:active, + &.is-active + .file-cta + background-color: darken($color, 5%) + border-color: transparent + color: $color-invert + // Sizes + &.is-small + font-size: $size-small + &.is-medium + font-size: $size-medium + .file-icon + .fa + font-size: 21px + &.is-large + font-size: $size-large + .file-icon + .fa + font-size: 28px + // Modifiers + &.has-name + .file-cta + border-bottom-right-radius: 0 + border-top-right-radius: 0 + .file-name + border-bottom-left-radius: 0 + border-top-left-radius: 0 + &.is-empty + .file-cta + border-radius: $file-radius + .file-name + display: none + &.is-boxed + .file-label + flex-direction: column + .file-cta + flex-direction: column + height: auto + padding: 1em 3em + .file-name + border-width: 0 1px 1px + .file-icon + height: 1.5em + width: 1.5em + .fa + font-size: 21px + &.is-small + .file-icon .fa + font-size: 14px + &.is-medium + .file-icon .fa + font-size: 28px + &.is-large + .file-icon .fa + font-size: 35px + &.has-name + .file-cta + border-radius: $file-radius $file-radius 0 0 + .file-name + border-radius: 0 0 $file-radius $file-radius + border-width: 0 1px 1px + &.is-centered + justify-content: center + &.is-fullwidth + .file-label + width: 100% + .file-name + flex-grow: 1 + max-width: none + &.is-right + justify-content: flex-end + .file-cta + border-radius: 0 $file-radius $file-radius 0 + .file-name + border-radius: $file-radius 0 0 $file-radius + border-width: 1px 0 1px 1px + order: -1 + +.file-label + align-items: stretch + display: flex + cursor: pointer + justify-content: flex-start + overflow: hidden + position: relative + &:hover + .file-cta + background-color: darken($file-cta-background-color, 2.5%) + color: $file-cta-hover-color + .file-name + border-color: darken($file-name-border-color, 2.5%) + &:active + .file-cta + background-color: darken($file-cta-background-color, 5%) + color: $file-cta-active-color + .file-name + border-color: darken($file-name-border-color, 5%) + +.file-input + height: 100% + left: 0 + opacity: 0 + outline: none + position: absolute + top: 0 + width: 100% + +.file-cta, +.file-name + @extend %control + border-color: $file-border-color + border-radius: $file-radius + font-size: 1em + padding-left: 1em + padding-right: 1em + white-space: nowrap + +.file-cta + background-color: $file-cta-background-color + color: $file-cta-color + +.file-name + border-color: $file-name-border-color + border-style: $file-name-border-style + border-width: $file-name-border-width + display: block + max-width: $file-name-max-width + overflow: hidden + text-align: left + text-overflow: ellipsis + +.file-icon + align-items: center + display: flex + height: 1em + justify-content: center + margin-right: 0.5em + width: 1em + .fa + font-size: 14px + +.label + color: $label-color + display: block + font-size: $size-normal + font-weight: $label-weight + &:not(:last-child) + margin-bottom: 0.5em + // Sizes + &.is-small + font-size: $size-small + &.is-medium + font-size: $size-medium + &.is-large + font-size: $size-large + +.help + display: block + font-size: $help-size + margin-top: 0.25rem + @each $name, $pair in $colors + $color: nth($pair, 1) + &.is-#{$name} + color: $color + +// Containers + +.field + &:not(:last-child) + margin-bottom: 0.75rem + // Modifiers + &.has-addons + display: flex + justify-content: flex-start + .control + &:not(:last-child) + margin-right: -1px + &:not(:first-child):not(:last-child) + .button, + .input, + .select select + border-radius: 0 + &:first-child:not(:only-child) + .button, + .input, + .select select + border-bottom-right-radius: 0 + border-top-right-radius: 0 + &:last-child:not(:only-child) + .button, + .input, + .select select + border-bottom-left-radius: 0 + border-top-left-radius: 0 + .button, + .input, + .select select + &:not([disabled]) + &:hover, + &.is-hovered + z-index: 2 + &:focus, + &.is-focused, + &:active, + &.is-active + z-index: 3 + &:hover + z-index: 4 + &.is-expanded + flex-grow: 1 + &.has-addons-centered + justify-content: center + &.has-addons-right + justify-content: flex-end + &.has-addons-fullwidth + .control + flex-grow: 1 + flex-shrink: 0 + &.is-grouped + display: flex + justify-content: flex-start + & > .control + flex-shrink: 0 + &:not(:last-child) + margin-bottom: 0 + margin-right: 0.75rem + &.is-expanded + flex-grow: 1 + flex-shrink: 1 + &.is-grouped-centered + justify-content: center + &.is-grouped-right + justify-content: flex-end + &.is-grouped-multiline + flex-wrap: wrap + & > .control + &:last-child, + &:not(:last-child) + margin-bottom: 0.75rem + &:last-child + margin-bottom: -0.75rem + &:not(:last-child) + margin-bottom: 0 + &.is-horizontal + +tablet + display: flex + +.field-label + .label + font-size: inherit + +mobile + margin-bottom: 0.5rem + +tablet + flex-basis: 0 + flex-grow: 1 + flex-shrink: 0 + margin-right: 1.5rem + text-align: right + &.is-small + font-size: $size-small + padding-top: 0.375em + &.is-normal + padding-top: 0.375em + &.is-medium + font-size: $size-medium + padding-top: 0.375em + &.is-large + font-size: $size-large + padding-top: 0.375em + +.field-body + .field .field + margin-bottom: 0 + +tablet + display: flex + flex-basis: 0 + flex-grow: 5 + flex-shrink: 1 + .field + margin-bottom: 0 + & > .field + flex-shrink: 1 + &:not(.is-narrow) + flex-grow: 1 + &:not(:last-child) + margin-right: 0.75rem + +.control + box-sizing: border-box + clear: both //fixes the icon floating out of the input when help text is floated right + font-size: $size-normal + position: relative + text-align: left + // Modifiers + &.has-icons-left, + &.has-icons-right + .input, + .select + &:focus + & ~ .icon + color: $input-icon-active-color + &.is-small ~ .icon + font-size: $size-small + &.is-medium ~ .icon + font-size: $size-medium + &.is-large ~ .icon + font-size: $size-large + .icon + color: $input-icon-color + height: $input-height + pointer-events: none + position: absolute + top: 0 + width: $input-height + z-index: 4 + &.has-icons-left + .input, + .select select + padding-left: $input-height + .icon.is-left + left: 0 + &.has-icons-right + .input, + .select select + padding-right: $input-height + .icon.is-right + right: 0 + &.is-loading + &::after + @extend %loader + position: absolute !important + right: 0.625em + top: 0.625em + z-index: 4 + &.is-small:after + font-size: $size-small + &.is-medium:after + font-size: $size-medium + &.is-large:after + font-size: $size-large diff --git a/styles/_sass/elements/icon.sass b/styles/_sass/elements/icon.sass new file mode 100644 index 0000000..988546c --- /dev/null +++ b/styles/_sass/elements/icon.sass @@ -0,0 +1,21 @@ +$icon-dimensions: 1.5rem !default +$icon-dimensions-small: 1rem !default +$icon-dimensions-medium: 2rem !default +$icon-dimensions-large: 3rem !default + +.icon + align-items: center + display: inline-flex + justify-content: center + height: $icon-dimensions + width: $icon-dimensions + // Sizes + &.is-small + height: $icon-dimensions-small + width: $icon-dimensions-small + &.is-medium + height: $icon-dimensions-medium + width: $icon-dimensions-medium + &.is-large + height: $icon-dimensions-large + width: $icon-dimensions-large diff --git a/styles/_sass/elements/image.sass b/styles/_sass/elements/image.sass new file mode 100644 index 0000000..cfa64fe --- /dev/null +++ b/styles/_sass/elements/image.sass @@ -0,0 +1,69 @@ +$dimensions: 16 24 32 48 64 96 128 !default + +.image + display: block + position: relative + img + display: block + height: auto + width: 100% + &.is-rounded + border-radius: $radius-rounded + // Ratio + &.is-square, + &.is-1by1, + &.is-5by4, + &.is-4by3, + &.is-3by2, + &.is-5by3, + &.is-16by9, + &.is-2by1, + &.is-3by1, + &.is-4by5, + &.is-3by4, + &.is-2by3, + &.is-3by5, + &.is-9by16, + &.is-1by2, + &.is-1by3 + img, + .has-ratio + @extend %overlay + height: 100% + width: 100% + &.is-square, + &.is-1by1 + padding-top: 100% + &.is-5by4 + padding-top: 80% + &.is-4by3 + padding-top: 75% + &.is-3by2 + padding-top: 66.6666% + &.is-5by3 + padding-top: 60% + &.is-16by9 + padding-top: 56.25% + &.is-2by1 + padding-top: 50% + &.is-3by1 + padding-top: 33.3333% + &.is-4by5 + padding-top: 125% + &.is-3by4 + padding-top: 133.3333% + &.is-2by3 + padding-top: 150% + &.is-3by5 + padding-top: 166.6666% + &.is-9by16 + padding-top: 177.7777% + &.is-1by2 + padding-top: 200% + &.is-1by3 + padding-top: 300% + // Sizes + @each $dimension in $dimensions + &.is-#{$dimension}x#{$dimension} + height: $dimension * 1px + width: $dimension * 1px diff --git a/styles/_sass/elements/notification.sass b/styles/_sass/elements/notification.sass new file mode 100644 index 0000000..2bda414 --- /dev/null +++ b/styles/_sass/elements/notification.sass @@ -0,0 +1,35 @@ +$notification-background-color: $background !default +$notification-radius: $radius !default +$notification-padding: 1.25rem 2.5rem 1.25rem 1.5rem !default + +.notification + @extend %block + background-color: $notification-background-color + border-radius: $notification-radius + padding: $notification-padding + position: relative + a:not(.button):not(.dropdown-item) + color: currentColor + text-decoration: underline + strong + color: currentColor + code, + pre + background: $white + pre code + background: transparent + & > .delete + position: absolute + right: 0.5rem + top: 0.5rem + .title, + .subtitle, + .content + color: currentColor + // Colors + @each $name, $pair in $colors + $color: nth($pair, 1) + $color-invert: nth($pair, 2) + &.is-#{$name} + background-color: $color + color: $color-invert diff --git a/styles/_sass/elements/other.sass b/styles/_sass/elements/other.sass new file mode 100644 index 0000000..5725617 --- /dev/null +++ b/styles/_sass/elements/other.sass @@ -0,0 +1,39 @@ +.block + @extend %block + +.delete + @extend %delete + +.heading + display: block + font-size: 11px + letter-spacing: 1px + margin-bottom: 5px + text-transform: uppercase + +.highlight + @extend %block + font-weight: $weight-normal + max-width: 100% + overflow: hidden + padding: 0 + pre + overflow: auto + max-width: 100% + +.loader + @extend %loader + +.number + align-items: center + background-color: $background + border-radius: $radius-rounded + display: inline-flex + font-size: $size-medium + height: 2em + justify-content: center + margin-right: 1.5rem + min-width: 2.5em + padding: 0.25rem 0.5rem + text-align: center + vertical-align: top diff --git a/styles/_sass/elements/progress.sass b/styles/_sass/elements/progress.sass new file mode 100644 index 0000000..b263eeb --- /dev/null +++ b/styles/_sass/elements/progress.sass @@ -0,0 +1,65 @@ +$progress-bar-background-color: $border !default +$progress-value-background-color: $text !default + +$progress-indeterminate-duration: 1.5s !default + +.progress + @extend %block + -moz-appearance: none + -webkit-appearance: none + border: none + border-radius: $radius-rounded + display: block + height: $size-normal + overflow: hidden + padding: 0 + width: 100% + &::-webkit-progress-bar + background-color: $progress-bar-background-color + &::-webkit-progress-value + background-color: $progress-value-background-color + &::-moz-progress-bar + background-color: $progress-value-background-color + &::-ms-fill + background-color: $progress-value-background-color + border: none + &:indeterminate + animation-duration: $progress-indeterminate-duration + animation-iteration-count: infinite + animation-name: moveIndeterminate + animation-timing-function: linear + background-color: $progress-bar-background-color + background-image: linear-gradient(to right, $text 30%, $progress-bar-background-color 30%) + background-position: top left + background-repeat: no-repeat + background-size: 150% 150% + &::-webkit-progress-bar + background-color: transparent + &::-moz-progress-bar + background-color: transparent + // Colors + @each $name, $pair in $colors + $color: nth($pair, 1) + &.is-#{$name} + &::-webkit-progress-value + background-color: $color + &::-moz-progress-bar + background-color: $color + &::-ms-fill + background-color: $color + &:indeterminate + background-image: linear-gradient(to right, $color 30%, $progress-bar-background-color 30%) + + // Sizes + &.is-small + height: $size-small + &.is-medium + height: $size-medium + &.is-large + height: $size-large + +@keyframes moveIndeterminate + from + background-position: 200% 0 + to + background-position: -200% 0 diff --git a/styles/_sass/elements/table.sass b/styles/_sass/elements/table.sass new file mode 100644 index 0000000..a1cf936 --- /dev/null +++ b/styles/_sass/elements/table.sass @@ -0,0 +1,126 @@ +$table-color: $grey-darker !default +$table-background-color: $white !default + +$table-cell-border: 1px solid $grey-lighter !default +$table-cell-border-width: 0 0 1px !default +$table-cell-padding: 0.5em 0.75em !default +$table-cell-heading-color: $text-strong !default + +$table-head-cell-border-width: 0 0 2px !default +$table-head-cell-color: $text-strong !default +$table-foot-cell-border-width: 2px 0 0 !default +$table-foot-cell-color: $text-strong !default + +$table-head-background-color: transparent !default +$table-body-background-color: transparent !default +$table-foot-background-color: transparent !default + +$table-row-hover-background-color: $white-bis !default + +$table-row-active-background-color: $primary !default +$table-row-active-color: $primary-invert !default + +$table-striped-row-even-background-color: $white-bis !default +$table-striped-row-even-hover-background-color: $white-ter !default + +.table + @extend %block + background-color: $table-background-color + color: $table-color + td, + th + border: $table-cell-border + border-width: $table-cell-border-width + padding: $table-cell-padding + vertical-align: top + // Colors + @each $name, $pair in $colors + $color: nth($pair, 1) + $color-invert: nth($pair, 2) + &.is-#{$name} + background-color: $color + border-color: $color + color: $color-invert + // Modifiers + &.is-narrow + white-space: nowrap + width: 1% + &.is-selected + background-color: $table-row-active-background-color + color: $table-row-active-color + a, + strong + color: currentColor + th + color: $table-cell-heading-color + text-align: left + tr + &.is-selected + background-color: $table-row-active-background-color + color: $table-row-active-color + a, + strong + color: currentColor + td, + th + border-color: $table-row-active-color + color: currentColor + thead + background-color: $table-head-background-color + td, + th + border-width: $table-head-cell-border-width + color: $table-head-cell-color + tfoot + background-color: $table-foot-background-color + td, + th + border-width: $table-foot-cell-border-width + color: $table-foot-cell-color + tbody + background-color: $table-body-background-color + tr + &:last-child + td, + th + border-bottom-width: 0 + // Modifiers + &.is-bordered + td, + th + border-width: 1px + tr + &:last-child + td, + th + border-bottom-width: 1px + &.is-fullwidth + width: 100% + &.is-hoverable + tbody + tr:not(.is-selected) + &:hover + background-color: $table-row-hover-background-color + &.is-striped + tbody + tr:not(.is-selected) + &:hover + background-color: $table-row-hover-background-color + &:nth-child(even) + background-color: $table-striped-row-even-hover-background-color + &.is-narrow + td, + th + padding: 0.25em 0.5em + &.is-striped + tbody + tr:not(.is-selected) + &:nth-child(even) + background-color: $table-striped-row-even-background-color + +.table-container + @extend %block + +overflow-touch + overflow: auto + overflow-y: hidden + max-width: 100% diff --git a/styles/_sass/elements/tag.sass b/styles/_sass/elements/tag.sass new file mode 100644 index 0000000..a5fb3c4 --- /dev/null +++ b/styles/_sass/elements/tag.sass @@ -0,0 +1,130 @@ +$tag-background-color: $background !default +$tag-color: $text !default +$tag-radius: $radius !default +$tag-delete-margin: 1px !default + +.tags + align-items: center + display: flex + flex-wrap: wrap + justify-content: flex-start + .tag + margin-bottom: 0.5rem + &:not(:last-child) + margin-right: 0.5rem + &:last-child + margin-bottom: -0.5rem + &:not(:last-child) + margin-bottom: 1rem + // Sizes + &.are-medium + .tag:not(.is-normal):not(.is-large) + font-size: $size-normal + &.are-large + .tag:not(.is-normal):not(.is-medium) + font-size: $size-medium + &.has-addons + .tag + margin-right: 0 + &:not(:first-child) + border-bottom-left-radius: 0 + border-top-left-radius: 0 + &:not(:last-child) + border-bottom-right-radius: 0 + border-top-right-radius: 0 + &.is-centered + justify-content: center + .tag + margin-right: 0.25rem + margin-left: 0.25rem + &.is-right + justify-content: flex-end + .tag + &:not(:first-child) + margin-left: 0.5rem + &:not(:last-child) + margin-right: 0 + &.has-addons + .tag + margin-right: 0 + &:not(:first-child) + margin-left: 0 + border-bottom-left-radius: 0 + border-top-left-radius: 0 + &:not(:last-child) + border-bottom-right-radius: 0 + border-top-right-radius: 0 + +.tag:not(body) + align-items: center + background-color: $tag-background-color + border-radius: $tag-radius + color: $tag-color + display: inline-flex + font-size: $size-small + height: 2em + justify-content: center + line-height: 1.5 + padding-left: 0.75em + padding-right: 0.75em + white-space: nowrap + .delete + margin-left: 0.25rem + margin-right: -0.375rem + // Colors + @each $name, $pair in $colors + $color: nth($pair, 1) + $color-invert: nth($pair, 2) + &.is-#{$name} + background-color: $color + color: $color-invert + // Sizes + &.is-normal + font-size: $size-small + &.is-medium + font-size: $size-normal + &.is-large + font-size: $size-medium + .icon + &:first-child:not(:last-child) + margin-left: -0.375em + margin-right: 0.1875em + &:last-child:not(:first-child) + margin-left: 0.1875em + margin-right: -0.375em + &:first-child:last-child + margin-left: -0.375em + margin-right: -0.375em + // Modifiers + &.is-delete + margin-left: $tag-delete-margin + padding: 0 + position: relative + width: 2em + &::before, + &::after + background-color: currentColor + content: "" + display: block + left: 50% + position: absolute + top: 50% + transform: translateX(-50%) translateY(-50%) rotate(45deg) + transform-origin: center center + &::before + height: 1px + width: 50% + &::after + height: 50% + width: 1px + &:hover, + &:focus + background-color: darken($tag-background-color, 5%) + &:active + background-color: darken($tag-background-color, 10%) + &.is-rounded + border-radius: $radius-rounded + +a.tag + &:hover + text-decoration: underline diff --git a/styles/_sass/elements/title.sass b/styles/_sass/elements/title.sass new file mode 100644 index 0000000..febe2fc --- /dev/null +++ b/styles/_sass/elements/title.sass @@ -0,0 +1,64 @@ +$title-color: $grey-darker !default +$title-size: $size-3 !default +$title-weight: $weight-semibold !default +$title-line-height: 1.125 !default +$title-strong-color: inherit !default +$title-strong-weight: inherit !default +$title-sub-size: 0.75em !default +$title-sup-size: 0.75em !default + +$subtitle-color: $grey-dark !default +$subtitle-size: $size-5 !default +$subtitle-weight: $weight-normal !default +$subtitle-line-height: 1.25 !default +$subtitle-strong-color: $grey-darker !default +$subtitle-strong-weight: $weight-semibold !default +$subtitle-negative-margin: -1.25rem !default + +.title, +.subtitle + @extend %block + word-break: break-word + em, + span + font-weight: inherit + sub + font-size: $title-sub-size + sup + font-size: $title-sup-size + .tag + vertical-align: middle + +.title + color: $title-color + font-size: $title-size + font-weight: $title-weight + line-height: $title-line-height + strong + color: $title-strong-color + font-weight: $title-strong-weight + & + .highlight + margin-top: -0.75rem + &:not(.is-spaced) + .subtitle + margin-top: $subtitle-negative-margin + // Sizes + @each $size in $sizes + $i: index($sizes, $size) + &.is-#{$i} + font-size: $size + +.subtitle + color: $subtitle-color + font-size: $subtitle-size + font-weight: $subtitle-weight + line-height: $subtitle-line-height + strong + color: $subtitle-strong-color + font-weight: $subtitle-strong-weight + &:not(.is-spaced) + .title + margin-top: $subtitle-negative-margin + // Sizes + @each $size in $sizes + $i: index($sizes, $size) + &.is-#{$i} + font-size: $size diff --git a/styles/_sass/grid/_all.sass b/styles/_sass/grid/_all.sass new file mode 100644 index 0000000..e53070f --- /dev/null +++ b/styles/_sass/grid/_all.sass @@ -0,0 +1,4 @@ +@charset "utf-8" + +@import "columns.sass" +@import "tiles.sass" diff --git a/styles/_sass/grid/columns.sass b/styles/_sass/grid/columns.sass new file mode 100644 index 0000000..bd41761 --- /dev/null +++ b/styles/_sass/grid/columns.sass @@ -0,0 +1,504 @@ +$column-gap: 0.75rem !default + +.column + display: block + flex-basis: 0 + flex-grow: 1 + flex-shrink: 1 + padding: $column-gap + .columns.is-mobile > &.is-narrow + flex: none + .columns.is-mobile > &.is-full + flex: none + width: 100% + .columns.is-mobile > &.is-three-quarters + flex: none + width: 75% + .columns.is-mobile > &.is-two-thirds + flex: none + width: 66.6666% + .columns.is-mobile > &.is-half + flex: none + width: 50% + .columns.is-mobile > &.is-one-third + flex: none + width: 33.3333% + .columns.is-mobile > &.is-one-quarter + flex: none + width: 25% + .columns.is-mobile > &.is-one-fifth + flex: none + width: 20% + .columns.is-mobile > &.is-two-fifths + flex: none + width: 40% + .columns.is-mobile > &.is-three-fifths + flex: none + width: 60% + .columns.is-mobile > &.is-four-fifths + flex: none + width: 80% + .columns.is-mobile > &.is-offset-three-quarters + margin-left: 75% + .columns.is-mobile > &.is-offset-two-thirds + margin-left: 66.6666% + .columns.is-mobile > &.is-offset-half + margin-left: 50% + .columns.is-mobile > &.is-offset-one-third + margin-left: 33.3333% + .columns.is-mobile > &.is-offset-one-quarter + margin-left: 25% + .columns.is-mobile > &.is-offset-one-fifth + margin-left: 20% + .columns.is-mobile > &.is-offset-two-fifths + margin-left: 40% + .columns.is-mobile > &.is-offset-three-fifths + margin-left: 60% + .columns.is-mobile > &.is-offset-four-fifths + margin-left: 80% + @for $i from 1 through 12 + .columns.is-mobile > &.is-#{$i} + flex: none + width: percentage($i / 12) + .columns.is-mobile > &.is-offset-#{$i} + margin-left: percentage($i / 12) + +mobile + &.is-narrow-mobile + flex: none + &.is-full-mobile + flex: none + width: 100% + &.is-three-quarters-mobile + flex: none + width: 75% + &.is-two-thirds-mobile + flex: none + width: 66.6666% + &.is-half-mobile + flex: none + width: 50% + &.is-one-third-mobile + flex: none + width: 33.3333% + &.is-one-quarter-mobile + flex: none + width: 25% + &.is-one-fifth-mobile + flex: none + width: 20% + &.is-two-fifths-mobile + flex: none + width: 40% + &.is-three-fifths-mobile + flex: none + width: 60% + &.is-four-fifths-mobile + flex: none + width: 80% + &.is-offset-three-quarters-mobile + margin-left: 75% + &.is-offset-two-thirds-mobile + margin-left: 66.6666% + &.is-offset-half-mobile + margin-left: 50% + &.is-offset-one-third-mobile + margin-left: 33.3333% + &.is-offset-one-quarter-mobile + margin-left: 25% + &.is-offset-one-fifth-mobile + margin-left: 20% + &.is-offset-two-fifths-mobile + margin-left: 40% + &.is-offset-three-fifths-mobile + margin-left: 60% + &.is-offset-four-fifths-mobile + margin-left: 80% + @for $i from 1 through 12 + &.is-#{$i}-mobile + flex: none + width: percentage($i / 12) + &.is-offset-#{$i}-mobile + margin-left: percentage($i / 12) + +tablet + &.is-narrow, + &.is-narrow-tablet + flex: none + &.is-full, + &.is-full-tablet + flex: none + width: 100% + &.is-three-quarters, + &.is-three-quarters-tablet + flex: none + width: 75% + &.is-two-thirds, + &.is-two-thirds-tablet + flex: none + width: 66.6666% + &.is-half, + &.is-half-tablet + flex: none + width: 50% + &.is-one-third, + &.is-one-third-tablet + flex: none + width: 33.3333% + &.is-one-quarter, + &.is-one-quarter-tablet + flex: none + width: 25% + &.is-one-fifth, + &.is-one-fifth-tablet + flex: none + width: 20% + &.is-two-fifths, + &.is-two-fifths-tablet + flex: none + width: 40% + &.is-three-fifths, + &.is-three-fifths-tablet + flex: none + width: 60% + &.is-four-fifths, + &.is-four-fifths-tablet + flex: none + width: 80% + &.is-offset-three-quarters, + &.is-offset-three-quarters-tablet + margin-left: 75% + &.is-offset-two-thirds, + &.is-offset-two-thirds-tablet + margin-left: 66.6666% + &.is-offset-half, + &.is-offset-half-tablet + margin-left: 50% + &.is-offset-one-third, + &.is-offset-one-third-tablet + margin-left: 33.3333% + &.is-offset-one-quarter, + &.is-offset-one-quarter-tablet + margin-left: 25% + &.is-offset-one-fifth, + &.is-offset-one-fifth-tablet + margin-left: 20% + &.is-offset-two-fifths, + &.is-offset-two-fifths-tablet + margin-left: 40% + &.is-offset-three-fifths, + &.is-offset-three-fifths-tablet + margin-left: 60% + &.is-offset-four-fifths, + &.is-offset-four-fifths-tablet + margin-left: 80% + @for $i from 1 through 12 + &.is-#{$i}, + &.is-#{$i}-tablet + flex: none + width: percentage($i / 12) + &.is-offset-#{$i}, + &.is-offset-#{$i}-tablet + margin-left: percentage($i / 12) + +touch + &.is-narrow-touch + flex: none + &.is-full-touch + flex: none + width: 100% + &.is-three-quarters-touch + flex: none + width: 75% + &.is-two-thirds-touch + flex: none + width: 66.6666% + &.is-half-touch + flex: none + width: 50% + &.is-one-third-touch + flex: none + width: 33.3333% + &.is-one-quarter-touch + flex: none + width: 25% + &.is-one-fifth-touch + flex: none + width: 20% + &.is-two-fifths-touch + flex: none + width: 40% + &.is-three-fifths-touch + flex: none + width: 60% + &.is-four-fifths-touch + flex: none + width: 80% + &.is-offset-three-quarters-touch + margin-left: 75% + &.is-offset-two-thirds-touch + margin-left: 66.6666% + &.is-offset-half-touch + margin-left: 50% + &.is-offset-one-third-touch + margin-left: 33.3333% + &.is-offset-one-quarter-touch + margin-left: 25% + &.is-offset-one-fifth-touch + margin-left: 20% + &.is-offset-two-fifths-touch + margin-left: 40% + &.is-offset-three-fifths-touch + margin-left: 60% + &.is-offset-four-fifths-touch + margin-left: 80% + @for $i from 1 through 12 + &.is-#{$i}-touch + flex: none + width: percentage($i / 12) + &.is-offset-#{$i}-touch + margin-left: percentage($i / 12) + +desktop + &.is-narrow-desktop + flex: none + &.is-full-desktop + flex: none + width: 100% + &.is-three-quarters-desktop + flex: none + width: 75% + &.is-two-thirds-desktop + flex: none + width: 66.6666% + &.is-half-desktop + flex: none + width: 50% + &.is-one-third-desktop + flex: none + width: 33.3333% + &.is-one-quarter-desktop + flex: none + width: 25% + &.is-one-fifth-desktop + flex: none + width: 20% + &.is-two-fifths-desktop + flex: none + width: 40% + &.is-three-fifths-desktop + flex: none + width: 60% + &.is-four-fifths-desktop + flex: none + width: 80% + &.is-offset-three-quarters-desktop + margin-left: 75% + &.is-offset-two-thirds-desktop + margin-left: 66.6666% + &.is-offset-half-desktop + margin-left: 50% + &.is-offset-one-third-desktop + margin-left: 33.3333% + &.is-offset-one-quarter-desktop + margin-left: 25% + &.is-offset-one-fifth-desktop + margin-left: 20% + &.is-offset-two-fifths-desktop + margin-left: 40% + &.is-offset-three-fifths-desktop + margin-left: 60% + &.is-offset-four-fifths-desktop + margin-left: 80% + @for $i from 1 through 12 + &.is-#{$i}-desktop + flex: none + width: percentage($i / 12) + &.is-offset-#{$i}-desktop + margin-left: percentage($i / 12) + +widescreen + &.is-narrow-widescreen + flex: none + &.is-full-widescreen + flex: none + width: 100% + &.is-three-quarters-widescreen + flex: none + width: 75% + &.is-two-thirds-widescreen + flex: none + width: 66.6666% + &.is-half-widescreen + flex: none + width: 50% + &.is-one-third-widescreen + flex: none + width: 33.3333% + &.is-one-quarter-widescreen + flex: none + width: 25% + &.is-one-fifth-widescreen + flex: none + width: 20% + &.is-two-fifths-widescreen + flex: none + width: 40% + &.is-three-fifths-widescreen + flex: none + width: 60% + &.is-four-fifths-widescreen + flex: none + width: 80% + &.is-offset-three-quarters-widescreen + margin-left: 75% + &.is-offset-two-thirds-widescreen + margin-left: 66.6666% + &.is-offset-half-widescreen + margin-left: 50% + &.is-offset-one-third-widescreen + margin-left: 33.3333% + &.is-offset-one-quarter-widescreen + margin-left: 25% + &.is-offset-one-fifth-widescreen + margin-left: 20% + &.is-offset-two-fifths-widescreen + margin-left: 40% + &.is-offset-three-fifths-widescreen + margin-left: 60% + &.is-offset-four-fifths-widescreen + margin-left: 80% + @for $i from 1 through 12 + &.is-#{$i}-widescreen + flex: none + width: percentage($i / 12) + &.is-offset-#{$i}-widescreen + margin-left: percentage($i / 12) + +fullhd + &.is-narrow-fullhd + flex: none + &.is-full-fullhd + flex: none + width: 100% + &.is-three-quarters-fullhd + flex: none + width: 75% + &.is-two-thirds-fullhd + flex: none + width: 66.6666% + &.is-half-fullhd + flex: none + width: 50% + &.is-one-third-fullhd + flex: none + width: 33.3333% + &.is-one-quarter-fullhd + flex: none + width: 25% + &.is-one-fifth-fullhd + flex: none + width: 20% + &.is-two-fifths-fullhd + flex: none + width: 40% + &.is-three-fifths-fullhd + flex: none + width: 60% + &.is-four-fifths-fullhd + flex: none + width: 80% + &.is-offset-three-quarters-fullhd + margin-left: 75% + &.is-offset-two-thirds-fullhd + margin-left: 66.6666% + &.is-offset-half-fullhd + margin-left: 50% + &.is-offset-one-third-fullhd + margin-left: 33.3333% + &.is-offset-one-quarter-fullhd + margin-left: 25% + &.is-offset-one-fifth-fullhd + margin-left: 20% + &.is-offset-two-fifths-fullhd + margin-left: 40% + &.is-offset-three-fifths-fullhd + margin-left: 60% + &.is-offset-four-fifths-fullhd + margin-left: 80% + @for $i from 1 through 12 + &.is-#{$i}-fullhd + flex: none + width: percentage($i / 12) + &.is-offset-#{$i}-fullhd + margin-left: percentage($i / 12) + +.columns + margin-left: (-$column-gap) + margin-right: (-$column-gap) + margin-top: (-$column-gap) + &:last-child + margin-bottom: (-$column-gap) + &:not(:last-child) + margin-bottom: calc(1.5rem - #{$column-gap}) + // Modifiers + &.is-centered + justify-content: center + &.is-gapless + margin-left: 0 + margin-right: 0 + margin-top: 0 + & > .column + margin: 0 + padding: 0 !important + &:not(:last-child) + margin-bottom: 1.5rem + &:last-child + margin-bottom: 0 + &.is-mobile + display: flex + &.is-multiline + flex-wrap: wrap + &.is-vcentered + align-items: center + // Responsiveness + +tablet + &:not(.is-desktop) + display: flex + +desktop + // Modifiers + &.is-desktop + display: flex + +@if $variable-columns + .columns.is-variable + --columnGap: 0.75rem + margin-left: calc(-1 * var(--columnGap)) + margin-right: calc(-1 * var(--columnGap)) + .column + padding-left: var(--columnGap) + padding-right: var(--columnGap) + @for $i from 0 through 8 + &.is-#{$i} + --columnGap: #{$i * 0.25rem} + +mobile + &.is-#{$i}-mobile + --columnGap: #{$i * 0.25rem} + +tablet + &.is-#{$i}-tablet + --columnGap: #{$i * 0.25rem} + +tablet-only + &.is-#{$i}-tablet-only + --columnGap: #{$i * 0.25rem} + +touch + &.is-#{$i}-touch + --columnGap: #{$i * 0.25rem} + +desktop + &.is-#{$i}-desktop + --columnGap: #{$i * 0.25rem} + +desktop-only + &.is-#{$i}-desktop-only + --columnGap: #{$i * 0.25rem} + +widescreen + &.is-#{$i}-widescreen + --columnGap: #{$i * 0.25rem} + +widescreen-only + &.is-#{$i}-widescreen-only + --columnGap: #{$i * 0.25rem} + +fullhd + &.is-#{$i}-fullhd + --columnGap: #{$i * 0.25rem} diff --git a/styles/_sass/grid/tiles.sass b/styles/_sass/grid/tiles.sass new file mode 100644 index 0000000..1f6a626 --- /dev/null +++ b/styles/_sass/grid/tiles.sass @@ -0,0 +1,32 @@ +.tile + align-items: stretch + display: block + flex-basis: 0 + flex-grow: 1 + flex-shrink: 1 + min-height: min-content + // Modifiers + &.is-ancestor + margin-left: -0.75rem + margin-right: -0.75rem + margin-top: -0.75rem + &:last-child + margin-bottom: -0.75rem + &:not(:last-child) + margin-bottom: 0.75rem + &.is-child + margin: 0 !important + &.is-parent + padding: 0.75rem + &.is-vertical + flex-direction: column + & > .tile.is-child:not(:last-child) + margin-bottom: 1.5rem !important + // Responsiveness + +tablet + &:not(.is-child) + display: flex + @for $i from 1 through 12 + &.is-#{$i} + flex: none + width: ($i / 12) * 100% diff --git a/styles/_sass/layout/_all.sass b/styles/_sass/layout/_all.sass new file mode 100644 index 0000000..143ada3 --- /dev/null +++ b/styles/_sass/layout/_all.sass @@ -0,0 +1,5 @@ +@charset "utf-8" + +@import "hero.sass" +@import "section.sass" +@import "footer.sass" diff --git a/styles/_sass/layout/footer.sass b/styles/_sass/layout/footer.sass new file mode 100644 index 0000000..1988153 --- /dev/null +++ b/styles/_sass/layout/footer.sass @@ -0,0 +1,6 @@ +$footer-background-color: $white-bis !default +$footer-padding: 3rem 1.5rem 6rem !default + +.footer + background-color: $footer-background-color + padding: $footer-padding diff --git a/styles/_sass/layout/hero.sass b/styles/_sass/layout/hero.sass new file mode 100644 index 0000000..d988040 --- /dev/null +++ b/styles/_sass/layout/hero.sass @@ -0,0 +1,156 @@ +// Main container + +.hero + align-items: stretch + display: flex + flex-direction: column + justify-content: space-between + .navbar + background: none + .tabs + ul + border-bottom: none + // Colors + @each $name, $pair in $colors + $color: nth($pair, 1) + $color-invert: nth($pair, 2) + &.is-#{$name} + background-color: $color + color: $color-invert + a:not(.button):not(.dropdown-item):not(.tag), + strong + color: inherit + .title + color: $color-invert + .subtitle + color: rgba($color-invert, 0.9) + a:not(.button), + strong + color: $color-invert + .navbar-menu + +touch + background-color: $color + .navbar-item, + .navbar-link + color: rgba($color-invert, 0.7) + a.navbar-item, + .navbar-link + &:hover, + &.is-active + background-color: darken($color, 5%) + color: $color-invert + .tabs + a + color: $color-invert + opacity: 0.9 + &:hover + opacity: 1 + li + &.is-active a + opacity: 1 + &.is-boxed, + &.is-toggle + a + color: $color-invert + &:hover + background-color: rgba($black, 0.1) + li.is-active a + &, + &:hover + background-color: $color-invert + border-color: $color-invert + color: $color + // Modifiers + &.is-bold + $gradient-top-left: darken(saturate(adjust-hue($color, -10deg), 10%), 10%) + $gradient-bottom-right: lighten(saturate(adjust-hue($color, 10deg), 5%), 5%) + background-image: linear-gradient(141deg, $gradient-top-left 0%, $color 71%, $gradient-bottom-right 100%) + +mobile + .navbar-menu + background-image: linear-gradient(141deg, $gradient-top-left 0%, $color 71%, $gradient-bottom-right 100%) + // Responsiveness + // +mobile + // .nav-toggle + // span + // background-color: $color-invert + // &:hover + // background-color: rgba($black, 0.1) + // &.is-active + // span + // background-color: $color-invert + // .nav-menu + // .nav-item + // border-top-color: rgba($color-invert, 0.2) + // Sizes + &.is-small + .hero-body + padding-bottom: 1.5rem + padding-top: 1.5rem + &.is-medium + +tablet + .hero-body + padding-bottom: 9rem + padding-top: 9rem + &.is-large + +tablet + .hero-body + padding-bottom: 18rem + padding-top: 18rem + &.is-halfheight, + &.is-fullheight, + &.is-fullheight-with-navbar + .hero-body + align-items: center + display: flex + & > .container + flex-grow: 1 + flex-shrink: 1 + &.is-halfheight + min-height: 50vh + &.is-fullheight + min-height: 100vh + +// Components + +.hero-video + @extend %overlay + overflow: hidden + video + left: 50% + min-height: 100% + min-width: 100% + position: absolute + top: 50% + transform: translate3d(-50%, -50%, 0) + // Modifiers + &.is-transparent + opacity: 0.3 + // Responsiveness + +mobile + display: none + +.hero-buttons + margin-top: 1.5rem + // Responsiveness + +mobile + .button + display: flex + &:not(:last-child) + margin-bottom: 0.75rem + +tablet + display: flex + justify-content: center + .button:not(:last-child) + margin-right: 1.5rem + +// Containers + +.hero-head, +.hero-foot + flex-grow: 0 + flex-shrink: 0 + +.hero-body + flex-grow: 1 + flex-shrink: 0 + padding: 3rem 1.5rem diff --git a/styles/_sass/layout/section.sass b/styles/_sass/layout/section.sass new file mode 100644 index 0000000..6f2d352 --- /dev/null +++ b/styles/_sass/layout/section.sass @@ -0,0 +1,13 @@ +$section-padding: 3rem 1.5rem !default +$section-padding-medium: 9rem 1.5rem !default +$section-padding-large: 18rem 1.5rem !default + +.section + padding: $section-padding + // Responsiveness + +desktop + // Sizes + &.is-medium + padding: $section-padding-medium + &.is-large + padding: $section-padding-large diff --git a/styles/_sass/utilities/_all.sass b/styles/_sass/utilities/_all.sass new file mode 100644 index 0000000..bf4ecfe --- /dev/null +++ b/styles/_sass/utilities/_all.sass @@ -0,0 +1,8 @@ +@charset "utf-8" + +@import "initial-variables.sass" +@import "functions.sass" +@import "derived-variables.sass" +@import "animations.sass" +@import "mixins.sass" +@import "controls.sass" diff --git a/styles/_sass/utilities/animations.sass b/styles/_sass/utilities/animations.sass new file mode 100644 index 0000000..a14525d --- /dev/null +++ b/styles/_sass/utilities/animations.sass @@ -0,0 +1,5 @@ +@keyframes spinAround + from + transform: rotate(0deg) + to + transform: rotate(359deg) diff --git a/styles/_sass/utilities/controls.sass b/styles/_sass/utilities/controls.sass new file mode 100644 index 0000000..7ca0521 --- /dev/null +++ b/styles/_sass/utilities/controls.sass @@ -0,0 +1,50 @@ +$control-radius: $radius !default +$control-radius-small: $radius-small !default + +$control-border-width: 1px !default + +$control-height: 2.25em !default +$control-line-height: 1.5 !default + +$control-padding-vertical: calc(0.375em - #{$control-border-width}) !default +$control-padding-horizontal: calc(0.625em - #{$control-border-width}) !default + +=control + -moz-appearance: none + -webkit-appearance: none + align-items: center + border: $control-border-width solid transparent + border-radius: $control-radius + box-shadow: none + display: inline-flex + font-size: $size-normal + height: $control-height + justify-content: flex-start + line-height: $control-line-height + padding-bottom: $control-padding-vertical + padding-left: $control-padding-horizontal + padding-right: $control-padding-horizontal + padding-top: $control-padding-vertical + position: relative + vertical-align: top + // States + &:focus, + &.is-focused, + &:active, + &.is-active + outline: none + &[disabled], + fieldset[disabled] & + cursor: not-allowed + +%control + +control + +// The controls sizes use mixins so they can be used at different breakpoints +=control-small + border-radius: $control-radius-small + font-size: $size-small +=control-medium + font-size: $size-medium +=control-large + font-size: $size-large diff --git a/styles/_sass/utilities/derived-variables.sass b/styles/_sass/utilities/derived-variables.sass new file mode 100644 index 0000000..c464814 --- /dev/null +++ b/styles/_sass/utilities/derived-variables.sass @@ -0,0 +1,85 @@ +$primary: $turquoise !default + +$info: $cyan !default +$success: $green !default +$warning: $yellow !default +$danger: $red !default + +$light: $white-ter !default +$dark: $grey-darker !default + +// Invert colors + +$orange-invert: findColorInvert($orange) !default +$yellow-invert: findColorInvert($yellow) !default +$green-invert: findColorInvert($green) !default +$turquoise-invert: findColorInvert($turquoise) !default +$cyan-invert: findColorInvert($cyan) !default +$blue-invert: findColorInvert($blue) !default +$purple-invert: findColorInvert($purple) !default +$red-invert: findColorInvert($red) !default + +$primary-invert: $turquoise-invert !default +$info-invert: $cyan-invert !default +$success-invert: $green-invert !default +$warning-invert: $yellow-invert !default +$danger-invert: $red-invert !default +$light-invert: $dark !default +$dark-invert: $light !default + +// General colors + +$background: $white-ter !default + +$border: $grey-lighter !default +$border-hover: $grey-light !default + +// Text colors + +$text: $grey-dark !default +$text-invert: findColorInvert($text) !default +$text-light: $grey !default +$text-strong: $grey-darker !default + +// Code colors + +$code: $red !default +$code-background: $background !default + +$pre: $text !default +$pre-background: $background !default + +// Link colors + +$link: $blue !default +$link-invert: $blue-invert !default +$link-visited: $purple !default + +$link-hover: $grey-darker !default +$link-hover-border: $grey-light !default + +$link-focus: $grey-darker !default +$link-focus-border: $blue !default + +$link-active: $grey-darker !default +$link-active-border: $grey-dark !default + +// Typography + +$family-primary: $family-sans-serif !default +$family-secondary: $family-sans-serif !default +$family-code: $family-monospace !default + +$size-small: $size-7 !default +$size-normal: $size-6 !default +$size-medium: $size-5 !default +$size-large: $size-4 !default + +// Lists and maps +$custom-colors: null !default +$custom-shades: null !default + +$colors: mergeColorMaps(("white": ($white, $black), "black": ($black, $white), "light": ($light, $light-invert), "dark": ($dark, $dark-invert), "primary": ($primary, $primary-invert), "link": ($link, $link-invert), "info": ($info, $info-invert), "success": ($success, $success-invert), "warning": ($warning, $warning-invert), "danger": ($danger, $danger-invert)), $custom-colors) !default +$shades: mergeColorMaps(("black-bis": $black-bis, "black-ter": $black-ter, "grey-darker": $grey-darker, "grey-dark": $grey-dark, "grey": $grey, "grey-light": $grey-light, "grey-lighter": $grey-lighter, "white-ter": $white-ter, "white-bis": $white-bis), $custom-shades) !default + +$sizes: $size-1 $size-2 $size-3 $size-4 $size-5 $size-6 $size-7 !default diff --git a/styles/_sass/utilities/functions.sass b/styles/_sass/utilities/functions.sass new file mode 100644 index 0000000..acd3e83 --- /dev/null +++ b/styles/_sass/utilities/functions.sass @@ -0,0 +1,62 @@ +@function mergeColorMaps($bulma-colors, $custom-colors) + // we return at least bulma hardcoded colors + $merged-colors: $bulma-colors + + // we want a map as input + @if type-of($custom-colors) == 'map' + @each $name, $components in $custom-colors + // color name should be a string and colors pair a list with at least one element + @if type-of($name) == 'string' and (type-of($components) == 'list' or type-of($components) == 'color') and length($components) >= 1 + $color-base: null + + // the param can either be a single color + // or a list of 2 colors + @if type-of($components) == 'color' + $color-base: $components + @else if type-of($components) == 'list' + $color-base: nth($components, 1) + + $color-invert: null + // is an inverted color provided in the list + @if length($components) > 1 + $color-invert: nth($components, 2) + + // we only want a color as base color + @if type-of($color-base) == 'color' + // if inverted color is not provided or is not a color we compute it + @if type-of($color-invert) != 'color' + $color-invert: findColorInvert($color-base) + + // we merge this colors elements as map with bulma colors (we can override them this way, no multiple definition for the same name) + $merged-colors: map_merge($merged-colors, ($name: ($color-base, $color-invert))) + + @return $merged-colors + +@function powerNumber($number, $exp) + $value: 1 + @if $exp > 0 + @for $i from 1 through $exp + $value: $value * $number + @else if $exp < 0 + @for $i from 1 through -$exp + $value: $value / $number + @return $value + +@function colorLuminance($color) + $color-rgb: ('red': red($color),'green': green($color),'blue': blue($color)) + @each $name, $value in $color-rgb + $adjusted: 0 + $value: $value / 255 + @if $value < 0.03928 + $value: $value / 12.92 + @else + $value: ($value + .055) / 1.055 + $value: powerNumber($value, 2) + $color-rgb: map-merge($color-rgb, ($name: $value)) + @return (map-get($color-rgb, 'red') * .2126) + (map-get($color-rgb, 'green') * .7152) + (map-get($color-rgb, 'blue') * .0722) + +@function findColorInvert($color) + @if (colorLuminance($color) > 0.55) + @return rgba(#000, 0.7) + @else + @return #fff diff --git a/styles/_sass/utilities/initial-variables.sass b/styles/_sass/utilities/initial-variables.sass new file mode 100644 index 0000000..421bd3d --- /dev/null +++ b/styles/_sass/utilities/initial-variables.sass @@ -0,0 +1,72 @@ +// Colors + +$black: hsl(0, 0%, 4%) !default +$black-bis: hsl(0, 0%, 7%) !default +$black-ter: hsl(0, 0%, 14%) !default + +$grey-darker: hsl(0, 0%, 21%) !default +$grey-dark: hsl(0, 0%, 29%) !default +$grey: hsl(0, 0%, 48%) !default +$grey-light: hsl(0, 0%, 71%) !default +$grey-lighter: hsl(0, 0%, 86%) !default + +$white-ter: hsl(0, 0%, 96%) !default +$white-bis: hsl(0, 0%, 98%) !default +$white: hsl(0, 0%, 100%) !default + +$orange: hsl(14, 100%, 53%) !default +$yellow: hsl(48, 100%, 67%) !default +$green: hsl(141, 71%, 48%) !default +$turquoise: hsl(171, 100%, 41%) !default +$cyan: hsl(204, 86%, 53%) !default +$blue: hsl(217, 71%, 53%) !default +$purple: hsl(271, 100%, 71%) !default +$red: hsl(348, 100%, 61%) !default + +// Typography + +$family-sans-serif: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif !default +$family-monospace: monospace !default +$render-mode: optimizeLegibility !default + +$size-1: 3rem !default +$size-2: 2.5rem !default +$size-3: 2rem !default +$size-4: 1.5rem !default +$size-5: 1.25rem !default +$size-6: 1rem !default +$size-7: 0.75rem !default + +$weight-light: 300 !default +$weight-normal: 400 !default +$weight-medium: 500 !default +$weight-semibold: 600 !default +$weight-bold: 700 !default + +// Responsiveness + +// The container horizontal gap, which acts as the offset for breakpoints +$gap: 64px !default +// 960, 1152, and 1344 have been chosen because they are divisible by both 12 and 16 +$tablet: 769px !default +// 960px container + 4rem +$desktop: 960px + (2 * $gap) !default +// 1152px container + 4rem +$widescreen: 1152px + (2 * $gap) !default +$widescreen-enabled: true !default +// 1344px container + 4rem +$fullhd: 1344px + (2 * $gap) !default +$fullhd-enabled: true !default + +// Miscellaneous + +$easing: ease-out !default +$radius-small: 2px !default +$radius: 4px !default +$radius-large: 6px !default +$radius-rounded: 290486px !default +$speed: 86ms !default + +// Flags + +$variable-columns: true !default diff --git a/styles/_sass/utilities/mixins.sass b/styles/_sass/utilities/mixins.sass new file mode 100644 index 0000000..5623e3c --- /dev/null +++ b/styles/_sass/utilities/mixins.sass @@ -0,0 +1,261 @@ +@import "initial-variables" + +=clearfix + &::after + clear: both + content: " " + display: table + +=center($width, $height: 0) + position: absolute + @if $height != 0 + left: calc(50% - (#{$width} / 2)) + top: calc(50% - (#{$height} / 2)) + @else + left: calc(50% - (#{$width} / 2)) + top: calc(50% - (#{$width} / 2)) + +=fa($size, $dimensions) + display: inline-block + font-size: $size + height: $dimensions + line-height: $dimensions + text-align: center + vertical-align: top + width: $dimensions + +=hamburger($dimensions) + cursor: pointer + display: block + height: $dimensions + position: relative + width: $dimensions + span + background-color: currentColor + display: block + height: 1px + left: calc(50% - 8px) + position: absolute + transform-origin: center + transition-duration: $speed + transition-property: background-color, opacity, transform + transition-timing-function: $easing + width: 16px + &:nth-child(1) + top: calc(50% - 6px) + &:nth-child(2) + top: calc(50% - 1px) + &:nth-child(3) + top: calc(50% + 4px) + &:hover + background-color: rgba(black, 0.05) + // Modifers + &.is-active + span + &:nth-child(1) + transform: translateY(5px) rotate(45deg) + &:nth-child(2) + opacity: 0 + &:nth-child(3) + transform: translateY(-5px) rotate(-45deg) + +=overflow-touch + -webkit-overflow-scrolling: touch + +=placeholder + $placeholders: ':-moz' ':-webkit-input' '-moz' '-ms-input' + @each $placeholder in $placeholders + &:#{$placeholder}-placeholder + @content + +// Responsiveness + +=from($device) + @media screen and (min-width: $device) + @content + +=until($device) + @media screen and (max-width: $device - 1px) + @content + +=mobile + @media screen and (max-width: $tablet - 1px) + @content + +=tablet + @media screen and (min-width: $tablet), print + @content + +=tablet-only + @media screen and (min-width: $tablet) and (max-width: $desktop - 1px) + @content + +=touch + @media screen and (max-width: $desktop - 1px) + @content + +=desktop + @media screen and (min-width: $desktop) + @content + +=desktop-only + @if $widescreen-enabled + @media screen and (min-width: $desktop) and (max-width: $widescreen - 1px) + @content + +=until-widescreen + @if $widescreen-enabled + @media screen and (max-width: $widescreen - 1px) + @content + +=widescreen + @if $widescreen-enabled + @media screen and (min-width: $widescreen) + @content + +=widescreen-only + @if $widescreen-enabled and $fullhd-enabled + @media screen and (min-width: $widescreen) and (max-width: $fullhd - 1px) + @content + +=until-fullhd + @if $fullhd-enabled + @media screen and (max-width: $fullhd - 1px) + @content + +=fullhd + @if $fullhd-enabled + @media screen and (min-width: $fullhd) + @content + +// Placeholders + +=unselectable + -webkit-touch-callout: none + -webkit-user-select: none + -moz-user-select: none + -ms-user-select: none + user-select: none + +%unselectable + +unselectable + +=arrow($color: transparent) + border: 3px solid $color + border-radius: 2px + border-right: 0 + border-top: 0 + content: " " + display: block + height: 0.625em + margin-top: -0.4375em + pointer-events: none + position: absolute + top: 50% + transform: rotate(-45deg) + transform-origin: center + width: 0.625em + +%arrow + +arrow + +=block + &:not(:last-child) + margin-bottom: 1.5rem + +%block + +block + +=delete + @extend %unselectable + -moz-appearance: none + -webkit-appearance: none + background-color: rgba($black, 0.2) + border: none + border-radius: $radius-rounded + cursor: pointer + pointer-events: auto + display: inline-block + flex-grow: 0 + flex-shrink: 0 + font-size: 0 + height: 20px + max-height: 20px + max-width: 20px + min-height: 20px + min-width: 20px + outline: none + position: relative + vertical-align: top + width: 20px + &::before, + &::after + background-color: $white + content: "" + display: block + left: 50% + position: absolute + top: 50% + transform: translateX(-50%) translateY(-50%) rotate(45deg) + transform-origin: center center + &::before + height: 2px + width: 50% + &::after + height: 50% + width: 2px + &:hover, + &:focus + background-color: rgba($black, 0.3) + &:active + background-color: rgba($black, 0.4) + // Sizes + &.is-small + height: 16px + max-height: 16px + max-width: 16px + min-height: 16px + min-width: 16px + width: 16px + &.is-medium + height: 24px + max-height: 24px + max-width: 24px + min-height: 24px + min-width: 24px + width: 24px + &.is-large + height: 32px + max-height: 32px + max-width: 32px + min-height: 32px + min-width: 32px + width: 32px + +%delete + +delete + +=loader + animation: spinAround 500ms infinite linear + border: 2px solid $grey-lighter + border-radius: $radius-rounded + border-right-color: transparent + border-top-color: transparent + content: "" + display: block + height: 1em + position: relative + width: 1em + +%loader + +loader + +=overlay($offset: 0) + bottom: $offset + left: $offset + position: absolute + right: $offset + top: $offset + +%overlay + +overlay diff --git a/styles/animate.css b/styles/animate.css new file mode 100644 index 0000000..dac48f1 --- /dev/null +++ b/styles/animate.css @@ -0,0 +1,3623 @@ +@charset "UTF-8"; + +/*! + * animate.css -http://daneden.me/animate + * Version - 3.7.0 + * Licensed under the MIT license - http://opensource.org/licenses/MIT + * + * Copyright (c) 2018 Daniel Eden + */ + +@-webkit-keyframes bounce { + from, + 20%, + 53%, + 80%, + to { + -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } + + 40%, + 43% { + -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); + animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); + -webkit-transform: translate3d(0, -30px, 0); + transform: translate3d(0, -30px, 0); + } + + 70% { + -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); + animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); + -webkit-transform: translate3d(0, -15px, 0); + transform: translate3d(0, -15px, 0); + } + + 90% { + -webkit-transform: translate3d(0, -4px, 0); + transform: translate3d(0, -4px, 0); + } +} + +@keyframes bounce { + from, + 20%, + 53%, + 80%, + to { + -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } + + 40%, + 43% { + -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); + animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); + -webkit-transform: translate3d(0, -30px, 0); + transform: translate3d(0, -30px, 0); + } + + 70% { + -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); + animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); + -webkit-transform: translate3d(0, -15px, 0); + transform: translate3d(0, -15px, 0); + } + + 90% { + -webkit-transform: translate3d(0, -4px, 0); + transform: translate3d(0, -4px, 0); + } +} + +.bounce { + -webkit-animation-name: bounce; + animation-name: bounce; + -webkit-transform-origin: center bottom; + transform-origin: center bottom; +} + +@-webkit-keyframes flash { + from, + 50%, + to { + opacity: 1; + } + + 25%, + 75% { + opacity: 0; + } +} + +@keyframes flash { + from, + 50%, + to { + opacity: 1; + } + + 25%, + 75% { + opacity: 0; + } +} + +.flash { + -webkit-animation-name: flash; + animation-name: flash; +} + +/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ + +@-webkit-keyframes pulse { + from { + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); + } + + 50% { + -webkit-transform: scale3d(1.05, 1.05, 1.05); + transform: scale3d(1.05, 1.05, 1.05); + } + + to { + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); + } +} + +@keyframes pulse { + from { + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); + } + + 50% { + -webkit-transform: scale3d(1.05, 1.05, 1.05); + transform: scale3d(1.05, 1.05, 1.05); + } + + to { + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); + } +} + +.pulse { + -webkit-animation-name: pulse; + animation-name: pulse; +} + +@-webkit-keyframes rubberBand { + from { + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); + } + + 30% { + -webkit-transform: scale3d(1.25, 0.75, 1); + transform: scale3d(1.25, 0.75, 1); + } + + 40% { + -webkit-transform: scale3d(0.75, 1.25, 1); + transform: scale3d(0.75, 1.25, 1); + } + + 50% { + -webkit-transform: scale3d(1.15, 0.85, 1); + transform: scale3d(1.15, 0.85, 1); + } + + 65% { + -webkit-transform: scale3d(0.95, 1.05, 1); + transform: scale3d(0.95, 1.05, 1); + } + + 75% { + -webkit-transform: scale3d(1.05, 0.95, 1); + transform: scale3d(1.05, 0.95, 1); + } + + to { + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); + } +} + +@keyframes rubberBand { + from { + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); + } + + 30% { + -webkit-transform: scale3d(1.25, 0.75, 1); + transform: scale3d(1.25, 0.75, 1); + } + + 40% { + -webkit-transform: scale3d(0.75, 1.25, 1); + transform: scale3d(0.75, 1.25, 1); + } + + 50% { + -webkit-transform: scale3d(1.15, 0.85, 1); + transform: scale3d(1.15, 0.85, 1); + } + + 65% { + -webkit-transform: scale3d(0.95, 1.05, 1); + transform: scale3d(0.95, 1.05, 1); + } + + 75% { + -webkit-transform: scale3d(1.05, 0.95, 1); + transform: scale3d(1.05, 0.95, 1); + } + + to { + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); + } +} + +.rubberBand { + -webkit-animation-name: rubberBand; + animation-name: rubberBand; +} + +@-webkit-keyframes shake { + from, + to { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } + + 10%, + 30%, + 50%, + 70%, + 90% { + -webkit-transform: translate3d(-10px, 0, 0); + transform: translate3d(-10px, 0, 0); + } + + 20%, + 40%, + 60%, + 80% { + -webkit-transform: translate3d(10px, 0, 0); + transform: translate3d(10px, 0, 0); + } +} + +@keyframes shake { + from, + to { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } + + 10%, + 30%, + 50%, + 70%, + 90% { + -webkit-transform: translate3d(-10px, 0, 0); + transform: translate3d(-10px, 0, 0); + } + + 20%, + 40%, + 60%, + 80% { + -webkit-transform: translate3d(10px, 0, 0); + transform: translate3d(10px, 0, 0); + } +} + +.shake { + -webkit-animation-name: shake; + animation-name: shake; +} + +@-webkit-keyframes headShake { + 0% { + -webkit-transform: translateX(0); + transform: translateX(0); + } + + 6.5% { + -webkit-transform: translateX(-6px) rotateY(-9deg); + transform: translateX(-6px) rotateY(-9deg); + } + + 18.5% { + -webkit-transform: translateX(5px) rotateY(7deg); + transform: translateX(5px) rotateY(7deg); + } + + 31.5% { + -webkit-transform: translateX(-3px) rotateY(-5deg); + transform: translateX(-3px) rotateY(-5deg); + } + + 43.5% { + -webkit-transform: translateX(2px) rotateY(3deg); + transform: translateX(2px) rotateY(3deg); + } + + 50% { + -webkit-transform: translateX(0); + transform: translateX(0); + } +} + +@keyframes headShake { + 0% { + -webkit-transform: translateX(0); + transform: translateX(0); + } + + 6.5% { + -webkit-transform: translateX(-6px) rotateY(-9deg); + transform: translateX(-6px) rotateY(-9deg); + } + + 18.5% { + -webkit-transform: translateX(5px) rotateY(7deg); + transform: translateX(5px) rotateY(7deg); + } + + 31.5% { + -webkit-transform: translateX(-3px) rotateY(-5deg); + transform: translateX(-3px) rotateY(-5deg); + } + + 43.5% { + -webkit-transform: translateX(2px) rotateY(3deg); + transform: translateX(2px) rotateY(3deg); + } + + 50% { + -webkit-transform: translateX(0); + transform: translateX(0); + } +} + +.headShake { + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; + -webkit-animation-name: headShake; + animation-name: headShake; +} + +@-webkit-keyframes swing { + 20% { + -webkit-transform: rotate3d(0, 0, 1, 15deg); + transform: rotate3d(0, 0, 1, 15deg); + } + + 40% { + -webkit-transform: rotate3d(0, 0, 1, -10deg); + transform: rotate3d(0, 0, 1, -10deg); + } + + 60% { + -webkit-transform: rotate3d(0, 0, 1, 5deg); + transform: rotate3d(0, 0, 1, 5deg); + } + + 80% { + -webkit-transform: rotate3d(0, 0, 1, -5deg); + transform: rotate3d(0, 0, 1, -5deg); + } + + to { + -webkit-transform: rotate3d(0, 0, 1, 0deg); + transform: rotate3d(0, 0, 1, 0deg); + } +} + +@keyframes swing { + 20% { + -webkit-transform: rotate3d(0, 0, 1, 15deg); + transform: rotate3d(0, 0, 1, 15deg); + } + + 40% { + -webkit-transform: rotate3d(0, 0, 1, -10deg); + transform: rotate3d(0, 0, 1, -10deg); + } + + 60% { + -webkit-transform: rotate3d(0, 0, 1, 5deg); + transform: rotate3d(0, 0, 1, 5deg); + } + + 80% { + -webkit-transform: rotate3d(0, 0, 1, -5deg); + transform: rotate3d(0, 0, 1, -5deg); + } + + to { + -webkit-transform: rotate3d(0, 0, 1, 0deg); + transform: rotate3d(0, 0, 1, 0deg); + } +} + +.swing { + -webkit-transform-origin: top center; + transform-origin: top center; + -webkit-animation-name: swing; + animation-name: swing; +} + +@-webkit-keyframes tada { + from { + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); + } + + 10%, + 20% { + -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); + transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); + } + + 30%, + 50%, + 70%, + 90% { + -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); + transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); + } + + 40%, + 60%, + 80% { + -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); + transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); + } + + to { + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); + } +} + +@keyframes tada { + from { + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); + } + + 10%, + 20% { + -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); + transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); + } + + 30%, + 50%, + 70%, + 90% { + -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); + transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); + } + + 40%, + 60%, + 80% { + -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); + transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); + } + + to { + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); + } +} + +.tada { + -webkit-animation-name: tada; + animation-name: tada; +} + +/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ + +@-webkit-keyframes wobble { + from { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } + + 15% { + -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); + transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); + } + + 30% { + -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); + transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); + } + + 45% { + -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); + transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); + } + + 60% { + -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); + transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); + } + + 75% { + -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); + transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); + } + + to { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +} + +@keyframes wobble { + from { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } + + 15% { + -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); + transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); + } + + 30% { + -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); + transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); + } + + 45% { + -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); + transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); + } + + 60% { + -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); + transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); + } + + 75% { + -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); + transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); + } + + to { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +} + +.wobble { + -webkit-animation-name: wobble; + animation-name: wobble; +} + +@-webkit-keyframes jello { + from, + 11.1%, + to { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } + + 22.2% { + -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); + transform: skewX(-12.5deg) skewY(-12.5deg); + } + + 33.3% { + -webkit-transform: skewX(6.25deg) skewY(6.25deg); + transform: skewX(6.25deg) skewY(6.25deg); + } + + 44.4% { + -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); + transform: skewX(-3.125deg) skewY(-3.125deg); + } + + 55.5% { + -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); + transform: skewX(1.5625deg) skewY(1.5625deg); + } + + 66.6% { + -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg); + transform: skewX(-0.78125deg) skewY(-0.78125deg); + } + + 77.7% { + -webkit-transform: skewX(0.390625deg) skewY(0.390625deg); + transform: skewX(0.390625deg) skewY(0.390625deg); + } + + 88.8% { + -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg); + transform: skewX(-0.1953125deg) skewY(-0.1953125deg); + } +} + +@keyframes jello { + from, + 11.1%, + to { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } + + 22.2% { + -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); + transform: skewX(-12.5deg) skewY(-12.5deg); + } + + 33.3% { + -webkit-transform: skewX(6.25deg) skewY(6.25deg); + transform: skewX(6.25deg) skewY(6.25deg); + } + + 44.4% { + -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); + transform: skewX(-3.125deg) skewY(-3.125deg); + } + + 55.5% { + -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); + transform: skewX(1.5625deg) skewY(1.5625deg); + } + + 66.6% { + -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg); + transform: skewX(-0.78125deg) skewY(-0.78125deg); + } + + 77.7% { + -webkit-transform: skewX(0.390625deg) skewY(0.390625deg); + transform: skewX(0.390625deg) skewY(0.390625deg); + } + + 88.8% { + -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg); + transform: skewX(-0.1953125deg) skewY(-0.1953125deg); + } +} + +.jello { + -webkit-animation-name: jello; + animation-name: jello; + -webkit-transform-origin: center; + transform-origin: center; +} + +@-webkit-keyframes heartBeat { + 0% { + -webkit-transform: scale(1); + transform: scale(1); + } + + 14% { + -webkit-transform: scale(1.3); + transform: scale(1.3); + } + + 28% { + -webkit-transform: scale(1); + transform: scale(1); + } + + 42% { + -webkit-transform: scale(1.3); + transform: scale(1.3); + } + + 70% { + -webkit-transform: scale(1); + transform: scale(1); + } +} + +@keyframes heartBeat { + 0% { + -webkit-transform: scale(1); + transform: scale(1); + } + + 14% { + -webkit-transform: scale(1.3); + transform: scale(1.3); + } + + 28% { + -webkit-transform: scale(1); + transform: scale(1); + } + + 42% { + -webkit-transform: scale(1.3); + transform: scale(1.3); + } + + 70% { + -webkit-transform: scale(1); + transform: scale(1); + } +} + +.heartBeat { + -webkit-animation-name: heartBeat; + animation-name: heartBeat; + -webkit-animation-duration: 1.3s; + animation-duration: 1.3s; + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; +} + +@-webkit-keyframes bounceIn { + from, + 20%, + 40%, + 60%, + 80%, + to { + -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + } + + 0% { + opacity: 0; + -webkit-transform: scale3d(0.3, 0.3, 0.3); + transform: scale3d(0.3, 0.3, 0.3); + } + + 20% { + -webkit-transform: scale3d(1.1, 1.1, 1.1); + transform: scale3d(1.1, 1.1, 1.1); + } + + 40% { + -webkit-transform: scale3d(0.9, 0.9, 0.9); + transform: scale3d(0.9, 0.9, 0.9); + } + + 60% { + opacity: 1; + -webkit-transform: scale3d(1.03, 1.03, 1.03); + transform: scale3d(1.03, 1.03, 1.03); + } + + 80% { + -webkit-transform: scale3d(0.97, 0.97, 0.97); + transform: scale3d(0.97, 0.97, 0.97); + } + + to { + opacity: 1; + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); + } +} + +@keyframes bounceIn { + from, + 20%, + 40%, + 60%, + 80%, + to { + -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + } + + 0% { + opacity: 0; + -webkit-transform: scale3d(0.3, 0.3, 0.3); + transform: scale3d(0.3, 0.3, 0.3); + } + + 20% { + -webkit-transform: scale3d(1.1, 1.1, 1.1); + transform: scale3d(1.1, 1.1, 1.1); + } + + 40% { + -webkit-transform: scale3d(0.9, 0.9, 0.9); + transform: scale3d(0.9, 0.9, 0.9); + } + + 60% { + opacity: 1; + -webkit-transform: scale3d(1.03, 1.03, 1.03); + transform: scale3d(1.03, 1.03, 1.03); + } + + 80% { + -webkit-transform: scale3d(0.97, 0.97, 0.97); + transform: scale3d(0.97, 0.97, 0.97); + } + + to { + opacity: 1; + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); + } +} + +.bounceIn { + -webkit-animation-duration: 0.75s; + animation-duration: 0.75s; + -webkit-animation-name: bounceIn; + animation-name: bounceIn; +} + +@-webkit-keyframes bounceInDown { + from, + 60%, + 75%, + 90%, + to { + -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + } + + 0% { + opacity: 0; + -webkit-transform: translate3d(0, -3000px, 0); + transform: translate3d(0, -3000px, 0); + } + + 60% { + opacity: 1; + -webkit-transform: translate3d(0, 25px, 0); + transform: translate3d(0, 25px, 0); + } + + 75% { + -webkit-transform: translate3d(0, -10px, 0); + transform: translate3d(0, -10px, 0); + } + + 90% { + -webkit-transform: translate3d(0, 5px, 0); + transform: translate3d(0, 5px, 0); + } + + to { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +} + +@keyframes bounceInDown { + from, + 60%, + 75%, + 90%, + to { + -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + } + + 0% { + opacity: 0; + -webkit-transform: translate3d(0, -3000px, 0); + transform: translate3d(0, -3000px, 0); + } + + 60% { + opacity: 1; + -webkit-transform: translate3d(0, 25px, 0); + transform: translate3d(0, 25px, 0); + } + + 75% { + -webkit-transform: translate3d(0, -10px, 0); + transform: translate3d(0, -10px, 0); + } + + 90% { + -webkit-transform: translate3d(0, 5px, 0); + transform: translate3d(0, 5px, 0); + } + + to { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +} + +.bounceInDown { + -webkit-animation-name: bounceInDown; + animation-name: bounceInDown; +} + +@-webkit-keyframes bounceInLeft { + from, + 60%, + 75%, + 90%, + to { + -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + } + + 0% { + opacity: 0; + -webkit-transform: translate3d(-3000px, 0, 0); + transform: translate3d(-3000px, 0, 0); + } + + 60% { + opacity: 1; + -webkit-transform: translate3d(25px, 0, 0); + transform: translate3d(25px, 0, 0); + } + + 75% { + -webkit-transform: translate3d(-10px, 0, 0); + transform: translate3d(-10px, 0, 0); + } + + 90% { + -webkit-transform: translate3d(5px, 0, 0); + transform: translate3d(5px, 0, 0); + } + + to { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +} + +@keyframes bounceInLeft { + from, + 60%, + 75%, + 90%, + to { + -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + } + + 0% { + opacity: 0; + -webkit-transform: translate3d(-3000px, 0, 0); + transform: translate3d(-3000px, 0, 0); + } + + 60% { + opacity: 1; + -webkit-transform: translate3d(25px, 0, 0); + transform: translate3d(25px, 0, 0); + } + + 75% { + -webkit-transform: translate3d(-10px, 0, 0); + transform: translate3d(-10px, 0, 0); + } + + 90% { + -webkit-transform: translate3d(5px, 0, 0); + transform: translate3d(5px, 0, 0); + } + + to { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +} + +.bounceInLeft { + -webkit-animation-name: bounceInLeft; + animation-name: bounceInLeft; +} + +@-webkit-keyframes bounceInRight { + from, + 60%, + 75%, + 90%, + to { + -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + } + + from { + opacity: 0; + -webkit-transform: translate3d(3000px, 0, 0); + transform: translate3d(3000px, 0, 0); + } + + 60% { + opacity: 1; + -webkit-transform: translate3d(-25px, 0, 0); + transform: translate3d(-25px, 0, 0); + } + + 75% { + -webkit-transform: translate3d(10px, 0, 0); + transform: translate3d(10px, 0, 0); + } + + 90% { + -webkit-transform: translate3d(-5px, 0, 0); + transform: translate3d(-5px, 0, 0); + } + + to { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +} + +@keyframes bounceInRight { + from, + 60%, + 75%, + 90%, + to { + -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + } + + from { + opacity: 0; + -webkit-transform: translate3d(3000px, 0, 0); + transform: translate3d(3000px, 0, 0); + } + + 60% { + opacity: 1; + -webkit-transform: translate3d(-25px, 0, 0); + transform: translate3d(-25px, 0, 0); + } + + 75% { + -webkit-transform: translate3d(10px, 0, 0); + transform: translate3d(10px, 0, 0); + } + + 90% { + -webkit-transform: translate3d(-5px, 0, 0); + transform: translate3d(-5px, 0, 0); + } + + to { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +} + +.bounceInRight { + -webkit-animation-name: bounceInRight; + animation-name: bounceInRight; +} + +@-webkit-keyframes bounceInUp { + from, + 60%, + 75%, + 90%, + to { + -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + } + + from { + opacity: 0; + -webkit-transform: translate3d(0, 3000px, 0); + transform: translate3d(0, 3000px, 0); + } + + 60% { + opacity: 1; + -webkit-transform: translate3d(0, -20px, 0); + transform: translate3d(0, -20px, 0); + } + + 75% { + -webkit-transform: translate3d(0, 10px, 0); + transform: translate3d(0, 10px, 0); + } + + 90% { + -webkit-transform: translate3d(0, -5px, 0); + transform: translate3d(0, -5px, 0); + } + + to { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +} + +@keyframes bounceInUp { + from, + 60%, + 75%, + 90%, + to { + -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + } + + from { + opacity: 0; + -webkit-transform: translate3d(0, 3000px, 0); + transform: translate3d(0, 3000px, 0); + } + + 60% { + opacity: 1; + -webkit-transform: translate3d(0, -20px, 0); + transform: translate3d(0, -20px, 0); + } + + 75% { + -webkit-transform: translate3d(0, 10px, 0); + transform: translate3d(0, 10px, 0); + } + + 90% { + -webkit-transform: translate3d(0, -5px, 0); + transform: translate3d(0, -5px, 0); + } + + to { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +} + +.bounceInUp { + -webkit-animation-name: bounceInUp; + animation-name: bounceInUp; +} + +@-webkit-keyframes bounceOut { + 20% { + -webkit-transform: scale3d(0.9, 0.9, 0.9); + transform: scale3d(0.9, 0.9, 0.9); + } + + 50%, + 55% { + opacity: 1; + -webkit-transform: scale3d(1.1, 1.1, 1.1); + transform: scale3d(1.1, 1.1, 1.1); + } + + to { + opacity: 0; + -webkit-transform: scale3d(0.3, 0.3, 0.3); + transform: scale3d(0.3, 0.3, 0.3); + } +} + +@keyframes bounceOut { + 20% { + -webkit-transform: scale3d(0.9, 0.9, 0.9); + transform: scale3d(0.9, 0.9, 0.9); + } + + 50%, + 55% { + opacity: 1; + -webkit-transform: scale3d(1.1, 1.1, 1.1); + transform: scale3d(1.1, 1.1, 1.1); + } + + to { + opacity: 0; + -webkit-transform: scale3d(0.3, 0.3, 0.3); + transform: scale3d(0.3, 0.3, 0.3); + } +} + +.bounceOut { + -webkit-animation-duration: 0.75s; + animation-duration: 0.75s; + -webkit-animation-name: bounceOut; + animation-name: bounceOut; +} + +@-webkit-keyframes bounceOutDown { + 20% { + -webkit-transform: translate3d(0, 10px, 0); + transform: translate3d(0, 10px, 0); + } + + 40%, + 45% { + opacity: 1; + -webkit-transform: translate3d(0, -20px, 0); + transform: translate3d(0, -20px, 0); + } + + to { + opacity: 0; + -webkit-transform: translate3d(0, 2000px, 0); + transform: translate3d(0, 2000px, 0); + } +} + +@keyframes bounceOutDown { + 20% { + -webkit-transform: translate3d(0, 10px, 0); + transform: translate3d(0, 10px, 0); + } + + 40%, + 45% { + opacity: 1; + -webkit-transform: translate3d(0, -20px, 0); + transform: translate3d(0, -20px, 0); + } + + to { + opacity: 0; + -webkit-transform: translate3d(0, 2000px, 0); + transform: translate3d(0, 2000px, 0); + } +} + +.bounceOutDown { + -webkit-animation-name: bounceOutDown; + animation-name: bounceOutDown; +} + +@-webkit-keyframes bounceOutLeft { + 20% { + opacity: 1; + -webkit-transform: translate3d(20px, 0, 0); + transform: translate3d(20px, 0, 0); + } + + to { + opacity: 0; + -webkit-transform: translate3d(-2000px, 0, 0); + transform: translate3d(-2000px, 0, 0); + } +} + +@keyframes bounceOutLeft { + 20% { + opacity: 1; + -webkit-transform: translate3d(20px, 0, 0); + transform: translate3d(20px, 0, 0); + } + + to { + opacity: 0; + -webkit-transform: translate3d(-2000px, 0, 0); + transform: translate3d(-2000px, 0, 0); + } +} + +.bounceOutLeft { + -webkit-animation-name: bounceOutLeft; + animation-name: bounceOutLeft; +} + +@-webkit-keyframes bounceOutRight { + 20% { + opacity: 1; + -webkit-transform: translate3d(-20px, 0, 0); + transform: translate3d(-20px, 0, 0); + } + + to { + opacity: 0; + -webkit-transform: translate3d(2000px, 0, 0); + transform: translate3d(2000px, 0, 0); + } +} + +@keyframes bounceOutRight { + 20% { + opacity: 1; + -webkit-transform: translate3d(-20px, 0, 0); + transform: translate3d(-20px, 0, 0); + } + + to { + opacity: 0; + -webkit-transform: translate3d(2000px, 0, 0); + transform: translate3d(2000px, 0, 0); + } +} + +.bounceOutRight { + -webkit-animation-name: bounceOutRight; + animation-name: bounceOutRight; +} + +@-webkit-keyframes bounceOutUp { + 20% { + -webkit-transform: translate3d(0, -10px, 0); + transform: translate3d(0, -10px, 0); + } + + 40%, + 45% { + opacity: 1; + -webkit-transform: translate3d(0, 20px, 0); + transform: translate3d(0, 20px, 0); + } + + to { + opacity: 0; + -webkit-transform: translate3d(0, -2000px, 0); + transform: translate3d(0, -2000px, 0); + } +} + +@keyframes bounceOutUp { + 20% { + -webkit-transform: translate3d(0, -10px, 0); + transform: translate3d(0, -10px, 0); + } + + 40%, + 45% { + opacity: 1; + -webkit-transform: translate3d(0, 20px, 0); + transform: translate3d(0, 20px, 0); + } + + to { + opacity: 0; + -webkit-transform: translate3d(0, -2000px, 0); + transform: translate3d(0, -2000px, 0); + } +} + +.bounceOutUp { + -webkit-animation-name: bounceOutUp; + animation-name: bounceOutUp; +} + +@-webkit-keyframes fadeIn { + from { + opacity: 0; + } + + to { + opacity: 1; + } +} + +@keyframes fadeIn { + from { + opacity: 0; + } + + to { + opacity: 1; + } +} + +.fadeIn { + -webkit-animation-name: fadeIn; + animation-name: fadeIn; +} + +@-webkit-keyframes fadeInDown { + from { + opacity: 0; + -webkit-transform: translate3d(0, -100%, 0); + transform: translate3d(0, -100%, 0); + } + + to { + opacity: 1; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +} + +@keyframes fadeInDown { + from { + opacity: 0; + -webkit-transform: translate3d(0, -100%, 0); + transform: translate3d(0, -100%, 0); + } + + to { + opacity: 1; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +} + +.fadeInDown { + -webkit-animation-name: fadeInDown; + animation-name: fadeInDown; +} + +@-webkit-keyframes fadeInDownBig { + from { + opacity: 0; + -webkit-transform: translate3d(0, -2000px, 0); + transform: translate3d(0, -2000px, 0); + } + + to { + opacity: 1; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +} + +@keyframes fadeInDownBig { + from { + opacity: 0; + -webkit-transform: translate3d(0, -2000px, 0); + transform: translate3d(0, -2000px, 0); + } + + to { + opacity: 1; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +} + +.fadeInDownBig { + -webkit-animation-name: fadeInDownBig; + animation-name: fadeInDownBig; +} + +@-webkit-keyframes fadeInLeft { + from { + opacity: 0; + -webkit-transform: translate3d(-100%, 0, 0); + transform: translate3d(-100%, 0, 0); + } + + to { + opacity: 1; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +} + +@keyframes fadeInLeft { + from { + opacity: 0; + -webkit-transform: translate3d(-100%, 0, 0); + transform: translate3d(-100%, 0, 0); + } + + to { + opacity: 1; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +} + +.fadeInLeft { + -webkit-animation-name: fadeInLeft; + animation-name: fadeInLeft; +} + +@-webkit-keyframes fadeInLeftBig { + from { + opacity: 0; + -webkit-transform: translate3d(-2000px, 0, 0); + transform: translate3d(-2000px, 0, 0); + } + + to { + opacity: 1; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +} + +@keyframes fadeInLeftBig { + from { + opacity: 0; + -webkit-transform: translate3d(-2000px, 0, 0); + transform: translate3d(-2000px, 0, 0); + } + + to { + opacity: 1; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +} + +.fadeInLeftBig { + -webkit-animation-name: fadeInLeftBig; + animation-name: fadeInLeftBig; +} + +@-webkit-keyframes fadeInRight { + from { + opacity: 0; + -webkit-transform: translate3d(100%, 0, 0); + transform: translate3d(100%, 0, 0); + } + + to { + opacity: 1; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +} + +@keyframes fadeInRight { + from { + opacity: 0; + -webkit-transform: translate3d(100%, 0, 0); + transform: translate3d(100%, 0, 0); + } + + to { + opacity: 1; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +} + +.fadeInRight { + -webkit-animation-name: fadeInRight; + animation-name: fadeInRight; +} + +@-webkit-keyframes fadeInRightBig { + from { + opacity: 0; + -webkit-transform: translate3d(2000px, 0, 0); + transform: translate3d(2000px, 0, 0); + } + + to { + opacity: 1; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +} + +@keyframes fadeInRightBig { + from { + opacity: 0; + -webkit-transform: translate3d(2000px, 0, 0); + transform: translate3d(2000px, 0, 0); + } + + to { + opacity: 1; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +} + +.fadeInRightBig { + -webkit-animation-name: fadeInRightBig; + animation-name: fadeInRightBig; +} + +@-webkit-keyframes fadeInUp { + from { + opacity: 0; + -webkit-transform: translate3d(0, 100%, 0); + transform: translate3d(0, 100%, 0); + } + + to { + opacity: 1; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +} + +@keyframes fadeInUp { + from { + opacity: 0; + -webkit-transform: translate3d(0, 100%, 0); + transform: translate3d(0, 100%, 0); + } + + to { + opacity: 1; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +} + +.fadeInUp { + -webkit-animation-name: fadeInUp; + animation-name: fadeInUp; +} + +@-webkit-keyframes fadeInUpBig { + from { + opacity: 0; + -webkit-transform: translate3d(0, 2000px, 0); + transform: translate3d(0, 2000px, 0); + } + + to { + opacity: 1; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +} + +@keyframes fadeInUpBig { + from { + opacity: 0; + -webkit-transform: translate3d(0, 2000px, 0); + transform: translate3d(0, 2000px, 0); + } + + to { + opacity: 1; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +} + +.fadeInUpBig { + -webkit-animation-name: fadeInUpBig; + animation-name: fadeInUpBig; +} + +@-webkit-keyframes fadeOut { + from { + opacity: 1; + } + + to { + opacity: 0; + } +} + +@keyframes fadeOut { + from { + opacity: 1; + } + + to { + opacity: 0; + } +} + +.fadeOut { + -webkit-animation-name: fadeOut; + animation-name: fadeOut; +} + +@-webkit-keyframes fadeOutDown { + from { + opacity: 1; + } + + to { + opacity: 0; + -webkit-transform: translate3d(0, 100%, 0); + transform: translate3d(0, 100%, 0); + } +} + +@keyframes fadeOutDown { + from { + opacity: 1; + } + + to { + opacity: 0; + -webkit-transform: translate3d(0, 100%, 0); + transform: translate3d(0, 100%, 0); + } +} + +.fadeOutDown { + -webkit-animation-name: fadeOutDown; + animation-name: fadeOutDown; +} + +@-webkit-keyframes fadeOutDownBig { + from { + opacity: 1; + } + + to { + opacity: 0; + -webkit-transform: translate3d(0, 2000px, 0); + transform: translate3d(0, 2000px, 0); + } +} + +@keyframes fadeOutDownBig { + from { + opacity: 1; + } + + to { + opacity: 0; + -webkit-transform: translate3d(0, 2000px, 0); + transform: translate3d(0, 2000px, 0); + } +} + +.fadeOutDownBig { + -webkit-animation-name: fadeOutDownBig; + animation-name: fadeOutDownBig; +} + +@-webkit-keyframes fadeOutLeft { + from { + opacity: 1; + } + + to { + opacity: 0; + -webkit-transform: translate3d(-100%, 0, 0); + transform: translate3d(-100%, 0, 0); + } +} + +@keyframes fadeOutLeft { + from { + opacity: 1; + } + + to { + opacity: 0; + -webkit-transform: translate3d(-100%, 0, 0); + transform: translate3d(-100%, 0, 0); + } +} + +.fadeOutLeft { + -webkit-animation-name: fadeOutLeft; + animation-name: fadeOutLeft; +} + +@-webkit-keyframes fadeOutLeftBig { + from { + opacity: 1; + } + + to { + opacity: 0; + -webkit-transform: translate3d(-2000px, 0, 0); + transform: translate3d(-2000px, 0, 0); + } +} + +@keyframes fadeOutLeftBig { + from { + opacity: 1; + } + + to { + opacity: 0; + -webkit-transform: translate3d(-2000px, 0, 0); + transform: translate3d(-2000px, 0, 0); + } +} + +.fadeOutLeftBig { + -webkit-animation-name: fadeOutLeftBig; + animation-name: fadeOutLeftBig; +} + +@-webkit-keyframes fadeOutRight { + from { + opacity: 1; + } + + to { + opacity: 0; + -webkit-transform: translate3d(100%, 0, 0); + transform: translate3d(100%, 0, 0); + } +} + +@keyframes fadeOutRight { + from { + opacity: 1; + } + + to { + opacity: 0; + -webkit-transform: translate3d(100%, 0, 0); + transform: translate3d(100%, 0, 0); + } +} + +.fadeOutRight { + -webkit-animation-name: fadeOutRight; + animation-name: fadeOutRight; +} + +@-webkit-keyframes fadeOutRightBig { + from { + opacity: 1; + } + + to { + opacity: 0; + -webkit-transform: translate3d(2000px, 0, 0); + transform: translate3d(2000px, 0, 0); + } +} + +@keyframes fadeOutRightBig { + from { + opacity: 1; + } + + to { + opacity: 0; + -webkit-transform: translate3d(2000px, 0, 0); + transform: translate3d(2000px, 0, 0); + } +} + +.fadeOutRightBig { + -webkit-animation-name: fadeOutRightBig; + animation-name: fadeOutRightBig; +} + +@-webkit-keyframes fadeOutUp { + from { + opacity: 1; + } + + to { + opacity: 0; + -webkit-transform: translate3d(0, -100%, 0); + transform: translate3d(0, -100%, 0); + } +} + +@keyframes fadeOutUp { + from { + opacity: 1; + } + + to { + opacity: 0; + -webkit-transform: translate3d(0, -100%, 0); + transform: translate3d(0, -100%, 0); + } +} + +.fadeOutUp { + -webkit-animation-name: fadeOutUp; + animation-name: fadeOutUp; +} + +@-webkit-keyframes fadeOutUpBig { + from { + opacity: 1; + } + + to { + opacity: 0; + -webkit-transform: translate3d(0, -2000px, 0); + transform: translate3d(0, -2000px, 0); + } +} + +@keyframes fadeOutUpBig { + from { + opacity: 1; + } + + to { + opacity: 0; + -webkit-transform: translate3d(0, -2000px, 0); + transform: translate3d(0, -2000px, 0); + } +} + +.fadeOutUpBig { + -webkit-animation-name: fadeOutUpBig; + animation-name: fadeOutUpBig; +} + +@-webkit-keyframes flip { + from { + -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) + rotate3d(0, 1, 0, -360deg); + transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg); + -webkit-animation-timing-function: ease-out; + animation-timing-function: ease-out; + } + + 40% { + -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) + rotate3d(0, 1, 0, -190deg); + transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) + rotate3d(0, 1, 0, -190deg); + -webkit-animation-timing-function: ease-out; + animation-timing-function: ease-out; + } + + 50% { + -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) + rotate3d(0, 1, 0, -170deg); + transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) + rotate3d(0, 1, 0, -170deg); + -webkit-animation-timing-function: ease-in; + animation-timing-function: ease-in; + } + + 80% { + -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) + rotate3d(0, 1, 0, 0deg); + transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) + rotate3d(0, 1, 0, 0deg); + -webkit-animation-timing-function: ease-in; + animation-timing-function: ease-in; + } + + to { + -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) + rotate3d(0, 1, 0, 0deg); + transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg); + -webkit-animation-timing-function: ease-in; + animation-timing-function: ease-in; + } +} + +@keyframes flip { + from { + -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) + rotate3d(0, 1, 0, -360deg); + transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg); + -webkit-animation-timing-function: ease-out; + animation-timing-function: ease-out; + } + + 40% { + -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) + rotate3d(0, 1, 0, -190deg); + transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) + rotate3d(0, 1, 0, -190deg); + -webkit-animation-timing-function: ease-out; + animation-timing-function: ease-out; + } + + 50% { + -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) + rotate3d(0, 1, 0, -170deg); + transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) + rotate3d(0, 1, 0, -170deg); + -webkit-animation-timing-function: ease-in; + animation-timing-function: ease-in; + } + + 80% { + -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) + rotate3d(0, 1, 0, 0deg); + transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) + rotate3d(0, 1, 0, 0deg); + -webkit-animation-timing-function: ease-in; + animation-timing-function: ease-in; + } + + to { + -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) + rotate3d(0, 1, 0, 0deg); + transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg); + -webkit-animation-timing-function: ease-in; + animation-timing-function: ease-in; + } +} + +.animated.flip { + -webkit-backface-visibility: visible; + backface-visibility: visible; + -webkit-animation-name: flip; + animation-name: flip; +} + +@-webkit-keyframes flipInX { + from { + -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); + transform: perspective(400px) rotate3d(1, 0, 0, 90deg); + -webkit-animation-timing-function: ease-in; + animation-timing-function: ease-in; + opacity: 0; + } + + 40% { + -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); + transform: perspective(400px) rotate3d(1, 0, 0, -20deg); + -webkit-animation-timing-function: ease-in; + animation-timing-function: ease-in; + } + + 60% { + -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); + transform: perspective(400px) rotate3d(1, 0, 0, 10deg); + opacity: 1; + } + + 80% { + -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); + transform: perspective(400px) rotate3d(1, 0, 0, -5deg); + } + + to { + -webkit-transform: perspective(400px); + transform: perspective(400px); + } +} + +@keyframes flipInX { + from { + -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); + transform: perspective(400px) rotate3d(1, 0, 0, 90deg); + -webkit-animation-timing-function: ease-in; + animation-timing-function: ease-in; + opacity: 0; + } + + 40% { + -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); + transform: perspective(400px) rotate3d(1, 0, 0, -20deg); + -webkit-animation-timing-function: ease-in; + animation-timing-function: ease-in; + } + + 60% { + -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); + transform: perspective(400px) rotate3d(1, 0, 0, 10deg); + opacity: 1; + } + + 80% { + -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); + transform: perspective(400px) rotate3d(1, 0, 0, -5deg); + } + + to { + -webkit-transform: perspective(400px); + transform: perspective(400px); + } +} + +.flipInX { + -webkit-backface-visibility: visible !important; + backface-visibility: visible !important; + -webkit-animation-name: flipInX; + animation-name: flipInX; +} + +@-webkit-keyframes flipInY { + from { + -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); + transform: perspective(400px) rotate3d(0, 1, 0, 90deg); + -webkit-animation-timing-function: ease-in; + animation-timing-function: ease-in; + opacity: 0; + } + + 40% { + -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); + transform: perspective(400px) rotate3d(0, 1, 0, -20deg); + -webkit-animation-timing-function: ease-in; + animation-timing-function: ease-in; + } + + 60% { + -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); + transform: perspective(400px) rotate3d(0, 1, 0, 10deg); + opacity: 1; + } + + 80% { + -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); + transform: perspective(400px) rotate3d(0, 1, 0, -5deg); + } + + to { + -webkit-transform: perspective(400px); + transform: perspective(400px); + } +} + +@keyframes flipInY { + from { + -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); + transform: perspective(400px) rotate3d(0, 1, 0, 90deg); + -webkit-animation-timing-function: ease-in; + animation-timing-function: ease-in; + opacity: 0; + } + + 40% { + -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); + transform: perspective(400px) rotate3d(0, 1, 0, -20deg); + -webkit-animation-timing-function: ease-in; + animation-timing-function: ease-in; + } + + 60% { + -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); + transform: perspective(400px) rotate3d(0, 1, 0, 10deg); + opacity: 1; + } + + 80% { + -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); + transform: perspective(400px) rotate3d(0, 1, 0, -5deg); + } + + to { + -webkit-transform: perspective(400px); + transform: perspective(400px); + } +} + +.flipInY { + -webkit-backface-visibility: visible !important; + backface-visibility: visible !important; + -webkit-animation-name: flipInY; + animation-name: flipInY; +} + +@-webkit-keyframes flipOutX { + from { + -webkit-transform: perspective(400px); + transform: perspective(400px); + } + + 30% { + -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); + transform: perspective(400px) rotate3d(1, 0, 0, -20deg); + opacity: 1; + } + + to { + -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); + transform: perspective(400px) rotate3d(1, 0, 0, 90deg); + opacity: 0; + } +} + +@keyframes flipOutX { + from { + -webkit-transform: perspective(400px); + transform: perspective(400px); + } + + 30% { + -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); + transform: perspective(400px) rotate3d(1, 0, 0, -20deg); + opacity: 1; + } + + to { + -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); + transform: perspective(400px) rotate3d(1, 0, 0, 90deg); + opacity: 0; + } +} + +.flipOutX { + -webkit-animation-duration: 0.75s; + animation-duration: 0.75s; + -webkit-animation-name: flipOutX; + animation-name: flipOutX; + -webkit-backface-visibility: visible !important; + backface-visibility: visible !important; +} + +@-webkit-keyframes flipOutY { + from { + -webkit-transform: perspective(400px); + transform: perspective(400px); + } + + 30% { + -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg); + transform: perspective(400px) rotate3d(0, 1, 0, -15deg); + opacity: 1; + } + + to { + -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); + transform: perspective(400px) rotate3d(0, 1, 0, 90deg); + opacity: 0; + } +} + +@keyframes flipOutY { + from { + -webkit-transform: perspective(400px); + transform: perspective(400px); + } + + 30% { + -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg); + transform: perspective(400px) rotate3d(0, 1, 0, -15deg); + opacity: 1; + } + + to { + -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); + transform: perspective(400px) rotate3d(0, 1, 0, 90deg); + opacity: 0; + } +} + +.flipOutY { + -webkit-animation-duration: 0.75s; + animation-duration: 0.75s; + -webkit-backface-visibility: visible !important; + backface-visibility: visible !important; + -webkit-animation-name: flipOutY; + animation-name: flipOutY; +} + +@-webkit-keyframes lightSpeedIn { + from { + -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); + transform: translate3d(100%, 0, 0) skewX(-30deg); + opacity: 0; + } + + 60% { + -webkit-transform: skewX(20deg); + transform: skewX(20deg); + opacity: 1; + } + + 80% { + -webkit-transform: skewX(-5deg); + transform: skewX(-5deg); + } + + to { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +} + +@keyframes lightSpeedIn { + from { + -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); + transform: translate3d(100%, 0, 0) skewX(-30deg); + opacity: 0; + } + + 60% { + -webkit-transform: skewX(20deg); + transform: skewX(20deg); + opacity: 1; + } + + 80% { + -webkit-transform: skewX(-5deg); + transform: skewX(-5deg); + } + + to { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +} + +.lightSpeedIn { + -webkit-animation-name: lightSpeedIn; + animation-name: lightSpeedIn; + -webkit-animation-timing-function: ease-out; + animation-timing-function: ease-out; +} + +@-webkit-keyframes lightSpeedOut { + from { + opacity: 1; + } + + to { + -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); + transform: translate3d(100%, 0, 0) skewX(30deg); + opacity: 0; + } +} + +@keyframes lightSpeedOut { + from { + opacity: 1; + } + + to { + -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); + transform: translate3d(100%, 0, 0) skewX(30deg); + opacity: 0; + } +} + +.lightSpeedOut { + -webkit-animation-name: lightSpeedOut; + animation-name: lightSpeedOut; + -webkit-animation-timing-function: ease-in; + animation-timing-function: ease-in; +} + +@-webkit-keyframes rotateIn { + from { + -webkit-transform-origin: center; + transform-origin: center; + -webkit-transform: rotate3d(0, 0, 1, -200deg); + transform: rotate3d(0, 0, 1, -200deg); + opacity: 0; + } + + to { + -webkit-transform-origin: center; + transform-origin: center; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + opacity: 1; + } +} + +@keyframes rotateIn { + from { + -webkit-transform-origin: center; + transform-origin: center; + -webkit-transform: rotate3d(0, 0, 1, -200deg); + transform: rotate3d(0, 0, 1, -200deg); + opacity: 0; + } + + to { + -webkit-transform-origin: center; + transform-origin: center; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + opacity: 1; + } +} + +.rotateIn { + -webkit-animation-name: rotateIn; + animation-name: rotateIn; +} + +@-webkit-keyframes rotateInDownLeft { + from { + -webkit-transform-origin: left bottom; + transform-origin: left bottom; + -webkit-transform: rotate3d(0, 0, 1, -45deg); + transform: rotate3d(0, 0, 1, -45deg); + opacity: 0; + } + + to { + -webkit-transform-origin: left bottom; + transform-origin: left bottom; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + opacity: 1; + } +} + +@keyframes rotateInDownLeft { + from { + -webkit-transform-origin: left bottom; + transform-origin: left bottom; + -webkit-transform: rotate3d(0, 0, 1, -45deg); + transform: rotate3d(0, 0, 1, -45deg); + opacity: 0; + } + + to { + -webkit-transform-origin: left bottom; + transform-origin: left bottom; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + opacity: 1; + } +} + +.rotateInDownLeft { + -webkit-animation-name: rotateInDownLeft; + animation-name: rotateInDownLeft; +} + +@-webkit-keyframes rotateInDownRight { + from { + -webkit-transform-origin: right bottom; + transform-origin: right bottom; + -webkit-transform: rotate3d(0, 0, 1, 45deg); + transform: rotate3d(0, 0, 1, 45deg); + opacity: 0; + } + + to { + -webkit-transform-origin: right bottom; + transform-origin: right bottom; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + opacity: 1; + } +} + +@keyframes rotateInDownRight { + from { + -webkit-transform-origin: right bottom; + transform-origin: right bottom; + -webkit-transform: rotate3d(0, 0, 1, 45deg); + transform: rotate3d(0, 0, 1, 45deg); + opacity: 0; + } + + to { + -webkit-transform-origin: right bottom; + transform-origin: right bottom; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + opacity: 1; + } +} + +.rotateInDownRight { + -webkit-animation-name: rotateInDownRight; + animation-name: rotateInDownRight; +} + +@-webkit-keyframes rotateInUpLeft { + from { + -webkit-transform-origin: left bottom; + transform-origin: left bottom; + -webkit-transform: rotate3d(0, 0, 1, 45deg); + transform: rotate3d(0, 0, 1, 45deg); + opacity: 0; + } + + to { + -webkit-transform-origin: left bottom; + transform-origin: left bottom; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + opacity: 1; + } +} + +@keyframes rotateInUpLeft { + from { + -webkit-transform-origin: left bottom; + transform-origin: left bottom; + -webkit-transform: rotate3d(0, 0, 1, 45deg); + transform: rotate3d(0, 0, 1, 45deg); + opacity: 0; + } + + to { + -webkit-transform-origin: left bottom; + transform-origin: left bottom; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + opacity: 1; + } +} + +.rotateInUpLeft { + -webkit-animation-name: rotateInUpLeft; + animation-name: rotateInUpLeft; +} + +@-webkit-keyframes rotateInUpRight { + from { + -webkit-transform-origin: right bottom; + transform-origin: right bottom; + -webkit-transform: rotate3d(0, 0, 1, -90deg); + transform: rotate3d(0, 0, 1, -90deg); + opacity: 0; + } + + to { + -webkit-transform-origin: right bottom; + transform-origin: right bottom; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + opacity: 1; + } +} + +@keyframes rotateInUpRight { + from { + -webkit-transform-origin: right bottom; + transform-origin: right bottom; + -webkit-transform: rotate3d(0, 0, 1, -90deg); + transform: rotate3d(0, 0, 1, -90deg); + opacity: 0; + } + + to { + -webkit-transform-origin: right bottom; + transform-origin: right bottom; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + opacity: 1; + } +} + +.rotateInUpRight { + -webkit-animation-name: rotateInUpRight; + animation-name: rotateInUpRight; +} + +@-webkit-keyframes rotateOut { + from { + -webkit-transform-origin: center; + transform-origin: center; + opacity: 1; + } + + to { + -webkit-transform-origin: center; + transform-origin: center; + -webkit-transform: rotate3d(0, 0, 1, 200deg); + transform: rotate3d(0, 0, 1, 200deg); + opacity: 0; + } +} + +@keyframes rotateOut { + from { + -webkit-transform-origin: center; + transform-origin: center; + opacity: 1; + } + + to { + -webkit-transform-origin: center; + transform-origin: center; + -webkit-transform: rotate3d(0, 0, 1, 200deg); + transform: rotate3d(0, 0, 1, 200deg); + opacity: 0; + } +} + +.rotateOut { + -webkit-animation-name: rotateOut; + animation-name: rotateOut; +} + +@-webkit-keyframes rotateOutDownLeft { + from { + -webkit-transform-origin: left bottom; + transform-origin: left bottom; + opacity: 1; + } + + to { + -webkit-transform-origin: left bottom; + transform-origin: left bottom; + -webkit-transform: rotate3d(0, 0, 1, 45deg); + transform: rotate3d(0, 0, 1, 45deg); + opacity: 0; + } +} + +@keyframes rotateOutDownLeft { + from { + -webkit-transform-origin: left bottom; + transform-origin: left bottom; + opacity: 1; + } + + to { + -webkit-transform-origin: left bottom; + transform-origin: left bottom; + -webkit-transform: rotate3d(0, 0, 1, 45deg); + transform: rotate3d(0, 0, 1, 45deg); + opacity: 0; + } +} + +.rotateOutDownLeft { + -webkit-animation-name: rotateOutDownLeft; + animation-name: rotateOutDownLeft; +} + +@-webkit-keyframes rotateOutDownRight { + from { + -webkit-transform-origin: right bottom; + transform-origin: right bottom; + opacity: 1; + } + + to { + -webkit-transform-origin: right bottom; + transform-origin: right bottom; + -webkit-transform: rotate3d(0, 0, 1, -45deg); + transform: rotate3d(0, 0, 1, -45deg); + opacity: 0; + } +} + +@keyframes rotateOutDownRight { + from { + -webkit-transform-origin: right bottom; + transform-origin: right bottom; + opacity: 1; + } + + to { + -webkit-transform-origin: right bottom; + transform-origin: right bottom; + -webkit-transform: rotate3d(0, 0, 1, -45deg); + transform: rotate3d(0, 0, 1, -45deg); + opacity: 0; + } +} + +.rotateOutDownRight { + -webkit-animation-name: rotateOutDownRight; + animation-name: rotateOutDownRight; +} + +@-webkit-keyframes rotateOutUpLeft { + from { + -webkit-transform-origin: left bottom; + transform-origin: left bottom; + opacity: 1; + } + + to { + -webkit-transform-origin: left bottom; + transform-origin: left bottom; + -webkit-transform: rotate3d(0, 0, 1, -45deg); + transform: rotate3d(0, 0, 1, -45deg); + opacity: 0; + } +} + +@keyframes rotateOutUpLeft { + from { + -webkit-transform-origin: left bottom; + transform-origin: left bottom; + opacity: 1; + } + + to { + -webkit-transform-origin: left bottom; + transform-origin: left bottom; + -webkit-transform: rotate3d(0, 0, 1, -45deg); + transform: rotate3d(0, 0, 1, -45deg); + opacity: 0; + } +} + +.rotateOutUpLeft { + -webkit-animation-name: rotateOutUpLeft; + animation-name: rotateOutUpLeft; +} + +@-webkit-keyframes rotateOutUpRight { + from { + -webkit-transform-origin: right bottom; + transform-origin: right bottom; + opacity: 1; + } + + to { + -webkit-transform-origin: right bottom; + transform-origin: right bottom; + -webkit-transform: rotate3d(0, 0, 1, 90deg); + transform: rotate3d(0, 0, 1, 90deg); + opacity: 0; + } +} + +@keyframes rotateOutUpRight { + from { + -webkit-transform-origin: right bottom; + transform-origin: right bottom; + opacity: 1; + } + + to { + -webkit-transform-origin: right bottom; + transform-origin: right bottom; + -webkit-transform: rotate3d(0, 0, 1, 90deg); + transform: rotate3d(0, 0, 1, 90deg); + opacity: 0; + } +} + +.rotateOutUpRight { + -webkit-animation-name: rotateOutUpRight; + animation-name: rotateOutUpRight; +} + +@-webkit-keyframes hinge { + 0% { + -webkit-transform-origin: top left; + transform-origin: top left; + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; + } + + 20%, + 60% { + -webkit-transform: rotate3d(0, 0, 1, 80deg); + transform: rotate3d(0, 0, 1, 80deg); + -webkit-transform-origin: top left; + transform-origin: top left; + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; + } + + 40%, + 80% { + -webkit-transform: rotate3d(0, 0, 1, 60deg); + transform: rotate3d(0, 0, 1, 60deg); + -webkit-transform-origin: top left; + transform-origin: top left; + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; + opacity: 1; + } + + to { + -webkit-transform: translate3d(0, 700px, 0); + transform: translate3d(0, 700px, 0); + opacity: 0; + } +} + +@keyframes hinge { + 0% { + -webkit-transform-origin: top left; + transform-origin: top left; + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; + } + + 20%, + 60% { + -webkit-transform: rotate3d(0, 0, 1, 80deg); + transform: rotate3d(0, 0, 1, 80deg); + -webkit-transform-origin: top left; + transform-origin: top left; + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; + } + + 40%, + 80% { + -webkit-transform: rotate3d(0, 0, 1, 60deg); + transform: rotate3d(0, 0, 1, 60deg); + -webkit-transform-origin: top left; + transform-origin: top left; + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; + opacity: 1; + } + + to { + -webkit-transform: translate3d(0, 700px, 0); + transform: translate3d(0, 700px, 0); + opacity: 0; + } +} + +.hinge { + -webkit-animation-duration: 2s; + animation-duration: 2s; + -webkit-animation-name: hinge; + animation-name: hinge; +} + +@-webkit-keyframes jackInTheBox { + from { + opacity: 0; + -webkit-transform: scale(0.1) rotate(30deg); + transform: scale(0.1) rotate(30deg); + -webkit-transform-origin: center bottom; + transform-origin: center bottom; + } + + 50% { + -webkit-transform: rotate(-10deg); + transform: rotate(-10deg); + } + + 70% { + -webkit-transform: rotate(3deg); + transform: rotate(3deg); + } + + to { + opacity: 1; + -webkit-transform: scale(1); + transform: scale(1); + } +} + +@keyframes jackInTheBox { + from { + opacity: 0; + -webkit-transform: scale(0.1) rotate(30deg); + transform: scale(0.1) rotate(30deg); + -webkit-transform-origin: center bottom; + transform-origin: center bottom; + } + + 50% { + -webkit-transform: rotate(-10deg); + transform: rotate(-10deg); + } + + 70% { + -webkit-transform: rotate(3deg); + transform: rotate(3deg); + } + + to { + opacity: 1; + -webkit-transform: scale(1); + transform: scale(1); + } +} + +.jackInTheBox { + -webkit-animation-name: jackInTheBox; + animation-name: jackInTheBox; +} + +/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ + +@-webkit-keyframes rollIn { + from { + opacity: 0; + -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); + transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); + } + + to { + opacity: 1; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +} + +@keyframes rollIn { + from { + opacity: 0; + -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); + transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); + } + + to { + opacity: 1; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +} + +.rollIn { + -webkit-animation-name: rollIn; + animation-name: rollIn; +} + +/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ + +@-webkit-keyframes rollOut { + from { + opacity: 1; + } + + to { + opacity: 0; + -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); + transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); + } +} + +@keyframes rollOut { + from { + opacity: 1; + } + + to { + opacity: 0; + -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); + transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); + } +} + +.rollOut { + -webkit-animation-name: rollOut; + animation-name: rollOut; +} + +@-webkit-keyframes zoomIn { + from { + opacity: 0; + -webkit-transform: scale3d(0.3, 0.3, 0.3); + transform: scale3d(0.3, 0.3, 0.3); + } + + 50% { + opacity: 1; + } +} + +@keyframes zoomIn { + from { + opacity: 0; + -webkit-transform: scale3d(0.3, 0.3, 0.3); + transform: scale3d(0.3, 0.3, 0.3); + } + + 50% { + opacity: 1; + } +} + +.zoomIn { + -webkit-animation-name: zoomIn; + animation-name: zoomIn; +} + +@-webkit-keyframes zoomInDown { + from { + opacity: 0; + -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); + transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); + -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); + animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); + } + + 60% { + opacity: 1; + -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); + transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); + -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); + animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); + } +} + +@keyframes zoomInDown { + from { + opacity: 0; + -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); + transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); + -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); + animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); + } + + 60% { + opacity: 1; + -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); + transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); + -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); + animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); + } +} + +.zoomInDown { + -webkit-animation-name: zoomInDown; + animation-name: zoomInDown; +} + +@-webkit-keyframes zoomInLeft { + from { + opacity: 0; + -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); + transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); + -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); + animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); + } + + 60% { + opacity: 1; + -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); + transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); + -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); + animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); + } +} + +@keyframes zoomInLeft { + from { + opacity: 0; + -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); + transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); + -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); + animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); + } + + 60% { + opacity: 1; + -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); + transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); + -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); + animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); + } +} + +.zoomInLeft { + -webkit-animation-name: zoomInLeft; + animation-name: zoomInLeft; +} + +@-webkit-keyframes zoomInRight { + from { + opacity: 0; + -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); + transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); + -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); + animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); + } + + 60% { + opacity: 1; + -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); + transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); + -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); + animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); + } +} + +@keyframes zoomInRight { + from { + opacity: 0; + -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); + transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); + -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); + animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); + } + + 60% { + opacity: 1; + -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); + transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); + -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); + animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); + } +} + +.zoomInRight { + -webkit-animation-name: zoomInRight; + animation-name: zoomInRight; +} + +@-webkit-keyframes zoomInUp { + from { + opacity: 0; + -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); + transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); + -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); + animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); + } + + 60% { + opacity: 1; + -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); + transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); + -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); + animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); + } +} + +@keyframes zoomInUp { + from { + opacity: 0; + -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); + transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); + -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); + animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); + } + + 60% { + opacity: 1; + -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); + transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); + -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); + animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); + } +} + +.zoomInUp { + -webkit-animation-name: zoomInUp; + animation-name: zoomInUp; +} + +@-webkit-keyframes zoomOut { + from { + opacity: 1; + } + + 50% { + opacity: 0; + -webkit-transform: scale3d(0.3, 0.3, 0.3); + transform: scale3d(0.3, 0.3, 0.3); + } + + to { + opacity: 0; + } +} + +@keyframes zoomOut { + from { + opacity: 1; + } + + 50% { + opacity: 0; + -webkit-transform: scale3d(0.3, 0.3, 0.3); + transform: scale3d(0.3, 0.3, 0.3); + } + + to { + opacity: 0; + } +} + +.zoomOut { + -webkit-animation-name: zoomOut; + animation-name: zoomOut; +} + +@-webkit-keyframes zoomOutDown { + 40% { + opacity: 1; + -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); + transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); + -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); + animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); + } + + to { + opacity: 0; + -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); + transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); + -webkit-transform-origin: center bottom; + transform-origin: center bottom; + -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); + animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); + } +} + +@keyframes zoomOutDown { + 40% { + opacity: 1; + -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); + transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); + -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); + animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); + } + + to { + opacity: 0; + -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); + transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); + -webkit-transform-origin: center bottom; + transform-origin: center bottom; + -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); + animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); + } +} + +.zoomOutDown { + -webkit-animation-name: zoomOutDown; + animation-name: zoomOutDown; +} + +@-webkit-keyframes zoomOutLeft { + 40% { + opacity: 1; + -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); + transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); + } + + to { + opacity: 0; + -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0); + transform: scale(0.1) translate3d(-2000px, 0, 0); + -webkit-transform-origin: left center; + transform-origin: left center; + } +} + +@keyframes zoomOutLeft { + 40% { + opacity: 1; + -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); + transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); + } + + to { + opacity: 0; + -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0); + transform: scale(0.1) translate3d(-2000px, 0, 0); + -webkit-transform-origin: left center; + transform-origin: left center; + } +} + +.zoomOutLeft { + -webkit-animation-name: zoomOutLeft; + animation-name: zoomOutLeft; +} + +@-webkit-keyframes zoomOutRight { + 40% { + opacity: 1; + -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); + transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); + } + + to { + opacity: 0; + -webkit-transform: scale(0.1) translate3d(2000px, 0, 0); + transform: scale(0.1) translate3d(2000px, 0, 0); + -webkit-transform-origin: right center; + transform-origin: right center; + } +} + +@keyframes zoomOutRight { + 40% { + opacity: 1; + -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); + transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); + } + + to { + opacity: 0; + -webkit-transform: scale(0.1) translate3d(2000px, 0, 0); + transform: scale(0.1) translate3d(2000px, 0, 0); + -webkit-transform-origin: right center; + transform-origin: right center; + } +} + +.zoomOutRight { + -webkit-animation-name: zoomOutRight; + animation-name: zoomOutRight; +} + +@-webkit-keyframes zoomOutUp { + 40% { + opacity: 1; + -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); + transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); + -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); + animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); + } + + to { + opacity: 0; + -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); + transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); + -webkit-transform-origin: center bottom; + transform-origin: center bottom; + -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); + animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); + } +} + +@keyframes zoomOutUp { + 40% { + opacity: 1; + -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); + transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); + -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); + animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); + } + + to { + opacity: 0; + -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); + transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); + -webkit-transform-origin: center bottom; + transform-origin: center bottom; + -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); + animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); + } +} + +.zoomOutUp { + -webkit-animation-name: zoomOutUp; + animation-name: zoomOutUp; +} + +@-webkit-keyframes slideInDown { + from { + -webkit-transform: translate3d(0, -100%, 0); + transform: translate3d(0, -100%, 0); + visibility: visible; + } + + to { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +} + +@keyframes slideInDown { + from { + -webkit-transform: translate3d(0, -100%, 0); + transform: translate3d(0, -100%, 0); + visibility: visible; + } + + to { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +} + +.slideInDown { + -webkit-animation-name: slideInDown; + animation-name: slideInDown; +} + +@-webkit-keyframes slideInLeft { + from { + -webkit-transform: translate3d(-100%, 0, 0); + transform: translate3d(-100%, 0, 0); + visibility: visible; + } + + to { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +} + +@keyframes slideInLeft { + from { + -webkit-transform: translate3d(-100%, 0, 0); + transform: translate3d(-100%, 0, 0); + visibility: visible; + } + + to { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +} + +.slideInLeft { + -webkit-animation-name: slideInLeft; + animation-name: slideInLeft; +} + +@-webkit-keyframes slideInRight { + from { + -webkit-transform: translate3d(100%, 0, 0); + transform: translate3d(100%, 0, 0); + visibility: visible; + } + + to { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +} + +@keyframes slideInRight { + from { + -webkit-transform: translate3d(100%, 0, 0); + transform: translate3d(100%, 0, 0); + visibility: visible; + } + + to { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +} + +.slideInRight { + -webkit-animation-name: slideInRight; + animation-name: slideInRight; +} + +@-webkit-keyframes slideInUp { + from { + -webkit-transform: translate3d(0, 100%, 0); + transform: translate3d(0, 100%, 0); + visibility: visible; + } + + to { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +} + +@keyframes slideInUp { + from { + -webkit-transform: translate3d(0, 100%, 0); + transform: translate3d(0, 100%, 0); + visibility: visible; + } + + to { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +} + +.slideInUp { + -webkit-animation-name: slideInUp; + animation-name: slideInUp; +} + +@-webkit-keyframes slideOutDown { + from { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } + + to { + visibility: hidden; + -webkit-transform: translate3d(0, 100%, 0); + transform: translate3d(0, 100%, 0); + } +} + +@keyframes slideOutDown { + from { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } + + to { + visibility: hidden; + -webkit-transform: translate3d(0, 100%, 0); + transform: translate3d(0, 100%, 0); + } +} + +.slideOutDown { + -webkit-animation-name: slideOutDown; + animation-name: slideOutDown; +} + +@-webkit-keyframes slideOutLeft { + from { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } + + to { + visibility: hidden; + -webkit-transform: translate3d(-100%, 0, 0); + transform: translate3d(-100%, 0, 0); + } +} + +@keyframes slideOutLeft { + from { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } + + to { + visibility: hidden; + -webkit-transform: translate3d(-100%, 0, 0); + transform: translate3d(-100%, 0, 0); + } +} + +.slideOutLeft { + -webkit-animation-name: slideOutLeft; + animation-name: slideOutLeft; +} + +@-webkit-keyframes slideOutRight { + from { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } + + to { + visibility: hidden; + -webkit-transform: translate3d(100%, 0, 0); + transform: translate3d(100%, 0, 0); + } +} + +@keyframes slideOutRight { + from { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } + + to { + visibility: hidden; + -webkit-transform: translate3d(100%, 0, 0); + transform: translate3d(100%, 0, 0); + } +} + +.slideOutRight { + -webkit-animation-name: slideOutRight; + animation-name: slideOutRight; +} + +@-webkit-keyframes slideOutUp { + from { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } + + to { + visibility: hidden; + -webkit-transform: translate3d(0, -100%, 0); + transform: translate3d(0, -100%, 0); + } +} + +@keyframes slideOutUp { + from { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } + + to { + visibility: hidden; + -webkit-transform: translate3d(0, -100%, 0); + transform: translate3d(0, -100%, 0); + } +} + +.slideOutUp { + -webkit-animation-name: slideOutUp; + animation-name: slideOutUp; +} + +.animated { + -webkit-animation-duration: 1s; + animation-duration: 1s; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +.animated.infinite { + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; +} + +.animated.delay-1s { + -webkit-animation-delay: 1s; + animation-delay: 1s; +} + +.animated.delay-2s { + -webkit-animation-delay: 2s; + animation-delay: 2s; +} + +.animated.delay-3s { + -webkit-animation-delay: 3s; + animation-delay: 3s; +} + +.animated.delay-4s { + -webkit-animation-delay: 4s; + animation-delay: 4s; +} + +.animated.delay-5s { + -webkit-animation-delay: 5s; + animation-delay: 5s; +} + +.animated.fast { + -webkit-animation-duration: 800ms; + animation-duration: 800ms; +} + +.animated.faster { + -webkit-animation-duration: 500ms; + animation-duration: 500ms; +} + +.animated.slow { + -webkit-animation-duration: 2s; + animation-duration: 2s; +} + +.animated.slower { + -webkit-animation-duration: 3s; + animation-duration: 3s; +} + +@media (print), (prefers-reduced-motion) { + .animated { + -webkit-animation: unset !important; + animation: unset !important; + -webkit-transition: none !important; + transition: none !important; + } +} diff --git a/styles/fonts/iosevka-regular.ttf b/styles/fonts/iosevka-regular.ttf new file mode 100644 index 0000000..c897c7c Binary files /dev/null and b/styles/fonts/iosevka-regular.ttf differ diff --git a/styles/fonts/iosevka-term-slab-regular.ttf b/styles/fonts/iosevka-term-slab-regular.ttf new file mode 100644 index 0000000..f6e16d5 Binary files /dev/null and b/styles/fonts/iosevka-term-slab-regular.ttf differ diff --git a/styles/fonts/iosevka-term-thin.woff2 b/styles/fonts/iosevka-term-thin.woff2 new file mode 100644 index 0000000..25b82f8 Binary files /dev/null and b/styles/fonts/iosevka-term-thin.woff2 differ diff --git a/styles/fonts/lora-regular.ttf b/styles/fonts/lora-regular.ttf new file mode 100644 index 0000000..42f137a Binary files /dev/null and b/styles/fonts/lora-regular.ttf differ diff --git a/styles/fonts/symbola.ttf b/styles/fonts/symbola.ttf new file mode 100644 index 0000000..d1bddac Binary files /dev/null and b/styles/fonts/symbola.ttf differ diff --git a/styles/styles.sass b/styles/styles.sass new file mode 100644 index 0000000..3cc7c6e --- /dev/null +++ b/styles/styles.sass @@ -0,0 +1,48 @@ +@charset "utf-8" +/*! bulma.io v0.7.4 | MIT License | github.com/jgthms/bulma */ + +// primary colors +$balboa: hsl(196, 63%, 27%); + +/* coolors.co/193a44-ffffff-1c5d99-639fab-bbcde5 */ +// $white: hsl(0%, 0%, 100%); +$lapis-lazuli: hsl(209%, 69%, 35%); +$cadet-blue: hsl(190%, 30%, 53%); +$pale-aqua: hsl(214%, 45%, 82%); + +/* coolors.co/193a44-dcedff-94b0da-8f91a2-505a5b */ +//$azurish-white: hsl(211%, 100%, 93%); +//$light-cobalt-blue: hsl(216%, 49%, 72%); +//$gray-blue: hsl(234%, 9%, 60%); +//$feldgrau: hsl(185%, 6%, 34%); + +// Derived colors +$primary: $balboa; +$info: $lapis-lazuli; +$link: $lapis-lazuli; +$success: $cadet-blue; +//$warning: +//$danger: +$light: $pale-aqua; +//$dark: + +// Custom fonts +@font-face + font-family: "lora" + src: url("/public/css/fonts/lora-regular.ttf") format("truetype") +@font-face + font-family: "iosevka" + src: url("/public/css/fonts/iosevka-term-slab-regular.ttf") format("truetype") + +$family-serif: "lora", serif; +$family-primary: $family-serif; +$family-monospace: "iosevka", monospace; +$family-code: $family-monospace; + +@import "_sass/utilities/_all"; +@import "_sass/base/_all"; +@import "_sass/elements/_all"; +@import "_sass/components/_all"; +@import "_sass/grid/_all"; +@import "_sass/layout/_all"; +//@import "animate.css"; -- cgit v1.2.3