Showing preview only (332K chars total). Download the full file or copy to clipboard to get everything.
Repository: pixelnest/presskit.html
Branch: master
Commit: 2be65759e4c7
Files: 59
Total size: 313.7 KB
Directory structure:
gitextract_oj4ovsy9/
├── .gitignore
├── .travis.yml
├── LICENSE
├── README.md
├── assets/
│ ├── _includes/
│ │ ├── about.html
│ │ ├── appstore.html
│ │ ├── assets.html
│ │ ├── description.html
│ │ ├── factsheet.html
│ │ ├── footer.html
│ │ ├── head.html
│ │ ├── mailchimp.html
│ │ ├── nav.html
│ │ ├── playstore.html
│ │ ├── recognition.html
│ │ ├── scripts.html
│ │ ├── team.html
│ │ └── widgets.html
│ ├── company.html
│ ├── css/
│ │ ├── dark.css
│ │ ├── light.css
│ │ ├── normalize.css
│ │ └── print.css
│ ├── js/
│ │ └── hamburger.js
│ ├── product.html
│ ├── redirect.html
│ └── templates/
│ ├── company.xml
│ └── product.xml
├── bin/
│ ├── presskit
│ ├── presskit-build.js
│ └── presskit-new.js
├── data/
│ ├── data.xml
│ └── product/
│ └── data.xml
├── docs/
│ ├── company/
│ │ └── index.html
│ ├── css/
│ │ └── docco.css
│ ├── example/
│ │ ├── css/
│ │ │ ├── master.css
│ │ │ └── normalize.css
│ │ ├── index.html
│ │ ├── js/
│ │ │ └── hamburger.js
│ │ └── product/
│ │ └── index.html
│ └── product/
│ └── index.html
├── documentation
├── lib/
│ ├── assets.js
│ ├── config.js
│ ├── core/
│ │ ├── builder.js
│ │ ├── generator.js
│ │ ├── generator.test.js
│ │ ├── loader.js
│ │ ├── loader.test.js
│ │ ├── parser.js
│ │ ├── parser.test.js
│ │ └── template.js
│ ├── helpers/
│ │ ├── color-console.js
│ │ ├── sfs.js
│ │ ├── sfs.test.js
│ │ ├── watcher.js
│ │ └── zip.js
│ └── index.js
└── package.json
================================================
FILE CONTENTS
================================================
================================================
FILE: .gitignore
================================================
# Numerous always-ignore extensions
*.diff
*.err
*.orig
*.log
*.rej
*.swo
*.swp
*.vi
*~
*.sass-cache
npm-debug.log
# OS or Editor folders
.DS_Store
.cache
.project
.settings
.tmproj
nbproject
Thumbs.db
# NPM packages folder.
node_modules/
# Brunch folder for temporary files.
tmp/
# Brunch output folder.
public/
build/
# Bower stuff.
bower_components/
================================================
FILE: .travis.yml
================================================
language: node_js
node_js:
- 20
notifications:
slack:
secure: qTKyJRT+HA7Bz0HsClvSBeVrN3M8w4Z6uXDNEkNP/o+1eBmDTl1WXV94Pvi/UkwuABm7XOvdLljvUcHKqalVL1PyiPYbl0Oe8ZPLgNtHKliQ0GY6qQdB4slLYJMzrSAyufID+3g3NW2Flxivb9dXT8lChYEuwXHm0rQlULdLCy+W9/qXPne1NGJN3TbZeGWqlhHI8+7ViQUUDCSPEJ+MZIDbKo6+FAkagJu2ZTsnMR21Ry+ZltaMSrImN2YkXbSEXN9mCKZVsQlDCFD4TnK/LVeMeBeo9MCTsJ7DjkmfqUsh1A7e9dyHdPLIzPPk+lln5PPRuAwjT0L/aPQ50XXDumFRZEAG/G6GyYqq1xRM6flizCjFzoF7vS9qfCapol0oz0jQ1J3AK6rlayXht/IAVAdEanbIDqWhIQQFt9LtE3lKx4yT7QTotmMOdlmkfs44gBa3mpF6d5+sqVSe6bh8rQAQnwoKrJqhDVw3fW1EnaFZzUsfZtmU8BnUgB+cAGMQ9hNeg9rwXq/UWZUejCENwPVQBV2slweT/RXqHEtBN2eUQmdTAx+TBFWLMON8992GqMDM9DnOnRnpvR5lw60/sd+8QBwCLQyjvo5ViVMUngck4bMg2gsOwgXd9UhsJHGvl9G2YOKhFyCR3284Qg8iwe/ZpFIUV9VBBn8Tjip/Wio=
on_success: change
on_failure: always
================================================
FILE: LICENSE
================================================
MIT License
Copyright (c) Pixelnest Studio (pixelnest.io)
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
================================================
FILE: README.md
================================================
# 
> Re-implementation of presskit() as a static site generator
[](https://www.npmjs.com/package/presskit)
[](http://standardjs.com/)
* [Why presskit.html?](#why)
* [Showcase](#showcase)
* [Roadmap](#roadmap)
* [Quickstart](#quickstart-for-existing-presskit-users)
* [Installation](#installation)
* [Usage](#usage)
* [Documentation](#documentation)
* [Migration Guide](#migration-guide)
* [Credits](#credits)
_Created by [Pixelnest Studio](http://pixelnest.io/)._
This is a complete re-implementation, with a permissive MIT license, of [presskit()][dopresskit], which was originally created by [Rami Ismail](https://twitter.com/tha_rami) of [Vlambeer](http://www.vlambeer.com).
Warning: **presskit.html** is, _currently_, a tool for developers. You need to know how to use the command-line — but that's all, to be honest. However, we plan to create a small app to simplify this process in the future. Stay tuned by following our [Twitter account](https://twitter.com/pixelnest).
---
**presskit.html** is a tool to create a presskit for your company, products or games.
To quote the original [presskit()][dopresskit]:
> Developers & press both have the same goal: to bring great games to as many people as possible - after all, a good game is worth nothing if no-one plays it. For the press, finding out about a game but not having access to information & media for the game means that they can't write about it. Of course, developers want to spend their valuable time making games instead of press pages.
> **presskit()** (pronounced _'do presskit'_) is the solution. Free for everyone, open and easy-to-use for both developers & press. Developers only have to spend an hour or so creating well-laid out press pages with everything the press needs to write to their hearts desire. Everybody wins.
It uses an **almost-identical format and output** as its precursor. The goal is to be compatible, as much as possible.
And even if presskit() was conceived with videogames in mind, we think that you can use it for any kind of product.
Examples (built with **presskit.html**):
* [Pixelnest Studio](http://pixelnest.io/presskit/)
* [Fake Pizza Burger Studio](http://pixelnest.io/presskit.html/example/)
The goal of **presskit.html** is to generate only static HTML pages — no PHP required at all. Just fill some XML data files, add some images, execute a command, and boom. It's done.
**You already have a presskit and you want to use this tool instead of the old un-maintained PHP-based presskit()? [Read the migration guide](#migration-guide).**
## Why
**Why reimplement [presskit()][dopresskit]?** **presskit.html** is basically a static site generator for presskit(). Everything is built once on your computer, and then distributed as static files to your users.
We love the concept behind static site generators like [Jekyll](https://jekyllrb.com) or [Hugo](https://gohugo.io). These tools create lightweight static HTML pages, which are, by design, more secure and efficient than using a PHP server, for example.
Moreover, if you use one of these tools to build your company or product's website, you can simply drop the result of **presskit.html** into your site directly, whatever the technology you are using — it's just HTML pages, after all. 😉
That's mainly why we built **presskit.html** — that's how we make our websites, and we can integrate our presskits more easily this way.
We have also added some nice little things (like thumbnails generation, a "Press Copy Request" button, widgets integration, relations between products or an optional hamburger menu, for example) and created a more robust implementation of presskit() (which is, unfortunately, un-maintained since 2014).
However, _we have tried to be as close as possible to the original presskit format and style._ In fact, comparing the output of **presskit.html** with the one of presskit() should be almost indistinguishable.
This is by design: the aim of the original presskit() was to create an instantly-recognizable website — almost a standard in the videogame industry.
You already have a presskit? Just try it: [follow our migration guide](#migration-guide), run **presskit.html** in the folder containing your presskit()-based `data.xml` and `images/` and you will have a ready to deploy set of HTML pages which are almost identical to what you already have.
## Showcase
Built with **presskit.html**:
* [Pixelnest Studio](http://pixelnest.io/presskit/) ([source code](https://github.com/pixelnest/presskit/))
* [Genix Lab](http://www.genix-lab.com/presskit/)
* [Creative Brothers](http://www.creativebrothers.io/presskit/en/)
<small>_You are using **presskit.html**? Tell us or submit a pull request!_</small>
Want to compare with presskit() websites? Check these ones:
* [Vlambeer](http://www.vlambeer.com/press/)
* [Flying Oak Games](http://www.flying-oak.com/presskit/index.php)
## Roadmap
The roadmap is available on [Trello](https://trello.com/b/5T6BIyi3/open-source-presskit-html).
## Quickstart for existing presskit users
1. Install [Node.js](https://nodejs.org).
2. Open your terminal ("Terminal" on macOS, "cmd" on Windows).
3. Run `npm install -g presskit`.
4. Type `cd`, press space, and drag the folder containing your `data.xml` files.
5. Run `presskit build`.
6. Open the `build/` folder, double-click on index.html and… 🍾
## Installation
You will need a terminal and [Node.js](https://nodejs.org/).
The simplest way to install **presskit.html** is to use [npm](http://npmjs.org/) (bundled with Node.js):
```shell
npm install -g presskit
```
(Feeling fancy? Use [Yarn](https://yarnpkg.com/en/) instead.)
This should add a globally available `presskit` command to your shell.
To update to a new version of **presskit.html**, just type:
```shell
npm update -g presskit
```
## Usage
Run this command:
```
presskit build
```
**presskit.html** will then scan your local working directory (where you are executing the command) and all direct sub-directories for `data.xml` files and `images/` folders.
To launch your presskit with a server and automatically reload it each time your save a `data.xml`, just use:
```
presskit build --watch
```
You can also specify the folder to scan:
```shell
presskit build path/to/folder
```
The `presskit` command does a bunch more (watch mode, generation of `data.xml`, etc.). Use `presskit -h` to learn more.
In order to generate a complete presskit, you should have:
- One `data.xml` for your company.
- One `data.xml` per product in unique subfolders.
- All assets (mostly images) located in an `images/` subfolder next to the corresponding `data.xml`.
Example:
```
📄 data.xml
📂 images/
📄 header.png
📄 logo.png
📂 product-name-01/
📄 data.xml
📂 images/
📄 header.png
📄 logo.png
📄 screenshot1.png
📄 screenshot2.png
```
The `header.png` is used as the banner for the corresponding page. `logo.png` will be used as the product's brand.
The arborescence above should generate a build folder containing:
```
📂 build/
📄 index.html
📂 images/
📄 header.png
📄 logo.png
📄 images.zip
📄 logo.zip
📂 product-name-01/
📄 index.html
📂 images/
📄 header.png
📄 logo.png
📄 screenshot1.png
📄 screenshot2.png
📄 images.zip
📄 logo.zip
📂 css/
📂 js/
```
Simply copy **all** the files in the `build/` folder to your server… and you're done!
_Note: the webserver is **not** included._
You can also [try our example](https://github.com/pixelnest/presskit.html/tree/master/data) from this repository, available online here: http://pixelnest.io/presskit.html/example/.
### Additional options of `presskit build`
`presskit build` has a few other features. Use `presskit build -h` to discover them all.
Two interesting ones are:
- `presskit build --collapse-menu` uses a collapsed menu for the main navigation at the top (commonly-known as the "[hamburger button](https://en.wikipedia.org/wiki/Hamburger_button)") — only for small screens. This option toggles this behavior on all pages.
- `presskit build --pretty-links` hides `index.html` at the end of URLs.
You can combine all these options together, of course.
### Create `data.xml` files with `presskit new`
You can also generate empty `data.xml` with the `presskit new` command.
## Documentation
For a tag by tag walkthrough, open these links:
- [Company `data.xml` file](http://pixelnest.io/presskit.html/company/)
- [Product or game `data.xml` file](http://pixelnest.io/presskit.html/product/)
**If you have never written a presskit before, those links are a must-read.**
For a more detailed documentation about some specific features, see below.
_NB: since **presskit.html** is 99% compatible with [presskit()][dopresskit], you can also just read the existing documentation there._
### Tags
**Warning: do not put XML tags inside your content.**
For example, do not do this (note the `<br />`):
```xml
<description>
Lorem ipsum<br /> sit amet.
</description>
```
#### Widgets
This is a new feature of **presskit.html**: you can put your widgets directly into your presskit pages.
- Mailchimp `<mailchimp>LIST_URL inside your signup form</mailchimp>`
- App Store `<appstore>APP_ID</appstore>`
- Play Store `<playstore>com.domain.yourappid</playstore>`
- Steam `<steam>STEAM_ID</steam>`
- Humble Bundle `<humble>product_name/BUNDLE_ID</humble>`
- Itch.io `<itch>ITCH_ID</itch>`
- Game Jolt `<gamejolt>PACKAGE_ID</gamejolt>`
- Bandcamp `<bandcamp>BANDCAMP_ID</bandcamp>`
Just add the `<widgets>` tag, and the widget providers that you want:
```xml
<widgets>
<mailchimp>//url.us3.list-manage.com/subscribe/post?u=USER_ID&id=LIST_ID</mailchimp>
<appstore>950812012</appstore>
<playstore>com.noodlecake.altosadventure</playstore>
<steam>347160</steam>
<humble>steredenn/7SDLfk23hw</humble>
<itch>27992</itch>
<gamejolt>8ReMi2Nw</gamejolt>
<bandcamp>1135613467</bandcamp>
</widgets>
```
We don't support other widgets for the moment, but feel free to send a pull request or submit an issue.
**Warning: widgets import many scripts and assets. This may have a penalty on your page size and responsiveness.**
#### Relations
This is a new feature of **presskit.html**: you can specify relations between products using the `<relations>` tag.
For example, on a product page, you could add something like:
```xml
<title>StarCraft</title>
[…]
<relations>
<relation>
<type>Expansion</type>
<product>StarCraft: Brood War</product>
</relation>
<relation>
<type>Sequel</type>
<product>StarCraft II</product>
</relation>
</relations>
```
_This tag should be added on the **main** page; not the related product._
At build time, a relation will be added to the product and its related product, with a link between the two.
You can have as many relations as you want. You can use it to show DLCs, expansions, sequels, prequels, etc.
**Warning**: you need to rebuild the presskit to see the changes.
#### Other tags
We recommend to read the [company](http://pixelnest.io/presskit.html/company/) and [product](http://pixelnest.io/presskit.html/product/) documentation pages for more information. New tags include `<partners>` and `<abouts>`. More might be implemented later.
### Images
For each `data.xml`, you can add an `images/` folder containing the assets of your product or game.
- An image named `header.png` or `header.jpg` will be used for the page's banner.
- An image named `logo.png` or `logo.jpg` will be used as your page's logo.
- Each `jpg`, `jpeg`, `png` or `gif` will be displayed in the gallery.
For each non-header/non-logo image, a thumbnail will be automatically generated during the build process. If you don't want to use the thumbnails, you can disable them with the `--ignore-thumbnails` option of `presskit build`. However, we do not recommend this: it might drastically increase the size of your pages. It can be a massive change: for example, on our presskit, one of our page has gone from 100mB to 4mB. We also convert gifs to small JPGs, that you can animate with a click.
#### Logos
You can provide multiple logos for a page. As long as they start with "logo", they will be displayed in the "Logo & Icon" section.
This will work, for example:
```
📄 logo01.png
📄 logo02.png
📄 logo03.jpg
```
#### Categories
Inside the `images/` folder, you can sort images by categories. It's simple: put a few images into a subfolder (like `images/wallpapers/`), and a new category will be automatically added to the gallery.
[You can find an example here.](http://pixelnest.io/presskit.html/example/product/#gallery-wallpapers)
#### Favicon
If a `favicon.ico` is found in the `images/` folder of a `data.xml`, it will be used as the favicon of this HTML page. It will not be exported in the `images.zip`, nor visible in the images gallery.
### Archives
**presskit.html** will find every images and logos in the `images/` folder of a `data.xml`. Then, it will create two archives: `images.zip` and `logo.zip`.
There's a small trick to know: if you provide one (or both) of these zips in your `images/` folder, **presskit.html** will just copy it directly, instead of overriding it. This is nice, because it allows you to provide a more complete (and heavy) zip. In this archive, you can, for example, put bigger gifs, images, artworks, or even videos.
That's purely optional, and most products or games won't need a specially crafted archive. 😉
## Migration Guide
This tool is almost a drop-in replacement for presskit() (well, except for the fact that it generates HTML instead of using a PHP back-end — but that's simpler, not harder). Which mean that you can go in your folder containing the `data.xml` and `images/`, run `presskit build` and boom, you're done.
_Well, almost._
We have made some breaking changes between this format and the original presskit() format. But be reassured: they are fairly small, and are, indeed, useful.
Follow the guide.
### URLs
This re-implementation of presskit() has a big difference: all your product URLs will break. With presskit(), you pointed to `/sheet.php?p=MYSUPERGAME` for the `MYSUPERGAME` page. Here, you will point to `/MYSUPERGAME/` directly (the `index.html` is not required, which makes prettier URLs).
**This can't be changed.** We don't use PHP, but simple, robust and lightweight HTML files, and this difference is inevitable.
### External URLs
presskit() didn't require the protocol (ie., `http` or `https`) for most URLs in the `data.xml`.
For example:
```xml
<socials>
<social>
<name>twitter.com/pixelnest/</name>
<link>twitter.com/pixelnest/</link>
</social>
</socials>
```
Note that the `<link>` has no `http` or `https` protocol before its destination.
The problem with that is that we cannot deduce the protocol automatically. It will work seamlessly for the biggest sites like Facebook or Twitter, but we cannot guarantee that it will link correctly for everything.
That's why we require that you specify the protocol for your URLs:
```xml
<socials>
<social>
<name>twitter.com/pixelnest/</name>
<link>https://twitter.com/pixelnest/</link>
</social>
</socials>
```
Otherwise, the URL will be relative to your presskit, and thus, will break.
### Company `data.xml`
**This is recommended, but presskit.html is smart enough to detect the company `data.xml` automatically, if your file structure is correct.**
Your main `data.xml` containing your company information should use a `<company></company>` root tag for your XML document.
Before:
```xml
<?xml version="1.0" encoding="utf-8"?>
<game>
<title>Pixelnest Studio</title>
<!-- The rest -->
</game>
```
After:
```xml
<?xml version="1.0" encoding="utf-8"?>
<company>
<title>Pixelnest Studio</title>
<!-- The rest -->
</company>
```
**Why?** It allows us to better differentiate the main `data.xml` from the others. And moreover, it does not make sense that the company `data.xml` is considered as a `<game>`, right?
### Release dates
The original presskit() assumed that you had only one release date for a product or game. And we all know that it's simply not true.
That's why we handle multiple release dates.
So, in your product/game `data.xml`, you must change your `<release-date>` tag.
Before:
```xml
<?xml version="1.0" encoding="utf-8"?>
<product>
<title>My Super Game</title>
<release-date>04 Feb, 2016</release-date>
<!-- The rest -->
</product>
```
After:
```xml
<?xml version="1.0" encoding="utf-8"?>
<product>
<title>My Super Game</title>
<release-dates>
<release-date>PC/Mac - 04 Feb, 2016</release-date>
<release-date>iOS/Android - 04 Feb, 2017</release-date>
</release-dates>
<!-- The rest -->
</product>
```
**Why?** We all know that there's no single release date for a product or a game.
### Contacts
In each `data.xml`, you can set a list of contacts:
```xml
<contacts>
<contact>
<name>Inquiries</name>
<mail>contact@pizzaburger.studio</mail>
</contact>
<!-- Others -->
</contacts>
```
In presskit(), you needed to set these informations _only in the company page_. Each product then retrieved the values from the company and added them automatically.
We modified that: now, you **need** to set these informations everywhere. That way, you can change mails and links for each product individually.
---
## Pixelnest Studio
[Pixelnest Studio](http://pixelnest.io/) is a small indie company, creating games and apps. You can contact us on [Twitter at @pixelnest](https://twitter.com/pixelnest). Want to check our game, Steredenn? Go to http://steredenn.pixelnest.io/.
## Credits
### [presskit()][dopresskit]
This couldn't have be made without the awesome work of [Rami Ismail](https://twitter.com/tha_rami) and the [presskit()][dopresskit] team. Thanks to them!
### Assets
* The images used in this repository can be found on [Unsplash](https://unsplash.com/), a free provider of high-quality images.
* Pizza gif is from [Giphy](http://giphy.com/).
[dopresskit]: http://dopresskit.com
================================================
FILE: assets/_includes/about.html
================================================
{{#if company.title}}
<section class="block">
<h2 id="about">About {{company.title}}</h2>
<dl>
<dt>Boilerplate</dt>
<dd>{{company.description}}</dd>
<dt>More information</dt>
<dd>More information on {{company.title}}, our logo & relevant media are available <a href="..">here</a>.</dd>
</dl>
</section>
{{/if}}
{{#each presskit.abouts}}
<section class="block">
<h2 id="about_{{title}}">About {{title}}</h2>
<dl>
<dt>Boilerplate</dt>
<dd>{{description}}</dd>
{{#if link}}
<dt>More information</dt>
<dd>More information on {{title}} is available <a href="{{link}}">here</a>.</dd>
{{/if}}
</dl>
</section>
{{/each}}
================================================
FILE: assets/_includes/appstore.html
================================================
<svg class="svg-appstore" xmlns="http://www.w3.org/2000/svg" width="270" height="80" viewBox="0 0 135 40"><style>.a{fill:#FFF;}</style><path d="M130.2 40H4.7C2.1 40 0 37.9 0 35.3V4.7C0 2.1 2.1 0 4.7 0h125.5C132.8 0 135 2.1 135 4.7v30.5C135 37.9 132.8 40 130.2 40L130.2 40z" fill="#A6A6A6"/><path d="M134 35.3c0 2.1-1.7 3.8-3.8 3.8H4.7c-2.1 0-3.8-1.7-3.8-3.8V4.7c0-2.1 1.7-3.8 3.8-3.8h125.5c2.1 0 3.8 1.7 3.8 3.8L134 35.3 134 35.3z"/><path d="M30.1 19.8c0-3.2 2.6-4.8 2.8-4.9 -1.5-2.2-3.9-2.5-4.7-2.5 -2-0.2-3.9 1.2-4.9 1.2 -1 0-2.6-1.2-4.2-1.1 -2.1 0-4.1 1.3-5.2 3.2 -2.3 3.9-0.6 9.7 1.6 12.9 1.1 1.6 2.4 3.3 4 3.2 1.6-0.1 2.2-1 4.2-1 1.9 0 2.5 1 4.2 1 1.7 0 2.8-1.6 3.9-3.1 1.3-1.8 1.8-3.5 1.8-3.6C33.5 24.9 30.2 23.6 30.1 19.8z" class="a"/><path d="M26.9 10.3c0.9-1.1 1.5-2.6 1.3-4.1 -1.3 0.1-2.8 0.9-3.8 1.9 -0.8 0.9-1.5 2.5-1.3 3.9C24.6 12.2 26 11.4 26.9 10.3z" class="a"/><path d="M53.6 31.5h-2.3l-1.2-3.9h-4.3l-1.2 3.9h-2.2l4.3-13.3h2.6L53.6 31.5zM49.8 26L48.6 22.5c-0.1-0.4-0.3-1.2-0.7-2.5h0c-0.1 0.6-0.3 1.4-0.6 2.5l-1.1 3.5H49.8z" class="a"/><path d="M64.7 26.6c0 1.6-0.4 2.9-1.3 3.9 -0.8 0.8-1.8 1.3-2.9 1.3 -1.3 0-2.2-0.5-2.7-1.4h0v5.1h-2.1V25.1c0-1 0-2.1-0.1-3.2h1.9l0.1 1.5h0c0.7-1.1 1.8-1.7 3.2-1.7 1.1 0 2.1 0.4 2.8 1.3C64.3 23.9 64.7 25.1 64.7 26.6zM62.5 26.7c0-0.9-0.2-1.7-0.6-2.3 -0.5-0.6-1.1-0.9-1.9-0.9 -0.5 0-1 0.2-1.4 0.5 -0.4 0.4-0.7 0.8-0.8 1.4 -0.1 0.3-0.1 0.5-0.1 0.7v1.6c0 0.7 0.2 1.3 0.6 1.8s1 0.7 1.7 0.7c0.8 0 1.4-0.3 1.9-0.9C62.3 28.5 62.5 27.7 62.5 26.7z" class="a"/><path d="M75.7 26.6c0 1.6-0.4 2.9-1.3 3.9 -0.8 0.8-1.8 1.3-2.9 1.3 -1.3 0-2.2-0.5-2.7-1.4H68.7v5.1h-2.1V25.1c0-1 0-2.1-0.1-3.2h1.9l0.1 1.5h0c0.7-1.1 1.8-1.7 3.2-1.7 1.1 0 2.1 0.4 2.8 1.3C75.3 23.9 75.7 25.1 75.7 26.6zM73.5 26.7c0-0.9-0.2-1.7-0.6-2.3 -0.5-0.6-1.1-0.9-1.9-0.9 -0.5 0-1 0.2-1.4 0.5 -0.4 0.4-0.7 0.8-0.8 1.4 -0.1 0.3-0.1 0.5-0.1 0.7v1.6c0 0.7 0.2 1.3 0.6 1.8 0.4 0.5 1 0.7 1.7 0.7 0.8 0 1.4-0.3 1.9-0.9C73.3 28.5 73.5 27.7 73.5 26.7z" class="a"/><path d="M88 27.8c0 1.1-0.4 2.1-1.2 2.8 -0.9 0.8-2.1 1.2-3.6 1.2 -1.4 0-2.6-0.3-3.4-0.8l0.5-1.8c0.9 0.6 2 0.9 3.1 0.9 0.8 0 1.4-0.2 1.9-0.5 0.4-0.4 0.7-0.8 0.7-1.5 0-0.5-0.2-1-0.6-1.4 -0.4-0.4-1-0.7-1.8-1 -2.3-0.9-3.5-2.1-3.5-3.8 0-1.1 0.4-2 1.2-2.7 0.8-0.7 1.9-1 3.3-1 1.2 0 2.2 0.2 3 0.6l-0.5 1.7c-0.7-0.4-1.6-0.6-2.5-0.6 -0.7 0-1.3 0.2-1.8 0.6 -0.4 0.3-0.5 0.7-0.5 1.2 0 0.5 0.2 1 0.6 1.3 0.4 0.3 1 0.7 1.9 1 1.1 0.5 2 1 2.5 1.6C87.8 26.1 88 26.9 88 27.8z" class="a"/><path d="M95.1 23.5h-2.3v4.7c0 1.2 0.4 1.8 1.2 1.8 0.4 0 0.7 0 0.9-0.1l0.1 1.6c-0.4 0.2-1 0.2-1.7 0.2 -0.8 0-1.5-0.3-2-0.8 -0.5-0.5-0.7-1.4-0.7-2.6v-4.8h-1.4v-1.6h1.4v-1.8l2.1-0.6v2.4h2.4V23.5z" class="a"/><path d="M105.7 26.6c0 1.5-0.4 2.7-1.3 3.6 -0.9 1-2.1 1.5-3.5 1.5 -1.4 0-2.5-0.5-3.4-1.4s-1.3-2.1-1.3-3.5c0-1.5 0.4-2.7 1.3-3.7 0.9-0.9 2-1.4 3.5-1.4 1.4 0 2.5 0.5 3.4 1.4C105.3 24 105.7 25.2 105.7 26.6zM103.5 26.7c0-0.9-0.2-1.6-0.6-2.3 -0.4-0.8-1.1-1.1-1.9-1.1 -0.9 0-1.5 0.4-2 1.1 -0.4 0.6-0.6 1.4-0.6 2.3 0 0.9 0.2 1.6 0.6 2.3 0.5 0.8 1.1 1.1 1.9 1.1 0.8 0 1.5-0.4 1.9-1.2C103.3 28.3 103.5 27.6 103.5 26.7z" class="a"/><path d="M112.6 23.8c-0.2 0-0.4-0.1-0.7-0.1 -0.7 0-1.3 0.3-1.7 0.9 -0.4 0.5-0.5 1.1-0.5 1.9v5h-2.1l0-6.6c0-1.1 0-2.1-0.1-3h1.9l0.1 1.8h0.1c0.2-0.6 0.6-1.1 1.1-1.5 0.5-0.3 1-0.5 1.5-0.5 0.2 0 0.4 0 0.5 0V23.8z" class="a"/><path d="M122.2 26.3c0 0.4 0 0.7-0.1 1h-6.4c0 0.9 0.3 1.7 0.9 2.2 0.5 0.4 1.2 0.7 2.1 0.7 0.9 0 1.8-0.2 2.6-0.5l0.3 1.5c-0.9 0.4-2 0.6-3.2 0.6 -1.5 0-2.7-0.4-3.5-1.3 -0.8-0.9-1.3-2-1.3-3.5 0-1.4 0.4-2.7 1.2-3.6 0.8-1 1.9-1.5 3.4-1.5 1.4 0 2.4 0.5 3.1 1.5C121.9 24 122.2 25.1 122.2 26.3zM120.1 25.7c0-0.6-0.1-1.2-0.4-1.6 -0.4-0.6-0.9-0.9-1.7-0.9 -0.7 0-1.3 0.3-1.7 0.9 -0.4 0.5-0.6 1-0.6 1.7H120.1z" class="a"/><path d="M49.1 10c0 1.2-0.4 2.1-1.1 2.7 -0.7 0.5-1.6 0.8-2.8 0.8 -0.6 0-1.1 0-1.5-0.1V7c0.6-0.1 1.2-0.1 1.8-0.1 1.1 0 2 0.2 2.6 0.7C48.7 8.2 49.1 9 49.1 10zM47.9 10c0-0.8-0.2-1.3-0.6-1.8 -0.4-0.4-1-0.6-1.8-0.6 -0.3 0-0.6 0-0.8 0.1v4.9c0.1 0 0.4 0 0.7 0 0.8 0 1.4-0.2 1.9-0.7S47.9 10.9 47.9 10z" class="a"/><path d="M54.9 11c0 0.7-0.2 1.3-0.6 1.8 -0.4 0.5-1 0.7-1.7 0.7 -0.7 0-1.2-0.2-1.7-0.7 -0.4-0.5-0.6-1-0.6-1.7 0-0.7 0.2-1.3 0.6-1.8s1-0.7 1.7-0.7c0.7 0 1.2 0.2 1.7 0.7C54.7 9.8 54.9 10.3 54.9 11zM53.8 11.1c0-0.4-0.1-0.8-0.3-1.1 -0.2-0.4-0.5-0.6-0.9-0.6 -0.4 0-0.7 0.2-1 0.6 -0.2 0.3-0.3 0.7-0.3 1.1 0 0.4 0.1 0.8 0.3 1.1 0.2 0.4 0.5 0.6 1 0.6 0.4 0 0.7-0.2 0.9-0.6C53.7 11.9 53.8 11.5 53.8 11.1z" class="a"/><path d="M62.8 8.7l-1.5 4.7h-1l-0.6-2c-0.2-0.5-0.3-1-0.4-1.5h0c-0.1 0.5-0.2 1-0.4 1.5l-0.6 2h-1l-1.4-4.7h1.1l0.5 2.2c0.1 0.5 0.2 1 0.3 1.5h0c0.1-0.4 0.2-0.9 0.4-1.5l0.7-2.2h0.9l0.6 2.2c0.2 0.5 0.3 1.1 0.4 1.6h0c0.1-0.5 0.2-1 0.3-1.6l0.6-2.2H62.8z" class="a"/><path d="M68.2 13.4H67.2v-2.7c0-0.8-0.3-1.2-0.9-1.2 -0.3 0-0.6 0.1-0.8 0.3 -0.2 0.2-0.3 0.5-0.3 0.8v2.8h-1v-3.4c0-0.4 0-0.9 0-1.3h0.9l0 0.7h0c0.1-0.2 0.3-0.4 0.5-0.6 0.3-0.2 0.6-0.3 1-0.3 0.4 0 0.8 0.1 1.1 0.4 0.4 0.3 0.5 0.9 0.5 1.6V13.4z" class="a"/><path d="M71.1 13.4h-1V6.6h1V13.4z" class="a"/><path d="M77.3 11c0 0.7-0.2 1.3-0.6 1.8 -0.4 0.5-1 0.7-1.7 0.7 -0.7 0-1.2-0.2-1.7-0.7 -0.4-0.5-0.6-1-0.6-1.7 0-0.7 0.2-1.3 0.6-1.8s1-0.7 1.7-0.7c0.7 0 1.2 0.2 1.7 0.7C77.1 9.8 77.3 10.3 77.3 11zM76.2 11.1c0-0.4-0.1-0.8-0.3-1.1 -0.2-0.4-0.5-0.6-0.9-0.6 -0.4 0-0.7 0.2-1 0.6 -0.2 0.3-0.3 0.7-0.3 1.1 0 0.4 0.1 0.8 0.3 1.1 0.2 0.4 0.5 0.6 1 0.6 0.4 0 0.7-0.2 0.9-0.6C76.1 11.9 76.2 11.5 76.2 11.1z" class="a"/><path d="M82.3 13.4h-0.9l-0.1-0.5h0c-0.3 0.4-0.8 0.7-1.4 0.7 -0.4 0-0.8-0.1-1.1-0.4 -0.2-0.3-0.4-0.6-0.4-1 0-0.6 0.2-1 0.7-1.3 0.5-0.3 1.2-0.5 2-0.4V10.3c0-0.6-0.3-0.9-1-0.9 -0.5 0-0.9 0.1-1.2 0.3l-0.2-0.7c0.4-0.3 1-0.4 1.6-0.4 1.2 0 1.9 0.7 1.9 2v1.7C82.3 12.8 82.3 13.2 82.3 13.4zM81.2 11.8v-0.7c-1.2 0-1.7 0.3-1.7 1 0 0.2 0.1 0.4 0.2 0.6 0.1 0.1 0.3 0.2 0.5 0.2 0.2 0 0.4-0.1 0.6-0.2 0.2-0.1 0.3-0.3 0.4-0.6C81.2 11.9 81.2 11.9 81.2 11.8z" class="a"/><path d="M88.3 13.4h-0.9l0-0.8h0c-0.3 0.6-0.8 0.9-1.5 0.9 -0.6 0-1-0.2-1.4-0.7s-0.6-1-0.6-1.7c0-0.8 0.2-1.4 0.6-1.9 0.4-0.4 0.9-0.7 1.5-0.7 0.6 0 1.1 0.2 1.3 0.6h0V6.6h1v5.6C88.2 12.6 88.3 13 88.3 13.4zM87.2 11.4v-0.8c0-0.1 0-0.2 0-0.3 -0.1-0.3-0.2-0.5-0.4-0.6 -0.2-0.2-0.4-0.3-0.7-0.3 -0.4 0-0.7 0.2-0.9 0.5 -0.2 0.3-0.3 0.7-0.3 1.2 0 0.5 0.1 0.8 0.3 1.1 0.2 0.3 0.5 0.5 0.9 0.5 0.3 0 0.6-0.1 0.8-0.4C87.1 12.1 87.2 11.8 87.2 11.4z" class="a"/><path d="M97.2 11c0 0.7-0.2 1.3-0.6 1.8 -0.4 0.5-1 0.7-1.7 0.7 -0.7 0-1.2-0.2-1.7-0.7 -0.4-0.5-0.6-1-0.6-1.7 0-0.7 0.2-1.3 0.6-1.8s1-0.7 1.7-0.7c0.7 0 1.2 0.2 1.7 0.7C97 9.8 97.2 10.3 97.2 11zM96.2 11.1c0-0.4-0.1-0.8-0.3-1.1 -0.2-0.4-0.5-0.6-0.9-0.6 -0.4 0-0.7 0.2-1 0.6 -0.2 0.3-0.3 0.7-0.3 1.1 0 0.4 0.1 0.8 0.3 1.1 0.2 0.4 0.5 0.6 1 0.6 0.4 0 0.7-0.2 0.9-0.6C96.1 11.9 96.2 11.5 96.2 11.1z" class="a"/><path d="M102.9 13.4h-1v-2.7c0-0.8-0.3-1.2-1-1.2 -0.3 0-0.6 0.1-0.8 0.3s-0.3 0.5-0.3 0.8v2.8h-1v-3.4c0-0.4 0-0.9 0-1.3h0.9l0 0.7h0c0.1-0.2 0.3-0.4 0.5-0.6 0.3-0.2 0.6-0.3 1-0.3 0.4 0 0.8 0.1 1.1 0.4 0.4 0.3 0.5 0.9 0.5 1.6V13.4z" class="a"/><path d="M109.9 9.5h-1.2v2.3c0 0.6 0.2 0.9 0.6 0.9 0.2 0 0.3 0 0.5 0l0 0.8c-0.2 0.1-0.5 0.1-0.8 0.1 -0.4 0-0.7-0.1-1-0.4 -0.2-0.3-0.3-0.7-0.3-1.3V9.5h-0.7V8.7h0.7V7.9l1-0.3v1.2h1.2V9.5z" class="a"/><path d="M115.5 13.4h-1v-2.7c0-0.8-0.3-1.3-0.9-1.3 -0.5 0-0.8 0.2-1 0.7 0 0.1 0 0.2 0 0.4v2.8h-1V6.6h1v2.8h0c0.3-0.5 0.8-0.8 1.4-0.8 0.4 0 0.8 0.1 1.1 0.4 0.4 0.4 0.5 0.9 0.5 1.6V13.4z" class="a"/><path d="M121.2 10.9c0 0.2 0 0.3 0 0.5h-3.1c0 0.5 0.2 0.8 0.5 1.1 0.3 0.2 0.6 0.3 1 0.3 0.5 0 0.9-0.1 1.3-0.2l0.2 0.7c-0.4 0.2-1 0.3-1.6 0.3 -0.7 0-1.3-0.2-1.7-0.6 -0.4-0.4-0.6-1-0.6-1.7 0-0.7 0.2-1.3 0.6-1.8 0.4-0.5 1-0.8 1.6-0.8 0.7 0 1.2 0.3 1.5 0.8C121.1 9.8 121.2 10.3 121.2 10.9zM120.2 10.6c0-0.3-0.1-0.6-0.2-0.8 -0.2-0.3-0.5-0.4-0.8-0.4 -0.3 0-0.6 0.1-0.8 0.4 -0.2 0.2-0.3 0.5-0.3 0.8H120.2z" class="a"/></svg>
================================================
FILE: assets/_includes/assets.html
================================================
{{#if presskit.trailers}}
<section class="block">
<h2 id="videos">Videos</h2>
{{#each presskit.trailers}}
<div>
{{#youtube}}
<p>
<strong>{{../name}}</strong> — <a href="https://www.youtube.com/embed/{{trim .}}?rel=0">YouTube</a> {{#if ../download}}| <a href="{{../download}}" target="_blank">Download</a>{{/if}}
</p>
<div class="video-player">
<iframe class="video-player__frame" src="https://www.youtube.com/embed/{{trim .}}?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
{{/youtube}}
{{#vimeo}}
<p>
<strong>{{../name}}</strong> — <a href="https://player.vimeo.com/video/{{trim .}}">Vimeo</a> {{#if ../download}}| <a href="{{../download}}" target="_blank">Download</a>{{/if}}
</p>
<div class="video-player">
<iframe class="video-player__frame" src="https://player.vimeo.com/video/{{trim .}}" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
{{/vimeo}}
{{#unless youtube}}
{{#unless vimeo}}
{{#download}}
<p>
<strong>{{../name}}</strong> — <a href="{{../download}}" target="_blank">Download</a>
</p>
{{/download}}
{{/unless}}
{{/unless}}
</div>
{{/each}}
</section>
{{else}}
<section class="block">
<h2 id="videos">Videos</h2>
<p>There are currently no trailers available for {{presskit.title}}. Check back later for more or <a href="#contact">contact us</a> for specific requests!</p>
</section>
{{/if}}
{{#if hasScreenshots}}
<section class="block">
<h2 id="images">Images</h2>
<aside class="block__notice">
<a href="images/images.zip">
download all screenshots & photos as .zip
</a>
</aside>
<div class="gallery clearfix" id="gallery">
{{#each images.screenshots}}
<div class="gallery__item">
<a href="images/{{.}}">
<img src="{{thumbOrImage .}}" alt="{{basename .}}">
</a>
</div>
{{/each}}
</div>
{{#each images.screenshotsWithCategory}}
<section>
<h3 class="capitalize" id="gallery-{{title}}">{{title}}</h3>
<div class="gallery clearfix">
{{#each elements}}
<div class="gallery__item">
<a href="images/{{.}}">
<img src="{{thumbOrImage .}}" alt="{{basename .}}">
</a>
</div>
{{/each}}
</div>
</section>
{{/each}}
</section>
{{/if}}
{{#if images.logos}}
<section class="block">
<h2 id="logo">Logo & Icon</h2>
<aside class="block__notice">
<a href="images/logo.zip">
download logo files as .zip
</a>
</aside>
{{#each images.logos}}
<a href="images/{{.}}">
<img src="images/{{.}}" alt="{{basename .}}" class="logo">
</a>
{{/each}}
</section>
{{else}}
<section class="block">
<h2 id="logo">Logo & Icon</h2>
<p>There are currently no logos or icons available for {{presskit.title}}. Check back later for more or <a href="#contact">contact us</a> for specific requests!</p>
</section>
{{/if}}
================================================
FILE: assets/_includes/description.html
================================================
<h2 id="description">Description</h2>
<p>{{rawText presskit.description}}</p>
<h2 id="history">History</h2>
{{#if presskit.history}}
<p>{{rawText presskit.history}}</p>
{{/if}}
{{#each presskit.histories}}
<h3>{{header}}</h3>
<p>{{rawText text}}</p>
{{/each}}
================================================
FILE: assets/_includes/factsheet.html
================================================
<aside class="factsheet grid__item">
<h2 id="factsheet" class="factsheet__title">Factsheet</h2>
{{#if isCompany}}
<dl class="factsheet__list">
<dt>Developer:</dt>
<dd>
<a href=".">{{presskit.title}}</a>
</dd>
{{#if presskit.basedIn}}
<dd>Based in {{presskit.basedIn}}</dd>
{{/if}}
{{#if presskit.foundingDate}}
<dt>Founding date:</dt>
<dd>{{presskit.foundingDate}}</dd>
{{/if}}
{{#if presskit.website}}
<dt>Website:</dt>
<dd>
<a href="{{presskit.website}}">{{prettyURL presskit.website}}</a>
</dd>
{{/if}}
{{#if presskit.pressContact}}
<dt>Press / Business contact:</dt>
<dd>
<a href="mailto:{{presskit.pressContact}}">{{presskit.pressContact}}</a>
</dd>
{{/if}}
{{#if presskit.socials}}
<dt>Social:</dt>
{{#each presskit.socials}}
<dd>
<a href="{{link}}">{{name}}</a>
</dd>
{{/each}}
{{/if}}
{{#if products}}
<dt>Releases:</dt>
{{#each products}}
<dd>
<a href="{{permalink path}}">{{title}}</a>
</dd>
{{/each}}
{{/if}}
{{#if presskit.address.line}}
<dt>Address:</dt>
{{#each presskit.address.line}}
<dd>{{.}}</dd>
{{/each}}
{{/if}}
{{#if presskit.phone}}
<dt>Phone:</dt>
<dd>{{presskit.phone}}</dd>
{{/if}}
</dl>
{{/if}}
{{#if isProduct}}
<dl class="factsheet__list">
{{#if company.title}}
<dt>Developer:</dt>
<dd>
<a href="..">{{company.title}}</a>
</dd>
{{#if company.basedIn}}<dd>Based in {{company.basedIn}}</dd>{{/if}}
{{/if}}
{{#each presskit.partners}}
<dt>{{type}}:</dt>
<dd>
{{#if website}}
<a href="{{website}}">{{title}}</a>
{{else}}
{{title}}
{{/if}}
</dd>
{{#if basedIn}}<dd>Based in {{basedIn}}</dd>{{/if}}
{{/each}}
{{#if presskit.releaseDates}}
<dt>Release date:</dt>
{{#each presskit.releaseDates}}
<dd>{{.}}</dd>
{{/each}}
{{/if}}
{{#if presskit.platforms}}
<dt>Platforms:</dt>
{{#each presskit.platforms}}
<dd>
{{#if link}}
<a href="{{link}}">{{name}}</a>
{{else}}
{{name}}
{{/if}}
</dd>
{{/each}}
{{/if}}
{{#if presskit.website}}
<dt>Website:</dt>
<dd>
<a href="{{presskit.website}}">{{prettyURL presskit.website}}</a>
</dd>
{{/if}}
{{#if presskit.prices}}
<dt>Regular Price:</dt>
{{#each presskit.prices}}
<dd>{{currency}} {{value}}</dd>
{{/each}}
{{/if}}
{{#each presskit.relations}}
<dt>{{type}}:</dt>
<dd>
<a href="{{permalink path}}">{{text}}</a>
</dd>
{{/each}}
{{#each presskit.relationOf}}
<dt>{{type}} of:</dt>
<dd>
<a href="{{permalink path}}">{{text}}</a>
</dd>
{{/each}}
</dl>
{{#if presskit.pressCopyRequest}}
<p class="press">
<a href="{{presskit.pressCopyRequest}}" class="button" tabindex="0">
Request Press Copy
</a>
</p>
{{/if}}
{{/if}}
</aside>
================================================
FILE: assets/_includes/footer.html
================================================
<footer class="page-footer">
<a href="https://github.com/pixelnest/presskit.html">presskit.html</a> by <a href="http://pixelnest.io">Pixelnest Studio</a> — original <a href="http://dopresskit.com/">presskit()</a> by Rami Ismail (<a href="http://www.vlambeer.com/">Vlambeer</a>)
</footer>
================================================
FILE: assets/_includes/head.html
================================================
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
{{#if company.title}}
<title>{{presskit.title}} - {{company.title}}</title>
{{else}}
<title>{{presskit.title}}</title>
{{/if}}
<link rel="shortcut icon" href="images/favicon.ico?t={{buildTime}}">
<link rel="stylesheet" href="{{assets}}/css/normalize.css">
<link rel="stylesheet" href="{{assets}}/css/theme.css">
<link rel="stylesheet" href="{{assets}}/css/print.css" media="print">
<!-- Generated by presskit.html {{buildVersion}} (https://github.com/pixelnest/presskit.html). -->
================================================
FILE: assets/_includes/mailchimp.html
================================================
{{#if presskit.widgets.mailchimp}}
<section class="block">
<h2 id="mailing-list">Mailing List</h2>
<!-- Begin MailChimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/horizontal-slim-10_7.css" rel="stylesheet" type="text/css">
<style type="text/css">
#mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; width:100%;}
#mc_embed_signup form {padding: 0;}
#mc_embed_signup #mce-EMAIL{width: 100%;}
#mc-embedded-subscribe {margin-top: 15px;}
</style>
<div id="mc_embed_signup">
<form action="{{trim presskit.widgets.mailchimp}}" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required>
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_cb1093a5798d3677ea320108b_55e71ae780" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe"></div>
</div>
</form>
</div>
<!--End mc_embed_signup-->
</section>
{{/if}}
================================================
FILE: assets/_includes/nav.html
================================================
<nav class="page-nav nav grid__item">
<h1 class="nav__title">
{{#if isCompany}}
<a href=".">{{presskit.title}}</a>
{{else if company.title}}
<a href="..">{{company.title}}</a>
{{else}}
<a href=".">{{presskit.title}}</a>
{{/if}}
</h1>
<aside class="nav__subtitle">
{{#if company.title}}
<a href="..">press kit</a>
{{else}}
<a href="{{presskit.website}}">{{prettyURL presskit.website}}</a>
{{/if}}
</aside>
<div class="nav__toggle" id="hamburger">
<a href="#" class="button" id="hamburger-toggle">
<svg width="10" height="10" viewBox="0 0 19 19" xmlns="http://www.w3.org/2000/svg">
<g fill="currentColor" fill-rule="nonzero">
<path d="M0 16h19v3H0zM0 8h19v3H0zM0 0h19v3H0z" />
</g>
</svg>
Menu
</a>
</div>
<ul class="nav__list" id="hamburger-target">
<li>
<a class="nav__item" href="#factsheet">Factsheet</a>
</li>
{{#if presskit.description}}
<li>
<a class="nav__item" href="#description">Description</a>
</li>
{{/if}}
{{#if presskit.history}}
<li>
<a class="nav__item" href="#history">History</a>
</li>
{{/if}}
{{#if presskit.histories}}
<li>
<a class="nav__item" href="#history">History</a>
</li>
{{/if}}
{{#if products}}
<li>
<a class="nav__item" href="#projects">Projects</a>
</li>
{{/if}}
{{#if presskit.widgets.mailchimp}}
<li>
<a class="nav__item" href="#mailing-list">Mailing List</a>
</li>
{{/if}}
{{#if presskit.trailers}}
<li>
<a class="nav__item" href="#videos">Videos</a>
</li>
{{/if}}
{{#if images.screenshots}}
<li>
<a class="nav__item" href="#images">Images</a>
</li>
{{/if}}
{{#if images.logos}}
<li>
<a class="nav__item" href="#logo">Logo & Icon</a>
</li>
{{/if}}
{{#if presskit.widgets}}
<li>
<a class="nav__item" href="#widgets">Widgets</a>
</li>
{{/if}}
{{#if presskit.awards}}
<li>
<a class="nav__item" href="#awards">Awards & Recognition</a>
</li>
{{/if}}
{{#if presskit.quotes}}
<li>
<a class="nav__item" href="#articles">Selected Articles</a>
</li>
{{/if}}
{{#if presskit.additionals}}
<li>
<a class="nav__item" href="#links">Additional Links</a>
</li>
{{/if}}
{{#if company.title}}
<li>
<a class="nav__item" href="#about">About {{company.title}}</a>
</li>
{{/if}}
{{#each presskit.abouts}}
<li>
<a class="nav__item" href="#about_{{title}}">About {{title}}</a>
</li>
{{/each}}
<li>
<a class="nav__item" href="#credits">Team</a>
</li>
{{#if presskit.contacts}}
<li>
<a class="nav__item" href="#contact">Contact</a>
</li>
{{/if}}
</ul>
</nav>
================================================
FILE: assets/_includes/playstore.html
================================================
<svg xmlns="http://www.w3.org/2000/svg" width="270" height="80" viewBox="0 0 135.71649 40.018951"><defs><linearGradient x1="31.8" y1="183.29" x2="15.017" y2="166.508" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.8 0 0 -.8 0 161.6)" id="i"><stop offset="0" stop-color="#00a0ff"/><stop offset=".007" stop-color="#00a1ff"/><stop offset=".26" stop-color="#00beff"/><stop offset=".512" stop-color="#00d2ff"/><stop offset=".76" stop-color="#00dfff"/><stop offset="1" stop-color="#00e3ff"/></linearGradient><linearGradient x1="43.834" y1="171.999" x2="19.638" y2="171.999" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.8 0 0 -.8 0 161.6)" id="j"><stop offset="0" stop-color="#ffe000"/><stop offset=".409" stop-color="#ffbd00"/><stop offset=".775" stop-color="orange"/><stop offset="1" stop-color="#ff9c00"/></linearGradient><linearGradient x1="34.827" y1="169.704" x2="12.069" y2="146.946" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.8 0 0 -.8 0 161.6)" id="k"><stop offset="0" stop-color="#ff3a44"/><stop offset="1" stop-color="#c31162"/></linearGradient><linearGradient x1="17.297" y1="191.824" x2="27.46" y2="181.661" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.8 0 0 -.8 0 161.6)" id="l"><stop offset="0" stop-color="#32a071"/><stop offset=".069" stop-color="#2da771"/><stop offset=".476" stop-color="#15cf74"/><stop offset=".801" stop-color="#06e775"/><stop offset="1" stop-color="#00f076"/></linearGradient><clipPath id="a"><path d="M0 0h124v48H0V0z"/></clipPath><mask maskUnits="userSpaceOnUse" x="0" y="0" width="1" height="1" id="m"><g clip-path="url(#a)"><path d="M0 0h124v48H0V0z" fill-opacity=".2"/></g></mask><clipPath id="n"><path d="M0 0h124v48H0V0z"/></clipPath><clipPath id="b"><path d="M0 0h124v48H0V0z"/></clipPath><pattern patternTransform="matrix(1 0 0 -1 0 48)" patternUnits="userSpaceOnUse" width="124" height="48" id="o"><g clip-path="url(#b)"><path d="M29.625 20.695l-11.613-6.597c-.65-.37-1.23-.344-1.606-.008l-.058-.063.058-.058c.375-.337.957-.36 1.606.01L29.7 20.62l-.075.075z"/></g></pattern><clipPath id="c"><path d="M0 0h124v48H0V0z"/></clipPath><mask maskUnits="userSpaceOnUse" x="0" y="0" width="1" height="1" id="p"><g clip-path="url(#c)"><path d="M0 0h124v48H0V0z" fill-opacity=".12"/></g></mask><clipPath id="q"><path d="M0 0h124v48H0V0z"/></clipPath><clipPath id="d"><path d="M0 0h124v48H0V0z"/></clipPath><pattern patternTransform="matrix(1 0 0 -1 0 48)" patternUnits="userSpaceOnUse" width="124" height="48" id="r"><g clip-path="url(#d)"><path d="M16.348 14.145c-.235.246-.37.628-.37 1.125v-.118c0-.496.135-.88.37-1.125l.058.063-.058.055z"/></g></pattern><clipPath id="e"><path d="M0 0h124v48H0V0z"/></clipPath><mask maskUnits="userSpaceOnUse" x="0" y="0" width="1" height="1" id="s"><g clip-path="url(#e)"><path d="M0 0h124v48H0V0z" fill-opacity=".12"/></g></mask><clipPath id="t"><path d="M0 0h124v48H0V0z"/></clipPath><clipPath id="f"><path d="M0 0h124v48H0V0z"/></clipPath><pattern patternTransform="matrix(1 0 0 -1 0 48)" patternUnits="userSpaceOnUse" width="124" height="48" id="u"><g clip-path="url(#f)"><path d="M33.613 22.96l-3.988-2.265.074-.074 3.913 2.224c.56.316.836.734.836 1.156-.048-.38-.333-.75-.837-1.04z"/></g></pattern><clipPath id="g"><path d="M0 0h124v48H0V0z"/></clipPath><mask maskUnits="userSpaceOnUse" x="0" y="0" width="1" height="1" id="v"><g clip-path="url(#g)"><path d="M0 0h124v48H0V0z" fill-opacity=".25"/></g></mask><clipPath id="w"><path d="M0 0h124v48H0V0z"/></clipPath><clipPath id="h"><path d="M0 0h124v48H0V0z"/></clipPath><pattern patternTransform="matrix(1 0 0 -1 0 48)" patternUnits="userSpaceOnUse" width="124" height="48" id="x"><g clip-path="url(#h)"><path d="M18.012 33.902l15.6-8.863c.51-.29.79-.66.837-1.04 0 .418-.278.836-.837 1.156l-15.6 8.864c-1.118.632-2.036.105-2.036-1.176v-.114c0 1.278.918 1.805 2.035 1.172z" fill="#fff"/></g></pattern></defs><path d="M130.54 39.943H5.24c-2.755 0-5.012-2.23-5.012-4.954V5.266C.228 2.544 2.485.314 5.24.314h125.3c2.755 0 5.01 2.23 5.01 4.953V34.99c0 2.723-2.255 4.953-5.01 4.953z"/><path d="M130.54 1.108c2.32 0 4.208 1.866 4.208 4.16v29.72c0 2.295-1.888 4.16-4.21 4.16H5.24c-2.32 0-4.208-1.865-4.208-4.16V5.27c0-2.294 1.888-4.16 4.208-4.16h125.3m0-.794H5.24C2.485.314.228 2.544.228 5.267V34.99c0 2.723 2.257 4.953 5.012 4.953h125.3c2.755 0 5.01-2.23 5.01-4.954V5.266c0-2.723-2.255-4.953-5.01-4.953z" fill="#a6a6a6"/><path d="M45.934 16.195c0 .668-.2 1.203-.594 1.602-.453.473-1.043.71-1.766.71-.69 0-1.28-.24-1.765-.718-.486-.485-.728-1.08-.728-1.79s.242-1.305.727-1.785c.483-.48 1.073-.723 1.764-.723.344 0 .672.07.985.203.31.133.565.313.75.535l-.42.422c-.32-.38-.757-.566-1.316-.566-.504 0-.94.176-1.312.53-.367.357-.55.818-.55 1.384s.183 1.03.55 1.387c.37.35.808.53 1.312.53.535 0 .985-.18 1.34-.534.234-.235.367-.56.402-.973h-1.742v-.578h2.324c.028.125.036.246.036.363zM49.62 14.19H47.44v1.52h1.968v.58h-1.968v1.52h2.183v.588h-2.8v-4.796h2.8v.59zM52.223 18.398h-.618V14.19h-1.34v-.588h3.298v.59h-1.34v4.206zM55.95 18.398v-4.796h.616v4.796h-.617zM59.3 18.398h-.612V14.19h-1.344v-.588h3.3v.59h-1.343v4.206zM66.887 17.78c-.473.486-1.06.728-1.758.728-.704 0-1.29-.242-1.763-.727-.472-.483-.707-1.077-.707-1.78 0-.703.235-1.297.707-1.78.473-.486 1.06-.728 1.762-.728.694 0 1.28.242 1.753.73.476.49.71 1.08.71 1.778 0 .703-.234 1.297-.706 1.78zm-3.063-.4c.356.358.79.538 1.305.538.51 0 .948-.18 1.3-.54.355-.358.535-.82.535-1.378 0-.56-.18-1.02-.535-1.38-.352-.358-.79-.538-1.3-.538-.517 0-.95.18-1.306.54-.355.358-.535.82-.535 1.378 0 .56.18 1.02.534 1.38zM68.46 18.398v-4.796h.75l2.333 3.73h.027l-.027-.922v-2.808h.617v4.796h-.644l-2.442-3.914h-.027l.027.926v2.988h-.613z" fill="#fff" stroke="#fff" stroke-width=".16" stroke-miterlimit="10" transform="matrix(1.3 0 0 1.2 -9.8 -9.6)"/><path d="M68.526 21.865c-2.354 0-4.277 1.77-4.277 4.214 0 2.423 1.922 4.212 4.276 4.212 2.36 0 4.283-1.79 4.283-4.213 0-2.444-1.924-4.215-4.284-4.215zm0 6.768c-1.29 0-2.403-1.054-2.403-2.554 0-1.52 1.112-2.556 2.403-2.556 1.292 0 2.41 1.035 2.41 2.555 0 1.5-1.118 2.553-2.41 2.553zm-9.333-6.768c-2.36 0-4.278 1.77-4.278 4.214 0 2.423 1.918 4.212 4.278 4.212 2.358 0 4.278-1.79 4.278-4.213 0-2.444-1.92-4.215-4.277-4.215zm0 6.768c-1.293 0-2.408-1.054-2.408-2.554 0-1.52 1.115-2.556 2.408-2.556 1.292 0 2.403 1.035 2.403 2.555 0 1.5-1.11 2.553-2.403 2.553zm-11.107-5.477v1.79h4.327c-.127 1.002-.465 1.737-.984 2.25-.632.62-1.616 1.307-3.344 1.307-2.662 0-4.747-2.124-4.747-4.756s2.084-4.756 4.746-4.756c1.44 0 2.488.558 3.26 1.278l1.277-1.262c-1.08-1.02-2.52-1.804-4.537-1.804-3.65 0-6.72 2.936-6.72 6.545 0 3.61 3.07 6.545 6.72 6.545 1.974 0 3.456-.64 4.62-1.838 1.195-1.18 1.568-2.84 1.568-4.18 0-.416-.035-.798-.098-1.118h-6.09zm45.416 1.39c-.352-.944-1.438-2.68-3.65-2.68-2.194 0-4.02 1.706-4.02 4.213 0 2.36 1.807 4.212 4.23 4.212 1.958 0 3.088-1.18 3.553-1.868l-1.453-.957c-.485.7-1.146 1.166-2.1 1.166-.95 0-1.63-.43-2.065-1.277l5.702-2.332-.198-.48zm-5.814 1.402c-.05-1.625 1.277-2.457 2.227-2.457.744 0 1.376.368 1.586.895l-3.812 1.563zm-4.634 4.088h1.874V17.652h-1.874v12.384zm-3.07-7.233h-.063c-.42-.493-1.223-.938-2.24-.938-2.136 0-4.088 1.852-4.088 4.228 0 2.36 1.952 4.2 4.087 4.2 1.017 0 1.82-.45 2.24-.958h.064v.604c0 1.61-.87 2.476-2.276 2.476-1.145 0-1.855-.817-2.15-1.505l-1.63.674c.47 1.117 1.715 2.49 3.78 2.49 2.198 0 4.052-1.277 4.052-4.386V22.12h-1.776v.683zm-2.144 5.83c-1.292 0-2.373-1.07-2.373-2.54 0-1.485 1.08-2.57 2.373-2.57 1.273 0 2.277 1.085 2.277 2.57 0 1.47-1.004 2.54-2.277 2.54zm24.438-10.98h-4.483v12.383h1.87v-4.693h2.613c2.076 0 4.112-1.485 4.112-3.846 0-2.36-2.04-3.845-4.112-3.845zm.05 5.968h-2.664v-4.246h2.663c1.396 0 2.193 1.146 2.193 2.123 0 .958-.797 2.124-2.193 2.124zm11.555-1.78c-1.35 0-2.755.59-3.333 1.897l1.66.687c.356-.687 1.013-.91 1.707-.91.97 0 1.954.576 1.97 1.593v.13c-.34-.193-1.064-.48-1.955-.48-1.787 0-3.607.973-3.607 2.787 0 1.66 1.463 2.728 3.11 2.728 1.257 0 1.95-.56 2.387-1.213h.064v.956h1.805v-4.75c0-2.196-1.658-3.425-3.807-3.425zm-.225 6.788c-.612 0-1.464-.3-1.464-1.05 0-.958 1.063-1.326 1.983-1.326.823 0 1.21.18 1.71.416-.148 1.147-1.147 1.96-2.23 1.96zm10.61-6.516l-2.147 5.37h-.063l-2.222-5.37h-2.016l3.337 7.503-1.905 4.174h1.954l5.143-11.678h-2.08zm-16.85 7.924h1.874V17.652h-1.874v12.384z" fill="#fff"/><path d="M16.348 33.97c-.235-.247-.37-.63-.37-1.126V15.152c0-.496.135-.88.37-1.125l.058-.054 9.914 9.91v.234l-9.914 9.91-.058-.058z" fill="url(#i)" transform="matrix(1.3 0 0 -1.2 -9.8 49.9)"/><path d="M29.62 20.578l-3.3 3.305v.234l3.305 3.305.074-.043 3.913-2.228c1.117-.632 1.117-1.672 0-2.308L29.7 20.62l-.08-.042z" fill="url(#j)" transform="matrix(1.3 0 0 -1.2 -9.8 49.9)"/><path d="M29.7 20.62L26.32 24l-9.972-9.973c.37-.39.976-.437 1.664-.047L29.7 20.62" fill="url(#k)" transform="matrix(1.3 0 0 -1.2 -9.8 49.9)"/><path d="M29.7 27.38L18.01 34.02c-.688.386-1.293.34-1.664-.05L26.32 24l3.38 3.38z" fill="url(#l)" transform="matrix(1.3 0 0 -1.2 -9.8 49.9)"/><g mask="url(#m)" transform="matrix(1.3 0 0 -1.2 -9.8 49.9)"><g clip-path="url(#n)"><path d="M0 0h124v48H0V0z" fill="url(#o)"/></g></g><g mask="url(#p)" transform="matrix(1.3 0 0 -1.2 -9.8 49.9)"><g clip-path="url(#q)"><path d="M0 0h124v48H0V0z" fill="url(#r)"/></g></g><g><g mask="url(#s)" transform="matrix(1.3 0 0 -1.2 -9.8 49.9)"><g clip-path="url(#t)"><path d="M0 0h124v48H0V0z" fill="url(#u)"/></g></g></g><g><g mask="url(#v)" transform="matrix(1.3 0 0 -1.2 -9.8 49.9)"><g clip-path="url(#w)"><path d="M0 0h124v48H0V0z" fill="url(#x)"/></g></g></g></svg>
================================================
FILE: assets/_includes/recognition.html
================================================
{{#if presskit.awards}}
<section class="block">
<h2 id="awards">Awards & Recognition</h2>
<ul>
{{#each presskit.awards}}
<li>"{{description}}" <cite>{{info}}</cite></li>
{{/each}}
</ul>
</section>
{{/if}}
{{#if presskit.quotes}}
<section class="block">
<h2 id="articles">Selected Articles</h2>
<ul>
{{#each presskit.quotes}}
<li class="quote">
<blockquote class="quote__content" cite="{{link}}">
{{description}}
</blockquote>
<cite class="quote__author">
{{name}}, <a href="{{link}}">{{website}}</a>
</cite>
</li>
{{/each}}
</ul>
</section>
{{/if}}
{{#if presskit.additionals}}
<section class="block">
<h2 id="links">Additional Links</h2>
<dl>
{{#each presskit.additionals}}
<dt>{{title}}</dt>
<dd>
{{description}} <a href="{{link}}">{{domainURL link}}</a>.
</dd>
{{/each}}
</dl>
</section>
{{/if}}
================================================
FILE: assets/_includes/scripts.html
================================================
<script src="{{assets}}/js/masonry.min.js"></script>
<script src="{{assets}}/js/imagesloaded.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function onContentLoaded() {
// Add masonry layout on the galleries.
var galleries = document.querySelectorAll('.gallery');
for (var i = 0; i < galleries.length; i++) {
(function (index) {
var gallery = galleries[index];
imagesLoaded(gallery, function onImagesLoaded() {
new Masonry(gallery, {
itemSelector: '.gallery__item'
});
});
})(i);
}
// Add mini-player to gifs.
var gifLinks = document.querySelectorAll('a[href$=".gif"]');
for (var i = 0; i < gifLinks.length; i++) {
(function (index) {
var link = gifLinks[index];
var img = link.querySelector('img');
// Don't add the mini-player if no thumbnail.
// It's already a gif, so no need to turn it on.
if (img.src.indexOf('.thumb.jpg') === -1) {
return
}
link.className = 'show-overlay'
link.onclick = function (e) {
// Make it work on IE8.
if (e.preventDefault) {
const openLinkInBackground = e.ctrlKey || e.metaKey;
// Stop default behavior, except if ctrl/cmd modifier is used.
// In this case, we want the link to go through and open
// its target in a background tab.
if (!openLinkInBackground) e.preventDefault();
e.stopPropagation();
} else {
// We don't care for the special background tab behavior on old IE.
e.returnValue = false;
}
// Remove overlay and remove thumbnail section of the image.
link.className = '';
img.src = img.src.replace('.thumb.jpg', '');
// Remove event listener after first trigger.
link.onclick = null;
}
}(i));
}
});
</script>
{{#if hamburger}}
<script src="{{assets}}/js/hamburger.js"></script>
{{/if}}
{{#if analytics}}
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', '{{analytics}}', 'auto');
ga('send', 'pageview');
</script>
{{/if}}
================================================
FILE: assets/_includes/team.html
================================================
<section class="block grid _team-fix-margin-top">
{{#if presskit.credits}}
<article class="grid__item grid__item--flexible">
{{#if title}}
<h2 id="credits">{{title}}</h2>
{{else}}
<h2 id="credits">{{presskit.title}} Credits</h2>
{{/if}}
<dl>
{{#each presskit.credits}}
<dt>{{person}}</dt>
<dd>
{{#if website}}
<a href="{{website}}">{{role}}</a>
{{else}}
{{role}}
{{/if}}
</dd>
{{/each}}
</dl>
</article>
{{/if}}
{{#if presskit.contacts}}
<article class="grid__item grid__item--flexible">
<h2 id="contact">Contact</h2>
<dl>
{{#each presskit.contacts}}
<dt>{{name}}</dt>
<dd>
{{#if mail}}
<a href="mailto:{{mail}}">{{mail}}</a>
{{/if}}
{{#if link}}
<a href="{{link}}">{{prettyURL link}}</a>
{{/if}}
</dd>
{{/each}}
</dl>
</article>
{{/if}}
</section>
================================================
FILE: assets/_includes/widgets.html
================================================
{{#if presskit.widgets}}
<section class="block">
<h2 id="widgets">Widgets</h2>
<div class="grid">
{{#if presskit.widgets.appstore}}
<p class="grid__item">
<a
href="https://itunes.apple.com/app/id{{trim presskit.widgets.appstore}}"
target="_blank"
class="widget widget--appstore">
{{>appstore}}
</a>
</p>
{{/if}}
{{#if presskit.widgets.playstore}}
<p class="grid__item">
<a
href="https://play.google.com/store/apps/details?id={{trim presskit.widgets.playstore}}"
target="_blank"
class="widget widget--playstore">
{{>playstore}}
</a>
</p>
{{/if}}
</div>
{{#if presskit.widgets.steam}}
<p>
<iframe src="https://store.steampowered.com/widget/{{trim presskit.widgets.steam}}/" frameborder="0" class="widget widget--steam"></iframe>
</p>
{{/if}}
{{#if presskit.widgets.humble}}
<p>
<iframe src="https://www.humblebundle.com/widget/v2/product/{{trim presskit.widgets.humble}}" frameborder="0" scrolling="no" class="widget widget--humble"></iframe>
</p>
{{/if}}
{{#if presskit.widgets.itch}}
<p>
<iframe src="https://itch.io/embed/{{trim presskit.widgets.itch}}?dark=true" frameborder="0" class="widget widget--itch"></iframe>
</p>
{{/if}}
{{#if presskit.widgets.gamejolt}}
<p>
<iframe src="https://widgets.gamejolt.com/package/v1?key={{trim presskit.widgets.gamejolt}}" frameborder="0" class="widget widget--gamejolt"></iframe>
</p>
{{/if}}
{{#if presskit.widgets.bandcamp}}
<p>
<!-- TODO: customize `linkcol` with brand color. -->
<iframe src="https://bandcamp.com/EmbeddedPlayer/album={{trim presskit.widgets.bandcamp}}/size=large/bgcol=ffffff/linkcol=3398ff/tracklist=false/artwork=small/transparent=true/" seamless class="widget widget--bandcamp"></iframe>
</p>
{{/if}}
</section>
{{/if}}
================================================
FILE: assets/company.html
================================================
<!DOCTYPE html>
<html>
<head>
{{>head}}
</head>
<body>
<div class="page grid">
{{>nav}}
<div class="page-wrapper grid__item">
<header class="page-header">
{{#if images.header}}
<img src="./images/{{images.header}}" alt="{{presskit.title}}" title="{{presskit.title}}">
{{/if}}
</header>
<main class="page-content" role="main">
<section class="block grid">
{{>factsheet}}
<article class="description grid__item">
{{>description}}
<h2 id="projects">Projects</h2>
<ul>
{{#each products}}
<li>
<a href="{{permalink path}}">{{title}}</a>
</li>
{{/each}}
</ul>
</article>
</section>
{{>assets}}
{{>recognition}}
{{>team title="Team & Repeating Collaborator"}}
</main>
{{>footer}}
</div>
</div>
{{>scripts}}
</body>
</html>
================================================
FILE: assets/css/dark.css
================================================
@charset "UTF-8";
/* ---------------------------------------------------------- *\
* Globals.
\* ---------------------------------------------------------- */
html {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
body {
position: relative;
min-height: 100vh;
margin: 0;
}
/* ---------------------------------------------------------- *\
* Typography & colors.
\* ---------------------------------------------------------- */
html {
color: #cccccc;
background: #1a1a2e;
font: 62.5%/1.6 "Trebuchet MS", Arial, Helvetica, sans-serif;
}
body {
font-size: 1.26em;
}
h1,
h2 {
color: #e0e0e0;
font-family: Georgia, "Times New Roman", Times, serif;
font-weight: normal;
}
::-moz-selection {
color: white;
background: #4a90d9;
}
::selection {
color: white;
background: #4a90d9;
}
/* ---------------------------------------------------------- *\
* Basic elements.
\* ---------------------------------------------------------- */
h1 {
margin: 0;
font-size: 2.8em;
}
h2 {
margin: 25px 0 15px 0;
font-size: 1.9em;
}
h3 {
font-size: inherit;
font-weight: bold;
}
img {
max-width: 100%;
}
p {
margin: 15px 0;
}
p:last-child {
margin-bottom: 0;
}
/* Lists. */
ul,
ol {
margin: 15px 0;
padding-left: 30px;
}
ul:last-child,
ol:last-child {
margin-bottom: 0;
}
ul {
list-style-type: square;
}
dl {
margin: 0;
}
dt {
color: #e0e0e0;
font-weight: bold;
}
dd {
margin: 0;
}
dd + dt {
margin-top: 15px;
}
/* ---------------------------------------------------------- *\
* Layout.
\* ---------------------------------------------------------- */
body {
padding: 20px 0;
}
.page {
max-width: 1180px;
margin: 0 auto;
padding: 0 25px;
}
@media (min-width: 800px) {
.page {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.page-nav {
min-width: 25%;
}
.page-wrapper {
max-width: 75%;
}
.factsheet {
min-width: 33%;
}
}
/* ---------------------------------------------------------- *\
* Micro Components.
\* ---------------------------------------------------------- */
.clearfix::after {
display: table;
clear: both;
content: " ";
}
.capitalize {
text-transform: capitalize;
}
/* ---------------------------------------------------------- *\
* Components - Links.
\* ---------------------------------------------------------- */
a,
a:visited {
color: #5dade2;
text-decoration: none;
}
a:hover {
color: #85c1e9;
text-decoration: underline;
}
a:focus {
outline: thin dotted;
}
a:active,
a:hover {
outline: none;
}
/* ---------------------------------------------------------- *\
* Components - Page Header.
\* ---------------------------------------------------------- */
.page-header img {
display: block;
}
/* ---------------------------------------------------------- *\
* Components - Nav.
\* ---------------------------------------------------------- */
.nav {
margin-bottom: 30px;
}
.nav__title {
padding: 0 15px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
line-height: 1;
}
.nav__title a,
.nav__title a:visited,
.nav__title a:hover {
color: inherit;
text-decoration: none;
}
.nav__subtitle {
padding: 5px 15px;
}
.nav__list {
padding: 0;
list-style: none;
}
.nav__item,
.nav__item:visited {
display: block;
padding: 5px 15px;
color: inherit;
}
.nav__item:hover {
color: inherit;
background: rgba(255, 255, 255, 0.05);
text-decoration: none;
}
.nav__item:focus {
background: rgba(255, 255, 255, 0.05);
outline: none;
}
/* ---------------------------------------------------------- *\
* Nav - Hamburger.
\* ---------------------------------------------------------- */
.nav__toggle {
display: none;
margin: 15px 0;
padding: 0 15px;
}
.nav__toggle .button {
display: block;
height: 30px;
}
/* Nav list variant for hamburger feature. */
.nav__list--slider {
overflow-y: hidden;
max-height: 0;
-webkit-transition: max-height 0.5s ease-in-out;
-moz-transition: max-height 0.5s ease-in-out;
-o-transition: max-height 0.5s ease-in-out;
transition: max-height 0.5s ease-in-out;
}
@media (min-width: 800px) {
.nav__toggle {
/* Always hide the button on big screens. */
display: none !important;
}
.nav__list--slider {
/* Always show the list on big screens. So disable slider. */
max-height: unset !important;
}
}
/* ---------------------------------------------------------- *\
* Components - Block.
\* ---------------------------------------------------------- */
.block {
margin-bottom: 15px;
padding-bottom: 15px;
border-bottom: 1px solid #333355;
}
.block__notice {
margin-bottom: 15px;
padding: 10px;
color: #5dade2;
background: #16213e;
border: 1px solid rgba(93, 173, 226, 0.3);
border-radius: 4px;
}
.block__notice a {
color: inherit;
}
/* ---------------------------------------------------------- *\
* Components - Grid.
\* ---------------------------------------------------------- */
@media (min-width: 800px) {
.grid {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.grid__item:not(:first-child) {
padding-left: 25px;
}
.grid__item--flexible {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
}
/* ---------------------------------------------------------- *\
* Components - Images Gallery.
\* ---------------------------------------------------------- */
.gallery {
margin-left: -25px;
font-size: 0; /* Disable the small space below the images. */
}
.gallery__item {
float: left;
width: 100%;
padding-bottom: 25px;
padding-left: 25px;
}
.gallery__item img {
width: 100%;
}
.gallery__item a[href$=".gif"] {
position: relative;
display: block;
}
.gallery__item a[href$=".gif"]:focus:active {
outline: none;
}
.gallery__item a[href$=".gif"]::after {
position: absolute;
z-index: 1;
top: 0;
left: 0;
display: none;
width: 100%;
height: 100%;
padding: 20px;
background: rgba(0, 0, 0, 0.45);
content: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAMAAAC7IEhfAAAABGdBTUEAALGPC/xhBQAAAFFQTFRFAAAA/////////////////////////////Pz8/Pz8/Pz8/f39/f39/f39/f39/f39/f39/Pz8/Pz8/Pz8/Pz8/v7+/f39/f39/f39/f39/f395zF2nQAAABt0Uk5TAAEJCxQeIEpXYGFnc3V2d5WarK2/xNLb3N3m8ZFI2gAAAOlJREFUOMuVlckOgzAMRAdIWUrKUgK4/v8P7QWVLA64c0RPY9mxByBQ3U/LSrQuU18jKzM49uQGI2KVJY5Etkq5ZmNBWxNhheWMbOFz5cxZzaXnd8Exz6en5UvZXx98o6OjarsDtyop/Hrnixt/zm3x/AggGQCj/6UFHpLpAMBFICRTB9Qcg6JpjV4ABdMekwSmphMWGUTRBaYL1gwYma6gLBiYEvYr8HTZ9aXzzVDYjHo88sA7SgaufkJhKRI7Zgdg0K5ZtLiC3bG46lPQH5f6XPUBoI8UdUjpY08fpH9EMwAzqsL+5vfxBcKnb1vURTbUAAAAAElFTkSuQmCC");
align-items: center;
justify-content: center;
}
.gallery__item a[href$=".gif"].show-overlay::after {
display: flex;
}
@media (min-width: 500px) {
.gallery__item {
width: 50%;
}
}
/* ---------------------------------------------------------- *\
* Components - Logo.
\* ---------------------------------------------------------- */
@media (min-width: 800px) {
.logo {
max-width: 49%;
}
}
/* ---------------------------------------------------------- *\
* Components - Video player.
\* ---------------------------------------------------------- */
.video-player {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
}
.video-player__frame {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* ---------------------------------------------------------- *\
* Components - Quote.
\* ---------------------------------------------------------- */
.quote__content {
margin: 0;
}
.quote__content::before {
content: open-quote;
}
.quote__content::after {
content: close-quote;
}
.quote__author::before {
content: "-";
}
/* ---------------------------------------------------------- *\
* Components - Button.
\* ---------------------------------------------------------- */
.button {
display: inline-block;
padding: 5px 10px;
color: #cccccc;
background: -webkit-linear-gradient(top, #2a2a4a, #1a1a2e);
background: linear-gradient(to bottom, #2a2a4a, #1a1a2e);
border: 1px solid #444466;
border-radius: 5px;
}
.button:hover {
cursor: pointer;
text-decoration: none;
}
.button:focus {
border: 1px solid #4a90d9;
outline: none;
}
.button:active {
color: white;
background: -webkit-linear-gradient(top, #4a90d9, #357abd);
background: linear-gradient(to bottom, #4a90d9, #357abd);
}
/* ---------------------------------------------------------- *\
* Widgets.
\* ---------------------------------------------------------- */
.widget {
width: 100%;
}
.widget--steam {
height: 190px;
}
.widget--humble {
height: 328px;
}
@media (max-width: 505px) {
.widget--humble {
height: 205px;
}
}
.widget--itch {
height: 167px;
}
.widget--gamejolt {
height: 245px;
}
.widget--bandcamp {
width: 100%;
height: 120px;
border: 0;
}
/* ---------------------------------------------------------- *\
* Hacks.
\* ---------------------------------------------------------- */
@media (min-width: 800px) {
._team-fix-margin-top {
margin-top: -15px;
}
}
/* ---------------------------------------------------------- *\
* Components - Footer.
\* ---------------------------------------------------------- */
.page-footer {
color: #888888;
}
.page-footer a,
.page-footer a:visited {
color: #5dade2;
}
================================================
FILE: assets/css/light.css
================================================
@charset "UTF-8";
/* ---------------------------------------------------------- *\
* Globals.
\* ---------------------------------------------------------- */
html {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
body {
position: relative;
min-height: 100vh;
margin: 0;
}
/* ---------------------------------------------------------- *\
* Typography & colors.
\* ---------------------------------------------------------- */
html {
color: #444444;
font: 62.5%/1.6 "Trebuchet MS", Arial, Helvetica, sans-serif;
}
body {
font-size: 1.26em;
}
h1,
h2 {
font-family: Georgia, "Times New Roman", Times, serif;
font-weight: normal;
}
::-moz-selection {
color: white;
background: #3398ff;
}
::selection {
color: white;
background: #3398ff;
}
/* ---------------------------------------------------------- *\
* Basic elements.
\* ---------------------------------------------------------- */
h1 {
margin: 0;
font-size: 2.8em;
}
h2 {
margin: 25px 0 15px 0;
font-size: 1.9em;
}
h3 {
font-size: inherit;
font-weight: bold;
}
img {
max-width: 100%;
}
p {
margin: 15px 0;
}
p:last-child {
margin-bottom: 0;
}
/* Lists. */
ul,
ol {
margin: 15px 0;
padding-left: 30px;
}
ul:last-child,
ol:last-child {
margin-bottom: 0;
}
ul {
list-style-type: square;
}
dl {
margin: 0;
}
dt {
font-weight: bold;
}
dd {
margin: 0;
}
dd + dt {
margin-top: 15px;
}
/* ---------------------------------------------------------- *\
* Layout.
\* ---------------------------------------------------------- */
body {
padding: 20px 0;
}
.page {
max-width: 1180px;
margin: 0 auto;
padding: 0 25px;
}
@media (min-width: 800px) {
.page {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.page-nav {
min-width: 25%;
}
.page-wrapper {
max-width: 75%;
}
.factsheet {
min-width: 33%;
}
}
/* ---------------------------------------------------------- *\
* Micro Components.
\* ---------------------------------------------------------- */
.clearfix::after {
display: table;
clear: both;
content: " ";
}
.capitalize {
text-transform: capitalize;
}
/* ---------------------------------------------------------- *\
* Components - Links.
\* ---------------------------------------------------------- */
a,
a:visited {
color: #0077dd;
text-decoration: none;
}
a:hover {
color: #005599;
text-decoration: underline;
}
a:focus {
outline: thin dotted;
}
a:active,
a:hover {
outline: none;
}
/* ---------------------------------------------------------- *\
* Components - Page Header.
\* ---------------------------------------------------------- */
.page-header img {
display: block;
}
/* ---------------------------------------------------------- *\
* Components - Nav.
\* ---------------------------------------------------------- */
.nav {
margin-bottom: 30px;
}
.nav__title {
padding: 0 15px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
line-height: 1;
}
.nav__title a,
.nav__title a:visited,
.nav__title a:hover {
color: inherit;
text-decoration: none;
}
.nav__subtitle {
padding: 5px 15px;
}
.nav__list {
padding: 0;
list-style: none;
}
.nav__item,
.nav__item:visited {
display: block;
padding: 5px 15px;
color: inherit;
}
.nav__item:hover {
color: inherit;
background: rgba(0, 0, 0, 0.05);
text-decoration: none;
}
.nav__item:focus {
background: rgba(0, 0, 0, 0.05);
outline: none;
}
/* ---------------------------------------------------------- *\
* Nav - Hamburger.
\* ---------------------------------------------------------- */
.nav__toggle {
display: none;
margin: 15px 0;
padding: 0 15px;
}
.nav__toggle .button {
display: block;
height: 30px;
}
/* Nav list variant for hamburger feature. */
.nav__list--slider {
overflow-y: hidden;
max-height: 0;
-webkit-transition: max-height 0.5s ease-in-out;
-moz-transition: max-height 0.5s ease-in-out;
-o-transition: max-height 0.5s ease-in-out;
transition: max-height 0.5s ease-in-out;
}
@media (min-width: 800px) {
.nav__toggle {
/* Always hide the button on big screens. */
display: none !important;
}
.nav__list--slider {
/* Always show the list on big screens. So disable slider. */
max-height: unset !important;
}
}
/* ---------------------------------------------------------- *\
* Components - Block.
\* ---------------------------------------------------------- */
.block {
margin-bottom: 15px;
padding-bottom: 15px;
border-bottom: 1px solid rgb(221, 221, 221);
}
.block__notice {
margin-bottom: 15px;
padding: 10px;
color: #027194;
background: #ebf7fd;
border: 1px solid rgba(45,112,145,0.3);
border-radius: 4px;
}
.block__notice a {
color: inherit;
}
/* ---------------------------------------------------------- *\
* Components - Grid.
\* ---------------------------------------------------------- */
@media (min-width: 800px) {
.grid {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.grid__item:not(:first-child) {
padding-left: 25px;
}
.grid__item--flexible {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
}
/* ---------------------------------------------------------- *\
* Components - Images Gallery.
\* ---------------------------------------------------------- */
.gallery {
margin-left: -25px;
font-size: 0; /* Disable the small space below the images. */
}
.gallery__item {
float: left;
width: 100%;
padding-bottom: 25px;
padding-left: 25px;
}
.gallery__item img {
width: 100%;
}
.gallery__item a[href$=".gif"] {
position: relative;
display: block;
}
.gallery__item a[href$=".gif"]:focus:active {
outline: none;
}
.gallery__item a[href$=".gif"]::after {
position: absolute;
z-index: 1;
top: 0;
left: 0;
display: none;
width: 100%;
height: 100%;
padding: 20px;
background: rgba(0, 0, 0, 0.25);
content: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAMAAAC7IEhfAAAABGdBTUEAALGPC/xhBQAAAFFQTFRFAAAA/////////////////////////////Pz8/Pz8/Pz8/f39/f39/f39/f39/f39/f39/Pz8/Pz8/Pz8/Pz8/v7+/f39/f39/f39/f39/f395zF2nQAAABt0Uk5TAAEJCxQeIEpXYGFnc3V2d5WarK2/xNLb3N3m8ZFI2gAAAOlJREFUOMuVlckOgzAMRAdIWUrKUgK4/v8P7QWVLA64c0RPY9mxByBQ3U/LSrQuU18jKzM49uQGI2KVJY5Etkq5ZmNBWxNhheWMbOFz5cxZzaXnd8Exz6en5UvZXx98o6OjarsDtyop/Hrnixt/zm3x/AggGQCj/6UFHpLpAMBFICRTB9Qcg6JpjV4ABdMekwSmphMWGUTRBaYL1gwYma6gLBiYEvYr8HTZ9aXzzVDYjHo88sA7SgaufkJhKRI7Zgdg0K5ZtLiC3bG46lPQH5f6XPUBoI8UdUjpY08fpH9EMwAzqsL+5vfxBcKnb1vURTbUAAAAAElFTkSuQmCC");
align-items: center;
justify-content: center;
}
.gallery__item a[href$=".gif"].show-overlay::after {
display: flex;
}
@media (min-width: 500px) {
.gallery__item {
width: 50%;
}
}
/* ---------------------------------------------------------- *\
* Components - Logo.
\* ---------------------------------------------------------- */
@media (min-width: 800px) {
.logo {
max-width: 49%;
}
}
/* ---------------------------------------------------------- *\
* Components - Video player.
\* ---------------------------------------------------------- */
.video-player {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
}
.video-player__frame {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* ---------------------------------------------------------- *\
* Components - Quote.
\* ---------------------------------------------------------- */
.quote__content {
margin: 0;
}
.quote__content::before {
content: open-quote;
}
.quote__content::after {
content: close-quote;
}
.quote__author::before {
content: "-";
}
/* ---------------------------------------------------------- *\
* Components - Button.
\* ---------------------------------------------------------- */
.button {
display: inline-block;
padding: 5px 10px;
background: -webkit-linear-gradient(top, white, #fafafa);
background: linear-gradient(to bottom, white, #fafafa);
border: 1px solid #cccccc;
border-radius: 5px;
}
.button:hover {
cursor: pointer;
text-decoration: none;
}
.button:focus {
border: 1px solid #3398ff;
outline: none;
}
.button:active {
color: white;
background: -webkit-linear-gradient(top, #3398ff, #0077dd);
background: linear-gradient(to bottom, #3398ff, #0077dd);
}
/* ---------------------------------------------------------- *\
* Widgets.
\* ---------------------------------------------------------- */
.widget {
width: 100%;
}
.widget--steam {
height: 190px;
}
.widget--humble {
height: 328px;
}
@media (max-width: 505px) {
.widget--humble {
height: 205px;
}
}
.widget--itch {
height: 167px;
}
.widget--gamejolt {
height: 245px;
}
.widget--bandcamp {
width: 100%;
height: 120px;
border: 0;
}
/* ---------------------------------------------------------- *\
* Hacks.
\* ---------------------------------------------------------- */
@media (min-width: 800px) {
._team-fix-margin-top {
margin-top: -15px;
}
}
================================================
FILE: assets/css/normalize.css
================================================
/*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */
/**
* 1. Change the default font family in all browsers (opinionated).
* 2. Correct the line height in all browsers.
* 3. Prevent adjustments of font size after orientation changes in
* IE on Windows Phone and in iOS.
*/
/* Document
========================================================================== */
html {
font-family: sans-serif; /* 1 */
line-height: 1.15; /* 2 */
-ms-text-size-adjust: 100%; /* 3 */
-webkit-text-size-adjust: 100%; /* 3 */
}
/* Sections
========================================================================== */
/**
* Remove the margin in all browsers (opinionated).
*/
body {
margin: 0;
}
/**
* Add the correct display in IE 9-.
*/
article,
aside,
footer,
header,
nav,
section {
display: block;
}
/**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/* Grouping content
========================================================================== */
/**
* Add the correct display in IE 9-.
* 1. Add the correct display in IE.
*/
figcaption,
figure,
main { /* 1 */
display: block;
}
/**
* Add the correct margin in IE 8.
*/
figure {
margin: 1em 40px;
}
/**
* 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE.
*/
hr {
box-sizing: content-box; /* 1 */
height: 0; /* 1 */
overflow: visible; /* 2 */
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
pre {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
/* Text-level semantics
========================================================================== */
/**
* 1. Remove the gray background on active links in IE 10.
* 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
*/
a {
background-color: transparent; /* 1 */
-webkit-text-decoration-skip: objects; /* 2 */
}
/**
* Remove the outline on focused links when they are also active or hovered
* in all browsers (opinionated).
*/
a:active,
a:hover {
outline-width: 0;
}
/**
* 1. Remove the bottom border in Firefox 39-.
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/
abbr[title] {
border-bottom: none; /* 1 */
text-decoration: underline; /* 2 */
text-decoration: underline dotted; /* 2 */
}
/**
* Prevent the duplicate application of `bolder` by the next rule in Safari 6.
*/
b,
strong {
font-weight: inherit;
}
/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/
b,
strong {
font-weight: bolder;
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
/**
* Add the correct font style in Android 4.3-.
*/
dfn {
font-style: italic;
}
/**
* Add the correct background and color in IE 9-.
*/
mark {
background-color: #ff0;
color: #000;
}
/**
* Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/* Embedded content
========================================================================== */
/**
* Add the correct display in IE 9-.
*/
audio,
video {
display: inline-block;
}
/**
* Add the correct display in iOS 4-7.
*/
audio:not([controls]) {
display: none;
height: 0;
}
/**
* Remove the border on images inside links in IE 10-.
*/
img {
border-style: none;
}
/**
* Hide the overflow in IE.
*/
svg:not(:root) {
overflow: hidden;
}
/* Forms
========================================================================== */
/**
* 1. Change the font styles in all browsers (opinionated).
* 2. Remove the margin in Firefox and Safari.
*/
button,
input,
optgroup,
select,
textarea {
font-family: sans-serif; /* 1 */
font-size: 100%; /* 1 */
line-height: 1.15; /* 1 */
margin: 0; /* 2 */
}
/**
* Show the overflow in IE.
* 1. Show the overflow in Edge.
*/
button,
input { /* 1 */
overflow: visible;
}
/**
* Remove the inheritance of text transform in Edge, Firefox, and IE.
* 1. Remove the inheritance of text transform in Firefox.
*/
button,
select { /* 1 */
text-transform: none;
}
/**
* 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
* controls in Android 4.
* 2. Correct the inability to style clickable types in iOS and Safari.
*/
button,
html [type="button"], /* 1 */
[type="reset"],
[type="submit"] {
-webkit-appearance: button; /* 2 */
}
/**
* Remove the inner border and padding in Firefox.
*/
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0;
}
/**
* Restore the focus styles unset by the previous rule.
*/
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText;
}
/**
* Change the border, margin, and padding in all browsers (opinionated).
*/
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
/**
* 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from `fieldset` elements in IE.
* 3. Remove the padding so developers are not caught out when they zero out
* `fieldset` elements in all browsers.
*/
legend {
box-sizing: border-box; /* 1 */
color: inherit; /* 2 */
display: table; /* 1 */
max-width: 100%; /* 1 */
padding: 0; /* 3 */
white-space: normal; /* 1 */
}
/**
* 1. Add the correct display in IE 9-.
* 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/
progress {
display: inline-block; /* 1 */
vertical-align: baseline; /* 2 */
}
/**
* Remove the default vertical scrollbar in IE.
*/
textarea {
overflow: auto;
}
/**
* 1. Add the correct box sizing in IE 10-.
* 2. Remove the padding in IE 10-.
*/
[type="checkbox"],
[type="radio"] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
}
/**
* Correct the cursor style of increment and decrement buttons in Chrome.
*/
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
*/
[type="search"] {
-webkit-appearance: textfield; /* 1 */
outline-offset: -2px; /* 2 */
}
/**
* Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
*/
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button; /* 1 */
font: inherit; /* 2 */
}
/* Interactive
========================================================================== */
/*
* Add the correct display in IE 9-.
* 1. Add the correct display in Edge, IE, and Firefox.
*/
details, /* 1 */
menu {
display: block;
}
/*
* Add the correct display in all browsers.
*/
summary {
display: list-item;
}
/* Scripting
========================================================================== */
/**
* Add the correct display in IE 9-.
*/
canvas {
display: inline-block;
}
/**
* Add the correct display in IE.
*/
template {
display: none;
}
/* Hidden
========================================================================== */
/**
* Add the correct display in IE 10-.
*/
[hidden] {
display: none;
}
================================================
FILE: assets/css/print.css
================================================
@charset "UTF-8";
/* ---------------------------------------------------------- *\
* Print stylesheet for presskit.html
\* ---------------------------------------------------------- */
@media print {
/* Reset layout to single column. */
body {
padding: 0;
font-size: 12pt;
}
.page {
display: block;
max-width: none;
padding: 0;
}
.page-wrapper {
max-width: none;
}
/* Hide navigation. */
.page-nav {
display: none;
}
/* Full-width factsheet + description. */
.grid {
display: block;
}
.grid__item:not(:first-child) {
padding-left: 0;
}
/* Factsheet as a horizontal block before content. */
.factsheet {
min-width: 100%;
margin-bottom: 15px;
padding-bottom: 15px;
border-bottom: 1px solid #ccc;
}
.factsheet__list {
columns: 2;
column-gap: 30px;
}
.factsheet__list dt {
break-after: avoid;
}
.factsheet__list dd + dt {
break-before: auto;
}
/* Images: keep them reasonable. */
.page-header img {
max-height: 200px;
object-fit: contain;
}
.gallery__item {
width: 33.33%;
page-break-inside: avoid;
}
/* Hide interactive elements. */
.nav__toggle,
.video-player,
.widget,
.press {
display: none;
}
/* Links: show URL after link text. */
a[href^="http"]::after {
content: " (" attr(href) ")";
font-size: 0.85em;
font-style: italic;
}
/* But not for internal nav or anchor links. */
a[href^="#"]::after,
a[href^="."]::after,
a[href^="mailto"]::after {
content: none;
}
/* Avoid page breaks inside blocks. */
.block {
page-break-inside: avoid;
}
/* Footer. */
.page-footer {
margin-top: 30px;
padding-top: 15px;
border-top: 1px solid #ccc;
font-size: 0.85em;
}
}
================================================
FILE: assets/js/hamburger.js
================================================
'use strict'
;(function () {
// Preamble: this code is very specific, and clearly made for then
// main nav.
// Currently, this functionality is not need elsewhere, so we didn't
// bother to generalized this.
// No guards too.
// To disable this feature, just remove the script tag.
window.addEventListener('DOMContentLoaded', function () {
const container = document.querySelector('#hamburger')
const button = document.querySelector('#hamburger-toggle')
const target = document.querySelector('#hamburger-target')
// Show hamburger (hidden by default if no js or hamburger disabled).
container.style.display = 'block'
// Get target height.
const baseHeight = getElementHeight(target)
// Do that after the height calculation!
target.className += ' nav__list--slider'
button.addEventListener('click', function (e) {
e.preventDefault()
e.stopPropagation()
const currentMaxHeight = parseInt(target.style.maxHeight, 10)
// If not set or 0, toggle to full height.
// Otherwise, hide.
if (!currentMaxHeight || currentMaxHeight === 0) {
target.style.cssText = 'max-height: ' + baseHeight + 'px'
} else {
target.style.cssText = 'max-height: 0px'
}
})
})
// Clone an element outside the screen to safely get its height, then destroy it.
function getElementHeight (element) {
const clone = element.cloneNode(true)
clone.style.cssText = 'visibility: hidden; display: block; margin: -999px 0'
const height = (element.parentNode.appendChild(clone)).clientHeight
element.parentNode.removeChild(clone)
return height
}
})()
================================================
FILE: assets/product.html
================================================
<!DOCTYPE html>
<html>
<head>
{{>head}}
</head>
<body>
<div class="page grid">
{{>nav}}
<div class="page-wrapper grid__item">
<header class="page-header">
{{#if images.header}}
<img src="./images/{{images.header}}" alt="{{presskit.title}}" title="{{presskit.title}}">
{{/if}}
</header>
<main class="page-content" role="main">
<section class="block grid">
{{>factsheet}}
<article class="description grid__item">
{{>description}}
<h2 id="features">Features</h2>
<ul>
{{#each presskit.features}}
<li>{{.}}</li>
{{/each}}
</ul>
</article>
</section>
{{>mailchimp}}
{{>assets}}
{{>widgets}}
{{>recognition}}
{{>about}}
{{>team}}
</main>
{{>footer}}
</div>
</div>
{{>scripts}}
</body>
</html>
================================================
FILE: assets/redirect.html
================================================
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="refresh" content="0; url={{link}}">
<title>Redirecting…</title>
</head>
<body>
<p>
<a href="{{link}}">Click here to go to {{name}}.</a>
</p>
</body>
</html>
================================================
FILE: assets/templates/company.xml
================================================
<?xml version="1.0" encoding="utf-8"?>
<company>
<title></title>
<based-in></based-in>
<founding-date></founding-date>
<website></website>
<press-contact>
<!-- Mail address -->
</press-contact>
<!-- Google analytics ID: -->
<analytics></analytics>
<phone></phone>
<address>
<line>
<!-- Street -->
</line>
<line>
<!-- City -->
</line>
<line>
<!-- Country -->
</line>
</address>
<socials>
<social>
<name></name>
<link>
<!-- URL starting with http or https -->
</link>
</social>
</socials>
<description></description>
<!-- Choose between a single block: -->
<history></history>
<!-- Or multiple blocks: -->
<!--
<histories>
<history>
<header></header>
<text></text>
</history>
</histories>
-->
<trailers>
<trailer>
<name></name>
<!-- Pick one: -->
<youtube>
<!-- Video ID only, not the full URL -->
</youtube>
<vimeo>
<!-- Video ID only, not the full URL -->
</vimeo>
</trailer>
</trailers>
<awards>
<award>
<description></description>
<info></info>
</award>
</awards>
<quotes>
<quote>
<description></description>
<name></name>
<website></website>
<link></link>
</quote>
</quotes>
<additionals>
<additional>
<title></title>
<description></description>
<link></link>
</additional>
</additionals>
<credits>
<credit>
<person></person>
<role></role>
<!-- Optional: -->
<website></website>
</credit>
</credits>
<contacts>
<contact>
<name></name>
<!-- Pick one: -->
<mail></mail>
<link></link>
</contact>
</contacts>
</company>
================================================
FILE: assets/templates/product.xml
================================================
<?xml version="1.0" encoding="utf-8"?>
<product>
<title></title>
<release-date></release-date>
<website></website>
<!-- Link to request press copy: -->
<press-copy-request></press-copy-request>
<platforms>
<platform>
<name></name>
<link></link>
</platform>
</platforms>
<prices>
<price>
<currency></currency>
<value></value>
</price>
</prices>
<description></description>
<!-- Choose between a single block: -->
<history></history>
<!-- Or multiple blocks: -->
<!--
<histories>
<history>
<header></header>
<text></text>
</history>
</histories>
-->
<features>
<feature></feature>
</features>
<trailers>
<trailer>
<name></name>
<!-- Pick one: -->
<youtube>
<!-- Video ID only, not the full URL -->
</youtube>
<vimeo>
<!-- Video ID only, not the full URL -->
</vimeo>
</trailer>
</trailers>
<!-- You can set your widgets here (optional): -->
<widgets>
<steam>
<!-- Steam ID -->
<!-- e.g. 424242 -->
</steam>
<humble>
<!-- Humble Bundle product/id -->
<!-- e.g. mysupergame/42AAbB42dC -->
</humble>
<itch>
<!-- itch.io ID -->
<!-- e.g. 42424 -->
</itch>
<gamejolt>
<!-- Game Jolt package ID -->
<!-- e.g. 4AbCd2Ef -->
</gamejolt>
<bandcamp>
<!-- Bandcamp ID -->
<!-- e.g. 4242424242 -->
</bandcamp>
</widgets>
<awards>
<award>
<description></description>
<info></info>
</award>
</awards>
<quotes>
<quote>
<description></description>
<name></name>
<website></website>
<link></link>
</quote>
</quotes>
<additionals>
<additional>
<title></title>
<description></description>
<link></link>
</additional>
</additionals>
<credits>
<credit>
<person></person>
<role></role>
<!-- Optional: -->
<website></website>
</credit>
</credits>
<contacts>
<contact>
<name></name>
<!-- Pick one: -->
<mail></mail>
<link></link>
</contact>
</contacts>
</product>
================================================
FILE: bin/presskit
================================================
#!/usr/bin/env node
const chalk = require('chalk')
const {program} = require('commander')
// -------------------------------------------------------------
// Constants.
// -------------------------------------------------------------
const version = require('../package.json').version
const description = `Re-implementation of ${chalk.blue('http://dopresskit.com/')} as a static site generator.
Read the documentation on ${chalk.blue('https://github.com/pixelnest/presskit.html')}.`
// -------------------------------------------------------------
// Module.
// -------------------------------------------------------------
program
.version(version)
.description(description)
.command('build [entrypoint]', 'build the presskit from the folder [entry point]')
.command('new [destination]', 'create an empty template in the [destination] folder')
.parse(process.argv)
================================================
FILE: bin/presskit-build.js
================================================
'use strict'
const path = require('upath')
const chalk = require('chalk')
const { program } = require('commander')
const presskit = require('../lib/index')
// -------------------------------------------------------------
// Constants.
// -------------------------------------------------------------
const version = require('../package.json').version
const usage = chalk.green('[options]') + ' ' + chalk.yellow('<entry point>')
const description = `Generate a presskit based on information found in \`data.xml\` files. The format and the ouput are (nearly) the same as ${chalk.blue('http://dopresskit.com/')}. However, this command will generate static HTML files.
More information on ${chalk.blue('https://github.com/pixelnest/presskit.html#usage')}.`
// -------------------------------------------------------------
// Module.
// -------------------------------------------------------------
program
.version(version)
.description(description)
.usage(usage)
.option(
'-o, --output [destination]', 'output the build folder to the [destination] (defaults to ./build)',
path.join(process.cwd(), 'build')
)
.option('-w, --watch', 'watch project for changes and re-generate if needed')
.option('-d, --dev', 'add monitoring of CSS and templates in watch mode')
.option('-p, --port [8080]', 'set the server port to [8080]', 8080)
.option('-D, --clean-build-folder', 'delete the build folder beforehand')
.option('-L, --pretty-links', 'hide index.html at the end of links')
.option('-M, --collapse-menu', 'use a collapsed menu (hamburger) on small screens')
.option('-B, --base-url [base]', 'prefix absolute urls with [base] (if your presskit is not at the root of your server)', '/')
.option('-T, --ignore-thumbnails', 'use original images in galleries instead of thumbnails (will increase pages size)')
.option('-C, --css [name]', 'CSS theme to use: a built-in name (light, dark) or a path to a custom file', 'light')
.parse(process.argv)
const opts = program.opts()
presskit.runBuildCommand({
entryPoint: program.args[0],
cleanBuildFolder: opts.cleanBuildFolder,
ignoreThumbnails: opts.ignoreThumbnails,
prettyLinks: opts.prettyLinks,
baseUrl: opts.baseUrl,
css: opts.css,
hamburger: opts.collapseMenu,
output: opts.output,
watch: opts.watch,
port: opts.port,
dev: opts.dev
})
================================================
FILE: bin/presskit-new.js
================================================
'use strict'
const chalk = require('chalk')
const { program } = require('commander')
const presskit = require('../lib/index')
// -------------------------------------------------------------
// Constants.
// -------------------------------------------------------------
const version = require('../package.json').version
const usage = chalk.green('[options]') + ' ' + chalk.yellow('<destination>')
const description = `Create an empty \`data.xml\` file and its \`images/\` folder in the <destination> folder (current working directory by default).
There are two template types available: ${chalk.blue('company')} (default) or ${chalk.blue('product')}.`
// -------------------------------------------------------------
// Module.
// -------------------------------------------------------------
program
.version(version)
.description(description)
.usage(usage)
.option('-t, --type [company]', 'set the type of the new `data.xml` file', 'company')
.parse(process.argv)
presskit.runNewCommand(program.opts().type, program.args[0] || process.cwd())
================================================
FILE: data/data.xml
================================================
<!-- # Company — presskit.html -->
<!--
**This is your company page**. It should not focus on a specific product, but present your whole company. The journalists won't, most of the time, know you or your studio. With this page, you will have an opportunity to show your people, your work, your history and your contributions in a standard format. This is not a replacement for your website, but a quick way for the press to know you faster.
[Check the actual rendered page for the code you'll find below.](http://pixelnest.io/presskit.html/example/)
If you don't have a `data.xml` yet, the easiest way to start is to run this command in your presskit folder:
```bash
presskit new -t company
```
Then, open the generated `data.xml` file and fill the blanks while following this guide.
Okay… ready? Let's do this.
<hr>
For your products' `data.xml`, [refer to the product documentation](../product/).
<hr>
-->
<!-- Don't forget to set your XML header correctly. -->
<?xml version="1.0" encoding="utf-8"?>
<!--
Use a `<company>` tag for your main `data.xml` file. **It will be the root page of your presskit.**
-->
<company>
<!-- ## General Information -->
<!-- Begin with your company name, location, and miscellaneous information. -->
<title>Pizza Burger Studio</title>
<based-in>Paris, France</based-in>
<founding-date>February 6, 2014</founding-date>
<website>https://github.com/pixelnest/presskit.html</website>
<phone>+42 (3) 42 42 42 42 42</phone>
<!--
For the address, use as many lines as you want.
Don't forget to specify the country.
-->
<address>
<line>42 street of Pixelnest</line>
<line>35000 Rennes</line>
<line>France</line>
</address>
<!--
This section allows you to set your social networks links.
You can put whatever you like.
But Twitter and Facebook look like obvious choices. ;)
-->
<socials>
<social>
<name>Twitter @pizzaburgerstudio</name>
<link>https://twitter.com/pizzaburgerstudio</link>
</social>
<social>
<name>Facebook Page</name>
<link>https://facebook.com/pizzaburgerstudio</link>
</social>
<social>
<name>Skype</name>
<link>callto:pizzaburgerstudio</link>
</social>
</socials>
<!-- This field is the primary mail address you want to give to the press. -->
<press-contact>contact@pizzaburger.studio</press-contact>
<!--
Use this tag to set your Google analytics tracking code.
**It's, of course, completely optional.**
-->
<analytics>UA-42424242-0</analytics>
<!-- ## Description & History -->
<!-- The description is a simple short block to describe your company or studio. Be brief. -->
<description>
This is a fake presskit for a fake company called Pizza Burger Studio.
</description>
<!--
Tell your story with the `<history>` tag.
You have two possibilities here.
- Use an `<histories>` block like in the example.
- Or use a single `<history>` block if you don't have much to say.
You can't have both.
Example of a single block:
```xml
<history>
Hello, world.
</history>
```
-->
<histories>
<history>
<header>Built with presskit.html</header>
<text>This presskit is generated by presskit.html, a tool created by Pixelnest Studio.</text>
</history>
<history>
<header>Free and Open Source</header>
<text>Find presskit.html on https://github.com/pixelnest/presskit.html</text>
</history>
</histories>
<!-- ## Trailers -->
<!--
Add your videos. Because we are in the `<company>` page, try to be representative of all the products of your company.
You can use YouTube and/or Vimeo. Only one is needed, and only one is recommended.
Don't put the full link: just the ID is necessary.
If you want to provide a link to download the video, add this tag in `<trailer>`:
```
<download>https://example.com/video.mp4</download>
```
-->
<trailers>
<trailer>
<name>Example from YouTube. Don't give a full link: the ID is enough</name>
<youtube>er416Ad3R1g</youtube>
</trailer>
<trailer>
<name>Example from both YouTube and Vimeo</name>
<youtube>YH3c1QZzRK4</youtube>
<vimeo>108650530</vimeo>
</trailer>
<!--
You can also add a video link without YouTube or Vimeo.
In this case, only a sentence will be shown, along with a download link.
-->
<trailer>
<name>Interview with Damien Mayance and Matthieu Oger of Pixenest Studio</name>
<download>https://github.com/pixelnest/presskit.html</download>
</trailer>
</trailers>
<!-- ## Awards, quotes & links -->
<!--
You got awards? Great! Put them here.
But don't add too much here: this is your company page, not a product one.
-->
<awards>
<award>
<description>An award</description>
<info>Name, location, 29 April, 1988</info>
</award>
<award>
<description>A nomination</description>
<info>Name, location, 03 October, 1988</info>
</award>
</awards>
<!--
Quotes are used to show the appreciation of your users.
Show something important, something nice, or something funny, for example.
-->
<quotes>
<quote>
<description>There's not enough pizza in your life. It's never enough.</description>
<name>@mrhelmut</name>
<website>Tweet</website>
<link>
https://twitter.com/mrhelmut/status/717276362814447616
</link>
</quote>
</quotes>
<!--
Need to link to a resource? A small product? An RSS feed?
You want to show your blog? Your personal Twitter account?
Put those here, in the `<additionals>` tag.
-->
<additionals>
<additional>
<title>Patricia Pizza Twitter</title>
<description>@patpiz at</description>
<link>https://twitter.com/patpiz</link>
</additional>
<additional>
<title>Bob Burger Twitter</title>
<description>@bobburg at</description>
<link>https://twitter.com/bobburg</link>
</additional>
</additionals>
<!-- ## Team & Contacts -->
<!--
This is for your people.
Add yourself, of course, but also your **frequent** collaborators for example.
If a collaborator has only worked on one product, add her/him on this product page instead.
The `<role>` tag can be anything you want. But we recommend to, at least, put the company name for the founders/employees. This will distinguish this person from the external collaborators.
The `<website>` tag is optional.
-->
<credits>
<credit>
<person>Patricia Pizza</person>
<role>Founder, Developer, Pizza Burger Studio</role>
</credit>
<credit>
<person>Bob Burger</person>
<role>Founder, Designer, Pizza Burger Studio</role>
</credit>
<credit>
<person>Jake Burgza</person>
<role>Artist, Collaborator</role>
<website>
http://www.jakeburgza.com
</website>
</credit>
<credit>
<person>Sophia Pizer</person>
<role>Musician, Collaborator</role>
<website>
http://www.sophiapizer.com
</website>
</credit>
</credits>
<!--
Add more contact information.
For the company page, you can repeat your social network accounts, as well as another contact mail address, or your company website.
For each item, pick one between a `<link>` and `<mail>` tag.
-->
<contacts>
<contact>
<name>Inquiries</name>
<mail>contact@pizzaburger.studio</mail>
</contact>
<contact>
<name>Twitter</name>
<link>
https://twitter.com/pizzaburgerstudio
</link>
</contact>
<contact>
<name>Facebook</name>
<link>
https://facebook.com/pizzaburgerstudio
</link>
</contact>
<contact>
<name>Web</name>
<link>
http://pizzaburger.studio
</link>
</contact>
</contacts>
<!--
Well-done, it's over for this one. ;)
[It's time to do the product pages.](../product/)
-->
</company>
================================================
FILE: data/product/data.xml
================================================
<!-- # Product — presskit.html -->
<!--
**This is your product or game page**. It should focus on _ONLY_ one product. This is not a replacement for your product's website, but a quick way for the press to know it faster.
[Check the actual rendered page for the code you'll find below.](http://pixelnest.io/presskit.html/example/product/)
If you don't have a `data.xml` yet, the easiest way to start is to run this command in your presskit folder:
```bash
presskit new -t product
```
Then, open the generated `data.xml` file and fill the blanks while following this guide.
<hr>
For your company' `data.xml`, [refer to the company documentation](../company/).
<hr>
-->
<!-- Don't forget to set your XML header correctly. -->
<?xml version="1.0" encoding="utf-8"?>
<!--
Use a `<product>` or `<game>` tag.
-->
<product>
<!-- ## General Information -->
<!-- Begin with your product name, website, and miscellaneous information. -->
<title>My Super Game</title>
<website>http://pizzaburger.studio/mysupergame</website>
<!-- You can also add an URL to a request page for this product. A button will be displayed on the page. -->
<press-copy-request>
http://pizzaburger.studio/mysupergame/request/
</press-copy-request>
<!--
If you have one or many publishers for this product, you can add them here.
The `<based-in>` and `<website>` tags are optional.
-->
<partners>
<partner>
<type>Publisher</type>
<title>Pixelnest Studio</title>
<website>https://pixelnest.io/</website>
<based-in>Rennes, France</based-in>
</partner>
<partner>
<type>Distributor</type>
<title>Pizza Oven LLC</title>
</partner>
</partners>
<!-- Add as many dates, platforms and prices as needed. -->
<release-dates>
<release-date>04 Feb, 2016</release-date>
<release-date>10 Oct, 2016</release-date>
</release-dates>
<!--
Put all the platforms your product is available on.
`<link>` tag is optional.
-->
<platforms>
<platform>
<name>PC / Mac</name>
<link>http://itch.io/</link>
</platform>
<platform>
<name>Steam</name>
<link>http://steampowered.com/</link>
</platform>
<platform>
<name>Inc New Store (TBA)</name>
</platform>
</platforms>
<!-- Show the price of your product. Try to be exhaustive, it will be helpful for a reviewer. -->
<prices>
<price>
<currency>EUR</currency>
<value>20</value>
</price>
<price>
<currency>USD</currency>
<value>20</value>
</price>
<price>
<currency>GBP</currency>
<value>16</value>
</price>
<price>
<currency>JPY</currency>
<value>2300</value>
</price>
</prices>
<!-- ## Relations -->
<!--
You can specify relations between products using the `<relations>` tag.
Then, on this page product, you will see a new line in the factsheet:
```
DLC:
My Super Game: Ultimate Edition
```
Of course, the `Product Name` value is clickable.
In the related product page, a new value will also be added:
```
DLC of:
My Super Game
```
_Obviously, since the name we provide in the example is not a real product (ie., the product data.xml does not exist), this tag will be ignored for this page._
You can have as many relations as you want. You can use it to show DLCs, expansions, sequels, prequels, etc.
**Warning**: you need to rebuild the presskit to see the changes.
-->
<relations>
<relation>
<type>DLC</type>
<product>My Super Game: Ultimate Edition</product>
</relation>
</relations>
<!-- ## Description & History -->
<!-- Describe your product here. Be brief. -->
<description>
Here goes a quick description of your product or game. Be concise and explain in very few words the concept or the gameplay and why it's really cool and why everyone should use or play it.
</description>
<!--
Tell the story of your product with the `<history>` tag.
You have two possibilities here.
- Use an `<history>` block like in the example.
- Or use an `<histories>` block if you have tons of things to say.
You can't have both.
You can see an example of the `<histories>` block in the company page.
-->
<history>
Add some storytelling here. Not the scenario of your game, but rather some backgrounds behind the creation process: why are you making this game? Most projects starts with a cool story.
</history>
<!-- ## Features -->
<!--
Show the most important features of your product.
Focus on what is really important and is a key aspect of it.
-->
<features>
<feature>
List some "Key Sellings Points" to grab player's attention.
</feature>
<feature>
Don't be too generic ("pixel art graphics!"), don't be too pretentious ("most incredible game experience!").
</feature>
<feature>
Also, people like numbers, so you can add some (450 weapons, hundreds of levels, dozens of hours of playtime!).
</feature>
<feature>
Need ideas? Maybe explain some game modes?
</feature>
<feature>
It would be a nice place to say something about multiplayer, if you have some.
</feature>
<feature>
Have you translated your game? (You probably should btw.)
</feature>
</features>
<!-- ## Trailers -->
<!--
Add your videos. Trailer, teaser, snippets? Let's roll!
You can use YouTube and/or Vimeo. Only one is needed, and only one is recommended.
Don't put the full link: just the ID is necessary.
If you want to provide a link to download the video, add this tag in `<trailer>`:
```
<download>https://example.com/video.mp4</download>
```
-->
<trailers>
<trailer>
<name>Release Trailer</name>
<youtube>EtXajayBLzw</youtube>
</trailer>
<trailer>
<name>Gameplay Video #2</name>
<youtube>EPNK1j3TMjU</youtube>
</trailer>
<trailer>
<name>Early Access Trailer</name>
<youtube>EtyQMcc19xY</youtube>
</trailer>
<trailer>
<name>Short gameplay preview: Burger vs Pizza</name>
<download>https://github.com/pixelnest/presskit.html</download>
</trailer>
</trailers>
<!-- ## Widgets -->
<!--
Add your widgets to your product here.
If the product is not a game or an app, you won't probably need that.
We only need the ID of the product on the store.
This section is **optional**, and you can use as many widgets (or none) as you want.
**Warning: widgets import many scripts and assets. This may have a penalty on your page size and responsiveness.**
-->
<widgets>
<appstore>950812012</appstore>
<playstore>com.noodlecake.altosadventure</playstore>
<steam>347160</steam>
<humble>steredenn/7SDLfk23hw</humble>
<itch>27992</itch>
<bandcamp>1135613467</bandcamp>
</widgets>
<!-- ## Awards, quotes & links -->
<!--
You got awards for this product? Great! Put them here.
**Optional.**
-->
<awards>
<award>
<description>Game of the year without a doubt</description>
<info>Saint-Père-Marc-En-Poulet (France), 04 February, 2016</info>
</award>
<award>
<description>Best soundtrack</description>
<info>A great game festival (World), 01 October, 2015</info>
</award>
<award>
<description>Best MYGAMENGINE game</description>
<info>Deep into the woods (Forest), 31 March, 2014</info>
</award>
</awards>
<!--
Quotes are used to show the appreciation of your users.
Show something important, something nice, or something funny, for example.
**Optional.**
-->
<quotes>
<quote>
<description>This is my favorite game of all time.</description>
<name>Mum</name>
<website>At home</website>
<link>http://at.home/</link>
</quote>
<quote>
<description>A very serious quote you're very proud of by someone you respect.</description>
<name>Master</name>
<website>Master's website</website>
<link>http://mast.er/</link>
</quote>
<quote>
<description>10/10 would play it again and again.</description>
<name>A friendly anonymous Steam reviewer</name>
<website>Steam review</website>
<link>http://steam.review/</link>
</quote>
</quotes>
<!--
Need to link to a resource? A small product? An RSS feed? An OST?
A press release?
Put those here, in the `<additionals>` tag.
**Optional.**
-->
<additionals>
<additional>
<title>Original Soundtrack (OST)</title>
<description>Composed by an awesome musician. Listen for free, download for $3 at</description>
<link>http://zandernoriega.bandcamp.com/album/steredenn-original-soundtrack</link>
</additional>
<additional>
<title>Release announcement</title>
<description>Announcement are exciting, so we usually make blog posts or news about it on</description>
<link>http://pixelnest.io/journal/</link>
</additional>
</additionals>
<!-- ## About -->
<!--
An "About Your Company" section is automatically generated from the content of the company page.
This <abouts> tag is completely **optional**. If you don't want this section, just delete it. But sometimes, you want to add a description for a partner.
This is this the place to do it.
For example, if you have a publisher, you can speak a bit more about it here.
Most of the time, you should link that to the <partner> tag above, if you want to explain a partner a bit more. But you could use this section for other purpose.
The <link> tag is optional.
-->
<abouts>
<about>
<title>Pixelnest Studio</title>
<description>Pixelnest Studio is a small French studio which creates games, websites and apps. They made Steredenn, a roguelike-shmup in big pixels. They are also behind presskit.html, which you are probably using if you are reading this.</description>
<link>https://pixelnest.io/</link>
</about>
<about>
<title>Pizza Oven LLC</title>
<description>This is a fake company to illustrate the fact that you can have multiple about tags in your product page.</description>
</about>
</abouts>
<!-- ## Team & Contacts -->
<!--
This is for the product team.
Add yourself, of course, but also your collaborators, freelancers and/or partners for example.
The `<role>` tag can be anything you want. But we recommend to, at least, put the company name for the founders/employees. This will distinguish this person from the external collaborators.
The `<website>` tag is optional.
-->
<credits>
<credit>
<person>Krokmou</person>
<role>Bot Leader, Game Designer, Pixelnest Studio</role>
</credit>
<credit>
<person>Hiccup</person>
<role>Developer, Pixelnest Studio</role>
</credit>
<credit>
<person>Astrid</person>
<website>http://www.astridsupergame.com</website>
<role>Musician, Freelancer</role>
</credit>
</credits>
<!--
Add more contact information.
Add links to your product social accounts, as well as mail specific to this product. And the website.
For each item, pick one between a `<link>` and `<mail>` tag.
-->
<contacts>
<contact>
<name>Inquiries</name>
<mail>mysupergame@pizzaburger.studio</mail>
</contact>
<contact>
<name>Twitter</name>
<link>
https://twitter.com/pizzaburgerstudio
</link>
</contact>
<contact>
<name>Facebook</name>
<link>
https://facebook.com/pizzaburgerstudio
</link>
</contact>
<contact>
<name>Web</name>
<link>
http://mysupergame.pizzaburger.studio/
</link>
</contact>
</contacts>
<!-- All done! 🍾 -->
</product>
================================================
FILE: docs/company/index.html
================================================
<!DOCTYPE html>
<html>
<head>
<title>Company — presskit.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link rel="stylesheet" href="../css/docco.css">
</head>
<body>
<div id="container">
<div id="background"></div>
<ul class="sections">
<li id="section-1">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-1">¶</a>
</div>
<h1 id="company-presskit-html">Company — presskit.html</h1>
</div>
</li>
<li id="section-2">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-2">¶</a>
</div>
<p><strong>This is your company page</strong>. It should not focus on a specific product, but present your whole company. The journalists won’t, most of the time, know you or your studio. With this page, you will have an opportunity to show your people, your work, your history and your contributions in a standard format. This is not a replacement for your website, but a quick way for the press to know you faster.</p>
<p><a href="http://pixelnest.io/presskit.html/example/">Check the actual rendered page for the code you’ll find below.</a></p>
<p>If you don’t have a <code>data.xml</code> yet, the easiest way to start is to run this command in your presskit folder:</p>
<pre><code class="language-bash">presskit new -t company</code></pre>
<p>Then, open the generated <code>data.xml</code> file and fill the blanks while following this guide.</p>
<p>Okay… ready? Let’s do this.</p>
<hr>
<p>For your products’ <code>data.xml</code>, <a href="../product/">refer to the product documentation</a>.</p>
<hr>
</div>
</li>
<li id="section-3">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-3">¶</a>
</div>
<p>Don’t forget to set your XML header correctly.</p>
</div>
<div class="content"><div class='highlight'><pre><span class="php"><span class="hljs-meta"><?</span>xml version=<span class="hljs-string">"1.0"</span> encoding=<span class="hljs-string">"utf-8"</span><span class="hljs-meta">?></span></span></pre></div></div>
</li>
<li id="section-4">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-4">¶</a>
</div>
<p>Use a <code><company></code> tag for your main <code>data.xml</code> file. <strong>It will be the root page of your presskit.</strong></p>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-tag"><<span class="hljs-name">company</span>></span></pre></div></div>
</li>
<li id="section-5">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-5">¶</a>
</div>
<h2 id="general-information">General Information</h2>
</div>
</li>
<li id="section-6">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-6">¶</a>
</div>
<p>Begin with your company name, location, and miscellaneous information.</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-tag"><<span class="hljs-name">title</span>></span>Pizza Burger Studio<span class="hljs-tag"></<span class="hljs-name">title</span>></span>
<span class="hljs-tag"><<span class="hljs-name">based-in</span>></span>Paris, France<span class="hljs-tag"></<span class="hljs-name">based-in</span>></span>
<span class="hljs-tag"><<span class="hljs-name">founding-date</span>></span>February 6, 2014<span class="hljs-tag"></<span class="hljs-name">founding-date</span>></span>
<span class="hljs-tag"><<span class="hljs-name">website</span>></span>https://github.com/pixelnest/presskit.html<span class="hljs-tag"></<span class="hljs-name">website</span>></span>
<span class="hljs-tag"><<span class="hljs-name">phone</span>></span>+42 (3) 42 42 42 42 42<span class="hljs-tag"></<span class="hljs-name">phone</span>></span></pre></div></div>
</li>
<li id="section-7">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-7">¶</a>
</div>
<p>For the address, use as many lines as you want.
Don’t forget to specify the country.</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-tag"><<span class="hljs-name">address</span>></span>
<span class="hljs-tag"><<span class="hljs-name">line</span>></span>42 street of Pixelnest<span class="hljs-tag"></<span class="hljs-name">line</span>></span>
<span class="hljs-tag"><<span class="hljs-name">line</span>></span>35000 Rennes<span class="hljs-tag"></<span class="hljs-name">line</span>></span>
<span class="hljs-tag"><<span class="hljs-name">line</span>></span>France<span class="hljs-tag"></<span class="hljs-name">line</span>></span>
<span class="hljs-tag"></<span class="hljs-name">address</span>></span></pre></div></div>
</li>
<li id="section-8">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-8">¶</a>
</div>
<p>This section allows you to set your social networks links.
You can put whatever you like.</p>
<p>But Twitter and Facebook look like obvious choices. ;)</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-tag"><<span class="hljs-name">socials</span>></span>
<span class="hljs-tag"><<span class="hljs-name">social</span>></span>
<span class="hljs-tag"><<span class="hljs-name">name</span>></span>Twitter @pizzaburgerstudio<span class="hljs-tag"></<span class="hljs-name">name</span>></span>
<span class="hljs-tag"><<span class="hljs-name">link</span>></span>https://twitter.com/pizzaburgerstudio<span class="hljs-tag"></<span class="hljs-name">link</span>></span>
<span class="hljs-tag"></<span class="hljs-name">social</span>></span>
<span class="hljs-tag"><<span class="hljs-name">social</span>></span>
<span class="hljs-tag"><<span class="hljs-name">name</span>></span>Facebook Page<span class="hljs-tag"></<span class="hljs-name">name</span>></span>
<span class="hljs-tag"><<span class="hljs-name">link</span>></span>https://facebook.com/pizzaburgerstudio<span class="hljs-tag"></<span class="hljs-name">link</span>></span>
<span class="hljs-tag"></<span class="hljs-name">social</span>></span>
<span class="hljs-tag"><<span class="hljs-name">social</span>></span>
<span class="hljs-tag"><<span class="hljs-name">name</span>></span>Skype<span class="hljs-tag"></<span class="hljs-name">name</span>></span>
<span class="hljs-tag"><<span class="hljs-name">link</span>></span>callto:pizzaburgerstudio<span class="hljs-tag"></<span class="hljs-name">link</span>></span>
<span class="hljs-tag"></<span class="hljs-name">social</span>></span>
<span class="hljs-tag"></<span class="hljs-name">socials</span>></span></pre></div></div>
</li>
<li id="section-9">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-9">¶</a>
</div>
<p>This field is the primary mail address you want to give to the press.</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-tag"><<span class="hljs-name">press-contact</span>></span>contact@pizzaburger.studio<span class="hljs-tag"></<span class="hljs-name">press-contact</span>></span></pre></div></div>
</li>
<li id="section-10">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-10">¶</a>
</div>
<p>Use this tag to set your Google analytics tracking code.</p>
<p><strong>It’s, of course, completely optional.</strong></p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-tag"><<span class="hljs-name">analytics</span>></span>UA-42424242-0<span class="hljs-tag"></<span class="hljs-name">analytics</span>></span></pre></div></div>
</li>
<li id="section-11">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-11">¶</a>
</div>
<h2 id="description-history">Description & History</h2>
</div>
</li>
<li id="section-12">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-12">¶</a>
</div>
<p>The description is a simple short block to describe your company or studio. Be brief.</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-tag"><<span class="hljs-name">description</span>></span>
This is a fake presskit for a fake company called Pizza Burger Studio.
<span class="hljs-tag"></<span class="hljs-name">description</span>></span></pre></div></div>
</li>
<li id="section-13">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-13">¶</a>
</div>
<p>Tell your story with the <code><history></code> tag.</p>
<p>You have two possibilities here.</p>
<ul>
<li>Use an <code><histories></code> block like in the example.</li>
<li>Or use a single <code><history></code> block if you don’t have much to say.</li>
</ul>
<p>You can’t have both.</p>
<p>Example of a single block:</p>
<pre><code class="language-xml"><span class="hljs-tag"><<span class="hljs-name">history</span>></span>
Hello, world.
<span class="hljs-tag"></<span class="hljs-name">history</span>></span></code></pre>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-tag"><<span class="hljs-name">histories</span>></span>
<span class="hljs-tag"><<span class="hljs-name">history</span>></span>
<span class="hljs-tag"><<span class="hljs-name">header</span>></span>Built with presskit.html<span class="hljs-tag"></<span class="hljs-name">header</span>></span>
<span class="hljs-tag"><<span class="hljs-name">text</span>></span>This presskit is generated by presskit.html, a tool created by Pixelnest Studio.<span class="hljs-tag"></<span class="hljs-name">text</span>></span>
<span class="hljs-tag"></<span class="hljs-name">history</span>></span>
<span class="hljs-tag"><<span class="hljs-name">history</span>></span>
<span class="hljs-tag"><<span class="hljs-name">header</span>></span>Free and Open Source<span class="hljs-tag"></<span class="hljs-name">header</span>></span>
<span class="hljs-tag"><<span class="hljs-name">text</span>></span>Find presskit.html on https://github.com/pixelnest/presskit.html<span class="hljs-tag"></<span class="hljs-name">text</span>></span>
<span class="hljs-tag"></<span class="hljs-name">history</span>></span>
<span class="hljs-tag"></<span class="hljs-name">histories</span>></span></pre></div></div>
</li>
<li id="section-14">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-14">¶</a>
</div>
<h2 id="trailers">Trailers</h2>
</div>
</li>
<li id="section-15">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-15">¶</a>
</div>
<p>Add your videos. Because we are in the <code><company></code> page, try to be representative of all the products of your company.</p>
<p>You can use YouTube and/or Vimeo. Only one is needed, and only one is recommended.</p>
<p>Don’t put the full link: just the ID is necessary.</p>
<p>If you want to provide a link to download the video, add this tag in <code><trailer></code>:</p>
<pre><code><span class="hljs-tag"><<span class="hljs-name">download</span>></span>https://example.com/video.mp4<span class="hljs-tag"></<span class="hljs-name">download</span>></span></code></pre>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-tag"><<span class="hljs-name">trailers</span>></span>
<span class="hljs-tag"><<span class="hljs-name">trailer</span>></span>
<span class="hljs-tag"><<span class="hljs-name">name</span>></span>Example from YouTube. Don't give a full link: the ID is enough<span class="hljs-tag"></<span class="hljs-name">name</span>></span>
<span class="hljs-tag"><<span class="hljs-name">youtube</span>></span>er416Ad3R1g<span class="hljs-tag"></<span class="hljs-name">youtube</span>></span>
<span class="hljs-tag"></<span class="hljs-name">trailer</span>></span>
<span class="hljs-tag"><<span class="hljs-name">trailer</span>></span>
<span class="hljs-tag"><<span class="hljs-name">name</span>></span>Example from both YouTube and Vimeo<span class="hljs-tag"></<span class="hljs-name">name</span>></span>
<span class="hljs-tag"><<span class="hljs-name">youtube</span>></span>YH3c1QZzRK4<span class="hljs-tag"></<span class="hljs-name">youtube</span>></span>
<span class="hljs-tag"><<span class="hljs-name">vimeo</span>></span>108650530<span class="hljs-tag"></<span class="hljs-name">vimeo</span>></span>
<span class="hljs-tag"></<span class="hljs-name">trailer</span>></span></pre></div></div>
</li>
<li id="section-16">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-16">¶</a>
</div>
<p>You can also add a video link without YouTube or Vimeo.</p>
<p>In this case, only a sentence will be shown, along with a download link.</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-tag"><<span class="hljs-name">trailer</span>></span>
<span class="hljs-tag"><<span class="hljs-name">name</span>></span>Interview with Damien Mayance and Matthieu Oger of Pixenest Studio<span class="hljs-tag"></<span class="hljs-name">name</span>></span>
<span class="hljs-tag"><<span class="hljs-name">download</span>></span>https://github.com/pixelnest/presskit.html<span class="hljs-tag"></<span class="hljs-name">download</span>></span>
<span class="hljs-tag"></<span class="hljs-name">trailer</span>></span>
<span class="hljs-tag"></<span class="hljs-name">trailers</span>></span></pre></div></div>
</li>
<li id="section-17">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-17">¶</a>
</div>
<h2 id="awards-quotes-links">Awards, quotes & links</h2>
</div>
</li>
<li id="section-18">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-18">¶</a>
</div>
<p>You got awards? Great! Put them here.</p>
<p>But don’t add too much here: this is your company page, not a product one.</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-tag"><<span class="hljs-name">awards</span>></span>
<span class="hljs-tag"><<span class="hljs-name">award</span>></span>
<span class="hljs-tag"><<span class="hljs-name">description</span>></span>An award<span class="hljs-tag"></<span class="hljs-name">description</span>></span>
<span class="hljs-tag"><<span class="hljs-name">info</span>></span>Name, location, 29 April, 1988<span class="hljs-tag"></<span class="hljs-name">info</span>></span>
<span class="hljs-tag"></<span class="hljs-name">award</span>></span>
<span class="hljs-tag"><<span class="hljs-name">award</span>></span>
<span class="hljs-tag"><<span class="hljs-name">description</span>></span>A nomination<span class="hljs-tag"></<span class="hljs-name">description</span>></span>
<span class="hljs-tag"><<span class="hljs-name">info</span>></span>Name, location, 03 October, 1988<span class="hljs-tag"></<span class="hljs-name">info</span>></span>
<span class="hljs-tag"></<span class="hljs-name">award</span>></span>
<span class="hljs-tag"></<span class="hljs-name">awards</span>></span></pre></div></div>
</li>
<li id="section-19">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-19">¶</a>
</div>
<p>Quotes are used to show the appreciation of your users.</p>
<p>Show something important, something nice, or something funny, for example.</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-tag"><<span class="hljs-name">quotes</span>></span>
<span class="hljs-tag"><<span class="hljs-name">quote</span>></span>
<span class="hljs-tag"><<span class="hljs-name">description</span>></span>There's not enough pizza in your life. It's never enough.<span class="hljs-tag"></<span class="hljs-name">description</span>></span>
<span class="hljs-tag"><<span class="hljs-name">name</span>></span>@mrhelmut<span class="hljs-tag"></<span class="hljs-name">name</span>></span>
<span class="hljs-tag"><<span class="hljs-name">website</span>></span>Tweet<span class="hljs-tag"></<span class="hljs-name">website</span>></span>
<span class="hljs-tag"><<span class="hljs-name">link</span>></span>
https://twitter.com/mrhelmut/status/717276362814447616
<span class="hljs-tag"></<span class="hljs-name">link</span>></span>
<span class="hljs-tag"></<span class="hljs-name">quote</span>></span>
<span class="hljs-tag"></<span class="hljs-name">quotes</span>></span></pre></div></div>
</li>
<li id="section-20">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-20">¶</a>
</div>
<p>Need to link to a resource? A small product? An RSS feed?</p>
<p>You want to show your blog? Your personal Twitter account?</p>
<p>Put those here, in the <code><additionals></code> tag.</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-tag"><<span class="hljs-name">additionals</span>></span>
<span class="hljs-tag"><<span class="hljs-name">additional</span>></span>
<span class="hljs-tag"><<span class="hljs-name">title</span>></span>Patricia Pizza Twitter<span class="hljs-tag"></<span class="hljs-name">title</span>></span>
<span class="hljs-tag"><<span class="hljs-name">description</span>></span>@patpiz at<span class="hljs-tag"></<span class="hljs-name">description</span>></span>
<span class="hljs-tag"><<span class="hljs-name">link</span>></span>https://twitter.com/patpiz<span class="hljs-tag"></<span class="hljs-name">link</span>></span>
<span class="hljs-tag"></<span class="hljs-name">additional</span>></span>
<span class="hljs-tag"><<span class="hljs-name">additional</span>></span>
<span class="hljs-tag"><<span class="hljs-name">title</span>></span>Bob Burger Twitter<span class="hljs-tag"></<span class="hljs-name">title</span>></span>
<span class="hljs-tag"><<span class="hljs-name">description</span>></span>@bobburg at<span class="hljs-tag"></<span class="hljs-name">description</span>></span>
<span class="hljs-tag"><<span class="hljs-name">link</span>></span>https://twitter.com/bobburg<span class="hljs-tag"></<span class="hljs-name">link</span>></span>
<span class="hljs-tag"></<span class="hljs-name">additional</span>></span>
<span class="hljs-tag"></<span class="hljs-name">additionals</span>></span></pre></div></div>
</li>
<li id="section-21">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-21">¶</a>
</div>
<h2 id="team-contacts">Team & Contacts</h2>
</div>
</li>
<li id="section-22">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-22">¶</a>
</div>
<p>This is for your people.</p>
<p>Add yourself, of course, but also your <strong>frequent</strong> collaborators for example.</p>
<p>If a collaborator has only worked on one product, add her/him on this product page instead.</p>
<p>The <code><role></code> tag can be anything you want. But we recommend to, at least, put the company name for the founders/employees. This will distinguish this person from the external collaborators.</p>
<p>The <code><website></code> tag is optional.</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-tag"><<span class="hljs-name">credits</span>></span>
<span class="hljs-tag"><<span class="hljs-name">credit</span>></span>
<span class="hljs-tag"><<span class="hljs-name">person</span>></span>Patricia Pizza<span class="hljs-tag"></<span class="hljs-name">person</span>></span>
<span class="hljs-tag"><<span class="hljs-name">role</span>></span>Founder, Developer, Pizza Burger Studio<span class="hljs-tag"></<span class="hljs-name">role</span>></span>
<span class="hljs-tag"></<span class="hljs-name">credit</span>></span>
<span class="hljs-tag"><<span class="hljs-name">credit</span>></span>
<span class="hljs-tag"><<span class="hljs-name">person</span>></span>Bob Burger<span class="hljs-tag"></<span class="hljs-name">person</span>></span>
<span class="hljs-tag"><<span class="hljs-name">role</span>></span>Founder, Designer, Pizza Burger Studio<span class="hljs-tag"></<span class="hljs-name">role</span>></span>
<span class="hljs-tag"></<span class="hljs-name">credit</span>></span>
<span class="hljs-tag"><<span class="hljs-name">credit</span>></span>
<span class="hljs-tag"><<span class="hljs-name">person</span>></span>Jake Burgza<span class="hljs-tag"></<span class="hljs-name">person</span>></span>
<span class="hljs-tag"><<span class="hljs-name">role</span>></span>Artist, Collaborator<span class="hljs-tag"></<span class="hljs-name">role</span>></span>
<span class="hljs-tag"><<span class="hljs-name">website</span>></span>
http://www.jakeburgza.com
<span class="hljs-tag"></<span class="hljs-name">website</span>></span>
<span class="hljs-tag"></<span class="hljs-name">credit</span>></span>
<span class="hljs-tag"><<span class="hljs-name">credit</span>></span>
<span class="hljs-tag"><<span class="hljs-name">person</span>></span>Sophia Pizer<span class="hljs-tag"></<span class="hljs-name">person</span>></span>
<span class="hljs-tag"><<span class="hljs-name">role</span>></span>Musician, Collaborator<span class="hljs-tag"></<span class="hljs-name">role</span>></span>
<span class="hljs-tag"><<span class="hljs-name">website</span>></span>
http://www.sophiapizer.com
<span class="hljs-tag"></<span class="hljs-name">website</span>></span>
<span class="hljs-tag"></<span class="hljs-name">credit</span>></span>
<span class="hljs-tag"></<span class="hljs-name">credits</span>></span></pre></div></div>
</li>
<li id="section-23">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-23">¶</a>
</div>
<p>Add more contact information.</p>
<p>For the company page, you can repeat your social network accounts, as well as another contact mail address, or your company website.</p>
<p>For each item, pick one between a <code><link></code> and <code><mail></code> tag.</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-tag"><<span class="hljs-name">contacts</span>></span>
<span class="hljs-tag"><<span class="hljs-name">contact</span>></span>
<span class="hljs-tag"><<span class="hljs-name">name</span>></span>Inquiries<span class="hljs-tag"></<span class="hljs-name">name</span>></span>
<span class="hljs-tag"><<span class="hljs-name">mail</span>></span>contact@pizzaburger.studio<span class="hljs-tag"></<span class="hljs-name">mail</span>></span>
<span class="hljs-tag"></<span class="hljs-name">contact</span>></span>
<span class="hljs-tag"><<span class="hljs-name">contact</span>></span>
<span class="hljs-tag"><<span class="hljs-name">name</span>></span>Twitter<span class="hljs-tag"></<span class="hljs-name">name</span>></span>
<span class="hljs-tag"><<span class="hljs-name">link</span>></span>
https://twitter.com/pizzaburgerstudio
<span class="hljs-tag"></<span class="hljs-name">link</span>></span>
<span class="hljs-tag"></<span class="hljs-name">contact</span>></span>
<span class="hljs-tag"><<span class="hljs-name">contact</span>></span>
<span class="hljs-tag"><<span class="hljs-name">name</span>></span>Facebook<span class="hljs-tag"></<span class="hljs-name">name</span>></span>
<span class="hljs-tag"><<span class="hljs-name">link</span>></span>
https://facebook.com/pizzaburgerstudio
<span class="hljs-tag"></<span class="hljs-name">link</span>></span>
<span class="hljs-tag"></<span class="hljs-name">contact</span>></span>
<span class="hljs-tag"><<span class="hljs-name">contact</span>></span>
<span class="hljs-tag"><<span class="hljs-name">name</span>></span>Web<span class="hljs-tag"></<span class="hljs-name">name</span>></span>
<span class="hljs-tag"><<span class="hljs-name">link</span>></span>
http://pizzaburger.studio
<span class="hljs-tag"></<span class="hljs-name">link</span>></span>
<span class="hljs-tag"></<span class="hljs-name">contact</span>></span>
<span class="hljs-tag"></<span class="hljs-name">contacts</span>></span></pre></div></div>
</li>
<li id="section-24">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-24">¶</a>
</div>
<p>Well-done, it’s over for this one. ;)</p>
<p><a href="../product/">It’s time to do the product pages.</a></p>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-tag"></<span class="hljs-name">company</span>></span></pre></div></div>
</li>
</ul>
</div>
</body>
</html>
================================================
FILE: docs/css/docco.css
================================================
/*
* This is a modified version of the `docco` classic CSS.
* https://github.com/jashkenas/docco/blob/master/resources/classic/docco.css
*/
/* ---------------------------------------------------------- *\
* Layout and Typography.
\* ---------------------------------------------------------- */
html {
height: 100%;
font: 62.5%/1.6 "Trebuchet MS", Arial, Helvetica, sans-serif;
}
body {
height: 100%;
margin: 0;
padding: 0;
color: #252519;
font-size: 1.3em;
}
#container {
min-height: 100%;
}
a {
color: #261a3b;
}
a:visited {
color: #261a3b;
}
p,
ul,
ol {
margin: 0 0 15px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 30px 0 15px 0;
font-family: Georgia, "Times New Roman", Times, serif;
}
h1 {
margin-top: 40px;
}
hr {
height: 1px;
margin: 20px 0;
border: 0 none;
border-top: 1px solid #e5e5ee;
}
pre {
white-space: pre-wrap;
}
pre,
tt,
code {
margin: 0;
padding: 0;
font-family: Menlo, Monaco, Consolas, "Lucida Console", monospace;
font-size: 12px;
line-height: 16px;
}
ul.sections {
margin: 0;
padding: 0 0 5px 0;
list-style: none;;
}
.annotation code {
padding: 0 0.2em;
background: #f5faff;
border: 1px solid #dedede;
font-size: 12px;
}
.annotation pre {
margin-bottom: 15px;
}
.annotation pre code {
padding: 5px 10px;
}
/*
Force border-box so that % widths fit the parent
container without overlap because of margin/padding.
More Info : http://www.quirksmode.org/css/box.html
*/
ul.sections > li > div {
-webkit-box-sizing: border-box; /* webkit */
-moz-box-sizing: border-box; /* firefox */
box-sizing: border-box; /* css3 */
-khtml-box-sizing: border-box; /* konqueror */
-ms-box-sizing: border-box; /* ie */
}
/* ---------------------------------------------------------- *\
* "Jump Page" widget.
\* ---------------------------------------------------------- */
#jump_to,
#jump_page {
margin: 0;
list-style: none;
background: white;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomleft: 5px;
-webkit-box-shadow: 0 0 25px #777777;
-moz-box-shadow: 0 0 25px #777777;
font: 16px Arial;
cursor: pointer;
text-align: right;
}
#jump_to a {
text-decoration: none;
}
#jump_to a.large {
display: none;
}
#jump_to a.small {
color: #676767;
font-size: 22px;
font-weight: bold;
}
#jump_to,
#jump_wrapper {
position: fixed;
top: 0;
right: 0;
margin: 0;
padding: 10px 15px;
}
#jump_wrapper {
display: none;
padding: 0;
}
#jump_to:hover #jump_wrapper {
display: block;
}
#jump_page {
margin: 0 0 25px 25px;
padding: 5px 0 3px;
}
#jump_page .source {
display: block;
padding: 15px;
border-top: 1px solid #eeeeee;
text-decoration: none;
}
#jump_page .source:hover {
background: #f5faff;
}
#jump_page .source:first-child {
}
/* ---------------------------------------------------------- *\
* Low resolutions (> 320px)
\* ---------------------------------------------------------- */
@media only screen and (min-width: 320px) {
.pilwrap {
display: none;
}
ul.sections > li > div {
display: block;
padding: 5px 10px 0 10px;
}
ul.sections > li > div.annotation {
background: #ffffff;
}
ul.sections > li > div.annotation ul,
ul.sections > li > div.annotation ol {
padding-left: 30px;
}
ul.sections > li > div.content {
overflow-x: auto;
margin: 5px 10px 5px 10px;
padding-bottom: 5px;
background: #f5faff;
border: 1px solid #dedede;
-webkit-box-shadow: inset 0 0 5px #e5e5ee;
box-shadow: inset 0 0 5px #e5e5ee;
}
}
/* ---------------------------------------------------------- *\
* (> 750px)
*
* Change layout from one-column to two-columns.
\* ---------------------------------------------------------- */
@media only screen and (min-width: 750px) {
#container {
position: relative;
}
body {
background-color: #f5faff;
line-height: 22px;
}
pre,
tt,
code {
line-height: 18px;
}
#jump_to {
padding: 5px 10px;
}
#jump_wrapper {
padding: 0;
}
#jump_to,
#jump_page {
font: 10px Arial;
text-transform: uppercase;
}
#jump_page .source {
padding: 5px 10px;
}
#jump_to a.large {
display: inline-block;
}
#jump_to a.small {
display: none;
}
#background {
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
width: 350px;
background: #ffffff;
border-right: 1px solid #e5e5ee;
}
ul.sections > li > div.content {
width: calc(95% - 350px);
}
ul.sections > li > div.annotation ul,
ul.sections > li > div.annotation ol {
padding-left: 40px;
}
ul.sections > li {
white-space: nowrap;
}
ul.sections > li > div {
display: inline-block;
}
ul.sections > li > div.annotation {
overflow-x: hidden;
min-width: 350px;
max-width: 350px;
min-height: 5px;
padding: 13px;
text-align: left;
vertical-align: top;
white-space: normal;
}
ul.sections > li > div.content {
padding: 13px;
background: #f5faff;
border: none;
-webkit-box-shadow: none;
box-shadow: none;
vertical-align: top;
}
.pilwrap {
position: relative;
display: inline;
}
.pilcrow {
position: absolute;
top: 3px;
left: -20px;
padding: 1px 2px;
opacity: 0;
color: #454545;
font: 12px Arial;
-webkit-transition: opacity 0.2s linear;
text-decoration: none;
}
.for-h1 .pilcrow {
top: 47px;
}
.for-h2 .pilcrow,
.for-h3 .pilcrow,
.for-h4 .pilcrow {
top: 35px;
}
ul.sections > li > div.annotation:hover .pilcrow {
opacity: 1;
}
}
/* ---------------------------------------------------------- *\
* (> 1025px)
*
* Add more spaces.
\* ---------------------------------------------------------- */
@media only screen and (min-width: 1025px) {
#background {
width: 525px;
}
ul.sections > li > div.annotation {
min-width: 525px;
max-width: 525px;
padding: 10px 25px 1px 50px;
}
ul.sections > li > div.content {
width: calc(95% - 525px);
padding: 9px 15px 16px 25px;
}
}
/* ---------------------------------------------------------- *\
* Syntax Highlighting.
\* ---------------------------------------------------------- */
/* The syntax highlighter used is https://highlightjs.org */
td.linenos {
padding-right: 10px;
background-color: #f0f0f0;
}
span.lineno {
padding: 0 5px 0 5px;
background-color: #f0f0f0;
}
/*
github.com style (c) Vasily Polovnyov <vast@whiteants.net>
*/
pre code {
display: block;
padding: 0.5em;
color: #000000;
background: #f5faff;
}
pre .hljs-comment,
pre .hljs-template_comment,
pre .hljs-diff .hljs-header,
pre .hljs-javadoc {
color: #408080;
font-style: italic;
}
pre .hljs-keyword,
pre .hljs-assignment,
pre .hljs-literal,
pre .hljs-css .hljs-rule .hljs-keyword,
pre .hljs-winutils,
pre .hljs-javascript .hljs-title,
pre .hljs-lisp .hljs-title,
pre .hljs-subst {
color: #954121;
/*font-weight: bold*/
}
pre .hljs-number,
pre .hljs-hexcolor {
color: #40a070;
}
pre .hljs-string,
pre .hljs-tag .hljs-value,
pre .hljs-phpdoc,
pre .hljs-tex .hljs-formula {
color: #219161;
}
pre .hljs-title,
pre .hljs-id {
color: #19469d;
}
pre .hljs-params {
color: #0000ff;
}
pre .hljs-javascript .hljs-title,
pre .hljs-lisp .hljs-title,
pre .hljs-subst {
font-weight: normal;
}
pre .hljs-class .hljs-title,
pre .hljs-haskell .hljs-label,
pre .hljs-tex .hljs-command {
color: #445588;
font-weight: bold;
}
pre .hljs-tag,
pre .hljs-tag .hljs-title,
pre .hljs-rules .hljs-property,
pre .hljs-django .hljs-tag .hljs-keyword {
color: #000080;
font-weight: normal;
}
pre .hljs-attribute,
pre .hljs-variable,
pre .hljs-instancevar,
pre .hljs-lisp .hljs-body {
color: #008080;
}
pre .hljs-regexp {
color: #bb6688;
}
pre .hljs-class {
color: #445588;
font-weight: bold;
}
pre .hljs-symbol,
pre .hljs-ruby .hljs-symbol .hljs-string,
pre .hljs-ruby .hljs-symbol .hljs-keyword,
pre .hljs-ruby .hljs-symbol .hljs-keymethods,
pre .hljs-lisp .hljs-keyword,
pre .hljs-tex .hljs-special,
pre .hljs-input_number {
color: #990073;
}
pre .hljs-builtin,
pre .hljs-constructor,
pre .hljs-built_in,
pre .hljs-lisp .hljs-title {
color: #0086b3;
}
pre .hljs-preprocessor,
pre .hljs-pi,
pre .hljs-doctype,
pre .hljs-shebang,
pre .hljs-cdata {
color: #999999;
font-weight: bold;
}
pre .hljs-deletion {
background: #ffdddd;
}
pre .hljs-addition {
background: #ddffdd;
}
pre .hljs-diff .hljs-change {
background: #0086b3;
}
pre .hljs-chunk {
color: #aaaaaa;
}
pre .hljs-tex .hljs-formula {
opacity: 0.5;
}
================================================
FILE: docs/example/css/master.css
================================================
@charset "UTF-8";
/* ---------------------------------------------------------- *\
* Globals.
\* ---------------------------------------------------------- */
html {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
body {
position: relative;
min-height: 100vh;
margin: 0;
}
/* ---------------------------------------------------------- *\
* Typography & colors.
\* ---------------------------------------------------------- */
html {
color: #444444;
font: 62.5%/1.6 "Trebuchet MS", Arial, Helvetica, sans-serif;
}
body {
font-size: 1.26em;
}
h1,
h2 {
font-family: Georgia, "Times New Roman", Times, serif;
font-weight: normal;
}
::-moz-selection {
color: white;
background: #3398ff;
}
::selection {
color: white;
background: #3398ff;
}
/* ---------------------------------------------------------- *\
* Basic elements.
\* ---------------------------------------------------------- */
h1 {
margin: 0;
font-size: 2.8em;
}
h2 {
margin: 25px 0 15px 0;
font-size: 1.9em;
}
h3 {
font-size: inherit;
font-weight: bold;
}
img {
max-width: 100%;
}
p {
margin: 15px 0;
}
p:last-child {
margin-bottom: 0;
}
/* Lists. */
ul,
ol {
margin: 15px 0;
padding-left: 30px;
}
ul:last-child,
ol:last-child {
margin-bottom: 0;
}
ul {
list-style-type: square;
}
dl {
margin: 0;
}
dt {
font-weight: bold;
}
dd {
margin: 0;
}
dd + dt {
margin-top: 15px;
}
/* ---------------------------------------------------------- *\
* Layout.
\* ---------------------------------------------------------- */
body {
padding: 20px 0;
}
.page {
max-width: 1180px;
margin: 0 auto;
padding: 0 25px;
}
@media (min-width: 800px) {
.page {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.page-nav {
min-width: 25%;
}
.page-wrapper {
max-width: 75%;
}
.factsheet {
min-width: 33%;
}
}
/* ---------------------------------------------------------- *\
* Micro Components.
\* ---------------------------------------------------------- */
.clearfix::after {
display: table;
clear: both;
content: " ";
}
.capitalize {
text-transform: capitalize;
}
/* ---------------------------------------------------------- *\
* Components - Links.
\* ---------------------------------------------------------- */
a,
a:visited {
color: #0077dd;
text-decoration: none;
}
a:hover {
color: #005599;
text-decoration: underline;
}
a:focus {
outline: thin dotted;
}
a:active,
a:hover {
outline: none;
}
/* ---------------------------------------------------------- *\
* Components - Page Header.
\* ---------------------------------------------------------- */
.page-header img {
display: block;
}
/* ---------------------------------------------------------- *\
* Components - Nav.
\* ---------------------------------------------------------- */
.nav {
margin-bottom: 30px;
}
.nav__title {
padding: 0 15px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
line-height: 1;
}
.nav__title a,
.nav__title a:visited,
.nav__title a:hover {
color: inherit;
text-decoration: none;
}
.nav__subtitle {
padding: 5px 15px;
}
.nav__list {
padding: 0;
list-style: none;
}
.nav__item,
.nav__item:visited {
display: block;
padding: 5px 15px;
color: inherit;
}
.nav__item:hover {
color: inherit;
background: rgba(0, 0, 0, 0.05);
text-decoration: none;
}
.nav__item:focus {
background: rgba(0, 0, 0, 0.05);
outline: none;
}
/* ---------------------------------------------------------- *\
* Nav - Hamburger.
\* ---------------------------------------------------------- */
.nav__toggle {
display: none;
margin: 15px 0;
padding: 0 15px;
}
.nav__toggle .button {
display: block;
height: 30px;
}
/* Nav list variant for hamburger feature. */
.nav__list--slider {
overflow-y: hidden;
max-height: 0;
-webkit-transition: max-height 0.5s ease-in-out;
-moz-transition: max-height 0.5s ease-in-out;
-o-transition: max-height 0.5s ease-in-out;
transition: max-height 0.5s ease-in-out;
}
@media (min-width: 800px) {
.nav__toggle {
/* Always hide the button on big screens. */
display: none !important;
}
.nav__list--slider {
/* Always show the list on big screens. So disable slider. */
max-height: unset !important;
}
}
/* ---------------------------------------------------------- *\
* Components - Block.
\* ---------------------------------------------------------- */
.block {
margin-bottom: 15px;
padding-bottom: 15px;
border-bottom: 1px solid rgb(221, 221, 221);
}
.block__notice {
margin-bottom: 15px;
padding: 10px;
color: #027194;
background: #ebf7fd;
border: 1px solid rgba(45,112,145,0.3);
border-radius: 4px;
}
.block__notice a {
color: inherit;
}
/* ---------------------------------------------------------- *\
* Components - Grid.
\* ---------------------------------------------------------- */
@media (min-width: 800px) {
.grid {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.grid__item:not(:first-child) {
padding-left: 25px;
}
.grid__item--flexible {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
}
/* ---------------------------------------------------------- *\
* Components - Images Gallery.
\* ---------------------------------------------------------- */
.gallery {
margin-left: -25px;
font-size: 0; /* Disable the small space below the images. */
}
.gallery__item {
float: left;
width: 100%;
padding-bottom: 25px;
padding-left: 25px;
}
.gallery__item img {
width: 100%;
}
.gallery__item a[href$=".gif"] {
position: relative;
display: block;
}
.gallery__item a[href$=".gif"]:focus:active {
outline: none;
}
.gallery__item a[href$=".gif"]::after {
position: absolute;
z-index: 1;
top: 0;
left: 0;
display: none;
width: 100%;
height: 100%;
padding: 20px;
background: rgba(0, 0, 0, 0.25);
content: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAMAAAC7IEhfAAAABGdBTUEAALGPC/xhBQAAAFFQTFRFAAAA/////////////////////////////Pz8/Pz8/Pz8/f39/f39/f39/f39/f39/f39/Pz8/Pz8/Pz8/Pz8/v7+/f39/f39/f39/f39/f395zF2nQAAABt0Uk5TAAEJCxQeIEpXYGFnc3V2d5WarK2/xNLb3N3m8ZFI2gAAAOlJREFUOMuVlckOgzAMRAdIWUrKUgK4/v8P7QWVLA64c0RPY9mxByBQ3U/LSrQuU18jKzM49uQGI2KVJY5Etkq5ZmNBWxNhheWMbOFz5cxZzaXnd8Exz6en5UvZXx98o6OjarsDtyop/Hrnixt/zm3x/AggGQCj/6UFHpLpAMBFICRTB9Qcg6JpjV4ABdMekwSmphMWGUTRBaYL1gwYma6gLBiYEvYr8HTZ9aXzzVDYjHo88sA7SgaufkJhKRI7Zgdg0K5ZtLiC3bG46lPQH5f6XPUBoI8UdUjpY08fpH9EMwAzqsL+5vfxBcKnb1vURTbUAAAAAElFTkSuQmCC");
align-items: center;
justify-content: center;
}
.gallery__item a[href$=".gif"].show-overlay::after {
display: flex;
}
@media (min-width: 500px) {
.gallery__item {
width: 50%;
}
}
/* ---------------------------------------------------------- *\
* Components - Logo.
\* ---------------------------------------------------------- */
@media (min-width: 800px) {
.logo {
max-width: 49%;
}
}
/* ---------------------------------------------------------- *\
* Components - Video player.
\* ---------------------------------------------------------- */
.video-player {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
}
.video-player__frame {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* ---------------------------------------------------------- *\
* Components - Quote.
\* ---------------------------------------------------------- */
.quote__content {
margin: 0;
}
.quote__content::before {
content: open-quote;
}
.quote__content::after {
content: close-quote;
}
.quote__author::before {
content: "-";
}
/* ---------------------------------------------------------- *\
* Components - Button.
\* ---------------------------------------------------------- */
.button {
display: inline-block;
padding: 5px 10px;
background: -webkit-linear-gradient(top, white, #fafafa);
background: linear-gradient(to bottom, white, #fafafa);
border: 1px solid #cccccc;
border-radius: 5px;
}
.button:hover {
cursor: pointer;
text-decoration: none;
}
.button:focus {
border: 1px solid #3398ff;
outline: none;
}
.button:active {
color: white;
background: -webkit-linear-gradient(top, #3398ff, #0077dd);
background: linear-gradient(to bottom, #3398ff, #0077dd);
}
/* ---------------------------------------------------------- *\
* Widgets.
\* ---------------------------------------------------------- */
.widget {
width: 100%;
}
.widget--steam {
height: 190px;
}
.widget--humble {
height: 328px;
}
@media (max-width: 505px) {
.widget--humble {
height: 205px;
}
}
.widget--itch {
height: 167px;
}
.widget--gamejolt {
height: 245px;
}
.widget--bandcamp {
width: 100%;
height: 120px;
border: 0;
}
/* ---------------------------------------------------------- *\
* Hacks.
\* ---------------------------------------------------------- */
@media (min-width: 800px) {
._team-fix-margin-top {
margin-top: -15px;
}
}
================================================
FILE: docs/example/css/normalize.css
================================================
/*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */
/**
* 1. Change the default font family in all browsers (opinionated).
* 2. Correct the line height in all browsers.
* 3. Prevent adjustments of font size after orientation changes in
* IE on Windows Phone and in iOS.
*/
/* Document
========================================================================== */
html {
font-family: sans-serif; /* 1 */
line-height: 1.15; /* 2 */
-ms-text-size-adjust: 100%; /* 3 */
-webkit-text-size-adjust: 100%; /* 3 */
}
/* Sections
========================================================================== */
/**
* Remove the margin in all browsers (opinionated).
*/
body {
margin: 0;
}
/**
* Add the correct display in IE 9-.
*/
article,
aside,
footer,
header,
nav,
section {
display: block;
}
/**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/* Grouping content
========================================================================== */
/**
* Add the correct display in IE 9-.
* 1. Add the correct display in IE.
*/
figcaption,
figure,
main { /* 1 */
display: block;
}
/**
* Add the correct margin in IE 8.
*/
figure {
margin: 1em 40px;
}
/**
* 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE.
*/
hr {
box-sizing: content-box; /* 1 */
height: 0; /* 1 */
overflow: visible; /* 2 */
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
pre {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
/* Text-level semantics
========================================================================== */
/**
* 1. Remove the gray background on active links in IE 10.
* 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
*/
a {
background-color: transparent; /* 1 */
-webkit-text-decoration-skip: objects; /* 2 */
}
/**
* Remove the outline on focused links when they are also active or hovered
* in all browsers (opinionated).
*/
a:active,
a:hover {
outline-width: 0;
}
/**
* 1. Remove the bottom border in Firefox 39-.
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/
abbr[title] {
border-bottom: none; /* 1 */
text-decoration: underline; /* 2 */
text-decoration: underline dotted; /* 2 */
}
/**
* Prevent the duplicate application of `bolder` by the next rule in Safari 6.
*/
b,
strong {
font-weight: inherit;
}
/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/
b,
strong {
font-weight: bolder;
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
/**
* Add the correct font style in Android 4.3-.
*/
dfn {
font-style: italic;
}
/**
* Add the correct background and color in IE 9-.
*/
mark {
background-color: #ff0;
color: #000;
}
/**
* Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/* Embedded content
========================================================================== */
/**
* Add the correct display in IE 9-.
*/
audio,
video {
display: inline-block;
}
/**
* Add the correct display in iOS 4-7.
*/
audio:not([controls]) {
display: none;
height: 0;
}
/**
* Remove the border on images inside links in IE 10-.
*/
img {
border-style: none;
}
/**
* Hide the overflow in IE.
*/
svg:not(:root) {
overflow: hidden;
}
/* Forms
========================================================================== */
/**
* 1. Change the font styles in all browsers (opinionated).
* 2. Remove the margin in Firefox and Safari.
*/
button,
input,
optgroup,
select,
textarea {
font-family: sans-serif; /* 1 */
font-size: 100%; /* 1 */
line-height: 1.15; /* 1 */
margin: 0; /* 2 */
}
/**
* Show the overflow in IE.
* 1. Show the overflow in Edge.
*/
button,
input { /* 1 */
overflow: visible;
}
/**
* Remove the inheritance of text transform in Edge, Firefox, and IE.
* 1. Remove the inheritance of text transform in Firefox.
*/
button,
select { /* 1 */
text-transform: none;
}
/**
* 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
* controls in Android 4.
* 2. Correct the inability to style clickable types in iOS and Safari.
*/
button,
html [type="button"], /* 1 */
[type="reset"],
[type="submit"] {
-webkit-appearance: button; /* 2 */
}
/**
* Remove the inner border and padding in Firefox.
*/
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0;
}
/**
* Restore the focus styles unset by the previous rule.
*/
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText;
}
/**
* Change the border, margin, and padding in all browsers (opinionated).
*/
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
/**
* 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from `fieldset` elements in IE.
* 3. Remove the padding so developers are not caught out when they zero out
* `fieldset` elements in all browsers.
*/
legend {
box-sizing: border-box; /* 1 */
color: inherit; /* 2 */
display: table; /* 1 */
max-width: 100%; /* 1 */
padding: 0; /* 3 */
white-space: normal; /* 1 */
}
/**
* 1. Add the correct display in IE 9-.
* 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/
progress {
display: inline-block; /* 1 */
vertical-align: baseline; /* 2 */
}
/**
* Remove the default vertical scrollbar in IE.
*/
textarea {
overflow: auto;
}
/**
* 1. Add the correct box sizing in IE 10-.
* 2. Remove the padding in IE 10-.
*/
[type="checkbox"],
[type="radio"] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
}
/**
* Correct the cursor style of increment and decrement buttons in Chrome.
*/
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
*/
[type="search"] {
-webkit-appearance: textfield; /* 1 */
outline-offset: -2px; /* 2 */
}
/**
* Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
*/
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button; /* 1 */
font: inherit; /* 2 */
}
/* Interactive
========================================================================== */
/*
* Add the correct display in IE 9-.
* 1. Add the correct display in Edge, IE, and Firefox.
*/
details, /* 1 */
menu {
display: block;
}
/*
* Add the correct display in all browsers.
*/
summary {
display: list-item;
}
/* Scripting
========================================================================== */
/**
* Add the correct display in IE 9-.
*/
canvas {
display: inline-block;
}
/**
* Add the correct display in IE.
*/
template {
display: none;
}
/* Hidden
========================================================================== */
/**
* Add the correct display in IE 10-.
*/
[hidden] {
display: none;
}
================================================
FILE: docs/example/index.html
================================================
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pizza Burger Studio</title>
<link rel="shortcut icon" href="images/favicon.ico?t=1534406189654">
<link rel="stylesheet" href="./css/normalize.css">
<link rel="stylesheet" href="./css/theme.css">
<!-- Generated by presskit.html 0.12.1 (https://github.com/pixelnest/presskit.html). -->
</head>
<body>
<div class="page grid">
<nav class="page-nav nav grid__item">
<h1 class="nav__title">
<a href=".">Pizza Burger Studio</a>
</h1>
<aside class="nav__subtitle">
<a href="https://github.com/pixelnest/presskit.html">github.com/pixelnest/presskit.html</a>
</aside>
<div class="nav__toggle" id="hamburger">
<a href="#" class="button" id="hamburger-toggle">
<svg width="10" height="10" viewBox="0 0 19 19" xmlns="http://www.w3.org/2000/svg">
<g fill="currentColor" fill-rule="nonzero">
<path d="M0 16h19v3H0zM0 8h19v3H0zM0 0h19v3H0z" />
</g>
</svg>
Menu
</a>
</div>
<ul class="nav__list" id="hamburger-target">
<li>
<a class="nav__item" href="#factsheet">Factsheet</a>
</li>
<li>
<a class="nav__item" href="#description">Description</a>
</li>
<li>
<a class="nav__item" href="#history">History</a>
</li>
<li>
<a class="nav__item" href="#projects">Projects</a>
</li>
<li>
<a class="nav__item" href="#videos">Videos</a>
</li>
<li>
<a class="nav__item" href="#images">Images</a>
</li>
<li>
<a class="nav__item" href="#logo">Logo & Icon</a>
</li>
<li>
<a class="nav__item" href="#awards">Awards & Recognition</a>
</li>
<li>
<a class="nav__item" href="#articles">Selected Articles</a>
</li>
<li>
<a class="nav__item" href="#links">Additional Links</a>
</li>
<li>
<a class="nav__item" href="#credits">Team</a>
</li>
<li>
<a class="nav__item" href="#contact">Contact</a>
</li>
</ul>
</nav>
<div class="page-wrapper grid__item">
<header class="page-header">
<img src="./images/header.jpg" alt="Pizza Burger Studio" title="Pizza Burger Studio">
</header>
<main class="page-content" role="main">
<section class="block grid">
<aside class="factsheet grid__item">
<h2 id="factsheet" class="factsheet__title">Factsheet</h2>
<dl class="factsheet__list">
<dt>Developer:</dt>
<dd>
<a href=".">Pizza Burger Studio</a>
</dd>
<dd>Based in Paris, France</dd>
<dt>Founding date:</dt>
<dd>February 6, 2014</dd>
<dt>Website:</dt>
<dd>
<a href="https://github.com/pixelnest/presskit.html">github.com/pixelnest/presskit.html</a>
</dd>
<dt>Press / Business contact:</dt>
<dd>
<a href="mailto:contact@pizzaburger.studio">contact@pizzaburger.studio</a>
</dd>
<dt>Social:</dt>
<dd>
<a href="https://twitter.com/pizzaburgerstudio">Twitter @pizzaburgerstudio</a>
</dd>
<dd>
<a href="https://facebook.com/pizzaburgerstudio">Facebook Page</a>
</dd>
<dd>
<a href="callto:pizzaburgerstudio">Skype</a>
</dd>
<dt>Releases:</dt>
<dd>
<a href="product/">My Super Game</a>
</dd>
<dt>Address:</dt>
<dd>42 street of Pixelnest</dd>
<dd>35000 Rennes</dd>
<dd>France</dd>
<dt>Phone:</dt>
<dd>+42 (3) 42 42 42 42 42</dd>
</dl>
</aside>
<article class="description grid__item">
<h2 id="description">Description</h2>
<p>
This is a fake presskit for a fake company called Pizza Burger Studio.
</p>
<h2 id="history">History</h2>
<h3>Built with presskit.html</h3>
<p>This presskit is generated by presskit.html, a tool created by Pixelnest Studio.</p>
<h3>Free and Open Source</h3>
<p>Find presskit.html on https://github.com/pixelnest/presskit.html</p>
<h2 id="projects">Projects</h2>
<ul>
<li>
<a href="product/">My Super Game</a>
</li>
</ul>
</article>
</section>
<section class="block">
<h2 id="videos">Videos</h2>
<div>
<p>
<strong>Example from YouTube. Don't give a full link: the ID is enough</strong> — <a href="https://www.youtube.com/embed/er416Ad3R1g?rel=0">YouTube</a>
</p>
<div class="video-player">
<iframe class="video-player__frame" src="https://www.youtube.com/embed/er416Ad3R1g?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div>
<p>
<strong>Example from both YouTube and Vimeo</strong> — <a href="https://www.youtube.com/embed/YH3c1QZzRK4?rel=0">YouTube</a>
</p>
<div class="video-player">
<iframe class="video-player__frame" src="https://www.youtube.com/embed/YH3c1QZzRK4?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
<p>
<strong>Example from both YouTube and Vimeo</strong> — <a href="https://player.vimeo.com/video/108650530">Vimeo</a>
</p>
<div class="video-player">
<iframe class="video-player__frame" src="https://player.vimeo.com/video/108650530" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
</div>
<div>
<p>
<strong>Interview with Damien Mayance and Matthieu Oger of Pixenest Studio</strong> — <a href="https://github.com/pixelnest/presskit.html" target="_blank">Download</a>
</p>
</div>
</section>
<section class="block">
<h2 id="images">Images</h2>
<aside class="block__notice">
<a href="images/images.zip">
download all screenshots & photos as .zip
</a>
</aside>
<div class="gallery clearfix" id="gallery">
<div class="gallery__item">
<a href="images/pizza-01.jpg">
<img src="images/pizza-01.jpg.thumb.jpg" alt="pizza-01">
</a>
</div>
<div class="gallery__item">
<a href="images/pizza-02.gif">
<img src="images/pizza-02.gif.thumb.jpg" alt="pizza-02">
</a>
</div>
<div class="gallery__item">
<a href="images/pizza-02.jpg">
<img src="images/pizza-02.jpg.thumb.jpg" alt="pizza-02">
</a>
</div>
<div class="gallery__item">
<a href="images/pizza-03.jpg">
<img src="images/pizza-03.jpg.thumb.jpg" alt="pizza-03">
</a>
</div>
<div class="gallery__item">
<a href="images/pizza-04.jpg">
<img src="images/pizza-04.jpg.thumb.jpg" alt="pizza-04">
</a>
</div>
<div class="gallery__item">
<a href="images/pizza-05.jpg">
<img src="images/pizza-05.jpg.thumb.jpg" alt="pizza-05">
</a>
</div>
<div class="gallery__item">
<a href="images/pizza.gif">
<img src="images/pizza.gif.thumb.jpg" alt="pizza">
</a>
</div>
</div>
</section>
<section class="block">
<h2 id="logo">Logo & Icon</h2>
<aside class="block__notice">
<a href="images/logo.zip">
download logo files as .zip
</a>
</aside>
<a href="images/logo.png">
<img src="images/logo.png" alt="logo" class="logo">
</a>
</section>
<section class="block">
<h2 id="awards">Awards & Recognition</h2>
<ul>
<li>"An award" <cite>Name, location, 29 April, 1988</cite></li>
<li>"A nomination" <cite>Name, location, 03 October, 1988</cite></li>
</ul>
</section>
<section class="block">
<h2 id="articles">Selected Articles</h2>
<ul>
<li class="quote">
<blockquote class="quote__content" cite="
https://twitter.com/mrhelmut/status/717276362814447616
">
There's not enough pizza in your life. It's never enough.
</blockquote>
<cite class="quote__author">
@mrhelmut, <a href="
https://twitter.com/mrhelmut/status/717276362814447616
">Tweet</a>
</cite>
</li>
</ul>
</section>
<section class="block">
<h2 id="links">Additional Links</h2>
<dl>
<dt>Patricia Pizza Twitter</dt>
<dd>
@patpiz at <a href="https://twitter.com/patpiz">twitter.com</a>.
</dd>
<dt>Bob Burger Twitter</dt>
<dd>
@bobburg at <a href="https://twitter.com/bobburg">twitter.com</a>.
</dd>
</dl>
</section>
<section class="block grid _team-fix-margin-top">
<article class="grid__item grid__item--flexible">
<h2 id="credits">Team & Repeating Collaborator</h2>
<dl>
<dt>Patricia Pizza</dt>
<dd>
Founder, Developer, Pizza Burger Studio
</dd>
<dt>Bob Burger</dt>
<dd>
Founder, Designer, Pizza Burger Studio
</dd>
<dt>Jake Burgza</dt>
<dd>
<a href="
http://www.jakeburgza.com
">Artist, Collaborator</a>
</dd>
<dt>Sophia Pizer</dt>
<dd>
<a href="
http://www.sophiapizer.com
">Musician, Collaborator</a>
</dd>
</dl>
</article>
<article class="grid__item grid__item--flexible">
<h2 id="contact">Contact</h2>
<dl>
<dt>Inquiries</dt>
<dd>
<a href="mailto:contact@pizzaburger.studio">contact@pizzaburger.studio</a>
</dd>
<dt>Twitter</dt>
<dd>
<a href="
https://twitter.com/pizzaburgerstudio
">twitter.com/pizzaburgerstudio</a>
</dd>
<dt>Facebook</dt>
<dd>
<a href="
https://facebook.com/pizzaburgerstudio
">facebook.com/pizzaburgerstudio</a>
</dd>
<dt>Web</dt>
<dd>
<a href="
http://pizzaburger.studio
">pizzaburger.studio</a>
</dd>
</dl>
</article>
</section>
</main>
<footer class="page-footer">
<a href="https://github.com/pixelnest/presskit.html">presskit.html</a> by <a href="http://pixelnest.io">Pixelnest Studio</a> — original <a href="http://dopresskit.com/">presskit()</a> by Rami Ismail (<a href="http://www.vlambeer.com/">Vlambeer</a>)
</footer>
</div>
</div>
<script src="./js/masonry.min.js"></script>
<script src="./js/imagesloaded.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function onContentLoaded() {
// Add masonry layout on the galleries.
var galleries = document.querySelectorAll('.gallery');
for (var i = 0; i < galleries.length; i++) {
(function (index) {
var gallery = galleries[index];
imagesLoaded(gallery, function onImagesLoaded() {
new Masonry(gallery, {
itemSelector: '.gallery__item'
});
});
})(i);
}
// Add mini-player to gifs.
var gifLinks = document.querySelectorAll('a[href$=".gif"]');
for (var i = 0; i < gifLinks.length; i++) {
(function (index) {
var link = gifLinks[index];
var img = link.querySelector('img');
// Don't add the mini-player if no thumbnail.
// It's already a gif, so no need to turn it on.
if (img.src.indexOf('.thumb.jpg') === -1) {
return
}
link.className = 'show-overlay'
link.onclick = function (e) {
// Make it work on IE8.
if (e.preventDefault) {
const openLinkInBackground = e.ctrlKey || e.metaKey;
// Stop default behavior, except if ctrl/cmd modifier is used.
// In this case, we want the link to go through and open
// its target in a background tab.
if (!openLinkInBackground) e.preventDefault();
e.stopPropagation();
} else {
// We don't care for the special background tab behavior on old IE.
e.returnValue = false;
}
// Remove overlay and remove thumbnail section of the image.
link.className = '';
img.src = img.src.replace('.thumb.jpg', '');
// Remove event listener after first trigger.
link.onclick = null;
}
}(i));
}
});
</script>
<script src="./js/hamburger.js"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-42424242-0', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>
================================================
FILE: docs/example/js/hamburger.js
================================================
'use strict'
;(function () {
// Preamble: this code is very specific, and clearly made for then
// main nav.
// Currently, this functionality is not need elsewhere, so we didn't
// bother to generalized this.
// No guards too.
// To disable this feature, just remove the script tag.
window.addEventListener('DOMContentLoaded', function () {
const container = document.querySelector('#hamburger')
const button = document.querySelector('#hamburger-toggle')
const target = document.querySelector('#hamburger-target')
// Show hamburger (hidden by default if no js or hamburger disabled).
container.style.display = 'block'
// Get target height.
const baseHeight = getElementHeight(target)
// Do that after the height calculation!
target.className += ' nav__list--slider'
button.addEventListener('click', function (e) {
e.preventDefault()
e.stopPropagation()
const currentMaxHeight = parseInt(target.style.maxHeight, 10)
// If not set or 0, toggle to full height.
// Otherwise, hide.
if (!currentMaxHeight || currentMaxHeight === 0) {
target.style.cssText = 'max-height: ' + baseHeight + 'px'
} else {
target.style.cssText = 'max-height: 0px'
}
})
})
// Clone an element outside the screen to safely get its height, then destroy it.
function getElementHeight (element) {
const clone = element.cloneNode(true)
clone.style.cssText = 'visibility: hidden; display: block; margin: -999px 0'
const height = (element.parentNode.appendChild(clone)).clientHeight
element.parentNode.removeChild(clone)
return height
}
})()
================================================
FILE: docs/example/product/index.html
================================================
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Super Game - Pizza Burger Studio</title>
<link rel="shortcut icon" href="images/favicon.ico?t=1534406189344">
<link rel="stylesheet" href="../css/normalize.css">
<link rel="stylesheet" href="../css/theme.css">
<!-- Generated by presskit.html 0.12.1 (https://github.com/pixelnest/presskit.html). -->
</head>
<body>
<div class="page grid">
<nav class="page-nav nav grid__item">
<h1 class="nav__title">
<a href="..">Pizza Burger Studio</a>
</h1>
<aside class="nav__subtitle">
<a href="..">press kit</a>
</aside>
<div class="nav__toggle" id="hamburger">
<a href="#" class="button" id="hamburger-toggle">
<svg width="10" height="10" viewBox="0 0 19 19" xmlns="http://www.w3.org/2000/svg">
<g fill="currentColor" fill-rule="nonzero">
<path d="M0 16h19v3H0zM0 8h19v3H0zM0 0h19v3H0z" />
</g>
</svg>
Menu
</a>
</div>
<ul class="nav__list" id="hamburger-target">
<li>
<a class="nav__item" href="#factsheet">Factsheet</a>
</li>
<li>
<a class="nav__item" href="#description">Description</a>
</li>
<li>
<a class="nav__item" href="#history">History</a>
</li>
<li>
<a class="nav__item" href="#videos">Videos</a>
</li>
<li>
<a class="nav__item" href="#images">Images</a>
</li>
<li>
<a class="nav__item" href="#logo">Logo & Icon</a>
</li>
<li>
<a class="nav__item" href="#widgets">Widgets</a>
</li>
<li>
<a class="nav__item" href="#awards">Awards & Recognition</a>
</li>
<li>
<a class="nav__item" href="#articles">Selected Articles</a>
</li>
<li>
<a class="nav__item" href="#links">Additional Links</a>
</li>
<li>
<a class="nav__item" href="#about">About Pizza Burger Studio</a>
</li>
<li>
<a class="nav__item" href="#about_Pixelnest Studio">About Pixelnest Studio</a>
</li>
<li>
<a class="nav__item" href="#about_Pizza Oven LLC">About Pizza Oven LLC</a>
</li>
<li>
<a class="nav__item" href="#credits">Team</a>
</li>
<li>
<a class="nav__item" href="#contact">Contact</a>
</li>
</ul>
</nav>
<div class="page-wrapper grid__item">
<header class="page-header">
<img src="./images/header.jpg" alt="My Super Game" title="My Super Game">
</header>
<main class="page-content" role="main">
<section class="block grid">
<aside class="factsheet grid__item">
<h2 id="factsheet" class="factsheet__title">Factsheet</h2>
<dl class="factsheet__list">
<dt>Developer:</dt>
<dd>
<a href="..">Pizza Burger Studio</a>
</dd>
<dd>Based in Paris, France</dd>
<dt>Publisher:</dt>
<dd>
<a href="https://pixelnest.io/">Pixelnest Studio</a>
</dd>
<dd>Based in Rennes, France</dd>
<dt>Distributor:</dt>
<dd>
Pizza Oven LLC
</dd>
<dt>Release date:</dt>
<dd>04 Feb, 2016</dd>
<dd>10 Oct, 2016</dd>
<dt>Platforms:</dt>
<dd>
<a href="http://itch.io/">PC / Mac</a>
</dd>
<dd>
<a href="http://steampowered.com/">Steam</a>
</dd>
<dd>
Inc New Store (TBA)
</dd>
<dt>Website:</dt>
<dd>
<a href="http://pizzaburger.studio/mysupergame">pizzaburger.studio/mysupergame</a>
</dd>
<dt>Regular Price:</dt>
<dd>EUR
gitextract_oj4ovsy9/ ├── .gitignore ├── .travis.yml ├── LICENSE ├── README.md ├── assets/ │ ├── _includes/ │ │ ├── about.html │ │ ├── appstore.html │ │ ├── assets.html │ │ ├── description.html │ │ ├── factsheet.html │ │ ├── footer.html │ │ ├── head.html │ │ ├── mailchimp.html │ │ ├── nav.html │ │ ├── playstore.html │ │ ├── recognition.html │ │ ├── scripts.html │ │ ├── team.html │ │ └── widgets.html │ ├── company.html │ ├── css/ │ │ ├── dark.css │ │ ├── light.css │ │ ├── normalize.css │ │ └── print.css │ ├── js/ │ │ └── hamburger.js │ ├── product.html │ ├── redirect.html │ └── templates/ │ ├── company.xml │ └── product.xml ├── bin/ │ ├── presskit │ ├── presskit-build.js │ └── presskit-new.js ├── data/ │ ├── data.xml │ └── product/ │ └── data.xml ├── docs/ │ ├── company/ │ │ └── index.html │ ├── css/ │ │ └── docco.css │ ├── example/ │ │ ├── css/ │ │ │ ├── master.css │ │ │ └── normalize.css │ │ ├── index.html │ │ ├── js/ │ │ │ └── hamburger.js │ │ └── product/ │ │ └── index.html │ └── product/ │ └── index.html ├── documentation ├── lib/ │ ├── assets.js │ ├── config.js │ ├── core/ │ │ ├── builder.js │ │ ├── generator.js │ │ ├── generator.test.js │ │ ├── loader.js │ │ ├── loader.test.js │ │ ├── parser.js │ │ ├── parser.test.js │ │ └── template.js │ ├── helpers/ │ │ ├── color-console.js │ │ ├── sfs.js │ │ ├── sfs.test.js │ │ ├── watcher.js │ │ └── zip.js │ └── index.js └── package.json
SYMBOL INDEX (52 symbols across 13 files)
FILE: assets/js/hamburger.js
function getElementHeight (line 43) | function getElementHeight (element) {
FILE: docs/example/js/hamburger.js
function getElementHeight (line 43) | function getElementHeight (element) {
FILE: lib/core/builder.js
function build (line 23) | async function build (dataFilePath, presskit, {
function createAndGetBuildFolder (line 93) | function createAndGetBuildFolder () {
function getHtmlFilePath (line 100) | function getHtmlFilePath (pageFolder) {
function getPageFolder (line 104) | function getPageFolder (buildFolder, dataFilePath, presskit) {
function getAbsolutePageUrl (line 119) | function getAbsolutePageUrl (dataFilePath, presskit) {
function getImagesFolder (line 134) | function getImagesFolder (dataFile) {
function getImages (line 146) | function getImages (source) {
function sortScreenshotsByCategories (line 203) | function sortScreenshotsByCategories (images) {
function createThumbnails (line 245) | async function createThumbnails (target, images) {
function exportArchives (line 271) | function exportArchives (images, source, target) {
function createArchive (line 278) | function createArchive (name, target, source, files) {
FILE: lib/core/generator.js
function generate (line 25) | async function generate (entryPoint) {
function cleanBuildFolder (line 52) | function cleanBuildFolder () {
function findData (line 59) | function findData (entryPoint) {
function generateHTML (line 99) | async function generateHTML (pages) {
function addProductsRelations (line 141) | function addProductsRelations (products) {
function exportAdditionalAssets (line 198) | async function exportAdditionalAssets () {
function showHeader (line 209) | function showHeader (text) {
function copyMandatoryFiles (line 215) | async function copyMandatoryFiles () {
function copyThemeCss (line 247) | async function copyThemeCss () {
function countDataFiles (line 277) | function countDataFiles (pages) {
function isDataFile (line 287) | function isDataFile (filename) {
function startWatcher (line 295) | function startWatcher (entryPoint, callback) {
FILE: lib/core/generator.test.js
function createTempDir (line 14) | function createTempDir () {
function writeXML (line 18) | function writeXML (dir, xml) {
function setupConfig (line 22) | function setupConfig (outputDir) {
FILE: lib/core/loader.js
function loadDataFile (line 74) | function loadDataFile (filename) {
function cleanTokens (line 86) | function cleanTokens (tokens, str) {
function normalizeKeys (line 92) | function normalizeKeys (keys, json) {
function normalize (line 102) | function normalize (obj) {
FILE: lib/core/parser.js
constant OPTIONS (line 10) | const OPTIONS = {
function parseXML (line 20) | function parseXML (xml) {
FILE: lib/core/template.js
function createTemplate (line 18) | function createTemplate (type, destination) {
function getTemplatePath (line 33) | function getTemplatePath (folder, type) {
function registerPartials (line 43) | function registerPartials (folder) {
function registerHelpers (line 61) | function registerHelpers (destination) {
function isValidPartial (line 133) | function isValidPartial (file) {
FILE: lib/helpers/color-console.js
function colorize (line 9) | function colorize (colorizer, args) {
function error (line 13) | function error () {
function warn (line 17) | function warn () {
FILE: lib/helpers/sfs.js
function createDir (line 11) | function createDir (dir) {
function copyDirContent (line 20) | function copyDirContent (source, target) {
function findAllFiles (line 35) | function findAllFiles (baseDir, {
FILE: lib/helpers/watcher.js
function installWatcher (line 18) | function installWatcher (startingFolder, callback) {
function installDevelopmentWatcher (line 37) | function installDevelopmentWatcher (startingFolder, callback) {
function createWatcher (line 65) | function createWatcher (...folders) {
FILE: lib/helpers/zip.js
function zip (line 11) | function zip (name, destination, source, files) {
FILE: lib/index.js
function runBuildCommand (line 18) | function runBuildCommand (launchOptions) {
function parseEntryPoint (line 34) | function parseEntryPoint (entry, cb) {
function runNewCommand (line 57) | function runNewCommand (type, destination) {
Condensed preview — 59 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (340K chars).
[
{
"path": ".gitignore",
"chars": 358,
"preview": "# Numerous always-ignore extensions\n*.diff\n*.err\n*.orig\n*.log\n*.rej\n*.swo\n*.swp\n*.vi\n*~\n*.sass-cache\nnpm-debug.log\n\n# OS"
},
{
"path": ".travis.yml",
"chars": 799,
"preview": "language: node_js\nnode_js:\n- 20\nnotifications:\n slack:\n secure: qTKyJRT+HA7Bz0HsClvSBeVrN3M8w4Z6uXDNEkNP/o+1eBmDTl1W"
},
{
"path": "LICENSE",
"chars": 1083,
"preview": "MIT License\n\nCopyright (c) Pixelnest Studio (pixelnest.io)\n\nPermission is hereby granted, free of charge, to any person "
},
{
"path": "README.md",
"chars": 18265,
"preview": "# \n\n> Re-implementation of presskit() as a static site generator\n\n![Build Status](https://tr"
},
{
"path": "assets/_includes/about.html",
"chars": 670,
"preview": "{{#if company.title}}\n<section class=\"block\">\n <h2 id=\"about\">About {{company.title}}</h2>\n\n <dl>\n <dt>Boilerplate<"
},
{
"path": "assets/_includes/appstore.html",
"chars": 7724,
"preview": "<svg class=\"svg-appstore\" xmlns=\"http://www.w3.org/2000/svg\" width=\"270\" height=\"80\" viewBox=\"0 0 135 40\"><style>.a{fill"
},
{
"path": "assets/_includes/assets.html",
"chars": 2969,
"preview": "{{#if presskit.trailers}}\n<section class=\"block\">\n <h2 id=\"videos\">Videos</h2>\n\n {{#each presskit.trailers}}\n <div>\n "
},
{
"path": "assets/_includes/description.html",
"chars": 262,
"preview": "<h2 id=\"description\">Description</h2>\n<p>{{rawText presskit.description}}</p>\n\n<h2 id=\"history\">History</h2>\n{{#if press"
},
{
"path": "assets/_includes/factsheet.html",
"chars": 3024,
"preview": "<aside class=\"factsheet grid__item\">\n <h2 id=\"factsheet\" class=\"factsheet__title\">Factsheet</h2>\n\n {{#if isCompany}}\n "
},
{
"path": "assets/_includes/footer.html",
"chars": 290,
"preview": "<footer class=\"page-footer\">\n <a href=\"https://github.com/pixelnest/presskit.html\">presskit.html</a> by <a href=\"http:/"
},
{
"path": "assets/_includes/head.html",
"chars": 579,
"preview": "<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\n{{#if company.title}}\n<ti"
},
{
"path": "assets/_includes/mailchimp.html",
"chars": 1379,
"preview": "{{#if presskit.widgets.mailchimp}}\n<section class=\"block\">\n <h2 id=\"mailing-list\">Mailing List</h2>\n\n <!-- Begin MailC"
},
{
"path": "assets/_includes/nav.html",
"chars": 2864,
"preview": "<nav class=\"page-nav nav grid__item\">\n <h1 class=\"nav__title\">\n {{#if isCompany}}\n <a href=\".\">{{presskit.title}}"
},
{
"path": "assets/_includes/playstore.html",
"chars": 9460,
"preview": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"270\" height=\"80\" viewBox=\"0 0 135.71649 40.018951\"><defs><linearGradient "
},
{
"path": "assets/_includes/recognition.html",
"chars": 916,
"preview": "{{#if presskit.awards}}\n<section class=\"block\">\n <h2 id=\"awards\">Awards & Recognition</h2>\n\n <ul>\n {{#each presskit"
},
{
"path": "assets/_includes/scripts.html",
"chars": 2492,
"preview": "<script src=\"{{assets}}/js/masonry.min.js\"></script>\n<script src=\"{{assets}}/js/imagesloaded.min.js\"></script>\n<script>\n"
},
{
"path": "assets/_includes/team.html",
"chars": 963,
"preview": "<section class=\"block grid _team-fix-margin-top\">\n {{#if presskit.credits}}\n <article class=\"grid__item grid__item--fl"
},
{
"path": "assets/_includes/widgets.html",
"chars": 1883,
"preview": "{{#if presskit.widgets}}\n<section class=\"block\">\n <h2 id=\"widgets\">Widgets</h2>\n\n <div class=\"grid\">\n {{#if presski"
},
{
"path": "assets/company.html",
"chars": 1059,
"preview": "<!DOCTYPE html>\n<html>\n <head>\n {{>head}}\n </head>\n <body>\n <div class=\"page grid\">\n {{>nav}}\n\n <div "
},
{
"path": "assets/css/dark.css",
"chars": 9452,
"preview": "@charset \"UTF-8\";\n\n/* ---------------------------------------------------------- *\\\n * Globals.\n\\* ---------------------"
},
{
"path": "assets/css/light.css",
"chars": 9112,
"preview": "@charset \"UTF-8\";\n\n/* ---------------------------------------------------------- *\\\n * Globals.\n\\* ---------------------"
},
{
"path": "assets/css/normalize.css",
"chars": 8053,
"preview": "/*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */\n\n/**\n * 1. Change the default font family i"
},
{
"path": "assets/css/print.css",
"chars": 1805,
"preview": "@charset \"UTF-8\";\n\n/* ---------------------------------------------------------- *\\\n * Print stylesheet for presskit.htm"
},
{
"path": "assets/js/hamburger.js",
"chars": 1669,
"preview": "'use strict'\n\n;(function () {\n // Preamble: this code is very specific, and clearly made for then\n // main nav.\n // C"
},
{
"path": "assets/product.html",
"chars": 1026,
"preview": "<!DOCTYPE html>\n<html>\n <head>\n {{>head}}\n </head>\n <body>\n <div class=\"page grid\">\n {{>nav}}\n\n <div "
},
{
"path": "assets/redirect.html",
"chars": 262,
"preview": "<!DOCTYPE html>\n<html>\n <head>\n <meta charset=\"UTF-8\">\n <meta http-equiv=\"refresh\" content=\"0; url={{link}}\">\n "
},
{
"path": "assets/templates/company.xml",
"chars": 1802,
"preview": "<?xml version=\"1.0\" encoding=\"utf-8\"?>\n<company>\n <title></title>\n <based-in></based-in>\n <founding-date></founding-d"
},
{
"path": "assets/templates/product.xml",
"chars": 2188,
"preview": "<?xml version=\"1.0\" encoding=\"utf-8\"?>\n<product>\n <title></title>\n <release-date></release-date>\n <website></website>"
},
{
"path": "bin/presskit",
"chars": 884,
"preview": "#!/usr/bin/env node\n\nconst chalk = require('chalk')\nconst {program} = require('commander')\n\n// -------------------------"
},
{
"path": "bin/presskit-build.js",
"chars": 2345,
"preview": "'use strict'\n\nconst path = require('upath')\nconst chalk = require('chalk')\nconst { program } = require('commander')\ncons"
},
{
"path": "bin/presskit-new.js",
"chars": 1066,
"preview": "'use strict'\n\nconst chalk = require('chalk')\nconst { program } = require('commander')\nconst presskit = require('../lib/i"
},
{
"path": "data/data.xml",
"chars": 8079,
"preview": "<!-- # Company — presskit.html -->\n\n<!--\n **This is your company page**. It should not focus on a specific product, but"
},
{
"path": "data/product/data.xml",
"chars": 11895,
"preview": "<!-- # Product — presskit.html -->\n\n<!--\n **This is your product or game page**. It should focus on _ONLY_ one product."
},
{
"path": "docs/company/index.html",
"chars": 29887,
"preview": "<!DOCTYPE html>\n\n<html>\n<head>\n <title>Company — presskit.html</title>\n <meta http-equiv=\"content-type\" content=\"text/"
},
{
"path": "docs/css/docco.css",
"chars": 8706,
"preview": "/*\n * This is a modified version of the `docco` classic CSS.\n * https://github.com/jashkenas/docco/blob/master/resources"
},
{
"path": "docs/example/css/master.css",
"chars": 9112,
"preview": "@charset \"UTF-8\";\n\n/* ---------------------------------------------------------- *\\\n * Globals.\n\\* ---------------------"
},
{
"path": "docs/example/css/normalize.css",
"chars": 8053,
"preview": "/*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */\n\n/**\n * 1. Change the default font family i"
},
{
"path": "docs/example/index.html",
"chars": 16079,
"preview": "<!DOCTYPE html>\n<html>\n <head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initia"
},
{
"path": "docs/example/js/hamburger.js",
"chars": 1669,
"preview": "'use strict'\n\n;(function () {\n // Preamble: this code is very specific, and clearly made for then\n // main nav.\n // C"
},
{
"path": "docs/example/product/index.html",
"chars": 38832,
"preview": "<!DOCTYPE html>\n<html>\n <head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initia"
},
{
"path": "docs/product/index.html",
"chars": 42670,
"preview": "<!DOCTYPE html>\n\n<html>\n<head>\n <title>Product — presskit.html</title>\n <meta http-equiv=\"content-type\" content=\"text/"
},
{
"path": "documentation",
"chars": 608,
"preview": "#!/usr/bin/env bash\n\nBASEDIR=$(dirname $0)\ncd $BASEDIR\n\nBIN=$(npm bin)\n\n$BIN/docco -l classic -o docs/company data/data."
},
{
"path": "lib/assets.js",
"chars": 1039,
"preview": "'use strict'\n\nconst path = require('upath')\n\n// -------------------------------------------------------------\n// Constan"
},
{
"path": "lib/config.js",
"chars": 388,
"preview": "'use strict'\n\n// -------------------------------------------------------------\n// Module.\n// ---------------------------"
},
{
"path": "lib/core/builder.js",
"chars": 9156,
"preview": "'use strict'\n\nconst fs = require('fs')\nconst path = require('upath')\nconst chalk = require('chalk')\nconst sharp = requir"
},
{
"path": "lib/core/generator.js",
"chars": 9365,
"preview": "'use strict'\n\nconst { promisify } = require('util')\nconst fs = require('fs')\nconst readFilePromised = promisify(fs.readF"
},
{
"path": "lib/core/generator.test.js",
"chars": 4054,
"preview": "'use strict'\n\nconst fs = require('fs')\nconst path = require('path')\nconst os = require('os')\n\nconst generator = require("
},
{
"path": "lib/core/loader.js",
"chars": 2745,
"preview": "'use strict'\n\nconst fs = require('fs')\nconst parser = require('./parser')\n\n// ------------------------------------------"
},
{
"path": "lib/core/loader.test.js",
"chars": 2870,
"preview": "'use strict'\n\nconst {\n __normalizeKeys: normalizeKeys,\n __normalize: normalize,\n __cleanTokens: cleanTokens\n} = requi"
},
{
"path": "lib/core/parser.js",
"chars": 1435,
"preview": "'use strict'\n\nconst { Parser: XMLParser } = require('xml2js')\nconst camelCase = require('camelcase')\n\n// ---------------"
},
{
"path": "lib/core/parser.test.js",
"chars": 1886,
"preview": "'use strict'\n\nconst fs = require('fs')\n\nconst parser = require('./parser')\n\n// -----------------------------------------"
},
{
"path": "lib/core/template.js",
"chars": 3839,
"preview": "'use strict'\n\nconst fs = require('fs')\nconst path = require('upath')\nconst handlebars = require('handlebars')\n\nconst con"
},
{
"path": "lib/helpers/color-console.js",
"chars": 647,
"preview": "'use strict'\n\nconst chalk = require('chalk')\n\n// -------------------------------------------------------------\n// Module"
},
{
"path": "lib/helpers/sfs.js",
"chars": 2047,
"preview": "'use strict'\n\nconst fs = require('fs')\nconst fse = require('fs-extra')\nconst path = require('upath')\n// ----------------"
},
{
"path": "lib/helpers/sfs.test.js",
"chars": 2454,
"preview": "'use strict'\n\nconst mock = require('mock-fs')\nconst fs = require('fs')\nconst sfs = require('./sfs')\n\n// ----------------"
},
{
"path": "lib/helpers/watcher.js",
"chars": 2211,
"preview": "'use strict'\n\nconst path = require('upath')\nconst chokidar = require('chokidar')\nconst bs = require('browser-sync').crea"
},
{
"path": "lib/helpers/zip.js",
"chars": 889,
"preview": "'use strict'\n\nconst fs = require('fs')\nconst path = require('upath')\nconst archiver = require('archiver')\n\n// ----------"
},
{
"path": "lib/index.js",
"chars": 2348,
"preview": "'use strict'\n\nconst fs = require('fs')\nconst path = require('upath')\nconst chalk = require('chalk')\n\nconst console = req"
},
{
"path": "package.json",
"chars": 1588,
"preview": "{\n \"name\": \"presskit\",\n \"version\": \"0.13.0\",\n \"description\": \"Re-implementation of presskit() as a static site genera"
}
]
About this extraction
This page contains the full source code of the pixelnest/presskit.html GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 59 files (313.7 KB), approximately 101.0k tokens, and a symbol index with 52 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.