Blog page, games page and lots of small fixes

readme.md

@@ -50,17 +50,17 @@ hexo deploy
   - [x] Newsletter signup function
   
   - [x] Mixpanel analytics
-    
-    - [x] install tracking
-    
-    - [x] track page load 
-      *Landing page view, Game page view, Presskit page view*
-    
-    - [x] Track *Newsletter Signup*, *Newsletter Invalid Email* and *Newsletter Error*
-    
-    - [x] Track *External Link*
-    
-    - [x] Track *Media Downloaded*
+  
+  - [x] install tracking
+  
+  - [x] track page load 
+    *Landing page view, Game page view, Presskit page view*
+  
+  - [x] Track *Newsletter Signup*, *Newsletter Invalid Email* and *Newsletter Error*
+  
+  - [x] Track *External Link*
+  
+  - [x] Track *Media Downloaded*
   
   - [x] Newsletter success / error / loading
 
@@ -68,18 +68,24 @@ hexo deploy
 
 - [x] Add media to presskit (logo, hero, thumbnail, icon, developer and publisher logos)
 
+- [x] Footer links
+
+- [x] Better landing page hero
+
+- [x] Blog page
+
+- [x] Games page
+
+- [x] Mobile / responsive design review
+
 - [ ] Contact form page
 
 - [ ] Contact message functions
 
 - [ ] Track *Contact Message Sent*, *Contact Message Invalid* and *Contact Message Error*
 
-- [ ] Blog page
-
-- [ ] Games page
-
-- [ ] Footer links
+- [ ] Presskits page
 
-- [ ] Better landing page hero
+- [ ] Grid Miner alternative Newsletter Signup with reward (Mini Crusher card)
 
-- [ ] 
+- [ ] About the team section

source/_posts/games/grid-miner.md

@@ -3,6 +3,7 @@ title: Grid Miner
 id: grid-miner
 content_type: game
 layout: game
+short_description: A casual RTS puzzle where you mine asteroids to gather resources.
 description: Grid Miner is a real time strategy puzzle game where you mine asteroids to gather resources and expand you space station. Unlock new tools and utilities as you progress thru levels. Maintain your quotas and learn more about your employer, "Hypergo Industries", and it's employees.
 developer: Kairoscope
 developer_url: http://kairoscope.net

source/_posts/games/max-raider.md

@@ -3,6 +3,7 @@ title: Max Raider
 id: max-raider
 content_type: game
 layout: game
+short_description: A post-apocalytic twin stick shooter arena.
 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

source/blog/index.md

@@ -0,0 +1,5 @@
+---
+title: Kairoscope Blog
+layout: blog
+content_type: list
+---

source/contact/index.md

@@ -0,0 +1,5 @@
+---
+title: Contact
+layout: contact
+content_type: list
+---

source/games/index.md

@@ -0,0 +1,5 @@
+---
+title: Games
+layout: games
+content_type: list
+---

source/presskits/index.md

@@ -0,0 +1,5 @@
+---
+title: Presskits
+layout: presskits
+content_type: list
+---

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

@@ -6,7 +6,35 @@
     </div>
     <div class="row">
         <div class="col-12">
-            <p class="lead justify">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>
+            <p class="lead justify">A two person independent game studio from São Paulo, Brazil. 
+                Kairoscope officially started in 2020 by cousins 
+                <a href="http://jamesperet.com">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 center-list">
+            <ul>
+                <li><a href="https://store.steampowered.com/search/?developer=Kairoscope" 
+                    v-on:click="mixpanelTrack('External Link', { target: 'Steam', link : 'https://store.steampowered.com/search/?developer=Kairoscope'})"
+                    target="_BLANK"
+                    class="display-5 social-link"><i class="fab fa-steam"></i></a></li>
+                <li><a href="https://discord.gg/SvKJ2cy" 
+                    v-on:click="mixpanelTrack('External Link', { target: 'Discord', link : 'https://discord.gg/SvKJ2cy'})"
+                    target="_BLANK"
+                    class="display-5 social-link"><i class="fab fa-discord"></i></a></li>
+                <li><a href="https://twitter.com/kairoscopegames" 
+                    v-on:click="mixpanelTrack('External Link', { target: 'Twitter', link : 'https://twitter.com/kairoscopegames'})"
+                    target="_BLANK"
+                    class="display-5 social-link"><i class="fab fa-twitter"></i></a></li>
+                <li><a href="https://www.youtube.com/channel/UCzxug8k-rlHzimEy_XCS7Cw" 
+                    v-on:click="mixpanelTrack('External Link', { target: 'Youtube', link : 'https://www.youtube.com/channel/UCzxug8k-rlHzimEy_XCS7Cw'})"
+                    target="_BLANK"
+                    class="display-5 social-link"><i class="fab fa-youtube"></i></a></li>
+            </ul>
         </div>
     </div>
 </div>

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

@@ -3,13 +3,18 @@
         <div class="col-12">
             <h2 class="group-header">Get in touch</h2>
             <p class="lead justify">Got any questions, ideas, feedback, bugs or feature requests? Join our discord server or send us a direct message.</p>
-            <p style="text-align: center;">
+            <div class="d-grid gap-2 d-md-flex justify-content-md-center" style="text-align: center;">
                 <a class="btn btn-secondary discord-color" 
-                    href="https://discord.gg/SvKJ2cy" style="margin-right: 20px;"
+                    href="https://discord.gg/SvKJ2cy"
                     v-on:click="mixpanelTrack('External Link', { target: 'Discord', link : 'https://discord.gg/SvKJ2cy'})">
                     <i class="fab fa-discord"></i> Join our Discord Server
                 </a>
-                <a class="btn btn-secondary" href=""><i class="fas fa-envelope"></i> Send us a Message</a>
+                <a class="btn btn-secondary" href="">
+                    <i class="fas fa-envelope"></i> Send us a Message
+                </a>
+              </div>
+            <p >
+                
             </p>
         </div>
     </div>

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

@@ -1,25 +1,67 @@
-<div class="container">
+<div class="container" style="padding-bottom: 80px;">
     <div class="row">
         <div class="col-12">
             <h2 class="group-header">Links</h2>
         </div>
     </div>
     <div class="row">
-        <div class="col-12 center-list">
-            <ul>
-                <li><a href="https://store.steampowered.com/search/?developer=Kairoscope" 
-                    v-on:click="mixpanelTrack('External Link', { target: 'Steam', link : 'https://store.steampowered.com/search/?developer=Kairoscope'})"
-                    class="display-4 social-link"><i class="fab fa-steam"></i></a></li>
-                <li><a href="https://discord.gg/SvKJ2cy" 
-                    v-on:click="mixpanelTrack('External Link', { target: 'Discord', link : 'https://discord.gg/SvKJ2cy'})"
-                    class="display-4 social-link"><i class="fab fa-discord"></i></a></li>
-                <li><a href="https://twitter.com/kairoscopegames" 
-                    v-on:click="mixpanelTrack('External Link', { target: 'Twitter', link : 'https://twitter.com/kairoscopegames'})"
-                    class="display-4 social-link"><i class="fab fa-twitter"></i></a></li>
-                <li><a href="https://www.youtube.com/channel/UCzxug8k-rlHzimEy_XCS7Cw" 
-                    v-on:click="mixpanelTrack('External Link', { target: 'Youtube', link : 'https://www.youtube.com/channel/UCzxug8k-rlHzimEy_XCS7Cw'})"
-                    class="display-4 social-link"><i class="fab fa-youtube"></i></a></li>
-            </ul>
+        <div class="col-12 col-sm-4 col-md-4 col-lg-4" style="margin-bottom: 20px">
+            <div class="card card-dark">
+                <div class="card-body">
+                    <h5 class="card-title">Company</h5>
+                    <ul class="card-text list">
+                        <li><a href="/">Home</a></li>
+                        <li><a href="https://store.steampowered.com/search/?developer=Kairoscope"
+                            target="_BLANK"
+                            v-on:click="mixpanelTrack('External Link', { target: 'Steam', link : 'https://store.steampowered.com/search/?developer=Kairoscope'})">
+                            Steam Page</a>
+                        </li>
+                        <li><a href="/blog">Blog</a></li>
+                        <li><a href="/contact">Contact</a></li>
+                        <li><a href="/presskits">Presskits</a></li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+        <div class="col-12 col-sm-4 col-md-4 col-lg-4" style="margin-bottom: 20px">
+            <div class="card card-dark">
+                <div class="card-body">
+                    <h5 class="card-title">Games</h5>
+                    <ul class="card-text list">
+                        <li><a href="/games/grid-miner">Grid Miner</a></li>
+                        <li><a href="/games/max-raider">Max Raider</a></li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+        <div class="col-12 col-sm-4 col-md-4 col-lg-4" style="margin-bottom: 20px">
+            <div class="card card-dark">
+                <div class="card-body">
+                    <h5 class="card-title">Comunity</h5>
+                    <ul class="card-text list">
+                        <li><a href="https://twitter.com/kairoscopegames" 
+                            target="_BLANK"
+                            v-on:click="mixpanelTrack('External Link', { target: 'Twitter', link : 'https://twitter.com/kairoscopegames'})">
+                            Twitter</a>
+                        </li>
+                        <li><a href="https://discord.gg/SvKJ2cy"
+                            target="_BLANK"
+                            v-on:click="mixpanelTrack('External Link', { target: 'Discord', link : 'https://discord.gg/SvKJ2cy'})">
+                            Discord</a>
+                        </li>
+                        <li><a href="https://www.youtube.com/channel/UCzxug8k-rlHzimEy_XCS7Cw"
+                            target="_BLANK"
+                            v-on:click="mixpanelTrack('External Link', { target: 'Youtube', link : 'https://www.youtube.com/channel/UCzxug8k-rlHzimEy_XCS7Cw'})">
+                            Youtube</a>
+                        </li>
+                        <li><a href="https://newsletter.kairoscope.net"
+                            target="_BLANK"
+                            v-on:click="mixpanelTrack('External Link', { target: 'Newsletter', link : 'https://newsletter.kairoscope.net'})">
+                            Newsletter</a>
+                        </li>
+                    </ul>
+                </div>
+            </div>
         </div>
     </div>
 </div>

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

@@ -1,7 +1,22 @@
-<div class="flex-shrink-0">
-    <div class="content-area center">
-        <a href="/" style="width: 100%; height: 100%; text-align: center;">
-            <img class="logo" src="/Kairoscope_logo_2014_white.png">
-        </a>
+<% if(created_by == false) { %>
+    <div class="container text-center spacer-bottom" style="padding-top: 100px;">
+        <div class="row justify-content-center">
+            <div class="col-lg-6 col-md-5 col-8">
+                <a href="/">
+                <img src="/Kairoscope_logo_2014_white.png" class="img-fluid">
+                </a>
+            </div>
+        </div>
     </div>
-</div>
+<% } else { %>
+    <div class="container text-center spacer-top spacer-bottom">
+        <div class="row justify-content-center">
+            <div class="col-lg-5 col-md-4 col-6">
+                <p>Created by</p>
+                <a href="/">
+                <img src="/Kairoscope_logo_2014_white.png" class="img-fluid">
+                </a>
+            </div>
+        </div>
+    </div>
+<% } %>

themes/kairoscope-theme/layout/blog.ejs

@@ -0,0 +1,31 @@
+<main role="main" class="bg-dark2" >
+    <%- partial('_partial/logo', { created_by : false }) %>
+    <div class="container">
+        <div class="row">
+            <div class="col-12">
+                <h2 class="group-header">Blog</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 card-dark hoverable">
+                            <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>
+                    </div>
+                <% } %>
+            <% }); %>
+        </div>
+    </div>
+    <%- partial('_partial/about') %>
+    <%- partial('_partial/newsletter') %>
+    <%- partial('_partial/links') %>
+</main>

themes/kairoscope-theme/layout/contact.ejs

@@ -0,0 +1,12 @@
+<main role="main" class="bg-dark2" >
+    <%- partial('_partial/logo', { created_by : false }) %>
+    <div class="container">
+        <div class="row">
+            <div class="col-12">
+                <h2 class="group-header">Contact</h2>
+            </div>
+        </div>
+        
+    </div>
+    <%- partial('_partial/links') %>
+</main>

themes/kairoscope-theme/layout/game.ejs

@@ -33,7 +33,7 @@
                     <% var screenshot_count = (Math.round(page.media.screenshots.list.length/3)*3) %>
                     <% for(var i = 0; i < screenshot_count; i++) { %>
                         <div class="col">
-                            <div class="card shadow-sm">
+                            <div class="card shadow-sm card-dark hoverable">
                                 <a href="<%- page.media.screenshots.list[i] %>" target="_BLANK">
                                 <img src="<%- page.media.screenshots.list[i] %>" class="img-fluid">
                                 </a>
@@ -59,7 +59,7 @@
     </div>
     <% } %>
 
-    <section class="py-5 text-center container">
+    <section class="py-5 container">
         <div class="row py-lg-5">
             <div class="col-10 mx-auto post-content">
                 <p class="lead text-muted"><%- page.content %></p>
@@ -85,6 +85,8 @@
     <% } %>
 
     <footer>
+        <%- partial('_partial/logo', { created_by : true }) %>
+
         <%- partial('_partial/contact') %>
 
         <%- partial('_partial/about') %>
@@ -93,6 +95,6 @@
 
         <%- partial('_partial/links') %>
 
-        <%- partial('_partial/logo') %>
+        
     </footer>
 </main>

themes/kairoscope-theme/layout/games.ejs

@@ -0,0 +1,54 @@
+<main role="main" class="bg-dark2" >
+    <%- partial('_partial/logo', { created_by : false }) %>
+    <div class="container">
+        <div class="row">
+            <div class="col-12">
+                <h2 class="group-header">Games</h2>
+            </div>
+        </div>
+        <% site.posts.forEach(content => { %>
+            <% if(content.content_type == "game") { %>
+                <div class="card card-dark hoverable" style="margin-bottom: 20px;">
+                    <div class="row">
+                        <div class="col-6">
+                            <a href="<%- content.path %>">
+                                <img src="/games/<%- content.id %>/main-capsule.png" alt="..." 
+                                    style="width: 100%;">
+                            </a>
+                        </div>
+                        <div class="col-6">
+                            <div class="card-body">
+                                <h5 class="card-title">
+                                    <a href="<%- content.path %>">
+                                        <%- content.title %>
+                                    </a>
+                                </h5>
+                                <p class="card-text" style="margin-bottom: 12px;">
+                                    <%- content.short_description %><br>
+                                </p>
+                                <p class="card-text" style="margin-bottom: 12px;">
+                                    <small>
+                                        <% if(content.released) { %>
+                                            Released: <%- content.release %>
+                                        <% } else { %>
+                                            Release date: <%- content.release %>
+                                        <% } %>
+                                    </small>
+                                </p>
+                                <p class="card-text" style="position: absolute; bottom: 12px;">
+                                    <small>
+                                        <br><%- content.platforms %>
+                                    </small>
+                                </p>
+                                
+                            </div>
+                        </div>
+                    </div>
+                    
+                </div>
+            <% } %>
+        <% }); %>
+    </div>
+    <%- partial('_partial/about') %>
+    <%- partial('_partial/links') %>
+</main>

themes/kairoscope-theme/layout/index.ejs

@@ -1,5 +1,5 @@
 <main role="main" class="bg-dark2" >
-    <%- partial('_partial/logo') %>
+    <%- partial('_partial/logo', { created_by : false }) %>
     <div class="container">
         <div class="row">
             <div class="col-12">
@@ -9,8 +9,8 @@
         <div class="row">
             <% site.posts.forEach(content => { %>
                 <% if(content.content_type == "game") { %>
-                    <div class="col-6">
-                        <div class="card card-dark">
+                    <div class="col-12 col-sm-6" style="margin-bottom: 20px;">
+                        <div class="card card-dark hoverable">
                             <a href="<%- content.path %>">
                                 <img src="/games/<%- content.id %>/main-capsule.png" alt="..." 
                                     style="width: 100%;">
@@ -29,8 +29,8 @@
             <% var pages = order_pages(site.posts); %>
             <% pages.forEach(content => { %>
                 <% if(content.content_type == "post") { %>
-                    <div class="col-4">
-                        <div class="card card-dark">
+                    <div class="col-12 col-sm-4" style="margin-bottom: 20px;">
+                        <div class="card card-dark hoverable">
                             <div class="card-body">
                                 <h5 class="card-title">
                                     <a href="<%- content.path %>"><%- content.title %></a>

themes/kairoscope-theme/layout/post.ejs

@@ -1,5 +1,5 @@
 <main role="main" class="bg-dark2" >
-    <%- partial('_partial/logo') %>
+    <%- partial('_partial/logo', { created_by : false }) %>
 
     <div class="container">
         <div class="row">

themes/kairoscope-theme/layout/presskit.ejs

@@ -159,7 +159,7 @@
                                 <div class="col-md-4 image-box">
                                     <a target="_BLANK" href="<%- media.path %>"
                                         v-on:click="mixpanelTrack('Media Download', { media_name: '<%- media.name %>', media_type: '<%- media.media_type %>', link : '<%- media.path %>', parent: '<%- page.title %>'})">
-                                        <img src="<%- media.path %>" class="img-fluid rounded-start" alt="...">
+                                        <img src="<%- media.path %>" class="img-fluid" alt="...">
                                     </a>
                                 </div>
                             <% } %>

themes/kairoscope-theme/layout/presskits.ejs

@@ -0,0 +1,12 @@
+<main role="main" class="bg-dark2" >
+    <%- partial('_partial/logo', { created_by : false }) %>
+    <div class="container">
+        <div class="row">
+            <div class="col-12">
+                <h2 class="group-header">Presskits</h2>
+            </div>
+        </div>
+        
+    </div>
+    <%- partial('_partial/links') %>
+</main>

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

@@ -6,12 +6,6 @@ global-reset()
 text_color = white;
 alt_color = #a2a2a2
 
-body {
-    
-}
-
-
-
 p {
     margin-top: 0;
     margin-bottom: 1.4rem;
@@ -57,11 +51,19 @@ p {
     padding: 1px;
 }
 
-.card.card-dark:hover {
+.card.card-dark.hoverable:hover {
     border: 1px solid
     padding: 0px;
 }
 
+.card.card-dark ul {
+    padding-left: 0rem;
+}
+
+.card.card-dark .list li {
+    display: block;
+}
+
 .card-date {
     position: relative;
     bottom: 10px;
@@ -118,6 +120,9 @@ a:hover { color: text_color; }
     padding-left: 0px;
     margin-left: 0px;
 }
+.post-content li { 
+    display: block 
+}
 
 
 .presskit h2 {
@@ -131,6 +136,10 @@ a:hover { color: text_color; }
     color: black;    
 }
 
+.presskit-content {
+    text-align: justify;
+}
+
 .presskit .presskit-content h2 {
     margin-top: 80px;
     margin-bottom: 40px;
@@ -140,6 +149,12 @@ a:hover { color: text_color; }
     margin-bottom: 25px;    
 }
 
+.presskit-content ul {
+    padding-left: 3em;
+    padding-right: 3em;
+    text-align: center;    
+}
+
 .bg-dark2 {
     background-color: rgb(16, 16, 16);
     color: alt_color;
@@ -154,11 +169,11 @@ a:hover { color: text_color; }
   margin-bottom: 30px;
 }
 .spacer-top {
-  margin-top: 100px;
+  margin-top: 80px;
 }
 
 .spacer-bottom {
-  margin-bottom: 100px;
+  margin-bottom: 80px;
 }
 
 .cover-bg {