fz0x1/jrnl
1
0
Fork 0
mirror of https://github.com/jrnl-org/jrnl.git synced 2025-06-28 21:46:13 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Updated docs from master

Browse source
This commit is contained in:
Manuel Ebert 2014-01-26 12:00:19 +01:00
parent 8d5a021eb3
commit e814dd48a8
54 changed files with 9983 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

1369
_static/less/3L.less Normal file
View file

File diff suppressed because it is too large Load diff

287
_static/less/docs.less Normal file
View file

@ -0,0 +1,287 @@
body
{
font-family: "Open Sans", "Helvetica Neue", sans-serif;
font-weight: 300;
color: #333;
background: @white;
}
body:not(.landing)
{
padding:0px 20px;
padding-top: 40px;
h2
{
margin-top: 40px;
}
}
input
{
background: transparent;
border: 1px solid #999;
.border-radius(3px);
padding: 2px 5px;
color: #666;
font-family: "Open Sans";
font-weight: 300;
outline: none;
&:focus
{
background: white;
}
}
div.related
{
background: rgba(255,200,200,.2);
}
* > a.headerlink
{
display: none;
}
h1, h2, h3, h4, h5, h6
{
font-weight: 300;
}
a:link, a:visited
{
color: @orange;
text-decoration: none;
}
a:hover, a:active
{
text-decoration: underline;
color: lighten(@orange, 10);
}
.literal
{
color: @purple;
font-size: 1em;
background: lighten(@purple-light, 45);
padding: 1px 2px;
.border-radius(2px);
.box-shadow(inset 0px 0px 0px 1px lighten(@purple-light, 30));
}
.note
{
.gradient(lighten(@purple-light, 10), lighten(@purple-light-shade, 10));
.border-radius(5px);
.box-shadow(0px 2px 3px @purple-shade);
padding: 10px 20px 10px 70px;
position: relative;
color: white;
.admonition-title {display: none;}
a { color: lighten(@orange, 30);}
&:before
{
content: "";
display: block;
.icon;
.icon.info;
position: absolute;
margin: auto;
top: 0; bottom: 0; left: 20px;
}
.literal, .highlight-note
{
color: white;
background: darken(@purple-light, 3);
padding: 1px 3px;
.border-radius(2px);
.box-shadow(inset 0px 0px 0px 1px lighten(@purple-light, 10));
}
.highlight-note
{
padding: 1px 10px;
pre:before
{
content: "$ ";
color: @orange;
}
}
}
.highlight
{
background:transparent !important;
}
.highlight-output
{
.pre-block;
background: desaturate(lighten(@terminal,10), 10);
}
.highlight-javascript
{
.pre-block;
background: desaturate(lighten(@terminal,10), 10);
}
.highlight-python
{
.terminal;
pre
{
margin: 0 0 10px 0;
&:before
{
content: "$ ";
color: @orange;
}
}
}
*:hover > a.headerlink
{
display: inline;
color: lighten(@purple-light, 30);
margin-left: 10px;
text-decoration: none;
&:hover { color: @purple-light; }
}
tt
{
color: @purple;
font-size: 1.2em;
}
ul li {
margin-bottom: 10px;
}
div.document
{
max-width: 900px;
margin: 20px auto;
position: relative;
}
div.documentwrapper
{
margin-left: 240px;
padding: 0;
}
aside
{
position: absolute;
width: 220px;
top: 0px;
.logo
{
margin: 0 auto 20px auto;
display: block;
width: 90px;
height: 98px;
}
color: #999;
h2, h3, h3 a:link, h3 a:visited
{
color: #777;
}
a:link, a:visited
{
color: #999;
}
a:hover, a:active
{
color: @orange;
}
input[type=submit]
{
display: none;
}
&>ul
{
margin: 0 4px;
padding: 0;
list-style: none;
&>li
{
margin-bottom: 10px;
font-size: 18px;
color: #777;
a:link, a:visited {color: #777;}
ul
{
margin: 10px 0 0 0;
padding-left: 20px;
font-size: 16px;
color: #999;
a:link, a:visited {color: #999;}
}
}
}
}
div.footer
{
font-size: .8em;
text-align: center;
margin: 40px 0;
color: #999;
a:link, a:visited {color: #555;}
}
@media screen and (max-width: 820px)
{
body:not(.landing){
padding-top: 130px;
.highlight-output,.highlight-python, .highlight-javascript
{
width: auto;
max-width: 500px;
}
.highlight-python
{
pre { margin: -10px 0 10px 0;}
&:before
{
height: 24px !important;
line-height: 24px;
font-size: .7em;
}
&:after
{
background: none;
}
}
aside
{
position: static;
}
div.documentwrapper
{
margin: 0px;
}
h1, .section
{
margin: 0px !important;
}
aside
{
background-color: #f0f0f0;
width: 100%;
margin: 5px -20px;
padding: 5px 20px 10px 20px;
}
#logolink
{
position: absolute;
top: -120px;
left: 50%;
margin-left: -49px;
}
}
}
@media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx)
{
aside .logo, body#landing #upper #logo
{
width: 90px;
height: 98px;
content: url(../img/logo@2x.png);
}
}

317
_static/less/jrnl.less Normal file
View file

@ -0,0 +1,317 @@
@import "retina";
@import "3L";
@white: #f7f8f9;
@blue: #5e7dc5;
@blue-light: #7c95ca;
@terminal: #2f1e34;
@purple: #47375d;
@purple-shade: #413155;
@purple-light: #725794;
@purple-light-shade: #564371;
@orange: #deaa09;
.normalize();
@import "docs.less";
.icon,
{
.sprite("../img/icons.png", 32px, 5, 3, 8px);
&.secure {.sprite(0, 0)};
&.future {.sprite(1, 0)};
&.search {.sprite(2, 0)};
&.nli {.sprite(3, 0)};
&.share {.sprite(0, 1)};
&.sync {.sprite(0, 1)};
&.dayone {.sprite(1, 1)};
&.github {.sprite(2, 1)};
&.folders{.sprite(3, 1)};
&.cal {.sprite(4, 1)};
&.left {.sprite(0, 2)};
&.right {.sprite(1, 2)};
&.info {.sprite(2, 2)};
}
.pre-block
{
background: @terminal;
.border-radius(6px);
padding: 1px 20px;
margin: 40px auto;
width: 500px;
.box-shadow(0px 1px 8px darken(@white, 30));
position: relative;
color: @white;
font-family: "Monaco", "Courier New";
font-size: 12pt;
#args {color: #f6f7b9}
#output {color: #9278b5}
}
.terminal
{
.pre-block;
@p: 20px;
padding: @p + 30px @p (@p - 10px) @p;
&:before
{
content: "Terminal";
display: block;
width: 100%;
position: absolute;
left: 0;
.box-shadow(inset 0px 1px 0px #f4f4f4, inset 0px -1px 0px #888);
margin-top: -50px;
// margin: -@p -@p 0px -@p;
text-align: center;
height: 30px;
line-height: 30px;
color: #777;
text-shadow: 0px 1px 0px #ddd;
.border-radius(5px 5px 0px 0px);
.gradient(#eaeaea, #bababa);
}
&:after
{
content: "";
width: 48px;
height: 30px;
position: absolute;
top: 0px;
left: 10px;
background: url(../img/terminal.png) no-repeat center center;
}
}
body#landing
{
background-color: @purple;
font-family: "Open Sans", "Helvetica Neue", sans-serif;
font-weight: 300;
#twitter
{
display: block;
position: absolute;
top: 20px;
right: 20px;
border: 1px solid @purple;
padding: 5px 10px 5px 30px;
color: @purple;
.border-radius(3px);
.opacity(.7);
background: url(../img/twitter.png) 8px center no-repeat transparent;
&:hover, &:active
{
.opacity(1);
text-decoration: none;
}
}
#title, .row3, .row4, #prompt
{
width: 900px;
margin: 0px auto;
}
#upper
{
.clearfix;
background: @white;
.box-shadow(inset 0px -6px 6px -3px darken(@white, 10));
#title
{
width: 650px;
margin: 150px auto 75px auto;
}
img
{
float: left;
margin-right: 30px;
}
h1
{
color: @purple-light-shade;
font-weight: 300;
}
#prompt
{
width: 640px;
margin: 0 auto;
.clearfix;
}
.terminal
{
.border-radius(6px 6px 0px 0px);
float: left;
margin: 0px;
width: 500px;
min-height: 134px;
.border-box-sizing;
}
.pleft, .pright
{
text-align: center;
.border-box-sizing;
float: left;
padding-top: 50px;
width: 70px;
i {.opacity(60);}
i:hover {.opacity(1000); cursor: pointer;}
}
}
#nav
{
.gradient(@blue-light, @blue);
height: 60px;
.box-shadow(0px 6px 6px -3px @purple-shade);
text-align: center;
a#twitter-nav {display: none;}
a
{
color: @white;
text-shadow: 0px -1px 0px darken(@blue, 30);
text-decoration: none;
font-size: 14pt;
line-height: 60px;
margin: 0 40px;
&:hover
{
color: lighten(@orange, 20);
text-shadow: 0px -1px 0px darken(@orange, 15);
}
}
a.cta
{
.gradient(@purple-light, @purple-light-shade);
.box-shadow(0px 1px 0px @purple-shade);
.border-radius(5px);
padding: 6px 10px 5px 10px;
white-space: nowrap;
&:hover
{
.gradient(lighten(@orange, 10), darken(@orange, 5));
.box-shadow(0px 1px 0px darken(@orange, 15));
text-shadow: 0px -1px 0px darken(@orange, 15);
color: @white;
}
}
}
#lower
{
color: @white;
padding-top: 40px;
a
{
color: @orange;
text-decoration: none;
&:hover
{
color: lighten(@orange, 20);
text-decoration: underline;
}
}
.row3, .row4 {
.clearfix;
margin-bottom: 20px;
.col
{
position: relative;
padding-left: 40px;
i
{
position: absolute;
left: 0;
top: 16px;
}
h3 {font-size: 12pt; margin-bottom: .5em;}
p {font-size: 10pt; margin: 0;}
float: left;
width: 25%;
padding-right: 2%;
.border-box-sizing;
&:last-child {padding-right: 0;}
}
}
.row3 .col { width: 33.3333%; }
.row4 .col { color: mix(@white, @purple, 80); i {.opacity(80);}}
}
}
@media screen and (max-width: 680px)
{
body#landing
{
#nav
{
height: auto;
padding-bottom: 10px;
a, a#twitter-nav
{
display: block;
}
a.cta
{
margin: 10px;
padding: 1px;
}
}
#upper
{
#twitter { display: none;}
#title
{
margin: 30px 0 10px 0;
}
#logo
{
backgound: red;
display: block;
float: none;
margin: 0px auto;
}
#title br {display: none;}
.pleft, .pright {display: none;}
#prompt, #title
{
width: 100%;
.border-box-sizing;
padding: 0px 20px;
}
.terminal
{
width: 100%;
}
}
}
}
@media screen and (max-width: 900px)
{
body#landing
{
#lower
{
padding: 40px 20px;
.row3, .row4
{
margin: 0px;
width: auto;
}
.row3 .col, .row4 .col
{
float: none;
width: 100%;
text-align: center;
padding: 0px;
margin: 0 0 40px 0;
h3 {font-size: 1.5em;}
p {font-size: 1em;}
i
{
position: static;
margin-bottom: -20px;
}
}
}
}
}

35
_static/less/retina.less Normal file
View file

@ -0,0 +1,35 @@
// A helper mixin for applying high-resolution background images (http://www.retinajs.com)
@highdpi: ~"(-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx)";
.at2x(@path, @w: auto, @h: auto) {
background-image: url(@path);
@at2x_path: ~`@{path}.replace(/\.\w+$/, function(match) { return "@2x" + match; })`;
background-size: @w @h;
@media @highdpi {
background-image: url("@{at2x_path}");
}
}
// Sprite mixin, see https://coderwall.com/p/oztebw
.sprite (@path, @size, @w, @h, @pad: 0) when (isstring(@path))
{
background-image: url(@path);
width: @size;
height: @size;
display: inline-block;
@at2x_path: ~`@{path}.replace(/\.[\w\?=]+$/, function(match) { return "@2x" + match; })`;
font-size: @size + @pad;
background-size: (@size + @pad) * @w (@size + @pad) * @h;
@media @highdpi
{
background-image: url("@{at2x_path}");
}
}
.sprite(@x, @y)
{
background-position: -@x * 1em -@y * 1em;
}