grids/screen.css at master · profstolley/grids · 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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
/* Mobile Styles (apply to non-mobile also) */

html { /*Copy code (line-height, font-size) from grid.css when done experimenting.*/}


/* Page Divisions - NO LAYOUT HERE; Think Linear, Mobile Design */
div#header {}
div#content {}
div#main {}
div#supporting {}
ul#navigation {}
div#footer {}

/* Headings */
h1,h2,h3,h4,h5,h6 { font-family: Georgia, "Times New Roman", serif; } /* Make all headings Georgia/serif */

h1 {}
h2 {}

/* Paragraphs */
p.tagline {}
div#content p {}

/* Lists */
div#content ul {}
div#content ul > li {}


/* Phrase Styles */

/* Hide Stuff */
ul.accessibility { display: none; }


/* Basic Media Query for Screens wider than 1010 pixels */

@media screen and (min-width: 1010px) {

  div#page { /*Copy code from grid.css when done experimenting.*/ }

  /*Page Divisions*/

  /*
    Helpful hint:
    While working to position page divisions into regions,
    use the rgba(); color syntax to keep the grid images
    visible, e.g.,

    div#header { background-color: rgba(255,0,0,.2) }

    The forth/alpha value ranges from 0 (completely transparent)
    to 1.0 (completely opaque).
  */
  div#header {}
  div#content {}
  div#main {}
  div#supporting {}
  ul#navigation {}
  div#footer {}

/*Close curly-brace from media query:*/
}