aboutsummaryrefslogtreecommitdiffstats
path: root/Just-Read/less
diff options
context:
space:
mode:
Diffstat (limited to 'Just-Read/less')
-rw-r--r--Just-Read/less/base.less68
-rw-r--r--Just-Read/less/main.less445
-rw-r--r--Just-Read/less/mixins.less46
-rw-r--r--Just-Read/less/print.less76
-rw-r--r--Just-Read/less/var.less17
5 files changed, 652 insertions, 0 deletions
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
generated by cgit (git 2.34.1) at 2024-11-15 08:34:03 +0000