add normalize, refactor css
[iankelling.org] / css / main.scss
index a9288e1a70661cb80b5bf66627129dd8e184c1cf..8d8b4bd4d5a1ce159ed1434d43cbd4f333c68747 100644 (file)
@@ -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";