From 6d19924d354cbb76531c2800d9539eaf64887489 Mon Sep 17 00:00:00 2001 From: Coby Chapple Date: Fri, 15 Mar 2013 12:34:13 +0000 Subject: [PATCH] start ripping this thing apart so it can be responsive --- site/_includes/footer.html | 8 +- site/_includes/header.html | 15 +- site/_includes/top.html | 2 +- site/_layouts/default.html | 2 +- site/css/grid.css | 62 ------- site/css/gridism.css | 100 ++++++++++ site/css/style.css | 366 +------------------------------------ site/index.html | 18 +- 8 files changed, 126 insertions(+), 447 deletions(-) delete mode 100644 site/css/grid.css create mode 100644 site/css/gridism.css diff --git a/site/_includes/footer.html b/site/_includes/footer.html index b0c084dc..f4859489 100644 --- a/site/_includes/footer.html +++ b/site/_includes/footer.html @@ -1,15 +1,13 @@ -
diff --git a/site/_includes/header.html b/site/_includes/header.html index 70ba591d..80e018cc 100644 --- a/site/_includes/header.html +++ b/site/_includes/header.html @@ -1,6 +1,6 @@
-
-
+
+

Jekyll @@ -8,19 +8,18 @@

-
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 →
-
+

Static

Markdown (or Textile), Liquid, HTML & CSS go in. Static sites come out ready for deployment.

Jekyll template guide →
-
+

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