Skip to content

Commit 69f594c

Browse files
pandringapandringa
committed
adjust css
1 parent 86fd910 commit 69f594c

File tree

3 files changed

+54
-40
lines changed

3 files changed

+54
-40
lines changed

‎css/less/style.less

+9-1
Original file line numberDiff line numberDiff line change
@@ -334,7 +334,7 @@ html, body {
334334
}
335335
}
336336

337-
ul#grid {
337+
ul.grid {
338338
list-style: none;
339339
overflow-y: scroll;
340340
overflow-x: hidden;
@@ -343,6 +343,7 @@ html, body {
343343
left: 0;
344344
right: 0;
345345
bottom: 0;
346+
transition: 0.5s opacity linear;
346347

347348
li {
348349
margin-right: 15px;
@@ -431,6 +432,13 @@ html, body {
431432
}
432433
}
433434
}
435+
436+
&.hidden{
437+
opacity: 0;
438+
}
439+
&.shown{
440+
opacity: 1;
441+
}
434442
}
435443

436444
}

‎css/style.css

+39-33
Original file line numberDiff line numberDiff line change
@@ -118,7 +118,6 @@ body #dashboard aside section header {
118118
html #dashboard aside section div,
119119
body #dashboard aside section div {
120120
cursor: pointer;
121-
background-color: white;
122121
height: 100px;
123122
display: block;
124123
color: #979797;
@@ -319,10 +318,8 @@ html #dashboard section#main #movies #thin #sort:after,
319318
body #dashboard section#main #movies #thin #sort:after {
320319
content: " ";
321320
/* 1 */
322-
323321
display: table;
324322
/* 2 */
325-
326323
}
327324
html #dashboard section#main #movies #thin #sort:after,
328325
body #dashboard section#main #movies #thin #sort:after {
@@ -352,8 +349,8 @@ body #dashboard section#main #movies #thin #sort button.s {
352349
background-color: #50e3c2;
353350
color: white;
354351
}
355-
html #dashboard section#main #movies ul#grid,
356-
body #dashboard section#main #movies ul#grid {
352+
html #dashboard section#main #movies ul.grid,
353+
body #dashboard section#main #movies ul.grid {
357354
list-style: none;
358355
overflow-y: scroll;
359356
overflow-x: hidden;
@@ -362,16 +359,17 @@ body #dashboard section#main #movies ul#grid {
362359
left: 0;
363360
right: 0;
364361
bottom: 0;
362+
transition: 0.5s opacity linear;
365363
}
366-
html #dashboard section#main #movies ul#grid li,
367-
body #dashboard section#main #movies ul#grid li {
364+
html #dashboard section#main #movies ul.grid li,
365+
body #dashboard section#main #movies ul.grid li {
368366
margin-right: 15px;
369367
display: inline-block;
370368
padding-bottom: 80px;
371369
position: relative;
372370
}
373-
html #dashboard section#main #movies ul#grid li .overlay,
374-
body #dashboard section#main #movies ul#grid li .overlay {
371+
html #dashboard section#main #movies ul.grid li .overlay,
372+
body #dashboard section#main #movies ul.grid li .overlay {
375373
display: none;
376374
position: absolute;
377375
top: 0;
@@ -380,8 +378,8 @@ body #dashboard section#main #movies ul#grid li .overlay {
380378
height: 360px;
381379
background-color: rgba(0, 0, 0, 0.7);
382380
}
383-
html #dashboard section#main #movies ul#grid li .overlay span,
384-
body #dashboard section#main #movies ul#grid li .overlay span {
381+
html #dashboard section#main #movies ul.grid li .overlay span,
382+
body #dashboard section#main #movies ul.grid li .overlay span {
385383
height: 250px;
386384
width: 200px;
387385
color: white;
@@ -390,74 +388,82 @@ body #dashboard section#main #movies ul#grid li .overlay span {
390388
line-height: 1.5;
391389
display: block;
392390
}
393-
html #dashboard section#main #movies ul#grid li .overlay .ex,
394-
body #dashboard section#main #movies ul#grid li .overlay .ex {
391+
html #dashboard section#main #movies ul.grid li .overlay .ex,
392+
body #dashboard section#main #movies ul.grid li .overlay .ex {
395393
width: 37px;
396394
cursor: pointer;
397395
padding: 16px;
398396
float: left;
399397
height: 37px;
400398
}
401-
html #dashboard section#main #movies ul#grid li .overlay .v,
402-
body #dashboard section#main #movies ul#grid li .overlay .v {
399+
html #dashboard section#main #movies ul.grid li .overlay .v,
400+
body #dashboard section#main #movies ul.grid li .overlay .v {
403401
width: 37px;
404402
cursor: pointer;
405403
padding: 16px;
406404
float: right;
407405
height: 37px;
408406
}
409-
html #dashboard section#main #movies ul#grid li img.poster,
410-
body #dashboard section#main #movies ul#grid li img.poster {
407+
html #dashboard section#main #movies ul.grid li img.poster,
408+
body #dashboard section#main #movies ul.grid li img.poster {
411409
width: 240px;
412410
height: 360px;
413411
padding-bottom: 10px;
414412
display: block;
415413
}
416-
html #dashboard section#main #movies ul#grid li .ttl,
417-
body #dashboard section#main #movies ul#grid li .ttl {
414+
html #dashboard section#main #movies ul.grid li .ttl,
415+
body #dashboard section#main #movies ul.grid li .ttl {
418416
font-weight: 300;
419417
height: 40px;
420418
line-height: 40px;
421419
}
422-
html #dashboard section#main #movies ul#grid li .ttl h1,
423-
body #dashboard section#main #movies ul#grid li .ttl h1 {
420+
html #dashboard section#main #movies ul.grid li .ttl h1,
421+
body #dashboard section#main #movies ul.grid li .ttl h1 {
424422
vertical-align: middle;
425423
display: inline-block;
426424
font-size: 20pt;
427425
}
428-
html #dashboard section#main #movies ul#grid li .ttl .year,
429-
body #dashboard section#main #movies ul#grid li .ttl .year {
426+
html #dashboard section#main #movies ul.grid li .ttl .year,
427+
body #dashboard section#main #movies ul.grid li .ttl .year {
430428
vertical-align: middle;
431429
display: inline-block;
432430
padding: 0 2px;
433431
color: #979797;
434432
font-size: 10pt;
435433
}
436-
html #dashboard section#main #movies ul#grid li .ttl .tomato,
437-
body #dashboard section#main #movies ul#grid li .ttl .tomato,
438-
html #dashboard section#main #movies ul#grid li .ttl .rotten,
439-
body #dashboard section#main #movies ul#grid li .ttl .rotten {
434+
html #dashboard section#main #movies ul.grid li .ttl .tomato,
435+
body #dashboard section#main #movies ul.grid li .ttl .tomato,
436+
html #dashboard section#main #movies ul.grid li .ttl .rotten,
437+
body #dashboard section#main #movies ul.grid li .ttl .rotten {
440438
vertical-align: middle;
441439
display: inline-block;
442440
width: 16px;
443441
height: 16px;
444442
background-position: 0px 0x;
445443
background-size: 100% 100%;
446444
}
447-
html #dashboard section#main #movies ul#grid li .ttl .tomato,
448-
body #dashboard section#main #movies ul#grid li .ttl .tomato {
445+
html #dashboard section#main #movies ul.grid li .ttl .tomato,
446+
body #dashboard section#main #movies ul.grid li .ttl .tomato {
449447
background-image: url("../img/fresh.png");
450448
}
451-
html #dashboard section#main #movies ul#grid li .ttl .rotten,
452-
body #dashboard section#main #movies ul#grid li .ttl .rotten {
449+
html #dashboard section#main #movies ul.grid li .ttl .rotten,
450+
body #dashboard section#main #movies ul.grid li .ttl .rotten {
453451
background-image: url("../img/rotten.png");
454452
}
455-
html #dashboard section#main #movies ul#grid li .ttl .teeny,
456-
body #dashboard section#main #movies ul#grid li .ttl .teeny {
453+
html #dashboard section#main #movies ul.grid li .ttl .teeny,
454+
body #dashboard section#main #movies ul.grid li .ttl .teeny {
457455
vertical-align: middle;
458456
display: inline-block;
459457
font-size: 10pt;
460458
}
459+
html #dashboard section#main #movies ul.grid.hidden,
460+
body #dashboard section#main #movies ul.grid.hidden {
461+
opacity: 0;
462+
}
463+
html #dashboard section#main #movies ul.grid.shown,
464+
body #dashboard section#main #movies ul.grid.shown {
465+
opacity: 1;
466+
}
461467
html #stage,
462468
body #stage {
463469
overflow-x: hidden;

‎index.html

+6-6
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,8 @@
1212

1313
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
1414

15-
<link rel="stylesheet" href="css/reset.css">
16-
<link rel="stylesheet" href="css/style.css">
15+
<link rel="stylesheet" href="static/css/reset.css">
16+
<link rel="stylesheet" href="static/css/style.css">
1717
</head>
1818
<body>
1919
<!--[if lt IE 7]>
@@ -106,9 +106,9 @@ <h3>The New York Times</h3>
106106

107107
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
108108
<script src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
109-
<script src="js/plugins.js"></script>
110-
<script src="js/vendor/hotkeys.js"></script>
111-
<script src="js/jquery-scrollto.js"></script>
112-
<script src="js/main.js"></script>
109+
<script src="static/js/plugins.js"></script>
110+
<script src="static/js/vendor/hotkeys.js"></script>
111+
<script src="static/js/jquery-scrollto.js"></script>
112+
<script src="static/js/main.js"></script>
113113
</body>
114114
</html>

0 commit comments

Comments
 (0)