aboutsummaryrefslogtreecommitdiffstats
path: root/Just-Read/less/main.less
diff options
context:
space:
mode:
Diffstat (limited to 'Just-Read/less/main.less')
-rw-r--r--Just-Read/less/main.less445
1 files changed, 445 insertions, 0 deletions
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
generated by cgit (git 2.34.1) at 2024-11-15 18:37:42 +0000