jrivas12.github.io/styles2.css at main · jrivas12/jrivas12.github.io · 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
64

/* ===============================
   Mobile Styles: 0px to 640px
   ===============================
*/
@media only screen and (max-width: 640px) {

    section#main {
       width: 100%;
    }

    section#right {
       width: 100%;
    }

    a#navicon {
       display: block;
    }

    header nav ul {
       display: none;
    }

    header nav ul li {
       font-size: 1em;
       line-height: 1.3em;
       height: 1.3em;
    }

    a#navicon:hover+ul, header nav ul:hover {
       display: block;
    }
 }

 /* =============================================
    Tablet and Desktop Styles: greater than 640px
    =============================================
 */
 @media only screen and (min-width: 641px) {

    section#main {
       float: left;
       width: 70%;
    }

    section#right {
       float: left;
       width: 30%;
    }

    header nav ul {
       display: -webkit-flex;
       display: flex;
       -webkit-flex-flow: row nowrap;
       flex-flow: row nowrap;
       -webkit-justify-content: center;
       justify-content: center;
    }

    header nav ul li {
       -webkit-flex: 0 1 auto;
       flex: 0 1 auto;
    }
 }