diff --git a/branches/taskcluster/theme/index.html.tmpl b/branches/taskcluster/theme/index.html.tmpl index 451899a..c1627b1 100644 --- a/branches/taskcluster/theme/index.html.tmpl +++ b/branches/taskcluster/theme/index.html.tmpl @@ -24,13 +24,15 @@ +

-
+
+

 @@ -50,7 +52,7 @@ -

">

+

">
@@ -58,6 +60,7 @@ ">by at

+
@@ -91,6 +94,7 @@ Last update:

Maintained by , powered by Planet Venus

+
diff --git a/branches/taskcluster/theme/planet.css b/branches/taskcluster/theme/planet.css index ff120e5..814fd2a 100644 --- a/branches/taskcluster/theme/planet.css +++ b/branches/taskcluster/theme/planet.css @@ -1,224 +1,178 @@ -body { - font-family: sans-serif; - background: #fff url("body_back.gif") repeat-x; - color: #000; - margin: 15px; -} +/** Reset some basic elements */ +body, h1, h2, h3, h4, h5, h6, p, blockquote, pre, hr, dl, dd, ol, ul, figure { margin: 0; padding: 0; } - a:link { color: #039; } - a:visited { color: #636; } - a:hover { color: #333; } - a:active { color: #000; } +/** Basic styling */ +body { font-family: Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.5; font-weight: 300; color: #111; background-color: #fdfdfd; -webkit-text-size-adjust: 100%; } -div.content { - margin: 0 230px 0 0; -/* - padding-left: 0px; - padding-right: 0px; -*/ -} +/** Set `margin-bottom` to maintain vertical rhythm */ +h1, h2, h3, h4, h5, h6, p, blockquote, pre, ul, ol, dl, figure, .highlight { margin-bottom: 15px; } -h1 { -/* height: 50px; */ - padding: 20px; +/** Images */ +img { max-width: 100%; vertical-align: middle; } - font-weight: normal; - letter-spacing: -2px; - text-transform: lowercase; - color: white; - background: #455372 /* url("header_bl.png") repeat-x*/; - -moz-border-radius: 12px; -} +/** Figures */ +figure > img { display: block; } -h2, h3 { - border-bottom-width: 1px; - border-bottom-style: solid; - border-bottom-color: #cccccc; - margin-left: 0; -} +figcaption { font-size: 14px; } -h2 { - font-size: 150%; - font-weight: normal; -} +/** Lists */ +ul, ol { margin-left: 30px; } -h3, h4 { - clear: both; -} +li > ul, li > ol { margin-bottom: 0; } -h3 { - font-size: 120%; - clear: both; -} +/** Headings */ +h1, h2, h3, h4, h5, h6 { font-weight: 300; } -h3 a { - text-decoration: none; -} +/** Links */ +a { color: #2a7ae2; text-decoration: none; } +a:visited { color: #1756a9; } +a:hover { color: #111; text-decoration: underline; } -h4 { - margin: 1em 0 0 1em; -} +/** Blockquotes */ +blockquote { color: #828282; border-left: 4px solid #e8e8e8; padding-left: 15px; font-size: 18px; letter-spacing: -1px; font-style: italic; } +blockquote > :last-child { margin-bottom: 0; } -h4 a { -} +/** Code formatting */ +pre, code { font-size: 15px; border: 1px solid #e8e8e8; border-radius: 3px; background-color: #eef; } -img.face { - float: right; - margin-top: -3em; -} +code { padding: 1px 5px; } -div.entry { - margin: 0 0.5em 1em 1em; - padding-top: 1em; -} +pre { padding: 8px 12px; overflow-x: scroll; } +pre > code { border: 0; padding-right: 0; padding-left: 0; } -div.entry p:first-child { - margin-top: 0; -} +/** Wrapper */ +.wrapper { max-width: -webkit-calc(800px - (30px * 2)); max-width: calc(800px - (30px * 2)); margin-right: auto; margin-left: auto; padding-right: 30px; padding-left: 30px; } +@media screen and (max-width: 800px) { .wrapper { max-width: -webkit-calc(800px - (30px)); max-width: calc(800px - (30px)); padding-right: 15px; padding-left: 15px; } } -.entry .date { - margin-top: 0.5em; - text-align: right; -} +/** Clearfix */ +.wrapper:after, .footer-col-wrapper:after { content: ""; display: table; clear: both; } +/** Icons */ +.icon > svg { display: inline-block; width: 16px; height: 16px; vertical-align: middle; } +.icon > svg path { fill: #828282; } -div.sidebar { - position: absolute; - top: 85px; - right: 0px; +/** Site header */ +.site-header { border-top: 5px solid #424242; border-bottom: 1px solid #e8e8e8; min-height: 56px; position: relative; } - width: 230px; +.site-title { font-size: 26px; line-height: 56px; letter-spacing: -1px; margin-bottom: 0; float: left; } +.site-title, .site-title:visited { color: #424242; } - margin-left: 0px; - margin-right: 15px; +.site-nav { float: right; line-height: 56px; } +.site-nav .menu-icon { display: none; } +.site-nav .page-link { color: #111; line-height: 1.5; } +.site-nav .page-link:not(:first-child) { margin-left: 20px; } +@media screen and (max-width: 600px) { .site-nav { position: absolute; top: 9px; right: 30px; background-color: #fdfdfd; border: 1px solid #e8e8e8; border-radius: 5px; text-align: right; } + .site-nav .menu-icon { display: block; float: right; width: 36px; height: 26px; line-height: 0; padding-top: 10px; text-align: center; } + .site-nav .menu-icon > svg { width: 18px; height: 15px; } + .site-nav .menu-icon > svg path { fill: #424242; } + .site-nav .trigger { clear: both; display: none; } + .site-nav:hover .trigger { display: block; padding-bottom: 5px; } + .site-nav .page-link { display: block; padding: 5px 10px; } } - padding-left: 0px; - padding-right: 0px; +/** Site footer */ +.site-footer { border-top: 1px solid #e8e8e8; padding: 30px 0; } - padding-top: 20px; +.footer-heading { font-size: 18px; margin-bottom: 15px; } - font-size: 70%; -} +.contact-list, .social-media-list { list-style: none; margin-left: 0; } -.sidebar h2 { - font-size: 150%; - font-weight: bold; - color: black; - border-bottom-style: none; +.footer-col-wrapper { font-size: 15px; color: #828282; margin-left: -15px; } - padding-left: 5px; - margin-left: 0px; - margin-top: 0px; -} +.footer-col { float: left; margin-bottom: 15px; padding-left: 15px; } -.sidebar ul { - padding-left: 2em; - margin-left: 0px; +.footer-col-1 { width: -webkit-calc(35% - (30px / 2)); width: calc(35% - (30px / 2)); } - list-style-type: square; -} +.footer-col-2 { width: -webkit-calc(20% - (30px / 2)); width: calc(20% - (30px / 2)); } -.sidebar dl { - padding-left: 5px; - margin-left: 0px; -} +.footer-col-3 { width: -webkit-calc(45% - (30px / 2)); width: calc(45% - (30px / 2)); } -.sidebar dt { - padding-top: 5px; -} +@media screen and (max-width: 800px) { .footer-col-1, .footer-col-2 { width: -webkit-calc(50% - (30px / 2)); width: calc(50% - (30px / 2)); } + .footer-col-3 { width: -webkit-calc(100% - (30px / 2)); width: calc(100% - (30px / 2)); } } +@media screen and (max-width: 600px) { .footer-col { float: none; width: -webkit-calc(100% - (30px / 2)); width: calc(100% - (30px / 2)); } } +/** Page content */ +.page-content { padding: 30px 0; } -.sidebar dd { - margin-left: 10px; -} +.page-heading { font-size: 20px; } -.sidebar ul li:hover { - color: grey; -} +.post-list { margin-left: 0; list-style: none; } +.post-list > li { margin-bottom: 30px; } -.sidebar div { - padding: 10px; - margin-top: 0px; - margin-right: 0px; - margin-left: 20px; - margin-bottom: 10px; +.post-meta { font-size: 14px; color: #828282; } - background: #e4ecec; - -moz-border-radius: 1em; -} +.post-link { display: block; font-size: 24px; } -a:hover { - text-decoration: underline !important; - color: blue !important; -} +/** Posts */ +.post-header { margin-bottom: 30px; } +.post-title { font-size: 42px; letter-spacing: -1px; line-height: 1; } +@media screen and (max-width: 800px) { .post-title { font-size: 36px; } } -/* template.css footer */ +.post-content { margin-bottom: 30px; } +.post-content h2 { font-size: 32px; } +@media screen and (max-width: 800px) { .post-content h2 { font-size: 28px; } } +.post-content h3 { font-size: 26px; } +@media screen and (max-width: 800px) { .post-content h3 { font-size: 22px; } } +.post-content h4 { font-size: 20px; } +@media screen and (max-width: 800px) { .post-content h4 { font-size: 18px; } } - #footer { - border-top: 1px solid #666; - margin: 2em 0; - padding: 1em 0; - text-align: center; - } - - #footer ul { - margin: 0; - padding: 0; - list-style: none; - } - - #footer li { - display: inline; - } - - #footer span,#footer a { - white-space: nowrap; - padding: 0 1em; - } - - #footer p span,#footer p a { - white-space: nowrap; - padding: 0 0.3em; - } - - #footer span a { - padding: 0; - } - - #footer p,#footer p a { - color: #666; - } - - #footer p a:hover { - color: #000; - } - - -/* template_002.css */ - - #footer { - clear: both; - margin-top: 1em; - } - - #footer ul { - margin: 0 0 1em 0; - padding: 0; - } - - #footer li { - display: inline; - padding: 0 20px 0 0; - margin: 0; - white-space: nowrap; - } - - #footer p { - margin: 0.6em 0; - } - -/* planet */ - - #footer { - margin-right: 0; - } +/** Syntax highlighting styles */ +.highlight { background: #fff; } +.highlight .c { color: #998; font-style: italic; } +.highlight .err { color: #a61717; background-color: #e3d2d2; } +.highlight .k { font-weight: bold; } +.highlight .o { font-weight: bold; } +.highlight .cm { color: #998; font-style: italic; } +.highlight .cp { color: #999; font-weight: bold; } +.highlight .c1 { color: #998; font-style: italic; } +.highlight .cs { color: #999; font-weight: bold; font-style: italic; } +.highlight .gd { color: #000; background-color: #fdd; } +.highlight .gd .x { color: #000; background-color: #faa; } +.highlight .ge { font-style: italic; } +.highlight .gr { color: #a00; } +.highlight .gh { color: #999; } +.highlight .gi { color: #000; background-color: #dfd; } +.highlight .gi .x { color: #000; background-color: #afa; } +.highlight .go { color: #888; } +.highlight .gp { color: #555; } +.highlight .gs { font-weight: bold; } +.highlight .gu { color: #aaa; } +.highlight .gt { color: #a00; } +.highlight .kc { font-weight: bold; } +.highlight .kd { font-weight: bold; } +.highlight .kp { font-weight: bold; } +.highlight .kr { font-weight: bold; } +.highlight .kt { color: #458; font-weight: bold; } +.highlight .m { color: #099; } +.highlight .s { color: #d14; } +.highlight .na { color: #008080; } +.highlight .nb { color: #0086B3; } +.highlight .nc { color: #458; font-weight: bold; } +.highlight .no { color: #008080; } +.highlight .ni { color: #800080; } +.highlight .ne { color: #900; font-weight: bold; } +.highlight .nf { color: #900; font-weight: bold; } +.highlight .nn { color: #555; } +.highlight .nt { color: #000080; } +.highlight .nv { color: #008080; } +.highlight .ow { font-weight: bold; } +.highlight .w { color: #bbb; } +.highlight .mf { color: #099; } +.highlight .mh { color: #099; } +.highlight .mi { color: #099; } +.highlight .mo { color: #099; } +.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 .bp { color: #999; } +.highlight .vc { color: #008080; } +.highlight .vg { color: #008080; } +.highlight .vi { color: #008080; } +.highlight .il { color: #099; }