Adjust widgets

assets/scss/widgets/fbgroup-box.scss

@@ -0,0 +1,54 @@
+.fbgroup-box {
+  @extend .twitter-box;
+  @extend .twitter-box-dev;
+
+  .fbgroup-box-profilepic {
+    img {
+      width: 70px;
+      margin-top: 15px;
+    }
+  }
+}
+
+.fbgroup-box-content {
+  @extend .twitter-box-content;
+
+  > h4 {
+    margin: 1rem;
+  }
+
+  > p {
+    margin: 2rem 0;
+  }
+
+  > a {
+    margin: 1rem 0;
+  }
+
+  .button-add {
+    width: 60%;
+  }
+
+}
+
+.fbgroup-box-profilepic {
+  position: absolute;
+  top: 100px;
+  left: 50%;
+
+  display: block;
+  width: 100px;
+  height: 100px;
+  margin-left: -50px;
+
+  text-align: center;
+
+  border-radius: 100%;
+  background: $white;
+
+  img {
+    width: 80%;
+    height: auto;
+    margin-top: 6px;
+  }
+}

assets/scss/widgets/popular-posts.scss

@@ -1,3 +1,4 @@
+.feature-post,
 .popular-posts {
   padding: 0;
 

partials/sidebar.hbs

@@ -1,17 +1,13 @@
 <aside class="blog-sidebar">
-
     {{> widgets/blog-subscribe}}
     {{> widgets/popular-posts}}
     {{> widgets/feature-post}}
     {{> widgets/fbgroup-box}}
-    {{> widgets/facebook-box}}    
+    {{> widgets/facebook-box}}
     {{> widgets/twitter-box}}
 
-
     {{!> widgets/blog-text}}
     {{!> widgets/slack-box}}
     {{!> widgets/ghost-love}}
     {{!> widgets/gplus-box}}
-
-
 </aside>

partials/widgets/blog-subscribe.hbs

@@ -1,5 +1,4 @@
 <section class="blog-subscribe blog-subscribe-main widget">
-    <h3>Join Thousands</h3>
-    <p>of subscribers who get fresh content from us once per week.</p>
-    <a class="button-add large wide" data-toggle="modal" data-target="#blogsubscribe">Subscribe Now</a>
+    <h3>Recíbelo semanalmente</h3>
+    <a class="button-add large wide" data-toggle="modal" data-target="#blogsubscribe">Subscribirse ahora</a>
 </section>

partials/widgets/fbgroup-box.hbs

@@ -1,9 +1,11 @@
-<section class="slack-box widget">
-  <a class="twitter-box-profilepic" href="/unete"><img src="{{asset "images/slack.png"}}" alt="Twitter profile picture" /></a>
-  <img class="twitter-box-coverpic" src="{{asset "images/slackbg.jpg"}}" alt="Twitter cover image" nopin="nopin" />
-  <div class="slack-box-content">
+<section class="fbgroup-box widget">
+  <div class="fbgroup-box-profilepic">
+    <img src="{{asset "images/logo-black.png"}}" alt="Twitter profile picture" />
+  </div>
+  <img class="fbgroup-box-coverpic" src="{{asset "images/fbgroupbg.jpg"}}" alt="Twitter cover image" nopin="nopin" />
+  <div class="fbgroup-box-content">
     <h4>Únete a la comunidad</h4>
-    <p>Forma parte de la más vibrante comunidad alrededor del Mar Menor.</p>
-    <a class="button-add large wide" data-toggle="modal" data-target="#blogsubscribe">Unirme</a>
+    <p>Forma parte de la más vibrante comunidad de beatbox de habla hispana.</p>
+    <a class="button-add large wide" target="blank" href="https://www.facebook.com/groups/zombeats/">Unirme</a>
   </div>
 </section>

partials/widgets/feature-post.hbs

@@ -1,4 +1,4 @@
-<section class="popular-posts widget">
+<section class="feature-post widget">
   <h3>Próximo Evento</h3>
   <a href="/#">
     <img src="{{asset "images/event.jpg"}}" style="width: 60%;">

partials/widgets/twitter-box.hbs

@@ -2,7 +2,7 @@
 {{! TODO: Extract twitter description as Ghost variable }}
 
 <section class="twitter-box twitter-box-main widget">
-    <a class="twitter-box-profilepic" href="http://twitter.com/zombeats_es"><img src="{{asset "images/logo.png"}}" alt="Twitter profile picture" /></a>
+    <div class="twitter-box-profilepic"><img src="{{asset "images/logo.png"}}" alt="Twitter profile picture" /></div>
     <img class="twitter-box-coverpic" src="{{asset "images/twitterbg.jpg"}}" alt="Twitter cover image" nopin="nopin" />
     <div class="twitter-box-content">
         <h4>Zombeats</h4>