Project page style fixes

_includes/header.html

@@ -26,7 +26,7 @@
         {% endfor %}
 
         <!-- CV link -->
-        <a class="page-link" href="{{ '/assets/pdf/CV.pdf' | prepend: site.baseurl | prepend: site.url }}">vitae</a>
+        <!-- <a class="page-link" href="{{ '/assets/pdf/CV.pdf' | prepend: site.baseurl | prepend: site.url }}">vitae</a> -->
 
       </div>
     </nav>

_projects/1_project.markdown

@@ -1,6 +1,6 @@
 ---
-layout: post
-title: Project
+layout: page
+title: Project 1
 description: a project with a background image
 img: /assets/img/12.jpg
 ---
@@ -10,7 +10,7 @@ Every project has a beautiful feature shocase page. It's easy to include images,
 To give your project a background in the portfolio page, just add the img tag to the front matter like so:
 
     ---
-    layout: post
+    layout: page
     title: Project
     description: a project with a background image
     img: /assets/img/12.jpg

_projects/2_project.markdown

@@ -1,6 +1,6 @@
 ---
-layout: post
-title: Project
+layout: page
+title: Project 2
 description: a project with a background image
 img: /assets/img/2.jpg
 ---
@@ -10,7 +10,7 @@ Every project has a beautiful feature shocase page. It's easy to include images,
 To give your project a background in the portfolio page, just add the img tag to the front matter like so:
 
     ---
-    layout: post
+    layout: page
     title: Project
     description: a project with a background image
     img: /assets/img/12.jpg

_projects/3_project.markdown

@@ -1,6 +1,6 @@
 ---
-layout: post
-title: Project
+layout: page
+title: Project 3
 description: a project that redirects to another website
 img:
 redirect: https://unsplash.com
@@ -11,7 +11,7 @@ Every project has a beautiful feature shocase page. It's easy to include images,
 To give your project a background in the portfolio page, just add the img tag to the front matter like so:
 
     ---
-    layout: post
+    layout: page
     title: Project
     description: a project with a background image
     img: /assets/img/12.jpg

_projects/4_project.markdown

@@ -1,6 +1,6 @@
 ---
-layout: post
-title: Project
+layout: page
+title: Project 4
 description: another without an image
 img:
 ---
@@ -10,7 +10,7 @@ Every project has a beautiful feature shocase page. It's easy to include images,
 To give your project a background in the portfolio page, just add the img tag to the front matter like so:
 
     ---
-    layout: post
+    layout: page
     title: Project
     description: a project with a background image
     img: /assets/img/12.jpg

_projects/5_project.markdown

@@ -1,6 +1,6 @@
 ---
-layout: post
-title: Project
+layout: page
+title: Project 5
 description: a project with a background image
 img: /assets/img/1.jpg
 ---
@@ -10,7 +10,7 @@ Every project has a beautiful feature shocase page. It's easy to include images,
 To give your project a background in the portfolio page, just add the img tag to the front matter like so:
 
     ---
-    layout: post
+    layout: page
     title: Project
     description: a project with a background image
     img: /assets/img/12.jpg

_projects/6_project.markdown

@@ -1,6 +1,6 @@
 ---
-layout: post
-title: Project
+layout: page
+title: Project 6
 description: a project with no image
 img:
 ---
@@ -10,7 +10,7 @@ Every project has a beautiful feature shocase page. It's easy to include images,
 To give your project a background in the portfolio page, just add the img tag to the front matter like so:
 
     ---
-    layout: post
+    layout: page
     title: Project
     description: a project with a background image
     img: /assets/img/12.jpg

_sass/_base.scss

@@ -6,7 +6,7 @@ html, body {
 }
 
 img {
-  max-width: 100%;
+  max-width: none;
 }
 
 em img {

_sass/_code.scss

@@ -10,7 +10,12 @@ code {
 }
 
 code {
-  color: $text-color;
+  color: $code-color;
+  font-size: 85%;
+  padding-bottom: 0.1em;
+  padding-left: 0.2em;
+  padding-right: 0.2em;
+  padding-top: 0.1em;
 }
 
 pre {

_sass/_media-queries.scss

@@ -27,7 +27,6 @@
 
   .site-header .site-nav {
     float: right;
-    margin-top: .25rem;
   }
 
   blockquote {

_sass/_profile.scss

@@ -17,6 +17,7 @@
     padding-top: 20px;
 
     h2 {
+        font-weight: bold;
         margin-top: 0;
         margin-bottom: 10px;
     }

_sass/_projects.scss

@@ -5,37 +5,53 @@
     padding: 10px;
     vertical-align: middle;
     width: 33.33%;
-}
-.thumbnail {
-    overflow: hidden;
-    height: 230px;
-    width: 100%;
-}
-.thumbnail img{
-    height: auto;
-    position: relative;
-        left: -25%;
-        top: -5%;
-    width: 500px;
-}
-.thumbnail a{
-    float: left;
-    height: 230px;
-    position: relative;
-    width: 100%;
-}
-.thumbnail a span {
-    display: none;
-    position: absolute;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: 0;
-    background: rgba(0,0,0,0.4);
-    color: $grey-color-light;
-    padding: 40px;
-    text-align: center;
-}
-.thumbnail a:hover span {
-    display: block;
+
+    .thumbnail {
+        overflow: hidden;
+        height: 200px;
+        width: 100%;
+
+        img {
+            height: auto;
+            position: relative;
+                left: -25%;
+                top: -5%;
+            width: 500px;
+        }
+
+        a {
+            float: left;
+            height: 230px;
+            position: relative;
+            width: 100%;
+
+            span {
+                display: none;
+                position: absolute;
+                top: 0;
+                left: 0;
+                bottom: 0;
+                right: 0;
+                background: rgba(0,0,0,0.4);
+                color: $grey-color-light;
+                padding: 40px;
+                text-align: center;
+
+                h1 {
+                    font-size: 1.5rem;
+                    margin: 0;
+                }
+
+                p {
+                    color: $grey-color-light;
+                }
+            }
+
+            &:hover {
+                span {
+                    display: block;
+                }
+            }
+        }
+    }
 }

_sass/_variables.scss

@@ -70,6 +70,7 @@ $darken-3:          rgba(#000,.25) !default;
 $darken-4:          rgba(#000,.5) !default;
 
 $theme-color:       $purple;
+$code-color:        $dark-gray;
 $text-color:        $mid-gray;
 $background-color:  white;