iankelling.org Git - iankelling.org/blob - css/main.scss

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