├── README.md
├── frontend.css
└── index.html
/README.md:
--------------------------------------------------------------------------------
1 | # qianduan-yule-club
2 | # 前端娱乐.俱乐部
3 |
4 | * 曾被硅星人微信公众号引用: https://mp.weixin.qq.com/s/-6miy7UyWGteS1C8IsB6RA
5 |
6 | 欢迎提 PR，补充更多新闻
7 | 直接在 index.html 里加上新闻就好，相信你能看懂。
8 |
9 | 因最近发生的 deno issues 事件有感，感慨前端实在是太多大新闻了。 于是在六一，买了个域名，做了这个小玩具调侃一下。
10 |
11 | 前端正在发展中，希望前端的朋友们少点娱乐 “大新闻”，多点学术大新闻。
12 |
--------------------------------------------------------------------------------
/frontend.css:
--------------------------------------------------------------------------------
1 | @import "https://fonts.googleapis.com/css?family=Dosis:300,400,500,600,700";
2 | header:after,
3 | #timeline .timeline-item:after,
4 | header:before,
5 | #timeline .timeline-item:before {
6 | content: '';
7 | display: block;
8 | width: 100%;
9 | clear: both;
10 | }
11 |
12 | *,
13 | *:before,
14 | *:after {
15 | box-sizing: border-box;
16 | -webkit-box-sizing: border-box;
17 | -moz-box-sizing: border-box;
18 | }
19 |
20 | body,
21 | html {
22 | height: 100%;
23 | }
24 |
25 | body {
26 | background: #f9f9f9;
27 | background-size: cover;
28 | margin: 0;
29 | padding: 0;
30 | font-family: helvetica, arial, tahoma, verdana;
31 | line-height: 20px;
32 | font-size: 14px;
33 | color: #726f77;
34 | }
35 |
36 | img {
37 | max-width: 100%;
38 | }
39 |
40 | a {
41 | text-decoration: none;
42 | }
43 |
44 | .container {
45 | max-width: 1100px;
46 | margin: 0 auto;
47 | }
48 |
49 | h1,
50 | h2,
51 | h3,
52 | h4 {
53 | font-family: "Dosis", arial, tahoma, verdana;
54 | font-weight: 500;
55 | }
56 |
57 | .project-name {
58 | text-align: center;
59 | padding: 10px 0;
60 | }
61 |
62 | header {
63 | background: #2b2e48;
64 | padding: 10px;
65 | -webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.05);
66 | -moz-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.05);
67 | -ms-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.05);
68 | box-shadow: 0 3px 3px rgba(0, 0, 0, 0.05);
69 | }
70 |
71 | header .logo {
72 | color: #ee4d4d;
73 | float: left;
74 | font-family: "Dosis", arial, tahoma, verdana;
75 | font-size: 22px;
76 | font-weight: 500;
77 | }
78 |
79 | header .logo>span {
80 | color: #f7aaaa;
81 | font-weight: 300;
82 | }
83 |
84 | header .social {
85 | float: right;
86 | }
87 |
88 | header .social .btn {
89 | font-family: "Dosis";
90 | font-size: 14px;
91 | margin: 10px 5px;
92 | }
93 |
94 | #timeline {
95 | width: 100%;
96 | margin: 30px auto;
97 | position: relative;
98 | padding: 0 10px;
99 | -webkit-transition: all 0.4s ease;
100 | -moz-transition: all 0.4s ease;
101 | -ms-transition: all 0.4s ease;
102 | transition: all 0.4s ease;
103 | }
104 |
105 | #timeline:before {
106 | content: "";
107 | width: 3px;
108 | height: 100%;
109 | background: #ee4d4d;
110 | left: 50%;
111 | top: 0;
112 | position: absolute;
113 | }
114 |
115 | #timeline:after {
116 | content: "";
117 | clear: both;
118 | display: table;
119 | width: 100%;
120 | }
121 |
122 | #timeline .timeline-item {
123 | margin-bottom: 50px;
124 | position: relative;
125 | }
126 |
127 | #timeline .timeline-item .timeline-icon {
128 | background: #ee4d4d;
129 | width: 50px;
130 | height: 50px;
131 | position: absolute;
132 | top: 0;
133 | left: 50%;
134 | overflow: hidden;
135 | margin-left: -23px;
136 | -webkit-border-radius: 50%;
137 | -moz-border-radius: 50%;
138 | -ms-border-radius: 50%;
139 | border-radius: 50%;
140 | }
141 |
142 | #timeline .timeline-item .timeline-icon svg {
143 | position: relative;
144 | top: 14px;
145 | left: 14px;
146 | }
147 |
148 | #timeline .timeline-item .timeline-content {
149 | width: 45%;
150 | background: #fff;
151 | padding: 20px;
152 | -webkit-box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1);
153 | -moz-box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1);
154 | -ms-box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1);
155 | box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1);
156 | -webkit-border-radius: 5px;
157 | -moz-border-radius: 5px;
158 | -ms-border-radius: 5px;
159 | border-radius: 5px;
160 | -webkit-transition: all 0.3s ease;
161 | -moz-transition: all 0.3s ease;
162 | -ms-transition: all 0.3s ease;
163 | transition: all 0.3s ease;
164 | }
165 |
166 | #timeline .timeline-item .timeline-content h2 {
167 | padding: 15px;
168 | line-height: 1.5;
169 | background: #ee4d4d;
170 | color: #fff;
171 | margin: -20px -20px 0 -20px;
172 | font-weight: 300;
173 | -webkit-border-radius: 3px 3px 0 0;
174 | -moz-border-radius: 3px 3px 0 0;
175 | -ms-border-radius: 3px 3px 0 0;
176 | border-radius: 3px 3px 0 0;
177 | }
178 |
179 | #timeline .timeline-item .timeline-content .item-content {
180 | line-height: 1.5;
181 | }
182 |
183 | #timeline .timeline-item .timeline-content:before {
184 | content: '';
185 | position: absolute;
186 | left: 45%;
187 | top: 20px;
188 | width: 0;
189 | height: 0;
190 | border-top: 7px solid transparent;
191 | border-bottom: 7px solid transparent;
192 | border-left: 7px solid #ee4d4d;
193 | }
194 |
195 | #timeline .timeline-item .timeline-content.right {
196 | float: right;
197 | }
198 |
199 | #timeline .timeline-item .timeline-content.right:before {
200 | content: '';
201 | right: 45%;
202 | left: inherit;
203 | border-left: 0;
204 | border-right: 7px solid #ee4d4d;
205 | }
206 |
207 | .btn {
208 | padding: 5px 15px;
209 | text-decoration: none;
210 | background: transparent;
211 | border: 2px solid #f27c7c;
212 | color: #f27c7c;
213 | display: inline-block;
214 | position: relative;
215 | text-transform: uppercase;
216 | font-size: 12px;
217 | -webkit-border-radius: 5px;
218 | -moz-border-radius: 5px;
219 | -ms-border-radius: 5px;
220 | border-radius: 5px;
221 | -webkit-transition: background 0.3s ease;
222 | -moz-transition: background 0.3s ease;
223 | -ms-transition: background 0.3s ease;
224 | transition: background 0.3s ease;
225 | -webkit-box-shadow: 2px 2px 0 #f27c7c;
226 | -moz-box-shadow: 2px 2px 0 #f27c7c;
227 | -ms-box-shadow: 2px 2px 0 #f27c7c;
228 | box-shadow: 2px 2px 0 #f27c7c;
229 | }
230 |
231 | .btn:hover {
232 | box-shadow: none;
233 | top: 2px;
234 | left: 2px;
235 | -webkit-box-shadow: 2px 2px 0 transparent;
236 | -moz-box-shadow: 2px 2px 0 transparent;
237 | -ms-box-shadow: 2px 2px 0 transparent;
238 | box-shadow: 2px 2px 0 transparent;
239 | }
240 |
241 | .btn:hover::before {
242 | content: '\200c';
243 | position: absolute;
244 | top: -4px;
245 | left: -2px;
246 | display: block;
247 | width: calc(100% + 4px);
248 | height: 2px;
249 | }
250 |
251 | .date {
252 | float: right;
253 | padding-top: 15px;
254 | color: #909399;
255 | clear: both;
256 | }
257 |
258 | @media screen and (max-width: 768px) {
259 | #timeline {
260 | margin: 30px;
261 | padding: 0px;
262 | width: 90%;
263 | }
264 | #timeline:before {
265 | left: 0;
266 | }
267 | #timeline .timeline-item .timeline-content {
268 | width: 90%;
269 | float: right;
270 | }
271 | #timeline .timeline-item .timeline-content:before,
272 | #timeline .timeline-item .timeline-content.right:before {
273 | left: 10%;
274 | margin-left: -6px;
275 | border-left: 0;
276 | border-right: 7px solid #ee4d4d;
277 | }
278 | #timeline .timeline-item .timeline-icon {
279 | left: 0;
280 | }
281 | }
282 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | 前端娱乐圈大事记
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 | 前端
17 | 娱乐圈大事记
18 |
19 |
23 |
25 |
26 |
27 |
前端娱乐圈大事记时间线
28 |
48 |
49 |