Projects
-
{{#each products}}
- {{title}} {{/each}}
{{title}}
{{else}}{{presskit.title}} Credits
{{/if}}-
{{#each presskit.credits}}
- {{person}}
- {{#if website}} {{role}} {{else}} {{role}} {{/if}} {{/each}}
About {{company.title}}
- Boilerplate
- {{company.description}}
- More information
- More information on {{company.title}}, our logo & relevant media are available here.
About {{title}}
- Boilerplate
- {{description}} {{#if link}}
- More information
- More information on {{title}} is available here. {{/if}}
Videos
{{#each presskit.trailers}} {{/each}}Videos
There are currently no trailers available for {{presskit.title}}. Check back later for more or contact us for specific requests!
Images
{{#each images.screenshots}}
{{/each}}
{{#each images.screenshotsWithCategory}}
{{title}}
{{#each elements}}
{{/each}}
Logo & Icon
{{#each images.logos}}Logo & Icon
There are currently no logos or icons available for {{presskit.title}}. Check back later for more or contact us for specific requests!
Description
{{rawText presskit.description}}
History
{{#if presskit.history}}{{rawText presskit.history}}
{{/if}} {{#each presskit.histories}}{{header}}
{{rawText text}}
{{/each}} ================================================ FILE: assets/_includes/factsheet.html ================================================ ================================================ FILE: assets/_includes/footer.html ================================================ ================================================ FILE: assets/_includes/head.html ================================================ {{#if company.title}}Mailing List
Awards & Recognition
-
{{#each presskit.awards}}
- "{{description}}" {{info}} {{/each}}
Selected Articles
-
{{#each presskit.quotes}}
-
{{description}}
{{name}}, {{website}}
{{/each}}
Additional Links
-
{{#each presskit.additionals}}
- {{title}}
- {{description}} {{domainURL link}}. {{/each}}
Contact
-
{{#each presskit.contacts}}
- {{name}}
- {{#if mail}} {{mail}} {{/if}} {{#if link}} {{prettyURL link}} {{/if}} {{/each}}
Widgets
{{#if presskit.widgets.appstore}}
{{/if}}
{{#if presskit.widgets.playstore}}
{{/if}}
{{#if presskit.widgets.steam}}
{{/if}} {{#if presskit.widgets.humble}}
{{/if}} {{#if presskit.widgets.itch}}
{{/if}} {{#if presskit.widgets.gamejolt}}
{{/if}} {{#if presskit.widgets.bandcamp}}
{{/if}}
{{>nav}}
{{#if images.header}}
{{/if}}
{{>factsheet}}
{{>description}}
{{>assets}}
{{>recognition}}
{{>team title="Team & Repeating Collaborator"}}
{{>footer}}
{{>scripts}}
================================================
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
================================================
{{>head}}
{{/if}}
{{>nav}}
{{#if images.header}}
{{/if}}
{{>factsheet}}
{{>description}}
{{>mailchimp}}
{{>assets}}
{{>widgets}}
{{>recognition}}
{{>about}}
{{>team}}
{{>footer}}
{{>scripts}}
================================================
FILE: assets/redirect.html
================================================
{{/if}}
Features
-
{{#each presskit.features}}
- {{.}} {{/each}}
There's not enough pizza in your life. It's never enough. @mrhelmut Tweet https://twitter.com/mrhelmut/status/717276362814447616
This is my favorite game of all time. Mum At home http://at.home/
A very serious quote you're very proud of by someone you respect. Master Master's website http://mast.er/
10/10 would play it again and again. A friendly anonymous Steam reviewer Steam review http://steam.review/
-
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.
If you don’t have a
data.xmlyet, the easiest way to start is to run this command in your presskit folder:presskit new -t companyThen, open the generated
data.xmlfile and fill the blanks while following this guide.Okay… ready? Let’s do this.
For your products’
data.xml, refer to the product documentation.
-
Don’t forget to set your XML header correctly.
<?xml version="1.0" encoding="utf-8"?> -
Use a
<company>tag for your maindata.xmlfile. 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> -
<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:
<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> - Use an
-
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> -
</company>
Description
This is a fake presskit for a fake company called Pizza Burger Studio.
History
Built with presskit.html
This presskit is generated by presskit.html, a tool created by Pixelnest Studio.
Free and Open Source
Find presskit.html on https://github.com/pixelnest/presskit.html
Projects
Videos
Example from YouTube. Don't give a full link: the ID is enough — YouTube
Interview with Damien Mayance and Matthieu Oger of Pixenest Studio — Download
Images
Logo & Icon
Awards & Recognition
- "An award" Name, location, 29 April, 1988
- "A nomination" Name, location, 03 October, 1988
Selected Articles
-
There's not enough pizza in your life. It's never enough.
@mrhelmut, Tweet
Additional Links
- Patricia Pizza Twitter
- @patpiz at twitter.com.
- Bob Burger Twitter
- @bobburg at twitter.com.
Team & Repeating Collaborator
- Patricia Pizza
- Founder, Developer, Pizza Burger Studio
- Bob Burger
- Founder, Designer, Pizza Burger Studio
- Jake Burgza
- Artist, Collaborator
- Sophia Pizer
- Musician, Collaborator
Contact
- Inquiries
- contact@pizzaburger.studio
- twitter.com/pizzaburgerstudio
- facebook.com/pizzaburgerstudio
- Web
- pizzaburger.studio
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.
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.
Features
- List some "Key Sellings Points" to grab player's attention.
- Don't be too generic ("pixel art graphics!"), don't be too pretentious ("most incredible game experience!").
- Also, people like numbers, so you can add some (450 weapons, hundreds of levels, dozens of hours of playtime!).
- Need ideas? Maybe explain some game modes?
- It would be a nice place to say something about multiplayer, if you have some.
- Have you translated your game? (You probably should btw.)
Videos
Release Trailer — YouTube
Gameplay Video #2 — YouTube
Early Access Trailer — YouTube
Short gameplay preview: Burger vs Pizza — Download
Images
wallpapers
Logo & Icon
Widgets
Awards & Recognition
- "Game of the year without a doubt" Saint-Père-Marc-En-Poulet (France), 04 February, 2016
- "Best soundtrack" A great game festival (World), 01 October, 2015
- "Best MYGAMENGINE game" Deep into the woods (Forest), 31 March, 2014
Selected Articles
-
This is my favorite game of all time.
Mum, At home -
A very serious quote you're very proud of by someone you respect.
Master, Master's website -
10/10 would play it again and again.
A friendly anonymous Steam reviewer, Steam review
Additional Links
- Original Soundtrack (OST)
- Composed by an awesome musician. Listen for free, download for $3 at zandernoriega.bandcamp.com.
- Release announcement
- Announcement are exciting, so we usually make blog posts or news about it on pixelnest.io.
About Pizza Burger Studio
- Boilerplate
- This is a fake presskit for a fake company called Pizza Burger Studio.
- More information
- More information on Pizza Burger Studio, our logo & relevant media are available here.
About Pixelnest Studio
- Boilerplate
- 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.
- More information
- More information on Pixelnest Studio is available here.
About Pizza Oven LLC
- Boilerplate
- This is a fake company to illustrate the fact that you can have multiple about tags in your product page.
My Super Game Credits
- Krokmou
- Bot Leader, Game Designer, Pixelnest Studio
- Hiccup
- Developer, Pixelnest Studio
- Astrid
- Musician, Freelancer
Contact
- Inquiries
- mysupergame@pizzaburger.studio
- twitter.com/pizzaburgerstudio
- facebook.com/pizzaburgerstudio
- Web
- mysupergame.pizzaburger.studio
-
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.
If you don’t have a
data.xmlyet, the easiest way to start is to run this command in your presskit folder:presskit new -t productThen, open the generated
data.xmlfile and fill the blanks while following this guide.
For your company’
data.xml, refer to the company documentation.
-
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> -
<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 EditionOf course, the
Product Namevalue is clickable.In the related product page, a new value will also be added:
DLC of: My Super GameObviously, 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> - Use an
-
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
-
<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
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
tag above, if you want to explain a partner a bit more. But you could use this section for other purpose. The 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>
', '
', '
', '
', '
', '
', '', '', '', '', '', '', '', '' ] // ------------------------------------------------------------- // Module. // ------------------------------------------------------------- function loadDataFile (filename) { let xml = fs.readFileSync(filename, 'utf-8') // Remove inline tags. xml = cleanTokens(tagsToClean, xml) const rawJSON = parser.parseXML(xml) // Normalize some keys. return normalizeKeys(keysToNormalize, rawJSON) } function cleanTokens (tokens, str) { const regex = new RegExp(tokens.join('|'), 'gi') return str.replace(regex, '') } // TODO: this should probably be done as a custom tag processor with xml2js. function normalizeKeys (keys, json) { Object.keys(json) .filter(k => keys.includes(k)) .forEach(k => { json[k] = normalize(json[k]) }) return json } function normalize (obj) { const keys = Object.keys(obj) // Ignore if there're more than one key or 0 in the object. if (keys.length === 0 || keys.length > 1) return obj // Get the content of the only key of the object. const data = obj[keys[0]] // An array? Return it. if (Array.isArray(data)) { return data } // Otherwise, wrap in an array. return [data] } // ------------------------------------------------------------- // Exports. // ------------------------------------------------------------- module.exports = { loadDataFile, __cleanTokens: cleanTokens, __normalizeKeys: normalizeKeys, __normalize: normalize } ================================================ FILE: lib/core/loader.test.js ================================================ 'use strict' const { __normalizeKeys: normalizeKeys, __normalize: normalize, __cleanTokens: cleanTokens } = require('./loader') // ------------------------------------------------------------- // Tests. // ------------------------------------------------------------- describe('cleanTokens()', () => { const tokens = [ '
', '
', '
', '', '', '', '' ] it('should not change a string without tokens', () => { expect(cleanTokens(tokens, 'test test test')).toEqual('test test test') }) it('should remove all tokens', () => { expect(cleanTokens(tokens, '
This is a
string')) .toEqual('This is a string') }) it('should remove all tokens with multiline string', () => { const start = `
This is a
string Yep, it is.
` const result = ` This is a string Yep, it is. ` expect(cleanTokens(tokens, start)).toEqual(result) }) }) describe('normalizeKeys()', () => { const keys = ['quotes', 'awards'] const received = { quotes: { quote: { description: 'quote' } }, awards: { award: [ { description: 1 }, { description: 2 } ] }, test: 42, socials: { social: [ { text: 1 }, { text: 2 } ] } } const correct = { quotes: [{ description: 'quote' }], awards: [ { description: 1 }, { description: 2 } ], test: 42, socials: { social: [ { text: 1 }, { text: 2 } ] } } it('normalizes a list of provided keys in an object', () => { expect(normalizeKeys(keys, received)).toEqual(correct) }) }) describe('normalize()', () => { it('returns the correct content as it is', () => { expect(normalize([ { description: 1 }, { description: 2 } ])).toEqual([ { description: 1 }, { description: 2 } ]) }) it('returns an object without the useless intermediate key', () => { expect(normalize({ award: [ { description: 1 }, { description: 2 } ] })).toEqual([ { description: 1 }, { description: 2 } ]) }) it('returns an object containing an array, even if there is one item only', () => { expect(normalize({ award: { description: 1 } })).toEqual([ { description: 1 } ]) }) it('ignores an object containing 0 key', () => { expect(normalize({})).toEqual({}) }) it('ignores an object containing 2 keys or more', () => { expect(normalize({ test: true, award: [ { description: 1 }, { description: 2 } ] })).toEqual({ test: true, award: [ { description: 1 }, { description: 2 } ] }) }) }) ================================================ FILE: lib/core/parser.js ================================================ 'use strict' const { Parser: XMLParser } = require('xml2js') const camelCase = require('camelcase') // ------------------------------------------------------------- // Constants. // ------------------------------------------------------------- const OPTIONS = { explicitArray: false, async: false, tagNameProcessors: [x => camelCase(x)] } // ------------------------------------------------------------- // Module. // ------------------------------------------------------------- function parseXML (xml) { if (!xml) { throw new Error('XML input was null or empty') } let data new XMLParser(OPTIONS).parseString(xml, function (err, result) { if (err || !result) { throw new Error('Failed to parse XML file') } // Values are nested in the "product", "game" or "company" root node. // We need to detect and ignore this root element. if (result.game) { data = result.game data.type = 'product' } else if (result.product) { data = result.product data.type = 'product' } else if (result.company) { data = result.company data.type = 'company' } else { throw new Error('Unrecognized XML file, expected
, , etc.') return data._ } return data }, prettyURL: function (link) { try { const url = new URL(link) const p = url.pathname === '/' ? '' : url.pathname return url.hostname.replace('www.', '') + p } catch (e) { return link } }, domainURL: function (link) { try { const url = new URL(link) return url.hostname.replace('www.', '') } catch (e) { return link } }, permalink: function (link) { // Do nothing if the `--pretty-links` flag is not activated. if (!config.commands.build.prettyLinks) return link if (link.endsWith('index.html')) { return path.dirname(link) + '/' } return link }, basename: function (name) { const ext = path.extname(name) return path.basename(name, ext) }, trim: function (data) { return (data + '').trim() }, // If a thumbnail exists, return it. // Otherwise, return the base image. thumbOrImage: function (image) { const imageName = path.join('images', image) const thumbName = path.join('images', `${image}.thumb.jpg`) const thumbPath = path.join(destination, thumbName) if (fs.existsSync(thumbPath)) return thumbName return imageName } }) } // Is the file an HTML file? function isValidPartial (file) { const ext = path.extname(file) return ext === '.html' } // ------------------------------------------------------------- // Exports. // ------------------------------------------------------------- module.exports = { createTemplate } ================================================ FILE: lib/helpers/color-console.js ================================================ 'use strict' const chalk = require('chalk') // ------------------------------------------------------------- // Module. // ------------------------------------------------------------- function colorize (colorizer, args) { return Array.from(args).map(el => colorizer(el)) } function error () { console.error.apply(null, colorize(chalk.red, arguments)) } function warn () { console.warn.apply(null, colorize(chalk.yellow, arguments)) } // ------------------------------------------------------------- // Exports. // ------------------------------------------------------------- module.exports = { error, warn, log: console.log } ================================================ FILE: lib/helpers/sfs.js ================================================ 'use strict' const fs = require('fs') const fse = require('fs-extra') const path = require('upath') // ------------------------------------------------------------- // Module. // ------------------------------------------------------------- // Create a directory if it doesn't exist yet. function createDir (dir) { if (fs.existsSync(dir)) { return false } fs.mkdirSync(dir, { recursive: true }) return true } function copyDirContent (source, target) { if (!fs.existsSync(source)) return // Create target dir if necessary. createDir(target) // Copy all files from source to target. findAllFiles(source).forEach((name) => { const nameWithoutSource = path.relative(source, name) const targetFile = path.join(target, nameWithoutSource) fse.outputFileSync(targetFile, fs.readFileSync(name)) }) } // Find all files in a directory structure. function findAllFiles (baseDir, { ignoredFolders = [], maxDepth = undefined } = {}) { const list = [] function search (dir, depth) { let entries try { entries = fs.readdirSync(dir) } catch (e) { return } entries.forEach(file => { file = path.join(dir, file) // File or directory? Ok. // Otherwise, discard the file (may have been deleted between readdir and stat). let stat try { stat = fs.statSync(file) } catch (e) { return } if (stat.isFile()) { list.push(file) } else if (stat.isDirectory()) { // The directory should be ignored? if (ignoredFolders.includes(path.basename(file))) { return } // Should we stop at this depth? if (maxDepth && (depth >= maxDepth)) { return } search(file, depth + 1) } }) } search(baseDir, 0) return list } // ------------------------------------------------------------- // Exports. // ------------------------------------------------------------- module.exports = { createDir, copyDirContent, findAllFiles } ================================================ FILE: lib/helpers/sfs.test.js ================================================ 'use strict' const mock = require('mock-fs') const fs = require('fs') const sfs = require('./sfs') // ------------------------------------------------------------- // Data. // ------------------------------------------------------------- const fakeFileSystem = { product1: { 'data.json': '{ "type": "product", "title": "Fake Product" }', images: { 'img01.png': Buffer.from([]), 'img02.png': Buffer.from([]), 'img03.png': Buffer.from([]) }, emptyDir1: {} }, product2: { 'data.xml': '