krad 3.6.0 → 3.7.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 8fce889afe780802d65af5ffc05e50e5419ab4fe
-  data.tar.gz: 8f76eeef1925d3ad2106e784fbbdbbfe34bb2773
+  metadata.gz: 77a4a0ab0d426a97e66eb0149a9842e6788e53a1
+  data.tar.gz: 3cfe6a1ac93ece9fe61da55bfe85e8f6a0b6b0f4
 SHA512:
-  metadata.gz: 21a9a822c94c6ed8195fc28f44d0ca4bf31d32f85ba6dd90a41f56257845e67901d309752d6bec30af8d5543b11c597ac14dff1676d97fa7a81138f84ef638ee
-  data.tar.gz: 63964134002e65d59b281e3a78e06b1904ae7402a8b9cde70256b0097f1b0cde3ad76330be1620d576066aed565505dbb696f5ac56d7a91491b54f12fb63dfc9
+  metadata.gz: 1c571a0b71187aad884dc7cef5c2de8a5dd453c9e2480066aa5157e139ea65dc2c251f2c3a85f0d4c7288538fbb239561a2dd88a34b2855d620867e0f70846dc
+  data.tar.gz: 8039b03b30542a6fe434d1b10d77f32fd39ccc900523181ec09f8c860fe908a232a707508eb8ba31540ac07b3b9c61867fe6d8ebb5e633d9d864aa13a62a3605

data/_includes/head.html

@@ -19,14 +19,25 @@
   {% if page.title == "Home" %}{{ site.title }} · {{ site.tagline }}{% else %}{{ page.title }} · {{ site.title }}{% endif %}
   </title>
   <!-- Outworld Decorator -->
-  <!--<link rel="stylesheet" type="text/css" href="{{ "/assets/styles/krad.css" | relative_url }}">-->
   <style>
   {% capture styles %}{% include krad.scss %}{% endcapture %}
   {{ styles | scssify }}
   </style>
-  {% include stylesheets.html async="true" %}
+  {% include stylesheets.html 
+    async=true
+    components=true
+    content-fonts=true
+    font-awesome=true
+    grid=true
+  %}
   <noscript>
-    {% include stylesheets.html async="false" %}
+    {% include stylesheets.html 
+      async=false
+      components=true
+      content-fonts=true
+      font-awesome=true
+      grid=true
+    %}
   </noscript>
   <link rel="shortcut icon" href="{{ "/assets/favicon.ico" | relative_url }}">
   <link rel="canonical" href="{{ page.url | replace:'index.html','' | absolute_url }}">

data/_includes/krad.scss

@@ -2,7 +2,7 @@
  *
  *  Author: Krad;
  *  Url: "http://www.tunglt.com";
- *  Version: 3.1.0;
+ *  Version: 3.2.0;
 	 ____  __.__________    _____  ________                            
 	|    |/ _|\______   \  /  _  \ \______ \       ____   ______ ______
 	|      <   |       _/ /  /_\  \ |    |  \    _/ ___\ /  ___//  ___/
@@ -36,6 +36,7 @@
 ================================ */
 @import "base/main";
 @import "components/images";
+@import "components/animate";
 
 /* Layouts
 ================================ */
@@ -43,5 +44,4 @@
 @import "layouts/home";
 @import "layouts/post";
 @import "layouts/page";
-@import "layouts/footer";
-@import "layouts/portfolio";
+@import "layouts/footer";

data/_includes/scripts.html

@@ -1,6 +1,7 @@
 <!-- Scripterino! -->
-<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
-<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js" async></script>
-<script src="{{ "/assets/scripts/responsive-menu.js" | relative_url }}" async></script>
-<script src="{{ "/assets/scripts/backtop.js" | relative_url }}" async></script>
-<script src="{{ "/assets/scripts/img-cs.js" | relative_url }}" async></script>
+{% if include.jquery == true %}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>{% endif %}
+{% if include.jquery-ui == true %}<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js" async></script>{% endif %}
+{% if include.responsive-menu == true %}<script src="{{ "/assets/scripts/responsive-menu.js" | relative_url }}" async></script>{% endif %}
+{% if include.backtop == true %}<script src="{{ "/assets/scripts/backtop.js" | relative_url }}" async></script>{% endif %}
+{% if include.img-cs == true %}<script src="{{ "/assets/scripts/img-cs.js" | relative_url }}" async></script>{% endif %}
+{% if include.search == true %}<script src="{{ "/assets/scripts/search.js" | relative_url }}" async></script>{% endif %}

data/_includes/stylesheets.html

@@ -1,21 +1,21 @@
-{% if include.async=="true" %}
-  <link rel="stylesheet" type="text/css" href="{{ "/assets/styles/components.css" | relative_url }}" media="none" onload="if(media!='all')media='all'">
-  <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,900,700,700italic|Lora:400,400i,700,700i&amp;subset=vietnamese' rel='stylesheet' type='text/css' media="none" onload="if(media!='all')media='all'">
-  <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" media="none" onload="if(media!='all')media='all'">
-  <!--[if lte IE 8]>
+{% if include.async==true %}
+  {% if include.components==true %}<link rel="stylesheet" type="text/css" href="{{ "/assets/styles/components.css" | relative_url }}" media="none" onload="if(media!='all')media='all'">{% endif %}
+  {% if include.content-fonts==true %}<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,800,700,700italic|Lora:400,400i,700,700i&amp;subset=vietnamese' rel='stylesheet' type='text/css' media="none" onload="if(media!='all')media='all'">{% endif %}
+  {% if include.font-awesome==true %}<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" media="none" onload="if(media!='all')media='all'">{% endif %}
+  {% if include.grid==true %}<!--[if lte IE 8]>
     <link rel="stylesheet" href="{{ "/assets/lib/pure/grids-responsive-old-ie-min.css" | relative_url }}">
   <![endif]-->
   <!--[if gt IE 8]><!-->
     <link rel="stylesheet" href="{{ "/assets/lib/pure/grids-responsive-min.css" | relative_url }}" media="none" onload="if(media!='all')media='all'">
-  <!--<![endif]-->
+  <!--<![endif]-->{% endif %}
 {% else %}
-  <link rel="stylesheet" type="text/css" href="{{ "/assets/styles/components.css" | relative_url }}">
-  <link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,900,700,700italic|Lora:400,400i,700,700i&amp;subset=vietnamese' rel='stylesheet' type='text/css'>
-  <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
-  <!--[if lte IE 8]>
+  {% if include.components==true %}<link rel="stylesheet" type="text/css" href="{{ "/assets/styles/components.css" | relative_url }}">{% endif %}
+  {% if include.content-fonts==true %}<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,800,700,700italic|Lora:400,400i,700,700i&amp;subset=vietnamese' rel='stylesheet' type='text/css'>{% endif %}
+  {% if include.font-awesome==true %}<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">{% endif %}
+  {% if include.grid==true %}<!--[if lte IE 8]>
     <link rel="stylesheet" href="{{ "/assets/lib/pure/grids-responsive-old-ie-min.css" | relative_url }}">
   <![endif]-->
   <!--[if gt IE 8]><!-->
     <link rel="stylesheet" href="{{ "/assets/lib/pure/grids-responsive-min.css" | relative_url }}">
-  <!--<![endif]-->
+  <!--<![endif]-->{% endif %}
 {% endif %}

data/_layouts/default.html

@@ -18,6 +18,12 @@
     </div>
     <!-- Back to Top -->
     {% include back-top.html %}
-    {% include scripts.html %}
+    {% include scripts.html 
+      jquery=true
+      jquery-ui=true
+      responsive-menu=true
+      backtop=true
+      img-cs=true
+    %}
   </body>
 </html>

data/_layouts/home.html

@@ -11,11 +11,17 @@
 
       <main class="main-wrapper">
         <div class="page wrapper">
-        <h1 class="home-title">
-          <center><img src="{{ "/assets/images/avatar.png" | relative_url }}" alt="Logo" /></center>
-        </h1>
+        <h2 id="home-title">
+          <div class="sign-frame"><img class="pixelated" src="{{ "/assets/images/avatar.png" | relative_url }}" alt="Logo" /></div>
+        </h2>
+        <!-- Vcard -->
+        <div id="vcard">
+          <p class="vc-greeting">Hi, I am</p>
+          <h1 class="vc-name">{{ page.person.name.first }} <span class="alias">{{ page.person.name.alias }}</span> {{ page.person.name.last }}</h1>
+          <p class="vc-description">{{ page.person.description }}</p>
+        </div>
         <!-- Search box -->
-        <div class="pure-form" id="search-container">
+        <div id="search-container" class="pure-form ninja">
           <input type="text" class="pure-input-1 pure-input-rounded" id="search-input" placeholder="What are you looking for?...">
           <ul id="results-container"></ul>
         </div>
@@ -27,8 +33,12 @@
     </div>
     <!-- Back to Top -->
     {% include back-top.html %}
-    {% include scripts.html %}
-    <script src="{{ "/assets/scripts/search.js" | relative_url }}" async></script>
+    {% include scripts.html 
+      jquery=true
+      responsive-menu=true
+      backtop=true
+      search=true
+    %}
 
   </body>
 </html>

data/_sass/base/_main.scss

@@ -71,7 +71,7 @@ a {
 .text-center { 
     text-align: center; 
 }
-.sr-only {
+.sr-only, .ninja {
     display: none;
 }
 
@@ -80,6 +80,17 @@ a {
     margin: 0 auto;
 }
 
+.pixelated {
+    image-rendering:optimizeSpeed;             /* Legal fallback */
+    image-rendering:-moz-crisp-edges;          /* Firefox        */
+    image-rendering:-o-crisp-edges;            /* Opera          */
+    image-rendering:-webkit-optimize-contrast; /* Safari         */
+    image-rendering:optimize-contrast;         /* CSS3 Proposed  */
+    image-rendering:crisp-edges;               /* CSS4 Proposed  */
+    image-rendering:pixelated;                 /* CSS4 Proposed  */
+    -ms-interpolation-mode:nearest-neighbor;   /* IE8+           */    
+}
+
 /* Miscellanous */
 .tweets iframe {
     width: 100% !important;

data/_sass/components/_animate.scss

@@ -0,0 +1,224 @@
+@charset "UTF-8";
+
+/*!
+ * animate.css -http://daneden.me/animate
+ * Version - 3.6.0
+ * Licensed under the MIT license - http://opensource.org/licenses/MIT
+ *
+ * Copyright (c) 2018 Daniel Eden
+ */
+
+.animated {
+  -webkit-animation-duration: 1s;
+  animation-duration: 1s;
+  -webkit-animation-fill-mode: both;
+  animation-fill-mode: both;
+}
+
+.animated.infinite {
+  -webkit-animation-iteration-count: infinite;
+  animation-iteration-count: infinite;
+}
+
+@-webkit-keyframes bounceIn {
+  from,
+  20%,
+  40%,
+  60%,
+  80%,
+  to {
+    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+  }
+
+  0% {
+    opacity: 0;
+    -webkit-transform: scale3d(0.3, 0.3, 0.3);
+    transform: scale3d(0.3, 0.3, 0.3);
+  }
+
+  20% {
+    -webkit-transform: scale3d(1.1, 1.1, 1.1);
+    transform: scale3d(1.1, 1.1, 1.1);
+  }
+
+  40% {
+    -webkit-transform: scale3d(0.9, 0.9, 0.9);
+    transform: scale3d(0.9, 0.9, 0.9);
+  }
+
+  60% {
+    opacity: 1;
+    -webkit-transform: scale3d(1.03, 1.03, 1.03);
+    transform: scale3d(1.03, 1.03, 1.03);
+  }
+
+  80% {
+    -webkit-transform: scale3d(0.97, 0.97, 0.97);
+    transform: scale3d(0.97, 0.97, 0.97);
+  }
+
+  to {
+    opacity: 1;
+    -webkit-transform: scale3d(1, 1, 1);
+    transform: scale3d(1, 1, 1);
+  }
+}
+
+@keyframes bounceIn {
+  from,
+  20%,
+  40%,
+  60%,
+  80%,
+  to {
+    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+  }
+
+  0% {
+    opacity: 0;
+    -webkit-transform: scale3d(0.3, 0.3, 0.3);
+    transform: scale3d(0.3, 0.3, 0.3);
+  }
+
+  20% {
+    -webkit-transform: scale3d(1.1, 1.1, 1.1);
+    transform: scale3d(1.1, 1.1, 1.1);
+  }
+
+  40% {
+    -webkit-transform: scale3d(0.9, 0.9, 0.9);
+    transform: scale3d(0.9, 0.9, 0.9);
+  }
+
+  60% {
+    opacity: 1;
+    -webkit-transform: scale3d(1.03, 1.03, 1.03);
+    transform: scale3d(1.03, 1.03, 1.03);
+  }
+
+  80% {
+    -webkit-transform: scale3d(0.97, 0.97, 0.97);
+    transform: scale3d(0.97, 0.97, 0.97);
+  }
+
+  to {
+    opacity: 1;
+    -webkit-transform: scale3d(1, 1, 1);
+    transform: scale3d(1, 1, 1);
+  }
+}
+
+.bounceIn {
+  -webkit-animation-duration: 0.75s;
+  animation-duration: 0.75s;
+  -webkit-animation-name: bounceIn;
+  animation-name: bounceIn;
+}
+
+@-webkit-keyframes fadeInUp {
+  from {
+    opacity: 0;
+    -webkit-transform: translate3d(0, 100%, 0);
+    transform: translate3d(0, 100%, 0);
+  }
+
+  to {
+    opacity: 1;
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    -webkit-transform: translate3d(0, 100%, 0);
+    transform: translate3d(0, 100%, 0);
+  }
+
+  to {
+    opacity: 1;
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+.fadeInUp {
+  -webkit-animation-name: fadeInUp;
+  animation-name: fadeInUp;
+}
+
+@-webkit-keyframes flipInX {
+  from {
+    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
+    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
+    -webkit-animation-timing-function: ease-in;
+    animation-timing-function: ease-in;
+    opacity: 0;
+  }
+
+  40% {
+    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
+    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
+    -webkit-animation-timing-function: ease-in;
+    animation-timing-function: ease-in;
+  }
+
+  60% {
+    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
+    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
+    opacity: 1;
+  }
+
+  80% {
+    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
+    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
+  }
+
+  to {
+    -webkit-transform: perspective(400px);
+    transform: perspective(400px);
+  }
+}
+
+@keyframes flipInX {
+  from {
+    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
+    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
+    -webkit-animation-timing-function: ease-in;
+    animation-timing-function: ease-in;
+    opacity: 0;
+  }
+
+  40% {
+    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
+    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
+    -webkit-animation-timing-function: ease-in;
+    animation-timing-function: ease-in;
+  }
+
+  60% {
+    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
+    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
+    opacity: 1;
+  }
+
+  80% {
+    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
+    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
+  }
+
+  to {
+    -webkit-transform: perspective(400px);
+    transform: perspective(400px);
+  }
+}
+
+.flipInX {
+  -webkit-backface-visibility: visible !important;
+  backface-visibility: visible !important;
+  -webkit-animation-name: flipInX;
+  animation-name: flipInX;
+}

data/_sass/layouts/_home.scss

@@ -7,15 +7,70 @@
     background: url(/public/img/mongo.png) center center no-repeat transparent;
 }
 
-.home-title {
-    height: 6em;
-    
-    img {
+#home-title {
+    margin-top: 2rem;
+    .sign-frame {
+        border: 3px solid rgba(234, 234, 234, 0.5);
         border-radius: 50%;
-        margin-top: 1.2em;
+        width: 128px;
+        height: 128px;
+        margin: auto;
+        padding: 3px;
+        cursor: pointer;
+        @include transition (all 0.5s ease);
+        
+        &:hover {
+            border-color: rgba(234, 234, 234, 1);
+        }
+        
+        &.checked {
+            border-color: $color-main;
+        }
+        
+        img {
+            border-radius: 50%;
+            max-width: 100%;
+        }
     }
 }
 
+#vcard {
+    text-align: center;
+    cursor: default;
+}
+.vc-greeting {
+    font-family: $font-family-serif;
+    font-style: italic;
+    font-size: 2rem;
+    color: $color-gray-lighter;
+    margin: 0;
+}
+.vc-name {
+    font-family: $font-family-sans-serif;
+    font-weight: $font-extra-bold;
+    font-size: 3rem;
+    text-transform: uppercase;
+    margin: 0;
+    
+    .alias {
+        color: $color-gray-lighter;
+        @include transition (all 0.5s ease);
+        
+        &:hover {
+            color: $color-main;
+        }
+    }
+}
+.vc-description {
+    font-family: $font-family-serif;
+    font-size: 1rem;
+    color: $color-gray-lighter;
+    margin: 1em;
+}
+
+#search-container {
+    margin-top: 3.6rem;
+}
 #results-container {
     padding: 1em 0.5em 0;
     list-style: none;

data/assets/scripts/search.js

@@ -411,4 +411,19 @@ SimpleJekyllSearch({
   resultsContainer: document.getElementById('results-container'),
   json: '/data/search.json',
   noResultsText: '❌ Never heard of it!'
+})
+
+// Switch home function
+$('#home-title .sign-frame').click(function() {
+  if ($('.sign-frame').hasClass('checked')) {
+    $('.sign-frame').removeClass('checked');
+    $('#search-container').addClass('ninja');
+    $('#vcard').removeClass('ninja');
+    $('#vcard').addClass('animated flipInX');
+  } else {
+    $('.sign-frame').addClass('checked');
+    $('#vcard').addClass('ninja');
+    $('#search-container').removeClass('ninja');
+    $('#search-container').addClass('animated flipInX');
+  }
 })

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: krad
 version: !ruby/object:Gem::Version
-  version: 3.6.0
+  version: 3.7.0
 platform: ruby
 authors:
 - Lê Thanh Tùng
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2018-05-02 00:00:00.000000000 Z
+date: 2018-05-14 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -84,6 +84,7 @@ files:
 - _sass/bootstrap/scss/_responsive-embed.scss
 - _sass/bootstrap/scss/_variables.scss
 - _sass/bootstrap/scss/mixins/_alert.scss
+- _sass/components/_animate.scss
 - _sass/components/_blockquotes.scss
 - _sass/components/_images.scss
 - _sass/components/_img-comparison.scss