diff options
author | Jinwei Zhao <[email protected]> | 2016-04-04 14:00:39 +0800 |
---|---|---|
committer | Jinwei Zhao <[email protected]> | 2017-01-13 15:07:45 +0800 |
commit | e002d09d2b6b2317fec6caa8836b20e6709c5da3 (patch) | |
tree | 1e1623524986fc63abcab7b10912dffe55dc1da9 /deprecated/jinweiclarkchao.github.io/assets/style.css | |
parent | dbcebe1def5c355120c61b575390d1d9ac355f67 (diff) | |
download | jinwei.me-e002d09d2b6b2317fec6caa8836b20e6709c5da3.tar.gz |
jinwei.me
Diffstat (limited to 'deprecated/jinweiclarkchao.github.io/assets/style.css')
-rw-r--r-- | deprecated/jinweiclarkchao.github.io/assets/style.css | 360 |
1 files changed, 360 insertions, 0 deletions
diff --git a/deprecated/jinweiclarkchao.github.io/assets/style.css b/deprecated/jinweiclarkchao.github.io/assets/style.css new file mode 100644 index 0000000..d893c23 --- /dev/null +++ b/deprecated/jinweiclarkchao.github.io/assets/style.css | |||
@@ -0,0 +1,360 @@ | |||
1 | @charset "UTF-8"; | ||
2 | body { | ||
3 | line-height: 1.65em; | ||
4 | font-family: Merriweather, serif; | ||
5 | font-weight: 400; | ||
6 | font-size: 16px; | ||
7 | background-color: #fff; } | ||
8 | |||
9 | a { | ||
10 | color: #8f65ca; | ||
11 | text-decoration: none; } | ||
12 | |||
13 | .site-header { | ||
14 | text-align: center; | ||
15 | font-size: 10px; | ||
16 | padding: 30px 0; } | ||
17 | .site-header a { | ||
18 | padding-bottom: 4px; | ||
19 | color: #555; | ||
20 | letter-spacing: 2px; | ||
21 | margin-right: 30px; | ||
22 | white-space: nowrap; | ||
23 | font-family: helvetica, sans-serif; } | ||
24 | .site-header a.active { | ||
25 | opacity: .2; | ||
26 | border-bottom: 1px solid #333; } | ||
27 | .site-header a:last-child { | ||
28 | margin-right: 0; } | ||
29 | |||
30 | .instagram { | ||
31 | text-align: center; | ||
32 | margin-bottom: 20px; | ||
33 | height: 140px; } | ||
34 | .instagram .img { | ||
35 | padding: 0; | ||
36 | transition: all 1s; | ||
37 | opacity: 0; | ||
38 | display: inline-block; | ||
39 | background: #eee; | ||
40 | margin-right: 20px; } | ||
41 | .instagram .img:hover { | ||
42 | box-shadow: inset 0 0 5px #000; } | ||
43 | .instagram .img, .instagram img { | ||
44 | border-radius: 200px; | ||
45 | width: 140px; | ||
46 | height: 140px; } | ||
47 | |||
48 | .wrapper { | ||
49 | max-width: 700px; | ||
50 | width: 100%; | ||
51 | margin: auto; } | ||
52 | |||
53 | .posts { | ||
54 | list-style: none; | ||
55 | padding-left: 0; | ||
56 | margin-top: 0; } | ||
57 | .posts a { | ||
58 | color: #333; } | ||
59 | .posts .post { | ||
60 | margin-bottom: 30px; } | ||
61 | |||
62 | .content { | ||
63 | padding: 35px; } | ||
64 | |||
65 | .meta { | ||
66 | font-size: 9px; } | ||
67 | .meta, .meta * { | ||
68 | color: #a0a0a0; } | ||
69 | |||
70 | .post-title { | ||
71 | font-size: 20px; } | ||
72 | |||
73 | .post-header { | ||
74 | text-align: center; | ||
75 | border-bottom: 1px solid #eee; | ||
76 | padding-bottom: 30px; | ||
77 | margin-bottom: 30px; | ||
78 | position: relative; } | ||
79 | .post-header:after { | ||
80 | content: ""; | ||
81 | display: block; | ||
82 | width: 6px; | ||
83 | height: 6px; | ||
84 | background: #eee; | ||
85 | position: absolute; | ||
86 | border: 6px solid #fff; | ||
87 | left: 50%; | ||
88 | border-radius: 15px; | ||
89 | margin-left: -9px; | ||
90 | bottom: -9px; } | ||
91 | |||
92 | article img { | ||
93 | max-width: 100%; } | ||
94 | article h3 { | ||
95 | border-bottom: 1px solid #777; | ||
96 | line-height: 0.9em; | ||
97 | display: inline-block; | ||
98 | text-shadow: 0 0 1px #fff, 0 0 1px #fff, 0 0 1px #fff,0 0 1px #fff,0 0 1px #fff,0 0 1px #fff,0 0 1px #fff; } | ||
99 | |||
100 | .a-cat, .a-house, .a-person, .a-page { | ||
101 | display: inline-block; | ||
102 | background: #333; | ||
103 | vertical-align: middle; | ||
104 | margin-bottom: 2px; | ||
105 | position: relative; } | ||
106 | |||
107 | .a-cat { | ||
108 | background: #333; | ||
109 | height: 13px; | ||
110 | width: 10px; | ||
111 | border-bottom-left-radius: 10px; | ||
112 | border-bottom-right-radius: 10px; | ||
113 | box-shadow: 0 -2px #333; } | ||
114 | .a-cat:before, .a-cat:after { | ||
115 | content: ''; | ||
116 | display: block; } | ||
117 | .a-cat:before { | ||
118 | width: 10px; | ||
119 | height: 10px; | ||
120 | background: #fff; | ||
121 | -webkit-transform: rotate(45deg) skew(-20deg, -20deg); | ||
122 | -moz-transform: rotate(45deg) skew(-20deg, -20deg); | ||
123 | transform: rotate(45deg) skew(-20deg, -20deg); | ||
124 | margin-top: -6px; } | ||
125 | .a-cat:after { | ||
126 | height: 1px; | ||
127 | width: 16px; | ||
128 | margin-left: -3px; | ||
129 | margin-top: 2px; | ||
130 | box-shadow: 0 2px 0 #333; | ||
131 | background: #333; } | ||
132 | |||
133 | .a-house { | ||
134 | width: 10px; | ||
135 | height: 8px; | ||
136 | border-radius: 2px; } | ||
137 | .a-house:before { | ||
138 | top: -13px; | ||
139 | left: -3px; | ||
140 | position: absolute; | ||
141 | content: ''; | ||
142 | display: block; | ||
143 | border: 8px solid transparent; | ||
144 | border-bottom: 6px solid #333; } | ||
145 | |||
146 | .a-page { | ||
147 | width: 11px; | ||
148 | height: 13px; | ||
149 | border-radius: 2px; } | ||
150 | .a-page:before, .a-page:after { | ||
151 | content: ''; | ||
152 | display: block; } | ||
153 | .a-page:before { | ||
154 | position: absolute; | ||
155 | border: 2px solid transparent; | ||
156 | border-top-color: #fff; | ||
157 | border-right-color: #fff; | ||
158 | width: 0; | ||
159 | right: 0; } | ||
160 | .a-page:after { | ||
161 | height: 1px; | ||
162 | width: 7px; | ||
163 | margin: auto; | ||
164 | margin-top: 4px; | ||
165 | box-shadow: 0 2px 0 #fff, 0 4px 0 #fff, 0 6px 0 #fff; | ||
166 | background: #fff; } | ||
167 | |||
168 | .a-person { | ||
169 | width: 13px; | ||
170 | height: 13px; | ||
171 | border-radius: 15px; | ||
172 | overflow: hidden; } | ||
173 | .a-person:before, .a-person:after { | ||
174 | content: ''; | ||
175 | display: block; | ||
176 | position: absolute; | ||
177 | background: #fff; } | ||
178 | .a-person:before { | ||
179 | width: 5px; | ||
180 | height: 5px; | ||
181 | border-radius: 10px; | ||
182 | left: 4px; | ||
183 | top: 3px; } | ||
184 | .a-person:after { | ||
185 | top: 8px; | ||
186 | left: 3px; | ||
187 | height: 4px; | ||
188 | width: 7px; | ||
189 | border-radius: 10px; } | ||
190 | |||
191 | .site-footer { | ||
192 | font-size: 11px; | ||
193 | padding: 30px 30px 50px; | ||
194 | text-align: center; } | ||
195 | |||
196 | .pagination { | ||
197 | position: relative; | ||
198 | margin: auto; | ||
199 | text-align: center; | ||
200 | opacity: .4; | ||
201 | transition: opacity .4s; } | ||
202 | .pagination:hover { | ||
203 | opacity: 1; } | ||
204 | |||
205 | .page-nav { | ||
206 | display: inline-block; | ||
207 | height: 9px; | ||
208 | width: 10px; | ||
209 | background: #333; | ||
210 | font-size: 0; | ||
211 | border-radius: 3px; | ||
212 | top: -30px; | ||
213 | position: absolute; } | ||
214 | .page-nav:before, .page-nav:after { | ||
215 | content: ''; | ||
216 | display: block; | ||
217 | position: absolute; } | ||
218 | .page-nav:before { | ||
219 | width: 6px; | ||
220 | left: -3px; | ||
221 | height: 2px; | ||
222 | border-radius: 4px; | ||
223 | background: #333; } | ||
224 | .page-nav:after { | ||
225 | height: 1px; | ||
226 | top: 2px; | ||
227 | width: 3px; | ||
228 | margin: auto; | ||
229 | box-shadow: 0 2px 0 #fff, 0 4px 0 #fff; | ||
230 | background: #fff; } | ||
231 | |||
232 | .previous { | ||
233 | left: -60px; } | ||
234 | |||
235 | .next { | ||
236 | right: -60px; | ||
237 | -webkit-transform: scale(-1, 1); | ||
238 | -moz-transform: scale(-1, 1); | ||
239 | transform: scale(-1, 1); } | ||
240 | |||
241 | blockquote { | ||
242 | margin: 0; | ||
243 | padding: 30px; | ||
244 | position: relative; | ||
245 | color: #555; } | ||
246 | blockquote:before, blockquote:after { | ||
247 | font-family: georgia, serif; | ||
248 | font-size: 50px; | ||
249 | color: #e0e0e0; | ||
250 | position: absolute; } | ||
251 | blockquote:before { | ||
252 | line-height: 1em; | ||
253 | left: 0; | ||
254 | top: 0; | ||
255 | content: '“'; } | ||
256 | blockquote:after { | ||
257 | right: 0; | ||
258 | bottom: 0; | ||
259 | content: '”'; } | ||
260 | blockquote p:first-child { | ||
261 | margin-top: 0; } | ||
262 | blockquote p:last-child { | ||
263 | margin-bottom: 0; } | ||
264 | |||
265 | hr { | ||
266 | border: 0; | ||
267 | border-top: 1px solid #eee; | ||
268 | margin: 30px 0; | ||
269 | text-align: center; } | ||
270 | hr:before { | ||
271 | content: '///'; | ||
272 | line-height: 1em; | ||
273 | margin-top: -6px; | ||
274 | font-size: 10px; | ||
275 | color: #ddd; | ||
276 | padding: 1px 3px; | ||
277 | background: #fff; | ||
278 | display: inline-block; } | ||
279 | |||
280 | .fork-me { | ||
281 | padding: 5px 35px 3px 10px; | ||
282 | color: #fff; | ||
283 | text-align: center; | ||
284 | background: #333; | ||
285 | position: absolute; | ||
286 | right: 0; | ||
287 | top: 30px; | ||
288 | font-size: 12px; | ||
289 | overflow: hidden; | ||
290 | transition: all .3s; } | ||
291 | .fork-me:before, .fork-me:after { | ||
292 | transition: all .3s; | ||
293 | content: ''; | ||
294 | display: block; | ||
295 | position: absolute; } | ||
296 | .fork-me:hover:before, .fork-me:hover:after { | ||
297 | right: 15px; } | ||
298 | .fork-me:before { | ||
299 | width: 10px; | ||
300 | height: 7px; | ||
301 | border: 1px solid #eee; | ||
302 | border-left: 0; | ||
303 | border-top-right-radius: 4px; | ||
304 | border-bottom-right-radius: 4px; | ||
305 | top: 12px; | ||
306 | right: 10px; } | ||
307 | .fork-me:after { | ||
308 | height: 1px; | ||
309 | width: 47px; | ||
310 | background: #eee; | ||
311 | top: 12px; | ||
312 | right: 10px; | ||
313 | margin-top: 4px; | ||
314 | margin-right: -36px; } | ||
315 | |||
316 | .about { | ||
317 | text-align: center; } | ||
318 | |||
319 | .links { | ||
320 | font-size: 0; } | ||
321 | .links a { | ||
322 | text-transform: uppercase; | ||
323 | font-size: 12px; | ||
324 | text-align: center; | ||
325 | padding: 3px 0; | ||
326 | display: inline-block; | ||
327 | color: #333; | ||
328 | width: 20%; | ||
329 | position: relative; } | ||
330 | .links a:before { | ||
331 | content: ''; | ||
332 | position: absolute; | ||
333 | left: 50%; | ||
334 | margin-left: -3px; | ||
335 | margin-top: -25px; | ||
336 | transition: .4s; | ||
337 | height: 3px; | ||
338 | width: 3px; | ||
339 | border: 3px solid transparent; | ||
340 | -webkit-transform: rotate(-45deg) skew(-10deg, -10deg); | ||
341 | -moz-transform: rotate(-45deg) skew(-10deg, -10deg); | ||
342 | transform: rotate(-45deg) skew(-10deg, -10deg); } | ||
343 | .links a:hover:before { | ||
344 | margin-top: -15px; | ||
345 | border-bottom-color: #d8badc; | ||
346 | border-left-color: #d8badc; } | ||
347 | |||
348 | @media (max-width: 480px) { | ||
349 | .links a { | ||
350 | width: auto; | ||
351 | height: 50px; | ||
352 | margin-right: 70%; } | ||
353 | .links a:before { | ||
354 | -webkit-transform: rotate(-135deg) skew(-10deg, -10deg); | ||
355 | -moz-transform: rotate(-135deg) skew(-10deg, -10deg); | ||
356 | transform: rotate(-135deg) skew(-10deg, -10deg); | ||
357 | left: -15px; | ||
358 | margin-top: 6px !important; } } | ||
359 | |||
360 | /*# sourceMappingURL=style.css.map */ | ||