A bunch of style updates. Switching to bootstrap carousel.
authorspf13 <steve.francia@gmail.com>
Fri, 10 Jan 2014 17:48:55 +0000 (12:48 -0500)
committerspf13 <steve.francia@gmail.com>
Sat, 11 Jan 2014 02:29:58 +0000 (21:29 -0500)
docs/layouts/chrome/includes.html
docs/layouts/index.html
docs/static/static/css/HPstyles.css
docs/static/static/css/styles.css
docs/static/static/js/unslider.min.js [deleted file]

index 7adf0255c4c5ab202e552a4bf4129df77e0cf79a..0bfb4f415100b80a2f2916a940ef02fd47859bb0 100644 (file)
@@ -1,3 +1,4 @@
     <link href="/static/css/bootstrap.min.css" rel="stylesheet"/>
     <link href="/static/css/styles.css" rel="stylesheet"/>
     <link href="/static/css/hugofont.css" rel="stylesheet"/>
+    <link href='http://fonts.googleapis.com/css?family=Arbutus+Slab&family=Cabin:600&family=Source+Code+Pro' rel='stylesheet' type='text/css'>
index a16278d6411929fc3e91bca88654cda41a16ad77..f3d2b781432592bedce3c8f39aefe91708184e82 100755 (executable)
@@ -11,6 +11,7 @@
     <!-- Bootstrap core CSS -->\r
     <link href="/static/css/bootstrap.min.css" rel="stylesheet">\r
 \r
+    <link href='http://fonts.googleapis.com/css?family=Arbutus+Slab&family=Cabin:600&family=Source+Code+Pro' rel='stylesheet' type='text/css'>\r
     <!-- Add custom CSS here -->\r
     <link href="/static/css/HPstyles.css" rel="stylesheet">\r
     <link href="/static/css/hugofont.css" rel="stylesheet">\r
@@ -24,9 +25,9 @@
         <h1>Hugo</h1>\r
         <h3>The <em>Fast and Flexible</em> Static Site Generator</h3>\r
         <br>\r
-        <a href="#intro" class="btn btn-clear btn-lg">LEARN MORE</a>\r
-        <a href="https://github.com/spf13/hugo/releases" class="btn btn-success btn-lg">DOWNLOAD <i class="icon-arrow-down"></i></a><br>\r
-        <a href="/overview/quickstart/" class="btn btn-info btn-lg">DOCUMENTATION</a>\r
+        <a href="#intro" class="btn btn-clear btn-lg">learn more</a>\r
+        <a href="https://github.com/spf13/hugo/releases" class="btn btn-success btn-lg">download <i class="icon-arrow-down"></i></a><br>\r
+        <a href="/overview/quickstart/" class="btn btn-info btn-lg">documentation</a>\r
       </div>\r
     </div>\r
     <!-- /Full Page Image Header Area -->\r
                   <i class="point-icon icon-windows8"></i>\r
                 <h2>Run Anywhere</h2>\r
                 <p class="lead">\r
-                    Hugo is written in pure go. It is packaged as a single binary for easy installation.\r
-                    <b>Hugo doesn&#39;t depend on administrative privileges, databases, runtimes, interpreters\r
-                    or packages</b>. Hugo is quite possibly the easiest to install software you&#39;ve ever used.\r
-                    Simply download and run.\r
+                    Hugo is written in pure go. It is packaged as a single binary for easy installation.
+                    <b>Hugo doesn&#39;t depend on administrative privileges, databases, runtimes, interpreters
+                    or packages</b>. Hugo is quite possibly the easiest to install software you&#39;ve ever used.
+                    Simply download and run.
                 </p>\r
               </div>\r
             </div>\r
@@ -84,8 +85,8 @@
 \r
                 Hugo is written for speed and performance. Great care has been\r
                 taken to ensure that Hugo build time is as short as possible.\r
-                While many factors contribute (cpu, disk speed, # of indexes)\r
-                the vast majority of websites render in less than a second.\r
+                While many factors contribute (cpu, disk speed, # of indexes)
+                the vast majority of websites render in less than a second.
                 </p>\r
               </div>\r
             </div>\r
                 <h2>Flexible</h2>\r
                 <p class="lead">\r
 \r
-                Hugo is designed to work how you do. Declare your own content\r
-                types. Define your own meta data in YAML, TOML or JSON.\r
+                Hugo is designed to work how you do. Declare your own content
+                types. Define your own meta data in YAML, TOML or JSON.
                 Organize your content however you want with any URL structure.\r
-                Use indexes to group your content however you want. Best of all\r
-                this is all done with virtually no configuration, Hugo\r
+                Use indexes to group your content however you want. Best of all
+                this is all done with virtually no configuration, Hugo
                 just works.\r
 \r
                 </p>\r
         <div class="callout">\r
           <div class="container">\r
             <div class="row">\r
-              <div class="col-md-10 col-md-offset-1 text-center">\r
+              <div class="col-md-12 text-center">\r
                   <i class="callout-icon icon-circlestar"></i>\r
-                  <div class="banner">\r
-                      <ul>\r
-                          <li><blockquote class="twitter-tweet" lang="en"><p>Hugo is super-rad. </p>&mdash; David Gay (@oddshocks) <a href="https://twitter.com/oddshocks/statuses/405083217893421056">November 25, 2013</a></blockquote>\r
-</li>\r
-                          <li><blockquote class="twitter-tweet" data-conversation="none" lang="en"><p>I had a play with Hugo and it was good, uses Markdown files for content</p>&mdash; David Caunt (@dcaunt) <a href="https://twitter.com/dcaunt/statuses/406466996277374976">November 29, 2013</a></blockquote> </li>\r
-                          <li><blockquote class="twitter-tweet" lang="en"><p>Even as a long-time Octopress fan, I’ve gotta admit that this project Hugo looks very very cool</p>&mdash; Douglas Stephen (@DougStephenJr) <a href="https://twitter.com/DougStephenJr/statuses/364512471660249088">August 5, 2013</a></blockquote></li>\r
-                          <li><blockquote class="twitter-tweet" lang="en"><p>A static site generator without the long build times? Yes, please! </p>&mdash; Josh Matz (@joshmatz) <a href="https://twitter.com/joshmatz/statuses/364437436870696960">August 5, 2013</a></blockquote> </li>\r
-                          <li><blockquote class="twitter-tweet" lang="en"><p>Finally someone builds me my own static site generator </p>&mdash; Hugo Rodger-Brown (@hugorodgerbrown) <a href="https://twitter.com/hugorodgerbrown/statuses/364417910153818112">August 5, 2013</a></blockquote></li>\r
-                          <li><blockquote class="twitter-tweet" lang="en"><p>I&#39;m loving the static site generator renaissance we are currently enjoying. Hugo is new, looks great, written in Go</p>&mdash; Jim Biancolo (@jimbiancolo) <a href="https://twitter.com/jimbiancolo/statuses/408678420348813314">December 5, 2013</a></blockquote>\r
-</li>\r
-                          <li><blockquote class="twitter-tweet" data-cards="hidden" lang="en"><p>Good work on Hugo, I&#39;m impressed with the speed!</p>&mdash; Ludovic Chabant (@ludovicchabant) <a href="https://twitter.com/ludovicchabant/statuses/408806199602053120">December 6, 2013</a></blockquote></li>\r
-                          <li><blockquote class="twitter-tweet" data-cards="hidden" lang="en"><p>Checking out Hugo; Loving it so far. Like Jekyll but not so blog-oriented and written in golang</p>&mdash; Jose Gonzalvo (@jgonzalvo) <a href="https://twitter.com/jgonzalvo/statuses/408177855819173888">December 4, 2013</a></blockquote></li>\r
-                      </ul>\r
+                  <p></p>\r
+              </div>\r
+            </div>\r
+            <div class="row">\r
+              <div class="col-md-12 text-center">\r
+\r
+                <div id="carousel-quotes" class="carousel slide" data-ride="carousel">\r
+                  <!-- Indicators -->\r
+                  <ol class="carousel-indicators">\r
+                    <li data-target="#carousel-quotes" data-slide-to="0" class="active"></li>\r
+                    <li data-target="#carousel-quotes" data-slide-to="1"></li>\r
+                    <li data-target="#carousel-quotes" data-slide-to="2"></li>\r
+                    <li data-target="#carousel-quotes" data-slide-to="3"></li>\r
+                    <li data-target="#carousel-quotes" data-slide-to="4"></li>\r
+                    <li data-target="#carousel-quotes" data-slide-to="5"></li>\r
+                    <li data-target="#carousel-quotes" data-slide-to="6"></li>\r
+                    <li data-target="#carousel-quotes" data-slide-to="7"></li>\r
+                  </ol>\r
+\r
+                  <!-- Wrapper for slides -->\r
+                  <div class="carousel-inner">\r
+                      <div class="item active"> <blockquote><p>Hugo is super-rad. </p>&mdash; David Gay (@oddshocks) <a href="https://twitter.com/oddshocks/statuses/405083217893421056">November 25, 2013</a></blockquote> </div>\r
+                      <div class="item"> <blockquote><p>I had a play with Hugo and it was good, uses Markdown files for content</p>&mdash; David Caunt (@dcaunt) <a href="https://twitter.com/dcaunt/statuses/406466996277374976">November 29, 2013</a></blockquote> </div>\r
+                      <div class="item"> <blockquote><p>Even as a long-time Octopress fan, I’ve gotta admit that this project Hugo looks very very cool</p>&mdash; Douglas Stephen (@DougStephenJr) <a href="https://twitter.com/DougStephenJr/statuses/364512471660249088">August 5, 2013</a></blockquote> </div>\r
+                      <div class="item"> <blockquote><p>A static site generator without the long build times? Yes, please! </p>&mdash; Josh Matz (@joshmatz) <a href="https://twitter.com/joshmatz/statuses/364437436870696960">August 5, 2013</a></blockquote> </div>\r
+                      <div class="item"> <blockquote><p>Finally someone builds me my own static site generator </p>&mdash; Hugo Rodger-Brown (@hugorodgerbrown) <a href="https://twitter.com/hugorodgerbrown/statuses/364417910153818112">August 5, 2013</a></blockquote> </div>\r
+                      <div class="item"> <blockquote><p>I&#39;m loving the static site generator renaissance we are currently enjoying. Hugo is new, looks great, written in Go</p>&mdash; Jim Biancolo (@jimbiancolo) <a href="https://twitter.com/jimbiancolo/statuses/408678420348813314">December 5, 2013</a></blockquote> </div>\r
+                      <div class="item"> <blockquote><p>Good work on Hugo, I&#39;m impressed with the speed!</p>&mdash; Ludovic Chabant (@ludovicchabant) <a href="https://twitter.com/ludovicchabant/statuses/408806199602053120">December 6, 2013</a></blockquote> </div>\r
+                      <div class="item"> <blockquote><p>Checking out Hugo; Loving it so far. Like Jekyll but not so blog-oriented and written in golang</p>&mdash; Jose Gonzalvo (@jgonzalvo) <a href="https://twitter.com/jgonzalvo/statuses/408177855819173888">December 4, 2013</a></blockquote> </div>\r
                   </div>\r
+\r
+                </div>\r
               </div>\r
             </div>\r
           </div>\r
                     <li><a href="http://github.com/spf13/hugo" class="icon-octocat icon-2x"></a></li>\r
                 </ul>\r
                 <hr>\r
-                <p>Copyright &copy; Steve Francia 2013</p>\r
+                <p>Copyright &copy; Steve Francia 2013</p>
               </div>\r
             </div>\r
           </div>\r
   <!-- Bootstrap core JavaScript -->\r
   <!-- Placed at the end of the document so the pages load faster -->\r
   <script src="/static/js/jquery.js"></script>\r
-  <script src="/static/js/unslider.min.js"></script>\r
   <script src="/static/js/bootstrap.min.js"></script>\r
   <script>\r
     $(function() {\r
           }\r
         });\r
       });\r
-    $(function() {\r
-            $('.banner').unslider({\r
-                speed: 300,               //  The speed to animate each slide (in milliseconds)\r
-                delay: 2000,              //  The delay between slide animations (in milliseconds)\r
-                keys: true,               //  Enable keyboard (left, right) arrow shortcuts\r
-                dots: true,               //  Display dot navigation\r
-                fluid: true              //  Support responsive design. May break non-responsive designs\r
-                });\r
-        });\r
+    $('.carousel').carousel({ interval: 4500 })\r
     </script>\r
 \r
     {{ template "chrome/analytics.html" . }}\r
index 07b91b2a40ee3dd6cef08a3c50b327a13835016f..474a9610fb3f21d10757db9f87dd6473eb05259c 100644 (file)
@@ -7,6 +7,16 @@ body {
     letter-spacing: 0.5px;\r
 }\r
 \r
+h1, h2, h3, h4, h5, h6 {\r
+    font-family: 'Cabin', "Helvetica Neue", "Helvitica", "Serif";\r
+}\r
+\r
+body {\r
+\r
+    font-family: 'Arbutus Slab', "Helvetica Neue", "Helvitica", "Serif" !important;\r
+    line-height: 1.6;\r
+}\r
+\r
 .vert-text {\r
     display: table-cell;\r
     vertical-align: middle;\r
@@ -107,11 +117,11 @@ and (orientation : landscape) {
 \r
 .counterpoint {\r
     padding: 50px 0;\r
-    background-color: white;\r
+    background-color: rgb(255, 252, 244);\r
 }\r
 \r
 .point {\r
-    background: rgb(22, 203, 230);\r
+    background: rgb(96,210,211);\r
     padding: 50px 0;\r
     color: #ffffff;\r
 }\r
@@ -120,6 +130,11 @@ and (orientation : landscape) {
     margin-bottom: 15px;\r
 }\r
 \r
+.point h2, .counterpoint h2 {\r
+    font-size: 32pt;\r
+    line-height: 1.7;\r
+}\r
+\r
 i.callout-icon, i.point-icon, i.lead-icon {\r
     border-radius: 50%;\r
     display: inline-block;\r
@@ -174,32 +189,13 @@ i.service-icon:hover {
     display: table;\r
     height: 420px;\r
     width: 100%;\r
-    background-color: rgb(47, 197, 47);\r
+    background-color: rgb(118,156,172);\r
     padding: 50px 0;\r
     color: #ffffff;\r
 }\r
 \r
-.banner { position: relative; overflow: auto; }\r
-.banner li { list-style: none; font-size:28px; padding: 1.7em 3em 0 3em; font-weight:200; }\r
-.banner ul li { float: left; }\r
-\r
-.banner blockquote {\r
-    border-left: 0;\r
-    font-size: 20px;\r
-    font-weight:100;\r
-}\r
-\r
-.banner blockquote p {\r
-    font-size: 34px;\r
-    text-shadow: rgba(0,0,0,0.5) 2px 2px 5px;\r
-}\r
-\r
-.banner blockquote > a {\r
-    display: block;\r
-}\r
-\r
 i.callout-icon:hover {\r
-    color: rgb(47, 197, 47);\r
+    color: rgb(249, 176, 190);\r
     border: 3px solid #fff;\r
     background: #fff;\r
 }\r
@@ -272,15 +268,15 @@ footer a:hover {
     text-decoration: none;\r
 }\r
 \r
-div.point a {\r
-    color: #0a5175;\r
+.point a, .counterpoint a {\r
+    color: rgb(7,162,166);\r
 }\r
 \r
 /* Bootstrap Addons */\r
 \r
 \r
 .btn-clear {\r
-    color: #444;\r
+    color:#888;\r
     background-color: rgba(255, 255, 255, 0.5);\r
     border-color: #FFF;\r
 }\r
@@ -300,3 +296,40 @@ div.point a {
 .open .dropdown-toggle.btn-clear {\r
     background-image: none;\r
 }\r
+\r
+\r
+div#carousel-quotes {\r
+    width:100%;\r
+}\r
+\r
+.carousel-inner > .item {\r
+    height: 16em;\r
+    font-size: 140%;\r
+}\r
+\r
+@media all and (max-width: 685px) {\r
+    .carousel-inner > .item {\r
+        height: 22em;\r
+    }\r
+}\r
+\r
+@media all and (max-width: 1200px) and (min-width: 686px) {\r
+    .carousel-inner > .item {\r
+        height: 18em;\r
+    }\r
+}\r
+\r
+.slide blockquote {\r
+    border-left: 0;\r
+}\r
+\r
+.slide blockquote p {\r
+    font-size: 200%;\r
+    text-shadow: rgba(0,0,0,0.5) 2px 2px 5px;\r
+}\r
+\r
+.slide blockquote > a {\r
+    display: block;\r
+    color: rgb(249, 176, 190);\r
+}\r
+\r
index 4424e78856c9601de03fd871372838415629e933..cf382bbfe13a4dbad57e1df5b2392f389dd01575 100755 (executable)
@@ -2,19 +2,52 @@ body {
     background-color: rgb(253, 253, 251);\r
     padding-top: 70px;\r
     letter-spacing: 0.3px;\r
+    font-family: 'Arbutus Slab', "Helvetica Neue", "Helvitica", "Serif";\r
+}\r
+\r
+#main.container {\r
+    font-size: 21px;\r
+    line-height: 175%;\r
 }\r
 \r
 \r
 h1, h2, h3 {\r
+    padding-bottom: .3em;\r
+    padding-top: 1.4em;\r
+    margin-bottom: .7em;\r
+}\r
+\r
+h1, h2, h3, h4, h5, h6 {\r
     color: rgb(25,71,86);\r
+    font-family: 'Cabin', "Helvetica Neue", "Helvitica", "Serif";\r
+}\r
+\r
+h1 {\r
+    font-size: 46px;\r
+    padding-top: .3em;\r
+}\r
+\r
+h1, h2 {\r
+    border-bottom: 1px solid #CCC;\r
+}\r
+\r
+pre {\r
+    background-color: #022b34;\r
+    color: #e6e6e6;\r
+    font-family: 'Source Code Pro', sans-serif;\r
+    font-size: 17px;\r
+    line-height: 1.2;\r
+    -webkit-border-radius: 12px;\r
+    -moz-border-radius: 12px;\r
+    border-radius: 12px;\r
 }\r
 \r
 a {\r
-    color: rgb(0,140,158);\r
+    color: rgb(96,210,211);\r
 }\r
 \r
 a:hover {\r
-    color: rgb(21,201,239);\r
+    color: rgb(15, 166, 188);\r
 }\r
 \r
 #footer {\r
@@ -22,7 +55,7 @@ a:hover {
 }\r
 \r
 nav.navbar {\r
-    background: none repeat scroll 0% 0% rgb(22, 203, 230);\r
+    background: none repeat scroll 0% 0% rgb(96,210,211);\r
     border-top: 4px solid rgb(15, 166, 188);\r
     border-bottom: 1px solid rgb(15, 166, 188);\r
     opacity: .97;\r
@@ -76,7 +109,9 @@ nav.navbar {
 }\r
 \r
 \r
-\r
+.highlight {\r
+    background-color: #fdfdfb !important;\r
+}\r
 \r
 #main table{width:100%;margin-bottom:20px;}#main table thead>tr>th,#main table tbody>tr>th,#main table tfoot>tr>th,#main table thead>tr>td,#main table tbody>tr>td,#main table tfoot>tr>td{padding:8px;line-height:1.428571429;vertical-align:top;border-top:1px solid #dddddd;}\r
 #main table thead>tr>th{vertical-align:bottom;border-bottom:2px solid #dddddd;}\r
diff --git a/docs/static/static/js/unslider.min.js b/docs/static/static/js/unslider.min.js
deleted file mode 100644 (file)
index 4298701..0000000
+++ /dev/null
@@ -1 +0,0 @@
-(function(e,t){if(!e)return t;var n=function(){this.el=t;this.items=t;this.sizes=[];this.max=[0,0];this.current=0;this.interval=t;this.opts={speed:500,delay:3e3,complete:t,keys:!t,dots:t,fluid:t};var n=this;this.init=function(t,n){this.el=t;this.ul=t.children("ul");this.max=[t.outerWidth(),t.outerHeight()];this.items=this.ul.children("li").each(this.calculate);this.opts=e.extend(this.opts,n);this.setup();return this};this.calculate=function(t){var r=e(this),i=r.outerWidth(),s=r.outerHeight();n.sizes[t]=[i,s];if(i>n.max[0])n.max[0]=i;if(s>n.max[1])n.max[1]=s};this.setup=function(){this.el.css({overflow:"hidden",width:n.max[0],height:this.items.first().outerHeight()});this.ul.css({width:this.items.length*100+"%",position:"relative"});this.items.css("width",100/this.items.length+"%");if(this.opts.delay!==t){this.start();this.el.hover(this.stop,this.start)}this.opts.keys&&e(document).keydown(this.keys);this.opts.dots&&this.dots();if(this.opts.fluid){var r=function(){n.el.css("width",Math.min(Math.round(n.el.outerWidth()/n.el.parent().outerWidth()*100),100)+"%")};r();e(window).resize(r)}if(this.opts.arrows){this.el.parent().append('<p class="arrows"><span class="prev">←</span><span class="next">→</span></p>').find(".arrows span").click(function(){e.isFunction(n[this.className])&&n[this.className]()})}if(e.event.swipe){this.el.on("swipeleft",n.prev).on("swiperight",n.next)}};this.move=function(t,r){if(!this.items.eq(t).length)t=0;if(t<0)t=this.items.length-1;var i=this.items.eq(t);var s={height:i.outerHeight()};var o=r?5:this.opts.speed;if(!this.ul.is(":animated")){n.el.find(".dot:eq("+t+")").addClass("active").siblings().removeClass("active");this.el.animate(s,o)&&this.ul.animate(e.extend({left:"-"+t+"00%"},s),o,function(i){n.current=t;e.isFunction(n.opts.complete)&&!r&&n.opts.complete(n.el)})}};this.start=function(){n.interval=setInterval(function(){n.move(n.current+1)},n.opts.delay)};this.stop=function(){n.interval=clearInterval(n.interval);return n};this.keys=function(t){var r=t.which;var i={37:n.prev,39:n.next,27:n.stop};if(e.isFunction(i[r])){i[r]()}};this.next=function(){return n.stop().move(n.current+1)};this.prev=function(){return n.stop().move(n.current-1)};this.dots=function(){var t='<ol class="dots">';e.each(this.items,function(e){t+='<li class="dot'+(e<1?" active":"")+'">'+(e+1)+"</li>"});t+="</ol>";this.el.addClass("has-dots").append(t).find(".dot").click(function(){n.move(e(this).index())})}};e.fn.unslider=function(t){var r=this.length;return this.each(function(i){var s=e(this);var u=(new n).init(s,t);s.data("unslider"+(r>1?"-"+(i+1):""),u)})}})(window.jQuery,false)
\ No newline at end of file