Add a Elixir Radar link to the sidebar

Author: hugobarauna

Diff for: _includes/elixir-radar.html

@@ -0,0 +1,21 @@
+<div id="elixir-radar" class="widget">
+  <h3 class="widget-title">Elixir Radar</h3>
+  <p>
+    A weekly Elixir email newsletter with content curated by Plataformatec. <strong>Subscribe below</strong>.
+  </p>
+  <div class="elixir-radar-cta">
+    <div class="cta-copy">
+      <div class="cta-title">
+        Elixir Radar
+      </div>
+      <div class="cta-subtitle">
+        weekly newsletter
+      </div>
+    </div>
+    <div class="cta-button-container">
+      <a href="http://plataformatec.com.br/elixir-radar?utm_campaign=elixir_lang_cta&utm_medium=cta&utm_source=elixir_lang_website" class="cta-button">
+        Subscribe now
+      </a>
+    </div>
+  </div>
+</div>

Diff for: _includes/top.html

@@ -12,7 +12,7 @@
   <link rel="stylesheet" href="/js/icons/ie7/ie7.css">
   <!--<![endif]-->
   <meta name="viewport" content="width=device-width,initial-scale=1" />
-  <link rel="stylesheet" id="font-bitter-css" href="http://fonts.googleapis.com/css?family=Bitter&amp;ver=1" type="text/css" media="screen" />
+  <link rel="stylesheet" id="font-bitter-css" href="http://fonts.googleapis.com/css?family=Bitter:400,700" type="text/css" media="screen" />
   <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
   <script>
   (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){

Diff for: _layouts/blog.html

@@ -13,6 +13,7 @@
   {% include important-links.html %}
   {% include code-editor-support.html %}
   {% include sponsors.html %}
+  {% include elixir-radar.html %}
 </div>
 
 {% include bottom.html %}

Diff for: _layouts/default.html

@@ -9,6 +9,7 @@
   {% include important-links.html %}
   {% include code-editor-support.html %}
   {% include sponsors.html %}
+  {% include elixir-radar.html %}
 </div>
 
 {% include bottom.html %}

Diff for: _layouts/getting-started.html

@@ -20,6 +20,7 @@ <h3 class="widget-title">{{guide.title}}</h3>
   {% endfor %}
 
   {% include sponsors.html %}
+  {% include elixir-radar.html %}
 </div>
 
 <div id="content">

Diff for: css/style.css

@@ -907,4 +907,73 @@ ol.jekyll-toc li a {
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
+}
+
+/* elixir radar */
+.elixir-radar-cta {
+  padding: 10px 0;
+  display: table;
+  width: 100%;
+  border-top: 1px dashed #e5e5e5;
+  border-bottom: 1px dashed #e5e5e5;
+}
+
+.cta-copy {
+  display: table-cell;
+  margin-right: 10px;
+  vertical-align: middle;
+}
+
+.cta-copy .cta-title {
+  font-size: 21px;
+  font-family: 'Bree Serif';
+  color: #14485b;
+}
+
+.cta-copy .cta-subtitle {
+  font-size: 14px;
+  font-family: Georgia;
+  color: #14485b;
+}
+
+.cta-button-container {
+  display: table-cell;
+  vertical-align: middle;
+}
+
+a.cta-button, a.cta-button:visited{
+  color: white;
+  text-decoration: none;
+}
+
+a.cta-button {
+  padding: 5px 10px;
+  display: inline-block;
+
+  font-size: 1.1em;
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, .25);
+  text-align: center;
+
+  background-color: #17678a;
+  background-image: linear-gradient(#1e88b6, #17678a);
+
+  border: 1px solid #14485b;
+  border-radius: 3px;
+
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
+}
+
+a.cta-button:hover {
+  background-color: #10465e;
+  background-image: linear-gradient(#17678a, #10465e);
+  border-color: #0b2731;
+}
+
+a.cta-button:active {
+  position: relative;
+  top: 1px;
+  left: 1px;
+
+  background-image: none;
+  box-shadow: inset 0 2px 4px rgba(0, 0, 0, .15);
 }