jekyll-waterfall 0.6.0 → 0.10.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 564913bd5ad55325eab72f7554905a54840bc90a10ada80d714c55b680b5bde8
-  data.tar.gz: 6569884ecbfb60abb1f4dc338b433640bb2520db1f8237427b5167e82769f476
+  metadata.gz: ec2407ad069902824d715ed6fe9ec6b65fc94ba5912e818795454f748798a842
+  data.tar.gz: 1216fd4ec49114962b328db8c62c14726a4ea695d1ee082efb17fbb6e8bf9330
 SHA512:
-  metadata.gz: 5f3d71d31196911d2fd6818b432a47700a5eb49d71c3ef1d585b3a5239d3c60060585fc2ce68fa683a050581084e242c2fb3a110ff72f9b520ee8841e0655451
-  data.tar.gz: 373dd987a445c1d9efddc164fc9e3de6a4080596fca69a7d8e1f43ee47ff5dadef9f60bbf81722526dc7c2e2bbec0b66c7133e3dbf063c574ceb42700648e149
+  metadata.gz: b55b2fdafc45af55f23380e45fa6ff454735a718bc21e1f036cc05e2bc7af076f663388937606a625abd9c91a5e7d4f025fe4fe49d446d0cb0a0812dddbd7d92
+  data.tar.gz: c46d3c52f71e37e148c5419ac84dfd1aa556b9f8434c1ce55d576587b5edc01e21fcfd7f8c51a6d3fd0534088fa368647b57ae8ab9d9d71905b6936b18d7644d

data/_config.yml

@@ -1,23 +1,50 @@
 title: Waterfall Theme
 
+lang: &LANG "pt"
+
 exclude: ['front']
 
 collections:
   experiences:
     output: false
   projects:
-    output: false
+    output: true
+
+defaults:
+  - scope:
+      path: ""
+      type: "posts"
+    values:
+      layout: "post"
+  - scope:
+      path: ""
+      type: "projects"
+    values:
+      layout: "project"
+  - scope:
+      path: ""
+    values:
+      lang: *LANG
+      layout: "default"
 
 # Uncomment the section below to add items on your top navigation
 # header_items:
-#   -
-#     title: Projects
-#     href: "/projects"
-#   - contact.md
-#   -
-#     title: Resume
-#     href: https://drive.google.com
-#     featured: true
+#   *LANG:
+#     -
+#       title: Item 1
+#       href: "/item-1"
+#     -
+#       title: Resume
+#       href: https://drive.google.com
+#       featured: true
+#   en:
+#     -
+#       title: Projects
+#       href: "/projects"
+#     -
+#       title: Resume
+#       href: https://drive.google.com
+#       featured: true
 
 waterfall:
   author:
@@ -27,4 +54,13 @@ waterfall:
   social_links:
     github: jekyll    
     linkedin: jekyll
-    email: jekyll@jekyll.io
+    email: jekyll@jekyll.io
+
+  home:
+    last_posts_items: 4
+
+analytics:
+  tracking_id: "UX-12345678"
+
+disqus:
+  shortname: jekyll

data/_includes/analytics.html

@@ -0,0 +1,11 @@
+<!-- Global site tag (gtag.js) - Google Analytics -->
+{%- if jekyll.environment == 'production' and site.analytics.tracking_id -%}
+  <script async src="https://www.googletagmanager.com/gtag/js?id={{ site.analytics.tracking_id }}"></script>
+  <script>
+    window.dataLayer = window.dataLayer || [];
+    function gtag(){dataLayer.push(arguments);}
+    gtag('js', new Date());
+
+    gtag('config', '{{ site.analytics.tracking_id }}');
+  </script>
+{%- endif -%}

data/_includes/disqus_comments.html

@@ -0,0 +1,20 @@
+{%- if page.comments != false and jekyll.environment == "production" -%}
+
+  <div id="disqus_thread"></div>
+  <script>
+    var disqus_config = function () {
+      this.page.url = '{{ page.url | absolute_url }}';
+      this.page.identifier = '{{ page.url | absolute_url }}';
+    };
+
+    (function() {
+      var d = document, s = d.createElement('script');
+
+      s.src = 'https://{{ site.disqus.shortname }}.disqus.com/embed.js';
+
+      s.setAttribute('data-timestamp', +new Date());
+      (d.head || d.body).appendChild(s);
+    })();
+  </script>
+  <noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript" rel="nofollow">comments powered by Disqus.</a></noscript>
+{%- endif -%}

data/_includes/experience.html

@@ -1,10 +1,16 @@
+{%- assign experiences = site.experiences -%}
+
+{%- if page.lang != null -%}
+   {%- assign experiences = site.experiences | where: "lang", page.lang -%}
+{%- endif -%}
+
 <div id="experience" class="min-h-screen pt-32">
    <h2 class="text-primary-700 mb-10 text-3xl">Where I've Worked</h2>
 
    <div class="flex flex-wrap">
       <div class="w-1/4">
          <div class="nav flex flex-col nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
-            {% for experience in site.experiences %}
+            {% for experience in experiences %}
             <a class="px-4 py-2 text-gray-400 nav-link" data-toggle="pill" href="#v-pills-{{ experience.slug }}"
                aria-controls="v-pills-settings" aria-selected="false">{{ experience.company.name }}</a>
             {% endfor %}

data/_includes/header.html

@@ -1,5 +1,5 @@
-<header class="z-10">
-   <div class="py-5 border-b border-gray-200 fixed w-full bg-gray-50 z-10">
+<header class="z-10 fixed w-full bg-gray-50 transition-all duration-500" data-collapse="scroll" data-collapse-trigger-height="100">
+   <div class="py-5 border-b border-gray-200 dark:border-gray-800   dark:bg-gray-900 z-10">
       <div class="container mx-auto">
          <div class="flex items-center">
    
@@ -20,13 +20,13 @@
       </div>
    </div>
 
-   <aside class="fixed h-full top-0 w-64 -right-64 bg-gray-50 z-20 flex items-center justify-center transition-all">
-      <ul class="flex flex-col items-center justify-center">
-         {%- include nav.html -%}
-      </ul>
-   </aside>
-
    <a href="#top-nav" class="w-1/4 md:hidden text-3xl text-primary-700 z-20 text-right fixed top-8 right-8" nav-toggler>
       {%- include svg/bars.svg -%}
    </a>
-</header>
+</header>
+
+<aside class="fixed h-full top-0 w-64 -right-64 bg-gray-50 z-20 flex items-center justify-center transition-all">
+   <ul class="flex flex-col items-center justify-center">
+      {%- include nav.html -%}
+   </ul>
+</aside>

data/_includes/last_posts.html

@@ -1,11 +1,27 @@
+{%- assign posts = site.posts -%}
+
+{%- if page.lang != null -%}
+   {%- assign posts = site.posts | where: "lang", page.lang -%}
+{%- endif -%}
+
+{%- assign limit = null -%}
+
+{%- if site.waterfall.home.last_posts_items -%}
+   {%- assign limit = site.waterfall.home.last_posts_items -%}
+{%- endif -%}
+
+
+{%- if page.last_posts_items -%}
+   {%- assign limit = page.last_posts_items -%}
+{%- endif -%}
+
 <div id="last-posts" class="min-h-screen pt-32">
    <h2 class="text-primary-700 mb-10 text-3xl">Last Posts</h2>
-
    <div class="row">
-      {% for post in site.posts %}
+      {% for post in posts limit: limit %}
          <div class="col w-full sm:w-1/2 md:w-1/3">
-            <a href="{{ post.url }}" class="card p-5 bg-gray-50 hover:shadow-lg rounded-md relative transition-all border-t-4 border-primary-600 block mb-3">
-               <h2 class="text-gray-800 text-xl mb-3">{{ post.title }}</h2>
+            <a href="{{ post.url }}" class="card p-5 bg-gray-50 dark:bg-gray-800 hover:shadow-lg rounded-md relative transition-all border-t-4 border-primary-600 block mb-3">
+               <h2 class="text-gray-800 dark:text-gray-100 text-xl mb-3">{{ post.title }}</h2>
                <p class="text-gray-500">{{ post.excerpt }}</p>
 
                <div class="absolute bottom-0 py-5">
@@ -17,4 +33,10 @@
          </div>
       {% endfor %}
    </div>
+
+   {%- if page.posts -%}
+      <div class="flex justify-center my-5">
+         <a href="{{ page.posts.url }}" class="btn border-primary-700 border rounded-md text-center text-primary-700 hover:bg-primary-700 hover:text-white transition-all">{{ page.posts.see_more_label }}</a>
+      </div>
+   {%- endif -%}
 </div>

data/_includes/nav.html

@@ -1,14 +1,30 @@
-{%- assign header_items = page.header_items | default: site.header_items -%}
+{%- assign header_items = site.header_items[page.lang] | default: site.header_items[site.lang ] -%}
+
+{%- if page.header_items -%}
+   {%- assign header_items = page.header_items -%}
+{%- endif -%}
 
 {%- for item in header_items -%}
    {%- assign cssClass = '' -%}
+   {%- assign target = '' -%}
+   {%- assign anchorTransition = '' -%}
+
    {%- if item.title -%}
       {%- assign title = item.title | escape -%}
       {%- assign href = item.href | escape -%}
+      {%- assign target = item.target -%}
+
+      {%- assign aux = href | split: "#" -%}
+
+      {%- if aux.size == 2 -%}
+         {%- assign anchorTransition = "data-anchor-transition" -%}
+      {%- else -%}
+         {%- assign anchorTransition = "" -%}
+      {%- endif -%}
       
       {%- if item.featured -%}
          {%- assign cssClass = 'btn btn-primary inline-block' -%}
-      {%- endif -%}   
+      {%- endif -%}
    {%- else -%}
       {%- assign page = site.pages | where: "path", item | first -%}
       {%- assign title = page.title | escape -%}
@@ -16,7 +32,7 @@
    {%- endif -%}
 
    <li class="pl-5">
-      <a class="nav-link {{ cssClass }}" href="{{ href }}">
+      <a class="nav-link block {{ cssClass }}" href="{{ href }}" target="{{ target }}" {{anchorTransition}}>
          <span class="text-gray-500">{{ title }}</span>
       </a>
    </li>   

data/_includes/projects.html

@@ -1,21 +1,38 @@
+{%- assign projects = site.projects -%}
+
+{%- if page.lang != null -%}
+   {%- assign projects = site.projects | where: "lang", page.lang -%}
+{%- endif -%}
+
 <div id="projects" class="min-h-screen pt-32">
    <h2 class="text-primary-700 mb-10 text-3xl">Some Things I've Built</h2>
 
+
    <div class="row">
-      {% for project in site.projects %}
-      <div class="col w-full sm:w-1/2 md:w-1/3">
-         <a href="{{ project.permalink }}"
-            class="card p-5 bg-gray-50 hover:shadow-lg rounded-md relative transition-all border-t-4 border-primary-600 block mb-3">
-            <h2 class="text-gray-800 text-xl mb-3">{{ project.title }}</h2>
-            <p class="text-gray-500">{{ project.excerpt }}</p>
+      {% for project in projects | where: "featured", true %}
+         <div class="col w-full sm:w-1/2">
+            <a href="{{ project.url }}" class="card featured">
+               <div class="py-5 pt-2">
+                  {% for category in project.categories %}
+                     <span class="text-gray-300 text-sm pr-5 py-1">{{ category }}</span>
+                  {% endfor %}
+               </div>
 
-            <div class="absolute bottom-0 py-5">
-               {% for category in project.categories %}
-                  <span class="text-gray-400 text-sm pr-5 py-1">{{ category }}</span>
-               {% endfor %}
-            </div>
-         </a>
-      </div>
+               <h2 class="text-gray-800 text-2xl mb-3">{{ project.title }}</h2>
+
+               <div class="absolute bottom-0">
+                  <div class="h-36 overflow-hidden w-4/5 mx-auto">
+                     <img src="{{ project.thumbnail }}" alt="{{ project.title }}">
+                  </div>
+               </div>
+            </a>
+         </div>
       {% endfor %}
    </div>
+
+   {%- if page.projects -%}
+      <div class="flex justify-center my-5">
+         <a href="{{ page.projects.url }}" class="btn border-primary-700 border rounded-md text-center text-primary-700 hover:bg-primary-700 hover:text-white transition-all">{{ page.projects.see_more_label }}</a>
+      </div>
+   {%- endif -%}
 </div>

data/_includes/social.html

@@ -2,7 +2,7 @@
 <div class="social-media fixed bottom-0 h-screen-1/2 hidden md:block sm:left-3 md:left-4 lg:left-9">
    <div class="relative h-full">
       
-      <div class="bg-gray-100">
+      <div class="bg-gray-100 dark:bg-gray-900">
          {%- if social.email -%}
             <a href="mailto:{{ social.email | cgi_escape | escape }}" class="text-primary-700 text-lg block p-3">
                {%- include svg/envelope.svg -%}
@@ -16,7 +16,7 @@
          {%- endif -%}
 
          {%- if social.linkedin -%}
-            <a href="https://www.linkedin.com/in/{{ social.linkedin | cgi_escape | escape }}" class="text-primary-700 text-lg block p-3">
+            <a href="https://www.linkedin.com/in/{{ social.linkedin | cgi_escape | escape }}" target="_blank" class="text-primary-700 text-lg block p-3">
                {%- include svg/linkedin.svg -%}
             </a>
          {%- endif -%}

data/_includes/svg/moon.svg

@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="moon" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="svg-inline--fa fa-moon fa-w-16"><path fill="currentColor" d="M283.211 512c78.962 0 151.079-35.925 198.857-94.792 7.068-8.708-.639-21.43-11.562-19.35-124.203 23.654-238.262-71.576-238.262-196.954 0-72.222 38.662-138.635 101.498-174.394 9.686-5.512 7.25-20.197-3.756-22.23A258.156 258.156 0 0 0 283.211 0c-141.309 0-256 114.511-256 256 0 141.309 114.511 256 256 256z" class=""></path></svg>

data/_includes/svg/sun.svg

@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="sun" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="svg-inline--fa fa-sun fa-w-16"><path fill="currentColor" d="M256 160c-52.9 0-96 43.1-96 96s43.1 96 96 96 96-43.1 96-96-43.1-96-96-96zm246.4 80.5l-94.7-47.3 33.5-100.4c4.5-13.6-8.4-26.5-21.9-21.9l-100.4 33.5-47.4-94.8c-6.4-12.8-24.6-12.8-31 0l-47.3 94.7L92.7 70.8c-13.6-4.5-26.5 8.4-21.9 21.9l33.5 100.4-94.7 47.4c-12.8 6.4-12.8 24.6 0 31l94.7 47.3-33.5 100.5c-4.5 13.6 8.4 26.5 21.9 21.9l100.4-33.5 47.3 94.7c6.4 12.8 24.6 12.8 31 0l47.3-94.7 100.4 33.5c13.6 4.5 26.5-8.4 21.9-21.9l-33.5-100.4 94.7-47.3c13-6.5 13-24.7.2-31.1zm-155.9 106c-49.9 49.9-131.1 49.9-181 0-49.9-49.9-49.9-131.1 0-181 49.9-49.9 131.1-49.9 181 0 49.9 49.9 49.9 131.1 0 181z" class=""></path></svg>

data/_includes/toolbox.html

@@ -0,0 +1,17 @@
+<div class="toolbox fixed bottom-0 h-screen-1/2 hidden md:block sm:right-3 md:right-4 lg:right-9">
+   <div class="relative h-full">
+      <div class="bg-gray-100 dark:bg-gray-900">
+         <a class="cursor-pointer text-primary-700" data-night-mode-toggler alt="Toggle night mode">
+            <div class="day hidden dark:inline">
+               {%- include svg/sun.svg -%}
+            </div>
+
+            <div class="night dark:hidden">
+               {%- include svg/moon.svg -%}
+            </div>
+         </a>
+      </div>
+
+      <div class="vertical-line h-full absolute top-0 bottom-0 bg-primary-700 -z-10" style="width: 2px; left: calc(50% - 1px);"></div>
+   </div>
+</div>

data/_layouts/collection.html

@@ -0,0 +1,22 @@
+---
+   layout: default
+---
+
+{% assign collection = page.collection %}
+
+{%- if page.lang -%}
+   {% assign items = site[collection] | where: "lang", page.lang %}
+{%- else -%}
+   {% assign items = site[collection] %}
+{%- endif -%}
+
+<div class="row">
+   {% for item in items %}
+      <div class="col w-full sm:w-1/2 md:w-1/3 entries-{{ collection }}">
+         <a href="{{ item.url }}" class="card p-5 bg-gray-50 dark:bg-gray-800 hover:shadow-lg rounded-md relative transition-all border-t-4 border-primary-600 block mb-3">
+            <h2 class="text-gray-800 dark:text-gray-100 text-xl mb-3">{{ item.title }}</h2>
+            <p class="text-gray-500">{{ item.excerpt }}</p>
+         </a>
+      </div>
+   {% endfor %}
+</div>

data/_layouts/default.html

@@ -8,10 +8,10 @@
 
    <link rel="stylesheet" href="/assets/styles.css">
    <link rel="preconnect" href="https://fonts.gstatic.com">
-   <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap" rel="stylesheet">
+   <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;500;600&display=swap" rel="stylesheet">
 </head>
 
-<body class="bg-gray-100">
+<body class="bg-gray-100 dark:bg-gray-900">
    {%- include header.html -%}
 
    <main class="container mx-auto pt-32">
@@ -20,8 +20,11 @@
 
    {%- include social.html -%}
 
+   {%- include toolbox.html -%}
+
    <div class="overlay hidden bg-gray-900 opacity-60 absolute top-0 bottom-0 w-full z-0 transition-all"></div>
 
+   {% include analytics.html %}
    <script async src="/assets/scripts.bundle.js"></script>
 </body>
 

data/_layouts/post.html

@@ -0,0 +1,12 @@
+---
+   layout: default
+---
+<article class="post">
+   <h1>{{ page.title }}</h1>
+
+   {{ content }}
+
+   {%- if site.disqus.shortname -%}
+      {%- include disqus_comments.html -%}
+   {%- endif -%}
+</article>

data/_layouts/project.html

@@ -0,0 +1,12 @@
+---
+   layout: default
+---
+
+<article class="post">
+   <h1 class="text-3xl text-primary-700 dark:text-gray-100 mb-10">{{ page.title }}</h1>
+
+   <img class="mx-auto mb-10" src="{{ page.thumbnail }}" alt="{{ page.title }}">
+
+   <h2 class="text-2xl text-primary-700 dark:text-gray-100 mb-10">About this project</h2>
+   {{ content }}
+</article>

data/assets/scripts.bundle.js

@@ -1 +1 @@
-(()=>{"use strict";function e(e,t){for(var n=0;n<t.length;n++){var a=t[n];a.enumerable=a.enumerable||!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(e,a.key,a)}}var t=function(){function t(){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t),this.panels=[],this.init()}var n,a;return n=t,(a=[{key:"init",value:function(){var e=this;document.querySelectorAll("[nav-toggler]").forEach((function(t){t.addEventListener("click",(function(e){e.preventDefault(),e.stopPropagation(),document.querySelector("body").classList.toggle("nav-opened")})),e.panels.push(document.querySelector(t.getAttribute("href")))})),window.onclick=function(t){e.elementIsAPanel(t.target)||document.querySelector("body").classList.remove("nav-opened")}}},{key:"elementIsAPanel",value:function(e){var t=!1;return this.panels.forEach((function(n){n==e&&(t=!0)})),t}}])&&e(n.prototype,a),t}();function n(e,t){for(var n=0;n<t.length;n++){var a=t[n];a.enumerable=a.enumerable||!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(e,a.key,a)}}var a=function(){function e(){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.init()}var t,a;return t=e,(a=[{key:"init",value:function(){var e=this,t=document.querySelectorAll('[data-toggle="pill"]');if(console.log("Found ".concat(t.length," pills on this page")),t.forEach((function(t){t.addEventListener("click",(function(t){t.preventDefault();var n=t.target.getAttribute("href");e.deactivateAllPills(t.target),t.target.classList.add("active");var a=document.querySelector(n);e.hideAllTabs(a).then((function(){a.classList.add("active"),setTimeout((function(){a.classList.add("show")}),100)}))}))})),t.length>0){var n=document.querySelector(t[0].getAttribute("href"));n.classList.add("show"),n.classList.add("active")}}},{key:"deactivateAllPills",value:function(e){e.parentNode.querySelectorAll('[data-toggle="pill"]').forEach((function(e){e.classList.remove("show"),e.classList.remove("active")}))}},{key:"hideAllTabs",value:function(e){var t=[];return e.parentNode.querySelectorAll('[role="tabpanel"]').forEach((function(e){e.classList.remove("show"),t.push(new Promise((function(t){setTimeout((function(){e.classList.remove("active"),t()}),100)})))})),Promise.all(t)}}])&&n(t.prototype,a),e}();new t,new a})();
+(()=>{"use strict";function e(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}var t=function(){function t(){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t),this.panels=[],this.init()}var n,o;return n=t,(o=[{key:"init",value:function(){var e=this;document.querySelectorAll("[nav-toggler]").forEach((function(t){t.addEventListener("click",(function(e){e.preventDefault(),e.stopPropagation(),document.querySelector("body").classList.toggle("nav-opened")})),e.panels.push(document.querySelector(t.getAttribute("href")))})),window.onclick=function(t){e.elementIsAPanel(t.target)||document.querySelector("body").classList.remove("nav-opened")}}},{key:"elementIsAPanel",value:function(e){var t=!1;return this.panels.forEach((function(n){n==e&&(t=!0)})),t}}])&&e(n.prototype,o),t}();function n(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}var o=function(){function e(){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.init()}var t,o;return t=e,(o=[{key:"init",value:function(){var e=this,t=document.querySelectorAll('[data-toggle="pill"]');if(console.log("Found ".concat(t.length," pills on this page")),t.forEach((function(t){t.addEventListener("click",(function(t){t.preventDefault();var n=t.target.getAttribute("href");e.deactivateAllPills(t.target),t.target.classList.add("active");var o=document.querySelector(n);e.hideAllTabs(o).then((function(){o.classList.add("active"),setTimeout((function(){o.classList.add("show")}),100)}))}))})),t.length>0){var n=document.querySelector(t[0].getAttribute("href"));n.classList.add("show"),n.classList.add("active")}}},{key:"deactivateAllPills",value:function(e){e.parentNode.querySelectorAll('[data-toggle="pill"]').forEach((function(e){e.classList.remove("show"),e.classList.remove("active")}))}},{key:"hideAllTabs",value:function(e){var t=[];return e.parentNode.querySelectorAll('[role="tabpanel"]').forEach((function(e){e.classList.remove("show"),t.push(new Promise((function(t){setTimeout((function(){e.classList.remove("active"),t()}),100)})))})),Promise.all(t)}}])&&n(t.prototype,o),e}();function a(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}var r=function(){function e(){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.init()}var t,n;return t=e,(n=[{key:"init",value:function(){var e=this;this.setThemeOption(this.getThemeOption()),document.querySelectorAll("[data-night-mode-toggler]").forEach((function(t){t.addEventListener("click",(function(t){e.toggleThemeOption()}))}))}},{key:"toggleThemeOption",value:function(){var e=this.getThemeOption();document.querySelector("html").classList.add("night-mode-transitioning"),e="dark"==e?"light":"dark",this.setThemeOption(e),setTimeout((function(){document.querySelector("html").classList.remove("night-mode-transitioning")}),500)}},{key:"getDefaultThemeOption",value:function(){return window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}},{key:"getThemeOption",value:function(){return localStorage.getItem("theme")||this.getDefaultThemeOption()}},{key:"setThemeOption",value:function(e){"dark"==e?document.querySelector("html").classList.add("dark"):document.querySelector("html").classList.remove("dark"),localStorage.setItem("theme",e)}}])&&a(t.prototype,n),e}();function i(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}var l=function(){function e(){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.panels=[],this.lastScrollTop=0,this.init()}var t,n;return t=e,(n=[{key:"init",value:function(){var e=this;document.querySelectorAll("[data-collapse]").forEach((function(t){e.panels.push(t)})),window.addEventListener("scroll",(function(t){e.panels.forEach((function(t){var n=t.dataset.collapseTriggerHeight,o=window.pageYOffset||document.documentElement.scrollTop,a=o>e.lastScrollTop;e.lastScrollTop=o<=0?0:o,window.scrollY>n&&(t.style.transform=a?"translateY(".concat(-1*t.clientHeight,"px)"):"")}))}))}}])&&i(t.prototype,n),e}();function c(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}var s=function(){function e(){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.init()}var t,n;return t=e,(n=[{key:"init",value:function(){document.querySelectorAll("[data-anchor-transition").forEach((function(e){e.addEventListener("click",(function(e){e.preventDefault();for(var t=e.target;t&&!(t instanceof HTMLAnchorElement);)t=t.parentNode;var n=t.getAttribute("href"),o=document.querySelector(n);return!!o&&(window.scroll({top:o.offsetTop,left:0,behavior:"smooth"}),!1)}))}))}}])&&c(t.prototype,n),e}();new t,new o,new r,new l,new s})();

data/assets/styles.css

@@ -21,8 +21,7 @@ Use a more readable tab size (opinionated).
 
 :root {
   -moz-tab-size: 4;
-  -o-tab-size: 4;
-     tab-size: 4;
+  tab-size: 4;
 }
 
 /**
@@ -54,7 +53,8 @@ Improve consistency of default fonts in all browsers. (https://github.com/sindre
 
 body {
   font-family:
-		system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, 
+		system-ui,
+		-apple-system, /* Firefox supports this but not yet `system-ui` */
 		'Segoe UI',
 		Roboto,
 		Helvetica,
@@ -89,8 +89,7 @@ Add the correct text decoration in Chrome, Edge, and Safari.
 */
 
 abbr[title] {
-  -webkit-text-decoration: underline dotted;
-          text-decoration: underline dotted;
+  text-decoration: underline dotted;
 }
 
 /**
@@ -199,8 +198,7 @@ select { /* 1 */
 Correct the inability to style clickable types in iOS and Safari.
 */
 
-button,
-[type='button'] {
+button {
   -webkit-appearance: button;
 }
 
@@ -404,14 +402,6 @@ textarea {
   resize: vertical;
 }
 
-input::-moz-placeholder, textarea::-moz-placeholder {
-  color: #9ca3af;
-}
-
-input:-ms-input-placeholder, textarea:-ms-input-placeholder {
-  color: #9ca3af;
-}
-
 input::placeholder,
 textarea::placeholder {
   color: #9ca3af;
@@ -577,6 +567,21 @@ video {
   background-color: rgba(67, 56, 202, var(--tw-bg-opacity));
 }
 
+.hover\:bg-primary-700:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgba(67, 56, 202, var(--tw-bg-opacity));
+}
+
+.dark .dark\:bg-gray-800 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(31, 41, 55, var(--tw-bg-opacity));
+}
+
+.dark .dark\:bg-gray-900 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(17, 24, 39, var(--tw-bg-opacity));
+}
+
 .border-gray-200 {
   --tw-border-opacity: 1;
   border-color: rgba(229, 231, 235, var(--tw-border-opacity));
@@ -587,6 +592,16 @@ video {
   border-color: rgba(79, 70, 229, var(--tw-border-opacity));
 }
 
+.border-primary-700 {
+  --tw-border-opacity: 1;
+  border-color: rgba(67, 56, 202, var(--tw-border-opacity));
+}
+
+.dark .dark\:border-gray-800 {
+  --tw-border-opacity: 1;
+  border-color: rgba(31, 41, 55, var(--tw-border-opacity));
+}
+
 .rounded-md {
   border-radius: 0.375rem;
 }
@@ -595,6 +610,10 @@ video {
   border-radius: 0.5rem;
 }
 
+.border {
+  border-width: 1px;
+}
+
 .border-t-4 {
   border-top-width: 4px;
 }
@@ -603,6 +622,10 @@ video {
   border-bottom-width: 1px;
 }
 
+.cursor-pointer {
+  cursor: pointer;
+}
+
 .block {
   display: block;
 }
@@ -623,6 +646,14 @@ video {
   display: none;
 }
 
+.dark .dark\:inline {
+  display: inline;
+}
+
+.dark .dark\:hidden {
+  display: none;
+}
+
 .flex-col {
   flex-direction: column;
 }
@@ -639,6 +670,10 @@ video {
   justify-content: center;
 }
 
+.h-36 {
+  height: 9rem;
+}
+
 .h-full {
   height: 100%;
 }
@@ -662,6 +697,11 @@ video {
   line-height: 1.75rem;
 }
 
+.text-2xl {
+  font-size: 1.5rem;
+  line-height: 2rem;
+}
+
 .text-3xl {
   font-size: 1.875rem;
   line-height: 2.25rem;
@@ -702,6 +742,10 @@ video {
   opacity: 0.6;
 }
 
+.overflow-hidden {
+  overflow: hidden;
+}
+
 .p-3 {
   padding: 0.75rem;
 }
@@ -710,6 +754,11 @@ video {
   padding: 1.25rem;
 }
 
+.py-1 {
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+}
+
 .py-4 {
   padding-top: 1rem;
   padding-bottom: 1rem;
@@ -725,6 +774,14 @@ video {
   padding-right: 2rem;
 }
 
+.pt-2 {
+  padding-top: 0.5rem;
+}
+
+.pr-5 {
+  padding-right: 1.25rem;
+}
+
 .pl-5 {
   padding-left: 1.25rem;
 }
@@ -766,13 +823,12 @@ video {
 }
 
 * {
-  --tw-shadow: 0 0 rgba(0,0,0,0);
+  --tw-shadow: 0 0 #0000;
 }
 
 .hover\:shadow-lg:hover {
   --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
-  box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0,0,0,0)), var(--tw-ring-shadow, 0 0 rgba(0,0,0,0)), var(--tw-shadow);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
 * {
@@ -780,8 +836,8 @@ video {
   --tw-ring-offset-width: 0px;
   --tw-ring-offset-color: #fff;
   --tw-ring-color: rgba(59, 130, 246, 0.5);
-  --tw-ring-offset-shadow: 0 0 rgba(0,0,0,0);
-  --tw-ring-shadow: 0 0 rgba(0,0,0,0);
+  --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-shadow: 0 0 #0000;
 }
 
 .text-center {
@@ -792,6 +848,11 @@ video {
   text-align: right;
 }
 
+.text-gray-300 {
+  --tw-text-opacity: 1;
+  color: rgba(209, 213, 219, var(--tw-text-opacity));
+}
+
 .text-gray-400 {
   --tw-text-opacity: 1;
   color: rgba(156, 163, 175, var(--tw-text-opacity));
@@ -817,6 +878,16 @@ video {
   color: rgba(255, 255, 255, var(--tw-text-opacity));
 }
 
+.hover\:text-white:hover {
+  --tw-text-opacity: 1;
+  color: rgba(255, 255, 255, var(--tw-text-opacity));
+}
+
+.dark .dark\:text-gray-100 {
+  --tw-text-opacity: 1;
+  color: rgba(243, 244, 246, var(--tw-text-opacity));
+}
+
 .w-64 {
   width: 16rem;
 }
@@ -833,6 +904,10 @@ video {
   width: 75%;
 }
 
+.w-4\/5 {
+  width: 80%;
+}
+
 .w-full {
   width: 100%;
 }
@@ -859,10 +934,8 @@ video {
   transition-duration: 150ms;
 }
 
-@-webkit-keyframes spin {
-  to {
-    transform: rotate(360deg);
-  }
+.duration-500 {
+  transition-duration: 500ms;
 }
 
 @keyframes spin {
@@ -871,13 +944,6 @@ video {
   }
 }
 
-@-webkit-keyframes ping {
-  75%, 100% {
-    transform: scale(2);
-    opacity: 0;
-  }
-}
-
 @keyframes ping {
   75%, 100% {
     transform: scale(2);
@@ -885,44 +951,67 @@ video {
   }
 }
 
-@-webkit-keyframes pulse {
-  50% {
-    opacity: .5;
-  }
-}
-
 @keyframes pulse {
   50% {
     opacity: .5;
   }
 }
 
-@-webkit-keyframes bounce {
+@keyframes bounce {
   0%, 100% {
     transform: translateY(-25%);
-    -webkit-animation-timing-function: cubic-bezier(0.8,0,1,1);
-            animation-timing-function: cubic-bezier(0.8,0,1,1);
+    animation-timing-function: cubic-bezier(0.8,0,1,1);
   }
 
   50% {
     transform: none;
-    -webkit-animation-timing-function: cubic-bezier(0,0,0.2,1);
-            animation-timing-function: cubic-bezier(0,0,0.2,1);
+    animation-timing-function: cubic-bezier(0,0,0.2,1);
   }
 }
 
-@keyframes bounce {
-  0%, 100% {
-    transform: translateY(-25%);
-    -webkit-animation-timing-function: cubic-bezier(0.8,0,1,1);
-            animation-timing-function: cubic-bezier(0.8,0,1,1);
-  }
+pre {
+  background: #222;
+  color: #ffffff;
+  padding: 10px;
+  overflow: auto;
+  width: 100%;
+}
 
-  50% {
-    transform: none;
-    -webkit-animation-timing-function: cubic-bezier(0,0,0.2,1);
-            animation-timing-function: cubic-bezier(0,0,0.2,1);
-  }
+pre code {
+  width: auto;
+}
+
+.highlight .cm {
+  color: #608B4E;
+}
+
+.highlight .kd,
+.highlight .kc {
+  color: #3F9CCA;
+}
+
+.highlight .nx {
+  color: #68D0FE;
+}
+
+.highlight .k {
+  color: #C586A1;
+}
+
+.highlight .p {
+  color: #DCD285;
+}
+
+.highlight .s2 {
+  color: #CE743A;
+}
+
+.highlight .mi {
+  color: #B5CEA8;
+}
+
+.highlighter-rouge {
+  margin-bottom: 1.25rem
 }
 
 svg:not(:root).svg-inline--fa {
@@ -971,6 +1060,120 @@ svg:not(:root).svg-inline--fa {
   border-left: solid 4.2426px #4338ca;
 }
 
+.dark .hexagon {
+  background-color: var(--bg-gray-700);
+}
+
+.post h1 {
+  font-weight: 600;
+  font-size: 1.875rem;
+  line-height: 2.25rem;
+  margin-bottom: 1.25rem;
+  --tw-text-opacity: 1;
+  color: rgba(67, 56, 202, var(--tw-text-opacity))
+}
+
+.post h2 {
+  font-weight: 600;
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+  margin-bottom: 1.25rem;
+  margin-top: 2.5rem;
+  --tw-text-opacity: 1;
+  color: rgba(67, 56, 202, var(--tw-text-opacity))
+}
+
+.post p {
+  font-weight: 300;
+  line-height: 2.25rem;
+  --tw-text-opacity: 1;
+  color: rgba(17, 24, 39, var(--tw-text-opacity));
+  letter-spacing: 0.025em
+}
+
+.dark .post p {
+  font-weight: 300;
+  line-height: 2.25rem;
+  --tw-text-opacity: 1;
+  color: rgba(243, 244, 246, var(--tw-text-opacity));
+  letter-spacing: 0.025em
+}
+
+.row {
+  display: flex;
+  flex-wrap: wrap;
+  margin-left: -0.75rem;
+  margin-right: -0.75rem
+}
+
+.col {
+  padding-left: 0.75rem;
+  padding-right: 0.75rem
+}
+
+.card {
+  min-height: 16rem
+}
+
+.card.featured {
+  --tw-bg-opacity: 1;
+  background-color: rgba(249, 250, 251, var(--tw-bg-opacity));
+  border-radius: 0.375rem;
+  display: block;
+  margin-bottom: 0.75rem;
+  padding: 1.25rem;
+  padding-bottom: 12rem;
+  position: relative;
+  --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  --tw-translate-x: 0;
+  --tw-translate-y: 0;
+  --tw-rotate: 0;
+  --tw-skew-x: 0;
+  --tw-skew-y: 0;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+  transition-duration: 300ms;
+}
+
+.card.featured h2, .card.featured p, .card.featured span {
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+  transition-duration: 300ms
+}
+
+.dark .card.featured {
+  --tw-bg-opacity: 1;
+  background-color: rgba(31, 41, 55, var(--tw-bg-opacity));
+}
+
+.dark .card.featured h2 {
+  --tw-text-opacity: 1;
+  color: rgba(255, 255, 255, var(--tw-text-opacity))
+}
+
+.card.featured:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgba(79, 70, 229, var(--tw-bg-opacity));
+  --tw-scale-x: 0.98;
+  --tw-scale-y: 0.98;
+}
+
+.card.featured:hover h2 {
+  --tw-text-opacity: 1;
+  color: rgba(255, 255, 255, var(--tw-text-opacity))
+}
+
+.card.featured:hover p, .card.featured:hover span {
+  --tw-text-opacity: 1;
+  color: rgba(165, 180, 252, var(--tw-text-opacity))
+}
+
 .btn {
   border-radius: 0.5rem;
   padding-top: 0.5rem;
@@ -1018,15 +1221,15 @@ p {
 }
 
 .experience ul {
-    list-style-type: disc;
-    padding-left: 0.75rem;
-    --tw-text-opacity: 1;
-    color: rgba(107, 114, 128, var(--tw-text-opacity))
-  }
+  list-style-type: disc;
+  padding-left: 0.75rem;
+  --tw-text-opacity: 1;
+  color: rgba(107, 114, 128, var(--tw-text-opacity))
+}
 
 .experience li {
-    margin-bottom: 0.75rem
-  }
+  margin-bottom: 0.75rem
+}
 
 .btn-primary {
   --tw-bg-opacity: 1;
@@ -1034,12 +1237,12 @@ p {
 }
 
 .nav-opened aside {
-    right: 0;
-  }
+  right: 0;
+}
 
 .nav-opened .overlay {
-    display: block;
-  }
+  display: block;
+}
 
 body {
   --white: #fff;
@@ -1065,27 +1268,16 @@ body {
   --gray-900: #111827;
 }
 
-.transition-all {
-  transition: all 0.5s !important;
-}
-
-.row {
-  display: flex;
-  flex-wrap: wrap;
-  margin-left: -0.75rem;
-  margin-right: -0.75rem
-}
-
-.col {
-  padding-left: 0.75rem;
-  padding-right: 0.75rem
-}
-
-.card {
-  min-height: 16rem
+.night-mode-transitioning * {
+  transition-property: all;
+  transition-duration: 500ms;
 }
 
 @media (min-width: 640px) {
+  .sm\:right-3 {
+    right: 0.75rem;
+  }
+
   .sm\:left-3 {
     left: 0.75rem;
   }
@@ -1120,6 +1312,10 @@ body {
     padding-top: 10rem;
   }
 
+  .md\:right-4 {
+    right: 1rem;
+  }
+
   .md\:left-4 {
     left: 1rem;
   }
@@ -1142,6 +1338,10 @@ body {
 }
 
 @media (min-width: 1024px) {
+  .lg\:right-9 {
+    right: 2.25rem;
+  }
+
   .lg\:left-9 {
     left: 2.25rem;
   }

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: jekyll-waterfall
 version: !ruby/object:Gem::Version
-  version: 0.6.0
+  version: 0.10.1
 platform: ruby
 authors:
 - Rodrigo-Vargas
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2020-12-12 00:00:00.000000000 Z
+date: 2020-12-21 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -34,6 +34,8 @@ files:
 - LICENSE.txt
 - README.md
 - _config.yml
+- _includes/analytics.html
+- _includes/disqus_comments.html
 - _includes/experience.html
 - _includes/header.html
 - _includes/last_posts.html
@@ -44,8 +46,14 @@ files:
 - _includes/svg/envelope.svg
 - _includes/svg/github.svg
 - _includes/svg/linkedin.svg
+- _includes/svg/moon.svg
+- _includes/svg/sun.svg
+- _includes/toolbox.html
+- _layouts/collection.html
 - _layouts/default.html
 - _layouts/home.html
+- _layouts/post.html
+- _layouts/project.html
 - assets/scripts.bundle.js
 - assets/styles.css
 homepage: https://rodrigovargas.com.br