Left: | ||
Right: |
OLD | NEW |
---|---|
1 <style> | 1 <style> |
2 | 2 |
3 #media | 3 #media |
4 { | 4 { |
5 text-align: center; | 5 text-align: center; |
6 } | 6 } |
7 | 7 |
8 #media-links | 8 #media-links |
9 { | 9 { |
10 list-style: none; | 10 list-style: none; |
(...skipping 56 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
67 } | 67 } |
68 | 68 |
69 @media (min-width: 930px) | 69 @media (min-width: 930px) |
70 { | 70 { |
71 #media small | 71 #media small |
72 { | 72 { |
73 display: none; | 73 display: none; |
74 } | 74 } |
75 } | 75 } |
76 | 76 |
77 /* | |
78 * Hero section | |
79 */ | |
80 | |
81 #hero > div | |
82 { | |
83 position: relative; | |
84 padding: 0; | |
85 } | |
86 | |
87 #hero img | |
88 { | |
89 display: block; | |
90 width: 100%; | |
91 } | |
92 | |
93 #hero h1 | |
94 { | |
95 position: absolute; | |
96 right: 0; | |
97 bottom: 0; | |
98 width: 100%; | |
99 padding: 10px; | |
100 background-color: #fff; | |
101 text-transform: uppercase; | |
102 font-size: 18px; | |
103 font-weight: 300; | |
104 box-sizing: border-box; | |
105 } | |
106 | |
107 @media (min-width: 350px) | |
108 { | |
109 #hero h1 | |
110 { | |
111 width: 80%; | |
112 } | |
113 } | |
114 | |
115 @media (min-width: 450px) | |
116 { | |
117 #hero h1 | |
118 { | |
119 width: 60%; | |
120 font-size: 20px; | |
121 } | |
122 } | |
123 | |
124 @media (min-width: 800px) | |
125 { | |
126 #hero h1 | |
127 { | |
128 padding: 15px; | |
129 width: 39%; | |
130 font-size: 22px; | |
131 } | |
132 } | |
133 | |
77 </style> | 134 </style> |
OLD | NEW |