|
1 | 1 | html,
|
2 | 2 | body {
|
3 |
| - font-size: 16px; |
4 |
| - background: #fff; |
| 3 | + font-size: 16px; |
| 4 | + background: #fff; |
5 | 5 | }
|
6 | 6 |
|
7 | 7 | * {
|
8 |
| - box-sizing: border-box; |
| 8 | + box-sizing: border-box; |
9 | 9 | }
|
10 | 10 |
|
11 | 11 | a {
|
12 |
| - color: #0870c8; |
13 |
| - font-weight: 700; |
| 12 | + color: #0870c8; |
| 13 | + font-weight: 700; |
14 | 14 | }
|
15 | 15 |
|
16 | 16 | a:hover,
|
17 | 17 | a:focus {
|
18 |
| - color: #3497ec; |
| 18 | + color: #3497ec; |
19 | 19 | }
|
20 | 20 |
|
21 | 21 | .site-wrapper {
|
22 |
| - max-width: 80rem; |
23 |
| - margin: 0 auto; |
24 |
| - background: #fff; |
25 |
| - box-shadow: none; |
| 22 | + max-width: 80rem; |
| 23 | + margin: 0 auto; |
| 24 | + background: #fff; |
| 25 | + box-shadow: none; |
26 | 26 | }
|
27 | 27 |
|
28 | 28 | .site-header {
|
29 |
| - padding-top: 0.5rem; |
30 |
| - padding-bottom: 0.5rem; |
| 29 | + padding-top: 0.5rem; |
| 30 | + padding-bottom: 0.5rem; |
31 | 31 | }
|
32 | 32 |
|
33 | 33 | .site-header__title,
|
34 | 34 | .main-nav {
|
35 |
| - padding: 0.5rem; |
| 35 | + padding: 0.5rem; |
36 | 36 | }
|
37 | 37 |
|
38 | 38 | .site-header__title {
|
39 |
| - margin: 0 0.5rem; |
40 |
| - background: #0870c8; |
41 |
| - color: #fff; |
42 |
| - text-align: center; |
43 |
| - font-size: 2rem; |
44 |
| - font-weight: 300; |
45 |
| - letter-spacing: 5px; |
| 39 | + margin: 0 0.5rem; |
| 40 | + background: #0870c8; |
| 41 | + color: #fff; |
| 42 | + text-align: center; |
| 43 | + font-size: 2rem; |
| 44 | + font-weight: 300; |
| 45 | + letter-spacing: 5px; |
46 | 46 | }
|
47 | 47 |
|
48 | 48 | .main-nav__list {
|
49 |
| - margin: 0; |
50 |
| - padding: 0; |
51 |
| - list-style: none; |
52 |
| - min-width: 240px; |
| 49 | + margin: 0; |
| 50 | + padding: 0; |
| 51 | + list-style: none; |
| 52 | + min-width: 240px; |
53 | 53 | }
|
54 | 54 |
|
55 | 55 | .main-nav__list-item a {
|
56 |
| - display: inline-block; |
57 |
| - padding: 0.25rem 0; |
58 |
| - text-transform: uppercase; |
59 |
| - text-decoration: none; |
| 56 | + display: inline-block; |
| 57 | + padding: 0.25rem 0; |
| 58 | + text-transform: uppercase; |
| 59 | + text-decoration: none; |
60 | 60 | }
|
61 | 61 |
|
62 | 62 | .site-search {
|
63 |
| - position: relative; |
64 |
| - margin: 0.5rem; |
| 63 | + position: relative; |
| 64 | + margin: 0.5rem; |
65 | 65 | }
|
66 | 66 |
|
67 | 67 | .site-search label,
|
68 | 68 | .site-search button {
|
69 |
| - position: absolute; |
70 |
| - left: -9999px; |
| 69 | + position: absolute; |
| 70 | + left: -9999px; |
71 | 71 | }
|
72 | 72 |
|
73 | 73 | .site-search svg {
|
74 |
| - position: absolute; |
75 |
| - top: 50%; |
76 |
| - left: 0.75rem; |
77 |
| - transform: translateY(-50%); |
78 |
| - color: #0870c8; |
79 |
| - width: 16px; |
80 |
| - height: 16px; |
| 74 | + position: absolute; |
| 75 | + top: 50%; |
| 76 | + left: 0.75rem; |
| 77 | + transform: translateY(-50%); |
| 78 | + color: #0870c8; |
| 79 | + width: 16px; |
| 80 | + height: 16px; |
81 | 81 | }
|
82 | 82 |
|
83 | 83 | .site-search .site-search__input {
|
84 |
| - display: block; |
85 |
| - padding: 0.5em 1em 0.5em 2rem; |
86 |
| - border: 4px solid #0870c8; |
87 |
| - width: auto; |
88 |
| - max-width: none; |
| 84 | + display: block; |
| 85 | + padding: 0.5em 1em 0.5em 2rem; |
| 86 | + border: 4px solid #0870c8; |
| 87 | + width: auto; |
| 88 | + max-width: none; |
89 | 89 | }
|
90 | 90 |
|
91 | 91 | main {
|
92 |
| - padding: 0.5rem; |
| 92 | + padding: 0.5rem; |
93 | 93 | }
|
94 | 94 |
|
95 | 95 | .hero__image,
|
96 | 96 | .item__image {
|
97 |
| - display: block; |
98 |
| - max-width: 100%; |
99 |
| - height: auto; |
| 97 | + display: block; |
| 98 | + max-width: 100%; |
| 99 | + height: auto; |
100 | 100 | }
|
101 | 101 |
|
102 | 102 | .hero__title,
|
103 | 103 | .item__title {
|
104 |
| - font-weight: 600; |
| 104 | + font-weight: 600; |
105 | 105 | }
|
106 | 106 |
|
107 | 107 | .hero__author,
|
108 | 108 | .item__author {
|
109 |
| - font-style: italic; |
| 109 | + font-style: italic; |
110 | 110 | }
|
111 | 111 |
|
112 | 112 | .hero__author span,
|
113 | 113 | .item__author span {
|
114 |
| - font-style: normal; |
115 |
| - font-weight: 600; |
| 114 | + font-style: normal; |
| 115 | + font-weight: 600; |
116 | 116 | }
|
117 | 117 |
|
118 | 118 | .items,
|
119 | 119 | .item + .item {
|
120 |
| - margin-top: 3rem; |
| 120 | + margin-top: 3rem; |
121 | 121 | }
|
122 | 122 |
|
123 | 123 | .views {
|
124 |
| - margin-top: 3rem; |
125 |
| - padding: 0.5rem 0; |
| 124 | + margin-top: 3rem; |
| 125 | + padding: 0.5rem 0; |
126 | 126 | }
|
127 | 127 |
|
128 | 128 | .views__title {
|
129 |
| - margin: 0; |
130 |
| - font-weight: 400; |
131 |
| - font-size: 1rem; |
132 |
| - font-style: italic; |
| 129 | + margin: 0; |
| 130 | + font-weight: 400; |
| 131 | + font-size: 1rem; |
| 132 | + font-style: italic; |
133 | 133 | }
|
134 | 134 |
|
135 | 135 | .view-list {
|
136 |
| - margin: 0; |
137 |
| - padding: 0; |
138 |
| - list-style: none; |
| 136 | + margin: 0; |
| 137 | + padding: 0; |
| 138 | + list-style: none; |
139 | 139 | }
|
140 | 140 |
|
141 | 141 | .view-list__item,
|
142 | 142 | .views__all {
|
143 |
| - display: block; |
144 |
| - padding: 0.25rem 0; |
145 |
| - text-transform: uppercase; |
146 |
| - text-decoration: none; |
| 143 | + display: block; |
| 144 | + padding: 0.25rem 0; |
| 145 | + text-transform: uppercase; |
| 146 | + text-decoration: none; |
147 | 147 | }
|
148 | 148 |
|
149 | 149 | .contact-form {
|
150 |
| - max-width: 30em; |
| 150 | + max-width: 30em; |
151 | 151 | }
|
152 | 152 |
|
153 | 153 | .contact-form__field + .contact-form__field {
|
154 |
| - margin-top: 1rem; |
| 154 | + margin-top: 1rem; |
155 | 155 | }
|
156 | 156 |
|
157 | 157 | footer {
|
158 |
| - margin-top: 2rem; |
159 |
| - padding-top: 2rem; |
160 |
| - padding-bottom: 2rem; |
161 |
| - text-align: center; |
| 158 | + margin-top: 2rem; |
| 159 | + padding-top: 2rem; |
| 160 | + padding-bottom: 2rem; |
| 161 | + text-align: center; |
162 | 162 | }
|
163 | 163 |
|
164 | 164 | footer svg {
|
165 |
| - width: 12px; |
166 |
| - height: 12px; |
| 165 | + width: 12px; |
| 166 | + height: 12px; |
167 | 167 | }
|
168 | 168 |
|
169 | 169 | footer p:last-child {
|
170 |
| - margin-top: 2rem; |
171 |
| - font-size: 0.9rem; |
172 |
| - color: rgba(0,0,0,0.64); |
| 170 | + margin-top: 2rem; |
| 171 | + font-size: 0.9rem; |
| 172 | + color: rgba(0, 0, 0, 0.64); |
173 | 173 | }
|
174 | 174 |
|
175 | 175 | footer p:last-child a {
|
176 |
| - color: rgba(0,0,0,0.64); |
177 |
| - font-weight: 400; |
| 176 | + color: rgba(0, 0, 0, 0.64); |
| 177 | + font-weight: 400; |
178 | 178 | }
|
179 | 179 |
|
180 | 180 | @media (min-width: 768px) {
|
181 |
| - |
182 |
| - .site-header__title { |
183 |
| - font-size: 3rem; |
184 |
| - } |
185 |
| - |
186 |
| - .hero { |
187 |
| - position: relative; |
188 |
| - overflow: hidden; |
189 |
| - padding: 10vw; |
190 |
| - background: #000; |
191 |
| - color: rgba(255,255,255,0.9); |
192 |
| - } |
193 |
| - |
194 |
| - .hero__image { |
195 |
| - position: absolute; |
196 |
| - top: 0; |
197 |
| - left: 0; |
198 |
| - opacity: 0.7; |
199 |
| - } |
200 |
| - |
201 |
| - .hero__title, |
202 |
| - .hero__author, |
203 |
| - .hero__time { |
204 |
| - position: relative; |
205 |
| - } |
206 |
| - |
207 |
| - .hero__title { |
208 |
| - max-width: 15em; |
209 |
| - font-size: 2rem; |
210 |
| - font-weight: 300; |
211 |
| - text-shadow: 0 2px 0 rgba(0,0,0,0.5); |
212 |
| - } |
213 |
| - |
214 |
| - .items { |
215 |
| - margin-top: 1rem; |
216 |
| - display: flex; |
217 |
| - justify-content: space-around; |
218 |
| - } |
219 |
| - |
220 |
| - .item { |
221 |
| - width: 100%; |
222 |
| - } |
223 |
| - |
224 |
| - .item + .item { |
225 |
| - margin-top: 0; |
226 |
| - margin-left: 1.5rem; |
227 |
| - } |
228 |
| - |
229 |
| - .views { |
230 |
| - border-bottom: 1px solid rgba(0,0,0,0.2); |
231 |
| - } |
| 181 | + .site-header__title { |
| 182 | + font-size: 3rem; |
| 183 | + } |
| 184 | + |
| 185 | + .hero { |
| 186 | + position: relative; |
| 187 | + overflow: hidden; |
| 188 | + padding: 10vw; |
| 189 | + background: #000; |
| 190 | + color: rgba(255, 255, 255, 0.9); |
| 191 | + } |
| 192 | + |
| 193 | + .hero__image { |
| 194 | + position: absolute; |
| 195 | + top: 0; |
| 196 | + left: 0; |
| 197 | + opacity: 0.7; |
| 198 | + } |
| 199 | + |
| 200 | + .hero__title, |
| 201 | + .hero__author, |
| 202 | + .hero__time { |
| 203 | + position: relative; |
| 204 | + } |
| 205 | + |
| 206 | + .hero__title { |
| 207 | + max-width: 15em; |
| 208 | + font-size: 2rem; |
| 209 | + font-weight: 300; |
| 210 | + text-shadow: 0 2px 0 rgba(0, 0, 0, 0.5); |
| 211 | + } |
| 212 | + |
| 213 | + .items { |
| 214 | + margin-top: 1rem; |
| 215 | + display: flex; |
| 216 | + justify-content: space-around; |
| 217 | + } |
| 218 | + |
| 219 | + .item { |
| 220 | + width: 100%; |
| 221 | + } |
| 222 | + |
| 223 | + .item + .item { |
| 224 | + margin-top: 0; |
| 225 | + margin-left: 1.5rem; |
| 226 | + } |
| 227 | + |
| 228 | + .views { |
| 229 | + border-bottom: 1px solid rgba(0, 0, 0, 0.2); |
| 230 | + } |
232 | 231 | }
|
233 | 232 |
|
234 | 233 | @media (min-width: 80rem) {
|
235 |
| - |
236 |
| - .hero { |
237 |
| - padding: 130px; |
238 |
| - } |
| 234 | + .hero { |
| 235 | + padding: 130px; |
| 236 | + } |
239 | 237 | }
|
0 commit comments