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