diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..ada549f --- /dev/null +++ b/.gitignore @@ -0,0 +1,5 @@ +_site +.DS_store +.sass-cache +.jekyll-metadata +node_modules/ diff --git a/CNAME b/CNAME deleted file mode 100644 index 0dc2c55..0000000 --- a/CNAME +++ /dev/null @@ -1 +0,0 @@ -inuitcss.com diff --git a/README.md b/README.md new file mode 100644 index 0000000..15747d3 --- /dev/null +++ b/README.md @@ -0,0 +1,13 @@ +## Blog posts + +Writing blog posts is [default jekyll procedure](https://jekyllrb.com/docs/posts/). + + + +## Docs + +All docs pages are contained in the `/docs` directory and get a "docs" category as YAML front matter. General documentation is stored directly in `/docs` and get the YAML front matter tag "general". When a page is in a layer subdirectory, it gets a tag with the respective layer name. E.g. `objects.media.md` gets a "objects" tag. If it's an layer overview page, e.g. `objects.md`, it gets the tags "general objects". + +--- + +Tested with jekyll 3.1.6 diff --git a/_config.yml b/_config.yml new file mode 100644 index 0000000..0186695 --- /dev/null +++ b/_config.yml @@ -0,0 +1,23 @@ +# Site settings +title: inuitcss +email: csswizardry@gmail.com +description: > + Extensible, scalable, Sass-based, OOCSS framework for large and long-lasting + UI projects. +baseurl: "" # the subpath of your site, e.g. /blog +url: "http://inuitcss.com" # the base hostname & protocol for your site + +# Project info +github: "https://github.com/inuitcss/inuitcss" +version: 6.0.0-beta.1 +commit: 4254854fdffeab04f4c874c923e81c55ebc5eb59 + +# Build settings +markdown: kramdown +permalink: pretty + +# Collections +collections: + docs: + output: true + permalink: /:collection/:path/ diff --git a/_docs/components/index.md b/_docs/components/index.md new file mode 100644 index 0000000..5b62b23 --- /dev/null +++ b/_docs/components/index.md @@ -0,0 +1,32 @@ +--- +layout: page +title: "Components" +group: components +page-class: c-page--docs +has-sub-content: true +sub-content: docs +permalink: /docs/components/ +--- + +Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus, voluptatum +reiciendis provident dignissimos repudiandae qui ratione nam dicta officia, +quidem illo non id laboriosam, eum recusandae assumenda repellat autem. +Suscipit. + +Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam ipsum +beatae inventore, commodi quae odio, laborum eum reiciendis quibusdam id, +aliquam facere est aut doloremque. Neque in voluptatibus, unde magnam repellat +ullam quos nihil voluptates iste, suscipit fugit saepe, quidem, minima veritatis +quae aspernatur. Dolores culpa quod, sunt nesciunt eligendi repudiandae odit +ipsum cum repellat veritatis ut aspernatur, doloremque reiciendis illum maxime +consectetur quisquam cumque nemo, modi rem provident, vel fugit. Modi deserunt, +iusto tempore impedit commodi reprehenderit iure. Corporis voluptate autem +mollitia nulla, modi officiis, fugiat magnam nostrum distinctio rem temporibus +vero ipsum, similique nemo adipisci rerum odio quis error nisi veritatis. + +Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium aspernatur +deserunt perferendis repellendus totam voluptatibus quia eaque at, commodi +consectetur ipsum aliquid molestiae, excepturi porro quaerat facere odio. Amet +eius sint minus, provident, aut consequuntur culpa placeat autem, iste neque +perspiciatis vero tempore molestiae possimus recusandae reprehenderit error +alias. diff --git a/_docs/elements/index.md b/_docs/elements/index.md new file mode 100644 index 0000000..92d3105 --- /dev/null +++ b/_docs/elements/index.md @@ -0,0 +1,32 @@ +--- +layout: page +title: "Elements" +group: elements +page-class: c-page--docs +has-sub-content: true +sub-content: docs +permalink: /docs/elements/ +--- + +Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus, voluptatum +reiciendis provident dignissimos repudiandae qui ratione nam dicta officia, +quidem illo non id laboriosam, eum recusandae assumenda repellat autem. +Suscipit. + +Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam ipsum +beatae inventore, commodi quae odio, laborum eum reiciendis quibusdam id, +aliquam facere est aut doloremque. Neque in voluptatibus, unde magnam repellat +ullam quos nihil voluptates iste, suscipit fugit saepe, quidem, minima veritatis +quae aspernatur. Dolores culpa quod, sunt nesciunt eligendi repudiandae odit +ipsum cum repellat veritatis ut aspernatur, doloremque reiciendis illum maxime +consectetur quisquam cumque nemo, modi rem provident, vel fugit. Modi deserunt, +iusto tempore impedit commodi reprehenderit iure. Corporis voluptate autem +mollitia nulla, modi officiis, fugiat magnam nostrum distinctio rem temporibus +vero ipsum, similique nemo adipisci rerum odio quis error nisi veritatis. + +Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium aspernatur +deserunt perferendis repellendus totam voluptatibus quia eaque at, commodi +consectetur ipsum aliquid molestiae, excepturi porro quaerat facere odio. Amet +eius sint minus, provident, aut consequuntur culpa placeat autem, iste neque +perspiciatis vero tempore molestiae possimus recusandae reprehenderit error +alias. diff --git a/_docs/generic/index.md b/_docs/generic/index.md new file mode 100644 index 0000000..deedc42 --- /dev/null +++ b/_docs/generic/index.md @@ -0,0 +1,32 @@ +--- +layout: page +title: "Generic" +group: generic +page-class: c-page--docs +has-sub-content: true +sub-content: docs +permalink: /docs/generic/ +--- + +Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus, voluptatum +reiciendis provident dignissimos repudiandae qui ratione nam dicta officia, +quidem illo non id laboriosam, eum recusandae assumenda repellat autem. +Suscipit. + +Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam ipsum +beatae inventore, commodi quae odio, laborum eum reiciendis quibusdam id, +aliquam facere est aut doloremque. Neque in voluptatibus, unde magnam repellat +ullam quos nihil voluptates iste, suscipit fugit saepe, quidem, minima veritatis +quae aspernatur. Dolores culpa quod, sunt nesciunt eligendi repudiandae odit +ipsum cum repellat veritatis ut aspernatur, doloremque reiciendis illum maxime +consectetur quisquam cumque nemo, modi rem provident, vel fugit. Modi deserunt, +iusto tempore impedit commodi reprehenderit iure. Corporis voluptate autem +mollitia nulla, modi officiis, fugiat magnam nostrum distinctio rem temporibus +vero ipsum, similique nemo adipisci rerum odio quis error nisi veritatis. + +Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium aspernatur +deserunt perferendis repellendus totam voluptatibus quia eaque at, commodi +consectetur ipsum aliquid molestiae, excepturi porro quaerat facere odio. Amet +eius sint minus, provident, aut consequuntur culpa placeat autem, iste neque +perspiciatis vero tempore molestiae possimus recusandae reprehenderit error +alias. diff --git a/_docs/getting-started.md b/_docs/getting-started.md new file mode 100644 index 0000000..29abd3f --- /dev/null +++ b/_docs/getting-started.md @@ -0,0 +1,74 @@ +--- +layout: page +title: "Getting Started" +group: introduction +page-class: c-page--docs +has-sub-content: true +sub-content: docs +--- + +Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit, fugit, +quas corporis atque sit rem doloremque, quo eaque perspiciatis odio nisi +assumenda? Sequi beatae maiores corrupti, error aliquam adipisci suscipit! + +Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor +incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis +nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. +Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu +fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, + +Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor +incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis +nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. +Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu +fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in +culpa qui officia deserunt mollit anim id est laborum. Donec elementum ligula eu +sapien consequat eleifend. Donec nec dolor erat, condimentum sagittis sem. +Praesent porttitor porttitor risus, dapibus rutrum ipsum gravida et. Integer +lectus nisi, facilisis sit amet eleifend nec, pharetra ut augue. Integer quam +nunc, consequat nec egestas ac, volutpat ac nisi. Sed consectetur dignissim +dignissim. Donec pretium est sit amet ipsum fringilla feugiat. Aliquam erat +volutpat. + +Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor +incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis +nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. +Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu +fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in +culpa qui officia deserunt mollit anim id est laborum. Donec elementum ligula eu +sapien consequat eleifend. Donec nec dolor erat, condimentum sagittis sem. +Praesent porttitor porttitor risus, dapibus rutrum ipsum gravida et. Integer + +Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor +incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis +nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. +Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu +fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in +culpa qui officia deserunt mollit anim id est laborum. Donec elementum ligula eu +sapien consequat eleifend. Donec nec dolor erat, condimentum sagittis sem. +Praesent porttitor porttitor risus, dapibus rutrum ipsum gravida et. Integer +lectus nisi, facilisis sit amet eleifend nec, pharetra ut augue. Integer quam +nunc, consequat nec egestas ac, volutpat ac nisi. Sed consectetur dignissim +dignissim. Donec pretium est sit amet ipsum fringilla feugiat. Aliquam erat +volutpat. Maecenas scelerisque, orci sit amet cursus tincidunt, libero nisl +eleifend tortor, vitae cursus risus mauris vitae nisi. Cras laoreet ultrices +ligula eget tempus. Aenean metus purus, iaculis ut imperdiet eget, sodales et +massa. Duis pellentesque nisl vel massa dapibus non lacinia velit volutpat. + +Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor +incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis +nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. +Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu +fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in +culpa qui officia deserunt mollit anim id est laborum. Donec elementum ligula eu +sapien consequat eleifend. Donec nec dolor erat, condimentum sagittis sem. +Praesent porttitor porttitor risus, dapibus rutrum ipsum gravida et. Integer +lectus nisi, facilisis sit amet eleifend nec, pharetra ut augue. Integer quam +nunc, consequat nec egestas ac, volutpat ac nisi. Sed consectetur dignissim +dignissim. Donec pretium est sit amet ipsum fringilla feugiat. Aliquam erat +volutpat. Maecenas scelerisque, orci sit amet cursus tincidunt, libero nisl +eleifend tortor, vitae cursus risus mauris vitae nisi. Cras laoreet ultrices +ligula eget tempus. Aenean metus purus, iaculis ut imperdiet eget, sodales et +massa. Duis pellentesque nisl vel massa dapibus non lacinia velit volutpat. +Maecenas accumsan interdum sodales. In hac habitasse platea dictumst. +Pellentesque ornare blandit orci, eget diff --git a/_docs/index.md b/_docs/index.md new file mode 100644 index 0000000..3d20d6f --- /dev/null +++ b/_docs/index.md @@ -0,0 +1,11 @@ +--- +layout: page +title: "Docs" +group: introduction +page-class: c-page--docs +has-sub-content: true +sub-content: docs +permalink: /docs/ +--- + +Hello, and welcome to the documentation for **inuitcss {{ site.version }}**. diff --git a/_docs/introduction.md b/_docs/introduction.md new file mode 100644 index 0000000..f5588fa --- /dev/null +++ b/_docs/introduction.md @@ -0,0 +1,110 @@ +--- +layout: page +title: "Introduction" +group: introduction +page-class: c-page--docs +has-sub-content: true +sub-content: docs +--- + +Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus, voluptatum +reiciendis provident dignissimos repudiandae qui ratione nam dicta officia, +quidem illo non id laboriosam, eum recusandae assumenda repellat autem. +Suscipit. + +Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit dolore aliquid +sapiente iure voluptates cumque repellat beatae obcaecati vel sequi quod, cum, +corporis nulla laborum accusantium debitis assumenda veniam doloremque? Esse nam +nihil voluptas, iste beatae, eum sit in at, ea assumenda id perferendis vitae +aliquid deleniti dignissimos aperiam, non eius officiis. Aut molestias nam, +sapiente, quidem enim, dolore earum labore inventore quibusdam, nostrum nemo +beatae sequi adipisci ab impedit! Repellendus accusamus alias minus repudiandae +numquam eum molestiae nemo, architecto! Ullam odit, nemo inventore velit illo +suscipit rerum temporibus dignissimos, quas in voluptas incidunt ea veniam +molestiae mollitia, repellat tempore. Quidem debitis adipisci aspernatur +deleniti, quo iste ducimus culpa quas fuga, quisquam aperiam sequi similique +nulla dolore dolorum illo. Ipsa, eaque voluptatum. Tempora accusamus earum +voluptatem quam cupiditate facilis. Eligendi corporis, fuga quis illum dolor, +recusandae nemo ducimus amet quaerat consequatur nobis explicabo distinctio rem +dolorem veritatis blanditiis quia, vitae velit laborum id maiores possimus +numquam praesentium itaque sed? Iste at odit eaque provident natus fugit ea +nesciunt ab vel consectetur tenetur magnam iure iusto in, dolore commodi +reprehenderit eius, enim laborum ullam quae quaerat sed repellat culpa +perspiciatis! Repellat possimus architecto perspiciatis excepturi ab vel autem. +Molestiae officia dolore culpa, modi esse ipsam earum deleniti tempore +doloremque porro delectus necessitatibus enim fugit, dolores minima fugiat eos +iusto, repellat nesciunt reiciendis cupiditate ut perspiciatis quibusdam, vel. +Necessitatibus consequuntur hic quod iure sit ullam, porro, est laudantium +distinctio, quam nobis dolores aperiam fugiat omnis. Voluptas animi quos eos aut +unde neque perferendis voluptate dignissimos quaerat, ab temporibus rerum ullam +vero assumenda saepe, impedit soluta! Adipisci assumenda, perspiciatis nulla +rerum ullam nostrum quia sed, aperiam voluptatum! Qui asperiores ullam, ex natus +nemo blanditiis ab mollitia, ducimus, dolorum hic ad enim dignissimos? Ratione +cupiditate omnis, soluta dolore eveniet assumenda doloremque reprehenderit sed +possimus. + +Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit, fugit, +quas corporis atque sit rem doloremque, quo eaque perspiciatis odio nisi +assumenda? Sequi beatae maiores corrupti, error aliquam adipisci suscipit! + +Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor +incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis +nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. +Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu +fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, + +Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor +incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis +nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. +Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu +fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in +culpa qui officia deserunt mollit anim id est laborum. Donec elementum ligula eu +sapien consequat eleifend. Donec nec dolor erat, condimentum sagittis sem. +Praesent porttitor porttitor risus, dapibus rutrum ipsum gravida et. Integer +lectus nisi, facilisis sit amet eleifend nec, pharetra ut augue. Integer quam +nunc, consequat nec egestas ac, volutpat ac nisi. Sed consectetur dignissim +dignissim. Donec pretium est sit amet ipsum fringilla feugiat. Aliquam erat +volutpat. + +Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor +incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis +nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. +Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu +fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in +culpa qui officia deserunt mollit anim id est laborum. Donec elementum ligula eu +sapien consequat eleifend. Donec nec dolor erat, condimentum sagittis sem. +Praesent porttitor porttitor risus, dapibus rutrum ipsum gravida et. Integer + +Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor +incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis +nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. +Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu +fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in +culpa qui officia deserunt mollit anim id est laborum. Donec elementum ligula eu +sapien consequat eleifend. Donec nec dolor erat, condimentum sagittis sem. +Praesent porttitor porttitor risus, dapibus rutrum ipsum gravida et. Integer +lectus nisi, facilisis sit amet eleifend nec, pharetra ut augue. Integer quam +nunc, consequat nec egestas ac, volutpat ac nisi. Sed consectetur dignissim +dignissim. Donec pretium est sit amet ipsum fringilla feugiat. Aliquam erat +volutpat. Maecenas scelerisque, orci sit amet cursus tincidunt, libero nisl +eleifend tortor, vitae cursus risus mauris vitae nisi. Cras laoreet ultrices +ligula eget tempus. Aenean metus purus, iaculis ut imperdiet eget, sodales et +massa. Duis pellentesque nisl vel massa dapibus non lacinia velit volutpat. + +Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor +incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis +nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. +Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu +fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in +culpa qui officia deserunt mollit anim id est laborum. Donec elementum ligula eu +sapien consequat eleifend. Donec nec dolor erat, condimentum sagittis sem. +Praesent porttitor porttitor risus, dapibus rutrum ipsum gravida et. Integer +lectus nisi, facilisis sit amet eleifend nec, pharetra ut augue. Integer quam +nunc, consequat nec egestas ac, volutpat ac nisi. Sed consectetur dignissim +dignissim. Donec pretium est sit amet ipsum fringilla feugiat. Aliquam erat +volutpat. Maecenas scelerisque, orci sit amet cursus tincidunt, libero nisl +eleifend tortor, vitae cursus risus mauris vitae nisi. Cras laoreet ultrices +ligula eget tempus. Aenean metus purus, iaculis ut imperdiet eget, sodales et +massa. Duis pellentesque nisl vel massa dapibus non lacinia velit volutpat. +Maecenas accumsan interdum sodales. In hac habitasse platea dictumst. +Pellentesque ornare blandit orci, eget diff --git a/_docs/objects/index.md b/_docs/objects/index.md new file mode 100644 index 0000000..a6136eb --- /dev/null +++ b/_docs/objects/index.md @@ -0,0 +1,32 @@ +--- +layout: page +title: "Objects" +group: objects +page-class: c-page--docs +has-sub-content: true +sub-content: docs +permalink: /docs/objects/ +--- + +Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus, voluptatum +reiciendis provident dignissimos repudiandae qui ratione nam dicta officia, +quidem illo non id laboriosam, eum recusandae assumenda repellat autem. +Suscipit. + +Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam ipsum +beatae inventore, commodi quae odio, laborum eum reiciendis quibusdam id, +aliquam facere est aut doloremque. Neque in voluptatibus, unde magnam repellat +ullam quos nihil voluptates iste, suscipit fugit saepe, quidem, minima veritatis +quae aspernatur. Dolores culpa quod, sunt nesciunt eligendi repudiandae odit +ipsum cum repellat veritatis ut aspernatur, doloremque reiciendis illum maxime +consectetur quisquam cumque nemo, modi rem provident, vel fugit. Modi deserunt, +iusto tempore impedit commodi reprehenderit iure. Corporis voluptate autem +mollitia nulla, modi officiis, fugiat magnam nostrum distinctio rem temporibus +vero ipsum, similique nemo adipisci rerum odio quis error nisi veritatis. + +Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium aspernatur +deserunt perferendis repellendus totam voluptatibus quia eaque at, commodi +consectetur ipsum aliquid molestiae, excepturi porro quaerat facere odio. Amet +eius sint minus, provident, aut consequuntur culpa placeat autem, iste neque +perspiciatis vero tempore molestiae possimus recusandae reprehenderit error +alias. diff --git a/_docs/reading-these-docs.md b/_docs/reading-these-docs.md new file mode 100644 index 0000000..558b678 --- /dev/null +++ b/_docs/reading-these-docs.md @@ -0,0 +1,37 @@ +--- +layout: page +title: "Reading These Docs" +group: introduction +page-class: c-page--docs +has-sub-content: true +sub-content: docs +--- + +Anything that is mandatory is written plainly, e.g.: + +``` +class="o-layout" +``` + +Anything that is mandatory but requires user input is written inside of `<`, +e.g.: + +``` +class="o-layout__item " +``` + +Anything that is optional is written inside of `[]`, e.g.: + +``` +class="o-layout--[options]" +``` + +All together, that might look a little like this: + +``` +
+
+ ... +
+
+``` diff --git a/_docs/settings/global.md b/_docs/settings/global.md new file mode 100644 index 0000000..d6004b6 --- /dev/null +++ b/_docs/settings/global.md @@ -0,0 +1,14 @@ +--- +layout: page +title: "Global" +group: settings +page-class: c-page--docs +has-sub-content: true +sub-content: docs +filename: "_settings.global.scss" +dummy: "_" +--- + +{% include file-info.html %} + +Global settings diff --git a/_docs/settings/index.md b/_docs/settings/index.md new file mode 100644 index 0000000..cbdff80 --- /dev/null +++ b/_docs/settings/index.md @@ -0,0 +1,32 @@ +--- +layout: page +title: "Settings" +group: settings +page-class: c-page--docs +has-sub-content: true +sub-content: docs +permalink: /docs/settings/ +--- + +Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus, voluptatum +reiciendis provident dignissimos repudiandae qui ratione nam dicta officia, +quidem illo non id laboriosam, eum recusandae assumenda repellat autem. +Suscipit. + +Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam ipsum +beatae inventore, commodi quae odio, laborum eum reiciendis quibusdam id, +aliquam facere est aut doloremque. Neque in voluptatibus, unde magnam repellat +ullam quos nihil voluptates iste, suscipit fugit saepe, quidem, minima veritatis +quae aspernatur. Dolores culpa quod, sunt nesciunt eligendi repudiandae odit +ipsum cum repellat veritatis ut aspernatur, doloremque reiciendis illum maxime +consectetur quisquam cumque nemo, modi rem provident, vel fugit. Modi deserunt, +iusto tempore impedit commodi reprehenderit iure. Corporis voluptate autem +mollitia nulla, modi officiis, fugiat magnam nostrum distinctio rem temporibus +vero ipsum, similique nemo adipisci rerum odio quis error nisi veritatis. + +Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium aspernatur +deserunt perferendis repellendus totam voluptatibus quia eaque at, commodi +consectetur ipsum aliquid molestiae, excepturi porro quaerat facere odio. Amet +eius sint minus, provident, aut consequuntur culpa placeat autem, iste neque +perspiciatis vero tempore molestiae possimus recusandae reprehenderit error +alias. diff --git a/_docs/tools/index.md b/_docs/tools/index.md new file mode 100644 index 0000000..66e0190 --- /dev/null +++ b/_docs/tools/index.md @@ -0,0 +1,32 @@ +--- +layout: page +title: "Tools" +group: tools +page-class: c-page--docs +has-sub-content: true +sub-content: docs +permalink: /docs/tools/ +--- + +Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus, voluptatum +reiciendis provident dignissimos repudiandae qui ratione nam dicta officia, +quidem illo non id laboriosam, eum recusandae assumenda repellat autem. +Suscipit. + +Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam ipsum +beatae inventore, commodi quae odio, laborum eum reiciendis quibusdam id, +aliquam facere est aut doloremque. Neque in voluptatibus, unde magnam repellat +ullam quos nihil voluptates iste, suscipit fugit saepe, quidem, minima veritatis +quae aspernatur. Dolores culpa quod, sunt nesciunt eligendi repudiandae odit +ipsum cum repellat veritatis ut aspernatur, doloremque reiciendis illum maxime +consectetur quisquam cumque nemo, modi rem provident, vel fugit. Modi deserunt, +iusto tempore impedit commodi reprehenderit iure. Corporis voluptate autem +mollitia nulla, modi officiis, fugiat magnam nostrum distinctio rem temporibus +vero ipsum, similique nemo adipisci rerum odio quis error nisi veritatis. + +Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium aspernatur +deserunt perferendis repellendus totam voluptatibus quia eaque at, commodi +consectetur ipsum aliquid molestiae, excepturi porro quaerat facere odio. Amet +eius sint minus, provident, aut consequuntur culpa placeat autem, iste neque +perspiciatis vero tempore molestiae possimus recusandae reprehenderit error +alias. diff --git a/_docs/utilities/index.md b/_docs/utilities/index.md new file mode 100644 index 0000000..551aabf --- /dev/null +++ b/_docs/utilities/index.md @@ -0,0 +1,32 @@ +--- +layout: page +title: "Utilities" +group: utilities +page-class: c-page--docs +has-sub-content: true +sub-content: docs +permalink: /docs/utilities/ +--- + +Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus, voluptatum +reiciendis provident dignissimos repudiandae qui ratione nam dicta officia, +quidem illo non id laboriosam, eum recusandae assumenda repellat autem. +Suscipit. + +Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam ipsum +beatae inventore, commodi quae odio, laborum eum reiciendis quibusdam id, +aliquam facere est aut doloremque. Neque in voluptatibus, unde magnam repellat +ullam quos nihil voluptates iste, suscipit fugit saepe, quidem, minima veritatis +quae aspernatur. Dolores culpa quod, sunt nesciunt eligendi repudiandae odit +ipsum cum repellat veritatis ut aspernatur, doloremque reiciendis illum maxime +consectetur quisquam cumque nemo, modi rem provident, vel fugit. Modi deserunt, +iusto tempore impedit commodi reprehenderit iure. Corporis voluptate autem +mollitia nulla, modi officiis, fugiat magnam nostrum distinctio rem temporibus +vero ipsum, similique nemo adipisci rerum odio quis error nisi veritatis. + +Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium aspernatur +deserunt perferendis repellendus totam voluptatibus quia eaque at, commodi +consectetur ipsum aliquid molestiae, excepturi porro quaerat facere odio. Amet +eius sint minus, provident, aut consequuntur culpa placeat autem, iste neque +perspiciatis vero tempore molestiae possimus recusandae reprehenderit error +alias. diff --git a/_includes/file-info.html b/_includes/file-info.html new file mode 100644 index 0000000..6372587 --- /dev/null +++ b/_includes/file-info.html @@ -0,0 +1,10 @@ +
+
Filename
+
{{ page.filename }}
+
GitHub
+
+ + {{ page.filename }} + +
+
diff --git a/_includes/footer.html b/_includes/footer.html new file mode 100644 index 0000000..9a3c030 --- /dev/null +++ b/_includes/footer.html @@ -0,0 +1,32 @@ + diff --git a/_includes/head.html b/_includes/head.html new file mode 100644 index 0000000..fb0eccf --- /dev/null +++ b/_includes/head.html @@ -0,0 +1,17 @@ + + + + + + + + + {% if page.title %}{{ page.title | escape }}{% else %}{{ site.title | escape }}{% endif %} + + + + + + + + diff --git a/_includes/header.html b/_includes/header.html new file mode 100644 index 0000000..60e7ea5 --- /dev/null +++ b/_includes/header.html @@ -0,0 +1,29 @@ +
+ +
+ + + + + +
+ +
diff --git a/_includes/nav-docs.html b/_includes/nav-docs.html new file mode 100644 index 0000000..172ae1b --- /dev/null +++ b/_includes/nav-docs.html @@ -0,0 +1,94 @@ + diff --git a/_includes/sub-content.html b/_includes/sub-content.html new file mode 100644 index 0000000..514b4dc --- /dev/null +++ b/_includes/sub-content.html @@ -0,0 +1,22 @@ +{% if page.sub-content == 'about' %} + +{% endif %} + +{% if page.sub-content == 'docs' %} + +{% include nav-docs.html %} + +{% endif %} + diff --git a/_layouts/default.html b/_layouts/default.html new file mode 100644 index 0000000..28d8230 --- /dev/null +++ b/_layouts/default.html @@ -0,0 +1,16 @@ + + + + {% include head.html %} + + + + {% include header.html %} + + {{ content }} + + {% include footer.html %} + + + + diff --git a/_layouts/page.html b/_layouts/page.html new file mode 100644 index 0000000..6fd89c1 --- /dev/null +++ b/_layouts/page.html @@ -0,0 +1,24 @@ +--- +layout: default +--- +
+
+ +
+ +
+

{{ page.title }}

+
+ + {{ content }} + +
+ + + +
+
diff --git a/_layouts/post.html b/_layouts/post.html new file mode 100644 index 0000000..d71ea62 --- /dev/null +++ b/_layouts/post.html @@ -0,0 +1,15 @@ +--- +layout: default +--- +
+ +
+

{{ page.title }}

+

{% if page.author %} • {% endif %}

+
+ +
+ {{ content }} +
+ +
diff --git a/_posts/2016-06-27-welcome-to-jekyll.markdown b/_posts/2016-06-27-welcome-to-jekyll.markdown new file mode 100644 index 0000000..4e53aec --- /dev/null +++ b/_posts/2016-06-27-welcome-to-jekyll.markdown @@ -0,0 +1,24 @@ +--- +layout: post +title: "Welcome to Jekyll!" +date: 2016-06-27 11:24:29 +0200 +--- +You’ll find this post in your `_posts` directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run `jekyll serve`, which launches a web server and auto-regenerates your site when a file is updated. + +To add new posts, simply add a file in the `_posts` directory that follows the convention `YYYY-MM-DD-name-of-post.ext` and includes the necessary front matter. Take a look at the source for this post to get an idea about how it works. + +Jekyll also offers powerful support for code snippets: + +{% highlight ruby %} +def print_hi(name) + puts "Hi, #{name}" +end +print_hi('Tom') +#=> prints 'Hi, Tom' to STDOUT. +{% endhighlight %} + +Check out the [Jekyll docs][jekyll-docs] for more info on how to get the most out of Jekyll. File all bugs/feature requests at [Jekyll’s GitHub repo][jekyll-gh]. If you have questions, you can ask them on [Jekyll Talk][jekyll-talk]. + +[jekyll-docs]: http://jekyllrb.com/docs/home +[jekyll-gh]: https://github.com/jekyll/jekyll +[jekyll-talk]: https://talk.jekyllrb.com/ diff --git a/about/index.md b/about/index.md new file mode 100644 index 0000000..11a70cb --- /dev/null +++ b/about/index.md @@ -0,0 +1,14 @@ +--- +layout: page +title: About +page-class: c-page--about +has-sub-content: true +sub-content: about +--- +Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit + +Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Donec elementum ligula eu sapien consequat eleifend. Donec nec dolor erat, condimentum sagittis sem. Praesent porttitor porttitor risus, dapibus rutrum ipsum gravida et. Integer lectus nisi, facilisis sit amet eleifend nec, pharetra ut augue. Integer quam nunc, consequat + +Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, + +Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Donec elementum ligula eu sapien consequat eleifend. Donec nec dolor erat, condimentum sagittis sem. Praesent porttitor porttitor risus, dapibus rutrum ipsum gravida et. Integer lectus nisi, facilisis sit amet eleifend nec, pharetra ut augue. Integer quam nunc, consequat nec egestas ac, volutpat ac nisi. Sed consectetur dignissim dignissim. Donec pretium est sit amet ipsum fringilla feugiat. Aliquam erat volutpat. diff --git a/about/team.md b/about/team.md new file mode 100644 index 0000000..5c4e6ff --- /dev/null +++ b/about/team.md @@ -0,0 +1,61 @@ +--- +layout: page +title: Team +page-class: c-page--about +has-sub-content: true +sub-content: about +--- + + diff --git a/assets/img/avatars/anselm-hannemann.jpg b/assets/img/avatars/anselm-hannemann.jpg new file mode 100644 index 0000000..bba5fdb Binary files /dev/null and b/assets/img/avatars/anselm-hannemann.jpg differ diff --git a/assets/img/avatars/dennis-heibult.jpg b/assets/img/avatars/dennis-heibult.jpg new file mode 100644 index 0000000..a0b8761 Binary files /dev/null and b/assets/img/avatars/dennis-heibult.jpg differ diff --git a/assets/img/avatars/florian-bouvot.jpg b/assets/img/avatars/florian-bouvot.jpg new file mode 100644 index 0000000..33262b9 Binary files /dev/null and b/assets/img/avatars/florian-bouvot.jpg differ diff --git a/assets/img/avatars/harry-roberts.jpg b/assets/img/avatars/harry-roberts.jpg new file mode 100644 index 0000000..3bd5815 Binary files /dev/null and b/assets/img/avatars/harry-roberts.jpg differ diff --git a/assets/img/avatars/nenad-jelovac.jpg b/assets/img/avatars/nenad-jelovac.jpg new file mode 100644 index 0000000..6f87616 Binary files /dev/null and b/assets/img/avatars/nenad-jelovac.jpg differ diff --git a/assets/img/sprites/sprite-logo.png b/assets/img/sprites/sprite-logo.png new file mode 100644 index 0000000..1426885 Binary files /dev/null and b/assets/img/sprites/sprite-logo.png differ diff --git a/blog.md b/blog.md new file mode 100644 index 0000000..224ccd7 --- /dev/null +++ b/blog.md @@ -0,0 +1,15 @@ +--- +layout: page +title: Blog +page-class: c-page--blog +--- + + diff --git a/css/components/_components.avatars.scss b/css/components/_components.avatars.scss new file mode 100644 index 0000000..98f19be --- /dev/null +++ b/css/components/_components.avatars.scss @@ -0,0 +1,19 @@ +/* ========================================================================== + #AVATARS + ========================================================================== */ + +.c-avatar { + border-radius: 100%; + width: 128px; + height: 128px; +} + +.c-avatar--small { + width: 64px; + height: 64px; +} + +.c-avatar--large { + width: 64px; + height: 64px; +} diff --git a/css/components/_components.bands.scss b/css/components/_components.bands.scss new file mode 100644 index 0000000..abd6e11 --- /dev/null +++ b/css/components/_components.bands.scss @@ -0,0 +1,52 @@ +/* ========================================================================== + #BANDS + ========================================================================== */ + +/** + * Long-form comment. + * + * This spans multiple lines and is also constrained to no longer than 80 + * characters in width. + * + * 1. Provide line-comments like this. + */ + +.c-band { + display: block; + padding-top: $inuit-global-spacing-unit; + padding-bottom: $inuit-global-spacing-unit; + + > :last-child { + margin-bottom: 0; + } + +} + +.c-band--small { + padding-top: $inuit-global-spacing-unit-small; + padding-bottom: $inuit-global-spacing-unit-small; +} + +.c-band--center { + text-align: center; +} + +.c-band--primary { + background-color: $color-band-primary-bg; + + &, + a { + color: $color-band-primary; + } + +} + +.c-band--secondary { + background-color: $color-band-secondary-bg; + + &, + a { + color: $color-band-secondary; + } + +} diff --git a/css/components/_components.bio-mini.scss b/css/components/_components.bio-mini.scss new file mode 100644 index 0000000..4a43c8c --- /dev/null +++ b/css/components/_components.bio-mini.scss @@ -0,0 +1,15 @@ +/* ========================================================================== + #BIO-MINI + ========================================================================== */ + +.c-bio-mini { + padding: $unit; + background-color: color(primary); + //border-radius: $inuit-global-radius; + color: color(pale); +} + + .c-bio-mini__title { + margin-bottom: 0; + color: color(pale); + } diff --git a/css/components/_components.buttons.scss b/css/components/_components.buttons.scss new file mode 100644 index 0000000..b02aeb0 --- /dev/null +++ b/css/components/_components.buttons.scss @@ -0,0 +1,176 @@ +/* ========================================================================== + #BUTTONS + ========================================================================== */ + +/** + * This is an example component. Extend inuitcss by building your own components + * that make up your UI. Component classes are prefixed with a `c-`. + */ + +/** + * 1. Allow us to style box model properties. + * 2. Line different sized buttons up a little nicer. + * 3. Make buttons inherit font styles (often necessary when styling `input`s as + * buttons). + * 4. Reset/normalize some styles. + * 5. Force all button-styled elements to appear clickable. + * 6. Fixes odd inner spacing in IE7. + */ + +.c-btn { + display: inline-block; /* [1] */ + vertical-align: middle; /* [2] */ + font: inherit; /* [3] */ + text-align: center; /* [4] */ + margin: 0; /* [4] */ + cursor: pointer; /* [5] */ + overflow: visible; /* [6] */ + padding: $inuit-global-spacing-unit-small $inuit-global-spacing-unit; + transition: $inuit-global-transition; + border-radius: $inuit-global-radius; +} + + + + + +/* Style variants + ========================================================================== */ + +.c-btn--primary { + background-color: $color-btn-bg; + + &, + &:hover, + &:active, + &:focus { + text-decoration: none; /* [4] */ + color: $color-btn; + } + + &:hover, + &:focus { + background-color: $color-btn-hover-bg; + } + +} + +.c-btn--secondary { + background-color: $color-btn-secondary-bg; + + &, + &:hover, + &:active, + &:focus { + text-decoration: none; + color: $color-btn-secondary; + } + + &:hover, + &:focus { + background-color: $color-btn-secondary-hover-bg; + } + +} + + +/** + * 1. Artificially increase specificity to combat leaky `.band--* a {}` rules. + */ + +.c-btn--tertiary { + background-color: $color-btn-tertiary-bg; + + &#{&}, /* [1] */ + &:hover, + &:active, + &:focus { + text-decoration: none; + color: $color-btn-tertiary; + } + + &:hover, + &:focus { + color: $color-btn-tertiary; + } + +} + + + + + +/* Size variants + ========================================================================== */ + +.c-btn--small { + padding: inuit-rem($inuit-global-spacing-unit-tiny) inuit-rem($inuit-global-spacing-unit-small); +} + +.c-btn--large { + padding: inuit-rem($inuit-global-spacing-unit) inuit-rem($inuit-global-spacing-unit-large); +} + + + + + +/* Ghost buttons + ========================================================================== */ + +/** + * Ghost buttons have see-through backgrounds and are bordered. + */ + +$btn-ghost-border-width: 2px; + +.c-btn--ghost { + border: $btn-ghost-border-width solid currentColor; + padding: ($inuit-global-spacing-unit-small - $btn-ghost-border-width) ($inuit-global-spacing-unit - $btn-ghost-border-width); + + &, + &:hover, + &:active, + &:focus { + background: none; + } + + &.c-btn--small { + padding: ($inuit-global-spacing-unit-tiny - $btn-ghost-border-width) ($inuit-global-spacing-unit-small - $btn-ghost-border-width); + } + + &.c-btn--large { + padding: ($inuit-global-spacing-unit - $btn-ghost-border-width) ($inuit-global-spacing-unit-large - $btn-ghost-border-width); + } + + &.c-btn--primary { + color: $color-btn-bg; + + &:hover, + &:focus { + color: $color-btn-hover-bg; + } + + } + + &.c-btn--secondary { + color: $color-btn-secondary-bg; + + &:hover, + &:focus { + color: $color-btn-secondary-hover-bg; + } + + } + + &.c-btn--tertiary { + color: $color-btn-tertiary-bg; + + &:hover, + &:focus { + color: $color-btn-tertiary-hover-bg; + } + + } + +} diff --git a/css/components/_components.code.scss b/css/components/_components.code.scss new file mode 100644 index 0000000..43a84d3 --- /dev/null +++ b/css/components/_components.code.scss @@ -0,0 +1,12 @@ +/* ========================================================================== + #CODE + ========================================================================== */ + +.c-code-cta { + color: color(pale); + + @include mq($from: md) { + @include font-size(24px); + } + +} diff --git a/css/components/_components.lockup.scss b/css/components/_components.lockup.scss new file mode 100644 index 0000000..04990fd --- /dev/null +++ b/css/components/_components.lockup.scss @@ -0,0 +1,23 @@ +/* ========================================================================== + #LOCKUP + ========================================================================== */ + +.c-lockup { + display: table; +} + + .c-lockup__img, + .c-lockup__text { + display: table-cell; + vertical-align: middle; + } + + .c-lockup__img { + padding-right: $inuit-global-spacing-unit-small; + } + + .c-lockup__text { + font-weight: bold; + @include font-size(12px); + } + diff --git a/css/components/_components.logo.scss b/css/components/_components.logo.scss new file mode 100644 index 0000000..31340c3 --- /dev/null +++ b/css/components/_components.logo.scss @@ -0,0 +1,23 @@ +/* ========================================================================== + #LOGO + ========================================================================== */ + +.c-logo { + display: inline-block; + width: 48px; + height: 48px; + background-image: url(/assets/img/sprites/sprite-logo.png); + + @include mq($from: md) { + background-position: -48px 0; + width: 72px; + height: 72px; + } + + @include mq($from: lg) { + background-position: 0 -72px; + width: 220px; + height: 105px; + } + +} diff --git a/css/components/_components.nav-primary.scss b/css/components/_components.nav-primary.scss new file mode 100644 index 0000000..d8f684a --- /dev/null +++ b/css/components/_components.nav-primary.scss @@ -0,0 +1,38 @@ +/* ========================================================================== + #NAV-PRIMARY + ========================================================================== */ + +.c-nav-primary { + line-height: 48px; + + @include mq($from: md) { + line-height: 72px; + } + + @include mq($from: lg) { + line-height: 105px; + } + +} + + .c-nav-primary__link { + display: inline-block; + transition: $inuit-global-transition; + + @include mq($from: md) { + $border-width: 1px; + + border: $border-width solid transparent; + border-radius: $inuit-global-radius; + line-height: $unit-large - (2 * $border-width); + padding-right: $unit - (2 * $border-width); + padding-left: $unit - (2 * $border-width); + text-decoration: none; + } + + &:hover, + &:focus { + border-color: currentColor; + } + + } diff --git a/css/components/_components.nav-secondary.scss b/css/components/_components.nav-secondary.scss new file mode 100644 index 0000000..b5f17e5 --- /dev/null +++ b/css/components/_components.nav-secondary.scss @@ -0,0 +1,43 @@ +/* ========================================================================== + #NAV-SECONDARY + ========================================================================== */ + +.c-nav-secondary { + @include font-size(12px); + list-style: none; + margin-left: 0; + background-color: color(secondary); + font-weight: bold; + + @include mq($from: md) { + @include font-size($inuit-global-font-size); + } + +} + +.c-nav-secondary--sub { + margin-left: $unit-small; + font-weight: normal; + + @include mq($from: md) { + margin-left: $unit; + } + +} + + .c-nav-secondary__link { + display: block; + padding: $unit-tiny; + border-bottom: 1px solid color(secondary-highlight); + + @include mq($from: md) { + padding: $unit-small; + } + + &, + &:hover, + &:focus { + color: color(pale); + } + + } diff --git a/css/components/_components.nav-tertiary.scss b/css/components/_components.nav-tertiary.scss new file mode 100644 index 0000000..ef386c9 --- /dev/null +++ b/css/components/_components.nav-tertiary.scss @@ -0,0 +1,8 @@ +/* ========================================================================== + #NAV-TERTIARY + ========================================================================== */ + +.c-nav-tertiary { + list-style: none; + margin-left: 0; +} diff --git a/css/components/_components.page-foot.scss b/css/components/_components.page-foot.scss new file mode 100644 index 0000000..816ab66 --- /dev/null +++ b/css/components/_components.page-foot.scss @@ -0,0 +1,31 @@ +/* ========================================================================== + #PAGE-FOOT + ========================================================================== */ + +.c-page-foot { + padding-bottom: 0; + + a { + text-decoration: underline; + font-weight: bold; + + &:hover, + &:focus { + color: color(primary-highlight); + } + + } + +} + + .c-page-foot__region { + @include font-size(12px); + } + + .c-page-foot__heading { + @include font-size(14px); + font-weight: bold; + color: color(pale); + border-bottom: 1px solid color(secondary-highlight); + margin-bottom: $unit-small - 1px; + } diff --git a/css/components/_components.page-head.scss b/css/components/_components.page-head.scss new file mode 100644 index 0000000..8b95df5 --- /dev/null +++ b/css/components/_components.page-head.scss @@ -0,0 +1,18 @@ +/* ========================================================================== + #PAGE-HEAD + ========================================================================== */ + +.c-page-head { + @include clearfix(); + padding-top: $unit; + padding-bottom: $unit; +} + + .c-page-head__logo { + float: left; + } + + .c-page-head__nav { + float: right; + } + diff --git a/css/components/_components.pages.scss b/css/components/_components.pages.scss new file mode 100644 index 0000000..17ded27 --- /dev/null +++ b/css/components/_components.pages.scss @@ -0,0 +1,23 @@ +/* ========================================================================== + #PAGES + ========================================================================== */ + +%page-current { + cursor: default; + pointer-events: none; + text-decoration: underline; + + @include mq($from: md) { + border-color: currentColor; + text-decoration: none; + } + +} + +@each $page-type in home, about, docs, blog { + + .c-page--#{$page-type} .c-page__#{$page-type} { + @extend %page-current; + } + +} diff --git a/css/elements/_elements.code.scss b/css/elements/_elements.code.scss new file mode 100644 index 0000000..569d2b6 --- /dev/null +++ b/css/elements/_elements.code.scss @@ -0,0 +1,18 @@ +/* ========================================================================== + #CODE + ========================================================================== */ + +code, kbd, samp { + color: color(primary); + + pre & { + color: color(pale); + } + +} + +pre { + background-color: color(grey-dark); + padding: $unit; + border-radius: $inuit-global-radius; +} diff --git a/css/elements/_elements.headings.scss b/css/elements/_elements.headings.scss new file mode 100644 index 0000000..4ce8e84 --- /dev/null +++ b/css/elements/_elements.headings.scss @@ -0,0 +1,25 @@ +/* ========================================================================== + #HEADINGS + ========================================================================== */ + +//$inuit-font-size-h6: $inuit-global-font-size * 1.25; +//$inuit-font-size-h5: $inuit-font-size-h6 * 1.25; +//$inuit-font-size-h4: $inuit-font-size-h5 * 1.25; +//$inuit-font-size-h3: $inuit-font-size-h4 * 1.25; +//$inuit-font-size-h2: $inuit-font-size-h3 * 1.25; +//$inuit-font-size-h1: $inuit-font-size-h2 * 1.25; + +$inuit-font-size-h6: 22px; +$inuit-font-size-h5: 22px; +$inuit-font-size-h4: 22px; +$inuit-font-size-h3: 22px; +$inuit-font-size-h2: 22px; +$inuit-font-size-h1: 22px; + +@import "../../node_modules/inuitcss/elements/elements.headings"; + +h1, h2, h3, h4, h5, h6 { + font-weight: 500; + letter-spacing: 0.033333333em; + color: color(secondary); +} diff --git a/css/elements/_elements.links.scss b/css/elements/_elements.links.scss new file mode 100644 index 0000000..a173691 --- /dev/null +++ b/css/elements/_elements.links.scss @@ -0,0 +1,15 @@ +/* ========================================================================== + #LINKS + ========================================================================== */ + +a { + color: $color-link; + text-decoration: none; + + &:hover, + &:focus { + color: $color-link-hover; + text-decoration: underline; + } + +} diff --git a/css/elements/_elements.page.scss b/css/elements/_elements.page.scss new file mode 100644 index 0000000..44ed8a4 --- /dev/null +++ b/css/elements/_elements.page.scss @@ -0,0 +1,18 @@ +/* ========================================================================== + #PAGE + ========================================================================== */ + +// Import inuitcss’ own page-level rules into this file. +@import "../../node_modules/inuitcss/elements/elements.page"; + +/** + * 1. Use the system font everywhere. + * 2. Nicer looking strokes. + */ + +html { + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + -webkit-font-smoothing: antialiased; /* [2] */ + color: color(grey-dark); +} + diff --git a/css/main.css b/css/main.css new file mode 100644 index 0000000..a8c509e --- /dev/null +++ b/css/main.css @@ -0,0 +1,3579 @@ +@charset "UTF-8"; +/* ========================================================================== + INUITCSS + ========================================================================== */ +/*!* + * inuitcss, by @csswizardry + * + * github.com/inuitcss | inuitcss.com + */ +/** + * This is an example inuitcss manifest file. DO NOT MODIFY THIS FILE DIRECTLY. + * Instead, copy and paste it into your own CSS directory and make additions, + * extension, and modifications there. + */ +/** + * CONTENTS + * + * SETTINGS + * Config...............Project-level configuration and feature switches. + * Global...............Globally-available project settings. + * Colors...............Our own colour settings and mappings. + * + * TOOLS + * Functions............A small collection of useful functions. + * Mixins...............Globally-available mixins. + * Widths...............A mixin to quickly generate an arbitrary number of width + * classes for use alongside our grid system. + * Sass MQ..............Neat little wrapper for media queries. + * Aliases..............Create shorter aliases for inuitcss’ default settings. + * + * GENERIC + * Box-sizing...........Better default `box-sizing`. + * Normalize.css........A level playing field using @necolas’ Normalize.css. + * Reset................A tiny reset to complement Normalize.css. + * Shared...............Sensibly and tersely share some global commonalities + * (particularly useful when managing vertical rhythm). + * + * ELEMENTS + * Page.................Set up our document’s default `font-size` and + * `line-height`. + * Headings.............Very minimal (i.e. only font-size information) for + * headings 1 through 6. + * Images...............Base image styles. + * Tables...............Simple table styles. + * Links................Basic hyperlink styles. + * Code.................Code examples and blocks. + * + * OBJECTS + * Wrapper..............Page constraint object. + * Layout...............Generic layout module. + * Media................Image- and text-like content side by side. The + * poster-child of OOCSS. + * List-bare............Lists with no bullets or indents. + * List-inline..........A list whose items all site in a line. + * Box..................Simple boxing abstraction. + * Block................Image-on-top-of-text object. + * Ratio................A container for maintaining aspect ratio of content. + * Crop.................Provide a cropping context for media (images, etc.). + * + * COMPONENTS + * Buttons..............inuitcss-branded buttons. + * Bands................Horizontal content bands. + * Page-head............Site’s main page header. + * Page-foot............Site’s main page footer. + * Lock-up..............The logo contained in the site’s header. + * Logo.................inuitcss logo sprite. + * Avatars..............Suite of different styles of avatar. + * Bio-mini.............Miniature bios as used on the Team page. + * Nav-primary..........Site’s main nav. + * Nav-secondary........Sidebar-style navigation. + * Nav-tertiary.........Footer-style navigation. + * Pages................Page-level components. + * Code.................Styled-up pieces of code. + * + * UTILITIES + * Clearfix.............Bind our clearfix onto a utility class. + * Widths...............Simple width helper classes. + * Headings.............Reassigning our heading styles to helper classes. + * Spacing..............Nudge bits of the DOM around with these spacing + * classes. + * Print................Reset-like styles taken from the HTML5 Boilerplate. + * classes.. + * Hide.................Helper classes to hide content + * Colors...............Our colour palette against some utility classes. + */ +/* ========================================================================== + #BOX-SIZING + ========================================================================== */ +/** + * More sensible default box-sizing: + * css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice + */ +html { + box-sizing: border-box; +} + +*, *:before, *:after { + box-sizing: inherit; +} + +/*! normalize.css v4.2.0 | MIT License | github.com/necolas/normalize.css */ +/** + * 1. Change the default font family in all browsers (opinionated). + * 2. Correct the line height in all browsers. + * 3. Prevent adjustments of font size after orientation changes in IE and iOS. + */ +html { + font-family: sans-serif; + /* 1 */ + line-height: 1.15; + /* 2 */ + -ms-text-size-adjust: 100%; + /* 3 */ + -webkit-text-size-adjust: 100%; + /* 3 */ +} + +/** + * Remove the margin in all browsers (opinionated). + */ +body { + margin: 0; +} + +/* HTML5 display definitions + ========================================================================== */ +/** + * Add the correct display in IE 9-. + * 1. Add the correct display in Edge, IE, and Firefox. + * 2. Add the correct display in IE. + */ +article, +aside, +details, +figcaption, +figure, +footer, +header, +main, +menu, +nav, +section, +summary { + /* 1 */ + display: block; +} + +/** + * Add the correct display in IE 9-. + */ +audio, +canvas, +progress, +video { + display: inline-block; +} + +/** + * Add the correct display in iOS 4-7. + */ +audio:not([controls]) { + display: none; + height: 0; +} + +/** + * Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ +progress { + vertical-align: baseline; +} + +/** + * Add the correct display in IE 10-. + * 1. Add the correct display in IE. + */ +template, +[hidden] { + display: none; +} + +/* Links + ========================================================================== */ +/** + * 1. Remove the gray background on active links in IE 10. + * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. + */ +a { + background-color: transparent; + /* 1 */ + -webkit-text-decoration-skip: objects; + /* 2 */ +} + +/** + * Remove the outline on focused links when they are also active or hovered + * in all browsers (opinionated). + */ +a:active, +a:hover { + outline-width: 0; +} + +/* Text-level semantics + ========================================================================== */ +/** + * 1. Remove the bottom border in Firefox 39-. + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + */ +abbr[title] { + border-bottom: none; + /* 1 */ + text-decoration: underline; + /* 2 */ + text-decoration: underline dotted; + /* 2 */ +} + +/** + * Prevent the duplicate application of `bolder` by the next rule in Safari 6. + */ +b, +strong { + font-weight: inherit; +} + +/** + * Add the correct font weight in Chrome, Edge, and Safari. + */ +b, +strong { + font-weight: bolder; +} + +/** + * Add the correct font style in Android 4.3-. + */ +dfn { + font-style: italic; +} + +/** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +/** + * Add the correct background and color in IE 9-. + */ +mark { + background-color: #ff0; + color: #000; +} + +/** + * Add the correct font size in all browsers. + */ +small { + font-size: 80%; +} + +/** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* Embedded content + ========================================================================== */ +/** + * Remove the border on images inside links in IE 10-. + */ +img { + border-style: none; +} + +/** + * Hide the overflow in IE. + */ +svg:not(:root) { + overflow: hidden; +} + +/* Grouping content + ========================================================================== */ +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ +code, +kbd, +pre, +samp { + font-family: monospace, monospace; + /* 1 */ + font-size: 1em; + /* 2 */ +} + +/** + * Add the correct margin in IE 8. + */ +figure { + margin: 1em 40px; +} + +/** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ +hr { + box-sizing: content-box; + /* 1 */ + height: 0; + /* 1 */ + overflow: visible; + /* 2 */ +} + +/* Forms + ========================================================================== */ +/** + * 1. Change font properties to `inherit` in all browsers (opinionated). + * 2. Remove the margin in Firefox and Safari. + */ +button, +input, +optgroup, +select, +textarea { + font: inherit; + /* 1 */ + margin: 0; + /* 2 */ +} + +/** + * Restore the font weight unset by the previous rule. + */ +optgroup { + font-weight: bold; +} + +/** + * Show the overflow in IE. + * 1. Show the overflow in Edge. + */ +button, +input { + /* 1 */ + overflow: visible; +} + +/** + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. + */ +button, +select { + /* 1 */ + text-transform: none; +} + +/** + * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` + * controls in Android 4. + * 2. Correct the inability to style clickable types in iOS and Safari. + */ +button, +html [type="button"], +[type="reset"], +[type="submit"] { + -webkit-appearance: button; + /* 2 */ +} + +/** + * Remove the inner border and padding in Firefox. + */ +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; +} + +/** + * Restore the focus styles unset by the previous rule. + */ +button:-moz-focusring, +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; +} + +/** + * Change the border, margin, and padding in all browsers (opinionated). + */ +fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; +} + +/** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + */ +legend { + box-sizing: border-box; + /* 1 */ + color: inherit; + /* 2 */ + display: table; + /* 1 */ + max-width: 100%; + /* 1 */ + padding: 0; + /* 3 */ + white-space: normal; + /* 1 */ +} + +/** + * Remove the default vertical scrollbar in IE. + */ +textarea { + overflow: auto; +} + +/** + * 1. Add the correct box sizing in IE 10-. + * 2. Remove the padding in IE 10-. + */ +[type="checkbox"], +[type="radio"] { + box-sizing: border-box; + /* 1 */ + padding: 0; + /* 2 */ +} + +/** + * Correct the cursor style of increment and decrement buttons in Chrome. + */ +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +/** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ +[type="search"] { + -webkit-appearance: textfield; + /* 1 */ + outline-offset: -2px; + /* 2 */ +} + +/** + * Remove the inner padding and cancel buttons in Chrome and Safari on OS X. + */ +[type="search"]::-webkit-search-cancel-button, +[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * Correct the text style of placeholders in Chrome, Edge, and Safari. + */ +::-webkit-input-placeholder { + color: inherit; + opacity: 0.54; +} + +/** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ +::-webkit-file-upload-button { + -webkit-appearance: button; + /* 1 */ + font: inherit; + /* 2 */ +} + +/* ========================================================================== + #RESET + ========================================================================== */ +/** + * A very simple reset that sits on top of Normalize.css. + */ +body, +h1, h2, h3, h4, h5, h6, +p, blockquote, pre, +dl, dd, ol, ul, +fieldset, legend, +figure, +hr { + margin: 0; + padding: 0; +} + +/** + * Remove trailing margins from nested lists. + */ +li > ul, +li > ol { + margin-bottom: 0; +} + +/** + * Remove default table spacing. + */ +table { + border-collapse: collapse; + border-spacing: 0; +} + +/* ========================================================================== + #SHARED + ========================================================================== */ +/** + * Shared declarations for certain elements. + */ +/** + * Always declare margins in the same direction: + * csswizardry.com/2012/06/single-direction-margin-declarations + */ +h1, h2, h3, h4, h5, h6, +ul, ol, dl, +blockquote, p, address, +hr, +table, +fieldset, figure, +pre { + margin-bottom: 24px; +} + +ul, ol, +dd { + margin-left: 24px; +} + +/* ========================================================================== + #PAGE + ========================================================================== */ +/* ========================================================================== + #PAGE + ========================================================================== */ +/** + * Simple page-level setup. + */ +html { + font-size: 1em; + line-height: 1.5; +} + +/** + * 1. Use the system font everywhere. + * 2. Nicer looking strokes. + */ +html { + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + -webkit-font-smoothing: antialiased; + /* [2] */ + color: #424242; +} + +/* ========================================================================== + #HEADINGS + ========================================================================== */ +/* ========================================================================== + #HEADINGS + ========================================================================== */ +/** + * Simple default styles for headings 1 through 6. Anything more opinionated + * than simple font-size changes should likely be applied via classes (see: + * http://csswizardry.com/2016/02/managing-typography-on-large-apps/). + */ +h1 { + font-size: 1.375rem; + line-height: 1.090909091; +} + +h2 { + font-size: 1.375rem; + line-height: 1.090909091; +} + +h3 { + font-size: 1.375rem; + line-height: 1.090909091; +} + +h4 { + font-size: 1.375rem; + line-height: 1.090909091; +} + +h5 { + font-size: 1.375rem; + line-height: 1.090909091; +} + +h6 { + font-size: 1.375rem; + line-height: 1.090909091; +} + +h1, h2, h3, h4, h5, h6 { + font-weight: 500; + letter-spacing: 0.033333333em; + color: #2f4054; +} + +/* ========================================================================== + #IMAGES + ========================================================================== */ +/** + * 1. Fluid images for responsive purposes. + * 2. Offset `alt` text from surrounding copy. + * 3. Setting `vertical-align` removes the whitespace that appears under `img` + * elements when they are dropped into a page as-is. Safer alternative to + * using `display: block;`. + */ +img { + max-width: 100%; + /* [1] */ + font-style: italic; + /* [2] */ + vertical-align: middle; + /* [3] */ +} + +/** + * 1. If a `width` and/or `height` attribute have been explicitly defined, let’s + * not make the image fluid. + */ +img[width], +img[height] { + /* [1] */ + max-width: none; +} + +/* ========================================================================== + #TABLES + ========================================================================== */ +/** + * 1. Ensure tables fill up as much space as possible. + */ +table { + width: 100%; + /* [1] */ +} + +/* ========================================================================== + #LINKS + ========================================================================== */ +a { + color: #4a8ec2; + text-decoration: none; +} +a:hover, a:focus { + color: #3774a2; + text-decoration: underline; +} + +/* ========================================================================== + #CODE + ========================================================================== */ +code, kbd, samp { + color: #4a8ec2; +} +pre code, pre kbd, pre samp { + color: #fff; +} + +pre { + background-color: #424242; + padding: 24px; + border-radius: 3px; +} + +/* ========================================================================== + #WRAPPERS + ========================================================================== */ +/** + * Page-level constraining and wrapping elements. + */ +.o-wrapper { + padding-right: 24px; + padding-left: 24px; + margin-right: auto; + margin-left: auto; + max-width: 1200px; +} +.o-wrapper:after { + content: "" !important; + display: block !important; + clear: both !important; +} + +/* Size variants. + ========================================================================== */ +.o-wrapper--tiny { + padding-right: 6px; + padding-left: 6px; +} + +.o-wrapper--small { + padding-right: 12px; + padding-left: 12px; +} + +.o-wrapper--large { + padding-right: 48px; + padding-left: 48px; +} + +.o-wrapper--huge { + padding-right: 96px; + padding-left: 96px; +} + +/* ========================================================================== + #LAYOUT + ========================================================================== */ +/** + * Grid-like layout system. + * + * The Layout object provides us with a column-style layout system. This file + * contains the basic structural elements, but classes should be complemented + * with width Utilities, for example: + * + *
+ *
+ *
+ *
+ *
+ *
+ * + * The above will create a two-column structure in which each column will + * fluidly fill half of the width of the parent. We can have more complex + * systems: + * + *
+ *
+ *
+ *
+ *
+ *
+ *
+ *
+ * + * The above will create a system in which the first item will be 100% width + * until we enter our medium breakpoint, when it will become 33.333% width. The + * second and third items will be 50% of their parent, until they also become + * 33.333% width at the medium breakpoint. + * + * We can also manipulate entire layout systems by adding a series of Modifiers + * to the `.o-layout` Block. For example: + * + *
+ * + * This will reverse the displayed order of the system so that it runs in the + * opposite order to our source, effectively flipping the system over. + * + *
+ * + * This will cause the system to fill up from either the centre or the right + * hand side. Default behaviour is to fill up the layout system from the left. + * + * There are plenty more options available to us: explore them below. + */ +/* Default/mandatory classes. + ========================================================================== */ +/** + * 1. Allows us to use the layout object on any type of element. + * 2. We need to defensively reset any box-model properties. + * 3. Use the negative margin trick for multi-row grids: + * http://csswizardry.com/2011/08/building-better-grid-systems/ + */ +.o-layout { + display: block; + /* [1] */ + margin: 0; + /* [2] */ + padding: 0; + /* [2] */ + list-style: none; + /* [1] */ + margin-left: -24px; + /* [3] */ + font-size: 0; +} + +/** + * 1. Allows us to manipulate grids vertically, with text-level properties, + * etc. + * 2. Default item alignment is with the tops of each other, like most + * traditional grid/layout systems. + * 3. By default, all layout items are full-width (mobile first). + * 4. Gutters provided by left padding: + * http://csswizardry.com/2011/08/building-better-grid-systems/ + */ +.o-layout__item { + display: inline-block; + /* [1] */ + vertical-align: top; + /* [2] */ + width: 100%; + /* [3] */ + padding-left: 24px; + /* [4] */ + font-size: 1rem; +} + +/* Gutter size modifiers. + ========================================================================== */ +/** + * Tiny gutters between items. + */ +.o-layout--tiny { + margin-left: -6px; +} +.o-layout--tiny > .o-layout__item { + padding-left: 6px; +} + +/** + * Small gutters between items. + */ +.o-layout--small { + margin-left: 12px; +} +.o-layout--small > .o-layout__item { + padding-left: 12px; +} + +/** + * Large gutters between items. + */ +.o-layout--large { + margin-left: -48px; +} +.o-layout--large > .o-layout__item { + padding-left: 48px; +} + +/** + * Huge gutters between items. + */ +.o-layout--huge { + margin-left: -96px; +} +.o-layout--huge > .o-layout__item { + padding-left: 96px; +} + +/** + * No gutters between items. + */ +.o-layout--flush { + margin-left: 0; +} +.o-layout--flush > .o-layout__item { + padding-left: 0; +} + +/* Vertical alignment modifiers. + ========================================================================== */ +/** + * Align all grid items to the middles of each other. + * + * Input: + * + * 1 2 3 4 5 + * 1 2 - 4 5 + * 1 2 - 4 5 + * - 2 - - 5 + * - 2 - - 5 + * + * Output: + * + * - 2 - - 5 + * 1 2 - 4 5 + * 1 2 3 4 5 + * 1 2 - 4 5 + * - 2 - - 5 + */ +.o-layout--middle > .o-layout__item { + vertical-align: middle; +} + +/** + * Align all grid items to the bottoms of each other. + * + * Input: + * + * 1 2 3 4 5 + * 1 2 - 4 5 + * 1 2 - 4 5 + * - 2 - - 5 + * - 2 - - 5 + * + * Output: + * + * - 2 - - 5 + * - 2 - - 5 + * 1 2 - 4 5 + * 1 2 - 4 5 + * 1 2 3 4 5 + */ +.o-layout--bottom > .o-layout__item { + vertical-align: bottom; +} + +/* Fill order modifiers. + ========================================================================== */ +/** + * Fill up the layout system from the centre. + * + * Input: + * + * 1 2 3 - - + * + * Output: + * + * - 1 2 3 - + */ +.o-layout--center { + text-align: center; +} +.o-layout--center > .o-layout__item { + text-align: left; +} + +/** + * Fill up the layout system from the right-hand side. + * + * Input: + * + * 1 2 3 - - + * + * Output: + * + * - - 1 2 3 + */ +.o-layout--right { + text-align: right; +} +.o-layout--right > .o-layout__item { + text-align: left; +} + +/** + * Reverse the rendered order of the grid system. + * + * Input: + * + * 1 2 3 4 5 + * + * Output: + * + * 5 4 3 2 1 + */ +.o-layout--reverse { + direction: rtl; +} +.o-layout--reverse > .o-layout__item { + direction: ltr; + text-align: left; +} + +/* ========================================================================== + #MEDIA + ========================================================================== */ +/** + * Place any image- and text-like content side-by-side, as per: + * http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code + */ +.o-media { + display: block; +} +.o-media:after { + content: "" !important; + display: block !important; + clear: both !important; +} + +.o-media__img { + float: left; + margin-right: 24px; +} +.o-media__img > img { + display: block; +} + +.o-media__body { + overflow: hidden; + display: block; +} +.o-media__body, +.o-media__body > :last-child { + margin-bottom: 0; +} + +/* Size variants + ========================================================================== */ +/** + * Modify the amount of space between our image and our text. We also have + * reversible options for all available sizes. + */ +.o-media--tiny > .o-media__img { + margin-right: 6px; +} +.o-media--tiny.o-media--reverse > .o-media__img { + margin-right: 0; + margin-left: 6px; +} + +.o-media--small > .o-media__img { + margin-right: 12px; +} +.o-media--small.o-media--reverse > .o-media__img { + margin-right: 0; + margin-left: 12px; +} + +.o-media--large > .o-media__img { + margin-right: 48px; +} +.o-media--large.o-media--reverse > .o-media__img { + margin-right: 0; + margin-left: 48px; +} + +.o-media--huge > .o-media__img { + margin-right: 96px; +} +.o-media--huge.o-media--reverse > .o-media__img { + margin-right: 0; + margin-left: 96px; +} + +/* Reversed media objects + ========================================================================== */ +.o-media--reverse > .o-media__img { + float: right; + margin-right: 0; + margin-left: 24px; +} + +/* Gutterless media objects + ========================================================================== */ +.o-media--flush > .o-media__img { + margin-right: 0; + margin-left: 0; +} + +/* ========================================================================== + #LIST-BARE + ========================================================================== */ +/** + * Strip list-like appearance from lists by removing their bullets, and any + * indentation. + */ +.o-list-bare { + list-style: none; + margin-left: 0; +} + +/* ========================================================================== + #LIST-INLINE + ========================================================================== */ +/** + * The list-inline object simply displays a list of items in one line. + */ +.o-list-inline { + margin-left: 0; + list-style: none; +} + +.o-list-inline__item { + display: inline-block; +} + +/* Delimited list. + ========================================================================== */ +/** + * By default, applying this class will comma separate your list items. You can + * change the delimiter by predefining the following variable: + */ +.o-list-inline--delimited { + font-size: 0; +} +.o-list-inline--delimited > .o-list-inline__item { + font-size: 1rem; +} +.o-list-inline--delimited > .o-list-inline__item + .o-list-inline__item:before { + content: ", "; +} + +/* ========================================================================== + #BOX + ========================================================================== */ +/** + * The box object simply boxes off content. Extend with cosmetic styles in the + * Components layer. + * + * 1. So we can apply the `.o-box` class to naturally-inline elements. + */ +.o-box { + display: block; + /* [1] */ + padding: 24px; +} +.o-box:after { + content: "" !important; + display: block !important; + clear: both !important; +} +.o-box > :last-child { + margin-bottom: 0; +} + +/* Size variants + ========================================================================== */ +.o-box--flush { + padding: 0; +} + +.o-box--tiny { + padding: 6px; +} + +.o-box--small { + padding: 12px; +} + +.o-box--large { + padding: 48px; +} + +.o-box--huge { + padding: 96px; +} + +/* ========================================================================== + #BLOCK + ========================================================================== */ +/** + * Stacked image-with-text object. A simple abstraction to cover a very commonly + * occurring design pattern. + */ +.o-block { + display: block; + text-align: center; +} + +.o-block__img { + margin-bottom: 24px; + /* Size variants. + ====================================================================== */ +} +.o-block--flush > .o-block__img { + margin-bottom: 0; +} +.o-block--tiny > .o-block__img { + margin-bottom: 6px; +} +.o-block--small > .o-block__img { + margin-bottom: 12px; +} +.o-block--large > .o-block__img { + margin-bottom: 48px; +} +.o-block--huge > .o-block__img { + margin-bottom: 96px; +} + +.o-block__body { + display: block; +} + +/* Alignment variants. + ========================================================================== */ +.o-block--right { + text-align: right; +} + +.o-block--left { + text-align: left; +} + +/* ========================================================================== + #RATIO + ========================================================================== */ +/** + * Create ratio-bound content blocks, to keep media (e.g. images, videos) in + * their correct aspect ratios. + * + * http://alistapart.com/article/creating-intrinsic-ratios-for-video + */ +/** + * 1. Default cropping is a 1:1 ratio (i.e. a perfect square). + */ +.o-ratio { + overflow: hidden; + position: relative; + display: block; +} +.o-ratio:before { + content: ""; + display: block; + width: 100%; + padding-bottom: 100%; + /* [1] */ +} + +.o-ratio__content, +.o-ratio > iframe, +.o-ratio > embed, +.o-ratio > object { + position: absolute; + top: 0; + bottom: 0; + left: 0; + height: 100%; + width: 100%; +} + +/* Ratio variants. + ========================================================================== */ +/** + * Generate a series of ratio classes to be used like so: + * + *
+ * + */ +.o-ratio--2\:1:before { + padding-bottom: 50%; +} + +.o-ratio--4\:3:before { + padding-bottom: 75%; +} + +.o-ratio--16\:9:before { + padding-bottom: 56.25%; +} + +/* ========================================================================== + #CROP + ========================================================================== */ +/** + * Provide a cropping container in order to display media (usually images) + * cropped to certain ratios. + * + * 1. Set up a positioning context in which the image can sit. + * 2. This is the crucial part: where the cropping happens. + */ +.o-crop { + position: relative; + /* [1] */ + display: block; + overflow: hidden; + /* [2] */ +} + +/** + * Apply this class to the content (usually `img`) that needs cropping. + * + * 1. Image’s default positioning is top-left in the cropping box. + * 2. Make sure the media doesn’t stop itself too soon. + */ +.o-crop__content { + position: absolute; + top: 0; + /* [1] */ + left: 0; + /* [1] */ + max-width: none; + /* [2] */ +} + +/** + * We can position the media in different locations within the cropping area. + */ +.o-crop__content--right { + right: 0; + left: auto; +} + +.o-crop__content--bottom { + top: auto; + bottom: 0; +} + +.o-crop__content--center { + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} + +/* Crop-ratio variants. + ========================================================================== */ +/** + * Generate a series of crop classes to be used like so: + * + *
+ * + */ +.o-crop--2\:1 { + padding-bottom: 50%; +} + +.o-crop--4\:3 { + padding-bottom: 75%; +} + +.o-crop--16\:9 { + padding-bottom: 56.25%; +} + +/* ========================================================================== + #BUTTONS + ========================================================================== */ +/** + * This is an example component. Extend inuitcss by building your own components + * that make up your UI. Component classes are prefixed with a `c-`. + */ +/** + * 1. Allow us to style box model properties. + * 2. Line different sized buttons up a little nicer. + * 3. Make buttons inherit font styles (often necessary when styling `input`s as + * buttons). + * 4. Reset/normalize some styles. + * 5. Force all button-styled elements to appear clickable. + * 6. Fixes odd inner spacing in IE7. + */ +.c-btn { + display: inline-block; + /* [1] */ + vertical-align: middle; + /* [2] */ + font: inherit; + /* [3] */ + text-align: center; + /* [4] */ + margin: 0; + /* [4] */ + cursor: pointer; + /* [5] */ + overflow: visible; + /* [6] */ + padding: 12px 24px; + transition: 0.333333333s; + border-radius: 3px; +} + +/* Style variants + ========================================================================== */ +.c-btn--primary { + background-color: #4a8ec2; +} +.c-btn--primary, .c-btn--primary:hover, .c-btn--primary:active, .c-btn--primary:focus { + text-decoration: none; + /* [4] */ + color: #fff; +} +.c-btn--primary:hover, .c-btn--primary:focus { + background-color: #3774a2; +} + +.c-btn--secondary { + background-color: #2f4054; +} +.c-btn--secondary, .c-btn--secondary:hover, .c-btn--secondary:active, .c-btn--secondary:focus { + text-decoration: none; + color: #fff; +} +.c-btn--secondary:hover, .c-btn--secondary:focus { + background-color: #1d2733; +} + +/** + * 1. Artificially increase specificity to combat leaky `.band--* a {}` rules. + */ +.c-btn--tertiary { + background-color: #fff; +} +.c-btn--tertiary.c-btn--tertiary, .c-btn--tertiary:hover, .c-btn--tertiary:active, .c-btn--tertiary:focus { + text-decoration: none; + color: #4a8ec2; +} +.c-btn--tertiary:hover, .c-btn--tertiary:focus { + color: #4a8ec2; +} + +/* Size variants + ========================================================================== */ +.c-btn--small { + padding: 0.375rem 0.75rem; +} + +.c-btn--large { + padding: 1.5rem 3rem; +} + +/* Ghost buttons + ========================================================================== */ +/** + * Ghost buttons have see-through backgrounds and are bordered. + */ +.c-btn--ghost { + border: 2px solid currentColor; + padding: 10px 22px; +} +.c-btn--ghost, .c-btn--ghost:hover, .c-btn--ghost:active, .c-btn--ghost:focus { + background: none; +} +.c-btn--ghost.c-btn--small { + padding: 4px 10px; +} +.c-btn--ghost.c-btn--large { + padding: 22px 46px; +} +.c-btn--ghost.c-btn--primary { + color: #4a8ec2; +} +.c-btn--ghost.c-btn--primary:hover, .c-btn--ghost.c-btn--primary:focus { + color: #3774a2; +} +.c-btn--ghost.c-btn--secondary { + color: #2f4054; +} +.c-btn--ghost.c-btn--secondary:hover, .c-btn--ghost.c-btn--secondary:focus { + color: #1d2733; +} +.c-btn--ghost.c-btn--tertiary { + color: #fff; +} +.c-btn--ghost.c-btn--tertiary:hover, .c-btn--ghost.c-btn--tertiary:focus { + color: #fff; +} + +/* ========================================================================== + #BANDS + ========================================================================== */ +/** + * Long-form comment. + * + * This spans multiple lines and is also constrained to no longer than 80 + * characters in width. + * + * 1. Provide line-comments like this. + */ +.c-band { + display: block; + padding-top: 24px; + padding-bottom: 24px; +} +.c-band > :last-child { + margin-bottom: 0; +} + +.c-band--small { + padding-top: 12px; + padding-bottom: 12px; +} + +.c-band--center { + text-align: center; +} + +.c-band--primary { + background-color: #4a8ec2; +} +.c-band--primary, +.c-band--primary a { + color: #fff; +} + +.c-band--secondary { + background-color: #2f4054; +} +.c-band--secondary, +.c-band--secondary a { + color: #fff; +} + +/* ========================================================================== + #PAGE-HEAD + ========================================================================== */ +.c-page-head { + @inuit-clearfix ($args...); + padding-top: 24px; + padding-bottom: 24px; +} + +.c-page-head__logo { + float: left; +} + +.c-page-head__nav { + float: right; +} + +/* ========================================================================== + #PAGE-FOOT + ========================================================================== */ +.c-page-foot { + padding-bottom: 0; +} +.c-page-foot a { + text-decoration: underline; + font-weight: bold; +} +.c-page-foot a:hover, .c-page-foot a:focus { + color: #70a6cf; +} + +.c-page-foot__region { + font-size: 0.75rem; + line-height: 2; +} + +.c-page-foot__heading { + font-size: 0.875rem; + line-height: 1.714285714; + font-weight: bold; + color: #fff; + border-bottom: 1px solid #415975; + margin-bottom: 11px; +} + +/* ========================================================================== + #LOCKUP + ========================================================================== */ +.c-lockup { + display: table; +} + +.c-lockup__img, +.c-lockup__text { + display: table-cell; + vertical-align: middle; +} + +.c-lockup__img { + padding-right: 12px; +} + +.c-lockup__text { + font-weight: bold; + font-size: 0.75rem; + line-height: 2; +} + +/* ========================================================================== + #LOGO + ========================================================================== */ +.c-logo { + display: inline-block; + width: 48px; + height: 48px; + background-image: url(/assets/img/sprites/sprite-logo.png); +} +@media (min-width: 45em) { + .c-logo { + background-position: -48px 0; + width: 72px; + height: 72px; + } +} +@media (min-width: 64em) { + .c-logo { + background-position: 0 -72px; + width: 220px; + height: 105px; + } +} + +/* ========================================================================== + #AVATARS + ========================================================================== */ +.c-avatar { + border-radius: 100%; + width: 128px; + height: 128px; +} + +.c-avatar--small { + width: 64px; + height: 64px; +} + +.c-avatar--large { + width: 64px; + height: 64px; +} + +/* ========================================================================== + #BIO-MINI + ========================================================================== */ +.c-bio-mini { + padding: 24px; + background-color: #4a8ec2; + color: #fff; +} + +.c-bio-mini__title { + margin-bottom: 0; + color: #fff; +} + +/* ========================================================================== + #NAV-PRIMARY + ========================================================================== */ +.c-nav-primary { + line-height: 48px; +} +@media (min-width: 45em) { + .c-nav-primary { + line-height: 72px; + } +} +@media (min-width: 64em) { + .c-nav-primary { + line-height: 105px; + } +} + +.c-nav-primary__link { + display: inline-block; + transition: 0.333333333s; +} +@media (min-width: 45em) { + .c-nav-primary__link { + border: 1px solid transparent; + border-radius: 3px; + line-height: 46px; + padding-right: 22px; + padding-left: 22px; + text-decoration: none; + } +} +.c-nav-primary__link:hover, .c-nav-primary__link:focus { + border-color: currentColor; +} + +/* ========================================================================== + #NAV-SECONDARY + ========================================================================== */ +.c-nav-secondary { + font-size: 0.75rem; + line-height: 2; + list-style: none; + margin-left: 0; + background-color: #2f4054; + font-weight: bold; +} +@media (min-width: 45em) { + .c-nav-secondary { + font-size: 1rem; + line-height: 1.5; + } +} + +.c-nav-secondary--sub { + margin-left: 12px; + font-weight: normal; +} +@media (min-width: 45em) { + .c-nav-secondary--sub { + margin-left: 24px; + } +} + +.c-nav-secondary__link { + display: block; + padding: 6px; + border-bottom: 1px solid #415975; +} +@media (min-width: 45em) { + .c-nav-secondary__link { + padding: 12px; + } +} +.c-nav-secondary__link, .c-nav-secondary__link:hover, .c-nav-secondary__link:focus { + color: #fff; +} + +/* ========================================================================== + #NAV-TERTIARY + ========================================================================== */ +.c-nav-tertiary { + list-style: none; + margin-left: 0; +} + +/* ========================================================================== + #PAGES + ========================================================================== */ +.c-page--home .c-page__home, .c-page--about .c-page__about, .c-page--docs .c-page__docs, .c-page--blog .c-page__blog { + cursor: default; + pointer-events: none; + text-decoration: underline; +} +@media (min-width: 45em) { + .c-page--home .c-page__home, .c-page--about .c-page__about, .c-page--docs .c-page__docs, .c-page--blog .c-page__blog { + border-color: currentColor; + text-decoration: none; + } +} + +/* ========================================================================== + #CODE + ========================================================================== */ +.c-code-cta { + color: #fff; +} +@media (min-width: 45em) { + .c-code-cta { + font-size: 1.5rem; + line-height: 1; + } +} + +/* ========================================================================== + #CLEARFIX + ========================================================================== */ +/** + * Attach our clearfix mixin to a utility class. + */ +.u-clearfix:after { + content: "" !important; + display: block !important; + clear: both !important; +} + +/* ========================================================================== + #WIDTHS + ========================================================================== */ +/** + * A series of width helper classes that you can use to size things like grid + * systems. Classes can take a fraction-like format (e.g. `.u-2/3`) or a spoken- + * word format (e.g. `.u-2-of-3`). Use these in your markup: + * + *
+ * + * The following will generate a 12 column grid system. + */ +.u-1\/12 { + width: 8.333333333% !important; +} + +/** + * 1. Defensively reset any leftover or conflicting `left`/`right` values. + */ +.u-push-1\/12 { + position: relative; + right: auto; + /* [1] */ + left: 8.333333333% !important; +} + +.u-pull-1\/12 { + position: relative; + right: 8.333333333% !important; + left: auto; + /* [1] */ +} + +.u-2\/12 { + width: 16.666666667% !important; +} + +/** + * 1. Defensively reset any leftover or conflicting `left`/`right` values. + */ +.u-push-2\/12 { + position: relative; + right: auto; + /* [1] */ + left: 16.666666667% !important; +} + +.u-pull-2\/12 { + position: relative; + right: 16.666666667% !important; + left: auto; + /* [1] */ +} + +.u-3\/12 { + width: 25% !important; +} + +/** + * 1. Defensively reset any leftover or conflicting `left`/`right` values. + */ +.u-push-3\/12 { + position: relative; + right: auto; + /* [1] */ + left: 25% !important; +} + +.u-pull-3\/12 { + position: relative; + right: 25% !important; + left: auto; + /* [1] */ +} + +.u-4\/12 { + width: 33.333333333% !important; +} + +/** + * 1. Defensively reset any leftover or conflicting `left`/`right` values. + */ +.u-push-4\/12 { + position: relative; + right: auto; + /* [1] */ + left: 33.333333333% !important; +} + +.u-pull-4\/12 { + position: relative; + right: 33.333333333% !important; + left: auto; + /* [1] */ +} + +.u-5\/12 { + width: 41.666666667% !important; +} + +/** + * 1. Defensively reset any leftover or conflicting `left`/`right` values. + */ +.u-push-5\/12 { + position: relative; + right: auto; + /* [1] */ + left: 41.666666667% !important; +} + +.u-pull-5\/12 { + position: relative; + right: 41.666666667% !important; + left: auto; + /* [1] */ +} + +.u-6\/12 { + width: 50% !important; +} + +/** + * 1. Defensively reset any leftover or conflicting `left`/`right` values. + */ +.u-push-6\/12 { + position: relative; + right: auto; + /* [1] */ + left: 50% !important; +} + +.u-pull-6\/12 { + position: relative; + right: 50% !important; + left: auto; + /* [1] */ +} + +.u-7\/12 { + width: 58.333333333% !important; +} + +/** + * 1. Defensively reset any leftover or conflicting `left`/`right` values. + */ +.u-push-7\/12 { + position: relative; + right: auto; + /* [1] */ + left: 58.333333333% !important; +} + +.u-pull-7\/12 { + position: relative; + right: 58.333333333% !important; + left: auto; + /* [1] */ +} + +.u-8\/12 { + width: 66.666666667% !important; +} + +/** + * 1. Defensively reset any leftover or conflicting `left`/`right` values. + */ +.u-push-8\/12 { + position: relative; + right: auto; + /* [1] */ + left: 66.666666667% !important; +} + +.u-pull-8\/12 { + position: relative; + right: 66.666666667% !important; + left: auto; + /* [1] */ +} + +.u-9\/12 { + width: 75% !important; +} + +/** + * 1. Defensively reset any leftover or conflicting `left`/`right` values. + */ +.u-push-9\/12 { + position: relative; + right: auto; + /* [1] */ + left: 75% !important; +} + +.u-pull-9\/12 { + position: relative; + right: 75% !important; + left: auto; + /* [1] */ +} + +.u-10\/12 { + width: 83.333333333% !important; +} + +/** + * 1. Defensively reset any leftover or conflicting `left`/`right` values. + */ +.u-push-10\/12 { + position: relative; + right: auto; + /* [1] */ + left: 83.333333333% !important; +} + +.u-pull-10\/12 { + position: relative; + right: 83.333333333% !important; + left: auto; + /* [1] */ +} + +.u-11\/12 { + width: 91.666666667% !important; +} + +/** + * 1. Defensively reset any leftover or conflicting `left`/`right` values. + */ +.u-push-11\/12 { + position: relative; + right: auto; + /* [1] */ + left: 91.666666667% !important; +} + +.u-pull-11\/12 { + position: relative; + right: 91.666666667% !important; + left: auto; + /* [1] */ +} + +.u-12\/12 { + width: 100% !important; +} + +/** + * 1. Defensively reset any leftover or conflicting `left`/`right` values. + */ +.u-push-12\/12 { + position: relative; + right: auto; + /* [1] */ + left: 100% !important; +} + +.u-pull-12\/12 { + position: relative; + right: 100% !important; + left: auto; + /* [1] */ +} + +/** + * Loop through our Sass MQ breakpoints and build a 12 column grid system for + * each of them. + */ +@media (min-width: 20em) { + .u-1\/12\@sm { + width: 8.333333333% !important; + } + + /** + * 1. Defensively reset any leftover or conflicting `left`/`right` values. + */ + .u-push-1\/12\@sm { + position: relative; + right: auto; + /* [1] */ + left: 8.333333333% !important; + } + + .u-pull-1\/12\@sm { + position: relative; + right: 8.333333333% !important; + left: auto; + /* [1] */ + } + + .u-2\/12\@sm { + width: 16.666666667% !important; + } + + /** + * 1. Defensively reset any leftover or conflicting `left`/`right` values. + */ + .u-push-2\/12\@sm { + position: relative; + right: auto; + /* [1] */ + left: 16.666666667% !important; + } + + .u-pull-2\/12\@sm { + position: relative; + right: 16.666666667% !important; + left: auto; + /* [1] */ + } + + .u-3\/12\@sm { + width: 25% !important; + } + + /** + * 1. Defensively reset any leftover or conflicting `left`/`right` values. + */ + .u-push-3\/12\@sm { + position: relative; + right: auto; + /* [1] */ + left: 25% !important; + } + + .u-pull-3\/12\@sm { + position: relative; + right: 25% !important; + left: auto; + /* [1] */ + } + + .u-4\/12\@sm { + width: 33.333333333% !important; + } + + /** + * 1. Defensively reset any leftover or conflicting `left`/`right` values. + */ + .u-push-4\/12\@sm { + position: relative; + right: auto; + /* [1] */ + left: 33.333333333% !important; + } + + .u-pull-4\/12\@sm { + position: relative; + right: 33.333333333% !important; + left: auto; + /* [1] */ + } + + .u-5\/12\@sm { + width: 41.666666667% !important; + } + + /** + * 1. Defensively reset any leftover or conflicting `left`/`right` values. + */ + .u-push-5\/12\@sm { + position: relative; + right: auto; + /* [1] */ + left: 41.666666667% !important; + } + + .u-pull-5\/12\@sm { + position: relative; + right: 41.666666667% !important; + left: auto; + /* [1] */ + } + + .u-6\/12\@sm { + width: 50% !important; + } + + /** + * 1. Defensively reset any leftover or conflicting `left`/`right` values. + */ + .u-push-6\/12\@sm { + position: relative; + right: auto; + /* [1] */ + left: 50% !important; + } + + .u-pull-6\/12\@sm { + position: relative; + right: 50% !important; + left: auto; + /* [1] */ + } + + .u-7\/12\@sm { + width: 58.333333333% !important; + } + + /** + * 1. Defensively reset any leftover or conflicting `left`/`right` values. + */ + .u-push-7\/12\@sm { + position: relative; + right: auto; + /* [1] */ + left: 58.333333333% !important; + } + + .u-pull-7\/12\@sm { + position: relative; + right: 58.333333333% !important; + left: auto; + /* [1] */ + } + + .u-8\/12\@sm { + width: 66.666666667% !important; + } + + /** + * 1. Defensively reset any leftover or conflicting `left`/`right` values. + */ + .u-push-8\/12\@sm { + position: relative; + right: auto; + /* [1] */ + left: 66.666666667% !important; + } + + .u-pull-8\/12\@sm { + position: relative; + right: 66.666666667% !important; + left: auto; + /* [1] */ + } + + .u-9\/12\@sm { + width: 75% !important; + } + + /** + * 1. Defensively reset any leftover or conflicting `left`/`right` values. + */ + .u-push-9\/12\@sm { + position: relative; + right: auto; + /* [1] */ + left: 75% !important; + } + + .u-pull-9\/12\@sm { + position: relative; + right: 75% !important; + left: auto; + /* [1] */ + } + + .u-10\/12\@sm { + width: 83.333333333% !important; + } + + /** + * 1. Defensively reset any leftover or conflicting `left`/`right` values. + */ + .u-push-10\/12\@sm { + position: relative; + right: auto; + /* [1] */ + left: 83.333333333% !important; + } + + .u-pull-10\/12\@sm { + position: relative; + right: 83.333333333% !important; + left: auto; + /* [1] */ + } + + .u-11\/12\@sm { + width: 91.666666667% !important; + } + + /** + * 1. Defensively reset any leftover or conflicting `left`/`right` values. + */ + .u-push-11\/12\@sm { + position: relative; + right: auto; + /* [1] */ + left: 91.666666667% !important; + } + + .u-pull-11\/12\@sm { + position: relative; + right: 91.666666667% !important; + left: auto; + /* [1] */ + } + + .u-12\/12\@sm { + width: 100% !important; + } + + /** + * 1. Defensively reset any leftover or conflicting `left`/`right` values. + */ + .u-push-12\/12\@sm { + position: relative; + right: auto; + /* [1] */ + left: 100% !important; + } + + .u-pull-12\/12\@sm { + position: relative; + right: 100% !important; + left: auto; + /* [1] */ + } +} +@media (min-width: 45em) { + .u-1\/12\@md { + width: 8.333333333% !important; + } + + /** + * 1. Defensively reset any leftover or conflicting `left`/`right` values. + */ + .u-push-1\/12\@md { + position: relative; + right: auto; + /* [1] */ + left: 8.333333333% !important; + } + + .u-pull-1\/12\@md { + position: relative; + right: 8.333333333% !important; + left: auto; + /* [1] */ + } + + .u-2\/12\@md { + width: 16.666666667% !important; + } + + /** + * 1. Defensively reset any leftover or conflicting `left`/`right` values. + */ + .u-push-2\/12\@md { + position: relative; + right: auto; + /* [1] */ + left: 16.666666667% !important; + } + + .u-pull-2\/12\@md { + position: relative; + right: 16.666666667% !important; + left: auto; + /* [1] */ + } + + .u-3\/12\@md { + width: 25% !important; + } + + /** + * 1. Defensively reset any leftover or conflicting `left`/`right` values. + */ + .u-push-3\/12\@md { + position: relative; + right: auto; + /* [1] */ + left: 25% !important; + } + + .u-pull-3\/12\@md { + position: relative; + right: 25% !important; + left: auto; + /* [1] */ + } + + .u-4\/12\@md { + width: 33.333333333% !important; + } + + /** + * 1. Defensively reset any leftover or conflicting `left`/`right` values. + */ + .u-push-4\/12\@md { + position: relative; + right: auto; + /* [1] */ + left: 33.333333333% !important; + } + + .u-pull-4\/12\@md { + position: relative; + right: 33.333333333% !important; + left: auto; + /* [1] */ + } + + .u-5\/12\@md { + width: 41.666666667% !important; + } + + /** + * 1. Defensively reset any leftover or conflicting `left`/`right` values. + */ + .u-push-5\/12\@md { + position: relative; + right: auto; + /* [1] */ + left: 41.666666667% !important; + } + + .u-pull-5\/12\@md { + position: relative; + right: 41.666666667% !important; + left: auto; + /* [1] */ + } + + .u-6\/12\@md { + width: 50% !important; + } + + /** + * 1. Defensively reset any leftover or conflicting `left`/`right` values. + */ + .u-push-6\/12\@md { + position: relative; + right: auto; + /* [1] */ + left: 50% !important; + } + + .u-pull-6\/12\@md { + position: relative; + right: 50% !important; + left: auto; + /* [1] */ + } + + .u-7\/12\@md { + width: 58.333333333% !important; + } + + /** + * 1. Defensively reset any leftover or conflicting `left`/`right` values. + */ + .u-push-7\/12\@md { + position: relative; + right: auto; + /* [1] */ + left: 58.333333333% !important; + } + + .u-pull-7\/12\@md { + position: relative; + right: 58.333333333% !important; + left: auto; + /* [1] */ + } + + .u-8\/12\@md { + width: 66.666666667% !important; + } + + /** + * 1. Defensively reset any leftover or conflicting `left`/`right` values. + */ + .u-push-8\/12\@md { + position: relative; + right: auto; + /* [1] */ + left: 66.666666667% !important; + } + + .u-pull-8\/12\@md { + position: relative; + right: 66.666666667% !important; + left: auto; + /* [1] */ + } + + .u-9\/12\@md { + width: 75% !important; + } + + /** + * 1. Defensively reset any leftover or conflicting `left`/`right` values. + */ + .u-push-9\/12\@md { + position: relative; + right: auto; + /* [1] */ + left: 75% !important; + } + + .u-pull-9\/12\@md { + position: relative; + right: 75% !important; + left: auto; + /* [1] */ + } + + .u-10\/12\@md { + width: 83.333333333% !important; + } + + /** + * 1. Defensively reset any leftover or conflicting `left`/`right` values. + */ + .u-push-10\/12\@md { + position: relative; + right: auto; + /* [1] */ + left: 83.333333333% !important; + } + + .u-pull-10\/12\@md { + position: relative; + right: 83.333333333% !important; + left: auto; + /* [1] */ + } + + .u-11\/12\@md { + width: 91.666666667% !important; + } + + /** + * 1. Defensively reset any leftover or conflicting `left`/`right` values. + */ + .u-push-11\/12\@md { + position: relative; + right: auto; + /* [1] */ + left: 91.666666667% !important; + } + + .u-pull-11\/12\@md { + position: relative; + right: 91.666666667% !important; + left: auto; + /* [1] */ + } + + .u-12\/12\@md { + width: 100% !important; + } + + /** + * 1. Defensively reset any leftover or conflicting `left`/`right` values. + */ + .u-push-12\/12\@md { + position: relative; + right: auto; + /* [1] */ + left: 100% !important; + } + + .u-pull-12\/12\@md { + position: relative; + right: 100% !important; + left: auto; + /* [1] */ + } +} +@media (min-width: 64em) { + .u-1\/12\@lg { + width: 8.333333333% !important; + } + + /** + * 1. Defensively reset any leftover or conflicting `left`/`right` values. + */ + .u-push-1\/12\@lg { + position: relative; + right: auto; + /* [1] */ + left: 8.333333333% !important; + } + + .u-pull-1\/12\@lg { + position: relative; + right: 8.333333333% !important; + left: auto; + /* [1] */ + } + + .u-2\/12\@lg { + width: 16.666666667% !important; + } + + /** + * 1. Defensively reset any leftover or conflicting `left`/`right` values. + */ + .u-push-2\/12\@lg { + position: relative; + right: auto; + /* [1] */ + left: 16.666666667% !important; + } + + .u-pull-2\/12\@lg { + position: relative; + right: 16.666666667% !important; + left: auto; + /* [1] */ + } + + .u-3\/12\@lg { + width: 25% !important; + } + + /** + * 1. Defensively reset any leftover or conflicting `left`/`right` values. + */ + .u-push-3\/12\@lg { + position: relative; + right: auto; + /* [1] */ + left: 25% !important; + } + + .u-pull-3\/12\@lg { + position: relative; + right: 25% !important; + left: auto; + /* [1] */ + } + + .u-4\/12\@lg { + width: 33.333333333% !important; + } + + /** + * 1. Defensively reset any leftover or conflicting `left`/`right` values. + */ + .u-push-4\/12\@lg { + position: relative; + right: auto; + /* [1] */ + left: 33.333333333% !important; + } + + .u-pull-4\/12\@lg { + position: relative; + right: 33.333333333% !important; + left: auto; + /* [1] */ + } + + .u-5\/12\@lg { + width: 41.666666667% !important; + } + + /** + * 1. Defensively reset any leftover or conflicting `left`/`right` values. + */ + .u-push-5\/12\@lg { + position: relative; + right: auto; + /* [1] */ + left: 41.666666667% !important; + } + + .u-pull-5\/12\@lg { + position: relative; + right: 41.666666667% !important; + left: auto; + /* [1] */ + } + + .u-6\/12\@lg { + width: 50% !important; + } + + /** + * 1. Defensively reset any leftover or conflicting `left`/`right` values. + */ + .u-push-6\/12\@lg { + position: relative; + right: auto; + /* [1] */ + left: 50% !important; + } + + .u-pull-6\/12\@lg { + position: relative; + right: 50% !important; + left: auto; + /* [1] */ + } + + .u-7\/12\@lg { + width: 58.333333333% !important; + } + + /** + * 1. Defensively reset any leftover or conflicting `left`/`right` values. + */ + .u-push-7\/12\@lg { + position: relative; + right: auto; + /* [1] */ + left: 58.333333333% !important; + } + + .u-pull-7\/12\@lg { + position: relative; + right: 58.333333333% !important; + left: auto; + /* [1] */ + } + + .u-8\/12\@lg { + width: 66.666666667% !important; + } + + /** + * 1. Defensively reset any leftover or conflicting `left`/`right` values. + */ + .u-push-8\/12\@lg { + position: relative; + right: auto; + /* [1] */ + left: 66.666666667% !important; + } + + .u-pull-8\/12\@lg { + position: relative; + right: 66.666666667% !important; + left: auto; + /* [1] */ + } + + .u-9\/12\@lg { + width: 75% !important; + } + + /** + * 1. Defensively reset any leftover or conflicting `left`/`right` values. + */ + .u-push-9\/12\@lg { + position: relative; + right: auto; + /* [1] */ + left: 75% !important; + } + + .u-pull-9\/12\@lg { + position: relative; + right: 75% !important; + left: auto; + /* [1] */ + } + + .u-10\/12\@lg { + width: 83.333333333% !important; + } + + /** + * 1. Defensively reset any leftover or conflicting `left`/`right` values. + */ + .u-push-10\/12\@lg { + position: relative; + right: auto; + /* [1] */ + left: 83.333333333% !important; + } + + .u-pull-10\/12\@lg { + position: relative; + right: 83.333333333% !important; + left: auto; + /* [1] */ + } + + .u-11\/12\@lg { + width: 91.666666667% !important; + } + + /** + * 1. Defensively reset any leftover or conflicting `left`/`right` values. + */ + .u-push-11\/12\@lg { + position: relative; + right: auto; + /* [1] */ + left: 91.666666667% !important; + } + + .u-pull-11\/12\@lg { + position: relative; + right: 91.666666667% !important; + left: auto; + /* [1] */ + } + + .u-12\/12\@lg { + width: 100% !important; + } + + /** + * 1. Defensively reset any leftover or conflicting `left`/`right` values. + */ + .u-push-12\/12\@lg { + position: relative; + right: auto; + /* [1] */ + left: 100% !important; + } + + .u-pull-12\/12\@lg { + position: relative; + right: 100% !important; + left: auto; + /* [1] */ + } +} +@media (min-width: 90em) { + .u-1\/12\@xl { + width: 8.333333333% !important; + } + + /** + * 1. Defensively reset any leftover or conflicting `left`/`right` values. + */ + .u-push-1\/12\@xl { + position: relative; + right: auto; + /* [1] */ + left: 8.333333333% !important; + } + + .u-pull-1\/12\@xl { + position: relative; + right: 8.333333333% !important; + left: auto; + /* [1] */ + } + + .u-2\/12\@xl { + width: 16.666666667% !important; + } + + /** + * 1. Defensively reset any leftover or conflicting `left`/`right` values. + */ + .u-push-2\/12\@xl { + position: relative; + right: auto; + /* [1] */ + left: 16.666666667% !important; + } + + .u-pull-2\/12\@xl { + position: relative; + right: 16.666666667% !important; + left: auto; + /* [1] */ + } + + .u-3\/12\@xl { + width: 25% !important; + } + + /** + * 1. Defensively reset any leftover or conflicting `left`/`right` values. + */ + .u-push-3\/12\@xl { + position: relative; + right: auto; + /* [1] */ + left: 25% !important; + } + + .u-pull-3\/12\@xl { + position: relative; + right: 25% !important; + left: auto; + /* [1] */ + } + + .u-4\/12\@xl { + width: 33.333333333% !important; + } + + /** + * 1. Defensively reset any leftover or conflicting `left`/`right` values. + */ + .u-push-4\/12\@xl { + position: relative; + right: auto; + /* [1] */ + left: 33.333333333% !important; + } + + .u-pull-4\/12\@xl { + position: relative; + right: 33.333333333% !important; + left: auto; + /* [1] */ + } + + .u-5\/12\@xl { + width: 41.666666667% !important; + } + + /** + * 1. Defensively reset any leftover or conflicting `left`/`right` values. + */ + .u-push-5\/12\@xl { + position: relative; + right: auto; + /* [1] */ + left: 41.666666667% !important; + } + + .u-pull-5\/12\@xl { + position: relative; + right: 41.666666667% !important; + left: auto; + /* [1] */ + } + + .u-6\/12\@xl { + width: 50% !important; + } + + /** + * 1. Defensively reset any leftover or conflicting `left`/`right` values. + */ + .u-push-6\/12\@xl { + position: relative; + right: auto; + /* [1] */ + left: 50% !important; + } + + .u-pull-6\/12\@xl { + position: relative; + right: 50% !important; + left: auto; + /* [1] */ + } + + .u-7\/12\@xl { + width: 58.333333333% !important; + } + + /** + * 1. Defensively reset any leftover or conflicting `left`/`right` values. + */ + .u-push-7\/12\@xl { + position: relative; + right: auto; + /* [1] */ + left: 58.333333333% !important; + } + + .u-pull-7\/12\@xl { + position: relative; + right: 58.333333333% !important; + left: auto; + /* [1] */ + } + + .u-8\/12\@xl { + width: 66.666666667% !important; + } + + /** + * 1. Defensively reset any leftover or conflicting `left`/`right` values. + */ + .u-push-8\/12\@xl { + position: relative; + right: auto; + /* [1] */ + left: 66.666666667% !important; + } + + .u-pull-8\/12\@xl { + position: relative; + right: 66.666666667% !important; + left: auto; + /* [1] */ + } + + .u-9\/12\@xl { + width: 75% !important; + } + + /** + * 1. Defensively reset any leftover or conflicting `left`/`right` values. + */ + .u-push-9\/12\@xl { + position: relative; + right: auto; + /* [1] */ + left: 75% !important; + } + + .u-pull-9\/12\@xl { + position: relative; + right: 75% !important; + left: auto; + /* [1] */ + } + + .u-10\/12\@xl { + width: 83.333333333% !important; + } + + /** + * 1. Defensively reset any leftover or conflicting `left`/`right` values. + */ + .u-push-10\/12\@xl { + position: relative; + right: auto; + /* [1] */ + left: 83.333333333% !important; + } + + .u-pull-10\/12\@xl { + position: relative; + right: 83.333333333% !important; + left: auto; + /* [1] */ + } + + .u-11\/12\@xl { + width: 91.666666667% !important; + } + + /** + * 1. Defensively reset any leftover or conflicting `left`/`right` values. + */ + .u-push-11\/12\@xl { + position: relative; + right: auto; + /* [1] */ + left: 91.666666667% !important; + } + + .u-pull-11\/12\@xl { + position: relative; + right: 91.666666667% !important; + left: auto; + /* [1] */ + } + + .u-12\/12\@xl { + width: 100% !important; + } + + /** + * 1. Defensively reset any leftover or conflicting `left`/`right` values. + */ + .u-push-12\/12\@xl { + position: relative; + right: auto; + /* [1] */ + left: 100% !important; + } + + .u-pull-12\/12\@xl { + position: relative; + right: 100% !important; + left: auto; + /* [1] */ + } +} +/* ========================================================================== + #HEADINGS + ========================================================================== */ +/** + * Redefine all of our basic heading styles against utility classes so as to + * allow for double stranded heading hierarchy, e.g. we semantically need an H2, + * but we want it to be sized like an H1: + * + *

+ * + */ +.u-h1 { + font-size: 1.375rem; + line-height: 1.090909091; +} + +.u-h2 { + font-size: 1.375rem; + line-height: 1.090909091; +} + +.u-h3 { + font-size: 1.375rem; + line-height: 1.090909091; +} + +.u-h4 { + font-size: 1.375rem; + line-height: 1.090909091; +} + +.u-h5 { + font-size: 1.375rem; + line-height: 1.090909091; +} + +.u-h6 { + font-size: 1.375rem; + line-height: 1.090909091; +} + +/* ========================================================================== + #SPACING + ========================================================================== */ +/** + * Utility classes to put specific spacing values onto elements. The below loop + * will generate us a suite of classes like: + * + * .u-margin-top {} + * .u-padding-left-large {} + * .u-margin-right-small {} + * .u-padding {} + * .u-padding-right-none {} + */ +.u-padding { + padding: 24px !important; +} + +.u-padding-tiny { + padding: 6px !important; +} + +.u-padding-small { + padding: 12px !important; +} + +.u-padding-large { + padding: 48px !important; +} + +.u-padding-huge { + padding: 96px !important; +} + +.u-padding-none { + padding: 0 !important; +} + +.u-padding-top { + padding-top: 24px !important; +} + +.u-padding-top-tiny { + padding-top: 6px !important; +} + +.u-padding-top-small { + padding-top: 12px !important; +} + +.u-padding-top-large { + padding-top: 48px !important; +} + +.u-padding-top-huge { + padding-top: 96px !important; +} + +.u-padding-top-none { + padding-top: 0 !important; +} + +.u-padding-right { + padding-right: 24px !important; +} + +.u-padding-right-tiny { + padding-right: 6px !important; +} + +.u-padding-right-small { + padding-right: 12px !important; +} + +.u-padding-right-large { + padding-right: 48px !important; +} + +.u-padding-right-huge { + padding-right: 96px !important; +} + +.u-padding-right-none { + padding-right: 0 !important; +} + +.u-padding-bottom { + padding-bottom: 24px !important; +} + +.u-padding-bottom-tiny { + padding-bottom: 6px !important; +} + +.u-padding-bottom-small { + padding-bottom: 12px !important; +} + +.u-padding-bottom-large { + padding-bottom: 48px !important; +} + +.u-padding-bottom-huge { + padding-bottom: 96px !important; +} + +.u-padding-bottom-none { + padding-bottom: 0 !important; +} + +.u-padding-left { + padding-left: 24px !important; +} + +.u-padding-left-tiny { + padding-left: 6px !important; +} + +.u-padding-left-small { + padding-left: 12px !important; +} + +.u-padding-left-large { + padding-left: 48px !important; +} + +.u-padding-left-huge { + padding-left: 96px !important; +} + +.u-padding-left-none { + padding-left: 0 !important; +} + +.u-margin { + margin: 24px !important; +} + +.u-margin-tiny { + margin: 6px !important; +} + +.u-margin-small { + margin: 12px !important; +} + +.u-margin-large { + margin: 48px !important; +} + +.u-margin-huge { + margin: 96px !important; +} + +.u-margin-none { + margin: 0 !important; +} + +.u-margin-top { + margin-top: 24px !important; +} + +.u-margin-top-tiny { + margin-top: 6px !important; +} + +.u-margin-top-small { + margin-top: 12px !important; +} + +.u-margin-top-large { + margin-top: 48px !important; +} + +.u-margin-top-huge { + margin-top: 96px !important; +} + +.u-margin-top-none { + margin-top: 0 !important; +} + +.u-margin-right { + margin-right: 24px !important; +} + +.u-margin-right-tiny { + margin-right: 6px !important; +} + +.u-margin-right-small { + margin-right: 12px !important; +} + +.u-margin-right-large { + margin-right: 48px !important; +} + +.u-margin-right-huge { + margin-right: 96px !important; +} + +.u-margin-right-none { + margin-right: 0 !important; +} + +.u-margin-bottom { + margin-bottom: 24px !important; +} + +.u-margin-bottom-tiny { + margin-bottom: 6px !important; +} + +.u-margin-bottom-small { + margin-bottom: 12px !important; +} + +.u-margin-bottom-large { + margin-bottom: 48px !important; +} + +.u-margin-bottom-huge { + margin-bottom: 96px !important; +} + +.u-margin-bottom-none { + margin-bottom: 0 !important; +} + +.u-margin-left { + margin-left: 24px !important; +} + +.u-margin-left-tiny { + margin-left: 6px !important; +} + +.u-margin-left-small { + margin-left: 12px !important; +} + +.u-margin-left-large { + margin-left: 48px !important; +} + +.u-margin-left-huge { + margin-left: 96px !important; +} + +.u-margin-left-none { + margin-left: 0 !important; +} + +/* ========================================================================== + #PRINT + ========================================================================== */ +/** + * Very crude, reset-like styles taken from the HTML5 Boilerplate: + * https://github.com/h5bp/html5-boilerplate/blob/5.3.0/dist/doc/css.md#print-styles + * https://github.com/h5bp/html5-boilerplate/blob/master/dist/css/main.css#L205-L282 + */ +@media print { + /** + * 1. Black prints faster: http://www.sanbeiji.com/archives/953 + */ + *, + *:before, + *:after, + *:first-letter, + *:first-line { + background: transparent !important; + color: #000 !important; + /* [1] */ + box-shadow: none !important; + text-shadow: none !important; + } + + a, + a:visited { + text-decoration: underline; + } + + a[href]:after { + content: " (" attr(href) ")"; + } + + abbr[title]:after { + content: " (" attr(title) ")"; + } + + /** + * Don't show links that are fragment identifiers, or use the `javascript:` + * pseudo protocol. + */ + a[href^="#"]:after, + a[href^="javascript:"]:after { + content: ""; + } + + pre, + blockquote { + border: 1px solid #999; + page-break-inside: avoid; + } + + /** + * Printing Tables: http://css-discuss.incutio.com/wiki/Printing_Tables + */ + thead { + display: table-header-group; + } + + tr, + img { + page-break-inside: avoid; + } + + img { + max-width: 100% !important; + } + + p, + h2, + h3 { + orphans: 3; + widows: 3; + } + + h2, + h3 { + page-break-after: avoid; + } +} +/* ========================================================================== + #HIDE + ========================================================================== */ +/** + * Hide only visually, but have it available for screen readers: + * http://snook.ca/archives/html_and_css/hiding-content-for-accessibility + */ +.u-hidden-visually { + border: 0 !important; + clip: rect(0 0 0 0) !important; + height: 1px !important; + margin: -1px !important; + overflow: hidden !important; + padding: 0 !important; + position: absolute !important; + width: 1px !important; +} + +/** + * Hide visually and from screen readers. + */ +.u-hidden { + display: none !important; +} + +/* ========================================================================== + #COLORS + ========================================================================== */ +/** + * Attach our colour palette to some utility classes. + */ +.u-color-pale { + color: #fff !important; +} + +.u-color-pale-bg { + background-color: #fff !important; +} + +.u-color-pale-border { + border-color: #fff !important; +} + +.u-color-primary { + color: #4a8ec2 !important; +} + +.u-color-primary-bg { + background-color: #4a8ec2 !important; +} + +.u-color-primary-border { + border-color: #4a8ec2 !important; +} + +.u-color-primary-highlight { + color: #70a6cf !important; +} + +.u-color-primary-highlight-bg { + background-color: #70a6cf !important; +} + +.u-color-primary-highlight-border { + border-color: #70a6cf !important; +} + +.u-color-primary-shadow { + color: #3774a2 !important; +} + +.u-color-primary-shadow-bg { + background-color: #3774a2 !important; +} + +.u-color-primary-shadow-border { + border-color: #3774a2 !important; +} + +.u-color-secondary { + color: #2f4054 !important; +} + +.u-color-secondary-bg { + background-color: #2f4054 !important; +} + +.u-color-secondary-border { + border-color: #2f4054 !important; +} + +.u-color-secondary-highlight { + color: #415975 !important; +} + +.u-color-secondary-highlight-bg { + background-color: #415975 !important; +} + +.u-color-secondary-highlight-border { + border-color: #415975 !important; +} + +.u-color-secondary-shadow { + color: #1d2733 !important; +} + +.u-color-secondary-shadow-bg { + background-color: #1d2733 !important; +} + +.u-color-secondary-shadow-border { + border-color: #1d2733 !important; +} + +.u-color-grey-light { + color: #868686 !important; +} + +.u-color-grey-light-bg { + background-color: #868686 !important; +} + +.u-color-grey-light-border { + border-color: #868686 !important; +} + +.u-color-grey-dark { + color: #424242 !important; +} + +.u-color-grey-dark-bg { + background-color: #424242 !important; +} + +.u-color-grey-dark-border { + border-color: #424242 !important; +} + +.c-title-huge { + font-size: 1.5rem; + line-height: 1; + font-weight: 200; +} +@media (min-width: 20em) { + .c-title-huge { + font-size: 7.5vw; + } +} +@media (min-width: 60em) { + .c-title-huge { + font-size: 4.5rem; + line-height: 1; + font-weight: 100; + } +} + +/*# sourceMappingURL=main.css.map */ diff --git a/css/main.scss b/css/main.scss new file mode 100644 index 0000000..abce6a0 --- /dev/null +++ b/css/main.scss @@ -0,0 +1,198 @@ +/* ========================================================================== + INUITCSS + ========================================================================== */ + +/*!* + * inuitcss, by @csswizardry + * + * github.com/inuitcss | inuitcss.com + */ + +/** + * This is an example inuitcss manifest file. DO NOT MODIFY THIS FILE DIRECTLY. + * Instead, copy and paste it into your own CSS directory and make additions, + * extension, and modifications there. + */ + +/** + * CONTENTS + * + * SETTINGS + * Config...............Project-level configuration and feature switches. + * Global...............Globally-available project settings. + * Colors...............Our own colour settings and mappings. + * + * TOOLS + * Functions............A small collection of useful functions. + * Mixins...............Globally-available mixins. + * Widths...............A mixin to quickly generate an arbitrary number of width + * classes for use alongside our grid system. + * Sass MQ..............Neat little wrapper for media queries. + * Aliases..............Create shorter aliases for inuitcss’ default settings. + * + * GENERIC + * Box-sizing...........Better default `box-sizing`. + * Normalize.css........A level playing field using @necolas’ Normalize.css. + * Reset................A tiny reset to complement Normalize.css. + * Shared...............Sensibly and tersely share some global commonalities + * (particularly useful when managing vertical rhythm). + * + * ELEMENTS + * Page.................Set up our document’s default `font-size` and + * `line-height`. + * Headings.............Very minimal (i.e. only font-size information) for + * headings 1 through 6. + * Images...............Base image styles. + * Tables...............Simple table styles. + * Links................Basic hyperlink styles. + * Code.................Code examples and blocks. + * + * OBJECTS + * Wrapper..............Page constraint object. + * Layout...............Generic layout module. + * Media................Image- and text-like content side by side. The + * poster-child of OOCSS. + * List-bare............Lists with no bullets or indents. + * List-inline..........A list whose items all site in a line. + * Box..................Simple boxing abstraction. + * Block................Image-on-top-of-text object. + * Ratio................A container for maintaining aspect ratio of content. + * Crop.................Provide a cropping context for media (images, etc.). + * + * COMPONENTS + * Buttons..............inuitcss-branded buttons. + * Bands................Horizontal content bands. + * Page-head............Site’s main page header. + * Page-foot............Site’s main page footer. + * Lock-up..............The logo contained in the site’s header. + * Logo.................inuitcss logo sprite. + * Avatars..............Suite of different styles of avatar. + * Bio-mini.............Miniature bios as used on the Team page. + * Nav-primary..........Site’s main nav. + * Nav-secondary........Sidebar-style navigation. + * Nav-tertiary.........Footer-style navigation. + * Pages................Page-level components. + * Code.................Styled-up pieces of code. + * + * UTILITIES + * Clearfix.............Bind our clearfix onto a utility class. + * Widths...............Simple width helper classes. + * Headings.............Reassigning our heading styles to helper classes. + * Spacing..............Nudge bits of the DOM around with these spacing + * classes. + * Print................Reset-like styles taken from the HTML5 Boilerplate. + * classes.. + * Hide.................Helper classes to hide content + * Colors...............Our colour palette against some utility classes. + */ + +// SETTINGS +@import "../node_modules/inuitcss/settings/example.settings.config"; +@import "../node_modules/inuitcss/settings/settings.global"; +@import "settings/settings.colors"; + + + + + +// TOOLS +@import "../node_modules/inuitcss/tools/tools.functions"; +@import "../node_modules/inuitcss/tools/tools.mixins"; +@import "../node_modules/inuitcss/tools/tools.widths"; + +$mq-breakpoints: ( + sm: 320px, + md: 720px, + lg: 1024px, + xl: 1440px +); +@import "../node_modules/sass-mq/mq"; +@import "tools/tools.aliases"; + + + + + +// GENERIC +@import "../node_modules/inuitcss/generic/generic.box-sizing"; +@import "../node_modules/inuitcss/generic/generic.normalize"; +@import "../node_modules/inuitcss/generic/generic.reset"; +@import "../node_modules/inuitcss/generic/generic.shared"; + + + + + +// ELEMENTS +@import "elements/elements.page"; +@import "elements/elements.headings"; +@import "../node_modules/inuitcss/elements/elements.images"; +@import "../node_modules/inuitcss/elements/elements.tables"; +@import "elements/elements.links"; +@import "elements/elements.code"; + + + + + +// OBJECTS +// +// Uncomment and add to this section as necessary. +@import "../node_modules/inuitcss/objects/objects.wrapper"; +@import "../node_modules/inuitcss/objects/objects.layout"; +@import "../node_modules/inuitcss/objects/objects.media"; +@import "../node_modules/inuitcss/objects/objects.list-bare"; +@import "../node_modules/inuitcss/objects/objects.list-inline"; +@import "../node_modules/inuitcss/objects/objects.box"; +@import "../node_modules/inuitcss/objects/objects.block"; +@import "../node_modules/inuitcss/objects/objects.ratio"; +@import "../node_modules/inuitcss/objects/objects.crop"; + + + + + +// COMPONENTS +// +// Build and include your project’s UI Compoments here. +@import "components/components.buttons"; +@import "components/components.bands"; +@import "components/components.page-head"; +@import "components/components.page-foot"; +@import "components/components.lockup"; +@import "components/components.logo"; +@import "components/components.avatars"; +@import "components/components.bio-mini"; +@import "components/components.nav-primary"; +@import "components/components.nav-secondary"; +@import "components/components.nav-tertiary"; +@import "components/components.pages"; +@import "components/components.code"; + + + + + +// UTILITIES +@import "../node_modules/inuitcss/utilities/utilities.clearfix"; +@import "utilities/utilities.widths"; +@import "../node_modules/inuitcss/utilities/utilities.headings"; +@import "../node_modules/inuitcss/utilities/utilities.spacing"; +@import "../node_modules/inuitcss/utilities/utilities.print"; +@import "../node_modules/inuitcss/utilities/utilities.hide"; +@import "utilities/utilities.colors"; + +.c-title-huge { + @include font-size(24px); + font-weight: 200; + + @include mq($from: sm) { + font-size: 7.5vw; + } + + @include mq($from: 960px) { + @include font-size(72px); + font-weight: 100; + } + +} diff --git a/css/settings/_settings.colors.scss b/css/settings/_settings.colors.scss new file mode 100644 index 0000000..fcb8b81 --- /dev/null +++ b/css/settings/_settings.colors.scss @@ -0,0 +1,53 @@ +///* ======================================================================== +// #COLORS +// ======================================================================== */ + +// Literal palette + +$color-primary: #4a8ec2; +$color-secondary: #2f4054; +$color-white: #fff; + +$colors: ( + 'pale': $color-white, + 'primary': $color-primary, + 'primary-highlight': lighten($color-primary, 10%), + 'primary-shadow': darken( $color-primary, 10%), + 'secondary': $color-secondary, + 'secondary-highlight': lighten($color-secondary, 10%), + 'secondary-shadow': darken( $color-secondary, 10%), + 'grey-light': desaturate($color-primary, 100%), + 'grey-dark': desaturate($color-secondary, 100%), +); + + +@function color($key) { + @return map-get($colors, $key); +} + + + + + +// Semantic color variables are daisy-chained onto their literal names. + +$color-link: color(primary); +$color-link-hover: color(primary-shadow); + +$color-btn: color(pale); +$color-btn-bg: color(primary); +$color-btn-hover-bg: color(primary-shadow); + +$color-btn-secondary: color(pale); +$color-btn-secondary-bg: color(secondary); +$color-btn-secondary-hover-bg: color(secondary-shadow); + +$color-btn-tertiary: color(primary); +$color-btn-tertiary-bg: color(pale); +$color-btn-tertiary-hover-bg: color(pale); + +$color-band-primary: color(pale); +$color-band-primary-bg: color(primary); + +$color-band-secondary: color(pale); +$color-band-secondary-bg: color(secondary); diff --git a/css/tools/_tools.aliases.scss b/css/tools/_tools.aliases.scss new file mode 100644 index 0000000..744efc6 --- /dev/null +++ b/css/tools/_tools.aliases.scss @@ -0,0 +1,20 @@ +///* ======================================================================== +// #ALIASES +// ======================================================================== */ + +// Remap a bunch of inuitcss’ namespaced variables and mixins onto much shorter +// ones. + +$unit: $inuit-global-spacing-unit; +$unit-tiny: $inuit-global-spacing-unit-tiny; +$unit-small: $inuit-global-spacing-unit-small; +$unit-large: $inuit-global-spacing-unit-large; +$unit-huge: $inuit-global-spacing-unit-huge; + +@mixin clearfix($args...) { + @inuit-clearfix($args...); +} + +@mixin font-size($args...) { + @include inuit-font-size($args...); +} diff --git a/css/utilities/_utilities.colors.scss b/css/utilities/_utilities.colors.scss new file mode 100644 index 0000000..808ac34 --- /dev/null +++ b/css/utilities/_utilities.colors.scss @@ -0,0 +1,23 @@ +/* ========================================================================== + #COLORS + ========================================================================== */ + +/** + * Attach our colour palette to some utility classes. + */ + +@each $key, $value in $colors { + + .u-color-#{$key} { + color: $value !important; + } + + .u-color-#{$key}-bg { + background-color: $value !important; + } + + .u-color-#{$key}-border { + border-color: $value !important; + } + +} diff --git a/css/utilities/_utilities.widths.scss b/css/utilities/_utilities.widths.scss new file mode 100644 index 0000000..3ccaf55 --- /dev/null +++ b/css/utilities/_utilities.widths.scss @@ -0,0 +1,29 @@ +/* ========================================================================== + #WIDTHS + ========================================================================== */ + +/** + * A series of width helper classes that you can use to size things like grid + * systems. Classes can take a fraction-like format (e.g. `.u-2/3`) or a spoken- + * word format (e.g. `.u-2-of-3`). Use these in your markup: + * + *
+ * + * The following will generate a 12 column grid system. + */ + +@include inuit-widths(12); + +/** + * Loop through our Sass MQ breakpoints and build a 12 column grid system for + * each of them. + */ + +@each $alias, $bp in $mq-breakpoints { + + @include mq($from: $alias) { + @include inuit-widths(12, \@#{$alias}); + } + +} + diff --git a/favicon.png b/favicon.png new file mode 100644 index 0000000..ad7b53f Binary files /dev/null and b/favicon.png differ diff --git a/feed.xml b/feed.xml new file mode 100644 index 0000000..a6628bd --- /dev/null +++ b/feed.xml @@ -0,0 +1,30 @@ +--- +layout: null +--- + + + + {{ site.title | xml_escape }} + {{ site.description | xml_escape }} + {{ site.url }}{{ site.baseurl }}/ + + {{ site.time | date_to_rfc822 }} + {{ site.time | date_to_rfc822 }} + Jekyll v{{ jekyll.version }} + {% for post in site.posts limit:10 %} + + {{ post.title | xml_escape }} + {{ post.content | xml_escape }} + {{ post.date | date_to_rfc822 }} + {{ post.url | prepend: site.baseurl | prepend: site.url }} + {{ post.url | prepend: site.baseurl | prepend: site.url }} + {% for tag in post.tags %} + {{ tag | xml_escape }} + {% endfor %} + {% for cat in post.categories %} + {{ cat | xml_escape }} + {% endfor %} + + {% endfor %} + + diff --git a/img/logo.png b/img/logo.png deleted file mode 100644 index 4e39f7f..0000000 Binary files a/img/logo.png and /dev/null differ diff --git a/index.html b/index.html index e3e513b..f558956 100644 --- a/index.html +++ b/index.html @@ -1,59 +1,89 @@ - - - - - - - inuitcss - - - - - -

- - inuitcss - coming soon… - -

- - - +--- +layout: default +page-class: c-page--home +--- + + +
+ +
+

{{ site.description }}

+
+ +
+ +
+ $ npm install --save inuitcss +
+ +
+ + +

Home

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

About

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

Docs

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

Blog

+
    + {% for post in site.posts %} +
  • + {{ post.date | date: "%b %-d, %Y" }} + + {{ post.title }} +
    • + {% endfor %} +
+ +
diff --git a/inuit.min.css b/inuit.min.css deleted file mode 100644 index c621b01..0000000 --- a/inuit.min.css +++ /dev/null @@ -1,9 +0,0 @@ -/** - * - * inuitcss.com -- @inuitcss -- @csswizardry - * - *//* normalize.css v2.1.0 | MIT License | git.io/normalize */article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden]{display:none}html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{margin:0}a:focus{outline:thin dotted}a:active,a:hover{outline:0}h1{font-size:2em;margin:0.67em 0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}mark{background:#ff0;color:#000}code,kbd,pre,samp{font-family:monospace, serif;font-size:1em}pre{white-space:pre-wrap}q{quotes:"\201C" "\201D" "\2018" "\2019"}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:0}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{border:0;padding:0}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}button,input{line-height:normal}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}*,*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;-o-box-sizing:border-box;box-sizing:border-box}h1,h2,h3,h4,h5,h6,p,blockquote,pre,dl,dd,ol,ul,form,fieldset,legend,table,th,td,caption,hr{margin:0;padding:0}abbr[title],dfn[title]{cursor:help}u,ins{text-decoration:none}ins{border-bottom:1px solid}img{font-style:italic}label,input,textarea,button,select,option{cursor:pointer}.text-input:active,.text-input:focus,textarea:active,textarea:focus{cursor:text;outline:none}.cf:after,.nav:after,.media:after,.island:after,.islet:after,.matrix:after,.multi-list:after,.stat-group:after{content:"";display:table;clear:both}h1,h2,h3,h4,h5,h6,hgroup,ul,ol,dl,blockquote,p,address,table,fieldset,figure,pre,.form-fields>li,.media,.island,.islet{margin-bottom:24px;margin-bottom:1.5rem}.islet h1,.islet h2,.islet h3,.islet h4,.islet h5,.islet h6,.islet hgroup,.islet ul,.islet ol,.islet dl,.islet blockquote,.islet p,.islet address,.islet table,.islet fieldset,.islet figure,.islet pre,.islet .form-fields>li,.islet .media,.islet .island,.islet .islet{margin-bottom:12px;margin-bottom:0.75rem}.landmark{margin-bottom:48px;margin-bottom:3rem}hr{margin-bottom:22px;margin-bottom:1.375rem}ul,ol,dd{margin-left:48px;margin-left:3rem}html{font:1em/1.5 sans-serif;overflow-y:scroll;min-height:100%}h1,.alpha{font-size:36px;font-size:2.25rem;line-height:1.33333}h2,.beta{font-size:30px;font-size:1.875rem;line-height:1.6}h3,.gamma{font-size:24px;font-size:1.5rem;line-height:1}h4,.delta{font-size:20px;font-size:1.25rem;line-height:1.2}h5,.epsilon{font-size:16px;font-size:1rem;line-height:1.5}h6,.zeta{font-size:14px;font-size:0.875rem;line-height:1.71429}hgroup .hN{margin-bottom:0}.giga{font-size:96px;font-size:6rem;line-height:1}.mega{font-size:72px;font-size:4.5rem;line-height:1}.kilo{font-size:48px;font-size:3rem;line-height:1}.lede,.lead{font-size:18px;font-size:1.125rem;line-height:1.33333}.smallprint,.milli{font-size:12px;font-size:0.75rem;line-height:2}.micro{font-size:10px;font-size:0.625rem;line-height:2.4}q{quotes:"‘" "’" "“" "”"}q:before{content:"‘";content:open-quote}q:after{content:"’";content:close-quote}q q:before{content:"“";content:open-quote}q q:after{content:"”";content:close-quote}blockquote{quotes:"“" "”"}blockquote p:before{content:"“";content:open-quote}blockquote p:after{content:"";content:no-close-quote}blockquote p:last-of-type:after{content:"”";content:close-quote}blockquote q:before{content:"‘";content:open-quote}blockquote q:after{content:"’";content:close-quote}blockquote{text-indent:-0.41em}blockquote p:last-of-type{margin-bottom:0}.source{display:block;text-indent:0}.source:before{content:"—"}pre{overflow:auto}pre mark{background:none;border-bottom:1px solid;color:inherit}.code-comment{opacity:0.75;filter:alpha(opacity=75)}.line-numbers{font-family:monospace, serif;list-style:decimal-leading-zero inside;white-space:nowrap;overflow:auto;margin-left:0}.line-numbers code{white-space:pre}img{max-width:100%}img[width],img[height]{max-width:none}.img--round{border-radius:4px}.img--right{float:right;margin-bottom:24px;margin-left:24px}.img--left{float:left;margin-right:24px;margin-bottom:24px}.img--center{display:block;margin-right:auto;margin-bottom:24px;margin-left:auto}.img--short{height:120px}.img--medium{height:240px}.img--tall{height:360px}figure>img{display:block}li>ul,li>ol{margin-bottom:0}.numbered-list{list-style-type:decimal}table{width:100%}th,td{padding:6px;text-align:left}@media screen and (min-width: 480px){th,td{padding:12px}}[colspan]{text-align:center}[colspan="1"]{text-align:left}[rowspan]{vertical-align:middle}[rowspan="1"]{vertical-align:top}.numerical{text-align:right}.t5{width:5%}.t10{width:10%}.t12{width:12.5%}.t15{width:15%}.t20{width:20%}.t25{width:25%}.t30{width:30%}.t33{width:33.333%}.t35{width:35%}.t37{width:37.5%}.t40{width:40%}.t45{width:45%}.t50{width:50%}.t55{width:55%}.t60{width:60%}.t62{width:62.5%}.t65{width:65%}.t66{width:66.666%}.t70{width:70%}.t75{width:75%}.t80{width:80%}.t85{width:85%}.t87{width:87.5%}.t90{width:90%}.t95{width:95%}.table--bordered th,.table--bordered td{border:1px solid #ccc}.table--bordered th:empty,.table--bordered td:empty{border:none}.table--bordered thead tr:last-child th{border-bottom-width:2px}.table--bordered tbody tr th:last-of-type{border-right-width:2px}.table--striped tbody tr:nth-of-type(odd){background-color:#ffc}.table--data{font:12px/1.5 sans-serif}fieldset{padding:24px}.form-fields{list-style:none;margin:0}.form-fields>li:last-child{margin-bottom:0}label,.label{display:block}.additional{display:block;font-weight:normal}.check-list{list-style:none;margin:0}.check-label,.check-list label,.check-list .label{display:inline-block}.spoken-form label{display:inline-block;font:inherit}.extra-help{display:inline-block;visibility:hidden}.text-input:active+.extra-help,.text-input:focus+.extra-help{visibility:visible}.grid{margin-left:-24px;list-style:none;margin-bottom:0}.grid>.grid{margin-left:0}.grid__item{display:inline-block;width:100%;padding-left:24px;vertical-align:top}.flexbox{display:table;width:100%}html.flexbox{display:block;width:auto}.flexbox__item{display:table-cell;vertical-align:middle}.text-cols--2,.text-cols--3,.text-cols--4,.text-cols--5{-webkit-column-gap:24px;-moz-column-gap:24px;-ms-column-gap:24px;-o-column-gap:24px;column-gap:24px}.text-cols--2{-webkit-column-count:2;-moz-column-count:2;-ms-column-count:2;-o-column-count:2;column-count:2}.text-cols--3{-webkit-column-count:3;-moz-column-count:3;-ms-column-count:3;-o-column-count:3;column-count:3}.text-cols--4{-webkit-column-count:4;-moz-column-count:4;-ms-column-count:4;-o-column-count:4;column-count:4}.text-cols--5{-webkit-column-count:5;-moz-column-count:5;-ms-column-count:5;-o-column-count:5;column-count:5}.nav{list-style:none;margin-left:0}.nav>li,.nav>li>a{display:inline-block;*display:inline;zoom:1}.nav--stacked>li{display:list-item}.nav--stacked>li>a{display:block}.nav--banner{text-align:center}.nav--block,.options{line-height:1;letter-spacing:-0.31em;word-spacing:-0.43em;white-space:nowrap}.nav--block>li,.options>li{letter-spacing:normal;word-spacing:normal}.nav--block>li>a,.options>li>a{padding:12px}.nav--fit{display:table;width:100%}.nav--fit>li{display:table-cell}.nav--fit>li>a{display:block}.nav--keywords>li:after{content:", "}.nav--keywords>li:last-child:after{display:none}.options>li>a{border:0 solid #ccc;border-width:1px;border-left-width:0}.options>li:first-child>a{border-left-width:1px;border-top-left-radius:4px;border-bottom-left-radius:4px}.options>li:last-child>a{border-top-right-radius:4px;border-bottom-right-radius:4px}.pagination{text-align:center;letter-spacing:-0.31em;word-spacing:-0.43em}.pagination>li{padding:12px;letter-spacing:normal;word-spacing:normal}.pagination>li>a{padding:12px;margin:-12px}.pagination__first a:before{content:"« "}.pagination__last a:after{content:" »"}.breadcrumb>li+li:before{content:"» "}.breadcrumb--path>li+li:before{content:"/ "}.breadcrumb>li+li[data-breadcrumb]:before{content:attr(data-breadcrumb) " "}.breadcrumb__root{font-weight:bold}.media{display:block}.media__img{float:left;margin-right:24px}.media__img--rev{float:right;margin-left:24px}.media__img img,.media__img--rev img{display:block}.media__body{overflow:hidden}.media__body,.media__body>:last-child{margin-bottom:0}.islet .media__img{margin-right:12px}.islet .media__img--rev{margin-left:12px}.marginalia{font-size:12px;font-size:0.75rem;line-height:2}@media (min-width: 1024px){.marginalia{position:relative}.marginalia__body,.marginalia__body--right{position:absolute}.marginalia__body{right:100%;padding-right:24px;text-align:right}.marginalia__body--right{left:100%;padding-left:24px;text-align:left}}.island,.islet{display:block}.island{padding:24px}.island>:last-child,.islet>:last-child{margin-bottom:0}.islet{padding:12px}.block-list,.matrix,.block-list>li,.matrix>li{border:0 solid #ccc}.block-list,.matrix{list-style:none;margin-left:0;border-top-width:1px}.block-list>li,.matrix>li{border-bottom-width:1px;padding:12px}.block-list__link,.matrix__link{display:block;padding:12px;margin:-12px}.matrix{border-left-width:1px}.matrix>li{float:left;border-right-width:1px}.multi-list{list-style:none;margin-left:0}.multi-list>li{float:left}.two-cols>li{width:50%}.three-cols>li{width:33.333%}.four-cols>li{width:25%}.five-cols>li{width:20%}.matrix>.all-cols,.multi-list>.all-cols{width:100%}.split{text-align:right;list-style:none;margin-left:0}.split__title{text-align:left;float:left;clear:left}.this-or-this{display:table;width:100%;text-align:center}.this-or-this__this,.this-or-this__or{display:table-cell;vertical-align:middle}.link-complex,.link-complex:hover,.link-complex:active,.link-complex:focus{text-decoration:none}.link-complex:hover .link-complex__target,.link-complex:active .link-complex__target,.link-complex:focus .link-complex__target{text-decoration:underline}.flyout,.flyout--alt{position:relative;overflow:hidden}.flyout__content{position:absolute;top:100%;left:-99999px}.flyout:hover,.flyout--alt:hover{overflow:visible}.flyout:hover>.flyout__content{left:0}.flyout--alt:hover>.flyout__content{top:0;left:100%}.sprite,.icon{display:inline-block;line-height:1;position:relative;vertical-align:middle;zoom:1;font-style:normal;font-weight:normal;text-align:center}.sprite{width:16px;height:16px;top:-1px;overflow:hidden;*text-indent:-9999px}.sprite:before{content:"";display:block;width:0;height:100%}.icon{font-size:16px;width:1em;height:1em}.icon:before{content:attr(data-icon)}.i--large{font-size:32px}.i--huge{font-size:64px}.i--natural{font-size:inherit}.icon-text>.icon-text__icon{margin-right:6px}.icon-text--rev>.icon-text__icon{margin-left:6px}/** - * - * @csswizardry -- csswizardry.com/beautons - * - */.btn{display:inline-block;vertical-align:middle;white-space:nowrap;font-family:inherit;font-size:100%;cursor:pointer;border:none;margin:0;padding-top:0;padding-bottom:0;line-height:3;padding-right:1em;padding-left:1em;border-radius:4px}.btn,.btn:hover{text-decoration:none}.btn:active,.btn:focus{outline:none}.btn--small{padding-right:0.5em;padding-left:0.5em;line-height:2}.btn--large{padding-right:1.5em;padding-left:1.5em;line-height:4}.btn--huge{padding-right:2em;padding-left:2em;line-height:5}.btn--full{width:100%;padding-right:0;padding-left:0;text-align:center}.btn--alpha{font-size:3rem}.btn--beta{font-size:2rem}.btn--gamma{font-size:1rem}.btn--natural{vertical-align:baseline;font-size:inherit;line-height:inherit;padding-right:0.5em;padding-left:0.5em}.btn--positive{background-color:#4A993E;color:#fff}.btn--negative{background-color:#b33630;color:#fff}.btn--inactive,.btn--inactive:hover,.btn--inactive:active,.btn--inactive:focus{background-color:#ddd;color:#777;cursor:text}.btn--soft{border-radius:200px}.btn--hard{border-radius:0}.pill,.loz{display:inline-block;min-width:1.0em;padding-right:0.25em;padding-left:0.25em;text-align:center;background-color:#ccc;color:#fff;border-radius:100px}.loz{border-radius:4px}.rule{color:#ccc;border:none;border-bottom-width:1px;border-bottom-style:solid;margin-bottom:23px;margin-bottom:1.4375rem}.rule--dotted{border-bottom-style:dotted}.rule--dashed{border-bottom-style:dashed}.rule--ornament{position:relative}.rule--ornament:after{content:"§";position:absolute;top:0;right:0;left:0;line-height:0;text-align:center}.rule--ornament[data-ornament]:after{content:attr(data-ornament)}.stat-group{margin-left:-24px}.stat{float:left;margin-left:24px;display:-ms-flexbox;display:-webkit-flex;display:-moz-flex;display:flex;-webkit-flex-direction:column;-moz-flex-direction:column;-ms-flex-direction:column;-o-flex-direction:column;flex-direction:column}.stat__title{-webkit-order:2;-moz-order:2;-ms-order:2;-o-order:2;order:2;-ms-flex-order:2}.stat__value{margin-left:0;-webkit-order:1;-moz-order:1;-ms-order:1;-o-order:1;order:1;-ms-flex-order:1}.greybox,.graybox{font-size:12px;font-size:0.75rem;line-height:2;font-family:sans-serif;text-align:center;background-color:rgba(0,0,0,0.2);color:#fff}.greybox a,.graybox a{color:#fff;text-decoration:underline}.greybox--small,.graybox--small{line-height:48px}.greybox--medium,.graybox--medium{line-height:96px}.greybox--large,.graybox--large{line-height:192px}.greybox--huge,.graybox--huge{line-height:384px}.greybox--gigantic,.graybox--gigantic{line-height:768px}.one-whole{width:100%}.one-half,.two-quarters,.three-sixths,.four-eighths,.five-tenths,.six-twelfths{width:50%}.one-third,.two-sixths,.four-twelfths{width:33.333%}.two-thirds,.four-sixths,.eight-twelfths{width:66.666%}.one-quarter,.two-eighths,.three-twelfths{width:25%}.three-quarters,.six-eighths,.nine-twelfths{width:75%}.one-fifth,.two-tenths{width:20%}.two-fifths,.four-tenths{width:40%}.three-fifths,.six-tenths{width:60%}.four-fifths,.eight-tenths{width:80%}.one-sixth,.two-twelfths{width:16.666%}.five-sixths,.ten-twelfths{width:83.333%}.one-eighth{width:12.5%}.three-eighths{width:37.5%}.five-eighths{width:62.5%}.seven-eighths{width:87.5%}.one-tenth{width:10%}.three-tenths{width:30%}.seven-tenths{width:70%}.nine-tenths{width:90%}.one-twelfth{width:8.333%}.five-twelfths{width:41.666%}.seven-twelfths{width:58.333%}.eleven-twelfths{width:91.666%}@media only screen and (max-width: 480px){.palm-one-whole{width:100%}.palm-one-half,.palm-two-quarters,.palm-three-sixths,.palm-four-eighths,.palm-five-tenths,.palm-six-twelfths{width:50%}.palm-one-third,.palm-two-sixths,.palm-four-twelfths{width:33.333%}.palm-two-thirds,.palm-four-sixths,.palm-eight-twelfths{width:66.666%}.palm-one-quarter,.palm-two-eighths,.palm-three-twelfths{width:25%}.palm-three-quarters,.palm-six-eighths,.palm-nine-twelfths{width:75%}.palm-one-fifth,.palm-two-tenths{width:20%}.palm-two-fifths,.palm-four-tenths{width:40%}.palm-three-fifths,.palm-six-tenths{width:60%}.palm-four-fifths,.palm-eight-tenths{width:80%}.palm-one-sixth,.palm-two-twelfths{width:16.666%}.palm-five-sixths,.palm-ten-twelfths{width:83.333%}.palm-one-eighth{width:12.5%}.palm-three-eighths{width:37.5%}.palm-five-eighths{width:62.5%}.palm-seven-eighths{width:87.5%}.palm-one-tenth{width:10%}.palm-three-tenths{width:30%}.palm-seven-tenths{width:70%}.palm-nine-tenths{width:90%}.palm-one-twelfth{width:8.333%}.palm-five-twelfths{width:41.666%}.palm-seven-twelfths{width:58.333%}.palm-eleven-twelfths{width:91.666%}}@media only screen and (min-width: 481px) and (max-width: 1023px){.lap-one-whole{width:100%}.lap-one-half,.lap-two-quarters,.lap-three-sixths,.lap-four-eighths,.lap-five-tenths,.lap-six-twelfths{width:50%}.lap-one-third,.lap-two-sixths,.lap-four-twelfths{width:33.333%}.lap-two-thirds,.lap-four-sixths,.lap-eight-twelfths{width:66.666%}.lap-one-quarter,.lap-two-eighths,.lap-three-twelfths{width:25%}.lap-three-quarters,.lap-six-eighths,.lap-nine-twelfths{width:75%}.lap-one-fifth,.lap-two-tenths{width:20%}.lap-two-fifths,.lap-four-tenths{width:40%}.lap-three-fifths,.lap-six-tenths{width:60%}.lap-four-fifths,.lap-eight-tenths{width:80%}.lap-one-sixth,.lap-two-twelfths{width:16.666%}.lap-five-sixths,.lap-ten-twelfths{width:83.333%}.lap-one-eighth{width:12.5%}.lap-three-eighths{width:37.5%}.lap-five-eighths{width:62.5%}.lap-seven-eighths{width:87.5%}.lap-one-tenth{width:10%}.lap-three-tenths{width:30%}.lap-seven-tenths{width:70%}.lap-nine-tenths{width:90%}.lap-one-twelfth{width:8.333%}.lap-five-twelfths{width:41.666%}.lap-seven-twelfths{width:58.333%}.lap-eleven-twelfths{width:91.666%}}@media only screen and (min-width: 481px){.lap-and-up-one-whole{width:100%}.lap-and-up-one-half,.lap-and-up-two-quarters,.lap-and-up-three-sixths,.lap-and-up-four-eighths,.lap-and-up-five-tenths,.lap-and-up-six-twelfths{width:50%}.lap-and-up-one-third,.lap-and-up-two-sixths,.lap-and-up-four-twelfths{width:33.333%}.lap-and-up-two-thirds,.lap-and-up-four-sixths,.lap-and-up-eight-twelfths{width:66.666%}.lap-and-up-one-quarter,.lap-and-up-two-eighths,.lap-and-up-three-twelfths{width:25%}.lap-and-up-three-quarters,.lap-and-up-six-eighths,.lap-and-up-nine-twelfths{width:75%}.lap-and-up-one-fifth,.lap-and-up-two-tenths{width:20%}.lap-and-up-two-fifths,.lap-and-up-four-tenths{width:40%}.lap-and-up-three-fifths,.lap-and-up-six-tenths{width:60%}.lap-and-up-four-fifths,.lap-and-up-eight-tenths{width:80%}.lap-and-up-one-sixth,.lap-and-up-two-twelfths{width:16.666%}.lap-and-up-five-sixths,.lap-and-up-ten-twelfths{width:83.333%}.lap-and-up-one-eighth{width:12.5%}.lap-and-up-three-eighths{width:37.5%}.lap-and-up-five-eighths{width:62.5%}.lap-and-up-seven-eighths{width:87.5%}.lap-and-up-one-tenth{width:10%}.lap-and-up-three-tenths{width:30%}.lap-and-up-seven-tenths{width:70%}.lap-and-up-nine-tenths{width:90%}.lap-and-up-one-twelfth{width:8.333%}.lap-and-up-five-twelfths{width:41.666%}.lap-and-up-seven-twelfths{width:58.333%}.lap-and-up-eleven-twelfths{width:91.666%}}@media only screen and (max-width: 1023px){.portable-one-whole{width:100%}.portable-one-half,.portable-two-quarters,.portable-three-sixths,.portable-four-eighths,.portable-five-tenths,.portable-six-twelfths{width:50%}.portable-one-third,.portable-two-sixths,.portable-four-twelfths{width:33.333%}.portable-two-thirds,.portable-four-sixths,.portable-eight-twelfths{width:66.666%}.portable-one-quarter,.portable-two-eighths,.portable-three-twelfths{width:25%}.portable-three-quarters,.portable-six-eighths,.portable-nine-twelfths{width:75%}.portable-one-fifth,.portable-two-tenths{width:20%}.portable-two-fifths,.portable-four-tenths{width:40%}.portable-three-fifths,.portable-six-tenths{width:60%}.portable-four-fifths,.portable-eight-tenths{width:80%}.portable-one-sixth,.portable-two-twelfths{width:16.666%}.portable-five-sixths,.portable-ten-twelfths{width:83.333%}.portable-one-eighth{width:12.5%}.portable-three-eighths{width:37.5%}.portable-five-eighths{width:62.5%}.portable-seven-eighths{width:87.5%}.portable-one-tenth{width:10%}.portable-three-tenths{width:30%}.portable-seven-tenths{width:70%}.portable-nine-tenths{width:90%}.portable-one-twelfth{width:8.333%}.portable-five-twelfths{width:41.666%}.portable-seven-twelfths{width:58.333%}.portable-eleven-twelfths{width:91.666%}}@media only screen and (min-width: 1024px){.desk-one-whole{width:100%}.desk-one-half,.desk-two-quarters,.desk-three-sixths,.desk-four-eighths,.desk-five-tenths,.desk-six-twelfths{width:50%}.desk-one-third,.desk-two-sixths,.desk-four-twelfths{width:33.333%}.desk-two-thirds,.desk-four-sixths,.desk-eight-twelfths{width:66.666%}.desk-one-quarter,.desk-two-eighths,.desk-three-twelfths{width:25%}.desk-three-quarters,.desk-six-eighths,.desk-nine-twelfths{width:75%}.desk-one-fifth,.desk-two-tenths{width:20%}.desk-two-fifths,.desk-four-tenths{width:40%}.desk-three-fifths,.desk-six-tenths{width:60%}.desk-four-fifths,.desk-eight-tenths{width:80%}.desk-one-sixth,.desk-two-twelfths{width:16.666%}.desk-five-sixths,.desk-ten-twelfths{width:83.333%}.desk-one-eighth{width:12.5%}.desk-three-eighths{width:37.5%}.desk-five-eighths{width:62.5%}.desk-seven-eighths{width:87.5%}.desk-one-tenth{width:10%}.desk-three-tenths{width:30%}.desk-seven-tenths{width:70%}.desk-nine-tenths{width:90%}.desk-one-twelfth{width:8.333%}.desk-five-twelfths{width:41.666%}.desk-seven-twelfths{width:58.333%}.desk-eleven-twelfths{width:91.666%}}.brand{font-family:"Helvetica Neue",sans-serif!important;color:#4a8ec2!important}.brand-face{font-family:"Helvetica Neue",sans-serif!important}.brand-color,.brand-colour{color:#4a8ec2!important}.float--right{float:right!important}.float--left{float:left !important}.float--none{float:none !important}.text--left{text-align:left !important}.text--center{text-align:center!important}.text--right{text-align:right !important}.weight--light{font-weight:300!important}.weight--normal{font-weight:400!important}.weight--semibold{font-weight:600!important}.push{margin:24px !important}.push--top{margin-top:24px !important}.push--right{margin-right:24px !important}.push--bottom{margin-bottom:24px !important}.push--left{margin-left:24px !important}.push--ends{margin-top:24px !important;margin-bottom:24px !important}.push--sides{margin-right:24px !important;margin-left:24px !important}.push-half{margin:12px !important}.push-half--top{margin-top:12px !important}.push-half--right{margin-right:12px !important}.push-half--bottom{margin-bottom:12px !important}.push-half--left{margin-left:12px !important}.push-half--ends{margin-top:12px !important;margin-bottom:12px !important}.push-half--sides{margin-right:12px !important;margin-left:12px !important}.flush{margin:0!important}.flush--top{margin-top:0!important}.flush--right{margin-right:0!important}.flush--bottom{margin-bottom:0!important}.flush--left{margin-left:0!important}.flush--ends{margin-top:0!important;margin-bottom:0!important}.flush--sides{margin-right:0!important;margin-left:0!important}.soft{padding:24px !important}.soft--top{padding-top:24px !important}.soft--right{padding-right:24px !important}.soft--bottom{padding-bottom:24px !important}.soft--left{padding-left:24px !important}.soft--ends{padding-top:24px !important;padding-bottom:24px !important}.soft--sides{padding-right:24px !important;padding-left:24px !important}.soft-half{padding:12px !important}.soft-half--top{padding-top:12px !important}.soft-half--right{padding-right:12px !important}.soft-half--bottom{padding-bottom:12px !important}.soft-half--left{padding-left:12px !important}.soft-half--ends{padding-top:12px !important;padding-bottom:12px !important}.soft-half--sides{padding-right:12px !important;padding-left:12px !important}.hard{padding:0!important}.hard--top{padding-top:0!important}.hard--right{padding-right:0!important}.hard--bottom{padding-bottom:0!important}.hard--left{padding-left:0!important}.hard--ends{padding-top:0!important;padding-bottom:0!important}.hard--sides{padding-right:0!important;padding-left:0!important}.full-bleed{margin-right:-24px !important;margin-left:-24px !important}.islet .full-bleed{margin-right:-12px !important;margin-left:-12px !important}.informative{cursor:help!important}.muted{opacity:0.5!important;filter:alpha(opacity=50) !important}.proceed{text-align:right!important}.go:after{content:"\00A0»"!important}.caps{text-transform:uppercase!important}.accessibility,.visuallyhidden{border:0!important;clip:rect(0 0 0 0) !important;height:1px!important;margin:-1px !important;overflow:hidden!important;padding:0!important;position:absolute!important;width:1px!important}@media only screen and (max-width: 480px){.accessibility--palm,.visuallyhidden--palm{border:0!important;clip:rect(0 0 0 0) !important;height:1px!important;margin:-1px !important;overflow:hidden!important;padding:0!important;position:absolute!important;width:1px!important}}@media only screen and (min-width: 481px) and (max-width: 1023px){.accessibility--lap,.visuallyhidden--lap{border:0!important;clip:rect(0 0 0 0) !important;height:1px!important;margin:-1px !important;overflow:hidden!important;padding:0!important;position:absolute!important;width:1px!important}}@media only screen and (min-width: 481px){.accessibility--lap-and-up,.visuallyhidden--lap-and-up{border:0!important;clip:rect(0 0 0 0) !important;height:1px!important;margin:-1px !important;overflow:hidden!important;padding:0!important;position:absolute!important;width:1px!important}}@media only screen and (max-width: 1023px){.accessibility--portable,.visuallyhidden--portable{border:0!important;clip:rect(0 0 0 0) !important;height:1px!important;margin:-1px !important;overflow:hidden!important;padding:0!important;position:absolute!important;width:1px!important}}@media only screen and (min-width: 1024px){.accessibility--desk,.visuallyhidden--desk{border:0!important;clip:rect(0 0 0 0) !important;height:1px!important;margin:-1px !important;overflow:hidden!important;padding:0!important;position:absolute!important;width:1px!important}}@media only screen and (min-width: 1200px){.accessibility--desk-wide,.visuallyhidden--desk-wide{border:0!important;clip:rect(0 0 0 0) !important;height:1px!important;margin:-1px !important;overflow:hidden!important;padding:0!important;position:absolute!important;width:1px!important}} diff --git a/package.json b/package.json new file mode 100644 index 0000000..ecd68e1 --- /dev/null +++ b/package.json @@ -0,0 +1,28 @@ +{ + "name": "inuitcss.com", + "version": "0.1.0", + "description": "inuitcss documentation site", + "main": "n/a", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/inuitcss/inuitcss.github.io.git" + }, + "keywords": [ + "inuitcss", + "documentation", + "docs" + ], + "author": "Harry Roberts ", + "license": "Apache-2.0", + "bugs": { + "url": "https://github.com/inuitcss/inuitcss.github.io/issues" + }, + "homepage": "https://github.com/inuitcss/inuitcss.github.io#readme", + "dependencies": { + "inuitcss": "latest", + "sass-mq": "^3.2.9" + } +}