design

gustavoquinalha · Dec 14, 2017 · 6ad380d · 6ad380d
1 parent 4e26238
commit 6ad380d
Show file tree

Hide file tree

Showing 39 changed files with 1,542 additions and 47 deletions.
diff --git a/_config.yml b/_config.yml
@@ -13,7 +13,7 @@ baseurl: "/jekyll-help-center-theme"
 url: "http://quinalha.me/jekyll-help-center-theme"
 twitter_username: "gustavoquinalha"
 github_username:  "gustavoquinalha"
-color_theme:  "#00d46a"
+color_theme:  "#0081ff"
 color_text:  "#fff"
 
 # Build settings

diff --git a/_includes/head.html b/_includes/head.html
@@ -9,29 +9,27 @@
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/the-grid-flexbox@2.0.1/css/the-grid.min.css">
   <link href="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.css" rel="stylesheet">
   <script src="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.js"></script>
+  <script src="{{ site.baseurl }}/assets/js/simple-jekyll-search.min.js"></script>
 
   <link rel="stylesheet" href="{{ "/css/main.css" | prepend: site.baseurl }}">
 
-  <!-- <link rel="canonical" href="{{ site.url }}">
+  <link rel="canonical" href="{{ site.url }}">
   <link rel="base" href="{{ site.url }}"/>
   <meta name="author" content="{{ site.github }}">
   <meta name="robots" content="index/follow"/>
   <meta name="googlebot" content="index/follow"/>
-  <meta name="theme-color" content="{{ site.colortheme }}"/>
-  <meta name="msapplication-navbutton-color" content="{{ site.colortheme }}"/>
-  <meta name="apple-mobile-web-app-status-bar-style" content="{{ site.colortheme }}"/>
   <meta property="og:title" content="{{ site.title }}" />
   <meta property="og:type" content="website" />
   <meta property="og:url" content="{{ site.url }}" />
   <meta property="og:description" content="{{ site.description }}" />
   <meta property="og:site_name" content="{{ site.title }}" />
-  <meta property="og:image" content="{{ site.url }}{{ site.baseurl }}/images{{ page.image }}" />
+  <!-- <meta property="og:image" content="{{ site.url }}{{ site.baseurl }}/images{{ page.image }}" /> -->
   <meta name="twitter:card" content="summary">
   <meta name="twitter:title" content="{{ site.title }}">
   <meta name="twitter:description" content="{{ site.description }}">
-  <meta name="twitter:creator" content="{{site.twitter_username}}">
-  <meta name="twitter:image" content="{{page.image}}">
+  <meta name="twitter:creator" content="{{ site.twitter_username }}">
+  <!-- <meta name="twitter:image" content="{{page.image}}"> -->
   <meta itemprop="name" content="{{ site.title }}">
   <meta itemprop="description" content="{{ site.description }}">
-  <meta itemprop="image" content="{{page.image}}"> -->
+  <!-- <meta itemprop="image" content="{{page.image}}"> -->
 </head>
diff --git a/_includes/header.html b/_includes/header.html
@@ -1,21 +1,27 @@
 <header>
 
-<div class="header container align-items-center justify-content-center">
-  <div class="header--block size margin container column">
-    <div class="header--block--text" data-aos="fade-up" data-aos-delay="" data-aos-offset="0">
-      Advice and answers from the {{ site.title }} Team
-    </div>
+  <div class="header container align-items-center justify-content-center">
+    <div class="header--block size margin container column">
+      <div class="header--block--text" data-aos="fade-up" data-aos-delay="" data-aos-offset="0">
+        Advice and answers from the {{ site.title }} Team
+      </div>
+      <div class="container column position-search">
+
+        <div class="header--block--input" data-aos="fade-up" data-aos-delay="" data-aos-offset="0" id="search-container">
+          <div class="header--block--input--icon">
+            <!-- <img src="{{ site.baseurl }}/assets/img/icons/search-input.svg" width="30" alt=""> -->
+            <span class="feather-icon icon-search"></span>
+          </div>
+          <input class="input-search" type="text" name="" value="" placeholder="Search for answers..." id="search-input">
+        </div>
 
-    <div class="header--block--input" data-aos="fade-up" data-aos-delay="" data-aos-offset="0">
-      <div class="header--block--input--icon">
-        <!-- <img src="{{ site.baseurl }}/assets/img/icons/search-input.svg" width="30" alt=""> -->
-        <span class="feather-icon icon-search"></span>
+        <div class="header--block--result">
+          <ul id="results-container"></ul>
+        </div>
       </div>
-      <input class="input-search" type="text" name="" value="" placeholder="Search for answers...">
-    </div>
 
+    </div>
   </div>
-</div>
 
 
 </header>
diff --git a/_includes/posts.html b/_includes/posts.html
@@ -19,7 +19,7 @@ <h2 class="list-post-title">
         <span class="list-post-description">{{ post.description }}</span>
       </div>
 
-      <div class="list-post-written" data-aos="fade-left" data-aos-delay="800" data-aos-offset="0">
+      <div class="list-post-written" data-aos="fade-up" data-aos-delay="700" data-aos-offset="0">
         <small>Written by <span>{{ post.by }}</span>-</small>
         <small><time>{{ post.date | date_to_string }}</time></small>
       </div>

diff --git a/_layouts/default.html b/_layouts/default.html
@@ -10,6 +10,12 @@
   </div>
   <script>
     AOS.init();
+
+    SimpleJekyllSearch({
+      searchInput: document.getElementById('search-input'),
+      resultsContainer: document.getElementById('results-container'),
+      json: '{{ site.baseurl }}/search.json'
+    })
   </script>
 </body>
 

diff --git a/_posts/2017-11-12-question-1.md b/_posts/2017-11-12-question-1.md
@@ -9,20 +9,20 @@ icon: 'credit-card'
 ---
 
 <div class="margin-top-20 margin-bottom-50">
-  {% for x in site.data.third %}
-  <div class="list-item-2 container wrap align-items-start justify-content-center">
+  {% for x in site.data.first %}
+  <div class="list-item-2 container wrap-reverse align-items-end justify-content-center" data-aos="fade-up" data-aos-delay="0" data-aos-offset="0">
     {% if x.image %}
-    <div class="flex-basis-200 flex-grow-1">
-      <img src="{{ site.baseurl }}/assets/img/{{ x.image }}" width="90%" alt="">
+    <div class="list-item-2-img flex-basis-300 flex-grow-1" data-aos="fade-up" data-aos-delay="300" data-aos-offset="0">
+      <img src="{{ site.baseurl }}/assets/img/{{ x.image }}" width="100%" alt="">
     </div>
     {% endif %}
-    <div class="flex-basis-400 flex-grow-1">
-      <div class="">
+    <div class="flex-basis-400 flex-grow-5">
+      <div class="" data-aos="fade-up" data-aos-delay="300" data-aos-offset="0">
         <h2 class="list-post-title">
         {{x.question}}
         </h2>
       </div>
-      <div class="">
+      <div class="" data-aos="fade-up" data-aos-delay="300" data-aos-offset="0">
         <span class="list-post-description">
           {{x.answer}}
         </span>

diff --git a/_posts/2017-11-12-question-2.md b/_posts/2017-11-12-question-2.md
@@ -10,19 +10,19 @@ icon: 'loader'
 
 <div class="margin-top-20 margin-bottom-50">
   {% for x in site.data.second %}
-  <div class="list-item-2 container wrap align-items-start justify-content-center">
+  <div class="list-item-2 container wrap-reverse align-items-end justify-content-center" data-aos="fade-up" data-aos-delay="0" data-aos-offset="0">
     {% if x.image %}
-    <div class="flex-basis-200 flex-grow-1">
-      <img src="{{ site.baseurl }}/assets/img/{{ x.image }}" width="90%" alt="">
+    <div class="list-item-2-img flex-basis-300 flex-grow-1" data-aos="fade-up" data-aos-delay="300" data-aos-offset="0">
+      <img src="{{ site.baseurl }}/assets/img/{{ x.image }}" width="100%" alt="">
     </div>
     {% endif %}
-    <div class="flex-basis-400 flex-grow-1">
-      <div class="">
+    <div class="flex-basis-400 flex-grow-5">
+      <div class="" data-aos="fade-up" data-aos-delay="600" data-aos-offset="0">
         <h2 class="list-post-title">
         {{x.question}}
         </h2>
       </div>
-      <div class="">
+      <div class="" data-aos="fade-up" data-aos-delay="800" data-aos-offset="0">
         <span class="list-post-description">
           {{x.answer}}
         </span>

diff --git a/_posts/2017-11-12-question-3.md b/_posts/2017-11-12-question-3.md
@@ -9,20 +9,20 @@ icon: 'help-circle'
 ---
 
 <div class="margin-top-20 margin-bottom-50">
-  {% for x in site.data.first %}
-  <div class="list-item-2 container wrap align-items-start justify-content-center">
+  {% for x in site.data.third %}
+  <div class="list-item-2 container wrap-reverse align-items-end justify-content-center" data-aos="fade-up" data-aos-delay="0" data-aos-offset="0">
     {% if x.image %}
-    <div class="flex-basis-200 flex-grow-1">
-      <img src="{{ site.baseurl }}/assets/img/{{ x.image }}" width="90%" alt="">
+    <div class="list-item-2-img flex-basis-300 flex-grow-1" data-aos="fade-up" data-aos-delay="300" data-aos-offset="0">
+      <img src="{{ site.baseurl }}/assets/img/{{ x.image }}" width="100%" alt="">
     </div>
     {% endif %}
-    <div class="flex-basis-400 flex-grow-1">
-      <div class="">
+    <div class="flex-basis-400 flex-grow-5">
+      <div class="" data-aos="fade-up" data-aos-delay="300" data-aos-offset="0">
         <h2 class="list-post-title">
         {{x.question}}
         </h2>
       </div>
-      <div class="">
+      <div class="" data-aos="fade-up" data-aos-delay="300" data-aos-offset="0">
         <span class="list-post-description">
           {{x.answer}}
         </span>

diff --git a/_sass/_header.scss b/_sass/_header.scss
@@ -4,10 +4,9 @@
 
 .header {
   min-height: 200px;
-  background: url('../assets/img/pattern.svg'), rgba($colortheme, .9);
-  background-size: 210px;
+  background: url('../assets/img/pattern2.svg'), rgba($colortheme, .9);
+  background-size: 310px;
   width: 100%;
-  overflow: hidden;
 
   .header--block {
     color: $colortext;
@@ -59,3 +58,35 @@
     }
   }
 }
+
+.position-search {
+  position: relative;
+}
+
+.header--block--result {
+  width: 100%;
+  background: #fff;
+  z-index: 9;
+  position: absolute;
+  top: 80px;
+  left: 0;
+  border-radius: 4px;
+    ul {
+      list-style: none;
+      li {
+        border-bottom: 1px solid #ddd;
+        border-left: 1px solid #ddd;
+        border-right: 1px solid #ddd;
+        padding: 10px;
+        box-sizing: border-box;
+        &:first-child {
+          border-top: 1px solid #ddd;
+        }
+          a {
+            &:hover {
+              color: $colortheme;
+            }
+          }
+      }
+    }
+}
diff --git a/_sass/_post.scss b/_sass/_post.scss
@@ -55,14 +55,23 @@
 .list-item-2 {
   box-shadow: 0 3px 8px 0 rgba(0,0,0,0.03);
   border: 1px solid #C1C1C1;
-  padding: 20px;
+  padding: 40px;
   box-sizing: border-box;
   transition: .3s;
   margin-bottom: 10px;
+  overflow: hidden;
   &:hover {
     border-color: $colortheme;
     .list-post-title {
       color: $colortheme;
     }
   }
+
+  .list-item-2-img {
+    margin-right: 20px;
+      @media screen and (max-width: 839px) {
+        margin-right: 0;
+        margin-top: 20px;
+      }
+   }
 }
diff --git a/assets/img/image_Prancheta 1.png b/assets/img/image_Prancheta 1.png
diff --git a/assets/img/pattern2.svg b/assets/img/pattern2.svg