From 0cb9c8883f33c468cc6cf457dece4d4171fc2c06 Mon Sep 17 00:00:00 2001 From: Dan Matthew <111794+danielmatthew@users.noreply.github.com> Date: Sun, 1 Nov 2026 10:42:45 +0000 Subject: [PATCH] chore: remove cruft --- .budget.json | 31 - .circleci/config.yml | 0 .github/workflow/lighthouse-ci.yaml | 22 - .travis.yml | 25 - _drafts/2014-01-24-binary-trees.md | 7 - _drafts/2015-04-08-naming-things.md | 13 - _drafts/2015-12-11-vertical-alignment.md | 4 - ...6-02-01-performance-testing-grunt-yslow.md | 31 - ...16-02-25-add-images-to-github-repo-wiki.md | 4 - _drafts/2016-03-09-fizzbuzz.md | 40 - _drafts/big-o-notation.md | 32 - _drafts/calculating-size.md | 21 - _drafts/cssmthodologies.md | 17 - cypress.json | 3 - cypress/fixtures/example.json | 5 - cypress/fixtures/profile.json | 5 - cypress/fixtures/users.json | 232 -- cypress/integration/home_page.spec.js | 11 - cypress/plugins/index.js | 21 - cypress/support/commands.js | 25 - cypress/support/index.js | 20 - husky.config.js | 6 - package.json | 13 +- public/sass/_badges.scss | 42 - public/sass/_forms.scss | 90 - public/sass/_masthead.scss | 30 - public/sass/_navigation.scss | 346 --- public/sass/_pagination.scss | 50 - public/sass/_parallax.scss | 31 - public/sass/_themes.scss | 102 - public/sass/_variables.scss | 43 - public/sass/c.scss | 2331 ----------------- public/sass/poole.scss | 382 --- public/sass/styles.scss | 7 - public/sass/syntax.scss | 66 - src/404.md | 17 - src/_data/global.js | 9 - src/_data/helpers.js | 10 - src/_data/navigation.json | 9 - src/_data/site.json | 15 - src/_data/styleguide.js | 28 - src/_data/tokens.json | 26 - src/admin.njk | 25 - src/archive.md | 4 - src/css/splash.css | 72 - src/index.md | 9 - src/robots.txt | 0 src/scss/_config.scss | 182 -- src/scss/_theme.scss | 52 - src/scss/_tokens.scss | 34 - src/scss/_typography.scss | 39 - src/scss/components/_button.scss | 31 - src/scss/components/_form.scss | 88 - src/scss/components/_heading-permalink.scss | 11 - src/scss/components/_intro.scss | 23 - src/scss/components/_nav.scss | 34 - src/scss/components/_pagination.scss | 29 - src/scss/components/_post-list.scss | 17 - src/scss/components/_post.scss | 141 - src/scss/components/_site-foot.scss | 18 - src/scss/components/_site-head.scss | 7 - src/scss/components/_skip-link.scss | 18 - src/scss/components/_syntax-highlighting.scss | 145 - src/scss/components/_video-player.scss | 23 - src/scss/global.scss | 84 - src/scss/mixins/_dark-mode.scss | 21 - src/scss/splash.scss | 89 - src/scss/utilities/_inner-wrapper.scss | 7 - src/scss/utilities/_visually-hidden.scss | 12 - src/scss/utilities/_wrapper.scss | 7 - src/service-worker.njk | 5 - src/styleguide.njk | 149 -- src/tags.njk | 35 - src/utils/minify.js | 3 - 74 files changed, 3 insertions(+), 5633 deletions(-) delete mode 100644 .budget.json delete mode 100644 .circleci/config.yml delete mode 100644 .github/workflow/lighthouse-ci.yaml delete mode 100644 .travis.yml delete mode 100644 _drafts/2014-01-24-binary-trees.md delete mode 100644 _drafts/2015-04-08-naming-things.md delete mode 100644 _drafts/2015-12-11-vertical-alignment.md delete mode 100644 _drafts/2016-02-01-performance-testing-grunt-yslow.md delete mode 100644 _drafts/2016-02-25-add-images-to-github-repo-wiki.md delete mode 100644 _drafts/2016-03-09-fizzbuzz.md delete mode 100644 _drafts/big-o-notation.md delete mode 100644 _drafts/calculating-size.md delete mode 100644 _drafts/cssmthodologies.md delete mode 100644 cypress.json delete mode 100644 cypress/fixtures/example.json delete mode 100644 cypress/fixtures/profile.json delete mode 100644 cypress/fixtures/users.json delete mode 100644 cypress/integration/home_page.spec.js delete mode 100644 cypress/plugins/index.js delete mode 100644 cypress/support/commands.js delete mode 100644 cypress/support/index.js delete mode 100644 husky.config.js delete mode 100644 public/sass/_badges.scss delete mode 100644 public/sass/_forms.scss delete mode 100644 public/sass/_masthead.scss delete mode 100644 public/sass/_navigation.scss delete mode 100644 public/sass/_pagination.scss delete mode 100644 public/sass/_parallax.scss delete mode 100644 public/sass/_themes.scss delete mode 100644 public/sass/_variables.scss delete mode 100644 public/sass/c.scss delete mode 100644 public/sass/poole.scss delete mode 100644 public/sass/styles.scss delete mode 100644 public/sass/syntax.scss delete mode 100644 src/404.md delete mode 100644 src/_data/global.js delete mode 100644 src/_data/helpers.js delete mode 100644 src/_data/navigation.json delete mode 100644 src/_data/site.json delete mode 100644 src/_data/styleguide.js delete mode 100644 src/_data/tokens.json delete mode 100644 src/admin.njk delete mode 100644 src/archive.md delete mode 100644 src/css/splash.css delete mode 100644 src/index.md delete mode 100644 src/robots.txt delete mode 100644 src/scss/_config.scss delete mode 100644 src/scss/_theme.scss delete mode 100644 src/scss/_tokens.scss delete mode 100644 src/scss/_typography.scss delete mode 100644 src/scss/components/_button.scss delete mode 100644 src/scss/components/_form.scss delete mode 100644 src/scss/components/_heading-permalink.scss delete mode 100644 src/scss/components/_intro.scss delete mode 100644 src/scss/components/_nav.scss delete mode 100644 src/scss/components/_pagination.scss delete mode 100644 src/scss/components/_post-list.scss delete mode 100644 src/scss/components/_post.scss delete mode 100644 src/scss/components/_site-foot.scss delete mode 100644 src/scss/components/_site-head.scss delete mode 100644 src/scss/components/_skip-link.scss delete mode 100644 src/scss/components/_syntax-highlighting.scss delete mode 100644 src/scss/components/_video-player.scss delete mode 100644 src/scss/global.scss delete mode 100644 src/scss/mixins/_dark-mode.scss delete mode 100644 src/scss/splash.scss delete mode 100644 src/scss/utilities/_inner-wrapper.scss delete mode 100644 src/scss/utilities/_visually-hidden.scss delete mode 100644 src/scss/utilities/_wrapper.scss delete mode 100644 src/service-worker.njk delete mode 100644 src/styleguide.njk delete mode 100644 src/tags.njk delete mode 100644 src/utils/minify.js diff --git a/.budget.json b/.budget.json deleted file mode 100644 index c7b7d5a..0000000 --- a/.budget.json +++ /dev/null @@ -1,31 +0,0 @@ -[ - { - "path": "/*", - "timings": [ - { - "metric": "interactive", - "budget": 3000 - }, - { - "metric": "first-meaningful-paint", - "budget": 1000 - } - ], - "resourceSizes": [ - { - "resourceType": "script", - "budget": 125 - }, - { - "resourceType": "total", - "budget": 300 - } - ], - "resourceCounts": [ - { - "resourceType": "third-party", - "budget": 10 - } - ] - } -] diff --git a/.circleci/config.yml b/.circleci/config.yml deleted file mode 100644 index e69de29..0000000 diff --git a/.github/workflow/lighthouse-ci.yaml b/.github/workflow/lighthouse-ci.yaml deleted file mode 100644 index ae04597..0000000 --- a/.github/workflow/lighthouse-ci.yaml +++ /dev/null @@ -1,22 +0,0 @@ -# .github/workflow/lighthouse-ci.yaml -name: lighthouse -on: [push] -jobs: - ci: - runs-on: ubuntu-latest - steps: - - name: Checkout code - uses: actions/checkout@v2 - with: - token: ${{ secrets.PAT }} - - - name: Build site - run: eleventy - - - name: Use Node - uses: actions/setup-node@v2 - with: - node-version: 15.x - - - name: Run Lighthouse CI - run: lhci autorun diff --git a/.travis.yml b/.travis.yml deleted file mode 100644 index bb4e3b3..0000000 --- a/.travis.yml +++ /dev/null @@ -1,25 +0,0 @@ -if: tag IS blank -os: linux -dist: xenial -language: node_js -node_js: - - "node" -cache: - npm: true - directories: - - ~/.cache -script: - - npx netlify build - - npx netlify deploy --alias $TRAVIS_JOB_ID - - CYPRESS_BASE_URL=https://$TRAVIS_JOB_ID--danmatthew.netlify.app npx cypress run --headless -deploy: - cleanup: false - provider: netlify - site: $NETLIFY_SITE_ID - auth: $NETLIFY_AUTH_TOKEN - prod: true - edge: true - on: - branch: main -after_deploy: - - npx semantic-release diff --git a/_drafts/2014-01-24-binary-trees.md b/_drafts/2014-01-24-binary-trees.md deleted file mode 100644 index 5b6a77f..0000000 --- a/_drafts/2014-01-24-binary-trees.md +++ /dev/null @@ -1,7 +0,0 @@ ---- -layout: post -title: Binary Trees ---- -*This is one of a series based around the mastery of core Computer Science concepts - please read for the skinny.* - -A binary tree is a tree data structure in which each node has at most two children. The degree of such a tree cannot be greater than two. Binary trees are used to implement binary search trees and binary heaps, and are used for efficient searching and sorting: unlike a linked list where you must follow the nodes until the result is found, a binary tree allows one to halve the numbers of nodes that must be considered on each search iteration. \ No newline at end of file diff --git a/_drafts/2015-04-08-naming-things.md b/_drafts/2015-04-08-naming-things.md deleted file mode 100644 index bf13ffd..0000000 --- a/_drafts/2015-04-08-naming-things.md +++ /dev/null @@ -1,13 +0,0 @@ ---- -title: Naming Things Is Hard -layout: post ---- - -A popular Computer Science joke goes like this: - -> There are only two hard things in Computer Science: -> 1) Naming things - -I've recently been working on a responsive redesign for a client, and found that a common problem is not how to write the CSS to style an element, but what to name the colour variable, the Sass partial, or the reusable code block. I've found myself wringing my hands trying to think of something that's both generic but still informative. What makes sense and sounds useful at the start of a project can quickly cause one to become backed into a corner. Technical debt acrues as you continue to put off renaming `.home-product-category` to `.product-category`, or `$text-colour` as `$sky-blue`. - -http://davidwalsh.name/sass-color-variables-dont-suck \ No newline at end of file diff --git a/_drafts/2015-12-11-vertical-alignment.md b/_drafts/2015-12-11-vertical-alignment.md deleted file mode 100644 index 016ff9b..0000000 --- a/_drafts/2015-12-11-vertical-alignment.md +++ /dev/null @@ -1,4 +0,0 @@ ---- -title: Vertical Alignment -layout: post ---- diff --git a/_drafts/2016-02-01-performance-testing-grunt-yslow.md b/_drafts/2016-02-01-performance-testing-grunt-yslow.md deleted file mode 100644 index 2a9ff9e..0000000 --- a/_drafts/2016-02-01-performance-testing-grunt-yslow.md +++ /dev/null @@ -1,31 +0,0 @@ ---- -title: Working with grunt-yslow -layout: post ---- - -```bash -chmod +x yslow.js - -npm install phantomjs@1.8.2-3 -g - - -phantomjs yslow.js danmatthew.co.uk - -{"v":"3.1.8","w":70566,"o":95,"u":"http%3A%2F%2Fwww.danmatthew.co.uk%2F","r":6,"i":"ydefault","lt":1265,"g":{"ynumreq":{"score":100,"message":"","components":[]},"ycdn":{"score":80,"message":"There are 2 static components that are not on CDN.

You can specify CDN hostnames in your preferences. See YSlow FAQ for details.

","components":["www.danmatthew.co.uk%3A%202%20components%2C%2017.3K%20(17.3K%20GZip)"]},"yemptysrc":{"score":100,"message":"","components":[]},"yexpires":{"score":67,"message":"There are 3 static components without a far-future expiration date.","components":["http%3A%2F%2Fwww.danmatthew.co.uk%2Fpublic%2Fcss%2Fstyles.css%3F18102015","http%3A%2F%2Fwww.danmatthew.co.uk%2Fpublic%2Fjs%2Fmain.js","http%3A%2F%2Fwww.danmatthew.co.uk%2Fpublic%2Ffavicon.ico"]},"ycompress":{"score":100,"message":"","components":[]},"ycsstop":{"score":100,"message":"","components":[]},"yjsbottom":{"score":100,"message":"","components":[]},"yexpressions":{"score":100,"message":"","components":[]},"yexternal":{"message":"Only consider this if your property is a common user home page.","components":[]},"ydns":{"score":100,"message":"","components":["www.danmatthew.co.uk%3A%204%20components%2C%2066.8K%20(66.4K%20GZip)","static.jsbin.com%3A%201%20component%2C%203.6K%20(3.6K%20GZip)","jsbin.com%3A%201%20component%2C%200.0K"]},"yminify":{"score":90,"message":"There is 1 component that can be minified","components":["http%3A%2F%2Fwww.danmatthew.co.uk%2Fpublic%2Fjs%2Fmain.js"]},"yredirects":{"score":100,"message":"","components":[]},"ydupes":{"score":100,"message":"","components":[]},"yetags":{"score":100,"message":"","components":[]},"yxhr":{"score":100,"message":"","components":[]},"yxhrmethod":{"score":100,"message":"","components":[]},"ymindom":{"score":79,"message":"There are 1271 DOM elements on the page","components":[]},"yno404":{"score":100,"message":"","components":[]},"ymincookie":{"score":100,"message":"","components":[]},"ycookiefree":{"score":100,"message":"","components":[]},"ynofilter":{"score":100,"message":"","components":[]},"yimgnoscale":{"score":100,"message":"","components":[]},"yfavicon":{"score":95,"message":"Favicon is not cacheable","components":[]}},"w_c":0,"r_c":5,"stats":{"doc":{"r":1,"w":49078},"css":{"r":1,"w":17125},"js":{"r":2,"w":3918},"favicon":{"r":1,"w":445},"iframe":{"r":1,"w":0}},"stats_c":{"doc":{"r":1,"w":0},"css":{"r":1,"w":0},"js":{"r":1,"w":0},"favicon":{"r":1,"w":0},"iframe":{"r":1,"w":0}},"comps":[{"type":"doc","url":"http%3A%2F%2Fwww.danmatthew.co.uk%2F","size":49013,"resp":522,"gzip":49078,"expires":"2016/2/1","headers":{"request":{"User-Agent":"Mozilla/5.0 (Macintosh; Intel Mac OS X) AppleWebKit/534.34 (KHTML, like Gecko) PhantomJS/1.8.2 Safari/534.34","Accept":"text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8"},"response":{"Server":"GitHub.com","Content-Type":"text/html; charset=utf-8","Last-Modified":"Mon, 25 Jan 2016 21:12:30 GMT","Access-Control-Allow-Origin":"*","Expires":"Mon, 01 Feb 2016 15:24:55 GMT","Cache-Control":"max-age=600","Content-Encoding":"gzip","X-Github-Request-Id":"B91F1216:1BA3:A20CC95:56AF766E","Accept-Ranges":"bytes","Date":"Mon, 01 Feb 2016 15:14:55 GMT","Via":"1.1 varnish","Age":"0","Connection":"keep-alive","X-Served-By":"cache-lcy1128-LCY","X-Cache":"MISS","X-Cache-Hits":"0","X-Timer":"S1454339694.991636,VS0,VE95","Vary":"Accept-Encoding","X-Fastly-Request-Id":"cfcc2544693be0877f179cb7bc1fd005f8b8a6e6"}}},{"type":"css","url":"http%3A%2F%2Fwww.danmatthew.co.uk%2Fpublic%2Fcss%2Fstyles.css%3F18102015","size":17125,"resp":640,"gzip":17125,"expires":"2016/2/1","headers":{"request":{"User-Agent":"Mozilla/5.0 (Macintosh; Intel Mac OS X) AppleWebKit/534.34 (KHTML, like Gecko) PhantomJS/1.8.2 Safari/534.34","Accept":"text/css,*/*;q=0.1","Referer":"http://www.danmatthew.co.uk/"},"response":{"Server":"GitHub.com","Content-Type":"text/css","Last-Modified":"Mon, 25 Jan 2016 21:12:31 GMT","Access-Control-Allow-Origin":"*","Expires":"Mon, 01 Feb 2016 15:24:55 GMT","Cache-Control":"max-age=600","Content-Encoding":"gzip","X-Github-Request-Id":"B91F1222:1BA2:9A54825:56AF7667","Accept-Ranges":"bytes","Date":"Mon, 01 Feb 2016 15:14:55 GMT","Via":"1.1 varnish","Age":"0","Connection":"keep-alive","X-Served-By":"cache-lcy1128-LCY","X-Cache":"MISS","X-Cache-Hits":"0","X-Timer":"S1454339695.138306,VS0,VE93","Vary":"Accept-Encoding","X-Fastly-Request-Id":"bb28627ba78feac764fffa9b1199581f99fb8529"}}},{"type":"js","url":"http%3A%2F%2Fwww.danmatthew.co.uk%2Fpublic%2Fjs%2Fmain.js","size":230,"resp":653,"gzip":230,"expires":"2016/2/1","headers":{"request":{"User-Agent":"Mozilla/5.0 (Macintosh; Intel Mac OS X) AppleWebKit/534.34 (KHTML, like Gecko) PhantomJS/1.8.2 Safari/534.34","Accept":"*/*","Referer":"http://www.danmatthew.co.uk/"},"response":{"Server":"GitHub.com","Content-Type":"application/javascript; charset=utf-8","Last-Modified":"Mon, 25 Jan 2016 21:12:31 GMT","Access-Control-Allow-Origin":"*","Expires":"Mon, 01 Feb 2016 15:24:55 GMT","Cache-Control":"max-age=600","Content-Encoding":"gzip","X-Github-Request-Id":"B91F1216:1BA3:A20CD59:56AF766F","Accept-Ranges":"bytes","Date":"Mon, 01 Feb 2016 15:14:55 GMT","Via":"1.1 varnish","Age":"0","Connection":"keep-alive","X-Served-By":"cache-lcy1121-LCY","X-Cache":"MISS","X-Cache-Hits":"0","X-Timer":"S1454339695.155293,VS0,VE94","Vary":"Accept-Encoding","X-Fastly-Request-Id":"dd61acd52e52acd809eb729b8a6ae6628a984453"}}},{"type":"js","url":"http%3A%2F%2Fstatic.jsbin.com%2Fjs%2Fembed.min.js%3F3.35.5","size":3688,"resp":1035,"gzip":3688,"expires":"2017/1/31","headers":{"request":{"User-Agent":"Mozilla/5.0 (Macintosh; Intel Mac OS X) AppleWebKit/534.34 (KHTML, like Gecko) PhantomJS/1.8.2 Safari/534.34","Accept":"*/*","Referer":"http://www.danmatthew.co.uk/"},"response":{"Content-Type":"application/x-javascript","Transfer-Encoding":"chunked","Connection":"keep-alive","Server":"nginx","Date":"Mon, 01 Feb 2016 09:53:48 GMT","Last-Modified":"Fri, 08 Jan 2016 17:26:50 GMT","Expires":"Tue, 31 Jan 2017 09:53:48 GMT","Cache-Control":"max-age=31536000, public","Content-Encoding":"gzip","Age":"19364","Vary":"Accept-Encoding","X-Cache":"Hit from cloudfront","Via":"1.1 f1e56941be45321f87cc54eb2c5c0407.cloudfront.net (CloudFront)","X-Amz-Cf-Id":"2EOeFz0CKJzOBarZxlO6jaDhH95hFN639rbopfPnjDofVQzEAkloVw=="}}},{"type":"favicon","url":"http%3A%2F%2Fwww.danmatthew.co.uk%2Fpublic%2Ffavicon.ico","size":445,"resp":131,"expires":"2016/2/1","headers":{"request":{},"response":{"X-Fastly-Request-Id":"612749abb81588c54dc32653d6b5a746fdb4c72e\r","Date":"Mon, 01 Feb 2016 15:14:56 GMT\r","Via":"1.1 varnish\r","Age":"0\r","X-Cache":"MISS\r","Connection":"keep-alive\r","Content-Length":"445\r","X-Served-By":"cache-lcy1130-LCY\r","Last-Modified":"Mon, 25 Jan 2016 21:12:31 GMT\r","Server":"GitHub.com\r","X-Github-Request-Id":"B91F121C:1BA3:A20CF16:56AF7670\r","X-Timer":"S1454339696.137316,VS0,VE96\r","X-Cache-Hits":"0\r","Vary":"Accept-Encoding\r","Content-Type":"image/x-icon\r","Access-Control-Allow-Origin":"*\r","Cache-Control":"max-age=600\r","Accept-Ranges":"bytes\r","Expires":"Mon, 01 Feb 2016 15:24:56 GMT\r"}}},{"type":"iframe","url":"https%3A%2F%2Fjsbin.com%2Fembed-holding","size":0,"resp":1264,"headers":{"request":{"User-Agent":"Mozilla/5.0 (Macintosh; Intel Mac OS X) AppleWebKit/534.34 (KHTML, like Gecko) PhantomJS/1.8.2 Safari/534.34","Accept":"text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8","Referer":"http://www.danmatthew.co.uk/"},"response":{}}}]} - -➜ ~ phantomjs yslow.js --info basic --format plain danmatthew.co.uk -version: 3.1.8 -size: 70.5K (70566 bytes) -overall score: A (95) -url: http://www.danmatthew.co.uk/ -# of requests: 6 -ruleset: ydefault -page load time: 1732 - -``` - -- http://phantomjs.org/api/command-line.html -- https://github.com/marcelduran/yslow/issues/149 -- https://github.com/marcelduran/yslow/issues/129 -- http://www.bbc.co.uk/blogs/internet/entries/a456cf81-a154-3082-a726-d13f4f28ee23 -- https://ponyfoo.com/articles/measure-optimize-automate diff --git a/_drafts/2016-02-25-add-images-to-github-repo-wiki.md b/_drafts/2016-02-25-add-images-to-github-repo-wiki.md deleted file mode 100644 index f1eef82..0000000 --- a/_drafts/2016-02-25-add-images-to-github-repo-wiki.md +++ /dev/null @@ -1,4 +0,0 @@ ---- -title: Add Media To Your Github Repo Wiki -layout: post ---- diff --git a/_drafts/2016-03-09-fizzbuzz.md b/_drafts/2016-03-09-fizzbuzz.md deleted file mode 100644 index 37d35ff..0000000 --- a/_drafts/2016-03-09-fizzbuzz.md +++ /dev/null @@ -1,40 +0,0 @@ ---- -title: FizzBuzz: How do you code yours? -layout: post -published: false ---- - -

Not long ago, I read [http://robertheaton.com/2014/03/07/lessons-from-a-silicon-valley-job-search/](Rob Heaton's article on interviewing in Silicon Valley) with interest, not least because it would be fun to head that way myself one day.

- - -His description of the coding challenges he faced -Read discussion on coders not being able to solve FizzBuzz - -Realised I'd never been asked to, nor had I ever considered it. - -The problem is as follows: - -> Write a program that prints the numbers from 1 to 100. For multiples of three print “Fizz” instead of the number and for multiples of five print “Buzz”. For numbers which are multiples of both three and five print “FizzBuzz”.” - -Here's my JavaScript solution: - -```js -for (var i = 1; i <= 100; i++) { - var string = “”; - if (i % 3 == 0) { - string += "Fizz"; - } - if (i % 5 == 0) { - string += "Buzz"; - } - - console.log(string || i); -} -``` - -Tempting to over-engineer once you've written first draft. Realise: oh, I could have done this. - -How do you FizzBuzz? - -- http://blog.codinghorror.com/why-cant-programmers-program/ -- http://imranontech.com/2007/01/24/using-fizzbuzz-to-find-developers-who-grok-coding/ diff --git a/_drafts/big-o-notation.md b/_drafts/big-o-notation.md deleted file mode 100644 index 62489c1..0000000 --- a/_drafts/big-o-notation.md +++ /dev/null @@ -1,32 +0,0 @@ ---- -layout: post -title: Big O Notation ---- - -## What is Big O Notation? -- Helps determine the efficiency of an algorithm -- At its heart, Big O Notation is a way to express complexity. For a problem of size N: --- A constant-time method is 'order 1', or O(1) --- A linear-time method is 'order N', or O(N) --- A quadratic-time method is order N squared, or O(N²) - -A constant-time method will be faster than a linear-time method, which will be faster than a quadratic-time method. - -### O(1) -### O(N) -### O(N²) -Performance directly proportional to the square of the size of the data set. -### O(2n) -Algorithm whose growth doubles with each additional element in the data set. Quickly becomes very large. -### O(log N) -Logarithmic curve - imagine graph of half-life. -> Theoretical limit for searching a data set. - -http://rob-bell.net/2009/06/a-beginners-guide-to-big-o-notation/ -http://science.slc.edu/~jmarshall/courses/2002/spring/cs50/BigO/index.html -http://nerdgerl.wordpress.com/2009/11/18/an-intro-to-big-oh-notation-with-java/ -http://bigocheatsheet.com/ -http://pages.cs.wisc.edu/~vernon/cs367/notes/3.COMPLEXITY.html -http://stackoverflow.com/questions/487258/plain-english-explanation-of-big-o -http://ocw.mit.edu/courses/electrical-engineering-and-computer-science/6-006-introduction-to-algorithms-fall-2011/index.htm - diff --git a/_drafts/calculating-size.md b/_drafts/calculating-size.md deleted file mode 100644 index 8849739..0000000 --- a/_drafts/calculating-size.md +++ /dev/null @@ -1,21 +0,0 @@ ---- -title: Calculating Element Dimensions in JavaScript -layout: post ---- - -## Set -- `.width` -- `.height` - -## Get -- `offsetWidth` -- `offsetHeight` -- `getBoundingClientRect()` - -Just content: -- `clientWidth` -- `clientHeight` - -Everything: -- `scrollWidth` -- `scrollHeight` diff --git a/_drafts/cssmthodologies.md b/_drafts/cssmthodologies.md deleted file mode 100644 index db8ebc8..0000000 --- a/_drafts/cssmthodologies.md +++ /dev/null @@ -1,17 +0,0 @@ -# Thoughts on CSS Methodologies -## SMACSS -- Implemented on several sites -- Find file organisation and clunky; often difficult to define what belongs in 'layout' and what should be in 'modules' -- Snook defines them both as follows: -> Quote from SMACSS website - -- Prefer breaking stylesheets out physically into components -- Make sure they are named well. - -## OOCSS - -## BEM - -- Unsemantic - -Using a CSS pre-processor can help eliminate this 'class-itis' (closely associated with divitis from 2005) by implementing mixins and extensions \ No newline at end of file diff --git a/cypress.json b/cypress.json deleted file mode 100644 index 60ed5aa..0000000 --- a/cypress.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "video": false -} diff --git a/cypress/fixtures/example.json b/cypress/fixtures/example.json deleted file mode 100644 index da18d93..0000000 --- a/cypress/fixtures/example.json +++ /dev/null @@ -1,5 +0,0 @@ -{ - "name": "Using fixtures to represent data", - "email": "hello@cypress.io", - "body": "Fixtures are a great way to mock data for responses to routes" -} \ No newline at end of file diff --git a/cypress/fixtures/profile.json b/cypress/fixtures/profile.json deleted file mode 100644 index b6c355c..0000000 --- a/cypress/fixtures/profile.json +++ /dev/null @@ -1,5 +0,0 @@ -{ - "id": 8739, - "name": "Jane", - "email": "jane@example.com" -} \ No newline at end of file diff --git a/cypress/fixtures/users.json b/cypress/fixtures/users.json deleted file mode 100644 index 79b699a..0000000 --- a/cypress/fixtures/users.json +++ /dev/null @@ -1,232 +0,0 @@ -[ - { - "id": 1, - "name": "Leanne Graham", - "username": "Bret", - "email": "Sincere@april.biz", - "address": { - "street": "Kulas Light", - "suite": "Apt. 556", - "city": "Gwenborough", - "zipcode": "92998-3874", - "geo": { - "lat": "-37.3159", - "lng": "81.1496" - } - }, - "phone": "1-770-736-8031 x56442", - "website": "hildegard.org", - "company": { - "name": "Romaguera-Crona", - "catchPhrase": "Multi-layered client-server neural-net", - "bs": "harness real-time e-markets" - } - }, - { - "id": 2, - "name": "Ervin Howell", - "username": "Antonette", - "email": "Shanna@melissa.tv", - "address": { - "street": "Victor Plains", - "suite": "Suite 879", - "city": "Wisokyburgh", - "zipcode": "90566-7771", - "geo": { - "lat": "-43.9509", - "lng": "-34.4618" - } - }, - "phone": "010-692-6593 x09125", - "website": "anastasia.net", - "company": { - "name": "Deckow-Crist", - "catchPhrase": "Proactive didactic contingency", - "bs": "synergize scalable supply-chains" - } - }, - { - "id": 3, - "name": "Clementine Bauch", - "username": "Samantha", - "email": "Nathan@yesenia.net", - "address": { - "street": "Douglas Extension", - "suite": "Suite 847", - "city": "McKenziehaven", - "zipcode": "59590-4157", - "geo": { - "lat": "-68.6102", - "lng": "-47.0653" - } - }, - "phone": "1-463-123-4447", - "website": "ramiro.info", - "company": { - "name": "Romaguera-Jacobson", - "catchPhrase": "Face to face bifurcated interface", - "bs": "e-enable strategic applications" - } - }, - { - "id": 4, - "name": "Patricia Lebsack", - "username": "Karianne", - "email": "Julianne.OConner@kory.org", - "address": { - "street": "Hoeger Mall", - "suite": "Apt. 692", - "city": "South Elvis", - "zipcode": "53919-4257", - "geo": { - "lat": "29.4572", - "lng": "-164.2990" - } - }, - "phone": "493-170-9623 x156", - "website": "kale.biz", - "company": { - "name": "Robel-Corkery", - "catchPhrase": "Multi-tiered zero tolerance productivity", - "bs": "transition cutting-edge web services" - } - }, - { - "id": 5, - "name": "Chelsey Dietrich", - "username": "Kamren", - "email": "Lucio_Hettinger@annie.ca", - "address": { - "street": "Skiles Walks", - "suite": "Suite 351", - "city": "Roscoeview", - "zipcode": "33263", - "geo": { - "lat": "-31.8129", - "lng": "62.5342" - } - }, - "phone": "(254)954-1289", - "website": "demarco.info", - "company": { - "name": "Keebler LLC", - "catchPhrase": "User-centric fault-tolerant solution", - "bs": "revolutionize end-to-end systems" - } - }, - { - "id": 6, - "name": "Mrs. Dennis Schulist", - "username": "Leopoldo_Corkery", - "email": "Karley_Dach@jasper.info", - "address": { - "street": "Norberto Crossing", - "suite": "Apt. 950", - "city": "South Christy", - "zipcode": "23505-1337", - "geo": { - "lat": "-71.4197", - "lng": "71.7478" - } - }, - "phone": "1-477-935-8478 x6430", - "website": "ola.org", - "company": { - "name": "Considine-Lockman", - "catchPhrase": "Synchronised bottom-line interface", - "bs": "e-enable innovative applications" - } - }, - { - "id": 7, - "name": "Kurtis Weissnat", - "username": "Elwyn.Skiles", - "email": "Telly.Hoeger@billy.biz", - "address": { - "street": "Rex Trail", - "suite": "Suite 280", - "city": "Howemouth", - "zipcode": "58804-1099", - "geo": { - "lat": "24.8918", - "lng": "21.8984" - } - }, - "phone": "210.067.6132", - "website": "elvis.io", - "company": { - "name": "Johns Group", - "catchPhrase": "Configurable multimedia task-force", - "bs": "generate enterprise e-tailers" - } - }, - { - "id": 8, - "name": "Nicholas Runolfsdottir V", - "username": "Maxime_Nienow", - "email": "Sherwood@rosamond.me", - "address": { - "street": "Ellsworth Summit", - "suite": "Suite 729", - "city": "Aliyaview", - "zipcode": "45169", - "geo": { - "lat": "-14.3990", - "lng": "-120.7677" - } - }, - "phone": "586.493.6943 x140", - "website": "jacynthe.com", - "company": { - "name": "Abernathy Group", - "catchPhrase": "Implemented secondary concept", - "bs": "e-enable extensible e-tailers" - } - }, - { - "id": 9, - "name": "Glenna Reichert", - "username": "Delphine", - "email": "Chaim_McDermott@dana.io", - "address": { - "street": "Dayna Park", - "suite": "Suite 449", - "city": "Bartholomebury", - "zipcode": "76495-3109", - "geo": { - "lat": "24.6463", - "lng": "-168.8889" - } - }, - "phone": "(775)976-6794 x41206", - "website": "conrad.com", - "company": { - "name": "Yost and Sons", - "catchPhrase": "Switchable contextually-based project", - "bs": "aggregate real-time technologies" - } - }, - { - "id": 10, - "name": "Clementina DuBuque", - "username": "Moriah.Stanton", - "email": "Rey.Padberg@karina.biz", - "address": { - "street": "Kattie Turnpike", - "suite": "Suite 198", - "city": "Lebsackbury", - "zipcode": "31428-2261", - "geo": { - "lat": "-38.2386", - "lng": "57.2232" - } - }, - "phone": "024-648-3804", - "website": "ambrose.net", - "company": { - "name": "Hoeger LLC", - "catchPhrase": "Centralized empowering task-force", - "bs": "target end-to-end models" - } - } -] \ No newline at end of file diff --git a/cypress/integration/home_page.spec.js b/cypress/integration/home_page.spec.js deleted file mode 100644 index 36a4d49..0000000 --- a/cypress/integration/home_page.spec.js +++ /dev/null @@ -1,11 +0,0 @@ -/// - -describe("Smoke test", () => { - it("successfully loads", () => { - // eslint-disable-next-line no-undef - cy.visit("/"); - - // eslint-disable-next-line no-undef - cy.get(".post-list__heading").should("contain", "Latest posts"); - }); -}); diff --git a/cypress/plugins/index.js b/cypress/plugins/index.js deleted file mode 100644 index 8dd144a..0000000 --- a/cypress/plugins/index.js +++ /dev/null @@ -1,21 +0,0 @@ -/// -// *********************************************************** -// This example plugins/index.js can be used to load plugins -// -// You can change the location of this file or turn off loading -// the plugins file with the 'pluginsFile' configuration option. -// -// You can read more here: -// https://on.cypress.io/plugins-guide -// *********************************************************** - -// This function is called when a project is opened or re-opened (e.g. due to -// the project's config changing) - -/** - * @type {Cypress.PluginConfig} - */ -module.exports = (on, config) => { - // `on` is used to hook into various events Cypress emits - // `config` is the resolved Cypress config -}; diff --git a/cypress/support/commands.js b/cypress/support/commands.js deleted file mode 100644 index ca4d256..0000000 --- a/cypress/support/commands.js +++ /dev/null @@ -1,25 +0,0 @@ -// *********************************************** -// This example commands.js shows you how to -// create various custom commands and overwrite -// existing commands. -// -// For more comprehensive examples of custom -// commands please read more here: -// https://on.cypress.io/custom-commands -// *********************************************** -// -// -// -- This is a parent command -- -// Cypress.Commands.add("login", (email, password) => { ... }) -// -// -// -- This is a child command -- -// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... }) -// -// -// -- This is a dual command -- -// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... }) -// -// -// -- This will overwrite an existing command -- -// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... }) diff --git a/cypress/support/index.js b/cypress/support/index.js deleted file mode 100644 index d076cec..0000000 --- a/cypress/support/index.js +++ /dev/null @@ -1,20 +0,0 @@ -// *********************************************************** -// This example support/index.js is processed and -// loaded automatically before your test files. -// -// This is a great place to put global configuration and -// behavior that modifies Cypress. -// -// You can change the location of this file or turn off -// automatically serving support files with the -// 'supportFile' configuration option. -// -// You can read more here: -// https://on.cypress.io/configuration -// *********************************************************** - -// Import commands.js using ES2015 syntax: -import "./commands"; - -// Alternatively you can use CommonJS syntax: -// require('./commands') diff --git a/husky.config.js b/husky.config.js deleted file mode 100644 index 6cf9b3f..0000000 --- a/husky.config.js +++ /dev/null @@ -1,6 +0,0 @@ -module.exports = { - hooks: { - "pre-commit": "lint-staged", - "commit-msg": "commitlint -E HUSKY_GIT_PARAMS", - }, -}; diff --git a/package.json b/package.json index 7d9aada..5a18190 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,6 @@ "name": "danmatthew.co.uk", "version": "7.3.0", "description": "", - "main": "index.js", "dependencies": { "@astrojs/mdx": "^8.0.3", "@astrojs/rss": "^4.0.19", @@ -31,12 +30,6 @@ "prettier --write" ] }, - "eslintConfig": { - "extends": [ - "@open-wc/eslint-config", - "eslint-config-prettier" - ] - }, "scripts": { "dev": "tinacms dev -c \"astro dev\"", "start": "astro start", @@ -44,12 +37,12 @@ "build:ci": "astro build", "preview": "astro preview", "lint": "npm run lint:eslint && npm run lint:prettier", - "lint:eslint": "eslint --ext .js,.html . --ignore-path .gitignore", + "lint:eslint": "eslint .", "lint:prettier": "prettier \"**/*.js\" --list-different || (echo '↑↑ these files are not prettier formatted ↑↑' && exit 1)", "format": "npm run format:eslint && npm run format:prettier", - "format:eslint": "eslint --ext .js,.html . --fix --ignore-path .gitignore", + "format:eslint": "eslint . --fix", "format:prettier": "prettier \"**/*.js\" --write", - "test": "cypress run --spec \"cypress/integration/home_page.spec.js\"", + "test": "playwright test", "release": "npx standard-version && git push --follow-tags" }, "repository": { diff --git a/public/sass/_badges.scss b/public/sass/_badges.scss deleted file mode 100644 index 49d5de4..0000000 --- a/public/sass/_badges.scss +++ /dev/null @@ -1,42 +0,0 @@ -$badge-font-size: 0.75em !default; -$medium-gray: #999 !default; -$alert-color: #fff6bf !default; -$error-color: #fbe3e4 !default; -$notice-color: #e5edf8 !default; -$success-color: #e6efc2 !default; - -@mixin badge($color: $orange) { - background-color: $color; - border-radius: $badge-font-size * 5; - color: white;; - display: inline-block; - font-family: $sans-serif; - font-size: $badge-font-size; - font-weight: 600; - line-height: 1; - padding: 0.4em 1.2em; -} - -.badges li { - @include badge; -} - -.badge { - @include badge; -} - -.badge-alert { - @include badge($alert-color); -} - -.badge-error { - @include badge($error-color); -} - -.badge-notice { - @include badge($notice-color); -} - -.badge-success { - @include badge($success-color); -} diff --git a/public/sass/_forms.scss b/public/sass/_forms.scss deleted file mode 100644 index a12988f..0000000 --- a/public/sass/_forms.scss +++ /dev/null @@ -1,90 +0,0 @@ -fieldset { - background-color: $secondary-background-color; - border: $base-border; - margin: 0 0 $small-spacing; - padding: $base-spacing; -} - -input, -label, -select { - display: block; - font-family: $base-font-family; - font-size: $base-font-size; -} - -label { - font-weight: 600; - margin-bottom: $small-spacing / 2; - - &.required::after { - content: "*"; - } - - abbr { - display: none; - } -} - -#{$all-text-inputs}, -select[multiple=multiple], -textarea { - background-color: $base-background-color; - border: $base-border; - border-radius: $base-border-radius; - - box-sizing: border-box; - font-family: $base-font-family; - font-size: $base-font-size; - margin-bottom: $base-spacing / 2; - padding: $base-spacing / 3; - transition: border-color; - width: 100%; - - &:hover { - border-color: darken($base-border-color, 10%); - } - - &:focus { - border-color: $action-color; - outline: none; - } - - &:disabled { - background-color: darken($base-background-color, 6%); - cursor: not-allowed; - - &:hover { - border: $base-border; - } - } -} - -textarea { - resize: vertical; -} - -input[type="search"] { - @include appearance(none); -} - -// input[type="checkbox"], -// input[type="radio"] { -// display: inline; -// margin-right: $small-spacing / 2; -// } - -#sidebar-checkbox { - display: none; -} - -input[type="file"] { - padding-bottom: $small-spacing; - width: 100%; -} - -select { - margin-bottom: $base-spacing; - max-width: 100%; - width: auto; -} diff --git a/public/sass/_masthead.scss b/public/sass/_masthead.scss deleted file mode 100644 index 58ad9bd..0000000 --- a/public/sass/_masthead.scss +++ /dev/null @@ -1,30 +0,0 @@ -/* - * Masthead - * - * Super small header above the content for site name and short description. - */ - -.masthead { - padding-top: 1rem; - padding-bottom: 1rem; - - &__title { - margin: 0 initial; - color: #505050; - font-size: 1rem; - - > a { - text-decoration: none; - color: inherit; - - &:hover { - color: #ffffff; - } - } - - > small { - font-size: 75%; - color: #c0c0c0; - } - } -} diff --git a/public/sass/_navigation.scss b/public/sass/_navigation.scss deleted file mode 100644 index f184774..0000000 --- a/public/sass/_navigation.scss +++ /dev/null @@ -1,346 +0,0 @@ -header.navigation { - $base-border-color: gainsboro !default; - $base-border-radius: 3px !default; - $action-color: #477DCA !default; - $dark-gray: #333 !default; - $large-screen: em(860) !default; - $navigation-padding: 1em; - $navigation-background: blue; - $navigation-color: transparentize($dark-gray, 0.3); - $navigation-color-hover: $blue; - $navigation-height: 60px; - $navigation-nav-button-background: $action-color; - $navigation-nav-button-background-hover: lighten($navigation-background, 10%); - $navigation-nav-button-border: 1px solid lighten($navigation-nav-button-background, 20%); - $navigation-search-background: lighten($navigation-background, 5); - $navigation-search-border: 1px solid darken($navigation-background, 5); - $navigation-active-link-color: transparentize(white, 0.5); - $navigation-submenu-padding: 1em; - $navigation-submenu-width: 12em; - $horizontal-bar-mode: $large-screen; - - background-color: $navigation-background; - min-height: $navigation-height; - width: 100%; - z-index: 999; - font-family: $sans-serif; - - .navigation-wrapper { - @include clearfix; - // @include outer-container; - position: relative; - z-index: 9999; - } - - .logo { - float: left; - max-height: $navigation-height; - padding-left: $navigation-padding; - padding-right: 2em; - - img { - max-height: $navigation-height; - padding: 0.8em 0; - } - } - - // Mobile view - - .navigation-menu-button { - color: $navigation-color; - display: block; - float: right; - font-weight: 700; - line-height: $navigation-height; - margin: 0; - padding-right: 1em; - text-transform: uppercase; - - @include media ($horizontal-bar-mode) { - display: none; - } - - &:focus, - &:hover { - color: $navigation-color-hover; - } - } - - // Nav menu - - nav { - float: none; - min-height: $navigation-height; - z-index: 9999999; - - @include media ($horizontal-bar-mode) { - float: left; - } - } - - ul.navigation-menu { - -webkit-transform-style: preserve-3d; // stop webkit flicker - clear: both; - display: none; - margin: 0 auto; - overflow: visible; - padding: 0; - width: 100%; - z-index: 9999; - - &.show { - display: block; - } - - @include media ($horizontal-bar-mode) { - display: inline; - margin: 0; - padding: 0; - } - } - - // The nav items - - ul li.nav-link { - background: blue; - display: block; - line-height: $navigation-height; - overflow: hidden; - padding-right: 0.8em; - text-align: right; - width: 100%; - z-index: 9999; - - @include media ($horizontal-bar-mode) { - background: transparent; - display: inline; - line-height: $navigation-height; - text-decoration: none; - width: auto; - } - - a { - color: $navigation-color; - display: inline-block; - font-weight: 400; - text-decoration: none; - - @include media ($horizontal-bar-mode) { - padding-right: 1em; - } - - &:focus, - &:hover { - color: $navigation-color-hover; - } - } - } - - .active-nav-item a { - border-bottom: 1px solid $navigation-active-link-color; - padding-bottom: 3px; - } - - // Sub menus - - li.more.nav-link { - padding-right: 0; - - @include media($large-screen) { - padding-right: $navigation-submenu-padding; - } - - > ul > li:first-child a { - padding-top: 1em; - } - - a { - margin-right: $navigation-submenu-padding; - } - - > a { - padding-right: 0.6em; - } - - > a:after { - @include position(absolute, auto -0.4em auto auto); - content: '\25BE'; - color: $navigation-color; - } - } - - li.more { - overflow: visible; - padding-right: 0; - - a { - padding-right: 0.8em; - } - - > a { - padding-right: 1.6em; - position: relative; - - @include media($large-screen) { - margin-right: $navigation-submenu-padding; - } - - &:after { - content: '›'; - font-size: 1.2em; - position: absolute; - right: $navigation-submenu-padding / 2; - } - } - - &:focus > .submenu, - &:hover > .submenu { - display: block; - } - - @include media($horizontal-bar-mode) { - padding-right: 0.8em; - position: relative; - } - } - - ul.submenu { - display: none; - padding-left: 0; - - @include media($horizontal-bar-mode) { - left: -$navigation-submenu-padding; - position: absolute; - top: 1.5em; - } - - .submenu { - @include media($horizontal-bar-mode) { - left: $navigation-submenu-width - 0.2em; - top: 0; - } - } - - li { - display: block; - padding-right: 0; - - @include media($horizontal-bar-mode) { - line-height: $navigation-height / 1.3; - - &:first-child > a { - border-top-left-radius: $base-border-radius; - border-top-right-radius: $base-border-radius; - } - - &:last-child > a { - border-bottom-left-radius: $base-border-radius; - border-bottom-right-radius: $base-border-radius; - padding-bottom: 0.7em; - } - } - - a { - background-color: darken($navigation-background, 3%); - display: inline-block; - text-align: right; - width: 100%; - - @include media($horizontal-bar-mode) { - background-color: $navigation-background; - padding-left: $navigation-submenu-padding; - text-align: left; - width: $navigation-submenu-width; - } - } - } - } - - // Elements on the far right - - .navigation-tools { - background: #505050; - clear: both; - display: block; - height: $navigation-height; - padding-left: $navigation-padding / 2; - padding-right: $navigation-padding; - - @include media($large-screen) { - background: transparent; - clear: none; - float: right; - } - } - - .sign-up { - @include button(flat, $action-color); - display: inline; - float: right; - font-size: 0.8em; - margin-top: 1em; - padding: 0.75em 1em; - text-transform: uppercase; - } - - // Search bar - - .search-bar { - $search-bar-border-color: $base-border-color; - $search-bar-border: 1px solid $search-bar-border-color; - $search-bar-background: lighten($search-bar-border-color, 10%); - - float: left; - padding: 0.85em 0.6em 0.7em 0.6em; - width: 60%; - - form { - position: relative; - - input[type=search] { - @include box-sizing(border-box); - background: $navigation-search-background; - border-radius: $base-border-radius * 2; - border: $navigation-search-border; - color: $navigation-color; - font-size: 0.9em; - font-style: italic; - margin: 0; - padding: 0.5em 0.8em; - width: 100%; - - @include media($large-screen) { - width: 100%; - } - } - - button[type=submit] { - @include button(flat, $navigation-search-background); - bottom: 0.3em; - left: auto; - outline: none; - padding: 0 9px; - position: absolute; - right: 0.3em; - top: 0.3em; - - img { - height: 12px; - opacity: 0.7; - padding: 1px; - } - } - } - - @include media($horizontal-bar-mode) { - display: inline-block; - position: relative; - width: 16em; - - input { - @include box-sizing(border-box); - display: block; - } - } - } -} diff --git a/public/sass/_pagination.scss b/public/sass/_pagination.scss deleted file mode 100644 index aab494a..0000000 --- a/public/sass/_pagination.scss +++ /dev/null @@ -1,50 +0,0 @@ -/* - * Pagination - * - * Super lightweight (HTML-wise) blog pagination. `span`s are provide for when - * there are no more previous or next posts to show. - */ - -.pagination { - overflow: hidden; /* clearfix */ - margin-left: -1rem; - margin-right: -1rem; - font-family: $sans-serif; - color: #e91e63; - text-align: center; -} - -/* Pagination items can be `span`s or `a`s */ -.pagination-item { - display: block; - padding: 1rem; - border: 1px solid #eee; -} -.pagination-item:first-child { - margin-bottom: -1px; -} - -/* Only provide a hover state for linked pagination items */ -a.pagination-item:hover { - background-color: #e91e63; -} - -@media (min-width: 30em) { - .pagination { - margin: 3rem 0; - } - .pagination-item { - float: left; - width: 50%; - } - .pagination-item:first-child { - margin-bottom: 0; - border-top-left-radius: 4px; - border-bottom-left-radius: 4px; - } - .pagination-item:last-child { - margin-left: -1px; - border-top-right-radius: 4px; - border-bottom-right-radius: 4px; - } -} diff --git a/public/sass/_parallax.scss b/public/sass/_parallax.scss deleted file mode 100644 index 813b492..0000000 --- a/public/sass/_parallax.scss +++ /dev/null @@ -1,31 +0,0 @@ -$parallax-window-height: 30em; -$parallax-background-height: $parallax-window-height; - -.parallax-window { - max-height: $parallax-window-height; - overflow: hidden; - position: relative; - text-align: center; - width: 100%; -} - -.parallax-static-content { - color: #9A9A8A; - padding: 8em 0; - position: relative; - z-index: 9; -} - -.parallax-background { - background: url("http://image.vsco.co/1/545ba1c1c55571087418/5462389a756708ec508b470a/800x451/vsco_111114.jpg") no-repeat; - background-position: top; - background-size: cover; - background-color: beige; - height: $parallax-background-height; - left: 0; - position: absolute; - top: - $parallax-window-height / 3; - width: 100%; -} - -// Based on http://codepen.io/skeurentjes/ diff --git a/public/sass/_themes.scss b/public/sass/_themes.scss deleted file mode 100644 index 6eb4e80..0000000 --- a/public/sass/_themes.scss +++ /dev/null @@ -1,102 +0,0 @@ -/* - * Themes - * - * Apply custom color schemes by adding the appropriate class to the `body`. - * Based on colors from Base16: http://chriskempson.github.io/base16/#default. - */ - -/* Red */ -.theme-base-08 .sidebar, -.theme-base-08 .sidebar-toggle:active, -.theme-base-08 #sidebar-checkbox:checked ~ .wrap .sidebar-toggle { - background-color: #ac4142; -} -.theme-base-08 .container a, -.theme-base-08 .sidebar-toggle, -.theme-base-08 .related-posts li a:hover { - color: #ac4142; -} - -/* Orange */ -.theme-base-09 .sidebar, -.theme-base-09 .sidebar-toggle:active, -.theme-base-09 #sidebar-checkbox:checked ~ .wrap .sidebar-toggle { - background-color: #d28445; -} -.theme-base-09 .container a, -.theme-base-09 .sidebar-toggle, -.theme-base-09 .related-posts li a:hover { - color: #d28445; -} - -/* Yellow */ -.theme-base-0a .sidebar, -.theme-base-0a .sidebar-toggle:active, -.theme-base-0a #sidebar-checkbox:checked ~ .wrap .sidebar-toggle { - background-color: #f4bf75; -} -.theme-base-0a .container a, -.theme-base-0a .sidebar-toggle, -.theme-base-0a .related-posts li a:hover { - color: #f4bf75; -} - -/* Green */ -.theme-base-0b .sidebar, -.theme-base-0b .sidebar-toggle:active, -.theme-base-0b #sidebar-checkbox:checked ~ .wrap .sidebar-toggle { - background-color: #90a959; -} -.theme-base-0b .container a, -.theme-base-0b .sidebar-toggle, -.theme-base-0b .related-posts li a:hover { - color: #90a959; -} - -/* Cyan */ -.theme-base-0c .sidebar, -.theme-base-0c .sidebar-toggle:active, -.theme-base-0c #sidebar-checkbox:checked ~ .wrap .sidebar-toggle { - background-color: #75b5aa; -} -.theme-base-0c .container a, -.theme-base-0c .sidebar-toggle, -.theme-base-0c .related-posts li a:hover { - color: #75b5aa; -} - -/* Blue */ -.theme-base-0d .sidebar, -.theme-base-0d .sidebar-toggle:active, -.theme-base-0d #sidebar-checkbox:checked ~ .wrap .sidebar-toggle { - background-color: #6a9fb5; -} -.theme-base-0d .container a, -.theme-base-0d .sidebar-toggle, -.theme-base-0d .related-posts li a:hover { - color: #6a9fb5; -} - -/* Magenta */ -.theme-base-0e .sidebar, -.theme-base-0e .sidebar-toggle:active, -.theme-base-0e #sidebar-checkbox:checked ~ .wrap .sidebar-toggle { - background-color: #aa759f; -} -.theme-base-0e .container a, -.theme-base-0e .sidebar-toggle, -.theme-base-0e .related-posts li a:hover { - color: #aa759f; -} - -/* Brown */ -.theme-base-0f .sidebar, -.theme-base-0f .sidebar-toggle:active, -.theme-base-0f #sidebar-checkbox:checked ~ .wrap .sidebar-toggle { - background-color: #8f5536; -} -.theme-base-0f .container a, -.theme-base-0f .sidebar-toggle, -.theme-base-0f .related-posts li a:hover { - color: #8f5536; -} \ No newline at end of file diff --git a/public/sass/_variables.scss b/public/sass/_variables.scss deleted file mode 100644 index 09d0cb7..0000000 --- a/public/sass/_variables.scss +++ /dev/null @@ -1,43 +0,0 @@ -// Typography -$serif: "freight-text-pro", serif; -$sans-serif: "freight-macro-pro", sans-serif; - -$base-font-family: $serif; -$heading-font-family: $sans-serif; - - -// Font Sizes -$base-font-size: 1em; - -// Line height -$base-line-height: 1.5; -$heading-line-height: 1.2; - -// Other Sizes -$base-border-radius: 3px; -$base-spacing: $base-line-height * 1em; -$small-spacing: $base-spacing / 2; -$base-z-index: 0; - -// Colors -$blue: #477dca; -$dark-gray: #333; -$medium-gray: #999; -$light-gray: #ddd; -$orange: #f2422e; - -// Font Colors -$base-font-color: $dark-gray; -$action-color: $blue; - -// Border -$base-border-color: $light-gray; -$base-border: 1px solid $base-border-color; - -// Background Colors -$base-background-color: #fff; -$secondary-background-color: lighten($base-border-color, 10%); - -// Forms -$form-box-shadow: inset 0 1px 1px rgba(#000, 0.06); -$form-box-shadow-focus: $form-box-shadow, 0 0 5px adjust-color($action-color, $lightness: -5%, $alpha: -0.3); diff --git a/public/sass/c.scss b/public/sass/c.scss deleted file mode 100644 index f261ed6..0000000 --- a/public/sass/c.scss +++ /dev/null @@ -1,2331 +0,0 @@ -/* TACHYONS v4.0.0-beta.34| github.com/tachyons-css/tachyons */ -/* External Library Includes */ -/*! normalize.css v4.1.1 | 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, /* 1 */ -figcaption, figure, footer, header, main, -/* 2 */ -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, /* 1 */ -[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"], /* 1 */ -[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 */ } -/* Variables */ -/* - - Tachyons - COLOR VARIABLES - - Grayscale - - Solids - - Transparencies -*/ -/* Modules */ -/* - Box Sizing -*/ -html, body, div, article, section, main, footer, header, form, fieldset, pre, -code, p, ul, ol, li, dl, dt, dd, textarea, input[type="email"], -input[type="number"], input[type="password"], input[type="tel"], -input[type="text"], input[type="url"], .border-box { box-sizing: border-box; } -/* - - BACKGROUND SIZE - - Media Query Extensions: - -ns = not-small - -m = medium - -l = large - -*/ -/* - Often used in combination with background image set as an inline style - on an html element. -*/ -.cover { background-size: cover; } -.contain { background-size: contain; } -/* - - BORDER BASE - - Legend - - a = all - t = top - r = right - b = bottom - l = left - -*/ -.ba { border-style: solid; border-width: 1px; } -.bt { border-top-style: solid; border-top-width: 1px; } -.br { border-right-style: solid; border-right-width: 1px; } -.bb { border-bottom-style: solid; border-bottom-width: 1px; } -.bl { border-left-style: solid; border-left-width: 1px; } -.bn { border-style: none; border-width: 0; } -/* - - Tachyons - COLOR VARIABLES - - Grayscale - - Solids - - Transparencies -*/ -/* - - BORDER COLORS - -*/ -.b--black { border-color: #000; } -.b--near-black { border-color: #111; } -.b--dark-gray { border-color: #333; } -.b--mid-gray { border-color: #555; } -.b--gray { border-color: #777; } -.b--silver { border-color: #999; } -.b--light-silver { border-color: #aaa; } -.b--light-gray { border-color: #eee; } -.b--near-white { border-color: #f4f4f4; } -.b--white { border-color: #fff; } -.b--white-90 { border-color: rgba( 255, 255, 255, .9 ); } -.b--white-80 { border-color: rgba( 255, 255, 255, .8 ); } -.b--white-70 { border-color: rgba( 255, 255, 255, .7 ); } -.b--white-60 { border-color: rgba( 255, 255, 255, .6 ); } -.b--white-50 { border-color: rgba( 255, 255, 255, .5 ); } -.b--white-40 { border-color: rgba( 255, 255, 255, .4 ); } -.b--white-30 { border-color: rgba( 255, 255, 255, .3 ); } -.b--white-20 { border-color: rgba( 255, 255, 255, .2 ); } -.b--white-10 { border-color: rgba( 255, 255, 255, .1 ); } -.b--white-05 { border-color: rgba( 255, 255, 255, .05 ); } -.b--white-025 { border-color: rgba( 255, 255, 255, .025 ); } -.b--white-0125 { border-color: rgba( 255, 255, 255, .0125 ); } -.b--black-90 { border-color: rgba( 0, 0, 0, .9 ); } -.b--black-80 { border-color: rgba( 0, 0, 0, .8 ); } -.b--black-70 { border-color: rgba( 0, 0, 0, .7 ); } -.b--black-60 { border-color: rgba( 0, 0, 0, .6 ); } -.b--black-50 { border-color: rgba( 0, 0, 0, .5 ); } -.b--black-40 { border-color: rgba( 0, 0, 0, .4 ); } -.b--black-30 { border-color: rgba( 0, 0, 0, .3 ); } -.b--black-20 { border-color: rgba( 0, 0, 0, .2 ); } -.b--black-10 { border-color: rgba( 0, 0, 0, .1 ); } -.b--black-05 { border-color: rgba( 0, 0, 0, .05 ); } -.b--black-025 { border-color: rgba( 0, 0, 0, .025 ); } -.b--black-0125 { border-color: rgba( 0, 0, 0, .0125 ); } -.b--dark-red { border-color: #f00008; } -.b--red { border-color: #ff3223; } -.b--orange { border-color: #f3a801; } -.b--gold { border-color: #f2c800; } -.b--yellow { border-color: #ffde37; } -.b--purple { border-color: #7d5da9; } -.b--light-purple { border-color: #8d4f92; } -.b--hot-pink { border-color: #d62288; } -.b--dark-pink { border-color: #c64774; } -.b--pink { border-color: #f49cc8; } -.b--dark-green { border-color: #006C71; } -.b--green { border-color: #41D69F; } -.b--navy { border-color: #001b44; } -.b--dark-blue { border-color: #00449e; } -.b--blue { border-color: #357edd; } -.b--light-blue { border-color: #96ccff; } -.b--lightest-blue { border-color: #cdecff; } -.b--washed-blue { border-color: #f6fffe; } -.b--washed-green { border-color: #e8fdf5; } -.b--washed-yellow { border-color: #fff8d5; } -.b--light-pink { border-color: #efa4b8; } -.b--light-yellow { border-color: #f3dd70; } -.b--light-red { border-color: #ffd3c0; } -.b--transparent { border-color: transparent; } -/* - - BORDER RADIUS - - Base: - br = border-radius - - Modifiers: - 0 = 0/none - 1 = 1st step in scale - 2 = 2nd step in scale - 3 = 3rd step in scale - 4 = 4th step in scale - -100 = 100% - - - Media Query Extensions: - -ns = not-small - -m = medium - -l = large - -*/ -.br0 { border-radius: 0; } -.br1 { border-radius: .125rem; } -.br2 { border-radius: .25rem; } -.br3 { border-radius: .5rem; } -.br4 { border-radius: 1rem; } -.br-100 { border-radius: 100%; } -.br--bottom { border-top-left-radius: 0; border-top-right-radius: 0; } -.br--top { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } -.br--right { border-top-left-radius: 0; border-bottom-left-radius: 0; } -.br--left { border-top-right-radius: 0; border-bottom-right-radius: 0; } -/* - - BORDER STYLES - - Base: - bs = border-style - - Modifiers: - none = none - dotted = dotted - dashed = dashed - solid = solid - - Media Query Extensions: - -ns = not-small - -m = medium - -l = large - - */ -.b--dotted { border-style: dotted; } -.b--dashed { border-style: dashed; } -.b--solid { border-style: solid; } -.b--none { border-style: none; } -/* - - BORDER WIDTHS - - Base: - bw = border-width - - Modifiers: - 0 = 0 width border - 1 = 1st step in border-width scale - 2 = 2nd step in border-width scale - 3 = 3rd step in border-width scale - 4 = 4th step in border-width scale - 5 = 5th step in border-width scale - - Media Query Extensions: - -ns = not-small - -m = medium - -l = large - -*/ -.bw0 { border-width: 0; } -.bw1 { border-width: .125rem; } -.bw2 { border-width: .25rem; } -.bw3 { border-width: .5rem; } -.bw4 { border-width: 1rem; } -.bw5 { border-width: 2rem; } -.bt-0 { border-top-width: 0; } -.br-0 { border-right-width: 0; } -.bb-0 { border-bottom-width: 0; } -.bl-0 { border-left-width: 0; } -/* - - BOX-SHADOW - - Media Query Extensions: - -ns = not-small - -m = medium - -l = large - - */ -.shadow-1 { box-shadow: 0px 0px 4px 2px rgba( 0, 0, 0, 0.2 ); } -.shadow-2 { box-shadow: 0px 0px 8px 2px rgba( 0, 0, 0, 0.2 ); } -.shadow-3 { box-shadow: 2px 2px 4px 2px rgba( 0, 0, 0, 0.2 ); } -.shadow-4 { box-shadow: 2px 2px 8px 0px rgba( 0, 0, 0, 0.2 ); } -.shadow-5 { box-shadow: 4px 4px 8px 0px rgba( 0, 0, 0, 0.2 ); } -/* - - CODE - -*/ -.pre { overflow-x: auto; overflow-y: hidden; overflow: scroll; } -/* - - COORDINATES - - Use in combination with the position module. - -*/ -.top-0 { top: 0; } -.right-0 { right: 0; } -.bottom-0 { bottom: 0; } -.left-0 { left: 0; } -.top-1 { top: 1rem; } -.right-1 { right: 1rem; } -.bottom-1 { bottom: 1rem; } -.left-1 { left: 1rem; } -.top-2 { top: 2rem; } -.right-2 { right: 2rem; } -.bottom-2 { bottom: 2rem; } -.left-2 { left: 2rem; } -.top--1 { top: -1rem; } -.right--1 { right: -1rem; } -.bottom--1 { bottom: -1rem; } -.left--1 { left: -1rem; } -.top--2 { top: -2rem; } -.right--2 { right: -2rem; } -.bottom--2 { bottom: -2rem; } -.left--2 { left: -2rem; } -.absolute--fill { top: 0; right: 0; bottom: 0; left: 0; } -/* - - CLEARFIX - -*/ -/* Nicolas Gallaghers Clearfix solution - Ref: http://nicolasgallagher.com/micro-clearfix-hack/ */ -.cf:before, .cf:after { content: " "; display: table; } -.cf:after { clear: both; } -.cf { *zoom: 1; } -.cl { clear: left; } -.cr { clear: right; } -.cb { clear: both; } -.cn { clear: none; } -/* - - DISPLAY - - Base: - d = display - - Modifiers: - n = none - b = block - ib = inline-block - it = inline-table - t = table - tc = table-cell - tr = table-row - tcol = table-column - tcolg = table-column-group - - Media Query Extensions: - -ns = not-small - -m = medium - -l = large - -*/ -.dn { display: none; } -.di { display: inline; } -.db { display: block; } -.dib { display: inline-block; } -.dit { display: inline-table; } -.dt { display: table; } -.dtc { display: table-cell; } -.dt-row { display: table-row; } -.dt-row-group { display: table-row-group; } -.dt-column { display: table-column; } -.dt-column-group { display: table-column-group; } -/* - This will set table to full width and then - all cells will be equal width -*/ -.dt--fixed { table-layout: fixed; width: 100%; } -/* - -FLEXBOX - - */ -.flex { display: flex; } -/* 1. Fix for Chrome 44 bug. https://code.google.com/p/chromium/issues/detail?id=506893 */ -.flex-auto { flex: 1 1 auto; min-width: 0; /* 1 */ min-height: 0; /* 1 */ } -.flex-none { flex: none; } -.flex-column { flex-direction: column; } -.flex-wrap { flex-wrap: wrap; } -.items-start { align-items: flex-start; } -.items-end { align-items: flex-end; } -.items-center { align-items: center; } -.items-baseline { align-items: baseline; } -.items-stretch { align-items: stretch; } -.self-start { align-self: flex-start; } -.self-end { align-self: flex-end; } -.self-center { align-self: center; } -.self-baseline { align-self: baseline; } -.self-stretch { align-self: stretch; } -.justify-start { justify-content: flex-start; } -.justify-end { justify-content: flex-end; } -.justify-center { justify-content: center; } -.justify-between { justify-content: space-between; } -.justify-around { justify-content: space-around; } -.content-start { align-content: flex-start; } -.content-end { align-content: flex-end; } -.content-center { align-content: center; } -.content-between { align-content: space-between; } -.content-around { align-content: space-around; } -.content-stretch { align-content: stretch; } -.order-0 { order: 0; } -.order-1 { order: 1; } -.order-2 { order: 2; } -.order-3 { order: 3; } -.order-4 { order: 4; } -.order-5 { order: 5; } -.order-6 { order: 6; } -.order-7 { order: 7; } -.order-8 { order: 8; } -.order-last { order: 99999; } -/* Media Query Variables */ -/* - - FLOATS - - 1. Floated elements are automatically rendered as block level elements. - Setting floats to display inline will fix the double margin bug in - ie6. You know... just in case. - - 2. Don't forget to clearfix your floats with .cf - - Base: - f = float - - Modifiers: - l = left - r = right - n = none - - Media Query Extensions: - -ns = not-small - -m = medium - -l = large - -*/ -.fl { float: left; display: inline; } -.fr { float: right; display: inline; } -.fn { float: none; } -/* - - FONT FAMILY GROUPS - -*/ -.sans-serif { font-family: -apple-system, BlinkMacSystemFont, 'avenir next', avenir, helvetica, 'helvetica neue', ubuntu, roboto, noto, 'segoe ui', arial, sans-serif; } -.serif { font-family: georgia, times, serif; } -.system-sans-serif { font-family: sans-serif; } -.system-serif { font-family: serif; } -/* Monospaced Typefaces (for code) */ -/* From http://cssfontstack.com */ -code, .code { font-family: Consolas, monaco, monospace; } -/* Sans-Serif Typefaces */ -.helvetica { font-family: 'helvetica neue', helvetica, sans-serif; } -.avenir { font-family: 'avenir next', avenir, sans-serif; } -/* Serif Typefaces */ -.georgia { font-family: georgia, serif; } -.times { font-family: times, serif; } -.bodoni { font-family: "Bodoni MT", serif; } -.calisto { font-family: "Calisto MT", serif; } -.garamond { font-family: garamond, serif; } -.baskerville { font-family: garamond, serif; } -/* - - FONT STYLE - -*/ -.i { font-style: italic; } -.fs-normal { font-style: normal; } -/* - - FONT WEIGHT - -*/ -.normal { font-weight: normal; } -.b { font-weight: bold; } -.fw1 { font-weight: 100; } -.fw2 { font-weight: 200; } -.fw3 { font-weight: 300; } -.fw4 { font-weight: 400; } -.fw5 { font-weight: 500; } -.fw6 { font-weight: 600; } -.fw7 { font-weight: 700; } -.fw8 { font-weight: 800; } -.fw9 { font-weight: 900; } -/* - - FORMS - -*/ -.input-reset { -webkit-appearance: none; -moz-appearance: none; } -/* - - HEIGHTS - -*/ -/* Height Scale */ -.h1 { height: 1rem; } -.h2 { height: 2rem; } -.h3 { height: 4rem; } -.h4 { height: 8rem; } -.h5 { height: 16rem; } -/* Height Percentages */ -.h-25 { height: 25%; } -.h-50 { height: 50%; } -.h-75 { height: 75%; } -.h-100 { height: 100%; } -/* String Properties */ -.h-auto { height: auto; } -.h-inherit { height: inherit; } -/* - - LETTER SPACING - -*/ -.tracked { letter-spacing: .16em; } -.tracked-tight { letter-spacing: -.05em; } -.tracked-mega { letter-spacing: .32em; } -/* - - LINE HEIGHT / LEADING - -*/ -.lh-solid { line-height: 1; } -.lh-title { line-height: 1.3; } -.lh-copy { line-height: 1.6; } -/* - - LINKS - -*/ -.link { text-decoration: none; transition: color .15s ease-in; } -.link:link, .link:visited { transition: color .15s ease-in; } -.link:hover { transition: color .15s ease-in; } -.link:active { transition: color .15s ease-in; } -.link:focus { transition: color .15s ease-in; } -/* - - LISTS - -*/ -.list { list-style-type: none; } -/* - - MAX WIDTHS - -*/ -/* Max Width Percentages */ -.mw-100 { max-width: 100%; } -/* Max Width Scale */ -.mw1 { max-width: 1rem; } -.mw2 { max-width: 2rem; } -.mw3 { max-width: 4rem; } -.mw4 { max-width: 8rem; } -.mw5 { max-width: 16rem; } -.mw6 { max-width: 32rem; } -.mw7 { max-width: 48rem; } -.mw8 { max-width: 64rem; } -.mw9 { max-width: 96rem; } -/* Max Width String Properties */ -.mw-none { max-width: none; } -/* - - WIDTHS - - Base: - w = width - - Modifiers - 1 = 1st step in width scale - 2 = 2nd step in width scale - 3 = 3rd step in width scale - 4 = 4th step in width scale - 5 = 5th step in width scale - - -10 = literal value 10% - -20 = literal value 20% - -25 = literal value 25% - -33 = literal value 33% - -34 = literal value 34% - -40 = literal value 40% - -50 = literal value 50% - -60 = literal value 60% - -75 = literal value 75% - -80 = literal value 80% - -100 = literal value 100% - - -auto = string value auto - - - Media Query Extensions: - -ns = not-small - -m = medium - -l = large - -*/ -/* Width Scale */ -.w1 { width: 1rem; } -.w2 { width: 2rem; } -.w3 { width: 4rem; } -.w4 { width: 8rem; } -.w5 { width: 16rem; } -.w-10 { width: 10%; } -.w-20 { width: 20%; } -.w-25 { width: 25%; } -.w-33 { width: 33%; } -.w-34 { width: 34%; } -.w-40 { width: 40%; } -.w-50 { width: 50%; } -.w-60 { width: 60%; } -.w-75 { width: 75%; } -.w-80 { width: 80%; } -.w-100 { width: 100%; } -.w-auto { width: auto; } -/* - - OVERFLOW - - */ -.overflow-visible { overflow: visible; } -.overflow-hidden { overflow: hidden; } -.overflow-scroll { overflow: scroll; } -.overflow-auto { overflow: auto; } -.overflow-x-visible { overflow-x: visible; } -.overflow-x-hidden { overflow-x: hidden; } -.overflow-x-scroll { overflow-x: scroll; } -.overflow-x-auto { overflow-x: auto; } -.overflow-y-visible { overflow-y: visible; } -.overflow-y-hidden { overflow-y: hidden; } -.overflow-y-scroll { overflow-y: scroll; } -.overflow-y-auto { overflow-y: auto; } -/* - - POSITIONING - - */ -.static { position: static; } -.relative { position: relative; } -.absolute { position: absolute; } -.fixed { position: fixed; } -/* - - Opacity - -*/ -.o-100 { opacity: 1; } -.o-90 { opacity: .9; } -.o-80 { opacity: .8; } -.o-70 { opacity: .7; } -.o-60 { opacity: .6; } -.o-50 { opacity: .5; } -.o-40 { opacity: .4; } -.o-30 { opacity: .3; } -.o-20 { opacity: .2; } -.o-10 { opacity: .1; } -.o-05 { opacity: .05; } -.o-025 { opacity: .025; } -.o-0 { opacity: 0; } -/* - - COLOR VARIABLES - - Variables to set colors for - color, background-color, and border-color - -*/ -/* variables */ -/* - - SKINS - -*/ -/* Text colors */ -.black-90 { color: rgba( 0, 0, 0, .9 ); } -.black-80 { color: rgba( 0, 0, 0, .8 ); } -.black-70 { color: rgba( 0, 0, 0, .7 ); } -.black-60 { color: rgba( 0, 0, 0, .6 ); } -.black-50 { color: rgba( 0, 0, 0, .5 ); } -.black-40 { color: rgba( 0, 0, 0, .4 ); } -.black-30 { color: rgba( 0, 0, 0, .3 ); } -.black-20 { color: rgba( 0, 0, 0, .2 ); } -.black-10 { color: rgba( 0, 0, 0, .1 ); } -.black-05 { color: rgba( 0, 0, 0, .05 ); } -.white-90 { color: rgba( 255, 255, 255, .9 ); } -.white-80 { color: rgba( 255, 255, 255, .8 ); } -.white-70 { color: rgba( 255, 255, 255, .7 ); } -.white-60 { color: rgba( 255, 255, 255, .6 ); } -.white-50 { color: rgba( 255, 255, 255, .5 ); } -.white-40 { color: rgba( 255, 255, 255, .4 ); } -.white-30 { color: rgba( 255, 255, 255, .3 ); } -.white-20 { color: rgba( 255, 255, 255, .2 ); } -.white-10 { color: rgba( 255, 255, 255, .1 ); } -.black { color: #000; } -.near-black { color: #111; } -.dark-gray { color: #333; } -.mid-gray { color: #555; } -.gray { color: #777; } -.silver { color: #999; } -.light-silver { color: #aaa; } -.moon-gray { color: #ccc; } -.light-gray { color: #eee; } -.near-white { color: #f4f4f4; } -.white { color: #fff; } -.dark-red { color: #f00008; } -.red { color: #ff3223; } -.orange { color: #f3a801; } -.gold { color: #f2c800; } -.yellow { color: #ffde37; } -.purple { color: #7d5da9; } -.light-purple { color: #8d4f92; } -.hot-pink { color: #d62288; } -.dark-pink { color: #c64774; } -.pink { color: #f49cc8; } -.dark-green { color: #006C71; } -.green { color: #41D69F; } -.navy { color: #001b44; } -.dark-blue { color: #00449e; } -.blue { color: #357edd; } -.light-blue { color: #96ccff; } -.lightest-blue { color: #cdecff; } -.washed-blue { color: #f6fffe; } -.washed-green { color: #e8fdf5; } -.washed-yellow { color: #fff8d5; } -.light-pink { color: #efa4b8; } -.light-yellow { color: #f3dd70; } -.light-red { color: #ffd3c0; } -.bg-black-90 { background-color: rgba( 0, 0, 0, .9 ); } -.bg-black-80 { background-color: rgba( 0, 0, 0, .8 ); } -.bg-black-70 { background-color: rgba( 0, 0, 0, .7 ); } -.bg-black-60 { background-color: rgba( 0, 0, 0, .6 ); } -.bg-black-50 { background-color: rgba( 0, 0, 0, .5 ); } -.bg-black-40 { background-color: rgba( 0, 0, 0, .4 ); } -.bg-black-30 { background-color: rgba( 0, 0, 0, .3 ); } -.bg-black-20 { background-color: rgba( 0, 0, 0, .2 ); } -.bg-black-10 { background-color: rgba( 0, 0, 0, .1 ); } -.bg-black-05 { background-color: rgba( 0, 0, 0, .05 ); } -.bg-white-90 { background-color: rgba( 255, 255, 255, .9 ); } -.bg-white-80 { background-color: rgba( 255, 255, 255, .8 ); } -.bg-white-70 { background-color: rgba( 255, 255, 255, .7 ); } -.bg-white-60 { background-color: rgba( 255, 255, 255, .6 ); } -.bg-white-50 { background-color: rgba( 255, 255, 255, .5 ); } -.bg-white-40 { background-color: rgba( 255, 255, 255, .4 ); } -.bg-white-30 { background-color: rgba( 255, 255, 255, .3 ); } -.bg-white-20 { background-color: rgba( 255, 255, 255, .2 ); } -.bg-white-10 { background-color: rgba( 255, 255, 255, .1 ); } -/* Background colors */ -.bg-black { background-color: #000; } -.bg-near-black { background-color: #111; } -.bg-dark-gray { background-color: #333; } -.bg-mid-gray { background-color: #555; } -.bg-gray { background-color: #777; } -.bg-silver { background-color: #999; } -.bg-light-silver { background-color: #aaa; } -.bg-moon-gray { background-color: #ccc; } -.bg-light-gray { background-color: #eee; } -.bg-near-white { background-color: #f4f4f4; } -.bg-white { background-color: #fff; } -.bg-transparent { background-color: transparent; } -.bg-dark-red { background-color: #f00008; } -.bg-red { background-color: #ff3223; } -.bg-orange { background-color: #f3a801; } -.bg-gold { background-color: #f2c800; } -.bg-yellow { background-color: #ffde37; } -.bg-purple { background-color: #7d5da9; } -.bg-light-purple { background-color: #8d4f92; } -.bg-hot-pink { background-color: #d62288; } -.bg-dark-pink { background-color: #c64774; } -.bg-pink { background-color: #f49cc8; } -.bg-dark-green { background-color: #006C71; } -.bg-green { background-color: #41D69F; } -.bg-navy { background-color: #001b44; } -.bg-dark-blue { background-color: #00449e; } -.bg-blue { background-color: #357edd; } -.bg-light-blue { background-color: #96ccff; } -.bg-lightest-blue { background-color: #cdecff; } -.bg-washed-blue { background-color: #f6fffe; } -.bg-washed-green { background-color: #e8fdf5; } -.bg-washed-yellow { background-color: #fff8d5; } -.bg-light-pink { background-color: #efa4b8; } -.bg-light-yellow { background-color: #f3dd70; } -.bg-light-red { background-color: #ffd3c0; } -/* Skins for specific pseudoclasses */ -.hover-black:hover { color: #000; } -.hover-near-black:hover { color: #111; } -.hover-dark-gray:hover { color: #333; } -.hover-mid-gray:hover { color: #555; } -.hover-gray:hover { color: #777; } -.hover-silver:hover { color: #999; } -.hover-light-silver:hover { color: #aaa; } -.hover-moon-gray:hover { color: #ccc; } -.hover-light-gray:hover { color: #eee; } -.hover-near-white:hover { color: #f4f4f4; } -.hover-white:hover { color: #fff; } -.hover-bg-black:hover { background-color: #000; } -.hover-bg-near-black:hover { background-color: #111; } -.hover-bg-dark-gray:hover { background-color: #333; } -.hover-bg-mid-gray:hover { background-color: #555; } -.hover-bg-gray:hover { background-color: #777; } -.hover-bg-silver:hover { background-color: #999; } -.hover-bg-light-silver:hover { background-color: #aaa; } -.hover-bg-moon-gray:hover { background-color: #ccc; } -.hover-bg-light-gray:hover { background-color: #eee; } -.hover-bg-near-white:hover { background-color: #f4f4f4; } -.hover-bg-white:hover { background-color: #fff; } -.hover-bg-transparent:hover { background-color: transparent; } -.hover-bg-dark-red:hover { background-color: #f00008; } -.hover-bg-red:hover { background-color: #ff3223; } -.hover-bg-orange:hover { background-color: #f3a801; } -.hover-bg-gold:hover { background-color: #f2c800; } -.hover-bg-yellow:hover { background-color: #ffde37; } -.hover-bg-purple:hover { background-color: #7d5da9; } -.hover-bg-light-purple:hover { background-color: #8d4f92; } -.hover-bg-hot-pink:hover { background-color: #d62288; } -.hover-bg-dark-pink:hover { background-color: #c64774; } -.hover-bg-pink:hover { background-color: #f49cc8; } -.hover-bg-dark-green:hover { background-color: #006C71; } -.hover-bg-green:hover { background-color: #41D69F; } -.hover-bg-navy:hover { background-color: #001b44; } -.hover-bg-dark-blue:hover { background-color: #00449e; } -.hover-bg-blue:hover { background-color: #357edd; } -.hover-bg-light-blue:hover { background-color: #96ccff; } -.hover-bg-lightest-blue:hover { background-color: #cdecff; } -.hover-bg-washed-blue:hover { background-color: #f6fffe; } -.hover-bg-washed-green:hover { background-color: #e8fdf5; } -.hover-bg-washed-yellow:hover { background-color: #fff8d5; } -.hover-bg-light-pink:hover { background-color: #efa4b8; } -.hover-bg-light-yellow:hover { background-color: #f3dd70; } -.hover-bg-light-red:hover { background-color: #ffd3c0; } -/* Variables */ -/* Spacing Scale - based on a ratio of 1:2 */ -/* Media Queries */ -/* - SPACING - - An eight step powers of two scale ranging from 0 to 16rem. - Namespaces are composable and thus highly grockable - check the legend below - - Legend: - - p = padding - m = margin - - a = all - h = horizontal - v = vertical - t = top - r = right - b = bottom - l = left - - 0 = none - 1 = 1st step in spacing scale - 2 = 2nd step in spacing scale - 3 = 3rd step in spacing scale - 4 = 4th step in spacing scale - 5 = 5th step in spacing scale - 6 = 6th step in spacing scale - 7 = 7th step in spacing scale - -*/ -.pa0 { padding: 0; } -.pa1 { padding: .25rem; } -.pa2 { padding: .5rem; } -.pa3 { padding: 1rem; } -.pa4 { padding: 2rem; } -.pa5 { padding: 4rem; } -.pa6 { padding: 8rem; } -.pa7 { padding: 16rem; } -.pl0 { padding-left: 0; } -.pl1 { padding-left: .25rem; } -.pl2 { padding-left: .5rem; } -.pl3 { padding-left: 1rem; } -.pl4 { padding-left: 2rem; } -.pl5 { padding-left: 4rem; } -.pl6 { padding-left: 8rem; } -.pl7 { padding-left: 16rem; } -.pr0 { padding-right: 0; } -.pr1 { padding-right: .25rem; } -.pr2 { padding-right: .5rem; } -.pr3 { padding-right: 1rem; } -.pr4 { padding-right: 2rem; } -.pr5 { padding-right: 4rem; } -.pr6 { padding-right: 8rem; } -.pr7 { padding-right: 16rem; } -.pb0 { padding-bottom: 0; } -.pb1 { padding-bottom: .25rem; } -.pb2 { padding-bottom: .5rem; } -.pb3 { padding-bottom: 1rem; } -.pb4 { padding-bottom: 2rem; } -.pb5 { padding-bottom: 4rem; } -.pb6 { padding-bottom: 8rem; } -.pb7 { padding-bottom: 16rem; } -.pt0 { padding-top: 0; } -.pt1 { padding-top: .25rem; } -.pt2 { padding-top: .5rem; } -.pt3 { padding-top: 1rem; } -.pt4 { padding-top: 2rem; } -.pt5 { padding-top: 4rem; } -.pt6 { padding-top: 8rem; } -.pt7 { padding-top: 16rem; } -.pv0 { padding-top: 0; padding-bottom: 0; } -.pv1 { padding-top: .25rem; padding-bottom: .25rem; } -.pv2 { padding-top: .5rem; padding-bottom: .5rem; } -.pv3 { padding-top: 1rem; padding-bottom: 1rem; } -.pv4 { padding-top: 2rem; padding-bottom: 2rem; } -.pv5 { padding-top: 4rem; padding-bottom: 4rem; } -.pv6 { padding-top: 8rem; padding-bottom: 8rem; } -.pv7 { padding-top: 16rem; padding-bottom: 16rem; } -.ph0 { padding-left: 0; padding-right: 0; } -.ph1 { padding-left: .25rem; padding-right: .25rem; } -.ph2 { padding-left: .5rem; padding-right: .5rem; } -.ph3 { padding-left: 1rem; padding-right: 1rem; } -.ph4 { padding-left: 2rem; padding-right: 2rem; } -.ph5 { padding-left: 4rem; padding-right: 4rem; } -.ph6 { padding-left: 8rem; padding-right: 8rem; } -.ph7 { padding-left: 16rem; padding-right: 16rem; } -.ma0 { margin: 0; } -.ma1 { margin: .25rem; } -.ma2 { margin: .5rem; } -.ma3 { margin: 1rem; } -.ma4 { margin: 2rem; } -.ma5 { margin: 4rem; } -.ma6 { margin: 8rem; } -.ma7 { margin: 16rem; } -.ml0 { margin-left: 0; } -.ml1 { margin-left: .25rem; } -.ml2 { margin-left: .5rem; } -.ml3 { margin-left: 1rem; } -.ml4 { margin-left: 2rem; } -.ml5 { margin-left: 4rem; } -.ml6 { margin-left: 8rem; } -.ml7 { margin-left: 16rem; } -.mr0 { margin-right: 0; } -.mr1 { margin-right: .25rem; } -.mr2 { margin-right: .5rem; } -.mr3 { margin-right: 1rem; } -.mr4 { margin-right: 2rem; } -.mr5 { margin-right: 4rem; } -.mr6 { margin-right: 8rem; } -.mr7 { margin-right: 16rem; } -.mb0 { margin-bottom: 0; } -.mb1 { margin-bottom: .25rem; } -.mb2 { margin-bottom: .5rem; } -.mb3 { margin-bottom: 1rem; } -.mb4 { margin-bottom: 2rem; } -.mb5 { margin-bottom: 4rem; } -.mb6 { margin-bottom: 8rem; } -.mb7 { margin-bottom: 16rem; } -.mt0 { margin-top: 0; } -.mt1 { margin-top: .25rem; } -.mt2 { margin-top: .5rem; } -.mt3 { margin-top: 1rem; } -.mt4 { margin-top: 2rem; } -.mt5 { margin-top: 4rem; } -.mt6 { margin-top: 8rem; } -.mt7 { margin-top: 16rem; } -.mv0 { margin-top: 0; margin-bottom: 0; } -.mv1 { margin-top: .25rem; margin-bottom: .25rem; } -.mv2 { margin-top: .5rem; margin-bottom: .5rem; } -.mv3 { margin-top: 1rem; margin-bottom: 1rem; } -.mv4 { margin-top: 2rem; margin-bottom: 2rem; } -.mv5 { margin-top: 4rem; margin-bottom: 4rem; } -.mv6 { margin-top: 8rem; margin-bottom: 8rem; } -.mv7 { margin-top: 16rem; margin-bottom: 16rem; } -.mh0 { margin-left: 0; margin-right: 0; } -.mh1 { margin-left: .25rem; margin-right: .25rem; } -.mh2 { margin-left: .5rem; margin-right: .5rem; } -.mh3 { margin-left: 1rem; margin-right: 1rem; } -.mh4 { margin-left: 2rem; margin-right: 2rem; } -.mh5 { margin-left: 4rem; margin-right: 4rem; } -.mh6 { margin-left: 8rem; margin-right: 8rem; } -.mh7 { margin-left: 16rem; margin-right: 16rem; } -/* - - TABLES - -*/ -.collapse { border-collapse: collapse; border-spacing: 0; } -.striped--moon-gray:nth-child(odd) { background-color: #aaa; } -.striped--moon-gray:nth-child(odd) { background-color: #ccc; } -.striped--light-gray:nth-child(odd) { background-color: #eee; } -.striped--near-white:nth-child(odd) { background-color: #f4f4f4; } -/* - - TEXT DECORATION - -*/ -.strike { text-decoration: line-through; } -.underline { text-decoration: underline; } -.no-underline { text-decoration: none; } -/* - - TEXT ALIGN - -*/ -.tl { text-align: left; } -.tr { text-align: right; } -.tc { text-align: center; } -/* - - TEXT TRANSFORM - -*/ -.ttc { text-transform: capitalize; } -.ttl { text-transform: lowercase; } -.ttu { text-transform: uppercase; } -.ttn { text-transform: none; } -/* - - TYPE SCALE - -*/ -/* For Hero Titles */ -.f-6, .f-headline { font-size: 6rem; } -.f-5, .f-subheadline { font-size: 5rem; } -/* Type Scale */ -.f1 { font-size: 3rem; } -.f2 { font-size: 2.25rem; } -.f3 { font-size: 1.5rem; } -.f4 { font-size: 1.25rem; } -.f5 { font-size: 1rem; } -.f6 { font-size: .875rem; } -/* - - TYPOGRAPHY - -*/ -/* Measure is limited to ~66 characters */ -.measure { max-width: 30em; } -/* Measure is limited to ~80 characters */ -.measure-wide { max-width: 34em; } -/* Measure is limited to ~45 characters */ -.measure-narrow { max-width: 20em; } -/* Book paragraph style - paragraphs are indented with no vertical spacing. */ -.indent { text-indent: 1em; margin-top: 0; margin-bottom: 0; } -.small-caps { font-variant: small-caps; } -/* Combine this class with a width to truncate text (or just leave as is to truncate at width of containing element. */ -.truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } -/* - - UTILITIES - -*/ -/* This is for fluid media that is embedded from third party sites like youtube, vimeo etc. - * Wrap the outer element in aspect-ratio and then extend it with the desired ratio i.e - * Make sure there are no height and width attributes on the embedded media. - * Adapted from: https://github.com/suitcss/components-flex-embed - * - * Example: - * - *
- * - *
- * - * */ -.aspect-ratio { height: 0; position: relative; } -.aspect-ratio--16x9 { padding-bottom: 56.25%; } -.aspect-ratio--4x3 { padding-bottom: 75%; } -.aspect-ratio--8x5 { padding-bottom: 62.5%; } -.aspect-ratio--object { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; z-index: 100; } -.overflow-container { overflow-y: scroll; } -.center { margin-right: auto; margin-left: auto; } -/* - - VISIBILITY - -*/ -/* - Text that is hidden but accessible - Ref: http://snook.ca/archives/html_and_css/hiding-content-for-accessibility -*/ -.clip { position: fixed !important; _position: absolute !important; clip: rect( 1px 1px 1px 1px ); /* IE6, IE7 */ clip: rect( 1px, 1px, 1px, 1px ); } -/* - - WHITE SPACE - -*/ -.ws-normal { white-space: normal; } -.nowrap { white-space: nowrap; } -.pre { white-space: pre; } -/* - - VERTICAL ALIGN - -*/ -.v-base { vertical-align: baseline; } -.v-mid { vertical-align: middle; } -.v-top { vertical-align: top; } -.v-btm { vertical-align: bottom; } -/* - - HOVER EFFECTS - - -*/ -/* - - Dim element on hover by adding the dim class. - -*/ -.dim { opacity: 1; transition: opacity .15s ease-in; } -.dim:hover, .dim:focus { opacity: .5; transition: opacity .15s ease-in; } -.dim:active { opacity: .8; transition: opacity .15s ease-out; } -/* - - Hide child & reveal on hover: - - Put the hide-child class on a parent element and any nested element with the - child class will be hidden and displayed on hover or focus. - -
-
Hidden until hover or focus
-
Hidden until hover or focus
-
Hidden until hover or focus
-
Hidden until hover or focus
-
-*/ -.hide-child .child { opacity: 0; transition: opacity .15s ease-in; } -.hide-child:hover .child, .hide-child:focus .child, .hide-child:active .child { opacity: 1; transition: opacity .15s ease-in; } -.underline-hover:hover, .underline-hover:focus { text-decoration: underline; } -/* Can combine this with overflow-hidden to make background images grow on hover - * even if you are using background-size: cover */ -.grow { transition: transform .2s; } -.grow:hover { transform: scale( 1.05 ); } -.grow-large { transition: transform .2s; } -.grow-large:hover { transform: scale( 1.2 ); } -/* Add pointer on hover */ -.pointer:hover { cursor: pointer; } -/* - - STYLES - - Add custom styles here. - -*/ -/* Import media queries at end as this will allow you to customize them - * and override what is currently declared in each module. - */ -/* - - CUSTOM MEDIA QUERIES - - Media query values can be changed to fit your own content. - There are no magic bullets when it comes to media query width values. - They should be declared in em units - and they should be set to meet - the needs of your content. - - These media queries can be referenced like so: - - @media (--breakpoint-not-small) { - .medium-and-larger-specific-style { - background-color: red; - } - } - - @media (--breakpoint-medium) { - .medium-screen-specific-style { - background-color: red; - } - } - - @media (--breakpoint-large) { - .large-screen-specific-style { - background-color: red; - } - } - - @media (--breakpoint-extra-large) { - .extra-large-screen-specific-style { - background-color: red; - } - } - -*/ -/* DEBUGGING */ -/* - - DEBUG CHILDREN - - Just add the debug class to any element to see outlines on its - children. - -*/ -.debug * { outline: 1px solid gold; } -/* Uncomment out this line and rebuild if you want to debug your layout.*/ -/* @import './_debug'; */ -@media screen and (min-width: 30em) { - .cover-ns { background-size: cover; } - .contain-ns { background-size: contain; } - .ba-ns { border-style: solid; border-width: 1px; } - .bt-ns { border-top-style: solid; border-top-width: 1px; } - .br-ns { border-right-style: solid; border-right-width: 1px; } - .bb-ns { border-bottom-style: solid; border-bottom-width: 1px; } - .bl-ns { border-left-style: solid; border-left-width: 1px; } - .bn-ns { border-style: none; border-width: 0; } - .br0-ns { border-radius: 0; } - .br1-ns { border-radius: .125rem; } - .br2-ns { border-radius: .25rem; } - .br3-ns { border-radius: .5rem; } - .br4-ns { border-radius: 1rem; } - .br-100-ns { border-radius: 100%; } - .br--bottom-ns { border-top-left-radius: 0; border-top-right-radius: 0; } - .br--top-ns { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } - .br--right-ns { border-top-left-radius: 0; border-bottom-left-radius: 0; } - .br--left-ns { border-top-right-radius: 0; border-bottom-right-radius: 0; } - .b--dotted-ns { border-style: dotted; } - .b--dashed-ns { border-style: dashed; } - .b--solid-ns { border-style: solid; } - .b--none-ns { border-style: none; } - .bw0-ns { border-width: 0; } - .bw1-ns { border-width: .125rem; } - .bw2-ns { border-width: .25rem; } - .bw3-ns { border-width: .5rem; } - .bw4-ns { border-width: 1rem; } - .bw5-ns { border-width: 2rem; } - .bt-0-ns { border-top-width: 0; } - .br-0-ns { border-right-width: 0; } - .bb-0-ns { border-bottom-width: 0; } - .bl-0-ns { border-left-width: 0; } - .shadow-1-ns { box-shadow: 0px 0px 4px 2px rgba( 0, 0, 0, 0.2 ); } - .shadow-2-ns { box-shadow: 0px 0px 8px 2px rgba( 0, 0, 0, 0.2 ); } - .shadow-3-ns { box-shadow: 2px 2px 4px 2px rgba( 0, 0, 0, 0.2 ); } - .shadow-4-ns { box-shadow: 2px 2px 8px 0px rgba( 0, 0, 0, 0.2 ); } - .shadow-5-ns { box-shadow: 4px 4px 8px 0px rgba( 0, 0, 0, 0.2 ); } - .top-0-ns { top: 0; } - .left-0-ns { left: 0; } - .right-0-ns { right: 0; } - .bottom-0-ns { bottom: 0; } - .top-1-ns { top: 1rem; } - .left-1-ns { left: 1rem; } - .right-1-ns { right: 1rem; } - .bottom-1-ns { bottom: 1rem; } - .top-2-ns { top: 2rem; } - .left-2-ns { left: 2rem; } - .right-2-ns { right: 2rem; } - .bottom-2-ns { bottom: 2rem; } - .top--1-ns { top: -1rem; } - .right--1-ns { right: -1rem; } - .bottom--1-ns { bottom: -1rem; } - .left--1-ns { left: -1rem; } - .top--2-ns { top: -2rem; } - .right--2-ns { right: -2rem; } - .bottom--2-ns { bottom: -2rem; } - .left--2-ns { left: -2rem; } - .absolute--fill-ns { top: 0; right: 0; bottom: 0; left: 0; } - .cl-ns { clear: left; } - .cr-ns { clear: right; } - .cb-ns { clear: both; } - .cn-ns { clear: none; } - .dn-ns { display: none; } - .di-ns { display: inline; } - .db-ns { display: block; } - .dib-ns { display: inline-block; } - .dit-ns { display: inline-table; } - .dt-ns { display: table; } - .dtc-ns { display: table-cell; } - .dt-row-ns { display: table-row; } - .dt-row-group-ns { display: table-row-group; } - .dt-column-ns { display: table-column; } - .dt-column-group-ns { display: table-column-group; } - .dt--fixed-ns { table-layout: fixed; width: 100%; } - .flex-ns { display: flex; } - .flex-auto-ns { flex: 1 1 auto; min-width: 0; /* 1 */ min-height: 0; /* 1 */ } - .flex-none-ns { flex: none; } - .flex-column-ns { flex-direction: column; } - .flex-wrap-ns { flex-wrap: wrap; } - .items-start-ns { align-items: flex-start; } - .items-end-ns { align-items: flex-end; } - .items-center-ns { align-items: center; } - .items-baseline-ns { align-items: baseline; } - .items-stretch-ns { align-items: stretch; } - .self-start-ns { align-self: flex-start; } - .self-end-ns { align-self: flex-end; } - .self-center-ns { align-self: center; } - .self-baseline-ns { align-self: baseline; } - .self-stretch-ns { align-self: stretch; } - .justify-start-ns { justify-content: flex-start; } - .justify-end-ns { justify-content: flex-end; } - .justify-center-ns { justify-content: center; } - .justify-between-ns { justify-content: space-between; } - .justify-around-ns { justify-content: space-around; } - .content-start-ns { align-content: flex-start; } - .content-end-ns { align-content: flex-end; } - .content-center-ns { align-content: center; } - .content-between-ns { align-content: space-between; } - .content-around-ns { align-content: space-around; } - .content-stretch-ns { align-content: stretch; } - .order-0-ns { order: 0; } - .order-1-ns { order: 1; } - .order-2-ns { order: 2; } - .order-3-ns { order: 3; } - .order-4-ns { order: 4; } - .order-5-ns { order: 5; } - .order-6-ns { order: 6; } - .order-7-ns { order: 7; } - .order-8-ns { order: 8; } - .order-last-ns { order: 99999; } - .fl-ns { float: left; display: inline; } - .fr-ns { float: right; display: inline; } - .fn-ns { float: none; } - .i-ns { font-style: italic; } - .fs-normal-ns { font-style: normal; } - .normal-ns { font-weight: normal; } - .b-ns { font-weight: bold; } - .fw1-ns { font-weight: 100; } - .fw2-ns { font-weight: 200; } - .fw3-ns { font-weight: 300; } - .fw4-ns { font-weight: 400; } - .fw5-ns { font-weight: 500; } - .fw6-ns { font-weight: 600; } - .fw7-ns { font-weight: 700; } - .fw8-ns { font-weight: 800; } - .fw9-ns { font-weight: 900; } - .h1-ns { height: 1rem; } - .h2-ns { height: 2rem; } - .h3-ns { height: 4rem; } - .h4-ns { height: 8rem; } - .h5-ns { height: 16rem; } - .h-25-ns { height: 25%; } - .h-50-ns { height: 50%; } - .h-75-ns { height: 75%; } - .h-100-ns { height: 100%; } - .h-auto-ns { height: auto; } - .h-inherit-ns { height: inherit; } - .tracked-ns { letter-spacing: .16em; } - .tracked-tight-ns { letter-spacing: -.05em; } - .tracked-mega-ns { letter-spacing: .32em; } - .lh-solid-ns { line-height: 1; } - .lh-title-ns { line-height: 1.3; } - .lh-copy-ns { line-height: 1.6; } - .mw-100-ns { max-width: 100%; } - .mw1-ns { max-width: 1rem; } - .mw2-ns { max-width: 2rem; } - .mw3-ns { max-width: 4rem; } - .mw4-ns { max-width: 8rem; } - .mw5-ns { max-width: 16rem; } - .mw6-ns { max-width: 32rem; } - .mw7-ns { max-width: 48rem; } - .mw8-ns { max-width: 64rem; } - .mw9-ns { max-width: 96rem; } - .mw-none-ns { max-width: none; } - .w1-ns { width: 1rem; } - .w2-ns { width: 2rem; } - .w3-ns { width: 4rem; } - .w4-ns { width: 8rem; } - .w5-ns { width: 16rem; } - .w-10-ns { width: 10%; } - .w-20-ns { width: 20%; } - .w-25-ns { width: 25%; } - .w-33-ns { width: 33%; } - .w-34-ns { width: 34%; } - .w-40-ns { width: 40%; } - .w-50-ns { width: 50%; } - .w-60-ns { width: 60%; } - .w-75-ns { width: 75%; } - .w-80-ns { width: 80%; } - .w-100-ns { width: 100%; } - .w-auto-ns { width: auto; } - .overflow-visible-ns { overflow: visible; } - .overflow-hidden-ns { overflow: hidden; } - .overflow-scroll-ns { overflow: scroll; } - .overflow-auto-ns { overflow: auto; } - .overflow-x-visible-ns { overflow-x: visible; } - .overflow-x-hidden-ns { overflow-x: hidden; } - .overflow-x-scroll-ns { overflow-x: scroll; } - .overflow-x-auto-ns { overflow-x: auto; } - .overflow-y-visible-ns { overflow-y: visible; } - .overflow-y-hidden-ns { overflow-y: hidden; } - .overflow-y-scroll-ns { overflow-y: scroll; } - .overflow-y-auto-ns { overflow-y: auto; } - .static-ns { position: static; } - .relative-ns { position: relative; } - .absolute-ns { position: absolute; } - .fixed-ns { position: fixed; } - .pa0-ns { padding: 0; } - .pa1-ns { padding: .25rem; } - .pa2-ns { padding: .5rem; } - .pa3-ns { padding: 1rem; } - .pa4-ns { padding: 2rem; } - .pa5-ns { padding: 4rem; } - .pa6-ns { padding: 8rem; } - .pa7-ns { padding: 16rem; } - .pl0-ns { padding-left: 0; } - .pl1-ns { padding-left: .25rem; } - .pl2-ns { padding-left: .5rem; } - .pl3-ns { padding-left: 1rem; } - .pl4-ns { padding-left: 2rem; } - .pl5-ns { padding-left: 4rem; } - .pl6-ns { padding-left: 8rem; } - .pl7-ns { padding-left: 16rem; } - .pr0-ns { padding-right: 0; } - .pr1-ns { padding-right: .25rem; } - .pr2-ns { padding-right: .5rem; } - .pr3-ns { padding-right: 1rem; } - .pr4-ns { padding-right: 2rem; } - .pr5-ns { padding-right: 4rem; } - .pr6-ns { padding-right: 8rem; } - .pr7-ns { padding-right: 16rem; } - .pb0-ns { padding-bottom: 0; } - .pb1-ns { padding-bottom: .25rem; } - .pb2-ns { padding-bottom: .5rem; } - .pb3-ns { padding-bottom: 1rem; } - .pb4-ns { padding-bottom: 2rem; } - .pb5-ns { padding-bottom: 4rem; } - .pb6-ns { padding-bottom: 8rem; } - .pb7-ns { padding-bottom: 16rem; } - .pt0-ns { padding-top: 0; } - .pt1-ns { padding-top: .25rem; } - .pt2-ns { padding-top: .5rem; } - .pt3-ns { padding-top: 1rem; } - .pt4-ns { padding-top: 2rem; } - .pt5-ns { padding-top: 4rem; } - .pt6-ns { padding-top: 8rem; } - .pt7-ns { padding-top: 16rem; } - .pv0-ns { padding-top: 0; padding-bottom: 0; } - .pv1-ns { padding-top: .25rem; padding-bottom: .25rem; } - .pv2-ns { padding-top: .5rem; padding-bottom: .5rem; } - .pv3-ns { padding-top: 1rem; padding-bottom: 1rem; } - .pv4-ns { padding-top: 2rem; padding-bottom: 2rem; } - .pv5-ns { padding-top: 4rem; padding-bottom: 4rem; } - .pv6-ns { padding-top: 8rem; padding-bottom: 8rem; } - .pv7-ns { padding-top: 16rem; padding-bottom: 16rem; } - .ph0-ns { padding-left: 0; padding-right: 0; } - .ph1-ns { padding-left: .25rem; padding-right: .25rem; } - .ph2-ns { padding-left: .5rem; padding-right: .5rem; } - .ph3-ns { padding-left: 1rem; padding-right: 1rem; } - .ph4-ns { padding-left: 2rem; padding-right: 2rem; } - .ph5-ns { padding-left: 4rem; padding-right: 4rem; } - .ph6-ns { padding-left: 8rem; padding-right: 8rem; } - .ph7-ns { padding-left: 16rem; padding-right: 16rem; } - .ma0-ns { margin: 0; } - .ma1-ns { margin: .25rem; } - .ma2-ns { margin: .5rem; } - .ma3-ns { margin: 1rem; } - .ma4-ns { margin: 2rem; } - .ma5-ns { margin: 4rem; } - .ma6-ns { margin: 8rem; } - .ma7-ns { margin: 16rem; } - .ml0-ns { margin-left: 0; } - .ml1-ns { margin-left: .25rem; } - .ml2-ns { margin-left: .5rem; } - .ml3-ns { margin-left: 1rem; } - .ml4-ns { margin-left: 2rem; } - .ml5-ns { margin-left: 4rem; } - .ml6-ns { margin-left: 8rem; } - .ml7-ns { margin-left: 16rem; } - .mr0-ns { margin-right: 0; } - .mr1-ns { margin-right: .25rem; } - .mr2-ns { margin-right: .5rem; } - .mr3-ns { margin-right: 1rem; } - .mr4-ns { margin-right: 2rem; } - .mr5-ns { margin-right: 4rem; } - .mr6-ns { margin-right: 8rem; } - .mr7-ns { margin-right: 16rem; } - .mb0-ns { margin-bottom: 0; } - .mb1-ns { margin-bottom: .25rem; } - .mb2-ns { margin-bottom: .5rem; } - .mb3-ns { margin-bottom: 1rem; } - .mb4-ns { margin-bottom: 2rem; } - .mb5-ns { margin-bottom: 4rem; } - .mb6-ns { margin-bottom: 8rem; } - .mb7-ns { margin-bottom: 16rem; } - .mt0-ns { margin-top: 0; } - .mt1-ns { margin-top: .25rem; } - .mt2-ns { margin-top: .5rem; } - .mt3-ns { margin-top: 1rem; } - .mt4-ns { margin-top: 2rem; } - .mt5-ns { margin-top: 4rem; } - .mt6-ns { margin-top: 8rem; } - .mt7-ns { margin-top: 16rem; } - .mv0-ns { margin-top: 0; margin-bottom: 0; } - .mv1-ns { margin-top: .25rem; margin-bottom: .25rem; } - .mv2-ns { margin-top: .5rem; margin-bottom: .5rem; } - .mv3-ns { margin-top: 1rem; margin-bottom: 1rem; } - .mv4-ns { margin-top: 2rem; margin-bottom: 2rem; } - .mv5-ns { margin-top: 4rem; margin-bottom: 4rem; } - .mv6-ns { margin-top: 8rem; margin-bottom: 8rem; } - .mv7-ns { margin-top: 16rem; margin-bottom: 16rem; } - .mh0-ns { margin-left: 0; margin-right: 0; } - .mh1-ns { margin-left: .25rem; margin-right: .25rem; } - .mh2-ns { margin-left: .5rem; margin-right: .5rem; } - .mh3-ns { margin-left: 1rem; margin-right: 1rem; } - .mh4-ns { margin-left: 2rem; margin-right: 2rem; } - .mh5-ns { margin-left: 4rem; margin-right: 4rem; } - .mh6-ns { margin-left: 8rem; margin-right: 8rem; } - .mh7-ns { margin-left: 16rem; margin-right: 16rem; } - .strike-ns { text-decoration: line-through; } - .underline-ns { text-decoration: underline; } - .no-underline-ns { text-decoration: none; } - .tl-ns { text-align: left; } - .tr-ns { text-align: right; } - .tc-ns { text-align: center; } - .ttc-ns { text-transform: capitalize; } - .ttl-ns { text-transform: lowercase; } - .ttu-ns { text-transform: uppercase; } - .ttn-ns { text-transform: none; } - .f-6-ns, .f-headline-ns { font-size: 6rem; } - .f-5-ns, .f-subheadline-ns { font-size: 5rem; } - .f1-ns { font-size: 3rem; } - .f2-ns { font-size: 2.25rem; } - .f3-ns { font-size: 1.5rem; } - .f4-ns { font-size: 1.25rem; } - .f5-ns { font-size: 1rem; } - .f6-ns { font-size: .875rem; } - .measure-ns { max-width: 30em; } - .measure-wide-ns { max-width: 34em; } - .measure-narrow-ns { max-width: 20em; } - .indent-ns { text-indent: 1em; margin-top: 0; margin-bottom: 0; } - .small-caps-ns { font-variant: small-caps; } - .truncate-ns { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } - .clip-ns { position: fixed !important; position: absolute !important; clip: rect( 1px 1px 1px 1px ); /* IE6, IE7 */ clip: rect( 1px, 1px, 1px, 1px ); } - .ws-normal-ns { white-space: normal; } - .nowrap-ns { white-space: nowrap; } - .pre-ns { white-space: pre; } - .v-base-ns { vertical-align: baseline; } - .v-mid-ns { vertical-align: middle; } - .v-top-ns { vertical-align: top; } - .v-btm-ns { vertical-align: bottom; } -} -@media screen and (min-width: 30em) and (max-width: 60em) { - .cover-m { background-size: cover; } - .contain-m { background-size: contain; } - .ba-m { border-style: solid; border-width: 1px; } - .bt-m { border-top-style: solid; border-top-width: 1px; } - .br-m { border-right-style: solid; border-right-width: 1px; } - .bb-m { border-bottom-style: solid; border-bottom-width: 1px; } - .bl-m { border-left-style: solid; border-left-width: 1px; } - .bn-m { border-style: none; border-width: 0; } - .br0-m { border-radius: 0; } - .br1-m { border-radius: .125rem; } - .br2-m { border-radius: .25rem; } - .br3-m { border-radius: .5rem; } - .br4-m { border-radius: 1rem; } - .br-100-m { border-radius: 100%; } - .br--bottom-m { border-top-left-radius: 0; border-top-right-radius: 0; } - .br--top-m { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } - .br--right-m { border-top-left-radius: 0; border-bottom-left-radius: 0; } - .br--left-m { border-top-right-radius: 0; border-bottom-right-radius: 0; } - .b--dotted-m { border-style: dotted; } - .b--dashed-m { border-style: dashed; } - .b--solid-m { border-style: solid; } - .b--none-m { border-style: none; } - .bw0-m { border-width: 0; } - .bw1-m { border-width: .125rem; } - .bw2-m { border-width: .25rem; } - .bw3-m { border-width: .5rem; } - .bw4-m { border-width: 1rem; } - .bw5-m { border-width: 2rem; } - .bt-0-m { border-top-width: 0; } - .br-0-m { border-right-width: 0; } - .bb-0-m { border-bottom-width: 0; } - .bl-0-m { border-left-width: 0; } - .shadow-1-m { box-shadow: 0px 0px 4px 2px rgba( 0, 0, 0, 0.2 ); } - .shadow-2-m { box-shadow: 0px 0px 8px 2px rgba( 0, 0, 0, 0.2 ); } - .shadow-3-m { box-shadow: 2px 2px 4px 2px rgba( 0, 0, 0, 0.2 ); } - .shadow-4-m { box-shadow: 2px 2px 8px 0px rgba( 0, 0, 0, 0.2 ); } - .shadow-5-m { box-shadow: 4px 4px 8px 0px rgba( 0, 0, 0, 0.2 ); } - .top-0-m { top: 0; } - .left-0-m { left: 0; } - .right-0-m { right: 0; } - .bottom-0-m { bottom: 0; } - .top-1-m { top: 1rem; } - .left-1-m { left: 1rem; } - .right-1-m { right: 1rem; } - .bottom-1-m { bottom: 1rem; } - .top-2-m { top: 2rem; } - .left-2-m { left: 2rem; } - .right-2-m { right: 2rem; } - .bottom-2-m { bottom: 2rem; } - .top--1-m { top: -1rem; } - .right--1-m { right: -1rem; } - .bottom--1-m { bottom: -1rem; } - .left--1-m { left: -1rem; } - .top--2-m { top: -2rem; } - .right--2-m { right: -2rem; } - .bottom--2-m { bottom: -2rem; } - .left--2-m { left: -2rem; } - .absolute--fill-m { top: 0; right: 0; bottom: 0; left: 0; } - .cl-m { clear: left; } - .cr-m { clear: right; } - .cb-m { clear: both; } - .cn-m { clear: none; } - .dn-m { display: none; } - .di-m { display: inline; } - .db-m { display: block; } - .dib-m { display: inline-block; } - .dit-m { display: inline-table; } - .dt-m { display: table; } - .dtc-m { display: table-cell; } - .dt-row-m { display: table-row; } - .dt-row-group-m { display: table-row-group; } - .dt-column-m { display: table-column; } - .dt-column-group-m { display: table-column-group; } - .dt--fixed-m { table-layout: fixed; width: 100%; } - .flex-m { display: flex; } - .flex-auto-m { flex: 1 1 auto; min-width: 0; /* 1 */ min-height: 0; /* 1 */ } - .flex-none-m { flex: none; } - .flex-column-m { flex-direction: column; } - .flex-wrap-m { flex-wrap: wrap; } - .items-start-m { align-items: flex-start; } - .items-end-m { align-items: flex-end; } - .items-center-m { align-items: center; } - .items-baseline-m { align-items: baseline; } - .items-stretch-m { align-items: stretch; } - .self-start-m { align-self: flex-start; } - .self-end-m { align-self: flex-end; } - .self-center-m { align-self: center; } - .self-baseline-m { align-self: baseline; } - .self-stretch-m { align-self: stretch; } - .justify-start-m { justify-content: flex-start; } - .justify-end-m { justify-content: flex-end; } - .justify-center-m { justify-content: center; } - .justify-between-m { justify-content: space-between; } - .justify-around-m { justify-content: space-around; } - .content-start-m { align-content: flex-start; } - .content-end-m { align-content: flex-end; } - .content-center-m { align-content: center; } - .content-between-m { align-content: space-between; } - .content-around-m { align-content: space-around; } - .content-stretch-m { align-content: stretch; } - .order-0-m { order: 0; } - .order-1-m { order: 1; } - .order-2-m { order: 2; } - .order-3-m { order: 3; } - .order-4-m { order: 4; } - .order-5-m { order: 5; } - .order-6-m { order: 6; } - .order-7-m { order: 7; } - .order-8-m { order: 8; } - .order-last-m { order: 99999; } - .fl-m { float: left; display: inline; } - .fr-m { float: right; display: inline; } - .fn-m { float: none; } - .i-m { font-style: italic; } - .fs-normal-m { font-style: normal; } - .normal-m { font-weight: normal; } - .b-m { font-weight: bold; } - .fw1-m { font-weight: 100; } - .fw2-m { font-weight: 200; } - .fw3-m { font-weight: 300; } - .fw4-m { font-weight: 400; } - .fw5-m { font-weight: 500; } - .fw6-m { font-weight: 600; } - .fw7-m { font-weight: 700; } - .fw8-m { font-weight: 800; } - .fw9-m { font-weight: 900; } - .h1-m { height: 1rem; } - .h2-m { height: 2rem; } - .h3-m { height: 4rem; } - .h4-m { height: 8rem; } - .h5-m { height: 16rem; } - .h-25-m { height: 25%; } - .h-50-m { height: 50%; } - .h-75-m { height: 75%; } - .h-100-m { height: 100%; } - .h-auto-m { height: auto; } - .h-inherit-m { height: inherit; } - .tracked-m { letter-spacing: .16em; } - .tracked-tight-m { letter-spacing: -.05em; } - .tracked-mega-m { letter-spacing: .32em; } - .lh-solid-m { line-height: 1; } - .lh-title-m { line-height: 1.3; } - .lh-copy-m { line-height: 1.6; } - .mw-100-m { max-width: 100%; } - .mw1-m { max-width: 1rem; } - .mw2-m { max-width: 2rem; } - .mw3-m { max-width: 4rem; } - .mw4-m { max-width: 8rem; } - .mw5-m { max-width: 16rem; } - .mw6-m { max-width: 32rem; } - .mw7-m { max-width: 48rem; } - .mw8-m { max-width: 64rem; } - .mw9-m { max-width: 96rem; } - .mw-none-m { max-width: none; } - .w1-m { width: 1rem; } - .w2-m { width: 2rem; } - .w3-m { width: 4rem; } - .w4-m { width: 8rem; } - .w5-m { width: 16rem; } - .w-10-m { width: 10%; } - .w-20-m { width: 20%; } - .w-25-m { width: 25%; } - .w-33-m { width: 33%; } - .w-34-m { width: 34%; } - .w-40-m { width: 40%; } - .w-50-m { width: 50%; } - .w-60-m { width: 60%; } - .w-75-m { width: 75%; } - .w-80-m { width: 80%; } - .w-100-m { width: 100%; } - .w-auto-m { width: auto; } - .overflow-visible-m { overflow: visible; } - .overflow-hidden-m { overflow: hidden; } - .overflow-scroll-m { overflow: scroll; } - .overflow-auto-m { overflow: auto; } - .overflow-x-visible-m { overflow-x: visible; } - .overflow-x-hidden-m { overflow-x: hidden; } - .overflow-x-scroll-m { overflow-x: scroll; } - .overflow-x-auto-m { overflow-x: auto; } - .overflow-y-visible-m { overflow-y: visible; } - .overflow-y-hidden-m { overflow-y: hidden; } - .overflow-y-scroll-m { overflow-y: scroll; } - .overflow-y-auto-m { overflow-y: auto; } - .static-m { position: static; } - .relative-m { position: relative; } - .absolute-m { position: absolute; } - .fixed-m { position: fixed; } - .pa0-m { padding: 0; } - .pa1-m { padding: .25rem; } - .pa2-m { padding: .5rem; } - .pa3-m { padding: 1rem; } - .pa4-m { padding: 2rem; } - .pa5-m { padding: 4rem; } - .pa6-m { padding: 8rem; } - .pa7-m { padding: 16rem; } - .pl0-m { padding-left: 0; } - .pl1-m { padding-left: .25rem; } - .pl2-m { padding-left: .5rem; } - .pl3-m { padding-left: 1rem; } - .pl4-m { padding-left: 2rem; } - .pl5-m { padding-left: 4rem; } - .pl6-m { padding-left: 8rem; } - .pl7-m { padding-left: 16rem; } - .pr0-m { padding-right: 0; } - .pr1-m { padding-right: .25rem; } - .pr2-m { padding-right: .5rem; } - .pr3-m { padding-right: 1rem; } - .pr4-m { padding-right: 2rem; } - .pr5-m { padding-right: 4rem; } - .pr6-m { padding-right: 8rem; } - .pr7-m { padding-right: 16rem; } - .pb0-m { padding-bottom: 0; } - .pb1-m { padding-bottom: .25rem; } - .pb2-m { padding-bottom: .5rem; } - .pb3-m { padding-bottom: 1rem; } - .pb4-m { padding-bottom: 2rem; } - .pb5-m { padding-bottom: 4rem; } - .pb6-m { padding-bottom: 8rem; } - .pb7-m { padding-bottom: 16rem; } - .pt0-m { padding-top: 0; } - .pt1-m { padding-top: .25rem; } - .pt2-m { padding-top: .5rem; } - .pt3-m { padding-top: 1rem; } - .pt4-m { padding-top: 2rem; } - .pt5-m { padding-top: 4rem; } - .pt6-m { padding-top: 8rem; } - .pt7-m { padding-top: 16rem; } - .pv0-m { padding-top: 0; padding-bottom: 0; } - .pv1-m { padding-top: .25rem; padding-bottom: .25rem; } - .pv2-m { padding-top: .5rem; padding-bottom: .5rem; } - .pv3-m { padding-top: 1rem; padding-bottom: 1rem; } - .pv4-m { padding-top: 2rem; padding-bottom: 2rem; } - .pv5-m { padding-top: 4rem; padding-bottom: 4rem; } - .pv6-m { padding-top: 8rem; padding-bottom: 8rem; } - .pv7-m { padding-top: 16rem; padding-bottom: 16rem; } - .ph0-m { padding-left: 0; padding-right: 0; } - .ph1-m { padding-left: .25rem; padding-right: .25rem; } - .ph2-m { padding-left: .5rem; padding-right: .5rem; } - .ph3-m { padding-left: 1rem; padding-right: 1rem; } - .ph4-m { padding-left: 2rem; padding-right: 2rem; } - .ph5-m { padding-left: 4rem; padding-right: 4rem; } - .ph6-m { padding-left: 8rem; padding-right: 8rem; } - .ph7-m { padding-left: 16rem; padding-right: 16rem; } - .ma0-m { margin: 0; } - .ma1-m { margin: .25rem; } - .ma2-m { margin: .5rem; } - .ma3-m { margin: 1rem; } - .ma4-m { margin: 2rem; } - .ma5-m { margin: 4rem; } - .ma6-m { margin: 8rem; } - .ma7-m { margin: 16rem; } - .ml0-m { margin-left: 0; } - .ml1-m { margin-left: .25rem; } - .ml2-m { margin-left: .5rem; } - .ml3-m { margin-left: 1rem; } - .ml4-m { margin-left: 2rem; } - .ml5-m { margin-left: 4rem; } - .ml6-m { margin-left: 8rem; } - .ml7-m { margin-left: 16rem; } - .mr0-m { margin-right: 0; } - .mr1-m { margin-right: .25rem; } - .mr2-m { margin-right: .5rem; } - .mr3-m { margin-right: 1rem; } - .mr4-m { margin-right: 2rem; } - .mr5-m { margin-right: 4rem; } - .mr6-m { margin-right: 8rem; } - .mr7-m { margin-right: 16rem; } - .mb0-m { margin-bottom: 0; } - .mb1-m { margin-bottom: .25rem; } - .mb2-m { margin-bottom: .5rem; } - .mb3-m { margin-bottom: 1rem; } - .mb4-m { margin-bottom: 2rem; } - .mb5-m { margin-bottom: 4rem; } - .mb6-m { margin-bottom: 8rem; } - .mb7-m { margin-bottom: 16rem; } - .mt0-m { margin-top: 0; } - .mt1-m { margin-top: .25rem; } - .mt2-m { margin-top: .5rem; } - .mt3-m { margin-top: 1rem; } - .mt4-m { margin-top: 2rem; } - .mt5-m { margin-top: 4rem; } - .mt6-m { margin-top: 8rem; } - .mt7-m { margin-top: 16rem; } - .mv0-m { margin-top: 0; margin-bottom: 0; } - .mv1-m { margin-top: .25rem; margin-bottom: .25rem; } - .mv2-m { margin-top: .5rem; margin-bottom: .5rem; } - .mv3-m { margin-top: 1rem; margin-bottom: 1rem; } - .mv4-m { margin-top: 2rem; margin-bottom: 2rem; } - .mv5-m { margin-top: 4rem; margin-bottom: 4rem; } - .mv6-m { margin-top: 8rem; margin-bottom: 8rem; } - .mv7-m { margin-top: 16rem; margin-bottom: 16rem; } - .mh0-m { margin-left: 0; margin-right: 0; } - .mh1-m { margin-left: .25rem; margin-right: .25rem; } - .mh2-m { margin-left: .5rem; margin-right: .5rem; } - .mh3-m { margin-left: 1rem; margin-right: 1rem; } - .mh4-m { margin-left: 2rem; margin-right: 2rem; } - .mh5-m { margin-left: 4rem; margin-right: 4rem; } - .mh6-m { margin-left: 8rem; margin-right: 8rem; } - .mh7-m { margin-left: 16rem; margin-right: 16rem; } - .strike-m { text-decoration: line-through; } - .underline-m { text-decoration: underline; } - .no-underline-m { text-decoration: none; } - .tl-m { text-align: left; } - .tr-m { text-align: right; } - .tc-m { text-align: center; } - .ttc-m { text-transform: capitalize; } - .ttl-m { text-transform: lowercase; } - .ttu-m { text-transform: uppercase; } - .ttn-m { text-transform: none; } - .f-6-m, .f-headline-m { font-size: 6rem; } - .f-5-m, .f-subheadline-m { font-size: 5rem; } - .f1-m { font-size: 3rem; } - .f2-m { font-size: 2.25rem; } - .f3-m { font-size: 1.5rem; } - .f4-m { font-size: 1.25rem; } - .f5-m { font-size: 1rem; } - .f6-m { font-size: .875rem; } - .measure-m { max-width: 30em; } - .measure-wide-m { max-width: 34em; } - .measure-narrow-m { max-width: 20em; } - .indent-m { text-indent: 1em; margin-top: 0; margin-bottom: 0; } - .small-caps-m { font-variant: small-caps; } - .truncate-m { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } - .clip-m { position: fixed !important; position: absolute !important; clip: rect( 1px 1px 1px 1px ); /* IE6, IE7 */ clip: rect( 1px, 1px, 1px, 1px ); } - .ws-normal-m { white-space: normal; } - .nowrap-m { white-space: nowrap; } - .pre-m { white-space: pre; } - .v-base-m { vertical-align: baseline; } - .v-mid-m { vertical-align: middle; } - .v-top-m { vertical-align: top; } - .v-btm-m { vertical-align: bottom; } -} -@media screen and (min-width: 60em) { - .cover-l { background-size: cover; } - .contain-l { background-size: contain; } - .ba-l { border-style: solid; border-width: 1px; } - .bt-l { border-top-style: solid; border-top-width: 1px; } - .br-l { border-right-style: solid; border-right-width: 1px; } - .bb-l { border-bottom-style: solid; border-bottom-width: 1px; } - .bl-l { border-left-style: solid; border-left-width: 1px; } - .bn-l { border-style: none; border-width: 0; } - .br0-l { border-radius: 0; } - .br1-l { border-radius: .125rem; } - .br2-l { border-radius: .25rem; } - .br3-l { border-radius: .5rem; } - .br4-l { border-radius: 1rem; } - .br-100-l { border-radius: 100%; } - .br--bottom-l { border-radius-top-left: 0; border-radius-top-right: 0; } - .br--top-l { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } - .br--right-l { border-top-left-radius: 0; border-bottom-left-radius: 0; } - .br--left-l { border-top-right-radius: 0; border-bottom-right-radius: 0; } - .b--dotted-l { border-style: dotted; } - .b--dashed-l { border-style: dashed; } - .b--solid-l { border-style: solid; } - .b--none-l { border-style: none; } - .bw0-l { border-width: 0; } - .bw1-l { border-width: .125rem; } - .bw2-l { border-width: .25rem; } - .bw3-l { border-width: .5rem; } - .bw4-l { border-width: 1rem; } - .bw5-l { border-width: 2rem; } - .bt-0-l { border-top-width: 0; } - .br-0-l { border-right-width: 0; } - .bb-0-l { border-bottom-width: 0; } - .bl-0-l { border-left-width: 0; } - .shadow-1-l { box-shadow: 0px 0px 4px 2px rgba( 0, 0, 0, 0.2 ); } - .shadow-2-l { box-shadow: 0px 0px 8px 2px rgba( 0, 0, 0, 0.2 ); } - .shadow-3-l { box-shadow: 2px 2px 4px 2px rgba( 0, 0, 0, 0.2 ); } - .shadow-4-l { box-shadow: 2px 2px 8px 0px rgba( 0, 0, 0, 0.2 ); } - .shadow-5-l { box-shadow: 4px 4px 8px 0px rgba( 0, 0, 0, 0.2 ); } - .top-0-l { top: 0; } - .left-0-l { left: 0; } - .right-0-l { right: 0; } - .bottom-0-l { bottom: 0; } - .top-1-l { top: 1rem; } - .left-1-l { left: 1rem; } - .right-1-l { right: 1rem; } - .bottom-1-l { bottom: 1rem; } - .top-2-l { top: 2rem; } - .left-2-l { left: 2rem; } - .right-2-l { right: 2rem; } - .bottom-2-l { bottom: 2rem; } - .top--1-l { top: -1rem; } - .right--1-l { right: -1rem; } - .bottom--1-l { bottom: -1rem; } - .left--1-l { left: -1rem; } - .top--2-l { top: -2rem; } - .right--2-l { right: -2rem; } - .bottom--2-l { bottom: -2rem; } - .left--2-l { left: -2rem; } - .absolute--fill-l { top: 0; right: 0; bottom: 0; left: 0; } - .cl-l { clear: left; } - .cr-l { clear: right; } - .cb-l { clear: both; } - .cn-l { clear: none; } - .dn-l { display: none; } - .di-l { display: inline; } - .db-l { display: block; } - .dib-l { display: inline-block; } - .dit-l { display: inline-table; } - .dt-l { display: table; } - .dtc-l { display: table-cell; } - .dt-row-l { display: table-row; } - .dt-row-group-l { display: table-row-group; } - .dt-column-l { display: table-column; } - .dt-column-group-l { display: table-column-group; } - .dt--fixed-l { table-layout: fixed; width: 100%; } - .flex-l { display: flex; } - .flex-auto-l { flex: 1 1 auto; min-width: 0; /* 1 */ min-height: 0; /* 1 */ } - .flex-none-l { flex: none; } - .flex-column-l { flex-direction: column; } - .flex-wrap-l { flex-wrap: wrap; } - .items-start-l { align-items: flex-start; } - .items-end-l { align-items: flex-end; } - .items-center-l { align-items: center; } - .items-baseline-l { align-items: baseline; } - .items-stretch-l { align-items: stretch; } - .self-start-l { align-self: flex-start; } - .self-end-l { align-self: flex-end; } - .self-center-l { align-self: center; } - .self-baseline-l { align-self: baseline; } - .self-stretch-l { align-self: stretch; } - .justify-start-l { justify-content: flex-start; } - .justify-end-l { justify-content: flex-end; } - .justify-center-l { justify-content: center; } - .justify-between-l { justify-content: space-between; } - .justify-around-l { justify-content: space-around; } - .content-start-l { align-content: flex-start; } - .content-end-l { align-content: flex-end; } - .content-center-l { align-content: center; } - .content-between-l { align-content: space-between; } - .content-around-l { align-content: space-around; } - .content-stretch-l { align-content: stretch; } - .order-0-l { order: 0; } - .order-1-l { order: 1; } - .order-2-l { order: 2; } - .order-3-l { order: 3; } - .order-4-l { order: 4; } - .order-5-l { order: 5; } - .order-6-l { order: 6; } - .order-7-l { order: 7; } - .order-8-l { order: 8; } - .order-last-l { order: 99999; } - .fl-l { float: left; display: inline; } - .fr-l { float: right; display: inline; } - .fn-l { float: none; } - .i-l { font-style: italic; } - .fs-normal-l { font-style: normal; } - .normal-l { font-weight: normal; } - .b-l { font-weight: bold; } - .fw1-l { font-weight: 100; } - .fw2-l { font-weight: 200; } - .fw3-l { font-weight: 300; } - .fw4-l { font-weight: 400; } - .fw5-l { font-weight: 500; } - .fw6-l { font-weight: 600; } - .fw7-l { font-weight: 700; } - .fw8-l { font-weight: 800; } - .fw9-l { font-weight: 900; } - .h1-l { height: 1rem; } - .h2-l { height: 2rem; } - .h3-l { height: 4rem; } - .h4-l { height: 8rem; } - .h5-l { height: 16rem; } - .h-25-l { height: 25%; } - .h-50-l { height: 50%; } - .h-75-l { height: 75%; } - .h-100-l { height: 100%; } - .h-auto-l { height: auto; } - .h-inherit-l { height: inherit; } - .tracked-l { letter-spacing: .16em; } - .tracked-tight-l { letter-spacing: -.05em; } - .tracked-mega-l { letter-spacing: .32em; } - .lh-solid-l { line-height: 1; } - .lh-title-l { line-height: 1.3; } - .lh-copy-l { line-height: 1.6; } - .mw-100-l { max-width: 100%; } - .mw1-l { max-width: 1rem; } - .mw2-l { max-width: 2rem; } - .mw3-l { max-width: 4rem; } - .mw4-l { max-width: 8rem; } - .mw5-l { max-width: 16rem; } - .mw6-l { max-width: 32rem; } - .mw7-l { max-width: 48rem; } - .mw8-l { max-width: 64rem; } - .mw9-l { max-width: 96rem; } - .mw-none-l { max-width: none; } - .w1-l { width: 1rem; } - .w2-l { width: 2rem; } - .w3-l { width: 4rem; } - .w4-l { width: 8rem; } - .w5-l { width: 16rem; } - .w-10-l { width: 10%; } - .w-20-l { width: 20%; } - .w-25-l { width: 25%; } - .w-33-l { width: 33%; } - .w-34-l { width: 34%; } - .w-40-l { width: 40%; } - .w-50-l { width: 50%; } - .w-60-l { width: 60%; } - .w-75-l { width: 75%; } - .w-80-l { width: 80%; } - .w-100-l { width: 100%; } - .w-auto-l { width: auto; } - .overflow-visible-l { overflow: visible; } - .overflow-hidden-l { overflow: hidden; } - .overflow-scroll-l { overflow: scroll; } - .overflow-auto-l { overflow: auto; } - .overflow-x-visible-l { overflow-x: visible; } - .overflow-x-hidden-l { overflow-x: hidden; } - .overflow-x-scroll-l { overflow-x: scroll; } - .overflow-x-auto-l { overflow-x: auto; } - .overflow-y-visible-l { overflow-y: visible; } - .overflow-y-hidden-l { overflow-y: hidden; } - .overflow-y-scroll-l { overflow-y: scroll; } - .overflow-y-auto-l { overflow-y: auto; } - .static-l { position: static; } - .relative-l { position: relative; } - .absolute-l { position: absolute; } - .fixed-l { position: fixed; } - .pa0-l { padding: 0; } - .pa1-l { padding: .25rem; } - .pa2-l { padding: .5rem; } - .pa3-l { padding: 1rem; } - .pa4-l { padding: 2rem; } - .pa5-l { padding: 4rem; } - .pa6-l { padding: 8rem; } - .pa7-l { padding: 16rem; } - .pl0-l { padding-left: 0; } - .pl1-l { padding-left: .25rem; } - .pl2-l { padding-left: .5rem; } - .pl3-l { padding-left: 1rem; } - .pl4-l { padding-left: 2rem; } - .pl5-l { padding-left: 4rem; } - .pl6-l { padding-left: 8rem; } - .pl7-l { padding-left: 16rem; } - .pr0-l { padding-right: 0; } - .pr1-l { padding-right: .25rem; } - .pr2-l { padding-right: .5rem; } - .pr3-l { padding-right: 1rem; } - .pr4-l { padding-right: 2rem; } - .pr5-l { padding-right: 4rem; } - .pr6-l { padding-right: 8rem; } - .pr7-l { padding-right: 16rem; } - .pb0-l { padding-bottom: 0; } - .pb1-l { padding-bottom: .25rem; } - .pb2-l { padding-bottom: .5rem; } - .pb3-l { padding-bottom: 1rem; } - .pb4-l { padding-bottom: 2rem; } - .pb5-l { padding-bottom: 4rem; } - .pb6-l { padding-bottom: 8rem; } - .pb7-l { padding-bottom: 16rem; } - .pt0-l { padding-top: 0; } - .pt1-l { padding-top: .25rem; } - .pt2-l { padding-top: .5rem; } - .pt3-l { padding-top: 1rem; } - .pt4-l { padding-top: 2rem; } - .pt5-l { padding-top: 4rem; } - .pt6-l { padding-top: 8rem; } - .pt7-l { padding-top: 16rem; } - .pv0-l { padding-top: 0; padding-bottom: 0; } - .pv1-l { padding-top: .25rem; padding-bottom: .25rem; } - .pv2-l { padding-top: .5rem; padding-bottom: .5rem; } - .pv3-l { padding-top: 1rem; padding-bottom: 1rem; } - .pv4-l { padding-top: 2rem; padding-bottom: 2rem; } - .pv5-l { padding-top: 4rem; padding-bottom: 4rem; } - .pv6-l { padding-top: 8rem; padding-bottom: 8rem; } - .pv7-l { padding-top: 16rem; padding-bottom: 16rem; } - .ph0-l { padding-left: 0; padding-right: 0; } - .ph1-l { padding-left: .25rem; padding-right: .25rem; } - .ph2-l { padding-left: .5rem; padding-right: .5rem; } - .ph3-l { padding-left: 1rem; padding-right: 1rem; } - .ph4-l { padding-left: 2rem; padding-right: 2rem; } - .ph5-l { padding-left: 4rem; padding-right: 4rem; } - .ph6-l { padding-left: 8rem; padding-right: 8rem; } - .ph7-l { padding-left: 16rem; padding-right: 16rem; } - .ma0-l { margin: 0; } - .ma1-l { margin: .25rem; } - .ma2-l { margin: .5rem; } - .ma3-l { margin: 1rem; } - .ma4-l { margin: 2rem; } - .ma5-l { margin: 4rem; } - .ma6-l { margin: 8rem; } - .ma7-l { margin: 16rem; } - .ml0-l { margin-left: 0; } - .ml1-l { margin-left: .25rem; } - .ml2-l { margin-left: .5rem; } - .ml3-l { margin-left: 1rem; } - .ml4-l { margin-left: 2rem; } - .ml5-l { margin-left: 4rem; } - .ml6-l { margin-left: 8rem; } - .ml7-l { margin-left: 16rem; } - .mr0-l { margin-right: 0; } - .mr1-l { margin-right: .25rem; } - .mr2-l { margin-right: .5rem; } - .mr3-l { margin-right: 1rem; } - .mr4-l { margin-right: 2rem; } - .mr5-l { margin-right: 4rem; } - .mr6-l { margin-right: 8rem; } - .mr7-l { margin-right: 16rem; } - .mb0-l { margin-bottom: 0; } - .mb1-l { margin-bottom: .25rem; } - .mb2-l { margin-bottom: .5rem; } - .mb3-l { margin-bottom: 1rem; } - .mb4-l { margin-bottom: 2rem; } - .mb5-l { margin-bottom: 4rem; } - .mb6-l { margin-bottom: 8rem; } - .mb7-l { margin-bottom: 16rem; } - .mt0-l { margin-top: 0; } - .mt1-l { margin-top: .25rem; } - .mt2-l { margin-top: .5rem; } - .mt3-l { margin-top: 1rem; } - .mt4-l { margin-top: 2rem; } - .mt5-l { margin-top: 4rem; } - .mt6-l { margin-top: 8rem; } - .mt7-l { margin-top: 16rem; } - .mv0-l { margin-top: 0; margin-bottom: 0; } - .mv1-l { margin-top: .25rem; margin-bottom: .25rem; } - .mv2-l { margin-top: .5rem; margin-bottom: .5rem; } - .mv3-l { margin-top: 1rem; margin-bottom: 1rem; } - .mv4-l { margin-top: 2rem; margin-bottom: 2rem; } - .mv5-l { margin-top: 4rem; margin-bottom: 4rem; } - .mv6-l { margin-top: 8rem; margin-bottom: 8rem; } - .mv7-l { margin-top: 16rem; margin-bottom: 16rem; } - .mh0-l { margin-left: 0; margin-right: 0; } - .mh1-l { margin-left: .25rem; margin-right: .25rem; } - .mh2-l { margin-left: .5rem; margin-right: .5rem; } - .mh3-l { margin-left: 1rem; margin-right: 1rem; } - .mh4-l { margin-left: 2rem; margin-right: 2rem; } - .mh5-l { margin-left: 4rem; margin-right: 4rem; } - .mh6-l { margin-left: 8rem; margin-right: 8rem; } - .mh7-l { margin-left: 16rem; margin-right: 16rem; } - .strike-l { text-decoration: line-through; } - .underline-l { text-decoration: underline; } - .no-underline-l { text-decoration: none; } - .tl-l { text-align: left; } - .tr-l { text-align: right; } - .tc-l { text-align: center; } - .ttc-l { text-transform: capitalize; } - .ttl-l { text-transform: lowercase; } - .ttu-l { text-transform: uppercase; } - .ttn-l { text-transform: none; } - .f-6-l, .f-headline-l { font-size: 6rem; } - .f-5-l, .f-subheadline-l { font-size: 5rem; } - .f1-l { font-size: 3rem; } - .f2-l { font-size: 2.25rem; } - .f3-l { font-size: 1.5rem; } - .f4-l { font-size: 1.25rem; } - .f5-l { font-size: 1rem; } - .f6-l { font-size: .875rem; } - .measure-l { max-width: 30em; } - .measure-wide-l { max-width: 34em; } - .measure-narrow-l { max-width: 20em; } - .indent-l { text-indent: 1em; margin-top: 0; margin-bottom: 0; } - .small-caps-l { font-variant: small-caps; } - .truncate-l { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } - .clip-l { position: fixed !important; position: absolute !important; clip: rect( 1px 1px 1px 1px ); /* IE6, IE7 */ clip: rect( 1px, 1px, 1px, 1px ); } - .ws-normal-l { white-space: normal; } - .nowrap-l { white-space: nowrap; } - .pre-l { white-space: pre; } - .v-base-l { vertical-align: baseline; } - .v-mid-l { vertical-align: middle; } - .v-top-l { vertical-align: top; } - .v-btm-l { vertical-align: bottom; } -} - diff --git a/public/sass/poole.scss b/public/sass/poole.scss deleted file mode 100644 index 14f0409..0000000 --- a/public/sass/poole.scss +++ /dev/null @@ -1,382 +0,0 @@ -/* - * ___ - * /\_ \ - * _____ ___ ___\//\ \ __ - * /\ '__`\ / __`\ / __`\\ \ \ /'__`\ - * \ \ \_\ \/\ \_\ \/\ \_\ \\_\ \_/\ __/ - * \ \ ,__/\ \____/\ \____//\____\ \____\ - * \ \ \/ \/___/ \/___/ \/____/\/____/ - * \ \_\ - * \/_/ - * - * Designed, built, and released under MIT license by @mdo. Learn more at - * https://github.com/poole/poole. - */ - - -/* - * Contents - * - * Body resets - * Custom type - * Messages - * Container - * Masthead - * Posts and pages - * Pagination - * Reverse layout - * Themes - */ - - -/* - * Body resets - * - * Update the foundational and global aspects of the page. - */ - -* { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; -} - -html, -body { - margin: 0; - padding: 0; -} - -html { - font-family: $serif; - font-size: 20px; - line-height: 1.5; - - @media (min-width: 38rem) { - font-size: 28px; - } -} - - -body { - color: #515151; - background-color: #ffffff; - font-family: $serif; - -webkit-text-size-adjust: 100%; - -ms-text-size-adjust: 100%; - -} - -/* No `:visited` state is required by default (browsers will use `a`) */ -a { - color: #e91e63; -} -a strong { - color: inherit; -} -/* `:focus` is linked to `:hover` for basic accessibility */ -a:hover { - color: #fff; - background-color: #e91e63; -} - -a:focus { - text-decoration: none; - outline: 5px solid #e91e63; -} - -/* Headings */ -h1, h2, h3, h4, h5, h6 { - margin-bottom: .5rem; - font-family: $sans-serif; - line-height: 1.25; - color: #313131; - text-rendering: optimizeLegibility; -} -h1 { - font-size: 2rem; -} -h2 { - margin-top: 1rem; - font-size: 1.5rem; -} -h3 { - margin-top: 1.5rem; - font-size: 1.25rem; -} -h4, h5, h6 { - margin-top: 1rem; - font-size: 1rem; -} - -/* Body text */ -p { - margin-top: 0; - margin-bottom: 1rem; -} - -strong { - color: #303030; -} - - -/* Lists */ -ul, ol, dl { - margin-top: 0; - margin-bottom: 1rem; -} - -dt { - font-weight: bold; -} -dd { - margin-bottom: .5rem; -} - -/* Misc */ -hr { - position: relative; - margin: 1.5rem 0; - border: 0; - border-top: 1px solid #eee; - border-bottom: 1px solid #fff; -} - -abbr { - font-size: 85%; - font-weight: bold; - color: #555; - text-transform: uppercase; -} -abbr[title] { - cursor: help; - border-bottom: 1px dotted #e5e5e5; -} - -/* Code */ -code, -pre { - font-family: Menlo, Monaco, "Courier New", monospace; -} -code { - padding: .25em .5em; - font-size: 85%; - color: #bf616a; - background-color: #f9f9f9; - border-radius: 3px; -} -pre { - display: block; - margin-top: 0; - margin-bottom: 1rem; - padding: 1rem; - font-size: .8rem; - line-height: 1.4; - white-space: pre; - white-space: pre-wrap; - word-break: break-all; - word-wrap: break-word; - background-color: #f9f9f9; -} -pre code { - padding: 0; - font-size: 100%; - color: inherit; - background-color: transparent; -} - -/* Pygments via Jekyll */ -.highlight { - margin: 0 0 1rem; -} -.highlight pre { - margin-bottom: 0; -} - -/* Gist via GitHub Pages */ -.gist .gist-file { - font-family: Menlo, Monaco, "Courier New", monospace !important; -} -.gist .markdown-body { - padding: 15px; -} -.gist pre { - padding: 0; - background-color: transparent; -} -.gist .gist-file .gist-data { - font-size: .8rem !important; - line-height: 1.4; -} -.gist code { - padding: 0; - color: inherit; - background-color: transparent; - border-radius: 0; -} - -/* Quotes */ -blockquote { - padding: .5rem 1rem; - margin: .8rem 0; - color: #7a7a7a; - border-left: .25rem solid #e5e5e5; -} -blockquote p:last-child { - margin-bottom: 0; -} -@media (min-width: 38rem) { - blockquote { - padding-right: 5rem; - padding-left: 1.25rem; - } -} - -img { - display: block; - max-width: 100%; - margin: 0 0 1rem; - border-radius: 5px; -} - -/* Tables */ -table { - margin-bottom: 1rem; - width: 100%; - border: 1px solid #e5e5e5; - border-collapse: collapse; -} -td, -th { - padding: .25rem .5rem; - border: 1px solid #e5e5e5; -} -tbody tr:nth-child(odd) td, -tbody tr:nth-child(odd) th { - background-color: #f9f9f9; -} - - -/* - * Custom type - * - * Extend paragraphs with `.lead` for larger introductory text. - */ - -.lead { - font-size: 1.1rem; - font-style: italic; - font-weight: 300; -} - - -/* - * Messages - * - * Show alert messages to users. You may add it to single elements like a `

`, - * or to a parent if there are multiple elements to show. - */ - -.message { - margin-bottom: 1rem; - padding: 1rem; - color: #717171; - background-color: #f9f9f9; -} - - -/* - * Container - * - */ - -.container { - margin: auto; - max-width: 38rem; - - @media (max-width: 38rem) { - padding: 0 1rem; - } -} - -.navigation-menu { - padding: 0; - font-family: $sans-serif; -} - -.nav-link:first-child { - padding: 0 0.625em 0 0; -} - -.nav-link { - display: table-cell; - padding: 0 0.625em; -} - -/* - * Posts and pages - * - * Each post is wrapped in `.post` and is used on default and post layouts. Each - * page is wrapped in `.page` and is only used on the page layout. - */ - -.page, -.post { - margin-bottom: 4em; -} - -/* Blog post or page title */ -.post__info { - text-align: center; -} - -.post__title > a { - text-decoration: none; -} -.page-title, -.post__title { - color: #303030; - margin-top: 0; - font-size: 2.5rem; - line-height: 1.15; -} - -/* Meta data line below post title */ -.post__tags, -.post__date { - display: block; - font-family: $sans-serif; - margin-top: -.5rem; - margin-bottom: 1rem; - color: #9a9a9a; -} - -/* Related posts */ -.related { - padding-top: 2rem; - padding-bottom: 2rem; - border-top: 1px solid #eee; -} -.related-posts { - padding-left: 0; - list-style: none; -} -.related-posts h3 { - margin-top: 0; -} -.related-posts li small { - font-size: 75%; - color: #999; -} -.related-posts li a:hover { - color: #268bd2; - text-decoration: none; -} -.related-posts li a:hover small { - color: inherit; -} - -.footer { - margin: 1em auto; - text-align: center; -} diff --git a/public/sass/styles.scss b/public/sass/styles.scss deleted file mode 100644 index eb19b4f..0000000 --- a/public/sass/styles.scss +++ /dev/null @@ -1,7 +0,0 @@ -@import 'variables'; -@import 'badges'; -@import 'syntax'; -@import 'poole'; -@import 'masthead'; -@import 'pagination'; - diff --git a/public/sass/syntax.scss b/public/sass/syntax.scss deleted file mode 100644 index 1264b87..0000000 --- a/public/sass/syntax.scss +++ /dev/null @@ -1,66 +0,0 @@ -.hll { background-color: #ffffcc } - /*{ background: #f0f3f3; }*/ -.c { color: #999; } /* Comment */ -.err { color: #AA0000; background-color: #FFAAAA } /* Error */ -.k { color: #006699; } /* Keyword */ -.o { color: #555555 } /* Operator */ -.cm { color: #0099FF; font-style: italic } /* Comment.Multiline */ -.cp { color: #009999 } /* Comment.Preproc */ -.c1 { color: #999; } /* Comment.Single */ -.cs { color: #999; } /* Comment.Special */ -.gd { background-color: #FFCCCC; border: 1px solid #CC0000 } /* Generic.Deleted */ -.ge { font-style: italic } /* Generic.Emph */ -.gr { color: #FF0000 } /* Generic.Error */ -.gh { color: #003300; } /* Generic.Heading */ -.gi { background-color: #CCFFCC; border: 1px solid #00CC00 } /* Generic.Inserted */ -.go { color: #AAAAAA } /* Generic.Output */ -.gp { color: #000099; } /* Generic.Prompt */ -.gs { } /* Generic.Strong */ -.gu { color: #003300; } /* Generic.Subheading */ -.gt { color: #99CC66 } /* Generic.Traceback */ -.kc { color: #006699; } /* Keyword.Constant */ -.kd { color: #006699; } /* Keyword.Declaration */ -.kn { color: #006699; } /* Keyword.Namespace */ -.kp { color: #006699 } /* Keyword.Pseudo */ -.kr { color: #006699; } /* Keyword.Reserved */ -.kt { color: #007788; } /* Keyword.Type */ -.m { color: #FF6600 } /* Literal.Number */ -.s { color: #d44950 } /* Literal.String */ -.na { color: #4f9fcf } /* Name.Attribute */ -.nb { color: #336666 } /* Name.Builtin */ -.nc { color: #00AA88; } /* Name.Class */ -.no { color: #336600 } /* Name.Constant */ -.nd { color: #9999FF } /* Name.Decorator */ -.ni { color: #999999; } /* Name.Entity */ -.ne { color: #CC0000; } /* Name.Exception */ -.nf { color: #CC00FF } /* Name.Function */ -.nl { color: #9999FF } /* Name.Label */ -.nn { color: #00CCFF; } /* Name.Namespace */ -.nt { color: #2f6f9f; } /* Name.Tag */ -.nv { color: #003333 } /* Name.Variable */ -.ow { color: #000000; } /* Operator.Word */ -.w { color: #bbbbbb } /* Text.Whitespace */ -.mf { color: #FF6600 } /* Literal.Number.Float */ -.mh { color: #FF6600 } /* Literal.Number.Hex */ -.mi { color: #FF6600 } /* Literal.Number.Integer */ -.mo { color: #FF6600 } /* Literal.Number.Oct */ -.sb { color: #CC3300 } /* Literal.String.Backtick */ -.sc { color: #CC3300 } /* Literal.String.Char */ -.sd { color: #CC3300; font-style: italic } /* Literal.String.Doc */ -.s2 { color: #CC3300 } /* Literal.String.Double */ -.se { color: #CC3300; } /* Literal.String.Escape */ -.sh { color: #CC3300 } /* Literal.String.Heredoc */ -.si { color: #AA0000 } /* Literal.String.Interpol */ -.sx { color: #CC3300 } /* Literal.String.Other */ -.sr { color: #33AAAA } /* Literal.String.Regex */ -.s1 { color: #CC3300 } /* Literal.String.Single */ -.ss { color: #FFCC33 } /* Literal.String.Symbol */ -.bp { color: #336666 } /* Name.Builtin.Pseudo */ -.vc { color: #003333 } /* Name.Variable.Class */ -.vg { color: #003333 } /* Name.Variable.Global */ -.vi { color: #003333 } /* Name.Variable.Instance */ -.il { color: #FF6600 } /* Literal.Number.Integer.Long */ - -.css .o, -.css .o + .nt, -.css .nt + .nt { color: #999; } diff --git a/src/404.md b/src/404.md deleted file mode 100644 index eccd5a4..0000000 --- a/src/404.md +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: '404 - not found' -layout: layouts/page.njk -permalink: 404.html -eleventyExcludeFromCollections: true ---- - -We’re sorry, but that content can’t be found. Please go [back to home](/). - -{% comment %} -Read more: https://www.11ty.io/docs/quicktips/not-found/ - -This will work for both GitHub pages and Netlify: - -- https://help.github.com/articles/creating-a-custom-404-page-for-your-github-pages-site/ -- https://www.netlify.com/docs/redirects/#custom-404 - {% endcomment %} diff --git a/src/_data/global.js b/src/_data/global.js deleted file mode 100644 index 2b74178..0000000 --- a/src/_data/global.js +++ /dev/null @@ -1,9 +0,0 @@ -module.exports = { - random() { - const segment = () => { - return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1); - }; - return `${segment()}-${segment()}-${segment()}`; - }, - now: Date.now(), -}; diff --git a/src/_data/helpers.js b/src/_data/helpers.js deleted file mode 100644 index fcfb6c1..0000000 --- a/src/_data/helpers.js +++ /dev/null @@ -1,10 +0,0 @@ -module.exports = { - getNextHeadingLevel(currentLevel) { - return parseInt(currentLevel, 10) + 1; - }, - getReadingTime(text) { - const wordsPerMinute = 200; - const numberOfWords = text.split(/\s/g).length; - return Math.ceil(numberOfWords / wordsPerMinute); - }, -}; diff --git a/src/_data/navigation.json b/src/_data/navigation.json deleted file mode 100644 index d3f36ec..0000000 --- a/src/_data/navigation.json +++ /dev/null @@ -1,9 +0,0 @@ -{ - "items": [ - { - "text": "Contact", - "url": "/contact", - "external": false - } - ] -} diff --git a/src/_data/site.json b/src/_data/site.json deleted file mode 100644 index 0357f96..0000000 --- a/src/_data/site.json +++ /dev/null @@ -1,15 +0,0 @@ -{ - "showThemeCredit": false, - "name": "Dan Matthew", - "shortDesc": "Articles on web accessibility and front-end development.", - "url": "https://danmatthew.co.uk", - "authorEmail": "dan.matthew@hey.com", - "authorHandle": "@danielm", - "authorName": "Dan Matthew", - "enableThirdPartyComments": false, - "paymentPointer": "", - "faviconPath": "/images/favicon.svg", - "faviconFallbackPath": "/images/favicon.ico", - "safariPinnedTabPath": "/images/safari-pinned-tab.svg", - "maxPostsPerPage": 10 -} diff --git a/src/_data/styleguide.js b/src/_data/styleguide.js deleted file mode 100644 index 8cc3baf..0000000 --- a/src/_data/styleguide.js +++ /dev/null @@ -1,28 +0,0 @@ -const tokens = require("./tokens.json"); - -module.exports = { - colors() { - let response = []; - - Object.keys(tokens.colors).forEach((key) => { - response.push({ - value: tokens.colors[key], - key, - }); - }); - - return response; - }, - sizes() { - let response = []; - - Object.keys(tokens["size-scale"]).forEach((key) => { - response.push({ - value: tokens["size-scale"][key], - key, - }); - }); - - return response; - }, -}; diff --git a/src/_data/tokens.json b/src/_data/tokens.json deleted file mode 100644 index 50df826..0000000 --- a/src/_data/tokens.json +++ /dev/null @@ -1,26 +0,0 @@ -{ - "size-scale": { - "base": "1rem", - "300": "0.8rem", - "500": "1.25rem", - "600": "1.56rem", - "700": "1.95rem", - "800": "2.44rem", - "900": "3.05rem", - "max": "4rem" - }, - "colors": { - "primary": "#173854", - "primary-shade": "#102538", - "primary-glare": "#22547c", - "highlight": "#fedb8b", - "light": "#ffffff", - "mid": "#cccccc", - "dark": "#333333", - "slate": "#404040" - }, - "fonts": { - "base": "\"sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'\"", - "serif": "\"serif\"" - } -} diff --git a/src/admin.njk b/src/admin.njk deleted file mode 100644 index 2aad01a..0000000 --- a/src/admin.njk +++ /dev/null @@ -1,25 +0,0 @@ ---- -permalink: '/admin/index.html' ---- - - - - - - Content Manager - - - - - - - - - - - - - - diff --git a/src/archive.md b/src/archive.md deleted file mode 100644 index 76533c1..0000000 --- a/src/archive.md +++ /dev/null @@ -1,4 +0,0 @@ ---- -title: 'Posts Archive' -layout: 'layouts/archive.njk' ---- diff --git a/src/css/splash.css b/src/css/splash.css deleted file mode 100644 index 848125f..0000000 --- a/src/css/splash.css +++ /dev/null @@ -1,72 +0,0 @@ -*, -:after, -:before { - box-sizing: inherit; -} - -html { - box-sizing: border-box; - font: 112.5%/1.45em Inter, sans-serif; -} - -body { - margin: 0; - padding: 0; - background-color: #fff; - color: rgba(0, 0, 0, 0.8); - font-weight: 400; - word-wrap: break-word; - font-kerning: normal; - font-feature-settings: 'kern', 'liga', 'clig', 'calt'; -} - -.grid-container { - --thumb: url('https://res.cloudinary.com/danmatthew/image/upload/c_thumb,w_200/v1593720656/_DSC2105_yxqwvc.jpg'); - --full: url('https://res.cloudinary.com/danmatthew/image/upload/q_auto,f_auto/v1593720656/_DSC2105_yxqwvc.jpg'); - display: grid; - height: 100vh; - width: 100vw; - align-content: flex-end; - justify-content: center; - background-color: #000; - color: #fff; - overflow: hidden; - background-image: var(--full), var(--thumb); - background-repeat: no-repeat; - background-size: cover; - background-position: center; -} - -header { - position: relative; - height: 100vh; - width: 100vw; - display: flex; - align-content: center; - justify-content: center; - align-items: center; - background-color: #000; - overflow: hidden; -} - -.c-hero { - height: 100vh; - width: 100vw; - object-fit: cover; -} - -h1 { - position: absolute; - bottom: 0; - padding: 0; - margin: 0 0 1.45rem; - color: #fff; - font-weight: 700; - text-rendering: optimizeLegibility; - line-height: 1.1; - font-size: 10vw; - font-size: clamp(2rem, 10vw, 25rem); - letter-spacing: -0.05ch; - margin: 0; - transform: translateY(40%); -} diff --git a/src/index.md b/src/index.md deleted file mode 100644 index b742e53..0000000 --- a/src/index.md +++ /dev/null @@ -1,9 +0,0 @@ ---- -layout: home -title: Accessibility without the snark. -postsHeading: Latest posts -archiveButtonText: See all posts -metaDesc: 'Dan Matthew is an accessibility consultant.' -socialImage: '' ---- - diff --git a/src/robots.txt b/src/robots.txt deleted file mode 100644 index e69de29..0000000 diff --git a/src/scss/_config.scss b/src/scss/_config.scss deleted file mode 100644 index 54beecc..0000000 --- a/src/scss/_config.scss +++ /dev/null @@ -1,182 +0,0 @@ -@import 'tokens'; - -/** - * SIZE SCALE - * This is a Major Third scale that powers all the utilities that - * it is relevant for (font-size, margin, padding). All items are - * calcuated off these tokens. - */ -$stalfos-size-scale: map-get($tokens, 'size-scale'); - -/** - * COLORS - * Colors are shared between backgrounds and text by default. - * You can also use them to power borders, fills or shadows, for example. - */ -$stalfos-colors: map-get($tokens, 'colors'); - -/** - * UTIL PREFIX - * All pre-built, framework utilities will have this prefix. - * Example: the wrapper utility is '.sf-wrapper' because the default - * prefix is 'sf-'. - */ -$stalfos-util-prefix: 'sf-'; - -/** - * METRICS - * Various misc metrics to use around the site - */ -$metrics: ( - 'wrap-max-width': 38rem, - 'wrap-inner-max-width': 38rem, - 'md-breakpoint': 48rem -); - -/** - * CORE CONFIG - * This powers everything from utility class generation to breakpoints - * to enabling/disabling pre-built components/utilities. - */ -$stalfos-config: ( - 'align': ( - 'items': ( - 'start': 'flex-start', - 'center': 'center', - 'end': 'flex-end' - ), - 'output': 'responsive', - 'property': 'align-items' - ), - 'bg': ( - 'items': $stalfos-colors, - 'output': 'standard', - 'property': 'background' - ), - 'color': ( - 'items': $stalfos-colors, - 'output': 'standard', - 'property': 'color' - ), - 'box': ( - 'items': ( - 'block': 'block', - 'flex': 'flex', - 'inline-flex': 'inline-flex', - 'hide': 'none' - ), - 'output': 'responsive', - 'property': 'display' - ), - 'font': ( - 'items': map-get($tokens, 'fonts'), - 'output': 'standard', - 'property': 'font-family' - ), - 'gap-top': ( - 'items': $stalfos-size-scale, - 'output': 'standard', - 'property': 'margin-top' - ), - 'gap-bottom': ( - 'items': $stalfos-size-scale, - 'output': 'standard', - 'property': 'margin-bottom' - ), - 'leading': ( - 'items': ( - 'tight': '1.2', - 'mid': '1.5', - 'loose': '1.7' - ), - 'output': 'standard', - 'property': 'line-height' - ), - 'measure': ( - 'items': ( - 'long': '75ch', - 'short': '60ch', - 'compact': '40ch' - ), - 'output': 'standard', - 'property': 'max-width' - ), - 'pad-top': ( - 'items': $stalfos-size-scale, - 'output': 'standard', - 'property': 'padding-top' - ), - 'pad-bottom': ( - 'items': $stalfos-size-scale, - 'output': 'standard', - 'property': 'padding-bottom' - ), - 'pad-left': ( - 'items': $stalfos-size-scale, - 'output': 'standard', - 'property': 'padding-left' - ), - 'space': ( - 'items': ( - 'between': 'space-between', - 'around': 'space-around', - 'before': 'flex-end' - ), - 'output': 'responsive', - 'property': 'justify-content' - ), - 'stack': ( - 'items': ( - '300': 0, - '400': 10, - '500': 20, - '600': 30, - '700': 40 - ), - 'output': 'standard', - 'property': 'z-index' - ), - 'ta': ( - 'items': ( - 'right': 'right', - 'left': 'left', - 'center': 'center' - ), - 'output': 'responsive', - 'property': 'text-align' - ), - 'text': ( - 'items': $stalfos-size-scale, - 'output': 'responsive', - 'property': 'font-size' - ), - 'weight': ( - 'items': ( - 'light': '300', - 'regular': '400', - 'mid': '600', - 'bold': '700' - ), - 'output': 'standard', - 'property': 'font-weight' - ), - 'width': ( - 'items': ( - 'full': '100%', - 'half': percentage(1/2), - 'quarter': percentage(1/4), - 'third': percentage(1/3) - ), - 'output': 'responsive', - 'property': 'width' - ), - 'breakpoints': ( - 'md': #{'(min-width: ' + map-get($metrics, 'md-breakpoint') + ')'} - ), - 'utilities': ( - 'reset': 'on', - 'icon': 'off', - 'flow': 'on', - 'wrapper': 'off' - ) -); diff --git a/src/scss/_theme.scss b/src/scss/_theme.scss deleted file mode 100644 index 948e764..0000000 --- a/src/scss/_theme.scss +++ /dev/null @@ -1,52 +0,0 @@ -:root { - // Pull the tokens and generate custom props - @each $color in $stalfos-colors { - #{'--color-' + nth($color, 1)}: #{nth($color, 2)}; - } - - // Set theme aliases - --color-mode: 'light'; - --color-bg: #{get-color('light')}; - --color-bg-glare: #{get-color('light')}; - --color-text: #{get-color('dark')}; - --color-text-glare: #{get-color('dark')}; - --color-selection-text: #{get-color('light')}; - --color-selection-bg: #{get-color('dark')}; - --color-stroke: #{get-color('mid')}; - --color-action-bg: #{get-color('primary')}; - --color-action-text: #{get-color('light')}; - --color-theme-primary: #{get-color('primary')}; - --color-theme-primary-glare: #{get-color('primary-glare')}; - --color-theme-highlight: #{get-color('highlight')}; - --color-theme-highlight-block: #{get-color('highlight')}; -} - -@include dark-mode() { - --color-bg: #{get-color('dark')}; - --color-bg-glare: #{get-color('slate')}; - --color-text: #{get-color('light')}; - --color-selection-text: #{get-color('dark')}; - --color-selection-bg: #{get-color('light')}; - --color-stroke: #{get-color('slate')}; - --color-theme-primary: #{lighten(get-color('primary'), 50%)}; - --color-theme-primary-glare: #{lighten(get-color('primary-glare'), 50%)}; - --color-action-bg: var(--color-theme-primary-glare); - --color-action-text: #{get-color('dark')}; - --color-theme-highlight: #{get-color('highlight')}; - --color-theme-highlight-block: #{get-color('slate')}; - --color-theme-feature-text: #{get-color('highlight')}; -} - -body { - color: var(--color-text); - background-color: var(--color-bg); -} - -main { - overflow: hidden; -} - -::selection { - color: var(--color-selection-text); - background-color: var(--color-selection-bg); -} diff --git a/src/scss/_tokens.scss b/src/scss/_tokens.scss deleted file mode 100644 index 6afef54..0000000 --- a/src/scss/_tokens.scss +++ /dev/null @@ -1,34 +0,0 @@ -$tokens: ( - size-scale: ( - 300: 0.8rem, - 500: 1.25rem, - 600: 1.56rem, - 700: 1.95rem, - 800: 2.44rem, - 900: 3.05rem, - base: 1rem, - max: 4rem - ), - colors: ( - primary: #173854, - primary-shade: #102538, - primary-glare: #22547c, - highlight: #DABE47, - light: #ffffff, - mid: #cccccc, - dark: #333333, - slate: #404040 - ), - // colors: ( - // light: #F6F6DA, // Old Bus Cream - // highlight: #F6EA75, // Mr Egg Yellow - // primary: #DABE47, // Jewellery Quarter Gold - // primary-glare: #D24B19, // Tikka Masala Red - // primary-shade: #5D231A, // Bull Bronze - // slate: #1C1D1A, // Sabbath Black - // ), - fonts: ( - base: "sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'", - serif: "serif" - ) -); diff --git a/src/scss/_typography.scss b/src/scss/_typography.scss deleted file mode 100644 index ad0fd55..0000000 --- a/src/scss/_typography.scss +++ /dev/null @@ -1,39 +0,0 @@ -body { - // Strip the unit off the size ratio to generate a line height - $line-height: get-size(600); - line-height: $line-height / ($line-height * 0 + 1); - - @include apply-utility('font', 'base'); -} - -h1, -h2, -h3 { - @include apply-utility('font', 'base'); -} - -h1 { - font-size: get-size(700); -} - -h2 { - font-size: get-size(600); -} - -h3 { - font-size: get-size(500); -} - -@include media-query('md') { - h1 { - font-size: get-size(900); - } - - h2 { - font-size: get-size(800); - } - - h3 { - font-size: get-size(700); - } -} diff --git a/src/scss/components/_button.scss b/src/scss/components/_button.scss deleted file mode 100644 index 455f84b..0000000 --- a/src/scss/components/_button.scss +++ /dev/null @@ -1,31 +0,0 @@ -.button { - display: inline-block; - border: none; - background-color: var(--color-action-bg); - color: var(--color-action-text); - padding: get-size(300) get-size('base'); - line-height: 1; - margin: 0; - text-decoration: none; - cursor: pointer; - -webkit-appearance: none; - -moz-appearance: none; -} - -.button:hover, -.button:focus { - filter: brightness(1.2); -} - -.button:focus:hover { - outline: none; -} - -.button:focus:not(:hover) { - outline: 1px solid var(--color-action-text); - outline-offset: -4px; -} - -.button:active { - transform: scale(0.99); -} diff --git a/src/scss/components/_form.scss b/src/scss/components/_form.scss deleted file mode 100644 index 59c3363..0000000 --- a/src/scss/components/_form.scss +++ /dev/null @@ -1,88 +0,0 @@ -/* Form */ - -form { - max-width: 35rem; -} - -form br { - display: none; -} - -label { - display: block; - font-weight: 600; -} - -input, -select { - line-height: 1; -} - -input, -textarea, -select { - background-color: #fff; - font: inherit; - border: 1px solid var(--color-text); - margin-top: 0.15rem; - padding: 0.5rem 1rem; - width: 100%; - - @include apply-utility('font', 'base'); -} - -label input { - margin: -0.25rem 0.5rem 0 0; - width: auto; - vertical-align: middle; -} - -fieldset { - border: 0; - margin: 0; - padding: 0; -} - -legend { - display: block; - font-weight: bold; -} - -.field-list { - margin: 0; - padding: 0; - list-style: none; -} - -.field-list__field-group { - margin-bottom: 2rem; - transition: transform 150ms; - - &__description { - display: block; - margin-top: 0.3rem; - font-size: 0.875rem; - line-height: 1.25; - } - - textarea + &__description { - margin-top: 0; - } - - &--confirm { - font-weight: normal; - } - - &__list { - list-style: none; - margin: 0; - - label { - font-weight: normal; - } - - .field-list__field-group__description { - margin: 0 0 0 1.35rem; - } - } -} diff --git a/src/scss/components/_heading-permalink.scss b/src/scss/components/_heading-permalink.scss deleted file mode 100644 index bffd9d6..0000000 --- a/src/scss/components/_heading-permalink.scss +++ /dev/null @@ -1,11 +0,0 @@ -.heading-permalink { - color: var(--color-theme-primary-glare); - font-size: 0.8em; - margin-left: 0.3em; - margin-top: 0.2em; - - @include media-query('md') { - font-size: 0.6em; - margin-top: 0.4em; - } -} diff --git a/src/scss/components/_intro.scss b/src/scss/components/_intro.scss deleted file mode 100644 index 0282b02..0000000 --- a/src/scss/components/_intro.scss +++ /dev/null @@ -1,23 +0,0 @@ -.intro { - &__summary { - --flow-space: #{get-size(500)}; - font-size: get-size(500); - - a { - color: currentColor; - - &:hover { - text-decoration: none; - } - } - } - - &__heading { - max-width: 40ex; - color: var(--color-theme-feature-text); - - &--compact { - max-width: 20ex; - } - } -} diff --git a/src/scss/components/_nav.scss b/src/scss/components/_nav.scss deleted file mode 100644 index 27a5fce..0000000 --- a/src/scss/components/_nav.scss +++ /dev/null @@ -1,34 +0,0 @@ -.nav { - &__list { - overflow-x: auto; - - // Add padding and neg margin to allow focus style visibility - padding: 0.5rem; - margin: -0.5rem; - -webkit-overflow-scrolling: touch; - -ms-overflow-style: none; - - &::-webkit-scrollbar { - display: none; - } - - > * + * { - margin-left: get-size(500); - } - } - - &__item { - padding: get-size(300) 0; - flex-shrink: 0; - - a { - color: currentColor; - - @include apply-utility('weight', 'mid'); - - &:not(:hover) { - text-decoration: none; - } - } - } -} diff --git a/src/scss/components/_pagination.scss b/src/scss/components/_pagination.scss deleted file mode 100644 index c7e277a..0000000 --- a/src/scss/components/_pagination.scss +++ /dev/null @@ -1,29 +0,0 @@ -.pagination { - flex-wrap: wrap; - - a { - color: var(--color-theme-primary); - - &:not(:hover) { - text-decoration: none; - } - - // Flip content if direction is backwards - &[data-direction='backwards'] { - flex-direction: row-reverse; - - svg { - transform: rotate(-180deg); - } - } - - // If only child and forwards, push out to the right - &[data-direction='forwards']:only-child { - margin-left: auto; - } - } - - svg { - pointer-events: none; - } -} diff --git a/src/scss/components/_post-list.scss b/src/scss/components/_post-list.scss deleted file mode 100644 index 9a22648..0000000 --- a/src/scss/components/_post-list.scss +++ /dev/null @@ -1,17 +0,0 @@ -.post-list { - &__item { - --flow-space: #{get-size(700)}; - } - - &__link { - &, - &:visited { - color: var(--color-theme-primary); - text-decoration: none; - } - - &:hover { - text-decoration: underline; - } - } -} diff --git a/src/scss/components/_post.scss b/src/scss/components/_post.scss deleted file mode 100644 index 997c621..0000000 --- a/src/scss/components/_post.scss +++ /dev/null @@ -1,141 +0,0 @@ -.post { - &__body { - --flow-space: #{get-size(800)}; - - /** - * Generic HTML styles - */ - h2 + *, - h3 + * { - --flow-space: #{get-size(500)}; - } - - h2, - h3 { - position: relative; - /*display: flex;*/ - - @include apply-utility('leading', 'tight'); - } - - a:not([class]) { - color: var(--color-dark); - position: relative; - display: inline-block; - background: var(--color-theme-highlight); - padding: 0.2rem 0.4rem 0.3rem 0.4rem; - text-decoration: none; - word-break: break-word; - - @include apply-utility('leading', 'tight'); - } - - a:not([class]):hover { - text-decoration: underline; - } - - code { - font-size: 1.2em; - color: var(--color-theme-primary); - font-weight: 600; - margin-left: 0.01ch; - margin-right: 0.01ch; - } - - pre > code { - margin-right: 0; - border: 1px solid rgba(255, 255, 255, 0.1); - overflow-x: auto; - -webkit-overflow-scrolling: touch; - } - - blockquote { - border-left: 0.4rem solid var(--color-theme-primary-glare); - margin-left: 0; - padding-left: get-size(500); - font-style: italic; - font-size: get-size(600); - - p { - opacity: 0.85; - padding: get-size(500) 0; - } - } - - ol:not([class]), - ul:not([class]) { - margin-left: get-size(800); - - li + li { - margin-top: get-size(300); - } - } - - figure, - figure + *, - pre > code, - .video-player, - .video-player + *, - video { - --flow-space: #{get-size('max')}; - } - - figure, - pre > code, - .video-player, - video { - width: 100vw; - max-width: map-get($metrics, 'wrap-max-width'); - margin-left: 50%; /*changing this value to 47% removes the horizontal scrollbar once the viewport is < 930px */ - transform: translateX( - -50% - ); /* changing this value to 49% allows for the suggestion above to also eliminate the horizontal scroll. */ - position: relative; - } - - figure img, - pre > code, - .video-player { - box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); - } - - figure img { - position: relative; - z-index: 1; - } - - figcaption { - font-size: 0.8em; - font-style: italic; - max-width: map-get($metrics, 'wrap-inner-max-width'); - margin: 0.5rem auto 0 auto; - padding: 0 get-size(500); - } - - pre > code { - display: block; - background: var(--color-dark); - padding: get-size(700); - font-size: get-size(500); - } - } - - &__footer { - background: var(--color-theme-highlight); - - h2 { - flex-shrink: 0; - margin-right: get-size('base'); - color: var(--color-dark); - } - - h2 a { - @extend %visually-hidden; - } - - a { - background: var(--color-bg); - padding: 0.4rem 0.6rem; - } - } -} diff --git a/src/scss/components/_site-foot.scss b/src/scss/components/_site-foot.scss deleted file mode 100644 index 0b042a5..0000000 --- a/src/scss/components/_site-foot.scss +++ /dev/null @@ -1,18 +0,0 @@ -.site-foot { - // Reverse whatever the theme colors are - background: var(--color-bg-glare); - color: var(--color-text); - border-top: 1px solid var(--color-stroke); - - a { - color: currentColor; - - &:hover { - text-decoration: none; - } - } - - &__credit { - text-align: center; - } -} diff --git a/src/scss/components/_site-head.scss b/src/scss/components/_site-head.scss deleted file mode 100644 index dfb3302..0000000 --- a/src/scss/components/_site-head.scss +++ /dev/null @@ -1,7 +0,0 @@ -.site-head { - &__site-name { - font-weight: 700; - text-decoration: none; - color: var(--color-text); - } -} diff --git a/src/scss/components/_skip-link.scss b/src/scss/components/_skip-link.scss deleted file mode 100644 index aa2e723..0000000 --- a/src/scss/components/_skip-link.scss +++ /dev/null @@ -1,18 +0,0 @@ -// Hide skip link visually by default -.skip-link:not(:focus) { - @extend %visually-hidden; -} - -.skip-link:focus { - display: inline-block; - position: absolute; - z-index: 1; - top: 0; - left: 0; - padding: get-size(300) get-size(500) get-size('base') get-size(500); - background-color: var(--color-action-bg); - color: var(--color-action-text); - line-height: 1; - text-decoration: none; - font-weight: 700; -} diff --git a/src/scss/components/_syntax-highlighting.scss b/src/scss/components/_syntax-highlighting.scss deleted file mode 100644 index 3d5bef6..0000000 --- a/src/scss/components/_syntax-highlighting.scss +++ /dev/null @@ -1,145 +0,0 @@ -/** - * a11y-dark theme for JavaScript, CSS, and HTML - * Based on the okaidia theme: https://github.com/PrismJS/prism/blob/gh-pages/themes/prism-okaidia.css - * @author ericwbailey - */ - -code[class*='language-'], -pre[class*='language-'] { - color: #f8f8f2; - background: none; - font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; - text-align: left; - word-spacing: normal; - word-break: normal; - word-wrap: normal; - - -moz-tab-size: 2; - -o-tab-size: 2; - tab-size: 2; - - -webkit-hyphens: none; - -moz-hyphens: none; - -ms-hyphens: none; - hyphens: none; -} - -/* Inline code */ -:not(pre) > code[class*='language-'] { - padding: 0.1em; - border-radius: 0.3em; - white-space: normal; -} - -.token.comment, -.token.prolog, -.token.doctype, -.token.cdata { - color: #d4d0ab; -} - -.token.punctuation { - color: #fefefe; -} - -.token.property, -.token.tag, -.token.constant, -.token.symbol, -.token.deleted { - color: #ffa07a; -} - -.token.boolean, -.token.number { - color: #00e0e0; -} - -.token.selector, -.token.attr-name, -.token.string, -.token.char, -.token.builtin, -.token.inserted { - color: #abe338; -} - -.token.operator, -.token.entity, -.token.url, -.language-css .token.string, -.style .token.string, -.token.variable { - color: #00e0e0; -} - -.token.atrule, -.token.attr-value, -.token.function { - color: #ffd700; -} - -.token.keyword { - color: #00e0e0; -} - -.token.regex, -.token.important { - color: #ffd700; -} - -.token.important, -.token.bold { - font-weight: bold; -} -.token.italic { - font-style: italic; -} - -.token.entity { - cursor: help; -} - -@media screen and (-ms-high-contrast: active) { - code[class*='language-'], - pre[class*='language-'] { - color: windowText; - background: window; - } - - :not(pre) > code[class*='language-'], - pre[class*='language-'] { - background: window; - } - - .token.important { - background: highlight; - color: window; - font-weight: normal; - } - - .token.atrule, - .token.attr-value, - .token.function, - .token.keyword, - .token.operator, - .token.selector { - font-weight: bold; - } - - .token.attr-value, - .token.comment, - .token.doctype, - .token.function, - .token.keyword, - .token.operator, - .token.property, - .token.string { - color: highlight; - } - - .token.attr-value, - .token.url { - font-weight: normal; - } -} diff --git a/src/scss/components/_video-player.scss b/src/scss/components/_video-player.scss deleted file mode 100644 index bee6605..0000000 --- a/src/scss/components/_video-player.scss +++ /dev/null @@ -1,23 +0,0 @@ -.video-player { - position: relative; - padding-top: 56.25%; - - > iframe { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - } - - // If it’s bleeding out in a post, it needs more padding - .post & { - padding-top: 63%; - } - - @include media-query('md') { - .post & { - padding-top: 66%; - } - } -} diff --git a/src/scss/global.scss b/src/scss/global.scss deleted file mode 100644 index 3367740..0000000 --- a/src/scss/global.scss +++ /dev/null @@ -1,84 +0,0 @@ -@font-face { - font-family: 'Atkinson Hyperlegible'; - font-weight: 400; - font-display: fallback; - font-style: normal; - font-named-instance: 'Regular'; - src: local('Atkinson Hyperlegible'), url("/fonts/Atkinson-Hyperlegible-Regular-102a.woff2") format("woff2"); -} - -@import 'config'; - -// Pull in the stalfos lib -@import '../../node_modules/stalfos/stalfos.scss'; - -// Local mixins -@import 'mixins/dark-mode'; - -@import 'theme'; - -// Local dependencies -@import 'typography'; - -/** - * GLOBAL STYLES - */ -html, -body { - height: 100%; -} - -@media (prefers-reduced-motion: no-preference) { - html { - scroll-behavior: smooth; - } -} - -main { - &:focus { - outline: none; - } -} - -hr { - display: block; - height: 1px; - max-width: 500px; - background: var(--color-stroke); - border: none; - margin: get-size(900) auto; -} - -// For when metric attributes are added to img elements -img { - height: auto; -} - -:focus { - outline: 1px solid var(--color-theme-primary-glare); - outline-offset: 0.25rem; -} - -/** - * PROJECT IMPORTS - */ - -// Utils -@import 'utilities/inner-wrapper'; -@import 'utilities/visually-hidden'; -@import 'utilities/wrapper'; - -// Components -@import 'components/button'; -@import 'components/form'; -@import 'components/heading-permalink'; -@import 'components/intro'; -@import 'components/nav'; -@import 'components/pagination'; -@import 'components/post'; -@import 'components/post-list'; -@import 'components/site-head'; -@import 'components/site-foot'; -@import 'components/skip-link'; -@import 'components/syntax-highlighting'; -@import 'components/video-player'; diff --git a/src/scss/mixins/_dark-mode.scss b/src/scss/mixins/_dark-mode.scss deleted file mode 100644 index 99e913d..0000000 --- a/src/scss/mixins/_dark-mode.scss +++ /dev/null @@ -1,21 +0,0 @@ -/** - * DARK MODE MIXIN - * - * A little wrapper that lets you define your dark mode custom - * properties in a way that supports the theme toggle web component - */ -@mixin dark-mode() { - @media (prefers-color-scheme: dark) { - :root { - --color-mode: 'dark'; - } - - :root:not([data-user-color-scheme]) { - @content; - } - } - - [data-user-color-scheme='dark'] { - @content; - } -} diff --git a/src/scss/splash.scss b/src/scss/splash.scss deleted file mode 100644 index 1a19774..0000000 --- a/src/scss/splash.scss +++ /dev/null @@ -1,89 +0,0 @@ -@font-face { - font-family: 'Inter var'; - font-weight: 100 900; - font-display: swap; - font-style: normal; - font-named-instance: 'Regular'; - src: local('Inter'), url("/fonts/Inter-roman.var.woff2?v=3.13") format("woff2"); -} - -*, -:after, -:before { - box-sizing: inherit; -} - -html { - font: 112.5%/1.45em 'Inter var', sans-serif; - box-sizing: border-box; -} - -body { - margin: 0; - padding: 0; - background-color: #fff; - color: rgba(0, 0, 0, 0.8); - font-weight: 400; - word-wrap: break-word; - font-kerning: normal; - font-feature-settings: 'kern', 'liga', 'clig', 'calt'; -} - -@import 'utilities/visually-hidden'; -@import 'components/skip-link'; - -header { - position: relative; - height: 100vh; - width: 100vw; - display: flex; - align-content: center; - justify-content: center; - align-items: center; - background-color: hsl(var(--hour), 71%, 52%); - overflow: hidden; -} - -path:nth-child(6) { - fill: hsl(var(--hour), 59%, 34%) -} - -path:nth-child(5) { - fill: hsl(var(--hour), 59%, 44%) -} - -path:nth-child(4) { - fill: hsl(var(--hour), 59%, 54%) -} - -path:nth-child(3) { - fill: hsl(var(--hour), 59%, 64%) -} - -path:nth-child(2) { - fill: hsl(var(--hour), 59%, 74%) -} - -path:nth-child(1) { - fill: hsl(var(--hour), 59%, 84%) -} - -[data-user-color-scheme='dark'] header { - background-color: rgba(187, 107, 217, 0); -} - -.c-hero__title { - position: absolute; - bottom: 0; - padding: 0; - margin: 0 0 1.45rem; - color: #fff; - font-weight: 700; - text-rendering: optimizeLegibility; - line-height: 1.1; - font-size: 16vw; - font-size: clamp(2rem, 16vw, 25rem); - letter-spacing: -0.05ch; - margin: 0; - transform: translateY(40%); -} diff --git a/src/scss/utilities/_inner-wrapper.scss b/src/scss/utilities/_inner-wrapper.scss deleted file mode 100644 index 9a922f0..0000000 --- a/src/scss/utilities/_inner-wrapper.scss +++ /dev/null @@ -1,7 +0,0 @@ -.inner-wrapper { - max-width: map-get($metrics, 'wrap-inner-max-width'); - margin-left: auto; - margin-right: auto; - padding-left: get-size(500); - padding-right: get-size(500); -} diff --git a/src/scss/utilities/_visually-hidden.scss b/src/scss/utilities/_visually-hidden.scss deleted file mode 100644 index 0264edf..0000000 --- a/src/scss/utilities/_visually-hidden.scss +++ /dev/null @@ -1,12 +0,0 @@ -%visually-hidden, -.visually-hidden { - border: 0; - clip: rect(0 0 0 0); - height: auto; - margin: 0; - overflow: hidden; - padding: 0; - position: absolute; - width: 1px; - white-space: nowrap; -} diff --git a/src/scss/utilities/_wrapper.scss b/src/scss/utilities/_wrapper.scss deleted file mode 100644 index 39d53b7..0000000 --- a/src/scss/utilities/_wrapper.scss +++ /dev/null @@ -1,7 +0,0 @@ -.wrapper { - max-width: map-get($metrics, 'wrap-max-width'); - margin-left: auto; - margin-right: auto; - padding-left: get-size(500); - padding-right: get-size(500); -} diff --git a/src/service-worker.njk b/src/service-worker.njk deleted file mode 100644 index d6ed9f1..0000000 --- a/src/service-worker.njk +++ /dev/null @@ -1,5 +0,0 @@ ---- -permalink: '/service-worker.js' ---- -const VERSION = '{{ global.random() }}'; -{% include "partials/global/service-worker.js" %} diff --git a/src/styleguide.njk b/src/styleguide.njk deleted file mode 100644 index bed295e..0000000 --- a/src/styleguide.njk +++ /dev/null @@ -1,149 +0,0 @@ ---- -title: 'Styleguide' -permalink: /styleguide/ ---- - -{% extends 'layouts/base.njk' %} - -{# Intro content #} -{% set introHeading = title %} - -{% block head %} - -{% endblock %} -{% block content %} -

- {% include "partials/components/intro.njk" %} -
-
-

Colours

- -
    - {% for color in styleguide.colors() %} -
  • -
    -

    {{ color.key }}

    -
    -
    Value
    -
    {{ color.value }}
    -
    Sass function
    -
    get-color('{{ color.key }}')
    -
    Custom Property
    -
    var(--color-{{ color.key }})
    -
    Text util class
    -
    color-{{ color.key }}
    -
    Background util class
    -
    bg-{{ color.key }}
    -
    -
    • - {% endfor %} -
-

Fonts

-

Base — System stack

-

- - .font-base -

-

Serif — Lora

-

- - .font-serif -

-

Text sizes

-

Text sizes are available as standard classes or media query prefixed, such as lg:text-500.

- {% for size in styleguide.sizes() %} -

{{ size.value }} - text-{{ size.key }}

- {% endfor %} -

Spacing

-

There’s size ratio utilities that give you margin (gap-top, gap-bottom) and padding (pad-top, pad-left, pad-bottom). -

Margin

- -
- {% for size in styleguide.sizes() %} -
- gap-top-{{ size.key }} -
- {% endfor %} -
-

Padding

- - {% for size in styleguide.sizes() %} -
- pad-top-{{ size.key }} -
-
- pad-bottom-{{ size.key }} -
-
- pad-left-{{ size.key }} -
- {% endfor %} - -

Forms

- {% from "macros/form.njk" import label, field, textarea, confirm, select, radios, checkboxes, hidden_field, button %} -
-
    -
  1. - {{ label("Text Label", "field-text-name") }} - {{ field( "text", "field-text-name", { required: true, placeholder: "Katherine Johnson", autocomplete: "name", autocorrect: "off", autocapitalize: "off", description: "Optional description. Note: This field type can take any valid input type." } ) }} -
    2. -
  2. - {{ label("Email Label", "field-email-name") }} - {{ field( "email", "field-email-name", { required: true, placeholder: "katherine@johnson.tld", autocomplete: "email" } ) }} -
    3. -
  3. - {{ label("Textarea Label", "field-textarea-name") }} - {{ textarea( "field-textarea-name", { required: true, autocapitalize: "sentences", spellcheck: "true" } ) }} -
    4. -
  4. - {{ label("Select Label", "field-select-name") }} - {{ select( "select", [ "option 1", {label: "Option II", value: "option 2"} ], { required: true, options_before: ["prepended option"], options_after: ["appended option"], description: "Optional description." } ) }} -
    5. -
  5. - {{ confirm("Confirm this statement", "confirm") }} -
    6. -
  6. - {{ radios("Radio Legend", "field-radio-name", [ "Yes", { label: "Not really", value: "No", note: "Note about choice." } ], { description: "Optional description." } ) }} -
    7. -
  7. - {{ checkboxes("Checkbox Legend", "field-checkbox-name", [ "Choice 1", { label: "Choice 2", value: "Choice 2", note: "Note about choice." }, "Choice 3" ], { description: "Optional description." } ) }} -
    8. -
  8. - There is a hidden field here… - {{ hidden_field("hidden-name", "hidden-value") }} -
    9. -
- {{ button("Button Text") }} -
-
-
-
-{% endblock %} diff --git a/src/tags.njk b/src/tags.njk deleted file mode 100644 index 652fda6..0000000 --- a/src/tags.njk +++ /dev/null @@ -1,35 +0,0 @@ ---- -title: Tag Archive -pagination: - data: collections - size: 1 - alias: tag - filter: - - all - - nav - - post - - posts - - tagList - - postFeed - addAllPagesToCollections: true -permalink: /tags/{{ tag }}/ ---- - -{% extends 'layouts/base.njk' %} - -{# Intro content #} -{% set introHeading %}Posts filed under “{{ tag }}”{% endset %} -{% set introHeadingLevel = '2' %} - -{# Post list content #} -{% set postListHeadingLevel = '2' %} -{% set postListHeading = 'Posts' %} -{% set postListItems = collections[tag] %} - -{% block content %} -
- {% include "partials/components/intro.njk" %} - {% include "partials/components/post-list.njk" %} - {% include "partials/components/pagination.njk" %} -
-{% endblock %} diff --git a/src/utils/minify.js b/src/utils/minify.js deleted file mode 100644 index 42425d2..0000000 --- a/src/utils/minify.js +++ /dev/null @@ -1,3 +0,0 @@ -module.exports = function minify(input) { - return input.replace(/\s{2,}/g, "").replace(/\'/g, '"'); -};