Documentacion agregada - previo a la presentacion
[VSoRC/.git] / 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 <link rel="stylesheet" type="text/css" href="/styles/main.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>