From 74edce885f2592c0d81b424fd68077155af64b1a Mon Sep 17 00:00:00 2001 From: Michael Aufreiter Date: Fri, 15 Jun 2012 13:02:24 -0400 Subject: [PATCH] Get ready. --- _layouts/article.html | 22 +- _layouts/default.html | 9 +- _posts/articles/2012-06-14-jekyll.md | 2 +- _posts/articles/2012-06-14-liquid.md | 2 +- _posts/articles/2012-06-15-getting-started.md | 2 +- app.css | 848 +++++++++++++----- index.html | 35 +- 7 files changed, 649 insertions(+), 271 deletions(-) diff --git a/_layouts/article.html b/_layouts/article.html index 1f3d1ebfd..d9a00b17c 100644 --- a/_layouts/article.html +++ b/_layouts/article.html @@ -2,9 +2,23 @@ layout: default --- -
+ +
+ {% for item in site.categories.articles limit:40 offset:0 %} + + + + {% endfor %} +
+ +
{{page.title}}
- - {{ content }} -
Posted by Michael on {{ page.date | date: "%B %d, %Y" }}
+
{{page.abstract}}
+
Posted by {{page.author}} on {{ page.date | date: "%B %d, %Y" }}
+
+ +
+
+ {{ content }} +
\ No newline at end of file diff --git a/_layouts/default.html b/_layouts/default.html index 6d24df019..8f6688cbb 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -11,12 +11,19 @@
+ + +
{{content}}
diff --git a/_posts/articles/2012-06-14-jekyll.md b/_posts/articles/2012-06-14-jekyll.md index 62b416c77..9124c1bf5 100644 --- a/_posts/articles/2012-06-14-jekyll.md +++ b/_posts/articles/2012-06-14-jekyll.md @@ -1,7 +1,7 @@ --- layout: article title: Things you should know about Jekyll -descr: A collection of not so obvious Jekyll facts +abstract: A collection of not so obvious Jekyll facts image: http://farm7.staticflickr.com/6119/6884293596_b44a31bf0a_m.jpg author_twitter: _mql author: Michael Aufreiter diff --git a/_posts/articles/2012-06-14-liquid.md b/_posts/articles/2012-06-14-liquid.md index 59809628d..d828310c5 100644 --- a/_posts/articles/2012-06-14-liquid.md +++ b/_posts/articles/2012-06-14-liquid.md @@ -1,7 +1,7 @@ --- layout: article title: Using Liquid -descr: The quick guide +abstract: The quick guide image: http://farm7.staticflickr.com/6119/6884293596_b44a31bf0a_m.jpg author_twitter: _mql author: Michael Aufreiter diff --git a/_posts/articles/2012-06-15-getting-started.md b/_posts/articles/2012-06-15-getting-started.md index ec79fe539..075a93a0f 100644 --- a/_posts/articles/2012-06-15-getting-started.md +++ b/_posts/articles/2012-06-15-getting-started.md @@ -1,7 +1,7 @@ --- layout: article title: Getting Started -descr: A brief introduction on how to use Poole, what it can do for you and what not. +abstract: A brief introduction on how to use Poole, what it can do for you and what not. image: http://farm7.staticflickr.com/6119/6884293596_b44a31bf0a_m.jpg author_twitter: _mql author: Michael Aufreiter diff --git a/app.css b/app.css index bbf4b0f7c..c77177e31 100644 --- a/app.css +++ b/app.css @@ -61,54 +61,227 @@ input { font: 13px/20px 'OpenSans', sans-serif; } a { color: #526066; text-decoration: none; + -moz-transition: background 100ms linear, color 100ms linear; + -o-transition: background 100ms linear, color 100ms linear; + -webkit-transition: background 100ms linear, color 100ms linear; + transition: background 100ms linear, color 100ms linear; } a:hover { - color: #204859; + color: #3d4548; } + a:focus { outline: thin dotted; outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; } +p > a {font-weight: bold;} + h1,h2,h3,h4,h5,h6 { margin: 0; + line-height: 1.5em; } h4, h5, h6 { } h1 { font-size: 24px; } h1 small { font-size: 13px; font-weight: normal; } -h2 { font-size: 24px; } -h2 small { font-size: 16px; } -h3 { font-size: 16px; font-weight: normal; } +h2 { + font-weight: normal; + font-size: 16px; + padding: 5px 0 5px 30px; + } +h2 small { font-size: 16px; font-weight: normal; } +h3 { + font-size: 11px; + text-transform: uppercase; + font-weight: bold; + margin-top: 10px; + } + h3 small { font-size: 14px; font-weight: normal; } h4 { font-size: 14px; } h5 { font-size: 13px; } h6 { font-size: 11px; font-weight: normal; } - +p { + font-size: 16px; + line-height: 1.5em; + margin-bottom: 0px; + margin-top: 10px; + } /* Use border-box box model */ * { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -} + } /* ------------------------------------------ Globals ---------------------------------------------*/ + +/* Top Branding/Navigation */ +#header { + position: absolute; + top: 0; + right: 0; + left: 0; + padding: 0 20px; + height: 30px; + background: #667880; + /*border-bottom: 1px solid #c3ccd0;*/ + /*box-shadow: 0 1px 0 rgba(255, 255, 255, 0),0 0 10px rgba(0, 0, 0, 0.1);*/ + overflow: visible; + } + +body.post #header { + box-shadow: none; + border-bottom: none; + } + +#header a.title { + font-size: 14px; + line-height: 30px; + color: white; + height: 30px; + font-weight: bold; + } + +#header a.title span { + display: none; + } + +#header .navigation { + width: 800px; + margin: 0 auto; + font-size: 12px; + position: relative; + line-height: 30px; + padding: 0; + overflow: visible; + } + + + +#header .navigation a { + -moz-border-radius: 5px; + -webkit-border-radius: 5px; + border-radius: 5px; + } + +#header .navigation .root { + margin-left: 100px; + background-image:url('images/sprite.png'); + background-position: 6px -240px; + background-repeat: no-repeat; + } + #header .navigation div.root { + background-position-y: -650px; + } + +#header .navigation .repo { + background-image:url('images/sprite.png'); + background-position: 4px -340px; + background-repeat: no-repeat; + } + #header .navigation div.repo { + background-position-y: -750px; + } + +#header .navigation .path { + background-image:url('images/sprite.png'); + background-position: 4px -340px; + background-repeat: no-repeat; + } + #header .navigation div.path { + background-position-y: -750px; + } + + +#header .navigation .file { + background-image:url('images/sprite.png'); + background-position: 3px -440px; + background-repeat: no-repeat; + } + #header .navigation div.file { + background-position-y: -850px; + } + +#header .navigation .file::before, #header .navigation .repo::before, #header .navigation .path::before { + content:""; + background-image:url('images/sprite.png'); + background-position: -289px -390px; + background-repeat: no-repeat; + display: block; + position: absolute; + left: -30px; + top: 0px; + width: 30px; + height: 30px; + } + +#header .user-status { + position: absolute; + + top: 0px; + right: 0px; + height: 30px; + line-height: 30px; + padding: 0; + margin: 0; + } + +#header .user-status.logged-out { + line-height: 60px; +} + +#header .user-status.logged-out a { + padding: 10px; +} + +#header .user-status.logged-out a:hover { + background: #ccc; +} + + +#header .user-status img { + float: left; + margin-right: 10px; + margin-top: 15px; + border: 1px solid #C3CCD0; + } + +#header .user-status .logout { + display: inline-block; + margin-top: 15px; + margin-left: 5px; + width: 30px; + height: 30px; + text-indent: -3000px; + overflow: hidden; + background-image: url('images/sprite.png'); + background-position: -441px -41px; + background-repeat: no-repeat; + -moz-border-radius: 5px; + -webkit-border-radius: 5px; + border-radius: 5px; + } + #header .user-status .logout:hover { + background-color: #c9d1d6; + } #main { padding-top: 60px; overflow:auto; padding-bottom: 60px; /* must be same height as the footer */ -} + } #post .inner { position: relative; -} + } /* ------------------------------------------ Footer - a sticky one @@ -121,37 +294,59 @@ and your footer gets pushed down a bit more, creating vertical scroll bars in th #container { min-height: 100%; - min-width: 960px; -} + min-width: 800px; + } #footer { + position: relative; margin-top: -60px; /* negative value of footer height */ height: 60px; - + overflow: hidden; line-height: 60px; - background: #e0e7eb; + /*background: #e0e7eb;*/ border-top: 1px solid #c3ccd0; clear:both; -} + } #footer .footer-content { - width: 960px; + width: 800px; margin: 0 auto; - font-size: 16px; -} + font-size: 15px; + } + +#footer a.help, #footer a.about{ + margin-right: 20px; + padding-left: 20px; + font-size: 12px; + text-transform: uppercase; + font-weight: bold; + background-image: url('images/sprite.png'); + } + a.about { background-position: 0 -959px; } + a.help { background-position: 0 -1049px; } + +#footer .footer-content p { + margin: 16px 0; + } + +/*Opera Fix*/ +body:before {/* thanks to Maleika (Kohoutec)*/ + content:""; + height:100%; + float:left; + width:0; + margin-top:-32767px;/* thank you Erik J - negate effect of float*/ + } /* ------------------------------------------ Startpage ---------------------------------------------*/ -.dialog { +#start .dialog { position: relative; - margin: 40px auto 0 auto; - color: #7A8387; - width: 340px; -} + } #start .splash { text-align: center; @@ -162,8 +357,14 @@ and your footer gets pushed down a bit more, creating vertical scroll bars in th line-height: 1.3em; -moz-border-radius: 5px 5px 0 0; -webkit-border-radius: 5px 5px 0 0; - border-radius: 5px 5px 0 0; -} + position: relative; + margin: 40px auto 0 auto; + color: #7A8387; + width: 340px; + border: 1px solid #C3CCD0; + box-shadow: 0 1px 0 rgba(255, 255, 255, 0),0 0 10px rgba(0, 0, 0, 0.1); + border-radius: 3px; + } #start .splash h2 { background: url('images/sprite.png') 128px 18px no-repeat; @@ -171,17 +372,24 @@ and your footer gets pushed down a bit more, creating vertical scroll bars in th overflow: hidden; display: block; height: 160px; -} + } + +#start .splash p { + margin-bottom: 20px; + } .authorize { - background: #c9d1d6; + background: white; -moz-border-radius: 0 0 5px 5px; -webkit-border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px; padding: 20px ; -} + } -.authorize p {margin-top: 0;} +.authorize p { + margin-top: 0; + margin-bottom: 20px; + } .authorize a.button { display: block; @@ -195,37 +403,35 @@ and your footer gets pushed down a bit more, creating vertical scroll bars in th font-size: 11px; font-weight: bold; color: #fff; -} - .authorize a.button:hover { background: #475459;} + } + .authorize a.button:hover { background: #3d4548; } /* ------------------------------------------ Repos listing ---------------------------------------------*/ body.start { - -} + } #start .owner { - font-family: 'OpenSans', sans-serif; font-size: 16px; padding-top: 5px; padding-bottom: 5px; padding-left: 30px; width: 200px; background: url('images/sprite.png') 0px -545px no-repeat; -} + } #start { padding-bottom: 20px; - width: 960px; - margin: 0 auto; -} + width: 800px; + margin: 20px auto 0 auto; + } .repos { overflow: auto; - padding: 10px 0; -} + padding: 0px 0 20px 0; + } .repos > a { font-family: 'OpenSans', sans-serif; @@ -235,11 +441,6 @@ body.start { background:url('images/sprite.png') -450px -640px no-repeat; background-color: #E0E7EB; - -moz-transition: background-color 200ms linear; - -o-transition: background-color 200ms linear; - -webkit-transition: background-color 200ms linear; - transition: background-color 200ms linear; - -moz-border-radius: 3px 3px 0px 3px; -webkit-border-radius: 3px 3px 0px 3px; border-radius: 3px 3px 0px 3px; @@ -254,11 +455,11 @@ body.start { color: #444; display: block; float: left; -} + } .repos > a:hover { background-color: #f0f5f7; -} + } .repos > a .name { display: block; @@ -270,11 +471,11 @@ body.start { overflow: hidden; word-wrap: break-word; color: #526066; -} + } .repos > a:hover .name { color: #526066; -} + } .repos a .branches { position: absolute; @@ -292,12 +493,12 @@ body.start { padding: 10px; overflow: auto; border-radius: 3px; -} + } .repos a .branches .label { line-height: 27px; padding: 0 5px; -} + } .repos a .branches .not-jekyll { position: absolute; @@ -309,33 +510,37 @@ body.start { margin: auto; overflow: hidden; word-wrap: break-word; -} + } .repos a .branches .branch { padding: 2px 5px; text-align: center; -} + } .repos a .branches a.branch { display: block; color: #555; -} + } -.loading-branches { +.loading-branches, .post-listing a.link.folder.loading .filename { + text-indent: -9999px; + overflow: hidden; position: absolute; margin: auto; left: 0; right: 0; top: 0; bottom: 0; background: url('images/ajax-loader.gif') no-repeat; height: 40px; width: 44px; - color: #444; -} + } + .loading-branches, .post-listing a.link.folder.loading { + background-color: #F0F5F7; + } .repos a .branches a.branch:hover { /*color: #eee;*/ background: #E0E7EB; -} + } .start .sites, .dialog form { @@ -426,9 +631,9 @@ ul.site li a { #posts { padding: 30px 0; - width: 960px; + width: 800px; margin: 0 auto; -} + } #publish_status { @@ -442,27 +647,24 @@ ul.site li a { .post-listing a.link { background:url('images/sprite.png') -450px -400px no-repeat; - background-color: #E0E7EB; + background-color: #F2F6F8; float: left; width: 140px; - height: 180px; + min-height: 180px; margin: 0 20px 20px 0; padding: 10px; position: relative; color: #404040; box-shadow: 0 1px 0 rgba(255, 255, 255, 0),0 0 10px rgba(0, 0, 0, 0.1); border-radius: 3px 40px 3px 3px; - -moz-transition: background-color 200ms linear; - -o-transition: background-color 200ms linear; - -webkit-transition: background-color 200ms linear; } .post-listing a.link:hover { - background-color: #f0f5f7; + background-color: white; } .post-listing a.link .filename { display: block; - position: relative; + position: absolute; top: 40%; margin: auto; font-size: 12px; @@ -471,37 +673,39 @@ ul.site li a { overflow: hidden; word-wrap: break-word; color: #526066; -} - -.post-listing a.link.folder .filename { - color: rgba(255,255,255, 0.8); - word-wrap: break-word; - color: #526066; -} -.post-listing a.link.folder:hover .filename { -} + left: 0; + right: 0; + } + .post-listing a.link.loading { background-color: white; } + .post-listing a.link.loading .filename { + text-indent: -9999px; + overflow: hidden; + position: absolute; + margin: auto; + left: 0; right: 0; top: 0; bottom: 0; + background: url('images/ajax-loader-white.gif') no-repeat; + height: 40px; + width: 44px; + color: #444; + } .post-listing a.link:hover .filename { color: #526066; -} + } .post-listing a.link:hover { border-color: #a0a0a0; color: #404040; -} + } .post-listing a.link:active { border-color: #526066; -} + } .post-listing a.link.folder { background:url('images/sprite.png') -450px -150px no-repeat; background-color: #E0E7EB; - box-shadow: 0 1px 0 rgba(255, 255, 255, 0),0 0 10px rgba(0, 0, 0, 0.1); border-radius: 3px; - -moz-transition: background-color 200ms linear; - -o-transition: background-color 200ms linear; - -webkit-transition: background-color 200ms linear; } .post-listing a.link.folder:hover { background-color: #f0f5f7; @@ -511,7 +715,13 @@ ul.site li a { background: #516066 url('images/sprite.png') -440px -90px no-repeat; text-indent: 10px; padding: 5px; - margin: 70px 10px; + color: white; + position: absolute; + width: 100px; + margin: auto; + top: 40%; + left: 0; + right: 0; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; @@ -519,14 +729,13 @@ ul.site li a { text-align: center; font-size: 11px; font-weight: bold; - color: #fff; } - .post-listing a.link.new .button:hover { background: #475459 url('images/sprite.png') -440px -90px no-repeat; } + .post-listing a.link.new:hover .button { background: #3d4548 url('images/sprite.png') -440px -90px no-repeat; } + /* ------------------------------------------ Post ---------------------------------------------*/ - .document-menu { padding: 0 20px; height: 60px; @@ -534,52 +743,53 @@ ul.site li a { overflow: visible; line-height: 40px; - -moz-transition: background 200ms linear; - -o-transition: background 200ms linear; - -webkit-transition: background 200ms linear; - transition: background 200ms linear; + -moz-transition: background 100ms linear; + -o-transition: background 100ms linear; + -webkit-transition: background 100ms linear; + transition: background 100ms linear; + z-index: 2000; -} + } #post.sticky-menu .document-menu { position: fixed; top: 0px; left: 0px; right: 0px; -} + } #post.sticky-menu .document { margin-top: 60px; -} + } #post.published .document-menu { background: #90bb74; -} + } #post.published .metadata { background: #73965d; -} + } .document-menu .options { display: none; background: #667880; - -moz-transition: background 200ms linear; - -o-transition: background 200ms linear; - -webkit-transition: background 200ms linear; - transition: background 200ms linear; -} + -moz-transition: background 100ms linear; + -o-transition: background 100ms linear; + -webkit-transition: background 100ms linear; + transition: background 100ms linear; + } #post.published .document-menu .options { background: #90bb74; -} + } .document-menu-content { - width: 960px; + width: 800px; margin: 0 auto; color: #E7EEF2; font-weight: bold; position: relative; -} + } .document-menu-content .status { position: absolute; @@ -588,62 +798,84 @@ ul.site li a { height: 60px; background-image:url('images/sprite.png'); background-position: -290px -185px; -} + } #post.published .document-menu-content .status { background-position: -290px -285px; -} + } .document-menu-content .menu-item { background: rgba(0,0,0, 0.2); line-height: 40px; margin: 10px 0; -} + } .document-menu-content .menu-item state { background: none; -} + } -.document-menu-content .menu-item.preview { +.document-menu-content .menu-item.preview, .document-menu-content .menu-item.cheatsheet, .document-menu-content .menu-item.compose { + text-indent: -9999px; + overflow: hidden; background-image:url('images/sprite.png'); - background-position: -438px 15px; background-repeat: no-repeat; width: 40px; padding: 0; -} - -.document-menu-content .menu-item.preview.active { + margin-left: 1px; + border-radius: 0; + } + .document-menu-content .menu-item.cheatsheet { + background-position: -290px -486px; + -moz-border-radius: 5px 0px 0px 5px; + -webkit-border-radius: 5px 0px 0px 5px; + border-radius: 5px 0px 0px 5px; + } + .document-menu-content .menu-item.preview { + background-position: -438px 15px; + -moz-border-radius: 0px 5px 5px 0px; + -webkit-border-radius: 0px 5px 5px 0px; + border-radius: 0px 5px 5px 0px; + } + .document-menu-content .menu-item.compose { + background-position: -288px -538px; + } + +.document-menu-content .menu-item.preview.active, .document-menu-content .menu-item.cheatsheet.active, .document-menu-content .menu-item.compose.active { background-color: rgba(0,0,0, 0.6); -} + } .document-menu-content .menu-item.meta { background-image:url('images/sprite.png'); background-position: -288px 14px; padding-left: 35px; padding-right: 10px; -} + } .document-menu-content .menu-item.meta.active { background-color: rgba(0,0,0, 0.6); -} + } .document-menu-content a { color: #E7EEF2; -} + } + .document-menu-content a:active { + -webkit-box-shadow: inset 0px 0px 5px 0px rgba(0, 0, 0, .2); + box-shadow: inset 0px 0px 5px 0px rgba(0, 0, 0, .2); + } .menu-item { -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -} + } .menu-item:hover { background: rgba(0,0,0, 0.3); -} + } .document-menu-content .menu-item.meta { margin-left: 20px; -} + } .document-menu-content .filename input { font-family: Menlo, monospace; @@ -659,7 +891,7 @@ ul.site li a { -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -} + } .document-menu-content .filename .state { position: absolute; @@ -667,26 +899,26 @@ ul.site li a { top: 15px; width: 50px; height: 30px; -} + } .document-menu-content .filename .state.loading { background: url('images/ajax-loader.gif') center center no-repeat; -} + } .document-menu-content .filename .state.error { background-image:url('images/sprite.png'); background-position: -300px -200px; -} + } .document-menu-content .filename .state.success { background-image:url('images/sprite.png'); background-position: -300px -300px; -} + } .document-menu-content .filename input:hover, .document-menu-content .filename input:focus { background-color: rgba(0,0,0, 0.2); color: #e7eef2; -} + } .document-menu .options { position: absolute; @@ -695,18 +927,18 @@ ul.site li a { width: 200px; z-index: 3000; border-radius: 0 0 5px 5px; -} + } .document-menu .options .publish-state { padding: 0 20px; -} + } .document-menu .options .actions { background: rgba(255, 255, 255, 0.1); padding: 20px; border-radius: 0 0 5px 5px; -} + } .document-menu .options .actions .button { display: block; @@ -715,11 +947,11 @@ ul.site li a { -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -} + } .document-menu .options .actions .button:hover { background: rgba(0,0,0, 0.4); -} + } .document-menu-content .menu-item.save-state { background: none; @@ -739,17 +971,14 @@ ul.site li a { border-radius: 0px 4px 4px 0px; margin-left: 1px; } - -.document-menu-content .state .button.save:hover { background: rgba(0,0,0, 0.4); } + .document-menu-content .state .button.save:hover { background: rgba(0,0,0, 0.4); } .document-menu-content .save-state { margin-left: 20px; -} - -.document-menu-content .save-state:hover { - background: rgba(0,0,0, 0.2); -} - + } + .document-menu-content .save-state:hover { + background: rgba(0,0,0, 0.2); + } .document-menu-content .state .button { display: block; @@ -762,7 +991,7 @@ ul.site li a { line-height: 30px; height: 30px; padding: 0 12px; -} + } .document-menu-content .state .button.toggle-options { background-image: url('images/sprite.png'); @@ -773,23 +1002,36 @@ ul.site li a { margin: 0; border-radius: 3px 0 0 3px; background-color: rgba(0, 0, 0, .2); -} + } .document-menu-content .state .button:hover { - background-color: rgba(0,0,0, 0.4); -} + background-color: rgba(0, 0, 0, 0.4); + } .document-menu-content .state .button.inactive, .document-menu-content .state .button.inactive:hover { text-shadow: none; - background:#eee; - color:#bbb; - border-color:#dfdfdf; - box-shadow: none; -} + background: rgba(0, 0, 0, 0.1); + color: rgba(255, 255, 255, 0.5); + cursor: default; + } .document-menu-content .state .button.error, .document-menu-content .state .button.error:hover { - color: red; -} + background: #DB6F6F; + } + .document-menu-content .state .button.saving { + text-indent: -9999px; + overflow: hidden; + background-image: url('images/ajax-loader-unpublished.gif'); + background-repeat: no-repeat; + background-position: 25px 13px; + } + .published .document-menu-content .state .button.saving { + text-indent: -9999px; + overflow: hidden; + background-image: url('images/ajax-loader-published.gif'); + background-repeat: no-repeat; + background-position: 25px 13px; + } .document-menu-content .state .options { background: rgba(0,0,0, 0.3); @@ -799,7 +1041,7 @@ ul.site li a { border-radius: 5px; margin-left: 10px; padding: 8px; -} + } .document .metadata { overflow: hidden; @@ -810,22 +1052,22 @@ ul.site li a { -o-transition: background 100ms linear; -webkit-transition: background 100ms linear; transition: background 100ms linear; -} + } .document .metadata-content .CodeMirror { color: #F0F0F0; -} + } .document .metadata-content { padding: 20px 0px; - width: 960px; + width: 800px; margin: 0 auto; -} + } .document .metadata #raw_metadata { background: #444; color: #eee; -} + } .state p, .state .button-padding { @@ -843,112 +1085,208 @@ ul.site li a { min-height: 400px; position: relative; overflow:hidden; -} + } .document .surface { - width: 200%; + width: 300%; -moz-transition: margin-left 300ms linear; -o-transition: margin-left 300ms linear; -webkit-transition: margin-left 300ms linear; transition: margin-left 300ms linear; - margin-left: 0%; + margin-left: -100%; overflow: hidden; -} + } .document .surface.preview { - margin-left: -100%; - overflow:hidden; -} + margin-left: -200%; + } +.document .surface.cheatsheet { + margin-left: 0%; + } + +.document .cheatsheet-wrapper { + padding-top: 20px; + width: 33.33%; + float: left; + position: relative; + } .document .content-wrapper { padding-top: 20px; - width: 50%; + width: 33.33%; float: left; position: relative; -} + } .document .content-preview-wrapper { position: relative; padding-top: 20px; - width: 50%; + width: 33.33%; float: left; -} + word-wrap: break-word; + } .document .content-preview, .document .content { padding: 20px 0px; - width: 960px; + width: 800px; margin: 0 auto; -} + } + +.document .cheatsheet-wrapper .content { + width: 800px; + + margin: 0 auto; + overflow: auto; + } + +.document .cheatsheet-wrapper .content .left { + float: left; + width: 450px; + } + +.document .cheatsheet-wrapper .content .right { + float: right; + width: 450px; + } -.document .document-preview { +.document .cheatsheet-wrapper .content h2 { + font-weight: bold; + padding: 5px 0; + margin: 0; +} +.document .cheatsheet-wrapper .content pre { + border: 1px solid #C3CCD0; + box-shadow: 0 1px 0 rgba(255, 255, 255, 0),0 0 10px rgba(0, 0, 0, 0.1); + background: #fff; + line-height: 1.5em; + font-size: 17px; + padding: 10px; + font-family: Menlo, monospace !important; } /* ------------------------------------------ - Rendered Markdown + Article ---------------------------------------------*/ -.post-content { +.article-navigation { + width: 800px; + margin: 0 auto; + margin-top: 30px; + overflow: auto; +} + +.article-navigation .article-link { + display: block; + float: left; + height: 30px; + width: 30px; + + -moz-border-radius: 15px; + -webkit-border-radius: 15px; + border-radius: 15px; + + background: rgba(0,0,0, 0.3); + + border: 3px solid #fff; + margin-right: 10px; +} + +.article-link:hover, .article-link.active { + background: #078FA2; +} + +.article-wrapper { background: #fff; - padding: 100px; + padding-bottom: 50px; +} + +.intro { + margin-top: 50px; + background: #E0E7EB; + /*background: #fff;*/ + padding: 40px; + padding-bottom: 20px; + + border-top: 1px solid #c3ccd0; + border-bottom: 1px solid #c3ccd0; +} + +.intro .title { + width: 800px; + margin: 20px auto; + font-size: 36px; + margin-bottom: 10px; + font-weight: bold; + padding-bottom: 10px; +} + +.intro .abstract { + width: 800px; + font-size: 20px; + margin: 20px auto; +} + +.intro .meta { + width: 800px; + margin: 20px auto; + padding-top: 20px; +} + +.post-content { + padding: 20px 0; font-family: 'OpenSans', sans-serif; font-weight: normal; font-size: 16px; - line-height: 1.5em; - border: 1px solid #C3CCD0; - box-shadow: 0 1px 0 rgba(255, 255, 255, 0),0 0 10px rgba(0, 0, 0, 0.1); } -.post-content .title { - font-size: 36px; +.post-content * { + line-height: 1.2em; + } + +.post-content p, .post-content ul, .post-content ol, .post-content li { line-height: 1.5em; - margin-bottom: 20px; - font-weight: bold; - border-bottom: 1px solid #C3CCD0; - padding-bottom: 20px; } -.post-content h1 { font-size: 36px; margin-bottom: 20px;} -.post-content h2 { font-size: 24px; margin-bottom: 20px;} + +.post-content h1 { font-size: 36px; margin: 10px 0 20px 0; } +.post-content h2 { font-size: 24px; margin: 10px 0 20px 0; font-weight: bold; padding: 0; } .post-content h3, .post-content h4, .post-content h5, .post-content h6 { + text-transform: none; font-size: 18px; font-weight: bold; - margin-bottom: 10px; + margin: 10px 0 5px 0; } - + .post-content blockquote { padding-left: 19px; border-left: 1px solid #C3CCD0; font-style: italic; -} + margin-bottom: 20px; + } .post-content ul { margin-left: 0px; padding-left: 20px; list-style: disc; -} + } .post-content ol { margin-left: 0px; padding-left: 20px; list-style: decimal; -} + } .post-content img { max-width: 100%; -} - -.post-content .meta { - margin-top: 30px; - font-size: 12px; - text-transform: uppercase; - border-top: 1px solid #C3CCD0; -} + } .post-content a { - border-bottom: 1px dashed #C3CCD0;} + border-bottom: 1px dashed #C3CCD0; + font-weight: normal; + } .post-content p { margin-bottom: 20px; @@ -960,95 +1298,95 @@ ul.site li a { .post-content code { font-family: Menlo, monospace; + padding: 4px; + border-radius: 3px; font-size: 12px; - zoom: 1; - color: #E7EEF2; -} + border: 1px solid #C3CCD0; + } .post-content pre { - background: #526066; padding: 10px; -} + border-radius: 3px; + border: 1px solid #C3CCD0; + } .post-content pre code { border: none; -} + } .post-content hr { margin: 5px 0 4px 0; border-top: 1px solid #C3CCD0; border-bottom: 0; border-radius: 5px; -} + } /* ------------------------------------------ About ---------------------------------------------*/ #container .about { - width: 960px; + width: 800px; margin: 30px auto; background: white; -} + } /* ------------------------------------------ Logbook ---------------------------------------------*/ .help { - width: 960px; - margin: 30px auto; -} + width: 800px; + margin: 0px auto; + } +.help h2 { + background: url('images/sprite.png') -110px -1042px no-repeat; + } + .help.post-content h2 { background: none;} + .help .articles { overflow: auto; - -} + } .help .articles .article { - + border-radius: 4px; + border: #c3ccd0 1px solid; overflow: hidden; - - /*background: rgba(255,255,255, 0.6);*/ - /*background: #E0E7EB;*/ - - - -moz-transition: opacity 200ms linear; - -o-transition: opacity 200ms linear; - -webkit-transition: opacity 200ms linear; - transition: opacity 200ms linear; + background-color: #F2F6F8; + box-shadow: 0 1px 0 rgba(255, 255, 255, 0),0 0 10px rgba(0, 0, 0, 0.1); font-size: 16px; position: relative; - margin-right: 40px; - margin-top: 20px; - width: 200px; - height: 200px; + margin: 20px 20px 0px 0; + width: 220px; + height: 250px; color: #444; display: block; float: left; - opacity: 0.8; - -} + padding: 10px; + } + .help .articles .article:hover { + background-color: white; + } .help .articles .article .title { padding: 5px 0; -} + } -.help .articles .article .descr { - color: #7A8387; +.help .articles .article p { font-size: 12px; -} - -.help .articles .article:hover { - opacity: 1.0; -} + font-weight: normal; + } +.help .articles .article img { + border: #c3ccd0 1px solid; + } .help-article { - width: 960px; + width: 800px; margin: 30px auto; -} + } /* ------------------------------------------ Notifications @@ -1056,17 +1394,36 @@ ul.site li a { #notification .notification{ text-align: center; - width: 600px; - margin: 60px auto; + width: 440px; + margin: 60px auto 0 auto; padding: 20px; - font-size: 30px; - line-height: 34px; + font-size: 24px; + line-height: 1.5em; font-weight: bold; -} + } + +#notification a { + background: #516066; + padding: 5px; + color: white; + position: relative; + display: block; + width: 100px; + height: 30px; + margin: 0px auto; + -moz-border-radius: 5px; + -webkit-border-radius: 5px; + border-radius: 5px; + text-transform: uppercase; + text-align: center; + font-size: 11px; + font-weight: bold; + } + #notification a:hover { background: #3d4548; } ul.form li { position: relative; -} + } label.error { color: #E73C58; @@ -1074,7 +1431,7 @@ label.error { right: 5px; top: 23px; font-size: 12px; -} + } /* ------------------------------------------ Class Helpers @@ -1096,7 +1453,7 @@ label.error { height: 20px; display: block; text-indent: -999em; -} + } .fl { float: left; } .fr { float: right; } .clear { clear: both; } @@ -1107,7 +1464,6 @@ label.error { .scrolling { overflow: auto; } .clipping { overflow: hidden; } - /* ------------------------------------------ ios and small screen alterations ---------------------------------------------*/ diff --git a/index.html b/index.html index 2b3582d99..92383fee0 100644 --- a/index.html +++ b/index.html @@ -2,24 +2,25 @@ layout: default --- -
-

Help

+
+ {% for item in site.categories.articles limit:40 offset:0 %} + + + + {% endfor %} +
-
- {% for item in site.categories.articles limit:40 offset:0 %} - - {% if item.image %} - - {% endif %} +{% for item in site.categories.articles limit:1 offset:0 %} +
+
{{item.title}}
+
{{item.abstract}}
+
Posted by {{item.author}} on {{ item.date | date: "%B %d, %Y" }}
+
-
- {{item.title}} -
-
- {{item.descr}} -
- - {% endfor %} +
+
+ {{ item.content }} +
-
+{% endfor %}