Proposta de novo site

_config.yml

@@ -1,6 +1,10 @@
 # Site Settings
-title: Sapucaia Tech | Comunidade de tecnologia de Montes Claros (MG)
-url: "http://sapucaia.tech"
+title: Sapucaia.Tech | Comunidade de tecnologia de Montes Claros (MG)
+url: "https://sapucaia.tech"
+collections:
+  posts:
+    output: true
+    permalink: /:collection/:title
 
 # Social
 telegram: "https://t.me/sapucaiatech"

_includes/eventos.html → _includes/agenda.html

@@ -1,9 +1,9 @@
 <section class="hero is-light" id="eventos">
-  <a name="eventos"></a>
+  <a name="agenda"></a>
 
   <div class="hero-body">
     <div class="container max_1000">
-      <h3 class="title is-bold is-3"><span class="fa fa-calendar-check-o"></span>&nbsp;Eventos</h3>
+      <h3 class="title is-bold is-3"><span class="fa fa-calendar"></span>&nbsp;Agenda</h3>
 
       <hr>
 

_includes/header.html

@@ -1,12 +1,35 @@
-<nav class="navbar is-hidden-mobile" id="top_bar">
-  <div class="container navbar-brand">
-    <a href="#eventos" class="navbar-item">
-      <span class="fa fa-calendar-check-o"></span>&nbsp;eventos
+<nav class="navbar is-black-alpha" id="top_bar">
+  <div class="menu-bar is-flex is-hidden-desktop">
+    <a href="{{ site.url }}" class="menu-title">
+      <img alt="sapucaia.tech" src="/favicon.png" /> sapucaia.tech
+    </a>
+    <button class="button navbar-burger">
+      <span></span>
+      <span></span>
+      <span></span>
+    </button>
+  </div>
+
+  <div class="navbar-brand is-flex-desktop menu-drop">
+    <a href="/" class="navbar-item" title="Home">
+      <span class="fa fa-home"></span>&nbsp;home
+    </a>
+
+    <strong class="navbar-item pipe">|</strong>
+
+    <a href="/blog" class="navbar-item" title="Blog do Sapucaia.Tech">
+      <span class="fa fa-newspaper-o"></span>&nbsp;blog
+    </a>
+
+    <strong class="navbar-item pipe">|</strong>
+
+    <a href="/#agenda" class="navbar-item" title="Agenda de Eventos">
+      <span class="fa fa-calendar"></span>&nbsp;agenda
     </a>
 
-    <strong class="navbar-item">|</strong>
+    <strong class="navbar-item pipe">|</strong>
 
-    <a href="#contatos" class="navbar-item">
+    <a href="#contatos" class="navbar-item" title="Contatos">
       <span class="fa fa-comments-o"></span>&nbsp;contatos
     </a>
   </div>

_includes/index_blog.html

@@ -0,0 +1,41 @@
+<section class="hero is-light" id="feed">
+  <a name="feed"></a>
+
+  <div class="hero-body">
+    <div class="container max_1000">
+      <h3 class="title is-bold is-3"><span class="fa fa-newspaper-o"></span>&nbsp;Blog</h3>
+
+      <hr>
+
+
+      <ul class="post-list columns">
+        {% for post in site.posts limit: 2 %}
+          <li class="column is-half">
+            <span class="post-meta">{{ post.date | date: "%b %-d, %Y" }}</span>
+
+            <h2>
+              <a class="post-link" href="{{ post.url | prepend: site.baseurl }}">{{ post.title }}</a>
+            </h2>
+            <div class="post-excerpt">{{ post.excerpt }}</div>
+            <a href="{{ post.url | prepend: site.baseurl }}" class="button is-dark is-small">
+              Leia mais
+            </a>
+          </li>
+        {% endfor %}
+      </ul>
+
+
+      {% if site.posts.size > 2 %}
+      <div class="has-text-centered">
+        <a href="/blog" title="Blog do Sapucaia.Tech" class="button is-dark">
+          <span class="icon">
+            <i class="fa fa-plus"></i>
+          </span>
+          <span>ver todos os posts</span>
+        </a>
+      </div>
+      {% endif %}
+
+    </div>
+  </div>
+</section>

_includes/proximo_encontro.html

@@ -0,0 +1,15 @@
+<section class="hero is-black is-black-alpha" id="proximo">
+  <a name="proximo"></a>
+
+  <div class="hero-body">
+    <div class="container max_1000">
+      <h3 class="title is-bold is-3"><span class="fa fa-calendar-check-o"></span>&nbsp;Próximo Encontro</h3>
+
+      <!-- <div id="lista-eventos" class="eventos columns is-multiline">
+        <div class="column">
+          <strong>$ > eventos</strong><br>carregando...
+        </div>
+      </div> -->
+    </div>
+  </div>
+</section>

_layouts/default.html

@@ -8,7 +8,6 @@
     <title>{{ site.title }}</title>
     <meta name="theme-color" content="#222222">
     <link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono" rel="stylesheet">
-    <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.2/css/bulma.min.css"> -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.5.0/css/bulma.min.css">
     <link href="https://opensource.keycdn.com/fontawesome/4.7.0/font-awesome.min.css" rel="stylesheet">
     <link rel="stylesheet" href="/css/style.css">
@@ -19,8 +18,7 @@
   <body>
     {% include header.html %}
     {{ content }}
-    {% include eventos.html %}
     {% include contatos.html %}
-    <script src="script.js" charset="utf-8"></script>
+    <script src="/script.js" charset="utf-8"></script>
   </body>
 </html>

_layouts/post.html

@@ -0,0 +1,22 @@
+---
+layout: default
+---
+<section class="hero is-light">
+
+  <div class="hero-body">
+    <div class="container post-container">
+      <article class="post" itemscope itemtype="http://schema.org/BlogPosting">
+
+        <header class="post-header">
+          <h1 class="post-title" itemprop="name headline">{{ page.title }}</h1>
+          <p class="post-meta"><time datetime="{{ page.date | date_to_xmlschema }}" itemprop="datePublished">{{ page.date | date: "%b %-d, %Y" }}</time>{% if page.author %} • <span itemprop="author" itemscope itemtype="http://schema.org/Person"><span itemprop="name">{{ page.author }}</span></span>{% endif %}</p>
+        </header>
+
+        <div class="post-content" itemprop="articleBody">
+          {{ content }}
+        </div>
+
+      </article>
+    </div>
+  </div>
+</section>

_posts/2018-02-01-2018-e-o-Sapucaia-Tech.md

@@ -0,0 +1,16 @@
+---
+layout: post
+title: 2018 e o Sapucaia.Tech
+---
+
+Depois de 7 meses de existência e encontros, começamos 2018 com muitas novidades e muita coisa boa para a comunidade.
+
+Parece que foi ontem o início do grupo no Telegram (com 3 pessoas) e a publicação do site, através do GitHub. Hoje, nosso grupo tem mais de 70 membros, contando com a presença de gente de Pirapora, Janaúba, Bocaiúva e até Belo Horizonte. Temos um relato mais detalhado da criação da comunidade no post "[Bem-vindos ao Sapucaia.Tech](http://gabrielprates.com/2017/08/30/bem-vindos-ao-Sapucaia-Tech.html)".
+
+No ano passado, 2017, tivemos 4 encontros, com o apoio de algumas instituições de ensino da nossa cidade. Até escreveram uma matéria sobre o primeiro, [que pode ser lida aqui](http://www.prominasmoc.com.br/noticia/academicos-da-facomp-criam-comunidade-tecnologica-1). Conseguimos gravar algumas palestras, apesar de pequenas falhas técnicas ~~rsrs~~, e você pode conferir no nosso [canal do YouTube](https://www.youtube.com/channel/UCaKqU9gsKgeaOshOwkvIIXA/videos).
+
+Já tivemos o primeiro encontro do ano e estamos caminhando. Ainda não podemos dizer que atingimos o objetivo, mas não sei se isso seria possível. Assim como a tecnologia não para de evoluir, não podemos parar de inovar e trazer novidades para a comunidade, então nosso desafio nunca terminará.
+
+Esse ano promete muita coisa. Estamos mudando algumas coisas nas estruturas dos encontros, variando o formato de palestras. Vamos tentar fazer algumas mesas redondas e grupos de estudo durante o ano, o que vai ajudar a despertar algumas áreas específicas, dentre outras coisas.
+
+Fique ligado no nosso grupo do Telegram e na nossa página do Facebook, vamos postar tudo lá.

_sass/base.scss

@@ -0,0 +1,50 @@
+body {
+  font-family: 'Ubuntu Mono', monospace;
+  background-size: auto;
+  background-image: url('/assets/black_geometric.jpg');
+  background-repeat: no-repeat;
+  background-position: center;
+  background-attachment: fixed;
+
+  @include media-query ($desktopUp) {
+    padding-top: 52px;
+  }
+}
+
+#top_bar {
+  width: 100%;
+  color: $light;
+  justify-content: center;
+  background-color: $deep_dark;
+
+  @include media-query ($desktopUp) {
+    position: fixed;
+    z-index: 9;
+    top: 0;
+  }
+  @include media-query ($desktopDown) {
+    background-color: $deep_dark !important;
+  }
+}
+
+#home {
+  @include media-query ($desktopUp) {
+    margin-top: -52px;
+  }
+}
+
+.hero.is-black-alpha {
+  background-color: rgba(0,0,0,0.7);
+}
+
+.about {
+  @include media-query ($desktopUp) {
+    padding: 8em 0;
+    .logo {
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+}

_sass/classes.scss

@@ -0,0 +1,11 @@
+.max_1000 {
+  max-width: 1000px;
+}
+
+.font-awesome {
+  font: normal normal normal 14px/1 FontAwesome;
+}
+
+.bold {
+  font-weight: bold;
+}

_sass/contatos.scss

@@ -1,5 +1,5 @@
 .contatos {
-  border-top: 10px solid #111;
+  @include border-top(#111);
 }
 .links {
   display: flex;

_sass/eventos.scss

@@ -1,5 +1,5 @@
 #eventos {
-  border-top: 10px solid #222;
+  @include border-top(#222);
 }
 
 .eventos {

_sass/header.scss

@@ -0,0 +1,49 @@
+.menu-bar {
+  border-bottom: 2px solid $light;
+  .menu-title {
+    color: inherit;
+    display: flex;
+    padding: 0 20px;
+    font-size: 1.3rem;
+    align-self: center;
+    img {
+      margin-right: 8px;
+      filter: invert(100%);
+    }
+  }
+  .navbar-burger {
+    border-top: 0;
+    border-right: 0;
+    border-bottom: 0;
+    border-radius: 0;
+  }
+}
+
+.menu-drop {
+  display: none;
+  flex-direction: column;
+
+  .navbar-item {
+    color: $light;
+    &:hover {
+      color: $dark;
+    }
+
+    @media screen and (max-width: 1007px) {
+      &.pipe { display: none; }
+      width: 100%;
+      text-align: left;
+      border-bottom: 1px solid $light;
+    }
+  }
+
+  @media screen and (max-width: 1007px) {
+    &.ativo {
+      display: flex;
+    }
+  }
+
+  @media screen and (min-width: 1008px) {
+    flex-direction: row;
+  }
+}

_sass/mixins.scss

@@ -0,0 +1,10 @@
+@mixin border-top($color) {
+  border-top: 10px solid $color;
+}
+
+
+@mixin media-query ($device) {
+  @media screen and ( $device ) {
+    @content
+  }
+}