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