├── .gitignore ├── README.textile ├── _config.yml ├── _layouts └── default.html ├── budget.md ├── commercial.md ├── details.md ├── dni.md ├── fonts ├── copse-regular-webfont.eot ├── copse-regular-webfont.svg ├── copse-regular-webfont.ttf ├── copse-regular-webfont.woff ├── quattrocentosans-bold-webfont.eot ├── quattrocentosans-bold-webfont.svg ├── quattrocentosans-bold-webfont.ttf ├── quattrocentosans-bold-webfont.woff ├── quattrocentosans-bolditalic-webfont.eot ├── quattrocentosans-bolditalic-webfont.svg ├── quattrocentosans-bolditalic-webfont.ttf ├── quattrocentosans-bolditalic-webfont.woff ├── quattrocentosans-italic-webfont.eot ├── quattrocentosans-italic-webfont.svg ├── quattrocentosans-italic-webfont.ttf ├── quattrocentosans-italic-webfont.woff ├── quattrocentosans-regular-webfont.eot ├── quattrocentosans-regular-webfont.svg ├── quattrocentosans-regular-webfont.ttf └── quattrocentosans-regular-webfont.woff ├── images ├── background.png ├── body-background.png ├── bullet.png ├── hr.gif └── octocat-logo.png ├── index.md ├── innovation.md ├── javascripts └── main.js ├── kpi.md ├── opensource.md ├── overview.md ├── params.json ├── plan.md ├── related.md ├── roadmap.md └── stylesheets ├── github-dark.css ├── normalize.css └── styles.css /.gitignore: -------------------------------------------------------------------------------- 1 | *.bak 2 | _site/ 3 | -------------------------------------------------------------------------------- /README.textile: -------------------------------------------------------------------------------- 1 | h1. Pages about the IPTC EXTRA project 2 | 3 | The HTML rendition of the pages is available at http://iptc.github.io/extra/ 4 | 5 | -------------------------------------------------------------------------------- /_config.yml: -------------------------------------------------------------------------------- 1 | name: IPTC EXTRA 2 | makrdown: kramdown 3 | -------------------------------------------------------------------------------- /_layouts/default.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | {{ page.title }} 7 | 8 | 9 | 12 | 13 | 14 | 15 | 30 |
31 |

IPTC EXTRA - The EXTraction Rules Apparatus

32 |

An Open Source Platform for Rules-Based Classification of News Content

33 |
34 | 43 | 44 |
45 |
46 |
47 | {{ content }} 48 |
49 |
50 | 54 |
55 | 56 | 57 | 58 | -------------------------------------------------------------------------------- /budget.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | title: IPTC EXTRA 4 | --- 5 | ## EXTRA Budget 6 | 7 | In order to build and distribute a solid working version of the EXTRA platform, together with two initial rules sets to demonstrate the power and potential of platform, and to put in place the core technical and marketing foundation for a sustainable open source project, the main project costs would be the labour required. The grant of 50,000 EUR will be used for the work of 8 | 9 | * Developers 10 | * Linguists 11 | * Marketing 12 | -------------------------------------------------------------------------------- /commercial.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | title: IPTC EXTRA 4 | --- 5 | ## Commercial Considerations 6 | 7 | The core EXTRA platform will be [open source](opensource.html) and will not be directly monetized by the IPTC. 8 | 9 | However, the EXTRA platform does create opportunities for monetization, including companies offering support services, hosting the EXTRA software as a service and integrating the EXTRA classification engine within commercial Content Management Systems. 10 | 11 | There is also an opportunity for the development and maintenance of the rule sets applied by the EXTRA platform, either as consulting services or as commercial offerings. In particular, there is the opportunity to create rule sets targeted at particular taxonomies and content sets, including beyond the general news domain covered by the IPTC’s Media Topics. 12 | -------------------------------------------------------------------------------- /details.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | title: IPTC EXTRA 4 | --- 5 | ## EXTRA in Detail 6 | 7 | The aim of the EXTRA project is to build and freely distribute an initial version of EXTRA, an open source rules-based classifier. In addition, we plan to create two rule sets which make use of the EXTRA platform, which will also be free and open source. Finally, our goal is to put in place the core technical and marketing foundation to make EXTRA a sustainable open source project. 8 | 9 | To provide intelligent search, high-quality topical aggregations, subject-specific alerts and content analytics, many modern news publishers tag content items with relevant topics. To achieve scale and consistency in tagging operations, publishers often employ rule-based tagging software. Such software tags relevant topics by analyzing the text of a document using a set of human authored rules. For example, to identify the topic "Kate Middleton (Person)" a publisher might use the rule: 10 | 11 | > apply tag "Kate Middleton (Person)" if the document text contains any of the following phrases: "Duchess of Cambridge", "Catherine Middleton", " Catherine Elizabeth Middleton" 12 | 13 | News publishers have invested an enormous amount of manual effort to create, manage, and maintain sets of these kinds of rules. For example, over the last fifteen years, The New York Times metadata services team has created a rule set containing over half a million manually-crafted rules. 14 | 15 | Creating and deploying such rule-sets requires significant investments in both costly software and specialized personnel. As such, only the largest publishers can afford to acquire and maintain such systems. A freely available open source rule-based information extraction and classification toolkit would – for the first time – put a powerful knowledge management tool into the hands of small-to-medium sized publishers and create a marketplace for the decades-long investment made by larger publishers in their rule-sets. 16 | 17 | For this reason, the International Press Telecommunications Council (IPTC) proposes to build EXTRA. EXTRA is a rules-based, open source, multilingual information extraction platform. Additionally, to make EXTRA immediately useful to the news publishing community, the IPTC further proposes to create two suites of rules for classifying news documents into the IPTC Media Topics Taxonomy, aimed at two of the languages supported by the Media Topics. Developed over many years by the IPTC and used by several leading news providers, the IPTC Media Topics is an industry-standard taxonomy for classifying news documents by subject. The Media Topics are available in English, French, Spanish and German. 18 | 19 | To accomplish these goals, the IPTC proposes to hire both a software development contractor and a linguist. The software contractor will develop the EXTRA engine, a software component that takes as input EXTRA rules and a text document and produces as output a list of rules matched by the text document and their corresponding topics. In developing the rules engine, every effort will be made to identify and build upon existing open source components. The IPTC believes that Elasticsearch Percolator shows great potential to be one such open source component. Other open source frameworks that may be relevant are Apache’s UIMA and Sheffield’s GATE (the General Architecture for Text Engineering). Similarly, the IPTC will explore how to make EXTRA compatible with modern cloud architectures, to simplify the deployment of the system for small-to-medium sized publishers. 20 | 21 | The software contractor will also develop and deliver a formal specification for the EXTRA rules language. The linguist will then, based on this formal specification, develop two collections of rules for classifying documents into IPTC Media Topics. All of these items, rules engine, language specification and classification rules, will be openly developed on github.com and released under a permissive [open source license](opensource.html). 22 | 23 | More broadly, it is the IPTC's hope that this project will catalyze a migration in the news publishing community away from expensive proprietary document classification systems and towards a common industry wide open source platform. The IPTC further hopes that the broad adoption of a common rules-based document classification platform will create a marketplace for the many rule sets developed by news publishers over the last several years. Lastly, The IPTC believes that a freely available document classification platform will provide great benefit to small-to-medium sized publishers. The cost of existing document classification technology and the lack of freely available classification rule sets makes it extremely difficult for all but the largest publishers to leverage this technology in their operations. As such, small-to-medium sized publishers face a challenge in providing their readership with the kinds of search and aggregation experiences typical of their larger peers. 24 | -------------------------------------------------------------------------------- /dni.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | title: IPTC EXTRA 4 | --- 5 | ## EXTRA DNI 6 | 7 | The goal of the [DNI](https://www.digitalnewsinitiative.com/fund) is to stimulate innovation among European news organizations. There are multiple funding rounds. 8 | 9 | IPTC applied during the first round in December 2015 for the “EXTRA” project and was awarded a prototype project amount of 50,000 EUR. 10 | -------------------------------------------------------------------------------- /fonts/copse-regular-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iptc/extra/a2e1024d1f968cf3ac672e3529ce1b45ceaff186/fonts/copse-regular-webfont.eot -------------------------------------------------------------------------------- /fonts/copse-regular-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iptc/extra/a2e1024d1f968cf3ac672e3529ce1b45ceaff186/fonts/copse-regular-webfont.ttf -------------------------------------------------------------------------------- /fonts/copse-regular-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iptc/extra/a2e1024d1f968cf3ac672e3529ce1b45ceaff186/fonts/copse-regular-webfont.woff -------------------------------------------------------------------------------- /fonts/quattrocentosans-bold-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iptc/extra/a2e1024d1f968cf3ac672e3529ce1b45ceaff186/fonts/quattrocentosans-bold-webfont.eot -------------------------------------------------------------------------------- /fonts/quattrocentosans-bold-webfont.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | This is a custom SVG webfont generated by Font Squirrel. 6 | Copyright : Copyright c 2011 Pablo Impallari wwwimpallaricomimpallarigmailcomCopyright c 2011 Igino Marini wwwikerncommailiginomarinicomCopyright c 2011 Brenda Gallo gbrenda1987gmailcomwith Reserved Font Name Quattrocento Sans 7 | Designer : Pablo Impallari 8 | Foundry : Pablo Impallari Igino Marini Brenda Gallo 9 | Foundry URL : wwwimpallaricom 10 | 11 | 12 | 13 | 14 | 15 | 16 | 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 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | 173 | 174 | 175 | 176 | 177 | 178 | 179 | 180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | 190 | 191 | 192 | 193 | 194 | 195 | 196 | 197 | 198 | 199 | 200 | 201 | 202 | 203 | 204 | 205 | 206 | 207 | 208 | 209 | 210 | 211 | 212 | 213 | 214 | 215 | 216 | 217 | 218 | 219 | 220 | 221 | 222 | 223 | 224 | 225 | 226 | 227 | 228 | 229 | 230 | 231 | 232 | 233 | 234 | 235 | 236 | 237 | 238 | 239 | 240 | 241 | 242 | 243 | 244 | 245 | 246 | 247 | -------------------------------------------------------------------------------- /fonts/quattrocentosans-bold-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iptc/extra/a2e1024d1f968cf3ac672e3529ce1b45ceaff186/fonts/quattrocentosans-bold-webfont.ttf -------------------------------------------------------------------------------- /fonts/quattrocentosans-bold-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iptc/extra/a2e1024d1f968cf3ac672e3529ce1b45ceaff186/fonts/quattrocentosans-bold-webfont.woff -------------------------------------------------------------------------------- /fonts/quattrocentosans-bolditalic-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iptc/extra/a2e1024d1f968cf3ac672e3529ce1b45ceaff186/fonts/quattrocentosans-bolditalic-webfont.eot -------------------------------------------------------------------------------- /fonts/quattrocentosans-bolditalic-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iptc/extra/a2e1024d1f968cf3ac672e3529ce1b45ceaff186/fonts/quattrocentosans-bolditalic-webfont.ttf -------------------------------------------------------------------------------- /fonts/quattrocentosans-bolditalic-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iptc/extra/a2e1024d1f968cf3ac672e3529ce1b45ceaff186/fonts/quattrocentosans-bolditalic-webfont.woff -------------------------------------------------------------------------------- /fonts/quattrocentosans-italic-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iptc/extra/a2e1024d1f968cf3ac672e3529ce1b45ceaff186/fonts/quattrocentosans-italic-webfont.eot -------------------------------------------------------------------------------- /fonts/quattrocentosans-italic-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iptc/extra/a2e1024d1f968cf3ac672e3529ce1b45ceaff186/fonts/quattrocentosans-italic-webfont.ttf -------------------------------------------------------------------------------- /fonts/quattrocentosans-italic-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iptc/extra/a2e1024d1f968cf3ac672e3529ce1b45ceaff186/fonts/quattrocentosans-italic-webfont.woff -------------------------------------------------------------------------------- /fonts/quattrocentosans-regular-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iptc/extra/a2e1024d1f968cf3ac672e3529ce1b45ceaff186/fonts/quattrocentosans-regular-webfont.eot -------------------------------------------------------------------------------- /fonts/quattrocentosans-regular-webfont.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | This is a custom SVG webfont generated by Font Squirrel. 6 | Copyright : Copyright c 2011 Pablo Impallari wwwimpallaricomimpallarigmailcomCopyright c 2011 Igino Marini wwwikerncommailiginomarinicomCopyright c 2011 Brenda Gallo gbrenda1987gmailcomwith Reserved Font Name Quattrocento Sans 7 | Designer : Pablo Impallari 8 | Foundry : Pablo Impallari Igino Marini Brenda Gallo 9 | Foundry URL : wwwimpallaricom 10 | 11 | 12 | 13 | 14 | 15 | 16 | 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 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | 173 | 174 | 175 | 176 | 177 | 178 | 179 | 180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | 190 | 191 | 192 | 193 | 194 | 195 | 196 | 197 | 198 | 199 | 200 | 201 | 202 | 203 | 204 | 205 | 206 | 207 | 208 | 209 | 210 | 211 | 212 | 213 | 214 | 215 | 216 | 217 | 218 | 219 | 220 | 221 | 222 | 223 | 224 | 225 | 226 | 227 | 228 | 229 | 230 | 231 | 232 | 233 | 234 | 235 | 236 | 237 | 238 | 239 | 240 | 241 | 242 | 243 | 244 | 245 | 246 | 247 | -------------------------------------------------------------------------------- /fonts/quattrocentosans-regular-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iptc/extra/a2e1024d1f968cf3ac672e3529ce1b45ceaff186/fonts/quattrocentosans-regular-webfont.ttf -------------------------------------------------------------------------------- /fonts/quattrocentosans-regular-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iptc/extra/a2e1024d1f968cf3ac672e3529ce1b45ceaff186/fonts/quattrocentosans-regular-webfont.woff -------------------------------------------------------------------------------- /images/background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iptc/extra/a2e1024d1f968cf3ac672e3529ce1b45ceaff186/images/background.png -------------------------------------------------------------------------------- /images/body-background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iptc/extra/a2e1024d1f968cf3ac672e3529ce1b45ceaff186/images/body-background.png -------------------------------------------------------------------------------- /images/bullet.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iptc/extra/a2e1024d1f968cf3ac672e3529ce1b45ceaff186/images/bullet.png -------------------------------------------------------------------------------- /images/hr.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iptc/extra/a2e1024d1f968cf3ac672e3529ce1b45ceaff186/images/hr.gif -------------------------------------------------------------------------------- /images/octocat-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iptc/extra/a2e1024d1f968cf3ac672e3529ce1b45ceaff186/images/octocat-logo.png -------------------------------------------------------------------------------- /index.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | title: IPTC EXTRA 4 | --- 5 | ## IPTC EXTRA - The EXTraction Rules Apparatus 6 | 7 | EXTRA is an open source software library for rules-based classification of text. EXTRA is being developed by the [IPTC](https://iptc.org), with initial work being funded by a grant from the [Digital News Initiative](dni.html). 8 | 9 | Learn more about [EXTRA](overview.html) and how you can [get involved](roadmap.html)! 10 | -------------------------------------------------------------------------------- /innovation.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | title: IPTC EXTRA 4 | --- 5 | ## What Makes EXTRA Innovative? 6 | 7 | As a rule-based, multilingual classification system, EXTRA provides news publishers with several key capabilities: the ability to automatically categorize documents by subject (for example, terrorism, sports, Ringo Starr), the ability to author classification rule sets tailored to existing taxonomies and the ability to classify documents using the industry standard IPTC Media Topics taxonomy. By making these powerful capabilities freely available to the global news publishing community, the EXTRA project promises to catalyze a variety of innovative outcomes including intelligent aggregation, search and analytics. Below we detail each of these innovative outcomes. Following that, we describe the technological and editorial components of the system we propose to deliver. 8 | 9 | ### Innovative Applications 10 | 11 | The ability to aggregate content by subject enables publishers to unlock tremendous value from their editorial output. With subject tags, publishers can provide their consumers with a variety of topic-specific products. News agencies can provide customers with subject-specific feeds (for example, all of the items about Angela Merkel). User-facing news providers can create landing pages for topics of interest to their readership (for example, all the items about a local star athlete). Mobile publishers can send push alerts to their readers whenever a new article is published on a topic of interest. 12 | 13 | News publishers can also leverage categorized documents to deliver intelligent search. Generally publishers provide search only over the text of their content archives. Most publishers have the capability to return a relevance ranked list of news documents that contain specific words. This approach has obvious drawbacks related to term ambiguity. When a user searches for the word "apple," is she looking for items about the technology firm, the fruit or the music label that released the Beatles' albums? With categorized documents, publishers can mitigate challenges of term ambiguity by providing the ability to retrieve documents by category. With the appropriate categories it then becomes possible for the user to search instead for documents categorized as being about "Apple Inc.", "Apple (fruit)" or "Apple (record label)." 14 | 15 | Another key benefit to publishers of categorizing their news archive is the ability to develop subject-specific analytics. Generally publishers track consumer behavior at the site wide level, the page level and across specific content verticals (sports, arts, opinion). When articles are classified according to subject, it becomes possible for publishers to also track consumer behavior at the topic level. For instance, with such analytics a publisher could determine that their coverage of "Local Restaurants" is generating far less engagement than their coverage of "Crime and Criminals." This kind of insight can prove extremely valuable in determining how to allocate editorial resources, how to sell advertising and how to promote news items. 16 | 17 | ### Technical And Editorial Considerations 18 | 19 | The EXTRA system will consist of the following technical components: a formal specification of the EXTRA classification rules language, a software component for efficiently classifying documents according to such rules and documentation about how to deploy and operate this software component. 20 | 21 | There are two major approaches a news publishing organization might take to incorporate EXTRA into its editorial workflow: supervised or unsupervised. In the supervised approach, prior to the publication of a news item, the text of the item would be run through the EXTRA rules engine and members of the editorial staff would review the suggested categories for accuracy. In the unsupervised scenario, the news item would be published without human review of the EXTRA-suggested categories. 22 | 23 | Another important consideration for news publishing organizations will be the choice of classification rule sets. EXTRA will launch with two rule sets that provides support for classifying documents in two different European languages into the IPTC's Media Topic taxonomy. While this will certainly suffice for many publishers, others may require the ability to categorize documents into an alternate subject taxonomy. Doing so will require that publishers either map the IPTC Media Topics onto this alternate taxonomy or that publishers develop an ability to author EXTRA rule sets. And, of course, at the outset, support for languages beyond the two that the prototype will initially support will require that publishers author their own language-specific rule sets. 24 | -------------------------------------------------------------------------------- /javascripts/main.js: -------------------------------------------------------------------------------- 1 | var sectionHeight = function() { 2 | var total = $(window).height(), 3 | $section = $('section').css('height','auto'); 4 | 5 | if ($section.outerHeight(true) < total) { 6 | var margin = $section.outerHeight(true) - $section.height(); 7 | $section.height(total - margin - 20); 8 | } else { 9 | $section.css('height','auto'); 10 | } 11 | } 12 | 13 | $(window).resize(sectionHeight); 14 | 15 | $(document).ready(function(){ 16 | $("section h1, section h2").each(function(){ 17 | $("nav ul").append("
  • " + $(this).text() + "
  • "); 18 | $(this).attr("id",$(this).text().toLowerCase().replace(/ /g, '-').replace(/[^\w-]+/g,'')); 19 | $("nav ul li:first-child a").parent().addClass("active"); 20 | }); 21 | 22 | $("nav ul li").on("click", "a", function(event) { 23 | var position = $($(this).attr("href")).offset().top - 190; 24 | $("html, body").animate({scrollTop: position}, 400); 25 | $("nav ul li a").parent().removeClass("active"); 26 | $(this).parent().addClass("active"); 27 | event.preventDefault(); 28 | }); 29 | 30 | sectionHeight(); 31 | 32 | $('img').load(sectionHeight); 33 | }); 34 | 35 | fixScale = function(doc) { 36 | 37 | var addEvent = 'addEventListener', 38 | type = 'gesturestart', 39 | qsa = 'querySelectorAll', 40 | scales = [1, 1], 41 | meta = qsa in doc ? doc[qsa]('meta[name=viewport]') : []; 42 | 43 | function fix() { 44 | meta.content = 'width=device-width,minimum-scale=' + scales[0] + ',maximum-scale=' + scales[1]; 45 | doc.removeEventListener(type, fix, true); 46 | } 47 | 48 | if ((meta = meta[meta.length - 1]) && addEvent in doc) { 49 | fix(); 50 | scales = [.25, 1.6]; 51 | doc[addEvent](type, fix, true); 52 | } 53 | }; -------------------------------------------------------------------------------- /kpi.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | title: IPTC EXTRA 4 | --- 5 | ## Key Performance Indicators 6 | 7 | The Key Performance Indicators we would track include: 8 | 9 | * Downloads of the EXTRA software 10 | * Bugs raised 11 | * Feature requests 12 | * Non-core contributions 13 | * Reports of production deployments of EXTRA by news publishers 14 | * Reports of cost savings by news publishers 15 | * Meetups organized to discuss the development or use of the EXTRA platform 16 | 17 | -------------------------------------------------------------------------------- /opensource.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | title: IPTC EXTRA 4 | --- 5 | ## Open Source 6 | 7 | By “open source”, we specifically mean software licensed under the [MIT License](https://opensource.org/licenses/MIT). 8 | 9 | Choose a License [describes](http://choosealicense.com/licenses/mit/) the MIT License as “A short and simple permissive license with conditions only requiring preservation of copyright and license notices. Licensed works, modifications, and larger works may be distributed under different terms and without source code.” 10 | 11 | Any existing software that is used as part of the EXTRA project would therefore need to be licensed using the MIT license (or something that can be easily demonstrated to be compatible). 12 | -------------------------------------------------------------------------------- /overview.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | title: IPTC EXTRA 4 | --- 5 | ## EXTRA Overview 6 | 7 | For news publishers who are dissatisfied with either hand-tagging documents or statistical approaches to automated tagging, EXTRA is an open source, rules-based, classification system for annotating news documents with high-quality subject tags, regardless of language. Such tags allow publishers to deliver a variety of valuable services including content recommendations, improved advertising targeting and subject-specific content streams, such as alerts and topic pages. 8 | 9 | Unlike hand-tagging, EXTRA’s rules-based system will allow publishers to tag their news content with consistent tags, at speed and at scale. Unlike statistical approaches, which often require numerous annotated examples, EXTRA’s rules-based system allows publishers to rapidly adapt to breaking news and low-frequency topics. EXTRA’s use of finely tuned rules will avoid problems with ambiguity (“Police Can’t Stop Gambling”) and will precisely distinguish between similar topics, which are more challenging for statistical approaches. 10 | 11 | To facilitate adoption and consistency, the IPTC will also create EXTRA extraction rules for tagging documents in two different languages with its industry standard [Media Topics](https://iptc.org/standards/media-topics/) vocabulary. 12 | -------------------------------------------------------------------------------- /params.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "EXTRA", 3 | "tagline": "An Open Source Platform for Rules-Based Classification of News Content", 4 | "body": "### Welcome to GitHub Pages.\r\nThis automatic page generator is the easiest way to create beautiful pages for all of your projects. Author your page content here [using GitHub Flavored Markdown](https://guides.github.com/features/mastering-markdown/), select a template crafted by a designer, and publish. After your page is generated, you can check out the new `gh-pages` branch locally. If you’re using GitHub Desktop, simply sync your repository and you’ll see the new branch.\r\n\r\n### Designer Templates\r\nWe’ve crafted some handsome templates for you to use. Go ahead and click 'Continue to layouts' to browse through them. You can easily go back to edit your page before publishing. After publishing your page, you can revisit the page generator and switch to another theme. Your Page content will be preserved.\r\n\r\n### Creating pages manually\r\nIf you prefer to not use the automatic generator, push a branch named `gh-pages` to your repository to create a page manually. In addition to supporting regular HTML content, GitHub Pages support Jekyll, a simple, blog aware static site generator. Jekyll makes it easy to create site-wide headers and footers without having to copy them across every page. It also offers intelligent blog support and other advanced templating features.\r\n\r\n### Authors and Contributors\r\nYou can @mention a GitHub username to generate a link to their profile. The resulting `` element will link to the contributor’s GitHub Profile. For example: In 2007, Chris Wanstrath (@defunkt), PJ Hyett (@pjhyett), and Tom Preston-Werner (@mojombo) founded GitHub.\r\n\r\n### Support or Contact\r\nHaving trouble with Pages? Check out our [documentation](https://help.github.com/pages) or [contact support](https://github.com/contact) and we’ll help you sort it out.\r\n", 5 | "note": "Don't delete this file! It's used internally to help with page regeneration." 6 | } 7 | -------------------------------------------------------------------------------- /plan.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | title: IPTC EXTRA 4 | --- 5 | ## Longer Term Plan 6 | 7 | If the EXTRA platform prototype succeeds, IPTC would seek to pursue two goals, to make the effort sustainable over the long term: 8 | 9 | * Software deployed as a service within news organizations 10 | * Vibrant open source community 11 | 12 | If one or more news organizations around the world deploys the EXTRA software, then we will have confirmed the demand for this solution to news classification. We can continue to build additional features and fix any bugs. A key goal will be to expand the example rule sets to the full set of languages supported by the IPTC Media Topics and, if there is demand, to expand the set of languages beyond English, French, Spanish and German. 13 | 14 | For the long term, IPTC would aim to build up a vibrant open source community around the software. 15 | -------------------------------------------------------------------------------- /related.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | title: IPTC EXTRA 4 | --- 5 | ## Related Work 6 | 7 | Taxonomies are used by many news organizations to classify their content. Classification is used in various ways, including to structure website navigation menus to help readers locate relevant content, to organize editorial workflows and to enrich search. [News organizations classify news items](https://www.uie.com/articles/taxonomy_content_publishing) using either automated or human means - and often a combination of the two. 8 | 9 | Some organizations, such as [The Associated Press](https://www.ap.org), [New York Times](www.nytimes.com), [Thomson Reuters](http://www.reuters.com/) and the [BBC](bbc.co.uk), have [built their own taxonomies to classify news](http://www.poynter.org/news/media-innovation/222187/how-taxonomies-help-news-organizations-understand-and-categorize-their-content). Many news organizations rely on the [IPTC’s Media Topics](https://iptc.org/standards/media-topics) as the basis of their classification of content. 10 | 11 | The IPTC taxonomies may be applied manually by journalists or by archivists, often with quite inconsistent results. For example, this study discusses [manual classification of Spanish and Portugese newspaper archives](http://ir.ii.uam.es/neptuno/publications/neptuno-esws04.pdf). 12 | 13 | There have been various attempts to automatically classify news content using IPTC taxonomies. In general, this involves software using natural language processing, semantic analysis and statistical pattern matching techniques to analyze each news item, and identify relevant metadata tags. Automated classification systems have been created for news in many languages, including [Arabic](https://vtechworks.lib.vt.edu/bitstream/handle/10919/51269/KananFoxArabicTextClassification.pdf), [English](http://nlp.lsi.upc.edu/papers/montoyo01.pdf), [Catalan and Portuguese](http://www.dfki.uni-kl.de/~bernardi/News/publication-download/SWCASE_NEWS.pdf) and [Spanish](http://link.springer.com/chapter/10.1007/978-3-540-74628-7_16#page-1). 14 | 15 | Automated classification systems require regular maintenance in order to remain relevant and up-to-date. Most classification workflows allow for manual overrides to the resulting classification, with problematic documents being set aside for further review. New content must be incorporated into existing or new categories. Subject matter experts are required to review problematic documents and to tend to the needs of the automated classification systems, to [prevent results degrading over time](http://www.computerweekly.com/feature/Data-classification-why-it-is-important-and-how-to-do-it). 16 | 17 | There are many toolkits and software systems for doing statistical classification of text content, such as [OpenNLP](http://opennlp.apache.org), [SRILM](http://www.speech.sri.com/projects/srilm) and [NLTK](http://www.nltk.org). However, none of these toolkits support the rules-based approach we plan for EXTRA. One open source toolkit that may be useful for building EXTRA is the [Elasticsearch Percolator](https://www.elastic.co/guide/en/elasticsearch/reference/current/search-percolate.html), which is designed to efficiently match queries (rules) to documents (news items). 18 | 19 | Two open source frameworks which may be useful ways to deploy EXTRA are [GATE](https://gate.ac.uk) and [UIMA](https://uima.apache.org). GATE and UIMA are designed to allow third-party components to be plugged into their standardized platforms, to make it easier for developers to discover and work with sophisticated linguistic analysis tools. 20 | -------------------------------------------------------------------------------- /roadmap.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | title: IPTC EXTRA 4 | --- 5 | ## High Level Plan for Initial Development and Rollout 6 | 7 | We envision the following phases for the design and development of EXTRA. (The phases are in likely order of execution, but may well overlap). 8 | 9 | #### Recruit EXTRA Team 10 | 11 | * Hire a developer experienced in natural language processing 12 | * Hire a linguist for writing the rules and testing the EXTRA platform 13 | * Gather Steering Committee of news publishers from IPTC and beyond 14 | 15 | #### Evaluate existing open source projects and frameworks 16 | 17 | * Survey other open source efforts to see whether any could accelerate the development of EXTRA 18 | * Including GATE, UIMA, NLTK, OpenNLP, SRILM 19 | 20 | #### Design and develop technical approach 21 | 22 | * Design high-level technical approach, select implementation technologies 23 | * Design EXTRA API for maintaining rule sets and classifying documents 24 | * Decide which two languages will be supported by the initial prototype 25 | * Assemble and annotate two test corpuses, one for each language, with desired taxonomy 26 | * Design the rule language and rule sets for applying the taxonomy to the two corpuses 27 | * Develop a minimum viable rules engine 28 | 29 | #### Setup EXTRA as an open source project 30 | 31 | * Configure source code management for EXTRA on github 32 | * Publish documentation - project overview, contribution guidelines 33 | * Draft preliminary list of requirements and features 34 | * Agree on and publish license for EXTRA 35 | * Secure twitter handles, launchpad account and domain names 36 | * Set up an EXTRA email list and an EXTRA Slack 37 | 38 | #### Develop EXTRA software and rule sets 39 | 40 | * Publicize releases of EXTRA platform and rule sets 41 | * Solicit, prioritize and implement features and bug fixes for EXTRA 42 | * Write guidebook for how to integrate EXTRA platform 43 | * Write guidebook for how to develop and test EXTRA rule sets 44 | 45 | #### First non-core open source contributor 46 | 47 | #### First production deployment 48 | -------------------------------------------------------------------------------- /stylesheets/github-dark.css: -------------------------------------------------------------------------------- 1 | /* 2 | Copyright 2014 GitHub Inc. 3 | 4 | Licensed under the Apache License, Version 2.0 (the "License"); 5 | you may not use this file except in compliance with the License. 6 | You may obtain a copy of the License at 7 | 8 | http://www.apache.org/licenses/LICENSE-2.0 9 | 10 | Unless required by applicable law or agreed to in writing, software 11 | distributed under the License is distributed on an "AS IS" BASIS, 12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | See the License for the specific language governing permissions and 14 | limitations under the License. 15 | 16 | */ 17 | 18 | .pl-c /* comment */ { 19 | color: #969896; 20 | } 21 | 22 | .pl-c1 /* constant, markup.raw, meta.diff.header, meta.module-reference, meta.property-name, support, support.constant, support.variable, variable.other.constant */, 23 | .pl-s .pl-v /* string variable */ { 24 | color: #0099cd; 25 | } 26 | 27 | .pl-e /* entity */, 28 | .pl-en /* entity.name */ { 29 | color: #9774cb; 30 | } 31 | 32 | .pl-s .pl-s1 /* string source */, 33 | .pl-smi /* storage.modifier.import, storage.modifier.package, storage.type.java, variable.other, variable.parameter.function */ { 34 | color: #ddd; 35 | } 36 | 37 | .pl-ent /* entity.name.tag */ { 38 | color: #7bcc72; 39 | } 40 | 41 | .pl-k /* keyword, storage, storage.type */ { 42 | color: #cc2372; 43 | } 44 | 45 | .pl-pds /* punctuation.definition.string, string.regexp.character-class */, 46 | .pl-s /* string */, 47 | .pl-s .pl-pse .pl-s1 /* string punctuation.section.embedded source */, 48 | .pl-sr /* string.regexp */, 49 | .pl-sr .pl-cce /* string.regexp constant.character.escape */, 50 | .pl-sr .pl-sra /* string.regexp string.regexp.arbitrary-repitition */, 51 | .pl-sr .pl-sre /* string.regexp source.ruby.embedded */ { 52 | color: #3c66e2; 53 | } 54 | 55 | .pl-v /* variable */ { 56 | color: #fb8764; 57 | } 58 | 59 | .pl-id /* invalid.deprecated */ { 60 | color: #e63525; 61 | } 62 | 63 | .pl-ii /* invalid.illegal */ { 64 | background-color: #e63525; 65 | color: #f8f8f8; 66 | } 67 | 68 | .pl-sr .pl-cce /* string.regexp constant.character.escape */ { 69 | color: #7bcc72; 70 | font-weight: bold; 71 | } 72 | 73 | .pl-ml /* markup.list */ { 74 | color: #c26b2b; 75 | } 76 | 77 | .pl-mh /* markup.heading */, 78 | .pl-mh .pl-en /* markup.heading entity.name */, 79 | .pl-ms /* meta.separator */ { 80 | color: #264ec5; 81 | font-weight: bold; 82 | } 83 | 84 | .pl-mq /* markup.quote */ { 85 | color: #00acac; 86 | } 87 | 88 | .pl-mi /* markup.italic */ { 89 | color: #ddd; 90 | font-style: italic; 91 | } 92 | 93 | .pl-mb /* markup.bold */ { 94 | color: #ddd; 95 | font-weight: bold; 96 | } 97 | 98 | .pl-md /* markup.deleted, meta.diff.header.from-file */ { 99 | background-color: #ffecec; 100 | color: #bd2c00; 101 | } 102 | 103 | .pl-mi1 /* markup.inserted, meta.diff.header.to-file */ { 104 | background-color: #eaffea; 105 | color: #55a532; 106 | } 107 | 108 | .pl-mdr /* meta.diff.range */ { 109 | color: #9774cb; 110 | font-weight: bold; 111 | } 112 | 113 | .pl-mo /* meta.output */ { 114 | color: #264ec5; 115 | } 116 | 117 | -------------------------------------------------------------------------------- /stylesheets/normalize.css: -------------------------------------------------------------------------------- 1 | /* normalize.css 2012-02-07T12:37 UTC - https://github.com/necolas/normalize.css */ 2 | /* ============================================================================= 3 | HTML5 display definitions 4 | ========================================================================== */ 5 | /* 6 | * Corrects block display not defined in IE6/7/8/9 & FF3 7 | */ 8 | article, 9 | aside, 10 | details, 11 | figcaption, 12 | figure, 13 | footer, 14 | header, 15 | hgroup, 16 | nav, 17 | section, 18 | summary { 19 | display: block; 20 | } 21 | 22 | /* 23 | * Corrects inline-block display not defined in IE6/7/8/9 & FF3 24 | */ 25 | audio, 26 | canvas, 27 | video { 28 | display: inline-block; 29 | *display: inline; 30 | *zoom: 1; 31 | } 32 | 33 | /* 34 | * Prevents modern browsers from displaying 'audio' without controls 35 | */ 36 | audio:not([controls]) { 37 | display: none; 38 | } 39 | 40 | /* 41 | * Addresses styling for 'hidden' attribute not present in IE7/8/9, FF3, S4 42 | * Known issue: no IE6 support 43 | */ 44 | [hidden] { 45 | display: none; 46 | } 47 | 48 | /* ============================================================================= 49 | Base 50 | ========================================================================== */ 51 | /* 52 | * 1. Corrects text resizing oddly in IE6/7 when body font-size is set using em units 53 | * http://clagnut.com/blog/348/#c790 54 | * 2. Prevents iOS text size adjust after orientation change, without disabling user zoom 55 | * www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/ 56 | */ 57 | html { 58 | font-size: 100%; 59 | /* 1 */ 60 | -webkit-text-size-adjust: 100%; 61 | /* 2 */ 62 | -ms-text-size-adjust: 100%; 63 | /* 2 */ 64 | } 65 | 66 | /* 67 | * Addresses font-family inconsistency between 'textarea' and other form elements. 68 | */ 69 | html, 70 | button, 71 | input, 72 | select, 73 | textarea { 74 | font-family: sans-serif; 75 | } 76 | 77 | /* 78 | * Addresses margins handled incorrectly in IE6/7 79 | */ 80 | body { 81 | margin: 0; 82 | } 83 | 84 | /* ============================================================================= 85 | Links 86 | ========================================================================== */ 87 | /* 88 | * Addresses outline displayed oddly in Chrome 89 | */ 90 | a:focus { 91 | outline: thin dotted; 92 | } 93 | 94 | /* 95 | * Improves readability when focused and also mouse hovered in all browsers 96 | * people.opera.com/patrickl/experiments/keyboard/test 97 | */ 98 | a:hover, 99 | a:active { 100 | outline: 0; 101 | } 102 | 103 | /* ============================================================================= 104 | Typography 105 | ========================================================================== */ 106 | /* 107 | * Addresses font sizes and margins set differently in IE6/7 108 | * Addresses font sizes within 'section' and 'article' in FF4+, Chrome, S5 109 | */ 110 | h1 { 111 | font-size: 2em; 112 | margin: 0.67em 0; 113 | } 114 | 115 | h2 { 116 | font-size: 1.5em; 117 | margin: 0.83em 0; 118 | } 119 | 120 | h3 { 121 | font-size: 1.17em; 122 | margin: 1em 0; 123 | } 124 | 125 | h4 { 126 | font-size: 1em; 127 | margin: 1.33em 0; 128 | } 129 | 130 | h5 { 131 | font-size: 0.83em; 132 | margin: 1.67em 0; 133 | } 134 | 135 | h6 { 136 | font-size: 0.75em; 137 | margin: 2.33em 0; 138 | } 139 | 140 | /* 141 | * Addresses styling not present in IE7/8/9, S5, Chrome 142 | */ 143 | abbr[title] { 144 | border-bottom: 1px dotted; 145 | } 146 | 147 | /* 148 | * Addresses style set to 'bolder' in FF3+, S4/5, Chrome 149 | */ 150 | b, 151 | strong { 152 | font-weight: bold; 153 | } 154 | 155 | blockquote { 156 | margin: 1em 40px; 157 | } 158 | 159 | /* 160 | * Addresses styling not present in S5, Chrome 161 | */ 162 | dfn { 163 | font-style: italic; 164 | } 165 | 166 | /* 167 | * Addresses styling not present in IE6/7/8/9 168 | */ 169 | mark { 170 | background: #ff0; 171 | color: #000; 172 | } 173 | 174 | /* 175 | * Addresses margins set differently in IE6/7 176 | */ 177 | p, 178 | pre { 179 | margin: 1em 0; 180 | } 181 | 182 | /* 183 | * Corrects font family set oddly in IE6, S4/5, Chrome 184 | * en.wikipedia.org/wiki/User:Davidgothberg/Test59 185 | */ 186 | pre, 187 | code, 188 | kbd, 189 | samp { 190 | font-family: monospace, serif; 191 | _font-family: 'courier new', monospace; 192 | font-size: 1em; 193 | } 194 | 195 | /* 196 | * 1. Addresses CSS quotes not supported in IE6/7 197 | * 2. Addresses quote property not supported in S4 198 | */ 199 | /* 1 */ 200 | q { 201 | quotes: none; 202 | } 203 | 204 | /* 2 */ 205 | q:before, 206 | q:after { 207 | content: ''; 208 | content: none; 209 | } 210 | 211 | small { 212 | font-size: 75%; 213 | } 214 | 215 | /* 216 | * Prevents sub and sup affecting line-height in all browsers 217 | * gist.github.com/413930 218 | */ 219 | sub, 220 | sup { 221 | font-size: 75%; 222 | line-height: 0; 223 | position: relative; 224 | vertical-align: baseline; 225 | } 226 | 227 | sup { 228 | top: -0.5em; 229 | } 230 | 231 | sub { 232 | bottom: -0.25em; 233 | } 234 | 235 | /* ============================================================================= 236 | Lists 237 | ========================================================================== */ 238 | /* 239 | * Addresses margins set differently in IE6/7 240 | */ 241 | dl, 242 | menu, 243 | ol, 244 | ul { 245 | margin: 1em 0; 246 | } 247 | 248 | dd { 249 | margin: 0 0 0 40px; 250 | } 251 | 252 | /* 253 | * Addresses paddings set differently in IE6/7 254 | */ 255 | menu, 256 | ol, 257 | ul { 258 | padding: 0 0 0 40px; 259 | } 260 | 261 | /* 262 | * Corrects list images handled incorrectly in IE7 263 | */ 264 | nav ul, 265 | nav ol { 266 | list-style: none; 267 | list-style-image: none; 268 | } 269 | 270 | /* ============================================================================= 271 | Embedded content 272 | ========================================================================== */ 273 | /* 274 | * 1. Removes border when inside 'a' element in IE6/7/8/9, FF3 275 | * 2. Improves image quality when scaled in IE7 276 | * code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/ 277 | */ 278 | img { 279 | border: 0; 280 | /* 1 */ 281 | -ms-interpolation-mode: bicubic; 282 | /* 2 */ 283 | } 284 | 285 | /* 286 | * Corrects overflow displayed oddly in IE9 287 | */ 288 | svg:not(:root) { 289 | overflow: hidden; 290 | } 291 | 292 | /* ============================================================================= 293 | Figures 294 | ========================================================================== */ 295 | /* 296 | * Addresses margin not present in IE6/7/8/9, S5, O11 297 | */ 298 | figure { 299 | margin: 0; 300 | } 301 | 302 | /* ============================================================================= 303 | Forms 304 | ========================================================================== */ 305 | /* 306 | * Corrects margin displayed oddly in IE6/7 307 | */ 308 | form { 309 | margin: 0; 310 | } 311 | 312 | /* 313 | * Define consistent border, margin, and padding 314 | */ 315 | fieldset { 316 | border: 1px solid #c0c0c0; 317 | margin: 0 2px; 318 | padding: 0.35em 0.625em 0.75em; 319 | } 320 | 321 | /* 322 | * 1. Corrects color not being inherited in IE6/7/8/9 323 | * 2. Corrects text not wrapping in FF3 324 | * 3. Corrects alignment displayed oddly in IE6/7 325 | */ 326 | legend { 327 | border: 0; 328 | /* 1 */ 329 | padding: 0; 330 | white-space: normal; 331 | /* 2 */ 332 | *margin-left: -7px; 333 | /* 3 */ 334 | } 335 | 336 | /* 337 | * 1. Corrects font size not being inherited in all browsers 338 | * 2. Addresses margins set differently in IE6/7, FF3+, S5, Chrome 339 | * 3. Improves appearance and consistency in all browsers 340 | */ 341 | button, 342 | input, 343 | select, 344 | textarea { 345 | font-size: 100%; 346 | /* 1 */ 347 | margin: 0; 348 | /* 2 */ 349 | vertical-align: baseline; 350 | /* 3 */ 351 | *vertical-align: middle; 352 | /* 3 */ 353 | } 354 | 355 | /* 356 | * Addresses FF3/4 setting line-height on 'input' using !important in the UA stylesheet 357 | */ 358 | button, 359 | input { 360 | line-height: normal; 361 | /* 1 */ 362 | } 363 | 364 | /* 365 | * 1. Improves usability and consistency of cursor style between image-type 'input' and others 366 | * 2. Corrects inability to style clickable 'input' types in iOS 367 | * 3. Removes inner spacing in IE7 without affecting normal text inputs 368 | * Known issue: inner spacing remains in IE6 369 | */ 370 | button, 371 | input[type="button"], 372 | input[type="reset"], 373 | input[type="submit"] { 374 | cursor: pointer; 375 | /* 1 */ 376 | -webkit-appearance: button; 377 | /* 2 */ 378 | *overflow: visible; 379 | /* 3 */ 380 | } 381 | 382 | /* 383 | * Re-set default cursor for disabled elements 384 | */ 385 | button[disabled], 386 | input[disabled] { 387 | cursor: default; 388 | } 389 | 390 | /* 391 | * 1. Addresses box sizing set to content-box in IE8/9 392 | * 2. Removes excess padding in IE8/9 393 | * 3. Removes excess padding in IE7 394 | Known issue: excess padding remains in IE6 395 | */ 396 | input[type="checkbox"], 397 | input[type="radio"] { 398 | box-sizing: border-box; 399 | /* 1 */ 400 | padding: 0; 401 | /* 2 */ 402 | *height: 13px; 403 | /* 3 */ 404 | *width: 13px; 405 | /* 3 */ 406 | } 407 | 408 | /* 409 | * 1. Addresses appearance set to searchfield in S5, Chrome 410 | * 2. Addresses box-sizing set to border-box in S5, Chrome (include -moz to future-proof) 411 | */ 412 | input[type="search"] { 413 | -webkit-appearance: textfield; 414 | /* 1 */ 415 | -moz-box-sizing: content-box; 416 | -webkit-box-sizing: content-box; 417 | /* 2 */ 418 | box-sizing: content-box; 419 | } 420 | 421 | /* 422 | * Removes inner padding and search cancel button in S5, Chrome on OS X 423 | */ 424 | input[type="search"]::-webkit-search-decoration, 425 | input[type="search"]::-webkit-search-cancel-button { 426 | -webkit-appearance: none; 427 | } 428 | 429 | /* 430 | * Removes inner padding and border in FF3+ 431 | * www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/ 432 | */ 433 | button::-moz-focus-inner, 434 | input::-moz-focus-inner { 435 | border: 0; 436 | padding: 0; 437 | } 438 | 439 | /* 440 | * 1. Removes default vertical scrollbar in IE6/7/8/9 441 | * 2. Improves readability and alignment in all browsers 442 | */ 443 | textarea { 444 | overflow: auto; 445 | /* 1 */ 446 | vertical-align: top; 447 | /* 2 */ 448 | } 449 | 450 | /* ============================================================================= 451 | Tables 452 | ========================================================================== */ 453 | /* 454 | * Remove most spacing between table cells 455 | */ 456 | table { 457 | border-collapse: collapse; 458 | border-spacing: 0; 459 | } 460 | -------------------------------------------------------------------------------- /stylesheets/styles.css: -------------------------------------------------------------------------------- 1 | /* 2 | Leap Day for GitHub Pages 3 | by Matt Graham 4 | */ 5 | @font-face { 6 | font-family: 'Quattrocento Sans'; 7 | src: url("../fonts/quattrocentosans-bold-webfont.eot"); 8 | src: url("../fonts/quattrocentosans-bold-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/quattrocentosans-bold-webfont.woff") format("woff"), url("../fonts/quattrocentosans-bold-webfont.ttf") format("truetype"), url("../fonts/quattrocentosans-bold-webfont.svg#QuattrocentoSansBold") format("svg"); 9 | font-weight: bold; 10 | font-style: normal; 11 | } 12 | 13 | @font-face { 14 | font-family: 'Quattrocento Sans'; 15 | src: url("../fonts/quattrocentosans-bolditalic-webfont.eot"); 16 | src: url("../fonts/quattrocentosans-bolditalic-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/quattrocentosans-bolditalic-webfont.woff") format("woff"), url("../fonts/quattrocentosans-bolditalic-webfont.ttf") format("truetype"), url("../fonts/quattrocentosans-bolditalic-webfont.svg#QuattrocentoSansBoldItalic") format("svg"); 17 | font-weight: bold; 18 | font-style: italic; 19 | } 20 | 21 | @font-face { 22 | font-family: 'Quattrocento Sans'; 23 | src: url("../fonts/quattrocentosans-italic-webfont.eot"); 24 | src: url("../fonts/quattrocentosans-italic-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/quattrocentosans-italic-webfont.woff") format("woff"), url("../fonts/quattrocentosans-italic-webfont.ttf") format("truetype"), url("../fonts/quattrocentosans-italic-webfont.svg#QuattrocentoSansItalic") format("svg"); 25 | font-weight: normal; 26 | font-style: italic; 27 | } 28 | 29 | @font-face { 30 | font-family: 'Quattrocento Sans'; 31 | src: url("../fonts/quattrocentosans-regular-webfont.eot"); 32 | src: url("../fonts/quattrocentosans-regular-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/quattrocentosans-regular-webfont.woff") format("woff"), url("../fonts/quattrocentosans-regular-webfont.ttf") format("truetype"), url("../fonts/quattrocentosans-regular-webfont.svg#QuattrocentoSansRegular") format("svg"); 33 | font-weight: normal; 34 | font-style: normal; 35 | } 36 | 37 | @font-face { 38 | font-family: 'Copse'; 39 | src: url("../fonts/copse-regular-webfont.eot"); 40 | src: url("../fonts/copse-regular-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/copse-regular-webfont.woff") format("woff"), url("../fonts/copse-regular-webfont.ttf") format("truetype"), url("../fonts/copse-regular-webfont.svg#CopseRegular") format("svg"); 41 | font-weight: normal; 42 | font-style: normal; 43 | } 44 | 45 | /* normalize.css 2012-02-07T12:37 UTC - https://github.com/necolas/normalize.css */ 46 | /* ============================================================================= 47 | HTML5 display definitions 48 | ========================================================================== */ 49 | /* 50 | * Corrects block display not defined in IE6/7/8/9 & FF3 51 | */ 52 | article, 53 | aside, 54 | details, 55 | figcaption, 56 | figure, 57 | footer, 58 | header, 59 | hgroup, 60 | nav, 61 | section, 62 | summary { 63 | display: block; 64 | } 65 | 66 | /* 67 | * Corrects inline-block display not defined in IE6/7/8/9 & FF3 68 | */ 69 | audio, 70 | canvas, 71 | video { 72 | display: inline-block; 73 | *display: inline; 74 | *zoom: 1; 75 | } 76 | 77 | /* 78 | * Prevents modern browsers from displaying 'audio' without controls 79 | */ 80 | audio:not([controls]) { 81 | display: none; 82 | } 83 | 84 | /* 85 | * Addresses styling for 'hidden' attribute not present in IE7/8/9, FF3, S4 86 | * Known issue: no IE6 support 87 | */ 88 | [hidden] { 89 | display: none; 90 | } 91 | 92 | /* ============================================================================= 93 | Base 94 | ========================================================================== */ 95 | /* 96 | * 1. Corrects text resizing oddly in IE6/7 when body font-size is set using em units 97 | * http://clagnut.com/blog/348/#c790 98 | * 2. Prevents iOS text size adjust after orientation change, without disabling user zoom 99 | * www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/ 100 | */ 101 | html { 102 | font-size: 100%; 103 | /* 1 */ 104 | -webkit-text-size-adjust: 100%; 105 | /* 2 */ 106 | -ms-text-size-adjust: 100%; 107 | /* 2 */ 108 | } 109 | 110 | /* 111 | * Addresses font-family inconsistency between 'textarea' and other form elements. 112 | */ 113 | html, 114 | button, 115 | input, 116 | select, 117 | textarea { 118 | font-family: sans-serif; 119 | } 120 | 121 | /* 122 | * Addresses margins handled incorrectly in IE6/7 123 | */ 124 | body { 125 | margin: 0; 126 | } 127 | 128 | /* ============================================================================= 129 | Links 130 | ========================================================================== */ 131 | /* 132 | * Addresses outline displayed oddly in Chrome 133 | */ 134 | a:focus { 135 | outline: thin dotted; 136 | } 137 | 138 | /* 139 | * Improves readability when focused and also mouse hovered in all browsers 140 | * people.opera.com/patrickl/experiments/keyboard/test 141 | */ 142 | a:hover, 143 | a:active { 144 | outline: 0; 145 | } 146 | 147 | /* ============================================================================= 148 | Typography 149 | ========================================================================== */ 150 | /* 151 | * Addresses font sizes and margins set differently in IE6/7 152 | * Addresses font sizes within 'section' and 'article' in FF4+, Chrome, S5 153 | */ 154 | h1 { 155 | font-size: 2em; 156 | margin: 0.67em 0; 157 | } 158 | 159 | h1 > a { 160 | color: #FFFFFF; 161 | } 162 | 163 | h2 { 164 | font-size: 1.5em; 165 | margin: 0.83em 0; 166 | } 167 | 168 | h3 { 169 | font-size: 1.17em; 170 | margin: 1em 0; 171 | } 172 | 173 | h4 { 174 | font-size: 1em; 175 | margin: 1.33em 0; 176 | } 177 | 178 | h5 { 179 | font-size: 0.83em; 180 | margin: 1.67em 0; 181 | } 182 | 183 | h6 { 184 | font-size: 0.75em; 185 | margin: 2.33em 0; 186 | } 187 | 188 | /* 189 | * Addresses styling not present in IE7/8/9, S5, Chrome 190 | */ 191 | abbr[title] { 192 | border-bottom: 1px dotted; 193 | } 194 | 195 | /* 196 | * Addresses style set to 'bolder' in FF3+, S4/5, Chrome 197 | */ 198 | b, 199 | strong { 200 | font-weight: bold; 201 | } 202 | 203 | blockquote { 204 | margin: 1em 40px; 205 | } 206 | 207 | /* 208 | * Addresses styling not present in S5, Chrome 209 | */ 210 | dfn { 211 | font-style: italic; 212 | } 213 | 214 | /* 215 | * Addresses styling not present in IE6/7/8/9 216 | */ 217 | mark { 218 | background: #ff0; 219 | color: #000; 220 | } 221 | 222 | /* 223 | * Addresses margins set differently in IE6/7 224 | */ 225 | p, 226 | pre { 227 | margin: 1em 0; 228 | } 229 | 230 | /* 231 | * Corrects font family set oddly in IE6, S4/5, Chrome 232 | * en.wikipedia.org/wiki/User:Davidgothberg/Test59 233 | */ 234 | pre, 235 | code, 236 | kbd, 237 | samp { 238 | font-family: monospace, serif; 239 | _font-family: 'courier new', monospace; 240 | font-size: 1em; 241 | } 242 | 243 | /* 244 | * 1. Addresses CSS quotes not supported in IE6/7 245 | * 2. Addresses quote property not supported in S4 246 | */ 247 | /* 1 */ 248 | q { 249 | quotes: none; 250 | } 251 | 252 | /* 2 */ 253 | q:before, 254 | q:after { 255 | content: ''; 256 | content: none; 257 | } 258 | 259 | small { 260 | font-size: 75%; 261 | } 262 | 263 | /* 264 | * Prevents sub and sup affecting line-height in all browsers 265 | * gist.github.com/413930 266 | */ 267 | sub, 268 | sup { 269 | font-size: 75%; 270 | line-height: 0; 271 | position: relative; 272 | vertical-align: baseline; 273 | } 274 | 275 | sup { 276 | top: -0.5em; 277 | } 278 | 279 | sub { 280 | bottom: -0.25em; 281 | } 282 | 283 | /* ============================================================================= 284 | Lists 285 | ========================================================================== */ 286 | /* 287 | * Addresses margins set differently in IE6/7 288 | */ 289 | dl, 290 | menu, 291 | ol, 292 | ul { 293 | margin: 1em 0; 294 | } 295 | 296 | dd { 297 | margin: 0 0 0 40px; 298 | } 299 | 300 | /* 301 | * Addresses paddings set differently in IE6/7 302 | */ 303 | menu, 304 | ol, 305 | ul { 306 | padding: 0 0 0 40px; 307 | } 308 | 309 | /* 310 | * Corrects list images handled incorrectly in IE7 311 | */ 312 | nav ul, 313 | nav ol { 314 | list-style: none; 315 | list-style-image: none; 316 | } 317 | 318 | /* ============================================================================= 319 | Embedded content 320 | ========================================================================== */ 321 | /* 322 | * 1. Removes border when inside 'a' element in IE6/7/8/9, FF3 323 | * 2. Improves image quality when scaled in IE7 324 | * code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/ 325 | */ 326 | img { 327 | border: 0; 328 | /* 1 */ 329 | -ms-interpolation-mode: bicubic; 330 | /* 2 */ 331 | } 332 | 333 | /* 334 | * Corrects overflow displayed oddly in IE9 335 | */ 336 | svg:not(:root) { 337 | overflow: hidden; 338 | } 339 | 340 | /* ============================================================================= 341 | Figures 342 | ========================================================================== */ 343 | /* 344 | * Addresses margin not present in IE6/7/8/9, S5, O11 345 | */ 346 | figure { 347 | margin: 0; 348 | } 349 | 350 | /* ============================================================================= 351 | Forms 352 | ========================================================================== */ 353 | /* 354 | * Corrects margin displayed oddly in IE6/7 355 | */ 356 | form { 357 | margin: 0; 358 | } 359 | 360 | /* 361 | * Define consistent border, margin, and padding 362 | */ 363 | fieldset { 364 | border: 1px solid #c0c0c0; 365 | margin: 0 2px; 366 | padding: 0.35em 0.625em 0.75em; 367 | } 368 | 369 | /* 370 | * 1. Corrects color not being inherited in IE6/7/8/9 371 | * 2. Corrects text not wrapping in FF3 372 | * 3. Corrects alignment displayed oddly in IE6/7 373 | */ 374 | legend { 375 | border: 0; 376 | /* 1 */ 377 | padding: 0; 378 | white-space: normal; 379 | /* 2 */ 380 | *margin-left: -7px; 381 | /* 3 */ 382 | } 383 | 384 | /* 385 | * 1. Corrects font size not being inherited in all browsers 386 | * 2. Addresses margins set differently in IE6/7, FF3+, S5, Chrome 387 | * 3. Improves appearance and consistency in all browsers 388 | */ 389 | button, 390 | input, 391 | select, 392 | textarea { 393 | font-size: 100%; 394 | /* 1 */ 395 | margin: 0; 396 | /* 2 */ 397 | vertical-align: baseline; 398 | /* 3 */ 399 | *vertical-align: middle; 400 | /* 3 */ 401 | } 402 | 403 | /* 404 | * Addresses FF3/4 setting line-height on 'input' using !important in the UA stylesheet 405 | */ 406 | button, 407 | input { 408 | line-height: normal; 409 | /* 1 */ 410 | } 411 | 412 | /* 413 | * 1. Improves usability and consistency of cursor style between image-type 'input' and others 414 | * 2. Corrects inability to style clickable 'input' types in iOS 415 | * 3. Removes inner spacing in IE7 without affecting normal text inputs 416 | * Known issue: inner spacing remains in IE6 417 | */ 418 | button, 419 | input[type="button"], 420 | input[type="reset"], 421 | input[type="submit"] { 422 | cursor: pointer; 423 | /* 1 */ 424 | -webkit-appearance: button; 425 | /* 2 */ 426 | *overflow: visible; 427 | /* 3 */ 428 | } 429 | 430 | /* 431 | * Re-set default cursor for disabled elements 432 | */ 433 | button[disabled], 434 | input[disabled] { 435 | cursor: default; 436 | } 437 | 438 | /* 439 | * 1. Addresses box sizing set to content-box in IE8/9 440 | * 2. Removes excess padding in IE8/9 441 | * 3. Removes excess padding in IE7 442 | Known issue: excess padding remains in IE6 443 | */ 444 | input[type="checkbox"], 445 | input[type="radio"] { 446 | box-sizing: border-box; 447 | /* 1 */ 448 | padding: 0; 449 | /* 2 */ 450 | *height: 13px; 451 | /* 3 */ 452 | *width: 13px; 453 | /* 3 */ 454 | } 455 | 456 | /* 457 | * 1. Addresses appearance set to searchfield in S5, Chrome 458 | * 2. Addresses box-sizing set to border-box in S5, Chrome (include -moz to future-proof) 459 | */ 460 | input[type="search"] { 461 | -webkit-appearance: textfield; 462 | /* 1 */ 463 | -moz-box-sizing: content-box; 464 | -webkit-box-sizing: content-box; 465 | /* 2 */ 466 | box-sizing: content-box; 467 | } 468 | 469 | /* 470 | * Removes inner padding and search cancel button in S5, Chrome on OS X 471 | */ 472 | input[type="search"]::-webkit-search-decoration, 473 | input[type="search"]::-webkit-search-cancel-button { 474 | -webkit-appearance: none; 475 | } 476 | 477 | /* 478 | * Removes inner padding and border in FF3+ 479 | * www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/ 480 | */ 481 | button::-moz-focus-inner, 482 | input::-moz-focus-inner { 483 | border: 0; 484 | padding: 0; 485 | } 486 | 487 | /* 488 | * 1. Removes default vertical scrollbar in IE6/7/8/9 489 | * 2. Improves readability and alignment in all browsers 490 | */ 491 | textarea { 492 | overflow: auto; 493 | /* 1 */ 494 | vertical-align: top; 495 | /* 2 */ 496 | } 497 | 498 | /* ============================================================================= 499 | Tables 500 | ========================================================================== */ 501 | /* 502 | * Remove most spacing between table cells 503 | */ 504 | table { 505 | border-collapse: collapse; 506 | border-spacing: 0; 507 | } 508 | 509 | body { 510 | font: 14px/22px "Quattrocento Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; 511 | color: #666; 512 | font-weight: 300; 513 | margin: 0px; 514 | padding: 0px 0 20px 0px; 515 | background: url(../images/body-background.png) #eae6d1; 516 | } 517 | 518 | h1, h2, h3, h4, h5, h6 { 519 | color: #333; 520 | margin: 0 0 10px; 521 | } 522 | 523 | p, ul, ol, table, pre, dl { 524 | margin: 0 0 20px; 525 | } 526 | 527 | h1, h2, h3 { 528 | line-height: 1.1; 529 | } 530 | 531 | h1 { 532 | font-size: 28px; 533 | } 534 | 535 | h2 { 536 | font-size: 24px; 537 | color: #393939; 538 | } 539 | 540 | h3, h4, h5, h6 { 541 | color: #666666; 542 | } 543 | 544 | h3 { 545 | font-size: 18px; 546 | line-height: 24px; 547 | } 548 | 549 | a { 550 | color: #3399cc; 551 | font-weight: 400; 552 | text-decoration: none; 553 | } 554 | 555 | a small { 556 | font-size: 11px; 557 | color: #666; 558 | margin-top: -0.6em; 559 | display: block; 560 | } 561 | 562 | ul { 563 | list-style-image: url("../images/bullet.png"); 564 | } 565 | 566 | strong { 567 | font-weight: bold; 568 | color: #333; 569 | } 570 | 571 | .wrapper { 572 | width: 650px; 573 | margin: 0 auto; 574 | position: relative; 575 | } 576 | 577 | section img { 578 | max-width: 100%; 579 | } 580 | 581 | blockquote { 582 | border-left: 1px solid #ffcc00; 583 | margin: 0; 584 | padding: 0 0 0 20px; 585 | font-style: italic; 586 | } 587 | 588 | code { 589 | font-family: "Lucida Sans", Monaco, Bitstream Vera Sans Mono, Lucida Console, Terminal; 590 | font-size: 13px; 591 | color: #efefef; 592 | text-shadow: 0px 1px 0px #000; 593 | margin: 0 4px; 594 | padding: 2px 6px; 595 | background: #333; 596 | -moz-border-radius: 2px; 597 | -webkit-border-radius: 2px; 598 | -o-border-radius: 2px; 599 | -ms-border-radius: 2px; 600 | -khtml-border-radius: 2px; 601 | border-radius: 2px; 602 | } 603 | 604 | pre { 605 | padding: 8px 15px; 606 | background: #333333; 607 | -moz-border-radius: 3px; 608 | -webkit-border-radius: 3px; 609 | -o-border-radius: 3px; 610 | -ms-border-radius: 3px; 611 | -khtml-border-radius: 3px; 612 | border-radius: 3px; 613 | border: 1px solid #c7c7c7; 614 | overflow: auto; 615 | overflow-y: hidden; 616 | } 617 | pre code { 618 | margin: 0px; 619 | padding: 0px; 620 | } 621 | 622 | table { 623 | width: 100%; 624 | border-collapse: collapse; 625 | } 626 | 627 | th { 628 | text-align: left; 629 | padding: 5px 10px; 630 | border-bottom: 1px solid #e5e5e5; 631 | color: #444; 632 | } 633 | 634 | td { 635 | text-align: left; 636 | padding: 5px 10px; 637 | border-bottom: 1px solid #e5e5e5; 638 | border-right: 1px solid #ffcc00; 639 | } 640 | td:first-child { 641 | border-left: 1px solid #ffcc00; 642 | } 643 | 644 | hr { 645 | border: 0; 646 | outline: none; 647 | height: 11px; 648 | background: transparent url("../images/hr.gif") center center repeat-x; 649 | margin: 0 0 20px; 650 | } 651 | 652 | dt { 653 | color: #444; 654 | font-weight: 700; 655 | } 656 | 657 | header { 658 | padding: 25px 20px 40px 20px; 659 | margin: 0; 660 | position: fixed; 661 | top: 0; 662 | left: 0; 663 | right: 0; 664 | width: 100%; 665 | text-align: center; 666 | background: url(../images/background.png) #4276b6; 667 | -moz-box-shadow: 1px 0px 2px rgba(0, 0, 0, 0.75); 668 | -webkit-box-shadow: 1px 0px 2px rgba(0, 0, 0, 0.75); 669 | -o-box-shadow: 1px 0px 2px rgba(0, 0, 0, 0.75); 670 | box-shadow: 1px 0px 2px rgba(0, 0, 0, 0.75); 671 | z-index: 99; 672 | -webkit-font-smoothing: antialiased; 673 | min-height: 76px; 674 | } 675 | header h1 { 676 | font: 40px/48px "Copse", "Helvetica Neue", Helvetica, Arial, sans-serif; 677 | color: #f3f3f3; 678 | text-shadow: 0px 2px 0px #235796; 679 | margin: 0px; 680 | white-space: nowrap; 681 | overflow: hidden; 682 | text-overflow: ellipsis; 683 | -o-text-overflow: ellipsis; 684 | -ms-text-overflow: ellipsis; 685 | } 686 | header p { 687 | color: #d8d8d8; 688 | text-shadow: rgba(0, 0, 0, 0.2) 0 1px 0; 689 | font-size: 18px; 690 | margin: 0px; 691 | } 692 | 693 | #banner { 694 | z-index: 100; 695 | left: 0; 696 | right: 50%; 697 | height: 50px; 698 | margin-right: -382px; 699 | position: fixed; 700 | top: 115px; 701 | background: #4a90e2; 702 | border: 1px solid #4dd2ff; 703 | -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.25); 704 | -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.25); 705 | -o-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.25); 706 | box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.25); 707 | -moz-border-radius: 0px 2px 2px 0px; 708 | -webkit-border-radius: 0px 2px 2px 0px; 709 | -o-border-radius: 0px 2px 2px 0px; 710 | -ms-border-radius: 0px 2px 2px 0px; 711 | -khtml-border-radius: 0px 2px 2px 0px; 712 | border-radius: 0px 2px 2px 0px; 713 | padding-right: 10px; 714 | } 715 | #banner .button { 716 | border: 1px solid #dba500; 717 | background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffe788), color-stop(100%, #ffce38)); 718 | background: -webkit-linear-gradient(#ffe788, #ffce38); 719 | background: -moz-linear-gradient(#ffe788, #ffce38); 720 | background: -o-linear-gradient(#ffe788, #ffce38); 721 | background: -ms-linear-gradient(#ffe788, #ffce38); 722 | background: linear-gradient(#ffe788, #ffce38); 723 | -moz-border-radius: 2px; 724 | -webkit-border-radius: 2px; 725 | -o-border-radius: 2px; 726 | -ms-border-radius: 2px; 727 | -khtml-border-radius: 2px; 728 | border-radius: 2px; 729 | -moz-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.4), 0px 1px 1px rgba(0, 0, 0, 0.1); 730 | -webkit-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.4), 0px 1px 1px rgba(0, 0, 0, 0.1); 731 | -o-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.4), 0px 1px 1px rgba(0, 0, 0, 0.1); 732 | box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.4), 0px 1px 1px rgba(0, 0, 0, 0.1); 733 | background-color: #FFE788; 734 | margin-left: 5px; 735 | padding: 10px 12px; 736 | margin-top: 6px; 737 | line-height: 14px; 738 | font-size: 14px; 739 | color: #333; 740 | font-weight: bold; 741 | display: inline-block; 742 | text-align: center; 743 | } 744 | #banner .button:hover { 745 | background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffe788), color-stop(100%, #ffe788)); 746 | background: -webkit-linear-gradient(#ffe788, #ffe788); 747 | background: -moz-linear-gradient(#ffe788, #ffe788); 748 | background: -o-linear-gradient(#ffe788, #ffe788); 749 | background: -ms-linear-gradient(#ffe788, #ffe788); 750 | background: linear-gradient(#ffe788, #ffe788); 751 | background-color: #ffeca0; 752 | } 753 | #banner .fork { 754 | position: fixed; 755 | left: 50%; 756 | margin-left: -325px; 757 | padding: 10px 12px; 758 | margin-top: 6px; 759 | line-height: 14px; 760 | font-size: 14px; 761 | background-color: #FFE788; 762 | } 763 | #banner .downloads { 764 | float: right; 765 | margin: 0 45px 0 0; 766 | } 767 | #banner .downloads span { 768 | float: left; 769 | line-height: 52px; 770 | font-size: 90%; 771 | color: #9d7f0d; 772 | text-transform: uppercase; 773 | text-shadow: rgba(255, 255, 255, 0.2) 0 1px 0; 774 | } 775 | #banner ul { 776 | list-style: none; 777 | height: 40px; 778 | padding: 0; 779 | float: left; 780 | margin-left: 10px; 781 | } 782 | #banner ul li { 783 | display: inline; 784 | } 785 | #banner ul li a.button { 786 | background-color: #FFE788; 787 | } 788 | #banner #logo { 789 | position: absolute; 790 | height: 36px; 791 | width: 36px; 792 | right: 7px; 793 | top: 7px; 794 | display: block; 795 | background: url(../images/octocat-logo.png); 796 | } 797 | 798 | section { 799 | width: 590px; 800 | padding: 30px 30px 50px 30px; 801 | margin: 20px 0; 802 | margin-top: 190px; 803 | position: relative; 804 | background: #fbfbfb; 805 | -moz-border-radius: 3px; 806 | -webkit-border-radius: 3px; 807 | -o-border-radius: 3px; 808 | -ms-border-radius: 3px; 809 | -khtml-border-radius: 3px; 810 | border-radius: 3px; 811 | border: 1px solid #cbcbcb; 812 | -moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.09), inset 0px 0px 2px 2px rgba(255, 255, 255, 0.5), inset 0 0 5px 5px rgba(255, 255, 255, 0.4); 813 | -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.09), inset 0px 0px 2px 2px rgba(255, 255, 255, 0.5), inset 0 0 5px 5px rgba(255, 255, 255, 0.4); 814 | -o-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.09), inset 0px 0px 2px 2px rgba(255, 255, 255, 0.5), inset 0 0 5px 5px rgba(255, 255, 255, 0.4); 815 | box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.09), inset 0px 0px 2px 2px rgba(255, 255, 255, 0.5), inset 0 0 5px 5px rgba(255, 255, 255, 0.4); 816 | } 817 | 818 | small { 819 | font-size: 12px; 820 | } 821 | 822 | nav { 823 | width: 230px; 824 | position: fixed; 825 | top: 220px; 826 | left: 50%; 827 | margin-left: -580px; 828 | text-align: right; 829 | } 830 | nav ul { 831 | list-style: none; 832 | list-style-image: none; 833 | font-size: 14px; 834 | line-height: 24px; 835 | } 836 | nav ul li { 837 | padding: 5px 0px; 838 | line-height: 16px; 839 | } 840 | nav ul li.tag-h1 { 841 | font-size: 1.2em; 842 | } 843 | nav ul li.tag-h1 a { 844 | font-weight: bold; 845 | color: #333; 846 | } 847 | nav ul li.tag-h2 + .tag-h1 { 848 | margin-top: 10px; 849 | } 850 | nav ul a { 851 | color: #666; 852 | } 853 | nav ul a:hover { 854 | color: #999; 855 | } 856 | 857 | footer { 858 | width: 180px; 859 | position: fixed; 860 | left: 50%; 861 | margin-left: -530px; 862 | bottom: 20px; 863 | text-align: right; 864 | line-height: 16px; 865 | } 866 | 867 | @media print, screen and (max-width: 1060px) { 868 | div.wrapper { 869 | width: auto; 870 | margin: 0; 871 | } 872 | 873 | nav { 874 | display: none; 875 | } 876 | 877 | header, section, footer { 878 | float: none; 879 | } 880 | header h1, section h1, footer h1 { 881 | white-space: nowrap; 882 | overflow: hidden; 883 | text-overflow: ellipsis; 884 | -o-text-overflow: ellipsis; 885 | -ms-text-overflow: ellipsis; 886 | } 887 | 888 | #banner { 889 | width: 100%; 890 | } 891 | #banner .downloads { 892 | margin-right: 60px; 893 | } 894 | #banner #logo { 895 | margin-right: 15px; 896 | } 897 | 898 | section { 899 | border: 1px solid #e5e5e5; 900 | border-width: 1px 0; 901 | padding: 20px auto; 902 | margin: 190px auto 20px; 903 | max-width: 600px; 904 | } 905 | 906 | footer { 907 | text-align: center; 908 | margin: 20px auto; 909 | position: relative; 910 | left: auto; 911 | bottom: auto; 912 | width: auto; 913 | } 914 | } 915 | @media print, screen and (max-width: 720px) { 916 | body { 917 | word-wrap: break-word; 918 | } 919 | 920 | header { 921 | padding: 20px 20px; 922 | margin: 0; 923 | } 924 | header h1 { 925 | font-size: 32px; 926 | white-space: nowrap; 927 | overflow: hidden; 928 | text-overflow: ellipsis; 929 | -o-text-overflow: ellipsis; 930 | -ms-text-overflow: ellipsis; 931 | } 932 | header p { 933 | display: none; 934 | } 935 | 936 | #banner { 937 | top: 80px; 938 | } 939 | #banner .fork { 940 | float: left; 941 | display: inline-block; 942 | margin-left: 0px; 943 | position: fixed; 944 | left: 20px; 945 | } 946 | 947 | section { 948 | margin-top: 130px; 949 | margin-bottom: 0px; 950 | width: auto; 951 | } 952 | 953 | header ul, header p.view { 954 | position: static; 955 | } 956 | } 957 | @media print, screen and (max-width: 480px) { 958 | header { 959 | position: relative; 960 | padding: 5px 0px; 961 | min-height: 0px; 962 | } 963 | header h1 { 964 | font-size: 24px; 965 | white-space: nowrap; 966 | overflow: hidden; 967 | text-overflow: ellipsis; 968 | -o-text-overflow: ellipsis; 969 | -ms-text-overflow: ellipsis; 970 | } 971 | 972 | section { 973 | margin-top: 5px; 974 | } 975 | 976 | #banner { 977 | display: none; 978 | } 979 | 980 | header ul { 981 | display: none; 982 | } 983 | } 984 | @media print { 985 | body { 986 | padding: 0.4in; 987 | font-size: 12pt; 988 | color: #444; 989 | } 990 | } 991 | @media print, screen and (max-height: 680px) { 992 | footer { 993 | text-align: center; 994 | margin: 20px auto; 995 | position: relative; 996 | left: auto; 997 | bottom: auto; 998 | width: auto; 999 | } 1000 | } 1001 | @media print, screen and (max-height: 480px) { 1002 | nav { 1003 | display: none; 1004 | } 1005 | 1006 | footer { 1007 | text-align: center; 1008 | margin: 20px auto; 1009 | position: relative; 1010 | left: auto; 1011 | bottom: auto; 1012 | width: auto; 1013 | } 1014 | } 1015 | --------------------------------------------------------------------------------