@import 'common'; #cc-by-sa { /* It sits too high by default. */ vertical-align: middle; } #comments { /* add some space at top and bottom of comment section */ margin: 50px 0; } div.comment { /* whitespace doesn't cut it to differentiate multiple comments,*/ /* so use a line */ border-top-style: solid; /* some darkish color, black is too striking */ border-top-color: #C4C3BC; /* copied from stackoverflow. */ border-top-width: 0.716667px; } #comment-stripe, #comment-stripe code { /* differentiate comments, don't colorize code */ background-color: #EBEAE4; } #comment-section { /* make the top/bottom of comments have more space */ padding: 30px 0; } #comment-section textarea:focus, #comment-section textarea:active, #comment-section input:hover { /* color textarea when selected, and for submit button,*/ /* without 3d effect, we need a different color. */ background: #FFFFFF; } #comment-section textarea { /* go with theme, avoid bright white. */ background-color: #f6f6f0; } textarea, input { /* default is some 3d border. use a flat border instead. */ border: 0; /* by default text input hugs the edges too much */ padding: 5px; /* add some space between input and submit button */ margin-bottom: 10px; } /* if this is filled out, we can assume it's spam. common tactic. */ input.misc { display: none; } textarea { /* make the comment box be full width */ width: 100%; } ul { /* i dun like the default bullet points */ list-style-type: none; } ul.index { /* for site index lists, bigger font, no indent, more space */ font-size: 22px; padding-left: 0; line-height: 2; } body{ /* default is too scrunched */ line-height: 1.5; /* default too small */ font-size: 18px; } /* alternative to a
. whatever. */ /* https://stackoverflow.com/questions/7363766/how-to-insert-a-line-break-before-an-element-using-css */ .comment-date:before { content: '\A'; } .comment-date { white-space:pre; /* make it a bit smaller and lighter */ color: #555; font-size: 15px; } .post-date { font-size: 15px; margin: 5px 0; } .post-title { /* default too wide, got from some random blog */ letter-spacing: -1px; /* default is too much below where the date is. */ margin: 0; } /* make the header links less prominent. */ header a:visited, header a { /* link color in top navigation is better as some less eye */ /* catching color. */ color: #333333; } .post-header { margin-bottom: 30px; } h1,h2,h3{ line-height: 1.2; } .main-content-stripe { /* i don't like bright white. copy a gitweb color */ background-color: #f6f6f0; padding: 30px 0; } footer { padding: 30px 0; } footer p { margin: 0; } header,footer,.content,#comment-section { /* top margin 0, left/right = auto, which centers it */ margin: 0 auto; /* default too wide */ max-width: 700px; } footer { font-size: 15px; } code { background-color: #fff; /* defaults are squished next to the borders of the color change */ padding: 1px 5px; } code, pre { /* mono text is wider, so use smaller font to compensate */ font-size: 15px; } pre { /* defaults are squished next to the borders of the color change */ padding: 6px 8px; } /* taken from wikipedia. purple links get a bit old. */ a { color: #0645ad; text-decoration: none; } a:hover { text-decoration: underline; } a:visited { color: #0b0080; } /* grabbed just the rss icon from font-awesome using fontello.com*/ /* then extracted just the relevant bits out. I tried using svg,*/ /* since it is more modern and compatible,*/ /* but it seems that it would take a bunch of work to change it's*/ /* color, do underline on hover, and line it up with the rest*/ /* of the text. */ @font-face { font-family: 'fontello'; src: url('/font/fontello.eot?97936362'); src: url('/font/fontello.eot?97936362#iefix') format('embedded-opentype'), url('/font/fontello.woff2?97936362') format('woff2'), url('/font/fontello.woff?97936362') format('woff'), url('/font/fontello.ttf?97936362') format('truetype'), url('/font/fontello.svg?97936362#fontello') format('svg'); font-weight: normal; font-style: normal; } [class^="icon-"]:before, [class*=" icon-"]:before { font-family: "fontello"; font-style: normal; font-weight: normal; speak: none; display: inline-block; text-decoration: inherit; width: 1em; margin-right: .2em; text-align: center; /* opacity: .8; */ /* For safety - reset parent styles, that can break glyph codes*/ font-variant: normal; text-transform: none; /* fix buttons height, for twitter bootstrap */ line-height: 1em; /* Animation center compensation - margins should be symmetric */ /* remove if not needed */ margin-left: .2em; /* you can be more comfortable with increased icons size */ /* font-size: 120%; */ /* Font smoothing. That was taken from TWBS */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* Uncomment for 3D effect */ /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */ } .icon-rss:before { content: '\f09e'; } /* '' */ /* from https://jekyllrb.com/docs/templates/#code-snippet-highlighting*/ /* links to a 6 year old css file supposedly used by github:*/ /* https://github.com/mojombo/tpw/blob/master/css/syntax.css*/ /* googling jekyll source code css, leads*/ /* https://github.com/jwarby/jekyll-pygments-themes, which seems ok,*/ /* but I'm curious what the upstream default is. I find rogue has no*/ /* default. pygments does, so I do that:*/ /* http://pygments.org/docs/quickstart/*/ /* fire up python2,*/ /* from pygments.formatters import HtmlFormatter */ /* print HtmlFormatter().get_style_defs('.highlight')*/ .highlight .cm { color: #999988; font-style: italic; } .highlight .cp { color: #999999; font-weight: bold; } .highlight .c1 { color: #999988; font-style: italic; } .highlight .cs { color: #999999; font-weight: bold; font-style: italic; } .highlight .c, .highlight .cd { color: #999988; font-style: italic; } .highlight .err { color: #a61717; background-color: #e3d2d2; } .highlight .gd { color: #000000; background-color: #ffdddd; } .highlight .ge { color: #000000; font-style: italic; } .highlight .gr { color: #aa0000; } .highlight .gh { color: #999999; } .highlight .gi { color: #000000; background-color: #ddffdd; } .highlight .go { color: #888888; } .highlight .gp { color: #555555; } .highlight .gs { font-weight: bold; } .highlight .gu { color: #aaaaaa; } .highlight .gt { color: #aa0000; } .highlight .kc { color: #000000; font-weight: bold; } .highlight .kd { color: #000000; font-weight: bold; } .highlight .kn { color: #000000; font-weight: bold; } .highlight .kp { color: #000000; font-weight: bold; } .highlight .kr { color: #000000; font-weight: bold; } .highlight .kt { color: #445588; font-weight: bold; } .highlight .k, .highlight .kv { color: #000000; font-weight: bold; } .highlight .mf { color: #009999; } .highlight .mh { color: #009999; } .highlight .il { color: #009999; } .highlight .mi { color: #009999; } .highlight .mo { color: #009999; } .highlight .m, .highlight .mb, .highlight .mx { color: #009999; } .highlight .sb { color: #d14; } .highlight .sc { color: #d14; } .highlight .sd { color: #d14; } .highlight .s2 { color: #d14; } .highlight .se { color: #d14; } .highlight .sh { color: #d14; } .highlight .si { color: #d14; } .highlight .sx { color: #d14; } .highlight .sr { color: #009926; } .highlight .s1 { color: #d14; } .highlight .ss { color: #990073; } .highlight .s { color: #d14; } .highlight .na { color: #008080; } .highlight .bp { color: #999999; } .highlight .nb { color: #0086B3; } .highlight .nc { color: #445588; font-weight: bold; } .highlight .no { color: #008080; } .highlight .nd { color: #3c5d5d; font-weight: bold; } .highlight .ni { color: #800080; } .highlight .ne { color: #990000; font-weight: bold; } .highlight .nf { color: #990000; font-weight: bold; } .highlight .nl { color: #990000; font-weight: bold; } .highlight .nn { color: #555555; } .highlight .nt { color: #000080; } .highlight .vc { color: #008080; } .highlight .vg { color: #008080; } .highlight .vi { color: #008080; } .highlight .nv { color: #008080; } .highlight .ow { color: #000000; font-weight: bold; } .highlight .o { color: #000000; font-weight: bold; } .highlight .w { color: #bbbbbb; } .highlight { background-color: #f8f8f8; }