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