X-Git-Url: https://iankelling.org/git/?p=iankelling.org;a=blobdiff_plain;f=css%2Fmain.scss;fp=css%2Fmain.scss;h=42eb84199af6148c8654a2324344d21f79738cae;hp=0000000000000000000000000000000000000000;hb=f98cd29f7b53a7c08f21792773a5b3b49d41eb9c;hpb=842a5c8cf5cb6526dc880fd8bc5fedd2ecfc544c diff --git a/css/main.scss b/css/main.scss new file mode 100644 index 0000000..42eb841 --- /dev/null +++ b/css/main.scss @@ -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
. 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; +}