Finish Team, History pages and Avatars component

_data/core-team.yml

@@ -1,11 +1,11 @@
-- name: Adam Requena Macias
-  user: adammacias
-  gravatar: https://avatars3.githubusercontent.com/u/1139893
+- name: "Adam Requena Macias"
+  user: "adammacias"
+  gravatar: "https://avatars3.githubusercontent.com/u/1139893"
 
-- name: Flávia Carolina de Souza
-  user: flaviacs
-  gravatar: https://avatars0.githubusercontent.com/u/4764189
+- name: "Flávia Carolina de Souza"
+  user: "flaviacs"
+  gravatar: "https://avatars0.githubusercontent.com/u/4764189"
 
-- name: Ramon Duran
-  user: ramonduran
-  gravatar: https://avatars1.githubusercontent.com/u/11800538
+- name: "Ramon Duran"
+  user: "ramonduran"
+  gravatar: "https://avatars1.githubusercontent.com/u/11800538"

_sass/_centropaulasouza.scss

@@ -25,7 +25,7 @@ License URI: http://www.gnu.org/licenses/gpl-2.0.html
 @import "centropaulasouza/functions";
 @import "centropaulasouza/mixins";
 @import "centropaulasouza/brand";
-@import "centropaulasouza/scaffolding";
+@import "centropaulasouza/layout";
 @import "centropaulasouza/components";
 
 // Pygments Manni Styles

_sass/centropaulasouza/_components.scss

@@ -1,3 +1,95 @@
+//
+// Avatars
+//
+//
+
+.avatar {
+
+  &.avatar-default,
+  &.avatar-horizontal {
+    // Default
+    border: 0;
+    @extend .media;
+
+    .avatar-foto {
+      @extend .media-left;
+      img {
+        @extend .media-object;
+        @extend .img-rounded;
+        margin-top: 3px;
+        width: 35px;
+        height: 35px;
+      }
+    }
+
+    .avatar-details {
+      @extend .media-body;
+      @extend .text-muted;
+      font-size: 12px;
+      .fa {font-size: 14px;}
+      p {
+        margin: 0;
+      }
+
+      .avatar-name {
+        @extend .media-heading;
+        color: $gray-dark;
+        font-size: 16px;
+      }
+    }
+
+    // Large
+    &.avatar-lg {
+      .avatar-foto {
+        img {
+          margin-top: 3px;
+          width: 120px;
+          height: 120px;
+        }
+      }
+      .avatar-details {
+        @extend .text-muted;
+        font-size: 14px;
+        .avatar-name {
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  &.avatar-vertical {
+    border: 0;
+    @extend .thumbnail;
+
+    .avatar-foto {
+      img {
+        @extend .img-rounded;
+        @extend .img-responsive;
+        @extend .center-block;
+        min-width: 100%;
+      }
+    }
+
+    .avatar-details {
+      @extend .caption;
+      @extend .text-muted;
+      font-size: 12px;
+      .fa {font-size: 14px;}
+      .avatar-name {
+        @extend .media-heading;
+        font-size: 16px;
+      }
+    }
+  }
+}
+
+
+
+
+
+
+
+
+
 //
 // navbar-secundary
 //

about/history.md

@@ -5,63 +5,14 @@ group: about
 redirect_from: "/about/"
 ---
 
-<p class="lead">O {{ site.title }} foi criado em um <abbr title="Trabalho de conclusão de curso">TCC</abbr> de alunos da Fatec Rubens Lara - Baixada Santista.</p>
+O {{site.title}} foi criado por alunos da Fatec Baixada Santista - Rubens Lara e nasceu a partir de um **TCC**.
+{: .lead}
 
-Desenvolvemos websites para Fatecs e Etecs com as melhores das intenções. Porém muitos desses websites não vão passar por uma única pessoa, mas sim por muitas. Por isso criamos este guia de estilos, vulgo styleguide, para que desenvolvedores consigam manter uma padronização de design e boas práticas, para que os websites possuam todos a identidade visual do Centro Paula Souza e mantenha o código limpo e fácil de ser alterado quando necessário.
+Em 2014 alunos da Fatec Baixada Santista, **Adam Macias** e **Flávia Souza**, iniciaram seu estágio como desenvolvedores front-end na equipe web responsável por manter e manusuar o site da unidade. 
 
+Ao passar algumas semanas, ambos perceberam uma enorme dificuldade em fazer manutenções que deveriam ser simples, mas por não ter uma documentação e alguma normalização, o código ficará dificil de entender.
 
+>  Por não seguir uma normalização, era extremamente complicado manusear o front-end do site, um exemplo besta: Um componente de listar pessoas era completamente diferente do mesmo componente só que em outra página.
+>  <footer>Adam Macias, Desenvolvedor Front-end</footer>
 
-
-
-
-
-
-
-
-{% comment %}
-
-<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
-
-<!-- Códigando -->
-<h2 class="docs-h2">Códigando</h2>
-<p>Isto é apenas um exemplo! All HTML headings, <code>&lt;h1&gt;</code> through <code>&lt;h6&gt;</code>, are available. <code>.h1</code> through <code>.h6</code> classes are also available, for when you want to match the font styling of a heading but still want your text to be displayed inline.</p>
-<div class="docs-example docs-example-codigando">
-  <table class="table">
-    <tbody>
-      <tr>
-        <td><h1>h1. Centro Paula Souza heading</h1></td>
-        <td class="type-infox">Semibold 36px</td>
-      </tr>
-      <tr>
-        <td><h2>h2. Centro Paula Souza heading</h2></td>
-        <td class="type-info">Semibold 30px</td>
-      </tr>
-      <tr>
-        <td><h3>h3. Centro Paula Souza heading</h3></td>
-        <td class="type-info">Semibold 24px</td>
-      </tr>
-      <tr>
-        <td><h4>h4. Centro Paula Souza heading</h4></td>
-        <td class="type-info">Semibold 18px</td>
-      </tr>
-      <tr>
-        <td><h5>h5. Centro Paula Souza heading</h5></td>
-        <td class="type-info">Semibold 14px</td>
-      </tr>
-      <tr>
-        <td><h6>h6. Centro Paula Souza heading</h6></td>
-        <td class="type-info">Semibold 12px</td>
-      </tr>
-    </tbody>
-  </table>
-</div>
-{% highlight html %}
-<h1>h1. Centro Paula Souza heading</h1>
-<h2>h2. Centro Paula Souza heading</h2>
-<h3>h3. Centro Paula Souza heading</h3>
-<h4>h4. Centro Paula Souza heading</h4>
-<h5>h5. Centro Paula Souza heading</h5>
-<h6>h6. Centro Paula Souza heading</h6>
-{% endhighlight %}
-
-{% endcomment %}
+Foi a partir desse problema, que surgiu a ideia de criar o {{site.title}} como TCC, e com isso, ajudar a unidade a disponibilizar uma documentação rica em detalhes e bastante completa do front-end atual dos projetos web para atuais e futuros membros da equipe web.

about/team.md

@@ -4,21 +4,31 @@ title: Equipe
 group: about
 ---
 
-Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
-tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
-quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
-cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
-proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+O {{site.title}} é mantido pelo criados com ajuda de outros colaboradores.
+{: .lead}
 
-<div class="list-group bd-team">
-  {% for member in site.data.core-team %}
-    <div class="list-group-item">
-      <iframe class="github-btn" src="https://ghbtns.com/github-btn.html?user={{ member.user }}&amp;type=follow"></iframe>
-      <a class="team-member" href="https://github.com/{{ member.user }}">
-        <img src="{{ member.gravatar }}" alt="@{{ member.user }}" width="32" height="32">
-        <strong>{{ member.name }}</strong> <small>@{{ member.user }}</small>
-      </a>
+## Criadores
+
+<div class="list-group">
+{% for member in site.data.core-team %}
+<div class="list-group-item">
+  <div class="avatar avatar-default">
+    <div class="avatar-foto">
+    <a href="https://github.com/{{ member.user }}">
+      <img src="{{ member.gravatar }}" alt="@{{ member.user }}">
+    </a>
+    </div>
+    <div class="avatar-details">
+      <h4 class="avatar-name">{{ member.name }}</h4>
+      <p><a href="https://github.com/{{ member.user }}">@{{ member.user }}</a></p>
     </div>
-  {% endfor %}
+  </div>
+</div>
+{% endfor %}
 </div>
+
+## Colaboradores
+
+O código do {{site.title}} é aberto e esta hospedado no GitHub, então qualquer pessoa pode colaborar com o projeto.
+
+[Veja todos os colaboradores do projeto]({{site.repo_url}}/graphs/contributors){: .btn .btn-default}