fixup remote comment admin
[iankelling.org] / _site / main.css
1 #cc-by-sa {
2 /* It sits too high by default. */
3 vertical-align: middle;
4 }
5
6 #comments {
7 /* add some space at top and bottom of comment section */
8 margin: 50px 0;
9 }
10
11
12 div.comment {
13 /* whitespace doesn't cut it to differentiate multiple comments,*/
14 /* so use a line */
15 border-top-style: solid;
16 /* some darkish color, black is too striking */
17 border-top-color: #C4C3BC;
18 /* copied from stackoverflow. */
19 border-top-width: 0.716667px;
20
21 }
22
23 #comment-stripe, #comment-stripe code {
24 /* differentiate comments, don't colorize code */
25 background-color: #EBEAE4;
26 }
27
28 #comment-section {
29 /* make the top/bottom of comments have more space */
30 padding: 30px 0;
31 }
32
33
34 #comment-section textarea:focus, #comment-section textarea:active, #comment-section input:hover {
35 /* color textarea when selected, and for submit button,*/
36 /* without 3d effect, we need a different color. */
37 background: #FFFFFF;
38 }
39
40 #comment-section textarea {
41 /* go with theme, avoid bright white. */
42 background-color: #f6f6f0;
43 }
44
45 textarea, input {
46 /* default is some 3d border. use a flat border instead. */
47 border: 0;
48 /* by default text input hugs the edges too much */
49 padding: 5px;
50 /* add some space between input and submit button */
51 margin-bottom: 10px;
52 }
53
54 /* if this is filled out, we can assume it's spam. common tactic. */
55 input.misc {
56 display: none;
57 }
58
59
60 textarea {
61 /* make the comment box be full width */
62 width: 100%;
63 }
64
65
66 ul {
67 /* i dun like the default bullet points */
68 list-style-type: none;
69 }
70
71 ul.index {
72 /* for site index lists, bigger font, no indent, more space */
73 font-size: 22px;
74 padding-left: 0;
75 line-height: 2;
76 }
77
78 body{
79 /* default is too scrunched */
80 line-height: 1.5;
81 /* default too small */
82 font-size: 18px;
83 }
84
85
86 /* alternative to a <br>. whatever. */
87 /* https://stackoverflow.com/questions/7363766/how-to-insert-a-line-break-before-an-element-using-css */
88 .comment-date:before { content: '\A'; }
89 .comment-date {
90 white-space:pre;
91 /* make it a bit smaller and lighter */
92 color: #555;
93 font-size: 15px;
94 }
95
96 .post-date {
97 font-size: 15px;
98 margin: 5px 0;
99 }
100 .post-title {
101 /* default too wide, got from some random blog */
102 letter-spacing: -1px;
103 /* default is too much below where the date is. */
104 margin: 0;
105 }
106
107 /* make the header links less prominent. */
108 header a:visited, header a {
109 /* link color in top navigation is better as some less eye */
110 /* catching color. */
111 color: #333333;
112 }
113
114 .post-header {
115 margin-bottom: 30px;
116 }
117
118
119 h1,h2,h3{
120 line-height: 1.2;
121 }
122 .main-content-stripe {
123 /* i don't like bright white. copy a gitweb color */
124 background-color: #f6f6f0;
125 padding: 30px 0;
126 }
127 footer {
128 padding: 30px 0;
129 }
130 footer p {
131 margin: 0;
132 }
133 header,footer,.content,#comment-section {
134 /* top margin 0, left/right = auto, which centers it */
135 margin: 0 auto;
136 /* default too wide */
137 max-width: 700px;
138 }
139 footer {
140 font-size: 15px;
141 }
142
143 code {
144 background-color: #fff;
145 /* defaults are squished next to the borders of the color change */
146 padding: 1px 5px;
147 }
148
149 code, pre {
150 /* mono text is wider, so use smaller font to compensate */
151 font-size: 15px;
152 }
153
154 pre {
155 /* defaults are squished next to the borders of the color change */
156 padding: 6px 8px;
157 }
158
159
160 /* taken from wikipedia. purple links get a bit old. */
161 a {
162 color: #0645ad;
163 text-decoration: none;
164 }
165 a:hover {
166 text-decoration: underline;
167 }
168 a:visited {
169 color: #0b0080;
170 }
171
172 /* grabbed just the rss icon from font-awesome using fontello.com*/
173 /* then extracted just the relevant bits out. I tried using svg,*/
174 /* since it is more modern and compatible,*/
175 /* but it seems that it would take a bunch of work to change it's*/
176 /* color, do underline on hover, and line it up with the rest*/
177 /* of the text. */
178 @font-face {
179 font-family: 'fontello';
180 src: url('/font/fontello.eot?97936362');
181 src: url('/font/fontello.eot?97936362#iefix') format('embedded-opentype'),
182 url('/font/fontello.woff2?97936362') format('woff2'),
183 url('/font/fontello.woff?97936362') format('woff'),
184 url('/font/fontello.ttf?97936362') format('truetype'),
185 url('/font/fontello.svg?97936362#fontello') format('svg');
186 font-weight: normal;
187 font-style: normal;
188 }
189 [class^="icon-"]:before, [class*=" icon-"]:before {
190 font-family: "fontello";
191 font-style: normal;
192 font-weight: normal;
193 speak: none;
194
195 display: inline-block;
196 text-decoration: inherit;
197 width: 1em;
198 margin-right: .2em;
199 text-align: center;
200 /* opacity: .8; */
201
202 /* For safety - reset parent styles, that can break glyph codes*/
203 font-variant: normal;
204 text-transform: none;
205
206 /* fix buttons height, for twitter bootstrap */
207 line-height: 1em;
208
209 /* Animation center compensation - margins should be symmetric */
210 /* remove if not needed */
211 margin-left: .2em;
212
213 /* you can be more comfortable with increased icons size */
214 /* font-size: 120%; */
215
216 /* Font smoothing. That was taken from TWBS */
217 -webkit-font-smoothing: antialiased;
218 -moz-osx-font-smoothing: grayscale;
219
220 /* Uncomment for 3D effect */
221 /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
222 }
223 .icon-rss:before { content: '\f09e'; } /* '' */
224
225
226
227 /* from https://jekyllrb.com/docs/templates/#code-snippet-highlighting*/
228 /* links to a 6 year old css file supposedly used by github:*/
229 /* https://github.com/mojombo/tpw/blob/master/css/syntax.css*/
230 /* googling jekyll source code css, leads*/
231 /* https://github.com/jwarby/jekyll-pygments-themes, which seems ok,*/
232 /* but I'm curious what the upstream default is. I find rogue has no*/
233 /* default. pygments does, so I do that:*/
234 /* http://pygments.org/docs/quickstart/*/
235 /* fire up python2,*/
236
237 /* from pygments.formatters import HtmlFormatter */
238 /* print HtmlFormatter().get_style_defs('.highlight')*/
239
240 .highlight .cm {
241 color: #999988;
242 font-style: italic;
243 }
244 .highlight .cp {
245 color: #999999;
246 font-weight: bold;
247 }
248 .highlight .c1 {
249 color: #999988;
250 font-style: italic;
251 }
252 .highlight .cs {
253 color: #999999;
254 font-weight: bold;
255 font-style: italic;
256 }
257 .highlight .c, .highlight .cd {
258 color: #999988;
259 font-style: italic;
260 }
261 .highlight .err {
262 color: #a61717;
263 background-color: #e3d2d2;
264 }
265 .highlight .gd {
266 color: #000000;
267 background-color: #ffdddd;
268 }
269 .highlight .ge {
270 color: #000000;
271 font-style: italic;
272 }
273 .highlight .gr {
274 color: #aa0000;
275 }
276 .highlight .gh {
277 color: #999999;
278 }
279 .highlight .gi {
280 color: #000000;
281 background-color: #ddffdd;
282 }
283 .highlight .go {
284 color: #888888;
285 }
286 .highlight .gp {
287 color: #555555;
288 }
289 .highlight .gs {
290 font-weight: bold;
291 }
292 .highlight .gu {
293 color: #aaaaaa;
294 }
295 .highlight .gt {
296 color: #aa0000;
297 }
298 .highlight .kc {
299 color: #000000;
300 font-weight: bold;
301 }
302 .highlight .kd {
303 color: #000000;
304 font-weight: bold;
305 }
306 .highlight .kn {
307 color: #000000;
308 font-weight: bold;
309 }
310 .highlight .kp {
311 color: #000000;
312 font-weight: bold;
313 }
314 .highlight .kr {
315 color: #000000;
316 font-weight: bold;
317 }
318 .highlight .kt {
319 color: #445588;
320 font-weight: bold;
321 }
322 .highlight .k, .highlight .kv {
323 color: #000000;
324 font-weight: bold;
325 }
326 .highlight .mf {
327 color: #009999;
328 }
329 .highlight .mh {
330 color: #009999;
331 }
332 .highlight .il {
333 color: #009999;
334 }
335 .highlight .mi {
336 color: #009999;
337 }
338 .highlight .mo {
339 color: #009999;
340 }
341 .highlight .m, .highlight .mb, .highlight .mx {
342 color: #009999;
343 }
344 .highlight .sb {
345 color: #d14;
346 }
347 .highlight .sc {
348 color: #d14;
349 }
350 .highlight .sd {
351 color: #d14;
352 }
353 .highlight .s2 {
354 color: #d14;
355 }
356 .highlight .se {
357 color: #d14;
358 }
359 .highlight .sh {
360 color: #d14;
361 }
362 .highlight .si {
363 color: #d14;
364 }
365 .highlight .sx {
366 color: #d14;
367 }
368 .highlight .sr {
369 color: #009926;
370 }
371 .highlight .s1 {
372 color: #d14;
373 }
374 .highlight .ss {
375 color: #990073;
376 }
377 .highlight .s {
378 color: #d14;
379 }
380 .highlight .na {
381 color: #008080;
382 }
383 .highlight .bp {
384 color: #999999;
385 }
386 .highlight .nb {
387 color: #0086B3;
388 }
389 .highlight .nc {
390 color: #445588;
391 font-weight: bold;
392 }
393 .highlight .no {
394 color: #008080;
395 }
396 .highlight .nd {
397 color: #3c5d5d;
398 font-weight: bold;
399 }
400 .highlight .ni {
401 color: #800080;
402 }
403 .highlight .ne {
404 color: #990000;
405 font-weight: bold;
406 }
407 .highlight .nf {
408 color: #990000;
409 font-weight: bold;
410 }
411 .highlight .nl {
412 color: #990000;
413 font-weight: bold;
414 }
415 .highlight .nn {
416 color: #555555;
417 }
418 .highlight .nt {
419 color: #000080;
420 }
421 .highlight .vc {
422 color: #008080;
423 }
424 .highlight .vg {
425 color: #008080;
426 }
427 .highlight .vi {
428 color: #008080;
429 }
430 .highlight .nv {
431 color: #008080;
432 }
433 .highlight .ow {
434 color: #000000;
435 font-weight: bold;
436 }
437 .highlight .o {
438 color: #000000;
439 font-weight: bold;
440 }
441 .highlight .w {
442 color: #bbbbbb;
443 }
444 .highlight {
445 background-color: #f8f8f8;
446 }