Some small css tweaks just to make it not quite so horrificly ugly (css taken from jekyll)
git-svn-id: https://svn.mozilla.org/projects/planet@149708 4eb1ac78-321c-0410-a911-ec516a8615a5
This commit is contained in:
pmoore@mozilla.com
Родитель
303c7078ed
Коммит
ab97dab0ef
|
|
@ -24,13 +24,15 @@
|
|||
|
||||
<body>
|
||||
|
||||
<div class="wrapper">
|
||||
<div class="header">
|
||||
<h1><TMPL_VAR name></h1>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<div class="page-content">
|
||||
|
||||
<TMPL_LOOP Items>
|
||||
<div class="post">
|
||||
<TMPL_IF new_date>
|
||||
<h2><TMPL_VAR new_date></h2>
|
||||
</TMPL_IF>
|
||||
|
|
@ -50,7 +52,7 @@
|
|||
</TMPL_IF>
|
||||
|
||||
<TMPL_IF title>
|
||||
<h4><a href="<TMPL_VAR link ESCAPE="HTML">"><TMPL_VAR title></a></h4>
|
||||
<h1 class="post-title"><a href="<TMPL_VAR link ESCAPE="HTML">"><TMPL_VAR title></a></h1>
|
||||
</TMPL_IF>
|
||||
<div class="entry">
|
||||
<TMPL_VAR content>
|
||||
|
|
@ -58,6 +60,7 @@
|
|||
<a href="<TMPL_VAR link ESCAPE="HTML">"><TMPL_IF creator>by <TMPL_VAR creator> at </TMPL_IF><TMPL_VAR date></a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</TMPL_LOOP>
|
||||
|
||||
</div>
|
||||
|
|
@ -91,6 +94,7 @@ Last update: <TMPL_VAR date><br>
|
|||
</ul>
|
||||
<p>Maintained by <a href="mailto:<TMPL_VAR owner_email>"><TMPL_VAR owner_name></a>, powered by <a href="http://www.intertwingly.net/code/venus/">Planet Venus</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -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; }
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче