normalize.css/style.css at master · arraydesign/normalize.css · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
@import "css/jquery.fancybox.css";
@import "css/normalize.css";
@import "css/global.css";
@import "css/layout.css";

ul#grid{background:url("css/assets/BG-grid.gif") repeat scroll left top green;display:none;height:100%;list-style-type:none;margin:0 auto;opacity:.3;padding:0;position:fixed;top:0;left:0px;width:100%;z-index:1000;font-size:8px;line-height:8px;min-width:1026px;max-width:1200px;right:0;}
ul#grid li{background:url("css/assets/BG-grid.gif") repeat scroll left top red;height:100%;display:inline;float:left;padding:0;margin-left:1.25%;margin-right:1.25%;width:5.625%}
ul#grid li:first-child{margin-left:2.5%}


/* MOBILE
-------------------------------------------------------------- */

@media screen and (max-width: 592px) {
ul#grid{background-color:blue;min-width:320px;max-width:480px}
ul#grid li{margin-left:3.5%;margin-right:3.5%;width:24%}
ul#grid li:first-child{margin-left:7%}
ul#grid li:nth-child(n+4){display:none}
}


/* SMALL
-------------------------------------------------------------- */

@media screen and (min-width: 593px) and (max-width: 849px) {
ul#grid{background-color:yellow;min-width:593px;max-width:768px}
ul#grid li{margin-left:2%;margin-right:2%;width:12%}
ul#grid li:first-child{margin-left:4%}
ul#grid li:nth-child(n+7){display:none}
}


/* MEDIUM
-------------------------------------------------------------- */

@media screen and (min-width: 850px) and (max-width: 1025px) {
ul#grid{background-color:gray;min-width:850px;max-width:1025px;}
ul#grid li{margin-left:1.4%;margin-right:1.4%;width:8%}
ul#grid li:first-child{margin-left:2.8%}
ul#grid li:nth-child(n+10){display:none}
}