From 0e3ec38f0ae1e7191a3125b2f72005d434784567 Mon Sep 17 00:00:00 2001
From: "Oscar J. Rodriguez B" <josuer08@gmail.com>
Date: Tue, 17 Mar 2020 18:56:48 -0400
Subject: [PATCH] primera implementacion correcta de Bulma

---
 partials/head.ejs   | 144 +-------------------------------------------
 partials/header.ejs |  75 ++++++++++++++++++-----
 2 files changed, 62 insertions(+), 157 deletions(-)

diff --git a/partials/head.ejs b/partials/head.ejs
index dcd0623..e0ac783 100644
--- a/partials/head.ejs
+++ b/partials/head.ejs
@@ -1,146 +1,6 @@
 <!-- views/partials/head.ejs -->
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <meta charset="UTF-8">
-<title>Oscar J Rodriguez B</title>
-<!-- Personalized style -->
+<title><%= title %></title>
+<!-- Compiled bulma archive from the sass -->
 <link rel='stylesheet' href='/stylesheets/style.css'>
-<!-- bulma framework -->
-<!-- <link rel="stylesheet" href="/vendors/bulma/css/bulma.css"> -->
-<!-- fontawesome -->
-<!-- <link rel="stylesheet" href="/vendors/font-awesome/css/font-awesome.min.css"> -->
-<style>
-  body {
-    padding-bottom: 50px;
-  }
- /* de aca para abajo es para el hamburguer*/
-  a {
-    text-decoration: none;
-    color: #232323;
-
-    transition: color 0.3s ease;
-  }
-
-  a:hover {
-    color: tomato;
-  }
-
-  #menuToggle {
-    display: block;
-    position: relative;
-    top: 5px;
-    left: 15px;
-
-    z-index: 1;
-
-    -webkit-user-select: none;
-    user-select: none;
-  }
-
-  #menuToggle input {
-    display: block;
-    width: 40px;
-    height: 32px;
-    position: absolute;
-    top: -7px;
-    left: -5px;
-
-    cursor: pointer;
-
-    opacity: 0;
-    /* hide this */
-    z-index: 2;
-    /* and place it over the hamburger */
-
-    -webkit-touch-callout: none;
-  }
-
-  /*
- * Just a quick hamburger
- */
-  #menuToggle span {
-    display: block;
-    width: 33px;
-    height: 4px;
-    margin-bottom: 5px;
-    position: relative;
-
-    background: #cdcdcd;
-    border-radius: 3px;
-
-    z-index: 1;
-
-    transform-origin: 4px 0px;
-
-    transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),
-      background 1s cubic-bezier(0.77, 0.2, 0.05, 1.0),
-      opacity 0.55s ease;
-  }
-
-  #menuToggle span:first-child {
-    transform-origin: 0% 0%;
-  }
-
-  #menuToggle span:nth-last-child(2) {
-    transform-origin: 0% 100%;
-  }
-
-  /*
- * Transform all the slices of hamburger
- * into a crossmark.
- */
-  #menuToggle input:checked~span:nth-last-child(4) {
-    transform: translate(-6px, 8px) rotate(-45deg) scale(0.4, 0.8);
-    background: #ffcdcd;
-  }
-
-  /*
- * But let's hide the middle one.
- */
-  #menuToggle input:checked~span:nth-last-child(3) {
-    transform: translate(-5px, 0px) rotate(0deg) scale(0.7, 0.7);
-    background: #ffcdcd;
-  }
-
-  /*
- * Ohyeah and the last one should go the other direction
- */
-   #menuToggle input:checked~span:nth-last-child(2) {
-    transform: translate(-4px, -11px) rotate(45deg) scale(0.4, 0.8);
-    background: #ffcdcd;
-  }
-
-  /*
- * Make this absolute positioned
- * at the top left of the screen
- */
-  #menu {
-    position: absolute;
-    width: 300px;
-    margin: -100px 0 0 -50px;
-    padding: 50px;
-    padding-top: 125px;
-    height:120vh;
-    background: #343a40;
-    list-style-type: none;
-    -webkit-font-smoothing: antialiased;
-    /* to stop flickering of text in safari */
-
-    transform-origin: 0% 0%;
-    transform: translate(-100%, 0);
-
-    transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
-  }
-
-  #menu li {
-    padding: 0.5rem 0;
-    font-size: 1.5rem;
-    color: white;
-  }
-
-  /*
- * And let's slide it in from the left
- */
-  #menuToggle input:checked~ul {
-    transform: none;
-  }
-</style>
diff --git a/partials/header.ejs b/partials/header.ejs
index a07a674..d3f252c 100644
--- a/partials/header.ejs
+++ b/partials/header.ejs
@@ -1,20 +1,65 @@
-<nav role="navigation" class="navbar">
-<div id="menuToggle">
-  <input type="checkbox" />
+<div class="block">
+  <nav class="nav">
+    <div class="nav-left">
+      <a href="" class="nav-item">
+        <h1 class="title is-4"><%= title %></h1>
+      </a>
+    </div>
 
-  <span></span>
-  <span></span>
-  <span></span>
+    <div class="nav-center">
+      <a href="https://www.linkedin.com/in/josue-rodriguez-170103199/" class="nav-item">
+        <span class="icon">
+          <i class="fa fa-linkedin"></i>
+        </span>
+      </a>
+      <a href="https://github.com/josuer08/" class="nav-item">
+        <span class="icon">
+          <i class="fa fa-github"></i>
+        </span>
+      </a>
+    </div>
 
-  <ul id="menu">
-    <a href="/"><li>Home</li></a>
+    <div class="nav-right nav-menu">
+      <a href="/" class="nav-item">Home</a>
+      <!-- <a href="#" class="nav-item">About Us</a> -->
+      <a href="#" class="nav-item">Contact</a>
+    </div>
+  </nav>
+</div>
+
+<!-- SIDE MENU -->
+<div class="block">
+  <aside class="menu">
+    <p class="menu-label">
+      Label 1
+    </p>
+    <ul class="menu-list">
+      <li><a href="">Link 1</a></li>
+      <li><a href="">Link 1</a></li>
+    </ul>
+    <p class="menu-label">
+      Label 2
+    </p>
+    <ul class="menu-list">
+      <li>
+        <a class="is-active" href="">Link 1</a>
+        <ul>
+          <li><a href="">Link 1</a></li>
+          <li><a href="">Link 1</a></li>
+          <li><a href="">Link 1</a></li>
+        </ul>
+      </li>
+
+      <li><a href="">Link 2</a></li>
+      <li><a href="">Link 3</a></li>
+    </ul>
+  </aside>
+</div>
+
+
+
+    <!-- <a href="/"><li>Home</li></a>
     <a style= "display: flex;" href="https://www.linkedin.com/in/josue-rodriguez-170103199/" target="_blank"><li>GitHub web</li> <img id="ctl00_XXX" src="https://upload.wikimedia.org/wikipedia/commons/4/44/Icon_External_Link.svg" style="width:0.8em; height:0.8em; border-width:0px;" /></a>
     <a style= "display: flex;" href="https://github.com/josuer08/" target="_blank"><li>GitHub</li> <img id="ctl00_XXX" src="https://upload.wikimedia.org/wikipedia/commons/4/44/Icon_External_Link.svg" style="width:0.8em; height:0.8em; border-width:0px;" /></a>
     <a style= "display: flex;" href="https://github.com/josuer08/VSoRC" target="_blank"><li>GitHub VSoRC repo</li> <img id="ctl00_XXX" src="https://upload.wikimedia.org/wikipedia/commons/4/44/Icon_External_Link.svg" style="width:0.8em; height:0.8em; border-width:0px;" /></a>
-    <a style= "display: flex;" href="https://github.com/josuer08/vsorcdistro" target="_blank"><li>GitHub VSoRCdistro repo</li> <img id="ctl00_XXX" src="https://upload.wikimedia.org/wikipedia/commons/4/44/Icon_External_Link.svg" style="width:0.8em; height:0.8em; border-width:0px;" /></a>
-  </ul>
-</div>
-<!-- <form class="form-inline">
-  <button class="btn" type="button" onclick="location.href = '/';">Home</button>
-</form> -->
-</nav>
+    <a style= "display: flex;" href="https://github.com/josuer08/vsorcdistro" target="_blank"><li>GitHub VSoRCdistro repo</li> <img id="ctl00_XXX" src="https://upload.wikimedia.org/wikipedia/commons/4/44/Icon_External_Link.svg" style="width:0.8em; height:0.8em; border-width:0px;" /></a> -->
-- 
2.25.1