|
@@ -1,5 +1,4 @@
|
1
|
1
|
/* POLICES */
|
2
|
|
-
|
3
|
2
|
@font-face {
|
4
|
3
|
font-family: 'Poppins';
|
5
|
4
|
src: url('https://fontlibrary.org//assets/fonts/poppins/fed70e8826194d3ab847c777f43c10ea/3352653dedd571bbc490c8be132b38cd/PoppinsLight.ttf') format('truetype');
|
|
@@ -149,19 +148,12 @@ h1, h2, h3 {
|
149
|
148
|
}
|
150
|
149
|
|
151
|
150
|
/* style des éléments a l'intérieur des cartes */
|
152
|
|
-
|
153
|
|
-.card {
|
154
|
|
-
|
155
|
|
-}
|
|
151
|
+.card {}
|
156
|
152
|
|
157
|
153
|
.steps {
|
158
|
154
|
list-style: none;
|
159
|
155
|
}
|
160
|
156
|
|
161
|
|
-
|
162
|
|
-
|
163
|
|
-
|
164
|
|
-
|
165
|
157
|
.advice {
|
166
|
158
|
margin: 3vw;
|
167
|
159
|
max-width: 600px;
|
|
@@ -170,6 +162,12 @@ h1, h2, h3 {
|
170
|
162
|
padding: 20px;
|
171
|
163
|
}
|
172
|
164
|
|
|
165
|
+.ascii {
|
|
166
|
+ font-size: 60%;
|
|
167
|
+ display: inline-block;
|
|
168
|
+ margin: 0 25px 20px 0;
|
|
169
|
+}
|
|
170
|
+
|
173
|
171
|
a {
|
174
|
172
|
text-decoration: none;
|
175
|
173
|
}
|
|
@@ -178,9 +176,10 @@ footer {
|
178
|
176
|
bottom: 0px;
|
179
|
177
|
width: 100%;
|
180
|
178
|
min-height: 150px;
|
181
|
|
- background: rgba(19,19,19,.8);
|
|
179
|
+ background: rgba(19, 19, 19, .8);
|
182
|
180
|
padding: 30px 50px;
|
183
|
181
|
display: flex;
|
|
182
|
+ z-index: 2;
|
184
|
183
|
flex-direction: row;
|
185
|
184
|
justify-content: space-around;
|
186
|
185
|
align-items: center;
|
|
@@ -207,12 +206,56 @@ footer .pcom a {
|
207
|
206
|
font-size: 150%;
|
208
|
207
|
}
|
209
|
208
|
|
210
|
|
-
|
211
|
209
|
/* PAGE DE CODE */
|
212
|
|
-code:not(.inline), code:not(.command) {
|
|
210
|
+code {
|
|
211
|
+ background: rgba(19, 19, 19, .8);
|
|
212
|
+ margin-top: 20px;
|
|
213
|
+ font-family: monospace;
|
|
214
|
+ color: #ffffcc;
|
|
215
|
+ display: inline;
|
|
216
|
+ padding: 2px 6px;
|
|
217
|
+ border-radius: 4px;
|
|
218
|
+ font-size: 90%;
|
|
219
|
+ font-style: normal;
|
|
220
|
+}
|
|
221
|
+
|
|
222
|
+.output, samp {
|
|
223
|
+ display: block;
|
|
224
|
+ background: rgba(19, 19, 19, .8);
|
|
225
|
+ margin-top: 20px;
|
|
226
|
+ font-family: monospace;
|
|
227
|
+ color: #ccffcc;
|
|
228
|
+ border-radius: 12px;
|
|
229
|
+ tab-size: 2;
|
|
230
|
+ white-space: pre;
|
|
231
|
+ width: 80%;
|
|
232
|
+ display: block;
|
|
233
|
+ overflow-x: scroll;
|
|
234
|
+ font-size: 120%;
|
|
235
|
+ padding: 20px 50px 22px 25px;
|
|
236
|
+ border-left: 10px solid #494;
|
|
237
|
+ line-height: 1.55;
|
|
238
|
+ transition: all .3s;
|
|
239
|
+}
|
|
240
|
+
|
|
241
|
+code.block {
|
|
242
|
+ border-radius: 12px;
|
|
243
|
+ tab-size: 2;
|
|
244
|
+ white-space: pre;
|
|
245
|
+ display: block;
|
|
246
|
+ overflow-x: scroll;
|
|
247
|
+ font-size: 120%;
|
|
248
|
+ padding: 20px 50px 22px 25px;
|
|
249
|
+ border-left: 10px solid #944;
|
|
250
|
+ line-height: 1.55;
|
|
251
|
+ transition: all .3s;
|
|
252
|
+}
|
|
253
|
+
|
|
254
|
+code.page {
|
|
255
|
+ border-radius: 12px;
|
213
|
256
|
position: relative;
|
214
|
257
|
z-index: 2;
|
215
|
|
- background: rgba(19,19,19,.8);
|
|
258
|
+ background: rgba(19, 19, 19, .8);
|
216
|
259
|
width: min(94vw, 900px);
|
217
|
260
|
border-radius: 12px;
|
218
|
261
|
margin-left: 3vw;
|
|
@@ -220,16 +263,13 @@ code:not(.inline), code:not(.command) {
|
220
|
263
|
font-family: monospace;
|
221
|
264
|
display: block;
|
222
|
265
|
color: #ffffcc;
|
223
|
|
-
|
224
|
266
|
tab-size: 2;
|
225
|
267
|
white-space: pre;
|
226
|
|
-
|
227
|
268
|
overflow-x: scroll;
|
228
|
269
|
font-size: 120%;
|
229
|
270
|
padding: 20px 50px 22px 25px;
|
230
|
|
- border-left: 10px solid #444;
|
|
271
|
+ border-left: 10px solid #884;
|
231
|
272
|
line-height: 1.55;
|
232
|
|
-
|
233
|
273
|
transition: all .3s;
|
234
|
274
|
}
|
235
|
275
|
|
|
@@ -302,12 +342,12 @@ span.letvar {
|
302
|
342
|
color: rgb(128, 203, 53);
|
303
|
343
|
}
|
304
|
344
|
|
305
|
|
-span.uident{
|
|
345
|
+span.uident {
|
306
|
346
|
color: rgb(203, 203, 53);
|
307
|
347
|
}
|
308
|
348
|
|
309
|
349
|
code:not(.inline).light {
|
310
|
|
- background: rgba(250,250,250,0.8);
|
|
350
|
+ background: rgba(250, 250, 250, 0.8);
|
311
|
351
|
color: black;
|
312
|
352
|
border-color: #aaa;
|
313
|
353
|
transition: all .3s;
|
|
@@ -358,72 +398,63 @@ span.file {
|
358
|
398
|
font-weight: bold;
|
359
|
399
|
}
|
360
|
400
|
|
361
|
|
-var, samp, code.inline, code.kw, code.command {
|
362
|
|
- display: inline-block;
|
363
|
|
- padding: 2px 8px;
|
364
|
|
- background: #222;
|
365
|
|
- color: #ffffcc ;
|
366
|
|
- border-radius: 4px;
|
367
|
|
- font-size: 90%;
|
368
|
|
- font-family: monospace;
|
369
|
|
- font-style: normal;
|
370
|
|
- }
|
371
|
|
-
|
372
|
401
|
pre {
|
373
|
402
|
margin: 20px 0;
|
374
|
403
|
}
|
375
|
404
|
|
376
|
405
|
img.space {
|
377
|
|
- margin-left: auto;
|
378
|
|
- margin-right: auto;
|
379
|
|
- display: block;
|
380
|
|
- margin-top: 1.5ex;
|
381
|
|
- margin-bottom: 1.5ex;
|
382
|
|
- }
|
|
406
|
+ margin-left: auto;
|
|
407
|
+ margin-right: auto;
|
|
408
|
+ display: block;
|
|
409
|
+ margin-top: 1.5ex;
|
|
410
|
+ margin-bottom: 1.5ex;
|
|
411
|
+}
|
383
|
412
|
|
384
|
413
|
span.lbutton {
|
385
|
|
- position:relative;
|
|
414
|
+ position: relative;
|
386
|
415
|
margin-right: 6px;
|
387
|
416
|
}
|
388
|
417
|
|
389
|
|
-span.lbutton:before{
|
390
|
|
- content:"";
|
391
|
|
- z-index:-1;
|
392
|
|
- left:-0.5em;
|
393
|
|
- top:-0.1em;
|
394
|
|
- border-width:2px;
|
395
|
|
- border-style:solid;
|
396
|
|
- border-color:rgb(138, 138, 10);
|
397
|
|
- position:absolute;
|
398
|
|
- border-right-color:transparent;
|
399
|
|
- width:100%;
|
400
|
|
- height:1em;
|
401
|
|
- transform:rotate(2deg);
|
402
|
|
- opacity:0.7;
|
403
|
|
- border-radius:50%;
|
404
|
|
- padding:0.1em 0.25em;
|
405
|
|
-}
|
406
|
|
-span.lbutton:after{
|
407
|
|
- content:"";
|
408
|
|
- z-index:-1;
|
409
|
|
- left:-0.5em;
|
410
|
|
- top:0.1em;
|
411
|
|
- padding:0.1em 0.25em;
|
412
|
|
- border-width:2px;
|
413
|
|
- border-style:solid;
|
414
|
|
- border-color:rgb(138, 138, 10);
|
415
|
|
- border-left-color:transparent;
|
416
|
|
- border-top-color:transparent;
|
417
|
|
- position:absolute;
|
418
|
|
- width:100%;
|
419
|
|
- height:1em;
|
420
|
|
- transform:rotate(-1deg);
|
421
|
|
- opacity:0.7;
|
422
|
|
- border-radius:50%;
|
|
418
|
+span.lbutton:before {
|
|
419
|
+ content: "";
|
|
420
|
+ z-index: -1;
|
|
421
|
+ left: -0.5em;
|
|
422
|
+ top: -0.1em;
|
|
423
|
+ border-width: 2px;
|
|
424
|
+ border-style: solid;
|
|
425
|
+ border-color: rgb(138, 138, 10);
|
|
426
|
+ position: absolute;
|
|
427
|
+ border-right-color: transparent;
|
|
428
|
+ width: 100%;
|
|
429
|
+ height: 1em;
|
|
430
|
+ transform: rotate(2deg);
|
|
431
|
+ opacity: 0.7;
|
|
432
|
+ border-radius: 50%;
|
|
433
|
+ padding: 0.1em 0.25em;
|
|
434
|
+}
|
|
435
|
+
|
|
436
|
+span.lbutton:after {
|
|
437
|
+ content: "";
|
|
438
|
+ z-index: -1;
|
|
439
|
+ left: -0.5em;
|
|
440
|
+ top: 0.1em;
|
|
441
|
+ padding: 0.1em 0.25em;
|
|
442
|
+ border-width: 2px;
|
|
443
|
+ border-style: solid;
|
|
444
|
+ border-color: rgb(138, 138, 10);
|
|
445
|
+ border-left-color: transparent;
|
|
446
|
+ border-top-color: transparent;
|
|
447
|
+ position: absolute;
|
|
448
|
+ width: 100%;
|
|
449
|
+ height: 1em;
|
|
450
|
+ transform: rotate(-1deg);
|
|
451
|
+ opacity: 0.7;
|
|
452
|
+ border-radius: 50%;
|
423
|
453
|
}
|
424
|
454
|
|
425
|
455
|
aside.yfold {
|
426
|
456
|
margin: 20px 0;
|
|
457
|
+ border-radius: 12px;
|
427
|
458
|
}
|
428
|
459
|
|
429
|
460
|
aside .yfold-title, .card .yfold-title {
|
|
@@ -433,21 +464,19 @@ aside .yfold-title, .card .yfold-title {
|
433
|
464
|
}
|
434
|
465
|
|
435
|
466
|
/* MEDIA */
|
436
|
|
-
|
437
|
467
|
@media (min-width: 1400px) {
|
438
|
|
-footer {
|
439
|
|
-flex-direction: column;
|
440
|
|
-max-height: 400px;
|
441
|
|
-position: absolute;
|
442
|
|
-top: calc(20px + 150px);
|
443
|
|
-right: 3vw;
|
444
|
|
-width: calc(91vw - 900px);
|
445
|
|
-border-radius: 12px;
|
446
|
|
-}
|
|
468
|
+ footer {
|
|
469
|
+ flex-direction: column;
|
|
470
|
+ max-height: 400px;
|
|
471
|
+ position: absolute;
|
|
472
|
+ top: calc(20px + 150px);
|
|
473
|
+ right: 3vw;
|
|
474
|
+ width: calc(91vw - 900px);
|
|
475
|
+ border-radius: 12px;
|
|
476
|
+ }
|
447
|
477
|
}
|
448
|
478
|
|
449
|
479
|
/* ANIMATION */
|
450
|
|
-
|
451
|
480
|
@-webkit-keyframes bgMove {
|
452
|
481
|
0% {
|
453
|
482
|
background-position: 0% 50%
|
|
@@ -538,6 +567,4 @@ border-radius: 12px;
|
538
|
567
|
100% {
|
539
|
568
|
transform: translateX(0%);
|
540
|
569
|
}
|
541
|
|
-
|
542
|
|
-
|
543
|
570
|
}
|