https://ahuigo.github.io/assets/main.css

1body{font-family:"lucida grande", "lucida sans unicode", lucida, helvetica, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
2    font-size: 18px;
3}
4table, th, td {
5  border: 1px solid black;
6  border-collapse: collapse;
7}
8.share iframe{
9    border:0;
10    height:36px;
11}
12#imgview{
13    width: 100%;
14    height: 100%;
15    top:0;
16    justify-content: center;
17    display: flex;
18    align-items: center;
19    position: fixed;
20    z-index: 3;
21}
22.img-wrapper{
23    max-width:100%;
24    max-height:100%;
25    overflow:auto;
26}
27.popup-back{
28    z-index:-1;
29    position: fixed;
30    width: 100%;
31    height: 100%;
32    background: #ddd;
33    opacity: 0.9;
34}
35.pure-menu-horizontal{
36    white-space: normal;
37    background: #363636;
38    padding:1em;
39}
40code{
41    color: white;
42    border: 1px solid;
43    display: inline-block;
44    background: lightslategrey;
45    border-radius: 10px;
46    padding: 3px;
47}
48pre>code{
49    width:100%;
50    overflow:auto;
51}
52.pure-menu-list>li{line-height: 2em;vertical-align: middle;}
53.pure-menu-list>li>a{
54    vertical-align: bottom;
55    color: #fff;
56    font-family: "Muli",avenir,"helvetica neue",helvetica,ubuntu,roboto,noto,"segoe ui",arial,sans-serif;
57    color:#fff;
58    /* vertical-align: middle; */
59    vertical-align: baseline;
60}
61.button {
62    align-items: center;
63    border: 1px solid transparent;
64    border-radius: 4px;
65    box-shadow: none;
66    display: inline-flex;
67    font-size: 1rem;
68    height: 2.25em;
69    justify-content: flex-start;
70    line-height: 1.5;
71    padding-bottom: calc(.375em - 1px);
72    padding-left: calc(.625em - 1px);
73    padding-right: calc(.625em - 1px);
74    padding-top: calc(.375em - 1px);
75    position: relative;
76    vertical-align: top;
77}
78.button.is-primary {
79    background-color: #0082d1;
80    border-color: transparent;
81    color: #fff;
82    /* vertical-align: middle; */
83}
84h1,h2,h3,h4,h5,h6 {
85	text-rendering:optimizelegibility;
86	margin:0.4em 0;
87    font-weight:bold;
88    font-family: "Palatino Linotype", "Book Antiqua", Palatino, Helvetica, STKaiti, SimSun, serif,"Russo One", "Arial Black", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
89}
90h1{ font-size:1.8em }
91h2{ font-size:1.6em }
92h3{ font-size:1.4em}
93h4{ font-size:1.3em }
94h5{ font-size:1.2em }
95h6{ font-size:1.1em }
96p{margin: 0.5em 0;}
97.head{
98    margin-bottom:0;
99    position: relative;
100    padding: 1.5rem;
101}
102#up,#down,#top{
103    position: fixed;z-index: 2;display: block;right:0;
104}
105#up,#top{
106    bottom: 0;
107}
108#down{
109    top:0;
110}
111*{
112    word-wrap:break-word;
113    margin:0;
114    padding:0;
115    word-break:break-all;
116}
117span.icon{
118    display: inline-block;
119    height: 22px;
120    line-height: 22px;
121    padding-left: 25px;
122    cursor: pointer;
123    background-position-x: left;
124    background-size: contain;
125    background-repeat: no-repeat;
126    background-origin: padding-box;
127}
128.twitter-icon{
129    background: url(/img/ico/twitter.png);
130}
131.weibo-icon{
132    background: url(/img/ico/weibo.png);
133}
134.hr{
135    height: 1px; background-color: #dededc; margin: 25px 0;
136}
137.folder::first-letter {
138    text-transform: capitalize;
139}
140.folder{
141    display: block;
142}
143
144
145.left, .middle, .right, #toc, #disqus_thread{
146    overflow: auto;
147    padding: 8px 8px;
148}
149.left{ 
150    border-right: 1px solid #dededc; 
151    background:#252a3a;
152    color:#ddd;
153    flex: 2;
154    z-index:2;
155}
156.left a{
157    color:#eee;
158}
159.left a:hover{
160    background:rgb(55, 60, 90);
161}
162a {
163    color: #3273dc;
164    cursor: pointer;
165    text-decoration: none;
166}
167a:hover{
168    color:#000;
169}
170a.selected{
171    border-bottom: 1px solid;
172    color:#000;
173}
174#content ul{
175    list-style: outside disc;
176    margin-left:2.1em;
177}
178#content ol {
179    list-style: outside decimal;
180    margin-left: 2.1em;
181}
182
183#toc ol {
184    list-style: outside disc;
185}
186ol,ul{
187    list-style-position: outside ;
188    margin-left:14px;
189}
190.left ul li{
191    margin:0;
192    margin: 0 0 0 15px;
193}
194#toc{
195    border-radius: 1em;
196    border: 0.3em solid  lightslategray;
197    margin-bottom: 1em;
198}
199
200.middle {
201    flex: 8;
202    padding:1.2em;
203}
204
205.right {
206    /* flex: 3; */
207    width:340px;
208    overflow:auto;
209}
210
211#content img{
212    border: 0.3em solid #e0dfcc;
213    box-shadow: 0 0 10px #555;
214    border-radius: 0.6em;
215    max-width:100%;
216    overflow: auto;
217}
218#content blockquote{
219    background-color:lightgray;
220    padding: 0.5em;

221    font-family: Consolas, Monaco, 'Andale Mono', monospace;
222    border-radius: 1em;
223    border: 0.3em solid  lightslategray;
224    text-shadow: 0 1px white;
225    overflow: auto;
226}
227
228.left.active{
229    visibility: visible;
230}
231
232.menu-toggle{
233    display:none;
234    width: 4em;
235    margin: 5px;
236    /* border-bottom: 5px solid white; */
237}
238@media screen and (max-width:800px) {
239    .menu-toggle{
240        display:block;
241        visibility: visible;
242        /* border-radius:20px; */
243    }
244    #app{
245        display:block;
246        position:relative;
247    }
248    .left{
249        position: absolute;
250        visibility:hidden;
251    }
252}
253@media screen and (min-width:801px) {
254    #app{
255        display:flex;
256    }
257}