add normalize, refactor css

diff --git a/.gitmodules b/.gitmodules
new file mode 100644 (file)
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 1ba27afd1e5168d2d9847771e6ca2489d3f874e7..4aa8f6e5fb17e4d83f20750c2817665e33a960a8 100644 (file)
--- a/README
+++ b/README
@@ -3,6 +3,8 @@ Content and automated setup of iankelling.org
 
 * Setup
 
 
 * Setup
 

+I use a submodule, so git clone --recursive.
+

 setup.sh sets up apache and gitweb
 build.rb does static site generation
 
 setup.sh sets up apache and gitweb
 build.rb does static site generation
 

diff --git a/build.rb b/build.rb
index f724fe92ca4e28a343ab2efb3a60c4788e0b21ef..620fe89c345937dcec223e737a135069df2f7503 100755 (executable)
--- 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.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
 
 $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.
 
 # 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 (file)
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 ca35862f8e7e93c993add9dc7a763d4a496a412c..13f2490b50892764f112be8a48cd25486cd77dfc 100644 (file)
--- 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;
 $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 */
 
 /* 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 */
 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;
 }
     /* 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 f884fc7b7ce3f3e1cfd4c15e1b70913985d50add..0eea16a0948fef9c0e5adc36265e3890f01f8fac 100644 (file)
--- a/css/gitweb-site.scss
+++ b/css/gitweb-site.scss
@@ -1,8 +1,8 @@
 @import 'common';
 
 .main-content-stripe {
 @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;
 }
 
     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 {
 /* 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 {
     text-decoration: none;
 }
 a:hover {


@@ -53,7 +53,7 @@ a:hover {
 }
 
 a:visited {
 }
 
 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 */
     /* 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 a9288e1a70661cb80b5bf66627129dd8e184c1cf..8d8b4bd4d5a1ce159ed1434d43cbd4f333c68747 100644 (file)
--- 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. */
 
 #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;
     /* 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;
 
     /* 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 */
 
 #comment-stripe, #comment-stripe code {
     /* differentiate comments, don't colorize code */

-    background-color: #EBEAE4;
+    background-color: $comment-background-color;

 }
 
 #comment-section {
 }
 
 #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. */
 #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. */
 }
 
 #comment-section textarea {
     /* go with theme, avoid bright white. */

-    background-color: #f6f6f0;
+    background-color: $content-color;

 }
 
 textarea, input {
 }
 
 textarea, input {


@@ -91,8 +91,7 @@ body{
 .comment-date:before { content: '\A'; }
 .comment-date {
     white-space:pre;
 .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;
 }
 
     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. */
 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 {
 }
 
 .post-header {


@@ -124,7 +123,7 @@ h1,h2,h3{
 }
 .main-content-stripe {
     /* i don't like bright white. copy a gitweb color */
 }
 .main-content-stripe {
     /* i don't like bright white. copy a gitweb color */

-    background-color: #f6f6f0;
+    background-color: $content-color;

     padding: 30px 0;
 }
 footer {
     padding: 30px 0;
 }
 footer {


@@ -149,7 +148,7 @@ footer {
 }
 
 code {
 }
 
 code {

-    background-color: #fff;
+    background-color: $inline-code-background-color;

     /* defaults are squished next to the borders of the color change */
     padding: 1px 5px;
 }
     /* 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 {
 
 /* 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 {
     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 (submodule)
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 (symlink)
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 (file)
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'; } /* '' */