Hamburguer menu, actualizacion

[VSoRC/.git] / partials / head.ejs

diff --git a/partials/head.ejs b/partials/head.ejs
index 9d76f1eb9a656b71bf97d90c9d8eb7e29bb3fb63..9a12a0d327daa5a6eff7a4dd04f55c71eb8f6b6f 100644 (file)
--- a/partials/head.ejs
+++ b/partials/head.ejs
@@ -5,5 +5,138 @@
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
 <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
 <style>
-    body    { padding-bottom:50px; }
+  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 0.5s 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(-7px, 8px) rotate(-45deg) scale(0.5, 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(-5px, -10px) rotate(45deg) scale(0.5, 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: 10px 0;
+    font-size: 22px;
+    color: white;
+  }
+
+  /*
+ * And let's slide it in from the left
+ */
+  #menuToggle input:checked~ul {
+    transform: none;
+  }
 </style>