aboutsummaryrefslogtreecommitdiff
path: root/Code/jinweiclarkchao.github.io/assets/style.css
diff options
context:
space:
mode:
Diffstat (limited to 'Code/jinweiclarkchao.github.io/assets/style.css')
-rw-r--r--Code/jinweiclarkchao.github.io/assets/style.css360
1 files changed, 360 insertions, 0 deletions
diff --git a/Code/jinweiclarkchao.github.io/assets/style.css b/Code/jinweiclarkchao.github.io/assets/style.css
new file mode 100644
index 0000000..d893c23
--- /dev/null
+++ b/Code/jinweiclarkchao.github.io/assets/style.css
@@ -0,0 +1,360 @@
1@charset "UTF-8";
2body {
3 line-height: 1.65em;
4 font-family: Merriweather, serif;
5 font-weight: 400;
6 font-size: 16px;
7 background-color: #fff; }
8
9a {
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
92article img {
93 max-width: 100%; }
94article 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
241blockquote {
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
265hr {
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 */
Powered by cgit v1.2.3 (git 2.41.0)