X-Git-Url: https://iankelling.org/git/?p=iankelling.org;a=blobdiff_plain;f=css%2Fmain.scss;fp=css%2Fmain.scss;h=8d8b4bd4d5a1ce159ed1434d43cbd4f333c68747;hp=a9288e1a70661cb80b5bf66627129dd8e184c1cf;hb=d668aa72f0503fe96aff5865215602e8f87e1a56;hpb=956d10ee358397728a058b51551ccd031c226c31 diff --git a/css/main.scss b/css/main.scss index a9288e1..8d8b4bd 100644 --- a/css/main.scss +++ b/css/main.scss @@ -1,4 +1,5 @@ -@import 'common'; +@import "normalize"; +@import "common"; #cc-by-sa { /* It sits too high by default. */ @@ -15,8 +16,7 @@ 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; + border-top-color: $comment-br-color; /* copied from stackoverflow. */ border-top-width: 0.716667px; @@ -24,7 +24,7 @@ div.comment { #comment-stripe, #comment-stripe code { /* differentiate comments, don't colorize code */ - background-color: #EBEAE4; + background-color: $comment-background-color; } #comment-section { @@ -37,12 +37,12 @@ div.comment { #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 { @@ -91,8 +91,7 @@ body{ .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; } @@ -111,7 +110,7 @@ body{ 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 { @@ -124,7 +123,7 @@ h1,h2,h3{ } .main-content-stripe { /* i don't like bright white. copy a gitweb color */ - background-color: #f6f6f0; + background-color: $content-color; padding: 30px 0; } footer { @@ -149,7 +148,7 @@ footer { } code { - background-color: #fff; + background-color: $inline-code-background-color; /* defaults are squished next to the borders of the color change */ padding: 1px 5px; } @@ -167,288 +166,16 @@ pre { /* 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; + color: $link-visited-color; } -/* 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; -} +@import "subscribe-char"; +@import "code-highlight";