├── .gitignore ├── README.md ├── about.html ├── bg-mobile.jpg ├── bg.jpg ├── birds-dark.png ├── birds-darker.png ├── birds.png ├── build ├── basscss.min.css ├── fonts │ ├── icomoon.eot │ ├── icomoon.svg │ ├── icomoon.ttf │ └── icomoon.woff ├── icon.css ├── icon.min.css ├── main.js ├── main.min.js ├── script.js ├── script.min.js ├── styles.css └── styles.min.css ├── data.json ├── ellipsis.svg ├── favicon.ico ├── favicon.png ├── gulpfile.js ├── index.html ├── package.json ├── ring.svg ├── src ├── js │ ├── AllBirdsWrapper.jsx │ ├── BirdAttribute.jsx │ ├── BirdImage.jsx │ ├── BirdInfo.jsx │ ├── BirdStats.jsx │ ├── BirdStatus.jsx │ ├── BirdThreats.jsx │ ├── BirdTitle.jsx │ ├── BirdWrapper.jsx │ └── main.js └── sass │ ├── _card.scss │ ├── _footer.scss │ ├── _global.scss │ ├── _header.scss │ ├── _layout.scss │ ├── _list.scss │ ├── _structure.scss │ ├── _type.scss │ └── styles.scss └── threat.txt /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | 5 | # Runtime data 6 | pids 7 | *.pid 8 | *.seed 9 | 10 | # Directory for instrumented libs generated by jscoverage/JSCover 11 | lib-cov 12 | 13 | # Coverage directory used by tools like istanbul 14 | coverage 15 | 16 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 17 | .grunt 18 | 19 | # node-waf configuration 20 | .lock-wscript 21 | 22 | # Compiled binary addons (http://nodejs.org/api/addons.html) 23 | build/Release 24 | 25 | # Dependency directory 26 | # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git 27 | node_modules 28 | .sass-cache 29 | *.css.map 30 | .DS_Store 31 | .module-cache 32 | images 33 | imgs 34 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | #Endangered birds in NSW 2 | 3 | ###[Check it out here](http://chloechen.io/bird) 4 | 5 | ##Data source: 6 | [Endangered birds in NSW](http://data.gov.au/dataset/threatened-species-state-lists/resource/ab6c9078-ac64-41e0-9987-3e38da53d277) 7 | 8 | 9 | ##Image Attributes(in progress) 10 | 11 | THANKS TO ALL THE GENEROUS PEOPLE WHO ALLOW ME TO USE THEIR PHOTOS IN THIS PROJECT. 12 | 13 | The following is a complete list of bird images used in this project. The licence of the project does not cover any of the images, please contact the creators of the image for reuse. 14 | 15 | Black-eared Miner(Manorina melanotis) 16 | 17 | [Intro Image](https://flic.kr/p/8LkeCd) by [Planettrekker](https://www.flickr.com/photos/planettrekker/) 18 | 19 | 20 | Eastern Bristlebird (Dasyornis brachypterus) 21 | 22 | [Intro Image](https://flic.kr/p/ckjKfo) by [David Cook](https://flic.kr/p/4UUpTw) CC 2.0 Generic 23 | 24 | [High Res](http://tim-dolby.blogspot.com.au) by [Tim Dolly](http://tim-dolby.blogspot.com.au) 25 | 26 | 27 | Swift Parrot (Lathamus discolor) 28 | 29 | [Intro Image](https://flic.kr/p/8EHCTt) by [Julian Robinson](https://www.flickr.com/photos/ozjulian/) 30 | 31 | [High Res](https://flic.kr/p/4Hqysg) by [Tobias Hayashi](https://www.flickr.com/photos/callocephalon/) 32 | 33 | 34 | Australasian Bittern (Botaurus poiciloptilus) 35 | 36 | [High Res](https://flic.kr/p/ormTq2) by [David Cook](https://www.flickr.com/photos/frankzed/) CC 2.0 37 | 38 | 39 | Southern Giant Petrel (Macronectes giganteus) 40 | 41 | [Intro Image](https://flic.kr/p/dGZLrv) by [Oliver Dodd](https://www.flickr.com/photos/oliverdodd/) 42 | 43 | [High Res](https://flic.kr/p/kqb1ai) by [Harold Moses](https://www.flickr.com/photos/mosesharold/) 44 | 45 | 46 | Star Finch (eastern), Star Finch (southern)(Neochmia ruficauda ruficauda) 47 | 48 | [Image](https://flic.kr/p/uByw92) by [Jim Bendon](https://www.flickr.com/photos/jim_bendon_1957/) CC 2.0 49 | 50 | 51 | Gould's Petrel(Pterodroma leucoptera leucoptera) 52 | 53 | 54 | [High Res](https://flic.kr/p/dN1mWz) by [Todd Burrows](https://www.flickr.com/photos/toddburrows/) 55 | 56 | 57 | 58 | Mallee Emu-wren (Stipiturus mallee) 59 | 60 | [High Res](https://flic.kr/p/diYjwY) by [Ron Knight](https://www.flickr.com/photos/sussexbirder/) 61 | [Intro Image](https://flic.kr/p/qaiN8e) by [Wild~Life](https://www.flickr.com/photos/andrew_alderson/) 62 | 63 | 64 | 65 | Coxen's Fig-Parrot (Cyclopsitta diophthalma coxeni) 66 | 67 | 68 | [High Res](https://upload.wikimedia.org/wikipedia/commons/b/b3/Cyclopsitta_diophthalma_-Birdworld_Kuranda%2C_Queensland%2C_Australia_-male-8a.jpg) 69 | 70 | 71 | Black-throated Finch (southern) (Poephila cincta cincta) 72 | 73 | [Intro Image](https://flic.kr/p/9qfMzH) by [Aunty Marsy](https://www.flickr.com/photos/auntymarsy/) 74 | 75 | 76 | Chatham Albatross (Thalassarche eremita) 77 | 78 | [Intro Image](https://flic.kr/p/8UexwV) by [Jon Irvine](https://www.flickr.com/photos/calidris-photos/) 79 | 80 | [High Res](https://flic.kr/p/8UeweH) by [Jon Irvine](https://www.flickr.com/photos/calidris-photos/) 81 | 82 | 83 | 84 | Grey Grasswren (Bulloo) (Amytornis barbatus barbatus) 85 | 86 | [Intro Image](https://flic.kr/p/diYmzg) by [Ron Knight](https://www.flickr.com/photos/sussexbirder/) CC 2.0 87 | 88 | 89 | Australian Painted Snipe (Rostratula australis) 90 | 91 | [Intro Image](https://flic.kr/p/dQDDLd) by [Patrick_K59](https://www.flickr.com/photos/patrick_k59/) 92 | 93 | [High Res](https://flic.kr/p/dUx4r5) [Patrick_K59](https://www.flickr.com/photos/patrick_k59/) 94 | 95 | 96 | Amsterdam Albatross(Diomedea exulans amsterdamensis) 97 | 98 | Vincent Legendre [Intro Image](https://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/Albatros_d%27amsterdam_poussin.jpg/500px-Albatros_d%27amsterdam_poussin.jpg) 99 | 100 | [High Res](https://en.wikipedia.org/wiki/Amsterdam_albatross#/media/File:Albatros_d%27amsterdam.jpg) 101 | 102 | 103 | Northern Royal Albatross(Diomedea epomophora sanfordi) 104 | 105 | [Intro Image](https://flic.kr/p/qavMD1) by [Ed Dunens](https://www.flickr.com/photos/blachswan/) CC 2.0 106 | 107 | [High Res](https://en.wikipedia.org/wiki/Northern_royal_albatross#/media/File:Diomedea_sanfordi_-_SE_Tasmania.jpg) 108 | 109 | 110 | Tristan Albatross (Diomedea exulans exulans) 111 | 112 | [Intro Image](https://flic.kr/p/6aFUqB) by [Chantal Steyn](https://www.flickr.com/photos/chantal_steyn/) 113 | 114 | [High Res](https://upload.wikimedia.org/wikipedia/commons/thumb/c/c4/Diomedea_exulans_in_flight_-_SE_Tasmania.jpg/440px-Diomedea_exulans_in_flight_-_SE_Tasmania.jpg) 115 | -------------------------------------------------------------------------------- /about.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Endangered Birds NSW | About 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
Back to project
17 |
18 |

About this project

19 |
20 |

This is a project about endangered birds in NSW. It uses a subset of data of the Threatened Species State Lists (July 2015) published by the Australian Government Department of the Environment.

21 |

Please get in touch if you spot any errors.

22 |

This is a open source project using ReactJs, the source code can be found here.

23 | 24 |

I would like to thank the following people for generously making their photographies free to use to the public or giving me the right to use them in this project. They are all amazing wildlife photographers, be sure to check them out. 25 |

26 | 27 | 49 | 50 |

About me

51 |

I am Chloe Chen, I'm a Sydney-based Front End Developer.

52 |

You can find me on Twitter or checkout my other project on Github

53 |
54 | 55 | 56 | -------------------------------------------------------------------------------- /bg-mobile.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chloeleichen/birds/e01bf7584f1572878ecea33bb4a2281bbfa5ed6a/bg-mobile.jpg -------------------------------------------------------------------------------- /bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chloeleichen/birds/e01bf7584f1572878ecea33bb4a2281bbfa5ed6a/bg.jpg -------------------------------------------------------------------------------- /birds-dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chloeleichen/birds/e01bf7584f1572878ecea33bb4a2281bbfa5ed6a/birds-dark.png -------------------------------------------------------------------------------- /birds-darker.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chloeleichen/birds/e01bf7584f1572878ecea33bb4a2281bbfa5ed6a/birds-darker.png -------------------------------------------------------------------------------- /birds.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chloeleichen/birds/e01bf7584f1572878ecea33bb4a2281bbfa5ed6a/birds.png -------------------------------------------------------------------------------- /build/basscss.min.css: -------------------------------------------------------------------------------- 1 | body{margin:0}img{max-width:100%}svg{max-height:100%}fieldset,input,select,textarea{font-family:inherit;font-size:1rem;box-sizing:border-box;margin-top:0;margin-bottom:0}label{vertical-align:middle}input[type=date],input[type=datetime-local],input[type=datetime],input[type=email],input[type=month],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=time],input[type=url],input[type=week]{height:2.25rem;padding:.5rem .5rem;vertical-align:middle;-webkit-appearance:none}select{line-height:1.75;padding:.5rem .5rem}select:not([multiple]){height:2.25rem;vertical-align:middle}textarea{line-height:1.75;padding:.5rem .5rem}table{border-collapse:separate;border-spacing:0;max-width:100%;width:100%}th{text-align:left;font-weight:700}td,th{padding:.25rem 1rem;line-height:inherit}th{vertical-align:bottom}td{vertical-align:top}body{font-family:'Helvetica Neue',Helvetica,sans-serif;line-height:1.5;font-size:100%}h1,h2,h3,h4,h5,h6{font-family:'Helvetica Neue',Helvetica,sans-serif;font-weight:700;line-height:1.25;margin-top:1em;margin-bottom:.5em}p{margin-top:0;margin-bottom:1rem}dl,ol,ul{margin-top:0;margin-bottom:1rem}code,pre,samp{font-family:'Source Code Pro',Consolas,monospace;font-size:inherit}pre{margin-top:0;margin-bottom:1rem;overflow-x:scroll}h1{font-size:2rem}h2{font-size:1.5rem}h3{font-size:1.25rem}h4{font-size:1rem}h5{font-size:.875rem}h6{font-size:.75rem}body{color:#111;background-color:#fff}a{color:#0074d9;text-decoration:none}a:hover{text-decoration:underline}code,pre{background-color:transparent;border-radius:3px}hr{border:0;border-bottom-style:solid;border-bottom-width:1px;border-bottom-color:rgba(0,0,0,.125)}.field{border-style:solid;border-width:1px;border-color:rgba(0,0,0,.125);border-radius:3px}.field.is-focused,.field:focus{outline:0;border-color:#0074d9;box-shadow:0 0 0 2px rgba(0,116,217,.5)}.field.is-disabled,.field:disabled{background-color:rgba(0,0,0,.125);opacity:.5}.field.is-read-only,.field:read-only:not(select){background-color:rgba(0,0,0,.125)}.field.is-success{border-color:#2ecc40}.field.is-success.is-focused,.field.is-success:focus{box-shadow:0 0 0 2px rgba(46,204,64,.5)}.field.is-warning{border-color:#ffdc00}.field.is-warning.is-focused,.field.is-warning:focus{box-shadow:0 0 0 2px rgba(255,220,0,.5)}.field.is-error,.field:invalid{border-color:#ff4136}.field.is-error.is-focused,.field.is-error:focus,.field:invalid.is-focused,.field:invalid:focus{box-shadow:0 0 0 2px rgba(255,65,54,.5)}.table-light td,.table-light th{border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:rgba(0,0,0,.125)}.table-light tr:last-child td{border-bottom:0}.btn{font-family:inherit;font-size:inherit;font-weight:700;text-decoration:none;cursor:pointer;display:inline-block;line-height:1.125rem;padding:.5rem 1rem;margin:0;height:auto;border:1px solid transparent;vertical-align:middle;-webkit-appearance:none;color:inherit;background-color:transparent}.btn:hover{text-decoration:none}.btn:focus{outline:0;border-color:rgba(0,0,0,.125);box-shadow:0 0 0 3px rgba(0,0,0,.25)}::-moz-focus-inner{border:0;padding:0}.btn-primary{color:#fff;background-color:#0074d9;border-radius:3px}.btn-primary:hover{box-shadow:inset 0 0 0 20rem rgba(0,0,0,.0625)}.btn-primary:active{box-shadow:inset 0 0 0 20rem rgba(0,0,0,.125),inset 0 3px 4px 0 rgba(0,0,0,.25),0 0 1px rgba(0,0,0,.125)}.btn-primary.is-disabled,.btn-primary:disabled{opacity:.5}.btn-outline,.btn-outline:hover{border-color:currentcolor}.btn-outline{border-radius:3px}.btn-outline:hover{box-shadow:inset 0 0 0 20rem rgba(0,0,0,.0625)}.btn-outline:active{box-shadow:inset 0 0 0 20rem rgba(0,0,0,.125),inset 0 3px 4px 0 rgba(0,0,0,.25),0 0 1px rgba(0,0,0,.125)}.btn-outline.is-disabled,.btn-outline:disabled{opacity:.5}.h1{font-size:2rem}.h2{font-size:1.5rem}.h3{font-size:1.25rem}.h4{font-size:1rem}.h5{font-size:.875rem}.h6{font-size:.75rem}.bold{font-weight:700}.regular{font-weight:400}.italic{font-style:italic}.caps{text-transform:uppercase;letter-spacing:.2em}.left-align{text-align:left}.center{text-align:center}.right-align{text-align:right}.justify{text-align:justify}.nowrap{white-space:nowrap}.break-word{word-wrap:break-word}.truncate{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.list-reset{list-style:none;padding-left:0}.inline{display:inline}.block{display:block}.inline-block{display:inline-block}.table{display:table}.table-cell{display:table-cell}.overflow-hidden{overflow:hidden}.overflow-scroll{overflow:scroll}.overflow-auto{overflow:auto}.clearfix:after,.clearfix:before{content:" ";display:table}.clearfix:after{clear:both}.left{float:left}.right{float:right}.fit{max-width:100%}.border-box{box-sizing:border-box}.align-baseline{vertical-align:baseline}.align-top{vertical-align:top}.align-middle{vertical-align:middle}.align-bottom{vertical-align:bottom}.m0{margin:0}.mt0{margin-top:0}.mr0{margin-right:0}.mb0{margin-bottom:0}.ml0{margin-left:0}.m1{margin:.5rem}.mt1{margin-top:.5rem}.mr1{margin-right:.5rem}.mb1{margin-bottom:.5rem}.ml1{margin-left:.5rem}.m2{margin:1rem}.mt2{margin-top:1rem}.mr2{margin-right:1rem}.mb2{margin-bottom:1rem}.ml2{margin-left:1rem}.m3{margin:2rem}.mt3{margin-top:2rem}.mr3{margin-right:2rem}.mb3{margin-bottom:2rem}.ml3{margin-left:2rem}.m4{margin:4rem}.mt4{margin-top:4rem}.mr4{margin-right:4rem}.mb4{margin-bottom:4rem}.ml4{margin-left:4rem}.mxn1{margin-left:-.5rem;margin-right:-.5rem}.mxn2{margin-left:-1rem;margin-right:-1rem}.mxn3{margin-left:-2rem;margin-right:-2rem}.mxn4{margin-left:-4rem;margin-right:-4rem}.mx-auto{margin-left:auto;margin-right:auto}.p0{padding:0}.p1{padding:.5rem}.py1{padding-top:.5rem;padding-bottom:.5rem}.px1{padding-left:.5rem;padding-right:.5rem}.p2{padding:1rem}.py2{padding-top:1rem;padding-bottom:1rem}.px2{padding-left:1rem;padding-right:1rem}.p3{padding:2rem}.py3{padding-top:2rem;padding-bottom:2rem}.px3{padding-left:2rem;padding-right:2rem}.p4{padding:4rem}.py4{padding-top:4rem;padding-bottom:4rem}.px4{padding-left:4rem;padding-right:4rem}.relative{position:relative}.absolute{position:absolute}.fixed{position:fixed}.top-0{top:0}.right-0{right:0}.bottom-0{bottom:0}.left-0{left:0}.z1{z-index:1}.z2{z-index:2}.z3{z-index:3}.z4{z-index:4}.lg-show,.md-show,.sm-show{display:none!important}@media (min-width:40em){.sm-show{display:block!important}}@media (min-width:52em){.md-show{display:block!important}}@media (min-width:64em){.lg-show{display:block!important}}@media (min-width:40em){.sm-hide{display:none!important}}@media (min-width:52em){.md-hide{display:none!important}}@media (min-width:64em){.lg-hide{display:none!important}}.display-none{display:none!important}.hide{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px)}.container{max-width:64em;margin-left:auto;margin-right:auto}.col{float:left;box-sizing:border-box}.col-right{float:right;box-sizing:border-box}.col-1{width:8.33333%}.col-2{width:16.66667%}.col-3{width:25%}.col-4{width:33.33333%}.col-5{width:41.66667%}.col-6{width:50%}.col-7{width:58.33333%}.col-8{width:66.66667%}.col-9{width:75%}.col-10{width:83.33333%}.col-11{width:91.66667%}.col-12{width:100%}@media (min-width:40em){.sm-col{float:left;box-sizing:border-box}.sm-col-right{float:right;box-sizing:border-box}.sm-col-1{width:8.33333%}.sm-col-2{width:16.66667%}.sm-col-3{width:25%}.sm-col-4{width:33.33333%}.sm-col-5{width:41.66667%}.sm-col-6{width:50%}.sm-col-7{width:58.33333%}.sm-col-8{width:66.66667%}.sm-col-9{width:75%}.sm-col-10{width:83.33333%}.sm-col-11{width:91.66667%}.sm-col-12{width:100%}}@media (min-width:52em){.md-col{float:left;box-sizing:border-box}.md-col-right{float:right;box-sizing:border-box}.md-col-1{width:8.33333%}.md-col-2{width:16.66667%}.md-col-3{width:25%}.md-col-4{width:33.33333%}.md-col-5{width:41.66667%}.md-col-6{width:50%}.md-col-7{width:58.33333%}.md-col-8{width:66.66667%}.md-col-9{width:75%}.md-col-10{width:83.33333%}.md-col-11{width:91.66667%}.md-col-12{width:100%}}@media (min-width:64em){.lg-col{float:left;box-sizing:border-box}.lg-col-right{float:right;box-sizing:border-box}.lg-col-1{width:8.33333%}.lg-col-2{width:16.66667%}.lg-col-3{width:25%}.lg-col-4{width:33.33333%}.lg-col-5{width:41.66667%}.lg-col-6{width:50%}.lg-col-7{width:58.33333%}.lg-col-8{width:66.66667%}.lg-col-9{width:75%}.lg-col-10{width:83.33333%}.lg-col-11{width:91.66667%}.lg-col-12{width:100%}}.flex{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.flex-column{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}.flex-wrap{-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.flex-center{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.flex-baseline{-webkit-box-align:baseline;-webkit-align-items:baseline;-ms-flex-align:baseline;align-items:baseline}.flex-stretch{-webkit-box-align:stretch;-webkit-align-items:stretch;-ms-flex-align:stretch;align-items:stretch}.flex-start{-webkit-box-align:start;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start}.flex-end{-webkit-box-align:end;-webkit-align-items:flex-end;-ms-flex-align:end;align-items:flex-end}.flex-justify{-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between}.flex-auto{-webkit-box-flex:1;-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;min-width:0;min-height:0}.flex-grow{-webkit-box-flex:1;-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto}.flex-none{-webkit-box-flex:0;-webkit-flex:none;-ms-flex:none;flex:none}.flex-first{-webkit-box-ordinal-group:0;-webkit-order:-1;-ms-flex-order:-1;order:-1}.flex-last{-webkit-box-ordinal-group:100000;-webkit-order:99999;-ms-flex-order:99999;order:99999}@media (min-width:40em){.sm-flex{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}}@media (min-width:52em){.md-flex{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}}@media (min-width:64em){.lg-flex{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}}.border{border-style:solid;border-width:1px;border-color:rgba(0,0,0,.125)}.border-top{border-top-style:solid;border-top-width:1px;border-top-color:rgba(0,0,0,.125)}.border-right{border-right-style:solid;border-right-width:1px;border-right-color:rgba(0,0,0,.125)}.border-bottom{border-bottom-style:solid;border-bottom-width:1px;border-bottom-color:rgba(0,0,0,.125)}.border-left{border-left-style:solid;border-left-width:1px;border-left-color:rgba(0,0,0,.125)}.border-none{border:0}.rounded{border-radius:3px}.circle{border-radius:50%}.rounded-top{border-radius:3px 3px 0 0}.rounded-right{border-radius:0 3px 3px 0}.rounded-bottom{border-radius:0 0 3px 3px}.rounded-left{border-radius:3px 0 0 3px}.not-rounded{border-radius:0}.black{color:#111}.gray{color:#aaa}.silver{color:#ddd}.white{color:#fff}.aqua{color:#7fdbff}.blue{color:#0074d9}.navy{color:#001f3f}.teal{color:#39cccc}.green{color:#2ecc40}.olive{color:#3d9970}.lime{color:#01ff70}.yellow{color:#ffdc00}.orange{color:#ff851b}.red{color:#ff4136}.fuchsia{color:#f012be}.purple{color:#b10dc9}.maroon{color:#85144b}.color-inherit{color:inherit}.muted{opacity:.5}.bg-black{background-color:#111}.bg-gray{background-color:#aaa}.bg-silver{background-color:#ddd}.bg-white{background-color:#fff}.bg-aqua{background-color:#7fdbff}.bg-blue{background-color:#0074d9}.bg-navy{background-color:#001f3f}.bg-teal{background-color:#39cccc}.bg-green{background-color:#2ecc40}.bg-olive{background-color:#3d9970}.bg-lime{background-color:#01ff70}.bg-yellow{background-color:#ffdc00}.bg-orange{background-color:#ff851b}.bg-red{background-color:#ff4136}.bg-fuchsia{background-color:#f012be}.bg-purple{background-color:#b10dc9}.bg-maroon{background-color:#85144b}.bg-darken-1{background-color:rgba(0,0,0,.0625)}.bg-darken-2{background-color:rgba(0,0,0,.125)}.bg-darken-3{background-color:rgba(0,0,0,.25)}.bg-darken-4{background-color:rgba(0,0,0,.5)}.bg-lighten-1{background-color:rgba(255,255,255,.0625)}.bg-lighten-2{background-color:rgba(255,255,255,.125)}.bg-lighten-3{background-color:rgba(255,255,255,.25)}.bg-lighten-4{background-color:rgba(255,255,255,.5)} 2 | -------------------------------------------------------------------------------- /build/fonts/icomoon.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chloeleichen/birds/e01bf7584f1572878ecea33bb4a2281bbfa5ed6a/build/fonts/icomoon.eot -------------------------------------------------------------------------------- /build/fonts/icomoon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Generated by IcoMoon 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /build/fonts/icomoon.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chloeleichen/birds/e01bf7584f1572878ecea33bb4a2281bbfa5ed6a/build/fonts/icomoon.ttf -------------------------------------------------------------------------------- /build/fonts/icomoon.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chloeleichen/birds/e01bf7584f1572878ecea33bb4a2281bbfa5ed6a/build/fonts/icomoon.woff -------------------------------------------------------------------------------- /build/icon.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'icomoon'; 3 | src:url('fonts/icomoon.eot?-fg2jbl'); 4 | src:url('fonts/icomoon.eot?#iefix-fg2jbl') format('embedded-opentype'), 5 | url('fonts/icomoon.ttf?-fg2jbl') format('truetype'), 6 | url('fonts/icomoon.woff?-fg2jbl') format('woff'), 7 | url('fonts/icomoon.svg?-fg2jbl#icomoon') format('svg'); 8 | font-weight: normal; 9 | font-style: normal; 10 | } 11 | 12 | [class^="icon-"], [class*=" icon-"] { 13 | font-family: 'icomoon'; 14 | speak: none; 15 | font-style: normal; 16 | font-weight: normal; 17 | font-variant: normal; 18 | text-transform: none; 19 | line-height: 1; 20 | 21 | /* Better Font Rendering =========== */ 22 | -webkit-font-smoothing: antialiased; 23 | -moz-osx-font-smoothing: grayscale; 24 | } 25 | 26 | .icon-arrow-left:before { 27 | content: "\e606"; 28 | } 29 | .icon-link-external:before { 30 | content: "\e600"; 31 | } 32 | .icon-info:before { 33 | content: "\e601"; 34 | } 35 | .icon-cross:before { 36 | content: "\e602"; 37 | } 38 | .icon-bird:before { 39 | content: "\e603"; 40 | } 41 | -------------------------------------------------------------------------------- /build/icon.min.css: -------------------------------------------------------------------------------- 1 | @font-face{font-family:icomoon;src:url(fonts/icomoon.eot?-fg2jbl);src:url(fonts/icomoon.eot?#iefix-fg2jbl) format('embedded-opentype'),url(fonts/icomoon.ttf?-fg2jbl) format('truetype'),url(fonts/icomoon.woff?-fg2jbl) format('woff'),url(fonts/icomoon.svg?-fg2jbl#icomoon) format('svg');font-weight:400;font-style:normal}[class*=" icon-"],[class^=icon-]{font-family:icomoon;speak:none;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-arrow-left:before{content:"\e606"}.icon-link-external:before{content:"\e600"}.icon-info:before{content:"\e601"}.icon-cross:before{content:"\e602"}.icon-bird:before{content:"\e603"} -------------------------------------------------------------------------------- /build/script.js: -------------------------------------------------------------------------------- 1 | ;(function() { 2 | 'use strict'; 3 | var imghero = document.getElementById('tilt-mover'), 4 | header = document.getElementById('header'), 5 | tilt = document.getElementById('tilt'), 6 | btn = document.getElementById('start'), 7 | body = document.getElementById('body'); 8 | 9 | 10 | btn.addEventListener('click', function(ev){ 11 | ev.preventDefault(); 12 | body.classList.toggle('front'); 13 | }); 14 | 15 | var win = { width: window.innerWidth, height: window.innerHeight }; 16 | function throttle(fn, delay) { 17 | var allowSample = true; 18 | return function(e) { 19 | if (allowSample) { 20 | allowSample = false; 21 | setTimeout(function() { allowSample = true; }, delay); 22 | fn(e); 23 | } 24 | }; 25 | } 26 | 27 | 28 | function is_touch_device() { 29 | return (('ontouchstart' in window) || (navigator.MaxTouchPoints > 0) || (navigator.msMaxTouchPoints > 0)); 30 | } 31 | 32 | if (!is_touch_device()) { 33 | var exHandler = function(ev){ 34 | imghero.style.WebkitTransform = 'perspective(1000px) translate3d(0,0,0) rotate3d(1,1,1,0deg)'; 35 | imghero.style.transform = 'perspective(1000px) translate3d(0,0,0) rotate3d(1,1,1,0deg)'; 36 | }; 37 | 38 | var moveHandler = throttle(function(ev) { 39 | var xVal = -1/(win.height/2)*ev.clientY + 1, 40 | yVal = 1/(win.width/2)*ev.clientX - 1, 41 | transX = 20/(win.width)*ev.clientX - 10, 42 | transY = 20/(win.height)*ev.clientY - 10, 43 | transZ = 100/(win.height)*ev.clientY - 50; 44 | imghero.style.WebkitTransform = 'perspective(1000px) translate3d(' + transX + 'px,' + transY + 'px,' + transZ + 'px) rotate3d(' + xVal + ',' + yVal + ',0,2deg)'; 45 | imghero.style.transform = 'perspective(1000px) translate3d(' + transX + 'px,' + transY + 'px,' + transZ + 'px) rotate3d(' + xVal + ',' + yVal + ',0,2deg)'; 46 | }, 100); 47 | 48 | header.addEventListener('mouseenter', exHandler); 49 | window.addEventListener('mousemove', moveHandler); 50 | header.addEventListener('mouseleave', exHandler); 51 | } 52 | 53 | }()); 54 | -------------------------------------------------------------------------------- /build/script.min.js: -------------------------------------------------------------------------------- 1 | !function(){"use strict";function t(t,e){var n=!0;return function(i){n&&(n=!1,setTimeout(function(){n=!0},e),t(i))}}function e(){return"ontouchstart"in window||navigator.MaxTouchPoints>0||navigator.msMaxTouchPoints>0}var n=document.getElementById("tilt-mover"),i=document.getElementById("header"),r=(document.getElementById("tilt"),document.getElementById("start")),o=document.getElementById("body");r.addEventListener("click",function(t){t.preventDefault(),o.classList.toggle("front")});var d={width:window.innerWidth,height:window.innerHeight};if(!e()){var a=function(t){n.style.WebkitTransform="perspective(1000px) translate3d(0,0,0) rotate3d(1,1,1,0deg)",n.style.transform="perspective(1000px) translate3d(0,0,0) rotate3d(1,1,1,0deg)"},s=t(function(t){var e=-1/(d.height/2)*t.clientY+1,i=1/(d.width/2)*t.clientX-1,r=20/d.width*t.clientX-10,o=20/d.height*t.clientY-10,a=100/d.height*t.clientY-50;n.style.WebkitTransform="perspective(1000px) translate3d("+r+"px,"+o+"px,"+a+"px) rotate3d("+e+","+i+",0,2deg)",n.style.transform="perspective(1000px) translate3d("+r+"px,"+o+"px,"+a+"px) rotate3d("+e+","+i+",0,2deg)"},100);i.addEventListener("mouseenter",a),window.addEventListener("mousemove",s),i.addEventListener("mouseleave",a)}}(); -------------------------------------------------------------------------------- /build/styles.css: -------------------------------------------------------------------------------- 1 | @import url(http://fonts.googleapis.com/css?family=Marck+Script); 2 | @import url(http://fonts.googleapis.com/css?family=Viga); 3 | img.loaded { 4 | width: 100%; 5 | height: auto; 6 | -moz-transition: all, 1s; 7 | -o-transition: all, 1s; 8 | -webkit-transition: all, 1s; 9 | transition: all, 1s; 10 | } 11 | 12 | img.loading { 13 | opacity: 0; 14 | width: 100%; 15 | } 16 | 17 | img.loaded { 18 | opacity: 1; 19 | } 20 | 21 | body { 22 | color: #bdc3c7; 23 | font-family: "Viga", sans-serif; 24 | } 25 | 26 | a { 27 | color: #ef5350; 28 | } 29 | a a:hover, a a:focus { 30 | color: #f3817f; 31 | } 32 | 33 | h1, h2, h3 { 34 | font-family: "Viga", sans-serif; 35 | font-weight: 700; 36 | } 37 | 38 | .sci-name { 39 | font-family: "Marck Script", cursive; 40 | font-size: 1.5em; 41 | } 42 | 43 | label { 44 | font-family: "Viga", Helvetica, sans-serif; 45 | } 46 | 47 | body { 48 | background: #212121; 49 | overflow-x: hidden; 50 | background-image: url("./../birds-darker.png"); 51 | } 52 | body.front { 53 | overflow: hidden; 54 | height: 100vh; 55 | } 56 | body.front #main { 57 | display: none; 58 | } 59 | 60 | #content { 61 | min-height: 100vh; 62 | } 63 | 64 | .fix { 65 | overflow-y: hidden; 66 | padding-right: 0; 67 | } 68 | @media screen and (min-width: 40em) { 69 | .fix { 70 | padding-right: 1em; 71 | } 72 | } 73 | 74 | .all-birds-wrapper { 75 | max-width: 30em; 76 | margin: 0 auto; 77 | padding-bottom: 15em; 78 | } 79 | 80 | header #start:focus, header #start:hover, header #start:active { 81 | -webkit-tap-highlight-color: transparent !important; 82 | outline: 0 !important; 83 | outline: none !important; 84 | box-shadow: none; 85 | } 86 | 87 | header { 88 | position: relative; 89 | background-image: url("./../bg-mobile.jpg"); 90 | background-repeat: no-repeat; 91 | background-attachment: fixed; 92 | background-position: center; 93 | background-size: cover; 94 | height: 5em; 95 | width: 5em; 96 | top: 1em; 97 | transform: scale3d(0.8, 0.8, 1); 98 | -webkit-backface-visibility: hidden; 99 | backface-visibility: hidden; 100 | border-radius: 50%; 101 | border: 1px solid transparent; 102 | margin: 0 auto; 103 | -moz-transition: all, 1s; 104 | -o-transition: all, 1s; 105 | -webkit-transition: all, 1s; 106 | transition: all, 1s; 107 | } 108 | header h1 { 109 | display: none; 110 | } 111 | header nav { 112 | display: none; 113 | position: absolute; 114 | right: 2em; 115 | top: 2em; 116 | } 117 | header nav .icon { 118 | font-size: 2em; 119 | text-decoration: none; 120 | color: #bdc3c7; 121 | } 122 | header nav .icon:hover, header nav .icon:focus { 123 | color: #bdc3c7; 124 | } 125 | @media screen and (min-width: 40em) { 126 | header { 127 | background-image: url("./../bg.jpg"); 128 | -webkit-backface-visibility: hidden; 129 | backface-visibility: hidden; 130 | background-size: cover; 131 | } 132 | } 133 | header #start { 134 | width: 100%; 135 | height: 100%; 136 | border-radius: 50%; 137 | border: 1px solid transparent; 138 | color: #ef5350; 139 | font-size: 1em; 140 | -webkit-transform-style: preserve-3d; 141 | -moz-transform-style: preserve-3d; 142 | transform-style: preserve-3d; 143 | } 144 | header #start .start { 145 | display: none; 146 | } 147 | header #start:disabled { 148 | display: none; 149 | } 150 | header i.home { 151 | font-size: 2em; 152 | } 153 | 154 | body.front header { 155 | background-image: url("./../bg-mobile.jpg"); 156 | background-size: cover; 157 | height: 100vh; 158 | width: 100%; 159 | transform: scale3d(1, 1, 1); 160 | border-radius: 0; 161 | top: 0; 162 | } 163 | body.front header #start { 164 | width: 100%; 165 | height: auto; 166 | } 167 | body.front header #start .start { 168 | display: inline-block; 169 | color: #bdc3c7; 170 | border: 1px solid #bdc3c7; 171 | } 172 | body.front header h1 { 173 | display: block; 174 | margin: 0; 175 | padding: 25vh 0.5em; 176 | } 177 | body.front header .tilt { 178 | display: none; 179 | } 180 | @media screen and (min-width: 40em) { 181 | body.front header { 182 | background-image: none; 183 | } 184 | body.front header h1, body.front header a, body.front header .front-loader, body.front header nav { 185 | z-index: 9999; 186 | opacity: 0.9; 187 | } 188 | body.front header .tilt { 189 | display: block; 190 | position: absolute; 191 | top: 0; 192 | left: 0; 193 | width: 100%; 194 | height: 100%; 195 | z-index: 0; 196 | } 197 | body.front header .tilt-inner { 198 | position: absolute; 199 | top: 0; 200 | left: 0; 201 | width: 100%; 202 | height: 100%; 203 | background-image: url("./../bg.jpg"); 204 | -webkit-backface-visibility: hidden; 205 | backface-visibility: hidden; 206 | background-size: cover; 207 | } 208 | body.front header .tilt-back, body.front header .tilt-front { 209 | opacity: 0.2; 210 | -moz-transition: opacity, 0.5s; 211 | -o-transition: opacity, 0.5s; 212 | -webkit-transition: opacity, 0.5s; 213 | transition: opacity, 0.5s; 214 | -moz-transition: transform, 0.5s; 215 | -o-transition: transform, 0.5s; 216 | -webkit-transition: transform, 0.5s; 217 | transition: transform, 0.5s; 218 | moz-transform-origin: 50%; 219 | -o-transform-origin: 50%; 220 | -ms-transform-origin: 50%; 221 | -webkit-transform-origin: 50%; 222 | transform-origin: 50%; 223 | -webkit-transition-timing-function: cubic-bezier(0.6, 0, 0.4, 1); 224 | transition-timing-function: cubic-bezier(0.6, 0, 0.4, 1); 225 | } 226 | body.front header .tilt-back { 227 | z-index: -15; 228 | } 229 | body.front header .tilt-front { 230 | z-index: -9; 231 | } 232 | body.front header .tilt-mover { 233 | opacity: 0.6; 234 | z-index: -10; 235 | -moz-transition: transform, 0.5s; 236 | -o-transition: transform, 0.5s; 237 | -webkit-transition: transform, 0.5s; 238 | transition: transform, 0.5s; 239 | } 240 | } 241 | 242 | .front-loader { 243 | background-image: url("./../ellipsis.svg"); 244 | width: 60px; 245 | height: 60px; 246 | margin: 0 auto; 247 | background-repeat: no-repeat; 248 | } 249 | .ready .front-loader { 250 | display: none; 251 | } 252 | 253 | .ready.front header nav { 254 | display: block; 255 | } 256 | 257 | .status { 258 | margin-bottom: 0.5em; 259 | } 260 | .status label { 261 | font-size: 0.8em; 262 | width: 5em; 263 | display: inline-block; 264 | padding-right: 0.5em; 265 | line-height: 0.8; 266 | } 267 | @media screen and (min-width: 40em) { 268 | .status { 269 | text-align: right; 270 | margin-top: 3.5em; 271 | } 272 | } 273 | .status .critically-endangered { 274 | color: #e74c3c; 275 | font-size: 1.2em; 276 | } 277 | .status .endangered { 278 | color: #d35400; 279 | font-size: 1.2em; 280 | } 281 | .status .vulnerable { 282 | color: #e67e22; 283 | } 284 | .status .presumed-extinct { 285 | color: #d14233; 286 | } 287 | 288 | .stats { 289 | text-align: center; 290 | margin: 3em auto; 291 | } 292 | .stats .number { 293 | font-size: 4em; 294 | -webkit-animation-delay: 2s; 295 | -webkit-animation-duration: 5s; 296 | -webkit-animation-name: color; 297 | -webkit-animation-fill-mode: forwards; 298 | /* this prevents the animation from restarting! */ 299 | -moz-animation-delay: 2s; 300 | -moz-animation-duration: 5s; 301 | -moz-animation-name: color; 302 | -moz-animation-fill-mode: forwards; 303 | /* this prevents the animation from restarting! */ 304 | -o-animation-delay: 2s; 305 | -o-animation-duration: 5s; 306 | -o-animation-name: color; 307 | -o-animation-fill-mode: forwards; 308 | /* this prevents the animation from restarting! */ 309 | animation-delay: 2s; 310 | animation-duration: 5s; 311 | animation-name: color; 312 | animation-fill-mode: forwards; 313 | /* this prevents the animation from restarting! */ 314 | color: #ef5350; 315 | } 316 | 317 | @-webkit-keyframes color { 318 | from { 319 | color: #fff; 320 | } 321 | to { 322 | color: #ef5350; 323 | } 324 | } 325 | @-moz-keyframes color { 326 | from { 327 | color: #fff; 328 | } 329 | to { 330 | color: #ef5350; 331 | } 332 | } 333 | @-ms-keyframes color { 334 | from { 335 | color: #fff; 336 | } 337 | to { 338 | color: #ef5350; 339 | } 340 | } 341 | @keyframes color { 342 | from { 343 | color: #fff; 344 | } 345 | to { 346 | color: #ef5350; 347 | } 348 | } 349 | .btn-close { 350 | cursor: pointer; 351 | } 352 | .btn-close:hover, .btn-close:focus { 353 | color: #ef5350; 354 | } 355 | 356 | .profile a { 357 | padding-right: 2em; 358 | position: relative; 359 | } 360 | .profile span.icon { 361 | display: inline-block; 362 | padding-left: 0.3em; 363 | position: absolute; 364 | right: 0; 365 | bottom: 0; 366 | width: 1.5em; 367 | height: 1.1em; 368 | font-size: 1.3em; 369 | } 370 | 371 | .threats { 372 | text-align: center; 373 | width: 100%; 374 | } 375 | .threats label { 376 | margin-bottom: 2em; 377 | } 378 | .threats .chart { 379 | margin: 0 auto; 380 | width: 100%; 381 | } 382 | .threats .chart canvas { 383 | max-width: 100%; 384 | height: auto !important; 385 | } 386 | 387 | ul.attribute a { 388 | color: #bdc3c7; 389 | font-size: 0.8em; 390 | } 391 | ul.attribute a:hover, ul.attribute a:focus { 392 | color: #aab1b7; 393 | } 394 | 395 | .open .bird-card-wrapper, .closing .bird-card-wrapper { 396 | position: fixed; 397 | top: 0; 398 | left: 0; 399 | width: 100%; 400 | height: 100%; 401 | -webkit-transform: translate3d(0, 0, 0); 402 | /* prevents flicker */ 403 | -webkit-overflow-scrolling: touch; 404 | } 405 | 406 | .bird-card-wrapper { 407 | position: absolute; 408 | overflow: hidden; 409 | } 410 | 411 | .bird-card-wrapper { 412 | -moz-transition: all, 1s; 413 | -o-transition: all, 1s; 414 | -webkit-transition: all, 1s; 415 | transition: all, 1s; 416 | } 417 | .bird-card-wrapper .bird-hero { 418 | -moz-transition: all, 1s; 419 | -o-transition: all, 1s; 420 | -webkit-transition: all, 1s; 421 | transition: all, 1s; 422 | line-height: 1; 423 | height: 29.412vw; 424 | background: url("./../birds.png"); 425 | } 426 | .bird-card-wrapper .bird-hero img { 427 | height: 29.412vw; 428 | width: auto; 429 | max-width: 100%; 430 | overflow: hidden; 431 | } 432 | .bird-card-wrapper .bird-info { 433 | -moz-transition: all, 1s; 434 | -o-transition: all, 1s; 435 | -webkit-transition: all, 1s; 436 | transition: all, 1s; 437 | background-color: #1b1b1b; 438 | background-image: url("./../birds-dark.png"); 439 | z-index: 100; 440 | } 441 | .opening .bird-card-wrapper { 442 | overflow: hidden; 443 | } 444 | .opening .bird-card-wrapper .bird-hero { 445 | -moz-transform: translate(0, -100%); 446 | -o-transform: translate(0, -100%); 447 | -ms-transform: translate(0, -100%); 448 | -webkit-transform: translate(0, -100%); 449 | transform: translate(0, -100%); 450 | } 451 | .opening .bird-card-wrapper .bird-info { 452 | -moz-transform: translate(0, 100%); 453 | -o-transform: translate(0, 100%); 454 | -ms-transform: translate(0, 100%); 455 | -webkit-transform: translate(0, 100%); 456 | transform: translate(0, 100%); 457 | } 458 | .open .bird-card-wrapper { 459 | overflow-x: hidden; 460 | overflow-y: auto; 461 | } 462 | .open .bird-card-wrapper .bird-hero { 463 | -moz-transform: translate(0, 0); 464 | -o-transform: translate(0, 0); 465 | -ms-transform: translate(0, 0); 466 | -webkit-transform: translate(0, 0); 467 | transform: translate(0, 0); 468 | } 469 | .open .bird-card-wrapper .bird-info { 470 | -moz-transform: translate(0, 0); 471 | -o-transform: translate(0, 0); 472 | -ms-transform: translate(0, 0); 473 | -webkit-transform: translate(0, 0); 474 | transform: translate(0, 0); 475 | min-height: calc(100vh - 30vw); 476 | } 477 | .closing .bird-card-wrapper { 478 | overflow: hidden; 479 | } 480 | .closing .bird-card-wrapper .bird-hero { 481 | -moz-transform: translate(0, -100%); 482 | -o-transform: translate(0, -100%); 483 | -ms-transform: translate(0, -100%); 484 | -webkit-transform: translate(0, -100%); 485 | transform: translate(0, -100%); 486 | } 487 | .closing .bird-card-wrapper .bird-info { 488 | -moz-transform: translate(0, 100%); 489 | -o-transform: translate(0, 100%); 490 | -ms-transform: translate(0, 100%); 491 | -webkit-transform: translate(0, 100%); 492 | transform: translate(0, 100%); 493 | } 494 | .bird-card-wrapper h1 { 495 | margin: 0.5em 0; 496 | } 497 | 498 | .bird-list-wrapper { 499 | -webkit-transform: translate3d(0, 0, 0); 500 | /* prevents flicker */ 501 | -webkit-overflow-scrolling: touch; 502 | } 503 | 504 | .bird-wrapper { 505 | cursor: pointer; 506 | color: #9d9d9d; 507 | -moz-transition: all, 0.1s, ease-out; 508 | -o-transition: all, 0.1s, ease-out; 509 | -webkit-transition: all, 0.1s, ease-out; 510 | transition: all, 0.1s, ease-out; 511 | } 512 | .bird-wrapper figure { 513 | position: relative; 514 | width: 100%; 515 | margin: 0; 516 | background: url("./../ring.svg"); 517 | background-position: center; 518 | background-repeat: no-repeat; 519 | width: 100%; 520 | height: calc((100vw - 3em)*0.625); 521 | max-height: 18.125em; 522 | background-color: #3b3b3b; 523 | overflow: hidden; 524 | } 525 | .bird-wrapper figure img { 526 | -webkit-filter: grayscale(100%); 527 | filter: grayscale(100%); 528 | } 529 | .bird-wrapper h3 { 530 | margin-top: 0.5em; 531 | text-transform: uppercase; 532 | } 533 | .bird-wrapper.active { 534 | color: #ef5350; 535 | } 536 | .bird-wrapper.active img { 537 | filter: grayscale(0); 538 | -webkit-filter: grayscale(0); 539 | } 540 | @media screen and (min-width: 52em) { 541 | .bird-wrapper:hover, .bird-wrapper:focus { 542 | color: #ef5350; 543 | } 544 | .bird-wrapper:hover img, .bird-wrapper:focus img { 545 | filter: grayscale(0); 546 | -webkit-filter: grayscale(0); 547 | } 548 | } 549 | 550 | .opening .bird-wrapper, .open .bird-wrapper, .closing .bird-wrapper { 551 | opacity: 0; 552 | } 553 | .opening .active.bird-wrapper, .open .active.bird-wrapper, .closing .active.bird-wrapper { 554 | opacity: 1; 555 | } 556 | .opening .bird-wrapper .figcaption, .open .bird-wrapper .figcaption, .closing .bird-wrapper .figcaption { 557 | opacity: 0; 558 | } 559 | 560 | .bird-wrapper { 561 | overflow: hidden; 562 | -moz-transition: all, 0.5s; 563 | -o-transition: all, 0.5s; 564 | -webkit-transition: all, 0.5s; 565 | transition: all, 0.5s; 566 | } 567 | .bird-wrapper.active { 568 | -moz-transition: all, 1s; 569 | -o-transition: all, 1s; 570 | -webkit-transition: all, 1s; 571 | transition: all, 1s; 572 | -moz-transform: scale(1); 573 | -o-transform: scale(1); 574 | -ms-transform: scale(1); 575 | -webkit-transform: scale(1); 576 | transform: scale(1); 577 | } 578 | .opening .bird-wrapper.active { 579 | -moz-transform: scale(0); 580 | -o-transform: scale(0); 581 | -ms-transform: scale(0); 582 | -webkit-transform: scale(0); 583 | transform: scale(0); 584 | } 585 | .open .bird-wrapper.active { 586 | -moz-transform: scale(0); 587 | -o-transform: scale(0); 588 | -ms-transform: scale(0); 589 | -webkit-transform: scale(0); 590 | transform: scale(0); 591 | } 592 | .closing .bird-wrapper.active { 593 | -moz-transform: scale(1); 594 | -o-transform: scale(1); 595 | -ms-transform: scale(1); 596 | -webkit-transform: scale(1); 597 | transform: scale(1); 598 | } 599 | -------------------------------------------------------------------------------- /build/styles.min.css: -------------------------------------------------------------------------------- 1 | @import url(http://fonts.googleapis.com/css?family=Marck+Script);@import url(http://fonts.googleapis.com/css?family=Viga);body,h1,h2,h3{font-family:Viga,sans-serif}body.front #main,header #start .start,header #start:disabled,header h1,header nav{display:none}.bird-wrapper,.btn-close{cursor:pointer}img.loading{opacity:0;width:100%}img.loaded{width:100%;height:auto;-moz-transition:all,1s;-o-transition:all,1s;-webkit-transition:all,1s;transition:all,1s;opacity:1}body{color:#bdc3c7;background:url(./../birds-darker.png) #212121;overflow-x:hidden}.front-loader,header{background-repeat:no-repeat}a{color:#ef5350}a a:focus,a a:hover{color:#f3817f}h1,h2,h3{font-weight:700}.sci-name{font-family:"Marck Script",cursive;font-size:1.5em}label{font-family:Viga,Helvetica,sans-serif}body.front{overflow:hidden;height:100vh}#content{min-height:100vh}.fix{overflow-y:hidden;padding-right:0}.all-birds-wrapper{max-width:30em;margin:0 auto;padding-bottom:15em}header #start:active,header #start:focus,header #start:hover{-webkit-tap-highlight-color:transparent!important;outline:0!important;box-shadow:none}header{position:relative;background-image:url(./../bg-mobile.jpg);background-attachment:fixed;background-position:center;background-size:cover;height:5em;width:5em;top:1em;transform:scale3d(.8,.8,1);-webkit-backface-visibility:hidden;backface-visibility:hidden;border-radius:50%;border:1px solid transparent;margin:0 auto;-moz-transition:all,1s;-o-transition:all,1s;-webkit-transition:all,1s;transition:all,1s}header nav{position:absolute;right:2em;top:2em}header nav .icon{font-size:2em;text-decoration:none;color:#bdc3c7}header nav .icon:focus,header nav .icon:hover{color:#bdc3c7}@media screen and (min-width:40em){.fix{padding-right:1em}header{background-image:url(./../bg.jpg);-webkit-backface-visibility:hidden;backface-visibility:hidden;background-size:cover}}header #start{width:100%;height:100%;border-radius:50%;border:1px solid transparent;color:#ef5350;font-size:1em;-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;transform-style:preserve-3d}header i.home{font-size:2em}body.front header{background-image:url(./../bg-mobile.jpg);background-size:cover;height:100vh;width:100%;transform:scale3d(1,1,1);border-radius:0;top:0}body.front header #start{width:100%;height:auto}body.front header #start .start{display:inline-block;color:#bdc3c7;border:1px solid #bdc3c7}body.front header h1{display:block;margin:0;padding:25vh .5em}body.front header .tilt{display:none}@media screen and (min-width:40em){body.front header .tilt,body.front header .tilt-inner{position:absolute;top:0;left:0;width:100%;height:100%}body.front header{background-image:none}body.front header .front-loader,body.front header a,body.front header h1,body.front header nav{z-index:9999;opacity:.9}body.front header .tilt{display:block;z-index:0}body.front header .tilt-inner{background-image:url(./../bg.jpg);-webkit-backface-visibility:hidden;backface-visibility:hidden;background-size:cover}body.front header .tilt-back,body.front header .tilt-front{opacity:.2;-moz-transition:transform,.5s;-o-transition:transform,.5s;-webkit-transition:transform,.5s;transition:transform,.5s;moz-transform-origin:50%;-o-transform-origin:50%;-ms-transform-origin:50%;-webkit-transform-origin:50%;transform-origin:50%;-webkit-transition-timing-function:cubic-bezier(.6,0,.4,1);transition-timing-function:cubic-bezier(.6,0,.4,1)}body.front header .tilt-back{z-index:-15}body.front header .tilt-front{z-index:-9}body.front header .tilt-mover{opacity:.6;z-index:-10;-moz-transition:transform,.5s;-o-transition:transform,.5s;-webkit-transition:transform,.5s;transition:transform,.5s}}.bird-card-wrapper,.bird-card-wrapper .bird-hero{-moz-transition:all,1s;-o-transition:all,1s;-webkit-transition:all,1s}.front-loader{background-image:url(./../ellipsis.svg);width:60px;height:60px;margin:0 auto}.ready .front-loader{display:none}.ready.front header nav{display:block}.status{margin-bottom:.5em}.status label{font-size:.8em;width:5em;display:inline-block;padding-right:.5em;line-height:.8}@media screen and (min-width:40em){.status{text-align:right;margin-top:3.5em}}.stats,.threats{text-align:center}.status .critically-endangered{color:#e74c3c;font-size:1.2em}.status .endangered{color:#d35400;font-size:1.2em}.status .vulnerable{color:#e67e22}.status .presumed-extinct{color:#d14233}.stats{margin:3em auto}.stats .number{font-size:4em;-webkit-animation-delay:2s;-webkit-animation-duration:5s;-webkit-animation-name:color;-webkit-animation-fill-mode:forwards;-moz-animation-delay:2s;-moz-animation-duration:5s;-moz-animation-name:color;-moz-animation-fill-mode:forwards;-o-animation-delay:2s;-o-animation-duration:5s;-o-animation-name:color;-o-animation-fill-mode:forwards;animation-delay:2s;animation-duration:5s;animation-name:color;animation-fill-mode:forwards;color:#ef5350}@-webkit-keyframes color{from{color:#fff}to{color:#ef5350}}@-moz-keyframes color{from{color:#fff}to{color:#ef5350}}@-ms-keyframes color{from{color:#fff}to{color:#ef5350}}@keyframes color{from{color:#fff}to{color:#ef5350}}.btn-close:focus,.btn-close:hover{color:#ef5350}.profile a{padding-right:2em;position:relative}.profile span.icon{display:inline-block;padding-left:.3em;position:absolute;right:0;bottom:0;width:1.5em;height:1.1em;font-size:1.3em}.threats{width:100%}.threats label{margin-bottom:2em}.threats .chart{margin:0 auto;width:100%}.threats .chart canvas{max-width:100%;height:auto!important}ul.attribute a{color:#bdc3c7;font-size:.8em}ul.attribute a:focus,ul.attribute a:hover{color:#aab1b7}.closing .bird-card-wrapper,.open .bird-card-wrapper{position:fixed;top:0;left:0;width:100%;height:100%;-webkit-transform:translate3d(0,0,0);-webkit-overflow-scrolling:touch}.bird-card-wrapper{position:absolute;overflow:hidden;transition:all,1s}.bird-card-wrapper .bird-hero{transition:all,1s;line-height:1;height:29.412vw;background:url(./../birds.png)}.bird-card-wrapper .bird-hero img{height:29.412vw;width:auto;max-width:100%;overflow:hidden}.bird-card-wrapper .bird-info{-moz-transition:all,1s;-o-transition:all,1s;-webkit-transition:all,1s;transition:all,1s;background-color:#1b1b1b;background-image:url(./../birds-dark.png);z-index:100}.opening .bird-card-wrapper{overflow:hidden}.opening .bird-card-wrapper .bird-hero{-moz-transform:translate(0,-100%);-o-transform:translate(0,-100%);-ms-transform:translate(0,-100%);-webkit-transform:translate(0,-100%);transform:translate(0,-100%)}.opening .bird-card-wrapper .bird-info{-moz-transform:translate(0,100%);-o-transform:translate(0,100%);-ms-transform:translate(0,100%);-webkit-transform:translate(0,100%);transform:translate(0,100%)}.open .bird-card-wrapper{overflow-x:hidden;overflow-y:auto}.open .bird-card-wrapper .bird-hero{-moz-transform:translate(0,0);-o-transform:translate(0,0);-ms-transform:translate(0,0);-webkit-transform:translate(0,0);transform:translate(0,0)}.open .bird-card-wrapper .bird-info{-moz-transform:translate(0,0);-o-transform:translate(0,0);-ms-transform:translate(0,0);-webkit-transform:translate(0,0);transform:translate(0,0);min-height:calc(100vh - 30vw)}.closing .bird-card-wrapper{overflow:hidden}.closing .bird-card-wrapper .bird-hero{-moz-transform:translate(0,-100%);-o-transform:translate(0,-100%);-ms-transform:translate(0,-100%);-webkit-transform:translate(0,-100%);transform:translate(0,-100%)}.closing .bird-card-wrapper .bird-info{-moz-transform:translate(0,100%);-o-transform:translate(0,100%);-ms-transform:translate(0,100%);-webkit-transform:translate(0,100%);transform:translate(0,100%)}.bird-card-wrapper h1{margin:.5em 0}.bird-list-wrapper{-webkit-transform:translate3d(0,0,0);-webkit-overflow-scrolling:touch}.bird-wrapper{color:#9d9d9d;overflow:hidden;-moz-transition:all,.5s;-o-transition:all,.5s;-webkit-transition:all,.5s;transition:all,.5s}.bird-wrapper figure{position:relative;margin:0;background:url(./../ring.svg) center no-repeat #3b3b3b;width:100%;height:calc((100vw - 3em) *.625);max-height:18.125em;overflow:hidden}.bird-wrapper figure img{-webkit-filter:grayscale(100%);filter:grayscale(100%)}.bird-wrapper h3{margin-top:.5em;text-transform:uppercase}.bird-wrapper.active{color:#ef5350;-moz-transition:all,1s;-o-transition:all,1s;-webkit-transition:all,1s;transition:all,1s;-moz-transform:scale(1);-o-transform:scale(1);-ms-transform:scale(1);-webkit-transform:scale(1);transform:scale(1)}.bird-wrapper.active img{filter:grayscale(0);-webkit-filter:grayscale(0)}@media screen and (min-width:52em){.bird-wrapper:focus,.bird-wrapper:hover{color:#ef5350}.bird-wrapper:focus img,.bird-wrapper:hover img{filter:grayscale(0);-webkit-filter:grayscale(0)}}.closing .bird-wrapper,.open .bird-wrapper,.opening .bird-wrapper{opacity:0}.closing .active.bird-wrapper,.open .active.bird-wrapper,.opening .active.bird-wrapper{opacity:1}.closing .bird-wrapper .figcaption,.open .bird-wrapper .figcaption,.opening .bird-wrapper .figcaption{opacity:0}.open .bird-wrapper.active,.opening .bird-wrapper.active{-moz-transform:scale(0);-o-transform:scale(0);-ms-transform:scale(0);-webkit-transform:scale(0);transform:scale(0)}.closing .bird-wrapper.active{-moz-transform:scale(1);-o-transform:scale(1);-ms-transform:scale(1);-webkit-transform:scale(1);transform:scale(1)} -------------------------------------------------------------------------------- /data.json: -------------------------------------------------------------------------------- 1 | [ { 2 | "attributes" : [ { 3 | "author" : "Planettrekker", 4 | "bio" : "https://www.flickr.com/photos/planettrekker", 5 | "link" : "https://flic.kr/p/8LkeCd" 6 | } ], 7 | "commonName" : "Black-eared Miner", 8 | "commonwealthStatus" : "Critically Endangered", 9 | "id" : "mm", 10 | "nswStatus" : "Endangered", 11 | "profile" : "http://www.environment.gov.au/cgi-bin/sprat/public/publicspecies.pl?taxon_id=449", 12 | "scientificName" : "Manorina melanotis", 13 | "stats" : "50", 14 | "statsFor" : "NSW (2000)", 15 | "threats" : [ 9, 5, 2, 5, 6, 0, 0, 5 ] 16 | }, { 17 | "attributes" : [ { 18 | "author" : "David Cook(CC 2.0)", 19 | "bio" : "https://flic.kr/p/4UUpTw", 20 | "link" : "https://flic.kr/p/ckjKfo" 21 | }, { 22 | "author" : "Tim Dolby", 23 | "bio" : "https://www.blogger.com/profile/05959326240924026673", 24 | "link" : "http://tim-dolby.blogspot.com.au" 25 | } ], 26 | "commonName" : "Eastern Bristlebird", 27 | "commonwealthStatus" : "Endangered", 28 | "id" : "db", 29 | "nswStatus" : "Endangered", 30 | "profile" : "http://www.environment.gov.au/cgi-bin/sprat/public/publicspecies.pl?taxon_id=533", 31 | "scientificName" : "Dasyornis brachypterus", 32 | "stats" : "2000", 33 | "statsFor" : "Australia(1998)", 34 | "threats" : [ 8, 4, 6, 5, 6, 0, 5, 5 ] 35 | }, { 36 | "attributes" : [ { 37 | "author" : "Julian Robinson", 38 | "bio" : "https://www.flickr.com/photos/ozjulian", 39 | "link" : "https://flic.kr/p/8EHCTt" 40 | }, { 41 | "author" : "Tobias Hayashi", 42 | "bio" : "https://www.flickr.com/photos/callocephalon/", 43 | "link" : "https://flic.kr/p/4Hqysg" 44 | } ], 45 | "commonName" : "Swift Parrot", 46 | "commonwealthStatus" : "Endangered", 47 | "id" : "ld", 48 | "nswStatus" : "Endangered", 49 | "profile" : "http://www.environment.gov.au/cgi-bin/sprat/public/publicspecies.pl?taxon_id=744", 50 | "scientificName" : "Lathamus discolor", 51 | "stats" : "2000", 52 | "statsFor" : "Australia(2000)", 53 | "threats" : [ 9, 3, 5, 5, 4, 0, 6, 5 ] 54 | }, { 55 | "attributes" : [ { 56 | "author" : "David Cook CC 2.0", 57 | "bio" : "https://www.flickr.com/photos/frankzed/", 58 | "link" : "https://flic.kr/p/ormTq2" 59 | } ], 60 | "commonName" : "Australasian Bittern", 61 | "commonwealthStatus" : "Endangered", 62 | "id" : "bp", 63 | "nswStatus" : "Endangered", 64 | "profile" : "http://www.environment.gov.au/cgi-bin/sprat/public/publicspecies.pl?taxon_id=1001", 65 | "scientificName" : "Botaurus poiciloptilus", 66 | "stats" : "1000", 67 | "statsFor" : "Austrlia(2001)", 68 | "threats" : [ 8, 6, 6, 2, 1, 0, 5, 8 ] 69 | }, { 70 | "attributes" : [ { 71 | "author" : "Oliver Dodd", 72 | "bio" : "https://www.flickr.com/photos/oliverdodd/", 73 | "link" : "https://flic.kr/p/dGZLrv" 74 | }, { 75 | "author" : "Harold Moses", 76 | "bio" : "https://www.flickr.com/photos/mosesharold/", 77 | "link" : "https://flic.kr/p/kqb1ai" 78 | } ], 79 | "commonName" : "Southern Giant Petrel", 80 | "commonwealthStatus" : "Endangered", 81 | "id" : "mg", 82 | "nswStatus" : "Endangered", 83 | "profile" : "http://www.environment.gov.au/cgi-bin/sprat/public/publicspecies.pl?taxon_id=1060", 84 | "scientificName" : "Macronectes giganteus", 85 | "stats" : "7090", 86 | "statsFor" : "Austrlia(2001)", 87 | "threats" : [ 5, 5, 4, 2, 0, 9, 8, 5 ] 88 | }, { 89 | "attributes" : [ { 90 | "author" : "Jim Bendon CC 2.0", 91 | "bio" : "https://www.flickr.com/photos/jim_bendon_1957", 92 | "link" : "https://flic.kr/p/uByw92" 93 | } ], 94 | "commonName" : "Star Finch (eastern), Star Finch (southern)", 95 | "commonwealthStatus" : "Endangered", 96 | "id" : "nrr", 97 | "nswStatus" : "Presumed Extinct", 98 | "profile" : "http://www.environment.gov.au/cgi-bin/sprat/public/publicspecies.pl?taxon_id=26027", 99 | "scientificName" : "Neochmia ruficauda ruficauda", 100 | "stats" : "50", 101 | "statsFor" : "Austrlia", 102 | "threats" : [ 6, 5, 5, 2, 1, 0, 8, 5 ] 103 | }, { 104 | "attributes" : [ { 105 | "author" : "Todd Burrows", 106 | "bio" : "https://www.flickr.com/photos/toddburrows/", 107 | "link" : "https://flic.kr/p/dN1mWz" 108 | } ], 109 | "commonName" : "Gould's Petrel", 110 | "commonwealthStatus" : "Endangered", 111 | "id" : "pll", 112 | "nswStatus" : "Vulnerable", 113 | "profile" : "http://www.environment.gov.au/cgi-bin/sprat/public/publicspecies.pl?taxon_id=26033", 114 | "scientificName" : "Pterodroma leucoptera leucoptera", 115 | "stats" : "2500", 116 | "statsFor" : "Austrlia (20090", 117 | "threats" : [ 2, 5, 4, 2, 4, 2, 7, 5 ] 118 | }, { 119 | "attributes" : [ { 120 | "author" : "Ron Knight CC2.0", 121 | "bio" : "https://www.flickr.com/photos/sussexbirder/", 122 | "link" : "https://flic.kr/p/diYjwY" 123 | }, { 124 | "author" : "Wild~Life", 125 | "bio" : "https://www.flickr.com/photos/andrew_alderson/", 126 | "link" : "https://flic.kr/p/qaiN8e" 127 | } ], 128 | "commonName" : "Mallee Emu-wren", 129 | "commonwealthStatus" : "Endangered", 130 | "id" : "sm", 131 | "nswStatus" : "Endangered", 132 | "profile" : "http://www.environment.gov.au/cgi-bin/sprat/public/publicspecies.pl?taxon_id=59459", 133 | "scientificName" : "Stipiturus mallee", 134 | "stats" : "4000", 135 | "statsFor" : "Austrlia(2006)", 136 | "threats" : [ 9, 4, 5, 2, 6, 0, 4, 2 ] 137 | }, { 138 | "attributes" : [ { 139 | "author" : "snowmanradio CC2.0", 140 | "bio" : "https://commons.wikimedia.org/wiki/User:Snowmanradio", 141 | "link" : "https://upload.wikimedia.org/wikipedia/commons/b/b3/Cyclopsitta_diophthalma_-Birdworld_Kuranda%2C_Queensland%2C_Australia_-male-8a.jpg" 142 | } ], 143 | "commonName" : "Coxen's Fig-Parrot", 144 | "commonwealthStatus" : "Critically Endangered", 145 | "id" : "cdc", 146 | "nswStatus" : "Endangered", 147 | "profile" : "http://www.environment.gov.au/cgi-bin/sprat/public/publicspecies.pl?taxon_id=59714", 148 | "scientificName" : "Cyclopsitta diophthalma coxeni", 149 | "stats" : "100", 150 | "statsFor" : "Austrlia(2000)", 151 | "threats" : [ 9, 2, 2, 4, 4, 0, 8, 8 ] 152 | }, { 153 | "attributes" : [ { 154 | "author" : "Aunty Marsy", 155 | "bio" : "https://www.flickr.com/photos/auntymarsy/", 156 | "link" : "https://flic.kr/p/9qfMzH" 157 | } ], 158 | "commonName" : "Black-throated Finch (southern)", 159 | "commonwealthStatus" : "Endangered", 160 | "id" : "pcc", 161 | "nswStatus" : "Endangered", 162 | "profile" : "http://www.environment.gov.au/cgi-bin/sprat/public/publicspecies.pl?taxon_id=64447", 163 | "scientificName" : "Poephila cincta cincta", 164 | "stats" : "10 000", 165 | "statsFor" : "Austrlia (2011)", 166 | "threats" : [ 8, 3, 7, 1, 5, 0, 6, 2 ] 167 | }, { 168 | "attributes" : [ { 169 | "author" : "Jon Irvine", 170 | "bio" : "https://www.flickr.com/photos/calidris-photos/", 171 | "link" : "https://flic.kr/p/8UexwV" 172 | }, { 173 | "author" : "Jon Irvine", 174 | "bio" : "https://www.flickr.com/photos/calidris-photos/", 175 | "link" : "https://flic.kr/p/8UeweH" 176 | } ], 177 | "commonName" : "Chatham Albatross", 178 | "commonwealthStatus" : "Endangered", 179 | "id" : "te", 180 | "nswStatus" : "Endangered", 181 | "profile" : "http://www.environment.gov.au/cgi-bin/sprat/public/publicspecies.pl?taxon_id=64457", 182 | "scientificName" : "Thalassarche eremita", 183 | "stats" : "11 000", 184 | "statsFor" : "Globally(2003)", 185 | "threats" : [ 2, 5, 8, 1, 1, 8, 8, 2 ] 186 | }, { 187 | "attributes" : [ { 188 | "author" : "Ron Knight", 189 | "bio" : "https://www.flickr.com/photos/sussexbirder", 190 | "link" : "https://flic.kr/p/diYmzg" 191 | } ], 192 | "commonName" : "Grey Grasswren (Bulloo)", 193 | "commonwealthStatus" : "Endangered", 194 | "id" : "abb", 195 | "nswStatus" : "Endangered", 196 | "profile" : "http://www.environment.gov.au/cgi-bin/sprat/public/publicspecies.pl?taxon_id=67065", 197 | "scientificName" : "Amytornis barbatus barbatus", 198 | "stats" : "1600", 199 | "statsFor" : "NSW(2010)", 200 | "threats" : [ 9, 6, 8, 1, 1, 1, 1, 2 ] 201 | }, { 202 | "attributes" : [ { 203 | "author" : "Patrick_K59 CC 2.0", 204 | "bio" : "https://www.flickr.com/photos/patrick_k59", 205 | "link" : "https://flic.kr/p/dQDDLd" 206 | }, { 207 | "author" : "Patrick_K59 CC 2.0", 208 | "bio" : "https://www.flickr.com/photos/patrick_k59", 209 | "link" : "https://flic.kr/p/dUx4r5" 210 | } ], 211 | "commonName" : "Australian Painted Snipe", 212 | "commonwealthStatus" : "Endangered", 213 | "id" : "ra", 214 | "nswStatus" : "Endangered", 215 | "profile" : "http://www.environment.gov.au/cgi-bin/sprat/public/publicspecies.pl?taxon_id=77037", 216 | "scientificName" : "Rostratula australis", 217 | "stats" : "5000", 218 | "statsFor" : "Austrlia(2000)", 219 | "threats" : [ 9, 5, 4, 1, 5, 1, 6, 3 ] 220 | }, { 221 | "attributes" : [ { 222 | "author" : "Vincent Legendre CC3.0", 223 | "bio" : " ", 224 | "link" : "https://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/Albatros_d%27amsterdam_poussin.jpg/500px-Albatros_d%27amsterdam_poussin.jpg" 225 | }, { 226 | "author" : "Vincent Legendre CC3.0", 227 | "bio" : "", 228 | "link" : "https://en.wikipedia.org/wiki/File:Albatros_d%27amsterdam.jpg" 229 | } ], 230 | "commonName" : "Amsterdam Albatross", 231 | "commonwealthStatus" : "Endangered", 232 | "id" : "dea", 233 | "nswStatus" : "Endangered", 234 | "profile" : "http://www.environment.gov.au/cgi-bin/sprat/public/publicspecies.pl?taxon_id=82330", 235 | "scientificName" : "Diomedea exulans amsterdamensis", 236 | "stats" : "130", 237 | "statsFor" : "the World(2008)", 238 | "threats" : [ 8, 5, 3, 5, 1, 3, 8, 4 ] 239 | }, { 240 | "attributes" : [ { 241 | "author" : "Ed Dunens CC2.0", 242 | "bio" : "https://www.flickr.com/photos/blachswan", 243 | "link" : "https://flic.kr/p/qavMD1" 244 | }, { 245 | "author" : "JJ Harrison", 246 | "bio" : "jjharrison89@facebook.com", 247 | "link" : "https://en.wikipedia.org/wiki/File:Diomedea_sanfordi_-_SE_Tasmania.jpg" 248 | } ], 249 | "commonName" : "Northern Royal Albatross", 250 | "commonwealthStatus" : "Endangered", 251 | "id" : "des", 252 | "nswStatus" : "Endangered", 253 | "profile" : "http://www.environment.gov.au/cgi-bin/sprat/public/publicspecies.pl?taxon_id=82331", 254 | "scientificName" : "Diomedea epomophora sanfordi", 255 | "stats" : "20,000", 256 | "statsFor" : "the World(2012)", 257 | "threats" : [ 2, 5, 1, 1, 1, 9, 8, 4 ] 258 | }, { 259 | "attributes" : [ { 260 | "author" : "Chantal Steyn", 261 | "bio" : "https://www.flickr.com/photos/chantal_steyn/", 262 | "link" : "https://flic.kr/p/6aFUqB" 263 | }, { 264 | "author" : "JJ Harrison CC3.0", 265 | "bio" : "jjharrison89@facebook.com", 266 | "link" : "https://upload.wikimedia.org/wikipedia/commons/thumb/c/c4/Diomedea_exulans_in_flight_-_SE_Tasmania.jpg/440px-Diomedea_exulans_in_flight_-_SE_Tasmania.jpg" 267 | } ], 268 | "commonName" : "Tristan Albatross", 269 | "commonwealthStatus" : "Endangered", 270 | "id" : "dee", 271 | "nswStatus" : "Endangered", 272 | "profile" : "http://www.environment.gov.au/cgi-bin/sprat/public/publicspecies.pl?taxon_id=82337", 273 | "scientificName" : "Diomedea exulans exulans", 274 | "stats" : "2000", 275 | "statsFor" : "Austrlia(2001)", 276 | "threats" : [ 2, 6, 6, 1, 1, 9, 6, 2 ] 277 | } ] 278 | -------------------------------------------------------------------------------- /ellipsis.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chloeleichen/birds/e01bf7584f1572878ecea33bb4a2281bbfa5ed6a/favicon.ico -------------------------------------------------------------------------------- /favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chloeleichen/birds/e01bf7584f1572878ecea33bb4a2281bbfa5ed6a/favicon.png -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | var gulp = require('gulp'), 3 | gutil = require('gulp-util'), 4 | browserify = require('browserify'), 5 | source = require("vinyl-source-stream"), 6 | reactify = require('reactify'), 7 | sass = require('gulp-ruby-sass'), 8 | watch = require('gulp-watch'), 9 | watchify = require('watchify'), 10 | uglify = require('gulp-uglify'), 11 | cssmin = require('gulp-cssmin'), 12 | rename = require('gulp-rename'); 13 | 14 | var path = { 15 | BUILD: './build', 16 | SASS: './src/sass/', 17 | SRC: './src/sass/styles.scss', 18 | JS: './src/js/**', 19 | MAIN: './src/js/main.js', 20 | OUT: 'main.js', 21 | 22 | }; 23 | 24 | 25 | gulp.task('sass', function(){ 26 | return sass(path.SRC, { style: 'expanded', loadPath: path.SASS }) 27 | .pipe(gulp.dest(path.BUILD)); 28 | }); 29 | 30 | // use browserify to package js, transform react jsx files, and bundle all together 31 | gulp.task('js', function() { 32 | var b = browserify({ debug:true }); 33 | var stream = b 34 | .add(path.MAIN) 35 | .transform({}, reactify) 36 | .on('error', function (err) { 37 | console.log(err.toString()); 38 | this.emit("end"); 39 | }) 40 | .bundle(); 41 | return stream 42 | .on('error', function (err) { 43 | console.log(err.toString()); 44 | this.emit("end"); 45 | }) 46 | .pipe(source(path.OUT)) 47 | .pipe(gulp.dest(path.BUILD)); 48 | }); 49 | 50 | gulp.task('compress', function() { 51 | return gulp.src('./build/*.js') 52 | .pipe(uglify()) 53 | .pipe(rename({suffix: '.min'})) 54 | .pipe(gulp.dest('./build')); 55 | }); 56 | 57 | gulp.task('minify', function () { 58 | gulp.src('./build/*.css') 59 | .pipe(cssmin()) 60 | .pipe(rename({suffix: '.min'})) 61 | .pipe(gulp.dest('./build')); 62 | }); 63 | 64 | gulp.task('watch', function(){ 65 | //gulp.watch(path.JS, ['transform']); 66 | gulp.watch(path.SASS +'*.scss', ['sass']); 67 | gulp.watch(path.JS, ['js']); 68 | 69 | }); 70 | 71 | 72 | 73 | gulp.task('default', ['watch']); 74 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Endangered Birds NSW 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 42 | 43 | 44 |
45 |
46 |
47 |
48 | 49 | 52 | 53 | 54 | 55 | 56 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "birds", 3 | "version": "1.0.0", 4 | "description": "##Image Attributes(in progress)", 5 | "main": "gulpfile.js", 6 | "dependencies": { 7 | "browserify": "^11.0.1", 8 | "chart.js": "^1.0.2", 9 | "gulp": "^3.9.0", 10 | "gulp-ruby-sass": "^1.0.5", 11 | "gulp-util": "^3.0.6", 12 | "gulp-watch": "^4.3.4", 13 | "react": "^0.13.3", 14 | "react-chartjs": "^0.6.0", 15 | "reactify": "^1.1.1", 16 | "vinyl-source-stream": "^1.1.0" 17 | }, 18 | "devDependencies": { 19 | "browserify": "^11.0.1", 20 | "chart.js": "^1.0.2", 21 | "gulp": "^3.9.0", 22 | "gulp-cssmin": "^0.1.7", 23 | "gulp-rename": "^1.2.2", 24 | "gulp-ruby-sass": "^1.0.5", 25 | "gulp-uglify": "^1.2.0", 26 | "gulp-util": "^3.0.6", 27 | "gulp-watch": "^4.3.4", 28 | "react": "^0.13.3", 29 | "react-chartjs": "^0.6.0", 30 | "react-timer-mixin": "^0.13.2", 31 | "reactify": "^1.1.1", 32 | "vinyl-source-stream": "^1.1.0", 33 | "watchify": "^3.3.1" 34 | }, 35 | "scripts": { 36 | "test": "echo \"Error: no test specified\" && exit 1" 37 | }, 38 | "repository": { 39 | "type": "git", 40 | "url": "https://github.com/chloeleichen/birds.git" 41 | }, 42 | "author": "", 43 | "license": "ISC", 44 | "bugs": { 45 | "url": "https://github.com/chloeleichen/birds/issues" 46 | }, 47 | "homepage": "https://github.com/chloeleichen/birds" 48 | } 49 | -------------------------------------------------------------------------------- /ring.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/js/AllBirdsWrapper.jsx: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | var BirdWrapper = require('./BirdWrapper.jsx'); 3 | var BirdInfo = require('./BirdInfo.jsx'); 4 | var buttonStart = document.getElementById('start'); 5 | var activeEl, transitionEvent, birds, birdImg; 6 | 7 | var AllBirdsWrapper = React.createClass({ 8 | whichTransitionEvent: function(el){ 9 | var t; 10 | var transitions = { 11 | 'transition':'transitionend', 12 | 'OTransition':'oTransitionEnd', 13 | 'MozTransition':'transitionend', 14 | 'WebkitTransition':'webkitTransitionEnd' 15 | }; 16 | for(t in transitions){ 17 | if( el.style[t] !== undefined ){ 18 | return transitions[t]; 19 | } 20 | } 21 | }, 22 | 23 | getInitialState: function() { 24 | return { 25 | data: [], 26 | activeBirdId: '', 27 | wrapperClass: 'closed' 28 | }; 29 | }, 30 | 31 | componentWillMount: function() { 32 | //prepare data 33 | this.firebaseRef = new Firebase("https://endangered-birds-nsw.firebaseio.com/"); 34 | this.firebaseRef.on("child_added", function(dataSnapshot) { 35 | this.setState({ 36 | data: this.state.data.concat(dataSnapshot.val()) 37 | }); 38 | }.bind(this)); 39 | }, 40 | 41 | componentDidMount:function(){ 42 | birds = this.refs.birds; 43 | this.el = React.findDOMNode(birds); 44 | }, 45 | 46 | componentDidUpdate: function(){ 47 | if(!body.classList.contains("ready")){ 48 | birdImg = this.el.getElementsByTagName("img"); 49 | //check data loaded 50 | if(birdImg.length === 16){ 51 | body.classList.add("ready"); 52 | buttonStart.disabled = false; 53 | } 54 | } 55 | }, 56 | 57 | handleClose: function(){ 58 | this.setState({ 59 | wrapperClass:'closing' 60 | }); 61 | 62 | activeEl = this.el.querySelector('.active'); 63 | transitionEvent = this.whichTransitionEvent(activeEl); 64 | if(transitionEvent){ 65 | activeEl.addEventListener(transitionEvent, this.listenerClose); 66 | } 67 | }, 68 | 69 | handleClick: function (i) { 70 | this.setState({ 71 | activeBirdId: i, 72 | wrapperClass:'opening', 73 | }); 74 | body.classList.add("fix"); 75 | activeEl = this.el.getElementsByTagName('li')[i]; 76 | transitionEvent = this.whichTransitionEvent(activeEl); 77 | if(transitionEvent){ 78 | activeEl.addEventListener(transitionEvent, this.listenerOpen); 79 | } 80 | }, 81 | 82 | //seperate for better readability 83 | listenerOpen: function (event){ 84 | if((event.propertyName === "transform") || (event.propertyName === "-ms-transform" )||(event.propertyName === "-webkit-transform")){ 85 | this.setState({ 86 | wrapperClass: "open" 87 | }); 88 | event.target.removeEventListener(event.type, this.listenerOpen); 89 | } 90 | }, 91 | 92 | listenerClose: function (event){ 93 | if((event.propertyName === "transform") || (event.propertyName === "-ms-transform" )||(event.propertyName === "-webkit-transform")){ 94 | body.classList.remove("fix"); 95 | this.setState({ 96 | wrapperClass: "closed", 97 | activeBirdId: null 98 | }); 99 | event.target.removeEventListener(event.type, this.listenerClose); 100 | } 101 | }, 102 | 103 | render: function(){ 104 | //Get Active Bird 105 | var activeBird = this.state.data[this.state.activeBirdId]; 106 | var outputInfo = null; 107 | if(activeBird){ 108 | outputInfo = ; 109 | }; 110 | 111 | return( 112 |
113 |
114 |
    115 | {this.state.data.map(function(bird, i) { 116 | return (); 117 | }, this)} 118 |
119 |
120 |
121 | {outputInfo} 122 |
123 |
124 | ); 125 | } 126 | }); 127 | 128 | module.exports = AllBirdsWrapper; 129 | -------------------------------------------------------------------------------- /src/js/BirdAttribute.jsx: -------------------------------------------------------------------------------- 1 | var BirdAttribute = React.createClass({ 2 | render: function(){ 3 | var atts = this.props.attribute; 4 | return ( 9 | ) ; 10 | } 11 | }); 12 | 13 | var BirdAttributeItem = React.createClass({ 14 | render: function() { 15 | return (
  • Image {this.props.index} © {this.props.author}
    • ); 16 | } 17 | }); 18 | 19 | module.exports = BirdAttribute; 20 | -------------------------------------------------------------------------------- /src/js/BirdImage.jsx: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | var BirdImage = React.createClass({ 3 | getInitialState: function() { 4 | return { 5 | loaded: false 6 | }; 7 | }, 8 | 9 | componentDidMount: function(){ 10 | var self = this; 11 | var img = document.createElement('img'); 12 | img.onload = function(){ 13 | self.setState({ loaded: true}); 14 | }; 15 | img.src = this.props.src; 16 | }, 17 | 18 | render: function(){ 19 | return ({this.props.alt}); 20 | } 21 | }); 22 | 23 | module.exports = BirdImage; 24 | -------------------------------------------------------------------------------- /src/js/BirdInfo.jsx: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | var BirdTitle = require('./BirdTitle.jsx'); 3 | var BirdStats = require('./BirdStats.jsx'); 4 | var BirdThreats = require('./BirdThreats.jsx'); 5 | var BirdStatus = require('./BirdStatus.jsx'); 6 | var BirdImage = require('./BirdImage.jsx'); 7 | var BirdAttribute = require('./BirdAttribute.jsx'); 8 | 9 | 10 | var BirdInfo = React.createClass({ 11 | handleClose: function(){ 12 | this.props.onClick(this); 13 | }, 14 | render: function(){ 15 | var src = "http://www.chloechen.io/images/birds/highres/" + this.props.data.id + ".jpg"; 16 | return( 17 |
    18 |
    19 | 20 |
    21 |
    22 |
    23 |
    24 | 25 |
    26 |
    27 | 28 | 29 |
    30 | 31 | 32 | 33 | 34 |
    35 |
    36 |
    37 | ); 38 | } 39 | }); 40 | 41 | module.exports = BirdInfo; 42 | -------------------------------------------------------------------------------- /src/js/BirdStats.jsx: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | var c = null; 3 | var BirdStats = React.createClass({ 4 | render: function(){ 5 | return (
    6 | 7 |
    {this.props.stats}
    8 |
    9 | ); 10 | } 11 | }); 12 | 13 | module.exports = BirdStats; 14 | -------------------------------------------------------------------------------- /src/js/BirdStatus.jsx: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | var BirdStatus = React.createClass({ 3 | render: function(){ 4 | function transform(str){ 5 | var strNew = str.replace(/\s/g, "-").toLowerCase(); 6 | return strNew; 7 | } 8 | return ( 9 |
    10 |
    11 | 12 | {this.props.cmStatus} 13 |
    14 |
    15 | 16 | {this.props.nswStatus.replace(/\s/g, "-")} 17 |
    18 |
    19 | ); 20 | } 21 | }); 22 | 23 | module.exports = BirdStatus; 24 | -------------------------------------------------------------------------------- /src/js/BirdThreats.jsx: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | var Chart = require("chart.js"); 3 | var RadarChart = require("react-chartjs").Radar; 4 | // To change other default settings, refer to : http://www.chartjs.org/docs/#getting-started-global-chart-configuration 5 | 6 | Chart.defaults.global.scaleOverride=true; 7 | Chart.defaults.global.scaleSteps=1; 8 | Chart.defaults.global.scaleStepWidth=10; 9 | Chart.defaults.global.scaleStartValue=0; 10 | 11 | 12 | var chartOptions ={ 13 | scaleShowLine : true, 14 | angleShowLineOut : false, 15 | scaleShowLabels : false, 16 | scaleBeginAtZero : true, 17 | angleLineColor : "rgba(255,255,255,.3)", 18 | scaleLineColor: "rgba(255,255,255,.4)", 19 | angleLineWidth : 1, 20 | responsive: true, 21 | pointLabelFontFamily : "'Viga', sans-serif", 22 | pointLabelFontStyle : "normal", 23 | pointLabelFontSize : 10, 24 | pointLabelFontColor : "#bdc3c7", 25 | pointDot : true, 26 | pointDotRadius : 3, 27 | pointDotStrokeWidth : 1, 28 | pointHitDetectionRadius : 20, 29 | datasetStroke : true, 30 | datasetStrokeWidth : 2, 31 | datasetFill : true, 32 | tooltipTemplate:"<%=label%>", 33 | tooltipFillColor: "rgba(0,0,0,0.8)", 34 | tooltipFontFamily: "'Viga', sans-serif", 35 | legendTemplate : "" 36 | }; 37 | 38 | var BirdThreats = React.createClass({ 39 | render: function(){ 40 | var chartData = { 41 | labels: ["Habitat loss", "Climate change", "Alien Species", "Disease", "Fire", "Fishing Activities", "Other Human Activities", "Others"], 42 | datasets: [ 43 | { 44 | label: "Threats", 45 | fillColor: "rgba(239,83,80,0.4)", 46 | strokeColor: "#ef5350", 47 | pointColor: "rgba(220,220,220,1)", 48 | pointStrokeColor: "#fff", 49 | pointHighlightFill: "#fff", 50 | pointHighlightStroke: "rgba(220,220,220,1)", 51 | data: this.props.threats 52 | } 53 | ] 54 | }; 55 | return (
    ); 56 | } 57 | }); 58 | 59 | module.exports = BirdThreats; 60 | 61 | -------------------------------------------------------------------------------- /src/js/BirdTitle.jsx: -------------------------------------------------------------------------------- 1 | var BirdTitle = React.createClass({ 2 | render: function(){ 3 | return (
    4 |
    {this.props.sciName}
    5 |

    {this.props.comName}

    6 |
    7 | ) ; 8 | } 9 | }); 10 | 11 | module.exports = BirdTitle; 12 | -------------------------------------------------------------------------------- /src/js/BirdWrapper.jsx: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var BirdImage = require('./BirdImage.jsx'); 4 | 5 | var BirdWrapper = React.createClass({ 6 | handleClick: function () { 7 | this.props.onClick(this); 8 | }, 9 | 10 | render: function() { 11 | var listItemClassList = this.props.active + " block bird-wrapper p1 col col-12 mt1 mb1"; 12 | var src = "http://www.chloechen.io/images/birds/thumbnail/" + this.props.data.id + ".jpg"; 13 | return ( 14 |
  • 15 |
    16 | 17 |
    18 |

    {this.props.data.commonName}

    19 |
    • 20 | ); 21 | } 22 | }); 23 | 24 | module.exports = BirdWrapper; 25 | -------------------------------------------------------------------------------- /src/js/main.js: -------------------------------------------------------------------------------- 1 | /** @jsx React.DOM */ 2 | 3 | var React = require('react'); 4 | 5 | // Here we put our React instance to the global scope. Make sure you do not put it 6 | // into production and make sure that you close and open your console if the 7 | // DEV-TOOLS does not display 8 | window.React = React; 9 | 10 | var AllBirdsWrapper = require('./AllBirdsWrapper.jsx'); 11 | 12 | var body = document.getElementById('body'), 13 | main = document.getElementById('main'); 14 | 15 | 16 | 17 | 18 | React.render(, document.getElementById('content')); 19 | -------------------------------------------------------------------------------- /src/sass/_card.scss: -------------------------------------------------------------------------------- 1 | %fixed{ 2 | position: fixed; 3 | top: 0; 4 | left: 0; 5 | width: 100%; 6 | height: 100%; 7 | -webkit-transform: translate3d(0, 0, 0); 8 | /* prevents flicker */ 9 | -webkit-overflow-scrolling: touch; 10 | } 11 | 12 | %absolute{ 13 | position: absolute; 14 | overflow: hidden; 15 | } 16 | 17 | 18 | .bird-card-wrapper{ 19 | @extend %absolute; 20 | @include transition(all, $delay); 21 | .bird-hero{ 22 | @include transition(all, $delay); 23 | line-height: 1; 24 | height: 29.412vw; 25 | background: url("./../birds.png"); 26 | img{ 27 | height: 29.412vw; 28 | width: auto; 29 | max-width: 100%; 30 | overflow: hidden; 31 | } 32 | } 33 | .bird-info{ 34 | @include transition(all, $delay); 35 | background-color: $darker; 36 | background-image: url("./../birds-dark.png"); 37 | z-index: 100; 38 | } 39 | .opening &{ 40 | overflow: hidden; 41 | .bird-hero{ 42 | @include translate(0, -100%); 43 | } 44 | .bird-info{ 45 | @include translate(0, 100%); 46 | } 47 | } 48 | .open &{ 49 | @extend %fixed; 50 | overflow-x: hidden; 51 | overflow-y: auto; 52 | 53 | 54 | .bird-hero{ 55 | @include translate(0, 0); 56 | } 57 | .bird-info{ 58 | @include translate(0, 0); 59 | min-height: calc(100vh - 30vw); 60 | } 61 | } 62 | .closing &{ 63 | overflow: hidden; 64 | @extend %fixed; 65 | .bird-hero{ 66 | @include translate(0, -100%); 67 | } 68 | .bird-info{ 69 | @include translate(0, 100%); 70 | } 71 | 72 | } 73 | .closed &{ 74 | } 75 | h1{ 76 | margin: 0.5em 0; 77 | } 78 | } 79 | 80 | 81 | 82 | 83 | -------------------------------------------------------------------------------- /src/sass/_footer.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chloeleichen/birds/e01bf7584f1572878ecea33bb4a2281bbfa5ed6a/src/sass/_footer.scss -------------------------------------------------------------------------------- /src/sass/_global.scss: -------------------------------------------------------------------------------- 1 | @import url(http://fonts.googleapis.com/css?family=Marck+Script); 2 | @import url(http://fonts.googleapis.com/css?family=Viga); 3 | 4 | $sm: 40em; 5 | $md: 52em; 6 | $lg: 64em; 7 | $dark: #212121; 8 | $grey: #9d9d9d; 9 | $darker: #1b1b1b; 10 | $red: #ef5350; 11 | $red-lighter: lighten($red, 10%); 12 | $light: #bdc3c7; 13 | $presumed-extinct: #d14233; 14 | $critically-endangered: #e74c3c; 15 | $endangered:#d35400; 16 | $vulnerable:#e67e22; 17 | 18 | 19 | $open:'Viga', sans-serif; 20 | $script:'Marck Script', cursive; 21 | $normal: "Viga", Helvetica, sans-serif; 22 | 23 | 24 | $delay: 1s; 25 | 26 | @mixin transition($transition...) { 27 | -moz-transition: $transition; 28 | -o-transition: $transition; 29 | -webkit-transition: $transition; 30 | transition: $transition; 31 | } 32 | 33 | // generic transform 34 | @mixin transform($transforms) { 35 | -moz-transform: $transforms; 36 | -o-transform: $transforms; 37 | -ms-transform: $transforms; 38 | -webkit-transform: $transforms; 39 | transform: $transforms; 40 | } 41 | 42 | //transform origin 43 | @mixin transform-origin ($origin) { 44 | moz-transform-origin: $origin; 45 | -o-transform-origin: $origin; 46 | -ms-transform-origin: $origin; 47 | -webkit-transform-origin: $origin; 48 | transform-origin: $origin; 49 | } 50 | 51 | // translate 52 | @mixin translate ($x, $y) { 53 | @include transform(translate($x, $y)); 54 | } 55 | 56 | // rotate 57 | @mixin rotate ($deg) { 58 | @include transform(rotate(#{$deg}deg)); 59 | } 60 | 61 | // scale 62 | @mixin scale($scale) { 63 | @include transform(scale($scale)); 64 | } 65 | // translate 66 | @mixin translate ($x, $y) { 67 | @include transform(translate($x, $y)); 68 | } 69 | // skew 70 | @mixin skew ($x, $y) { 71 | @include transform(skew(#{$x}deg, #{$y}deg)); 72 | } 73 | 74 | //Vertical align 75 | @mixin vertical-align { 76 | position: relative; 77 | top: 50%; 78 | -webkit-transform: translateY(-50%); 79 | -ms-transform: translateY(-50%); 80 | transform: translateY(-50%); 81 | } 82 | 83 | // keyframes mixin 84 | @mixin keyframes($name) { 85 | @-webkit-keyframes #{$name} { 86 | @content; 87 | } 88 | @-moz-keyframes #{$name} { 89 | @content; 90 | } 91 | @-ms-keyframes #{$name} { 92 | @content; 93 | } 94 | @keyframes #{$name} { 95 | @content; 96 | } 97 | } 98 | 99 | //animation 100 | @mixin animation ($delay, $duration, $animation) { 101 | -webkit-animation-delay: $delay; 102 | -webkit-animation-duration: $duration; 103 | -webkit-animation-name: $animation; 104 | -webkit-animation-fill-mode: forwards; /* this prevents the animation from restarting! */ 105 | 106 | -moz-animation-delay: $delay; 107 | -moz-animation-duration: $duration; 108 | -moz-animation-name: $animation; 109 | -moz-animation-fill-mode: forwards; /* this prevents the animation from restarting! */ 110 | 111 | -o-animation-delay: $delay; 112 | -o-animation-duration: $duration; 113 | -o-animation-name: $animation; 114 | -o-animation-fill-mode: forwards; /* this prevents the animation from restarting! */ 115 | 116 | animation-delay: $delay; 117 | animation-duration: $duration; 118 | animation-name: $animation; 119 | animation-fill-mode: forwards; /* this prevents the animation from restarting! */ 120 | } 121 | 122 | //Img styles 123 | img.loaded{ 124 | width: 100%; 125 | height: auto; 126 | @include transition(all, 1s); 127 | } 128 | 129 | img.loading{ 130 | opacity: 0; 131 | width: 100%; 132 | } 133 | 134 | img.loaded{ 135 | opacity: 1; 136 | } 137 | -------------------------------------------------------------------------------- /src/sass/_header.scss: -------------------------------------------------------------------------------- 1 | %no-outline{ 2 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important; 3 | outline: 0 !important; 4 | outline: none !important; 5 | box-shadow: none; 6 | } 7 | header{ 8 | position: relative; 9 | background-image: url("./../bg-mobile.jpg"); 10 | background-repeat: no-repeat; 11 | background-attachment: fixed; 12 | background-position: center; 13 | background-size: cover; 14 | height: 5em; 15 | width: 5em; 16 | top: 1em; 17 | transform: scale3d(0.8,0.8,1); 18 | -webkit-backface-visibility: hidden; 19 | backface-visibility: hidden; 20 | border-radius: 50%; 21 | border: 1px solid rgba(0, 0, 0, 0); 22 | margin: 0 auto; 23 | h1{ 24 | display: none; 25 | } 26 | nav{ 27 | display: none; 28 | position: absolute; 29 | right: 2em; 30 | top: 2em; 31 | .icon{ 32 | font-size: 2em; 33 | text-decoration: none; 34 | color: $light; 35 | &:hover, &:focus{ 36 | color: $light; 37 | } 38 | } 39 | } 40 | @include transition(all, 1s); 41 | @media screen and (min-width: $sm){ 42 | background-image: url("./../bg.jpg"); 43 | -webkit-backface-visibility: hidden; 44 | backface-visibility: hidden; 45 | background-size: cover; 46 | } 47 | #start{ 48 | width: 100%; 49 | height: 100%; 50 | border-radius: 50%; 51 | border: 1px solid transparent; 52 | color: $red; 53 | font-size: 1em; 54 | -webkit-transform-style: preserve-3d; 55 | -moz-transform-style: preserve-3d; 56 | transform-style: preserve-3d; 57 | .start{ 58 | display: none; 59 | } 60 | &:disabled { 61 | display: none; 62 | } 63 | &:focus, &:hover, &:active{ 64 | @extend %no-outline; 65 | } 66 | } 67 | i.home{ 68 | font-size: 2em; 69 | } 70 | } 71 | 72 | body.front { 73 | header{ 74 | background-image: url("./../bg-mobile.jpg"); 75 | background-size: cover; 76 | height: 100vh; 77 | width: 100%; 78 | transform: scale3d(1,1,1); 79 | border-radius: 0; 80 | top: 0; 81 | #start{ 82 | width: 100%; 83 | height: auto; 84 | .start{ 85 | display: inline-block; 86 | color: $light; 87 | border: 1px solid $light; 88 | } 89 | } 90 | h1{ 91 | display: block; 92 | margin: 0; 93 | padding: 25vh 0.5em; 94 | } 95 | .tilt{ 96 | display: none; 97 | } 98 | 99 | @media screen and (min-width: $sm){ 100 | background-image: none; 101 | h1, a, .front-loader, nav{ 102 | z-index: 9999; 103 | opacity: 0.9 104 | } 105 | .tilt{ 106 | display: block; 107 | position: absolute; 108 | top: 0; 109 | left: 0; 110 | width: 100%; 111 | height: 100%; 112 | z-index: 0; 113 | } 114 | 115 | .tilt-inner{ 116 | position: absolute; 117 | top: 0; 118 | left: 0; 119 | width: 100%; 120 | height: 100%; 121 | background-image: url("./../bg.jpg"); 122 | -webkit-backface-visibility: hidden; 123 | backface-visibility: hidden; 124 | background-size: cover; 125 | } 126 | 127 | .tilt-back, .tilt-front{ 128 | opacity: 0.2; 129 | @include transition(opacity, 0.5s); 130 | @include transition(transform, 0.5s); 131 | @include transform-origin(50%); 132 | -webkit-transition-timing-function: cubic-bezier(0.6,0,0.4,1); 133 | transition-timing-function: cubic-bezier(0.6,0,0.4,1); 134 | } 135 | 136 | .tilt-back{ 137 | z-index: -15; 138 | } 139 | .tilt-front{ 140 | z-index: -9; 141 | } 142 | .tilt-mover{ 143 | opacity: 0.6; 144 | z-index: -10; 145 | @include transition(transform, 0.5s); 146 | } 147 | } 148 | } 149 | } 150 | 151 | 152 | .front-loader{ 153 | background-image: url("./../ellipsis.svg"); 154 | width: 60px; 155 | height: 60px; 156 | margin: 0 auto; 157 | background-repeat: no-repeat; 158 | .ready &{ 159 | display: none; 160 | } 161 | } 162 | 163 | .ready.front header{ 164 | nav{ 165 | display: block; 166 | } 167 | } 168 | 169 | -------------------------------------------------------------------------------- /src/sass/_layout.scss: -------------------------------------------------------------------------------- 1 | body{ 2 | background: $dark; 3 | overflow-x: hidden; 4 | background-image: url("./../birds-darker.png"); 5 | &.front{ 6 | overflow: hidden; 7 | height: 100vh; 8 | #main{ 9 | display: none; 10 | } 11 | } 12 | } 13 | 14 | #content{ 15 | min-height: 100vh; 16 | } 17 | 18 | .fix{ 19 | overflow-y: hidden; 20 | padding-right: 0; 21 | @media screen and (min-width: $sm){ 22 | padding-right: 1em; 23 | } 24 | } 25 | 26 | .all-birds-wrapper{ 27 | max-width: 30em; 28 | margin: 0 auto; 29 | padding-bottom: 15em; 30 | } 31 | 32 | -------------------------------------------------------------------------------- /src/sass/_list.scss: -------------------------------------------------------------------------------- 1 | @mixin active{ 2 | color: $red; 3 | img{ 4 | filter: grayscale(0); 5 | -webkit-filter: grayscale(0); 6 | } 7 | } 8 | 9 | .bird-list-wrapper{ 10 | -webkit-transform: translate3d(0, 0, 0); 11 | /* prevents flicker */ 12 | -webkit-overflow-scrolling: touch; 13 | } 14 | //Sizes 15 | .bird-wrapper{ 16 | cursor: pointer; 17 | color: $grey; 18 | @include transition(all, 0.1s, ease-out); 19 | figure{ 20 | position: relative; 21 | width: 100%; 22 | margin: 0; 23 | background: url("./../ring.svg"); 24 | background-position: center; 25 | background-repeat: no-repeat; 26 | width: 100%; 27 | height: calc((100vw - 3em)*0.625); 28 | max-height: 18.125em; 29 | background-color: lighten($dark, 10%); 30 | overflow: hidden; 31 | img{ 32 | -webkit-filter: grayscale(100%); 33 | filter: grayscale(100%); 34 | } 35 | } 36 | h3{ 37 | margin-top: 0.5em; 38 | text-transform: uppercase; 39 | } 40 | &.active{ 41 | @include active; 42 | } 43 | 44 | @media screen and (min-width: $md){ 45 | &:hover, &:focus{ 46 | @include active; 47 | } 48 | } 49 | 50 | } 51 | 52 | %fade{ 53 | opacity: 0; 54 | &.active{ 55 | opacity: 1; 56 | } 57 | .figcaption{ 58 | opacity: 0; 59 | } 60 | } 61 | 62 | //State 63 | .bird-wrapper{ 64 | overflow: hidden; 65 | @include transition(all, 0.5s); 66 | &.active{ 67 | @include transition(all, $delay); 68 | @include scale(1); 69 | } 70 | 71 | .opening &{ 72 | @extend %fade; 73 | &.active{ 74 | @include scale(0); 75 | //opacity: 0.1; 76 | } 77 | } 78 | .open &{ 79 | @extend %fade; 80 | &.active{ 81 | //opacity: 0; 82 | @include scale(0); 83 | } 84 | } 85 | 86 | .closing &{ 87 | @extend %fade; 88 | &.active{ 89 | //@include transition(all, 5s); 90 | @include scale(1); 91 | } 92 | } 93 | .closed &{ 94 | &.active{ 95 | } 96 | } 97 | } 98 | 99 | 100 | -------------------------------------------------------------------------------- /src/sass/_structure.scss: -------------------------------------------------------------------------------- 1 | .status{ 2 | margin-bottom:0.5em; 3 | label{ 4 | font-size: 0.8em; 5 | width: 5em; 6 | display: inline-block; 7 | padding-right: 0.5em; 8 | line-height: 0.8; 9 | } 10 | @media screen and (min-width: $sm){ 11 | text-align: right; 12 | margin-top: 3.5em; 13 | 14 | } 15 | .critically-endangered{ 16 | color: $critically-endangered; 17 | font-size: 1.2em; 18 | } 19 | 20 | .endangered{ 21 | color: $endangered; 22 | font-size: 1.2em; 23 | } 24 | 25 | .vulnerable{ 26 | color: $vulnerable; 27 | 28 | } 29 | .presumed-extinct{ 30 | color: $presumed-extinct; 31 | } 32 | } 33 | 34 | 35 | .stats{ 36 | text-align: center; 37 | margin: 3em auto; 38 | 39 | .number{ 40 | font-size: 4em; 41 | @include animation(2s, 5s, color); 42 | color: $red; 43 | 44 | } 45 | } 46 | 47 | @include keyframes(color){ 48 | from {color: #fff;} 49 | to {color: $red;} 50 | } 51 | 52 | 53 | .btn-close{ 54 | cursor: pointer; 55 | &:hover, &:focus{ 56 | color: $red; 57 | } 58 | } 59 | 60 | .profile{ 61 | a{ 62 | padding-right: 2em; 63 | position: relative; 64 | } 65 | span.icon{ 66 | display: inline-block; 67 | padding-left: 0.3em; 68 | position: absolute; 69 | right: 0; 70 | bottom: 0; 71 | width: 1.5em; 72 | height: 1.1em; 73 | font-size: 1.3em; 74 | } 75 | } 76 | .threats{ 77 | text-align: center; 78 | width: 100%; 79 | label{ 80 | margin-bottom: 2em; 81 | } 82 | .chart{ 83 | margin: 0 auto; 84 | width: 100%; 85 | 86 | canvas{ 87 | max-width: 100%; 88 | height: auto !important; 89 | } 90 | } 91 | } 92 | 93 | ul.attribute{ 94 | a{ 95 | color: $light; 96 | font-size: 0.8em; 97 | &:hover, &:focus{ 98 | color: darken($light, 7%); 99 | 100 | } 101 | span{ 102 | 103 | } 104 | } 105 | } 106 | -------------------------------------------------------------------------------- /src/sass/_type.scss: -------------------------------------------------------------------------------- 1 | body{ 2 | color: $light; 3 | font-family: $open; 4 | } 5 | a{ 6 | color: $red; 7 | a:hover, a:focus{ 8 | color: $red-lighter; 9 | } 10 | } 11 | 12 | h1, h2, h3{ 13 | font-family: $open; 14 | font-weight: 700; 15 | } 16 | 17 | .sci-name{ 18 | font-family: $script; 19 | font-size: 1.5em; 20 | } 21 | 22 | label{ 23 | font-family: $normal; 24 | } 25 | -------------------------------------------------------------------------------- /src/sass/styles.scss: -------------------------------------------------------------------------------- 1 | @import "global"; 2 | @import "type"; 3 | @import "layout"; 4 | @import "header"; 5 | @import "footer"; 6 | @import "structure"; 7 | @import "card"; 8 | @import "list"; 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /threat.txt: -------------------------------------------------------------------------------- 1 | 0 Habitat loss 2 | 1 Climate change 3 | 2 Alien Species 4 | 3 Disease 5 | 4 Fire 6 | 5 Fishing activities 7 | 6 Other human 8 | 7 Others 9 | 10 | Other human activities: 11 | Hunting, trapping, egg collection, litter ingestion, road accident, water pollution collision with window, etc 12 | --------------------------------------------------------------------------------