From d668aa72f0503fe96aff5865215602e8f87e1a56 Mon Sep 17 00:00:00 2001 From: Ian Kelling Date: Mon, 3 Oct 2016 17:20:10 -0700 Subject: [PATCH] add normalize, refactor css --- .gitmodules | 3 + README | 2 + build.rb | 5 +- css/code-highlight.scss | 220 +++++++++++++++++++++++++++++ css/common.scss | 14 +- css/gitweb-site.scss | 10 +- css/main.scss | 301 ++-------------------------------------- css/normalize.css | 1 + css/normalize.scss | 1 + css/subscribe-char.scss | 52 +++++++ 10 files changed, 314 insertions(+), 295 deletions(-) create mode 100644 .gitmodules create mode 100644 css/code-highlight.scss create mode 160000 css/normalize.css create mode 120000 css/normalize.scss create mode 100644 css/subscribe-char.scss diff --git a/.gitmodules b/.gitmodules new file mode 100644 index 0000000..54ca8a1 --- /dev/null +++ b/.gitmodules @@ -0,0 +1,3 @@ +[submodule "css/normalize.css"] + path = css/normalize.css + url = https://github.com/necolas/normalize.css.git diff --git a/README b/README index 1ba27af..4aa8f6e 100644 --- a/README +++ b/README @@ -3,6 +3,8 @@ Content and automated setup of iankelling.org * Setup +I use a submodule, so git clone --recursive. + setup.sh sets up apache and gitweb build.rb does static site generation diff --git a/build.rb b/build.rb index f724fe9..620fe89 100755 --- a/build.rb +++ b/build.rb @@ -30,6 +30,7 @@ blog_list = [] # table data FileUtils.mkdir_p('../proposed-comments') FileUtils.chmod(0777, '../proposed-comments') FileUtils.rm Dir.glob('blog/*') +FileUtils.rm Dir.glob('css/*') $db = db_init # date has no type affinity, since floating point (REAL) doesn't @@ -92,4 +93,6 @@ stdpage('favorite-things', File.read('../favorite-things.html')) # we could use ruby native stuff here, but this was # better documented so meh. -system("scss --cache-location ../.sass-cache --update ../css:css") +# Force because it's cache is not perfect, it definitely misses renamed symlinks. +# This creates a few extra files, but oh well. +system("scss --force --cache-location ../.sass-cache --update ../css:css") diff --git a/css/code-highlight.scss b/css/code-highlight.scss new file mode 100644 index 0000000..d5d05f2 --- /dev/null +++ b/css/code-highlight.scss @@ -0,0 +1,220 @@ +/* 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; +} diff --git a/css/common.scss b/css/common.scss index ca35862..13f2490 100644 --- a/css/common.scss +++ b/css/common.scss @@ -1,6 +1,16 @@ -/* a few other things are duplicated in main.css and gitweb.css,*/ +/* a few minor things are duplicated in main.css and gitweb.css,*/ +$comment-background-color: #ebeae4; +$comment-br-color: #c4c3bc; /* a darkish color, black is too striking */ +$comment-date-color: #555; /* a bit lighter for less emphasis */ +$content-color: #f6f6f0; // from gitweb. +$inline-code-background-color: #ffffff; +$link-color: #0645ad; +$link-visited-color: #0b0080; $main-column-max-width: 700px; +$page-header-link-color: #333; +$site-background-color: #d9d8d1; // from gitweb. +$text-input-color: #ffffff; /* nice font seen elsewhere. google -> stackoverflow -> localfont.com */ /* If I didn't use this font, I'd just go with sans-serif */ @@ -22,7 +32,7 @@ $main-column-max-width: 700px; body { font-family: 'Open Sans',sans-serif; /* default too bright. use gitweb's color */ - background-color: #d9d8d1; + background-color: $site-background-color; /* get rid of the small default margin so we can stripe the page */ margin: 0; } diff --git a/css/gitweb-site.scss b/css/gitweb-site.scss index f884fc7..0eea16a 100644 --- a/css/gitweb-site.scss +++ b/css/gitweb-site.scss @@ -1,8 +1,8 @@ @import 'common'; .main-content-stripe { - /* i don't like bright white. copy a gitweb color */ - background-color: #f6f6f0; + // default too bright. + background-color: $content-color; padding: 30px 0; } @@ -45,7 +45,7 @@ div.page_header { /* but found certain things not overriding as I would expect,*/ /* So hammer it with !important */ a { - color: #0645ad !important; + color: $link-color !important; text-decoration: none; } a:hover { @@ -53,7 +53,7 @@ a:hover { } a:visited { - color: #0b0080 !important; + color: $link-visited-color !important; } @@ -63,5 +63,5 @@ a:visited { /* copy of the h3 size in main site. */ font-size: 21.0667px; /* same as for main.css */ - color: #333333 !important; + color: $page-header-link-color !important; } 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"; diff --git a/css/normalize.css b/css/normalize.css new file mode 160000 index 0000000..f06565f --- /dev/null +++ b/css/normalize.css @@ -0,0 +1 @@ +Subproject commit f06565fe8e0e1ad1b88f2732719e28ed97bde40f diff --git a/css/normalize.scss b/css/normalize.scss new file mode 120000 index 0000000..81d6dfd --- /dev/null +++ b/css/normalize.scss @@ -0,0 +1 @@ +normalize.css/normalize.css \ No newline at end of file diff --git a/css/subscribe-char.scss b/css/subscribe-char.scss new file mode 100644 index 0000000..0b46441 --- /dev/null +++ b/css/subscribe-char.scss @@ -0,0 +1,52 @@ +/* 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'; } /* '' */ -- 2.30.2