From 612ca2d53693f2ba41b6a654a1dc554238787a5a Mon Sep 17 00:00:00 2001 From: Natalia Ventre Date: Wed, 8 Feb 2012 21:58:21 -0200 Subject: added Just Read theme --- Just-Read/.gitignore | 35 +++ Just-Read/less/base.less | 68 +++++ Just-Read/less/main.less | 445 +++++++++++++++++++++++++++++++++ Just-Read/less/mixins.less | 46 ++++ Just-Read/less/print.less | 76 ++++++ Just-Read/less/var.less | 17 ++ Just-Read/pelican.conf.py-sample.py | 10 + Just-Read/psd/bullet.psd | Bin 0 -> 2458 bytes Just-Read/psd/bullet.pxm | Bin 0 -> 20770 bytes Just-Read/psd/line2px.psd | Bin 0 -> 2872 bytes Just-Read/psd/line2px.pxm | Bin 0 -> 29156 bytes Just-Read/psd/pages.psd | Bin 0 -> 22702 bytes Just-Read/psd/pages.pxm | Bin 0 -> 41780 bytes Just-Read/readme.md | 11 + Just-Read/screenshot.png | Bin 0 -> 77147 bytes Just-Read/static/css/main.css | 483 ++++++++++++++++++++++++++++++++++++ Just-Read/static/images/2px.png | Bin 0 -> 186 bytes Just-Read/static/images/bullet.png | Bin 0 -> 194 bytes Just-Read/static/images/pages.png | Bin 0 -> 781 bytes Just-Read/templates/archives.html | 21 ++ Just-Read/templates/article.html | 29 +++ Just-Read/templates/base.html | 65 +++++ Just-Read/templates/categories.html | 1 + Just-Read/templates/category.html | 17 ++ Just-Read/templates/index.html | 26 ++ Just-Read/templates/metadata.html | 12 + Just-Read/templates/page.html | 10 + Just-Read/templates/tag.html | 16 ++ Just-Read/templates/tags.html | 1 + 29 files changed, 1389 insertions(+) create mode 100644 Just-Read/.gitignore create mode 100644 Just-Read/less/base.less create mode 100644 Just-Read/less/main.less create mode 100644 Just-Read/less/mixins.less create mode 100644 Just-Read/less/print.less create mode 100644 Just-Read/less/var.less create mode 100644 Just-Read/pelican.conf.py-sample.py create mode 100644 Just-Read/psd/bullet.psd create mode 100644 Just-Read/psd/bullet.pxm create mode 100644 Just-Read/psd/line2px.psd create mode 100644 Just-Read/psd/line2px.pxm create mode 100644 Just-Read/psd/pages.psd create mode 100644 Just-Read/psd/pages.pxm create mode 100644 Just-Read/readme.md create mode 100644 Just-Read/screenshot.png create mode 100644 Just-Read/static/css/main.css create mode 100644 Just-Read/static/images/2px.png create mode 100644 Just-Read/static/images/bullet.png create mode 100644 Just-Read/static/images/pages.png create mode 100644 Just-Read/templates/archives.html create mode 100644 Just-Read/templates/article.html create mode 100644 Just-Read/templates/base.html create mode 100644 Just-Read/templates/categories.html create mode 100644 Just-Read/templates/category.html create mode 100644 Just-Read/templates/index.html create mode 100644 Just-Read/templates/metadata.html create mode 100644 Just-Read/templates/page.html create mode 100644 Just-Read/templates/tag.html create mode 100644 Just-Read/templates/tags.html (limited to 'Just-Read') diff --git a/Just-Read/.gitignore b/Just-Read/.gitignore new file mode 100644 index 0000000..12a938a --- /dev/null +++ b/Just-Read/.gitignore @@ -0,0 +1,35 @@ +# Compiled source # +################### +*.com +*.class +*.dll +*.exe +*.o +*.so + +# Packages # +############ +# it's better to unpack these files and commit the raw source +# git has its own built in compression methods +*.7z +*.dmg +*.gz +*.iso +*.jar +*.rar +*.tar +*.zip + +# Logs and databases # +###################### +*.log +*.sql +*.sqlite + +# OS generated files # +###################### +.DS_Store* +ehthumbs.db +Icon? +Thumbs.db +.DS_Store diff --git a/Just-Read/less/base.less b/Just-Read/less/base.less new file mode 100644 index 0000000..7d31c62 --- /dev/null +++ b/Just-Read/less/base.less @@ -0,0 +1,68 @@ +// Credits: [HTML Boilerplate[(https://github.com/h5bp/html5-boilerplate) + + +// HTML5 display definitions + +article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, time { + display: block; +} + +// Base + +html { + font-size: 100%; + overflow-y: scroll; + -webkit-text-size-adjust: 100%; + -ms-text-size-adjust: 100%; +} + +body{ + margin: 0; +} + +// Remove text-shadow in selection highlight: h5bp.com/i + +::-moz-selection { + background: #fd7; // This color should play well with any design + color: #000; + text-shadow: none; +} +::selection { + background: #fd7; + color: #000; + text-shadow: none; +} + +// Improve readability when focused and hovered in all browsers: h5bp.com/h + +a:hover, a:active { + outline: 0; +} + +// Lists + +ul, ol{ + margin: 0; + padding: 0; +} + +// Embedded content + +img { + border: 0; + -ms-interpolation-mode: bicubic; + vertical-align: middle; +} + +// Contain floats: h5bp.com/q + +.clearfix:before, .clearfix:after { + content: ""; + display: table; +} +.clearfix:after { + clear: both; +} +.clearfix { + *zoom: 1; +} \ No newline at end of file diff --git a/Just-Read/less/main.less b/Just-Read/less/main.less new file mode 100644 index 0000000..55efa5a --- /dev/null +++ b/Just-Read/less/main.less @@ -0,0 +1,445 @@ +@import "base.less"; +@import "mixins.less"; +@import "var.less"; + +// Credits: [Golden Grid System](http://goldengridsystem.com/) by [Joni Korpi](http://jonikorpi.com/) licensed under [MIT](http://www.opensource.org/licenses/mit-license.php) + +// Important numbers + +@line: 24; +@column: 100% / 18; +@font-size: 16; +@em: @font-size*1em; + + +// Simple fluid media + +figure { + position: relative; +} + +figure img, figure object, figure embed, figure video { + max-width: 100%; + display: block; +} + +// Elastic Object & Iframe Embedded Videos http://webdesignerwall.com/tutorials/css-elastic-videos + +.video-container { + position: relative; + padding-bottom: 56.25%; + padding-top: 30px; + height: 0; + overflow: hidden; + margin-bottom: @line * 1px; +} + +.video-container iframe, +.video-container object, +.video-container embed { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; +} + +// Typography settings - Make the text bigger if you dare + +.small {font-size: 12px;} +.normal {font-size: 14px;} +.large {font-size: 18px;} +.huge {font-size: 24px;} +.massive {font-size: 36px;} +.gigantic {font-size: 48px;} + +body { + .normal; + line-height: @line * 1px; + background: @white; + color: lighten(@black, 25%); + .sans; +} + +.title{ + line-height: 1; + .fancy-font; + font-weight: 700; +} + +h1{ + .title; + .huge; + margin: 0 0 (@line * 1.5px) 0; +} + +h2{ + .title; + .large; + margin: (@line * 2px) 0 (@line * 1px); + +} + +h3{ + .title; + .normal; + margin: (@line * 1.5px) 0 (@line * 1px); + text-transform: uppercase; + color: lighten(@black, 60%); + +} + +h4, h5, h6{ + .title; + .normal; + margin: (@line * 1px) 0; + font-weight: 400; + +} + +b, strong{ + font-weight: 700; +} + + +// Four-column grid active +// ---------------------------------------- +// Margin | # 1 2 3 4 | Margin +// 5.55555% | % 25 50 75 100 | 5.55555% + +.wrapper { + padding: 0 (@line/2)/@em; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -o-box-sizing: border-box; + box-sizing: border-box; +} + + +a{ + color: @link; + text-decoration: none; + .transition(); + + &:hover{ + color: darken(@link, 40%); + text-decoration:underline; + } +} + +header{ + .border-image(0 0 2px, 0 0 2, '../images/2px.png', repeat); // It's a very small detail, delete this line if you want different colors and don't want to edit the image file + .gradient(@color, darken(@color, 6%)); + padding: (@line * 2px) @column; + margin-bottom: (@line * 2px); + + h1{ + margin: 0; + } + + a{ + text-decoration: none; + color: fade(@white, 80%); + + // The 3d effect is kind of silly, so go ahead and delete the following lines xD + text-shadow: + 0 1px 0 lighten(@black, 70%), + 0 2px 0 lighten(@black, 60%), + 0 3px 0 lighten(@black, 50%), + 0 4px 0 lighten(@black, 40%), + 0 5px 0 lighten(@black, 30%), + 0 6px 0 lighten(@black, 20%), + 0px 7px 0 lighten(@black, 10%), + 0 8px 7px lighten(@black, 5%); + + + &:hover{ + color: @white; + text-decoration:none; + } + } +} + +footer{ + .border-image(20px 0 0, 20 0 0, '../images/pages.png', repeat); // Again, it's a detail. I used border-image to be able to use a gradient or background color for the footer, but now it's white + padding: (@line * 2px) @column (@line * 1px); + margin-top: (@line * 4px); + color: fade(@black, 60%); +} + +.pages{ + margin-bottom: (@line * 1px); +} + +.nav li{ + list-style: none; + display: inline; + padding-right: 10px; +} + +p[role="contentinfo"]{ + margin-top: (@line / 2px); // If you don't use the Twitter button, delete this line + .small; +} + +.content{ + margin:0 @column; +} + +.meta{ + background: lighten(@black, 95%); + padding-top: (@line * 1px); + padding-bottom: (@line * 1px); + .rounded(); +} + +time{ + .small; + text-transform: uppercase; +} + +.tags li{ + display: inline; + list-style: none; +} + +blockquote, code, .post ul, .post ol, p{ + margin: 0 0 (@line * 1px) 0; +} + +blockquote{ + margin-left: -(@line / 2px); + border-left: (@line / 4px) solid @link; + padding-left: (@line / 4px); +} + +code{ + display: block; + background: lighten(@black, 15%); // If you don't a dark scheme for code, we can't be friends + .box-shadow(inset 0 0 10px @black); + padding: (@line * 1px); + color: @white; + .rounded(); + .mono(); + margin-left: -(@line * 1px); +} + +.post ul li{ + list-style-image: url('../images/bullet.png'); // or use something less colorful, like list-style-type: square +} + +.main + .main{ + margin-top: (@line * 4px); +} + +.archive li{ + list-style: none; +} + +.archive a{ + display: block; + padding: (@line / 2px) 0; + border-bottom: 1px dotted lighten(@black, 80%); + + &:hover{ + text-decoration:none; + } +} + +.archive time{ + display: inline; + color: lighten(@black, 40%); +} + + +// Eight-column grid active +// ---------------------------------------------------------------------- +// Margin | # 1 2 3 4 5 6 7 8 | Margin +// 5.55555% | % 12.5 25.0 37.5 50.0 62.5 75.0 87.5 100 | 5.55555% + + +// @media screen and (min-width: 720px) +@media screen and (min-width: 45em) { + + + header .wrapper{ + width: 75%; + float: right; + } + + .meta, .pages{ + width: 25%; + float: left; + text-align: right; + } + + .pages{ + padding-top: 28px + (@line * 1px); // Twitter button size + [role="contentinfo"] margin-top. If you don't use the Twitter button, delete this line + } + + .meta{ + background: @white; + padding-top: 24px + (@line * 1.5px); // h1 font-size + margin-bottom + + time{ + margin-bottom: (@line * 1px); + } + } + + .post, .copy, .main{ + width: 75%; + float: right; + } + + .tags li{ + display: block; + } + + .tags a:hover, .nav a:hover{ + padding-right: (@line / 4px); // If prefer your links to remain still, delete this nonsense + } + + .tags a:hover:after, .nav a:hover:after, .more:hover:after{ + content: "\2192 "; + } + + .nav li{ + display: block; + padding-right: 0; + } + + .archive time{ + display: block; + width: 100/4%; // target 1 columns, context 4 columns + float: left; + } +} + + +// @media screen and (min-width: 888px) +@media screen and (min-width: 55.5em) { + + .post p, .post blockquote, .post ul, .post ol{ + width: 400/6%; // target 4 columns, context 6 columns + } + + .main{ + width: 50%; + float: none; + margin-left: 25%; + } +} + + +// @media screen and (min-width: 984px) +@media screen and (min-width: 61.5em) { + + .meta, .pages{ + width: 12.5%; + } + + .pages{ + padding-top: 0; + } + + .meta{ + padding-top: 24px + (@line * 1.5px); + } + + +} + + +// Sixteen-column grid active +// ---------------------------------------------------------------------------------------------------------------------- +// Margin | # 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | Margin +// 5.55555% | % 6.25 12.5 18.75 25.0 31.25 37.5 43.75 50.0 56.25 62.5 68.75 75.0 81.25 87.5 93.75 100 | 5.55555% + + +// @media screen and (min-width: 1872px) +@media screen and (min-width: 117em) { + + body{ + .large; + } + + header{ + margin-bottom: (@line * 4px); + } + + footer{ + margin-top: (@line * 6px); + } + + h1{ + .gigantic; + margin-bottom: (@line * 2px); + } + + h2, header .huge{ + .massive; + } + + h2{ + margin-top: (@line * 3px); + } + + h3{ + .huge; + margin-top: (@line * 3px); + } + + h4, h5, h6{ + .large; + margin-top: (@line * 2px); + } + + .meta, .pages{ + width: 18.75%; + padding-left: 6.25%; + } + + .meta{ + padding-top: 48 * 2px; + } + + .post, .copy{ + width: 75%; + } + + .post{ + padding-right: 12.5%; + } + + .post ul{ + margin-bottom: 0; + } + .post li{ + margin-bottom: (@line * 1px); + } + + code{ + .massive; + line-height: 1.5; + } + + .post p, .post blockquote, .post ul, .post ol{ + width: 600/10%; // target 4 columns, context 6 columns + } + +} + + + +// @media screen and (min-width: 2080px) +@media screen and (min-width: 130em) { + + body { + max-width: 2560/@em; + } + +} + +@media print{ + @import "print.less"; +} \ No newline at end of file diff --git a/Just-Read/less/mixins.less b/Just-Read/less/mixins.less new file mode 100644 index 0000000..2e895f9 --- /dev/null +++ b/Just-Read/less/mixins.less @@ -0,0 +1,46 @@ +// Credits: [LESS Elements](http://lesselements.com) +// [Twitter Bootstrap](https://github.com/twitter/bootstrap) licensed under [Apache License](http://www.apache.org/licenses/LICENSE-2.0) + +.box-shadow(@arguments) { + -webkit-box-shadow: @arguments; + -moz-box-shadow: @arguments; + box-shadow: @arguments; +} + +.gradient(@startColor: #555, @endColor: #333) { + background-color: @endColor; + background-repeat: repeat-x; + background-image: -khtml-gradient(linear, left top, left bottom, from(@startColor), to(@endColor)); // Konqueror + background-image: -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+ + background-image: -ms-linear-gradient(top, @startColor, @endColor); // IE10 + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, @startColor), color-stop(100%, @endColor)); // Safari 4+, Chrome 2+ + background-image: -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+ + background-image: -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10 + background-image: linear-gradient(top, @startColor, @endColor); // The standard + filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor)); // IE9 and down +} + +.rounded(@radius: 4px) { + -webkit-border-radius: @radius; + -moz-border-radius: @radius; + border-radius: @radius; + + -moz-background-clip: padding; + -webkit-background-clip: padding-box; + background-clip: padding-box; +} + +.transition(@duration:0.25s, @ease:linear) { + -webkit-transition: all @duration @ease; + -moz-transition: all @duration @ease; + -o-transition: all @duration @ease; + transition: all @duration @ease; +} + +.border-image(@width, @slice, @url, @repeat) { + border-width: @width; + -moz-border-image: url(@url) @slice @repeat; + -webkit-border-image: url(@url) @slice @repeat; + -o-border-image: url(@url) @slice @repeat; + border-image: url(@url) @slice @repeat; +} \ No newline at end of file diff --git a/Just-Read/less/print.less b/Just-Read/less/print.less new file mode 100644 index 0000000..92d636b --- /dev/null +++ b/Just-Read/less/print.less @@ -0,0 +1,76 @@ +// Credits: [HTML Boilerplate[(https://github.com/h5bp/html5-boilerplate) +// [Hartija - Css Print Framework](http://code.google.com/p/hartija/) licensed under [MIT](http://www.opensource.org/licenses/mit-license.php) + +* { + background : transparent !important; + box-shadow:none !important; + color : black !important; // Black prints faster: h5bp.com/s + filter : none !important; + -ms-filter : none !important; + text-shadow : none !important; +} + +@page { + margin : 0.5cm; +} + +a, a:visited { + color : @black !important; + text-decoration : underline; +} + +a[href]:after { + content : " (" attr(href) ")"; +} + +a[href^="javascript:"]:after, a[href^="#"]:after, .ir a:after { + content : ""; +} + +abbr[title]:after { + content : " (" attr(title) ")"; +} + +body{ + font-size: 12pt; +} + +blockquote, pre{ + page-break-inside : avoid; +} + +blockquote, pre { + margin-left: 0.5cm; + border-left : 0.2cm solid #999; + padding-left: 0.2cm; +} + +code, pre { + font: 10pt Courier, monospace; +} + +h1{ + font-size: 18pt; +} + +h2, h3 { + page-break-after : avoid; + font-size: 16pt; +} + +h2, h3, p { + orphans : 3; + widows : 3; +} + +img { + max-width : 100% !important; +} + +img, tr { + page-break-inside : avoid; +} + +thead { + display : table-header-group; +} \ No newline at end of file diff --git a/Just-Read/less/var.less b/Just-Read/less/var.less new file mode 100644 index 0000000..21fce38 --- /dev/null +++ b/Just-Read/less/var.less @@ -0,0 +1,17 @@ +// Color Variables + +@black: #000; +@white: #fff; +@color: #556270; // The color of the header and footer. If you modify this color, edit the images in the PSD folder and export them to static/images +@link: #4ECDC4; // The color of links, blockquote line and bullets. If you modify this color, edit static/images/bullet.png + + +// Typography +// If you modify the fonts, delete/modify the line 12 in base.html + +.sans, .fancy-font{ + font-family: 'Droid Sans', sans-serif; +} +.mono{ + font-family: 'Droid Sans Mono', monospace; +} \ No newline at end of file diff --git a/Just-Read/pelican.conf.py-sample.py b/Just-Read/pelican.conf.py-sample.py new file mode 100644 index 0000000..e92e4e8 --- /dev/null +++ b/Just-Read/pelican.conf.py-sample.py @@ -0,0 +1,10 @@ +AUTHOR = 'Name Lastname' +SITENAME = 'The name of your website' +SITEURL = 'http://example.com' + +DISQUS_SITENAME = '' + + +GOOGLE_ANALYTICS = 'UA-XXXXX-X' +HTML_LANG = 'en' +TWITTER_USERNAME = 'yourtwitterhandle no @ please' \ No newline at end of file diff --git a/Just-Read/psd/bullet.psd b/Just-Read/psd/bullet.psd new file mode 100644 index 0000000..e55960f Binary files /dev/null and b/Just-Read/psd/bullet.psd differ diff --git a/Just-Read/psd/bullet.pxm b/Just-Read/psd/bullet.pxm new file mode 100644 index 0000000..68b68b0 Binary files /dev/null and b/Just-Read/psd/bullet.pxm differ diff --git a/Just-Read/psd/line2px.psd b/Just-Read/psd/line2px.psd new file mode 100644 index 0000000..5154b33 Binary files /dev/null and b/Just-Read/psd/line2px.psd differ diff --git a/Just-Read/psd/line2px.pxm b/Just-Read/psd/line2px.pxm new file mode 100644 index 0000000..241b0a9 Binary files /dev/null and b/Just-Read/psd/line2px.pxm differ diff --git a/Just-Read/psd/pages.psd b/Just-Read/psd/pages.psd new file mode 100644 index 0000000..0fd74b4 Binary files /dev/null and b/Just-Read/psd/pages.psd differ diff --git a/Just-Read/psd/pages.pxm b/Just-Read/psd/pages.pxm new file mode 100644 index 0000000..f74ee8e Binary files /dev/null and b/Just-Read/psd/pages.pxm differ diff --git a/Just-Read/readme.md b/Just-Read/readme.md new file mode 100644 index 0000000..ebba988 --- /dev/null +++ b/Just-Read/readme.md @@ -0,0 +1,11 @@ +# Just Read + +"Just Read" is a theme for [Pelican](http://alexis.notmyidea.org/pelican/). The fluid-width layout is based based on the Golden Grid System by [Joni Korpi](http://jonikorpi.com/). + +## Worth mentioning files + +- **pelican.com.py-sample** contains the variables used in the theme, use it as reference to build your own configuration file. +- **var.less** defines the colors and fonts used. Much more easy to edit than the main.css file. +- the **psd folder** contains the images used in the theme, handful if you want to change the color scheme. + +*Note: I tested the theme only in the latests version of Chrome, Firefox, Opera and Safari. * \ No newline at end of file diff --git a/Just-Read/screenshot.png b/Just-Read/screenshot.png new file mode 100644 index 0000000..6659f99 Binary files /dev/null and b/Just-Read/screenshot.png differ diff --git a/Just-Read/static/css/main.css b/Just-Read/static/css/main.css new file mode 100644 index 0000000..3cb6c6a --- /dev/null +++ b/Just-Read/static/css/main.css @@ -0,0 +1,483 @@ +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +nav, +section, +time { + display: block; +} +html { + font-size: 100%; + overflow-y: scroll; + -webkit-text-size-adjust: 100%; + -ms-text-size-adjust: 100%; +} +body { + margin: 0; +} +::-moz-selection { + background: #fd7; + color: #000; + text-shadow: none; +} +::selection { + background: #fd7; + color: #000; + text-shadow: none; +} +a:hover, a:active { + outline: 0; +} +ul, ol { + margin: 0; + padding: 0; +} +img { + border: 0; + -ms-interpolation-mode: bicubic; + vertical-align: middle; +} +.clearfix:before, .clearfix:after { + content: ""; + display: table; +} +.clearfix:after { + clear: both; +} +.clearfix { + *zoom: 1; +} +.sans, .fancy-font { + font-family: 'Droid Sans', sans-serif; +} +.mono { + font-family: 'Droid Sans Mono', monospace; +} +figure { + position: relative; +} +figure img, +figure object, +figure embed, +figure video { + max-width: 100%; + display: block; +} +.video-container { + position: relative; + padding-bottom: 56.25%; + padding-top: 30px; + height: 0; + overflow: hidden; + margin-bottom: 24px; +} +.video-container iframe, .video-container object, .video-container embed { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; +} +.small { + font-size: 12px; +} +.normal { + font-size: 14px; +} +.large { + font-size: 18px; +} +.huge { + font-size: 24px; +} +.massive { + font-size: 36px; +} +.gigantic { + font-size: 48px; +} +body { + font-size: 14px; + line-height: 24px; + background: #ffffff; + color: #404040; + font-family: 'Droid Sans', sans-serif; +} +.title { + line-height: 1; + font-family: 'Droid Sans', sans-serif; + font-weight: 700; +} +h1 { + line-height: 1; + font-family: 'Droid Sans', sans-serif; + font-weight: 700; + font-size: 24px; + margin: 0 0 36px 0; +} +h2 { + line-height: 1; + font-family: 'Droid Sans', sans-serif; + font-weight: 700; + font-size: 18px; + margin: 48px 0 24px; +} +h3 { + line-height: 1; + font-family: 'Droid Sans', sans-serif; + font-weight: 700; + font-size: 14px; + margin: 36px 0 24px; + text-transform: uppercase; + color: #999999; +} +h4, h5, h6 { + line-height: 1; + font-family: 'Droid Sans', sans-serif; + font-weight: 700; + font-size: 14px; + margin: 24px 0; + font-weight: 400; +} +b, strong { + font-weight: 700; +} +.wrapper { + padding: 0 0.75em; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -o-box-sizing: border-box; + box-sizing: border-box; +} +a { + color: #4ecdc4; + text-decoration: none; + -webkit-transition: all 0.25s linear; + -moz-transition: all 0.25s linear; + -o-transition: all 0.25s linear; + transition: all 0.25s linear; +} +a:hover { + color: #113e3a; + text-decoration: underline; +} +header { + border-width: 0 0 2px; + -moz-border-image: url('../images/2px.png') 0 0 2 repeat; + -webkit-border-image: url('../images/2px.png') 0 0 2 repeat; + -o-border-image: url('../images/2px.png') 0 0 2 repeat; + border-image: url('../images/2px.png') 0 0 2 repeat; + background-color: #48535f; + background-repeat: repeat-x; + background-image: -khtml-gradient(linear, left top, left bottom, from(#556270), to(#48535f)); + background-image: -moz-linear-gradient(top, #556270, #48535f); + background-image: -ms-linear-gradient(top, #556270, #48535f); + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #556270), color-stop(100%, #48535f)); + background-image: -webkit-linear-gradient(top, #556270, #48535f); + background-image: -o-linear-gradient(top, #556270, #48535f); + background-image: linear-gradient(top, #556270, #48535f); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#556270', endColorstr='#48535f', GradientType=0); + padding: 48px 5.555555555555555%; + margin-bottom: 48px; +} +header h1 { + margin: 0; +} +header a { + text-decoration: none; + color: rgba(255, 255, 255, 0.8); + text-shadow: 0 1px 0 #b3b3b3, 0 2px 0 #999999, 0 3px 0 #808080, 0 4px 0 #666666, 0 5px 0 #4d4d4d, 0 6px 0 #333333, 0px 7px 0 #1a1a1a, 0 8px 7px #0d0d0d; +} +header a:hover { + color: #ffffff; + text-decoration: none; +} +footer { + border-width: 20px 0 0; + -moz-border-image: url('../images/pages.png') 20 0 0 repeat; + -webkit-border-image: url('../images/pages.png') 20 0 0 repeat; + -o-border-image: url('../images/pages.png') 20 0 0 repeat; + border-image: url('../images/pages.png') 20 0 0 repeat; + padding: 48px 5.555555555555555% 24px; + margin-top: 96px; + color: rgba(0, 0, 0, 0.6); +} +.pages { + margin-bottom: 24px; +} +.nav li { + list-style: none; + display: inline; + padding-right: 10px; +} +p[role="contentinfo"] { + margin-top: 12px; + font-size: 12px; +} +.content { + margin: 0 5.555555555555555%; +} +.meta { + background: #f2f2f2; + padding-top: 24px; + padding-bottom: 24px; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; + -moz-background-clip: padding; + -webkit-background-clip: padding-box; + background-clip: padding-box; +} +time { + font-size: 12px; + text-transform: uppercase; +} +.tags li { + display: inline; + list-style: none; +} +blockquote, +code, +.post ul, +.post ol, +p { + margin: 0 0 24px 0; +} +blockquote { + margin-left: -12px; + border-left: 6px solid #4ecdc4; + padding-left: 6px; +} +code { + display: block; + background: #262626; + -webkit-box-shadow: inset 0 0 10px #000000; + -moz-box-shadow: inset 0 0 10px #000000; + box-shadow: inset 0 0 10px #000000; + padding: 24px; + color: #ffffff; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; + -moz-background-clip: padding; + -webkit-background-clip: padding-box; + background-clip: padding-box; + font-family: 'Droid Sans Mono', monospace; + margin-left: -24px; +} +.post ul li { + list-style-image: url('../images/bullet.png'); +} +.main + .main { + margin-top: 96px; +} +.archive li { + list-style: none; +} +.archive a { + display: block; + padding: 12px 0; + border-bottom: 1px dotted #cccccc; +} +.archive a:hover { + text-decoration: none; +} +.archive time { + display: inline; + color: #666666; +} +@media screen and (min-width: 45em) { + header .wrapper { + width: 75%; + float: right; + } + .meta, .pages { + width: 25%; + float: left; + text-align: right; + } + .pages { + padding-top: 52px; + } + .meta { + background: #ffffff; + padding-top: 60px; + } + .meta time { + margin-bottom: 24px; + } + .post, .copy, .main { + width: 75%; + float: right; + } + .tags li { + display: block; + } + .tags a:hover, .nav a:hover { + padding-right: 6px; + } + .tags a:hover:after, .nav a:hover:after, .more:hover:after { + content: "\2192 "; + } + .nav li { + display: block; + padding-right: 0; + } + .archive time { + display: block; + width: 25%; + float: left; + } +} +@media screen and (min-width: 55.5em) { + .post p, + .post blockquote, + .post ul, + .post ol { + width: 66.66666666666667%; + } + .main { + width: 50%; + float: none; + margin-left: 25%; + } +} +@media screen and (min-width: 61.5em) { + .meta, .pages { + width: 12.5%; + } + .pages { + padding-top: 0; + } + .meta { + padding-top: 60px; + } +} +@media screen and (min-width: 117em) { + body { + font-size: 18px; + } + header { + margin-bottom: 96px; + } + footer { + margin-top: 144px; + } + h1 { + font-size: 48px; + margin-bottom: 48px; + } + h2, header .huge { + font-size: 36px; + } + h2 { + margin-top: 72px; + } + h3 { + font-size: 24px; + margin-top: 72px; + } + h4, h5, h6 { + font-size: 18px; + margin-top: 48px; + } + .meta, .pages { + width: 18.75%; + padding-left: 6.25%; + } + .meta { + padding-top: 96px; + } + .post, .copy { + width: 75%; + } + .post { + padding-right: 12.5%; + } + .post ul { + margin-bottom: 0; + } + .post li { + margin-bottom: 24px; + } + code { + font-size: 36px; + line-height: 1.5; + } + .post p, + .post blockquote, + .post ul, + .post ol { + width: 60%; + } +} +@media screen and (min-width: 130em) { + body { + max-width: 160em; + } +} +@media print { + * { + background: transparent !important; + box-shadow: none !important; + color: black !important; + filter: none !important; + -ms-filter: none !important; + text-shadow: none !important; + } + @page { + margin: 0.5cm; + } + a, a:visited { + color: #000000 !important; + text-decoration: underline; + } + a[href]:after { + content: " (" attr(href) ")"; + } + a[href^="javascript:"]:after, a[href^="#"]:after, .ir a:after { + content: ""; + } + abbr[title]:after { + content: " (" attr(title) ")"; + } + body { + font-size: 12pt; + } + blockquote, pre { + page-break-inside: avoid; + } + blockquote, pre { + margin-left: 0.5cm; + border-left: 0.2cm solid #999; + padding-left: 0.2cm; + } + code, pre { + font: 10pt Courier, monospace; + } + h1 { + font-size: 18pt; + } + h2, h3 { + page-break-after: avoid; + font-size: 16pt; + } + h2, h3, p { + orphans: 3; + widows: 3; + } + img { + max-width: 100% !important; + } + img, tr { + page-break-inside: avoid; + } + thead { + display: table-header-group; + } +} diff --git a/Just-Read/static/images/2px.png b/Just-Read/static/images/2px.png new file mode 100644 index 0000000..31b24fc Binary files /dev/null and b/Just-Read/static/images/2px.png differ diff --git a/Just-Read/static/images/bullet.png b/Just-Read/static/images/bullet.png new file mode 100644 index 0000000..b821648 Binary files /dev/null and b/Just-Read/static/images/bullet.png differ diff --git a/Just-Read/static/images/pages.png b/Just-Read/static/images/pages.png new file mode 100644 index 0000000..93ed30e Binary files /dev/null and b/Just-Read/static/images/pages.png differ diff --git a/Just-Read/templates/archives.html b/Just-Read/templates/archives.html new file mode 100644 index 0000000..355fe6f --- /dev/null +++ b/Just-Read/templates/archives.html @@ -0,0 +1,21 @@ +{% extends "base.html" %} +{% block title %}{{ SITENAME }} [archive]{% endblock %} +{% block content %} +
+
+ {% for year, date_year in dates|groupby( 'date.year' ) %} +

{{ year }}

+ {% for month, articles in date_year|groupby( 'date.month' ) %} +

{{ articles[ 0 ].date.strftime( '%B' ) }}

+ +
    + {% for article in articles %} +
  1. {{ article.title }}
    2. + {% endfor %} +
+ + {% endfor %} + {% endfor %} +
+
+{% endblock %} \ No newline at end of file diff --git a/Just-Read/templates/article.html b/Just-Read/templates/article.html new file mode 100644 index 0000000..a5bf08f --- /dev/null +++ b/Just-Read/templates/article.html @@ -0,0 +1,29 @@ +{% extends "base.html" %} +{% block title %}{{ article.title }} - {{ SITENAME }}{% endblock %} +{% block content %} +
+
+
+

{{ article.title }}

+ {{ article.content }} + + {% if DISQUS_SITENAME %} +
+

Comments !

+
+ +
+ {% endif %} +
+ + {% include 'metadata.html' %} +
+
+{% endblock %} \ No newline at end of file diff --git a/Just-Read/templates/base.html b/Just-Read/templates/base.html new file mode 100644 index 0000000..7a14567 --- /dev/null +++ b/Just-Read/templates/base.html @@ -0,0 +1,65 @@ + + + + + {% block title %}{{ SITENAME }}{%endblock%} + + + + + + + + + + + + + {% if FEED_RSS %} + + {% endif %} + + + + + + {% block content %} + {% endblock %} + + + + + + + \ No newline at end of file diff --git a/Just-Read/templates/categories.html b/Just-Read/templates/categories.html new file mode 100644 index 0000000..6b889e8 --- /dev/null +++ b/Just-Read/templates/categories.html @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/Just-Read/templates/category.html b/Just-Read/templates/category.html new file mode 100644 index 0000000..20cdc17 --- /dev/null +++ b/Just-Read/templates/category.html @@ -0,0 +1,17 @@ +{% extends "base.html" %} +{% block title %}{{ category }} - {{ SITENAME }}{% endblock %} + +{% block content %} +
+
+

Posts categorized under: {{ category }}

+ +
    + {% for article in articles %} +
  1. {{ article.title }}
    2. + {% endfor %} +
+ +
+
+{% endblock %} \ No newline at end of file diff --git a/Just-Read/templates/index.html b/Just-Read/templates/index.html new file mode 100644 index 0000000..262c23e --- /dev/null +++ b/Just-Read/templates/index.html @@ -0,0 +1,26 @@ +{% extends "base.html" %} +{% block content_title %}{% endblock %} + +{% block content %} +
+{% for article in articles %} + + {% if loop.index == 1 %} + + + {% if loop.length > 1 %} +
+

More posts

+
    + {% endif %} + {% else %} +
  1. {{ article.title }}
    2. + {% endif %} + {% endfor %} +
+
+
+{% endblock content %} \ No newline at end of file diff --git a/Just-Read/templates/metadata.html b/Just-Read/templates/metadata.html new file mode 100644 index 0000000..842a5d8 --- /dev/null +++ b/Just-Read/templates/metadata.html @@ -0,0 +1,12 @@ +
+ + + {% if PDF_PROCESSOR %}

Download the .pdf

{% endif %} +
\ No newline at end of file diff --git a/Just-Read/templates/page.html b/Just-Read/templates/page.html new file mode 100644 index 0000000..9402f36 --- /dev/null +++ b/Just-Read/templates/page.html @@ -0,0 +1,10 @@ +{% extends "base.html" %} +{% block title %}{{ article.title }}{% endblock %} +{% block content %} +
+
+

{{ page.title }}

+ {{ page.content }} +
+
+{% endblock %} \ No newline at end of file diff --git a/Just-Read/templates/tag.html b/Just-Read/templates/tag.html new file mode 100644 index 0000000..f5ebd56 --- /dev/null +++ b/Just-Read/templates/tag.html @@ -0,0 +1,16 @@ +{% extends "base.html" %} +{% block title %}{{ tag }} - {{ SITENAME }}{% endblock %} +{% block content %} +
+
+

Post tagged: {{ tag }}

+ +
    + {% for article in articles %} +
  1. {{ article.title }}
    2. + {% endfor %} +
+ +
+
+{% endblock %} \ No newline at end of file diff --git a/Just-Read/templates/tags.html b/Just-Read/templates/tags.html new file mode 100644 index 0000000..6b889e8 --- /dev/null +++ b/Just-Read/templates/tags.html @@ -0,0 +1 @@ + \ No newline at end of file -- cgit From 10ceddf0b734e940c122d701706682a79bcda0f3 Mon Sep 17 00:00:00 2001 From: Natalia Ventre Date: Wed, 8 Feb 2012 22:26:05 -0200 Subject: added license --- Just-Read/license.md | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 Just-Read/license.md (limited to 'Just-Read') diff --git a/Just-Read/license.md b/Just-Read/license.md new file mode 100644 index 0000000..d82e48d --- /dev/null +++ b/Just-Read/license.md @@ -0,0 +1,7 @@ +Copyright (c) 2012 Natalia Ventre + +Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. \ No newline at end of file -- cgit From 2790cccdd9ae4c1155a2a5b919d567e431920a25 Mon Sep 17 00:00:00 2001 From: Natalia Ventre Date: Wed, 8 Feb 2012 22:29:05 -0200 Subject: edited gitignore file --- Just-Read/.gitignore | 28 ---------------------------- 1 file changed, 28 deletions(-) (limited to 'Just-Read') diff --git a/Just-Read/.gitignore b/Just-Read/.gitignore index 12a938a..9d0295a 100644 --- a/Just-Read/.gitignore +++ b/Just-Read/.gitignore @@ -1,31 +1,3 @@ -# Compiled source # -################### -*.com -*.class -*.dll -*.exe -*.o -*.so - -# Packages # -############ -# it's better to unpack these files and commit the raw source -# git has its own built in compression methods -*.7z -*.dmg -*.gz -*.iso -*.jar -*.rar -*.tar -*.zip - -# Logs and databases # -###################### -*.log -*.sql -*.sqlite - # OS generated files # ###################### .DS_Store* -- cgit From 385da5723de17df5322824eaff38212a22b19e02 Mon Sep 17 00:00:00 2001 From: Natalia Ventre Date: Wed, 8 Feb 2012 23:30:19 -0200 Subject: Correction in the archives Now the posts are correctly grouped by year. --- Just-Read/templates/archives.html | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) (limited to 'Just-Read') diff --git a/Just-Read/templates/archives.html b/Just-Read/templates/archives.html index 355fe6f..91c1c54 100644 --- a/Just-Read/templates/archives.html +++ b/Just-Read/templates/archives.html @@ -1,21 +1,18 @@ {% extends "base.html" %} -{% block title %}{{ SITENAME }} [archive]{% endblock %} +{% block title %}{{ SITENAME }}{% endblock %} {% block content %}
{% for year, date_year in dates|groupby( 'date.year' ) %} -

{{ year }}

- {% for month, articles in date_year|groupby( 'date.month' ) %} -

{{ articles[ 0 ].date.strftime( '%B' ) }}

+

{{ year }}

    - {% for article in articles %} + {% for article in date_year %}
  1. {{ article.title }}
    2. {% endfor %}
{% endfor %} - {% endfor %}
{% endblock %} \ No newline at end of file -- cgit From 3aaaf15926ba8e161a4ab0891f29b014216935f7 Mon Sep 17 00:00:00 2001 From: Natalia Ventre Date: Thu, 9 Feb 2012 18:22:05 -0200 Subject: Added link to tags page --- Just-Read/templates/base.html | 1 + 1 file changed, 1 insertion(+) (limited to 'Just-Read') diff --git a/Just-Read/templates/base.html b/Just-Read/templates/base.html index 7a14567..65f549c 100644 --- a/Just-Read/templates/base.html +++ b/Just-Read/templates/base.html @@ -40,6 +40,7 @@
  • {{ p.title }}
    • {% endfor %}
  • Archive
    • +
  • Tags
    • {% if FEED_RSS %}
  • RSS Feed
    • {% endif %} -- cgit From 2eb50d3a81747be778e2070b53c83417f127cc20 Mon Sep 17 00:00:00 2001 From: Natalia Ventre Date: Thu, 9 Feb 2012 18:24:39 -0200 Subject: Limited the "other posts" to 5 --- Just-Read/templates/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'Just-Read') diff --git a/Just-Read/templates/index.html b/Just-Read/templates/index.html index 262c23e..39513e2 100644 --- a/Just-Read/templates/index.html +++ b/Just-Read/templates/index.html @@ -16,7 +16,7 @@

    More posts

      {% endif %} - {% else %} + {% elif loop.index < 7 %}
    1. {{ article.title }}
      2. {% endif %} {% endfor %} -- cgit From 778b2a680ba20f89f05e577aaf8bbee4a82377fc Mon Sep 17 00:00:00 2001 From: Natalia Ventre Date: Thu, 9 Feb 2012 18:25:19 -0200 Subject: Fixed an error in the page title --- Just-Read/templates/page.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'Just-Read') diff --git a/Just-Read/templates/page.html b/Just-Read/templates/page.html index 9402f36..ebf8da0 100644 --- a/Just-Read/templates/page.html +++ b/Just-Read/templates/page.html @@ -1,5 +1,5 @@ {% extends "base.html" %} -{% block title %}{{ article.title }}{% endblock %} +{% block title %}{{ page.title }}{% endblock %} {% block content %}
      -- cgit From 5016e346195b989a5683d261ab51881b48832a6f Mon Sep 17 00:00:00 2001 From: Natalia Ventre Date: Thu, 9 Feb 2012 18:26:00 -0200 Subject: Added tag cloud --- Just-Read/templates/tags.html | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) (limited to 'Just-Read') diff --git a/Just-Read/templates/tags.html b/Just-Read/templates/tags.html index 6b889e8..eed50d2 100644 --- a/Just-Read/templates/tags.html +++ b/Just-Read/templates/tags.html @@ -1 +1,17 @@ - \ No newline at end of file +{% extends "base.html" %} +{% block title %}{{ SITENAME }}{% endblock %} + +{% block content %} +
      +
      +

      Tags

      + +
        + {% for tag in tag_cloud %} +
      • {{ tag.0 }}
        • + {% endfor %} +
      + +
      +
      +{% endblock %} \ No newline at end of file -- cgit From 0e03fdd699b4f743e79f92c936a22fcab2d0adea Mon Sep 17 00:00:00 2001 From: Natalia Ventre Date: Thu, 9 Feb 2012 18:27:16 -0200 Subject: added border-box mixing --- Just-Read/less/mixins.less | 7 +++++++ 1 file changed, 7 insertions(+) (limited to 'Just-Read') diff --git a/Just-Read/less/mixins.less b/Just-Read/less/mixins.less index 2e895f9..356e9a3 100644 --- a/Just-Read/less/mixins.less +++ b/Just-Read/less/mixins.less @@ -43,4 +43,11 @@ -webkit-border-image: url(@url) @slice @repeat; -o-border-image: url(@url) @slice @repeat; border-image: url(@url) @slice @repeat; +} + +.border-box{ +-webkit-box-sizing: border-box; +-moz-box-sizing: border-box; +-o-box-sizing: border-box; +box-sizing: border-box; } \ No newline at end of file -- cgit From 3aadb9fb788d08155d8cd713f122efb23d74466a Mon Sep 17 00:00:00 2001 From: Natalia Ventre Date: Thu, 9 Feb 2012 18:28:22 -0200 Subject: added tag cloud styles (4 levels) and margin-bottom for figure --- Just-Read/less/main.less | 43 +++++++++++++++++++++++++++++++++++++++---- 1 file changed, 39 insertions(+), 4 deletions(-) (limited to 'Just-Read') diff --git a/Just-Read/less/main.less b/Just-Read/less/main.less index 55efa5a..2903288 100644 --- a/Just-Read/less/main.less +++ b/Just-Read/less/main.less @@ -16,6 +16,7 @@ figure { position: relative; + margin: 0 0 (@line * 1px) 0; } figure img, figure object, figure embed, figure video { @@ -23,6 +24,11 @@ figure img, figure object, figure embed, figure video { display: block; } +figcaption{ + margin-top: @line * 1px; + color: lighten(@black, 60%); +} + // Elastic Object & Iframe Embedded Videos http://webdesignerwall.com/tutorials/css-elastic-videos .video-container { @@ -102,6 +108,25 @@ b, strong{ } +.tagcloud li{ + list-style: none; + margin-bottom: @line / 8px; +} +.tagcloud a{ + color: @black; + display: block; + background-color: lighten(@link, 50%); + padding: (@line / 8px) (@line / 4px); + .small; + .rounded(); + .border-box; + + &:hover{ + text-decoration:none; + background-color: lighten(@link, 30%); + } +} + // Four-column grid active // ---------------------------------------- // Margin | # 1 2 3 4 | Margin @@ -109,10 +134,7 @@ b, strong{ .wrapper { padding: 0 (@line/2)/@em; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - -o-box-sizing: border-box; - box-sizing: border-box; + .border-box; } @@ -251,6 +273,19 @@ code{ color: lighten(@black, 40%); } +.tag-1 a{ + width: 100%; +} +.tag-2 a{ + width: 75%; +} +.tag-3 a{ + width: 50%; +} +.tag-4 a{ + width: 25%; +} + // Eight-column grid active // ---------------------------------------------------------------------- -- cgit From 30b9d90eb26a576dea1f4b30bc9aa4de16e737d3 Mon Sep 17 00:00:00 2001 From: Natalia Ventre Date: Thu, 9 Feb 2012 18:29:19 -0200 Subject: compiled changes made in LESS files --- Just-Read/static/css/main.css | 50 ++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 49 insertions(+), 1 deletion(-) (limited to 'Just-Read') diff --git a/Just-Read/static/css/main.css b/Just-Read/static/css/main.css index 3cb6c6a..f5d4c6a 100644 --- a/Just-Read/static/css/main.css +++ b/Just-Read/static/css/main.css @@ -52,6 +52,12 @@ img { .clearfix { *zoom: 1; } +.border-box { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -o-box-sizing: border-box; + box-sizing: border-box; +} .sans, .fancy-font { font-family: 'Droid Sans', sans-serif; } @@ -60,6 +66,7 @@ img { } figure { position: relative; + margin: 0 0 24px 0; } figure img, figure object, @@ -68,6 +75,10 @@ figure video { max-width: 100%; display: block; } +figcaption { + margin-top: 24px; + color: #999999; +} .video-container { position: relative; padding-bottom: 56.25%; @@ -147,6 +158,31 @@ h4, h5, h6 { b, strong { font-weight: 700; } +.tagcloud li { + list-style: none; + margin-bottom: 3px; +} +.tagcloud a { + color: #000000; + display: block; + background-color: #ffffff; + padding: 3px 6px; + font-size: 12px; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; + -moz-background-clip: padding; + -webkit-background-clip: padding-box; + background-clip: padding-box; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -o-box-sizing: border-box; + box-sizing: border-box; +} +.tagcloud a:hover { + text-decoration: none; + background-color: #c5efec; +} .wrapper { padding: 0 0.75em; -webkit-box-sizing: border-box; @@ -291,6 +327,18 @@ code { display: inline; color: #666666; } +.tag-1 a { + width: 100%; +} +.tag-2 a { + width: 75%; +} +.tag-3 a { + width: 50%; +} +.tag-4 a { + width: 25%; +} @media screen and (min-width: 45em) { header .wrapper { width: 75%; @@ -480,4 +528,4 @@ code { thead { display: table-header-group; } -} +} \ No newline at end of file -- cgit From aa50023c673fc9f786b20bfe21607b620129a5d3 Mon Sep 17 00:00:00 2001 From: Natalia Ventre Date: Fri, 17 Feb 2012 15:29:33 -0200 Subject: Style for tags, codehilite, social icons Added CSS styles for tags, color scheme for code highlighting, social links and icons, and improvements in the archive page. --- Just-Read/less/base.less | 57 ++- Just-Read/less/codehilite.less | 70 ++++ Just-Read/less/main.less | 499 ++++++++++++++---------- Just-Read/less/mixins.less | 33 +- Just-Read/less/var.less | 15 +- Just-Read/pelican.conf.py-sample.py | 23 +- Just-Read/psd/bullet.pxm | Bin 20770 -> 20770 bytes Just-Read/screenshot.png | Bin 77147 -> 77236 bytes Just-Read/static/css/main.css | 742 ++++++++++++++++++++++++++++-------- Just-Read/static/images/bullet.png | Bin 194 -> 1496 bytes Just-Read/templates/archives.html | 48 ++- Just-Read/templates/article.html | 3 + Just-Read/templates/base.html | 44 ++- Just-Read/templates/categories.html | 1 - Just-Read/templates/index.html | 4 +- Just-Read/templates/metadata.html | 2 +- Just-Read/templates/page.html | 2 +- Just-Read/templates/tags.html | 2 +- 18 files changed, 1140 insertions(+), 405 deletions(-) create mode 100644 Just-Read/less/codehilite.less (limited to 'Just-Read') diff --git a/Just-Read/less/base.less b/Just-Read/less/base.less index 7d31c62..5997dcc 100644 --- a/Just-Read/less/base.less +++ b/Just-Read/less/base.less @@ -3,7 +3,7 @@ // HTML5 display definitions -article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, time { +article, figcaption, figure, footer, header, nav, section, time { display: block; } @@ -11,12 +11,11 @@ article, aside, details, figcaption, figure, footer, header, hgroup, nav, sectio html { font-size: 100%; - overflow-y: scroll; - -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; } -body{ +body { margin: 0; } @@ -27,6 +26,7 @@ body{ color: #000; text-shadow: none; } + ::selection { background: #fd7; color: #000; @@ -39,9 +39,17 @@ a:hover, a:active { outline: 0; } +// Code + +pre { + white-space: pre; + white-space: pre-wrap; + word-wrap: break-word; +} + // Lists -ul, ol{ +ol, ul{ margin: 0; padding: 0; } @@ -65,4 +73,43 @@ img { } .clearfix { *zoom: 1; +} + +// Simple fluid media + +figure { + margin: 0 0 (@line * 1px) 0; + position: relative; +} + +figure img, figure object, figure embed, figure video { + display: block; + height: auto; + max-width: 100%; +} + +figcaption{ + color: lighten(@black, 60%); + margin-top: @line * 1px; +} + +// Elastic Object & Iframe Embedded Videos http://webdesignerwall.com/tutorials/css-elastic-videos + +.video-container { + height: 0; + margin-bottom: @line * 1px; + padding-bottom: 56.25%; + padding-top: 30px; + position: relative; + overflow: hidden; +} + +.video-container iframe, +.video-container object, +.video-container embed { + height: 100%; + left: 0; + position: absolute; + top: 0; + width: 100%; } \ No newline at end of file diff --git a/Just-Read/less/codehilite.less b/Just-Read/less/codehilite.less new file mode 100644 index 0000000..9de1d28 --- /dev/null +++ b/Just-Read/less/codehilite.less @@ -0,0 +1,70 @@ +// Color scheme for CodeHilite (code/syntax highlighting using Pygments) + +@c1: #757575; // grayish +@c2: #fa4753; // orange +@c3: #6bc5d9; // teal +@c4: #514986; // purple +@c5: #f8f8f2; // whiteish +@c6: #f92672; // pink +@c7: #f4e07c; // yellow +@c8: #9cc52c; // green + +.hll {} +.c { color: @c1 } /* Comment */ +.err { color: @c2;} /* Error */ +.k { color: @c3 } /* Keyword */ +.l { color: @c4 } /* Literal */ +.n { color: @c5 } /* Name */ +.o { color: @c6 } /* Operator */ +.p { color: @c5 } /* Punctuation */ +.cm { color: @c1 } /* Comment.Multiline */ +.cp { color: @c1 } /* Comment.Preproc */ +.c1 { color: @c1 } /* Comment.Single */ +.cs { color: @c1 } /* Comment.Special */ +.ge {} /* Generic.Emph */ +.gs {} /* Generic.Strong */ +.kc { color: @c3 } /* Keyword.Constant */ +.kd { color: @c3 } /* Keyword.Declaration */ +.kn { color: @c6 } /* Keyword.Namespace */ +.kp { color: @c3 } /* Keyword.Pseudo */ +.kr { color: @c3 } /* Keyword.Reserved */ +.kt { color: @c3 } /* Keyword.Type */ +.ld { color: @c7 } /* Literal.Date */ +.m { color: @c4 } /* Literal.Number */ +.s { color: @c7 } /* Literal.String */ +.na { color: @c8 } /* Name.Attribute */ +.nb { color: @c5 } /* Name.Builtin */ +.nc { color: @c8 } /* Name.Class */ +.no { color: @c3 } /* Name.Constant */ +.nd { color: @c8 } /* Name.Decorator */ +.ni { color: @c5 } /* Name.Entity */ +.ne { color: @c8 } /* Name.Exception */ +.nf { color: @c8 } /* Name.Function */ +.nl { color: @c5 } /* Name.Label */ +.nn { color: @c5 } /* Name.Namespace */ +.nx { color: @c8 } /* Name.Other */ +.py { color: @c5 } /* Name.Property */ +.nt { color: @c6 } /* Name.Tag */ +.nv { color: @c5 } /* Name.Variable */ +.ow { color: @c6 } /* Operator.Word */ +.w { color: @c5 } /* Text.Whitespace */ +.mf { color: @c4 } /* Literal.Number.Float */ +.mh { color: @c4 } /* Literal.Number.Hex */ +.mi { color: @c4 } /* Literal.Number.Integer */ +.mo { color: @c4 } /* Literal.Number.Oct */ +.sb { color: @c7 } /* Literal.String.Backtick */ +.sc { color: @c7 } /* Literal.String.Char */ +.sd { color: @c7 } /* Literal.String.Doc */ +.s2 { color: @c7 } /* Literal.String.Double */ +.se { color: @c4 } /* Literal.String.Escape */ +.sh { color: @c7 } /* Literal.String.Heredoc */ +.si { color: @c7 } /* Literal.String.Interpol */ +.sx { color: @c7 } /* Literal.String.Other */ +.sr { color: @c7 } /* Literal.String.Regex */ +.s1 { color: @c7 } /* Literal.String.Single */ +.ss { color: @c7 } /* Literal.String.Symbol */ +.bp { color: @c5 } /* Name.Builtin.Pseudo */ +.vc { color: @c5 } /* Name.Variable.Class */ +.vg { color: @c5 } /* Name.Variable.Global */ +.vi { color: @c5 } /* Name.Variable.Instance */ +.il { color: @c4 } /* Literal.Number.Integer.Long */ \ No newline at end of file diff --git a/Just-Read/less/main.less b/Just-Read/less/main.less index 2903288..39e705c 100644 --- a/Just-Read/less/main.less +++ b/Just-Read/less/main.less @@ -6,164 +6,276 @@ // Important numbers -@line: 24; @column: 100% / 18; -@font-size: 16; @em: @font-size*1em; +@font-size: 16; +@line: 24; - -// Simple fluid media - -figure { - position: relative; - margin: 0 0 (@line * 1px) 0; -} - -figure img, figure object, figure embed, figure video { - max-width: 100%; - display: block; -} - -figcaption{ - margin-top: @line * 1px; - color: lighten(@black, 60%); -} - -// Elastic Object & Iframe Embedded Videos http://webdesignerwall.com/tutorials/css-elastic-videos - -.video-container { - position: relative; - padding-bottom: 56.25%; - padding-top: 30px; - height: 0; - overflow: hidden; - margin-bottom: @line * 1px; -} - -.video-container iframe, -.video-container object, -.video-container embed { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; -} - -// Typography settings - Make the text bigger if you dare - -.small {font-size: 12px;} -.normal {font-size: 14px;} -.large {font-size: 18px;} -.huge {font-size: 24px;} -.massive {font-size: 36px;} -.gigantic {font-size: 48px;} +// Mobile first body { - .normal; - line-height: @line * 1px; background: @white; color: lighten(@black, 25%); + line-height: @line * 1px; + .normal; .sans; } -.title{ - line-height: 1; - .fancy-font; - font-weight: 700; +a{ + color: @link; + text-decoration: none; + + &:hover{ + color: darken(@link, 40%); + text-decoration:underline; + } } h1{ - .title; .huge; margin: 0 0 (@line * 1.5px) 0; + .title; } h2{ - .title; .large; margin: (@line * 2px) 0 (@line * 1px); - + .title; } h3{ - .title; - .normal; + color: lighten(@black, 60%); margin: (@line * 1.5px) 0 (@line * 1px); + .normal; text-transform: uppercase; - color: lighten(@black, 60%); - + .title; } h4, h5, h6{ - .title; - .normal; - margin: (@line * 1px) 0; font-weight: 400; - + margin: (@line * 1px) 0; + .normal; + .title; } b, strong{ font-weight: 700; } +blockquote{ + border-left: (@line / 4px) solid @link; + margin-left: -(@line / 2px); + padding-left: (@line / 4px); +} + +code, .codehilite{ + background: lighten(@black, 15%); // If you don't a dark scheme for code, we can't be friends + .box-shadow(inset 0 0 10px @black); + color: @white; + display: block; + margin-left: -(@line * 1px); + .mono(); + padding: (@line * 1px); + .rounded(); +} -.tagcloud li{ +time{ + .small; + text-transform: uppercase; +} + +.post ul li{ + list-style-image: url('../images/bullet.png'); // or use something less colorful, like list-style-type: square +} + +// Archive + +.archive li{ list-style: none; - margin-bottom: @line / 8px; } -.tagcloud a{ - color: @black; + +.archive a{ + border-bottom: 1px dotted lighten(@black, 80%); display: block; - background-color: lighten(@link, 50%); - padding: (@line / 8px) (@line / 4px); - .small; - .rounded(); - .border-box; + padding: (@line / 2px) 0; + .transition(); + + &:hover{ + background-color: lighten(@black, 95%); + text-decoration:none; + } +} + +.archive time{ + color: lighten(@black, 40%); + display: inline; + padding-left: @line / 2px; +} + +// jQuery UI tabs (in the archive) + +.tabmenu li{ + list-style-type: none; + + a{ + border: 1px solid @link; + .border-box; + display: block; + float: left; + padding: (@line / 2px) 0; + text-align: center; + width: 50%; + + &:hover{ + text-decoration:none + } + } + + &:last-child a{ + border-left: none; + } +} + +// Make jQuery tabs work (because I don't use the themes's CSS) + +.ui-tabs-hide{ + display: none; +} + +.tabmenu li a:hover, .ui-tabs-selected a, .ui-tabs-selected a{ + background-color: lighten(@black, 95%); +} + +// Push the button + +.btn { + color: @white; + background-color: @color; + border: none; + + -webkit-box-shadow: inset 0px -3px 1px rgba(0, 0, 0, 0.45), 0px 2px 2px rgba(0, 0, 0, 0.25); + -moz-box-shadow: inset 0px -3px 1px rgba(0, 0, 0, 0.45), 0px 2px 2px rgba(0, 0, 0, 0.25); + box-shadow: inset 0px -3px 1px rgba(0, 0, 0, 0.45), 0px 2px 2px rgba(0, 0, 0, 0.25); + + padding: 8px 14px 10px; + position: relative; + .rounded(3px); + text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5); + -webkit-user-select: none; &:hover{ - text-decoration:none; - background-color: lighten(@link, 30%); + color: @white; + text-decoration: none; + } + + &:active { + -webkit-box-shadow: inset 0px -3px 1px rgba(255, 255, 255, 1), inset 0 0px 3px rgba(0, 0, 0, 0.9); + -moz-box-shadow: inset 0px -3px 1px rgba(255, 255, 255, 1), inset 0 0px 3px rgba(0, 0, 0, 0.9); + box-shadow: inset 0px -3px 1px rgba(255, 255, 255, 1), inset 0 0px 3px rgba(0, 0, 0, 0.9); + + position: relative; + top: 3px; } + + &:active:after { + content: ""; + background: @white; + bottom: -1px; + height: 3px; + left: 0; + position: absolute; + width: 100%; + } + } -// Four-column grid active -// ---------------------------------------- -// Margin | # 1 2 3 4 | Margin -// 5.55555% | % 25 50 75 100 | 5.55555% +// CSS tags -.wrapper { - padding: 0 (@line/2)/@em; - .border-box; +.tag li{ + list-style: none; + margin-bottom: @line / 8px; } - -a{ - color: @link; - text-decoration: none; - .transition(); +.tag a{ + .border-box; - &:hover{ - color: darken(@link, 40%); - text-decoration:underline; - } + -moz-border-radius-bottomright: 4px; + -webkit-border-bottom-right-radius: 4px; + border-bottom-right-radius: 4px; + -moz-border-radius-topright: 4px; + -webkit-border-top-right-radius: 4px; + border-top-right-radius: 4px; + + color: @black; + background-color: lighten(@link, 50%); + display: block; + margin-left: 20px; + padding: 0 10px 0 12px; + position: relative; + .small; + + &:hover{ + background-color: lighten(@link, 30%); + text-decoration:none; + } + + &:before{ + content: ""; + border-color: transparent lighten(@link, 50%) transparent transparent; + border-style: solid; + border-width: 12px 12px 12px 0; + float: left; + height: 0; + left: -12px; + position: absolute; + top: 0; + width: 0; + } + + &:after{ + content: ""; + background: @white; + .box-shadow(-1px -1px 2px darken(@link, 50%)); + float: left; + height: 4px; + left: 0; + position: absolute; + .rounded(2px); + top: 10px; + width: 4px; + } + + &:hover:before { + border-color: transparent lighten(@link, 30%) transparent transparent; + } } +// Tagcloud +.tag-1 a{width: 100%;} +.tag-2 a{width: 90%;} +.tag-3 a{width: 80%;} +.tag-4 a{width: 70%;} +.tag-5 a{width: 60%;} +.tag-6 a{width: 50%;} +.tag-7 a{width: 40%;} +.tag-8 a{width: 30%;} + +// Header + header{ .border-image(0 0 2px, 0 0 2, '../images/2px.png', repeat); // It's a very small detail, delete this line if you want different colors and don't want to edit the image file .gradient(@color, darken(@color, 6%)); - padding: (@line * 2px) @column; margin-bottom: (@line * 2px); - + padding: (@line * 1px) @column; + h1{ margin: 0; } a{ - text-decoration: none; color: fade(@white, 80%); - - // The 3d effect is kind of silly, so go ahead and delete the following lines xD + text-decoration: none; + // The 3d effect is kind of silly, so go ahead and delete the following lines xD text-shadow: 0 1px 0 lighten(@black, 70%), 0 2px 0 lighten(@black, 60%), @@ -173,117 +285,113 @@ header{ 0 6px 0 lighten(@black, 20%), 0px 7px 0 lighten(@black, 10%), 0 8px 7px lighten(@black, 5%); - - - &:hover{ - color: @white; - text-decoration:none; + + &:hover{ + color: @white; + text-decoration:none; } } } +// Footer + footer{ .border-image(20px 0 0, 20 0 0, '../images/pages.png', repeat); // Again, it's a detail. I used border-image to be able to use a gradient or background color for the footer, but now it's white - padding: (@line * 2px) @column (@line * 1px); + color: fade(@black, 60%); margin-top: (@line * 4px); - color: fade(@black, 60%); + padding: (@line * 2px) @column (@line * 1px); } -.pages{ +.nav{ margin-bottom: (@line * 1px); -} - -.nav li{ - list-style: none; - display: inline; - padding-right: 10px; + + li{ + list-style: none; + display: inline; + padding-right: 10px; + } + + a{ + .transition(); + } } p[role="contentinfo"]{ - margin-top: (@line / 2px); // If you don't use the Twitter button, delete this line .small; } -.content{ - margin:0 @column; +.social{ + margin-bottom: @line * 1px; + + li{ + list-style: none; + display: inline; + padding-right: @line / 2px; + } } -.meta{ - background: lighten(@black, 95%); - padding-top: (@line * 1px); - padding-bottom: (@line * 1px); - .rounded(); +.icon{ + margin-right: 2px; + vertical-align: -3px; } -time{ - .small; - text-transform: uppercase; -} +.social a[href*='behance.net']:before {content: url('../images/icons/behance.png'); .icon;} +.social a[href*='delicious.com']:before {content: url('../images/icons/delicious.png'); .icon;} +.social a[href*='facebook.com']:before {content: url('../images/icons/facebook.png'); .icon;} +.social a[href*='flickr.com']:before {content: url('../images/icons/flickr.png'); .icon;} +.social a[href*='forrst.com']:before {content: url('../images/icons/forrst.png'); .icon;} +.social a[href*='github.com']:before {content: url('../images/icons/github.png'); .icon;} +.social a[href*='plus.google.com']:before {content: url('../images/icons/google_plus.png'); .icon;} +.social a[href*='last.fm']:before {content: url('../images/icons/lastfm.png'); .icon;} +.social a[href*='linkedin.com']:before {content: url('../images/icons/linkedin.png'); .icon;} +.social a[href*='quora.com']:before {content: url('../images/icons/quora.png'); .icon;} +.social a[href*='rss.xml']:before {content: url('../images/icons/rss.png'); .icon;} +.social a[href*='stackoverflow.com']:before {content: url('../images/icons/stackoverflow.png'); .icon;} +.social a[href*='twitter.com']:before {content: url('../images/icons/twitter.png'); .icon;} +.social a[href*='youtube.com']:before {content: url('../images/icons/youtube.png'); .icon;} -.tags li{ - display: inline; - list-style: none; -} - -blockquote, code, .post ul, .post ol, p{ - margin: 0 0 (@line * 1px) 0; -} -blockquote{ - margin-left: -(@line / 2px); - border-left: (@line / 4px) solid @link; - padding-left: (@line / 4px); -} -code{ - display: block; - background: lighten(@black, 15%); // If you don't a dark scheme for code, we can't be friends - .box-shadow(inset 0 0 10px @black); - padding: (@line * 1px); - color: @white; - .rounded(); - .mono(); - margin-left: -(@line * 1px); -} +// Four-column grid active +// ---------------------------------------- +// Margin | # 1 2 3 4 | Margin +// 5.55555% | % 25 50 75 100 | 5.55555% -.post ul li{ - list-style-image: url('../images/bullet.png'); // or use something less colorful, like list-style-type: square +.wrapper { + .border-box; + padding: 0 (@line/2)/@em; } -.main + .main{ - margin-top: (@line * 4px); +.content{ + margin:0 @column; } -.archive li{ - list-style: none; +.meta{ + background: lighten(@black, 98%); + margin-top: @line * 2px; + padding-bottom: (@line * 1px); + padding-top: (@line * 1px); + .rounded(); + + time{ + font-weight: 700; + margin-left: 20px; + margin-bottom: @line * 1px; + } } -.archive a{ +.tag li{ display: block; - padding: (@line / 2px) 0; - border-bottom: 1px dotted lighten(@black, 80%); - - &:hover{ - text-decoration:none; - } + float: left; + width: 50%; } -.archive time{ - display: inline; - color: lighten(@black, 40%); +blockquote, code, .codehilite, .post ul, .post ol, p, .archive{ + margin: 0 0 (@line * 1px) 0; } -.tag-1 a{ - width: 100%; -} -.tag-2 a{ - width: 75%; -} -.tag-3 a{ - width: 50%; -} -.tag-4 a{ - width: 25%; +.main + .main{ + margin-top: (@line * 4px); } @@ -298,43 +406,43 @@ code{ header .wrapper{ - width: 75%; float: right; + width: 75%; } .meta, .pages{ - width: 25%; float: left; text-align: right; - } - - .pages{ - padding-top: 28px + (@line * 1px); // Twitter button size + [role="contentinfo"] margin-top. If you don't use the Twitter button, delete this line + width: 25%; } .meta{ background: @white; + margin-top: 0; padding-top: 24px + (@line * 1.5px); // h1 font-size + margin-bottom time{ margin-bottom: (@line * 1px); + margin-left: 0; + font-weight: 400; } } .post, .copy, .main{ - width: 75%; float: right; + width: 75%; } - .tags li{ - display: block; + .tag li{ + float: none; + width: 100%; } - .tags a:hover, .nav a:hover{ + .nav a:hover{ padding-right: (@line / 4px); // If prefer your links to remain still, delete this nonsense } - .tags a:hover:after, .nav a:hover:after, .more:hover:after{ + .nav a:hover:after{ content: "\2192 "; } @@ -344,9 +452,10 @@ code{ } .archive time{ + .border-box; display: block; - width: 100/4%; // target 1 columns, context 4 columns float: left; + width: 100/4%; // target 1 columns, context 4 columns } } @@ -354,14 +463,14 @@ code{ // @media screen and (min-width: 888px) @media screen and (min-width: 55.5em) { - .post p, .post blockquote, .post ul, .post ol{ + .post > p, .post blockquote, .post ul, .post ol{ width: 400/6%; // target 4 columns, context 6 columns } .main{ - width: 50%; float: none; margin-left: 25%; + width: 50%; } } @@ -430,8 +539,8 @@ code{ } .meta, .pages{ - width: 18.75%; padding-left: 6.25%; + width: 18.75%; } .meta{ @@ -453,19 +562,17 @@ code{ margin-bottom: (@line * 1px); } - code{ - .massive; + code, .codehilite{ line-height: 1.5; + .massive; } - .post p, .post blockquote, .post ul, .post ol{ + .post > p, .post blockquote, .post ul, .post ol{ width: 600/10%; // target 4 columns, context 6 columns } } - - // @media screen and (min-width: 2080px) @media screen and (min-width: 130em) { @@ -477,4 +584,6 @@ code{ @media print{ @import "print.less"; -} \ No newline at end of file +} + +@import "codehilite.less"; \ No newline at end of file diff --git a/Just-Read/less/mixins.less b/Just-Read/less/mixins.less index 356e9a3..9d5658d 100644 --- a/Just-Read/less/mixins.less +++ b/Just-Read/less/mixins.less @@ -46,8 +46,33 @@ } .border-box{ --webkit-box-sizing: border-box; --moz-box-sizing: border-box; --o-box-sizing: border-box; -box-sizing: border-box; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -o-box-sizing: border-box; + box-sizing: border-box; +} + + +// Typography mixins - Make the text bigger if you dare + +// If you modify the fonts, delete/modify the line 12 in base.html + +.sans, .fancy-font{ + font-family: 'Droid Sans', sans-serif; +} +.mono{ + font-family: 'Droid Sans Mono', monospace; +} + +.small {font-size: 12px;} +.normal {font-size: 14px;} +.large {font-size: 18px;} +.huge {font-size: 24px;} +.massive {font-size: 36px;} +.gigantic {font-size: 48px;} + +.title{ + line-height: 1; + .fancy-font; + font-weight: 700; } \ No newline at end of file diff --git a/Just-Read/less/var.less b/Just-Read/less/var.less index 21fce38..6d53ed7 100644 --- a/Just-Read/less/var.less +++ b/Just-Read/less/var.less @@ -2,16 +2,5 @@ @black: #000; @white: #fff; -@color: #556270; // The color of the header and footer. If you modify this color, edit the images in the PSD folder and export them to static/images -@link: #4ECDC4; // The color of links, blockquote line and bullets. If you modify this color, edit static/images/bullet.png - - -// Typography -// If you modify the fonts, delete/modify the line 12 in base.html - -.sans, .fancy-font{ - font-family: 'Droid Sans', sans-serif; -} -.mono{ - font-family: 'Droid Sans Mono', monospace; -} \ No newline at end of file +@color: #556270; // The color of the header. +@link: #1d73bb; // The color of links, blockquote line and bullets. If you modify this color, edit static/images/bullet.png \ No newline at end of file diff --git a/Just-Read/pelican.conf.py-sample.py b/Just-Read/pelican.conf.py-sample.py index e92e4e8..93689d3 100644 --- a/Just-Read/pelican.conf.py-sample.py +++ b/Just-Read/pelican.conf.py-sample.py @@ -1,10 +1,27 @@ AUTHOR = 'Name Lastname' -SITENAME = 'The name of your website' +SITENAME = "The name of your website" SITEURL = 'http://example.com' +TIMEZONE = "" DISQUS_SITENAME = '' +DEFAULT_DATE_FORMAT = '%d/%m/%Y' +REVERSE_ARCHIVE_ORDER = True +TAG_CLOUD_STEPS = 8 + +PATH = '' +THEME = '' +OUTPUT_PATH = '' + +MARKUP = 'md' +MD_EXTENSIONS = 'extra' + +FEED_RSS = 'feeds/all.rss.xml' +TAG_FEED_RSS = 'feeds/%s.rss.xml' GOOGLE_ANALYTICS = 'UA-XXXXX-X' -HTML_LANG = 'en' -TWITTER_USERNAME = 'yourtwitterhandle no @ please' \ No newline at end of file +HTML_LANG = 'es' +TWITTER_USERNAME = '' + +SOCIAL = (('GitHub', 'http://github.com/yourusername'), + ('Twitter', 'http://twitter.com/yourusername'),) \ No newline at end of file diff --git a/Just-Read/psd/bullet.pxm b/Just-Read/psd/bullet.pxm index 68b68b0..ab97851 100644 Binary files a/Just-Read/psd/bullet.pxm and b/Just-Read/psd/bullet.pxm differ diff --git a/Just-Read/screenshot.png b/Just-Read/screenshot.png index 6659f99..37308d3 100644 Binary files a/Just-Read/screenshot.png and b/Just-Read/screenshot.png differ diff --git a/Just-Read/static/css/main.css b/Just-Read/static/css/main.css index f5d4c6a..3537b3b 100644 --- a/Just-Read/static/css/main.css +++ b/Just-Read/static/css/main.css @@ -1,11 +1,8 @@ article, -aside, -details, figcaption, figure, footer, header, -hgroup, nav, section, time { @@ -13,9 +10,8 @@ time { } html { font-size: 100%; - overflow-y: scroll; - -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; } body { margin: 0; @@ -33,7 +29,12 @@ body { a:hover, a:active { outline: 0; } -ul, ol { +pre { + white-space: pre; + white-space: pre-wrap; + word-wrap: break-word; +} +ol, ul { margin: 0; padding: 0; } @@ -52,47 +53,48 @@ img { .clearfix { *zoom: 1; } -.border-box { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - -o-box-sizing: border-box; - box-sizing: border-box; -} -.sans, .fancy-font { - font-family: 'Droid Sans', sans-serif; -} -.mono { - font-family: 'Droid Sans Mono', monospace; -} figure { - position: relative; margin: 0 0 24px 0; + position: relative; } figure img, figure object, figure embed, figure video { - max-width: 100%; display: block; + height: auto; + max-width: 100%; } figcaption { - margin-top: 24px; color: #999999; + margin-top: 24px; } .video-container { - position: relative; + height: 0; + margin-bottom: 24px; padding-bottom: 56.25%; padding-top: 30px; - height: 0; + position: relative; overflow: hidden; - margin-bottom: 24px; } .video-container iframe, .video-container object, .video-container embed { + height: 100%; + left: 0; position: absolute; top: 0; - left: 0; width: 100%; - height: 100%; +} +.border-box { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -o-box-sizing: border-box; + box-sizing: border-box; +} +.sans, .fancy-font { + font-family: 'Droid Sans', sans-serif; +} +.mono { + font-family: 'Droid Sans Mono', monospace; } .small { font-size: 12px; @@ -112,95 +114,259 @@ figcaption { .gigantic { font-size: 48px; } +.title { + line-height: 1; + font-family: 'Droid Sans', sans-serif; + font-weight: 700; +} body { - font-size: 14px; - line-height: 24px; background: #ffffff; color: #404040; + line-height: 24px; + font-size: 14px; font-family: 'Droid Sans', sans-serif; } -.title { - line-height: 1; - font-family: 'Droid Sans', sans-serif; - font-weight: 700; +a { + color: #1d73bb; + text-decoration: none; +} +a:hover { + color: #02060a; + text-decoration: underline; } h1 { + font-size: 24px; + margin: 0 0 36px 0; line-height: 1; font-family: 'Droid Sans', sans-serif; font-weight: 700; - font-size: 24px; - margin: 0 0 36px 0; } h2 { + font-size: 18px; + margin: 48px 0 24px; line-height: 1; font-family: 'Droid Sans', sans-serif; font-weight: 700; - font-size: 18px; - margin: 48px 0 24px; } h3 { + color: #999999; + margin: 36px 0 24px; + font-size: 14px; + text-transform: uppercase; line-height: 1; font-family: 'Droid Sans', sans-serif; font-weight: 700; - font-size: 14px; - margin: 36px 0 24px; - text-transform: uppercase; - color: #999999; } h4, h5, h6 { + font-weight: 400; + margin: 24px 0; + font-size: 14px; line-height: 1; font-family: 'Droid Sans', sans-serif; font-weight: 700; - font-size: 14px; - margin: 24px 0; - font-weight: 400; } b, strong { font-weight: 700; } -.tagcloud li { - list-style: none; - margin-bottom: 3px; +blockquote { + border-left: 6px solid #1d73bb; + margin-left: -12px; + padding-left: 6px; } -.tagcloud a { - color: #000000; +code, .codehilite { + background: #262626; + -webkit-box-shadow: inset 0 0 10px #000000; + -moz-box-shadow: inset 0 0 10px #000000; + box-shadow: inset 0 0 10px #000000; + color: #ffffff; display: block; - background-color: #ffffff; - padding: 3px 6px; - font-size: 12px; + margin-left: -24px; + font-family: 'Droid Sans Mono', monospace; + padding: 24px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; +} +time { + font-size: 12px; + text-transform: uppercase; +} +.post ul li { + list-style-image: url('../images/bullet.png'); +} +.archive li { + list-style: none; +} +.archive a { + border-bottom: 1px dotted #cccccc; + display: block; + padding: 12px 0; + -webkit-transition: all 0.25s linear; + -moz-transition: all 0.25s linear; + -o-transition: all 0.25s linear; + transition: all 0.25s linear; +} +.archive a:hover { + background-color: #f2f2f2; + text-decoration: none; +} +.archive time { + color: #666666; + display: inline; + padding-left: 12px; +} +.tabmenu li { + list-style-type: none; +} +.tabmenu li a { + border: 1px solid #1d73bb; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; + display: block; + float: left; + padding: 12px 0; + text-align: center; + width: 50%; } -.tagcloud a:hover { +.tabmenu li a:hover { text-decoration: none; - background-color: #c5efec; } -.wrapper { - padding: 0 0.75em; +.tabmenu li:last-child a { + border-left: none; +} +.ui-tabs-hide { + display: none; +} +.tabmenu li a:hover, .ui-tabs-selected a, .ui-tabs-selected a { + background-color: #f2f2f2; +} +.btn { + color: #ffffff; + background-color: #556270; + border: none; + -webkit-box-shadow: inset 0px -3px 1px rgba(0, 0, 0, 0.45), 0px 2px 2px rgba(0, 0, 0, 0.25); + -moz-box-shadow: inset 0px -3px 1px rgba(0, 0, 0, 0.45), 0px 2px 2px rgba(0, 0, 0, 0.25); + box-shadow: inset 0px -3px 1px rgba(0, 0, 0, 0.45), 0px 2px 2px rgba(0, 0, 0, 0.25); + padding: 8px 14px 10px; + position: relative; + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; + -moz-background-clip: padding; + -webkit-background-clip: padding-box; + background-clip: padding-box; + text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5); + -webkit-user-select: none; +} +.btn:hover { + color: #ffffff; + text-decoration: none; +} +.btn:active { + -webkit-box-shadow: inset 0px -3px 1px #ffffff, inset 0 0px 3px rgba(0, 0, 0, 0.9); + -moz-box-shadow: inset 0px -3px 1px #ffffff, inset 0 0px 3px rgba(0, 0, 0, 0.9); + box-shadow: inset 0px -3px 1px #ffffff, inset 0 0px 3px rgba(0, 0, 0, 0.9); + position: relative; + top: 3px; +} +.btn:active:after { + content: ""; + background: #ffffff; + bottom: -1px; + height: 3px; + left: 0; + position: absolute; + width: 100%; +} +.tag li { + list-style: none; + margin-bottom: 3px; +} +.tag a { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; + -moz-border-radius-bottomright: 4px; + -webkit-border-bottom-right-radius: 4px; + border-bottom-right-radius: 4px; + -moz-border-radius-topright: 4px; + -webkit-border-top-right-radius: 4px; + border-top-right-radius: 4px; + color: #000000; + background-color: #ddedfa; + display: block; + margin-left: 20px; + padding: 0 10px 0 12px; + position: relative; + font-size: 12px; } -a { - color: #4ecdc4; +.tag a:hover { + background-color: #85bdec; text-decoration: none; - -webkit-transition: all 0.25s linear; - -moz-transition: all 0.25s linear; - -o-transition: all 0.25s linear; - transition: all 0.25s linear; } -a:hover { - color: #113e3a; - text-decoration: underline; +.tag a:before { + content: ""; + border-color: transparent #ddedfa transparent transparent; + border-style: solid; + border-width: 12px 12px 12px 0; + float: left; + height: 0; + left: -12px; + position: absolute; + top: 0; + width: 0; +} +.tag a:after { + content: ""; + background: #ffffff; + -webkit-box-shadow: -1px -1px 2px #000000; + -moz-box-shadow: -1px -1px 2px #000000; + box-shadow: -1px -1px 2px #000000; + float: left; + height: 4px; + left: 0; + position: absolute; + -webkit-border-radius: 2px; + -moz-border-radius: 2px; + border-radius: 2px; + -moz-background-clip: padding; + -webkit-background-clip: padding-box; + background-clip: padding-box; + top: 10px; + width: 4px; +} +.tag a:hover:before { + border-color: transparent #85bdec transparent transparent; +} +.tag-1 a { + width: 100%; +} +.tag-2 a { + width: 90%; +} +.tag-3 a { + width: 80%; +} +.tag-4 a { + width: 70%; +} +.tag-5 a { + width: 60%; +} +.tag-6 a { + width: 50%; +} +.tag-7 a { + width: 40%; +} +.tag-8 a { + width: 30%; } header { border-width: 0 0 2px; @@ -218,15 +384,15 @@ header { background-image: -o-linear-gradient(top, #556270, #48535f); background-image: linear-gradient(top, #556270, #48535f); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#556270', endColorstr='#48535f', GradientType=0); - padding: 48px 5.555555555555555%; margin-bottom: 48px; + padding: 24px 5.555555555555555%; } header h1 { margin: 0; } header a { - text-decoration: none; color: rgba(255, 255, 255, 0.8); + text-decoration: none; text-shadow: 0 1px 0 #b3b3b3, 0 2px 0 #999999, 0 3px 0 #808080, 0 4px 0 #666666, 0 5px 0 #4d4d4d, 0 6px 0 #333333, 0px 7px 0 #1a1a1a, 0 8px 7px #0d0d0d; } header a:hover { @@ -239,11 +405,11 @@ footer { -webkit-border-image: url('../images/pages.png') 20 0 0 repeat; -o-border-image: url('../images/pages.png') 20 0 0 repeat; border-image: url('../images/pages.png') 20 0 0 repeat; - padding: 48px 5.555555555555555% 24px; - margin-top: 96px; color: rgba(0, 0, 0, 0.6); + margin-top: 96px; + padding: 48px 5.555555555555555% 24px; } -.pages { +.nav { margin-bottom: 24px; } .nav li { @@ -251,17 +417,112 @@ footer { display: inline; padding-right: 10px; } +.nav a { + -webkit-transition: all 0.25s linear; + -moz-transition: all 0.25s linear; + -o-transition: all 0.25s linear; + transition: all 0.25s linear; +} p[role="contentinfo"] { - margin-top: 12px; font-size: 12px; } +.social { + margin-bottom: 24px; +} +.social li { + list-style: none; + display: inline; + padding-right: 12px; +} +.icon { + margin-right: 2px; + vertical-align: -3px; +} +.social a[href*='behance.net']:before { + content: url('../images/icons/behance.png'); + margin-right: 2px; + vertical-align: -3px; +} +.social a[href*='delicious.com']:before { + content: url('../images/icons/delicious.png'); + margin-right: 2px; + vertical-align: -3px; +} +.social a[href*='facebook.com']:before { + content: url('../images/icons/facebook.png'); + margin-right: 2px; + vertical-align: -3px; +} +.social a[href*='flickr.com']:before { + content: url('../images/icons/flickr.png'); + margin-right: 2px; + vertical-align: -3px; +} +.social a[href*='forrst.com']:before { + content: url('../images/icons/forrst.png'); + margin-right: 2px; + vertical-align: -3px; +} +.social a[href*='github.com']:before { + content: url('../images/icons/github.png'); + margin-right: 2px; + vertical-align: -3px; +} +.social a[href*='plus.google.com']:before { + content: url('../images/icons/google_plus.png'); + margin-right: 2px; + vertical-align: -3px; +} +.social a[href*='last.fm']:before { + content: url('../images/icons/lastfm.png'); + margin-right: 2px; + vertical-align: -3px; +} +.social a[href*='linkedin.com']:before { + content: url('../images/icons/linkedin.png'); + margin-right: 2px; + vertical-align: -3px; +} +.social a[href*='quora.com']:before { + content: url('../images/icons/quora.png'); + margin-right: 2px; + vertical-align: -3px; +} +.social a[href*='rss.xml']:before { + content: url('../images/icons/rss.png'); + margin-right: 2px; + vertical-align: -3px; +} +.social a[href*='stackoverflow.com']:before { + content: url('../images/icons/stackoverflow.png'); + margin-right: 2px; + vertical-align: -3px; +} +.social a[href*='twitter.com']:before { + content: url('../images/icons/twitter.png'); + margin-right: 2px; + vertical-align: -3px; +} +.social a[href*='youtube.com']:before { + content: url('../images/icons/youtube.png'); + margin-right: 2px; + vertical-align: -3px; +} +.wrapper { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -o-box-sizing: border-box; + box-sizing: border-box; + padding: 0 0.75em; +} .content { margin: 0 5.555555555555555%; } .meta { - background: #f2f2f2; - padding-top: 24px; + background: #fafafa; + margin-top: 48px; padding-bottom: 24px; + padding-top: 24px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; @@ -269,107 +530,60 @@ p[role="contentinfo"] { -webkit-background-clip: padding-box; background-clip: padding-box; } -time { - font-size: 12px; - text-transform: uppercase; +.meta time { + font-weight: 700; + margin-left: 20px; + margin-bottom: 24px; } -.tags li { - display: inline; - list-style: none; +.tag li { + display: block; + float: left; + width: 50%; } blockquote, code, +.codehilite, .post ul, .post ol, -p { +p, +.archive { margin: 0 0 24px 0; } -blockquote { - margin-left: -12px; - border-left: 6px solid #4ecdc4; - padding-left: 6px; -} -code { - display: block; - background: #262626; - -webkit-box-shadow: inset 0 0 10px #000000; - -moz-box-shadow: inset 0 0 10px #000000; - box-shadow: inset 0 0 10px #000000; - padding: 24px; - color: #ffffff; - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - border-radius: 4px; - -moz-background-clip: padding; - -webkit-background-clip: padding-box; - background-clip: padding-box; - font-family: 'Droid Sans Mono', monospace; - margin-left: -24px; -} -.post ul li { - list-style-image: url('../images/bullet.png'); -} .main + .main { margin-top: 96px; } -.archive li { - list-style: none; -} -.archive a { - display: block; - padding: 12px 0; - border-bottom: 1px dotted #cccccc; -} -.archive a:hover { - text-decoration: none; -} -.archive time { - display: inline; - color: #666666; -} -.tag-1 a { - width: 100%; -} -.tag-2 a { - width: 75%; -} -.tag-3 a { - width: 50%; -} -.tag-4 a { - width: 25%; -} @media screen and (min-width: 45em) { header .wrapper { - width: 75%; float: right; + width: 75%; } .meta, .pages { - width: 25%; float: left; text-align: right; - } - .pages { - padding-top: 52px; + width: 25%; } .meta { background: #ffffff; + margin-top: 0; padding-top: 60px; } .meta time { margin-bottom: 24px; + margin-left: 0; + font-weight: 400; } .post, .copy, .main { - width: 75%; float: right; + width: 75%; } - .tags li { - display: block; + .tag li { + float: none; + width: 100%; } - .tags a:hover, .nav a:hover { + .nav a:hover { padding-right: 6px; } - .tags a:hover:after, .nav a:hover:after, .more:hover:after { + .nav a:hover:after { content: "\2192 "; } .nav li { @@ -377,22 +591,26 @@ code { padding-right: 0; } .archive time { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -o-box-sizing: border-box; + box-sizing: border-box; display: block; - width: 25%; float: left; + width: 25%; } } @media screen and (min-width: 55.5em) { - .post p, + .post > p, .post blockquote, .post ul, .post ol { width: 66.66666666666667%; } .main { - width: 50%; float: none; margin-left: 25%; + width: 50%; } } @media screen and (min-width: 61.5em) { @@ -435,8 +653,8 @@ code { margin-top: 48px; } .meta, .pages { - width: 18.75%; padding-left: 6.25%; + width: 18.75%; } .meta { padding-top: 96px; @@ -453,11 +671,11 @@ code { .post li { margin-bottom: 24px; } - code { - font-size: 36px; + code, .codehilite { line-height: 1.5; + font-size: 36px; } - .post p, + .post > p, .post blockquote, .post ul, .post ol { @@ -528,4 +746,230 @@ code { thead { display: table-header-group; } -} \ No newline at end of file +} +.c { + color: #757575; +} +/* Comment */ +.err { + color: #fa4753; +} +/* Error */ +.k { + color: #6bc5d9; +} +/* Keyword */ +.l { + color: #514986; +} +/* Literal */ +.n { + color: #f8f8f2; +} +/* Name */ +.o { + color: #f92672; +} +/* Operator */ +.p { + color: #f8f8f2; +} +/* Punctuation */ +.cm { + color: #757575; +} +/* Comment.Multiline */ +.cp { + color: #757575; +} +/* Comment.Preproc */ +.c1 { + color: #757575; +} +/* Comment.Single */ +.cs { + color: #757575; +} +/* Comment.Special */ +/* Generic.Emph */ +/* Generic.Strong */ +.kc { + color: #6bc5d9; +} +/* Keyword.Constant */ +.kd { + color: #6bc5d9; +} +/* Keyword.Declaration */ +.kn { + color: #f92672; +} +/* Keyword.Namespace */ +.kp { + color: #6bc5d9; +} +/* Keyword.Pseudo */ +.kr { + color: #6bc5d9; +} +/* Keyword.Reserved */ +.kt { + color: #6bc5d9; +} +/* Keyword.Type */ +.ld { + color: #f4e07c; +} +/* Literal.Date */ +.m { + color: #514986; +} +/* Literal.Number */ +.s { + color: #f4e07c; +} +/* Literal.String */ +.na { + color: #9cc52c; +} +/* Name.Attribute */ +.nb { + color: #f8f8f2; +} +/* Name.Builtin */ +.nc { + color: #9cc52c; +} +/* Name.Class */ +.no { + color: #6bc5d9; +} +/* Name.Constant */ +.nd { + color: #9cc52c; +} +/* Name.Decorator */ +.ni { + color: #f8f8f2; +} +/* Name.Entity */ +.ne { + color: #9cc52c; +} +/* Name.Exception */ +.nf { + color: #9cc52c; +} +/* Name.Function */ +.nl { + color: #f8f8f2; +} +/* Name.Label */ +.nn { + color: #f8f8f2; +} +/* Name.Namespace */ +.nx { + color: #9cc52c; +} +/* Name.Other */ +.py { + color: #f8f8f2; +} +/* Name.Property */ +.nt { + color: #f92672; +} +/* Name.Tag */ +.nv { + color: #f8f8f2; +} +/* Name.Variable */ +.ow { + color: #f92672; +} +/* Operator.Word */ +.w { + color: #f8f8f2; +} +/* Text.Whitespace */ +.mf { + color: #514986; +} +/* Literal.Number.Float */ +.mh { + color: #514986; +} +/* Literal.Number.Hex */ +.mi { + color: #514986; +} +/* Literal.Number.Integer */ +.mo { + color: #514986; +} +/* Literal.Number.Oct */ +.sb { + color: #f4e07c; +} +/* Literal.String.Backtick */ +.sc { + color: #f4e07c; +} +/* Literal.String.Char */ +.sd { + color: #f4e07c; +} +/* Literal.String.Doc */ +.s2 { + color: #f4e07c; +} +/* Literal.String.Double */ +.se { + color: #514986; +} +/* Literal.String.Escape */ +.sh { + color: #f4e07c; +} +/* Literal.String.Heredoc */ +.si { + color: #f4e07c; +} +/* Literal.String.Interpol */ +.sx { + color: #f4e07c; +} +/* Literal.String.Other */ +.sr { + color: #f4e07c; +} +/* Literal.String.Regex */ +.s1 { + color: #f4e07c; +} +/* Literal.String.Single */ +.ss { + color: #f4e07c; +} +/* Literal.String.Symbol */ +.bp { + color: #f8f8f2; +} +/* Name.Builtin.Pseudo */ +.vc { + color: #f8f8f2; +} +/* Name.Variable.Class */ +.vg { + color: #f8f8f2; +} +/* Name.Variable.Global */ +.vi { + color: #f8f8f2; +} +/* Name.Variable.Instance */ +.il { + color: #514986; +} +/* Literal.Number.Integer.Long */ \ No newline at end of file diff --git a/Just-Read/static/images/bullet.png b/Just-Read/static/images/bullet.png index b821648..96210f1 100644 Binary files a/Just-Read/static/images/bullet.png and b/Just-Read/static/images/bullet.png differ diff --git a/Just-Read/templates/archives.html b/Just-Read/templates/archives.html index 91c1c54..72fd2a5 100644 --- a/Just-Read/templates/archives.html +++ b/Just-Read/templates/archives.html @@ -1,18 +1,46 @@ {% extends "base.html" %} -{% block title %}{{ SITENAME }}{% endblock %} +{% block title %}Archivo - {{ SITENAME }}{% endblock %} + +{% block scripts %} + + +{% endblock %} + + {% block content %}
      -
      - {% for year, date_year in dates|groupby( 'date.year' ) %} - -

      {{ year }}

      -
        - {% for article in date_year %} -
      1. {{ article.title }}
        2. - {% endfor %} -
      +
      + +
      + {% for year, date_year in dates|groupby( 'date.year' )|sort(reverse=True) %} +

      {{ year }}

      +
        + {% for article in date_year %} +
      1. {{ article.title }}
        2. + {% endfor %} +
      {% endfor %} +
      + +
      +

      Tags

      +
        + {% for tag in tag_cloud|sort %} +
      • {{ tag.0 }}
        • + {% endfor %} +
      +
      +
      + + {% endblock %} \ No newline at end of file diff --git a/Just-Read/templates/article.html b/Just-Read/templates/article.html index a5bf08f..58df95f 100644 --- a/Just-Read/templates/article.html +++ b/Just-Read/templates/article.html @@ -6,6 +6,9 @@

      {{ article.title }}

      {{ article.content }} + + + {% if DISQUS_SITENAME %}
      diff --git a/Just-Read/templates/base.html b/Just-Read/templates/base.html index 65f549c..96511ad 100644 --- a/Just-Read/templates/base.html +++ b/Just-Read/templates/base.html @@ -16,6 +16,9 @@ + {% block scripts %} + {% endblock %} + {% if FEED_RSS %} @@ -33,28 +36,27 @@ {% endblock %} -
      -
      -
        - {% for p in PAGES %} -
      • {{ p.title }}
        • +
        +
        + +
        + +
        + -
        - -
        - - - -

        © 2012 {{ AUTHOR }}
        - Proudly powered by Pelican, which takes great advantages of Python.

        -
        -
        +
      + +

      © 2012 {{ AUTHOR }}
      + Proudly powered by Pelican.

      +
      +