jekyll-theme-experiment 0.1.1 → 2.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
-SHA1:
-  metadata.gz: 51a9bac9db2514942193a8f1f0d1e58bcc1e3df3
-  data.tar.gz: 217d3ca62bb2f2b88d06851f15f4005fff30e5fc
+SHA256:
+  metadata.gz: 1184c3de416f0e9d1a4d467bf460d3385cc98dfd7af4e4f2e570b4966103df96
+  data.tar.gz: b49d3c1b11b2eca485dbf1f8cb4be6c47f4fbef25662df923aeefffda6f78b86
 SHA512:
-  metadata.gz: 4f5e1e3312e7d7be4062c15837c23ecfe4ff8752e1fb353b38e4bab05dc17c1b95671a59d344bb4bffa940555b3b5ca1eb4baeb590766315658c102288fce293
-  data.tar.gz: faac3d39cb0dba9174e7fcf96aecfd94b8317c5febb5aa1ebec7edfc5321e3617d694622bb0f3d84918d0f184b4273d63ba601d641e10d5fc31416c49df30473
+  metadata.gz: ead0809ee4023ee432742237f9685c0403a800276b7e6254cd7b52a66654459a4b63700ae7564a65529024b8c9d681b32342a0828704d3e5c8a1537bb2b0e262
+  data.tar.gz: 0f0e0dfcead3426dc66cba1ac912903df040bae9cfabba07e20011d4fb24ca8bf6ff60e55c52cad1994959a493d7a9cc340605d343c6c9a054841a1a9d15be23

data/README.md

@@ -0,0 +1,141 @@
+# jekyll-theme-experiment
+
+Since I started using [Jekyll](https://jekyllrb.com/) I have wanted to make a theme, so I have decided to create it to publish my portfolio.
+
+![](https://cl.ly/2F3f432B0z09/Screen%20Recording%202018-02-24%20at%2011.23%20p.m..gif)
+
+Made with ♥️ by @anxhe
+
+Your can see a demo [here](https://anxhe.github.io/jekyll-theme-experiment/)
+
+## Installation
+
+You will need to have installed [ruby](https://www.ruby-lang.org/en/documentation/installation/).
+
+Then, in a bash terminal execute the following commands:
+
+```sh
+gem install bundler jekyll
+```
+
+## Usage
+
+- Create a new Jekyll site (by running the `jekyll new` command), Jekyll installs a site that uses a gem-based theme called Minima.
+
+```bash
+jekyll new <your-blog-name>
+cd <your-blog-name>
+```
+- Now we have to replace the `minima` gem with `jekyll-theme-experiment` in `Gemfile`, as follows:
+
+```diff
+# Gemfile
+- gem "minima", "~> 2.0"
++ gem 'jekyll-theme-experiment'
+```
+
+- Then run:
+
+`bundle install`
+
+- Next, we need to replace `minima` theme key in `_config.yml` as follows:
+
+```yml
+# _config.yml
+theme: jekyll-theme-experiment
+```
+
+- Each section and content is customizable via `_config.yml` file:
+
+Replace the sample data with your own:
+
+```yml
+
+title: Your awesome title
+description: >- # this means to ignore newlines until "baseurl:"
+  Write an awesome description for your new site here. You can edit this
+  line in _config.yml. It will appear in your document head meta (for
+  Google search results) and in your feed.xml site description.
+```
+
+jekyll-theme-experiment allows you to customize the following sections in the main layout:
+
+  - about
+  - portfolio
+  - tools
+
+Add the following sample data to try it:
+
+```yml
+jekyll-theme-experiment:
+  about: # optional
+    avatar: https://robohash.org/experiment-avatar.png?size=300x300
+
+  portfolio: # optional
+    title: Portfolio
+    # Depending of the number of projects, you will need to update $projects
+    # variable in a sass file. e.g.
+    # _sass/main.scss
+    #
+    projects:
+      - name: Jekyll Theme experiment
+        link: http://example.com
+        github: https://github.com/anxhe/jekyll-theme-experiment
+        img_relative_url: /assets/example.png
+
+  tools: # optional
+    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
+a few changes:
+
+- Update `index.md` adding `title: home` to yaml's frontmatter
+- Delete `about.md`, as this theme uses similar in the home layout.
+- If you pretend use this site for blogging, you'll need to create a `blog.md` file with the following contents:
+
+![](https://cl.ly/3h3v3b210c0p/Screen%20Recording%202018-02-24%20at%2011.27%20p.m..gif)
+
+```md
+---
+layout: blog
+title: blog
+permalink: /blog/
+---
+```
+
+Now we're ready, start the server:
+
+```sh
+bundle exec jekyll serve
+```
+
+Finally, open  http://127.0.0.1:4000/ in the browser, and that's it, feel free to poke around.
+
+## Customize navigation links
+
+**Taken from minima theme**
+
+This allows you to set which pages you want to appear in the navigation area and configure order of the links. For instance, to only link to the about and the portfolio page, add the following to your `_config.yml`:
+
+```yml
+header_pages:
+  - about.md
+  - portfolio.md
+```
+
+## Contributing
+
+Bug reports and pull requests are welcome on GitHub at https://github.com/anxhe/jekyll-theme-experiment/issues. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [Contributor Covenant](http://contributor-covenant.org) code of conduct.
+
+## Credits
+
+- [Jekyll](https://github.com/jekyll/jekyll) and [Minima](https://github.com/jekyll/minima) - Thanks to their creators and contributors
+- [Vitaly Rubtsov](https://dribbble.com/Vitwai) for inspiration on  his [hamburguer menu animation](https://dribbble.com/shots/2293621-Hamburger-Menu-Animation)
+- [Luis Manuel](https://scotch.io/@lmgonzalves) for his implementation of the above hamburger menu on [this tutorial](https://scotch.io/tutorials/building-a-morphing-hamburger-menu-with-css)
+
+## License
+
+The theme is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).

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,10 +1,10 @@
 <nav class="navbar">
-  {% assign default_paths = site.pages | map: "path" %}
+  {% 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.pages | where: "path", path | first %}
+      {% assign my_page = site.html_pages | where: "path", path | first %}
       {% if my_page.title %}
         <a class="{% if page.url == my_page.url %}active{% endif %}" href="{{ my_page.url | relative_url }}">
           {{ my_page.title | escape }}

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 }}">
+              <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 }}"><i class="fas fa-link"></i></a>
-                <a class="nav-item" href="{{ project.github }}"><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,12 +1,12 @@
-{% 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 %}
-      <img src="{{ "{{tool.relative_url}}" | relative_url }}" alt="">
+      {% for tool in site.jekyll-theme-experiment.tools.icons %}
+      <img src="{{ tool.relative_url | relative_url }}" alt="">
       {% endfor %}
     </div>
   </div>

data/_layouts/home.html

@@ -5,16 +5,16 @@ layout: default
 <div class="l-wrap l-around">
   <div class="l-content information-box">
     <hr class="hr-decorator">
-    {% if  site.theme_jekyll-theme-experiment.about.title %}
-      <h1>{{ site.theme_jekyll-theme-experiment.about.title }}</h1>
+    {% if  site.title %}
+      <h1>{{ site.title }}</h1>
     {% endif %}
-    {% if  site.theme_jekyll-theme-experiment.about.description %}
-      <h3>{{ site.theme_jekyll-theme-experiment.about.description }}</h3>
+    {% if  site.description %}
+      <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/_layouts/page.html

@@ -2,4 +2,8 @@
 layout: default
 ---
 
-{{ content }}
+<div class="l-wrap">
+  <div class="post">
+    {{ content }}
+  </div>
+</div>

data/_layouts/post.html

@@ -5,7 +5,7 @@ layout: default
 <article class="l-wrap">
   <div class="l-center-column head-post">
     <hr class="hr-decorator">
-    <h1 class="title">{{ site.name }}</h1>
+    <h1 class="title">{{ page.title | escape }}</h1>
   </div>
   <div class="post">
     {{ content }}

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/_sass/experiment.scss

@@ -1,7 +1,6 @@
 @charset "utf-8";
 
 // Define defaults for each variable.
-
 $base-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !default;
 $base-font-size:   16px !default;
 $base-font-weight: 400 !default;
@@ -29,18 +28,17 @@ $on-phone:         400px !default;
 $on-palm:          600px !default;
 $on-laptop:        800px !default;
 
-
 // Import partials.
 @import
   "experiment/reset",
   "experiment/syntax-highlighting",
   "experiment/layout",
-  //componentes
-  "experiment/modules/information-box",
-  "experiment/modules/navbar",
+  //components
   "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/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

@@ -2,10 +2,7 @@
 # Only the main Sass file needs front matter (the dashes are enough)
 ---
 
-// Configure number of portfolio projects
-$projects: 3;
-
-// Configure number of links inside each project
-$items: 4;
+// Number of projects inside of portfolio
+$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: 0.1.1
+  version: 2.0.0
 platform: ruby
 authors:
 - Angelina Moreno Robledo
-autorequire: 
+autorequire:
 bindir: bin
 cert_chain: []
-date: 2018-02-23 00:00:00.000000000 Z
+date: 2021-11-08 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -16,43 +16,43 @@ dependencies:
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '3.6'
+        version: '4'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '3.6'
+        version: '4'
 - !ruby/object:Gem::Dependency
   name: bundler
   requirement: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '1.12'
+        version: '2.2'
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '1.12'
+        version: '2.2'
 - !ruby/object:Gem::Dependency
   name: rake
   requirement: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '10.0'
+        version: '13.0'
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '10.0'
-description: 
+        version: '13.0'
+description:
 email:
 - anyelinamoreno@gmail.com
 executables: []
@@ -60,6 +60,7 @@ extensions: []
 extra_rdoc_files: []
 files:
 - LICENSE.txt
+- README.md
 - _includes/footer.html
 - _includes/head.html
 - _includes/header.html
@@ -78,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
@@ -122,29 +120,29 @@ 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:
 - MIT
 metadata: {}
-post_install_message: 
+post_install_message:
 rdoc_options: []
 require_paths:
 - lib
 required_ruby_version: !ruby/object:Gem::Requirement
   requirements:
-  - - ">="
+  - - "~>"
     - !ruby/object:Gem::Version
-      version: '0'
+      version: '3.0'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
   - - ">="
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubyforge_project: 
-rubygems_version: 2.6.13
-signing_key: 
+rubygems_version: 3.2.22
+signing_key:
 specification_version: 4
 summary: This is a jekyll theme made with love
 test_files: []

data/_sass/experiment/modules/_project_portafolio.scss

@@ -1,222 +0,0 @@
-$transition-duration: 0.5s;
-$transition-delay: 0.05s;
-
-.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;
-        }
-
-        // Adjusting from the fourth element onwards
-        &:nth-child(n + 4) {
-          letter-spacing: -8px;
-          margin-top: -7px;
-          opacity: 0;
-        }
-
-        // 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;
-        }
-      }
-    }
-  }
-}