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