aboutsummaryrefslogtreecommitdiffstats
path: root/Just-Read/less
diff options
context:
space:
mode:
Diffstat (limited to 'Just-Read/less')
-rw-r--r--Just-Read/less/base.less115
-rw-r--r--Just-Read/less/codehilite.less70
-rw-r--r--Just-Read/less/main.less589
-rw-r--r--Just-Read/less/mixins.less78
-rw-r--r--Just-Read/less/print.less76
-rw-r--r--Just-Read/less/var.less6
6 files changed, 934 insertions, 0 deletions
diff --git a/Just-Read/less/base.less b/Just-Read/less/base.less
new file mode 100644
index 0000000..5997dcc
--- /dev/null
+++ b/Just-Read/less/base.less
@@ -0,0 +1,115 @@
+// Credits: [HTML Boilerplate[(https://github.com/h5bp/html5-boilerplate)
+
+
+// HTML5 display definitions
+
+article, figcaption, figure, footer, header, nav, section, time {
+ display: block;
+}
+
+// Base
+
+html {
+ font-size: 100%;
+ -ms-text-size-adjust: 100%;
+ -webkit-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;
+}
+
+// Code
+
+pre {
+ white-space: pre;
+ white-space: pre-wrap;
+ word-wrap: break-word;
+}
+
+// Lists
+
+ol, ul{
+ 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;
+}
+
+// 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
new file mode 100644
index 0000000..39e705c
--- /dev/null
+++ b/Just-Read/less/main.less
@@ -0,0 +1,589 @@
+@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
+
+@column: 100% / 18;
+@em: @font-size*1em;
+@font-size: 16;
+@line: 24;
+
+// Mobile first
+
+body {
+ background: @white;
+ color: lighten(@black, 25%);
+ line-height: @line * 1px;
+ .normal;
+ .sans;
+}
+
+a{
+ color: @link;
+ text-decoration: none;
+
+ &:hover{
+ color: darken(@link, 40%);
+ text-decoration:underline;
+ }
+}
+
+h1{
+ .huge;
+ margin: 0 0 (@line * 1.5px) 0;
+ .title;
+}
+
+h2{
+ .large;
+ margin: (@line * 2px) 0 (@line * 1px);
+ .title;
+}
+
+h3{
+ color: lighten(@black, 60%);
+ margin: (@line * 1.5px) 0 (@line * 1px);
+ .normal;
+ text-transform: uppercase;
+ .title;
+}
+
+h4, h5, h6{
+ 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();
+}
+
+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;
+}
+
+.archive a{
+ border-bottom: 1px dotted lighten(@black, 80%);
+ display: block;
+ 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{
+ 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%;
+ }
+
+}
+
+// CSS tags
+
+.tag li{
+ list-style: none;
+ margin-bottom: @line / 8px;
+}
+
+.tag a{
+ .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: @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%));
+ margin-bottom: (@line * 2px);
+ padding: (@line * 1px) @column;
+
+ h1{
+ margin: 0;
+ }
+
+ a{
+ color: fade(@white, 80%);
+ 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%),
+ 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
+
+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
+ color: fade(@black, 60%);
+ margin-top: (@line * 4px);
+ padding: (@line * 2px) @column (@line * 1px);
+}
+
+.nav{
+ margin-bottom: (@line * 1px);
+
+ li{
+ list-style: none;
+ display: inline;
+ padding-right: 10px;
+ }
+
+ a{
+ .transition();
+ }
+}
+
+p[role="contentinfo"]{
+ .small;
+}
+
+.social{
+ margin-bottom: @line * 1px;
+
+ li{
+ list-style: none;
+ display: inline;
+ padding-right: @line / 2px;
+ }
+}
+
+.icon{
+ margin-right: 2px;
+ vertical-align: -3px;
+}
+
+.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;}
+
+
+
+// Four-column grid active
+// ----------------------------------------
+// Margin | # 1 2 3 4 | Margin
+// 5.55555% | % 25 50 75 100 | 5.55555%
+
+.wrapper {
+ .border-box;
+ padding: 0 (@line/2)/@em;
+}
+
+.content{
+ margin:0 @column;
+}
+
+.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;
+ }
+}
+
+.tag li{
+ display: block;
+ float: left;
+ width: 50%;
+}
+
+blockquote, code, .codehilite, .post ul, .post ol, p, .archive{
+ margin: 0 0 (@line * 1px) 0;
+}
+
+.main + .main{
+ margin-top: (@line * 4px);
+}
+
+
+// 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{
+ float: right;
+ width: 75%;
+ }
+
+ .meta, .pages{
+ float: left;
+ text-align: right;
+ 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{
+ float: right;
+ width: 75%;
+ }
+
+ .tag li{
+ float: none;
+ width: 100%;
+ }
+
+ .nav a:hover{
+ padding-right: (@line / 4px); // If prefer your links to remain still, delete this nonsense
+ }
+
+ .nav a:hover:after{
+ content: "\2192 ";
+ }
+
+ .nav li{
+ display: block;
+ padding-right: 0;
+ }
+
+ .archive time{
+ .border-box;
+ display: block;
+ float: left;
+ width: 100/4%; // target 1 columns, context 4 columns
+ }
+}
+
+
+// @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{
+ float: none;
+ margin-left: 25%;
+ width: 50%;
+ }
+}
+
+
+// @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{
+ padding-left: 6.25%;
+ width: 18.75%;
+ }
+
+ .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, .codehilite{
+ line-height: 1.5;
+ .massive;
+ }
+
+ .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";
+}
+
+@import "codehilite.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..9d5658d
--- /dev/null
+++ b/Just-Read/less/mixins.less
@@ -0,0 +1,78 @@
+// 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;
+}
+
+.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/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..6d53ed7
--- /dev/null
+++ b/Just-Read/less/var.less
@@ -0,0 +1,6 @@
+// Color Variables
+
+@black: #000;
+@white: #fff;
+@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