Tweaks to site.

gulp/_includes/footer.html

@@ -19,7 +19,9 @@
   </div>
   <div class="footer-bottom">
     <div class="footer-wrap">
+      <a href="/">
       {% include svg/lime.html %}
+      </a>
 
       <section class="copyright">
         made with <span class="red"><3</span> <br>

gulp/_includes/open.html

@@ -33,25 +33,30 @@
 		<meta property=og:site_name content="{{site.title}}">
 		<meta property=og:profile:first_name content={{author.name.first}}>
 		<meta property=og:profile:last_name content={{author.name.last}}>
-		<meta property=og:image content="{{#if featuredImage}}/assets/{{featuredImage}}{{else ~}}/assets/img/site/icon/48.png">
+		<meta property=og:image content="/assets/img/site/icon/logo128.png">
 		<meta property=og:image:type content=image/png>
-		<meta property=og:image:width content=1024>
-		<meta property=og:image:height content=1024>{{/if ~}}
+		<meta property=og:image:width content=128>
+		<meta property=og:image:height content=128>{{/if ~}}
 		<meta name=twitter:card content="summary">
 		<meta name=twitter:site content="{{site.title}}">
 		<meta name=twitter:title content="{{page.title}}">
 		<meta name=twitter:description content="{{#if page.description}}{{page.description}}{{else ~}}{{site.description}}{{/if ~}}">
 		<meta name=twitter:creator content="{{author.name.first}} {{author.name.last}}">
-		<meta name=twitter:image:src content="{{#if featuredImage}}/assets/{{featuredImage}}{{else ~}}/assets/img/site/icon/48.png{{/if ~}}">
-		<meta name="twitter:domain"" content="the Web">
-		<link rel=apple-touch-icon-precomposed href=/assets/img/site/icon/60.png>
-		<link rel="icon" href="/assets/img/site/icon/16.png" size="16x16">
-		<link rel="icon" href="/assets/img/site/icon/32.png" size="32x32">
-		<link rel="icon" href="/assets/img/site/icon/48.png" size="48x48">
-		<link rel="icon" href="/assets/img/site/icon/64.png" size="64x64">
-		<link rel="icon" href="/assets/img/site/icon/128.png" size="128x128">
+		<meta name=twitter:image:src content="/assets/img/site/icon/logo.png">
+		<meta name="twitter:domain" content="the Web">
+		<link rel="apple-touch-icon-precomposed" href="/assets/img/site/icon/logo.png">
+		<link rel="icon" href="/assets/img/site/icon/logo16.png" size="16x16">
+		<link rel="icon" href="/assets/img/site/icon/logo32.png" size="32x32">
+		<link rel="icon" href="/assets/img/site/icon/logo48.png" size="48x48">
+		<link rel="icon" href="/assets/img/site/icon/logo64.png" size="64x64">
+		<link rel="icon" href="/assets/img/site/icon/logo128.png" size="128x128">
+
+		<link rel="icon" type="image/png" href="/assets/img/site/icon/logo64.png">
+
+		<link rel="icon" sizes="192x192" href="/assets/img/site/icon/logo192.png">
+		<link rel="apple-touch-icon" href="/assets/img/site/icon/logo64.png">
+		<meta name="msapplication-square310x310logo" content="/assets/img/site/icon/logo310.png">
 
-		<link rel="icon" type="image/png" href="/assets/img/site/icon/32.png">
 		<!-- [if IE]><link rel="shortcut icon" href="/assets/img/site/icon/ie.ico"><![endif]-->
 		<script>
 			//document.getElementById("date").innerHTML = new Date().getTime();

gulp/_posts/article/2015-09-29-valhalla.md

@@ -10,6 +10,7 @@ theme: dark
 cover-image: /assets/img/posts/article/vallhalla/cover2.png
 image: full
 author: Liam Craver
+platforms: PC
 ---
 ##Introduction
 If you haven't heard about this game yet you really need to look over the top rated games on itch.io. VA-ll HALL-A or just VALLHALLA is a game I came across around 6 months ago when it was in it's earlier stages. The game immediately jumped out to me as I was idly scrolling through itch.io's homepage. It was clear this game had more care put into it then the average game on itch. However, that's only what made me click through to the game. What made me stay was the team working on it.
@@ -38,6 +39,6 @@ If you are looking for a new and interesting take on the cyberpunk genre look no
 Side Note: All the characters are absolutely adorable when they get drunk.
 
 <div class="button-wrapper">
-<a class="float two border" href="http://kiririn51.itch.io/valhalla-bar">Download the Game</a>
-<a class="float two border" href="https://twitter.com/SukebanGames">follow Sukeban Games</a>
+  <a class="b-2" href="http://kiririn51.itch.io/valhalla-bar">Download the Game</a>
+  <a class="b-2" href="https://twitter.com/SukebanGames">follow Sukeban Games</a>
 </div>

gulp/_posts/article/2016-2-11-the-witness.md

@@ -19,26 +19,26 @@ The Witness is the first game from Thekla Inc., however they have a veteran on t
 
 <a class="line-s" href="#verdict">TL;DR? - Skip to the Final Verdict</a>
 
-<a href="/assets/img/posts/article/{{page.ref}}/screenshot (1).png">
-    <img class="center full" src="/assets/img/posts/article/{{page.ref}}/screenshot (1).png"/>
+<a href="/assets/img/posts/article/{{page.ref}}/screenshot (1).jpg">
+    <img class="center full" src="/assets/img/posts/article/{{page.ref}}/screenshot (1).jpg"/>
 </a>
 
 ##Grading Categories
 
 ###Gameplay
 I want to keep this part brief cause any real detail would lead to numerous spoilers. That being said I want to say the gameplay for The Witness is extremely solid. There is a core mechanic that keeps evolving with the player as you play and it is one of the most gratifying puzzle games I've ever played. Technically any puzzle you come across you can solve...but some require further learning. The game never gives you random walls or blocks to progress everything is open and free to explore. This is for good reason cause without that element of exploration and wonder the game would not be nearly as engaging.
 
-<a href="/assets/img/posts/article/{{page.ref}}/screenshot (2).png">
-    <img class="center full" src="/assets/img/posts/article/{{page.ref}}/screenshot (2).png"/>
+<a href="/assets/img/posts/article/{{page.ref}}/screenshot (2).jpg">
+    <img class="center full" src="/assets/img/posts/article/{{page.ref}}/screenshot (2).jpg"/>
 </a>
 
 ###Graphical Aesthetic
 The rest of the screenshots should speak for themselves. This is a beautifully designed game. Everything is clearly accounted for including the actual architecture of the island itself. There is this disconnect that something so pretty couldn't exist yet it all is so perfectly crafted it feels like just maybe it could exist.
 
 <div class="image-wrapper">
 {% for i in (3..10) %}
-  <a href="/assets/img/posts/article/{{page.ref}}/screenshot ({{ i }}).png">
-    <img class="float large border" src="/assets/img/posts/article/{{page.ref}}/screenshot ({{ i }}).png"/>
+  <a href="/assets/img/posts/article/{{page.ref}}/screenshot ({{ i }}).jpg">
+    <img class="float large border" src="/assets/img/posts/article/{{page.ref}}/screenshot ({{ i }}).jpg"/>
   </a>
 {% endfor %}
 </div>

gulp/_posts/game/2015-09-29-project-arrhythmia.md

@@ -20,8 +20,26 @@ theme-color: "#e57373"
 </div>
 
 <div class="trailer">
-  <div class="flex-video">
-    <iframe src="https://www.youtube.com/embed/G9zGxwaSy8s?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
+  <div class="flex-video" onclick='this.innerHTML = "<iframe src=\"https://www.youtube.com/embed/G9zGxwaSy8s?rel=0&amp;showinfo=0&amp;autoplay=1\" frameborder=\"0\" allowfullscreen></iframe>"'>
+    <div class="play-button"></div>
+  </div>
+</div>
+
+<div class="preorder">
+  <div class="steam">
+  <iframe src="http://store.steampowered.com/widget/440310/" frameborder="0" width="552" height="190"></iframe>
+  </div>
+
+  <div class="steam small">
+  <iframe src="http://store.steampowered.com/widget/440310/" frameborder="0" width="320" height="190"></iframe>
+  </div>
+
+  <div class="itch">
+  <iframe frameborder="0" src="https://itch.io/embed/21241?linkback=true&amp;bg_color=ffffff&amp;fg_color=222222&amp;link_color=fa5c5c&amp;border_color=bebebe" width="552" height="167"></iframe>
+  </div>
+
+  <div class="itch small">
+  <iframe frameborder="0" src="https://itch.io/embed/21241?linkback=true&amp;bg_color=ffffff&amp;fg_color=222222&amp;link_color=fa5c5c&amp;border_color=bebebe" width="320" height="167"></iframe>
   </div>
 </div>
 
@@ -55,3 +73,10 @@ theme-color: "#e57373"
 {% include partials/newsletter_form.html %}
 {% endcapture %}
 {{ includeGuts | replace: '    ', ''}}
+
+<h3>> Presskits</h3>
+<p class="social">
+  <a class="arrhythmia-button" href="/page/presskit/#ProjectArrhythmia">[Project Arrhythmia]</a>
+  <br>
+  <a class="arrhythmia-button" href="/page/presskit/#LimeStudios">[Lime Studios]</a>
+</p>

gulp/assets/css/4-layouts/arrhythmia.scss

@@ -45,8 +45,58 @@
     }
   }
 
+.preorder {
+  width: 552px;
+  margin: 0 auto;
+
+  .itch {
+    margin-top: 32px;
+    display: block;
+  }
+
+  .steam {
+    display: block;
+  }
+
+  .small {
+    display: none;
+  }
+
+  @media (max-width: 600px) {
+    width: 320px;
+
+    .itch, .steam {
+      display: none;
+    }
+
+    .small {
+      display: block;
+    }
+  }
+}
+
   .trailer {
     margin: 32px 0px;
+
+    .play-button {
+      background-image: url(/assets/img/posts/game/project-arrhythmia/play-button.png);
+      position: absolute;
+      top: 0px;
+      bottom: 0px;
+      left: 0px;
+      right: 0px;
+      background-repeat: no-repeat;
+      background-position: center;
+      cursor: pointer;
+    }
+
+    .flex-video {
+      background-image: url(/assets/img/posts/game/project-arrhythmia/trailer-image.png) !important;
+      background-repeat: no-repeat;
+      background-size: contain;
+      background-position: center;
+      //border: 2px solid $red-300;
+    }
   }
 
   .social {

gulp/assets/css/styles.css

@@ -925,8 +925,40 @@ header {
           font-size: 16px;
           line-height: 16px;
           padding: 16px 0; } }
+  .arrhythmia-wrap .preorder {
+    width: 552px;
+    margin: 0 auto; }
+    .arrhythmia-wrap .preorder .itch {
+      margin-top: 32px;
+      display: block; }
+    .arrhythmia-wrap .preorder .steam {
+      display: block; }
+    .arrhythmia-wrap .preorder .small {
+      display: none; }
+    @media (max-width: 600px) {
+      .arrhythmia-wrap .preorder {
+        width: 320px; }
+        .arrhythmia-wrap .preorder .itch, .arrhythmia-wrap .preorder .steam {
+          display: none; }
+        .arrhythmia-wrap .preorder .small {
+          display: block; } }
   .arrhythmia-wrap .trailer {
     margin: 32px 0px; }
+    .arrhythmia-wrap .trailer .play-button {
+      background-image: url(/assets/img/posts/game/project-arrhythmia/play-button.png);
+      position: absolute;
+      top: 0px;
+      bottom: 0px;
+      left: 0px;
+      right: 0px;
+      background-repeat: no-repeat;
+      background-position: center;
+      cursor: pointer; }
+    .arrhythmia-wrap .trailer .flex-video {
+      background-image: url(/assets/img/posts/game/project-arrhythmia/trailer-image.png) !important;
+      background-repeat: no-repeat;
+      background-size: contain;
+      background-position: center; }
   .arrhythmia-wrap .social br {
     display: none; }
   @media (max-width: 481px) {