Permalink
Browse files

more improvements to popovers - close #34

  • Loading branch information...
balupton committed Feb 1, 2013
1 parent 4693165 commit 58d3b6fad0806e126ef8478f220017b16c7ae7f9
Showing with 60 additions and 60 deletions.
  1. +3 −3 package.json
  2. +10 −7 site/src/documents/index.html
  3. +46 −49 site/src/documents/styles/style.css.styl
  4. +1 −1 site/src/files/vendor/history.js
View
@@ -6,11 +6,11 @@
"homepage": "https://github.com/bevry/docpad-website",
"author": "Bevry Pty Ltd <us@bevry.me> (http://bevry.me)",
"maintainers": [
- "Benjamin Lupton <b@lupton.cc> (http://balupton.com)"
+ "Benjamin Lupton <b@lupton.cc> (https://github.com/balupton)"
],
"contributors": [
- "Benjamin Lupton <b@lupton.cc> (http://balupton.com)",
- "Chase Colman <chase@infinityatlas.com> (http://thedev.infinityatlas.com)"
+ "Benjamin Lupton <b@lupton.cc> (https://github.com/balupton)",
+ "Chase Colman <chase@infinityatlas.com> (https://github.com/chase)"
],
"bugs": {
"url": "https://github.com/bevry/docpad-website/issues"
@@ -9,34 +9,37 @@ <h1>DocPad Sets You Free</h1>
<li class="versioning">
<a class="hover-link" href="#">
<span class="title">Versioning</span>
- <span class="image"><span class="popover">
- Content is versioned by the tools you're already use to. Git, SVN, Mercurial.
- </span></span>
+ <span class="popover">Use the versioning tools you're already use to.</span>
+ <span class="image"></span>
</a>
</li>
<li class="skeletons">
<a class="hover-link" href="/docs/skeletons">
<span class="title">Pre-Built Skeletons</span>
- <span class="image"><span class="popover">Have a fully functional website up in seconds</span></span>
+ <span class="popover">Have a fully functional website up in seconds</span>
+ <span class="image"></span>
</a>
</li>
<li class="language">
<a class="hover-link" href="/docs/intro">
<span class="title">Language Agnostic</span>
- <span class="image"><span class="popover">Work in CoffeeScript, Stylus, PHP, Ruby, and more.</span></span>
+ <span class="popover">Work in CoffeeScript, Stylus, PHP, Ruby, and more.</span>
+ <span class="image"></span>
</a>
<div class="title"></div>
</li>
<li class="deploys">
<a class="hover-link" href="/docs/deploy">
<span class="title">Simple Deploys</span>
- <span class="image"><span class="popover">Push to Heroku, Amazon S3, GitHub Pages, or any other host.</span></span>
+ <span class="popover">Push to Heroku, Amazon S3, GitHub Pages, or any other host.</span>
+ <span class="image"></span>
</a>
</li>
<li class="plugins">
<a class="hover-link" href="/docs/plugins">
<span class="title">Powerful Plugins</span>
- <span class="image"><span class="popover">Use the dozens available to transform your content.</span></span>
+ <span class="popover">Use the dozens available to transform your content.</span>
+ <span class="image"></span>
</a>
<div class="title"></div>
</li>
@@ -1,3 +1,7 @@
+---
+standalone: true
+---
+
// Coded in Stylus: http://learnboost.github.com/stylus/
// ====================================
@@ -113,8 +117,8 @@ body
font-smooth: always
-webkit-font-smoothing: antialiased
- color-profile: sRGB
- rendering-intent: auto
+ color-profile: sRGB
+ rendering-intent: auto
text-rendering: optimizeLegibility
nav
@@ -401,13 +405,11 @@ nav li
line-height: 1.2em
list-style: none
padding: 3em 0 1em
- width: 90%
- margin: 0 auto
+ wrapper(100%)
li
- display: inline-block
- margin: .25em 1%
- width: 17%
+ column(5)
+ padding: 1em 0
position: relative
span
@@ -434,7 +436,6 @@ nav li
.popover
position: absolute
left: 0
- margin: .75em -2%
z-index: 3
background: white
@@ -767,17 +768,14 @@ nav li
// Write your responsive layout styles here
// Below is merely an example of how this should work
-@media screen and (max-width: 1024px)
- // Shrink splash overview
+@media screen and (max-width: 1280px)
+ // Shrink features even more
.splash
.overview
li
- width: 13%
- margin: 0 3%
-
- .popover
- margin: .5em -10%
+ zoom: 0.9
+@media screen and (max-width: 1024px)
// Remove side padding
.container
width: 100%
@@ -787,6 +785,14 @@ nav li
.sidebar
left: 0
+ // Shrink features even more
+ .splash
+ .overview
+ li
+ column(4)
+ display: inline-block
+ float: none
+
// Remove margin about the bottombar
.bottombar
margin-top: 2em
@@ -802,13 +808,6 @@ nav li
top: -1000px
@media screen and (max-width: 960px)
- // Shrink splash overview
- .splash
- .overview
- li
- width: 17%
- margin: 0 4%
-
// Reduce doc columns
.docs
.list-menu
@@ -830,6 +829,13 @@ nav li
width: 23%
margin: 0 1%
+ .splash
+ .overview
+ li
+ margin: 0 3%
+ .image
+ zoom: 0.8
+
@media screen and (max-width: 768px)
// Reduce doc columns per row to 2
.docs
@@ -874,22 +880,7 @@ nav li
.links
margin: 0
-
- // Shrink features even more
- .splash
- .overview
- li
- .image
- zoom: 0.75
-
@media screen and (max-width: 650px)
- // Shrink features even more
- .splash
- .overview
- li
- .image
- zoom: 0.6
-
// Remove sidebar
.sidebar
display: none
@@ -901,6 +892,15 @@ nav li
width: 100%
.splash
font-size: 80%
+ .overview
+ li
+ column(4)
+ display: inline-block
+ float: none
+ padding: 0 0 2em
+ .image
+ zoom: 0.6
+
.block
h2
margin-top: 3em
@@ -917,21 +917,18 @@ nav li
float: none
-@media screen and (max-width: 450px)
- // Shrink features even more
+@media screen and (max-width: 560px)
.splash
- section
- margin: 2em 0
.overview
- padding: 0
- width: 95%
- ul
- margin: 0
- padding: 0
li
- margin: 0 7.5%
.image
- zoom: 0.4
+ zoom: 0.5
+
+@media screen and (max-width: 450px)
+ // Shrink features even more
+ .splash
+ section
+ margin: 2em 0
// Hide the links
.bottombar
@@ -962,7 +959,7 @@ nav li
// Shrink features even more
.splash
.overview
- margin: 0
+ margin: 0
// Reduce doc columns per row to 1
.docs
Oops, something went wrong.

0 comments on commit 58d3b6f

Please sign in to comment.