Update documentation

pixelnest · Aug 14, 2018 · a123ecc · a123ecc
1 parent 1e15a71
commit a123ecc
Show file tree

Hide file tree

Showing 10 changed files with 101 additions and 31 deletions.
diff --git a/data/data.xml b/data/data.xml
@@ -147,7 +147,7 @@
       In this case, only a sentence will be shown, along with a download link.
     -->
     <trailer>
-      <name>Gameplay Preview: Beta 42</name>
+      <name>Interview with Damien Mayance and Matthieu Oger of Pixenest Studio</name>
       <download>https://github.com/pixelnest/presskit.html</download>
     </trailer>
   </trailers>

diff --git a/data/product/data.xml b/data/product/data.xml
@@ -189,6 +189,12 @@
     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>
@@ -203,6 +209,10 @@
       <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 -->

diff --git a/docs/company/index.html b/docs/company/index.html
@@ -280,7 +280,8 @@ <h2 id="trailers">Trailers</h2>
               <p>Add your videos. Because we are in the <code>&lt;company&gt;</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>&lt;trailer&gt;</code>:</p>
+<pre><code><span class="hljs-tag">&lt;<span class="hljs-name">download</span>&gt;</span>https://example.com/video.mp4<span class="hljs-tag">&lt;/<span class="hljs-name">download</span>&gt;</span></code></pre>
             </div>
 
             <div class="content"><div class='highlight'><pre>  <span class="hljs-tag">&lt;<span class="hljs-name">trailers</span>&gt;</span>
@@ -292,8 +293,7 @@ <h2 id="trailers">Trailers</h2>
       <span class="hljs-tag">&lt;<span class="hljs-name">name</span>&gt;</span>Example from both YouTube and Vimeo<span class="hljs-tag">&lt;/<span class="hljs-name">name</span>&gt;</span>
       <span class="hljs-tag">&lt;<span class="hljs-name">youtube</span>&gt;</span>YH3c1QZzRK4<span class="hljs-tag">&lt;/<span class="hljs-name">youtube</span>&gt;</span>
       <span class="hljs-tag">&lt;<span class="hljs-name">vimeo</span>&gt;</span>108650530<span class="hljs-tag">&lt;/<span class="hljs-name">vimeo</span>&gt;</span>
-    <span class="hljs-tag">&lt;/<span class="hljs-name">trailer</span>&gt;</span>
-  <span class="hljs-tag">&lt;/<span class="hljs-name">trailers</span>&gt;</span></pre></div></div>
+    <span class="hljs-tag">&lt;/<span class="hljs-name">trailer</span>&gt;</span></pre></div></div>
 
         </li>
 
@@ -304,10 +304,17 @@ <h2 id="trailers">Trailers</h2>
               <div class="pilwrap ">
                 <a class="pilcrow" href="#section-16">&#182;</a>
               </div>
-              <h2 id="awards-quotes-links">Awards, quotes &amp; links</h2>
+              <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">&lt;<span class="hljs-name">trailer</span>&gt;</span>
+      <span class="hljs-tag">&lt;<span class="hljs-name">name</span>&gt;</span>Interview with Damien Mayance and Matthieu Oger of Pixenest Studio<span class="hljs-tag">&lt;/<span class="hljs-name">name</span>&gt;</span>
+      <span class="hljs-tag">&lt;<span class="hljs-name">download</span>&gt;</span>https://github.com/pixelnest/presskit.html<span class="hljs-tag">&lt;/<span class="hljs-name">download</span>&gt;</span>
+    <span class="hljs-tag">&lt;/<span class="hljs-name">trailer</span>&gt;</span>
+  <span class="hljs-tag">&lt;/<span class="hljs-name">trailers</span>&gt;</span></pre></div></div>
+
         </li>
 
 
@@ -317,6 +324,19 @@ <h2 id="awards-quotes-links">Awards, quotes &amp; links</h2>
               <div class="pilwrap ">
                 <a class="pilcrow" href="#section-17">&#182;</a>
               </div>
+              <h2 id="awards-quotes-links">Awards, quotes &amp; links</h2>
+
+            </div>
+
+        </li>
+
+
+        <li id="section-18">
+            <div class="annotation">
+
+              <div class="pilwrap ">
+                <a class="pilcrow" href="#section-18">&#182;</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>
 
@@ -336,11 +356,11 @@ <h2 id="awards-quotes-links">Awards, quotes &amp; links</h2>
         </li>
 
 
-        <li id="section-18">
+        <li id="section-19">
             <div class="annotation">
 
               <div class="pilwrap ">
-                <a class="pilcrow" href="#section-18">&#182;</a>
+                <a class="pilcrow" href="#section-19">&#182;</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>
@@ -361,11 +381,11 @@ <h2 id="awards-quotes-links">Awards, quotes &amp; links</h2>
         </li>
 
 
-        <li id="section-19">
+        <li id="section-20">
             <div class="annotation">
 
               <div class="pilwrap ">
-                <a class="pilcrow" href="#section-19">&#182;</a>
+                <a class="pilcrow" href="#section-20">&#182;</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>
@@ -389,11 +409,11 @@ <h2 id="awards-quotes-links">Awards, quotes &amp; links</h2>
         </li>
 
 
-        <li id="section-20">
+        <li id="section-21">
             <div class="annotation">
 
               <div class="pilwrap ">
-                <a class="pilcrow" href="#section-20">&#182;</a>
+                <a class="pilcrow" href="#section-21">&#182;</a>
               </div>
               <h2 id="team-contacts">Team &amp; Contacts</h2>
 
@@ -402,11 +422,11 @@ <h2 id="team-contacts">Team &amp; Contacts</h2>
         </li>
 
 
-        <li id="section-21">
+        <li id="section-22">
             <div class="annotation">
 
               <div class="pilwrap ">
-                <a class="pilcrow" href="#section-21">&#182;</a>
+                <a class="pilcrow" href="#section-22">&#182;</a>
               </div>
               <p>This is for your people.</p>
 <p>Add yourself, of course, but also your <strong>frequent</strong> collaborators for example.</p>
@@ -444,11 +464,11 @@ <h2 id="team-contacts">Team &amp; Contacts</h2>
         </li>
 
 
-        <li id="section-22">
+        <li id="section-23">
             <div class="annotation">
 
               <div class="pilwrap ">
-                <a class="pilcrow" href="#section-22">&#182;</a>
+                <a class="pilcrow" href="#section-23">&#182;</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>
@@ -484,11 +504,11 @@ <h2 id="team-contacts">Team &amp; Contacts</h2>
         </li>
 
 
-        <li id="section-23">
+        <li id="section-24">
             <div class="annotation">
 
               <div class="pilwrap ">
-                <a class="pilcrow" href="#section-23">&#182;</a>
+                <a class="pilcrow" href="#section-24">&#182;</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>

diff --git a/docs/example/css/master.css b/docs/example/css/master.css
@@ -371,6 +371,10 @@ a:hover {
   display: block;
 }
 
+.gallery__item a[href$=".gif"]:focus:active {
+  outline: none;
+}
+
 .gallery__item a[href$=".gif"]::after {
   position: absolute;
   z-index: 1;

diff --git a/docs/example/images/pizza-02.gif b/docs/example/images/pizza-02.gif
diff --git a/docs/example/images/pizza-02.gif.thumb.jpg b/docs/example/images/pizza-02.gif.thumb.jpg
diff --git a/docs/example/images/pizza.gif.thumb.jpg b/docs/example/images/pizza.gif.thumb.jpg
diff --git a/docs/example/index.html b/docs/example/index.html
@@ -6,12 +6,12 @@
 
     <title>Pizza Burger Studio</title>
 
-    <link rel="shortcut icon" href="images/favicon.ico?t=1534256235802">
+    <link rel="shortcut icon" href="images/favicon.ico?t=1534265792107">
 
     <link rel="stylesheet" href="./css/normalize.css">
     <link rel="stylesheet" href="./css/master.css">
 
-    <!-- Generated by presskit.html 0.11.0 (https://github.com/pixelnest/presskit.html). -->
+    <!-- Generated by presskit.html 0.12.0 (https://github.com/pixelnest/presskit.html). -->
   </head>
   <body>
     <div class="page grid">
@@ -80,6 +80,7 @@ <h1 class="nav__title">
           </li>
 
 
+
           <li>
             <a class="nav__item" href="#credits">Team</a>
           </li>
@@ -174,30 +175,39 @@ <h2 id="videos">Videos</h2>
 
             <div>
               <p>
-                <strong>Example from YouTube. Don&#x27;t give a full link: the ID is enough</strong> <a href="https://www.youtube.com/embed/er416Ad3R1g?rel=0">YouTube</a>
+                <strong>Example from YouTube. Don&#x27;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>
+                <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>
+                <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>
 
@@ -216,6 +226,11 @@ <h2 id="images">Images</h2>
                   <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">

diff --git a/docs/example/product/index.html b/docs/example/product/index.html
@@ -6,12 +6,12 @@
 
     <title>My Super Game - Pizza Burger Studio</title>
 
-    <link rel="shortcut icon" href="images/favicon.ico?t=1534256235503">
+    <link rel="shortcut icon" href="images/favicon.ico?t=1534265791784">
 
     <link rel="stylesheet" href="../css/normalize.css">
     <link rel="stylesheet" href="../css/master.css">
 
-    <!-- Generated by presskit.html 0.11.0 (https://github.com/pixelnest/presskit.html). -->
+    <!-- Generated by presskit.html 0.12.0 (https://github.com/pixelnest/presskit.html). -->
   </head>
   <body>
     <div class="page grid">
@@ -80,7 +80,14 @@ <h1 class="nav__title">
           </li>
 
           <li>
-            <a class="nav__item" href="#credits">About Pizza Burger Studio</a>
+            <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>
@@ -198,33 +205,43 @@ <h2 id="videos">Videos</h2>
 
             <div>
               <p>
-                <strong>Release Trailer</strong> <a href="https://www.youtube.com/embed/EtXajayBLzw?rel=0">YouTube</a>
+                <strong>Release Trailer</strong> — <a href="https://www.youtube.com/embed/EtXajayBLzw?rel=0">YouTube</a> 
               </p>
 
               <div class="video-player">
                 <iframe class="video-player__frame" src="https://www.youtube.com/embed/EtXajayBLzw?rel=0" frameborder="0" allowfullscreen></iframe>
               </div>
 
+
             </div>
             <div>
               <p>
-                <strong>Gameplay Video #2</strong> <a href="https://www.youtube.com/embed/EPNK1j3TMjU?rel=0">YouTube</a>
+                <strong>Gameplay Video #2</strong> — <a href="https://www.youtube.com/embed/EPNK1j3TMjU?rel=0">YouTube</a> 
               </p>
 
               <div class="video-player">
                 <iframe class="video-player__frame" src="https://www.youtube.com/embed/EPNK1j3TMjU?rel=0" frameborder="0" allowfullscreen></iframe>
               </div>
 
+
             </div>
             <div>
               <p>
-                <strong>Early Access Trailer</strong> <a href="https://www.youtube.com/embed/EtyQMcc19xY?rel=0">YouTube</a>
+                <strong>Early Access Trailer</strong> — <a href="https://www.youtube.com/embed/EtyQMcc19xY?rel=0">YouTube</a> 
               </p>
 
               <div class="video-player">
                 <iframe class="video-player__frame" src="https://www.youtube.com/embed/EtyQMcc19xY?rel=0" frameborder="0" allowfullscreen></iframe>
               </div>
 
+
+            </div>
+            <div>
+
+
+                  <p>
+                    <strong>Short gameplay preview: Burger vs Pizza</strong> — <a href="https://github.com/pixelnest/presskit.html" target="_blank">Download</a>
+                  </p>
             </div>
           </section>
 

diff --git a/docs/product/index.html b/docs/product/index.html
@@ -393,11 +393,11 @@ <h2 id="trailers">Trailers</h2>
               <p>Add your videos. Trailer, teaser, snippets? Let’s roll!</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>&lt;trailer&gt;</code>:</p>
+<pre><code><span class="hljs-tag">&lt;<span class="hljs-name">download</span>&gt;</span>https://example.com/video.mp4<span class="hljs-tag">&lt;/<span class="hljs-name">download</span>&gt;</span></code></pre>
             </div>
 
-            <div class="content"><div class='highlight'><pre>
-  <span class="hljs-tag">&lt;<span class="hljs-name">trailers</span>&gt;</span>
+            <div class="content"><div class='highlight'><pre>  <span class="hljs-tag">&lt;<span class="hljs-name">trailers</span>&gt;</span>
     <span class="hljs-tag">&lt;<span class="hljs-name">trailer</span>&gt;</span>
       <span class="hljs-tag">&lt;<span class="hljs-name">name</span>&gt;</span>Release Trailer<span class="hljs-tag">&lt;/<span class="hljs-name">name</span>&gt;</span>
       <span class="hljs-tag">&lt;<span class="hljs-name">youtube</span>&gt;</span>EtXajayBLzw<span class="hljs-tag">&lt;/<span class="hljs-name">youtube</span>&gt;</span>
@@ -410,6 +410,10 @@ <h2 id="trailers">Trailers</h2>
       <span class="hljs-tag">&lt;<span class="hljs-name">name</span>&gt;</span>Early Access Trailer<span class="hljs-tag">&lt;/<span class="hljs-name">name</span>&gt;</span>
       <span class="hljs-tag">&lt;<span class="hljs-name">youtube</span>&gt;</span>EtyQMcc19xY<span class="hljs-tag">&lt;/<span class="hljs-name">youtube</span>&gt;</span>
     <span class="hljs-tag">&lt;/<span class="hljs-name">trailer</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">trailer</span>&gt;</span>
+      <span class="hljs-tag">&lt;<span class="hljs-name">name</span>&gt;</span>Short gameplay preview: Burger vs Pizza<span class="hljs-tag">&lt;/<span class="hljs-name">name</span>&gt;</span>
+      <span class="hljs-tag">&lt;<span class="hljs-name">download</span>&gt;</span>https://github.com/pixelnest/presskit.html<span class="hljs-tag">&lt;/<span class="hljs-name">download</span>&gt;</span>
+    <span class="hljs-tag">&lt;/<span class="hljs-name">trailer</span>&gt;</span>
   <span class="hljs-tag">&lt;/<span class="hljs-name">trailers</span>&gt;</span></pre></div></div>
 
         </li>