Merge pull request #3123 from jekyll/site-sass-improvements

This commit is contained in:
Parker Moore 2014-11-17 13:05:57 -08:00
commit 5185c8d72b
2 changed files with 562 additions and 578 deletions

View File

@ -1,72 +1,78 @@
/*.highlight { background: #333333; color: #ffffff}*/ .highlight {
.highlight .hll { background-color: #ffffcc } .hll { background-color: #ffffcc }
.highlight .c { color: #87ceeb} /* Comment */ .c { color: #87ceeb} /* Comment */
.highlight .err { color: #ffffff} /* Error */ .err { color: #ffffff} /* Error */
.highlight .g { color: #ffffff} /* Generic */ .g { color: #ffffff} /* Generic */
.highlight .k { color: #f0e68c} /* Keyword */ .k { color: #f0e68c} /* Keyword */
.highlight .l { color: #ffffff} /* Literal */ .l { color: #ffffff} /* Literal */
.highlight .n { color: #ffffff} /* Name */ .n { color: #ffffff} /* Name */
.highlight .o { color: #ffffff} /* Operator */ .o { color: #ffffff} /* Operator */
.highlight .x { color: #ffffff} /* Other */ .x { color: #ffffff} /* Other */
.highlight .p { color: #ffffff} /* Punctuation */ .p { color: #ffffff} /* Punctuation */
.highlight .cm { color: #87ceeb} /* Comment.Multiline */ .cm { color: #87ceeb} /* Comment.Multiline */
.highlight .cp { color: #cd5c5c} /* Comment.Preproc */ .cp { color: #cd5c5c} /* Comment.Preproc */
.highlight .c1 { color: #87ceeb} /* Comment.Single */ .c1 { color: #87ceeb} /* Comment.Single */
.highlight .cs { color: #87ceeb} /* Comment.Special */ .cs { color: #87ceeb} /* Comment.Special */
.highlight .gd { color: #0000c0; font-weight: bold; background-color: #008080 } /* Generic.Deleted */ .gd { color: #0000c0; font-weight: bold; background-color: #008080 } /* Generic.Deleted */
.highlight .ge { color: #c000c0; text-decoration: underline} /* Generic.Emph */ .ge { color: #c000c0; text-decoration: underline} /* Generic.Emph */
.highlight .gr { color: #c0c0c0; font-weight: bold; background-color: #c00000 } /* Generic.Error */ .gr { color: #c0c0c0; font-weight: bold; background-color: #c00000 } /* Generic.Error */
.highlight .gh { color: #cd5c5c} /* Generic.Heading */ .gh { color: #cd5c5c} /* Generic.Heading */
.highlight .gi { color: #ffffff; background-color: #0000c0 } /* Generic.Inserted */ .gi { color: #ffffff; background-color: #0000c0 } /* Generic.Inserted */
.highlight span.go { color: #add8e6; font-weight: bold; background-color: #4d4d4d } /* Generic.Output, qualified with span to prevent applying this style to the Go language, see #1153. */ span.go { color: #add8e6; font-weight: bold; background-color: #4d4d4d } /* Generic.Output, qualified with span to prevent applying this style to the Go language, see #1153. */
.highlight .gp { color: #ffffff} /* Generic.Prompt */ .gp { color: #ffffff} /* Generic.Prompt */
.highlight .gs { color: #ffffff} /* Generic.Strong */ .gs { color: #ffffff} /* Generic.Strong */
.highlight .gu { color: #cd5c5c} /* Generic.Subheading */ .gu { color: #cd5c5c} /* Generic.Subheading */
.highlight .gt { color: #c0c0c0; font-weight: bold; background-color: #c00000 } /* Generic.Traceback */ .gt { color: #c0c0c0; font-weight: bold; background-color: #c00000 } /* Generic.Traceback */
.highlight .kc { color: #f0e68c} /* Keyword.Constant */ .kc { color: #f0e68c} /* Keyword.Constant */
.highlight .kd { color: #f0e68c} /* Keyword.Declaration */ .kd { color: #f0e68c} /* Keyword.Declaration */
.highlight .kn { color: #f0e68c} /* Keyword.Namespace */ .kn { color: #f0e68c} /* Keyword.Namespace */
.highlight .kp { color: #f0e68c} /* Keyword.Pseudo */ .kp { color: #f0e68c} /* Keyword.Pseudo */
.highlight .kr { color: #f0e68c} /* Keyword.Reserved */ .kr { color: #f0e68c} /* Keyword.Reserved */
.highlight .kt { color: #bdb76b} /* Keyword.Type */ .kt { color: #bdb76b} /* Keyword.Type */
.highlight .ld { color: #ffffff} /* Literal.Date */ .ld { color: #ffffff} /* Literal.Date */
.highlight .m { color: #ffffff} /* Literal.Number */ .m { color: #ffffff} /* Literal.Number */
.highlight .s { color: #ffffff} /* Literal.String */ .s { color: #ffffff} /* Literal.String */
.highlight .na { color: #ffffff} /* Name.Attribute */ .na { color: #ffffff} /* Name.Attribute */
.highlight .nb { color: #ffffff} /* Name.Builtin */ .nb { color: #ffffff} /* Name.Builtin */
.highlight .nc { color: #ffffff} /* Name.Class */ .nc { color: #ffffff} /* Name.Class */
.highlight .no { color: #ffa0a0} /* Name.Constant */ .no { color: #ffa0a0} /* Name.Constant */
.highlight .nd { color: #ffffff} /* Name.Decorator */ .nd { color: #ffffff} /* Name.Decorator */
.highlight .ni { color: #ffdead} /* Name.Entity */ .ni { color: #ffdead} /* Name.Entity */
.highlight .ne { color: #ffffff} /* Name.Exception */ .ne { color: #ffffff} /* Name.Exception */
.highlight .nf { color: #ffffff} /* Name.Function */ .nf { color: #ffffff} /* Name.Function */
.highlight .nl { color: #ffffff} /* Name.Label */ .nl { color: #ffffff} /* Name.Label */
.highlight .nn { color: #ffffff} /* Name.Namespace */ .nn { color: #ffffff} /* Name.Namespace */
.highlight .nx { color: #ffffff} /* Name.Other */ .nx { color: #ffffff} /* Name.Other */
.highlight .py { color: #ffffff} /* Name.Property */ .py { color: #ffffff} /* Name.Property */
.highlight .nt { color: #f0e68c} /* Name.Tag */ .nt { color: #f0e68c} /* Name.Tag */
.highlight .nv { color: #98fb98} /* Name.Variable */ .nv { color: #98fb98} /* Name.Variable */
.highlight .ow { color: #ffffff} /* Operator.Word */ .ow { color: #ffffff} /* Operator.Word */
.highlight .w { color: #ffffff} /* Text.Whitespace */ .w { color: #ffffff} /* Text.Whitespace */
.highlight .mf { color: #ffffff} /* Literal.Number.Float */ .mf { color: #ffffff} /* Literal.Number.Float */
.highlight .mh { color: #ffffff} /* Literal.Number.Hex */ .mh { color: #ffffff} /* Literal.Number.Hex */
.highlight .mi { color: #ffffff} /* Literal.Number.Integer */ .mi { color: #ffffff} /* Literal.Number.Integer */
.highlight .mo { color: #ffffff} /* Literal.Number.Oct */ .mo { color: #ffffff} /* Literal.Number.Oct */
.highlight .sb { color: #ffffff} /* Literal.String.Backtick */ .sb { color: #ffffff} /* Literal.String.Backtick */
.highlight .sc { color: #ffffff} /* Literal.String.Char */ .sc { color: #ffffff} /* Literal.String.Char */
.highlight .sd { color: #ffffff} /* Literal.String.Doc */ .sd { color: #ffffff} /* Literal.String.Doc */
.highlight .s2 { color: #ffffff} /* Literal.String.Double */ .s2 { color: #ffffff} /* Literal.String.Double */
.highlight .se { color: #ffffff} /* Literal.String.Escape */ .se { color: #ffffff} /* Literal.String.Escape */
.highlight .sh { color: #ffffff} /* Literal.String.Heredoc */ .sh { color: #ffffff} /* Literal.String.Heredoc */
.highlight .si { color: #ffffff} /* Literal.String.Interpol */ .si { color: #ffffff} /* Literal.String.Interpol */
.highlight .sx { color: #ffffff} /* Literal.String.Other */ .sx { color: #ffffff} /* Literal.String.Other */
.highlight .sr { color: #ffffff} /* Literal.String.Regex */ .sr { color: #ffffff} /* Literal.String.Regex */
.highlight .s1 { color: #ffffff} /* Literal.String.Single */ .s1 { color: #ffffff} /* Literal.String.Single */
.highlight .ss { color: #ffffff} /* Literal.String.Symbol */ .ss { color: #ffffff} /* Literal.String.Symbol */
.highlight .bp { color: #ffffff} /* Name.Builtin.Pseudo */ .bp { color: #ffffff} /* Name.Builtin.Pseudo */
.highlight .vc { color: #98fb98} /* Name.Variable.Class */ .vc { color: #98fb98} /* Name.Variable.Class */
.highlight .vg { color: #98fb98} /* Name.Variable.Global */ .vg { color: #98fb98} /* Name.Variable.Global */
.highlight .vi { color: #98fb98} /* Name.Variable.Instance */ .vi { color: #98fb98} /* Name.Variable.Instance */
.highlight .il { color: #ffffff} /* Literal.Number.Integer.Long */ .il { color: #ffffff} /* Literal.Number.Integer.Long */
.bash .nv {
.highlight .bash .nv {-webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; } -webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
}

View File

@ -31,7 +31,9 @@ body {
/* Sections */ /* Sections */
header, section, footer { header,
section,
footer {
float: left; float: left;
width: 100%; width: 100%;
clear: both; clear: both;
@ -39,32 +41,33 @@ header, section, footer {
/* Header */ /* Header */
header h1, header nav { header {
display: inline-block;
h1,
nav { display: inline-block; }
h1 {
span { display: none; }
}
} }
header h1 span { nav {
display: none;
}
nav ul { ul {
padding: 0; padding: 0;
margin: 0; margin: 0;
} }
nav li { li { display: inline-block; }
display: inline-block;
} }
.main-nav { .main-nav {
margin-top: 52px; margin-top: 52px;
}
.main-nav li { li {
margin-right: 10px; margin-right: 10px;
}
.main-nav li a { a {
-webkit-border-radius: 5px; -webkit-border-radius: 5px;
-moz-border-radius: 5px; -moz-border-radius: 5px;
border-radius: 5px; border-radius: 5px;
@ -77,32 +80,39 @@ nav li {
-moz-transition: all .25s; -moz-transition: all .25s;
-o-transition: all .25s; -o-transition: all .25s;
transition: all .25s; transition: all .25s;
}
.main-nav li a:hover { &:hover {
background-color: #252525; background-color: #252525;
-webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.1); -webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.1);
-moz-box-shadow: inset 0 1px 3px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.1); -moz-box-shadow: inset 0 1px 3px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.1);
box-shadow: inset 0 1px 3px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.1); box-shadow: inset 0 1px 3px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.1);
text-shadow: 0 1px 3px rgba(0,0,0,.5); text-shadow: 0 1px 3px rgba(0,0,0,.5);
} }
}
.main-nav li.current a { &.current {
a {
background-color: #fc0; background-color: #fc0;
color: #222; color: #222;
-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 1px 5px rgba(0,0,0,.5); -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 1px 5px rgba(0,0,0,.5);
-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 1px 5px rgba(0,0,0,.5); -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 1px 5px rgba(0,0,0,.5);
box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 1px 5px rgba(0,0,0,.5); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 1px 5px rgba(0,0,0,.5);
text-shadow: 0 1px 0 rgba(255,255,255,.3); text-shadow: 0 1px 0 rgba(255,255,255,.3);
}
}
}
} }
.mobile-nav ul { .mobile-nav {
ul {
overflow: hidden; overflow: hidden;
width: 100%; width: 100%;
display: table; display: table;
} }
.mobile-nav a { a {
float: left; float: left;
width: 100%; width: 100%;
background-color: #333; background-color: #333;
@ -115,21 +125,25 @@ nav li {
-webkit-border-radius: 5px; -webkit-border-radius: 5px;
-moz-border-radius: 5px; -moz-border-radius: 5px;
border-radius: 5px; border-radius: 5px;
} }
.mobile-nav .current a { li {
display: table-cell;
width: 20%;
padding: 8px 2px;
}
.current {
a {
background-color: #fc0; background-color: #fc0;
color: #222; color: #222;
-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 1px 5px rgba(0,0,0,.5); -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 1px 5px rgba(0,0,0,.5);
-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 1px 5px rgba(0,0,0,.5); -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 1px 5px rgba(0,0,0,.5);
box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 1px 5px rgba(0,0,0,.5); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 1px 5px rgba(0,0,0,.5);
text-shadow: 0 1px 0 rgba(255,255,255,.3); text-shadow: 0 1px 0 rgba(255,255,255,.3);
} }
}
.mobile-nav li {
display: table-cell;
width: 20%;
padding: 8px 2px;
} }
@media (max-width: 768px) { @media (max-width: 768px) {
@ -138,11 +152,9 @@ nav li {
} }
} }
@media (max-width: 830px) { @media (max-width: 830px) {
.main-nav .show-on-mobiles { .main-nav {
display: inline; .show-on-mobiles { display: inline; }
} .hide-on-mobiles { display: none; }
.main-nav .hide-on-mobiles {
display: none;
} }
} }
@ -154,17 +166,23 @@ footer {
padding-bottom: 5px; padding-bottom: 5px;
color: #888; color: #888;
margin-top: 40px; margin-top: 40px;
}
footer a { a {
color: #fff; color: #fff;
}
footer .align-right p, footer img { &:hover {
img { opacity: 1; }
}
}
.align-right {
p { display: inline-block; }
}
img {
display: inline-block; display: inline-block;
}
footer img {
position: relative; position: relative;
top: 8px; top: 8px;
margin-left: 5px; margin-left: 5px;
@ -174,37 +192,31 @@ footer img {
-moz-transition: opacity .2s; -moz-transition: opacity .2s;
-o-transition: opacity .2s; -o-transition: opacity .2s;
transition: opacity .2s; transition: opacity .2s;
} }
footer a:hover img {
opacity: 1;
} }
@media (max-width: 568px) { @media (max-width: 568px) {
footer .one-third p { footer {
margin-bottom: 0; .one-third p { margin-bottom: 0; }
} .two-thirds p { margin-top: -20px; }
footer .two-thirds p {
margin-top: -20px;
} }
} }
/* Intro */ /* Intro */
.intro .unit { .intro {
padding: 10px 0 40px;
}
.intro p { .unit { padding: 10px 0 40px; }
p {
font-size: 1.75em; font-size: 1.75em;
line-height: 1em; line-height: 1em;
margin: 0; margin: 0;
}
} }
@media (min-width: 569px) { @media (min-width: 569px) {
.intro p { .intro p { font-size: 3.2em; }
font-size: 3.2em;
}
} }
/* Quickstart */ /* Quickstart */
@ -216,47 +228,50 @@ footer a:hover img {
-webkit-box-shadow: inset 0 3px 10px rgba(0,0,0,.4); -webkit-box-shadow: inset 0 3px 10px rgba(0,0,0,.4);
-moz-box-shadow: inset 0 3px 10px rgba(0,0,0,.4); -moz-box-shadow: inset 0 3px 10px rgba(0,0,0,.4);
box-shadow: inset 0 3px 10px rgba(0,0,0,.4); box-shadow: inset 0 3px 10px rgba(0,0,0,.4);
}
.quickstart .content { .content { padding: 0; }
padding: 0;
}
.quickstart h4 { h4 {
font-size: 24px; font-size: 24px;
line-height: 24px; line-height: 24px;
margin-top: 20px; margin-top: 20px;
text-shadow: 0 1px 3px rgba(0,0,0,.8); text-shadow: 0 1px 3px rgba(0,0,0,.8);
} }
.quickstart .code { .code {
font-size: 12px; font-size: 12px;
display: block; display: block;
margin: 0 0 -30px; margin: 0 0 -30px;
}
} }
@media (min-width: 768px) { @media (min-width: 768px) {
.quickstart .code { .quickstart {
.code {
font-size: 18px; font-size: 18px;
margin: -30px 0; margin: -30px 0;
float: right; float: right;
} }
.quickstart h4 {
h4 {
margin: 50px 0 0; margin: 50px 0 0;
text-align: center; text-align: center;
} }
}
} }
/* Code */ /* Code */
.quickstart .code { .quickstart {
.code {
display: block; display: block;
padding: 0; padding: 0;
font-family: Menlo, Consolas, "Courier New", Courier, "Liberation Mono", monospace; font-family: Menlo, Consolas, "Courier New", Courier, "Liberation Mono", monospace;
line-height: 1.3em; line-height: 1.3em;
}
.quickstart .code .title { .title {
display: block; display: block;
text-align: center; text-align: center;
margin: 0 20px; margin: 0 20px;
@ -279,9 +294,9 @@ footer a:hover img {
background-image: linear-gradient(top, #f7f7f7 0%,#cfcfcf 7%,#aaaaaa 100%); background-image: linear-gradient(top, #f7f7f7 0%,#cfcfcf 7%,#aaaaaa 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f7f7', endColorstr='#aaaaaa',GradientType=0 ); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f7f7', endColorstr='#aaaaaa',GradientType=0 );
border-bottom: 1px solid #111; border-bottom: 1px solid #111;
} }
.quickstart .code .shell { .shell {
padding: 20px; padding: 20px;
text-shadow: none; text-shadow: none;
margin: 0 20px; margin: 0 20px;
@ -292,47 +307,45 @@ footer a:hover img {
-webkit-box-shadow: 0 5px 30px rgba(0,0,0,.3); -webkit-box-shadow: 0 5px 30px rgba(0,0,0,.3);
-moz-box-shadow: 0 5px 30px rgba(0,0,0,.3); -moz-box-shadow: 0 5px 30px rgba(0,0,0,.3);
box-shadow: 0 5px 30px rgba(0,0,0,.3); box-shadow: 0 5px 30px rgba(0,0,0,.3);
} }
.quickstart .code .line { .line {
display: block; display: block;
margin: 0; margin: 0;
padding: 0; padding: 0;
}
.quickstart .code .line span { span { display: inline-block; }
display: inline-block; }
}
.quickstart .code .path { .path {
color: #87ceeb; color: #87ceeb;
-webkit-user-select: none; /* Chrome all / Safari all */ -webkit-user-select: none; /* Chrome all / Safari all */
-moz-user-select: none; /* Firefox all */ -moz-user-select: none; /* Firefox all */
-ms-user-select: none; /* IE 10+ */ -ms-user-select: none; /* IE 10+ */
-o-user-select: none; -o-user-select: none;
user-select: none; user-select: none;
} }
.quickstart .code .prompt { .prompt {
color: #cd5c5c; color: #cd5c5c;
-webkit-user-select: none; /* Chrome all / Safari all */ -webkit-user-select: none; /* Chrome all / Safari all */
-moz-user-select: none; /* Firefox all */ -moz-user-select: none; /* Firefox all */
-ms-user-select: none; /* IE 10+ */ -ms-user-select: none; /* IE 10+ */
-o-user-select: none; -o-user-select: none;
user-select: none; user-select: none;
} }
.quickstart .code .command { .command { color: #f0e68c; }
color: #f0e68c;
}
.quickstart .code .output { .output { color: #888; }
color: #888; }
} }
/* Free Hosting */ /* Free Hosting */
.free-hosting .pane { .free-hosting {
.pane {
background-color: #444; background-color: #444;
-webkit-border-radius: 10px; -webkit-border-radius: 10px;
-moz-border-radius: 10px; -moz-border-radius: 10px;
@ -340,43 +353,41 @@ footer a:hover img {
text-shadow: none; text-shadow: none;
position: relative; position: relative;
padding: 0 20px 30px; padding: 0 20px 30px;
} }
.free-hosting img { img {
margin: -30px 0 0; margin: -30px 0 0;
width: 180px; width: 180px;
height: 150px; height: 150px;
} }
.free-hosting h2 { h2 { font-size: 28px; }
font-size: 28px;
}
.free-hosting p, p,
.free-hosting a { a { font-size: 16px; }
font-size: 16px;
}
.free-hosting p { p { margin: .75em 0; }
margin: .75em 0;
} }
@media (min-width: 768px) { @media (min-width: 768px) {
.free-hosting img { .free-hosting {
img {
float: left; float: left;
margin: -20px -30px -30px -50px; margin: -20px -30px -30px -50px;
width: 300px; width: 300px;
height: 251px; height: 251px;
} }
.free-hosting .pane-content {
.pane-content {
margin-top: 35px; margin-top: 35px;
padding-right: 30px; padding-right: 30px;
} }
.free-hosting p,
.free-hosting a { p,
font-size: 18px; a { font-size: 18px; }
}
.free-hosting .pane:after { .pane:after {
content: " "; content: " ";
float: right; float: right;
background: url(../img/footer-arrow.png) top left no-repeat; background: url(../img/footer-arrow.png) top left no-repeat;
@ -386,6 +397,7 @@ footer a:hover img {
right: 0; right: 0;
bottom: -30px; bottom: -30px;
} }
}
} }
/* Article - Used for both docs and news */ /* Article - Used for both docs and news */
@ -405,15 +417,11 @@ article {
} }
@media (max-width: 480px) { @media (max-width: 480px) {
article ul { article ul { padding-left: 20px; }
padding-left: 20px;
}
} }
@media (max-width: 568px) { @media (max-width: 568px) {
article { article { margin: 0; }
margin: 0;
}
} }
@media (min-width: 768px) { @media (min-width: 768px) {
@ -427,9 +435,8 @@ article {
aside { aside {
padding-top: 30px; padding-top: 30px;
}
aside h4 { h4 {
text-transform: uppercase; text-transform: uppercase;
font-size: 14px; font-size: 14px;
font-weight: 700; font-weight: 700;
@ -437,26 +444,23 @@ aside h4 {
margin-left: -30px; margin-left: -30px;
display: inline-block; display: inline-block;
border-bottom: 1px solid #c00; border-bottom: 1px solid #c00;
} }
aside ul { ul {
padding-left: 0; padding-left: 0;
}
aside ul:first-child { &:first-child { margin-top: 0; }
margin-top: 0; }
}
aside li { li {
list-style-type: none; list-style-type: none;
}
aside li a { a {
font-size: 16px; font-size: 16px;
position: relative position: relative
} }
aside li.current a:before { &.current a:before {
content: ""; content: "";
border-color: transparent transparent transparent #444; border-color: transparent transparent transparent #444;
border-style: solid; border-style: solid;
@ -466,16 +470,17 @@ aside li.current a:before {
position: absolute; position: absolute;
top: 0; top: 0;
left: -30px; left: -30px;
}
}
} }
/* Documentation */ /* Documentation */
.docs article { .docs {
min-height: 800px;
}
.docs .content { article { min-height: 800px; }
padding: 0;
.content { padding: 0; }
} }
.section-nav { .section-nav {
@ -484,13 +489,11 @@ aside li.current a:before {
position: relative; position: relative;
background: url(../img/article-footer.png) top center no-repeat; background: url(../img/article-footer.png) top center no-repeat;
margin: 40px -20px 10px; margin: 40px -20px 10px;
}
.section-nav > div { > div { width: 49.5%; }
width: 49.5%;
}
.section-nav a, .section-nav span { a,
span {
color: #fff; color: #fff;
font-size: 16px; font-size: 16px;
text-transform: uppercase; text-transform: uppercase;
@ -504,50 +507,46 @@ aside li.current a:before {
-moz-box-shadow: 0 1px 3px rgba(0,0,0,.3), inset 0 1px 1px rgba(255,255,255,.5); -moz-box-shadow: 0 1px 3px rgba(0,0,0,.3), inset 0 1px 1px rgba(255,255,255,.5);
box-shadow: 0 1px 3px rgba(0,0,0,.3), inset 0 1px 1px rgba(255,255,255,.5); box-shadow: 0 1px 3px rgba(0,0,0,.3), inset 0 1px 1px rgba(255,255,255,.5);
background-color: #777; background-color: #777;
} }
.section-nav a:hover { a:hover {
color: #fff; color: #fff;
background-color: #888; background-color: #888;
} }
.section-nav .next, .section-nav .prev { .next,
position: relative; .prev { position: relative; }
}
.section-nav .next:after, .section-nav .prev:before { .next:after,
.prev:before {
font-size: 36px; font-size: 36px;
color: #222; color: #222;
font-weight: 900; font-weight: 900;
text-shadow: 0 1px 0 rgba(255,255,255,.4); text-shadow: 0 1px 0 rgba(255,255,255,.4);
position: absolute; position: absolute;
top: -7px; top: -7px;
} }
.section-nav .next:after { .next:after {
content: '\203A'; content: '\203A';
right: 10px; right: 10px;
} }
.section-nav .prev:before { .prev:before {
content: '\2039'; content: '\2039';
left: 10px; left: 10px;
} }
.section-nav .prev, .section-nav .prev:hover { .prev,
/*float: left;*/ .prev:hover { padding-left: 30px; }
padding-left: 30px;
}
.section-nav .next, .section-nav .next:hover { .next,
/*float: right;*/ .next:hover { padding-right: 30px; }
padding-right: 30px;
}
.section-nav .disabled { .disabled {
opacity: .5; opacity: .5;
/*filter: alpha*/
cursor: default; cursor: default;
}
} }
.docs-nav-mobile select { .docs-nav-mobile select {
@ -557,9 +556,7 @@ aside li.current a:before {
/* News */ /* News */
article h2:first-child { article h2:first-child { margin-top: 0; }
margin-top: 0;
}
.post-category, .post-category,
.post-meta { .post-meta {
@ -588,32 +585,8 @@ article h2:first-child {
background-image: -o-linear-gradient(top, #9e2812 0%, #6f0d0d 100%); background-image: -o-linear-gradient(top, #9e2812 0%, #6f0d0d 100%);
background-image: linear-gradient(to bottom, #9e2812 0%,#6f0d0d 100%); background-image: linear-gradient(to bottom, #9e2812 0%,#6f0d0d 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9e2812', endColorstr='#6f0d0d',GradientType=0 ); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9e2812', endColorstr='#6f0d0d',GradientType=0 );
}
.post-content img { &:before {
max-width: 100%
}
.label {
float: left;
text-transform: uppercase;
font-weight: 700;
text-shadow: 0 -1px 0 rgba(0,0,0,.5);
}
@media (max-width: 568px) {
.post-category {
padding-left: 30px;
}
}
@media (min-width: 768px) {
.post-category {
margin-left: -50px;
}
}
.post-category:before {
content: ""; content: "";
position: absolute; position: absolute;
top: -10px; top: -10px;
@ -623,6 +596,24 @@ article h2:first-child {
border-width: 5px; border-width: 5px;
width: 0; width: 0;
height: 0; height: 0;
}
}
.post-content img { max-width: 100% }
.label {
float: left;
text-transform: uppercase;
font-weight: 700;
text-shadow: 0 -1px 0 rgba(0,0,0,.5);
}
@media (max-width: 568px) {
.post-category { padding-left: 30px; }
}
@media (min-width: 768px) {
.post-category { margin-left: -50px; }
} }
.avatar { .avatar {
@ -641,9 +632,7 @@ article h2:first-child {
} }
.post-date, .post-date,
.post-author { .post-author { margin-left: 10px; }
margin-left: 10px;
}
.news article + article { .news article + article {
margin-top: -10px; margin-top: -10px;
@ -659,7 +648,8 @@ article h2:first-child {
/* Code Highlighting */ /* Code Highlighting */
pre, code { pre,
code {
white-space: pre; white-space: pre;
display: inline-block; display: inline-block;
margin: 0; margin: 0;
@ -668,12 +658,16 @@ pre, code {
} }
@media (min-width: 768px) { @media (min-width: 768px) {
pre, code { pre, code { font-size: 16px; }
font-size: 16px;
}
} }
.highlight, p > pre, p > code, p > nobr > code, li > code, h5 > code, .note > code { .highlight,
p > pre,
p > code,
p > nobr > code,
li > code,
h5 > code,
.note > code {
background-color: #333; background-color: #333;
color: #fff; color: #fff;
-webkit-border-radius: 5px; -webkit-border-radius: 5px;
@ -707,9 +701,7 @@ pre, code {
/* HTML Elements */ /* HTML Elements */
h1, h2, h3, h4, h5, h6 { h1, h2, h3, h4, h5, h6 { margin: 0; }
margin: 0;
}
a { a {
color: #fc0; color: #fc0;
@ -718,19 +710,13 @@ a {
-moz-transition: all .25s; -moz-transition: all .25s;
-o-transition: all .25s; -o-transition: all .25s;
transition: all .25s; transition: all .25s;
&:hover { color: #f90; }
} }
a:hover { strong { font-weight: 700; }
color: #f90;
}
strong { p { line-height: 1.5em; }
font-weight: 700;
}
p {
line-height: 1.5em;
}
.left { float: left; } .left { float: left; }
.right { float: right; } .right { float: right; }
@ -740,16 +726,25 @@ p {
/* Article HTML */ /* Article HTML */
article h2, article {
article h3,
article h4, h2, h3, h4, h5, h6 { margin: 1em 0; }
article h5,
article h6 { h4 { color: #fff; }
margin: 1em 0;
} ul li {
p { margin: 0; }
blockquote { margin: 10px 0; }
}
ul li,
ol li {
line-height: 1.5em;
margin-bottom: 0.5em;
}
article h4 {
color: #fff;
} }
h5, h6 { h5, h6 {
@ -757,19 +752,6 @@ h5, h6 {
font-style: italic; font-style: italic;
} }
article ul li p {
margin: 0;
}
article ul li, article ol li {
line-height: 1.5em;
margin-bottom: 0.5em;
}
article ul li blockquote {
margin: 10px 0;
}
blockquote { blockquote {
border-left: 2px solid #777; border-left: 2px solid #777;
padding-left: 20px; padding-left: 20px;
@ -809,34 +791,30 @@ thead {
background-image: -o-linear-gradient(top, #3a3a3a 0%, #1e1e1e 100%); background-image: -o-linear-gradient(top, #3a3a3a 0%, #1e1e1e 100%);
background-image: linear-gradient(to bottom, #3a3a3a 0%,#1e1e1e 100%); background-image: linear-gradient(to bottom, #3a3a3a 0%,#1e1e1e 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3a3a3a', endColorstr='#1e1e1e',GradientType=0 ); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3a3a3a', endColorstr='#1e1e1e',GradientType=0 );
}
thead th { th {
position: relative; position: relative;
-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.1); -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.1); -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
box-shadow: inset 0 1px 0 rgba(255,255,255,.1); box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
}
thead th:first-child { &:first-child {
-webkit-border-top-left-radius: 5px; -webkit-border-top-left-radius: 5px;
-moz-border-radius-topleft: 5px; -moz-border-radius-topleft: 5px;
border-top-left-radius: 5px; border-top-left-radius: 5px;
} }
thead th:last-child { &:last-child {
-webkit-border-top-right-radius: 5px; -webkit-border-top-right-radius: 5px;
-moz-border-radius-topright: 5px; -moz-border-radius-topright: 5px;
border-top-right-radius: 5px; border-top-right-radius: 5px;
}
}
} }
td { td { padding: .5em .75em; }
padding: .5em .75em;
}
td p { td p { margin: 0; }
margin: 0;
}
th { th {
text-transform: uppercase; text-transform: uppercase;
@ -859,25 +837,32 @@ tbody td {
background-image: -o-linear-gradient(top, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 100%); background-image: -o-linear-gradient(top, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 100%);
background-image: linear-gradient(to bottom, rgba(255,255,255,0.1) 0%,rgba(255,255,255,0) 100%); background-image: linear-gradient(to bottom, rgba(255,255,255,0.1) 0%,rgba(255,255,255,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1affffff', endColorstr='#00ffffff',GradientType=0 ); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1affffff', endColorstr='#00ffffff',GradientType=0 );
}
td p { p {
font-size: 16px; font-size: 16px;
code { font-size: 14px; }
}
} }
td p code { code.option,
font-size: 14px; th .option,
} code.filter,
th .filter {
code.option, th .option, code.filter, th .filter {
color: #50B600; color: #50B600;
} }
code.flag, th .flag, code.output, th .output { code.flag,
th .flag,
code.output,
th .output {
color: #049DCE; color: #049DCE;
} }
code.option, code.flag, code.filter, code.output { code.option,
code.flag,
code.filter,
code.output {
margin-bottom: 2px; margin-bottom: 2px;
} }
@ -906,18 +891,15 @@ code.option, code.flag, code.filter, code.output {
} }
@media (max-width: 568px) { @media (max-width: 568px) {
.note { .note { margin-right: -30px; }
margin-right: -30px;
}
} }
@media (min-width: 768px) { @media (min-width: 768px) {
.note { .note { margin-left: -50px; }
margin-left: -50px;
}
} }
.note:before { .note {
&:before {
content: ""; content: "";
position: absolute; position: absolute;
top: -10px; top: -10px;
@ -927,22 +909,35 @@ code.option, code.flag, code.filter, code.output {
border-width: 5px; border-width: 5px;
width: 0; width: 0;
height: 0; height: 0;
} }
.note h5, .note p { h5,
p {
margin: 0; margin: 0;
color: #fff; color: #fff;
} }
.note h5 { h5 {
line-height: 1.5em; line-height: 1.5em;
font-weight: 900; font-weight: 900;
font-style: normal; font-style: normal;
} }
.note p { p {
font-weight: 400; font-weight: 400;
font-size: .75em; font-size: .75em;
}
&:after {
content: '\2605';
color: #fc0;
position: absolute;
top: 14px;
left: 14px;
font-size: 28px;
font-weight: 700;
text-shadow: 0 -1px 0 rgba(0,0,0,.5);
}
} }
.info { .info {
@ -978,28 +973,11 @@ code.option, code.flag, code.filter, code.output {
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cd9239', endColorstr='#a27528',GradientType=0 ); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cd9239', endColorstr='#a27528',GradientType=0 );
} }
.info:before { .info:before { border-color: transparent #00617f #00617f transparent; }
border-color: transparent #00617f #00617f transparent;
}
.warning:before { .warning:before { border-color: transparent #6f0d0d #6f0d0d transparent; }
border-color: transparent #6f0d0d #6f0d0d transparent;
}
.unreleased:before { .unreleased:before { border-color: transparent #664719 #664719 transparent; }
border-color: transparent #664719 #664719 transparent;
}
.note:after {
content: '\2605';
color: #fc0;
position: absolute;
top: 14px;
left: 14px;
font-size: 28px;
font-weight: 700;
text-shadow: 0 -1px 0 rgba(0,0,0,.5);
}
.info:after { .info:after {
content: '\24D8'; content: '\24D8';