start ripping this thing apart so it can be responsive
This commit is contained in:
Coby Chapple
parent
bc673722d6
commit
6d19924d35
|
|
@ -1,15 +1,13 @@
|
||||||
<footer>
|
<footer>
|
||||||
<div class="content">
|
<div class="grid">
|
||||||
<div class="grid4 first">
|
<div class="unit one-third center-on-mobiles">
|
||||||
<p>By <a href="http://tom.preston-werner.com">Tom Preston-Werner</a>, <a href="http://quaran.to/">Nick Quaranto</a>, and many more <a href="https://github.com/mojombo/jekyll/graphs/contributors">awesome contributors</a>.</p>
|
<p>By <a href="http://tom.preston-werner.com">Tom Preston-Werner</a>, <a href="http://quaran.to/">Nick Quaranto</a>, and many more <a href="https://github.com/mojombo/jekyll/graphs/contributors">awesome contributors</a>.</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="grid8 align-right">
|
<div class="unit two-thirds align-right center-on-mobiles">
|
||||||
<p>Proudly hosted by</p>
|
<p>Proudly hosted by</p>
|
||||||
<a href="https://github.com">
|
<a href="https://github.com">
|
||||||
<img src="{{ site.url }}/img/footer-logo.png" alt="GitHub • Social coding">
|
<img src="{{ site.url }}/img/footer-logo.png" alt="GitHub • Social coding">
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="clear"></div>
|
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
<div class="clear"></div>
|
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
<header>
|
<header>
|
||||||
<div class="content">
|
<div class="grid">
|
||||||
<div class="grid3 first">
|
<div class="unit one-quarter center-on-mobiles">
|
||||||
<h1>
|
<h1>
|
||||||
<a href="{{ site.url }}/">
|
<a href="{{ site.url }}/">
|
||||||
<span>Jekyll</span>
|
<span>Jekyll</span>
|
||||||
|
|
@ -8,19 +8,18 @@
|
||||||
</a>
|
</a>
|
||||||
</h1>
|
</h1>
|
||||||
</div>
|
</div>
|
||||||
<nav class="grid6">
|
<nav class="unit three-quarters center-on-mobiles">
|
||||||
<ul>
|
<ul class="grid">
|
||||||
<li {% if page.overview %}class="current"{% endif %}>
|
<li class="unit one-third {% if page.overview %}current{% endif %}">
|
||||||
<a href="{{ site.url }}/">Overview</a>
|
<a href="{{ site.url }}/">Overview</a>
|
||||||
</li>
|
</li>
|
||||||
<li {% unless page.overview %}class="current"{% endunless %}>
|
<li class="unit one-third {% unless page.overview %}current{% endunless %}">
|
||||||
<a href="{{ site.url }}/docs">Documentation</a>
|
<a href="{{ site.url }}/docs">Documentation</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="">
|
<li class="unit one-third">
|
||||||
<a href="https://github.com/mojombo/jekyll">View on GitHub</a>
|
<a href="https://github.com/mojombo/jekyll">View on GitHub</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
<div class="clear"></div>
|
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
|
||||||
|
|
@ -6,7 +6,7 @@
|
||||||
<link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic' rel='stylesheet' type='text/css'>
|
<link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic' rel='stylesheet' type='text/css'>
|
||||||
<link href='http://fonts.googleapis.com/css?family=Arizonia' rel='stylesheet' type='text/css'>
|
<link href='http://fonts.googleapis.com/css?family=Arizonia' rel='stylesheet' type='text/css'>
|
||||||
<link rel="stylesheet" href="{{ site.url }}/css/normalize.css" />
|
<link rel="stylesheet" href="{{ site.url }}/css/normalize.css" />
|
||||||
<link rel="stylesheet" href="{{ site.url }}/css/grid.css" />
|
<link rel="stylesheet" href="{{ site.url }}/css/gridism.css" />
|
||||||
<link rel="stylesheet" href="{{ site.url }}/css/style.css" />
|
<link rel="stylesheet" href="{{ site.url }}/css/style.css" />
|
||||||
<link rel="stylesheet" href="{{ site.url }}/css/pygments.css" />
|
<link rel="stylesheet" href="{{ site.url }}/css/pygments.css" />
|
||||||
<link rel="icon" type="image/x-icon" href="{{ site.url }}/favicon.png" />
|
<link rel="icon" type="image/x-icon" href="{{ site.url }}/favicon.png" />
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
{% include top.html %}
|
{% include top.html %}
|
||||||
|
|
||||||
<body>
|
<body class="wrap">
|
||||||
{% include header.html %}
|
{% include header.html %}
|
||||||
|
|
||||||
{{ content }}
|
{{ content }}
|
||||||
|
|
|
||||||
|
|
@ -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 */
|
|
||||||
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}*/
|
||||||
|
|
@ -19,34 +19,16 @@ body > header, body > section, body > footer {
|
||||||
clear: both;
|
clear: both;
|
||||||
}
|
}
|
||||||
|
|
||||||
.content {
|
|
||||||
padding: 20px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Header */
|
/* Header */
|
||||||
|
|
||||||
body > header {
|
body > header h1, body > header nav {
|
||||||
padding: 40px 0 10px;
|
display: inline-block;
|
||||||
}
|
|
||||||
|
|
||||||
body > header .content {
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
body > header h1 img {
|
|
||||||
margin-left: -30px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
body > header h1 span {
|
body > header h1 span {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Navigation */
|
|
||||||
|
|
||||||
nav {
|
|
||||||
margin-top: 52px;
|
|
||||||
}
|
|
||||||
|
|
||||||
nav ul {
|
nav ul {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
|
@ -54,32 +36,6 @@ nav ul {
|
||||||
|
|
||||||
nav li {
|
nav li {
|
||||||
display: inline-block;
|
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 */
|
/* Footer */
|
||||||
|
|
@ -106,322 +62,6 @@ body > footer .align-right img {
|
||||||
margin-left: 5px;
|
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 */
|
/* HTML Elements */
|
||||||
|
|
||||||
h1, h2, h3, h4, h5, h6 {
|
h1, h2, h3, h4, h5, h6 {
|
||||||
|
|
@ -694,4 +334,4 @@ code.option, code.flag, code.filter, code.output {
|
||||||
font-size: 32px;
|
font-size: 32px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
text-shadow: 0 -1px 0 rgba(0,0,0,.5);
|
text-shadow: 0 -1px 0 rgba(0,0,0,.5);
|
||||||
}
|
}
|
||||||
|
|
@ -4,26 +4,29 @@ title: Jekyll • Simple, blog-aware, static sites
|
||||||
overview: true
|
overview: true
|
||||||
---
|
---
|
||||||
|
|
||||||
|
{% comment %}
|
||||||
<section class="intro">
|
<section class="intro">
|
||||||
<div class="content">
|
<div class="grid">
|
||||||
<p class="first">Transform your plain text into static websites and blogs. <br />So easy, <strong>it’s scary</strong>.</p>
|
<div class="unit whole">
|
||||||
|
<p class="first">Transform your plain text into static websites and blogs. <br />So easy, <strong>it’s scary</strong>.</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
<section class="features">
|
<section class="features">
|
||||||
<div class="content">
|
<div class="grid">
|
||||||
<div class="grid4 first">
|
<div class="unit one-third">
|
||||||
<h2>Simple</h2>
|
<h2>Simple</h2>
|
||||||
<p>
|
<p>
|
||||||
No more databases, comment moderation, or pesky updates to install—just <em>your content</em>.
|
No more databases, comment moderation, or pesky updates to install—just <em>your content</em>.
|
||||||
</p>
|
</p>
|
||||||
<a href="{% post_url 2012-07-01-usage %}" class="">How Jekyll works →</a>
|
<a href="{% post_url 2012-07-01-usage %}" class="">How Jekyll works →</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="grid4">
|
<div class="unit one-third">
|
||||||
<h2>Static</h2>
|
<h2>Static</h2>
|
||||||
<p><a href="http://daringfireball.net/projects/markdown/">Markdown</a> (or <a href="http://textile.sitemonks.com/">Textile</a>), <a href="http://liquidmarkup.org/">Liquid</a>, HTML <span class="amp">&</span> CSS go in. Static sites come out ready for deployment.</p>
|
<p><a href="http://daringfireball.net/projects/markdown/">Markdown</a> (or <a href="http://textile.sitemonks.com/">Textile</a>), <a href="http://liquidmarkup.org/">Liquid</a>, HTML <span class="amp">&</span> CSS go in. Static sites come out ready for deployment.</p>
|
||||||
<a href="{% post_url 2012-07-01-templates %}" class="">Jekyll template guide →</a>
|
<a href="{% post_url 2012-07-01-templates %}" class="">Jekyll template guide →</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="grid4">
|
<div class="unit one-third">
|
||||||
<h2>Blog-aware</h2>
|
<h2>Blog-aware</h2>
|
||||||
<p>
|
<p>
|
||||||
Permalinks, categories, pages, posts, and custom layouts are all first-class citizens here.
|
Permalinks, categories, pages, posts, and custom layouts are all first-class citizens here.
|
||||||
|
|
@ -34,7 +37,7 @@ overview: true
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
<section class="quickstart">
|
<section class="quickstart">
|
||||||
<div class="content">
|
<div class="grid">
|
||||||
<div class="grid5 first">
|
<div class="grid5 first">
|
||||||
<h4>Get up and running <em>in seconds</em>.</h4>
|
<h4>Get up and running <em>in seconds</em>.</h4>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -75,3 +78,4 @@ overview: true
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
{% endcomment %}
|
||||||
Loading…
Reference in New Issue