From 829693c410a0c60def011c69eef81f35f8e65eba Mon Sep 17 00:00:00 2001
From: Emma Garland <emmagarland77@gmail.com>
Date: Sun, 4 Jun 2017 16:49:57 +0100
Subject: [PATCH] Added new styles and classes - sass to be accessed

---
 OurUmbraco.Client/src/scss/elements/_avatar.scss   | 14 ++++++++++++++
 OurUmbraco.Client/src/scss/style.scss              |  1 +
 .../Views/Partials/Community/Home.cshtml           |  7 +++----
 .../Views/Partials/Home/GitHubContributors.cshtml  |  2 +-
 4 files changed, 19 insertions(+), 5 deletions(-)
 create mode 100644 OurUmbraco.Client/src/scss/elements/_avatar.scss

diff --git a/OurUmbraco.Client/src/scss/elements/_avatar.scss b/OurUmbraco.Client/src/scss/elements/_avatar.scss
new file mode 100644
index 00000000..f48700bf
--- /dev/null
+++ b/OurUmbraco.Client/src/scss/elements/_avatar.scss
@@ -0,0 +1,14 @@
+.avatar {
+    flex: 0 0 23%;
+    margin-right: 20px;
+
+    @media (min-width: $md) {
+        flex: 0 0 15%;
+    }
+
+    img {
+        width: 100%;
+        max-width: 112px;
+        height: auto;
+    }
+}
\ No newline at end of file
diff --git a/OurUmbraco.Client/src/scss/style.scss b/OurUmbraco.Client/src/scss/style.scss
index c9b8564e..5042f772 100644
--- a/OurUmbraco.Client/src/scss/style.scss
+++ b/OurUmbraco.Client/src/scss/style.scss
@@ -51,6 +51,7 @@
 @import 'elements/notification';
 @import 'elements/alertbar';
 @import 'elements/utilities';
+@import 'elements/avatar';
 
 /**
 /* Sections
diff --git a/OurUmbraco.Site/Views/Partials/Community/Home.cshtml b/OurUmbraco.Site/Views/Partials/Community/Home.cshtml
index 029b1e8d..193f204a 100644
--- a/OurUmbraco.Site/Views/Partials/Community/Home.cshtml
+++ b/OurUmbraco.Site/Views/Partials/Community/Home.cshtml
@@ -131,10 +131,9 @@ else
 
 @helper  GitHubContributors()
 {
-    <section class="github-contributors">
+    <section class="github-contributors forum">
         <div class="container">
             <div class="row">
-
                 <div class="col-md-12">
                     <h1 class="text-center">GitHub Contributors Activity</h1>
                     <p>
@@ -142,10 +141,10 @@ else
                     </p>
                 </div>
                 <div class="col-md-12">
-                    <small>Recent tweets</small>
+                    <small>Recent GitHub contributions</small>
                 </div>
 
-                <div class="col-md-12 flex" id="github-contributors">
+                <div class="col-md-12 flex forum-thread" id="github-contributors">
                     <h2>Loading GitHub search results...</h2>
                 </div>
 
diff --git a/OurUmbraco.Site/Views/Partials/Home/GitHubContributors.cshtml b/OurUmbraco.Site/Views/Partials/Home/GitHubContributors.cshtml
index 71794987..bf5917f5 100644
--- a/OurUmbraco.Site/Views/Partials/Home/GitHubContributors.cshtml
+++ b/OurUmbraco.Site/Views/Partials/Home/GitHubContributors.cshtml
@@ -4,7 +4,7 @@
 {
     <a href="@contributor.Url">
         <div class="avatar">
-            <img alt="@contributor.Id" src="@contributor.AvatarUrl" />
+            <img alt="@contributor.Id" src="@contributor.AvatarUrl"/>
         </div>
     </a>
 }