#{content}
</div>
</div>
- <div id="comment-stripe">
+ <div class="comment-stripe">
#{o[:comments]}
</div>
<footer>
#{o[:footer]}
- <p>This site has a <a href="/git/?p=iankelling.org;a=summary">git repo</a>. Unless stated otherwise, <a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/"><img id="cc-by-sa" alt="Creative Commons License" src="/assets/cc-by-sa-4.0-80x15.png" /></a></p>
+ <p>This site has a <a href="/git/?p=iankelling.org;a=summary">git repo</a>. Unless stated otherwise, <a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/"><img class="cc-by-sa" alt="Creative Commons License" src="/assets/cc-by-sa-4.0-80x15.png" /></a></p>
<p><address><a href="mailto:ian@iankelling.org">ian@iankelling.org</a> let me know what you think</address></p>
</footer>
</body>
blog_toc_entry = "<li><a href=\"#{rel_path}\">#{title}</a></li>"
com_section = <<EOF
-<div id="comment-section">
+<div id="comment-section" class="comment-section">
#{com_section}
</div>
EOF
fskel('index.html', DN, File.read('../index.html'))
stdpage('blog', <<EOF)
-<ul class="index">
+<ul class="site-nav-list">
#{blog_list.join("\n")}
</ul>
EOF
/* 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;
}
-/* 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
}
-@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
}
+// 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 <br>. 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 <br>. 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";
--- /dev/null
+/* 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');
+}
/* 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'; } /* '' */
-<ul class="index">
+<ul class="site-nav-list">
<li><a href="/blog.html">blog</a></li>
<li><a href="git">git</a></li>
<li><a href="https://ofswiki.org">ofswiki.org</a></li>