Merge pull request ember-brasil#67 from ember-brasil/layout-site

Change layout
marcelitocs · Sep 28, 2017 · ef361b5 · ef361b5
2 parents f15fe75 + af36dd5
commit ef361b5
Show file tree

Hide file tree

Showing 16 changed files with 186 additions and 164 deletions.
diff --git a/source/_footer.erb b/source/_footer.erb
@@ -1,36 +1,34 @@
 <div class="footer">
-  <div class="container">
-    <div class="footer-info">
-      Links úteis<br />
-      <a href="https://ember-community-slackin.herokuapp.com/">Comunidade no Slack</a><br />
-      <a href="https://github.com/emberjs/ember.js">Github</a><br />
-      <a href="https://t.me/EmberBR">Telegram (Ember-BR)</a>
-    </div>
+    <div class="container">
 
-    <div class="footer-statement">
-      Ember.js é framework para criar aplicações web ambiciosas.
-    </div>
+      <div class="footer-statement">
+        <a href="https://ember-community-slackin.herokuapp.com/">Comunidade no Slack</a> &bull;
+        <a href="https://github.com/emberjs/ember.js">Github</a> &bull;
+        <a href="https://t.me/EmberBR">Telegram (Ember-BR)</a>
+      </div>
+
+      <div class="footer-statement footer-social">
+        <a href="http://twitter.com/emberjs"
+          title="Twitter">
+          <i class="icon-twitter"></i>
+        </a>
+        <a href="https://github.com/emberjs/ember.js"
+          title="GitHub">
+          <i class="icon-github"></i>
+        </a>
+        <a href="https://plus.google.com/communities/106387049790387471205"
+          title="Google+">
+          <i class="icon-gplus"></i>
+        </a>
+      </div>
+      <hr />
+      <div class="info">
+        <p>
+          Este site é parte de uma iniciativa da <b>Comunidade Brasileira Ember</b> e não tem nenhuma ligação direta com o projeto oficial. <br />
+          Ember é uma marca registrada da <a href="http://tilde.io">Tilde Inc.</a>.<br />
+          Para obter mais informações sobre licença de uso acesse <a href="http://emberjs.com/legal">Legal</a>.
+        </p>
+      </div>
 
-    <div class="footer-social">
-      <a href="http://twitter.com/emberjs"
-        title="Twitter">
-        <i class="icon-twitter"></i>
-      </a>
-      <a href="https://github.com/emberjs/ember.js"
-        title="GitHub">
-        <i class="icon-github"></i>
-      </a>
-      <a href="https://plus.google.com/communities/106387049790387471205"
-        title="Google+">
-        <i class="icon-gplus"></i>
-      </a>
-    </div>
-  </div>
-  <div class="info">
-    <p>
-      Este site é parte de uma iniciativa da comunidade Brasileira Ember e não tem nenhuma ligação direta com o projeto oficial. <br />
-      Ember é uma marca registrada da <a href="http://tilde.io">Tilde Inc.</a>.<br />
-      Para obter mais informações sobre licença de uso acesse <a href="http://emberjs.com/legal">Legal</a>.
-    </p>
   </div>
 </div>
diff --git a/source/_header.erb b/source/_header.erb
@@ -1,6 +1,6 @@
 <header class="header">
   <nav role="navigation" aria-label="main">
-    <ul class="header-nav container">
+    <ul class="header-nav">
       <li class="header-logo">
         <a href="/"><span class="visually-hidden">Ember homepage</span></a>
       </li>

diff --git a/source/contribuidores.html.erb b/source/contribuidores.html.erb
@@ -7,13 +7,15 @@ responsive: true
   Contribuidores
 </h1>
 
-<p class="lead">
-  Ember é um projeto Open Source e conta com a contribuição individual de diversos desenvolvedores.<br />
-  Esses são os desenvolvedores que trabalham para fortalecer a <b>Comunidade Brasileira Ember</b>, seja criando conteúdo, traduzindo ou revisando nosso material.
-</p>
+
 
 <div class="team section">
 
+  <p class="lead">
+    Ember é um projeto Open Source e conta com a contribuição individual de diversos desenvolvedores.<br />
+    Esses são os desenvolvedores que trabalham para fortalecer a <b>Comunidade Brasileira Ember</b>, seja criando conteúdo, traduzindo ou revisando nosso material.
+  </p>
+
 <ul class="headshots">
   <% data.contribuidores.each do |user| %>
     <li>

diff --git a/source/layout.erb b/source/layout.erb
@@ -10,7 +10,7 @@
     <%= favicon_tag '/images/favicon.png' %>
     <!--[if lte IE 7 ]><%= stylesheet_link_tag "fonts/fontello-ie7" %><![endif]-->
     <%= stylesheet_link_tag "application" %>
-    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600" rel="stylesheet">
+    <link href="//fonts.googleapis.com/css?family=Nunito:300,400,700" rel="stylesheet">
     <!-- This TypeKit account is managed by @wifelette. Contact her with any issues. -->
     <script src="https://use.typekit.net/stz3kpn.js"></script>
     <script>try{Typekit.load({ async: true });}catch(e){}</script>
@@ -28,25 +28,25 @@
       <%= javascript_include_tag 'common-modern' %>
     <!--<![endif]-->
 
-    <%= partial "header" %>
+    <main>
+      <%= partial "header" %>
 
-    <%= yield_content :outside_wrapper %>
+      <%= yield_content :outside_wrapper %>
 
-    <main class="container">
 
-    <% if current_page.data.title == "404 - Not Found" %>
-      <%= yield %>
-    <% else %>
-      <article class="fluid">
+      <% if current_page.data.title == "404 - Not Found" %>
         <%= yield %>
-      </article>
-    <% end %>
-    </main>
+      <% else %>
+        <div class="content">
+          <%= yield %>
+        </div>
+      <% end %>
 
-    <%= partial "footer" %>
+      <%= partial "footer" %>
 
-    <%= yield_content :foot %>
+      <%= yield_content :foot %>
 
+    </main>
     <%= partial "google-analytics" %>
 
   </body>

diff --git a/source/layouts/guides.erb b/source/layouts/guides.erb
@@ -10,7 +10,7 @@
     <%= favicon_tag 'images/favicon.png' %>
     <!--[if lte IE 7 ]><%= stylesheet_link_tag "fonts/fontello-ie7" %><![endif]-->
     <%= stylesheet_link_tag "application" %>
-    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600" rel="stylesheet">
+    <link href="//fonts.googleapis.com/css?family=Nunito:300,400,700" rel="stylesheet">
     <!-- This TypeKit account is managed by @wifelette. Contact her with any issues. -->
     <script src="https://use.typekit.net/stz3kpn.js"></script>
     <script>try{Typekit.load({ async: true });}catch(e){}</script>
@@ -28,29 +28,29 @@
       <%= javascript_include_tag 'common-modern' %>
     <!--<![endif]-->
 
-    <%= partial "header" %>
+    <main>
+      <%= partial "header" %>
 
-    <%= yield_content :outside_wrapper %>
+      <%= yield_content :outside_wrapper %>
+        <div class="content">
+            <%= partial "guides/sidebar" %>
+            <article>
+              <h1>
+                <%= page_title %>
+                <a href="https://github.com/ember-brasil/website/edit/master/source/<%= current_page.path.gsub('html', 'md') %>"
+                   target="_blank" class="edit-page icon-pencil">Melhorar esta página</a>
+              </h1>
+              <hr>
 
-    <main class="container">
-      <%= partial "guides/sidebar" %>
-      <article class="chapter">
-        <h1>
-          <%= page_title %>
-          <a href="https://github.com/ember-brasil/website/edit/master/source/<%= current_page.path.gsub('html', 'md') %>"
-             target="_blank" class="edit-page icon-pencil">Melhorar esta página</a>
-        </h1>
-        <hr>
+              <%= yield %>
+            </article>
 
-        <%= yield %>
+          </div>
 
-        <%= chapter_links %>
-      </article>
-    </main>
-
-    <%= partial "footer" %>
+          <%= partial "footer" %>
 
-    <%= yield_content :foot %>
+          <%= yield_content :foot %>
+    </main>
 
     <%= partial "google-analytics" %>
   </body>

diff --git a/source/quem-usa-ember.html.erb b/source/quem-usa-ember.html.erb
@@ -4,19 +4,21 @@ responsive: true
 ---
 
 <h1>
-  Quem usa Ember.js no Brasil?
+  Quem usa Ember no Brasil?
 </h1>
 
-<p>
-  As logotipos são adicionadas pela comunidade. Essas empresas podem ou não estar usando Ember em seus principais produtos ou serviços, mas eles definitivamente estão usando isso em algum lugar em suas organizações :)
-</p>
 
-<p>
-  Sinta-se livre para localizar os colaboradores que trabalham em uma dessas empresas se você estiver procurando por mais informações.
-</p>
 
 <div class="companys section">
 
+  <p>
+    As logotipos são adicionadas pela comunidade. Essas empresas podem ou não estar usando Ember em seus principais produtos ou serviços, mas eles definitivamente estão usando isso em algum lugar em suas organizações :)
+  </p>
+
+  <p>
+    Sinta-se livre para localizar os colaboradores que trabalham em uma dessas empresas se você estiver procurando por mais informações.
+  </p>
+
 <ul class="showcase">
   <% data.companys.each do |user| %>
     <li>
@@ -34,10 +36,10 @@ responsive: true
 
 <hr />
 
-<a class="ember-button ember-button--centered ember-button--community" target="_blank" href="https://emberjs.com/ember-users/">Ver lista oficial</a>
+<a class="ember-button ember-button--centered" target="_blank" href="https://emberjs.com/ember-users/">Ver lista oficial</a>
 
 <p>
-  Para adicionar sua empresa ou projeto nesta página, <a href="https://github.com/ember-brasil/website">Envie um Pull Request</a>. <br>Certifique-se de que seu logotipo tenha um fundo transparente e espaço em branco adequado. <br> Informaçoẽs adicionais acesse  <a href="https://github.com/ember-brasil/website/blob/master/CONTRIBUTING.md#como-adicionar-uma-empresa">CONTRIBUTING</a>.
+  Para adicionar sua empresa ou projeto nesta página, <a href="https://github.com/ember-brasil/website">ENVIE UM PULL REQUEST</a>. <br>Certifique-se de que seu logotipo tenha um fundo transparente e espaço em branco adequado. <br> Informaçoẽs adicionais acesse  <a href="https://github.com/ember-brasil/website/blob/master/CONTRIBUTING.md#como-adicionar-uma-empresa">CONTRIBUTING</a>.
 </p>
 
 

diff --git a/source/stylesheets/application.css.scss b/source/stylesheets/application.css.scss
@@ -42,10 +42,30 @@
 }
 
 .companys.section {
-  .showcase {
+
+  margin: 3em auto 0 auto;
+  max-width: 54em;
+  width: 90%;
+
+  p {
+    font-size: 1em;
+    font-weight: 700;
+    color: #888;
+    max-width: 90%;
     margin: 0 auto;
+    text-align: center;
+    line-height: 1.8em;
+  }
+
+  .ember-button {
+    margin: 20px auto;
+  }
+
+  .showcase {
+    max-width: 760px;
     width: 100%;
-    max-width:100%;
+    margin: 0 auto;
+
   }
 
   ul.showcase {
@@ -56,6 +76,7 @@
   ul.showcase {
     margin: 0;
     padding: 0 1px;
+    margin-top: 30px;
   }
 
   .showcase li {
@@ -101,7 +122,7 @@
     > a {
       background-color: white;
       border-radius: 5px;
-      box-shadow: 0px 1px 4px -1px rgba(0,0,0,0.8);
+      box-shadow: 0px 1px 6px -2px rgba(0, 0, 0, 0.8);
 
       img {
         height: auto;

diff --git a/source/stylesheets/base/_typography.scss b/source/stylesheets/base/_typography.scss
@@ -35,7 +35,21 @@ h6 {
 }
 
 h1 {
-  color: $ember-orange;
+  color: $near-black;
+  text-align: center;
+  text-transform: uppercase;
+}
+
+h1:after {
+  content: '';
+  position: absolute;
+  display: block;
+  width: 150px;
+  height: 2px;
+  left: 50%;
+  margin-top: .2em;
+  background: $ember-orange;
+  margin-left: -75px;
 }
 
 h2 {

diff --git a/source/stylesheets/base/_variables.scss b/source/stylesheets/base/_variables.scss
@@ -1,8 +1,8 @@
 // Typography
-$base-font-family: $helvetica;
+$base-font-family: 'Nunito', Arial, sans-serif;
 $heading-font-family: $base-font-family;
 $monospace-font-family: Menlo, "DejaVu Sans Mono", "Bitstream Vera Sans Mono", Courier, monospace;
-$footer-font-family: proxima-nova, sans-serif;
+$footer-font-family: $base-font-family;
 
 // Font Sizes
 $base-font-size: 1rem;
@@ -31,7 +31,7 @@ $creme: #FFFBF5;
 $linen: #f9e7e4;
 $near-black: #444;
 
-$base-background-color: #FDFDFD;
+$base-background-color: #333;
 $sidebar-background-color: #FFFDF9;
 
 // Code Highlighting

diff --git a/source/stylesheets/components/_article.scss b/source/stylesheets/components/_article.scss
@@ -1,30 +1,43 @@
 article {
   padding: $large-spacing 0;
 
-  &.fluid {
-    width: 100%;
-  }
-
   @include media($large-screen) {
     @include span-columns(8.5);
+    margin: 0;
   }
 
   .edit-page {
     color: $brown;
     display: inline-block;
-    float: right;
-    font-size: .8rem;
+    font-size: 1rem;
     margin: 0.5em 0 0 0;
     opacity: 0.4;
     text-decoration: none;
     font-weight: normal;
+    cursor: pointer;
+    width: 23px;
+    overflow: hidden;
+    height: 22px;
 
     &:hover {
       opacity: 1;
       border-bottom: 0;
     }
   }
 
+  h1 {
+    text-align: left;
+    font-size: 1.8em;
+    &:after {
+      background: none;
+      width: 0;
+      height: 0;
+    }
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
   h2,
   h3 {
     margin-top: $base-spacing;