@knight-lab/timelinejs 3.8.15 → 3.8.19

package/API.md

@@ -38,7 +38,7 @@ timeline.on(event_name, function(data) {
 
 `dataloaded` _after data has been loaded_
 
-`hash_updated` _when the hashbookmack in the url bar is updated_
+`hash_updated` _when the hashbookmark in the url bar is updated_
 
 * unique_id:  string, id of the new current slide
 * hashbookmark: string, the hash
@@ -146,4 +146,3 @@ timeline.on(event_name, function(data) {
     "unique_id":         <string>    // optional
 };
 ```
-

package/{CHANGELOG → CHANGELOG.md}

@@ -1,109 +1,158 @@
+3.8.19 (2022-01-07)
+------------------
+* #724 - Alternate syntax for compatibility with Vite, probably other tooling.
+
+3.8.18 (2021-06-08)
+------------------
+* #699 - remove duplicate definition of _onStorySliderLoaded in Timeline.js
+* #700 - remove duplicate definition of _onTimeNavLoaded in Timeline.js
+* #705 - Export Timeline class and include generated CSS in npm package
+
+3.8.17 (2021-04-19)
+------------------
+* #696 - implement pause on audio/video media types
+* Add support for direct webm video URLs
+* Update several npm dependencies
+
+3.8.16 (2021-04-02)
+------------------
+* Add hash change listener so that timelines with `hash_bookmark` option respond to hash changes after loading. (#692)
+
 3.8.15 (2021-02-17)
+------------------
 * Fix straggling JSON syntax error in en.json example file.
 * Fix bug introduced with cosmological date formatting to do with inconsistencies between Language.js and en.json
 
 3.8.14 (2021-02-14)
+------------------
 * Make en.json proper JSON (remove comments) now that new codepath is causing it to be DOMContentLoaded
 * Add better error handling to Net.js just in case.
 * Resolve not to release code on Friday afternoon
 
 3.8.13 (2021-02-12)
+------------------
 * #682: adjust language loading to make sure its done before drawing timeline.
 
 3.8.12 (2021-01-25)
+------------------
 * #363,670: remove synchronous XMLHttpRequests
 * #672: support Spotify podcasts
 * #649: better handling of a/href tags to open in new windows, or to follow specified target values
 
 3.8.11 (2020-11-23)
+------------------
 * Improve error messaging re issues retrieving configuration data from Google.
 
 3.8.10 (2020-11-03)
+------------------
 * Change Instagram handling to catch up to their API changes. (#664)
 
 3.8.9 (2020-10-23)
+------------------
 * Fix pattern matching and URL parsing for using Google Drive documents.
 * Adjust rules for loading font to support relative/fragment URLs for `font` config option
 
 3.8.8 (2020-10-20)
+------------------
 * fix error in TL.lookupMediaType  
 
 3.8.7 (2020-10-20) INVALID RELEASE DO NOT USE
+------------------
 * clearer error messaging if time is used without date
 * strip all whitespace from both ends of header cells
 * expose TL.lookupMediaType as a publicly accessible function (formerly TL.MediaType before 3.7.0)
 
 3.8.6 (2020-09-29)
+------------------
 * #659: Prevent blank column headers from derailing Timeline load
 
 3.8.5 (2020-09-28)
+------------------
 * check for null when validating date inputs from CSV
 
 3.8.4 (2020-09-28)
+------------------
 * #655: treat all-whitespace Google Sheets values as blank and don't try to process them
 * #656: chomp excess whitespace around header values/object keys.
 * #658: clean integer values for dates -- strip whitespace and comma
 
 3.8.3 (2020-09-25)
+------------------
 * Make CSV parser always return strings (fixes bug where V1 Sheets with year-only dates were assumed to be strings)
 * Log instead of throw error when trying to add an event in TimelineConfig that has no start date
 
 3.8.2 (2020-09-25)
+------------------
 * Fix a bug in ConfigFactory date processing which was adding unintended "January 1, 0" end dates.
 
 3.8.1 (2020-09-23)
+------------------
 * Change Timeline's Google Sheets access method in advance of the discontinuation of Google Sheets API v3. See https://knightlab.northwestern.edu/2020/09/16/timelinejs-update-2/index.html for more information. All self-hosted timeline users should update to this version before 2020-09-30.
 
 3.8.0 (2020-09-23)
+------------------
 * Discarded release: failed to merge key changes into master branch.
 
 3.7.9 (2020-09-17)
+------------------
 * #654: Attempt to avoid 'overlapping' slides. Mixed feedback on if this is a complete solution.
 
 3.7.8 (2020-09-02)
+------------------
 * #651: Restore document loading check with proper binding
 
 3.7.7 (2020-08-26)
+------------------
 * #651: rollback document loading check after error reports
 
 3.7.6 (2020-08-25)
+------------------
 * Add a check of the document's loading status, and defer layout until DOMContentLoaded, in response to reports of timelines where all slide content overlaps.
 * Introduce a 'ready' event, which TimelineJS will fire after all other initialization is complete.
 * Support a Timeline option, `soundcite`, which triggers the loading of Knight Lab's SoundciteJS code, enabling the use of SoundCite markup in all HTML-capable Timeline fields.
 * Fix error messages in Imgur media type
 
 3.7.5 (2020-07-22)
+------------------
 * More fixes to handling default font case
 * add missing import for Wistia media type
 
 3.7.4 (2020-07-21)
+------------------
 * Fix #645: restore removeId to public API for a Timeline
 * Fix: only load font.default.css when no other font is specified; otherwise
        cascade rules are inconsistent with old behavior.
 
 3.7.3 (2020-07-16)
+------------------
 * Fix stupid bugs introduced with incomplete testing.
 
 3.7.2 (2020-07-16)
+------------------
 * Fix variable naming error when handling thrown exceptions in adding eras
 * Fix name of div in developer "embed" template to restore ability to switch data source for dev view
 * don't routinely sanitize media URLs; instead, place that responsibility on Media subclasses for which the 'url' is actually used with markup
 
 3.7.1 (2020-07-10)
+------------------
 * Protect against undefined/null options in constructor
 * Pass a valid message container for 'swipe to navigate' #644
 
 3.7.0 (2020-07-09)
+------------------
 * Internal rewrite to use modern JavaScript
 * Sanitize HTML inputs
 
 3.6.6 (2020-03-11)
+------------------
 * Replace Flickr API key
 
 3.6.5 (2019-05-01)
+------------------
 * Revert construction of Google feeds URL to pre-3.6.4 pattern which should be more universally correct.
 
 3.6.4 (2019-04-30)
+------------------
 * Fall back to Google Sheets API v4 when 500 error found using v3 (Workaround for Google API failure)
 * Issue #598 - use 24-hr time for Portuguese
 * PR #599 allow text selection on all devices
@@ -111,29 +160,37 @@
 * PR #609 fixes #577 link hover on slides w/ background images
 
 3.6.2 (2018-12-20)
+------------------
 * PR #592 adds missing woff2 font to fix nav arrows on MS Edge
 * PR #594 Updated Czech (Čeština) translations
 
 3.6.1 (2018-10-10)
+------------------
 * Correct translation of "July" in Slovenian.
 
 3.6.0 (2018-06-11)
+------------------
 * Configure Google Analytics tracking to anonymize_ip for GDPR compliance
 
 3.5.4 (2017-12-15)
+------------------
 * PR #331 fixes bug that was causing duplications of groups
 * Fix to allow missing media in JSON #565
 
 3.5.3 (2017-11-07)
+------------------
 * Remove 1px offset that causes white line along top of Timeline
 
 3.5.2 (2017-10-26)
+------------------
 * PR #554 adds direction to .tl-rtl
 
 3.5.1 (2017-05-03)
+------------------
 * PR #522 use https in wistia
 
 3.5.0 (2017-05-03)
+------------------
 * PR #510 Twitter image support
 * PR #520, #515 Imgur image support
 * PR #514 Wistia video support (URL only)
@@ -141,6 +198,7 @@
 
 3.4.9 (2017-04-10)
 ------------------
+------------------
 * PR #468 support audio and video files (.mp4, .mp3, .wav, .m4a)
 * PR #460 improve spotify documentation and support album and artist pages
 * PR #454 use the `lang` attribute set in the embed url as the lang for the iframe
@@ -148,24 +206,28 @@
 
 3.4.8 (2017-03-31)
 ------------------
+------------------
 * Fix missing accent in French translation
 * Add additional Thai translation
 
 3.4.7 (2016-01-12)
+------------------
 * PR #447 Enable Vimeo fullscreen controls
 
 3.4.6 (2016-12-12)
+------------------
 * Revert PR #387 which was causing slide cutoff on small screens
 
 3.4.5 (2016-12-07)
+------------------
 * PR #428 - Reinstate table display for IE. #427
 
 3.4.3 (2016-11-15)
-------------------------
+------------------
 * Revert PR #374, reopen #277. Fix left black bar across full screen timelines.
 
 3.4.2 (2016-11-15)
-------------------------
+------------------
 * PR #374 - Adds margin-top for large screen disply. Fixes #277
 * PR #401 - Adds Vietnamese translation
 * PR #419 - Removes year zero from the timeline. Fixes #328
@@ -173,16 +235,16 @@
 * PR #389 - Adds YouTube end-time feature. #388
 
 3.4.1 (2016-10-04)
-------------------------
+------------------
 * PR #400 - pause Vine, DailyMotion, and Soundcloud media on slide exit (thanks @Hammman and @JustaBitDope)
 * PR #413 - French language support additions
 
 3.4.0 (2016-08-30)
--------------------------
+-------------------
 * Complete (?) RTL language support, removed Urdu Unicode translation bugs
 
 3.3.17 (2016-08-22)
--------------------------
+-------------------
 * #372 Italian translation for "Swipe to Navigate"
 * #376 Throw an error if URL is neither a Google Spreadsheet nor a source of parseable JSON
 * Chinese (traditional) (zh-cn) translation for "Swipe to Navigate"
@@ -190,18 +252,18 @@
 * added Burmese translation
 
 3.3.16 (2016-05-31)
--------------------------
+-------------------
 * #365 Scope vcard styles to avoid impacting pages which embed timelines without iframe
 * #366 Fix headline problem with <p> tag
 
 3.3.15 (2016-05-11)
--------------------------
+-------------------
 * Apply MediaType handling to thumbnails for the slider, so that people can use the same kinds of urls they use for regular media.
 * Establish correct indication of "BCE" in Swedish.
 * Establish correct indication of "BYA" abbreviations in Finnish and Hungarian.
 
 3.3.14 (2016-03-22)
--------------------------
+-------------------
 * Fix bug in handling imgur URLs which were to an imgur page and not directly to an image.
 
 3.3.13 (2016-02-25)

package/DEPLOYING.md

@@ -13,6 +13,8 @@ To deploy the website, or updates to the Wordpress plugin, you must have local c
 
 ## Deploying changes to the JavaScript
 
+Before beginning to deploy, make sure all changes are thoroughly tested. Update CHANGELOG to track changes and establish the release date for the version. Update package.json to the new version number.
+
 Deploying the JavaScript library uses `npm` scripts defined in `package.json`. To deploy to the Knight Lab CDN, use the following scripts:
 
 * npm run stage
@@ -21,6 +23,8 @@ Deploying the JavaScript library uses `npm` scripts defined in `package.json`. T
 
 To stage a new release of TimelineJS, use `npm run stage_latest`. This will ask you for a version number (tag), build the code, and copy it to the appropriate versioned subdirectory of the `cdn.knightlab.com` repository, as well as copying it to the `/latest/` directory.  In the rare case when you want to tag a version, but not change `latest`, use `npm run stage` although then copying that to `/latest/` is outside the scope of these tools. 
 
+When a new version is deployed to the CDN, it should also be published to the npmjs repository. Do this by running `npm publish`.
+
 > **Note:** this does *not* deploy the new code. There is one more step--you must switch to the CDN repository, commit the new code, and deploy the repository.
 
 ### Updating the Wordpress plugin

package/README.md

@@ -5,36 +5,38 @@ TimelineJS v3: A Storytelling Timeline built in JavaScript.  https://timeline.kn
 
 ## Overview
 
-TimelineJS 3 is a rewrite of the popular Timeline JS software. Please be clear that this is software which "does" the same thing, but it isn't the same software, so some details will vary. See https://timeline.knightlab.com for more information.
+TimelineJS is a tool designed to help people with minimal technical skill tell rich, dynamic stories on the web. Most people will create timelines using the [official authoring tool](http://timeline.knightlab.com/#make) and embed their creations using a snip of HTML code offered at the end of that process. 
 
-## Contributing to TimelineJS
-Are you trying to contribute to or develop TimelineJS3? [Here's where you should start.](https://github.com/NUKnightLab/TimelineJS3/blob/master/CONTRIBUTING.md)
-
-## Getting Started
+For users of these content management systems (CMSes), there are plugins to facilitate the embedding process:
 
-The [official documentation for embedding a Timeline in your page instead of using an embed](https://timeline.knightlab.com/docs/instantiate-a-timeline.html) is now maintained on the main TimelineJS website.
+* [Wordpress](https://wordpress.org/plugins/knight-lab-timelinejs/)
+* [MediaWiki](https://www.mediawiki.org/wiki/Extension:Modern_Timeline)
+* [Drupal](https://www.drupal.org/docs/8/modules/views-timelinejs)
 
 
-## Options
+## Getting Started
 
-The [official documentation for configuration options](https://timeline.knightlab.com/docs/options.html) is now maintained on the main TimelineJS website.
+General users of TimelineJS should consult [timeline.knightlab.com](https://timeline.knightlab.com) for instructions and documentation. Information on GitHub is primarily directed at those who are interested in working with the TimelineJS source code.
 
+The [authoritative documentation list](https://timeline.knightlab.com/docs/) is also on the main website, but here are some direct links which may be useful:
 
-## Data file
-The [official documentation for the JSON format](https://timeline.knightlab.com/docs/json-format.html) is now maintained on the main TimelineJS website.
+* [Available media types](https://timeline.knightlab.com/docs/media-types.html), relevant to users of any technical level
+* [Instantiate a Timeline in your page instead of using an embed](https://timeline.knightlab.com/docs/instantiate-a-timeline.html)
+* [Configuration options](https://timeline.knightlab.com/docs/options.html) (for more technical users)
+* [JSON configuration file format](https://timeline.knightlab.com/docs/json-format.html) for those who prefer not to use Google Sheets
 
+## Contributing to TimelineJS
+Are you trying to contribute to or develop TimelineJS3? [Here's where you should start.](https://github.com/NUKnightLab/TimelineJS3/blob/master/CONTRIBUTING.md)
 
 ## API
-See API doc here: https://github.com/NUKnightLab/TimelineJS3/blob/master/API.md
-
-## Media Types
 
-The [official documentation for available media types](https://timeline.knightlab.com/docs/media-types.html) is now maintained on the main TimelineJS website.
+For users who instantiate a timeline in a page (as opposed to using the iframe embed model), [this page](https://github.com/NUKnightLab/TimelineJS3/blob/master/API.md) roughly documents TimelineJS's JavaScript API, but note that because TimelineJS's primary use case is the embedded iframe, some of these methods have not been thoroughly tested.
 
+## Use via ES6 modules/webpack
 
+To use in a project that uses ES6 modules and webpack, import the `Timeline` class and the CSS as follows
 
-### Extending Media Types
-* Create a new class for the media type in `source/js/media/type`. It's easiest to duplicate an existing one and change the filename and classname.
-* Add the new file to the code-kit compile list inside the main `TL.Timeline.js` file. Code-kit uses the following language to prepend the file to the compile `// @codekit-prepend "media/types/TL.Media.YourMediaTypeName.js";`
-* Add a new object to the `media_types` array in `source/js/media/TL.MediaType.js`. Make sure to have the correct class name in `cls` and use `match_str` as a regex to help timeline figure out what type of media the given url is.
-* If you want icons for the media to show up in the Timeline, then you will also need to add an icon class to `source/less/icons/Icons.less` that has the name `.tl-icon-yourmediatypename`.
+```js
+import { Timeline } from '@knight-lab/timelinejs';
+import '@knight-lab/timelinejs/dist/css/timeline.css';
+```

package/RELEASING.md

@@ -1,13 +1,13 @@
-# Steps to cut a new release of the TimelineJS JavaScript lbirary
+# Steps to cut a new release of the TimelineJS JavaScript library
 
 The primary action for "releasing" TimelineJS is pushing a new version to `cdn.knightlab.com` but as of mid-2020, we also publish new versions to the `npmjs` package registry.
 
-1. Before cutting a release, test thoroughly. Is this an opportunity to add new unit tests? Develop functional testing? If nothing else, `npm run compare` provides a way to see how some historical timelines would function with the new code.
+1. Before cutting a release, test thoroughly. Is this an opportunity to add new unit tests? Develop functional testing? If nothing else, `npm run compare` provides a way to see how some historical timelines would function with the new code. (Note that because of Google Sheets API changes, compare now compares back to the oldest release in the 3.8.x series instead of the pre-webpack version)
 1. Update `package.json` to have the correct version.
 1. Update `CHANGELOG` to indicate the release date. Hopefully you've been incrementally updating the file with relevant changes so that this is just editing the version "header"
 1. Push all changes to GitHub
-1. Execute `npm publish` (permissions required)
 1. Execute `npm run stage_latest`, which creates both a versioned edition of the library and a copy of it in the `/latest/` directory of the CDN repository.
+1. Execute `npm publish` (permissions required)
 1. Change directories to the local copy of the `cdn.knightlab.com` repository, to which files were copied by the previous step
 1. `git add app/libs/timeline3` to add the new version and updated `latest` to Git
 1. Commit those changes with a message like "TimelineJS 3.x.x"
@@ -29,4 +29,4 @@ The Wordpress plugin bundles the TimelineJS code, so when a new version of the l
 
 
 
-Note that releases of the JavaScript library are independent from updates to `timeline.knightlab.com`, which is deployed 
+Note that releases of the JavaScript library are independent from updates to `timeline.knightlab.com`, which is deployed using `fab deploy:prd` in the python environment. 

package/dist/css/fonts/font.abril-droidsans.css

@@ -0,0 +1,143 @@
+/*	Font Abril Fatface & Droid Sans
+
+https://www.google.com/fonts/specimen/Abril+Fatface
+https://www.google.com/fonts/specimen/Droid+Sans
+----------------------------------------------------- */
+/*	VARIABLES
+	BASE
+----------------------------------------------------- */
+/* ICON PATH
+================================================== */
+/* TYPEFACE
+================================================== */
+/* COLOR SCHEME
+================================================== */
+/* UI COLOR
+================================================== */
+/* UI
+================================================== */
+/* Animation
+================================================== */
+/* GFX
+================================================== */
+@font-face {
+  font-family: 'Abril Fatface';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/abrilfatface/v12/zOL64pLDlL1D99S8g8PtiKchq-dmiA.ttf) format('truetype');
+}
+@font-face {
+  font-family: 'Droid Sans';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/droidsans/v12/SlGVmQWMvZQIdix7AFxXkHNSaA.ttf) format('truetype');
+}
+@font-face {
+  font-family: 'Droid Sans';
+  font-style: normal;
+  font-weight: 700;
+  src: url(https://fonts.gstatic.com/s/droidsans/v12/SlGWmQWMvZQIdix7AFxXmMh3eDs1Yg.ttf) format('truetype');
+}
+/*	Font Base
+----------------------------------------------------- */
+.tl-timeline {
+  font-family: 'Droid Sans', sans-serif;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 1.3em;
+}
+.tl-timeline h1,
+.tl-timeline h2,
+.tl-timeline h3,
+.tl-timeline h4,
+.tl-timeline h5,
+.tl-timeline h6 {
+  font-family: 'Abril Fatface', cursive;
+  text-transform: none;
+  font-weight: 700;
+  font-size: 46px;
+  line-height: 46px;
+}
+.tl-timeline h2.tl-headline-title {
+  font-size: 58px;
+  line-height: 58px;
+}
+.tl-timeline p {
+  font-family: 'Droid Sans', sans-serif;
+  font-size: 16px;
+  line-height: 1.3em;
+}
+.tl-timeline ul {
+  font-family: 'Droid Sans', sans-serif;
+}
+.tl-timeline .tl-media .tl-media-wikipedia h4 a,
+.tl-timeline .tl-media h4,
+.tl-timeline .tl-media h4 a {
+  font-family: 'Droid Sans', sans-serif;
+  font-weight: 700;
+  font-size: 24px;
+  line-height: 24px;
+}
+.tl-timeline .tl-caption,
+.tl-timeline .tl-credit {
+  font-family: 'Droid Sans', sans-serif;
+}
+.tl-timeline .vcard {
+  font-family: 'Droid Sans', sans-serif !important;
+  font-weight: normal !important;
+}
+.tl-timeline .tl-slidenav-next,
+.tl-timeline .tl-slidenav-previous,
+.tl-timeline .tl-message,
+.tl-timeline .tl-timegroup-message {
+  font-family: 'Droid Sans', sans-serif;
+  font-weight: 700;
+  text-transform: none;
+}
+.tl-timeline .tl-slidenav-next .tl-slidenav-title,
+.tl-timeline .tl-slidenav-previous .tl-slidenav-title,
+.tl-timeline .tl-message .tl-slidenav-title,
+.tl-timeline .tl-timegroup-message .tl-slidenav-title {
+  line-height: 1.3em !important;
+}
+.tl-timeline .tl-headline-date,
+.tl-timeline h3.tl-headline-date {
+  font-family: 'Droid Sans', sans-serif !important;
+  font-weight: normal !important;
+  text-transform: none !important;
+}
+.tl-timeline .tl-headline-date small,
+.tl-timeline h3.tl-headline-date small {
+  font-weight: normal !important;
+}
+.tl-timeline .tl-timenav-slider {
+  font-family: 'Droid Sans', sans-serif;
+  font-weight: 700;
+}
+.tl-timeline .tl-timenav-slider h2.tl-headline {
+  font-family: 'Droid Sans', sans-serif;
+  font-weight: 700;
+  text-transform: none;
+}
+.tl-timeline .tl-timenav-slider .tl-timeaxis {
+  font-family: 'Droid Sans', sans-serif;
+  font-weight: 700;
+  text-transform: none;
+}
+.tl-timeline .tl-menubar {
+  font-family: 'Droid Sans', sans-serif;
+}
+.tl-timeline blockquote,
+.tl-timeline blockquote p {
+  font-family: 'Droid Sans', sans-serif;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 1.3;
+}
+input[type="text"].editor-headline {
+  font-family: 'Abril Fatface', cursive;
+  text-transform: none;
+  font-weight: 700;
+  font-size: 46px;
+  line-height: 46px;
+}

package/dist/css/fonts/font.amatic-andika.css

@@ -0,0 +1,143 @@
+/*	Font Amatic & Andika
+
+https://www.google.com/fonts/specimen/Amatic+SC
+https://www.google.com/fonts/specimen/Andika
+----------------------------------------------------- */
+/*	VARIABLES
+	BASE
+----------------------------------------------------- */
+/* ICON PATH
+================================================== */
+/* TYPEFACE
+================================================== */
+/* COLOR SCHEME
+================================================== */
+/* UI COLOR
+================================================== */
+/* UI
+================================================== */
+/* Animation
+================================================== */
+/* GFX
+================================================== */
+@font-face {
+  font-family: 'Amatic SC';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/amaticsc/v16/TUZyzwprpvBS1izr_vOECuSa.ttf) format('truetype');
+}
+@font-face {
+  font-family: 'Amatic SC';
+  font-style: normal;
+  font-weight: 700;
+  src: url(https://fonts.gstatic.com/s/amaticsc/v16/TUZ3zwprpvBS1izr_vOMscGKfrUH.ttf) format('truetype');
+}
+@font-face {
+  font-family: 'Andika';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/andika/v12/mem_Ya6iyW-LwqgwarYV.ttf) format('truetype');
+}
+/*	Font Base
+----------------------------------------------------- */
+.tl-timeline {
+  font-family: 'Andika', sans-serif;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 1.3em;
+}
+.tl-timeline h1,
+.tl-timeline h2,
+.tl-timeline h3,
+.tl-timeline h4,
+.tl-timeline h5,
+.tl-timeline h6 {
+  font-family: 'Amatic SC', cursive;
+  text-transform: none;
+  font-weight: 700;
+  font-size: 64px;
+  line-height: 64px;
+}
+.tl-timeline h2.tl-headline-title {
+  font-size: 86px;
+  line-height: 86px;
+}
+.tl-timeline p {
+  font-family: 'Andika', sans-serif;
+  font-size: 16px;
+  line-height: 1.3em;
+}
+.tl-timeline ul {
+  font-family: 'Andika', sans-serif;
+}
+.tl-timeline .tl-media .tl-media-wikipedia h4 a,
+.tl-timeline .tl-media h4,
+.tl-timeline .tl-media h4 a {
+  font-family: 'Andika', sans-serif;
+  font-weight: 700;
+  font-size: 24px;
+  line-height: 24px;
+}
+.tl-timeline .tl-caption,
+.tl-timeline .tl-credit {
+  font-family: 'Andika', sans-serif;
+}
+.tl-timeline .vcard {
+  font-family: 'Andika', sans-serif !important;
+  font-weight: normal !important;
+}
+.tl-timeline .tl-slidenav-next,
+.tl-timeline .tl-slidenav-previous,
+.tl-timeline .tl-message,
+.tl-timeline .tl-timegroup-message {
+  font-family: 'Andika', sans-serif;
+  font-weight: 700;
+  text-transform: none;
+}
+.tl-timeline .tl-slidenav-next .tl-slidenav-title,
+.tl-timeline .tl-slidenav-previous .tl-slidenav-title,
+.tl-timeline .tl-message .tl-slidenav-title,
+.tl-timeline .tl-timegroup-message .tl-slidenav-title {
+  line-height: 1.3em !important;
+}
+.tl-timeline .tl-headline-date,
+.tl-timeline h3.tl-headline-date {
+  font-family: 'Andika', sans-serif !important;
+  font-weight: normal !important;
+  text-transform: none !important;
+}
+.tl-timeline .tl-headline-date small,
+.tl-timeline h3.tl-headline-date small {
+  font-weight: normal !important;
+}
+.tl-timeline .tl-timenav-slider {
+  font-family: 'Andika', sans-serif;
+  font-weight: 700;
+}
+.tl-timeline .tl-timenav-slider h2.tl-headline {
+  font-family: 'Andika', sans-serif;
+  font-weight: 700;
+  text-transform: none;
+}
+.tl-timeline .tl-timenav-slider .tl-timeaxis {
+  font-family: 'Andika', sans-serif;
+  font-weight: 700;
+  text-transform: none;
+}
+.tl-timeline .tl-menubar {
+  font-family: 'Andika', sans-serif;
+}
+.tl-timeline blockquote,
+.tl-timeline blockquote p {
+  font-family: 'Andika', sans-serif;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 1.3;
+}
+input[type="text"].editor-headline {
+  font-family: 'Amatic SC', cursive;
+  text-transform: none;
+  font-weight: 700;
+  font-size: 64px;
+  line-height: 64px;
+}