@@ -244,11 +250,12 @@ following is a reference of the available data.
## Paginator
+
Paginator variable availability
diff --git a/site/css/grid.css b/site/css/grid.css
deleted file mode 100644
index dbcb37fe..00000000
--- a/site/css/grid.css
+++ /dev/null
@@ -1,62 +0,0 @@
-.content {
- width: 978px;
- margin: 0 auto;
-}
-.grid1, .grid2, .grid3, .grid4, .grid5, .grid6, .grid7, .grid8, .grid9, .grid10, .grid11 {
- float: left;
- display: inline;
- margin-left: 30px;
-}
-.grid1 {
- width: 54px;
-}
-.grid2 {
- width: 138px;
-}
-.grid3 {
- width: 222px;
-}
-.grid4 {
- width: 306px;
-}
-.grid5 {
- width: 390px;
-}
-.grid6 {
- width: 474px;
-}
-.grid7 {
- width: 558px;
-}
-.grid8 {
- width: 642px;
-}
-.grid9 {
- width: 726px;
-}
-.grid10 {
- width: 810px;
-}
-.grid11 {
- width: 894px;
-}
-.first {
- margin-left: 0;
- clear: left;
-}
-
-/* clearfix */
-.clear:after {
- visibility: hidden;
- display: block;
- font-size: 0;
- content: " ";
- clear: both;
- height: 0;
-}
-* html .clear {
- zoom: 1;
-} /* IE6 */
-*:first-child+html .clear {
- zoom: 1;
-} /* IE7 */
\ No newline at end of file
diff --git a/site/css/gridism.css b/site/css/gridism.css
new file mode 100644
index 00000000..cc7a43c3
--- /dev/null
+++ b/site/css/gridism.css
@@ -0,0 +1,110 @@
+/*
+ * Gridism
+ * A simple, responsive, and handy CSS grid by @cobyism
+ * https://github.com/cobyism/gridism
+ */
+
+/* Preserve some sanity */
+.grid,
+.unit {
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+}
+
+/* Set up some rules to govern the grid */
+.grid {
+ display: block;
+ clear: both;
+}
+.grid .unit {
+ float: left;
+ width: 100%;
+ padding: 10px;
+}
+
+/* This ensures the outer gutters are equal to the (doubled) inner gutters. */
+.grid .unit:first-child { padding-left: 20px; }
+.grid .unit:last-child { padding-right: 20px; }
+
+/* Nested grids already have padding though, so let’s nuke it */
+.unit .unit:first-child { padding-left: 0; }
+.unit .unit:last-child { padding-right: 0; }
+.unit .grid:first-child > .unit { padding-top: 0; }
+.unit .grid:last-child > .unit { padding-bottom: 0; }
+
+/* Let people nuke the gutters/padding completely in a couple of ways */
+.no-gutters .unit,
+.unit.no-gutters {
+ padding: 0 !important;
+}
+
+/* Wrapping at a maximum width is optional */
+.wrap .grid,
+.grid.wrap {
+ max-width: 978px;
+ margin: 0 auto;
+}
+
+/* Width classes also have shorthand versions numbered as fractions
+ * For example: for a grid unit 1/3 (one third) of the parent width,
+ * simply apply class="w-1-3" to the element. */
+.grid .whole, .grid .w-1-1 { width: 100%; }
+.grid .half, .grid .w-1-2 { width: 50%; }
+.grid .one-third, .grid .w-1-3 { width: 33.3332%; }
+.grid .two-thirds, .grid .w-2-3 { width: 66.6665%; }
+.grid .one-quarter, .grid .w-1-4 { width: 25%; }
+.grid .three-quarters, .grid .w-3-4 { width: 75%; }
+.grid .one-fifth, .grid .w-1-5 { width: 20%; }
+.grid .two-fifths, .grid .w-2-5 { width: 40%; }
+.grid .three-fifths, .grid .w-3-5 { width: 60%; }
+.grid .four-fifths, .grid .w-4-5 { width: 80%; }
+.grid .golden-small, .grid .w-g-s { width: 38.2716%; } /* Golden section: smaller piece */
+.grid .golden-large, .grid .w-g-l { width: 61.7283%; } /* Golden section: larger piece */
+
+/* Utility classes */
+.align-center { text-align: center; }
+.align-left { text-align: left; }
+.align-right { text-align: right; }
+.pull-left { float: left; }
+.pull-right { float: right; }
+
+.show-on-mobiles {
+ display: none;
+}
+
+/* Responsive Stuff */
+@media screen and (max-width: 568px) {
+ /* Stack anything that isn’t full-width on smaller screens */
+ .grid .unit {
+ width: 100% !important;
+ padding-left: 20px;
+ padding-right: 20px;
+ }
+ .unit .grid .unit {
+ padding-left: 0px;
+ padding-right: 0px;
+ }
+
+ /* Sometimes, you just want to be different on small screens */
+ .center-on-mobiles {
+ text-align: center !important;
+ }
+ .hide-on-mobiles {
+ display: none !important;
+ }
+ .show-on-mobiles {
+ display: block !important;
+ }
+ a .show-on-mobiles {
+ display: inline !important;
+ }
+}
+
+/* Expand the wrap a bit further on larger screens */
+/*@media screen and (min-width: 1180px) {
+ .wrap .grid {
+ max-width: 1180px;
+ margin: 0 auto;
+ }
+}*/
diff --git a/site/css/style.css b/site/css/style.css
index cbe9ff12..7dad2f89 100644
--- a/site/css/style.css
+++ b/site/css/style.css
@@ -1,5 +1,11 @@
/* Base */
+* {
+ box-sizing: border-box;
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+}
+
body {
font-family: Lato, 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 21px;
@@ -11,6 +17,18 @@ body {
text-shadow: 0 1px 3px rgba(0,0,0,.5);
}
+.clear {
+ display: block;
+}
+
+.clear:after {
+ content: " ";
+ display: block;
+ height: 0;
+ clear: both;
+ visibility: hidden;
+}
+
/* Sections */
body > header, body > section, body > footer {
@@ -19,34 +37,16 @@ body > header, body > section, body > footer {
clear: both;
}
-.content {
- padding: 20px 0;
-}
-
/* Header */
-body > header {
- padding: 40px 0 10px;
-}
-
-body > header .content {
- padding: 0;
-}
-
-body > header h1 img {
- margin-left: -30px;
+body > header h1, body > header nav {
+ display: inline-block;
}
body > header h1 span {
display: none;
}
-/* Navigation */
-
-nav {
- margin-top: 52px;
-}
-
nav ul {
padding: 0;
margin: 0;
@@ -54,10 +54,17 @@ nav ul {
nav li {
display: inline-block;
- margin-left: 10px;
}
-nav li a {
+.main-nav {
+ margin-top: 52px;
+}
+
+.main-nav li {
+ margin-right: 10px;
+}
+
+.main-nav li a {
border-radius: 5px;
font-weight: 800;
font-size: 14px;
@@ -69,19 +76,65 @@ nav li a {
-webkit-transition: all .25s;
}
-nav li a:hover {
+.main-nav li a:hover {
background: #252525;
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);
}
-nav li.current a {
+.main-nav li.current a {
background: #fc0;
color: #222;
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);
}
+.mobile-nav ul {
+ overflow: hidden;
+ width: 100%;
+ display: table;
+}
+
+.mobile-nav a {
+ float: left;
+ width: 100%;
+ background: #333;
+ color: #fc0;
+ text-align: center;
+ text-transform: uppercase;
+ font-size: 14px;
+ font-weight: 800;
+ padding: 5px 0;
+ border-radius: 5px;
+}
+
+.mobile-nav .current a {
+ background: #fc0;
+ color: #222;
+ 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);
+}
+
+.mobile-nav li {
+ display: table-cell;
+ width: 33.3%;
+ padding: 8px;
+}
+
+@media (max-width: 768px){
+ .main-nav ul {
+ text-align: right;
+ }
+}
+@media (max-width: 720px){
+ .main-nav .show-on-mobiles {
+ display: inline;
+ }
+ .main-nav .hide-on-mobiles {
+ display: none;
+ }
+}
+
/* Footer */
body > footer {
@@ -96,50 +149,60 @@ body > footer a {
color: #fff;
}
-body > footer .align-right p, body > footer .align-right img {
+body > footer .align-right p, body > footer img {
display: inline-block;
}
-body > footer .align-right img {
+body > footer img {
position: relative;
- top: 14px;
+ top: 8px;
margin-left: 5px;
+ width: 100px;
+ height: 30px;
+ opacity: .8;
+ padding: 1px;
+ -webkit-transition: opacity .2s;
+ -moz-transition: opacity .2s;
+ transition: opacity .2s;
}
-/* Utilities */
-
-.align-left {
- text-align: left;
+body > footer a:hover img {
+ opacity: 1;
}
-.align-right {
- text-align: right;
+@media (max-width: 568px){
+ footer .one-third p {
+ margin-bottom: 0;
+ }
+ footer .two-thirds p {
+ margin-top: -20px;
+ }
}
-.align-center {
- text-align: center;
-}
+/* Intro */
-/* Sections */
-
-.intro .content {
+.intro .unit {
padding: 10px 0 40px;
}
.intro p {
- font-size: 3.2em;
+ font-size: 1.75em;
line-height: 1em;
margin: 0;
}
-.features .content {
- padding: 20px 0 40px;
+@media (min-width: 569px){
+ .intro p {
+ font-size: 3.2em;
+ }
}
+/* Quickstart */
+
.quickstart {
background: #3F1F1F;
color: #fff;
- margin: 60px 0 80px;
+ margin: 60px 0;
box-shadow: inset 0 3px 10px rgba(0,0,0,.4);
}
@@ -147,80 +210,46 @@ body > footer .align-right img {
padding: 0px 0;
}
-.quickstart .code {
- margin: -30px 0;
- float: right;
-}
-
.quickstart h4 {
- margin: 48px 0 0;
- font-size: 28px;
+ font-size: 24px;
+ line-height: 24px;
+ margin-top: 20px;
text-shadow: 0 1px 3px rgba(0,0,0,.8);
}
-.free-hosting .content {
- /*margin-bottom: 40px;*/
- position: relative;
+.quickstart .code {
+ font-size: 12px;
+ display: block;
+ margin: 0 0 -30px;
}
-.free-hosting .pane {
- background: #444;
- border-radius: 10px;
- padding: 40px 70px 30px;
- /*color: #222;*/
- text-shadow: none;
-}
-
-.free-hosting img {
- float: left;
- margin: -20px 40px -40px -20px;
-}
-
-.free-hosting h2 {
- /*font-weight: 800;*/
-}
-.free-hosting p,
-.free-hosting a {
- font-weight: inherit;
-}
-
-.free-hosting p {
- margin: 0.75em;
-}
-
-.free-hosting a {
- /*color: #c00;*/
-}
-
-.free-hosting .content:after {
- content: " ";
- float: right;
- background: url(../img/footer-arrow.png) top left no-repeat;
- width: 73px;
- height: 186px;
- position: absolute;
- right: 30px;
- bottom: -60px;
+@media (min-width: 768px){
+ .quickstart .code {
+ font-size: 18px;
+ margin: -30px 0;
+ float: right;
+ }
+ .quickstart h4 {
+ margin: 50px 0 0;
+ text-align: center;
+ }
}
/* Code */
.quickstart .code {
display: block;
- background: #3d3d3d;
- border-radius: 5px;
+ padding: 0;
font-family: Menlo, Consolas, "Courier New", Courier, "Liberation Mono", monospace;
line-height: 1.3em;
- box-shadow: 0 5px 30px rgba(0,0,0,.3);
}
.quickstart .code .title {
display: block;
text-align: center;
- margin: 0;
+ margin: 0 20px;
padding: 5px 0;
- border-top-left-radius: 5px;
- border-top-right-radius: 5px;
+ border-radius: 5px 5px 0 0;
box-shadow: box-shadow: 0 3px 10px rgba(0,0,0,.5);
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 16px;
@@ -242,6 +271,10 @@ body > footer .align-right img {
.quickstart .code .shell {
padding: 20px;
text-shadow: none;
+ margin: 0 20px;
+ background: #3d3d3d;
+ border-radius: 0 0 5px 5px;
+ box-shadow: 0 5px 30px rgba(0,0,0,.3);
}
.quickstart .code .line {
@@ -270,6 +303,62 @@ body > footer .align-right img {
color: #888;
}
+/* Free Hosting */
+
+.free-hosting .pane {
+ background: #444;
+ border-radius: 10px;
+ text-shadow: none;
+ position: relative;
+ padding: 0 20px 30px;
+}
+
+.free-hosting img {
+ margin: -30px 0 0;
+ width: 180px;
+ height: 150px;
+}
+
+.free-hosting h2 {
+ font-size: 28px;
+}
+
+.free-hosting p,
+.free-hosting a {
+ font-size: 16px;
+}
+
+.free-hosting p {
+ margin: .75em 0;
+}
+
+@media (min-width: 768px){
+ .free-hosting img {
+ float: left;
+ margin: -20px -30px -30px -50px;
+ width: 300px;
+ height: 251px;
+ }
+ .free-hosting .pane-content {
+ margin-top: 35px;
+ padding-right: 30px;
+ }
+ .free-hosting p,
+ .free-hosting a {
+ font-size: 18px;
+ }
+ .free-hosting .pane:after {
+ content: " ";
+ float: right;
+ background: url(../img/footer-arrow.png) top left no-repeat;
+ width: 73px;
+ height: 186px;
+ position: absolute;
+ right: 0;
+ bottom: -30px;
+ }
+}
+
/* Documentation */
.docs .content {
@@ -279,9 +368,24 @@ body > footer .align-right img {
.docs article {
background: #444;
border-radius: 10px;
- padding: 40px 40px 30px;
+ padding: 20px;
+ margin: 0 10px;
box-shadow: 0 3px 10px rgba(0,0,0,.1);
min-height: 800px;
+ font-size: 16px;
+}
+
+@media (max-width: 568px){
+ .docs article {
+ margin: 0;
+ }
+}
+
+@media (min-width: 768px){
+ .docs article {
+ padding: 40px 40px 30px;
+ font-size: 21px;
+ }
}
.docs aside {
@@ -328,6 +432,7 @@ body > footer .align-right img {
padding-top: 40px;
position: relative;
background: url(../img/article-footer.png) top center no-repeat;
+ margin: 40px -20px 10px;
}
.section-nav > div {
@@ -391,6 +496,9 @@ body > footer .align-right img {
cursor: default;
}
+.docs-nav-mobile select {
+ width: 100%;
+}
/* Code Highlighting */
@@ -401,11 +509,17 @@ pre, code {
margin: 0;
padding: 0;
font-family: Menlo, Consolas, "Courier New", Courier, "Liberation Mono", monospace;
- font-size: 16px;
+ font-size: 14px;
padding: 0 .5em;
line-height: 1.8em;
}
+@media (min-width: 768px){
+ pre, code {
+ font-size: 16px;
+ }
+}
+
.highlight, p > pre, p > code, p > nobr > code, li > code {
background: #333;
color: #fff;
@@ -421,7 +535,6 @@ pre, code {
overflow: scroll;
}
-
/* HTML Elements */
h1, h2, h3, h4, h5, h6 {
@@ -586,7 +699,7 @@ code.option, code.flag, code.filter, code.output {
.note {
margin: 30px 0;
- margin-left: -50px;
+ margin-left: -30px;
padding: 20px 20px 24px;
padding-left: 50px;
border-radius: 0px 5px 5px 0px;
@@ -603,6 +716,18 @@ code.option, code.flag, code.filter, code.output {
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7e6d42', endColorstr='#5c4e35',GradientType=0 );
}
+@media (max-width: 568px){
+ .note {
+ margin-right: -30px;
+ }
+}
+
+@media (min-width: 768px){
+ .note {
+ margin-left: -50px;
+ }
+}
+
.note:before {
content: "";
position: absolute;
@@ -695,3 +820,13 @@ code.option, code.flag, code.filter, code.output {
font-weight: bold;
text-shadow: 0 -1px 0 rgba(0,0,0,.5);
}
+
+/* Responsive tables */
+
+@media (max-width: 768px){
+ .mobile-side-scroller {
+ overflow-x: scroll;
+ margin: 0 -40px;
+ padding: 0 10px;
+ }
+}
diff --git a/site/img/footer-logo.png b/site/img/footer-logo.png
index 5431aef8..2fd76956 100644
Binary files a/site/img/footer-logo.png and b/site/img/footer-logo.png differ
diff --git a/site/img/octojekyll.png b/site/img/octojekyll.png
index 9ef662f0..d4293092 100644
Binary files a/site/img/octojekyll.png and b/site/img/octojekyll.png differ
diff --git a/site/index.html b/site/index.html
index 4cc8917b..0fd8317d 100644
--- a/site/index.html
+++ b/site/index.html
@@ -5,25 +5,27 @@ overview: true
---
-
-
Transform your plain text into static websites and blogs.
So easy, it’s scary.
+
+
+
Transform your plain text into static websites and blogs.
+
-
+
+
Simple
No more databases, comment moderation, or pesky updates to install—just your content.
How Jekyll works →
-
+
-
+
Blog-aware
Permalinks, categories, pages, posts, and custom layouts are all first-class citizens here.
@@ -34,49 +36,55 @@ overview: true
-
-
-
Get up and running in seconds.
+
+
+
Get up and running in seconds.
-
-
Quick-start Instructions
-
-
- ~
- $
- gem install jekyll
-
-
- ~
- $
- jekyll new my-awesome-site
-
-
- ~
- $
- cd my-awesome-site
-
-
- ~/my-awesome-site
- $
- jekyll serve
-
-
- # => Now browse to http://localhost:4000
-
-
+
+
Quick-start Instructions
+
+
+ ~
+ $
+ gem install jekyll
+
+
+ ~
+ $
+ jekyll new my-awesome-site
+
+
+ ~
+ $
+ cd my-awesome-site
+
+
+ ~/my-awesome-site
+ $
+ jekyll serve
+
+
+ # => Now browse to http://localhost:4000
+
+
-
-