From f9a740fed34e01a5b74dc2e786baa8a5f304b31d Mon Sep 17 00:00:00 2001 From: CasKer Date: Sun, 3 Dec 2017 20:35:23 -0800 Subject: [PATCH 1/9] adds package.json for apache-server-configs --- package.json | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 package.json diff --git a/package.json b/package.json new file mode 100644 index 0000000..a536373 --- /dev/null +++ b/package.json @@ -0,0 +1,5 @@ +{ + "devDependencies": { + "apache-server-configs": "^2.15.0" + } +} From c838405934c82697cd3f88101ae6f8cda299ca70 Mon Sep 17 00:00:00 2001 From: CasKer Date: Sun, 3 Dec 2017 20:36:38 -0800 Subject: [PATCH 2/9] adds package.json for eslint-config-google --- package.json | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index a536373..634004c 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,9 @@ { "devDependencies": { - "apache-server-configs": "^2.15.0" + "apache-server-configs": "^2.15.0", + "eslint-config-google": "^0.9.1" + }, + "peerDependencies": { + "eslint": "^4.12.1" } } From 84fd06c6c1c653bfb3716783cfa4c9ad613a2acb Mon Sep 17 00:00:00 2001 From: CasKer Date: Sun, 3 Dec 2017 20:39:24 -0800 Subject: [PATCH 3/9] adds package.json for eslint && adds del --- package.json | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index 634004c..8ce2634 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,9 @@ { "devDependencies": { "apache-server-configs": "^2.15.0", - "eslint-config-google": "^0.9.1" + "del": "^3.0.0", + "eslint-config-google": "^0.9.1", + "run-sequence": "^2.2.0" }, "peerDependencies": { "eslint": "^4.12.1" From 2a27faa2d8fdd375734a86a02e3a8e3429222de3 Mon Sep 17 00:00:00 2001 From: CasKer Date: Sun, 3 Dec 2017 21:19:17 -0800 Subject: [PATCH 4/9] placeholder --- code_of_conduct.md | 74 ++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 74 insertions(+) create mode 100644 code_of_conduct.md diff --git a/code_of_conduct.md b/code_of_conduct.md new file mode 100644 index 0000000..a7c7db8 --- /dev/null +++ b/code_of_conduct.md @@ -0,0 +1,74 @@ +# Contributor Covenant Code of Conduct + +## Our Pledge + +In the interest of fostering an open and welcoming environment, we as +contributors and maintainers pledge to making participation in our project and +our community a harassment-free experience for everyone, regardless of age, body +size, disability, ethnicity, gender identity and expression, level of experience, +nationality, personal appearance, race, religion, or sexual identity and +orientation. + +## Our Standards + +Examples of behavior that contributes to creating a positive environment +include: + +* Using welcoming and inclusive language +* Being respectful of differing viewpoints and experiences +* Gracefully accepting constructive criticism +* Focusing on what is best for the community +* Showing empathy towards other community members + +Examples of unacceptable behavior by participants include: + +* The use of sexualized language or imagery and unwelcome sexual attention or +advances +* Trolling, insulting/derogatory comments, and personal or political attacks +* Public or private harassment +* Publishing others' private information, such as a physical or electronic + address, without explicit permission +* Other conduct which could reasonably be considered inappropriate in a + professional setting + +## Our Responsibilities + +Project maintainers are responsible for clarifying the standards of acceptable +behavior and are expected to take appropriate and fair corrective action in +response to any instances of unacceptable behavior. + +Project maintainers have the right and responsibility to remove, edit, or +reject comments, commits, code, wiki edits, issues, and other contributions +that are not aligned to this Code of Conduct, or to ban temporarily or +permanently any contributor for other behaviors that they deem inappropriate, +threatening, offensive, or harmful. + +## Scope + +This Code of Conduct applies both within project spaces and in public spaces +when an individual is representing the project or its community. Examples of +representing a project or community include using an official project e-mail +address, posting via an official social media account, or acting as an appointed +representative at an online or offline event. Representation of a project may be +further defined and clarified by project maintainers. + +## Enforcement + +Instances of abusive, harassing, or otherwise unacceptable behavior may be +reported by contacting the project team at sindresorhus@gmail.com. All +complaints will be reviewed and investigated and will result in a response that +is deemed necessary and appropriate to the circumstances. The project team is +obligated to maintain confidentiality with regard to the reporter of an incident. +Further details of specific enforcement policies may be posted separately. + +Project maintainers who do not follow or enforce the Code of Conduct in good +faith may face temporary or permanent repercussions as determined by other +members of the project's leadership. + +## Attribution + +This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, +available at [http://contributor-covenant.org/version/1/4][version] + +[homepage]: http://contributor-covenant.org +[version]: http://contributor-covenant.org/version/1/4/ From b3ecfed3e6c5631ee9a08dcc5433c51d6122ada5 Mon Sep 17 00:00:00 2001 From: CasKer Date: Sun, 3 Dec 2017 21:51:24 -0800 Subject: [PATCH 5/9] nodeunit + jscoverage --- package.json | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index 8ce2634..c8a1113 100644 --- a/package.json +++ b/package.json @@ -1,11 +1,12 @@ { "devDependencies": { - "apache-server-configs": "^2.15.0", - "del": "^3.0.0", - "eslint-config-google": "^0.9.1", - "run-sequence": "^2.2.0" + "coveralls": "^3.0.0", + "jscoverage": "^0.6.0", + "json-strictify": "^3.0.0", + "nodeunit": "^0.11.2" }, - "peerDependencies": { - "eslint": "^4.12.1" + "scripts": { + "test": "nodeunit test", + "coveralls": "jscoverage lib && nodeunit --reporter-lcov test | coveralls" } } From dd14644d53c35369f6e4ac226f9da88dec3b243c Mon Sep 17 00:00:00 2001 From: CasKer Date: Sun, 3 Dec 2017 22:10:19 -0800 Subject: [PATCH 6/9] modified: README.md --- README.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/README.md b/README.md index b243162..fe1f213 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,12 @@ \#MISINFO ============= +[![Codacy Badge](https://api.codacy.com/project/badge/Grade/88135d4fdf254aa38bb2849d3e894cc5)](https://www.codacy.com/app/MySolace/fakenews-microsite?utm_source=github.com&utm_medium=referral&utm_content=MySolace/fakenews-microsite&utm_campaign=badger) +[![BCH compliance](https://bettercodehub.com/edge/badge/MySolace/fakenews-microsite?branch=master)](https://bettercodehub.com/) +[![Build Status](https://scrutinizer-ci.com/g/MySolace/fakenews-microsite/badges/build.png?b=master)](https://scrutinizer-ci.com/g/MySolace/fakenews-microsite/build-status/master) +[![Scrutinizer Code Quality](https://scrutinizer-ci.com/g/MySolace/fakenews-microsite/badges/quality-score.png?b=master)](https://scrutinizer-ci.com/g/MySolace/fakenews-microsite/?branch=master) +[![Coverage Status](https://coveralls.io/repos/github/MySolace/misinfo/badge.svg?branch=master)](https://coveralls.io/github/MySolace/misinfo?branch=master) + This microsite is the go-to place to explore and interact with our series of stories on fake news published on international media platforms.. **NOTE: This project is still in very initial development.** From d5102f20857ffcc0067da238bb9382a8c88bfae0 Mon Sep 17 00:00:00 2001 From: CasKer Date: Sun, 3 Dec 2017 22:20:36 -0800 Subject: [PATCH 7/9] Ch-ch-ch-ch-channnnges. --- .gitignore | 4 ++++ CNAME => app/CNAME | 0 {img => app/images}/ANCIR-Logo-small.png | Bin {img => app/images}/ANCIR-Logo.png | Bin {img => app/images}/AboutPageBanner.jpg | Bin {img => app/images}/Bubble Chart 2@2x.png | Bin {img => app/images}/CentralAfricaMap.png | Bin {img => app/images}/EgyptMap.png | Bin {img => app/images}/Footer.jpg | Bin {img => app/images}/Image 4alt@2x.png | Bin {img => app/images}/Image 6@2x.png | Bin {img => app/images}/Image_7@2x.png | Bin {img => app/images}/KenyaMap.png | Bin .../images}/Landing-Page-Banner-Image.jpg | Bin {img => app/images}/LandingPageBanner-new.jpg | Bin {img => app/images}/LandingPageBanner.jpg | Bin {img => app/images}/Misinfo-Logo-copy.png | Bin {img => app/images}/Misinfo-Logo.png | Bin {img => app/images}/Thumb-0.jpg | Bin {img => app/images}/Thumb-1.jpg | Bin {img => app/images}/Thumb-2.jpg | Bin {img => app/images}/Thumb-3.jpg | Bin {img => app/images}/Thumb-4.jpg | Bin {img => app/images}/Thumb-5.jpg | Bin {img => app/images}/Thumb-6.jpg | Bin {img => app/images}/TreeMap 2@2x.png | Bin {img => app/images}/WestAfricaMap.png | Bin {img => app/images}/banner.jpg | Bin {img => app/images}/cfa-logo.png | Bin {img => app/images}/dummy.png | Bin {img => app/images}/footer-all.png | Bin {img => app/images}/footer-cfa.png | Bin {img => app/images}/footer-fb-icon.jpg | Bin {img => app/images}/footer-fb-icon.png | Bin {img => app/images}/footer-fb.png | Bin {img => app/images}/footer-mail-icon.png | Bin {img => app/images}/footer-mail.png | Bin {img => app/images}/footer-tw-icon.png | Bin {img => app/images}/footer-tw.png | Bin {img => app/images}/icfj-logo.png | Bin {img => app/images}/logo.png | Bin {img => app/images}/logo.psd | Bin {img => app/images}/logo_1.jpg | Bin {img => app/images}/logo_1.png | Bin {img => app/images}/msg_banner.jpg | Bin {img => app/images}/nigeria.gif | Bin {img => app/images}/partners-cfa.png | Bin {img => app/images}/placeholder.png | Bin {img => app/images}/social-facebook-story.png | Bin {img => app/images}/social-facebook.png | Bin {img => app/images}/social-twitter-story.png | Bin {img => app/images}/social-twitter.png | Bin {img => app/images}/somalia.gif | Bin {img => app/images}/south-sudan.gif | Bin {img => app/images}/video.png | Bin {img => app/images}/wbank-logo.png | Bin index.html => app/index.html | 0 main_story.html => app/main_story.html | 0 main_story_2.html => app/main_story_2.html | 0 main_story_3.html => app/main_story_3.html | 0 main_story_4.html => app/main_story_4.html | 0 main_story_5.html => app/main_story_5.html | 0 main_story_6.html => app/main_story_6.html | 0 {js => app/scripts/lib}/jquery-3.2.1.min.js | 0 {js => app/scripts/lib}/jquery.fancybox.min.js | 0 {js => app/scripts/lib}/loadposts.js | 0 {js => app/scripts/lib}/nouislider.min.js | 0 {js => app/scripts/lib}/parallax.js | 0 {js => app/scripts/lib}/scripts.js | 0 {js => app/scripts/lib}/softscroll.js | 0 {js => app/scripts/lib}/wNumb.js | 0 app/scripts/main.js | 0 story_1.html => app/story_1.html | 0 {css => app/styles/css}/jquery.fancybox.min.css | 0 {css => app/styles/css}/nouislider.min.css | 0 {css => app/styles/css}/stories.css | 0 {css => app/styles/css}/styles.css | 0 {font => app/styles/font}/HammersmithOne.ttf | Bin {video => app/video}/gupta_fake_news.mp4 | Bin coveralls.yml | 1 + img/.DS_Store | Bin 6148 -> 0 bytes js/.DS_Store | Bin 6148 -> 0 bytes 82 files changed, 5 insertions(+) rename CNAME => app/CNAME (100%) rename {img => app/images}/ANCIR-Logo-small.png (100%) rename {img => app/images}/ANCIR-Logo.png (100%) rename {img => app/images}/AboutPageBanner.jpg (100%) rename {img => app/images}/Bubble Chart 2@2x.png (100%) rename {img => app/images}/CentralAfricaMap.png (100%) rename {img => app/images}/EgyptMap.png (100%) rename {img => app/images}/Footer.jpg (100%) rename {img => app/images}/Image 4alt@2x.png (100%) rename {img => app/images}/Image 6@2x.png (100%) rename {img => app/images}/Image_7@2x.png (100%) rename {img => app/images}/KenyaMap.png (100%) rename {img => app/images}/Landing-Page-Banner-Image.jpg (100%) rename {img => app/images}/LandingPageBanner-new.jpg (100%) rename {img => app/images}/LandingPageBanner.jpg (100%) rename {img => app/images}/Misinfo-Logo-copy.png (100%) rename {img => app/images}/Misinfo-Logo.png (100%) rename {img => app/images}/Thumb-0.jpg (100%) rename {img => app/images}/Thumb-1.jpg (100%) rename {img => app/images}/Thumb-2.jpg (100%) rename {img => app/images}/Thumb-3.jpg (100%) rename {img => app/images}/Thumb-4.jpg (100%) rename {img => app/images}/Thumb-5.jpg (100%) rename {img => app/images}/Thumb-6.jpg (100%) rename {img => app/images}/TreeMap 2@2x.png (100%) rename {img => app/images}/WestAfricaMap.png (100%) rename {img => app/images}/banner.jpg (100%) rename {img => app/images}/cfa-logo.png (100%) rename {img => app/images}/dummy.png (100%) rename {img => app/images}/footer-all.png (100%) rename {img => app/images}/footer-cfa.png (100%) rename {img => app/images}/footer-fb-icon.jpg (100%) rename {img => app/images}/footer-fb-icon.png (100%) rename {img => app/images}/footer-fb.png (100%) rename {img => app/images}/footer-mail-icon.png (100%) rename {img => app/images}/footer-mail.png (100%) rename {img => app/images}/footer-tw-icon.png (100%) rename {img => app/images}/footer-tw.png (100%) rename {img => app/images}/icfj-logo.png (100%) rename {img => app/images}/logo.png (100%) rename {img => app/images}/logo.psd (100%) rename {img => app/images}/logo_1.jpg (100%) rename {img => app/images}/logo_1.png (100%) rename {img => app/images}/msg_banner.jpg (100%) rename {img => app/images}/nigeria.gif (100%) rename {img => app/images}/partners-cfa.png (100%) rename {img => app/images}/placeholder.png (100%) rename {img => app/images}/social-facebook-story.png (100%) rename {img => app/images}/social-facebook.png (100%) rename {img => app/images}/social-twitter-story.png (100%) rename {img => app/images}/social-twitter.png (100%) rename {img => app/images}/somalia.gif (100%) rename {img => app/images}/south-sudan.gif (100%) rename {img => app/images}/video.png (100%) rename {img => app/images}/wbank-logo.png (100%) rename index.html => app/index.html (100%) rename main_story.html => app/main_story.html (100%) rename main_story_2.html => app/main_story_2.html (100%) rename main_story_3.html => app/main_story_3.html (100%) rename main_story_4.html => app/main_story_4.html (100%) rename main_story_5.html => app/main_story_5.html (100%) rename main_story_6.html => app/main_story_6.html (100%) rename {js => app/scripts/lib}/jquery-3.2.1.min.js (100%) rename {js => app/scripts/lib}/jquery.fancybox.min.js (100%) rename {js => app/scripts/lib}/loadposts.js (100%) rename {js => app/scripts/lib}/nouislider.min.js (100%) rename {js => app/scripts/lib}/parallax.js (100%) rename {js => app/scripts/lib}/scripts.js (100%) rename {js => app/scripts/lib}/softscroll.js (100%) rename {js => app/scripts/lib}/wNumb.js (100%) create mode 100644 app/scripts/main.js rename story_1.html => app/story_1.html (100%) rename {css => app/styles/css}/jquery.fancybox.min.css (100%) rename {css => app/styles/css}/nouislider.min.css (100%) rename {css => app/styles/css}/stories.css (100%) rename {css => app/styles/css}/styles.css (100%) rename {font => app/styles/font}/HammersmithOne.ttf (100%) rename {video => app/video}/gupta_fake_news.mp4 (100%) create mode 100644 coveralls.yml delete mode 100644 img/.DS_Store delete mode 100644 js/.DS_Store diff --git a/.gitignore b/.gitignore index e43b0f9..746db0a 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,5 @@ +node_modules .DS_Store +dist/ +.tmp +app.yaml diff --git a/CNAME b/app/CNAME similarity index 100% rename from CNAME rename to app/CNAME diff --git a/img/ANCIR-Logo-small.png b/app/images/ANCIR-Logo-small.png similarity index 100% rename from img/ANCIR-Logo-small.png rename to app/images/ANCIR-Logo-small.png diff --git a/img/ANCIR-Logo.png b/app/images/ANCIR-Logo.png similarity index 100% rename from img/ANCIR-Logo.png rename to app/images/ANCIR-Logo.png diff --git a/img/AboutPageBanner.jpg b/app/images/AboutPageBanner.jpg similarity index 100% rename from img/AboutPageBanner.jpg rename to app/images/AboutPageBanner.jpg diff --git a/img/Bubble Chart 2@2x.png b/app/images/Bubble Chart 2@2x.png similarity index 100% rename from img/Bubble Chart 2@2x.png rename to app/images/Bubble Chart 2@2x.png diff --git a/img/CentralAfricaMap.png b/app/images/CentralAfricaMap.png similarity index 100% rename from img/CentralAfricaMap.png rename to app/images/CentralAfricaMap.png diff --git a/img/EgyptMap.png b/app/images/EgyptMap.png similarity index 100% rename from img/EgyptMap.png rename to app/images/EgyptMap.png diff --git a/img/Footer.jpg b/app/images/Footer.jpg similarity index 100% rename from img/Footer.jpg rename to app/images/Footer.jpg diff --git a/img/Image 4alt@2x.png b/app/images/Image 4alt@2x.png similarity index 100% rename from img/Image 4alt@2x.png rename to app/images/Image 4alt@2x.png diff --git a/img/Image 6@2x.png b/app/images/Image 6@2x.png similarity index 100% rename from img/Image 6@2x.png rename to app/images/Image 6@2x.png diff --git a/img/Image_7@2x.png b/app/images/Image_7@2x.png similarity index 100% rename from img/Image_7@2x.png rename to app/images/Image_7@2x.png diff --git a/img/KenyaMap.png b/app/images/KenyaMap.png similarity index 100% rename from img/KenyaMap.png rename to app/images/KenyaMap.png diff --git a/img/Landing-Page-Banner-Image.jpg b/app/images/Landing-Page-Banner-Image.jpg similarity index 100% rename from img/Landing-Page-Banner-Image.jpg rename to app/images/Landing-Page-Banner-Image.jpg diff --git a/img/LandingPageBanner-new.jpg b/app/images/LandingPageBanner-new.jpg similarity index 100% rename from img/LandingPageBanner-new.jpg rename to app/images/LandingPageBanner-new.jpg diff --git a/img/LandingPageBanner.jpg b/app/images/LandingPageBanner.jpg similarity index 100% rename from img/LandingPageBanner.jpg rename to app/images/LandingPageBanner.jpg diff --git a/img/Misinfo-Logo-copy.png b/app/images/Misinfo-Logo-copy.png similarity index 100% rename from img/Misinfo-Logo-copy.png rename to app/images/Misinfo-Logo-copy.png diff --git a/img/Misinfo-Logo.png b/app/images/Misinfo-Logo.png similarity index 100% rename from img/Misinfo-Logo.png rename to app/images/Misinfo-Logo.png diff --git a/img/Thumb-0.jpg b/app/images/Thumb-0.jpg similarity index 100% rename from img/Thumb-0.jpg rename to app/images/Thumb-0.jpg diff --git a/img/Thumb-1.jpg b/app/images/Thumb-1.jpg similarity index 100% rename from img/Thumb-1.jpg rename to app/images/Thumb-1.jpg diff --git a/img/Thumb-2.jpg b/app/images/Thumb-2.jpg similarity index 100% rename from img/Thumb-2.jpg rename to app/images/Thumb-2.jpg diff --git a/img/Thumb-3.jpg b/app/images/Thumb-3.jpg similarity index 100% rename from img/Thumb-3.jpg rename to app/images/Thumb-3.jpg diff --git a/img/Thumb-4.jpg b/app/images/Thumb-4.jpg similarity index 100% rename from img/Thumb-4.jpg rename to app/images/Thumb-4.jpg diff --git a/img/Thumb-5.jpg b/app/images/Thumb-5.jpg similarity index 100% rename from img/Thumb-5.jpg rename to app/images/Thumb-5.jpg diff --git a/img/Thumb-6.jpg b/app/images/Thumb-6.jpg similarity index 100% rename from img/Thumb-6.jpg rename to app/images/Thumb-6.jpg diff --git a/img/TreeMap 2@2x.png b/app/images/TreeMap 2@2x.png similarity index 100% rename from img/TreeMap 2@2x.png rename to app/images/TreeMap 2@2x.png diff --git a/img/WestAfricaMap.png b/app/images/WestAfricaMap.png similarity index 100% rename from img/WestAfricaMap.png rename to app/images/WestAfricaMap.png diff --git a/img/banner.jpg b/app/images/banner.jpg similarity index 100% rename from img/banner.jpg rename to app/images/banner.jpg diff --git a/img/cfa-logo.png b/app/images/cfa-logo.png similarity index 100% rename from img/cfa-logo.png rename to app/images/cfa-logo.png diff --git a/img/dummy.png b/app/images/dummy.png similarity index 100% rename from img/dummy.png rename to app/images/dummy.png diff --git a/img/footer-all.png b/app/images/footer-all.png similarity index 100% rename from img/footer-all.png rename to app/images/footer-all.png diff --git a/img/footer-cfa.png b/app/images/footer-cfa.png similarity index 100% rename from img/footer-cfa.png rename to app/images/footer-cfa.png diff --git a/img/footer-fb-icon.jpg b/app/images/footer-fb-icon.jpg similarity index 100% rename from img/footer-fb-icon.jpg rename to app/images/footer-fb-icon.jpg diff --git a/img/footer-fb-icon.png b/app/images/footer-fb-icon.png similarity index 100% rename from img/footer-fb-icon.png rename to app/images/footer-fb-icon.png diff --git a/img/footer-fb.png b/app/images/footer-fb.png similarity index 100% rename from img/footer-fb.png rename to app/images/footer-fb.png diff --git a/img/footer-mail-icon.png b/app/images/footer-mail-icon.png similarity index 100% rename from img/footer-mail-icon.png rename to app/images/footer-mail-icon.png diff --git a/img/footer-mail.png b/app/images/footer-mail.png similarity index 100% rename from img/footer-mail.png rename to app/images/footer-mail.png diff --git a/img/footer-tw-icon.png b/app/images/footer-tw-icon.png similarity index 100% rename from img/footer-tw-icon.png rename to app/images/footer-tw-icon.png diff --git a/img/footer-tw.png b/app/images/footer-tw.png similarity index 100% rename from img/footer-tw.png rename to app/images/footer-tw.png diff --git a/img/icfj-logo.png b/app/images/icfj-logo.png similarity index 100% rename from img/icfj-logo.png rename to app/images/icfj-logo.png diff --git a/img/logo.png b/app/images/logo.png similarity index 100% rename from img/logo.png rename to app/images/logo.png diff --git a/img/logo.psd b/app/images/logo.psd similarity index 100% rename from img/logo.psd rename to app/images/logo.psd diff --git a/img/logo_1.jpg b/app/images/logo_1.jpg similarity index 100% rename from img/logo_1.jpg rename to app/images/logo_1.jpg diff --git a/img/logo_1.png b/app/images/logo_1.png similarity index 100% rename from img/logo_1.png rename to app/images/logo_1.png diff --git a/img/msg_banner.jpg b/app/images/msg_banner.jpg similarity index 100% rename from img/msg_banner.jpg rename to app/images/msg_banner.jpg diff --git a/img/nigeria.gif b/app/images/nigeria.gif similarity index 100% rename from img/nigeria.gif rename to app/images/nigeria.gif diff --git a/img/partners-cfa.png b/app/images/partners-cfa.png similarity index 100% rename from img/partners-cfa.png rename to app/images/partners-cfa.png diff --git a/img/placeholder.png b/app/images/placeholder.png similarity index 100% rename from img/placeholder.png rename to app/images/placeholder.png diff --git a/img/social-facebook-story.png b/app/images/social-facebook-story.png similarity index 100% rename from img/social-facebook-story.png rename to app/images/social-facebook-story.png diff --git a/img/social-facebook.png b/app/images/social-facebook.png similarity index 100% rename from img/social-facebook.png rename to app/images/social-facebook.png diff --git a/img/social-twitter-story.png b/app/images/social-twitter-story.png similarity index 100% rename from img/social-twitter-story.png rename to app/images/social-twitter-story.png diff --git a/img/social-twitter.png b/app/images/social-twitter.png similarity index 100% rename from img/social-twitter.png rename to app/images/social-twitter.png diff --git a/img/somalia.gif b/app/images/somalia.gif similarity index 100% rename from img/somalia.gif rename to app/images/somalia.gif diff --git a/img/south-sudan.gif b/app/images/south-sudan.gif similarity index 100% rename from img/south-sudan.gif rename to app/images/south-sudan.gif diff --git a/img/video.png b/app/images/video.png similarity index 100% rename from img/video.png rename to app/images/video.png diff --git a/img/wbank-logo.png b/app/images/wbank-logo.png similarity index 100% rename from img/wbank-logo.png rename to app/images/wbank-logo.png diff --git a/index.html b/app/index.html similarity index 100% rename from index.html rename to app/index.html diff --git a/main_story.html b/app/main_story.html similarity index 100% rename from main_story.html rename to app/main_story.html diff --git a/main_story_2.html b/app/main_story_2.html similarity index 100% rename from main_story_2.html rename to app/main_story_2.html diff --git a/main_story_3.html b/app/main_story_3.html similarity index 100% rename from main_story_3.html rename to app/main_story_3.html diff --git a/main_story_4.html b/app/main_story_4.html similarity index 100% rename from main_story_4.html rename to app/main_story_4.html diff --git a/main_story_5.html b/app/main_story_5.html similarity index 100% rename from main_story_5.html rename to app/main_story_5.html diff --git a/main_story_6.html b/app/main_story_6.html similarity index 100% rename from main_story_6.html rename to app/main_story_6.html diff --git a/js/jquery-3.2.1.min.js b/app/scripts/lib/jquery-3.2.1.min.js similarity index 100% rename from js/jquery-3.2.1.min.js rename to app/scripts/lib/jquery-3.2.1.min.js diff --git a/js/jquery.fancybox.min.js b/app/scripts/lib/jquery.fancybox.min.js similarity index 100% rename from js/jquery.fancybox.min.js rename to app/scripts/lib/jquery.fancybox.min.js diff --git a/js/loadposts.js b/app/scripts/lib/loadposts.js similarity index 100% rename from js/loadposts.js rename to app/scripts/lib/loadposts.js diff --git a/js/nouislider.min.js b/app/scripts/lib/nouislider.min.js similarity index 100% rename from js/nouislider.min.js rename to app/scripts/lib/nouislider.min.js diff --git a/js/parallax.js b/app/scripts/lib/parallax.js similarity index 100% rename from js/parallax.js rename to app/scripts/lib/parallax.js diff --git a/js/scripts.js b/app/scripts/lib/scripts.js similarity index 100% rename from js/scripts.js rename to app/scripts/lib/scripts.js diff --git a/js/softscroll.js b/app/scripts/lib/softscroll.js similarity index 100% rename from js/softscroll.js rename to app/scripts/lib/softscroll.js diff --git a/js/wNumb.js b/app/scripts/lib/wNumb.js similarity index 100% rename from js/wNumb.js rename to app/scripts/lib/wNumb.js diff --git a/app/scripts/main.js b/app/scripts/main.js new file mode 100644 index 0000000..e69de29 diff --git a/story_1.html b/app/story_1.html similarity index 100% rename from story_1.html rename to app/story_1.html diff --git a/css/jquery.fancybox.min.css b/app/styles/css/jquery.fancybox.min.css similarity index 100% rename from css/jquery.fancybox.min.css rename to app/styles/css/jquery.fancybox.min.css diff --git a/css/nouislider.min.css b/app/styles/css/nouislider.min.css similarity index 100% rename from css/nouislider.min.css rename to app/styles/css/nouislider.min.css diff --git a/css/stories.css b/app/styles/css/stories.css similarity index 100% rename from css/stories.css rename to app/styles/css/stories.css diff --git a/css/styles.css b/app/styles/css/styles.css similarity index 100% rename from css/styles.css rename to app/styles/css/styles.css diff --git a/font/HammersmithOne.ttf b/app/styles/font/HammersmithOne.ttf similarity index 100% rename from font/HammersmithOne.ttf rename to app/styles/font/HammersmithOne.ttf diff --git a/video/gupta_fake_news.mp4 b/app/video/gupta_fake_news.mp4 similarity index 100% rename from video/gupta_fake_news.mp4 rename to app/video/gupta_fake_news.mp4 diff --git a/coveralls.yml b/coveralls.yml new file mode 100644 index 0000000..8b13789 --- /dev/null +++ b/coveralls.yml @@ -0,0 +1 @@ + diff --git a/img/.DS_Store b/img/.DS_Store deleted file mode 100644 index 5008ddfcf53c02e82d7eee2e57c38e5672ef89f6..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 6148 zcmeH~Jr2S!425mzP>H1@V-^m;4Wg<&0T*E43hX&L&p$$qDprKhvt+--jT7}7np#A3 zem<@ulZcFPQ@L2!n>{z**++&mCkOWA81W14cNZlEfg7;MkzE(HCqgga^y>{tEnwC%0;vJ&^%eQ zLs35+`xjp>T0H1@V-^m;4Wg<&0T*E43hX&L&p$$qDprKhvt+--jT7}7np#A3 zem<@ulZcFPQ@L2!n>{z**++&mCkOWA81W14cNZlEfg7;MkzE(HCqgga^y>{tEnwC%0;vJ&^%eQ zLs35+`xjp>T0 Date: Sun, 3 Dec 2017 22:39:13 -0800 Subject: [PATCH 8/9] adds scss for more friendly styling. new file: app/styles/scss/jquery.fancybox.min.scss new file: app/styles/scss/nouislider.min.scss new file: app/styles/scss/stories.scss new file: app/styles/scss/styles.scss --- app/styles/scss/jquery.fancybox.min.scss | 780 +++++++ app/styles/scss/nouislider.min.scss | 306 +++ app/styles/scss/stories.scss | 2434 +++++++++++++++++++++ app/styles/scss/styles.scss | 2453 ++++++++++++++++++++++ 4 files changed, 5973 insertions(+) create mode 100644 app/styles/scss/jquery.fancybox.min.scss create mode 100644 app/styles/scss/nouislider.min.scss create mode 100644 app/styles/scss/stories.scss create mode 100644 app/styles/scss/styles.scss diff --git a/app/styles/scss/jquery.fancybox.min.scss b/app/styles/scss/jquery.fancybox.min.scss new file mode 100644 index 0000000..a1b3135 --- /dev/null +++ b/app/styles/scss/jquery.fancybox.min.scss @@ -0,0 +1,780 @@ +//colors +$color_woodsmoke_approx: rgba(15, 15, 17, 1); +$color_alto_approx: rgba(221, 221, 221, 1); +$color_rangoon_green_70_approx: rgba(30, 30, 30, .7); +$white: rgba(255, 255, 255, 1); +$color_tundora_approx: rgba(68, 68, 68, 1); +$color_suva_gray_approx: rgba(136, 136, 136, 1); +$color_fuscous_gray_approx: rgba(85, 85, 85, 1); +$color_gallery_approx: rgba(238, 238, 238, 1); +$black_10: rgba(0, 0, 0, .1); +$black_20: rgba(0, 0, 0, .2); +$black_60: rgba(0, 0, 0, .6); +$black_80: rgba(0, 0, 0, .8); +$white_40: rgba(255, 255, 255, .4); +$color_rangoon_green_60_approx: rgba(30, 30, 30, .6); +$color_storm_dust_40_approx: rgba(99, 99, 99, .4); +$white_60: rgba(255, 255, 255, .6); +$color_picton_blue_approx: rgba(78, 167, 249, 1); + +//fonts +$font_0: 'Helvetica Neue'; +$font_1: 'Helvetica'; +$font_2: 'Arial'; +$font_3: 'sans-serif'; +$font_4: 'Arial'; +$font_5: 'sans-serif'; +$font_6: 'Helvetica Neue'; +$font_7: 'Helvetica'; +$font_8: 'Arial'; +$font_9: 'sans-serif'; +$font_10: 'Arial'; +$font_11: 'Helvetica Neue'; +$font_12: 'Helvetica'; +$font_13: 'sans-serif'; +$font_14: 'Helvetica Neue'; +$font_15: 'Helvetica'; +$font_16: 'Arial'; +$font_17: 'sans-serif'; + +//@extend-elements +//original selectors +//.fancybox-slider, .fancybox-slider-wrap +%extend_1 { + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; + padding: 0; + margin: 0; + z-index: 99993; + //vendor-prefix found + //-webkit-backface-visibility: hidden + //Instead of the line below you could use @include backface-visibility($visibility) + backface-visibility: hidden; + //vendor-prefix found + //-webkit-tap-highlight-color: transparent +} + +//original selectors +//.fancybox-image, .fancybox-placeholder, .fancybox-spaceball +%extend_2 { + position: absolute; + top: 0; + left: 0; + margin: 0; + padding: 0; + border: 0; +} + +//original selectors +//.fancybox-image, .fancybox-spaceball +%extend_3 { + width: 100%; + height: 100%; + max-width: none; + max-height: none; + background: transparent; + background-size: 100% 100%; +} + +//original selectors +//.fancybox-button:after, .fancybox-button:before +%extend_4 { + content: ""; + pointer-events: none; + position: absolute; + border-color: $white; + background-color: currentColor; + color: currentColor; + opacity: .9; + //Instead of the line below you could use @include box-sizing($bs) + box-sizing: border-box; + display: inline-block; +} + +//original selectors +//.fancybox-button--left:after, .fancybox-button--right:after +%extend_5 { + top: 18px; + width: 6px; + height: 6px; + background: transparent; + border-top: 2px solid currentColor; + border-right: 2px solid currentColor; +} + +//original selectors +//.fancybox-button--close:after, .fancybox-button--close:before +%extend_6 { + content: ""; + display: inline-block; + position: absolute; + height: 2px; + width: 16px; + top: calc(50% - 1px); + left: calc(50% - 8px); +} + + +@charset "UTF-8"; +.fancybox-enabled { + overflow: hidden; + body { + overflow: visible; + height: 100%; + } +} +.fancybox-container { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 99993; + //vendor-prefix found + //-webkit-backface-visibility: hidden + //Instead of the line below you could use @include backface-visibility($visibility) + backface-visibility: hidden; + ~ .fancybox-container { + z-index: 99992; + } +} +.fancybox-bg { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + background: $color_woodsmoke_approx; + opacity: 0; + //Instead of the line below you could use @include transition-timing-function($function-1, $function-2, $function-3, $function-4, $function-5, $function-6, $function-7, $function-8, $function-9, $function-10) + transition-timing-function: cubic-bezier(.55,.06,.68,.19); + //vendor-prefix found + //-webkit-backface-visibility: hidden + //Instead of the line below you could use @include backface-visibility($visibility) + backface-visibility: hidden; +} +.fancybox-controls { + position: absolute; + top: 0; + left: 0; + right: 0; + text-align: center; + opacity: 0; + z-index: 99994; + //Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10) + transition: opacity .2s; + pointer-events: none; + //vendor-prefix found + //-webkit-backface-visibility: hidden + //Instead of the line below you could use @include backface-visibility($visibility) + backface-visibility: hidden; + direction: ltr; +} +.fancybox-infobar { + display: none; +} +.fancybox-infobar__body { + display: inline-block; + width: 70px; + line-height: 44px; + font-size: 13px; + font-family: $font_0, $font_1, $font_2, $font_3; + text-align: center; + color: $color_alto_approx; + background-color: $color_rangoon_green_70_approx; + pointer-events: none; + //vendor-prefix found + //-webkit-user-select: none + //vendor-prefix found + //-moz-user-select: none + //vendor-prefix found + //-ms-user-select: none + //Instead of the line below you could use @include user-select($select) + user-select: none; + //vendor-prefix found + //-webkit-touch-callout: none + //vendor-prefix found + //-webkit-tap-highlight-color: transparent + //vendor-prefix found + //-webkit-font-smoothing: subpixel-antialiased + background: $color_rangoon_green_60_approx; +} +.fancybox-buttons { + position: absolute; + top: 0; + right: 0; + display: none; + pointer-events: all; +} +.fancybox-slider-wrap { + overflow: hidden; + direction: ltr; + @extend %extend_1; +} +.fancybox-slider { + @extend %extend_1; +} +.fancybox-slide { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + margin: 0; + padding: 0; + overflow: auto; + outline: none; + white-space: normal; + //Instead of the line below you could use @include box-sizing($bs) + box-sizing: border-box; + text-align: center; + z-index: 99994; + //vendor-prefix found + //-webkit-overflow-scrolling: touch + &:before { + content: ""; + height: 100%; + width: 0; + display: inline-block; + vertical-align: middle; + } + > * { + display: inline-block; + vertical-align: middle; + position: relative; + padding: 24px; + margin: 44px 0; + border-width: 0; + text-align: left; + background-color: $white; + overflow: auto; + //Instead of the line below you could use @include box-sizing($bs) + box-sizing: border-box; + } +} +.fancybox-slide--image { + overflow: hidden; + &:before { + display: none; + } +} +.fancybox-content { + display: inline-block; + position: relative; + margin: 44px auto; + padding: 0; + border: 0; + width: 80%; + height: calc(100% - 88px); + vertical-align: middle; + line-height: normal; + text-align: left; + white-space: normal; + outline: none; + font-size: 16px; + font-family: $font_4, $font_5; + //Instead of the line below you could use @include box-sizing($bs) + box-sizing: border-box; + //vendor-prefix found + //-webkit-tap-highlight-color: transparent + //vendor-prefix found + //-webkit-overflow-scrolling: touch +} +.fancybox-iframe { + display: block; + margin: 0; + padding: 0; + border: 0; + width: 100%; + height: 100%; + background: $white; +} +.fancybox-slide--video { + .fancybox-content { + background: transparent; + } + .fancybox-iframe { + background: transparent; + } + .fancybox-close-small { + top: -36px; + right: -36px; + background: transparent; + } +} +.fancybox-placeholder { + z-index: 99995; + background: transparent; + cursor: default; + overflow: visible; + //vendor-prefix found + //-webkit-transform-origin: top left + //Instead of the line below you could use @include transform-origin($origin-x, $origin-y, $origin-z, $only3d) + transform-origin: top left; + background-size: 100% 100%; + background-repeat: no-repeat; + //vendor-prefix found + //-webkit-backface-visibility: hidden + //Instead of the line below you could use @include backface-visibility($visibility) + backface-visibility: hidden; + @extend %extend_2; +} +.fancybox-image { + @extend %extend_2; + @extend %extend_3; +} +.fancybox-spaceball { + @extend %extend_2; + @extend %extend_3; + z-index: 1; +} +.fancybox-tmp { + position: absolute; + top: -9999px; + left: -9999px; + visibility: hidden; +} +.fancybox-error { + position: absolute; + margin: 0; + padding: 40px; + top: 50%; + left: 50%; + width: 380px; + max-width: 100%; + //vendor-prefix found + //-webkit-transform: translate(-50%,-50%) + //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy) + transform: translate(-50%,-50%); + background: $white; + cursor: default; + p { + margin: 0; + padding: 0; + color: $color_tundora_approx; + font: 16px/20px $font_6, $font_7, $font_8, $font_9; + } +} +.fancybox-close-small { + position: absolute; + top: 0; + right: 0; + width: 44px; + height: 44px; + padding: 0; + margin: 0; + border: 0; + //Instead of the line below you could use @include border-radius($radius, $vertical-radius) + border-radius: 0; + outline: none; + background: transparent; + z-index: 10; + cursor: pointer; + &:after { + content: "×"; + position: absolute; + top: 5px; + right: 5px; + width: 30px; + height: 30px; + font: 20px/30px $font_10, $font_11, $font_12, $font_13; + color: $color_suva_gray_approx; + font-weight: 300; + text-align: center; + //Instead of the line below you could use @include border-radius($radius, $vertical-radius) + border-radius: 50%; + border-width: 0; + background: $white; + //Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10) + transition: background .2s; + //Instead of the line below you could use @include box-sizing($bs) + box-sizing: border-box; + z-index: 2; + } + &:focus:after { + outline: 1px dotted $color_suva_gray_approx; + } + &:hover:after { + color: $color_fuscous_gray_approx; + background: $color_gallery_approx; + } +} +.fancybox-caption-wrap { + position: absolute; + bottom: 0; + left: 0; + right: 0; + padding: 60px 30px 0; + z-index: 99998; + //vendor-prefix found + //-webkit-backface-visibility: hidden + //Instead of the line below you could use @include backface-visibility($visibility) + backface-visibility: hidden; + //Instead of the line below you could use @include box-sizing($bs) + box-sizing: border-box; + background: linear-gradient(180deg,transparent 0,$black_10 20%,$black_20 40%,$black_60 80%,$black_80); + opacity: 0; + //Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10) + transition: opacity .2s; + pointer-events: none; +} +.fancybox-caption { + padding: 30px 0; + border-top: 1px solid $white_40; + font-size: 14px; + font-family: $font_14, $font_15, $font_16, $font_17; + color: $white; + line-height: 20px; + //vendor-prefix found + //-webkit-text-size-adjust: none + a { + pointer-events: all; + color: $white; + text-decoration: underline; + } + button { + pointer-events: all; + } +} +.fancybox-button { + display: inline-block; + position: relative; + width: 44px; + height: 44px; + line-height: 44px; + margin: 0; + padding: 0; + border: 0; + //Instead of the line below you could use @include border-radius($radius, $vertical-radius) + border-radius: 0; + cursor: pointer; + background: transparent; + color: $white; + //Instead of the line below you could use @include box-sizing($bs) + box-sizing: border-box; + vertical-align: top; + outline: none; + background: $color_rangoon_green_60_approx; + &:hover { + background: $black_80; + } + &:after { + @extend %extend_4; + } + &:before { + @extend %extend_4; + } +} +.fancybox-button--disabled { + cursor: default; + pointer-events: none; + &:after { + opacity: .5; + } + &:before { + opacity: .5; + } +} +.fancybox-button--left { + //Instead of the line below you could use @include border-bottom-left-radius($radius) + border-bottom-left-radius: 5px; + &:after { + left: 20px; + //vendor-prefix found + //-webkit-transform: rotate(-135deg) + //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy) + transform: rotate(-135deg); + @extend %extend_5; + } +} +.fancybox-button--right { + //Instead of the line below you could use @include border-bottom-right-radius($radius) + border-bottom-right-radius: 5px; + &:after { + @extend %extend_5; + right: 20px; + //vendor-prefix found + //-webkit-transform: rotate(45deg) + //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy) + transform: rotate(45deg); + } +} +.fancybox-button--close { + float: right; + &:after { + @extend %extend_6; + //vendor-prefix found + //-webkit-transform: rotate(-45deg) + //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy) + transform: rotate(-45deg); + } + &:before { + @extend %extend_6; + //vendor-prefix found + //-webkit-transform: rotate(45deg) + //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy) + transform: rotate(45deg); + } +} +.fancybox-loading { + border: 6px solid $color_storm_dust_40_approx; + border-top: 6px solid $white_60; + //Instead of the line below you could use @include border-radius($radius, $vertical-radius) + border-radius: 100%; + height: 50px; + width: 50px; + //vendor-prefix found + //-webkit-animation: a .8s infinite linear + animation: a .8s infinite linear; + background: transparent; + position: absolute; + top: 50%; + left: 50%; + margin-top: -25px; + margin-left: -25px; + z-index: 99999; +} +@-webkit-keyframes a { + 0% { + //vendor-prefix found + //-webkit-transform: rotate(0deg) + //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy) + transform: rotate(0deg); + } + to { + //vendor-prefix found + //-webkit-transform: rotate(359deg) + //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy) + transform: rotate(359deg); + } +} +@keyframes a { + 0% { + //vendor-prefix found + //-webkit-transform: rotate(0deg) + //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy) + transform: rotate(0deg); + } + to { + //vendor-prefix found + //-webkit-transform: rotate(359deg) + //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy) + transform: rotate(359deg); + } +} +@media(max-width:800px) { + .fancybox-controls { + text-align: left; + } + .fancybox-button--left { + display: none!important; + } + .fancybox-button--right { + display: none!important; + } + .fancybox-caption { + padding: 20px 0; + margin: 0; + } + .fancybox-thumbs { + display: none!important; + } + .fancybox-container--thumbs { + .fancybox-caption-wrap { + right: 0; + } + .fancybox-controls { + right: 0; + } + .fancybox-slider-wrap { + right: 0; + } + } + .fancybox-buttons button:not(.fancybox-button--close) { + display: none!important; + } +} +.fancybox-button--thumbs { + span { + font-size: 23px; + } + &:before { + top: 20px; + left: 21px; + width: 3px; + height: 3px; + //Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10) + box-shadow: 0 -4px 0,-4px -4px 0,4px -4px 0,inset 0 0 0 32px,-4px 0 0,4px 0 0,0 4px 0,-4px 4px 0,4px 4px 0; + } +} +.fancybox-container--thumbs { + .fancybox-caption-wrap { + right: 220px; + } + .fancybox-controls { + right: 220px; + } + .fancybox-slider-wrap { + right: 220px; + } +} +.fancybox-thumbs { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: auto; + width: 220px; + margin: 0; + padding: 5px 5px 0 0; + background: $white; + z-index: 99993; + //Instead of the line below you could use @include word-break($value) + word-break: normal; + //vendor-prefix found + //-webkit-overflow-scrolling: touch + //vendor-prefix found + //-webkit-tap-highlight-color: transparent + //Instead of the line below you could use @include box-sizing($bs) + box-sizing: border-box; + > ul { + list-style: none; + position: relative; + width: 100%; + height: 100%; + margin: 0; + padding: 0; + overflow-x: hidden; + overflow-y: auto; + font-size: 0; + > li { + float: left; + overflow: hidden; + max-width: 50%; + padding: 0; + margin: 0; + width: 105px; + height: 75px; + position: relative; + cursor: pointer; + outline: none; + border: 5px solid $white; + border-top-width: 0; + border-right-width: 0; + //vendor-prefix found + //-webkit-tap-highlight-color: transparent + //vendor-prefix found + //-webkit-backface-visibility: hidden + //Instead of the line below you could use @include backface-visibility($visibility) + backface-visibility: hidden; + //Instead of the line below you could use @include box-sizing($bs) + box-sizing: border-box; + > img { + position: absolute; + top: 0; + left: 0; + min-width: 100%; + min-height: 100%; + max-width: none; + max-height: none; + //vendor-prefix found + //-webkit-touch-callout: none + //vendor-prefix found + //-webkit-user-select: none + //vendor-prefix found + //-moz-user-select: none + //vendor-prefix found + //-ms-user-select: none + //Instead of the line below you could use @include user-select($select) + user-select: none; + } + &:before { + content: ""; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + //Instead of the line below you could use @include border-radius($radius, $vertical-radius) + border-radius: 2px; + border: 4px solid $color_picton_blue_approx; + z-index: 99991; + opacity: 0; + //Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10) + transition: all .2s cubic-bezier(.25,.46,.45,.94); + } + &.fancybox-thumbs-active:before { + opacity: 1; + } + } + } +} +.fancybox-container--ready .fancybox-bg { + opacity: .87; + //Instead of the line below you could use @include transition-timing-function($function-1, $function-2, $function-3, $function-4, $function-5, $function-6, $function-7, $function-8, $function-9, $function-10) + transition-timing-function: cubic-bezier(.22,.61,.36,1); +} +.fancybox-show-controls .fancybox-controls { + opacity: 1; +} +.fancybox-show-infobar .fancybox-infobar { + display: inline-block; + pointer-events: all; +} +.fancybox-show-buttons .fancybox-buttons { + display: block; +} +.fancybox-controls--canzoomOut .fancybox-placeholder { + cursor: zoom-out; +} +.fancybox-controls--canzoomIn .fancybox-placeholder { + cursor: zoom-in; +} +.fancybox-controls--canGrab .fancybox-placeholder { + //vendor-prefix found + //cursor: -webkit-grab + cursor: grab; +} +.fancybox-controls--isGrabbing .fancybox-placeholder { + //vendor-prefix found + //cursor: -webkit-grabbing + cursor: grabbing; +} +.fancybox-show-caption .fancybox-caption-wrap { + opacity: 1; +} +.fancybox-button--fullscreen:before { + width: 15px; + height: 11px; + left: 15px; + top: 16px; + border: 2px solid; + background: none; +} +.fancybox-button--play:before { + top: 16px; + left: 18px; + width: 0; + height: 0; + border-top: 6px inset transparent; + border-bottom: 6px inset transparent; + border-left: 10px solid; + //Instead of the line below you could use @include border-radius($radius, $vertical-radius) + border-radius: 1px; + background: transparent; +} +.fancybox-button--pause:before { + top: 16px; + left: 18px; + width: 7px; + height: 11px; + border-style: solid; + border-width: 0 2px; + background: transparent; +} +li.fancybox-thumbs-loading { + background: $black_10; +} \ No newline at end of file diff --git a/app/styles/scss/nouislider.min.scss b/app/styles/scss/nouislider.min.scss new file mode 100644 index 0000000..35ad503 --- /dev/null +++ b/app/styles/scss/nouislider.min.scss @@ -0,0 +1,306 @@ +//colors +$alabaster: rgba(250, 250, 250, 1); +$color_quill_gray_approx: rgba(211, 211, 211, 1); +$color_gallery_approx: rgba(240, 240, 240, 1); +$color_pink_swan_approx: rgba(187, 187, 187, 1); +$color_puerto_rico_approx: rgba(63, 184, 175, 1); +$color_mine_shaft_45_approx: rgba(51, 51, 51, .45); +$color_alto_approx: rgba(217, 217, 217, 1); +$white: rgba(255, 255, 255, 1); +$color_cararra_approx: rgba(235, 235, 235, 1); +$color_mercury_approx: rgba(232, 231, 230, 1); +$color_mountain_mist_approx: rgba(153, 153, 153, 1); +$color_celeste_approx: rgba(204, 204, 204, 1); +$color_silver_chalice_approx: rgba(170, 170, 170, 1); +$black: rgba(0, 0, 0, 1); + +//@extend-elements +//original selectors +//.noUi-target, .noUi-target * +%extend_1 { + //vendor-prefix found + //-webkit-touch-callout: none + //vendor-prefix found + //-webkit-tap-highlight-color: transparent + //vendor-prefix found + //-webkit-user-select: none + //vendor-prefix found + //-ms-touch-action: none + touch-action: none; + //vendor-prefix found + //-ms-user-select: none + //vendor-prefix found + //-moz-user-select: none + //Instead of the line below you could use @include user-select($select) + user-select: none; + //vendor-prefix found + //-moz-box-sizing: border-box + //Instead of the line below you could use @include box-sizing($bs) + box-sizing: border-box; +} + +//original selectors +//.noUi-handle:after, .noUi-handle:before +%extend_2 { + content: ""; + display: block; + position: absolute; + height: 14px; + width: 1px; + background: $color_mercury_approx; + left: 14px; + top: 6px; +} + +//original selectors +//.noUi-vertical .noUi-handle:after, .noUi-vertical .noUi-handle:before +%extend_3 { + width: 14px; + height: 1px; + left: 6px; + top: 14px; +} + + +.noUi-target { + @extend %extend_1; + position: relative; + direction: ltr; + background: $alabaster; + //Instead of the line below you could use @include border-radius($radius, $vertical-radius) + border-radius: 4px; + border: 1px solid $color_quill_gray_approx; + //Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10) + box-shadow: inset 0 1px 1px $color_gallery_approx,0 3px 6px -5px $color_pink_swan_approx; + * { + @extend %extend_1; + } +} +.noUi-base { + width: 100%; + height: 100%; + position: relative; + z-index: 1; + //vendor-prefix found + //-webkit-transform: translate3d(0,0,0) + //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy) + transform: translate3d(0,0,0); +} +.noUi-connect { + position: absolute; + right: 0; + top: 0; + left: 0; + bottom: 0; + background: $color_puerto_rico_approx; + //Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10) + box-shadow: inset 0 0 3px $color_mine_shaft_45_approx; + //vendor-prefix found + //-webkit-transition: background 450ms + //Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10) + transition: background 450ms; +} +.noUi-origin { + position: absolute; + height: 0; + width: 0; +} +.noUi-handle { + position: relative; + z-index: 1; + border: 1px solid $color_alto_approx; + //Instead of the line below you could use @include border-radius($radius, $vertical-radius) + border-radius: 3px; + background: $white; + cursor: default; + //Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10) + box-shadow: inset 0 0 1px $white,inset 0 1px 7px $color_cararra_approx,0 3px 6px -3px $color_pink_swan_approx; + //vendor-prefix found + //-webkit-transform: translate3d(0,0,0) + //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy) + transform: translate3d(0,0,0); + &:after { + @extend %extend_2; + left: 17px; + } + &:before { + @extend %extend_2; + } +} +.noUi-state-tap { + .noUi-connect { + //vendor-prefix found + //-webkit-transition: top .3s,right .3s,bottom .3s,left .3s + //Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10) + transition: top .3s,right .3s,bottom .3s,left .3s; + } + .noUi-origin { + //vendor-prefix found + //-webkit-transition: top .3s,right .3s,bottom .3s,left .3s + //Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10) + transition: top .3s,right .3s,bottom .3s,left .3s; + } +} +.noUi-horizontal { + height: 18px; + .noUi-handle { + width: 34px; + height: 28px; + left: -17px; + top: -6px; + } + .noUi-tooltip { + //vendor-prefix found + //-webkit-transform: translate(-50%,0) + //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy) + transform: translate(-50%,0); + left: 50%; + bottom: 120%; + } +} +.noUi-vertical { + width: 18px; + .noUi-handle { + width: 28px; + height: 34px; + left: -6px; + top: -17px; + &:after { + @extend %extend_3; + top: 17px; + } + &:before { + @extend %extend_3; + } + } + .noUi-draggable { + cursor: ns-resize; + } + .noUi-tooltip { + //vendor-prefix found + //-webkit-transform: translate(0,-50%) + //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy) + transform: translate(0,-50%); + top: 50%; + right: 120%; + } +} +.noUi-draggable { + cursor: ew-resize; +} +.noUi-active { + //Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10) + box-shadow: inset 0 0 1px $white,inset 0 1px 7px $color_alto_approx,0 3px 6px -3px $color_pink_swan_approx; +} +[disabled] { + .noUi-connect { + background: $color_pink_swan_approx; + } + .noUi-handle { + cursor: not-allowed; + } + &.noUi-handle { + cursor: not-allowed; + } + &.noUi-target { + cursor: not-allowed; + } +} +.noUi-pips { + //vendor-prefix found + //-moz-box-sizing: border-box + //Instead of the line below you could use @include box-sizing($bs) + box-sizing: border-box; + position: absolute; + color: $color_mountain_mist_approx; + * { + //vendor-prefix found + //-moz-box-sizing: border-box + //Instead of the line below you could use @include box-sizing($bs) + box-sizing: border-box; + } +} +.noUi-value { + position: absolute; + text-align: center; +} +.noUi-value-sub { + color: $color_celeste_approx; + font-size: 10px; +} +.noUi-marker { + position: absolute; + background: $color_celeste_approx; +} +.noUi-marker-large { + background: $color_silver_chalice_approx; +} +.noUi-marker-sub { + background: $color_silver_chalice_approx; +} +.noUi-pips-horizontal { + padding: 10px 0; + height: 80px; + top: 100%; + left: 0; + width: 100%; +} +.noUi-value-horizontal { + //vendor-prefix found + //-webkit-transform: translate3d(-50%,50%,0) + //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy) + transform: translate3d(-50%,50%,0); +} +.noUi-marker-horizontal { + &.noUi-marker { + margin-left: -1px; + width: 2px; + height: 5px; + } + &.noUi-marker-sub { + height: 10px; + } + &.noUi-marker-large { + height: 15px; + } +} +.noUi-pips-vertical { + padding: 0 10px; + height: 100%; + top: 0; + left: 100%; +} +.noUi-value-vertical { + //vendor-prefix found + //-webkit-transform: translate3d(0,50%,0) + //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy) + transform: translate3d(0,50%,0); + padding-left: 25px; +} +.noUi-marker-vertical { + &.noUi-marker { + width: 5px; + height: 2px; + margin-top: -1px; + } + &.noUi-marker-sub { + width: 10px; + } + &.noUi-marker-large { + width: 15px; + } +} +.noUi-tooltip { + display: block; + position: absolute; + border: 1px solid $color_alto_approx; + //Instead of the line below you could use @include border-radius($radius, $vertical-radius) + border-radius: 3px; + background: $white; + color: $black; + padding: 5px; + text-align: center; +} +.noUi-state-drag * { + cursor: inherit!important; +} \ No newline at end of file diff --git a/app/styles/scss/stories.scss b/app/styles/scss/stories.scss new file mode 100644 index 0000000..6dac65f --- /dev/null +++ b/app/styles/scss/stories.scss @@ -0,0 +1,2434 @@ +//colors +$white: rgba(255, 255, 255, 1); +$color_mine_shaft_approx: rgba(50, 47, 49, 1); +$color_tundora_approx: rgba(68, 68, 68, 1); +$color_pomegranate_approx: rgba(233, 63, 38, 1); +$color_camarone_approx: rgba(15, 98, 37, 1); +$black_20: rgba(0, 0, 0, 0.2); +$color_gallery_approx: rgba(238, 238, 238, 1); +$color_celeste_approx: rgba(204, 204, 204, 1); +$color_green_white_approx: rgba(238, 234, 219, 1); +$color_suva_gray_approx: rgba(136, 136, 136, 1); +$white_80: rgba(255, 255, 255, .8); +$color_keppel_approx: rgba(69, 178, 157, 1); +$color_persian_green_approx: rgba(23, 170, 157, 1); +$color_pampas_approx: rgba(245, 243, 234, 1); +$color_steel_blue_approx: rgba(51, 122, 183, 1); +$color_stiletto_approx: rgba(155, 41, 74, 1); +$color_kabul_approx: rgba(96, 64, 67, 1); +$color_log_cabin_approx: rgba(34, 34, 34, 1); +$color_fuscous_gray_approx: rgba(85, 85, 85, 1); +$color_jaffa_approx: rgba(226, 122, 63, 1); +$color_woodsmoke_approx: rgba(17, 17, 17, 1); +$color_tapa_approx: rgba(119, 119, 119, 1); +$color_cinderella_approx: rgba(254, 229, 217, 1); +$color_mona_lisa_approx: rgba(252, 174, 145, 1); +$color_persimmon_approx: rgba(251, 106, 74, 1); +$color_alizarin_crimson_approx: rgba(222, 45, 38, 1); +$color_tamarillo_approx: rgba(165, 15, 21, 1); +$color_alto_approx: rgba(222, 222, 222, 1); +$color_manz_approx: rgba(230, 228, 117, 1); +$black_50: rgba(0, 0, 0, .5); +$color_picton_blue_approx: rgba(79, 183, 244, 1); +$color_dodger_blue_approx: rgba(12, 165, 255, 1); +$color_pink_swan_approx: rgba(187, 187, 187, 1); +$color_pickled_bluewood_10_approx: rgba(51, 77, 92, .10); +$color_storm_dust_approx: rgba(102, 102, 102, 1); +$color_flame_pea_approx: rgba(223, 90, 73, 1); +$black_25: rgba(0, 0, 0, 0.25); +$black_5: rgba(0, 0, 0, 0.05); +$color_pickled_bluewood_approx: rgba(51, 77, 92, 1); +$color_ronchi_approx: rgba(239, 201, 76, 1); +$black: rgba(0, 0, 0, 1); + +//fonts +$font_0: 'Montserrat'; +$font_1: 'sans-serif'; +$font_2: 'Merriweather'; +$font_3: 'serif'; +$font_4: 'Montserrat'; +$font_5: 'sans-serif'; +$font_6: 'Montserrat'; +$font_7: 'sans-serif'; +$font_8: 'Montserrat'; +$font_9: 'sans-serif'; +$font_10: 'Merriweather'; +$font_11: 'serif'; +$font_12: 'Merriweather'; +$font_13: 'serif'; +$font_14: 'Merriweather'; +$font_15: 'serif'; +$font_16: 'Merriweather'; +$font_17: 'serif'; +$font_18: 'Merriweather'; +$font_19: 'serif'; +$font_20: 'Merriweather'; +$font_21: 'serif'; +$font_22: 'Merriweather'; +$font_23: 'serif'; +$font_24: 'Merriweather'; +$font_25: 'serif'; +$font_26: 'Merriweather'; +$font_27: 'serif'; +$font_28: 'Merriweather'; +$font_29: 'serif'; +$font_30: 'Montserrat'; +$font_31: 'sans-serif'; +$font_32: 'Merriweather'; +$font_33: 'serif'; +$font_34: 'Merriweather'; +$font_35: 'serif'; +$font_36: 'Montserrat'; +$font_37: 'sans-serif'; +$font_38: 'Merriweather'; +$font_39: 'serif'; +$font_40: 'Merriweather'; +$font_41: 'serif'; +$font_42: 'Montserrat'; +$font_43: 'sans-serif'; +$font_44: 'Montserrat'; +$font_45: 'sans-serif'; +$font_46: 'Montserrat'; +$font_47: 'sans-serif'; +$font_48: 'Montserrat'; +$font_49: 'sans-serif'; +$font_50: 'Merriweather'; +$font_51: 'serif'; +$font_52: 'Merriweather'; +$font_53: 'serif'; +$font_54: 'Merriweather'; +$font_55: 'serif'; +$font_56: 'Montserrat'; +$font_57: 'sans-serif'; +$font_58: 'Montserrat'; +$font_59: 'sans-serif'; +$font_60: 'Merriweather'; +$font_61: 'serif'; +$font_62: 'Merriweather'; +$font_63: 'serif'; +$font_64: 'Merriweather'; +$font_65: 'serif'; +$font_66: 'Merriweather'; +$font_67: 'serif'; +$font_68: 'Montserrat'; +$font_69: 'sans-serif'; +$font_70: 'Merriweather'; +$font_71: 'serif'; +$font_72: 'Merriweather'; +$font_73: 'serif'; +$font_74: 'Merriweather'; +$font_75: 'serif'; +$font_76: 'Merriweather'; +$font_77: 'serif'; + +//urls +$url_0: url('../img/language.png'); +$url_1: url('../img/LandingPageBanner.jpg'); +$url_2: url('../img/Footer.jpg'); +$url_3: url('../img/footer-tw.png'); +$url_4: url('img/footer-fb.png'); +$url_5: url('img/footer-mail.png'); +$url_6: url('img/footer-cfa.png'); + +.masthead { + background: rgba(155, 41, 74, 0); + margin: 0; + font-family: $font_0, $font_1; + font-weight: 200; + margin-bottom: 20px; + position: fixed; + text-align: center; + top: 0; + width: 100%; + z-index: 10000; + .logo { + display: inline-block; + line-height: 100%; + margin: 15px 0 0; + padding: 0; + text-align: left; + a { + color: $color_mine_shaft_approx; + text-transform: none; + &:hover { + color: $color_mine_shaft_approx; + //vendor-prefix found + //-webkit-border-radius: 8px + //vendor-prefix found + //-moz-border-radius: 8px + //Instead of the line below you could use @include border-radius($radius, $vertical-radius) + border-radius: 8px; + } + } + img { + display: inline-block; + margin-top: -10px; + } + } + .share-options { + display: inline-block; + float: right; + margin-top: 10px; + text-align: right; + } + ul { + line-height: 100%; + list-style: none; + margin: 0; + padding: 0; + text-align: right; + li a { + background-repeat: no-repeat; + background-size: 100% auto; + display: block; + height: 25px; + line-height: 100%; + margin: .6em 0 0 .5em; + overflow: auto; + padding: 0 .5em; + width: 75px; + } + &.submenu > li a { + display: block; + font-size: .9em; + padding: 1em 1.5em; + height: auto; + width: auto; + } + } + li { + line-height: 100%; + list-style: none; + margin: 0; + padding: 0; + text-align: right; + } + .scr { + display: none; + visibility: hidden; + } + h6 { + display: none; + font-size: .8em; + margin-bottom: 15px; + text-transform: uppercase; + &:hover { + cursor: pointer; + } + } +} +.masthead-inner { + margin: 0 auto; + max-width: 1050px; + padding: .5em 2em; + padding-bottom: 14px; + width: 100%; + text-align: left; +} +@media only screen and(max-width: 768px) { + .site-nav { + h6 { + display: block; + } + a { + display: none; + } + } + .top-story { + margin-bottom: 20px; + } + .description { + margin-top: 20px; + } + .wrapper-region-reports { + .country { + margin: 0 auto 50px auto; + width: 75%; + } + .container h2 { + text-align: center; + } + } + .countries-wide { + display: none; + } + .countries-mobile { + display: block; + } + #all-stories { + .row { + margin-bottom: 40px; + } + .col-sm-3 { + margin-bottom: 20px; + } + } + h1 { + text-align: left; + } + h2 { + text-align: left; + } + #ipc-comparison { + h1 { + text-align: center; + } + h2 { + text-align: center; + } + } + .logo h1 { + font-size: .9em; + letter-spacing: 0; + margin-left: 10px; + } + .masthead .logo img { + width: 125px; + height: 50px; + } + ol.left-list { + margin-bottom: 0; + } + #quote-container p { + margin-bottom: 0; + } + #language-services h6 { + margin-bottom: 30px; + } + #meet-the-team div.social { + margin-bottom: 30px; + } + #more-credits header h4 { + margin-top: -20px; + } + #parallax-window-1 h5 { + text-align: left; + } + a.main-nav { + display: none; + } + th.rotate > div { + //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy) + transform: translate(25px, 51px) rotate(270deg); + } +} +a { + color: $color_steel_blue_approx; + &.main-nav { + color: $color_tundora_approx; + font-size: .9em; + font-weight: 400; + margin: 28px 0; + padding: 10px; + letter-spacing: .1px; + //Instead of the line below you could use @include border-radius($radius, $vertical-radius) + border-radius: 50px; + border: 1px solid transparent; + &:hover { + color: $color_pomegranate_approx; + //vendor-prefix found + //-webkit-border-radius: 50px + //vendor-prefix found + //-moz-border-radius: 50px + //Instead of the line below you could use @include border-radius($radius, $vertical-radius) + border-radius: 50px; + border: 1px solid transparent; + text-decoration: none; + } + &:focus { + color: $color_pomegranate_approx; + //vendor-prefix found + //-webkit-border-radius: 50px + //vendor-prefix found + //-moz-border-radius: 50px + //Instead of the line below you could use @include border-radius($radius, $vertical-radius) + border-radius: 50px; + border: 1px solid transparent; + text-decoration: none; + } + &.current { + color: $color_pomegranate_approx; + //vendor-prefix found + //-webkit-border-radius: 50px + //vendor-prefix found + //-moz-border-radius: 50px + //Instead of the line below you could use @include border-radius($radius, $vertical-radius) + border-radius: 50px; + border: 1px solid transparent; + text-decoration: none; + } + } + &.button { + &.button-circle { + color: $white; + } + &.button-circlex { + color: $white; + line-height: 25px !important; + margin-left: auto; + top: 50%; + left: 35%; + } + } +} +.button { + display: inline-block; + position: relative; + cursor: pointer; + outline: none; + white-space: nowrap; + margin: 5px; + padding: 6px 22px; + font-size: 15px !important; + height: 40px; + line-height: 40px; + background-color: $color_camarone_approx; + color: $white !important; + font-weight: 600; + text-transform: capitalize; + letter-spacing: 1px; + border: none; + //Instead of the line below you could use @include text-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10) + text-shadow: 1px 1px 1px $black_20; + text-decoration: none !important; + &.button-circle { + //Instead of the line below you could use @include border-radius($radius, $vertical-radius) + border-radius: 20px; + } + &.button-circlex { + //Instead of the line below you could use @include border-radius($radius, $vertical-radius) + border-radius: 20px; + margin-left: 100px; + margin-top: 50px; + } +} +.unknown { + font-size: .9em; +} +.language-toggle { + background-image: $url_0; +} +.submenu { + clear: both; + display: none; + margin-top: 0; + position: absolute; + top: 100%; + text-align: left; + //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy) + transform: translateX(-82%); + z-index: 110; + > li { + background-color: $white_80; + display: block; + &:lastchild { + border-bottom: none; + } + a:hover { + color: $color_keppel_approx; + } + } +} +.site-nav { + background-color: $color_gallery_approx; + border-bottom: 1px solid $color_celeste_approx; + font-size: 1.1em; + text-align: center; + display: none; + visibility: hidden; + nav { + margin: 15px 0 10px; + } + h6 { + display: none; + font-size: .8em; + margin-bottom: 15px; + text-transform: uppercase; + &:hover { + cursor: pointer; + } + } + a { + color: $color_green_white_approx; + font-size: .9em; + font-weight: normal; + line-height: 30px; + padding: 5px 20px; + letter-spacing: .5px; + &:hover { + text-decoration: none; + } + span:hover { + border-bottom: 5px solid $color_suva_gray_approx; + } + } +} +.parallax { + min-height: 500px; + background: transparent; +} +.exp { + display: block; + margin: 0 auto; + margin-bottom: 30px; + width: 75%; +} +.mini-section { + margin: 20px 0; + p { + padding: 0 20px 20px 5px; + } + h3 { + text-transform: none !important; + font-weight: 200; + color: $color_kabul_approx; + font-size: 1.4em; + //Instead of the line below you could use @include border-radius($radius, $vertical-radius) + border-radius: 0; + //Instead of the line below you could use @include border-bottom-right-radius($radius) + border-bottom-right-radius: 2px; + } +} +ol { + margin-bottom: 40px; + &.stories { + margin-left: -40px; + img { + padding-top: 10px; + } + li { + list-style-type: none; + margin-bottom: 20px; + } + a { + display: block; + font-family: $font_22, $font_23; + font-size: 1em; + margin: 5px 0; + } + } +} +video { + width: 100% !important; + height: auto !important; + margin: 0 0 40px 0; +} +.wrapper { + background-color: $color_stiletto_approx; + background-repeat: no-repeat; + margin-bottom: 40px; + margin-top: 40px; + padding-top: 20px; + padding-bottom: 20px; + h1 { + color: $color_green_white_approx; + text-align: center !important; + font-size: 1.8em; + line-height: 40px; + margin-bottom: 40px; + margin-right: 0; + font-weight: 200; + margin-top: 40px; + font-family: $font_30, $font_31; + } + a { + h1 { + margin: 28px 0; + padding: 10px; + //Instead of the line below you could use @include border-radius($radius, $vertical-radius) + border-radius: 50px; + border: 1px solid transparent; + border-color: $color_green_white_approx !important; + } + &:hover { + border-color: $color_green_white_approx !important; + //Instead of the line below you could use @include border-radius($radius, $vertical-radius) + border-radius: 50px !important; + text-decoration: none !important; + } + } + ol#ipc-phases li { + font-size: 1em; + margin-bottom: 15px; + } + p.lead { + color: $white; + font-family: $font_32, $font_33; + line-height: 34px; + margin: 40px 0; + margin-bottom: 60px; + font-size: 18px; + text-align: left; + } +} +.top-story { + margin-bottom: 60px; + img { + filter: grayscale(50%); + margin-top: 5px; + margin-bottom: 20px; + //Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10) + transition: all 1s; + &:hover { + filter: grayscale(0%); + margin-bottom: 20px; + } + } + a.button { + font-family: $font_4, $font_5; + display: inline-block; + position: relative; + cursor: pointer; + outline: none; + white-space: nowrap; + margin: 5px; + padding: 0 22px; + font-size: 15px !important; + height: 40px; + line-height: 40px; + background-color: $color_persian_green_approx; + color: $white !important; + font-weight: 200 !important; + text-transform: capitalize; + letter-spacing: 1px; + border: none; + //Instead of the line below you could use @include text-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10) + text-shadow: 1px 1px 1px $black_20; + text-decoration: none !important; + //Instead of the line below you could use @include border-radius($radius, $vertical-radius) + border-radius: 0; + } +} +.more-top { + margin-bottom: 60px; + img { + filter: grayscale(50%); + margin-top: 5px; + margin-bottom: 20px; + //Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10) + transition: all 1s; + &:hover { + filter: grayscale(0%); + margin-bottom: 20px; + } + } +} +#quote-container { + margin: 0 auto; + img { + filter: grayscale(50%); + margin-top: 5px; + margin-bottom: 20px; + //Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10) + transition: all 1s; + &:hover { + filter: grayscale(0%); + margin-bottom: 20px; + } + } + .quote { + text-align: left; + font-family: $font_52, $font_53; + font-size: 1.1em; + } + p { + font-family: $font_54, $font_55; + color: $color_kabul_approx; + font-size: .9em; + margin-top: 10px; + margin-bottom: 30px; + line-height: 22px; + } + a { + color: $color_kabul_approx; + font-weight: bold; + font-size: 1.6em; + line-height: 28px; + } + .invisible { + display: none; + } +} +.video-container { + margin-bottom: 15px; + position: relative; + padding-bottom: 56.25%; + padding-top: 35px; + height: 0; + overflow: hidden; + video { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + position: absolute; + top: 38px; + left: 0; + width: 100%; + height: 100%; + } + object { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + } + embed { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + } +} +.description { + padding-bottom: 20px; +} +.wrapper-region-reports { + //Instead of the line below you could use @include border-radius($radius, $vertical-radius) + border-radius: ; + background-color: $white; + padding-bottom: 0; + h2 { + text-align: left; + } + h3 { + //Instead of the line below you could use @include border-top-left-radius($radius) + border-top-left-radius: 0; + //Instead of the line below you could use @include border-top-right-radius($radius) + border-top-right-radius: 0; + margin-bottom: 10px; + } + p { + line-height: 22px; + margin-bottom: 30px; + } +} +.country { + //Instead of the line below you could use @include border-radius($radius, $vertical-radius) + border-radius: ; +} +.about-set-contributors-row { + margin-left: -5px !important; + margin-right: -5px !important; +} +.countries-wide { + display: block; + padding: 20px 70px 100px; +} +.about-countries-wide { + display: block; + padding: 50px 30px 10px; +} +#alter-color { + background-color: $color_pampas_approx; +} +.alter-color { + background-color: $color_pampas_approx; +} +.countries-mobile { + display: none; +} +div { + &.new-section { + margin-top: 20px; + } + header { + h1 { + color: $white; + } + h2 { + color: $white; + } + } + &.combined-map { + position: relative; + height: 100%; + img { + position: absolute; + left: 0; + top: 0; + &:first-child { + position: relative; + left: 0; + top: 0; + } + } + } + &.quote-content { + margin-top: -20px; + } + &.noUi-handle { + cursor: pointer; + } + &.country-record { + //Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10) + transition: all 0.5s ease; + opacity: 1; + &:hover { + opacity: .8; + } + } + &.social { + margin-top: -5px; + margin-bottom: 15px; + text-align: center; + a { + display: inline-block; + padding: 0 5px; + } + img { + width: 15px; + } + } + &.parallax header { + color: $color_stiletto_approx; + padding-top: 170px; + padding-left: 90px; + padding-bottom: 1px; + h1 { + padding: 0; + padding-bottom: 75px; + color: $color_kabul_approx; + } + h2 { + padding: 0; + padding-bottom: 75px; + color: $color_stiletto_approx; + line-height: 20px; + margin-top: 5px; + padding-right: 153px; + text-transform: capitalize !important; + display: none; + } + } + &.masthead-inner a { + &.hideable1 { + opacity: 0; + padding-left: 155px; + } + &.hideable { + opacity: 0; + padding-left: 155px; + } + } +} +h1 { + text-align: center; + color: $color_log_cabin_approx; + font-family: $font_6, $font_7; + font-size: 4em; + font-weight: bold; + margin: 20px 0 0; + &.featured-story { + font-size: 1.8em; + margin: 10px 0; + text-align: left; + } + &.featured-video { + line-height: 24px; + font-size: 1.5em; + font-weight: 400; + margin: 10px 0; + text-align: left; + font-family: $font_44, $font_45; + a { + color: $color_mine_shaft_approx !important; + background-color: $color_alto_approx; + } + } + &.featured-contributor { + line-height: 24px; + font-size: 1.5em; + margin: 10px 0; + text-align: left; + font-family: $font_46, $font_47; + font-weight: 100; + padding-top: 20px; + a { + color: $color_kabul_approx !important; + } + } + &.featured-partners { + line-height: 24px; + font-size: 1.5em; + margin: 30px 0; + text-align: left !important; + font-family: $font_48, $font_49; + font-weight: 100; + padding-top: 20px; + a { + color: $color_pampas_approx !important; + } + } +} +h2 { + text-align: center; + color: $color_fuscous_gray_approx; + font-family: $font_8, $font_9; + text-transform: uppercase; + font-size: 1.2em; + font-weight: bold; + margin: 15px 0 20px; + &.explainer-headline { + font-family: $font_60, $font_61; + font-weight: 500; + text-transform: uppercase; + color: $color_kabul_approx; + display: inline-block; + font-size: 1em; + margin-top: 30px; + padding: 5px; + } +} +h3 { + //Instead of the line below you could use @include border-radius($radius, $vertical-radius) + border-radius: 2px; + color: $white; + display: inline-block; + font-family: $font_10, $font_11; + font-size: 1.1em; + padding: 4px 6px; + text-transform: uppercase; + margin: 0 0 10px 0; + font-weight: bold; + &.country-label { + background-color: $color_jaffa_approx; + font-size: .9em; + font-weight: normal; + } +} +.minifeed-header { + font-family: $font_12, $font_13; + color: $color_kabul_approx; + font-size: 1em; + font-weight: 500; + margin-bottom: -5px; + text-align: left; + padding-left: 13px; + text-transform: none !important; +} +.justabit { + margin-top: 10px; +} +.reporter-list { + font-size: .9em; + letter-spacing: .5px; + list-style-type: none; + margin-left: -40px; + text-transform: uppercase; + li { + margin-bottom: 5px; + } +} +#language-services { + margin-top: 20px; + text-align: center; + h5 { + font-size: 1em; + font-weight: bold; + letter-spacing: .5px; + margin-top: 15px; + text-align: center; + } + h6 { + font-size: .9em; + font-weight: normal; + letter-spacing: .5px; + margin-top: 5px; + text-align: center; + text-transform: uppercase; + } + h4 { + font-size: 1.2em; + margin-bottom: 20px; + font-size: 1.1em; + margin-top: 20px; + } + p { + margin-bottom: 40px; + } +} +#meet-the-team { + margin-top: 20px; + h5 { + font-size: 1em; + font-weight: bold; + letter-spacing: .5px; + margin-top: 15px; + text-align: center; + } + h6 { + font-size: .9em; + font-weight: normal; + letter-spacing: .5px; + margin-top: 5px; + text-align: center; + text-transform: uppercase; + } +} +.team-row { + margin-bottom: 20px; +} +h4 { + font-family: $font_14, $font_15; + font-size: 1.5em; + text-transform: uppercase; + margin: 0 0 10px 0; + font-weight: bold; + margin-bottom: 20px; +} +h5 { + font-family: $font_14, $font_15; + font-size: 1.5em; + text-transform: uppercase; + margin: 0 0 10px 0; + font-weight: bold; + font-size: 1em; + font-weight: normal; + margin-bottom: 5px; +} +h6 { + font-family: $font_14, $font_15; + font-size: 1.5em; + text-transform: uppercase; + margin: 0 0 10px 0; + font-weight: bold; + color: $color_woodsmoke_approx; + font-size: 1.2em; + text-transform: none; + &.last-item { + margin-bottom: 20px; + } +} +p { + font-family: $font_16, $font_17; + &.lead { + color: $color_log_cabin_approx; + font-family: $font_18, $font_19; + font-size: 1.3em; + line-height: 34px; + margin: 40px 0; + text-align: center; + } + &.lead-video { + font-family: $font_20, $font_21; + color: $color_mine_shaft_approx !important; + font-size: 1em; + line-height: 24px; + margin: 15px 0; + } + &.note { + font-size: .9em; + color: $color_kabul_approx; + margin: 15px 0; + padding-left: 13px; + text-align: left; + } + &.intro { + color: $color_log_cabin_approx; + font-family: $font_50, $font_51; + font-size: 1.1em; + line-height: 24px; + margin: 15px 0 20px; + } + small { + padding-bottom: 20px; + font-size: 90%; + width: 80%; + margin: auto; + display: block; + text-align: center; + } +} +#news-page { + .site-nav { + margin-top: 60px; + } + p.lead-video { + font-size: 1em; + margin: 5px 0 15px; + } +} +.info-center { + padding-left: 210px; +} +span { + &.pubdate { + color: $color_mine_shaft_approx; + display: inline-block; + font-family: $font_24, $font_25; + font-size: .65em; + letter-spacing: .5px; + padding-right: 3px; + padding-bottom: 10px; + text-transform: capitalize; + } + &.video { + color: $color_mine_shaft_approx; + display: inline-block; + font-family: $font_24, $font_25; + font-size: .65em; + letter-spacing: .5px; + padding-right: 3px; + padding-bottom: 10px; + text-transform: capitalize; + } + &.byline { + color: $color_tapa_approx; + display: block; + font-family: $font_26, $font_27; + font-size: .9em; + } +} +nav { + font-family: $font_28, $font_29; + font-size: 1em; + font-weight: 600; + margin-top: 25px; + margin-bottom: 25px; + text-transform: uppercase; + a { + letter-spacing: 1px; + } + li { + display: inline-block; + margin: 0 10px; + } + ul { + margin-left: -40px; + text-align: center; + } +} +article { + margin-bottom: 20px; + h1 { + margin: 0; + font-size: 1.2em; + } +} +button { + margin: 10px 0; +} +.main-header { + background 100% 100%d: $url_1 100% 100%; +} +#wrapper-about { + margin-bottom: 0 !important; + margin-top: 0; +} +.wrapper-map { + background-color: $color_pickled_bluewood_10_approx; + margin-bottom: 10px; + margin-top: 50px; + li { + font-family: $font_34, $font_35; + font-size: 1em; + list-style-type: none; + margin-left: -40px; + margin-bottom: 10px; + } + p { + &.leadmap { + font-weight: 200; + margin: 40px 0; + color: $color_mine_shaft_approx; + } + &.leadmaphead { + font-family: $font_36, $font_37; + margin: 30px 0; + font-size: 20px; + font-weight: 400; + color: $color_mine_shaft_approx; + } + } + h2 { + margin-bottom: 15px; + text-align: left; + } + h3 { + //Instead of the line below you could use @include border-top-left-radius($radius) + border-top-left-radius: 0; + //Instead of the line below you could use @include border-top-right-radius($radius) + border-top-right-radius: 0; + margin-bottom: 10px; + } +} +#paint { + height: calc(100vh - 4px); + padding: 20px 20px 0 131px; + background-color: $white; + color: $color_mine_shaft_approx; +} +#paint-one { + height: calc(100vh - 4px); + padding: 20px 110px 0 10px; + background-color: $white; + color: $color_mine_shaft_approx; +} +.pad-data { + padding-left: 5px !important; +} +#pad-data { + margin-left: 15px; + img { + padding-top: 50px; + padding-bottom: 20px; + } +} +#mapboard { + padding: 40px 110px 0 0; + background-color: $white; +} +#mapboard-two { + padding: 40px 10px 0 130px !important; + background-color: $white; + height: calc(100vh - 245px) !important; + pointer-events: none; +} +#img-circle { + position: relative; + overflow: hidden; + //vendor-prefix found + //-webkit-border-radius: 50% + //vendor-prefix found + //-moz-border-radius: 50% + //vendor-prefix found + //-ms-border-radius: 50% + //vendor-prefix found + //-o-border-radius: 50% + //Instead of the line below you could use @include border-radius($radius, $vertical-radius) + border-radius: 50%; +} +.img-round { + display: inline; + margin: 0 auto; + height: 100%; + width: auto; +} +.socialborder { + padding: 10px 10px 30px 10px; +} +#phase1 { + font-weight: 200; + border-left: 20px solid $color_cinderella_approx; + padding-left: 20px; +} +#phase2 { + font-weight: 200; + border-left: 20px solid $color_mona_lisa_approx; + padding-left: 20px; +} +#phase3 { + font-weight: 200; + border-left: 20px solid $color_persimmon_approx; + padding-left: 20px; +} +#phase4 { + font-weight: 200; + border-left: 20px solid $color_alizarin_crimson_approx; + padding-left: 20px; +} +#phase5 { + font-weight: 200; + border-left: 20px solid $color_tamarillo_approx; + padding-left: 20px; +} +#pad-funders { + padding-right: 55px; + padding-left: 55px; +} +.wrapper-footer { + background-color: $color_stiletto_approx; + padding-bottom: 20px; + padding-top: 30px; + a { + color: $color_kabul_approx; + text-decoration: none; + h1 { + font-weight: 100; + font-size: 17px; + color: $color_green_white_approx; + line-height: 20px; + margin: 48px 0; + padding: 10px; + //Instead of the line below you could use @include border-radius($radius, $vertical-radius) + border-radius: 50px; + border: 1px solid transparent; + border-color: $color_green_white_approx !important; + } + } + p { + font-family: $font_38, $font_39; + font-size: 17px; + font-weight: 200 !important; + color: $color_green_white_approx !important; + } + h3 { + font-family: $font_40, $font_41; + background-color: transparent; + text-transform: none !important; + font-weight: 200; + font-size: 1.4em; + margin-top: 30px; + padding: 0; + padding-bottom: 5px; + margin-bottom: 15px; + color: $color_green_white_approx !important; + } + h6 { + color: $color_kabul_approx; + font-size: .8em; + margin: 5px 0 0; + text-transform: uppercase; + } +} +.wrapper-low-footer { + background-repeat: no-repeat; + background-color: $color_alto_approx; + padding-top: 40px; + padding-bottom: 30px; + padding-left: 50px; + color: $color_mine_shaft_approx !important; + h3 { + font-family: $font_42, $font_43; + text-transform: none !important; + font-weight: 600; + font-size: 1.3em; + color: $color_mine_shaft_approx !important; + } + p { + font-size: 12px; + color: $color_mine_shaft_approx !important; + padding-left: 6px; + } + img { + padding-bottom: 10px !important; + padding-left: 6px; + } +} +#low-footer-pad { + padding-left: 90px; + padding-right: 90px; +} +.icon-align { + img { + display: inline !important; + padding-left: 0; + margin-right: 10px; + } + a { + text-decoration: none !important; + } +} +#footer-red-style { + background-color: $color_stiletto_approx; +} +#footer-bgimg { + background-image: $url_2 no-repeat; +} +.footer-tw { + background-image: $url_3; +} +.footer-fb { + background-image: $url_4; +} +.footer-email { + background-image: $url_5; +} +.footer-cfa { + background-image: $url_6; +} +.center_me { + padding-left: 50px; +} +.marquee { + margin-bottom: 20px; +} +.africa-map { + margin-bottom: 60px; +} +.at-a-glance { + border-left: 20px solid $color_alto_approx; +} +#pad-me { + padding: 70px 75px; + img { + padding-top: 30px !important; + } +} +#slider { + width: 80%; + margin: 50px auto 25px auto; +} +#quote-content { + margin: 30px 0; +} +#quote-content-phone { + margin-top: 20px; + margin-bottom: 20px; +} +#twitter-widget-0 { + margin: 0 auto !important; +} +#twitter-widget-1 { + margin: 0 auto !important; +} +#twitter-widget-2 { + margin: 0 auto !important; +} +#twitter-widget-3 { + margin: 0 auto !important; +} +#twitter-widget-4 { + margin: 0 auto !important; +} +.home-page-parallax { + min-height: 360px; +} +.hp-section { + padding: 40px 0 0; +} +.border { + border: 4px solid $color_gallery_approx; + padding: 20px; +} +#news-ticker { + padding: 0; + h5 { + font-family: $font_56, $font_57; + font-weight: 500; + font-size: 20px !important; + text-transform: capitalize; + text-align: left; + margin-bottom: 15px; + margin-top: 30px; + color: $color_mine_shaft_approx; + display: inline-block; + padding: 5px; + } +} +#quote-previous { + color: $color_manz_approx; + cursor: pointer; + float: left; + font-size: 300%; + padding: 20px 0 0; + text-align: center; + width: 25%; + &:hover { + color: $white; + } +} +#quote-next { + color: $color_manz_approx; + cursor: pointer; + float: left; + font-size: 300%; + padding: 20px 0 0; + text-align: center; + width: 25%; + &:hover { + color: $white; + } +} +#news-articker { + h3 { + font-family: $font_58, $font_59; + font-weight: 600; + font-size: 2.9em !important; + text-transform: uppercase; + text-align: center; + margin-bottom: 15px; + margin-top: 70px; + color: $color_mine_shaft_approx !important; + display: block; + } + p { + text-align: center; + padding: 0 55px; + } +} +.news-push { + margin-top: 130px !important; + background-color: $color_alto_approx; +} +#news { + &.row { + margin-right: 55px; + margin-left: 55px; + } + .featured-video h1 { + color: $color_kabul_approx !important; + } +} +#mapping-the-threat { + .row { + margin-right: 0 !important; + background-color: $white; + } + em { + display: block; + padding: 20px 0; + } + p.lead { + color: $color_log_cabin_approx; + font-family: $font_62, $font_63; + font-size: 1.1em; + line-height: 24px; + margin: 20px 0 30px; + text-align: left; + } +} +#news-ticker-pad { + padding-top: 100px; + padding-left: 95px; + padding-right: 85px; +} +#story-ticker-pad { + padding-top: 10px; + padding-left: 85px; + padding-right: 85px; +} +.video-poster { + background-size: 100% 100%; +} +#parallax-window-1 { + margin-top: 0; + h5 { + background-color: $black_50; + color: $color_gallery_approx; + font-size: .8em; + line-height: 16px; + margin: 0; + margin-left: -10px; + margin-right: -10px; + padding: 10px; + text-align: center; + text-transform: none; + } +} +#chartA { + margin-top: 80px; +} +.country-col { + background-color: $color_gallery_approx; + height: 200px; + padding: 0; + div { + backgroud: $color_picton_blue_approx; + background: linear-gradient(to right, $color_dodger_blue_approx, $color_picton_blue_approx); + height: 100%; + position: relative; + } +} +.table { + width: 95%; + margin: 0 auto; + > tbody > tr > td { + border: 0; + } + > thead > tr > th.rotate { + border: 0; + } +} +@media only screen and(min-width: 1200px) { + th.rotate > div { + //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy) + transform: translate(25px, 51px) rotate(315deg); + } +} +.table-footer { + background-color: $color_pink_swan_approx; + border-bottom: 4px solid $color_tundora_approx; + color: $color_woodsmoke_approx; + font-family: $font_66, $font_67; + font-weight: bold; + font-size: .9em; + text-transform: uppercase; + td { + padding: 10px !important; + } +} +.wrapper-infographic { + margin-top: 20px; + margin-bottom: 20px; + h2 { + background-color: $color_storm_dust_approx; + border-left: 8px solid $color_flame_pea_approx; + color: $white; + font-size: 1em; + font-weight: normal; + margin: 0; + padding: 15px; + text-align: left; + letter-spacing: .5px; + } + img { + padding-bottom: 20px; + &.country { + } + } + h4 { + color: $color_tundora_approx; + font-size: 1.2em; + margin: 0 0 10px 0; + letter-spacing: .5px; + &.disease { + font-size: .9em; + } + } + h5 { + font-size: .9em; + margin: 0; + letter-spacing: .5px; + &.country-link { + margin-top: 20px; + } + } +} +.wrapper-data { + margin-top: 20px; + margin-bottom: 20px; + h2 { + background-color: $color_storm_dust_approx; + border-left: 8px solid $color_flame_pea_approx; + color: $white; + font-size: 1em; + font-weight: normal; + margin: 0; + padding: 15px; + text-align: left; + letter-spacing: .5px; + } + img { + padding-bottom: 20px; + } + h4 { + color: $color_tundora_approx; + font-size: 1.2em; + margin: 0 0 10px 0; + letter-spacing: .5px; + &.disease { + font-size: .9em; + } + } + h5 { + font-size: .9em; + margin: 0; + letter-spacing: .5px; + line-height: 20px; + &.country-link { + margin-top: 20px; + } + } +} +#more-credits { + margin-bottom: 40px; + text-align: center; + h4 { + font-size: 1.2em; + margin-bottom: 20px; + font-size: 1.1em; + margin-top: 20px; + } + p { + font-size: 1em; + } +} +#data-sources { + margin-bottom: 40px; + text-align: center; + h4 { + font-size: 1.2em; + margin-bottom: 20px; + } + p { + font-size: 1em; + } +} +#news-intro { + margin-top: 40px; + text-align: center; + margin-bottom: 60px; + h4 { + margin-bottom: 10px; + } + p { + font-size: 1.1em; + } +} +#infographic-intro { + margin-top: 40px; + text-align: center; + h4 { + margin-bottom: 10px; + } + p { + font-size: 1.1em; + } +} +#ipc-comparison { + .site-nav { + margin-top: 60px; + } + .infographic { + .level-0 { + background-color: $color_alto_approx; + } + .level-0-focus { + background-color: $white; + } + .level-1 { + background-color: $color_pickled_bluewood_approx; + } + .level-1-focus { + background-color: $color_pickled_bluewood_approx; + } + .level-2 { + background-color: $color_keppel_approx; + } + .level-2-focus { + background-color: $color_keppel_approx; + } + .level-3 { + background-color: $color_ronchi_approx; + } + .level-3-focus { + background-color: $color_ronchi_approx; + } + .level-4 { + background-color: $color_jaffa_approx; + } + .level-4-focus { + background-color: $color_jaffa_approx; + } + .level-5 { + background-color: $color_flame_pea_approx; + } + .level-5-focus { + background-color: $color_flame_pea_approx; + } + .status { + height: 1200px; + } + .status2 { + height: 1200px; + } + header { + margin-top: 40px; + text-align: center; + h1 { + color: $color_woodsmoke_approx; + } + h2 { + color: $color_woodsmoke_approx; + } + } + .half-size { + width: 30%; + margin: 20px auto; + } + h1 { + font-family: $font_68, $font_69; + margin-bottom: 10px; + margin-top: 0; + } + h2 { + font-family: $font_70, $font_71; + font-size: 1em; + font-weight: normal; + letter-spacing: 2px; + margin-bottom: 10px; + } + h3 { + background-color: $white; + color: $color_log_cabin_approx; + font-family: $font_72, $font_73; + font-size: 1.2em; + font-weight: bold; + line-height: 25px; + margin-top: 10px; + margin-bottom: 0; + text-transform: none; + } + p { + margin: 10px 0; + } + .chart-footer { + font-size: .9em; + margin: 40px 0; + } + .chart-explainer { + margin: 40px 0; + header { + margin: 0; + } + } + footer { + text-align: center; + } + .juneJulyLabels { + padding: 0; + div { + background-color: $white; + } + span { + display: block; + font-size: .9em; + line-height: 14px; + padding-top: 0; + } + .glyphicon { + margin-bottom: 0; + margin-top: 10px; + //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy) + transform: rotate(45deg); + //Instead of the line below you could use @include transform-origin($origin-x, $origin-y, $origin-z, $only3d) + transform-origin: 5% 5%; + } + } + .mayLabels { + padding: 0; + text-align: right; + div { + background-color: $white; + } + span { + display: block; + font-size: .9em; + line-height: 14px; + padding-top: 0; + } + .glyphicon { + margin-bottom: -5px; + margin-top: 10px; + margin-right: -10px; + //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy) + transform: rotate(-45deg); + //Instead of the line below you could use @include transform-origin($origin-x, $origin-y, $origin-z, $only3d) + transform-origin: 90% 90%; + } + } + .chartLabel { + margin-bottom: 20px; + margin-top: 5px; + } + .left-label h6 { + border-bottom: 1px solid $color_mine_shaft_approx; + padding-bottom: 5px; + font-family: $font_74, $font_75; + font-size: .9em; + font-weight: bold; + text-align: center; + } + .right-label h6 { + border-bottom: 1px solid $color_mine_shaft_approx; + padding-bottom: 5px; + font-family: $font_76, $font_77; + font-size: .9em; + font-weight: bold; + text-align: center; + } + .may .level-5-focus { + border-bottom: 2px solid $black; + } + .juneJuly .level-5-focus { + border-top: 2px solid $black; + } + } + ol { + font-weight: bold; + list-style-type: none; + margin: 20px 0; + margin-left: -40px; + } +} +#all-stories { + .row { + margin-bottom: 20px; + } + span.byline { + margin-bottom: 10px; + } +} +.country-record { + background-color: $color_gallery_approx; + background: linear-gradient($black_25, $black_5); + margin-bottom: 20px; + section { + padding: 5px 15px 30px; + } +} +#twitter-no-scroll { + pointer-events: none; +} +@media(min-width: 768px) { + #pad-getme { + padding-left: 45px; + } + .wrapper-map p.leadmaphead { + margin: 15px 0; + } +} +@media only screen and(min-width: 2560px) { + .info-center { + padding-left: 280px; + } + #mapboard-two { + height: auto !important; + padding-bottom: 90px !important; + iframe { + height: calc(100vh - 920px)!important; + padding-left: 670px; + } + } + #paint { + height: calc(100vh - 1200px)!important; + padding-left: 800px; + } + #paint-one { + height: calc(100vh - 1200px)!important; + padding-right: 780px; + } + .hider_1 { + display: none; + visibility: hidden; + } + .center_me { + padding-left: 90px; + } + div.parallax header { + padding-left: 200px; + } + #mapboard iframe { + height: calc(100vh - 900px)!important; + padding-right: 670px; + } +} +@media only screen and(min-width: 1440px) and(max-width: 2559px) { + .info-center { + padding-left: 280px; + } + #mapboard { + padding-right: 230px; + iframe { + height: calc(100vh - 330px)!important; + } + } + #mapboard-two { + padding-left: 239px !important; + iframe { + height: calc(100vh - 330px)!important; + } + } + .wrapper-map { + margin-bottom: 100px; + } + #paint { + height: calc(100vh - 300px)!important; + padding-left: 239px; + } + #paint-one { + height: calc(100vh - 300px)!important; + padding-right: 230px; + } + .hider_1 { + display: none; + visibility: hidden; + } + .center_me { + padding-left: 60px; + } + div.parallax header { + padding-left: 200px; + } +} +@media only screen and(min-width: 1200px) and(max-width: 1439px) { + .info-center { + padding-left: 280px !important; + } + div.parallax header { + padding-left: 190px !important; + } +} +@media only screen and(min-width: 1000px) and(max-width: 2000px) { + .hider_1 { + display: none; + visibility: hidden; + } + #quote-container img { + height: 100% !important; + width: 100%; + } + .top-story img { + height: 100% !important; + width: 100%; + } + .more-top img { + height: 100% !important; + width: 100%; + } +} +@media only screen and(min-width: 993px) and(max-width: 1200px) { + .wrapper h1 { + font-size: 1.6em; + line-height: 30px; + } + h1.featured-video a { + font-size: 1.2em !important; + } +} +@media only screen and(min-width: 1024px) and(max-width: 1439px) { + .masthead-inner { + padding: .5em 8em !important; + } + div { + &.masthead-inner a { + &.hideable1 { + padding-left: 95px; + } + &.hideable { + padding-left: 95px; + } + } + &.parallax header { + padding-left: 160px; + } + } + .info-center { + padding-left: 210px; + } + #paint { + height: calc(100vh - 150px)!important; + } + #paint-one { + height: calc(100vh - 150px)!important; + } + .hider_1 { + display: none; + visibility: hidden; + } + .center_me { + padding-left: 25px; + } + #mapboard iframe { + height: calc(100vh - 100px)!important; + } + #mapboard-two iframe { + height: calc(100vh - 155px)!important; + } +} +@media only screen and(min-width: 1051px) and(max-width: 1110px) { + .hider_1 { + display: none; + visibility: hidden; + } + a.main-nav { + font-size: .8em; + padding: 9px; + } +} +@media only screen and(min-width: 991px) and(max-width: 1023px) { + #paint { + height: calc(100vh - 100px)!important; + } + #paint-one { + height: calc(100vh - 100px)!important; + } + #mapboard iframe { + height: calc(100vh - 100px) !important; + } +} +@media only screen and(min-width: 991px) and(max-width: 1050px) { + .hider_1 { + display: none; + visibility: hidden; + } + a.main-nav { + font-size: .8em; + padding: 5px; + } +} +@media only screen and(min-width: 770px) and(max-width: 990px) { + .hider_1 { + display: none; + visibility: hidden; + } + a.button.button-circlex { + left: 20% !important; + } +} +@media only screen and(min-width: 776px) and(max-width: 990px) { + #mapboard { + padding: 0; + } + #mapsreshape { + padding-top: 30px; + position: relative; + iframe { + height: calc(100vh - 100px); + } + } + #paint { + padding: 0 2px 0 20px; + height: calc(100vh - 100px); + } + #paint-one { + padding: 0 2px 0 20px; + height: calc(100vh - 100px); + } + #twitter-widget-0 { + height: 240px !important; + } + .about-set-contributors-row { + margin-left: 10px !important; + margin-right: 10px !important; + } + .countries-wide { + padding: 40px 70px 50px; + } + .wrapper-footer { + .col-sm-2 { + width: 20.67%; + } + a h1 { + font-size: 13px; + padding: 7px; + } + } + .hider_1 { + display: none; + visibility: hidden; + } + a.main-nav { + display: none; + } + .wrapper h1 { + font-size: 1.1em; + line-height: 20px; + } + #mapping-the-threat .row { + background-color: $white; + } + .wrapper-map p.leadmap { + margin: 20px 0; + } + .button.button-circlex { + margin-left: 38px; + } +} +@media only screen and(min-width: 680px) and(max-width: 775px) { + #parallax-window-1 { + margin-left: 0; + } + .parallax-mirror { + left: 0 !important; + width: 743px !important; + } + #paint { + padding: 0 2px 0 20px; + } + #paint-one { + padding: 0 2px 0 20px; + } + .hider_1 { + display: none; + visibility: hidden; + } + a.main-nav { + display: none; + } + div.parallax header { + margin-top: 16px; + margin-left: 50px; + h2 { + padding-left: 4px; + } + } + .wrapper-map p.leadmap { + margin: 20px 0 !important; + } + #pad-me img { + padding: 25px 300px; + } +} +@media only screen and(min-width: 320px) and(max-width: 764px) { + #paint { + margin-top: -40px !important; + } + #mapboard { + padding: 30px 20px 0 40px !important; + } + a.button.button-circlex { + top: 50%; + left: 50%; + //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy) + transform: translate(-50%, -50%); + } + .wrapper-map p.leadmaphead { + margin-left: 10%; + margin-right: 10%; + } +} +@media only screen and(min-width: 480px) and(max-width: 679px) { + #parallax-window-1 { + margin-left: 0; + padding-left: 120px; + } + .parallax-mirror { + left: 0 !important; + width: 730px !important; + } + .hider { + display: none; + visibility: hidden; + } + div.parallax header { + margin-top: 5px; + padding-right: 0; + h2 { + padding-left: 3px; + } + } + .wrapper a h1 { + margin: 28px 80px; + } + .wrapper-footer a h1 { + margin: 48px 100px; + text-align: center; + font-size: 16px; + } + #pad-me img { + padding: 17px 165px; + } +} +@media only screen and(min-width: 360px) and(max-width: 479px) { + div { + &.masthead-inner a { + &.hideable1 { + display: none !important; + } + &.hideable { + display: none !important; + } + } + &.parallax header { + margin-top: 5px; + margin-left: -100px; + padding-right: 0; + h2 { + padding-left: 80px; + padding-right: 50px; + } + } + } + .share-options { + display: none; + visibility: hidden; + } + #parallax-window-1 { + margin-left: 150px; + } + .parallax-mirror { + left: 0 !important; + width: 530px !important; + } + .top-story { + padding-left: 0 !important; + padding-right: 0 !important; + a.button { + margin-bottom: 50px; + margin-left: 0; + } + } + .info-center { + padding-left: 90px; + } + #story-ticker-pad { + padding-left: 35px; + padding-right: 35px; + } + #news-ticker-pad { + padding-left: 27px; + padding-right: 27px; + } + #news-articker { + p { + padding: 0 10px; + } + h3 { + padding-left: 6px; + } + } + #pad-funders { + padding-left: 15px; + padding-right: 15px; + } + .wrapper-map { + margin-top: -50px; + margin-bottom: 80px; + } + #mapboard { + padding: 30px 110px 0 15px; + } + #paint { + margin-bottom: 20px; + } + .hider { + display: none; + visibility: hidden; + } + #news.row { + margin-left: 15px !important; + margin-right: 15px !important; + } + .wrapper a h1 { + margin: 28px 80px; + font-size: 1.5em; + } + #news-ticker h5 { + padding-left: 55px; + margin-top: 0; + } + h2.explainer-headline { + padding-left: 51px; + } + #pad-me img { + padding: 35px; + } + .wrapper-footer a h1 { + margin: 48px 100px; + text-align: center; + font-size: 16px; + } +} +@media only screen and(min-width: 360px) and(max-width: 428px) { + .parallax-mirror { + left: 0 !important; + width: 530px !important; + } + #parallax-window-1 { + display: none; + margin-left: 0; + padding-left: 150px; + } + .top-story { + padding-left: 0 !important; + padding-right: opx !important; + } + .pad-data { + padding-left: 20px !important; + } + #paint { + padding-left: 50px; + } + #paint-one { + padding-left: 50px; + } + #low-footer-pad { + padding-right: 110px !important; + } + .hider { + display: none; + visibility: hidden; + } + div.parallax header { + h1 { + font-size: 3em; + margin-left: 45px; + } + h2 { + font-size: 1em; + padding-left: 40px; + padding-right: 70px; + } + } + h1.featured-partners { + padding-top: 0; + padding-left: 25px; + } + .button.button-circlex { + margin-left: 125px; + margin-top: -20px; + margin-bottom: 100px; + } + #news-articker h3 { + padding-left: 6px; + padding-top: 30px; + } +} +.logo h1 { + display: inline-block; + font-size: 1em; + padding: 0; + letter-spacing: 1px; + line-height: 15px; + margin: 0; + margin-bottom: 14px; + margin-left: 20px; +} +.navbar-fixed-top.scrolled { + background-color: $white !important; + //Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10) + transition: background-color 200ms linear; +} +ul li { + font-family: $font_2, $font_3; +} +img.team-photo { + margin: 0 auto; + width: 50%; + filter: contrast(.75) saturate(2) sepia(.5); + //Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10) + transition: all .5s; + &:hover { + filter: contrast(1) saturate(1) sepia(0); + } +} +.footer-social-options img { + display: block; + max-width: 100%; + height: auto; + padding-bottom: 10px; +} +.quote s { + text-decoration: none; +} +th.rotate { + height: 140px; + white-space: nowrap; + > div { + //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy) + transform: translate(25px, 51px) rotate(290deg); + width: 1px; + position: relative; + top: -50px; + left: -15px; + > span { + font-family: $font_64, $font_65; + font-weight: normal; + font-size: .9em; + padding: 5px 10px; + text-transform: uppercase; + } + } +} +td.country-col { + padding: 0 10px !important; +} +#the-team .site-nav { + margin-top: 60px; +} +#countries .site-nav { + margin-top: 60px; +} +#data .site-nav { + margin-top: 60px; +} +.maps iframe { + height: calc(100vh - 245px); + pointer-events: none; +} \ No newline at end of file diff --git a/app/styles/scss/styles.scss b/app/styles/scss/styles.scss new file mode 100644 index 0000000..b2b0ce6 --- /dev/null +++ b/app/styles/scss/styles.scss @@ -0,0 +1,2453 @@ +//colors +$white: rgba(255, 255, 255, 1); +$color_mine_shaft_approx: rgba(50, 47, 49, 1); +$color_tundora_approx: rgba(68, 68, 68, 1); +$color_pomegranate_approx: rgba(233, 63, 38, 1); +$color_camarone_approx: rgba(15, 98, 37, 1); +$black_20: rgba(0, 0, 0, 0.2); +$color_gallery_approx: rgba(238, 238, 238, 1); +$color_celeste_approx: rgba(204, 204, 204, 1); +$color_green_white_approx: rgba(238, 234, 219, 1); +$color_suva_gray_approx: rgba(136, 136, 136, 1); +$white_80: rgba(255, 255, 255, .8); +$color_keppel_approx: rgba(69, 178, 157, 1); +$color_persian_green_approx: rgba(23, 170, 157, 1); +$color_pampas_approx: rgba(245, 243, 234, 1); +$color_steel_blue_approx: rgba(51, 122, 183, 1); +$color_stiletto_approx: rgba(155, 41, 74, 1); +$color_kabul_approx: rgba(96, 64, 67, 1); +$color_log_cabin_approx: rgba(34, 34, 34, 1); +$color_fuscous_gray_approx: rgba(85, 85, 85, 1); +$color_jaffa_approx: rgba(226, 122, 63, 1); +$color_woodsmoke_approx: rgba(17, 17, 17, 1); +$color_tapa_approx: rgba(119, 119, 119, 1); +$color_cinderella_approx: rgba(254, 229, 217, 1); +$color_mona_lisa_approx: rgba(252, 174, 145, 1); +$color_persimmon_approx: rgba(251, 106, 74, 1); +$color_alizarin_crimson_approx: rgba(222, 45, 38, 1); +$color_tamarillo_approx: rgba(165, 15, 21, 1); +$color_alto_approx: rgba(222, 222, 222, 1); +$color_manz_approx: rgba(230, 228, 117, 1); +$black_50: rgba(0, 0, 0, .5); +$color_picton_blue_approx: rgba(79, 183, 244, 1); +$color_dodger_blue_approx: rgba(12, 165, 255, 1); +$color_pink_swan_approx: rgba(187, 187, 187, 1); +$color_pickled_bluewood_10_approx: rgba(51, 77, 92, .10); +$color_storm_dust_approx: rgba(102, 102, 102, 1); +$color_flame_pea_approx: rgba(223, 90, 73, 1); +$black_25: rgba(0, 0, 0, 0.25); +$black_5: rgba(0, 0, 0, 0.05); +$color_pickled_bluewood_approx: rgba(51, 77, 92, 1); +$color_ronchi_approx: rgba(239, 201, 76, 1); +$black: rgba(0, 0, 0, 1); + +//fonts +$font_0: 'Montserrat'; +$font_1: 'sans-serif'; +$font_2: 'Montserrat'; +$font_3: 'sans-serif'; +$font_4: 'Montserrat'; +$font_5: 'sans-serif'; +$font_6: 'Montserrat'; +$font_7: 'sans-serif'; +$font_8: 'Merriweather'; +$font_9: 'serif'; +$font_10: 'Merriweather'; +$font_11: 'serif'; +$font_12: 'Merriweather'; +$font_13: 'serif'; +$font_14: 'Merriweather'; +$font_15: 'serif'; +$font_16: 'Merriweather'; +$font_17: 'serif'; +$font_18: 'Merriweather'; +$font_19: 'serif'; +$font_20: 'Merriweather'; +$font_21: 'serif'; +$font_22: 'Merriweather'; +$font_23: 'serif'; +$font_24: 'Merriweather'; +$font_25: 'serif'; +$font_26: 'Merriweather'; +$font_27: 'serif'; +$font_28: 'Montserrat'; +$font_29: 'sans-serif'; +$font_30: 'Merriweather'; +$font_31: 'serif'; +$font_32: 'Merriweather'; +$font_33: 'serif'; +$font_34: 'Montserrat'; +$font_35: 'sans-serif'; +$font_36: 'Merriweather'; +$font_37: 'serif'; +$font_38: 'Merriweather'; +$font_39: 'serif'; +$font_40: 'Montserrat'; +$font_41: 'sans-serif'; +$font_42: 'Montserrat'; +$font_43: 'sans-serif'; +$font_44: 'Montserrat'; +$font_45: 'sans-serif'; +$font_46: 'Montserrat'; +$font_47: 'sans-serif'; +$font_48: 'Merriweather'; +$font_49: 'serif'; +$font_50: 'Merriweather'; +$font_51: 'serif'; +$font_52: 'Merriweather'; +$font_53: 'serif'; +$font_54: 'Montserrat'; +$font_55: 'sans-serif'; +$font_56: 'Montserrat'; +$font_57: 'sans-serif'; +$font_58: 'Merriweather'; +$font_59: 'serif'; +$font_60: 'Merriweather'; +$font_61: 'serif'; +$font_62: 'Merriweather'; +$font_63: 'serif'; +$font_64: 'Merriweather'; +$font_65: 'serif'; +$font_66: 'Montserrat'; +$font_67: 'sans-serif'; +$font_68: 'Merriweather'; +$font_69: 'serif'; +$font_70: 'Merriweather'; +$font_71: 'serif'; +$font_72: 'Merriweather'; +$font_73: 'serif'; +$font_74: 'Merriweather'; +$font_75: 'serif'; + +//urls +$url_0: url('../img/language.png'); +$url_1: url('../img/LandingPageBanner.jpg'); +$url_2: url('../img/Footer.jpg'); +$url_3: url('../img/footer-tw.png'); +$url_4: url('img/footer-fb.png'); +$url_5: url('img/footer-mail.png'); +$url_6: url('img/footer-cfa.png'); + +.masthead { + background: rgba(155, 41, 74, 0); + margin: 0; + font-family: $font_0, $font_1; + font-weight: 200; + margin-bottom: 20px; + position: fixed; + text-align: center; + top: 0; + width: 100%; + z-index: 10000; + .logo { + display: inline-block; + line-height: 100%; + margin: 15px 0 0; + padding: 0; + text-align: left; + a { + color: $color_mine_shaft_approx; + text-transform: none; + &:hover { + color: $color_mine_shaft_approx; + //vendor-prefix found + //-webkit-border-radius: 8px + //vendor-prefix found + //-moz-border-radius: 8px + //Instead of the line below you could use @include border-radius($radius, $vertical-radius) + border-radius: 8px; + } + } + img { + display: inline-block; + margin-top: -10px; + } + } + .share-options { + display: inline-block; + float: right; + margin-top: 10px; + text-align: right; + } + ul { + line-height: 100%; + list-style: none; + margin: 0; + padding: 0; + text-align: right; + li a { + background-repeat: no-repeat; + background-size: 100% auto; + display: block; + height: 25px; + line-height: 100%; + margin: .6em 0 0 .5em; + overflow: auto; + padding: 0 .5em; + width: 75px; + } + &.submenu > li a { + display: block; + font-size: .9em; + padding: 1em 1.5em; + height: auto; + width: auto; + } + } + li { + line-height: 100%; + list-style: none; + margin: 0; + padding: 0; + text-align: right; + } + .scr { + display: none; + visibility: hidden; + } + h6 { + display: none; + font-size: .8em; + margin-bottom: 15px; + text-transform: uppercase; + &:hover { + cursor: pointer; + } + } +} +.masthead-inner { + margin: 0 auto; + max-width: 1050px; + padding: .5em 2em; + padding-bottom: 14px; + width: 100%; + text-align: left; +} +@media only screen and(max-width: 768px) { + .site-nav { + h6 { + display: block; + } + a { + display: none; + } + } + .top-story { + margin-bottom: 20px; + } + .description { + margin-top: 20px; + } + .wrapper-region-reports { + .country { + margin: 0 auto 50px auto; + width: 75%; + } + .container h2 { + text-align: center; + } + } + .countries-wide { + display: none; + } + .countries-mobile { + display: block; + } + #all-stories { + .row { + margin-bottom: 40px; + } + .col-sm-3 { + margin-bottom: 20px; + } + } + h1 { + text-align: left; + } + h2 { + text-align: left; + } + #ipc-comparison { + h1 { + text-align: center; + } + h2 { + text-align: center; + } + } + .logo h1 { + font-size: .9em; + letter-spacing: 0; + margin-left: 10px; + } + .masthead .logo img { + width: 125px; + height: 50px; + } + ol.left-list { + margin-bottom: 0; + } + #quote-container p { + margin-bottom: 0; + } + #language-services h6 { + margin-bottom: 30px; + } + #meet-the-team div.social { + margin-bottom: 30px; + } + #more-credits header h4 { + margin-top: -20px; + } + #parallax-window-1 h5 { + text-align: left; + } + a.main-nav { + display: none; + } + th.rotate > div { + //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy) + transform: translate(25px, 51px) rotate(270deg); + } +} +a { + color: $color_steel_blue_approx; + &.main-nav { + color: $color_tundora_approx; + font-size: .9em; + font-weight: 400; + margin: 28px 0; + padding: 10px; + letter-spacing: .1px; + //Instead of the line below you could use @include border-radius($radius, $vertical-radius) + border-radius: 50px; + border: 1px solid transparent; + &:hover { + color: $color_pomegranate_approx; + //vendor-prefix found + //-webkit-border-radius: 50px + //vendor-prefix found + //-moz-border-radius: 50px + //Instead of the line below you could use @include border-radius($radius, $vertical-radius) + border-radius: 50px; + border: 1px solid transparent; + text-decoration: none; + } + &:focus { + color: $color_pomegranate_approx; + //vendor-prefix found + //-webkit-border-radius: 50px + //vendor-prefix found + //-moz-border-radius: 50px + //Instead of the line below you could use @include border-radius($radius, $vertical-radius) + border-radius: 50px; + border: 1px solid transparent; + text-decoration: none; + } + &.current { + color: $color_pomegranate_approx; + //vendor-prefix found + //-webkit-border-radius: 50px + //vendor-prefix found + //-moz-border-radius: 50px + //Instead of the line below you could use @include border-radius($radius, $vertical-radius) + border-radius: 50px; + border: 1px solid transparent; + text-decoration: none; + } + } + &.button { + &.button-circle { + color: $white; + } + &.button-circlex { + color: $white; + line-height: 25px !important; + margin-left: auto; + top: 50%; + left: 35%; + } + } +} +.button { + display: inline-block; + position: relative; + cursor: pointer; + outline: none; + white-space: nowrap; + margin: 5px; + padding: 6px 22px; + font-size: 15px !important; + height: 40px; + line-height: 40px; + background-color: $color_camarone_approx; + color: $white !important; + font-weight: 600; + text-transform: capitalize; + letter-spacing: 1px; + border: none; + //Instead of the line below you could use @include text-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10) + text-shadow: 1px 1px 1px $black_20; + text-decoration: none !important; + &.button-circle { + //Instead of the line below you could use @include border-radius($radius, $vertical-radius) + border-radius: 20px; + } + &.button-circlex { + //Instead of the line below you could use @include border-radius($radius, $vertical-radius) + border-radius: 20px; + margin-left: 100px; + margin-top: 50px; + } +} +.unknown { + font-size: .9em; +} +.language-toggle { + background-image: $url_0; +} +.submenu { + clear: both; + display: none; + margin-top: 0; + position: absolute; + top: 100%; + text-align: left; + //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy) + transform: translateX(-82%); + z-index: 110; + > li { + background-color: $white_80; + display: block; + &:lastchild { + border-bottom: none; + } + a:hover { + color: $color_keppel_approx; + } + } +} +.site-nav { + background-color: $color_gallery_approx; + border-bottom: 1px solid $color_celeste_approx; + font-size: 1.1em; + text-align: center; + display: none; + visibility: hidden; + nav { + margin: 15px 0 10px; + } + h6 { + display: none; + font-size: .8em; + margin-bottom: 15px; + text-transform: uppercase; + &:hover { + cursor: pointer; + } + } + a { + color: $color_green_white_approx; + font-size: .9em; + font-weight: normal; + line-height: 30px; + padding: 5px 20px; + letter-spacing: .5px; + &:hover { + text-decoration: none; + } + span:hover { + border-bottom: 5px solid $color_suva_gray_approx; + } + } +} +.parallax { + min-height: 500px; + background: transparent; +} +.exp { + display: block; + margin: 0 auto; + margin-bottom: 30px; + width: 75%; +} +.mini-section { + margin: 20px 0; + p { + padding: 0 20px 20px 5px; + } + h3 { + text-transform: none !important; + font-weight: 200; + color: $color_kabul_approx; + font-size: 1.4em; + //Instead of the line below you could use @include border-radius($radius, $vertical-radius) + border-radius: 0; + //Instead of the line below you could use @include border-bottom-right-radius($radius) + border-bottom-right-radius: 2px; + } +} +ol { + margin-bottom: 40px; + &.stories { + margin-left: -40px; + img { + padding-top: 10px; + } + li { + list-style-type: none; + margin-bottom: 20px; + } + a { + display: block; + font-family: $font_20, $font_21; + font-size: 1em; + margin: 5px 0; + } + } +} +video { + width: 100% !important; + height: auto !important; + margin: 0 0 40px 0; +} +.wrapper { + background-color: $color_stiletto_approx; + background-repeat: no-repeat; + margin-bottom: 40px; + margin-top: 40px; + padding-top: 20px; + padding-bottom: 20px; + h1 { + color: $color_green_white_approx; + text-align: center !important; + font-size: 1.8em; + line-height: 40px; + margin-bottom: 40px; + margin-right: 0; + font-weight: 200; + margin-top: 40px; + font-family: $font_28, $font_29; + } + a { + h1 { + margin: 28px 0; + padding: 10px; + //Instead of the line below you could use @include border-radius($radius, $vertical-radius) + border-radius: 50px; + border: 1px solid transparent; + border-color: $color_green_white_approx !important; + } + &:hover { + border-color: $color_green_white_approx !important; + //Instead of the line below you could use @include border-radius($radius, $vertical-radius) + border-radius: 50px !important; + text-decoration: none !important; + } + } + ol#ipc-phases li { + font-size: 1em; + margin-bottom: 15px; + } + p.lead { + color: $white; + font-family: $font_30, $font_31; + line-height: 34px; + margin: 40px 0; + margin-bottom: 60px; + font-size: 18px; + text-align: left; + } +} +.top-story { + margin-bottom: 60px; + img { + filter: grayscale(50%); + margin-top: 5px; + margin-bottom: 20px; + //Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10) + transition: all 1s; + &:hover { + filter: grayscale(0%); + margin-bottom: 20px; + } + } + a.button { + font-family: $font_2, $font_3; + display: inline-block; + position: relative; + cursor: pointer; + outline: none; + white-space: nowrap; + margin: 5px; + padding: 0 22px; + font-size: 15px !important; + height: 40px; + line-height: 40px; + background-color: $color_persian_green_approx; + color: $white !important; + font-weight: 200 !important; + text-transform: capitalize; + letter-spacing: 1px; + border: none; + //Instead of the line below you could use @include text-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10) + text-shadow: 1px 1px 1px $black_20; + text-decoration: none !important; + //Instead of the line below you could use @include border-radius($radius, $vertical-radius) + border-radius: 0; + } +} +.more-top { + margin-bottom: 60px; + img { + filter: grayscale(50%); + margin-top: 5px; + margin-bottom: 20px; + //Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10) + transition: all 1s; + &:hover { + filter: grayscale(0%); + margin-bottom: 20px; + } + } +} +#quote-container { + margin: 0 auto; + img { + filter: grayscale(50%); + margin-top: 5px; + margin-bottom: 20px; + //Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10) + transition: all 1s; + &:hover { + filter: grayscale(0%); + margin-bottom: 20px; + } + } + .quote { + text-align: left; + font-family: $font_50, $font_51; + font-size: 1.1em; + } + p { + font-family: $font_52, $font_53; + color: $color_kabul_approx; + font-size: .9em; + margin-top: 10px; + margin-bottom: 30px; + line-height: 22px; + } + a { + color: $color_kabul_approx; + font-weight: bold; + font-size: 1.6em; + line-height: 28px; + } + .invisible { + display: none; + } +} +.video-container { + margin-bottom: 15px; + position: relative; + padding-bottom: 56.25%; + padding-top: 35px; + height: 0; + overflow: hidden; + iframe { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + position: absolute; + top: 38px; + left: 0; + width: 100%; + height: 100%; + } + object { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + } + embed { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + } +} +.description { + padding-bottom: 20px; +} +.wrapper-region-reports { + background-color: $white; + padding-bottom: 0; + .country { + //Instead of the line below you could use @include border-radius($radius, $vertical-radius) + border-radius: ; + } + h2 { + text-align: left; + } + h3 { + //Instead of the line below you could use @include border-top-left-radius($radius) + border-top-left-radius: 0; + //Instead of the line below you could use @include border-top-right-radius($radius) + border-top-right-radius: 0; + margin-bottom: 10px; + } + p { + line-height: 22px; + margin-bottom: 30px; + } +} +.about-set-contributors-row { + margin-left: -5px !important; + margin-right: -5px !important; +} +.countries-wide { + display: block; + padding: 20px 70px 100px; +} +.about-countries-wide { + display: block; + padding: 50px 30px 10px; +} +#alter-color { + background-color: $color_pampas_approx; +} +.alter-color { + background-color: $color_pampas_approx; +} +.countries-mobile { + display: none; +} +div { + &.new-section { + margin-top: 20px; + } + header { + h1 { + color: $white; + } + h2 { + color: $white; + } + } + &.combined-map { + position: relative; + height: 100%; + img { + position: absolute; + left: 0; + top: 0; + &:first-child { + position: relative; + left: 0; + top: 0; + } + } + } + &.quote-content { + margin-top: -20px; + } + &.noUi-handle { + cursor: pointer; + } + &.country-record { + //Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10) + transition: all 0.5s ease; + opacity: 1; + &:hover { + opacity: .8; + } + } + &.social { + margin-top: -5px; + margin-bottom: 15px; + text-align: center; + a { + display: inline-block; + padding: 0 5px; + } + img { + width: 15px; + } + } + &.parallax header { + color: $color_stiletto_approx; + padding-top: 170px; + padding-left: 90px; + padding-bottom: 1px; + h1 { + padding: 0; + padding-bottom: 75px; + color: $color_kabul_approx; + } + h2 { + padding: 0; + padding-bottom: 75px; + color: $color_stiletto_approx; + line-height: 20px; + margin-top: 5px; + padding-right: 153px; + text-transform: capitalize !important; + display: none; + } + } + &.masthead-inner a { + &.hideable1 { + opacity: 0; + padding-left: 155px; + } + &.hideable { + opacity: 0; + padding-left: 155px; + } + } +} +h1 { + text-align: center; + color: $color_log_cabin_approx; + font-family: $font_4, $font_5; + font-size: 4em; + font-weight: bold; + margin: 20px 0 0; + &.featured-story { + font-size: 1.8em; + margin: 10px 0; + text-align: left; + } + &.featured-video { + line-height: 24px; + font-size: 1.2em; + font-weight: 400; + margin: 10px 0; + text-align: left; + font-family: $font_42, $font_43; + a { + color: $color_mine_shaft_approx !important; + background-color: $color_alto_approx; + } + } + &.featured-contributor { + line-height: 24px; + font-size: 1.5em; + margin: 10px 0; + text-align: left; + font-family: $font_44, $font_45; + font-weight: 100; + padding-top: 20px; + a { + color: $color_kabul_approx !important; + } + } + &.featured-partners { + line-height: 24px; + font-size: 1.5em; + margin: 30px 0; + text-align: left !important; + font-family: $font_46, $font_47; + font-weight: 100; + padding-top: 20px; + a { + color: $color_pampas_approx !important; + } + } +} +h2 { + text-align: center; + color: $color_fuscous_gray_approx; + font-family: $font_6, $font_7; + text-transform: uppercase; + font-size: 1.2em; + font-weight: bold; + margin: 15px 0 20px; + &.explainer-headline { + font-family: $font_58, $font_59; + font-weight: 500; + text-transform: uppercase; + color: $color_kabul_approx; + display: inline-block; + font-size: 1em; + margin-top: 30px; + padding: 5px; + } +} +h3 { + //Instead of the line below you could use @include border-radius($radius, $vertical-radius) + border-radius: 2px; + color: $white; + display: inline-block; + font-family: $font_8, $font_9; + font-size: 1.1em; + padding: 4px 6px; + text-transform: uppercase; + margin: 0 0 10px 0; + font-weight: bold; + &.country-label { + background-color: $color_jaffa_approx; + font-size: .9em; + font-weight: normal; + } +} +.minifeed-header { + font-family: $font_10, $font_11; + color: $color_kabul_approx; + font-size: 1em; + font-weight: 500; + margin-bottom: -5px; + text-align: left; + padding-left: 13px; + text-transform: none !important; +} +.justabit { + margin-top: 10px; +} +.reporter-list { + font-size: .9em; + letter-spacing: .5px; + list-style-type: none; + margin-left: -40px; + text-transform: uppercase; + li { + margin-bottom: 5px; + } +} +#language-services { + margin-top: 20px; + text-align: center; + h5 { + font-size: 1em; + font-weight: bold; + letter-spacing: .5px; + margin-top: 15px; + text-align: center; + } + h6 { + font-size: .9em; + font-weight: normal; + letter-spacing: .5px; + margin-top: 5px; + text-align: center; + text-transform: uppercase; + } + h4 { + font-size: 1.2em; + margin-bottom: 20px; + font-size: 1.1em; + margin-top: 20px; + } + p { + margin-bottom: 40px; + } +} +#meet-the-team { + margin-top: 20px; + h5 { + font-size: 1em; + font-weight: bold; + letter-spacing: .5px; + margin-top: 15px; + text-align: center; + } + h6 { + font-size: .9em; + font-weight: normal; + letter-spacing: .5px; + margin-top: 5px; + text-align: center; + text-transform: uppercase; + } +} +.team-row { + margin-bottom: 20px; +} +h4 { + font-family: $font_12, $font_13; + font-size: 1.5em; + text-transform: uppercase; + margin: 0 0 10px 0; + font-weight: bold; + margin-bottom: 20px; +} +h5 { + font-family: $font_12, $font_13; + font-size: 1.5em; + text-transform: uppercase; + margin: 0 0 10px 0; + font-weight: bold; + font-size: 1em; + font-weight: normal; + margin-bottom: 5px; +} +h6 { + font-family: $font_12, $font_13; + font-size: 1.5em; + text-transform: uppercase; + margin: 0 0 10px 0; + font-weight: bold; + color: $color_woodsmoke_approx; + font-size: 1.2em; + text-transform: none; + &.last-item { + margin-bottom: 20px; + } +} +p { + font-family: $font_14, $font_15; + &.lead { + color: $color_log_cabin_approx; + font-family: $font_16, $font_17; + font-size: 1.3em; + line-height: 34px; + margin: 40px 0; + text-align: center; + } + &.lead-video { + font-family: $font_18, $font_19; + color: $color_mine_shaft_approx !important; + font-size: 1em; + line-height: 24px; + margin: 15px 0; + } + &.note { + font-size: .9em; + color: $color_kabul_approx; + margin: 15px 0; + padding-left: 13px; + text-align: left; + } + &.intro { + color: $color_log_cabin_approx; + font-family: $font_48, $font_49; + font-size: 1.1em; + line-height: 24px; + margin: 15px 0 20px; + } + small { + padding-bottom: 20px; + font-size: 90%; + width: 80%; + margin: auto; + display: block; + text-align: center; + } +} +#news-page { + .site-nav { + margin-top: 60px; + } + p.lead-video { + font-size: 1em; + margin: 5px 0 15px; + } +} +span { + &.pubdate { + color: $color_mine_shaft_approx; + display: inline-block; + font-family: $font_22, $font_23; + font-size: .65em; + letter-spacing: .5px; + padding-right: 3px; + padding-bottom: 10px; + text-transform: capitalize; + } + &.video { + color: $color_mine_shaft_approx; + display: inline-block; + font-family: $font_22, $font_23; + font-size: .65em; + letter-spacing: .5px; + padding-right: 3px; + padding-bottom: 10px; + text-transform: capitalize; + } + &.byline { + color: $color_tapa_approx; + display: block; + font-family: $font_24, $font_25; + font-size: .9em; + } +} +nav { + font-family: $font_26, $font_27; + font-size: 1em; + font-weight: 600; + margin-top: 25px; + margin-bottom: 25px; + text-transform: uppercase; + a { + letter-spacing: 1px; + } + li { + display: inline-block; + margin: 0 10px; + } + ul { + margin-left: -40px; + text-align: center; + } +} +article { + margin-bottom: 20px; + h1 { + margin: 0; + font-size: 1.2em; + } +} +button { + margin: 10px 0; +} +.main-header { + backgroun 100% 100%d: $url_1 100% 100%; +} +#wrapper-about { + margin-bottom: 0 !important; + margin-top: 0; +} +.wrapper-map { + background-color: $color_pickled_bluewood_10_approx; + margin-bottom: 10px; + margin-top: 0; + li { + font-family: $font_32, $font_33; + font-size: 1em; + list-style-type: none; + margin-left: -40px; + margin-bottom: 10px; + } + p { + &.leadmap { + font-weight: 200; + margin: 40px 0; + color: $color_mine_shaft_approx; + } + &.leadmaphead { + font-family: $font_34, $font_35; + margin: 30px 0; + font-size: 20px; + font-weight: 400; + color: $color_mine_shaft_approx; + } + } + h2 { + margin-bottom: 15px; + text-align: left; + } + h3 { + //Instead of the line below you could use @include border-top-left-radius($radius) + border-top-left-radius: 0; + //Instead of the line below you could use @include border-top-right-radius($radius) + border-top-right-radius: 0; + margin-bottom: 10px; + } +} +#paint { + height: calc(100vh - 4px); + padding: 20px 20px 0 131px; + background-color: $white; + color: $color_mine_shaft_approx; +} +#paint-one { + height: calc(100vh - 4px); + padding: 20px 110px 0 10px; + background-color: $white; + color: $color_mine_shaft_approx; +} +.pad-data { + padding-left: 5px !important; +} +#pad-data { + margin-left: 15px; + img { + padding-top: 50px; + padding-bottom: 20px; + } +} +#mapboard { + padding: 40px 110px 0 0; + background-color: $white; +} +#mapboard-two { + padding: 40px 10px 0 130px !important; + background-color: $white; + height: calc(100vh - 245px) !important; + pointer-events: none; +} +#img-circle { + position: relative; + overflow: hidden; + //vendor-prefix found + //-webkit-border-radius: 50% + //vendor-prefix found + //-moz-border-radius: 50% + //vendor-prefix found + //-ms-border-radius: 50% + //vendor-prefix found + //-o-border-radius: 50% + //Instead of the line below you could use @include border-radius($radius, $vertical-radius) + border-radius: 50%; +} +.img-round { + display: inline; + margin: 0 auto; + height: 100%; + width: auto; +} +.socialborder { + padding: 10px 10px 30px 10px; +} +#phase1 { + font-weight: 200; + border-left: 20px solid $color_cinderella_approx; + padding-left: 20px; +} +#phase2 { + font-weight: 200; + border-left: 20px solid $color_mona_lisa_approx; + padding-left: 20px; +} +#phase3 { + font-weight: 200; + border-left: 20px solid $color_persimmon_approx; + padding-left: 20px; +} +#phase4 { + font-weight: 200; + border-left: 20px solid $color_alizarin_crimson_approx; + padding-left: 20px; +} +#phase5 { + font-weight: 200; + border-left: 20px solid $color_tamarillo_approx; + padding-left: 20px; +} +#pad-funders { + padding-right: 55px; + padding-left: 55px; +} +.funders-uncap { + text-transform: capitalize !important; + font-size: 2.5em !important; +} +.wrapper-footer { + background-color: $color_stiletto_approx; + padding-bottom: 20px; + padding-top: 30px; + a { + color: $color_kabul_approx; + text-decoration: none; + h1 { + font-weight: 100; + font-size: 17px; + color: $color_green_white_approx; + line-height: 20px; + margin: 48px 0; + padding: 10px; + //Instead of the line below you could use @include border-radius($radius, $vertical-radius) + border-radius: 50px; + border: 1px solid transparent; + border-color: $color_green_white_approx !important; + } + } + p { + font-family: $font_36, $font_37; + font-size: 17px; + font-weight: 200 !important; + color: $color_green_white_approx !important; + } + h3 { + font-family: $font_38, $font_39; + background-color: transparent; + text-transform: none !important; + font-weight: 200; + font-size: 1.4em; + margin-top: 30px; + padding: 0; + padding-bottom: 5px; + margin-bottom: 15px; + color: $color_green_white_approx !important; + } + h6 { + color: $color_kabul_approx; + font-size: .8em; + margin: 5px 0 0; + text-transform: uppercase; + } +} +.wrapper-low-footer { + background-repeat: no-repeat; + background-color: $color_alto_approx; + padding-top: 40px; + padding-bottom: 30px; + padding-left: 50px; + color: $color_mine_shaft_approx !important; + h3 { + font-family: $font_40, $font_41; + text-transform: none !important; + font-weight: 600; + font-size: 1.3em; + color: $color_mine_shaft_approx !important; + } + p { + font-size: 12px; + color: $color_mine_shaft_approx !important; + padding-left: 6px; + } + img { + padding-bottom: 10px !important; + padding-left: 6px; + } +} +#low-footer-pad { + padding-left: 90px; + padding-right: 90px; +} +.icon-align { + img { + display: inline !important; + padding-left: 0; + margin-right: 10px; + } + a { + text-decoration: none !important; + } +} +#footer-red-style { + background-color: $color_stiletto_approx; +} +#footer-bgimg { + background-image: $url_2 no-repeat; +} +.footer-tw { + background-image: $url_3; +} +.footer-fb { + background-image: $url_4; +} +.footer-email { + background-image: $url_5; +} +.footer-cfa { + background-image: $url_6; +} +.center_me { + padding-left: 50px; +} +.marquee { + margin-bottom: 20px; +} +.africa-map { + margin-bottom: 60px; +} +.at-a-glance { + border-left: 20px solid $color_alto_approx; +} +#pad-me { + padding: 70px 75px; + img { + padding-top: 30px !important; + } +} +#slider { + width: 80%; + margin: 50px auto 25px auto; +} +#quote-content { + margin: 30px 0; +} +#quote-content-phone { + margin-top: 20px; + margin-bottom: 20px; +} +#twitter-widget-0 { + margin: 0 auto !important; +} +#twitter-widget-1 { + margin: 0 auto !important; +} +#twitter-widget-2 { + margin: 0 auto !important; +} +#twitter-widget-3 { + margin: 0 auto !important; +} +#twitter-widget-4 { + margin: 0 auto !important; +} +.home-page-parallax { + min-height: 360px; +} +.hp-section { + padding: 40px 0 0; +} +.border { + border: 4px solid $color_gallery_approx; + padding: 20px; +} +#news-ticker { + padding: 0; + h5 { + font-family: $font_54, $font_55; + font-weight: 500; + font-size: 20px !important; + text-transform: capitalize; + text-align: left; + margin-bottom: 15px; + margin-top: 30px; + color: $color_mine_shaft_approx; + display: inline-block; + padding: 5px; + } +} +#quote-previous { + color: $color_manz_approx; + cursor: pointer; + float: left; + font-size: 300%; + padding: 20px 0 0; + text-align: center; + width: 25%; + &:hover { + color: $white; + } +} +#quote-next { + color: $color_manz_approx; + cursor: pointer; + float: left; + font-size: 300%; + padding: 20px 0 0; + text-align: center; + width: 25%; + &:hover { + color: $white; + } +} +#news-articker { + h3 { + font-family: $font_56, $font_57; + font-weight: 600; + font-size: 2.9em !important; + text-transform: uppercase; + text-align: center; + margin-bottom: 5px; + margin-top: 20px; + color: $color_mine_shaft_approx !important; + display: block; + padding-bottom: 30px; + } + p { + font-size: 12px; + text-align: center; + padding: 0 55px; + } +} +.news-push { + margin-top: 130px !important; + h3 { + background-color: $color_alto_approx; + } +} +#news { + &.row { + margin-right: 55px; + margin-left: 55px; + } + .featured-video h1 { + color: $color_kabul_approx !important; + } +} +#mapping-the-threat { + .row { + margin-right: 0 !important; + background-color: $white; + } + em { + display: block; + padding: 20px 0; + } + p.lead { + color: $color_log_cabin_approx; + font-family: $font_60, $font_61; + font-size: 1.1em; + line-height: 24px; + margin: 20px 0 30px; + text-align: left; + } +} +#news-ticker-pad { + padding-top: 50px; + padding-left: 95px; + padding-right: 85px; +} +#story-ticker-pad { + padding-top: 40px; + padding-left: 85px; + padding-right: 85px; +} +.video-poster { + background-size: 100% 100%; +} +#parallax-window-1 { + margin-top: 0; + h5 { + background-color: $black_50; + color: $color_gallery_approx; + font-size: .8em; + line-height: 16px; + margin: 0; + margin-left: -10px; + margin-right: -10px; + padding: 10px; + text-align: center; + text-transform: none; + } +} +#chartA { + margin-top: 80px; +} +.country-col { + background-color: $color_gallery_approx; + height: 200px; + padding: 0; + div { + backgroud: $color_picton_blue_approx; + background: linear-gradient(to right, $color_dodger_blue_approx, $color_picton_blue_approx); + height: 100%; + position: relative; + } +} +.table { + width: 95%; + margin: 0 auto; + > tbody > tr > td { + border: 0; + } + > thead > tr > th.rotate { + border: 0; + } +} +@media only screen and(min-width: 1200px) { + .container { + width: 1000px; + } + th.rotate > div { + //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy) + transform: translate(25px, 51px) rotate(315deg); + } +} +@media(min-width: 1440px) { + .container { + width: 1170px; + } +} +.table-footer { + background-color: $color_pink_swan_approx; + border-bottom: 4px solid $color_tundora_approx; + color: $color_woodsmoke_approx; + font-family: $font_64, $font_65; + font-weight: bold; + font-size: .9em; + text-transform: uppercase; + td { + padding: 10px !important; + } +} +.wrapper-infographic { + margin-top: 20px; + margin-bottom: 20px; + h2 { + background-color: $color_storm_dust_approx; + border-left: 8px solid $color_flame_pea_approx; + color: $white; + font-size: 1em; + font-weight: normal; + margin: 0; + padding: 15px; + text-align: left; + letter-spacing: .5px; + } + img { + padding-bottom: 20px; + &.country { + } + } + h4 { + color: $color_tundora_approx; + font-size: 1.2em; + margin: 0 0 10px 0; + letter-spacing: .5px; + &.disease { + font-size: .9em; + } + } + h5 { + font-size: .9em; + margin: 0; + letter-spacing: .5px; + &.country-link { + margin-top: 20px; + } + } +} +.wrapper-data { + margin-top: 20px; + margin-bottom: 20px; + h2 { + background-color: $color_storm_dust_approx; + border-left: 8px solid $color_flame_pea_approx; + color: $white; + font-size: 1em; + font-weight: normal; + margin: 0; + padding: 15px; + text-align: left; + letter-spacing: .5px; + } + img { + padding-bottom: 20px; + } + h4 { + color: $color_tundora_approx; + font-size: 1.2em; + margin: 0 0 10px 0; + letter-spacing: .5px; + &.disease { + font-size: .9em; + } + } + h5 { + font-size: .9em; + margin: 0; + letter-spacing: .5px; + line-height: 20px; + &.country-link { + margin-top: 20px; + } + } +} +#more-credits { + margin-bottom: 40px; + text-align: center; + h4 { + font-size: 1.2em; + margin-bottom: 20px; + font-size: 1.1em; + margin-top: 20px; + } + p { + font-size: 1em; + } +} +#data-sources { + margin-bottom: 40px; + text-align: center; + h4 { + font-size: 1.2em; + margin-bottom: 20px; + } + p { + font-size: 1em; + } +} +#news-intro { + margin-top: 40px; + text-align: center; + margin-bottom: 60px; + h4 { + margin-bottom: 10px; + } + p { + font-size: 1.1em; + } +} +#infographic-intro { + margin-top: 40px; + text-align: center; + h4 { + margin-bottom: 10px; + } + p { + font-size: 1.1em; + } +} +#ipc-comparison { + .site-nav { + margin-top: 60px; + } + .infographic { + .level-0 { + background-color: $color_alto_approx; + } + .level-0-focus { + background-color: $white; + } + .level-1 { + background-color: $color_pickled_bluewood_approx; + } + .level-1-focus { + background-color: $color_pickled_bluewood_approx; + } + .level-2 { + background-color: $color_keppel_approx; + } + .level-2-focus { + background-color: $color_keppel_approx; + } + .level-3 { + background-color: $color_ronchi_approx; + } + .level-3-focus { + background-color: $color_ronchi_approx; + } + .level-4 { + background-color: $color_jaffa_approx; + } + .level-4-focus { + background-color: $color_jaffa_approx; + } + .level-5 { + background-color: $color_flame_pea_approx; + } + .level-5-focus { + background-color: $color_flame_pea_approx; + } + .status { + height: 1200px; + } + .status2 { + height: 1200px; + } + header { + margin-top: 40px; + text-align: center; + h1 { + color: $color_woodsmoke_approx; + } + h2 { + color: $color_woodsmoke_approx; + } + } + .half-size { + width: 30%; + margin: 20px auto; + } + h1 { + font-family: $font_66, $font_67; + margin-bottom: 10px; + margin-top: 0; + } + h2 { + font-family: $font_68, $font_69; + font-size: 1em; + font-weight: normal; + letter-spacing: 2px; + margin-bottom: 10px; + } + h3 { + background-color: $white; + color: $color_log_cabin_approx; + font-family: $font_70, $font_71; + font-size: 1.2em; + font-weight: bold; + line-height: 25px; + margin-top: 10px; + margin-bottom: 0; + text-transform: none; + } + p { + margin: 10px 0; + } + .chart-footer { + font-size: .9em; + margin: 40px 0; + } + .chart-explainer { + margin: 40px 0; + header { + margin: 0; + } + } + footer { + text-align: center; + } + .juneJulyLabels { + padding: 0; + div { + background-color: $white; + } + span { + display: block; + font-size: .9em; + line-height: 14px; + padding-top: 0; + } + .glyphicon { + margin-bottom: 0; + margin-top: 10px; + //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy) + transform: rotate(45deg); + //Instead of the line below you could use @include transform-origin($origin-x, $origin-y, $origin-z, $only3d) + transform-origin: 5% 5%; + } + } + .mayLabels { + padding: 0; + text-align: right; + div { + background-color: $white; + } + span { + display: block; + font-size: .9em; + line-height: 14px; + padding-top: 0; + } + .glyphicon { + margin-bottom: -5px; + margin-top: 10px; + margin-right: -10px; + //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy) + transform: rotate(-45deg); + //Instead of the line below you could use @include transform-origin($origin-x, $origin-y, $origin-z, $only3d) + transform-origin: 90% 90%; + } + } + .chartLabel { + margin-bottom: 20px; + margin-top: 5px; + } + .left-label h6 { + border-bottom: 1px solid $color_mine_shaft_approx; + padding-bottom: 5px; + font-family: $font_72, $font_73; + font-size: .9em; + font-weight: bold; + text-align: center; + } + .right-label h6 { + border-bottom: 1px solid $color_mine_shaft_approx; + padding-bottom: 5px; + font-family: $font_74, $font_75; + font-size: .9em; + font-weight: bold; + text-align: center; + } + .may .level-5-focus { + border-bottom: 2px solid $black; + } + .juneJuly .level-5-focus { + border-top: 2px solid $black; + } + } + ol { + font-weight: bold; + list-style-type: none; + margin: 20px 0; + margin-left: -40px; + } +} +#all-stories { + .row { + margin-bottom: 20px; + } + span.byline { + margin-bottom: 10px; + } +} +.country-record { + background-color: $color_gallery_approx; + background: linear-gradient($black_25, $black_5); + margin-bottom: 20px; + section { + padding: 5px 15px 30px; + } +} +#twitter-no-scroll { + pointer-events: none; +} +@media(min-width: 768px) { + #pad-getme { + padding-left: 45px; + } + .wrapper-map p.leadmaphead { + margin: 15px 0; + } +} +@media only screen and(min-width: 2560px) { + #pad-data { + max-width: 69.2%; + padding-left: 800px; + } + #mapboard-two { + height: auto !important; + padding-bottom: 90px !important; + iframe { + height: calc(100vh - 920px)!important; + padding-left: 670px; + } + } + #paint { + height: calc(100vh - 1200px)!important; + padding-left: 800px; + } + #paint-one { + height: calc(100vh - 1200px)!important; + padding-right: 780px; + } + .hider_1 { + display: none; + visibility: hidden; + } + .center_me { + padding-left: 90px; + } + div.parallax header { + padding-left: 200px; + } + h1.featured-video a { + font-size: 1.2em; + } + #mapboard iframe { + height: calc(100vh - 900px)!important; + padding-right: 670px; + } +} +@media only screen and(min-width: 1440px) and(max-width: 2559px) { + #pad-data { + max-width: 77%; + padding-left: 310px; + } + #mapboard { + padding-right: 230px; + iframe { + height: calc(100vh - 330px)!important; + } + } + #mapboard-two { + padding-left: 239px !important; + iframe { + height: calc(100vh - 330px)!important; + } + } + .wrapper-map { + margin-bottom: 100px; + } + #paint { + height: calc(100vh - 300px)!important; + padding-left: 239px; + } + #paint-one { + height: calc(100vh - 300px)!important; + padding-right: 230px; + } + .hider_1 { + display: none; + visibility: hidden; + } + .center_me { + padding-left: 90px; + } + div.parallax header { + padding-left: 200px; + } + h1.featured-video a { + font-size: 1.2em; + } +} +@media only screen and(min-width: 1200px) and(max-width: 1439px) { + div.parallax header { + padding-left: 190px; + } +} +@media only screen and(min-width: 1366px) and(max-width: 1439px) { + #pad-data { + max-width: 73%; + padding-left: 380px; + } +} +@media only screen and(min-width: 1200px) and(max-width: 1365px) { + #pad-data { + max-width: 77%; + padding-left: 280px; + } +} +@media only screen and(min-width: 1024px) and(max-width: 1199px) { + #pad-data { + max-width: 81%; + padding-left: 220px; + } +} +@media only screen and(min-width: 1000px) and(max-width: 2000px) { + .hider_1 { + display: none; + visibility: hidden; + } + #quote-container img { + height: 100% !important; + width: 100%; + } + .top-story img { + height: 100% !important; + width: 100%; + } + .more-top img { + height: 100% !important; + width: 100%; + } +} +@media only screen and(min-width: 993px) and(max-width: 1200px) { + .wrapper h1 { + font-size: 1.6em; + line-height: 30px; + } + h1.featured-video a { + font-size: 1.0em; + } +} +@media only screen and(min-width: 1024px) and(max-width: 1439px) { + .masthead-inner { + padding: .5em 8em !important; + } + div { + &.masthead-inner a { + &.hideable1 { + padding-left: 85px; + } + &.hideable { + padding-left: 85px; + } + } + &.parallax header { + padding-left: 130px; + } + } + #paint { + height: calc(100vh - 150px)!important; + } + #paint-one { + height: calc(100vh - 150px)!important; + } + .hider_1 { + display: none; + visibility: hidden; + } + .center_me { + padding-left: 25px; + } + #mapboard iframe { + height: calc(100vh - 100px)!important; + } + #mapboard-two iframe { + height: calc(100vh - 155px)!important; + } +} +@media only screen and(min-width: 1051px) and(max-width: 1110px) { + .hider_1 { + display: none; + visibility: hidden; + } + a.main-nav { + font-size: .8em; + padding: 9px; + } +} +@media only screen and(min-width: 991px) and(max-width: 1023px) { + #paint { + height: calc(100vh - 100px)!important; + } + #paint-one { + height: calc(100vh - 100px)!important; + } + #mapboard iframe { + height: calc(100vh - 100px) !important; + } +} +@media only screen and(min-width: 991px) and(max-width: 1050px) { + .hider_1 { + display: none; + visibility: hidden; + } + a.main-nav { + font-size: .8em; + padding: 5px; + } +} +@media only screen and(min-width: 770px) and(max-width: 990px) { + .hider_1 { + display: none; + visibility: hidden; + } + a.button.button-circlex { + left: 20% !important; + } +} +@media only screen and(min-width: 776px) and(max-width: 990px) { + #mapboard { + padding: 0; + } + #mapsreshape { + padding-top: 30px; + position: relative; + iframe { + height: calc(100vh - 100px); + } + } + #paint { + padding: 0 2px 0 20px; + height: calc(100vh - 100px); + } + #paint-one { + padding: 0 2px 0 20px; + height: calc(100vh - 100px); + } + #twitter-widget-0 { + height: 240px !important; + } + .about-set-contributors-row { + margin-left: 10px !important; + margin-right: 10px !important; + } + .countries-wide { + padding: 40px 70px 50px; + } + .wrapper-footer { + .col-sm-2 { + width: 20.67%; + } + a h1 { + font-size: 13px; + padding: 7px; + } + } + .hider_1 { + display: none; + visibility: hidden; + } + a.main-nav { + display: none; + } + .wrapper h1 { + font-size: 1.1em; + line-height: 20px; + } + #mapping-the-threat .row { + background-color: $white; + } + .wrapper-map p.leadmap { + margin: 20px 0; + } + .button.button-circlex { + margin-left: 38px; + } +} +@media only screen and(min-width: 680px) and(max-width: 775px) { + #parallax-window-1 { + margin-left: 0; + } + .parallax-mirror { + left: 0 !important; + width: 743px !important; + } + #paint { + padding: 0 2px 0 20px; + } + #paint-one { + padding: 0 2px 0 20px; + } + .hider_1 { + display: none; + visibility: hidden; + } + a.main-nav { + display: none; + } + div.parallax header { + margin-top: 16px; + margin-left: 50px; + h2 { + padding-left: 4px; + } + } + .wrapper-map p.leadmap { + margin: 20px 0 !important; + } + #pad-me img { + padding: 25px 300px; + } +} +@media only screen and(min-width: 320px) and(max-width: 764px) { + #paint { + margin-top: -40px !important; + } + #mapboard { + padding: 30px 20px 0 40px !important; + } + a.button.button-circlex { + top: 50%; + left: 50%; + //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy) + transform: translate(-50%, -50%); + } + .wrapper-map p.leadmaphead { + margin-left: 10%; + margin-right: 10%; + } +} +@media only screen and(min-width: 480px) and(max-width: 679px) { + #parallax-window-1 { + margin-left: 0; + padding-left: 120px; + } + .parallax-mirror { + left: 0 !important; + width: 730px !important; + } + .hider { + display: none; + visibility: hidden; + } + div.parallax header { + margin-top: 5px; + padding-right: 0; + h2 { + padding-left: 3px; + } + } + .wrapper a h1 { + margin: 28px 80px; + } + .wrapper-footer a h1 { + margin: 48px 100px; + text-align: center; + font-size: 16px; + } + #pad-me img { + padding: 17px 165px; + } +} +@media only screen and(min-width: 360px) and(max-width: 479px) { + div { + &.masthead-inner a { + &.hideable1 { + display: none !important; + } + &.hideable { + display: none !important; + } + } + &.parallax header { + margin-top: 5px; + margin-left: -100px; + padding-right: 0; + h2 { + padding-left: 80px; + padding-right: 50px; + } + } + } + .share-options { + display: none; + visibility: hidden; + } + #parallax-window-1 { + margin-left: 150px; + } + .parallax-mirror { + left: 0 !important; + width: 530px !important; + } + .top-story { + padding-left: 0 !important; + padding-right: 0 !important; + a.button { + margin-bottom: 50px; + margin-left: 0; + } + } + #news-ticker-pad { + padding-left: 27px; + padding-right: 27px; + } + #news-articker { + p { + padding: 0 10px; + } + h3 { + padding-left: 6px; + } + } + #pad-funders { + padding-left: 15px; + padding-right: 15px; + } + .wrapper-map { + margin-top: -50px; + margin-bottom: 80px; + } + #mapboard { + padding: 30px 110px 0 15px; + } + #paint { + margin-bottom: 20px; + } + .hider { + display: none; + visibility: hidden; + } + #news.row { + margin-left: 15px !important; + margin-right: 15px !important; + } + .wrapper a h1 { + margin: 28px 80px; + font-size: 1.5em; + } + #news-ticker h5 { + padding-left: 55px; + margin-top: 0; + } + h2.explainer-headline { + padding-left: 51px; + } + #pad-me img { + padding: 35px; + } + .wrapper-footer a h1 { + margin: 48px 100px; + text-align: center; + font-size: 16px; + } +} +@media only screen and(min-width: 360px) and(max-width: 428px) { + .parallax-mirror { + left: 0 !important; + width: 530px !important; + } + #parallax-window-1 { + display: none; + margin-left: 0; + padding-left: 150px; + } + .top-story { + padding-left: 0 !important; + padding-right: opx !important; + } + .pad-data { + padding-left: 20px !important; + } + #paint { + padding-left: 50px; + } + #paint-one { + padding-left: 50px; + } + #low-footer-pad { + padding-right: 110px !important; + } + .hider { + display: none; + visibility: hidden; + } + div.parallax header { + h1 { + font-size: 3em; + margin-left: 45px; + } + h2 { + font-size: 1em; + padding-left: 40px; + padding-right: 70px; + } + } + h1.featured-partners { + padding-top: 0; + padding-left: 25px; + } + .button.button-circlex { + margin-left: 125px; + margin-top: -20px; + margin-bottom: 100px; + } + #news-articker h3 { + padding-left: 6px; + padding-top: 30px; + } +} +.logo h1 { + display: inline-block; + font-size: 1em; + padding: 0; + letter-spacing: 1px; + line-height: 15px; + margin: 0; + margin-bottom: 14px; + margin-left: 20px; +} +.navbar-fixed-top.scrolled { + background-color: $white !important; + //Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10) + transition: background-color 200ms linear; +} +img.team-photo { + margin: 0 auto; + width: 50%; + filter: contrast(.75) saturate(2) sepia(.5); + //Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10) + transition: all .5s; + &:hover { + filter: contrast(1) saturate(1) sepia(0); + } +} +.footer-social-options img { + display: block; + max-width: 100%; + height: auto; + padding-bottom: 10px; +} +.quote s { + text-decoration: none; +} +th.rotate { + height: 140px; + white-space: nowrap; + > div { + //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy) + transform: translate(25px, 51px) rotate(290deg); + width: 1px; + position: relative; + top: -50px; + left: -15px; + > span { + font-family: $font_62, $font_63; + font-weight: normal; + font-size: .9em; + padding: 5px 10px; + text-transform: uppercase; + } + } +} +td.country-col { + padding: 0 10px !important; +} +#the-team .site-nav { + margin-top: 60px; +} +#countries .site-nav { + margin-top: 60px; +} +#data .site-nav { + margin-top: 60px; +} +.maps iframe { + height: calc(100vh - 245px); + pointer-events: none; +} \ No newline at end of file From 00064e27aeed6230d4b93cba9ccbeeec529f103e Mon Sep 17 00:00:00 2001 From: CasKer Date: Sun, 3 Dec 2017 22:40:45 -0800 Subject: [PATCH 9/9] modified: .gitignore; don't include app/css --- .gitignore | 1 + 1 file changed, 1 insertion(+) diff --git a/.gitignore b/.gitignore index 746db0a..bf04048 100644 --- a/.gitignore +++ b/.gitignore @@ -1,5 +1,6 @@ node_modules .DS_Store +css/ dist/ .tmp app.yaml