convert css to scss
[iankelling.org] / css / main.scss
diff --git a/css/main.scss b/css/main.scss
new file mode 100644 (file)
index 0000000..42eb841
--- /dev/null
@@ -0,0 +1,446 @@
+#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 <br>. 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;
+}