X-Git-Url: https://iankelling.org/git/?p=iankelling.org;a=blobdiff_plain;f=css%2Fmain.scss;h=7c7e4a23206f6754d978c9f3fcb84538fa20b9d1;hp=42eb84199af6148c8654a2324344d21f79738cae;hb=a5d36b23813ae286ba3fb76e4f60ef6d267ba128;hpb=f98cd29f7b53a7c08f21792773a5b3b49d41eb9c diff --git a/css/main.scss b/css/main.scss index 42eb841..7c7e4a2 100644 --- a/css/main.scss +++ b/css/main.scss @@ -1,446 +1,180 @@ -#cc-by-sa { - /* It sits too high by default. */ - vertical-align: middle; -} +// https://github.com/necolas/normalize.css +@import "normalize"; +@import "common"; -#comments { - /* add some space at top and bottom of comment section */ - margin: 50px 0; +.cc-by-sa { + // It sits too high by default. + vertical-align: middle; } - -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; - +.comments { + // add some space at top and bottom of comment section + margin: 50px 0; } -#comment-stripe, #comment-stripe code { - /* differentiate comments, don't colorize code */ - background-color: #EBEAE4; +div.comment { + // whitespace doesn't cut it to differentiate multiple comments, + // so use a line + border-top-color: $comment-br-color; + border-top-style: solid; + border-top-width: 0.716667px; // copied from stackoverflow. } -#comment-section { - /* make the top/bottom of comments have more space */ - padding: 30px 0; +.comment-stripe, +.comment-stripe code { + // differentiate comments, don't colorize code + background-color: $comment-background-color; } +.comment-section { + // make the top/bottom of comments have more space + padding-bottom: 30px; + padding-top: 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; -} + textarea { + background-color: $content-color; // go with theme, avoid bright white. + } -#comment-section textarea { - /* go with theme, avoid bright white. */ - background-color: #f6f6f0; + input:hover, + textarea:active, + textarea:focus { + // color textarea when selected, and for submit button, + // without 3d effect, we need a different color. + background: $text-input-color; + } } -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; +textarea, +input { + border: 0; // flat is better than default 3d thing + margin-bottom: 10px; // add some space between input and submit button + padding: 5px; // by default text input hugs the edges too much } -/* if this is filled out, we can assume it's spam. common tactic. */ +// if this is filled out, we can assume it's spam. common tactic. input.misc { - display: none; + display: none; } textarea { - /* make the comment box be full width */ - width: 100%; + // make the comment box be full width + width: 100%; } ul { - /* i dun like the default bullet points */ - list-style-type: none; + // 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; +.site-nav-list { + // for site index lists, bigger font, no indent, more space + font-size: 22px; + line-height: 2; + padding-left: 0; } -body{ - /* default is too scrunched */ - line-height: 1.5; - /* default too small */ - font-size: 18px; +body { + font-size: 18px; // default too small + line-height: 1.5; // default is too scrunched } - -/* 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; + color: $comment-date-color; + font-size: 15px; + margin-top: 0; } .post-date { - font-size: 15px; - margin: 5px 0; + 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; + letter-spacing: -1px; // default too wide, found randomly + margin: 0; // default is too much below where the date is. } -/* 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; +// make the header links less prominent. +// link color in top navigation is better as some less eye +// catching color. +header a:visited, +header a { + color: $page-header-link-color; } .post-header { - margin-bottom: 30px; + margin-bottom: 30px; } -h1,h2,h3{ - line-height: 1.2; +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; + // i don't like bright white. copy a gitweb color + background-color: $content-color; + padding: 30px 0; } + footer { - padding: 30px 0; -} -footer p { + font-size: 15px; + padding: 30px 0; + + 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; -} + +.comment-section, +.content, +.page_header, footer { - font-size: 15px; + // auto does the centering magic + margin-bottom: 0; + margin-left: auto; + margin-right: auto; + margin-top: 0; + max-width: $main-column-max-width; // default too wide + padding-left: 30px; + padding-right: 30px; } code { - background-color: #fff; - /* defaults are squished next to the borders of the color change */ - padding: 1px 5px; + background-color: $inline-code-background-color; + // 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; +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; + // defaults are squished next to the borders of the color change + padding: 6px 8px; } -/* taken from wikipedia. purple links get a bit old. */ +// taken from wikipedia. purple links get a bit old. a { - color: #0645ad; - text-decoration: none; + color: $link-color; + text-decoration: none; } + a:hover { - text-decoration: underline; -} -a:visited { - color: #0b0080; + text-decoration: underline; } -/* 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); */ +a:visited { + color: $link-visited-color; } -.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";