From 4efa3ed9b3903cdaea16f9255b162fe38b7018f8 Mon Sep 17 00:00:00 2001
From: Maciej Matuszewski <maciek.matuszewski@gmail.com>
Date: Thu, 11 Jan 2018 00:23:35 +0100
Subject: [PATCH] Add styling for mobile breakpoint

---
 src/hbs/layouts/base.hbs                |  2 +-
 src/hbs/partials/components/project.hbs |  2 +-
 src/styles/components/_project.scss     | 40 +++++++++++++++++++++++++
 3 files changed, 42 insertions(+), 2 deletions(-)

diff --git a/src/hbs/layouts/base.hbs b/src/hbs/layouts/base.hbs
index c9344dd..e333401 100644
--- a/src/hbs/layouts/base.hbs
+++ b/src/hbs/layouts/base.hbs
@@ -6,7 +6,7 @@
     <meta name="viewport" content="width=device-width">
     <title>truebit | Art Project</title>
 
-    <link href="https://fonts.googleapis.com/css?family=Rubik+Mono+One|Work+Sans:400,500,700" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css?family=Rubik+Mono+One|Work+Sans:300,400,500,700" rel="stylesheet">
     <!-- build:css css/main.css -->
     <link rel="stylesheet" href="/css/main.css">
     <!-- endbuild -->
diff --git a/src/hbs/partials/components/project.hbs b/src/hbs/partials/components/project.hbs
index fd1fe1e..b4c03f6 100644
--- a/src/hbs/partials/components/project.hbs
+++ b/src/hbs/partials/components/project.hbs
@@ -12,7 +12,7 @@
 
   <div class="project__images">
     {{#each project.images as |imageSrc|}}
-      <img src={{imageSrc}} class="project__image--{{@index}}" alt="" />
+      <img src={{imageSrc}} class="project__image project__image--{{@index}}" alt="" />
     {{/each}}
   </div>
 
diff --git a/src/styles/components/_project.scss b/src/styles/components/_project.scss
index 65e89ac..35106f5 100644
--- a/src/styles/components/_project.scss
+++ b/src/styles/components/_project.scss
@@ -1,5 +1,45 @@
 .project {
+  position: relative;
   padding: 25px;
   color: $color-white;
   background-color: $color-orange;
+
+  &__content {
+    margin-top: 20px;
+    font-size: 18px;
+    font-weight: 300;
+  }
+
+  &__subheader {
+    font-weight: 400;
+  }
+
+  &__images {
+    padding-top: 10px;
+  }
+
+  &__image {
+    max-width: 100%;
+    margin: 10px 0;
+  }
+
+  &__button {
+    margin-top: 10px;
+  }
+
+  &__counter {
+    position: absolute;
+    bottom: 20%;
+    left: 22px;
+    font-size: 24px;
+    transform: rotate(-90deg);
+    transform-origin: left center;
+  }
+
+  &__link {
+    display: block;
+    margin-top: 20px;
+    font-size: 12px;
+    text-transform: uppercase;
+  }
 }