+
diff --git a/site/_includes/top.html b/site/_includes/top.html
index 6ee24730..893528e3 100644
--- a/site/_includes/top.html
+++ b/site/_includes/top.html
@@ -6,7 +6,7 @@
-
+
diff --git a/site/_layouts/default.html b/site/_layouts/default.html
index 80c9e4c1..8919fca7 100644
--- a/site/_layouts/default.html
+++ b/site/_layouts/default.html
@@ -1,6 +1,6 @@
{% include top.html %}
-
+
{% include header.html %}
{{ content }}
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..21a66c8d
--- /dev/null
+++ b/site/css/gridism.css
@@ -0,0 +1,100 @@
+/*
+ * 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; }
+
+/* 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;
+ }
+}
+
+/* Expand the wrap a bit further on larger screens */
+/*@media screen and (min-width: 1180px) {
+ .wrap .grid {
+ max-width: 1180px;
+ margin: 0 auto;
+ }
+}*/
\ No newline at end of file
diff --git a/site/css/style.css b/site/css/style.css
index 85e9a079..f58ee086 100644
--- a/site/css/style.css
+++ b/site/css/style.css
@@ -19,34 +19,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,32 +36,6 @@ nav ul {
nav li {
display: inline-block;
- margin-left: 10px;
-}
-
-nav li a {
- border-radius: 5px;
- font-weight: 800;
- font-size: 14px;
- padding: 0.5em 1em;
- text-shadow: none;
- text-transform: uppercase;
- transition: all .25s;
- -moz-transition: all .25s;
- -webkit-transition: all .25s;
-}
-
-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 {
- 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);
}
/* Footer */
@@ -106,322 +62,6 @@ body > footer .align-right img {
margin-left: 5px;
}
-/* Utilities */
-
-.align-left {
- text-align: left;
-}
-
-.align-right {
- text-align: right;
-}
-
-.align-center {
- text-align: center;
-}
-
-/* Sections */
-
-.intro .content {
- padding: 10px 0 40px;
-}
-
-.intro p {
- font-size: 3.2em;
- line-height: 1em;
- margin: 0;
-}
-
-.features .content {
- padding: 20px 0 40px;
-}
-
-.quickstart {
- background: #3F1F1F;
- color: #fff;
- margin: 60px 0 80px;
- box-shadow: inset 0 3px 10px rgba(0,0,0,.4);
-}
-
-.quickstart .content {
- padding: 0px 0;
-}
-
-.quickstart .code {
- margin: -30px 0;
- float: right;
-}
-
-.quickstart h4 {
- margin: 48px 0 0;
- font-size: 28px;
- text-shadow: 0 1px 3px rgba(0,0,0,.8);
-}
-
-.free-hosting .content {
- /*margin-bottom: 40px;*/
- position: relative;
-}
-
-.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;
-}
-
-/* Code */
-
-.quickstart .code {
- display: block;
- background: #3d3d3d;
- border-radius: 5px;
- 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;
- padding: 5px 0;
- border-top-left-radius: 5px;
- border-top-right-radius: 5px;
- box-shadow: box-shadow: 0 3px 10px rgba(0,0,0,.5);
- font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
- font-size: 16px;
- font-weight: normal;
- color: #444;
- text-shadow: 0 1px 0 rgba(255,255,255,.5);
- background: #f7f7f7;
- background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Y3ZjdmNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjclIiBzdG9wLWNvbG9yPSIjY2ZjZmNmIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2FhYWFhYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
- background: -moz-linear-gradient(top, #f7f7f7 0%, #cfcfcf 7%, #aaaaaa 100%);
- background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f7f7f7), color-stop(7%,#cfcfcf), color-stop(100%,#aaaaaa));
- background: -webkit-linear-gradient(top, #f7f7f7 0%,#cfcfcf 7%,#aaaaaa 100%);
- background: -o-linear-gradient(top, #f7f7f7 0%,#cfcfcf 7%,#aaaaaa 100%);
- background: -ms-linear-gradient(top, #f7f7f7 0%,#cfcfcf 7%,#aaaaaa 100%);
- background: linear-gradient(top, #f7f7f7 0%,#cfcfcf 7%,#aaaaaa 100%);
- filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f7f7', endColorstr='#aaaaaa',GradientType=0 );
- border-bottom: 1px solid #111;
-}
-
-.quickstart .code .shell {
- padding: 20px;
- text-shadow: none;
-}
-
-.quickstart .code .line {
- display: block;
- margin: 0;
- padding: 0;
-}
-
-.quickstart .code .line span {
- display: inline-block;
-}
-
-.quickstart .code .path {
- color: #87ceeb;
-}
-
-.quickstart .code .prompt {
- color: #cd5c5c;
-}
-
-.quickstart .code .command {
- color: #f0e68c;
-}
-
-.quickstart .code .output {
- color: #888;
-}
-
-/* Documentation */
-
-.docs .content {
- padding: 0;
-}
-
-.docs article {
- background: #444;
- border-radius: 10px;
- padding: 40px 40px 30px;
- box-shadow: 0 3px 10px rgba(0,0,0,.1);
- min-height: 800px;
-}
-
-.docs aside {
- padding-top: 30px;
-}
-
-.docs aside h4 {
- text-transform: uppercase;
- font-size: 14px;
- font-weight: 700;
- padding: 0 0 10px 30px;
- margin-left: -30px;
- display: inline-block;
- border-bottom: 1px solid #c00;
-}
-
-.docs aside ul {
- padding-left: 0;
-}
-
-.docs aside li {
- list-style-type: none;
-}
-
-.docs aside li a {
- font-size: 16px;
- position: relative
-}
-
-.docs aside li.current a:before {
- content: "";
- border-color: transparent transparent transparent #444;
- border-style: solid;
- border-width: 10px;
- width: 0;
- height: 0;
- position: absolute;
- top: 0;
- left: -30px;
-}
-
-.section-nav {
- text-align: center;
- padding-top: 40px;
- position: relative;
- background: url(../img/article-footer.png) top center no-repeat;
-}
-
-.section-nav > div {
- width: 49.5%;
-}
-
-.section-nav a, .section-nav span {
- color: #fff;
- font-size: 16px;
- text-transform: uppercase;
- font-weight: 700;
- padding: 8px 12px 10px;
- border-radius: 5px;
- /*border: 1px solid #333;*/
- background: #999;
- box-shadow: 0 1px 3px rgba(0,0,0,.3), inset 0 1px 1px rgba(255,255,255,.5);
- background: #777;
-}
-
-.section-nav a:hover {
- color: #fff;
- background: #888;
-}
-
-.section-nav .next, .section-nav .prev {
- position: relative;
-}
-
-.section-nav .next:after, .section-nav .prev:before {
- font-size: 36px;
- color: #222;
- font-weight: 800;
- text-shadow: 0 1px 0 rgba(255,255,255,.4);
- position: absolute;
- top: -7px;
-}
-
-.section-nav .next:after {
- content: "›";
- right: 10px;
-}
-
-.section-nav .prev:before {
- content: "‹";
- left: 10px;
-}
-
-.section-nav .prev, .section-nav .prev:hover {
- /*float: left;*/
- padding-left: 30px;
-}
-
-.section-nav .next, .section-nav .next:hover {
- /*float: right;*/
- padding-right: 30px;
-}
-
-.section-nav .disabled {
- opacity: .5;
- /*filter: alpha*/
- cursor: default;
-}
-
-
-/* Code Highlighting */
-
-
-pre, code {
- white-space: pre;
- display: inline-block;
- margin: 0;
- padding: 0;
- font-family: Menlo, Consolas, "Courier New", Courier, "Liberation Mono", monospace;
- font-size: 16px;
- padding: 0 .5em;
- line-height: 1.8em;
-}
-
-.highlight, p > pre, p > code {
- background: #333;
- color: #fff;
- border-radius: 5px;
- box-shadow: inset 0 1px 10px rgba(0,0,0,.3),
- 0 1px 0 rgba(255,255,255,.1),
- 0 -1px 0 rgba(0,0,0,.5);
-}
-
-.highlight {
- padding: 10px 0;
- width: 100%;
- overflow: scroll;
-}
-
-
/* HTML Elements */
h1, h2, h3, h4, h5, h6 {
@@ -694,4 +334,4 @@ code.option, code.flag, code.filter, code.output {
font-size: 32px;
font-weight: bold;
text-shadow: 0 -1px 0 rgba(0,0,0,.5);
-}
+}
\ No newline at end of file
diff --git a/site/index.html b/site/index.html
index c0a35828..6bf15a63 100644
--- a/site/index.html
+++ b/site/index.html
@@ -4,26 +4,29 @@ title: Jekyll • Simple, blog-aware, static sites
overview: true
---
+{% comment %}
-
-
Transform your plain text into static websites and blogs.
So easy, it’s scary.
+
+
+
Transform your plain text into static websites and blogs.
So easy, it’s scary.
+
-
+
+
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,7 +37,7 @@ overview: true
-
+
Get up and running in seconds.
@@ -75,3 +78,4 @@ overview: true
+{% endcomment %}
\ No newline at end of file