Presskit page

readme.md

@@ -17,11 +17,11 @@ hexo deploy
 
 ### Tasks
 
-- [ ] Trailer field
+- [x] Trailer field
 
-- [ ] Game long description
+- [x] Game long description
 
-- [ ] Presskit page
+- [x] Presskit page
 
 - [ ] Grid Miner content
   
@@ -45,8 +45,6 @@ hexo deploy
 
 - [x] Grid Miner announcement post
 
-- [ ] 
-
 - [ ] Blog page
 
 - [ ] Games page

source/_posts/games/max-raider.md

@@ -13,6 +13,10 @@ release: December 15th 2020
 game_modes: Arena Deathmatch
 email: kairoscope.games[at]gmail.com
 twitter_dev: kairoscope
+trailer: https://www.youtube.com/embed/p6RHwO6mFlU
+library_hero: /games/max-raider/library-hero.png
+library_logo: /games/max-raider/library-logo.png
+steam_widget: https://store.steampowered.com/widget/1481070/
 screenshots:
 - /games/max-raider/screenshots/max-raider-screenshot-001.png
 - /games/max-raider/screenshots/max-raider-screenshot-003.png
@@ -23,18 +27,10 @@ screenshots:
 - /games/max-raider/screenshots/max-raider-screenshot-012.png
 ---
 
-# Max Raider
-
-## About This Game
-
-Max Raider is a top-down 3D action shooter where you fight waves of enemies on procedurally generated arenas. Rest and prepare for the next series of waves by buying a variety of weapons and items from your allies. Protect the Bunker, your only hope for a home.
+## Features
 
 - 25+ items, including firearms, hand weapons and healing items
 - 16 unique procedurally generated maps
 - Loot items and cash from defeated foes
 - Use cover and clever tactics to gain advantage over hoards of gradually more difficult foes
-- Compare and analise your playthrough with post-game statistics
-
-## About The Team
-
-Kairoscope Games is a one-person studio located near São Paulo, Brazil. Before working on games, James worked with video production and editing. He has been studying game design and making prototypes for the last 10 years. Max Raider is Kairoscope's first comercial game.
+- Compare and analise your playthrough with post-game statistics

source/games/grid-miner/presskit/index.md

@@ -0,0 +1,10 @@
+---
+title: Grid Miner Presskit
+id: grid-miner
+content_type: game
+layout: presskit
+---
+
+## About This Game
+
+Nothing here yet...

source/games/max-raider/presskit/index.md

@@ -0,0 +1,41 @@
+---
+title: Max Raider
+id: max-raider
+content_type: game
+layout: presskit
+description: Max Raider is a top-down 3D action shooter where you fight waves of enemies on procedurally generated arenas. Rest and prepare for the next series of waves by buying a variety of weapons and items from your allies. Protect the Bunker, your only hope for a home.
+developer: Kairoscope
+developer_url: http://kairoscope.net
+publisher: Kairoscope
+publisher_url: http://kairoscope.net
+genre: Action, Indie
+tags: Twin Stick Shooter, Post-apocalyptic, Arena Shooter, Top-Down,Isometric, Arcade, Shooter, Top-Down Shooter, Perma Death, Procedural Generation, Combat, Third Person, 3D, Singleplayer, Stylized, Military, Robots, Sci-fi, Inventory Management
+platforms: Windows PC and Mac
+release: December 15th 2020
+game_modes: Arena Deathmatch
+email: kairoscope.games[at]gmail.com
+twitter_dev: kairoscope
+trailer: https://www.youtube.com/embed/p6RHwO6mFlU
+screenshots:
+- /games/max-raider/screenshots/max-raider-screenshot-001.png
+- /games/max-raider/screenshots/max-raider-screenshot-003.png
+- /games/max-raider/screenshots/max-raider-screenshot-004.png
+- /games/max-raider/screenshots/max-raider-screenshot-006.png
+- /games/max-raider/screenshots/max-raider-screenshot-007.png
+- /games/max-raider/screenshots/max-raider-screenshot-011.png
+- /games/max-raider/screenshots/max-raider-screenshot-012.png
+---
+
+## About This Game
+
+Max Raider is a top-down 3D action shooter where you fight waves of enemies on procedurally generated arenas. Rest and prepare for the next series of waves by buying a variety of weapons and items from your allies. Protect the Bunker, your only hope for a home.
+
+- 25+ items, including firearms, hand weapons and healing items
+- 16 unique procedurally generated maps
+- Loot items and cash from defeated foes
+- Use cover and clever tactics to gain advantage over hoards of gradually more difficult foes
+- Compare and analise your playthrough with post-game statistics
+
+## About The Team
+
+Kairoscope Games is a one-person studio located near São Paulo, Brazil. Before working on games, James worked with video production and editing. He has been studying game design and making prototypes for the last 10 years. Max Raider is Kairoscope's first comercial game.

themes/kairoscope-theme/layout/_partial/about.ejs

@@ -9,14 +9,4 @@
             <p class="lead">A two person independent game studio from São Paulo, Brazil. Kairoscope officially started in 2020 by cousins <a href="">James Peret</a> and <a href="">Ben Peret</a>. Since then they have released one game and are hard working to finish the second.</p>
         </div>
     </div>
-    <div class="row">
-        <div class="col-12">
-            <h2 class="group-header">Now</h2>
-        </div>
-    </div>
-    <div class="row">
-        <div class="col-12">
-            <p class="lead">Currently polishing <a href="/games/grid-miner/">Grid Miner</a>, a realtime strategy puzzle game. Soon to be released on Steam.</p>
-        </div>
-    </div>
 </div>

themes/kairoscope-theme/layout/_partial/footer.ejs

@@ -1,6 +1,8 @@
 <footer>
     <%- partial('_partial/about') %>
 
+    <%- partial('_partial/now') %>
+
     <%- partial('_partial/contact') %>
 
     <%- partial('_partial/newsletter') %>

themes/kairoscope-theme/layout/_partial/now.ejs

@@ -0,0 +1,12 @@
+<div class="container">
+    <div class="row">
+        <div class="col-12">
+            <h2 class="group-header">Now</h2>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-12">
+            <p class="lead">Currently polishing <a href="/games/grid-miner/">Grid Miner</a>, a realtime strategy puzzle game. Soon to be released on Steam.</p>
+        </div>
+    </div>
+</div>

themes/kairoscope-theme/layout/game.ejs

@@ -1,71 +1,98 @@
-<div class="container-fluid">
-    <div class="row justify-content-center">
-        <div class="" style="text-align: center; padding: 0px;">
-            <img src="/games/grid-miner/library-hero.png" class="img-fluid cover-bg">
-            <img src="/games/grid-miner/library-logo.png" style="width: 65%; position: relative; top: -60%;">
-        </div>
-    </div>
-</div>
-
-<section class="py-5 text-center container" style="margin-top: -35%;">
-    <div class="row py-lg-5">
-        <div class="col-10 mx-auto">
-            <p class="lead text-muted"><%- page.description %></p>
-            <a class="btn-steam" href="https://store.steampowered.com/app/1481070/Max_Raider/">
-            <!-- <img src="images/button-steam.png"> -->
-            </a>
+<main role="main" class="bg-dark2" >
+    <% if(page.library_hero != undefined) { %>
+        <div class="container-fluid">
+            <div class="row justify-content-center">
+                <div class="" style="text-align: center; padding: 0px;">
+                    <img src="<%- page.library_hero %>" class="img-fluid cover-bg">
+                    <img src="<%- page.library_logo %>" style="width: 65%; position: relative; top: -60%;">
+                </div>
+            </div>
         </div>
-    </div>
-</section>
+    <% } %>
 
+    <% if(page.description != undefined) { %>
+        <section class="py-5 text-center container" 
+            <% if(page.library_hero != undefined) { %> style="margin-top: -35%;" <% } %> >
+            <div class="row py-lg-5">
+                <div class="col-10 mx-auto">
+                    <p class="lead"><%- page.description %></p>
+                    <a class="btn-steam" href="https://store.steampowered.com/app/1481070/Max_Raider/">
+                    <!-- <img src="images/button-steam.png"> -->
+                    </a>
+                </div>
+            </div>
+        </section>
+    <% } %>
 
 
-<% if(page.screenshots != undefined) { %>
+    <% if(page.screenshots != undefined) { %>
 
-    <div class="album py-5">
-        <div class="container-fluid content">
-            <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3 space-bottom">
-                <% var screenshot_count = (Math.round(page.screenshots.length/3)*3) %>
-                <% for(var i = 0; i < screenshot_count; i++) { %>
-                    <div class="col">
-                        <div class="card shadow-sm">
-                            <a href="<%- page.screenshots[i] %>" target="_BLANK">
-                            <img src="<%- page.screenshots[i] %>" class="img-fluid">
-                            </a>
+        <div class="album py-5">
+            <div class="container-fluid content">
+                <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3 space-bottom">
+                    <% var screenshot_count = (Math.round(page.screenshots.length/3)*3) %>
+                    <% for(var i = 0; i < screenshot_count; i++) { %>
+                        <div class="col">
+                            <div class="card shadow-sm">
+                                <a href="<%- page.screenshots[i] %>" target="_BLANK">
+                                <img src="<%- page.screenshots[i] %>" class="img-fluid">
+                                </a>
+                            </div>
                         </div>
-                    </div>
-                <% }; %>
-                
+                    <% }; %>
+                    
+                </div>
+            </div>
+        </div>
+    <% } %>
+    <% if(page.trailer != undefined) { %>
+    <div class="album py-5 bg-darker">
+        <div class="container container-large">
+        <div class="row justify-content-center">
+            <div class="col-lg-10" style="text-align: center;">
+            <div class="ratio ratio-16x9">
+                <iframe class="video-player" src="<%- page.trailer %>" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+            </div>
             </div>
         </div>
+        </div>
     </div>
-<% } %>
+    <% } %>
 
-  <!-- <div class="album py-5 bg-darker">
-    <div class="container">
-      <div class="row justify-content-center">
-        <div class="col-lg-10" style="text-align: center;">
-          <div class="ratio ratio-16x9">
-            <iframe src="https://www.youtube.com/embed/p6RHwO6mFlU" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
-          </div>
+    <section class="py-5 text-center container">
+        <div class="row py-lg-5">
+            <div class="col-10 mx-auto post-content">
+                <p class="lead text-muted"><%- page.content %></p>
+            </div>
         </div>
-      </div>
-    </div>
-  </div> -->
+    </section>
 
-<!-- <div class="container">
-    <div class="row">
-        <div class="col-12">
-            <%- page.content %>
-            <% var keys = Object.keys(page); %>
-            <ul>
-                <% keys.forEach(key => { %>
-                    <li><%- key %></li>
-                <% }); %>
-            </ul>
+    <% if(page.steam_widget != undefined) { %>
+        <div class="container ">
+            <div class="row justify-content-center">
+                <div class="col-10" style="text-align: center;">
+                <div class="ratio-steam" style="margin-top: 30px;">
+                    <iframe src="<%- page.steam_widget %>" frameborder="0"></iframe>
+                </div>
+                <!-- <div class="d-block d-sm-none">
+                    <a class="btn-steam" href="https://store.steampowered.com/app/1481070/Max_Raider/">
+                    <img src="images/button-steam.png">
+                    </a>
+                </div> -->
+                </div>
+            </div>
         </div>
-    </div>
-</div> -->
+    <% } %>
+
+    <footer>
+        <%- partial('_partial/contact') %>
+
+        <%- partial('_partial/about') %>
+
+        <%- partial('_partial/newsletter') %>
+
+        <%- partial('_partial/links') %>
 
-<%- partial('_partial/footer') %>
-<%- partial('_partial/logo') %>
+        <%- partial('_partial/logo') %>
+    </footer>
+</main>

themes/kairoscope-theme/layout/index.ejs

@@ -1,49 +1,48 @@
-<%- partial('_partial/logo') %>
-
-
-<div class="container">
-    <div class="row">
-        <div class="col-12">
-            <h2 class="group-header">Lastest games</h2>
+<main role="main" class="bg-dark2" >
+    <%- partial('_partial/logo') %>
+    <div class="container">
+        <div class="row">
+            <div class="col-12">
+                <h2 class="group-header">Lastest games</h2>
+            </div>
         </div>
-    </div>
-    <div class="row">
-        <% site.posts.forEach(content => { %>
-            <% if(content.content_type == "game") { %>
-                <div class="col-6">
-                    <div class="card">
-                        <a href="<%- content.path %>">
-                            <img src="/games/<%- content.id %>/main-capsule.png" alt="..." 
-                                style="width: 100%;">
-                        </a>
+        <div class="row">
+            <% site.posts.forEach(content => { %>
+                <% if(content.content_type == "game") { %>
+                    <div class="col-6">
+                        <div class="card">
+                            <a href="<%- content.path %>">
+                                <img src="/games/<%- content.id %>/main-capsule.png" alt="..." 
+                                    style="width: 100%;">
+                            </a>
+                        </div>
                     </div>
-                </div>
-            <% } %>
-        <% }); %>
-    </div>
-    <div class="row">
-        <div class="col-12">
-            <h2 class="group-header">Company News</h2>
+                <% } %>
+            <% }); %>
         </div>
-    </div>
-    <div class="row">
-        <% var pages = order_pages(site.posts); %>
-        <% pages.forEach(content => { %>
-            <% if(content.content_type == "post") { %>
-                <div class="col-4">
-                    <div class="card">
-                        <div class="card-body">
-                            <h5 class="card-title">
-                                <a href="<%- content.path %>"><%- content.title %></a>
-                            </h5>
-                            <p class="card-text"><%- content.description %></p>
+        <div class="row">
+            <div class="col-12">
+                <h2 class="group-header">Company News</h2>
+            </div>
+        </div>
+        <div class="row">
+            <% var pages = order_pages(site.posts); %>
+            <% pages.forEach(content => { %>
+                <% if(content.content_type == "post") { %>
+                    <div class="col-4">
+                        <div class="card">
+                            <div class="card-body">
+                                <h5 class="card-title">
+                                    <a href="<%- content.path %>"><%- content.title %></a>
+                                </h5>
+                                <p class="card-text"><%- content.description %></p>
+                            </div>
+                            <p class="card-date"><small><%- date(content.date, 'M/D/YYYY') %></small></p>
                         </div>
-                        <p class="card-date"><small><%- date(content.date, 'M/D/YYYY') %></small></p>
                     </div>
-                </div>
-            <% } %>
-        <% }); %>
+                <% } %>
+            <% }); %>
+        </div>
     </div>
-</div>
-
-<%- partial('_partial/footer') %>
+    <%- partial('_partial/footer') %>
+</main>

themes/kairoscope-theme/layout/layout.ejs

@@ -3,9 +3,7 @@
   <%- partial('_partial/head') %>
   <body class="d-flex flex-column h-100">
     
-    <main role="main" >
-      <%- body %>
-    </main>
+    <%- body %>
     
   </body>
   

themes/kairoscope-theme/layout/post.ejs

@@ -1,19 +1,21 @@
-<%- partial('_partial/logo') %>
+<main role="main" class="bg-dark2" >
+    <%- partial('_partial/logo') %>
 
-<div class="container">
-    <div class="row">
-        <div class="col-12 post-content">
-            <h1><%- page.title %></h1>
-            <p><small>Created by <%- page.author %> in <%- date(page.date, 'M/D/YYYY HH:MM') %></small></p>
-            <%- page.content %>
-            <!-- <% var keys = Object.keys(page); %>
-            <ul>
-                <% keys.forEach(key => { %>
-                    <li><%- key %></li>
-                <% }); %>
-            </ul> -->
+    <div class="container">
+        <div class="row">
+            <div class="col-12 post-content">
+                <h1><%- page.title %></h1>
+                <p><small>Created by <%- page.author %> in <%- date(page.date, 'M/D/YYYY HH:MM') %></small></p>
+                <%- page.content %>
+                <!-- <% var keys = Object.keys(page); %>
+                <ul>
+                    <% keys.forEach(key => { %>
+                        <li><%- key %></li>
+                    <% }); %>
+                </ul> -->
+            </div>
         </div>
     </div>
-</div>
 
-<%- partial('_partial/footer') %>
+    <%- partial('_partial/footer') %>
+</main>

themes/kairoscope-theme/layout/presskit.ejs

@@ -0,0 +1,109 @@
+<main role="main" class="presskit">
+    <section class="py-5 text-center container">
+        <div class="row py-lg-5">
+            <div class="col-10 mx-auto">
+                <h1><%- page.title %> <small class="fw-light">Presskit</small></h1>
+                <p class="lead text-muted"><%- page.description %></p>
+                <a class="btn-steam" href="https://store.steampowered.com/app/1481070/Max_Raider/">
+                <!-- <img src="images/button-steam.png"> -->
+                </a>
+            </div>
+        </div>
+    </section>
+
+    <% if(page.trailer != undefined) { %>
+        <div class="album py-5 bg-light">
+            <div class="container container-large">
+                <div class="row justify-content-center">
+                <div class="col-lg-10" style="text-align: center;">
+                    <div class="ratio ratio-16x9">
+                    <iframe class="video-player" src="<%- page.trailer %>" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+                    </div>
+                </div>
+                </div>
+            </div>
+        </div>
+    <% } %>
+    <% if(page.developer != undefined) { %>
+        <div class="container">
+            <div class="row justify-content-center">
+            <div class="col-lg-10">
+                <dl class="row">
+                    <h2 class="text-center space-bottom">Fact Sheet</h2>
+                    <% if(page.developer != undefined && page.developer_url != undefined) { %>
+                        <dt class="col-sm-3">Developer</dt>
+                        <dd class="col-sm-9"><a href="<%- page.developer_url %>"><%- page.developer %></a></dd>
+                        <% } %>
+                    <% if(page.publisher != undefined && page.publisher_url != undefined) { %>
+                        <dt class="col-sm-3">Publisher</dt>
+                        <dd class="col-sm-9"><a href="<%- page.publisher_url %>"><%- page.publisher %></a></dd>
+                    <% } %>
+                    <% if(page.genre != undefined) { %>
+                        <dt class="col-sm-3">Genre</dt>
+                        <dd class="col-sm-9"><%- page.genre %></dd>
+                    <% } %>
+                    <% if(page.tags != undefined) { %>
+                        <dt class="col-sm-3">Tags</dt>
+                        <dd class="col-sm-9"><p><%- page.tags %></p></dd>
+                    <% } %>
+                    <% if(page.platforms != undefined) { %>
+                        <dt class="col-sm-3">Platforms</dt>
+                        <dd class="col-sm-9"><%- page.platforms %></dd>
+                    <% } %>
+                    <% if(page.released != undefined) { %>
+                        <dt class="col-sm-3">Release</dt>
+                        <dd class="col-sm-9"><%- page.released %></dd>
+                    <% } %>
+                    <% if(page.game_modes != undefined) { %>
+                        <dt class="col-sm-3">Game Modes</dt>
+                        <dd class="col-sm-9"><%- page.game_modes %></dd>
+                    <% } %>
+                    <% if(page.email != undefined) { %>
+                        <dt class="col-sm-3">Email</dt>
+                        <dd class="col-sm-9"><%- page.email %></dd>
+                    <% } %>
+                    <% if(page.twitter_dev != undefined) { %>
+                        <dt class="col-sm-3">Twitter (dev): </dt>
+                        <dd class="col-sm-9">
+                            <a href="http://twitter.com/<%- page.twitter_dev %>">@<%- page.twitter_dev %></a>
+                        </dd>
+                    <% } %>
+                </dl>
+            </div>
+            </div>
+        </div>
+    <% } %>
+
+    <section class="container" style="margin-bottom: 80px;">
+        <div class="row">
+            <div class="col-10 mx-auto presskit-content">
+                <%- page.content %>
+                </a>
+            </div>
+        </div>
+    </section>
+
+    <% if(page.screenshots != undefined) { %>
+        <div class="album py-3 bg-light">
+            <div class="container-fluid content">
+                <div class="row">
+                    <div class="col-12">
+                        <h2>Screenshots</h2>
+                    </div>
+                </div>
+                <div class="row py-5 row-cols-1 row-cols-sm-2 row-cols-md-3 g-3 space-bottom">
+                    <% var screenshot_count = (Math.round(page.screenshots.length/3)*3) %>
+                    <% for(var i = 0; i < screenshot_count; i++) { %>
+                        <div class="col">
+                            <div class="card shadow-sm">
+                                <a href="<%- page.screenshots[i] %>" target="_BLANK">
+                                <img src="<%- page.screenshots[i] %>" class="img-fluid">
+                                </a>
+                            </div>
+                        </div>
+                    <% }; %>   
+                </div>
+            </div>
+        </div>
+    <% } %>
+</main>

themes/kairoscope-theme/source/css/style.styl

@@ -7,10 +7,11 @@ text_color = white;
 alt_color = #a2a2a2
 
 body {
-    background-color: rgb(16, 16, 16);
-    color: alt_color;
+    
 }
 
+
+
 p {
     margin-top: 0;
     margin-bottom: 1.4rem;
@@ -38,6 +39,10 @@ p {
     max-width: 720px;    
 }
 
+.container.container-large {
+    max-width: 100%;    
+}
+
 .container-fluid.content {
     padding-left: 10%;
     padding-right: 10%;    
@@ -100,13 +105,44 @@ a:hover { color: text_color; }
     width: 100%;
 }
 
+.post-content h2 {
+    margin-bottom: 26px;
+    text-align: center;
+    //text-transform: uppercase;
+    font-size: 1.8em;
+    font-weight: 200;
+}
+
+.presskit h2 {
+    text-align: center;
+    //text-transform: uppercase;
+    font-weight: 200;
+    font-size: 2.5em;
+}
+
+.presskit a:hover {
+    color: black;    
+}
 
+.presskit .presskit-content h2 {
+    margin-top: 80px;
+    margin-bottom: 40px;
+}
 
+.presskit p {
+    margin-bottom: 25px;    
+}
 
+.bg-dark2 {
+    background-color: rgb(16, 16, 16);
+    color: alt_color;
+}
 
 .bg-darker {
-  background-color: #111111;
+  background-color: #191919
+  color: alt_color;
 }
+
 .space-bottom {
   margin-bottom: 30px;
 }
@@ -134,8 +170,9 @@ li {
   padding-bottom: 12px;
 }
 
-.ratio-steam {
-  --aspect-ratio: 35%;
+.ratio-steam iframe {
+  height: 200px;
+  width: 100%;
 }
 
 .btn-steam img {
@@ -151,4 +188,13 @@ li {
 
 .social-link {
     margin-right: 10px;
+}
+
+
+.ratio>* {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
 }