load disqus only on request
[mdref/mdref] / public / index.css
1 html {
2 font-size: 18px;
3 }
4 html, body{
5 height: 100%;
6 min-height: 100%;
7 }
8 body, code {
9 font-family: Inconsolata, 'Inconsolata Awesome', 'Andale Mono', Monaco, 'Courier New', Courier, monospace;
10 }
11 body {
12 line-height: 1.5;
13 font-size: 1.1em;
14 margin: 0;
15 padding: 0;
16 color: #3f3f3f;
17 }
18
19 div.page {
20 margin: auto;
21 /* max-width: 1200px;
22 */ min-height: 100%;
23 padding-bottom: 5em;
24 box-shadow: 0 0 20px 10px rgba(0, 0, 0, 0.5);
25 }
26
27 div.page>* {
28 margin-left: 1em;
29 }
30 div.page>footer {
31 margin-left: 0;
32 }
33 div.page>ul, div.page>div>ul {
34 margin-left: 2em;
35 }
36
37 .sidebar {
38 float: right;
39 background: #f0f0f0;
40 border-bottom-left-radius: 10px;
41 padding: 0;
42 width: auto;
43 min-width: 200px;
44 padding-right: 1em;
45 padding-bottom: 1em;
46 margin-bottom: 1em;
47 }
48 .sidebar>ul {
49 }
50 .sidebar ul {
51 margin-left: 1em;
52 margin-top: .5em;
53 margin-bottom: 0;
54 padding: 0;
55 list-style-type: none;
56 }
57
58 .sidebar .edit {
59 display: block;
60 position: relative;
61 top: 2em;
62 right: 0;
63 -webkit-transform: rotate(45deg);
64 transform: rotate(45deg);
65 text-decoration: none;
66 font-weight: bold;
67 text-shadow: 0 0 5px red;
68 float: right;
69 }
70
71 .sidebar .edit a {
72 color: white !important;
73 }
74 code {
75 border-radius: 2px;
76 padding: 0px 2px 2px 2px;
77 background: #f0f0f0;
78 color: #606060;
79 box-shadow: 0 0 1px #999;
80 }
81
82 code code {
83 display: inline;
84 padding: 0;
85 background: transparent;
86 border: none;
87 box-shadow: none;
88 }
89
90 pre>code {
91 display: inline-block;
92 padding: 1em;
93 min-width: 50%;
94 line-height: 1.2;
95 }
96
97 pre>code, pre>code code {
98 background: #333;
99 color: #eee;
100 }
101
102 p, pre, table, dl {
103 margin: 1em 2em;
104 margin-left: 2em !important;
105 }
106
107 pre>code, table, dl {
108 margin-bottom: 2em !important;
109 }
110
111 li>p {
112 margin: 1em 0;
113 }
114
115 blockquote {
116 border-top: 1px solid #800000;
117 border-bottom: 1px solid #800000;
118 background: #ffe4e1;
119 margin: 2em 0 !important;
120 }
121
122 ul {
123 margin-top: 1em;
124 margin-bottom: 2em;
125 }
126 ol {
127 list-style-type: none;
128 }
129 ol ul {
130 margin-top: 0;
131 margin-bottom: 0;
132 }
133 ol li {
134 margin-bottom: 0;
135 }
136 ol>li {
137 font-weight: bold;
138 margin-bottom: .5em;
139 }
140 ol>li>* {
141 font-weight: normal;
142 }
143 li {
144 margin-bottom: .5em;
145 }
146 a, h1 code>a {
147 color: #2f4f4f;
148 }
149 a:hover {
150 text-decoration: none;
151 }
152 a[href^="http:"]:after, a[href^="https:"]:after {
153 content: " ⬈";
154 }
155
156 a.permalink {
157 position: relative;
158 top: 0;
159 right: 0;
160 color: #999999;
161 opacity: 0.25;
162 }
163
164 .var {
165 color: #800000;
166 }
167 .constant {
168 color: #2e8b57;
169 }
170
171 h1, li h3, th, footer {
172 background: #708090;
173 color: #f5f5dc;
174 }
175
176 h1, footer {
177 margin: 0;
178 /* max-width: 1200px;
179 */ padding: 1em;
180 }
181
182 h1 {
183 line-height: 1.5;
184 margin-left: 0 !important;
185 padding-left: 2em;
186 }
187 h1 code {
188 font-weight: normal;
189 font-size: .9em;
190 line-height: 1.33;
191 }
192 h1 a.permalink {
193 left: -.8em;
194 margin-right: -.6em;
195 }
196
197 li h3 {
198 border-radius: 4px;
199 display: inline-block;
200 width: auto;
201 padding: .2em;
202 margin: .5em 0 0 0;
203 }
204
205 div.page>h3, div.page>div>h3 {
206 margin-left: 1.25em;
207 }
208 div.page>h4, div.page>div>h4 {
209 margin-left: 1.5em;
210 }
211 div.page>h5, div.page>div>h5 {
212 margin-left: 1.75em;
213 }
214 div.page>h6, div.page>div>h6 {
215 margin-left: 2em;
216 }
217
218 h1 .constant, pre>code .consant, li h3 .constant {
219 color: #98fb98;
220 }
221
222 h1 .var, pre>code .var, li h3 .var {
223 color: #f4a460;
224 }
225 h1 {
226 font-size: 125%;
227 }
228 h2 {
229 font-size: 120%;
230 }
231 h3 {
232 font-size: 110%;
233 }
234 h4 {
235 font-size: 100%;
236 }
237 footer a, h1 a, pre>code a, li h3 a {
238 color: #b0e0e6;
239 }
240 li h3 {
241 }
242 li h3 a {
243 text-decoration: none;
244 }
245 li h3 a:hover {
246 text-decoration: underline;
247 }
248
249 #disqus_thread {
250 margin-top: 8em;
251 margin-right: 2em;
252 }
253 #disqus_activator {
254 margin: auto;
255 width: 80%;
256 padding: 1em;
257 background-color: slategrey;
258 color: white;
259 font-size: 1em;
260 font-weight: bold;
261 border: 0;
262 border-radius: 2px;
263 box-shadow: 0 0 4px #999;
264 }
265
266 footer {
267 font-size: smaller;
268 text-align: center;
269 clear: both;
270 position: fixed;
271 bottom: 0;
272 width: 100%;
273 padding: 0;
274 transition: margin-bottom 2s ease 0.1s;
275 }
276 footer.hidden {
277 margin-bottom: -10em;
278 transition: margin-bottom 2s ease 0.1s;
279 }
280
281 footer ul {
282 margin: 0;
283 padding: 1em 0;
284 }
285
286 footer li {
287 list-style-type: none;
288 display: inline-block;
289 margin: 0 1em;
290 }
291
292 footer a {
293 text-decoration: none;
294 }
295
296 footer a:hover {
297 text-decoration: underline;
298 }
299
300 table {
301 border-collapse: collapse;
302 }
303 th, td {
304 padding: .4em;
305 border-bottom: 1px solid rgba(112, 128, 144, 0.1);
306 }
307 dt {
308 font-weight: bold;
309 margin-top: 1em;
310 }
311 dd {
312 line-height: 1.33;
313 margin-left: 1em;
314 }
315 h1, footer, table, .sidebar, pre>code, li h3 {
316 box-shadow: 0 0 4px #708090;
317 }