Remove inline styles from pages and add them to the external stylesheet

about.html

@@ -27,6 +27,20 @@
 <meta name="copyright" content="Copyright (c) 2012 Peak Shift Inc.">
 <meta name="revisit-after" content="3 days">
 
+<meta property="og:url" content="" />
+<meta property="og:type" content="website" />
+<meta property="og:title" content="Blockchain Product Design &amp; Development Studio" />
+<meta property="og:image" content="" />
+<meta property="og:site_name" content="Peak Shift Ltd." />
+<meta property="og:description" content="" />
+
+<meta name="twitter:card" content="photo" />
+<meta name="twitter:site" content="@peakshift" />
+<meta name="twitter:title" content="Blockchain Product Design &amp; Development Studio">
+<meta name="twitter:image" content="">
+<meta name="twitter:image:width" content="1200" />
+<meta name="twitter:image:height" content="630" />
+
 <!-- The Styles -->
 <link href="assets/css/master.css?v=0004" rel="stylesheet" type="text/css">
 
@@ -56,7 +70,7 @@
   <aside id="mainSide" class="column">
     <div class="padded">  
       <div id="logo"><a href="/"><img src="/assets/i/logo.svg"></a></div>
-      <h2 id="portfolioLinks" style="color: #FFF;margin: 1em 0 0;">We craft digital products built on <a href="/portfolio/mindsky" data-fetch="/item/mindsky.html">web</a>, <a href="/portfolio/lemariku" data-fetch="/item/lemariku.html">mobile</a> &amp; blockchain.</h2>
+        <h2 id="portfolioLinks">We craft digital products built on <a href="/mindsky">web</a>, <a href="/lemariku">mobile</a> &amp; blockchain.</h2>
 
       <div class="contact-footer typeface-colour-secondary">
         <hr>
@@ -86,7 +100,7 @@ <h2 id="portfolioLinks" style="color: #FFF;margin: 1em 0 0;">We craft digital pr
               <img src="/assets/icons/facebook.svg" width="16" height="16">
             </a>
             <a href="//dribbble.com/jb">
-              <img src="/assets/icons/dribbble.svg" width="16" height="14" style="padding:2px 1 0;">
+              <img class="dribble" src="/assets/icons/dribbble.svg" width="16" height="14">
             </a>
           </p>
         </div>
@@ -146,31 +160,31 @@ <h3>Our Mission</h3>
     <figure class="active padded">
       <h1> Meet the team </h1>
       <div id="first" class="card">
-        <img src="/assets/content/johns.jpg" style="width:80%;" alt="Johns Beharry">
+        <img src="/assets/content/johns.jpg" alt="Johns Beharry">
         <div class="container">
           <h4><b>Johns Beharry</b></h4> 
           <p>Principal</p> 
         </div>
       </div>
 
       <div id="second" class="card">
-        <img src="/assets/content/Early.jpg" style="width:80%;" alt="Early Charlemagne">
+        <img src="/assets/content/Early.jpg" alt="Early Charlemagne">
         <div class="container">
           <h4><b>Early Charlemagne</b></h4> 
           <p>Web Developer</p> 
         </div>
       </div>
 
       <div id="third" class="card">
-        <img src="/assets/content/Selimira.jpg" style="width:80%;" alt="Selimira Dimitrova">
+        <img src="/assets/content/Selimira.jpg" alt="Selimira Dimitrova">
         <div class="container">
           <h4><b>Selimira Dimitrova</b></h4> 
           <p>Digital Marketing Strategist</p>
         </div> 
       </div>
 
       <div id="fourth" class="card">
-        <img src="/assets/content/Shazelle.png" style="width:80%;" alt="Shazelle Isaacs">
+        <img src="/assets/content/Shazelle.png" alt="Shazelle Isaacs">
         <div class="container">
           <h4><b>Shazelle Isaacs</b></h4> 
           <p>Web Developer</p>
@@ -239,7 +253,7 @@ <h4><b>Shazelle Isaacs</b></h4>
 <script src="/assets/js/scripts.js?v0001"></script>
 <!-- Google Tag Manager -->
 <noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-TPS5PB"
-height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
+height="0" width="0" style="display:none; visibility:hidden; "></iframe></noscript>
 <!-- End Google Tag Manager -->
 </body>
 </html>

assets/css/master.css

@@ -15,6 +15,7 @@
 html {
   font-size: 100%;
   overflow-y: scroll;
+  overflow-x: hidden;
   -webkit-text-size-adjust: 100%;
   -webkit-font-smoothing: antialiased;
   font-smoothing: antialiased;
@@ -45,10 +46,6 @@ hr {
 #wrapper {
   height: 100%; }
 
-.fill {
-  max-width: 120%;
-  margin-left: -10%; }
-
 .typeface-colour-secondary, .typeface-colour-secondary a {
   color: #5A020E; }
 
@@ -124,9 +121,12 @@ aside {
       margin-top: 1em; }
       aside .padded #logo img {
         width: 60%; }
-    aside .padded #portfolioLinks a {
+    aside .padded #portfolioLinks {
       color: #FFF;
-      border-bottom: 2px solid #FFF; }
+      margin: 1em 0 0; }
+      aside .padded #portfolioLinks a {
+        color: #FFF;
+        border-bottom: 2px solid #FFF; }
     aside .padded .intro {
       font-style: italic; }
     aside .padded .portfolio {
@@ -171,6 +171,8 @@ aside {
           @media only screen and (min-width: 460px) {
             aside .padded .contact-footer .columns ul {
               float: left; } }
+        aside .padded .contact-footer .columns .dribble {
+          padding: 2px 1 0; }
 
 section {
   width: auto;
@@ -215,6 +217,9 @@ section {
       opacity: 0; }
   section .padded {
     margin: 0 10%; }
+  section .fill {
+    max-width: 120%;
+    margin-left: -10%; }
   section .card {
     width: 100%;
     transition: 0.3s;
@@ -229,7 +234,8 @@ section {
         width: 25%; } }
     section .card img {
       margin: 2% auto;
-      display: block; }
+      display: block;
+      width: 80%; }
     section .card .container {
       padding: 2px 16px; }
       section .card .container h4, section .card .container p {
@@ -272,6 +278,19 @@ section {
             width: 1.2em;
             margin-left: -1.2em;
             font-style: normal; }
+      section .contentArea .projectDetails .media--stretched {
+        width: 100vw;
+        margin-left: -10vw;
+        margin-top: 60px;
+        margin-bottom: 60px; }
+        @media only screen and (min-width: 768px) {
+          section .contentArea .projectDetails .media--stretched {
+            margin-left: -6vw;
+            width: 60vw; } }
+        @media only screen and (min-width: 960px) {
+          section .contentArea .projectDetails .media--stretched {
+            width: 70vw;
+            margin-left: -7vw; } }
     section .contentArea .projectMeta {
       width: 100%;
       text-align: right;

assets/sass/master.scss

@@ -14,11 +14,14 @@
   src: url(../typefaces/UniversLTStd-Cn.otf);
 }
 */
-
+// html::-webkit-scrollbar-thumb:vertical { background-color:#00ff00; width:12px; }
+// html::-webkit-scrollbar-thumb:horizontal { background-color:#00ff00; height:12px; }
+// html::-webkit-scrollbar { height:12px; width:12px; background-color:rgba(255,255,255,0.1); }
 
 html { 
   font-size: 100%;
   overflow-y: scroll;  
+  overflow-x: hidden;  
   -webkit-text-size-adjust: 100%; 
   -webkit-font-smoothing:antialiased; 
   font-smoothing:antialiased; 
@@ -33,11 +36,12 @@ hr { border-bottom: 1px solid #EEE; border-width: 0 0 1px; margin: 3em 0; }
 .heading-typeface,h1,h2,h3,h4,h5,h6 { font-family: 'Univers LT Std - 47 Light Condensed'; font-weight: lighter; text-transform: uppercase; }
 
 #wrapper { height: 100%; }
-.fill { max-width: 120%; margin-left: -10%;}
+
 .typeface-colour-secondary, .typeface-colour-secondary a { color: #5A020E; }
 .typeface-colour-white, .typeface-colour-white a { color: #FFF; }
 .rs { margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; }
 
+
 section#mainContent h4,
 section#mainContent h5,
 section#mainContent h6 { 
@@ -105,6 +109,8 @@ aside {
       }
     }
     #portfolioLinks{
+      color: #FFF;
+      margin: 1em 0 0;
       a{
         color: #FFF;
         border-bottom: 2px solid #FFF;
@@ -159,6 +165,9 @@ aside {
             float: left; 
           }
         }
+        .dribble{
+          padding: 2px 1 0;
+        }
       }
     }
   }
@@ -214,6 +223,10 @@ section {
   .padded { 
     margin: 0 10%; 
   }
+  .fill { 
+    max-width: 120%; 
+    margin-left: -10%;
+  }
   .card{
     width: 100%;
     transition: 0.3s;
@@ -229,6 +242,7 @@ section {
     img{
       margin: 2% auto;
       display: block;
+      width: 80%;
     }
     .container {
       padding: 2px 16px;
@@ -280,7 +294,20 @@ section {
           }
         }
       }
-
+      .media--stretched{
+        width: 100vw;
+        margin-left: -10vw;
+        margin-top: 60px;
+        margin-bottom: 60px;
+        @media only screen and (min-width: 768px){
+          margin-left: -6vw;
+          width: 60vw;
+        }
+        @media only screen and (min-width: 960px){
+          width: 70vw;
+          margin-left: -7vw;
+        }
+      }
     }
     .projectMeta { 
       width: 100%; 

index.html

@@ -35,7 +35,7 @@
   <aside id="mainSide" class="column">
     <div class="padded">  
       <div id="logo"><a href="/"><img src="/assets/i/logo.svg"></a></div>
-      <h2 id="portfolioLinks" style="color: #FFF;margin: 1em 0 0;">We craft digital products built on <a href="/mindsky.html">web</a>, <a href="/lemariku.html">mobile</a> &amp; blockchain.</h2>
+      <h2 id="portfolioLinks">We craft digital products built on <a href="/mindsky">web</a>, <a href="/lemariku">mobile</a> &amp; blockchain.</h2>
 
       <div class="contact-footer typeface-colour-secondary">
         <hr>
@@ -65,7 +65,7 @@ <h2 id="portfolioLinks" style="color: #FFF;margin: 1em 0 0;">We craft digital pr
               <img src="/assets/icons/facebook.svg" width="16" height="16">
             </a>
             <a href="//dribbble.com/jb">
-              <img src="/assets/icons/dribbble.svg" width="16" height="14" style="padding:2px 1 0;">
+              <img class="dribble" src="/assets/icons/dribbble.svg" width="16" height="14">
             </a>
           </p>
         </div>

item/huu.html

@@ -1,13 +1,17 @@
-				<figure style="background-image:url('/assets/content/blur-huu.jpg');"><div class="padded"><img class="fill" src="/assets/content/huu.png"></div></figure>
-				<div class="contentArea padded clearfix">
-					<h3 class="projectTitle">Hu'u</h3>
-					<div class="projectDetails column">
-					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-					<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
-					</div>				
-					<ul class="projectMeta column">
-						<li><a href="#">Launch Project &rarr;</a></li>
-						<li>Lorem Ipsum Ltd.</li>
-						<li>2013</li>
-					</ul>
-				</div>
+	<figure style="background-image:url('/assets/content/blur-huu.jpg');">
+		<div class="padded">
+			<img class="fill" src="/assets/content/huu.png">
+		</div>
+	</figure>
+	<div class="contentArea padded clearfix">
+		<h3 class="projectTitle">Hu'u</h3>
+		<div class="projectDetails column">
+		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+		<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
+		</div>				
+		<ul class="projectMeta column">
+			<li><a href="#">Launch Project &rarr;</a></li>
+			<li>Lorem Ipsum Ltd.</li>
+			<li>2013</li>
+		</ul>
+	</div>

item/lemariku.html

@@ -0,0 +1,53 @@
+  <figure style="background-image:url('/assets/content/mindsky-bg.png');">
+    <div class="padded">
+      <img class="fill" src="/assets/content/mindsky-top.png?v=03">
+    </div>
+  </figure>
+	<div class="contentArea padded clearfix">
+    <h3 class="projectTitle">Lemariku</h3>
+		<div class="projectDetails column">
+			<p>What do they do: Lemariku is an online platform that makes shopping of second-hand fashion easy and comfortable for Indonesians.</p>
+
+			<p>People can list items they want to sell on the platform, which is an online marketplace connecting buyers and sellers, allowing them to chat to each other and slect the ideal payment and delivery method for both parties.</p>
+
+			<p>The platform is specifically created and catered to the purchase behaviour to the indonesian consumer allowing for cash payments and utilising local delivery services like GO-Jek.</p>
+
+			<div class="column">
+        <h4>The Problem</h4>
+        <p> Lemariku aims to make online shopping more accessible to Indonesians who:</p>
+        <ul>
+          <li>find websites too complicated;</li>
+          <li>find shipping costs too high;</li>
+          <li>don’t trust online payments;</li>
+          <li>want to talk to the seller before making a purchase.</li>
+        </ul>
+        <p> In a saturated market, it was our first challenge to clearly communicated the OVP and differentiate it from the competition. The real challenge came in designing and developing a website that is intuitive to use for the Indonesian target audience, who find websites too complicated, while building all of the functionality Lemariku wanted to offer.</p>
+
+        <h4>The Solution</h4>
+
+        <h4>Technologies Used</h4>
+        <ul>
+          <li>MySQL + Knex</li>
+          <li>Node.js</li>
+          <li>Backbone.js + Marionette</li>
+          <li> Socket.io</li>
+        </ul>   
+
+        <h4>Testimonials</h4>
+        <blockquote>
+          <p>The phenomenon postulating that an extreme type of a favored stimulant is desired more than the normal type of said stimulant</p>
+          <cite>&mdash; Nugent, Pam M.S.</cite>
+        </blockquote>
+
+        <blockquote>
+          <p>The phenomenon postulating that an extreme type of a favored stimulant is desired more than the normal type of said stimulant</p>
+          <cite>&mdash; Nugent, Pam M.S.</cite>
+        </blockquote>
+      </div>
+		</div>				
+		<ul class="projectMeta column">
+      <li><a href="" target="_blank">Launch Project &rarr;</a></li>
+      <li>Lemariku</li>
+      <li>2015 - 2016</li>
+    </ul>
+	</div>

item/melon.html

@@ -1,14 +1,18 @@
-				<figure style="background-image:url('/assets/content/blur-melon designs.jpg');"><div class="padded"><img class="fill" src="/assets/content/melon designs.png"></div></figure>
-				<div class="contentArea padded clearfix">
-					<h3 class="projectTitle">Melon Designs</h3>
-					<div class="projectDetails column">
-					<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
-					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
-					<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-					</div>				
-					<ul class="projectMeta column">
-						<li><a href="#">Launch Project &rarr;</a></li>
-						<li>Lorem Ipsum Ltd.</li>
-						<li>2013</li>
-					</ul>
-				</div>
+	<figure style="background-image:url('/assets/content/blur-melon designs.jpg');">
+		<div class="padded">
+			<img class="fill" src="/assets/content/melon designs.png">
+		</div>
+	</figure>
+	<div class="contentArea padded clearfix">
+		<h3 class="projectTitle">Melon Designs</h3>
+		<div class="projectDetails column">
+		<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
+		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+		<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+		</div>				
+		<ul class="projectMeta column">
+			<li><a href="#">Launch Project &rarr;</a></li>
+			<li>Lorem Ipsum Ltd.</li>
+			<li>2013</li>
+		</ul>
+	</div>