partials/head.ejs

   1 <!-- views/partials/head.ejs -->
   2 <meta charset="UTF-8">
   3 <title>VSoRC</title>
   4 <!-- CSS (load bootstrap from a CDN) -->
   5 <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">
   6 <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
   7 <style>
   8   body {
   9     padding-bottom: 50px;
  10   }
  11  /* de aca para abajo es para el hamburguer*/
  12   a {
  13     text-decoration: none;
  14     color: #232323;
  15
  16     transition: color 0.3s ease;
  17   }
  18
  19   a:hover {
  20     color: tomato;
  21   }
  22
  23   #menuToggle {
  24     display: block;
  25     position: relative;
  26     top: 5px;
  27     left: 15px;
  28
  29     z-index: 1;
  30
  31     -webkit-user-select: none;
  32     user-select: none;
  33   }
  34
  35   #menuToggle input {
  36     display: block;
  37     width: 40px;
  38     height: 32px;
  39     position: absolute;
  40     top: -7px;
  41     left: -5px;
  42
  43     cursor: pointer;
  44
  45     opacity: 0;
  46     /* hide this */
  47     z-index: 2;
  48     /* and place it over the hamburger */
  49
  50     -webkit-touch-callout: none;
  51   }
  52
  53   /*
  54  * Just a quick hamburger
  55  */
  56   #menuToggle span {
  57     display: block;
  58     width: 33px;
  59     height: 4px;
  60     margin-bottom: 5px;
  61     position: relative;
  62
  63     background: #cdcdcd;
  64     border-radius: 3px;
  65
  66     z-index: 1;
  67
  68     transform-origin: 4px 0px;
  69
  70     transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),
  71       background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),
  72       opacity 0.55s ease;
  73   }
  74
  75   #menuToggle span:first-child {
  76     transform-origin: 0% 0%;
  77   }
  78
  79   #menuToggle span:nth-last-child(2) {
  80     transform-origin: 0% 100%;
  81   }
  82
  83   /*
  84  * Transform all the slices of hamburger
  85  * into a crossmark.
  86  */
  87   #menuToggle input:checked~span:nth-last-child(4) {
  88     transform: translate(-7px, 8px) rotate(-45deg) scale(0.5, 0.8);
  89     background: #ffcdcd;
  90   }
  91
  92   /*
  93  * But let's hide the middle one.
  94  */
  95   #menuToggle input:checked~span:nth-last-child(3) {
  96     transform: translate(-5px, 0px) rotate(0deg) scale(0.7, 0.7);
  97     background: #ffcdcd;
  98   }
  99
 100   /*
 101  * Ohyeah and the last one should go the other direction
 102  */
 103    #menuToggle input:checked~span:nth-last-child(2) {
 104     transform: translate(-5px, -10px) rotate(45deg) scale(0.5, 0.8);
 105     background: #ffcdcd;
 106   }
 107
 108   /*
 109  * Make this absolute positioned
 110  * at the top left of the screen
 111  */
 112   #menu {
 113     position: absolute;
 114     width: 300px;
 115     margin: -100px 0 0 -50px;
 116     padding: 50px;
 117     padding-top: 125px;
 118     height:120vh;
 119     background: #343a40;
 120     list-style-type: none;
 121     -webkit-font-smoothing: antialiased;
 122     /* to stop flickering of text in safari */
 123
 124     transform-origin: 0% 0%;
 125     transform: translate(-100%, 0);
 126
 127     transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
 128   }
 129
 130   #menu li {
 131     padding: 10px 0;
 132     font-size: 22px;
 133     color: white;
 134   }
 135
 136   /*
 137  * And let's slide it in from the left
 138  */
 139   #menuToggle input:checked~ul {
 140     transform: none;
 141   }
 142 </style>