partials/head.ejs

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