iankelling.org Git - iankelling.org/blob - _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 }