-@import 'common';
+@import "normalize";
+@import "common";
#cc-by-sa {
/* It sits too high by default. */
/* 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;
+ border-top-color: $comment-br-color;
/* copied from stackoverflow. */
border-top-width: 0.716667px;
#comment-stripe, #comment-stripe code {
/* differentiate comments, don't colorize code */
- background-color: #EBEAE4;
+ background-color: $comment-background-color;
}
#comment-section {
/* make the top/bottom of comments have more space */
- padding: 30px 0;
+ padding-top: 30px;
+ padding-bottom: 30px;
}
#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;
+ background: $text-input-color;
}
#comment-section textarea {
/* go with theme, avoid bright white. */
- background-color: #f6f6f0;
+ background-color: $content-color;
}
textarea, input {
.comment-date:before { content: '\A'; }
.comment-date {
white-space:pre;
- /* make it a bit smaller and lighter */
- color: #555;
+ color: $comment-date-color;
font-size: 15px;
}
header a:visited, header a {
/* link color in top navigation is better as some less eye */
/* catching color. */
- color: #333333;
+ color: $page-header-link-color;
}
.post-header {
}
.main-content-stripe {
/* i don't like bright white. copy a gitweb color */
- background-color: #f6f6f0;
+ background-color: $content-color;
padding: 30px 0;
}
footer {
footer p {
margin: 0;
}
-header,footer,.content,#comment-section {
- /* top margin 0, left/right = auto, which centers it */
- margin: 0 auto;
+.page_header,footer,.content,#comment-section {
+ // auto centers it
+ margin-left: auto;
+ margin-right: auto;
+ margin-top: 0;
+ margin-bottom: 0;
+ padding-left: 30px;
+ padding-right: 30px;
/* default too wide */
- max-width: 700px;
+ max-width: $main-column-max-width;
}
footer {
font-size: 15px;
}
code {
- background-color: #fff;
+ background-color: $inline-code-background-color;
/* defaults are squished next to the borders of the color change */
padding: 1px 5px;
}
/* taken from wikipedia. purple links get a bit old. */
a {
- color: #0645ad;
+ color: $link-color;
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;
+ color: $link-visited-color;
}
-[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;
-}
+@import "subscribe-char";
+@import "code-highlight";