From f32a9440b9055001ef3749999eaf3b4d7974932c Mon Sep 17 00:00:00 2001 From: Ian Kelling Date: Mon, 3 Oct 2016 18:14:21 -0700 Subject: [PATCH] css code style and minor refactor --- b.rb | 6 +- build.rb | 2 +- css/code-highlight.scss | 170 +++++++++++++++---------------- css/common.scss | 37 ++----- css/gitweb-site.scss | 83 ++++++++-------- css/main.scss | 215 ++++++++++++++++++++-------------------- css/open-sans.scss | 15 +++ css/subscribe-char.scss | 68 ++++++------- index.html | 2 +- 9 files changed, 300 insertions(+), 298 deletions(-) create mode 100644 css/open-sans.scss diff --git a/b.rb b/b.rb index 6bd631d..2dc8ad8 100644 --- a/b.rb +++ b/b.rb @@ -90,12 +90,12 @@ EOF #{content} -
+
#{o[:comments]}
@@ -243,7 +243,7 @@ EOF blog_toc_entry = "
  • #{title}
    • " com_section = < +
    #{com_section}
    EOF diff --git a/build.rb b/build.rb index 620fe89..370047f 100755 --- a/build.rb +++ b/build.rb @@ -80,7 +80,7 @@ EOF fskel('index.html', DN, File.read('../index.html')) stdpage('blog', < +
      #{blog_list.join("\n")}
    EOF diff --git a/css/code-highlight.scss b/css/code-highlight.scss index d5d05f2..7649d13 100644 --- a/css/code-highlight.scss +++ b/css/code-highlight.scss @@ -12,209 +12,209 @@ /* print HtmlFormatter().get_style_defs('.highlight')*/ .highlight .cm { - color: #999988; - font-style: italic; + color: #999988; + font-style: italic; } .highlight .cp { - color: #999999; - font-weight: bold; + color: #999999; + font-weight: bold; } .highlight .c1 { - color: #999988; - font-style: italic; + color: #999988; + font-style: italic; } .highlight .cs { - color: #999999; - font-weight: bold; - font-style: italic; + color: #999999; + font-weight: bold; + font-style: italic; } .highlight .c, .highlight .cd { - color: #999988; - font-style: italic; + color: #999988; + font-style: italic; } .highlight .err { - color: #a61717; - background-color: #e3d2d2; + color: #a61717; + background-color: #e3d2d2; } .highlight .gd { - color: #000000; - background-color: #ffdddd; + color: #000000; + background-color: #ffdddd; } .highlight .ge { - color: #000000; - font-style: italic; + color: #000000; + font-style: italic; } .highlight .gr { - color: #aa0000; + color: #aa0000; } .highlight .gh { - color: #999999; + color: #999999; } .highlight .gi { - color: #000000; - background-color: #ddffdd; + color: #000000; + background-color: #ddffdd; } .highlight .go { - color: #888888; + color: #888888; } .highlight .gp { - color: #555555; + color: #555555; } .highlight .gs { - font-weight: bold; + font-weight: bold; } .highlight .gu { - color: #aaaaaa; + color: #aaaaaa; } .highlight .gt { - color: #aa0000; + color: #aa0000; } .highlight .kc { - color: #000000; - font-weight: bold; + color: #000000; + font-weight: bold; } .highlight .kd { - color: #000000; - font-weight: bold; + color: #000000; + font-weight: bold; } .highlight .kn { - color: #000000; - font-weight: bold; + color: #000000; + font-weight: bold; } .highlight .kp { - color: #000000; - font-weight: bold; + color: #000000; + font-weight: bold; } .highlight .kr { - color: #000000; - font-weight: bold; + color: #000000; + font-weight: bold; } .highlight .kt { - color: #445588; - font-weight: bold; + color: #445588; + font-weight: bold; } .highlight .k, .highlight .kv { - color: #000000; - font-weight: bold; + color: #000000; + font-weight: bold; } .highlight .mf { - color: #009999; + color: #009999; } .highlight .mh { - color: #009999; + color: #009999; } .highlight .il { - color: #009999; + color: #009999; } .highlight .mi { - color: #009999; + color: #009999; } .highlight .mo { - color: #009999; + color: #009999; } .highlight .m, .highlight .mb, .highlight .mx { - color: #009999; + color: #009999; } .highlight .sb { - color: #d14; + color: #d14; } .highlight .sc { - color: #d14; + color: #d14; } .highlight .sd { - color: #d14; + color: #d14; } .highlight .s2 { - color: #d14; + color: #d14; } .highlight .se { - color: #d14; + color: #d14; } .highlight .sh { - color: #d14; + color: #d14; } .highlight .si { - color: #d14; + color: #d14; } .highlight .sx { - color: #d14; + color: #d14; } .highlight .sr { - color: #009926; + color: #009926; } .highlight .s1 { - color: #d14; + color: #d14; } .highlight .ss { - color: #990073; + color: #990073; } .highlight .s { - color: #d14; + color: #d14; } .highlight .na { - color: #008080; + color: #008080; } .highlight .bp { - color: #999999; + color: #999999; } .highlight .nb { - color: #0086B3; + color: #0086B3; } .highlight .nc { - color: #445588; - font-weight: bold; + color: #445588; + font-weight: bold; } .highlight .no { - color: #008080; + color: #008080; } .highlight .nd { - color: #3c5d5d; - font-weight: bold; + color: #3c5d5d; + font-weight: bold; } .highlight .ni { - color: #800080; + color: #800080; } .highlight .ne { - color: #990000; - font-weight: bold; + color: #990000; + font-weight: bold; } .highlight .nf { - color: #990000; - font-weight: bold; + color: #990000; + font-weight: bold; } .highlight .nl { - color: #990000; - font-weight: bold; + color: #990000; + font-weight: bold; } .highlight .nn { - color: #555555; + color: #555555; } .highlight .nt { - color: #000080; + color: #000080; } .highlight .vc { - color: #008080; + color: #008080; } .highlight .vg { - color: #008080; + color: #008080; } .highlight .vi { - color: #008080; + color: #008080; } .highlight .nv { - color: #008080; + color: #008080; } .highlight .ow { - color: #000000; - font-weight: bold; + color: #000000; + font-weight: bold; } .highlight .o { - color: #000000; - font-weight: bold; + color: #000000; + font-weight: bold; } .highlight .w { - color: #bbbbbb; + color: #bbbbbb; } .highlight { - background-color: #f8f8f8; + background-color: #f8f8f8; } diff --git a/css/common.scss b/css/common.scss index 13f2490..7bf33af 100644 --- a/css/common.scss +++ b/css/common.scss @@ -1,38 +1,21 @@ -/* a few minor things are duplicated in main.css and gitweb.css,*/ +// a few minor things are in main.css and gitweb.css + +@import "open-sans"; $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 */ +$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; +$inline-code-background-color: #fff; $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 */ -@font-face { - font-family: 'Open Sans'; - font-weight: 400; - font-style: normal; - src: url('/font/Open-Sans-regular/Open-Sans-regular.eot'); - src: url('/font/Open-Sans-regular/Open-Sans-regular.eot?#iefix') format('embedded-opentype'), - local('Open Sans'), - local('Open-Sans-regular'), - url('/font/Open-Sans-regular/Open-Sans-regular.woff2') format('woff2'), - url('/font/Open-Sans-regular/Open-Sans-regular.woff') format('woff'), - url('/font/Open-Sans-regular/Open-Sans-regular.ttf') format('truetype'), - url('/font/Open-Sans-regular/Open-Sans-regular.svg#Open Sans') format('svg'); -} - +$text-input-color: #fff; body { - font-family: 'Open Sans',sans-serif; - /* default too bright. use gitweb's color */ - background-color: $site-background-color; - /* get rid of the small default margin so we can stripe the page */ - margin: 0; + background-color: $site-background-color; // default too bright. use gitweb's color + font-family: 'Open Sans',sans-serif; + margin: 0; // get rid of the small default margin so we can stripe the page } diff --git a/css/gitweb-site.scss b/css/gitweb-site.scss index 0eea16a..a8a7ba7 100644 --- a/css/gitweb-site.scss +++ b/css/gitweb-site.scss @@ -1,67 +1,66 @@ -@import 'common'; +@import "common"; .main-content-stripe { - // default too bright. - background-color: $content-color; - padding: 30px 0; + // default too bright. + background-color: $content-color; + padding: 30px 0; } -/* copied from main.css, applied here */ body { - border-width: 0px; + border-width: 0; // remove ugly border } -.page_header,.page_footer { - // auto centers it - margin-left: auto; - margin-right: auto; - margin-top: 0; - margin-bottom: 0; - padding-left: 30px; - padding-right: 30px; - max-width: $main-column-max-width; + +.page_header, +.page_footer { + margin-bottom: 0; + margin-left: auto; + margin-right: auto; + margin-top: 0; + max-width: $main-column-max-width; + padding-left: 30px; + padding-right: 30px; } table.project_list { - /* The main project list just has this one uncentered element,*/ - /* so center it */ - margin: 0 auto; + // The main project list just has this one uncentered element, + // so center it + margin: 0 auto; } + .content { - /* summary pages etc. don't fit nicely in 700px, so just*/ - /* have a 20px margin. */ - margin: 0 20px; + // summary pages etc. don't fit nicely in 700px, so just + // have a 20px margin. + margin: 0 20px; } div.page_header { - /* 21.0667 seems to be default for h3 in the non-gitweb site, copy it here */ - margin-top: 21.0667px; - margin-bottom: 21.0667px; - /* remove padding added by gitweb's css */ - padding-top: 0; - padding-bottom: 0; + // 21.0667 seems to be default for h3 in the non-gitweb site, copy it here + margin-bottom: 21.0667px; + margin-top: 21.0667px; + padding-bottom: 0; + padding-top: 0; // remove padding added by gitweb's css } -/* I tried to find all the css to override,*/ -/* but found certain things not overriding as I would expect,*/ -/* So hammer it with !important */ +// I tried to find all the css to override, +// but found certain things not overriding as I would expect, +// So hammer it with !important a { - color: $link-color !important; - text-decoration: none; + color: $link-color !important; + text-decoration: none; } + a:hover { - text-decoration: underline !important; + text-decoration: underline !important; } a:visited { - color: $link-visited-color !important; + color: $link-visited-color !important; } - -.page_header, .page_header a:visited, .page_header a { - /* copy from h settings in main.css */ - line-height: 1.2; - /* copy of the h3 size in main site. */ - font-size: 21.0667px; - /* same as for main.css */ - color: $page-header-link-color !important; +.page_header, +.page_header a:visited, +.page_header a { + color: $page-header-link-color !important; // same as for main.css + font-size: 21.0667px; // same as otehr 21.0667 + line-height: 1.2; // copy from h settings in main.css } diff --git a/css/main.scss b/css/main.scss index 8d8b4bd..c878224 100644 --- a/css/main.scss +++ b/css/main.scss @@ -1,181 +1,186 @@ +// https://github.com/necolas/normalize.css @import "normalize"; @import "common"; -#cc-by-sa { - /* It sits too high by default. */ - vertical-align: middle; +.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; +.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; - border-top-color: $comment-br-color; - /* copied from stackoverflow. */ - border-top-width: 0.716667px; - + // 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-stripe, #comment-stripe code { - /* differentiate comments, don't colorize code */ - background-color: $comment-background-color; +.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-top: 30px; - padding-bottom: 30px; -} +.comment-section { + // make the top/bottom of comments have more space + padding-bottom: 30px; + padding-top: 30px; + textarea { + background-color: $content-color; // go with theme, avoid bright white. + } -#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. */ + 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; + } } -#comment-section textarea { - /* go with theme, avoid bright white. */ - background-color: $content-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"; +} -/* 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; - color: $comment-date-color; - font-size: 15px; + color: $comment-date-color; + font-size: 15px; + white-space: pre; } .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: $page-header-link-color; +// 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: $content-color; - 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; + } } -.page_header,footer,.content,#comment-section { - // auto centers it - margin-left: auto; - margin-right: auto; - margin-top: 0; - margin-bottom: 0; - padding-left: 30px; - padding-right: 30px; - /* default too wide */ - max-width: $main-column-max-width; -} + +.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: $inline-code-background-color; - /* 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: $link-color; - text-decoration: none; + color: $link-color; + text-decoration: none; } + a:hover { - text-decoration: underline; + text-decoration: underline; } + a:visited { - color: $link-visited-color; + color: $link-visited-color; } - @import "subscribe-char"; @import "code-highlight"; diff --git a/css/open-sans.scss b/css/open-sans.scss new file mode 100644 index 0000000..876df66 --- /dev/null +++ b/css/open-sans.scss @@ -0,0 +1,15 @@ +/* nice font seen elsewhere. google -> stackoverflow -> localfont.com */ +/* If I didn't use this font, I'd just go with sans-serif */ +@font-face { + font-family: 'Open Sans'; + font-weight: 400; + font-style: normal; + src: url('/font/Open-Sans-regular/Open-Sans-regular.eot'); + src: url('/font/Open-Sans-regular/Open-Sans-regular.eot?#iefix') format('embedded-opentype'), + local('Open Sans'), + local('Open-Sans-regular'), + url('/font/Open-Sans-regular/Open-Sans-regular.woff2') format('woff2'), + url('/font/Open-Sans-regular/Open-Sans-regular.woff') format('woff'), + url('/font/Open-Sans-regular/Open-Sans-regular.ttf') format('truetype'), + url('/font/Open-Sans-regular/Open-Sans-regular.svg#Open Sans') format('svg'); +} diff --git a/css/subscribe-char.scss b/css/subscribe-char.scss index 0b46441..7db8e6b 100644 --- a/css/subscribe-char.scss +++ b/css/subscribe-char.scss @@ -5,48 +5,48 @@ /* 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; + 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; + 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; */ + 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; + /* 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; + /* fix buttons height, for twitter bootstrap */ + line-height: 1em; - /* Animation center compensation - margins should be symmetric */ - /* remove if not needed */ - margin-left: .2em; + /* 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%; */ + /* 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; + /* 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); */ + /* Uncomment for 3D effect */ + /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */ } .icon-rss:before { content: '\f09e'; } /* '' */ diff --git a/index.html b/index.html index 5585e87..4ced8e4 100644 --- a/index.html +++ b/index.html @@ -1,4 +1,4 @@ -