jekyll-theme-experiment 1.0.1 → 1.0.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
-SHA1:
-  metadata.gz: bd4d1366442029f526b661b02dc142a369faf11b
-  data.tar.gz: fcdd551309c85fe2e4d57bc6c976748639f1a7a2
+SHA256:
+  metadata.gz: ab8ef7959d726ed719afab719eeed01d7342c9cf7e5ec667d5d169c68804c0af
+  data.tar.gz: 81f842ad3df9db3b3cbf8c8ecbbdf7e533c7a9064ca2dce26bbae97b6262f8ca
 SHA512:
-  metadata.gz: 3699d8f93c7ff08bab25ee6a1eb0c80c76e4987eb033703d4d0d92eb80e30c77cc50147a7f85c3e1ddb678e9dfd31480d39e112d14db6107dc48fa4a22f6efdf
-  data.tar.gz: ac4c1b61407683a28357e7cad70ccf611f76304169652c96178b7b83c4b07d0ef977da033951797fd6f3cd782221dde62d9a36b0855857efce8efdfbd7ce69ae
+  metadata.gz: 6b72e647fbe8b69922502c64d3ff70505bc0481fb689a96d63d96a2161fdbe7fbe98df31ba6cb7a988278d257df2cfb67247224e0fa85ab918fb820bb5ef125d
+  data.tar.gz: 8e2091d0f90ddb8d87bc4adcd357e956b1bce86ac8c0fa2087de02c2186e8226b9ff0b52899f7f883e8b97e8bda839032769e88409a9ceb5f47ec93a21fdf68d

data/README.md

@@ -67,8 +67,8 @@ jekyll-theme-experiment allows you to customize the following sections in the ma
 Add the following sample data to try it:
 
 ```yml
-theme_jekyll-theme-experiment:
-  about:
+jekyll-theme-experiment:
+  about: # optional
     avatar: https://robohash.org/experiment-avatar.png?size=300x300
 
   portfolio: # optional
@@ -84,7 +84,9 @@ theme_jekyll-theme-experiment:
         img_relative_url: /assets/example.png
 
   tools: # optional
-    - relative_url: /assets/icons/bitbucket/bitbucket-original.svg
+    title: Tools and Experience 
+    icons:
+      - relative_url: /assets/icons/bitbucket/bitbucket-original.svg
 ```
 
 By default, jekyll generates a couple markdown files, we'll need to make

data/_includes/footer.html

@@ -2,7 +2,7 @@
   <div class="l-center-wrap icon-media">
     {% if site.twitter_username %}<a href="https://twitter.com/{{site.twitter_username}}"><i class="fab fa-twitter-square fa-3x"></i></a>{% endif %}
     {% if site.github_username %}<a href="https://github.com/{{site.github_username}}"><i class="fab fa-github-square fa-3x"></i></a>{% endif %}
-    {% if site.linkedin_username %}<a href="https://www.likedin.com/{{site.twitter_username}}"><i class="fab fa-linkedin fa-3x"></i></a>{% endif %}
+    {% if site.linkedin_username %}<a href="https://www.linkedin.com/in/{{site.linkedin_username}}"><i class="fab fa-linkedin fa-3x"></i></a>{% endif %}
     {% if site.dribbble_username %}<a href="https://dribbble.com/{{ site.dribbble_username }}"><i class="fab fa-dribbble-square fa-3x"></i></a>{% endif %}
     {% if site.envelope_username %}<a href="mailto:{{ site.envelope_username }}"><i class="fas fa-envelope-square fa-3x"></i></a>{% endif %}
     {% if site.flickr_username %}<a href="https://flickr.com/{{ site.flickr_username }}"><i class="fab fa-flickr fa-3x"></i></a>{% endif %}

data/_includes/head.html

@@ -4,4 +4,5 @@
   <title>{{ site.title }}</title>
   <link rel="stylesheet" href="{{ "/assets/main.css" | relative_url }}">
   <script defer src="{{ "/assets/fontawesome/js/fontawesome-all.min.js" | relative_url }}" ></script>
+  <script defer src="{{ "/assets/javascript/toggleMenu.js" | relative_url }}" ></script>
 </head>

data/_includes/header.html

@@ -1,7 +1,7 @@
 <nav class="navbar">
   {% assign default_paths = site.html_pages | map: "path" %}
   {% assign page_paths = site.header_pages | default: default_paths %}
-
+  <span class="burguer-button" id='burguer-button'><i class="fas fa-bars"></i></span>
   <div class="navbar-item">
     {% for path in page_paths %}
       {% assign my_page = site.html_pages | where: "path", path | first %}

data/_includes/portfolio.html

@@ -1,26 +1,35 @@
-{% if site.theme_jekyll-theme-experiment.portfolio %}
+{% if site.jekyll-theme-experiment.portfolio %}
   <div class="l-wrap">
     <div class="l-center-column">
       <hr class="hr-decorator">
-      <h1>{{ site.theme_jekyll-theme-experiment.portfolio.title }}</h1>
+      <h1>{{ site.jekyll-theme-experiment.portfolio.title }}</h1>
     </div>
       <div class="l-item">
-        {% for project in site.theme_jekyll-theme-experiment.portfolio.projects %}
+        {% for project in site.jekyll-theme-experiment.portfolio.projects %}
           <div class="item-container-project">
             <div class="item-project">
               <img src="{{ project.img_relative_url | relative_url }}" alt="{{ project.name }}">
             </div>
             <div class="content-hamburger-menu">
-              <input id="toggle-{{ forloop.index }}" type="checkbox">
-              <label class="toggle-container" for="toggle-{{ forloop.index }}">
-                <span class="button button-toggle"></span>
-                <div class="information-project">
-                 <h3>{{ project.name }}</h3>
-                </div>
-              </label>
-              <nav class="nav">
-                <a class="nav-item" href="{{ project.link }}" target="_blank"><i class="fas fa-link"></i></a>
-                <a class="nav-item" href="{{ project.github }}" target="_blank"><i class="fab fa-github-alt"></i></a>
+              <div class="information-project">
+                <ul>
+                  <li>
+                    <a class="icon" id="toggle-{{ forloop.index }}">
+                      <i class="fas fa-bars"></i>
+                    </a>
+                  </li>
+                  <li>
+                    <h3>{{ project.name }}</h3>
+                  </li>
+                </ul>
+              </div>
+              <nav class="nav-links nav-{{ forloop.index }}">
+                <a class="nav-item" href="{{ project.link }}" target="_blank">
+                  <i class="fas fa-link"></i>
+                </a>
+                <a class="nav-item" href="{{ project.github }}" target="_blank">
+                  <i class="fab fa-github-alt"></i>
+                </a>
               </nav>
             </div>
           </div>

data/_includes/tools.html

@@ -1,11 +1,11 @@
-{% if site.theme_jekyll-theme-experiment.tools %}
+{% if site.jekyll-theme-experiment.tools %}
   <div class="l-wrap">
     <div class="l-center-column">
       <hr class="hr-decorator">
-      <h1>Tools and experience</h1>
+      <h1>{{ site.jekyll-theme-experiment.tools.title }}</h1>
     </div>
     <div class="content-tools">
-      {% for tool in site.theme_jekyll-theme-experiment.tools %}
+      {% for tool in site.jekyll-theme-experiment.tools.icons %}
       <img src="{{ tool.relative_url | relative_url }}" alt="">
       {% endfor %}
     </div>

data/_layouts/home.html

@@ -12,9 +12,9 @@ layout: default
       <h3>{{ site.description }}</h3>
     {% endif %}
   </div>
-  {% if site.theme_jekyll-theme-experiment.about.avatar %}
+  {% if site.jekyll-theme-experiment.about.avatar %}
     <div class="avatar">
-        <img src="{{ site.theme_jekyll-theme-experiment.about.avatar }}" alt="avatar">
+        <img src="{{ site.jekyll-theme-experiment.about.avatar }}" alt="avatar">
     </div>
   {% endif %}
 </div>

data/_sass/experiment.scss

@@ -34,11 +34,11 @@ $on-laptop:        800px !default;
   "experiment/syntax-highlighting",
   "experiment/layout",
   //components
-  "experiment/modules/information-box",
-  "experiment/modules/navbar",
   "experiment/modules/avatar",
-  "experiment/modules/project_portafolio",
   "experiment/modules/content_tools",
-  "experiment/modules/post",
-  "experiment/modules/hr"
+  "experiment/modules/hr",
+  "experiment/modules/information-box",
+  "experiment/modules/nav_portafolio",
+  "experiment/modules/navbar",
+  "experiment/modules/post"
 ;

data/_sass/experiment/_reset.scss

@@ -41,6 +41,7 @@ ul, ol, dl, figure,
  */
 ul, ol {
   margin-left: $spacing-unit;
+  list-style: none;
 }
 
 li {
@@ -70,7 +71,7 @@ h2 {
 a {
   color: $brand-color;
   text-decoration: none;
-
+  cursor: pointer;
   &:hover {
     color: $grey-color-dark;
   }

data/_sass/experiment/modules/_nav_portafolio.scss

@@ -0,0 +1,101 @@
+.item-container-project {
+  background-color: $background-color;
+  margin: $spacing-unit;
+  width: 400px;
+  height: 285px;
+
+  @media screen and (max-width: $on-phone) {
+    width: 300px;
+    height: 180px;
+  }
+
+  .item-project {
+    height: 215px;
+    @media screen and (max-width: $on-phone) {
+      height: 115px;
+    }
+    img {
+      display: block;
+      width: 100%;
+    }
+  }
+
+  .content-hamburger-menu {
+    width: 400px;
+    height: 285px;
+    box-shadow: 0 0 1em $grey-color;
+    position: relative;
+    top: -215px;
+    transition: .3s;
+    overflow: hidden;
+
+    @media screen and (max-width: $on-phone) {
+      height: 180px;
+      top: -115px;
+      width: 300px;
+    }
+
+    .information-project {
+      background-color: $purple-color;
+      bottom: 0px;
+      color: $brand-color;
+      height: 70px;
+      line-height: 70px;
+      position: absolute;
+      width: 100%;
+      z-index: 10;
+      @media screen and (max-width: $on-phone) {
+        height: 30px;
+        line-height: 30px;
+        font-size: $spacing-unit / 2;
+      }
+      ul {
+        display: flex;
+        justify-content: space-between;
+        h3 {
+          margin-right: $spacing-unit;
+        }
+        .icon:hover {
+          color: $grey-color-light;
+        }
+      }
+    }
+    .nav-links {
+      align-items: center;
+      bottom: -285px;
+      display: flex;
+      justify-content: center;
+      height: 215px;
+      // display: inline-block;
+      position: relative;
+      // pointer-events: none;
+      // z-index: 1;
+      background-color: $purple-color-transparent;
+      transition: .3s;
+      @media screen and (max-width: $on-phone) {
+        height: 160px;
+      }
+      .nav-item {
+        position: relative;
+        display: inline-block;
+        // float: left;
+        // clear: both;
+        // color: transparent;
+        font-size: 14px;
+        padding: 30px;
+        letter-spacing: -6.2px;
+        height: 7px;
+        line-height: 7px;
+        text-transform: uppercase;
+        &:hover {
+          color: $grey-color-light;
+        }
+      }
+    }
+    @for $i from 1 through $projects {
+      .active_nav-#{$i} {
+        bottom: 0;
+      }
+    }
+  }
+}

data/_sass/experiment/modules/_navbar.scss

@@ -1,16 +1,17 @@
 .navbar {
+  background-color: $purple-color;
   box-shadow: 0 0 0.2em $grey-color;
+  height: 70px;
+  line-height: 70px;
   position: fixed;
   text-align: right;
-  background-color: $purple-color;
   width: 100%;
-  z-index: 10;
+  z-index: 100;
   .navbar-item {
-    padding: $spacing-unit / 2;
     text-transform: uppercase;
     & > a {
       font-weight: bold;
-      padding: 0 $spacing-unit / 2;
+      padding: $spacing-unit / 2;
     }
     & > a:hover {
       color: $grey-color-light;
@@ -19,4 +20,42 @@
       color: $grey-color-light;
     }
   }
+  .burguer-button {
+    display: none;
+  }
+  @media screen and (max-width: $on-phone) {
+    .burguer-button {
+      margin: $spacing-unit / 2;
+      display: block;
+      color:  $brand-color;
+      width: 40px;
+      line-height: 40px;
+      border-radius: 50%;
+      box-shadow: 0 0 0.3em $grey-color;
+      text-align: center;
+    }
+
+    .navbar-item {
+      background-color: $purple-color-transparent;
+      left: -100%;
+      position: fixed;
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+      height: 100%;
+      align-items:  center;
+      transition: .3s;
+      & > a {
+        padding: $spacing-unit / 2 $spacing-unit * 3;
+        border-bottom: solid 1px $brand-color;
+      }
+      & > a:first-child {
+        border-top: solid 1px $brand-color;
+        margin-top: $spacing-unit;
+      }
+    }
+    .active {
+      left: 0;
+    }
+  }
 }

data/assets/javascript/toggleMenu.js

@@ -0,0 +1,47 @@
+function mediaQuery(query) {
+  let $button = document.querySelector('#burguer-button');
+  let navItem = document.querySelector('.navbar-item');
+  let element = 'active';
+  if (query.matches) {
+    $button.addEventListener('click', function() {
+      toggleMenu(navItem, $button, element)
+    });
+  } else {
+    $button.removeEventListener('click', function() {
+      toggleMenu(navItem, $button, element);
+    });
+  }
+}
+
+function toggleMenu(navItem, $button, element) {
+  let ico = $button.querySelector('svg');
+  if (navItem.classList.contains(element)){
+    navItem.classList.remove(element);
+    ico.classList.replace('fa-times-circle', 'fa-bars');
+    ico.setAttribute('data-icon', 'bars');
+  } else {
+    navItem.classList.add(element);
+    ico.classList.replace('fa-bars', 'fa-times-circle');
+    ico.setAttribute('data-icon', 'times-circle');
+  }
+}
+
+
+window.onload = function() {
+  let query = window.matchMedia('(max-width: 500px)');
+  query.addListener(mediaQuery);
+
+  mediaQuery(query);
+
+  let all = document.querySelectorAll('.icon');
+  for (let i = 1; i < all.length + 1; i ++) {
+    let nav = document.querySelector('.nav-'+i);
+    let $button = document.querySelector('#toggle-'+ i);
+    let element = 'active_nav-'+i;
+    $button.addEventListener('click', function() {
+      toggleMenu(nav, $button, element);
+    });
+  }
+}
+
+

data/assets/main.scss

@@ -3,6 +3,6 @@
 ---
 
 // Number of projects inside of portfolio
-$projects: {{ site.theme_jekyll-theme-experiment.portfolio.projects | size | default: 0 }};
+$projects: {{ site.jekyll-theme-experiment.portfolio.projects | size | default: 0 }};
 
 @import "experiment";

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: jekyll-theme-experiment
 version: !ruby/object:Gem::Version
-  version: 1.0.1
+  version: 1.0.2
 platform: ruby
 authors:
 - Angelina Moreno Robledo
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2018-02-26 00:00:00.000000000 Z
+date: 2021-03-15 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -79,12 +79,9 @@ files:
 - _sass/experiment/modules/_content_tools.scss
 - _sass/experiment/modules/_hr.scss
 - _sass/experiment/modules/_information-box.scss
+- _sass/experiment/modules/_nav_portafolio.scss
 - _sass/experiment/modules/_navbar.scss
 - _sass/experiment/modules/_post.scss
-- _sass/experiment/modules/_project_portafolio.scss
-- _sass/experiment/sprite.png
-- _sass/experiment/sprite_2.png
-- _sass/experiment/sprite_2@2x.png
 - assets/example.png
 - assets/fontawesome/css/fa-svg-with-js.css
 - assets/fontawesome/js/fa-brands.js
@@ -123,6 +120,7 @@ files:
 - assets/icons/heroku/heroku-plain-wordmark.svg
 - assets/icons/heroku/heroku-plain.svg
 - assets/icons/heroku/heroku.eps
+- assets/javascript/toggleMenu.js
 - assets/main.scss
 homepage: https://github.com/anxhe/jekyll-theme-experiment
 licenses:
@@ -143,8 +141,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubyforge_project: 
-rubygems_version: 2.6.13
+rubygems_version: 3.1.4
 signing_key: 
 specification_version: 4
 summary: This is a jekyll theme made with love

data/_sass/experiment/modules/_project_portafolio.scss

@@ -1,216 +0,0 @@
-$transition-duration: 0.5s;
-$transition-delay: 0.05s;
-$items: 2;
-
-.item-container-project {
-  background-color: $background-color;
-  margin: $spacing-unit;
-  width: 400px;
-  height: 285px;
-  @media screen and (max-width: $on-phone) {
-    width: 300px;
-    height: 180px;
-  }
-
-  .item-project {
-    height: 215px;
-    @media screen and (max-width: $on-phone) {
-      height: 115px;
-    }
-
-    img {
-      display: block;
-      width: 100%;
-    }
-  }
-
-  .content-hamburger-menu {
-    width: 400px;
-    height: 285px;
-    box-shadow: 0 0 1em $grey-color;
-    position: relative;
-    top: -215px;
-    overflow: hidden;
-    @media screen and (max-width: $on-phone) {
-      height: 180px;
-      top: -115px;
-      width: 300px;
-    }
-
-    .information-project {
-      width: 100%;
-      height: 70px;
-      background-color: $purple-color;
-      display: block;
-      bottom: 0px;
-      position: absolute;
-      @media screen and (max-width: $on-phone) {
-        height: 30px;
-      }
-      h3 {
-        color: $brand-color;
-        text-align: end;
-        margin: 15px 15px 0 0;
-        @media screen and (max-width: $on-phone) {
-          font-size: 17px;
-          margin: 0 5px 0 0;
-        }
-      }
-    }
-
-    @for $i from 1 through $projects {
-      #toggle-#{$i} {
-        position: absolute;
-        visibility: hidden;
-      }
-
-      // Styles for the 'open' state, if the checkbox is checked
-      #toggle-#{$i}:checked {
-      // Any element you need to change the style if menu is open goes here, using the sibling selector (~) as follows
-        // Making the "X" icon using `:before` and `:after` pseudo-elements
-        & ~ .toggle-container .button-toggle {
-          box-shadow: 0 0 0 450px $purple-color-transparent, inset 0 0 0 20px $purple-color-transparent;
-          &:before {
-            transform: translateY(50%) rotate(45deg) scale(1);
-          }
-          &:after {
-            transform: translateY(-50%) rotate(-45deg) scale(1);
-          }
-        }
-
-        // Open nav
-        & ~ .nav {
-          background: transparent;
-          pointer-events: all;
-          transform: translate(130px, -130px);
-          // Restoring nav items from "lines" in the menu icon
-          .nav-item {
-            font-size: 20px;
-            color: $brand-color;
-            letter-spacing: 0;
-            height: 40px;
-            line-height: 40px;
-            margin-top: 0;
-            opacity: 1;
-            transform: scaleY(1);
-            transition: $transition-duration, opacity 0.1s;
-
-            &:hover {
-              color: $grey-color-light;
-            }
-            // Hiding the lines
-            &:before {
-              opacity: 0;
-            }
-          }
-        }
-      }
-    }
-
-    .button-toggle {
-      position: absolute;
-      top: 215px;
-      display: inline-block;
-      width: 20px;
-      height: 20px;
-      margin: 25px;
-      background-color: transparent;
-      border: none;
-      cursor: pointer;
-      border-radius: 100%;
-      transition: $transition-duration + 0.1;
-      z-index: 1;
-      @media screen and (max-width: 400px) {
-        top: 128px;
-      }
-
-      // Making the "X" icon using `:before` and `:after` pseudo-elements
-      // Initially hidden because `scale(0)` transformation
-
-      &:before, &:after {
-        position: absolute;
-        content: '';
-        top: 50%;
-        left: 0;
-        width: 100%;
-        height: 2px;
-        background-color: $brand-color;
-        border-radius: 5px;
-        transition: $transition-duration;
-      }
-
-      &:before {
-        transform: translateY(50%) rotate(45deg) scale(0);
-      }
-
-      &:after {
-        transform: translateY(-50%) rotate(-45deg) scale(0);
-      }
-    }
-
-    .nav {
-      display: inline-block;
-      position: relative;
-      top: 215px;
-      margin: 25px 25px 20px;
-      // Don't want pointer-events as menu is closed
-      pointer-events: none;
-      transition: $transition-duration;
-      z-index: 1;
-      @media screen and (max-width: 400px) {
-        top: 132px;
-      }
-
-      // Showing nav items as lines, making up the hamburger menu icon
-      .nav-item {
-        position: relative;
-        display: inline-block;
-        float: left;
-        clear: both;
-        color: transparent;
-        font-size: 14px;
-        letter-spacing: -6.2px;
-        height: 7px;
-        line-height: 7px;
-        text-transform: uppercase;
-        white-space: nowrap;
-        transform: scaleY(0.2);
-        transition: $transition-duration, opacity 1s;
-
-        // Setting delays for the nav items in close transition
-        @for $i from 1 through $items {
-          &:nth-child(#{$i}) {
-            $delay: ($i - 1) * $transition-delay;
-            transition-delay: $delay;
-            &:before {
-              transition-delay: $delay;
-            }
-          }
-        }
-
-        // Adjusting width for the first line
-        &:nth-child(1) {
-          letter-spacing: -8px;
-        }
-
-        // Adjusting width for the second line
-        &:nth-child(2) {
-          letter-spacing: -7px;
-        }
-
-        // Getting the lines for the hamburger menu icon
-        &:before {
-          position: absolute;
-          content: '';
-          top: 50%;
-          left: 0;
-          width: 100%;
-          height: 2px;
-          background-color: $brand-color;
-          transform: translateY(-50%) scaleY(5);
-          transition: $transition-duration;
-        }
-      }
-    }
-  }
-}